drink-answer-wechat-uniapp-24-9-2/pages_order/info/experience.vue

<template>
	<view class="home">
		<view class="content" style="padding-top: 20vh;">
			<span style="font-weight: bold; margin-bottom: 40rpx;">整体体验</span>
			<view class="flex-start-col" style="gap: 10rpx;">
				<text>请评价服务的整体质量和满足感。</text>
				<text>包括品鉴过程中的舒适度和整体氛围。</text>
			</view>
			<view class="mt-40">
				<uv-radio-group shape="circle" v-model="checkboxValue">
					<view style="display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 72vw;">
						<uv-radio inactiveColor="#ecb864" activeColor="#ecb864" labelColor="#ecb864" size="30"
							labelSize="18px" iconSize="10px" label="不满意" name="不满意"
							:customStyle="{margin: '8px'}"></uv-radio>

						<uv-radio inactiveColor="#ecb864" activeColor="#ecb864" labelColor="#ecb864" size="30"
							labelSize="18px" iconSize="10px" label="一般" name="一般"
							:customStyle="{margin: '8px'}"></uv-radio>

						<uv-radio inactiveColor="#ecb864" activeColor="#ecb864" labelColor="#ecb864" size="30"
							labelSize="18px" iconSize="10px" label="满意" name="满意"
							:customStyle="{margin: '8px'}"></uv-radio>
					</view>
				</uv-radio-group>
			</view>
			<view class="flex-center mt-20" style="width: 60%; gap: 10rpx;">
				<view class="box active"></view>
				<view class="box"></view>
				<view class="box"></view>
				<view class="box"></view>
				<view class="box"></view>
			</view>
			<view class="flex-center" style="margin-top: 20rpx;">
				<span class="flex-center" style="font-size: 24rpx; gap: 10rpx;">
					<span class="indexs">{{index}}</span>
					<span>/</span>
					<span>5</span>
				</span>
			</view>
			<view class="flex-col query mt-40" style="gap: 0rpx;">
				<view class="flex-center" style="gap: 30rpx;">
					<view class="btn2" style="padding: 16rpx 80rpx;" @click="pre">
						上一题
					</view>
					<view class="btn2" style="padding: 16rpx 80rpx;" @click="next">
						结束
					</view>
				</view>
				<text class="second-color">欢快无限饮&nbsp;&nbsp;饮酒有限度</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 1,
			}
		},
		methods: {

			query() {

			},

			pre() {
				uni.navigateBack({
					delta: 1
				})
			},

			next() {
				uni.redirectTo({
					url: '/pages_order/info/startTest'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.query {
		position: relative;
		top: 10vh;
	}

	.box {
		height: 15rpx;
		width: 75rpx;
		border-radius: 30rpx;
		background-color: #fff6e5;
		border: 2rpx solid #f6cf8e;
	}

	.active {
		background-color: #f6cf8e;
	}

	.indexs {
		color: #f6cf8e;
	}
</style>