xinelu-applet-ui/pagesB/Serviceevaluation/Serviceevaluation.vue

<template>
	<view class="app">
		<view class="myorder titles" @tap="expertOrder">
			<view class="title">
				<image src="../../static/pagesB/updata.png" mode=""></image>
				我的评价
			</view>
			<view class="righttitle">
				<image src="../../static/huijiantou.png" mode=""></image>
			</view>
		</view>
		<view class="orderitem">
			<view class="tiemitem">
				<span>孤注一掷</span>
			</view>
			<view class="details">
				<image src="../../static/headsculpture.png" mode=""></image>
				<view class="ppointment">
					<view class="doctorname">
						<span>齐鲁医院张先生</span><span>￥30</span>
					</view>
					<view class="reservation">
						评价时间：2023-09-08
					</view>
			
				</view>
			</view>
			<view class="bottom">
			<span @tap="rate()">评价</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			//评价
			rate(item) {
				uni.navigateTo({
					url: `/pagesB/goodsorderRate/goodsorderRate?item=${JSON.stringify(item)}&delta=${1}`
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.app{
		height: 100vh;
		background-color: #F7F5F5;
		padding: 30rpx 0 0 0;
		overflow: scroll;
		.myorder {
			position: relative;
			background: #fff;
			    height: 73rpx;
				    width: 96%;
				    left: 50%;
				    transform: translateX(-50%);
		
			.orderStatus {
				text-align: center;
				margin: 60rpx auto 30rpx;
				width: 90%;
				display: flex;
				justify-content: space-around;
				padding-bottom: 30rpx;
		
				.item {
					width: 25%;
		
					.text {
						font-size: 26rpx;
						color: #333333;
						margin-top: 10rpx;
					}
		
					image {
						width: 70rpx;
						height: 60rpx;
					}
				}
			}
		
			.righttitle {
				font-size: 26rpx;
				color: #969494;
				position: absolute;
				    position: absolute;
				    top: 50%;
				    transform: translateY(-50%);
					    right: 30rpx;
		
				image {
					vertical-align: middle;
					padding-left: 20rpx;
					width: 13rpx;
					height: 23rpx;
					display: inline-block;
				}
			}
		
			.title {
				margin-left: 30rpx;
				font-size: 32rpx;
				color: #4B4B4B;
				    position: absolute;
				    top: 50%;
				    transform: translateY(-50%);
					image{
						    /* vertical-align: middle; */
						    /* padding-left: 20rpx; */
						    width: 32rpx;
						    height: 32rpx;
						    /* display: inline-block; */
						    /* margin-top: 11rpx; */
						    margin-right: 20rpx;
						    position: relative;
						    top: 7rpx;
						
					}
			}
		}
		.orderitem {
			width: 96%;
			height: 383rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;
			margin: 20rpx auto;
			position: relative;
			margin-bottom: 20rpx;
		
			.tiemitem {
				width: 92%;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
				position: absolute;
				// background: red;
				left: 35rpx;
				top: 30rpx;
		
				span:nth-child(2) {
					margin-left: 20rpx;
				}
		
				span:nth-child(3) {
					display: inline-block;
					position: absolute;
					right: 0;
					font-weight: 500;
					color: #26A888;
				}
			}
		
			.details {
				width: 96%;
				height: 200rpx;
				// background-color: #26A888;
				position: absolute;
				top: 97rpx;
				left: 50%;
				transform: translateX(-50%);
		
				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 5rpx;
					position: absolute;
				}
		
				.ppointment {
					// background: red;
					position: absolute;
					width: 71%;
					height: 100%;
					right: 0;
		
					.doctorname {
						font-family: Source Han Sans CN;
						font-weight: 600;
						color: #333333;
		
						span:nth-child(1) {
							font-size: 28rpx;
						}
		
						span:nth-child(2) {
							display: inline-block;
							position: absolute;
							font-size: 28rpx;
							right: 0;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #333333;
						}
					}
		
					.reservation {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #959595;
						position: absolute;
						top: 24%;
		
		
					}
				}
			}
		
			.bottom {
				position: absolute;
				width: 96%;
				height: 20%;
				bottom: 4%;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
		
		// 		span:nth-child(1) {
		// 			position: absolute;
		// 			font-weight: 400;
		// 			color: #959595;
		// 			top: 50%;
		// 			transform: translateY(-50%);
		// 			left: 5%;
		
		// 		}
		
				span:nth-child(1) {
					line-height: 30px;
					width: 169rpx;
					height: 61rpx;
					background: #26A888;
					border-radius: 5rpx;
					display: inline-block;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					text-align: center;
				}
			}
		
		}
	}

</style>