feiniao-youwei-uniapp/pages/tabBar/home/components/bannerTwo.vue

<template>
	<div class="banner-wrap banner-two">
		<div class="title-wrap">
			<div class="title">遥感环境评估</div>
			<div class="score">
				<span>有味指数</span>
				<up-rate :count="5" size="13" readonly :allowHalf="true" active-color="#FF8400" gutter="1" v-model="envScore"></up-rate>
				<!-- <rate v-model="envScore" readonly allow-half :size="12" color="#FF8400" /> -->
			</div>
		</div>
		<div class="chart-wrap">
			<view class="chart-bg">
				
			</view>
			<!-- <radar-chart class="radar-wrap" :pieData="boxList"></radar-chart> -->
			<view class="charts-box">
				<qiun-data-charts type="radar" :opts="opts" :chartData="chartData" />
			</view>
			<div class="radar-list">
				<div class="radar-item" :class="{ active: active === index }" :style="item.style"
					v-for="(item, index) in boxList" :key="index" @click="handleActive(index)">
					<span>{{ item.name }}</span>
					<up-rate :count="5" readonly size="12" :allowHalf="true" :active-color="active === index ? '#000' : '#fff'"
						v-model="item.score"></up-rate>
					<!-- <rate
                        v-model="item.score"
                        readonly
                        allow-half
                        :size="12"
                        :color="active === index ? '#000' : '#fff'"
                    /> -->
				</div>
			</div>
			<div class="legend">
				<div class="legend-item">
					<div class="line"></div>
					<span>当前果园</span>
				</div>
				<div class="legend-item">
					<div class="line white"></div>
					<span>平均值</span>
				</div>
			</div>
		</div>
		<div class="box-wrap" v-if="boxList.length">
			<div class="box-header">
				<div class="name">
					<div>天选生态好果</div>
					<span>{{ boxList[active].title }}</span>
				</div>
				<!-- <el-divider class="divider" direction="vertical" /> -->
				<div class="rate">
					<up-rate :count="5" readonly size="12" :allowHalf="true" active-color="#FFCF66"
						v-model="boxList[active].score"></up-rate>
					<!-- <rate v-model="boxList[active].score" readonly allow-half :size="18" color="#FFCF66" /> -->
				</div>
			</div>
			<div class="text">
				{{ boxList[active].text }}
			</div>
			<div class="btn" @click="handleShow">查看评分方法</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		watch
	} from "vue";

	const envScore = ref(4.5)

	const boxList = ref([{
			"name": "生境",
			"score": 4.6,
			"scoreAvg": 4.1,
			"text": "果园周边林地覆盖率超过65%，依托从化优越的生态屏障，森林环抱，山水相依。林地能调温、锁湿、防风，附近还有水田水塘维持空气湿润，适宜益虫繁衍，减少农药用量，果实干净饱满。靠近流溪河与森林公园，微气候温和，挂果稳定，果味清甜中带有山林的自然清香。",
			"title": "生态优美，糖高质佳",
			"style": {
				"top": "-2px",
				"left": "calc(50% - 112px / 2)"
			}
		},
		{
			"name": "地理区位",
			"score": 5,
			"scoreAvg": 4,
			"text": "果园位于丘陵地带，地形南北通透，北靠天堂顶山脉可挡寒风，南向开阔利于湿润气流进入，东高西低，自然排湿。气流顺畅、湿度适中，病虫害更少，果树少受极端天气干扰，果子风味纯净、口感更清透，是“天生好地”。",
			"title": "风水优良，病少质高",
			"style": {
				"top": "50px",
				"right": "8px"
			}
		},
		{
			"name": "光照",
			"score": 4.4,
			"scoreAvg": 3.7,
			"text": "从化地处亚热带，日照时间充足，果园位于缓坡地带，朝向合理、采光均匀，年有效日照达1760小时以上。果树晒得足，糖分积累稳定，不仅甜度更均衡，还能让果形饱满、果皮颜色亮丽，卖相和口感都更上一层",
			"title": "光足糖稳，果甜爽脆",
			"style": {
				"top": "172px",
				"right": "30px"
			}
		},
		{
			"name": "土壤",
			"score": 5,
			"scoreAvg": 4.2,
			"text": "果园以砖红壤为主，富含铁铝、结构稳定，保水保肥能力强。结合从化常年湿润的气候与有机肥培育，形成良好的微生物环境。土壤既能养根，也能稳稳供应果树一季所需，确保关键生长期营养不断，果实香气浓、甜度深，有层次。",
			"title": "壤厚养足，香甜有底",
			"style": {
				"top": "172px",
				"left": "30px"
			}
		},
		{
			"name": "水源",
			"score": 4,
			"scoreAvg": 3.9,
			"text": "果园临近天然水系如流溪河及温泉支流，水质清澈、重金属与氨氮含量低，生态系统稳定。这样的好水养土更养树，根系发达、吸收均匀，果树更强健，果实清甜回甘，吃得安心又放心。",
			"title": "水源纯净，甜润鲜明低",
			"style": {
				"top": "50px",
				"left": "8px"
			}
		}
	]);


	const active = ref(0);
	const handleActive = (index) => {
		active.value = index;
	};
	const radarList = ref([{
			name: "生境",
			style: {
				top: "-2px",
				left: "calc(50% - 112px / 2)",
			},
		},
		{
			name: "光照",
			style: {
				top: "50px",
				right: "8px",
			},
		},
		{
			name: "水源",
			style: {
				top: "172px",
				right: "30px",
			},
		},
		{
			name: "土壤",
			style: {
				top: "172px",
				left: "30px",
			},
		},
		{
			name: "风水",
			style: {
				top: "50px",
				left: "8px",
			},
		},
	]);

	const handleShow = () => {};

	const chartData = {
		categories: ["维度1", "维度2", "维度3", "维度4", "维度5"],
		series: [{
				name: "成交量1",
				data: [4, 5,4.4, 5, 4.6]
			},
			{
				name: "成交量2",
				data: [3.9, 4.2, 3.7, 4, 4.1]
			}
		]
	}
	const opts = {
		color: ["#FFCF66", "#FFFFFF"],
		padding: [0, 5, 5, 5],
		dataLabel: false,
		enableScroll: false,
		legend: {
			show: false,
		},
		extra: {
			radar: {
				gridType: "radar",
				gridColor: "#afbdc6",
				gridCount: 3,
				opacity: 0.2,
				max: 5,
				labelShow: false,
				border: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner-wrap {
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center center;

		.title {
			font-size: 36px;
			letter-spacing: 4px;
			font-family: "jiangxizhuokai";
		}

		.charts-box {
			width: 327px;
			height: 228px;
			position: relative;
			z-index: 3;
		}

		&.banner-two {
			background-image: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/report-banner-2.png");
			padding: 60px 14px;
			box-sizing: border-box;

			.score {
				color: #ff8400;
				font-size: 15px;
				font-family: "jiangxizhuokai";
				background: rgba(255, 255, 255, 0.4);
				border: 1px solid rgba(255, 255, 255, 0.55);
				border-radius: 5px;
				padding: 8px 16px;
				width: fit-content;
				box-sizing: border-box;
				margin: 12px 0 32px 0;
				display: flex;
				align-items: center;

				span {
					margin-right: 6px;
				}
			}

			.chart-wrap {
				width: 100%;
				position: relative;

				::v-deep {
					.van-rate__icon {
						color: inherit;
					}
				}
				.chart-bg {
					position: absolute;
					z-index: 2;
					top: 10px;
					left: 50%;
					transform: translateX(-50%);
					background: rgba(0, 0, 0, 0.2);
					width: 208px;
					height: 208px;
					border-radius: 50%;
				}

				.radar-wrap {
					width: 100%;
					height: 220px;
				}

				.radar-list {
					.radar-item {
						position: absolute;
						z-index: 3;
						top: 0;
						padding: 5px 8px;
						background: rgba(0, 0, 0, 0.3);
						border-radius: 20px;
						font-size: 13px;
						font-family: "jiangxizhuokai";
						display: flex;
						align-items: center;
						border: 1px solid transparent;

						&.active {
							background: #ffcf66;
							border: 1px solid #fff;
							color: #000;

							&::before {
								content: "";
								position: absolute;
								left: -15px;
								background: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/arrow.png") no-repeat center center / 100% 100%;
								width: 13px;
								height: 16px;
								transform: rotate(180deg);
							}

							&::after {
								content: "";
								position: absolute;
								right: -15px;
								background: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/arrow.png") no-repeat center center / 100% 100%;
								width: 13px;
								height: 16px;
							}
						}

						span {
							margin-right: 4px;
						}
					}
				}

				.legend {
					position: absolute;
					right: 12px;
					top: -5px;
					background: rgba(0, 0, 0, 0.4);
					border-radius: 6px;
					padding: 4px 6px;

					.legend-item {
						display: flex;
						align-items: center;
						font-size: 10px;

						.line {
							background: #ffc33f;
							border-radius: 2px;
							width: 7px;
							height: 3px;
							margin-right: 4px;
						}

						.white {
							background: #fff;
						}
					}
				}
			}

			.box-wrap {
				margin-top: 14px;
				background: rgba(0, 0, 0, 0.3);
				padding: 10px 12px;
				border-radius: 8px;
				border: 1px solid #ffcf66;
				backdrop-filter: blur(2px);

				// min-height: 154px;
				// box-sizing: border-box;
				.box-header {
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: "jiangxizhuokai";

					.name {
						div {
							font-family: "jiangxizhuokai";
							color: #ffcf66;
							letter-spacing: 5px;
						}

						span {
							font-size: 11px;
						}
					}

					.divider {
						height: 26px;
					}
				}

				.text {
					font-size: 12px;
					margin: 10px 0 5px 0;
				}

				.btn {
					font-size: 11px;
					padding: 7px 12px;
					border-radius: 20px;
					background: rgba(255, 255, 255, 0.3);
					text-align: center;
					width: 90px;
					box-sizing: border-box;
					margin: auto;
				}
			}
		}
	}
</style>