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

<template>
	<view class="banner-wrap banner-four">
		<view class="title-wrap">
			<view class="title">气象适宜指数</view>
			<!-- <el-viewider class="divider" /> -->
			<view class="sub-title">温光水全年记录，好风好雨好荔枝</view>
		</view>
		<view class="weather-item">
			<view class="info">
				<view class="charts-box">
					<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
				</view>
				<view class="text">
					该果园抗逆管理预案优秀，气象适宜指数超过88%的果园，有效保障糖分与风味物质含量，以精准农事护航品质。
				</view>
			</view>
			<view class="chart" @click="handleChart">
				<image src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/pie.png" alt="" />
			</view>
		</view>
		<!-- <view class="btn" @click="handleShow">查看评分详情</view> -->
	</view>
</template>

<script setup>
	const opts = {
		color: ["#FF8400", "#FFAF37"],
		padding: undefined,
		title: {
			name: "91分",
			fontSize: 20,
			color: "#FF8400"
		},
		subtitle: {
			name: "综合评分",
			fontSize: 12,
			color: "#999999"
		},
		extra: {
			arcbar: {
				type: "default",
				width: 8,
				backgroundColor: "#FFF3E6",
				startAngle: 0.75,
				endAngle: 0.25,
				gap: 2,
				linearType: "custom",
				customColor: ["#FF8400", "#FFAF37"]
			}
		}
	}

	const chartData = {
		series: [{
			name: "综合评分",
			data: 0.91,
		}]
	}

	function handleChart() {}
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 108px;
		height: 100px;
	}

	.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";
		}

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

			.divider {
				width: 36px;
				margin: 12px 0;
			}

			.sub-title {
				letter-spacing: 3px;
			}

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

		.weather-item {
			margin-top: 12px;
			background: rgba(255, 255, 255, 0.9);
			padding: 12px 10px;
			border-radius: 12px;

			.info {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.percentage-value {
					color: #ff8400;
					font-size: 20px;
					font-family: "jiangxizhuokai";
					margin-bottom: 5px;
				}

				.percentage-label {
					font-size: 12px;
					color: #999999;
				}

				.text {
					margin-left: 2px;
					font-size: 12px;
					line-height: 19px;
					color: #333;
				}
			}

			.chart {
				width: 100%;
				text-align: center;

				img {
					width: 100%;
					height: 282px;
				}
			}

			&.styleName2 {
				margin-top: 0;
				background: transparent;
				padding: 0;
				border-radius: 0;

				.info {
					flex-direction: column;

					.text {
						margin: 0;
						text-indent: 4rem;
					}
				}
			}
		}
	}
</style>