product_wx/pages/subPackages/serviceEvaluation/index.vue

<template>
    <div class="serviceEvaluation">
       <div class="serviceBody">
         <div class="serviceTitle">请给出您能园区服务水平的评价，您的建议是我们前进的最大动力!</div>
         <div class="evaluationBox" >
           <span class="evaName">园区保洁</span>
           <van-rate
               :value="value"
               :size="24"
               gutter="32rpx"
               void-color="#eee"
               bind:change="onChange"
               color="#fd9a63"
           />
         </div>
         <div class="evaluationBox" >
           <span class="evaName">园区绿化</span>
           <van-rate
               :value="value"
               :size="24"
               gutter="32rpx"
               void-color="#eee"
               bind:change="onChange"
               color="#fd9a63"
           />
         </div>
         <div class="evaluationBox" >
           <span class="evaName">维修服务</span>
           <van-rate
               :value="value"
               :size="24"
               gutter="32rpx"
               void-color="#eee"
               bind:change="onChange"
               color="#fd9a63"
           />
         </div>
         <div class="evaluationBox" >
           <span class="evaName">停车服务</span>
           <van-rate
               :value="value"
               :size="24"
               gutter="32rpx"
               void-color="#eee"
               bind:change="onChange"
               color="#fd9a63"
           />
         </div>
         <div class="evaluationBox" >
           <span class="evaName">园区配套</span>
           <van-rate
               :value="value"
               :size="24"
               gutter="32rpx"
               void-color="#eee"
               bind:change="onChange"
               color="#fd9a63"
           />
         </div>
         <div class="evaluationBox" >
           <span class="evaName">服务态度</span>
           <van-rate
               :value="value"
               :size="24"
               gutter="32rpx"
               void-color="#eee"
               bind:change="onChange"
               color="#fd9a63"
           />
         </div>
       </div>
      <div class="serviceBody">
        <van-field
            :value="form.contant"
            autosize
            type="textarea"
            placeholder="请输入文字进行报事报修描述"
            class="myField"
            maxlength="2000"
            show-word-limit
        />
      </div>
      <button class="submitBtn">提交</button>
    </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      value: "5",
      form:{

      }
    }
  }
}
</script>

<style lang="scss">
    .serviceEvaluation{
      .serviceBody{
        background: white;
        padding: 24rpx 32rpx;
        margin: 24rpx 0;
        .serviceTitle{
          color: rgba(51, 51, 51, 1);
          font-size: 28rpx;
        }
      }
      .evaluationBox {
        width: 686rpx;
        height: 100rpx;
        padding: 0 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f5f7fa;
        border-radius: 8rpx;
        box-sizing: border-box;
        margin-top: 24rpx;
        .evaName{
          font-size: 32rpx;
          color: rgba(51, 51, 51, 1);
        }
      }
      .van-cell {
        background: #F5F7FA !important;
        border-radius: 8rpx;
        font-size: 28rpx;
      }
      .submitBtn{
        width: 654rpx;
        height: 96rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 35rpx;
        background: rgba(3, 101, 249, 1);
        margin: 64rpx auto;
      }
    }
</style>