pet-front/otherPages/orderTakingManage/evaluate/index.vue

<template>
	<!-- <div>我的评价</div> -->
	<view class="box">
		<view class="level">
			<view class="form-title">
				我的评价
			</view>
			<view class="text1">
				（3条）
			</view>
		</view>
		<view class="item box-size level">
			<view class="img" :style="{borderRadius:'75rpx'}">
				<image src="" mode="" style="width: 132rpx;height: 132rpx;" :style="{borderRadius:'75rpx'}"></image>
			</view>
			<view class="vertical">
				<view class="level flex-2">
					<view class="name">
						猫小姐
					</view>
					<view class="">
						<up-rate :count="count" v-model="value" active-color="#FFBF60" gutter="6"></up-rate>
					</view>
				</view>
				<view class="time">
					2023-12-10 12:41:12
				</view>
				<view class="">
					服务贴心，态度热情,非常满意。
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

	const count = ref(5);
	const value = ref(2);
</script>

<style lang="scss">
	.box {
		width: 100vw;
		height: 100vh;
		font-weight: 0 !important;


		.text1 {
			margin-top: 45rpx;
			color: #C7C7C7;
			font-size: 22rpx;
		}

		.item {
			width: 750rpx;
			height: 180rpx;
			padding: 3% 4%;
			// background-color: pink;
			// border: 0.5rpx solid #707070;
			margin-top: 25rpx;
			font-size: 28rpx;
			position: relative;

			&::before {
				position: absolute;
				top: 10rpx;
				left: 0;
				content: "";
				width: 750rpx;
				height: 1rpx;
				border-radius: 9rpx;
				background-color: #707070;
			}

			.img {
				width: 132rpx;
				height: 132rpx;
				background-color: red;
				margin-right: 15rpx;
			}

			.flex-2 {
				width: 550rpx;
				justify-content: space-between;
			}

			.name {
				font-size: 30rpx;
				font-weight: bold;
			}

			.time {
				color: grey;
			}
		}
	}

	.box-size {
		box-sizing: border-box;
	}

	.level {
		display: flex;
	}

	.vertical {
		display: grid;
		justify-content: space-between;
	}
</style>