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.
185 lines
4.5 KiB
185 lines
4.5 KiB
<template>
|
|
<view class="main_background">
|
|
<!--背景色-->
|
|
<view style="background-color: #F6F6F6;position: fixed;top: 0;bottom: 0;right: 0;left: 0;z-index: -1;"></view>
|
|
<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" v-for="item in main_top_action_button_defines" :key="item.id" :style="item.style">
|
|
<image :src="item.icon" style="width: 79rpx;height: 67rpx;position: absolute;right: 131rpx;top: 37rpx;"/>
|
|
<!--title-->
|
|
<u-text :text="item.title"
|
|
: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="30rpx"/>
|
|
<BusinessDynamics/>
|
|
<u-gap height="30rpx"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import datas from "./main.config.js"
|
|
import HeroList from "@/components/HeroList/HeroList.vue"
|
|
import BusinessDynamics from "@/components/BusinessDynamics/BusinessDynamics.vue"
|
|
var main_top_action_button_defines = datas['main_top_action_button_defines'];
|
|
///下方导航栏配置
|
|
var main_bottom_tabbar_defines = datas['main_bottom_tabbar_defines'];
|
|
///品牌风采和品牌动态的定义
|
|
var tab_pinpai_fengcai_dongtai_defines = datas['tab_pinpai_fengcai_dongtai_defines'];
|
|
///测试用数据
|
|
var tab_item_content_defines_test = datas['tab_item_content_defines_test'];
|
|
///品牌项目轮播图定义
|
|
var project_swiper_defines = datas['project_swiper_defines'];
|
|
|
|
|
|
export default {
|
|
mixins: [uni.$u.mixin],
|
|
///注册组件
|
|
components:{
|
|
HeroList,
|
|
BusinessDynamics
|
|
},
|
|
data() {
|
|
return {
|
|
///下方菜单选中了哪一个
|
|
bottom_selected_index:0,
|
|
top_backgroun_image_src:'../../static/images/mainview/banner_bg.png',
|
|
main_top_action_button_defines,
|
|
main_bottom_tabbar_defines,
|
|
tab_pinpai_fengcai_dongtai_defines,
|
|
///当前选中的[品牌风采，业务动态]选项卡的哪一项
|
|
current_pinpai_selected_index : 0,
|
|
tab_item_content_defines_test,
|
|
project_swiper_defines,
|
|
///品牌项目当前轮播的indicator的索引
|
|
project_indicator_current : 0,
|
|
}
|
|
},
|
|
methods: {
|
|
onBottomClicked(name){
|
|
this.bottom_selected_index = name;
|
|
}
|
|
}
|
|
}
|
|
</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>
|
|
|