xiaochengxu/components/MainPage/MainPage.vue

<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" 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="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:{
			
		}
	}
</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>