Homestay_gongzhonghao/pages/index/index.vue

<template>
	<view class="container">
		<!-- 上层部分 -->
		<view class="top-bg">
			<view class="top-title">靖安县乡村民宿</view>
			<!-- 具体数据 -->
			<view class="top-list-bg">
				<view class="minsuxinsi" v-for="(item,index) in minsu" :key="index">
					<view class="list-num">{{item.num}}</view>
					<view class="list-txt">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 订单状态占比图 -->
		<uni-section title="订单状态占比" type="line">
			<dingdanzhuangtai class="echarts">
			</dingdanzhuangtai>
		</uni-section>
		<!-- 民宿统计图 -->
		<uni-section title="民宿统计" type="line">
			<minsutongji class="echarts2">
			</minsutongji>
		</uni-section>
		<!-- 访问量趋势图 -->
		<uni-section title="访问量趋势" type="line">
			<!-- 切换 -->
			<view class="qiehuankuang">
				<view :class="{'xuanzhong':xuanzhong==true,'list':xuanzhong==false}">今日</view>
				<view class="list">本周</view>
				<view class="list">本月</view>
				<view class="list">本年</view>
			</view>
			<fangwenliang class="echarts3">
			</fangwenliang>
		</uni-section>
		<!-- 性别占比图 -->
		<uni-section title="性别占比" type="line">
			<!-- 切换 -->
			<view class="qiehuankuang">
				<view :class="{'xuanzhong3':xuanzhong==true,'list3':xuanzhong==false}">今天</view>
				<view class="list3">本月</view>
				<view class="list3">本年</view>
			</view>
			<xingbiezhanbi class="echarts4">
			</xingbiezhanbi>
		</uni-section>
		<!-- 年龄占比图 -->
		<uni-section title="年龄占比" type="line">
			<!-- 切换 -->
			<view class="qiehuankuang">
				<view :class="{'xuanzhong3':xuanzhong==true,'list3':xuanzhong==false}">今天</view>
				<view class="list3">本月</view>
				<view class="list3">本年</view>
			</view>
			<nianlingzhanbi class="echarts5">
			</nianlingzhanbi>
		</uni-section>
		<!-- 订单量排行 -->
		<view class="dingdan">
			<!-- 订单量排行图 -->
			<uni-section title="订单量排行" type="line">
				<!-- 切换 -->
				<view class="qiehuankuang">
					<view :class="{'xuanzhong3':xuanzhong==true,'list3':xuanzhong==false}">今天</view>
					<view class="list3">本月</view>
					<view class="list3">本年</view>
				</view>
				<dingdanliang class="dingdanliang">
				</dingdanliang>
			</uni-section>
			<view style="width:100%;height:20px"></view>
			<!-- 销售额排行图 -->
			<uni-section title="销售额排行" type="line">
				<!-- 切换 -->
				<view class="qiehuankuang">
					<view :class="{'xuanzhong3':xuanzhong==true,'list3':xuanzhong==false}">今天</view>
					<view class="list3">本月</view>
					<view class="list3">本年</view>
				</view>
				<xiaoshoue class="xiaoshoue">
				</xiaoshoue>
			</uni-section>
		</view>
	</view>
</template>

<script>
	import dingdanzhuangtai from '@/components/echarts/dingdanzhuangtai.vue'
	import minsutongji from '@/components/echarts/minsutongji.vue'
	import fangwenliang from '@/components/echarts/fangwenliang.vue'
	import xingbiezhanbi from '@/components/echarts/xingbiezhanbi.vue'
	import nianlingzhanbi from '@/components/echarts/nianlingzhanbi.vue'
	import dingdanliang from '@/components/liebiao/dingdanliang.vue'
	import xiaoshoue from '@/components/liebiao/xiaoshoue.vue'
	export default {
		components:{
			dingdanzhuangtai,
			minsutongji,
			fangwenliang,
			xingbiezhanbi,
			nianlingzhanbi,
			dingdanliang,
			xiaoshoue
		},
		data() {
			return {
				minsu:[
					{num:68,name:'民宿'},
					{num:38,name:'今日访问量'},
					{num:20,name:'今日销售额'},
					{num:30,name:'今日订单量'},
				],//民宿信息
				xuanzhong:true,
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width:100%;
		font-size: 14px;
		line-height: 24px;
		overflow-x:hidden;
	}
	/* 上层 */
	.top-bg{
		height:200px;
		width:100%;
		background:linear-gradient(-61.2185deg, rgb(75, 152, 237) 0%, rgb(72, 198, 239) 100%);;
	}
	.top-title{
		color:#FFFFFF;
		font-size:18px;
		padding-top:30px;
		text-align:center;
	}
	/* 具体数据 */
	.top-list-bg{
		width:90%;
		height:80px;
		background:#FFFFFF;
		margin:30px 0 0 20px;
		border-radius:5px;
		display:flex;
	}
	.minsuxinsi{
		position: relative;
		// margin-top: 328rpx;
		display: inline-block;
		width:25%;
		text-align: center;
		font-size:24rpx;
	}
	.list-num{
		color:rgb(77, 139, 255);
		margin-top: 10px;
	}
	.list-txt{
		margin-top: 5px;
		color:rgb(51, 51, 51);
	}
	// uni-section样式
	.uni-section[data-v-f7ca1098] {
	    background-color: #fff;
		margin-top: 20px;
		height:280px;
	}
	.uni-section .uni-section-header__content[data-v-f7ca1098] {
	    display: flex;
	    flex-direction: column;
	    flex: 1;
	    color: #333;
	    font-weight: 700;
	}
	// >>>.uni-section .uni-section-header__content[data-v-f7ca1098] {
	//     display: flex;
	//     flex-direction: column;
	//     flex: 1;
	//     color: #333;
	//     font-weight: 700;
	// }
	// 订单状态图
	.echarts{
		width:100%;
		height:200px;
	}
	//民宿统计图
	.echarts2{
		width:100%;
		height:280px;
	}
	//访问量趋势图
	.qiehuankuang{
		width:225px;
		height:30px;
		margin:-30px 0 0 160px;
		line-height:30px;
		display: flex;
		font-size:28rpx;
	}
	.list{
		width:25%;
		height:100%;
		border:1px solid rgba(175, 175, 175, 0.7);
		text-align:center;
		color: rgb(119, 119, 119)
	}
	.xuanzhong{
		width:25%;
		height:100%;
		border:1px solid rgb(128, 128, 255);
		text-align:center;
		background-color:rgb(128, 128, 255);
		color:#FFFFFF;
	}
	// 三等份
	.list3{
		width:33%;
		height:100%;
		border:1px solid rgba(175, 175, 175, 0.7);
		text-align:center;
		color: rgb(119, 119, 119)
	}
	.xuanzhong3{
		width:33%;
		height:100%;
		border:1px solid rgb(128, 128, 255);
		text-align:center;
		background-color:rgb(128, 128, 255);
		color:#FFFFFF;
	}
	.echarts3{
		width:100%;
		height:230px;
	}
	//性别占比图
	.echarts4{
		width:100%;
		height:230px;
	}
	//年龄占比图
	.echarts5{
		width:100%;
		height:230px;
	}
	// 订单量排行
	.dingdan{
		background-color: #fff;
		margin-top: 20px;
		height:150%;
	}
	//订单量排行图
	.dingdanliang{
		width:100%;
		height:100%;
		margin-top:10px;
	}
	// 销售额排行图
	.xiaoshoue{
		width:100%;
		height:100%;
		margin-top:10px;
	}
</style>