web/pages/mine/modules/down.vue

<template>
  <div class="list-box">
    <div class="title">My download</div>
    <div class="list">
      <div class="item" v-for="(v,i) in 3" :key="i">
        <img src="" alt="">
        <div class="item_content">
          <div class="item_content_title">
            <img src="" alt="">
            <div>
              China Industrial Park Industry Market In-depth Research and Investment Strategy Planning Report 2024-2030
            </div>
          </div>
          <div class="item_content_format"> Download file format： <span>PDF</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { NButton, NPagination, NEmpty, createDiscreteApi } from "naive-ui";
import { useRouter, useRoute } from "vue-router";
const router = useRouter(); // 传递参数
const props = defineProps({
  isMobile: {
    type: Boolean,
    default: false,
  },
});

const queryParams = reactive({
  pageNo: 1,
  pageSize: 5,
});

const pageData = ref({});

onMounted(() => {
  getList();
});

const message = createDiscreteApi(["message"]);

const getList = async () => {
  const { code, data } = await getMyDoen_Api(queryParams);
  if (code === 200) {
    pageData.value = data;
  }
};

const toDetail = (item: object) => {
  router.push({
    name: "bulletinDetail",
    params: {
      webTitle: item?.report?.webTitle + "-" + item?.report?.id,
    },
  });
};

// 改变页数
const changePage = (page: number) => {
  document.documentElement.scrollTop = 0;
  queryParams.pageNo = page;
  getList();
};
</script>

<style lang="scss" scoped>
@import "~/assets/css/tool.scss";
.list-box {
  .title {
    font-size: 24px;
    font-family: Arial, Arial-Bold;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 44px;
    padding-bottom: 7px;
    border-bottom: 1px solid #e6e6e6;
  }
  .list {
    margin-top: 45px;
    .item {
      padding: 30px 25px;
      display: flex;
      border: 1px solid #e6e6e6;
      margin-bottom: 30px;
      &:last-child {
        margin-bottom: 0;
      }
      img {
        width: 148px;
        height: 216px;
        object-fit: contain;
      }
      .item_content {
        margin-left: 40px;
        .item_content_title {
          font-size: 21px;
          font-family: Arial, Arial-Regular;
          color: #1a1a1a;
          line-height: 28px;
          margin-top: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          > img {
            display: none;
          }
        }
        .item_content_format {
          display: flex;
          font-size: 16px;
          font-family: Arial, Arial-Regular;
          color: #1a1a1a;
          line-height: 44px;
          letter-spacing: 0.05px;
          span {
            color: #808080;
          }
        }
      }
    }
  }
}
@include responseTo("phone") {
  .list-box {
    .list {
      margin-top: 20px;
      .item {
        padding: 10px;
        > img {
          display: none;
        }
        .item_content {
          padding: 10px;
          margin: 0;
          .item_content_title {
            display: flex;
            > div {
              font-size: 18px;
              line-height: 26px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 4;
              -webkit-box-orient: vertical;
            }
            > img {
              width: 74px;
              height: 108px;
              object-fit: contain;
              margin-right: 10px;
            }
          }
          .item_content_format {
            font-size: 14px;
          }
          .item_content_amount {
            font-size: 14px;
            line-height: 30px;
            span {
              font-size: 26px;
            }
          }
        }
        .btnBox {
          position: static;
          width: 100%;
          justify-content: center;
          padding-bottom: 20px;
        }
      }
    }
  }
}
</style>