hi-ucs/front/src/views/home/components/searchResultList.vue

<template>
  <div id="search-result-list-container">
    <div class="shai-xuan">
      <!-- <div class="circle">!</div> -->
      <div class="result">
        检测结果:
        <span>{{ resourceTotal || '' }}</span>
        个{{
          cardType == '组件服务' ? '组件' : cardType == '应用资源' ? '应用' : ''
        }}
      </div>
      <div class="condition" :key="showKey">
        <ul>
          <li
            v-for="item in selList"
            :key="item.value"
            @click="changeCondition(item.value)"
            v-show="item.show"
          >
            {{ item.name }}
            <span
              class="arrow"
              :class="item.value == selData ? 'down' : ''"
            ></span>
          </li>
        </ul>
      </div>
    </div>
    <div
      class="result-list"
      v-for="(item, index) in resourceList.data"
      :key="item.index"
    >
      <div class="item" :key="showKey">
        <div
          class="left"
          :class="
            item.type == '应用资源'
              ? 'yyzy'
              : !item.type
              ? 'sjzy'
              : item.infoList &&
                item.infoList.filter((val) => val.attrType == '组件类型')[0]
                  .attrValue == '智能算法'
              ? 'znsf'
              : item.infoList &&
                item.infoList.filter((val) => val.attrType == '组件类型')[0]
                  .attrValue == '图层服务'
              ? 'tcfw'
              : item.infoList &&
                item.infoList.filter((val) => val.attrType == '组件类型')[0]
                  .attrValue == '开发组件'
              ? 'kfzj'
              : item.infoList &&
                item.infoList.filter((val) => val.attrType == '组件类型')[0]
                  .attrValue == '业务组件'
              ? 'ywzj'
              : ''
          "
          v-if="selectCardsname !== '基础设施'"
        ></div>
        <div class="left jcss" v-else></div>
        <div class="right">
          <div class="header">
            <span style="display: flex; align-items: center; width: 680px">
              {{ item.name }}
              <svg
                t="1652322568870"
                class="icon"
                viewBox="0 0 3072 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3062"
                width="40"
                height="40"
                v-if="item.applyState == '通过'"
                style="margin-left: 10px"
              >
                <path
                  d="M2958.222222 0a113.777778 113.777778 0 0 1 113.777778 113.777778v796.444444a113.777778 113.777778 0 0 1-113.777778 113.777778H500.053333a113.777778 113.777778 0 0 1-85.617777-38.798222L32.824889 549.432889a56.888889 56.888889 0 0 1 0-74.922667L414.435556 38.798222A113.777778 113.777778 0 0 1 499.996444 0H2958.222222z m0 56.888889H500.053333a56.888889 56.888889 0 0 0-42.837333 19.399111L75.605333 512l381.610667 435.712a56.888889 56.888889 0 0 0 42.780444 19.399111H2958.222222a56.888889 56.888889 0 0 0 56.888889-56.888889V113.777778a56.888889 56.888889 0 0 0-56.888889-56.888889z"
                  fill="#d81e06"
                  p-id="3063"
                ></path>
                <path
                  d="M398.222222 398.222222a113.777778 113.777778 0 1 1 0 227.555556 113.777778 113.777778 0 0 1 0-227.555556z m0 56.888889a56.888889 56.888889 0 1 0 0 113.777778 56.888889 56.888889 0 0 0 0-113.777778z"
                  fill="#d81e06"
                  p-id="3064"
                ></path>
                <path
                  d="M1309.582222 491.064889v-273.066667h-505.173333v47.786667h455.338667v178.176h-378.88V342.926222h-49.152v358.4c0 55.978667 27.306667 84.650667 82.602666 84.650667h370.005334c28.672-1.365333 51.2-8.874667 66.218666-23.210667 16.384-17.749333 27.989333-68.266667 34.816-152.917333l-47.786666-15.018667-1.706667 26.737778c-4.664889 58.766222-12.970667 93.582222-24.917333 104.334222-10.24 8.192-23.893333 12.288-40.277334 12.288h-342.698666c-31.402667 0-47.104-15.701333-47.104-45.738666v-201.386667h428.714666z m430.08-307.2v102.4h-219.136v386.389333h48.469334v-46.421333h170.666666v178.858667h50.517334v-178.858667h167.936v41.642667h48.469333V286.264889h-216.405333v-102.4h-50.517334z m-170.666666 395.946667v-102.4h170.666666v102.4h-170.666666z m221.184 0v-102.4h167.936v102.4h-167.936z m-221.184-146.773334V332.003556h170.666666v101.034666h-170.666666z m221.184 0V332.003556h167.936v101.034666h-167.936z m733.866666-251.221333v44.373333h-165.205333v40.277334h165.205333v45.738666h-137.898666v39.594667h137.898666V398.222222h-184.32v40.96h417.792V398.222222h-186.368v-46.421333h144.725334v-39.594667h-144.725334v-45.738666h169.301334v-40.277334h-169.301334v-44.373333h-47.104z m-85.333333 429.397333h220.501333v49.834667h-220.501333v-49.834667z m220.501333-38.229333h-220.501333v-50.517333h220.501333v50.517333z m-220.501333 126.293333h220.501333v38.912c0 15.701333-8.874667 23.893333-25.258666 23.893334l-54.613334-2.048 11.605334 43.690666h57.344c38.229333 0 58.026667-18.432 58.026666-55.296v-266.24H2391.608889V807.822222h47.104v-108.544z m-222.549333-509.952l-34.816 33.450667c49.152 36.864 88.064 71.68 116.736 104.448l33.450666-34.133333a795.079111 795.079111 0 0 0-115.370666-103.765334z m-82.602667 201.386667h144.725333v299.690667c20.48-19.114667 41.642667-40.277333 64.853334-64.170667l12.970666 51.882667a923.932444 923.932444 0 0 1-121.514666 105.813333l-19.114667-43.690667c10.24-9.557333 15.701333-19.797333 15.701333-31.402666V437.816889h-97.621333v-47.104z"
                  fill="#d81e06"
                  p-id="3065"
                ></path>
              </svg>
            </span>
            <div class="header-right">
              <div>
                发布时间：
                <template v-if="item.createDate">
                  <span>
                    {{ item.createDate.substring(0, 10) + ' ' }}
                  </span>
                  <span>{{ item.createDate.substring(11, 19) }}</span>
                </template>
                <template v-else>--</template>
                <!-- <span>{{ item.createDate || '--' }}</span> -->
              </div>
              <!-- <div>
                更新时间：
                <span>{{ item.updateDate || '--' }}</span> -->
              <!-- </div> -->
            </div>
          </div>
          <div class="dec">
            <div
              v-if="
                selectCardsname !== '基础设施' && selectCardsname !== '数据资源'
              "
            >
              <span>{{ item.shareType || '--' }}</span>
            </div>
            <div>
              <span>{{ item.deptName || '--' }}</span>
            </div>
            <div v-if="selectCardsname !== '基础设施'">
              {{ item.description || '--' }}
            </div>
          </div>
          <div class="bottom" v-if="selectCardsname !== '基础设施'">
            <div>
              <div v-if="selectCardsname !== '数据资源'">
                浏览量：{{ item.visits || 0 }}次
              </div>
              <div>申购量：{{ item.applyCount || 0 }}次</div>
              <div v-if="selectCardsname === '数据资源'">
                数据量：{{ item.sjlCount || 0 }}
              </div>
              <div v-if="selectCardsname !== '数据资源'">
                收藏量：{{ item.collectCount || 0 }}次
              </div>
            </div>
            <div class="pingfen">
              <a-tooltip placement="top" mouseEnterDelay="1">
                <!-- <template #title>
                <span>{{ item.score || 0 }}分</span>
              </template> -->
                <a-rate
                  :value="item.score || 0"
                  disabled
                  v-if="item.score != 0"
                />
              </a-tooltip>
            </div>
          </div>
          <div class="btn">
            <div class="right" v-if="selectCardsname !== '基础设施'">
              <div class="shopping" :key="shoppingKey">
                <template v-if="selectCardsname == '组件服务'">
                  <span
                    class="shopping-down"
                    v-if="item.isInShoppingCart"
                  ></span>
                  <span
                    class="shopping-on"
                    v-else
                    @click="addShoppingCart(item, index)"
                  ></span>
                </template>
              </div>
              <div class="sc">
                <span
                  class="sc-down"
                  v-if="item.isCollect == 'false'"
                  @click="addCollect(item)"
                ></span>
                <span
                  class="sc-on"
                  v-if="item.isCollect == 'true'"
                  @click="addCollect(item)"
                ></span>
              </div>
              <div
                class="shopping pk"
                :key="pk"
                v-show="
                  cardType == '组件服务' && findComponentName(item, '智能算法')
                "
              >
                <span class="pk-on" @click="goComparePk(item, index)"></span>
              </div>
              <a-button
                type="primary"
                @click="toView('details', item)"
                v-if="!whoShow1.itShowBaoTou"
              >
                查看详情
              </a-button>
              <!-- <a-button
                style="margin-left: 10px"
                v-show="
                  cardType == '组件服务' && findComponentName(item, '智能算法')
                "
              >
                免费试用
              </a-button> -->
              <a-button
                type="primary"
                @click="toView('apply', item)"
                v-show="cardType == '组件服务'"
              >
                {{
                  item.shareCondition == '免批申请' ? '免批申请' : '立即申请'
                }}
              </a-button>
            </div>
            <div class="right" v-else>
              <a-button type="primary" @click="openVideo(item)">
                视频预览
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a-modal
      v-model:visible="visible"
      title="视频预览"
      :width="750"
      destroyOnClose
    >
      <template #footer></template>
      <div style="width: 100%; display: flex; justify-content: center">
        <div style="width: 100%; height: 100%">
          <vue3VideoPlay v-bind="options" />
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
  import { ref, reactive } from 'vue'
  import { message } from 'ant-design-vue'
  import { useRouter } from 'vue-router'
  import { getUser, sgcInsert } from '@/api/home'
  import { scInsert, scDel } from '@/api/personalCenter'
  import mybus from '@/myplugins/mybus'
  import { getHls } from '@/api/home.js'
  export default {
    name: '',
    // props: ['resourceList', 'resourceTotal', 'selectCardsname'],
    props: {
      resourceList: {
        type: Object,
        default: () => {},
      },
      resourceTotal: {
        type: String,
        default: '0',
      },
      selectCardsname: {
        type: String,
        default: '组件服务',
      },
    },
    computed: {
      dataList() {
        const newArr = []
        for (let i = 0; i < this.resourceList.data.length; i++) {
          let arr = [
            {
              name: '应用名称',
              value: '',
            },
            {
              name: '应用ID',
              value: '',
              dataResourceId: '',
            },
            {
              name: '应用领域',
              value: '',
            },
            {
              name: '组件类型',
              value: '',
            },
            {
              name: '技术领域',
              value: '',
            },
            {
              name: '共享类型',
              value: '',
            },
            {
              name: '共享条件',
              value: '',
            },
          ]
          arr.map((item) => {
            if (item.name === '应用名称') {
              item.value = this.resourceList.data[i].name
            }
            if (item.name === '应用ID') {
              item.value = this.resourceList.data[i].id
              item.dataResourceId =
                this.resourceList.data[i].infoList[0].dataResourceId
            }
            if (item.name === '应用领域') {
              this.resourceList.data[i].infoList.map((aa) => {
                aa.attrType === '应用领域' ? (item.value = aa.attrValue) : ''
              })
            }
            if (item.name === '组件类型') {
              this.resourceList.data[i].infoList.map((aa) => {
                aa.attrType === '组件类型' ? (item.value = aa.attrValue) : ''
              })
            }
            if (item.name === '技术领域') {
              this.resourceList.data[i].infoList.map((aa) => {
                aa.attrType === '技术领域' ? (item.value = aa.attrValue) : ''
              })
            }
            if (item.name === '共享类型') {
              this.resourceList.data[i].infoList.map((aa) => {
                aa.attrType === '共享类型' ? (item.value = aa.attrValue) : ''
              })
            }
            if (item.name === '共享条件') {
              this.resourceList.data[i].infoList.map((aa) => {
                aa.attrType === '共享条件' ? (item.value = aa.attrValue) : ''
              })
            }
          })
          newArr.push(arr)
        }
        console.log(
          'dataList======================>',
          newArr,
          this.resourceList
        )
        return newArr
      },
      isShoppingCartOrNot() {
        return ''
      },
    },
    components: {},
    setup(props) {
      // eslint-disable-next-line no-undef
      const whoShow1 = whoShow
      const showKey = ref(0)
      let shoppingKey = ref(1)
      // 购物车id列表
      const selList = ref([
        { name: '发布时间', value: 'tdr.create_date', show: true },
        { name: '浏览量', value: 'visits', show: true },
        { name: '申请量', value: 'applyCount', show: true },
        { name: '收藏量', value: 'collectCount', show: true },
        { name: '评分', value: 'score', show: true },
      ])
      if (props.selectCardsname === '基础设施') {
        selList.value.map((val) => (val.show = false))
      } else if (props.selectCardsname === '数据资源') {
        selList.value.map(
          (val) => (val.show = val.name === '发布时间' || val.name === '申请量')
        )
      }
      const findComponentName = (list, name) => {
        if (list.infoList) {
          return list.infoList.find((item) => {
            if (item.attrType === '组件类型') {
              return item.attrValue === name
            }
          })
        }
      }
      console.log('this.resourceList', props.resourceList.data)
      props.resourceList.data.map((val) => {
        if (val.infoList) {
          let obj = val.infoList.filter(
            (item) => item.attrType == '组件类型'
          )[0]
          if (obj) {
            switch (obj.attrValue) {
              case '智能算法':
                val.applicationType = 'znsf'
                break
              case '图层服务':
                val.applicationType = 'tcfw'
                break
              case '开发组件':
                val.applicationType = 'kfzj'
                break
              case '业务组件':
                val.applicationType = 'ywzj'
                break
            }
            console.log('obj', val.applicationType)
          }
        }
      })
      showKey.value++
      const selData = ref('total')
      const flag = ref(true)
      // userId
      const userId = ref('')
      getUser().then((res) => {
        console.log('getUser============>', res)
        userId.value = res.data.data.id
      })
      const resultList = [1, 2, 3, 4]
      const router = useRouter()
      const cardType = router.currentRoute.value.query.select
      const onSearch = (searchValue) => {
        console.log('use value', searchValue)
        console.log('or use this.value', searchValue.value)
      }
      function toView(type, item) {
        if (props.selectCardsname == '数据资源') {
          if (whoShow1.itShowQingDao) {
            window.open(
            'http://15.72.158.81/web/ZWXXSQ/bm/MuluDetail.aspx?zyguid=' +
              item.guid
          )
          } else {
             window.open(
            'http://10.134.135.24:30090/api/share-portal/platform/catalogue/query?serviceName=')
          }
        } else {
          if (type === 'apply') {
            console.log('一键申请===================>', item)
            localStorage.setItem(
              'applyList',
              JSON.stringify([
                {
                  arr: [
                    {
                      delFlag: item.delFlag,
                      description: item.description,
                      resourceId: item.id,
                      resourceName: item.name,
                      time: item.createDate,
                      type: item.type,
                      componentType: item.infoList.filter(
                        (val) => val.attrType == '组件类型'
                      )[0].attrValue,
                    },
                  ],
                  deptId: item.deptId,
                  deptName: item.deptName,
                },
              ])
            )
            router.push({
              path: '/apply',
            })
          } else {
            console.log(
              '111111111111111111===========>',
              router,
              props.selectCardsname
            )
            router.push({
              path: '/details',
              query: {
                id: item.id,
              },
            })
          }
        }
      }
      // 加入申购车
      const addShoppingCart = (item, index) => {
        console.log('item===============>', item)
        mybus.emit('changeSelcted', index)
        if (flag.value && item.id) {
          flag.value = false
          sgcInsert({
            delFlag: '0',
            resourceId: item.id,
            // userId: userId.value,
          }).then((res) => {
            console.log(res)
            message.success('添加申购车成功！')
            mybus.emit('getSgcNum')
            flag.value = true
          })
        }
        shoppingKey.value++
        // 查询申购车中已有id,用于过滤图标
      }
      // 添加收藏
      const addCollect = (item) => {
        console.log('收藏===============>', item, flag.value)
        if (flag.value && item.id) {
          flag.value = false
          if (item.isCollect == 'true') {
            scDel([item.id]).then((res) => {
              if (res.data.msg === 'success') {
                message.success('取消成功')
                item.isCollect = 'false'
                item.collectCount--
                flag.value = true
                console.log('收藏2===============>', res.data, flag.value)
              }
            })
          } else {
            scInsert([
              {
                resourceId: item.id,
              },
            ]).then((res) => {
              if (res.data.msg === 'success') {
                message.success('添加收藏成功！')
                item.isCollect = 'true'
                item.collectCount++
                flag.value = true
                console.log('收藏2===============>', res.data, flag.value)
              }
            })
          }
        }
      }
      // 更换查询条件
      const changeCondition = (val) => {
        selData.value = selData.value == val ? 'total' : val
        const orderType = selData.value == val ? 'ASC' : 'DESC'
        mybus.emit('changeCondition', {
          orderField: val,
          orderType: orderType,
        })
        console.log('选择===========》', val, selData.value)
      }
      mybus.on('chongzhi', () => {
        selData.value = 'total'
      })
      let videoUrl = ref('')
      const options = reactive({
        width: '700px', //播放器宽度
        height: '400px', //播放器高度
        color: '#409eff', //主题色
        title: '', //视频名称
        src: '', //视频源
        type: 'm3u8', // 视频源类型
        muted: false, //静音
        webFullScreen: false,
        speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
        autoPlay: true, //自动播放
        loop: false, //循环播放
        mirror: false, //镜像画面
        ligthOff: false, //关灯模式
        volume: 0.3, //默认音量大小
        control: true, //是否显示控制
        controlBtns: [
          'audioTrack',
          'quality',
          'speedRate',
          'volume',
          'setting',
          'pip',
          'pageFullScreen',
          'fullScreen',
        ], //显示所有按钮,
      })
      let visible = ref(false)
      // 打开视频预览
      const openVideo = (item) => {
        videoUrl.value = ''
        const param = {
          key: item.link,
        }
        getHls(param).then((res) => {
          console.log('获取视频地址===============>', res)
          // videoUrl.value = res.data.data
          options.src = res.data.data
          visible.value = true
        })
      }
      // 算法对比跳转
      const goComparePk = (item) => {
        router.push({
          path: '/algorithmCompare',
          query: {
            id: item.id,
          },
        })
      }
      return {
        onSearch,
        resultList,
        toView,
        addShoppingCart,
        changeCondition,
        selData,
        selList,
        addCollect,
        cardType,
        findComponentName,
        shoppingKey,
        openVideo,
        videoUrl,
        options,
        visible,
        goComparePk,
        whoShow1,
        showKey,
      }
    },
    beforeUnmount() {
      mybus.off('chongzhi')
      mybus.emit('changeSelcted')
    },
  }
</script>
<style scoped lang="less">
  #search-result-list-container {
    width: 1088px;
    padding: 0 20px;
    background: #f3f5f9;

    .detail-content {
      // 超出
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 130px;
      display: inline-block;
    }

    .shai-xuan {
      width: 1047px;
      height: 36px;
      // margin: 11px 0 20px;
      // background: #e5f2ff;
      // padding-left: 20px;
      display: flex;
      align-items: center;
      position: relative;

      .circle {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #0087ff;
        text-align: center;
        color: #fff;
        line-height: 16px;
        margin-right: 21px;
      }

      .result {
        font-size: 14px;
        font-weight: 500;
        color: #212121;

        span {
          font-size: 18px;
          color: #0087ff;
        }
      }

      .condition {
        position: absolute;
        right: 20px;
        top: 10px;

        ul li {
          list-style-type: none;
        }

        ul {
          display: flex;

          li {
            width: 90px;
            height: 12px;
            text-align: center;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;

            .arrow {
              display: inline-block;
              width: 12px;
              height: 12px;
              background: url('~@/assets/newHome/arrow.png');
              margin-left: 10px;
            }

            .down {
              background: url('~@/assets/newHome/down.png');
              margin-top: 6px;
            }
          }
        }
      }
    }

    .result-list {
      width: 1048px;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      border-bottom: 1px rgba(150, 144, 144, 0.3) solid;
      border-top: 1px rgba(150, 144, 144, 0.3) solid;
      padding: 10px 0;

      .item {
        width: 100%;
        margin-top: 10px;
        display: flex;
        align-items: center;

        .left {
          display: inline-block;
          width: 120px;
          height: 110px;
          margin-right: 16px;
        }

        .right {
          width: 100%;
        }

        .yyzy {
          background: url('~@/assets/home/yyzy_square.png') no-repeat;
          background-size: 100%;
        }

        .sjzy {
          background: url('~@/assets/home/sjzy_square.png') no-repeat;
          background-size: 100%;
        }
        .znsf {
          background: url('~@/assets/home/znsf_square.png') no-repeat;
          background-size: 100%;
        }
        .tcfw {
          background: url('~@/assets/home/tcfw_square.png') no-repeat;
          background-size: 100%;
        }
        .kfzj {
          background: url('~@/assets/home/kfzj_square.png') no-repeat;
          background-size: 100%;
        }
        .ywzj {
          background: url('~@/assets/home/ywzj_square.png') no-repeat;
          background-size: 100%;
        }

        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0 10px 0 0;

          .header-right {
            display: flex;
            font-size: 14px;
            color: #212121;

            span {
              font-size: 14px;
              color: #212121;
            }

            div {
              margin-right: 24px;
            }
          }

          .header-right:last-child {
            div {
              margin-right: 16px;
            }
          }

          span {
            font-size: 20px;
            font-weight: 600;
            // color: #0087ff;
          }
        }

        .dec {
          overflow: hidden;
          text-overflow: ellipsis;
          // white-space: nowrap;
          color: #0058e1;
          display: flex;
          margin-top: 10px;

          div {
            margin-right: 10px;
            background: rgba(0, 88, 225, 0.1);
            padding-left: 10px;
            padding-right: 10px;
          }

          div:nth-child(3) {
            max-width: 200px;
            display: -webkit-box;
            /*设置为弹性盒子*/
            -webkit-line-clamp: 1;
            /*最多显示3行*/
            overflow: hidden;
            /*超出隐藏*/
            text-overflow: ellipsis;
            /*超出显示为省略号*/
            -webkit-box-orient: vertical;
          }
        }

        .btn {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          margin: 5px 0;

          // .left {
          //   width: 600px;
          //   display: flex;
          //   justify-content: space-between;
          //   flex-wrap: wrap;
          //   & > div {
          //     width: 300px;
          //     & > span {
          //       color: #0087ff;
          //       font-weight: 600;
          //     }
          //   }
          // }
          .right {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            margin: 0 10px;
            align-items: center;

            .shopping {
              span {
                display: inline-block;
                height: 32px;
                width: 32px;
                margin-right: 10px;
                margin-top: 5px;
              }

              .shopping-on {
                background: url('~@/assets/newHome/shopping-on.png');
                cursor: pointer;
              }

              .shopping-down {
                background: url('~@/assets/newHome/shopping-down.png');
              }
            }

            .pk-on {
              display: inline-block;
              height: 32px;
              width: 32px;
              margin-left: 10px;
              margin-right: 10px;
              margin-top: 5px;
              background: url('~@/assets/newHome/pk-on.png');
              cursor: pointer;
            }

            .sc {
              // margin-top: 4px;
              cursor: pointer;
              display: flex;
              align-items: center;

              .sc-down {
                display: inline-block;
                height: 32px;
                width: 32px;
                background: url('~@/assets/newHome/sc-down.png');
              }

              .sc-on {
                display: inline-block;
                height: 32px;
                width: 32px;
                background: url('~@/assets/newHome/sc-on.png');
              }
            }

            .ant-btn {
              background: transparent;
              background: #0058e1;
              color: white;
              width: 80px;
              height: 32px;
              font-weight: 600;
              border-radius: 2px;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 10px;
            }

            .ant-btn:last-child {
              background: #0058e1;
              color: white;
            }
          }
        }

        .bottom {
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          align-items: center;

          & > div {
            display: flex;
            align-items: center;

            & > div {
              margin: 0 10px;
            }
          }

          .pingfen {
            :deep(span) {
              display: flex;
              align-items: center;

              :deep(ul) {
                display: flex;
                align-items: center;

                :deep(.ant-rate-star:not(:last-child)) {
                  margin-right: 4px;
                }
              }
            }
          }
        }
      }

      .item:nth-of-type(1) {
        margin-top: 0;
      }
    }
  }
</style>