<template>
  <view class='container'>
    <view class='container-box'>
      <view class='title'>服务项目</view>
      <view class='order-item'>
        <view class='item-left'>
          <image src="@/static/QR57a.jpg" class="img"></image>
        </view>
        <view class='item-right'>
          <view class='right1'>水洗轿车</view>
          <view class='right1'>X1</view>
          <view class='right2'>汽车美容</view>
        </view>
      </view>
      <u-line margin='24rpx 0 28rpx'></u-line>

      <view class="rate-box">
        <view class="rate-left">
          <span style="color: #EA0000;">*</span>评分得分
        </view>
        <view class="rate-right">
          <u-rate count="5" v-model="value"></u-rate>
        </view>
      </view>

      <view class="comment-box">
        <u--textarea v-model="remark" count placeholder="请输入评分内容" ></u--textarea>
      </view>
    </view>

    <button class='btn' >取消预约</button>
  </view>
</template>

<script>
  export default{
    data(){
      return{
        value:'',
        remark:''
      }
    }
  }
</script>

<style lang='scss' scope>
  page{
    background-color:#F9F9F9;
  }
  .container{
    padding:24rpx 32rpx;
    .container-box{
      border-radius: 16rpx;
      background-color: #fff;
      padding: 24rpx;
      .title{
        margin-bottom:24rpx;
        color:#333;
        font-weight:bold;
      }
      .order-item{
        display:flex;
        .item-left{
          margin-left: 32rpx;
          .img{
            width: 160rpx;
            height: 160rpx;
          }
        }
        .item-right{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .right1{
            color: #333333;
          }
          .right2{
            padding: 2rpx 12rpx;
            color: #215EBE;
            border:2rpx solid #215EBE;
            background-color: #E8EEF8;
          }
        }
      }

      .rate-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom:28rpx;
        .rate-left{
          align-items: center;
        }
        .rate-right{

        }
      }
    }
    .btn {
      width: 100%;
      background-color: #7A9ED8;
      text-align: center;
      color: #fff;
      margin-top:50rpx;
      height:80rpx;
      line-height: 80rpx;
    }
  }
</style>
