waterElectricityMinApp/pagesRepairs/evaluate/evaluate.vue

<template>
	<view class="container">
		<!-- 处理时效区域 -->
		<view class="score">
			<text>处理时效</text>
			<uni-rate activeColor="#FF5733" size="30" v-model="value" @change="onChange" />
		</view>

		<!-- 服务评价区域 -->
		<view class="evaluate">
			服务评价
			<textarea placeholder-style="color:#CCCCCC" placeholder="您宝贵的评价对我们很重要哦"></textarea>
		</view>

		<!-- 确认提交区域 -->
		<view class="btn" @click="handleSub">确认提交</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: 2
		}
	},
	methods: {
		onChange(e) {
			console.log('rate发生改变:' + JSON.stringify(e))
		},
		handleSub() {
			uni.navigateBack(1)
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	padding-left: 30rpx;
	width: 100vw;
	height: 100vh;

	.score {
		display: flex;
		align-items: center;
		height: 172rpx;
		font-size: 28rpx;

		text {
			margin-right: 25rpx;
		}
	}

	.evaluate {
		display: flex;
		font-size: 28rpx;

		textarea {
			box-sizing: border-box;
			margin-left: 28rpx;
			padding: 14rpx 20rpx;
			width: 550rpx;
			height: 298rpx;
			font-size: 28rpx;
			border-radius: 11rpx;
			border: 1rpx solid #e6e6e6;
		}
	}

	.btn {
		position: absolute;
		left: 30rpx;
		bottom: 65rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690rpx;
		height: 100rpx;
		color: #fff;
		font-size: 32rpx;
		border-radius: 12rpx;
		background-color: #6fb6b8;
	}
}
</style>