公司小程序
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

<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>