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

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