null/pages/order/evaluate.vue

<template>
	<view class="page">
		<view class="p-num align-center justify-center">
			<text class="k">我的评分</text>
			<text class="v">7.5分</text>
		</view>
		<view class="p-star flex-col">
			  <view class="flex-row justify-between">
			    <image
			      src="/static/mang_star.png"
			      class="image_7"
			    />
			    <image
			      src="/static/mang_star.png"
			      class="image_7"
			    />
			    <image
			      src="/static/mang_star.png"
			      class="image_7"
			    />
			    <image
			      src="/static/mang_star.png"
			      class="image_7"
			    />
			    <image
			      src="/static/mang_starun.png"
			      class="image_7"
			    />
			  </view>
			  <view class="flex-row justify-center group_8">
			    <text class="text_4">极差</text>
			    <text class="text_4">较差</text>
			    <text class="text_4">一般</text>
			    <text class="text_4">不错</text>
			    <text class="text_4">很棒</text>
			  </view>
		</view>
	    <view class="p-content flex-col items-start">
			<textarea placeholder="写几句评价" class="area"></textarea>
			<view class="img-wrap flex-row">
				<view class="img-item" v-for="(item,idx) in 10" :key="idx">
					<image src="/static/temp/pro.png" mode="aspectFill" class="img" ></image>
					<view class="cancel">
						取消
					</view>
				</view>  
				<image
					src="/static/addimg.png"
					class="img"
				/>	
			</view>
		</view>
		<safe-area height="94rpx">
			<template v-slot:btn>
				<view class="btn-wrap">
						申请退款
				</view>
			</template>
		</safe-area>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.page{
	padding-top: 108rpx;
}
.p-num{
	text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;	
	.k{
		color: #333333;
	}
	.v{
		color:#FD9534;
	}
	
}
.p-star{
	  margin-top: 50rpx;
	  padding: 0 174rpx;
	.image_7 {
	  border-radius: 8rpx;
	  width: 48rpx;
	  height: 48rpx;
	}
	.group_8 {
	  margin-top: 24rpx;
	}
	.text_4 {
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	  margin-right: 39rpx;
	  &:last-child{
		  margin-right: 0;
	  }
	}
	
}
.p-content{
	width: 690rpx;
	background: #F7F7F7;
	border-radius: 10rpx;
	  padding: 27rpx 20rpx 24rpx;
	  background-color: #f7f7f7;
	  border-radius: 10rpx;
	  margin: 57rpx 30rpx 0;
	.area {
	  color: #333;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 36rpx;
	  height: 204rpx;
	  width: 100%;
	}
	.img-wrap{
		flex-wrap: wrap;
		.img-item{
			position: relative;
			margin-right: 10rpx;
		    margin-bottom: 10rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}
		.cancel{
			position: absolute;
			bottom: 0;
			left: 0;
			background: rgba(0,0,0,.4);
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			width: 100%;
			color:#fff;
			font-size: 24rpx;
		}
		.img {
		 
		  width: 118rpx;
		  height: 118rpx;
		  
		  &:nth-child(5n){
			  margin-right: 0;
		  }
		}
	}
	
}
.btn-wrap{
	width: 690rpx;
	height: 94rpx;
	background: $base-color;
	border-radius: 47rpx;
	margin: 0  auto;


	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 94rpx;
	text-align: center;
	
}
</style>