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="title-line"></view>
			<view class="sub-title">温光水全年记录，好风好雨好荔枝</view>
		</view>
		<view class="weather-item">
			<view class="info">
				<view class="charts-box" v-if="opts">
					<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>
import { ref, watch } from 'vue';

	
	const props = defineProps({
	    baseData:{
	        type:Object,
	        defalut:{}
	    }
	});
	watch(()=>props.baseData,(newValue) =>{
		chartData.value = {
			series: [{
				name: "综合评分",
				data: newValue.weatherRiskScore / 100,
			}]
		}
		opts.value = {
			color: ["#FF8400", "#FFAF37"],
			padding: undefined,
			title: {
				name: newValue.weatherRiskScore + '分',
				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"]
				}
			}
		}
	})
	
	let opts = ref(null)

	let chartData = ref(null)

	function handleChart() {}
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 216rpx;
		height: 200rpx;
	}

	.banner-wrap {
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center center;

		.title {
			font-size: 72rpx;
			letter-spacing: 8rpx;
			font-family: "jiangxizhuokai";
		}

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

			.title-line {
				width: 72rpx;
				height: 2rpx;
				background: rgba(255, 255, 255, 0.6);
				margin: 24rpx 0;
			}

			.sub-title {
				letter-spacing: 6rpx;
			}

			.btn {
				font-size: 22rpx;
				padding: 14rpx 24rpx;
				border-radius: 40rpx;
				background: rgba(255, 255, 255, 0.2);
				text-align: center;
				margin-top: 48rpx;
				width: 180rpx;
				box-sizing: border-box;
				margin: 48rpx auto;
			}
		}

		.weather-item {
			margin-top: 24rpx;
			background: rgba(255, 255, 255, 0.9);
			padding: 24rpx 20rpx;
			border-radius: 24rpx;

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

				.percentage-value {
					color: #ff8400;
					font-size: 40rpx;
					font-family: "jiangxizhuokai";
					margin-bottom: 10rpx;
				}

				.percentage-label {
					font-size: 24rpx;
					color: #999999;
				}

				.text {
					margin-left: 4rpx;
					font-size: 24rpx;
					line-height: 38rpx;
					color: #333;
				}
			}

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

				// img {
				// 	width: 100%;
				// 	height: 564rpx;
				// }
			}

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

				.info {
					flex-direction: column;

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