cankao-h5/src/pages/bookmark/components/articleList.vue

<template>
  <view class="subscribedContainer">
    <!-- 内容部分 -->
    <view class="subContent">
      <!-- 列表区域 -->
      <u-loading-icon :show="loading"></u-loading-icon>
      <u-empty v-if="listData.length == 0 && !loading" mode="data" text="暂无内容">
      </u-empty>
      <NewItem v-else :listData="listData" @onClick="doDetail" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import NewItem from "@/components/newItem/index.vue";

const props = defineProps({
  listData: {
    type: Array,
    default: () => { },
  },
  loading: {
    type: Boolean,
    default: () => false,
  },
});

const doDetail = (item: any) => {
  console.log("🚀 ~ doDetail ~ item:", item)
  uni.navigateTo({
    url: `/pages/detail/index?id=${item.id}`,
  });
};

</script>

<style lang="scss" scoped>
.subscribedContainer {
  .subHeader {
    // height: 60rpx;
    // background-color: red;
    box-sizing: border-box;
    padding: 12rpx 40rpx;
    display: flex;
    align-items: center;
    position: relative;

    .flashBack {}

    .title {
      //   background-color: red;
      font-size: var(--h1-font-size);
      color: #fff;
      // font-weight: bold;
      width: 100%;
      display: flex;
      justify-content: center;
      //   left: 50%;
      //   transform: translateX(-50%);
      //   position: absolute;
      //   text-align: center;
      //   z-index: -1;
    }
  }

  .subContent {
    .tabsContainer {
      box-sizing: border-box;
      padding: 10rpx 30rpx;
      display: flex;
      overflow-x: auto;

      .tabsItem {
        font-size: var(--h4-font-size);
        color: #595959;
        box-sizing: border-box;
        padding: 6rpx 20rpx;
        border: 1px solid #dbdbdb;
        margin-right: 21rpx;
        border-radius: 99rpx;
        flex-shrink: 0;

        &.active {
          background-color: rgba(255, 208, 212, 0.4);
          border-color: rgba(255, 208, 212, 0.4);
          color: #e7303f;
        }
      }
    }

    .colListContainer {
      box-sizing: border-box;
      padding: 30rpx 0;

      .colListItem {
        box-sizing: border-box;
        padding: 12rpx 27rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 21rpx;

        .ItemLeft {
          box-sizing: border-box;
          padding: 0rpx 27rpx;
          position: relative;

          &::before {
            content: "";
            display: block;
            width: 8rpx;
            height: 64rpx;
            background-color: #f2505d;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }

          .colName {
            // font-size: 32rpx;
            font-size: var(--h1-font-size);
            color: #333;
            // font-weight: bold;
            margin-bottom: 12rpx;
          }

          .colDesc {
            color: #333;
            // font-size: 28rpx;
            font-size: var(--h2-font-size);
            margin-bottom: 12rpx;
          }

          .colValidTime {
            font-size: 20rpx;
            color: rgba(51, 51, 51, 0.6);
          }
        }

        .ItemRight {
          display: flex;
          align-items: center;

          .ItemVipCol {
            width: 118rpx;
            height: 42rpx;
            background-image: url(https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/vipCol.png);
            margin-right: 21rpx;
            background-size: contain;
          }
        }
      }
    }
  }
}
</style>