<script>
	export default {
		components: {},
		data() {
			return {
				rateValue1: 0,
				rateValue2: 0,
				rateValue3: 0
			}
		},
		onLoad() {
			
			setTimeout(() => {
				this.rateValue = 3
			}, 1000)
		},
		methods: {
			onChange1(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				
			},
			onChange2(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				
			},
			onChange3(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				
			},
		}
	}
</script>

<template>
	<view class="message">
		<view class="active">
			<image src="../../static/logo.png" mode="" class="img"></image>
		</view>
		<view class="aboutMessage">
			<p class="title">菜品名称</p>
			<p class="total">月售：8000</p>
			<p class="money">￥300</p>
		</view>
	</view>
	<view class="viewport">
		<view class="center">
			<p class="title">菜品口味</p>
			<uni-rate v-model="rateValue1" @change="onChange1" class="rate" />
			<p class="title">食材质量</p>
			<uni-rate v-model="rateValue2" @change="onChange2" class="rate" />
			<p class="title">配送速度</p>
			<uni-rate v-model="rateValue3" @change="onChange3" class="rate" />
			<textarea class="review-content" placeholder="评价内容"></textarea>
			<button class="submit-button">提交评价</button>
		</view>
	</view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #4095e5;
}
.active {
	float: left;
	width: 30%;
	height: 100%;
}
.img {
	margin: 15px;
}
.aboutMessage {
	float: right;
	width: 240px;
	height: 100%;
	.title {
		font-size: 20px;
		padding: 10px;
		font-weight: 700;
	}
	.total {
		color: #999;
		padding-left: 10px;
	}
	.money {
		color: #4095e5;
		padding: 10px;
		font-weight: 700;
	}
}
.message {
	width: 90%;
	height: 100px;
	border-radius: 25px;
	background-color: #fff;
	margin: 0 auto;
}

.viewport {
	width: 90%;
	height: 500px;
	border-radius: 15px;
	background-color: #fff;
	margin: 0 auto;
}
.center {
	width: 80%;
	height: 450px;
	margin: 0 auto;
	padding-top: 20px;
	.title {
		font-size: 20px;
		padding: 10px;
		font-weight: 700;
	}
}
.review-content {
	margin-top: 20px;
  resize: none;
  height: 100px;
  margin-bottom: 16px;
}

.submit-button {
  background-color: #4095e5;
  color: white;
  padding: 8px 16px;
  border: none;
  line-height: 30px;
  border-radius: 30px;
}
</style>
