<template>
  <view class="px-30rpx pb-30rpx">
    <view class="flex py-rowLg">
      <u-image border-radius="10" width="190rpx" height="190rpx"
        src="https://img.js.design/assets/img/6191fba309f0c7c4a67a53fa.jpg" :lazy-load="true"></u-image>
      <view class="ml-base flex-1">
        <view class=" two-ellipsis text-txBase text-lg">新疆搜索商品名称新疆搜索商品名称甜又脆新疆搜索商品名称新疆搜索商品名称甜又脆，</view>
        <view class=" two-ellipsis text-txGray text-md mt-base">商品描述：xxxxxxxxxxxxxxxxx</view>
      </view>
    </view>
    <!--  -->
    <view class="flex items-center">
      <view class="text-lg text-txBase mr-5rpx">满意度</view>
      <u-rate :count="count" size="48" active-color="#f0ad4e" inactive-color="#f0ad4e" v-model="value"></u-rate>
    </view>
    <!--  -->
    <view class="mt-rowLg">
      <u-input class="min-h-300rpx" :clearable="false" placeholder="亲，您对这个商品满意吗？您的评价会帮助我们选择更好的商品哦~" v-model="value"
        type="textarea" border />
    </view>
    <view class="mt-rowLg">
      <image class="w-64rpx h-64rpx" src="/static/images/user/camera.png" mode=""></image>
    </view>
    <view class="grid grid-cols-3 gap-x-45rpx gap-y-23rpx mt-14rpx ">
      <view class="img"></view>
      <view class="img"></view>
      <view class="img"></view>
      <view class="img"></view>
    </view>
    <view class="py-80rpx">
      <view class="login-btn btn"> 提交评价 </view>
    </view>
  </view>
</template>

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

<style lang="scss" scoped>
  page {
    min-height: 100vh;
    background: #FFFFFF !important;
  }

  .img {
    width: 200rpx;
    height: 200rpx;
    color: #999;
    border-radius: 8rpx;
    background-color: #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .btn {
    background: #FFFFFF;
    border: 1rpx solid #FC8720;
    color: #FC8720;
  }
</style>
