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

<template>
  <div class="capability-convergence">
    <div class="main">
      <div class="top">
        能力汇聚
        <span class="line"></span>
      </div>
      <div class="bottom">
        <div class="item">
          <div class="zj">组件服务</div>
          <div
            class="name"
            v-for="(item, index) in zjList"
            :key="item.id"
            :class="index == 4 ? 'name-last' : ''"
            @click="selectOne(item.id)"
          >
            {{ index + 1 }}-{{ item.name }}
          </div>
          <div class="btn" @click="jumpPage('组件服务')">查看更多</div>
        </div>
        <div class="item">
          <div class="yy">应用资源</div>
          <div
            class="name"
            v-for="(item, index) in yyList"
            :key="item.id"
            :class="index == 4 ? 'name-last' : ''"
            @click="selectOne(item.id)"
          >
            {{ index + 1 }}-{{ item.name }}
          </div>
          <div class="btn" @click="jumpPage('应用资源')">查看更多</div>
        </div>
        <div class="item">
          <div class="jc">基础设施</div>
          <div class="name">1-J1-党建展示区走廊-北向</div>
          <div class="name">2-J2-党建数据中心机房</div>
          <div class="name">3-J3-党建展示区走廊-南向</div>
          <div class="name">4-J4-党建大厅电动门</div>
          <div class="name name-last">5-J5-指挥席位东北向</div>
          <div class="btn" @click="jumpPage('基础设施')">查看更多</div>
        </div>
        <div class="item">
          <div class="sj">数据资源</div>
          <div class="name">1-扬尘数据接口</div>
          <div class="name">2-根据证件号码查询全员核酸检测信息(人社专用)</div>
          <div class="name">
            3-根据身份证号、姓名、开始日期、结束日期获取医保住院结算信息（市人社局专用）
          </div>
          <div class="name">
            4-根据身份证号、姓名、年度查询医保参保缴费信息（市委组织部专用）
          </div>
          <div class="name name-last">5-"金种子"人才培养经费查询API</div>
          <div class="btn" @click="jumpPage('数据资源')">查看更多</div>
        </div>
        <div class="item">
          <div class="zs">知识库</div>
          <div
            class="name"
            v-for="(item, index) in zsList"
            :key="item.id"
            :class="index == 4 ? 'name-last' : ''"
            @click="selectOne(item.id)"
          >
            {{ index + 1 }}-{{ item.name }}
          </div>
          <div class="btn" @click="jumpPage('知识库')">查看更多</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { pageWithAttrs } from '@/api/home.js'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  const store = useStore()
  const router = useRouter()
  const zjList = ref([])
  const yyList = ref([])
  // 知识库模块数据
  const zsList = ref([])
  // const jcList = ref([])
  const paramsGetResources = {
    districtId: '',
    pageNum: 1,
    pageSize: 5,
    type: '',
    name: '',
    infoList: [],
    orderField: 'total', // total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
    orderType: 'DESC', // ASC 升序  DESC 降序
  }
  const getAppResources = (type, obj) => {
    paramsGetResources.type = type
    pageWithAttrs(paramsGetResources).then((res) => {
      console.log('知识库查询列表============>', res.data.data.records)
      obj.value = res.data.data.records
    })
  }
  getAppResources('组件服务', zjList)
  getAppResources('应用资源', yyList)
  getAppResources('知识库', zsList)

  function jumpPage(type) {
    // 点击内存入store
    store.commit('home/selectCardsData', {
      selectCardsnum: type,
    })
    console.log(
      '选中===================>',
      store.getters['home/selectCardsnum']
    )
    // router.push({ path: '/DetailsPageconetent' })
    router.push({
      path: '/DetailsPageconetent',
      query: {
        select: type,
      },
    })
  }
  const selectOne = (id) => {
    console.log('点击===============》', id)
    router.push({
      path: '/details',
      query: {
        id: id,
      },
    })
  }
</script>
<style lang="less" scoped>
  .capability-convergence {
    height: 7.2rem;
    background: url('~@/assets/newHome/Convergence-bg.png') no-repeat;
    background-size: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 13rem;
      margin-top: 1.8rem;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      .top {
        font-size: 0.3rem;
        color: #212121;
        text-align: center;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        .line {
          width: 0.34rem;
          height: 0.03rem;
          background-color: #0058e1;
          margin-top: 0.08rem;
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 0.4rem;
        .item {
          width: 2.44rem;
          height: 3.91rem;
          font-size: 0.16rem;
          background-color: #fff;
          border-radius: 0.02rem;
          box-shadow: 0 0.05rem 0.2rem #ccc;
          div:nth-of-type(1) {
            height: 1.02rem;
            line-height: 1.02rem;
            font-size: 0.2rem;
            color: #fff;
            padding-left: 0.15rem;
            background-size: 100%;
          }
          .jc {
            background: url('~@/assets/newHome/Convergence-jc.png') no-repeat;
          }
          .sj {
            background: url('~@/assets/newHome/Convergence-sj.png') no-repeat;
          }
          .zj {
            background: url('~@/assets/newHome/Convergence-zj.png') no-repeat;
          }
          .yy {
            background: url('~@/assets/newHome/Convergence-yy.png') no-repeat;
          }
          .zs {
            background: url('~@/assets/newHome/Convergence-zs.png') no-repeat;
          }
          .name {
            height: 0.47rem;
            line-height: 0.47rem;
            margin: 0 0.16rem;
            border-bottom: 0.01rem solid #e9e9e9;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .name:hover {
            color: #0058e1;
            cursor: pointer;
          }
          .name-last {
            border-bottom: none;
          }
          .btn {
            cursor: pointer;
            width: 0.8rem;
            height: 0.24rem;
            border: 0.01rem solid #0058e1;
            font-size: 0.14rem;
            color: #0058e1;
            border-radius: 0.02rem;
            text-align: center;
            margin-top: 0.1rem;
            margin-left: 0.85rem;
          }
          .btn:hover {
            background: rgba(0, 88, 225, 0.3);
            color: #000;
          }
        }
        .item:hover {
          border-radius: 0.02rem;
          border: 0.01rem solid #0058e1;
          box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
        }
      }
    }
  }
</style>