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.
187 lines
4.4 KiB
187 lines
4.4 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 style="margin-bottom: 20rpx;">
|
|
<u-swiper :list="project_swiper_defines"
|
|
keyName="image"
|
|
:showTitle="false"
|
|
:autoplay="true"
|
|
circular
|
|
@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 project_swiper_defines" :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 config from "@/components/MainPage/MainPage.config.js"
|
|
import HeroList from "@/components/HeroList/HeroList.vue"
|
|
import CommonQuestion from "@/components/CommonQuestion/CommonQuestion.vue"
|
|
import BusinessDynamics from "@/components/BusinessDynamics/BusinessDynamics.vue"
|
|
var main_top_action_button_defines = config['main_top_action_button_defines'];
|
|
///品牌项目轮播图定义
|
|
var project_swiper_defines = config['project_swiper_defines'];
|
|
export default {
|
|
name:"MainPage",
|
|
mixins: [uni.$u.mixin],
|
|
///注册组件
|
|
components:{
|
|
HeroList,
|
|
BusinessDynamics,
|
|
CommonQuestion
|
|
},
|
|
data() {
|
|
return {
|
|
top_backgroun_image_src:'../../static/images/mainview/banner_bg.png',
|
|
main_top_action_button_defines,
|
|
project_swiper_defines,
|
|
///品牌项目当前轮播的indicator的索引
|
|
project_indicator_current : 0,
|
|
};
|
|
},
|
|
methods:{
|
|
onTouchTopPanel(id){
|
|
console.log(id);
|
|
if(id==1){
|
|
uni.navigateTo({
|
|
url:"/pages/CooperationApply/CooperationApply",
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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>
|
|
|