我是个攻城狮
381 lines
9.0 KiB
Vue
381 lines
9.0 KiB
Vue
<template>
|
||
<Layout :index="1" :banner="0" :imgs="0" :img="'/static/img/index/invest_banner.png'" :titles="'我要资金'" :title_content="'我要资金'">
|
||
<view class="content-game bgc-02">
|
||
<view class="invest_title">
|
||
<image class="invest_tj" src="../static/img/index/flow.png"></image>
|
||
</view>
|
||
<view class="content-invest">
|
||
<image class="steps" src="../static/img/index/step1.png"></image>
|
||
<image class="step" src="../static/img/index/step.png"></image>
|
||
<image class="steps" src="../static/img/index/step2.png"></image>
|
||
<image class="step" src="../static/img/index/step.png"></image>
|
||
<image class="steps" src="../static/img/index/step3.png"></image>
|
||
<image class="step" src="../static/img/index/step.png"></image>
|
||
<image class="steps" src="../static/img/index/step4.png"></image>
|
||
</view>
|
||
|
||
<view class="content-img">
|
||
<image class="xian" src="../static/img/index/xuxian.png" mode="widthFix"></image>
|
||
<view class="introduce_content">
|
||
<view class="introduce">
|
||
<view class="introduce_title">基于游戏全生命周期可信数据，平台入驻金融机构将为之提供游戏产品小微金融、
|
||
供应链金融、游戏研发发行项目贷款服务及游戏产品质押融资、游戏产品资产证券化等创新业务。
|
||
</view>
|
||
<view class=" consult" @tap="tob()">立即咨询</view>
|
||
</view>
|
||
<view class="introduce_img">
|
||
<view class="introduce_imgs">
|
||
<image class="introduce_imgurl" src="../static/img/index/ms.png" mode="heightFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="fg">
|
||
<view class="invest_title">
|
||
<image class="invest_tjs" src="../static/img/index/institution.png"></image>
|
||
</view>
|
||
<view class="content-invests">
|
||
<view class="gourls"><image class="imgs" src="../static/img/index/rz1.png"></image></view>
|
||
<view class="gourls"><image class="imgs" src="../static/img/index/rz2.png"></image></view>
|
||
<view class="gourls"><image class="imgs" src="../static/img/index/rz3.png"></image></view>
|
||
<view class="gourls"><image class="imgs" src="../static/img/index/rz4.png"></image></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<Kefu></Kefu>
|
||
</Layout>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import Layout from './part/layout.vue';
|
||
import Kefu from './part/kefu.vue';
|
||
export default {
|
||
components:{
|
||
Layout,
|
||
Kefu
|
||
},
|
||
data(){
|
||
return {
|
||
|
||
}
|
||
},
|
||
created() {
|
||
// this.getZhishu();
|
||
},
|
||
beforeDestroy() {
|
||
},
|
||
methods:{
|
||
tob(){
|
||
window.scrollTo(0, document.body.scrollHeight);
|
||
},
|
||
getZhishu(){
|
||
this._get('cms.cms/home_zx',{
|
||
|
||
},res=>{
|
||
if(res.code==1){
|
||
let list = res.data.lists;
|
||
let arr = [];
|
||
list.forEach(e=>{
|
||
let categories = e.dates.split(',');
|
||
let data = e.value.split(',');
|
||
let max = Math.ceil(Math.max(...data)/5)*5;
|
||
let eoptsData = this.$mUtils.deepClone(eopts);
|
||
eoptsData.yAxis[0].max = max;
|
||
arr.push({
|
||
name: e.name,
|
||
chartData: {
|
||
categories: categories,
|
||
series: [
|
||
{
|
||
name: e.name,
|
||
data: data,
|
||
color: '#ffb21c',
|
||
linearGradient: [0,0,0,1,[{offset: 0, color: "#FBF4D7"},{ offset: 1, color: "#FFFFFF" }]],
|
||
symbol:'circle',
|
||
symbolSize: 8,
|
||
markLine: {
|
||
data: [
|
||
{type: 'average', name: '平均值'}
|
||
],
|
||
label: {
|
||
show: false
|
||
}
|
||
},
|
||
barWidth: '50%',
|
||
type: 'line'
|
||
}
|
||
]
|
||
},
|
||
eopts: eoptsData
|
||
})
|
||
});
|
||
this.chartsList = arr;
|
||
if(this.chartsList.length==1){
|
||
this.listClass = ['left1 zindex'];
|
||
}else if(this.chartsList.length==2){
|
||
this.listClass = ['left1','left2 zindex'];
|
||
}else if(this.chartsList.length==3){
|
||
this.listClass = ['left1','left2','left3 zindex'];
|
||
}else if(this.chartsList.length==4){
|
||
this.listClass = ['left1','left2','left3','center zindex'];
|
||
}else if(this.chartsList.length==5){
|
||
this.listClass = ['left1','left2','left3','center','right1 zindex'];
|
||
}else if(this.chartsList.length==6){
|
||
this.listClass = ['left1','left2','left3','center','right1','right2'];
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getProduct(){
|
||
this._get('product.indexs/lists',{
|
||
page: 1,
|
||
list_rows: 50,
|
||
},res=>{
|
||
this.productList = res.data.list.data;
|
||
})
|
||
},
|
||
getArticle(category_id=3,list_rows=20){
|
||
this._get('article.article/index',{
|
||
page: 1,
|
||
list_rows: list_rows,
|
||
category_id: category_id,
|
||
is_home: 1,
|
||
},res=>{
|
||
if(res.code==1){
|
||
if(category_id==3){
|
||
this.zhishuList = res.data.list.data;
|
||
}else if(category_id==1){
|
||
this.shichangList = res.data.list.data;
|
||
}else if(category_id==2){
|
||
this.wenhuanList = res.data.list.data;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getStore(){
|
||
this._get('store.store/lists',{
|
||
page: 1,
|
||
list_rows: 20,
|
||
},res=>{
|
||
if(res.code==1){
|
||
this.storeList = res.data.list.data;
|
||
}
|
||
})
|
||
},
|
||
goDetail(e){
|
||
this.$router.push({
|
||
path: 'articleDetails',
|
||
query: {
|
||
id: e.article_id,
|
||
index: 0
|
||
}
|
||
})
|
||
},
|
||
goJianjie(e){
|
||
this.$router.push({
|
||
path: 'companyProflie',
|
||
query:{
|
||
id: e.store_id,
|
||
index: 0
|
||
}
|
||
})
|
||
},
|
||
changeNum(){
|
||
this.listClass.unshift(this.listClass[this.listClass.length-1]);
|
||
this.listClass.splice(this.listClass.length-1,1);
|
||
},
|
||
setClass(index){
|
||
if(index==0){
|
||
return this.listClass[0];
|
||
}else if(index==1){
|
||
return this.listClass[1];
|
||
}else if(index==2){
|
||
return this.listClass[2];
|
||
}else if(index==3){
|
||
return this.listClass[3];
|
||
}else if(index==4){
|
||
return this.listClass[4];
|
||
}else if(index==5){
|
||
return this.listClass[5];
|
||
}
|
||
},
|
||
// 鼠标移入事件
|
||
mouseover(e){
|
||
this.is_xuan = false;
|
||
},
|
||
// 鼠标移出事件
|
||
mouseleave(e){
|
||
this.is_xuan = true;
|
||
},
|
||
change(e){
|
||
this.currentIndex = e.detail.current;
|
||
},
|
||
changeSub(){
|
||
if(this.currentIndex<=0){
|
||
this.currentIndex = this.storeList.length-1;
|
||
}else{
|
||
this.currentIndex--;
|
||
}
|
||
},
|
||
changeAdd(){
|
||
if(this.currentIndex>=(this.storeList.length-1)){
|
||
this.currentIndex = 0;
|
||
}else{
|
||
this.currentIndex++;
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content-game{
|
||
width: 100%;
|
||
min-height: 800px;
|
||
margin: 0 auto;
|
||
.content-img{
|
||
width: 1600px;
|
||
margin:0 auto;
|
||
margin-top: 80px;
|
||
text-align: center;
|
||
.xian{
|
||
width: 1600px;
|
||
margin: 0 auto;
|
||
}
|
||
.introduce_content{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 40px 0;
|
||
}
|
||
.introduce{
|
||
width: 533px;
|
||
height: 96px;
|
||
// margin-left: 130px;
|
||
// margin-right: 84px;
|
||
|
||
.introduce_title{
|
||
font-size: 24px;
|
||
font-weight: 400;
|
||
color: #E9E9E9;
|
||
line-height: 35px;
|
||
text-align: left;
|
||
margin-top: 40px;
|
||
}
|
||
.consult{
|
||
width: 168px;
|
||
height: 45px;
|
||
border: 1px solid #F48612;
|
||
border-radius: 23px;
|
||
font-size: 21px;
|
||
font-weight: 400;
|
||
color: #EF8312;
|
||
line-height: 45px;
|
||
text-align: center;
|
||
margin-top: 30px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.introduce_img{
|
||
width: 600px;
|
||
height: 340px;
|
||
background: #252527;
|
||
border: 1px solid #383838;
|
||
border-radius: 11px;
|
||
.introduce_imgs{
|
||
width: 600px;
|
||
height: 340px;
|
||
background: #383838;
|
||
border-radius: 11px;
|
||
position: relative;
|
||
top: -10px;
|
||
left: -10px;
|
||
}
|
||
.introduce_imgurl{
|
||
height: 320px;
|
||
transition: transform 1.2s ease;
|
||
margin-top: 8px;
|
||
border-radius: 10px;
|
||
}
|
||
// .introduce_imgurl:active {
|
||
// transform: scale(2.5);
|
||
// z-index: 999;
|
||
// }
|
||
// .introduce_imgurl:hover {
|
||
// transform: scale(2.5);
|
||
// z-index: 999;
|
||
// }
|
||
}
|
||
.introduce_ren{
|
||
width: 403px;
|
||
height: 519px;
|
||
margin-left: -40px;
|
||
.ren{
|
||
margin-top: 100px;
|
||
width: 403px;
|
||
height: 419px;
|
||
}
|
||
}
|
||
|
||
}
|
||
.content-invest{
|
||
width: 1600px;
|
||
margin:0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.step{
|
||
width: 55px;
|
||
height: 19px;
|
||
}
|
||
.steps{
|
||
width: 234px;
|
||
height: 157px;
|
||
}
|
||
|
||
}
|
||
.fg{
|
||
box-shadow: 0px 0px 57px 0px rgba(239,131,18,0.15);
|
||
border-radius: 5px;
|
||
}
|
||
.content-invests{
|
||
width: 1600px;
|
||
margin:0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-bottom: 70px;
|
||
|
||
.gourls{
|
||
width: 353px;
|
||
height: 95px;
|
||
background: #252527;
|
||
border: 1px solid #383838;
|
||
border-radius: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.imgs{
|
||
width: 257px;
|
||
height: 56px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.invest_title{
|
||
padding: 71px 160px 47px 160px;
|
||
display: flex;
|
||
align-items:center;
|
||
justify-content: space-between;
|
||
.invest_tj{
|
||
width: 204px;
|
||
height: 82px;
|
||
}
|
||
.invest_tjs{
|
||
width: 327px;
|
||
height: 82px;
|
||
}
|
||
}
|
||
</style>
|