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

<!--
 * @Author: Light
 * @Date: 2022-11-16 16:46:16
 * @LastEditors: Light
 * @LastEditTime: 2022-11-18 15:35:25
 * @Description: 政务云资源列表
-->
<template>
  <div class="top">
    <div>检索结果：{{ props.governmentCloud.total }}项</div>
    <div>
      使用声明:
      附加增值服务，委办局单位可以根据自身需求，按需采购，由采购单位付费。
    </div>
  </div>
  <div
    class="bottom"
    v-for="(item, index) in props.governmentCloud.data"
    :key="item.service_item_tier1 + index"
  >
    <div class="left"></div>
    <div class="right">
      <div class="title">
        <div>
          <div class="name">{{ item.service_item_tier1 }}</div>
          <div class="type">{{ item.service_type }}</div>
        </div>
        <div>年份：{{ item.year }}</div>
      </div>
      <div class="text">{{ item.service_description }}</div>
      <div class="info">
        <div>一级条目：{{ item.service_item_tier2 }}</div>
        <div>规格：{{ item.specification }}</div>
      </div>
    </div>
  </div>
  <a-pagination
    v-model:current="current"
    :pageSize="5"
    :total="props.governmentCloud.total"
    :showSizeChanger="false"
    @change="changeCurrent"
    show-less-items
  />
</template>
<script setup>
  import { ref, defineProps, defineEmits } from 'vue'
  const props = defineProps({
    governmentCloud: { type: Object, default: null },
  })
  const emit = defineEmits(['getGovernmentCloud'])
  const current = ref(props.governmentCloud.current)
  const changeCurrent = (current) => {
    console.log(current)
    emit('getGovernmentCloud', current)
  }
</script>
<style lang="less" scoped>
  .top {
    display: flex;
    justify-content: space-between;
    color: #333;
    padding-bottom: 10px;
    border-bottom: 1px #ccc solid;
  }
  .bottom {
    margin-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px #ccc solid;
    .left {
      width: 110px;
      height: 110px;
      background: url('~@/assets/home/znsf_square.png') no-repeat;
      background-size: 100%;
    }
    .right {
      flex: 1;
      margin-left: 20px;
      .title {
        display: flex;
        justify-content: space-between;
        div:nth-of-type(1) {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .name {
            max-width: 400px;
            height: 22px;
            line-height: 24px;
            overflow: hidden; //超出的文本隐藏
            display: -webkit-box;
            -webkit-line-clamp: 1; // 超出多少行
            -webkit-box-orient: vertical;
            font-size: 20px;
            font-weight: 600;
          }
          .type {
            margin-left: 10px;
            padding: 1px 5px;
            color: rgba(0, 88, 225, 0.8);
            background-color: rgba(0, 135, 225, 0.1);
            border-radius: 15px;
          }
        }
      }
      .text {
        height: 50px;
        overflow: hidden; //超出的文本隐藏
        display: -webkit-box;
        -webkit-line-clamp: 2; // 超出多少行
        -webkit-box-orient: vertical;
      }
      .info {
        display: flex;
        justify-content: flex-start;
        div:nth-of-type(1) {
          margin-right: 50px;
        }
      }
    }
  }
</style>