hi-ucs/front/src/views/abilityStatistics/components/CapabilityRequirements.vue

<template>
  <div class="CapabilityRequirements">
    <div class="top">
      能力需求
      <span class="line"></span>
    </div>
    <div class="main">
      <div class="bottom" v-if="dataList != ''">
        <div class="item" v-for="(item, index) in dataList" :key="index">
          <div
            class="img"
            :style="{
              backgroundImage: `url(${item.photo}) `,
            }"
          ></div>
          <a-tooltip>
            <template #title>{{ item.demandSubject }}</template>
            <div class="name">{{ item.demandSubject }}</div>
          </a-tooltip>
          <a-tooltip>
            <template #title>{{ item.demandDetails }}</template>
            <div class="text">
              {{ item.demandDetails }}
            </div>
          </a-tooltip>
          <div class="reply">回复量:{{ item.commentCount }}</div>
          <div class="view-details" @click="viewDetails(item.id)">查看详情</div>
        </div>
      </div>
      <div class="bottom-btn" v-if="dataList != ''" @click="jumpPage()">
        查看更多
        <span class="gengduo"></span>
      </div>
      <a-empty
        v-else
        style="margin-top: 160px; margin-bottom: 60px"
        :imageStyle="{ color: '#0058e1' }"
      />
    </div>
  </div>
</template>
<script setup>
  import { onMounted, ref } from 'vue'
  import { capabilityRequirements } from '@/api/abilityStatistics'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  let photo = ref([
    require('../../../assets/newHome/popular-jc.png'),
    require('../../../assets/newHome/popular-sj.png'),
    require('../../../assets/newHome/popular-zj.png'),
    require('../../../assets/newHome/popular-yy.png'),
    require('../../../assets/newHome/popular-zs.png'),
  ])
  //查看详情方法
  function viewDetails(id) {
    console.log('id=========>', id)
    router.push({
      path: '/demandDetails',
      query: {
        id: id,
      },
    })
  }
  function jumpPage() {
    router.push({
      path: '/demandCenter',
    })
  }
  let dataList = ref([])
  const mycapabilityRequirements = () => {
    const data = {
      page: 1,
      limit: 5,
      // flag: 3,
    }
    capabilityRequirements(data).then((res) => {
      dataList.value = res.data.data.list
      dataList.value.map((item, index) => {
        switch (item.detailsType) {
          case '基础设施':
            dataList.value[index].photo = photo.value[0]
            break
          case '数据资源':
            dataList.value[index].photo = photo.value[1]
            break
          case '组件服务':
            dataList.value[index].photo = photo.value[2]
            break
          case '应用资源':
            dataList.value[index].photo = photo.value[3]
            break
          case '知识库':
            dataList.value[index].photo = photo.value[4]
            break
          default:
            dataList.value[index].photo = photo.value[4]
            break
        }
        dataList.value = []
      })

      console.log('123123123qwee', dataList.value)
    })
  }
  onMounted(() => {
    mycapabilityRequirements()
  })
</script>
<style lang="less" scoped>
  @font-face {
    font-family: 'num-typeface';
    src: url('~@/assets/newHome/font/num-typeface.otf');
  }
  @font-face {
    font-family: 'text-typeface';
    src: url('~@/assets/newHome/font/text-typeface.otf');
  }
  .CapabilityRequirements {
    font-family: text-typeface;
    // margin-top: 80px;
    width: 100%;
    // height: 600px;
    display: flex;
    background-size: 100%;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background: #f1f4fb;
    .top {
      font-size: 30px;
      color: #000;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 18px;

      .line {
        width: 34px;
        height: 3px;
        background-color: #0058e1;
        margin-top: 8px;
      }
    }
    .main {
      width: 100%;
      padding-top: 40px;
      padding-bottom: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: url(../../../assets/abilityStatistics/nenglixvqiu-bg.png)
        no-repeat;
    }
    .bottom {
      display: flex;
      margin-top: 48px;
      .item {
        width: 250px;
        height: 321px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 12px;
        margin: 6px;
        background: rgb(255, 255, 255);
        .img {
          width: 56px;
          height: 56px;
          margin: 29px 85px;
          background-repeat: no-repeat;
        }
        .name {
          text-align: center;
          font-size: 16px;
          color: #212121;
          margin-bottom: 24px;
          width: 226px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .text {
          width: 100%;
          height: 35px;
          overflow: hidden;
        }
        .reply {
          font-size: 14px;
          color: #666;
          text-align: center;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
        .view-details {
          width: 75px;
          text-align: center;
          margin-top: 10px;
          margin-left: calc(50% - 38px);
          margin-bottom: 20px;
          border: 1px solid #0058e1;
        }
        .view-details:hover {
          background: rgba(0, 88, 225, 0.3);
          cursor: pointer;
        }
      }
      .item:hover {
        border-radius: 2px;
        border: 1px solid #0058e1;
        box-shadow: 0px 8px 20px rgba(0, 88, 225, 0.3);
      }
    }
  }
  .bottom-btn {
    cursor: pointer;
    text-align: center;
    margin-top: 24px;
    width: 100px;
    height: 24px;
    line-height: 24px;
    margin-left: center;
    color: #fff;
    // span {
    //   display: inline-block;
    //   width: 10px;
    //   height: 10px;
    // }
  }
  .gengduo {
    display: inline-block;
    margin-left: 4px;
    width: 10px;
    height: 10px;
    background: url('~@/assets/newHome/gd.png') no-repeat;
    background-position: center;
  }
  .bottom-btn:hover {
    border-radius: 2px;
    background-color: rgba(1, 102, 255, 1);
  }
</style>