134 lines
2.3 KiB
Vue
134 lines
2.3 KiB
Vue
<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>
|