lanan-repair/pages/my/evaluate.vue
2024-09-22 15:07:01 +08:00

107 lines
2.1 KiB
Vue

<template>
<view class="container">
<v-navigation-bar background-color="#fff" title-color="#333" title="我的评价"></v-navigation-bar>
<view class="body">
<view v-for="(item, index) in evaluateList" :key="index" class="item">
<view class="date">07-06</view>
<view class="message">
这家修理厂的喷漆工艺非常不错,特别均匀,师傅也很细心。如果您需要做喷漆或者维修服务,不要错过这里!
</view>
<view class="rate">
<!-- 设置尺寸大小 -->
<uni-rate allow-half :value="3.5"/>
</view>
<view class="shopInfo">
<image class="shopImg" src="" mode="aspectFill"></image>
<view class="shopInfo_content">
<view class="shopName">顺捷汽车维修搭电救援补胎中心</view>
<view class="shopAddress">济南市历下区福瑞达历下护理院东南门旁</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
export default {
components: {
VNavigationBar,
},
data() {
return {
evaluateList: [{}, {}, {}]
};
}
}
</script>
<style lang="less" scoped>
.container {
height: 100%;
background-color: #F3F5F7;
display: flex;
flex-direction: column;
.body {
padding: 20rpx 0;
flex: 1;
height: 0;
overflow: auto;
display: flex;
flex-direction: column;
row-gap: 10rpx;
}
.item {
background-color: #fff;
padding: 30rpx;
display: flex;
flex-direction: column;
row-gap: 20rpx;
}
.date {
font-weight: bold;
font-size: 36rpx;
color: #333333;
}
.shopInfo {
display: flex;
align-items: stretch;
column-gap: 20rpx;
.shopImg {
width: 160rpx;
height: 100rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
background-color: #efefef;
}
.shopInfo_content {
flex: 1;
width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 6rpx 0;
}
.shopName {
font-size: 28rpx;
color: #333333;
}
.shopAddress {
font-size: 24rpx;
color: #666666;
}
}
}
</style>