You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
204 lines
4.9 KiB
204 lines
4.9 KiB
<template>
|
|
<view class="main_background">
|
|
<view class="top">
|
|
<image :src="top_backgroun_image_src" mode="widthFix" class="top_image"></image>
|
|
<view class="top_action_panel">
|
|
<view class="top_action_item_panal" style="left: 24rpx;" @click="onTouchTopPanel(1)">
|
|
<image src="../../static/images/mainview/hezuo.png" style="width: 79rpx;height: 67rpx;position: absolute;right: 131rpx;top: 37rpx;"/>
|
|
<!--title-->
|
|
<u-text text="成为大富翁"
|
|
:bold="true"
|
|
size="28rpx"
|
|
color="#333333"
|
|
lineHeight="40rpx"
|
|
margin="123rpx 0 23rpx 0"
|
|
/>
|
|
</view>
|
|
<view class="top_action_item_panal" style="right: 24rpx;" @click="onTouchTopPanel(2)">
|
|
<image src="../../static/images/mainview/ditu.png" style="width: 79rpx;height: 67rpx;position: absolute;right: 131rpx;top: 37rpx;"/>
|
|
<!--title-->
|
|
<u-text text="大富翁区域"
|
|
:bold="true"
|
|
size="28rpx"
|
|
color="#333333"
|
|
lineHeight="40rpx"
|
|
margin="123rpx 0 23rpx 0"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--间隙-->
|
|
<u-gap height="58rpx"/>
|
|
<!--品牌项目-->
|
|
<view class="project">
|
|
<!--title-->
|
|
<u-text text="品牌项目" :bold="true"
|
|
color="#333333"
|
|
size="36rpx"
|
|
/>
|
|
<u-gap height="21rpx"/>
|
|
<!--品牌项目搞定了-->
|
|
<view v-if="mainPageData.brandpro.length == 0" style="width: 750rpx;height: 180rpx;background-color: #FFFFFF;position: relative;border-radius: 20rpx;">
|
|
<!--如果没有从服务器获取到数据的时候-->
|
|
</view>
|
|
<!--轮播图-->
|
|
<view style="margin-bottom: 20rpx;" v-else>
|
|
<u-swiper :list="mainPageData.brandpro"
|
|
keyName="picurl"
|
|
:showTitle="false"
|
|
:autoplay="true"
|
|
circular
|
|
imgMode="widthFix"
|
|
@change="e => project_indicator_current = e.current"
|
|
>
|
|
</u-swiper>
|
|
<u-gap height="15rpx"/>
|
|
<view
|
|
class="indicator"
|
|
>
|
|
<view
|
|
class="indicator__dot"
|
|
v-for="(item,index) in mainPageData.brandpro" :key="index"
|
|
:class="[index === project_indicator_current && 'indicator__dot__active']"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-gap height="40rpx"/>
|
|
<!-- 英雄榜-->
|
|
<HeroList/>
|
|
<u-gap height="45rpx"/>
|
|
<BusinessDynamics/>
|
|
<u-gap height="30rpx"/>
|
|
<CommonQuestion />
|
|
<u-gap height="75rpx"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import HeroList from "@/components/HeroList/HeroList.vue"
|
|
import CommonQuestion from "@/components/CommonQuestion/CommonQuestion.vue"
|
|
import BusinessDynamics from "@/components/BusinessDynamics/BusinessDynamics.vue"
|
|
export default {
|
|
name:"MainPage",
|
|
mixins: [uni.$u.mixin],
|
|
///注册组件
|
|
components:{
|
|
HeroList,
|
|
BusinessDynamics,
|
|
CommonQuestion
|
|
},
|
|
data() {
|
|
return {
|
|
mainPageData : getApp().globalData.mainPageData,
|
|
top_backgroun_image_src:'../../static/images/mainview/banner_bg.png',
|
|
///品牌项目当前轮播的indicator的索引
|
|
project_indicator_current : 0,
|
|
};
|
|
},
|
|
methods:{
|
|
onTouchTopPanel(id){
|
|
console.log(id);
|
|
if(id==1){
|
|
var mainPageData = getApp().globalData.mainPageData;
|
|
var code = this.mainPageData.partnerstatus;
|
|
uni.navigateTo({
|
|
url:"/pages/CooperationApply/CooperationApply",
|
|
})
|
|
/*if(code > 0 && code < 3){
|
|
if(code == 1){
|
|
uni.$u.toast("您已申请，请等待审核");
|
|
}else if(code == 2){
|
|
uni.$u.toast("您已成为官方合作人员");
|
|
}
|
|
}else{
|
|
uni.navigateTo({
|
|
url:"/pages/CooperationApply/CooperationApply",
|
|
})
|
|
}*/
|
|
}else{
|
|
uni.navigateTo({
|
|
url:'/pages/PartnerArea/PartnerArea'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main_background{
|
|
opacity: 1;
|
|
border-radius: 0px;
|
|
overflow: scroll;
|
|
touch-action: auto;
|
|
flex-direction: column;
|
|
display: flex;
|
|
margin: 0 auto;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
position: relative;
|
|
}
|
|
.top{
|
|
height: 589rpx;
|
|
position: relative;
|
|
&_image{
|
|
width: 750rpx;
|
|
height: 589rpx;
|
|
position: absolute;
|
|
top: 0rpx;
|
|
}
|
|
&_action_panel{
|
|
@include flex(row);
|
|
width: 750rpx;
|
|
height: 186rpx;
|
|
//background-color: #0081FF;
|
|
position: absolute;
|
|
bottom: 0rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
&_action_item_panal{
|
|
width: 341rpx;
|
|
height: 186rpx;
|
|
background-color: #FFFFFF;
|
|
position: absolute;
|
|
box-shadow: 0rpx 3rpx 5rpx rgba(0, 0, 0, 0.1);
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
//justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
///品牌项目
|
|
.project{
|
|
height: 360rpx;
|
|
position: relative;
|
|
margin-left: 24rpx;
|
|
margin-right: 24rpx;
|
|
//background-color: #2979FF;
|
|
}
|
|
///轮播的自定义indecator
|
|
.indicator{
|
|
@include flex(row);
|
|
justify-content: center;
|
|
&__dot {
|
|
height: 12rpx;
|
|
width: 12rpx;
|
|
border-radius: 100rpx;
|
|
background-color: #E2E2E2;
|
|
margin: 0 16rpx;
|
|
transition: background-color 0.3s;
|
|
|
|
&__active{
|
|
background-color: #D49B4B;
|
|
width: 17rpx;
|
|
height: 10rpx;
|
|
border-radius: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|