jp-floorlock-manage/pages/index/index.vue

<template>
	<view>
		<u-navbar v-show="false" title="首页" title-color="#101010"></u-navbar>

		<view class="navbar">
			智泊e家 运管端

		</view>
		<view class="tabs-box">

		</view>
		<view class="main">


			<view class="statistics ">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						综合统计
					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body1">
						<view class="body1pie-table">
							<view class="tr">
								<view class="td td1">
									<view id="body1pie1" class="body1pie">

									</view>
								</view>
								<view class="td td2">
									<view class="td td3">
										<view class="td td4">空闲<span class="body1pie-num color53B56B">5</span>台</view>
										<view class="td td4">占用<span class="body1pie-num colorAAAAAA">5</span>台</view>
									</view>
									<view class="td td3">

										<view class="td td4">公共车位<span class="body1pie-num colorEF8132">5</span>台</view>
										<view class="td td4">私家车位<span class="body1pie-num colorDC4441">5</span>台</view>
									</view>
								</view>

							</view>

							<view class="tr">
								<view class="td td1">
									<view id="body1pie2" class="body1pie">

									</view>
								</view>
								<view class="td td2">
									<view class="td td3">

										<view class="td td4">正常<span class="body1pie-num color53B56B">5</span>台</view>
										<view class="td td4">离线<span class="body1pie-num colorAAAAAA">5</span>台</view>
									</view>
									<view class="td td3">

										<view class="td td4">故障<span class="body1pie-num colorEF8132">5</span>台</view>
										<view class="td td4">低电量<span class="body1pie-num colorDC4441">5</span>台</view>
									</view>
								</view>
							</view>

							<view class="tr">
								<view class="td td1">
									<view id="body1pie3" class="body1pie">

									</view>
								</view>
								<view class="td td2">
									<view class="td td3">

										<view class="td td4">管理员<span class="body1pie-num color307AF6">5</span>人</view>
										<view class="td td4">白名单<span class="body1pie-num color53B56B">5</span>人</view>
									</view>
									<view class="td td3">

										<view class="td td4">游客<span class="body1pie-num colorEF8375">5</span>人次</view>
										<view class="td td4"></view>
									</view>
								</view>

							</view>


						</view>
					</jpContent>
				</view>
			</view>


			<view class="statistics ">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						<view>时空矩阵图</view>
						
						<view class="tag">2025年1月1日<u-icon name="arrow-down"></u-icon></view>
						
					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body5">
						<view class="body5main">

							<view id="body5echart" class="body5class">

							</view>

						</view>



					</jpContent>
				</view>
			</view>
			
			<view class="statistics ">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						<view>车位异常记录</view>
						
						<view class="check-all" >查看全部<u-icon name="arrow-right"></u-icon></view>
						
					</view>
			
				</view>
			
				<view class="contentBody">
					<jpContent :status="jpContentMap.body6">
						<view class="body6main">
							<view class="line"  v-for="(item,index) in abnormalRecordsList" :key="index">
								<view class="abnormal-item">
								<!-- @click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)"
								 -->
									<view class="item-title">
											
										<view class="name">
											<span v-if="item.level==1" class="level level1 ">一级</span>
											<span v-if="item.level==2"  class="level level2">二级</span>
											
											{{item.content}}
										</view>
										<view class="date" style="display: flex;    justify-content: space-between;margin-top: 4rpx;">
											<view>{{item.title}}</view>
											<view>{{item.createTime}}</view>
											
										</view>
									</view>
								
								</view>
								<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
							</view>
			
						</view>
			
			
			
					</jpContent>
				</view>
			</view>

			<view class="statistics ">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						<view>车位平均占用率(%)</view>
						<view class="tag">2025年1月<u-icon name="arrow-down"></u-icon></view>

					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body2">
						<view class="body2lineChart">

							<view id="body2line1" class="body2line">

							</view>

						</view>



					</jpContent>
				</view>
			</view>

			<view class="statistics ">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						<view>高频使用时段分布</view>

					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body3">
						<view class="body3barChart">

							<view id="body3bar1" class="body3bar">

							</view>

						</view>



					</jpContent>
				</view>
			</view>

			<view class="statistics ">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						<view>用户停留时长分群特征</view>

					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body4">
						<view class="body4pieChart">

							<view id="body4pie1" class="body4pie">

							</view>

						</view>



					</jpContent>
				</view>
			</view>
			
			
			<view class="statistics ">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						<view>设备列表</view>
						
						<view class="check-all"  @click="gotoUrl('/pages/deviceTab/index')"
						>查看全部<u-icon name="arrow-right"></u-icon></view>
						
					</view>
			
				</view>
			
				<view class="contentBody">
					<jpContent :status="jpContentMap.body7">
						<view class="body7main">
							<view class="line"  v-for="(item,index) in equipmentList"
							 @click="gotoUrl('/pages/deviceTab/dataLock?id='+item.id)"
							 :key="index">
								<view class="item" >
								<!-- 
								 -->
									<view class="item-title">
										A01

									</view>
									<view class="item-tags">
										<view class="tag tag1">
											公共车位

										</view>
										<view class="tag">
											在线

										</view>
										<view class="tag">
											空闲
										</view>
									</view>
								
								</view>
								<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
							</view>
			
						</view>
			
			
			
					</jpContent>
				</view>
			</view>

		</view>
		<tabbar :current="0"></tabbar>

	</view>
</template>

<script>
	import Tabbar from '@/components/Tabbar.vue'
	import jpContent from '@/components/JPcontent.vue'
	import * as echarts from 'echarts';

	import * as API from '@/apis/pagejs/index.js'

	export default {
		components: {
			Tabbar,
			jpContent
		},
		data() {
			return {
				isReady: false,
				echartsList: {},
				equipmentList:[{}],
				abnormalRecordsList:[
					{
						level:1,
						content:"1111111",
						title:"11",
						createTime:"123:123"
					},
					{
						level:2,
						content:"1111111",
						title:"11",
						createTime:"123:123"
					}
				],
				jpContentMap: {
					body1: 2,
					body2: 2,
					body3: 2,
					body4: 2,
					body5: 2,
					body6: 2,
					body7: 2,
					body8: 2,
					body9: 2,
					body10: 2,
				}
			}
		},
		onLoad() {

		},
		onReady() {
			this.getfindByOpenId();
		},
		methods: {
			init() {
				// this.getbody2()
				// this.getbody3()
				// this.getbody4()

				this.getbody5()

				// this.getbody1pie1()
				// this.getbody1pie2()
				// this.getbody1pie3()
			},
			getbody5() {
				var key = "body5echart"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(300 * 2),
						height: uni.upx2px(170 * 2)
					})

				}
				myChart.clear()


				// 数据
				var data1 = [
					
					[0, 0, 1], // 1点
					[1, 0, 1], // 2点
					[2, 0, 1], // 3点
				
					[6, 0, 1], // 7点
					[7, 0, 1], // 8点

				];
				var data2 = [

					[2, 1, 2], // 3点
					[3, 1, 2], // 4点
					[4, 1, 2], // 5点
					[5, 1, 2], // 6点
					[6, 1, 2], // 7点
					[7, 1, 2], // 8点
					[8, 1, 2], // 9点
					[9, 1, 2], // 10点
					[10, 1, 2], // 11点
					[11, 1, 2] // 12点
				];

				// 颜色映射
				var colorMap = [
					 '#ffffff', 
					 '#FFA500', 
					 '#00FF00',
					 '#F44336', 
					 '#E91E63' ,
					 '#9C27B0', 
					 '#673AB7' ,
					 '#3F51B5', 
					 '#2196F3' ,
					 '#03A9F4', 
					 '#00BCD4' ,
					 '#009688', 
					 '#CDDC39' ,
					 '#FFEB3B' ,
					 '#FFC107' ,
					 '#FF9800' ,
					 '#FF5722' ,
					 '#795548' ,
					 '#607D8B' 
				];

				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						top: 30,
						left: -10,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					legend: {
						data: ['A停车场', 'B停车场']
					},
					xAxis: {
						type: 'category',
						data: ['1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点']
					},
					yAxis: {
						type: 'category',

					},
					series: [{
						type: 'custom',
						"name": "A停车场",
						itemStyle: {
							color: colorMap[1]
						},
						renderItem: function(params, api) {
							var xIndex = api.value(0); // x轴索引
							var yIndex = api.value(1); // y轴索引
							var value = api.value(2); // 值

							// 获取颜色
							var color = colorMap[value] || '#ffffff';

							// 计算矩形的位置和大小
							var x = api.coord([xIndex, yIndex])[0];
							var y = api.coord([xIndex, yIndex])[1];
							var width = api.size([1, 0])[0];
							var height = api.size([0, 1])[1];

							return {
								type: 'rect',

								shape: {
									x: x,
									y: y - uni.upx2px(40),
									width: width,
									height: height - uni.upx2px(30),
								},
								style: {
									fill: color
								}
							};
						},
						data: data1
					}, {
						type: 'custom',
						"name": "B停车场",
						itemStyle: {
							color: colorMap[2]
						},
						renderItem: function(params, api) {
							var xIndex = api.value(0); // x轴索引
							var yIndex = api.value(1); // y轴索引
							var value = api.value(2); // 值

							// 获取颜色
							var color = colorMap[value] || '#ffffff';

							// 计算矩形的位置和大小
							var x = api.coord([xIndex, yIndex])[0];
							var y = api.coord([xIndex, yIndex])[1];
							var width = api.size([1, 0])[0];
							var height = api.size([0, 1])[1];

							return {
								type: 'rect',

								shape: {
									x: x,

									y: y - uni.upx2px(40),
									width: width,
									height: height - uni.upx2px(30),
								},
								style: {
									fill: color
								}
							};
						},
						data: data2
					}]
				};

				//console.log(option)
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			getbody4() {
				var key = "body4pie1"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(300 * 2),
						height: uni.upx2px(170 * 2)
					})

				}
				myChart.clear()


				var option = {

					grid: {
						top: 20,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					series: [{

						type: 'pie',
						radius: ['80%', '50%'],
						radius: [45, 60],
						data: [{
								value: 1048,
								name: '0.5小时\n20%'
							},
							{
								value: 735,
								name: '2小时\n10%'
							},
							{
								value: 580,
								name: '2-6小时\n30%'
							},
							{
								value: 484,
								name: '6小时以上\n40%'
							},

						]

					}]
				};
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			getbody3() {
				var key = "body3bar1"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(300 * 2),
						height: uni.upx2px(170 * 2)
					})

				}
				myChart.clear()

				var data1 = ['0-7点', '7-14点', '14-24点']
				var axisLabel = {
					rotate: 40,
					interval: 0,
					textStyle: {
						color: "#333"
					}
				}
				if (data1.length < 7) {
					axisLabel = {
						interval: 0,
						textStyle: {
							color: "#333"
						},
					}
				} else {
					axisLabel.interval = 0;
				}
				var option = {
					xAxis: {
						type: 'category',
						data: data1,
						axisLabel: axisLabel,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					yAxis: {
						type: 'value'
					},
					grid: {
						top: 20,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					series: [{
						itemStyle: {
							color: "#5A88E5"
						},
						data: [120, 200, 150],
						type: 'bar'
					}]
				};
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			getbody2() {
				var key = "body2line1"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(300 * 2),
						height: uni.upx2px(170 * 2)
					})

				}
				myChart.clear()
				var data1 = ['0-2点', '2-4点', '4-6点', '6-8点', '8-10点', '10-12点', '12-14点', '14-16点', '16-18点', '18-20点',
					'20-22点', '22-24点'
				]
				var axisLabel = {
					rotate: 40,
					interval: 0,
					textStyle: {
						color: "#333"
					}
				}
				if (data1.length < 7) {
					axisLabel = {
						interval: 0,
						textStyle: {
							color: "#333"
						},
					}
				} else {
					axisLabel.interval = 0;
				}
				var option = {
					xAxis: {
						type: 'category',
						data: data1,
						axisLabel: axisLabel,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					yAxis: {
						type: 'value'
					},
					grid: {
						top: 20,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					series: [{
						areaStyle: {},
						itemStyle: {
							color: "#BBD4FB"
						},
						label: {
							show: true,
							position: 'top',
							color: "#307AF6"
						},
						data: [50, 30, 24, 18, 35, 47, 50, 30, 24, 28, 35, 47],
						type: 'line'
					}]
				};
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			getbody1pie1() {
				var img = require("@/assets/img/index/pie1-1.svg")
				var key = "body1pie1"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(88),
						height: uni.upx2px(88)
					})

				}
				myChart.clear()
				var option = {

					series: [{
						silent: true,
						type: 'pie',
						radius: ['70%', '100%'],
						label: {
							show: false,
						},

						data: [{
								value: 1048,
								itemStyle: {
									color: '#AAAAAA'
								}
							},
							{
								value: 735,
								itemStyle: {
									color: '#53B56B'
								}
							}
						]
					}],
					grid: {
						top: 0,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					graphic: [{
						type: 'image',
						id: 'logo',
						left: 'center',
						top: 'center',
						style: {
							image: img, // 图片路径
							width: uni.upx2px(40),
							height: uni.upx2px(40)
						}
					}]
				}
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			getbody1pie2() {
				var img = require("@/assets/img/index/pie1-2.svg")

				var key = "body1pie2"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(88),
						height: uni.upx2px(88)
					})

				}
				myChart.clear()
				var option = {

					series: [{
						silent: true,
						type: 'pie',
						radius: ['70%', '100%'],
						label: {
							show: false,
						},

						data: [{
								value: 1048,
								itemStyle: {
									color: '#AAAAAA'
								}
							},
							{
								value: 735,
								itemStyle: {
									color: '#53B56B'
								}
							},
							{
								value: 1048,
								itemStyle: {
									color: '#EF8132'
								}
							},
							{
								value: 735,
								itemStyle: {
									color: '#DC4441'
								}
							}
						]
					}],
					grid: {
						top: 0,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					graphic: [{
						type: 'image',
						id: 'logo',
						left: 'center',
						top: 'center',
						style: {
							image: img, // 图片路径
							width: uni.upx2px(40),
							height: uni.upx2px(40)
						}
					}]
				}
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			getbody1pie3() {
				var img = require("@/assets/img/index/pie1-3.svg")

				var key = "body1pie3"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(88),
						height: uni.upx2px(88)
					})

				}
				myChart.clear()
				var option = {

					series: [{
						type: 'pie',
						silent: true, // 禁用交互效果

						radius: ['70%', '100%'],
						label: {
							show: false,
						},

						data: [{
								value: 735,
								itemStyle: {
									color: '#53B56B'
								}
							},
							{
								value: 735,
								itemStyle: {
									color: '#EF8375'
								}
							},
							{
								value: 735,
								itemStyle: {
									color: '#307AF6'
								}
							}
						]
					}],
					grid: {
						top: 0,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					graphic: [{
						type: 'image',
						id: 'logo',
						left: 'center',
						top: 'center',
						style: {
							image: img, // 图片路径
							width: uni.upx2px(40),
							height: uni.upx2px(40)
						}
					}]
				}
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},

			getfindByOpenId() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.findByOpenId({
					openId: this.jphelp.getOpenId(),
				}).then((response) => {

					uni.hideLoading();
					this.isReady = true;
					this.loginset(response)
					try {
						this.init()
					} catch (e) {
						console.log(e)
						uni.showToast({
							title: e,
							icon: "none"
						})
					}

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
					uni.redirectTo({
						url: '/pages/login/login'
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.color307AF6 {
		color: #307AF6
	}

	.color53B56B {
		color: #53B56B
	}

	.colorAAAAAA {
		color: #AAAAAA
	}

	.colorEF8132 {
		color: #EF8132
	}

	.colorDC4441 {
		color: #DC4441
	}

	.colorEF8375 {
		color: #EF8375
	}

	.body1pie-table {
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		font-weight: bold;

		.tr {
			.td1 {
				padding-right: 24rpx;
			}

			display: flex;
			margin-bottom: 40rpx;

			.td2 {

				width: 100%;

				.td3 {
					display: flex;

					.td4 {
						width: 120px;
					}
				}
			}
		}

		// td{
		// 	padding-right: 24rpx;

		// }
		.body1pie {}

		.body1pie-num {
			margin: 0 8rpx;
		}
	}

	// 导航栏
	.navbar {

		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
		background-color: rgba(22, 119, 255, 1);
		color: #fff;
		line-height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 36rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999999;
		font-weight: bold;

	}

	.main {
		border-radius: 16px 16px 0px 0px;
		background: linear-gradient(180deg, rgba(242, 244, 246, 1) 61%, rgba(255, 255, 255, 0) 100%);
		margin-top: -24rpx;
		padding: 32rpx;

		.statistics {
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
			margin-bottom: 24rpx;
			padding: 40rpx;

			.title {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;

				.img {
					width: 36rpx;
					height: 36rpx;
					vertical-align: middle;
					border-radius: 999px;

				}

				.change {
					display: flex;
					align-items: center;

					.change-img {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
					}

					text {

						margin-left: 8rpx;
					}
				}


				.text {
					color: rgba(16, 16, 16, 1);
					font-size: 36rpx;
					margin-left: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;

					.tag {
						border-radius: 4px;
						border: 1px solid rgba(187, 187, 187, 1);
						color: rgba(51, 51, 51, 1);

						font-size: 24rpx;
						padding: 1px 8rpx;
						margin-left: 8rpx;
					}

				}

				.change {
					margin-left: 16rpx;
					font-size: 24rpx;
					color: #838383;

				}

				.check-all {
					margin-left: auto;
					color: rgba(131, 131, 131, 1);
					font-size: 24rpx;
				}
			}
		}

		.statistics-end {
			padding-bottom: 0;
		}
	}

	.tabs-box {
		padding: 32rpx 0;
		margin-top: 66rpx;
		padding-right: 32rpx;
		background-color: rgba(22, 119, 255, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tabs {
			width: 97%;
		}

		.more {
			padding-right: 12rpx;
		}

	}
	.body6main{
		.line{
			    display: flex;
			    justify-content: space-between;
		}
			.abnormal-item:last-of-type {
				border-bottom: none !important;
				padding-bottom: 0;
			}

			.abnormal-item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16rpx;
				border-bottom: 1px solid rgba(245, 245, 245, 1);


				.item-title {
					.level{
						color:#fff;
						
						    border-radius: 8rpx;
						    font-weight: 400;
						    padding: 4rpx 8rpx;
						    font-size: 22rpx;
							margin-right: 2px;
					}
					.level1{
						background: red;
					}
					.level2{
						background-color: rgba(255,123,0,1);
					}

					color: rgba(51, 51, 51, 1);
					    width: 100%;
					.img {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}

					.name {
						color: rgba(51, 51, 51, 1);
						font-weight: bold;
						    overflow: hidden;
						    white-space: nowrap;
						    text-overflow: ellipsis;
					}

					.date {
						color: rgba(119, 119, 119, 1);
						font-size: 24rpx;
					}
				}

				.item-value {
					text-align: right;
					display: flex;
					align-items: center;

					.more {
						margin-left: 8rpx;
					}

					.value1 {
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
					}

					.value2 {
						color: rgba(119, 119, 119, 1);
						font-size: 24rpx;
					}
				}
			}
		}
		
		.body7main{
			border-radius: 4px;
			background-color: rgba(245,245,245,1);
			padding:32rpx;
			.line{
				display: flex;
				    display: flex;
				    justify-content: space-between;
					.item-title{
						color: rgba(51,51,51,1);
						font-size: 28rpx;

					}
					.item-tags{
						    display: flex;
						.tag{
							border-radius: 4px;
							
							background-color: rgba(39,177,72,1);
							color: rgba(255,255,255,1);
							font-size: 20rpx;
							padding:2rpx 8rpx;
							margin-right: 8rpx;
						}
						.tag1{
							background-color: rgba(22,119,255,1);
						}
					}
			}
		}
</style>