hi-ucs/front/src/views/newHome/components/RecommendationAbility.vue

<template>
  <div class="recommendation-ability">
    <div class="recommendation-ability-son">
      <div class="title">
        <div>推荐能力</div>
        <div class="title-son"></div>
      </div>
      <div class="content" v-if="dataList && dataList.length > 0">
        <div v-for="item in dataList" :key="item" class="content-son">
          <div class="content-top">
            <div class="content-top-tupian">
              <div
                class="content-top-tupian-son"
                :style="
                  'background:url(' +
                  item.tupian +
                  ') no-repeat' +
                  ';background-size:contain'
                "
              ></div>
            </div>
            <div>
              <div class="content-top-title">{{ item.name }}</div>
              <div class="content-top-pingfen">
                <a-rate v-model:value="item.score" disabled />
              </div>
            </div>
          </div>
          <div class="content-center">
            {{ item.description }}
          </div>
          <div class="num">{{ item.createDate }}发布</div>
          <div class="content-bootom" @click="selectOne(item.id)">查看详情</div>
          <div class="sanjiao"></div>
        </div>
        <div class="bottom" @click="jumpPage()">
          查看更多
          <span class="gengduo"></span>
        </div>
      </div>
      <a-empty v-else></a-empty>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import { selectRecommend } from '@/api/home.js'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  const store = useStore()
  const router = useRouter()
  let dataList = ref([])
  const getList = () => {
    selectRecommend().then((res) => {
      dataList.value = res.data.data.records
      dataList.value.map((item, index) => {
        // debugger
        switch (item.type) {
          case '组件服务':
            dataList.value[
              index
            ].tupian = require('../../../assets/newHome/zujianfuwu.png')
            break
          case '应用资源':
            dataList.value[
              index
            ].tupian = require('../../../assets/newHome/yingyongziyuan.png')
            break
          case '基础设施':
            dataList.value[
              index
            ].tupian = require('../../../assets/newHome/jichusheshi.png')
            break
          case '数据资源':
            dataList.value[
              index
            ].tupian = require('../../../assets/newHome/shujuziyuan.png')
            break
        }
      })
    })
  }
  getList()
  function jumpPage() {
    // 点击内存入store
    store.commit('home/selectCardsData', {
      selectCardsnum: '组件服务',
    })
    console.log(
      '选中===================>',
      store.getters['home/selectCardsnum']
    )
    // router.push({ path: '/DetailsPageconetent' })
    router.push({
      path: '/DetailsPageconetent',
      query: {
        select: '组件服务',
      },
    })
  }
  const selectOne = (id) => {
    console.log('点击===============》', id)
    router.push({
      path: '/details',
      query: {
        id: id,
      },
    })
  }
</script>
<style lang="less" scoped>
  .recommendation-ability {
    width: 100%;
    display: flex;
    justify-content: center;
    background: url('~@/assets/newHome/recommendation-ability-bg.png') no-repeat;
    background-size: cover;
    .recommendation-ability-son {
      width: 13rem;
      left: 50%;
      margin: 0.78rem 0 0.78rem 0rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title {
        color: #ffffff;
        font-size: 0.3rem;
        font-family: 'convergence-typeface';
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0.32rem;
        .title-son {
          width: 0.34rem;
          height: 0.03rem;
          background: #ffffff;
          border-radius: 0.01rem;
          margin-top: 0.18rem;
        }
      }
      .content {
        width: 100%;
        background: linear-gradient(#ffffff, #edf1ff);
        box-shadow: 0rem -0.04rem 0.1rem rgba(0, 0, 0, 0.1);
        padding: 0rem 0.2rem 0.55rem 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        color: #ffffff;
        position: relative;
        .content-son {
          width: 4.06rem;
          height: 2.21rem;
          border-radius: 0.02rem;
          padding: 0.24rem 0.24rem 0.16rem 0.24rem;
          position: relative;
          margin-left: 0.2rem;
          margin-top: 0.2rem;
          .content-top {
            display: flex;
            margin-bottom: 0.2rem;
            .content-top-tupian {
              width: 0.56rem;
              height: 0.56rem;
              border-radius: 0.56rem;
              margin-right: 0.12rem;
              .content-top-tupian-son {
                height: 0.56rem;
                width: 0.56rem;
              }
            }
            .content-top-title {
              font-family: 'convergence-typeface';
              color: #ffffff;
              font-weight: bold;
              font-size: 0.18rem;
              height: 0.28rem;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            .content-top-pingfen {
              background: unset;
              :deep(.ant-rate) {
                li {
                  background: unset !important;
                  margin-right: 0.06rem;
                }
              }
            }
          }
          .content-center {
            height: 0.38rem;
            width: 3.47rem;
            font-family: text-typeface;
            font-size: 0.14rem;
            line-height: 0.2rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-bottom: 0.12rem;
            cursor: pointer;
          }
          .num {
            font-size: 0.14rem;
          }
          .sanjiao {
            height: 0;
            width: 0;
            margin-left: -0.24rem;
            margin-top: -1.58rem;
          }
          .content-bootom {
            position: absolute;
            height: 0.24rem;
            line-height: 0.24rem;
            width: 0.8rem;
            color: #ffffff;
            bottom: 0.16rem;
            left: 50%;
            font-size: 0.12rem;
            margin-left: -0.4rem;
            bottom: 0.1rem;
            background: unset;
            border: 1px solid #ffffff;
            text-align: center;
            cursor: pointer;
          }
          .content-bootom:hover {
            background: rgba(0, 88, 225, 0.3);
          }
        }
        .content-son:hover {
          border-radius: 0.02rem;
          border: 1px solid #0058e1;
          box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
        }
        .content-son:nth-child(1),
        :nth-child(5),
        :nth-child(9) {
          background: #27a989;
          .content-top-tupian {
            background: #0b9976;
          }
          .sanjiao {
            border-top: 0.9rem solid #27a989;
            border-right: 1.49rem solid #27a989;
            border-left: 1.49rem solid #35b193;
            border-bottom: 0.9rem solid #35b193;
          }
        }
        .content-son:nth-child(2),
        :nth-child(6),
        :nth-child(8) {
          background: #557ec7;
          .content-top-tupian {
            background: #3e6ab7;
          }
          .sanjiao {
            border-top: 0.9rem solid #557ec7;
            border-right: 1.49rem solid #557ec7;
            border-left: 1.49rem solid #5b83cb;
            border-bottom: 0.9rem solid #5b83cb;
          }
        }
        .sanjiao {
          border-top: 0.9rem solid #557ec7;
          border-right: 1.49rem solid #557ec7;
          border-left: 1.49rem solid #5b83cb;
          border-bottom: 0.9rem solid #5b83cb;
        }
      }
      .content-son:nth-child(3),
      :nth-child(4),
      :nth-child(7) {
        background: #01a4e1;
        .content-top-tupian {
          background: #0193ca;
        }
        .sanjiao {
          border-top: 0.9rem solid #01a4e1;
          border-right: 1.49rem solid #01a4e1;
          border-left: 1.49rem solid #10adef;
          border-bottom: 0.9rem solid #10adef;
        }
      }
      .bottom {
        position: absolute;
        left: 50%;
        bottom: 0.2rem;
        height: 0.24rem;
        font-size: 0.16rem;
        width: 1rem;
        margin-left: -0.5rem;
        cursor: pointer;
        text-align: center;
        color: #000000;
        .gengduo {
          display: inline-block;
          margin-left: 0.04rem;
          width: 0.1rem;
          height: 0.1rem;
          background: url('~@/assets/newHome/gd2.png') no-repeat;
          background-size: contain;
          background-position: center;
        }
      }
      .bottom:hover {
        border-radius: 0.02rem;
        background-color: rgba(1, 102, 255, 0.1);
      }
    }
  }
</style>