評価ページ、手当たり次第に書かれた評価の粗末なテンプレート

評価ページ、vue+vant-uiで手書きで評価する粗末なテンプレート

<template>
  <div class="main fuwupingjia">
    <h5> </h5>
    <div class="fuWuPingJia">
      <van-rate v-model="value" :size="25" :readonly="false" @change="pingJIa" />
      <span class="neiRong">{{ pingJia }}</span>
      <van-cell-group>
        <van-field
          v-model="message"
          type="textarea"
          placeholder=" 。"
          rows="1"
          :autosize="true"
          clearable
          maxlength="150"
        />
      </van-cell-group>
      <!--   -->
      <van-button type="info" @click="tiJiaoPingJia"> </van-button>
    </div>
  </div>
</template>


<script>
import { Button, Toast, Rate, Field, CellGroup, Notify } from "vant";
import { log } from "util";
export default {
  components: {
    "van-button": Button,
    Toast: Toast,
    "van-rate": Rate,
    "van-cell-group": CellGroup,
    "van-field": Field,
    Notify
  },
  data() {
    return {
      //  
      value: 0,
      //    
      message: "",
      pingJia: " "
    };
  },
  methods: {
    //    
    pingJIa() {
      if (this.value && this.value === 1) {
        this.pingJia = " ";
      } else if (this.value && this.value === 2) {
        this.pingJia = " ";
      } else if (this.value && this.value === 3) {
        this.pingJia = " ";
      } else if (this.value && this.value === 4) {
        this.pingJia = " ";
      } else if (this.value && this.value === 5) {
        this.pingJia = " ";
      }
      console.log(111111);
    },
    tiJiaoPingJia() {
      if (!this.value)
        return Notify({
          message: " ",
          duration: 1000,
          background: "#f44"
        });
      Toast.success(" ！");
      const timer = setInterval(() => {
        clearInterval(timer);
        Toast.clear();
        this.$router.push("frame/home");
      }, 1000);
    }
  }
};
</script>

<style scoped>
.main,
body {
  background-color: #efeff4 !important;
  font-size: 14px;
}
.fuWuPingJia {
  position: relative;
  width: 100%;
  padding: 20px;
  background-color: #fff;
}
.fuwupingjia .van-button {
  margin-top: 50px;
}
.fuwupingjia .van-cell {
  height: 200px;
  background-color: #efeff4;
  font-size: 14px;
}
.van-button--info {
  border: 1px;
}
.fuWuPingJia .neiRong {
  position: absolute;
  top: 20px;
  left: 175px;
  width: 30%;
  height: 30px;
  /* background-color: pink; */
}
.neiRong {
  font-size: 14px;
  color: rgb(255, 210, 30);
}
</style>