cankao-h5/src/components/articleList/index2.vue

<template>
  <view class="list" v-if="data.length">
    <view class="listItem" v-for="item in props.data" :key="item.id" @click="handleClick(item)">
      <view class="listItemHeader">
        <view class="ListItemImg" v-if="item.picture">
          <image :src="item.picture" class="ListItemImage" mode="widthFix" style="width: 204rpx" />
          <image class="ListItemBg" :src="item.picture" style="width: 100%; height: 100%" />
          <view class="tag" v-if="item.newType !== 'search'">{{ item.tag }}</view>
        </view>
        <view class="listItemHeaderContent">
          <view v-if="!isLogin">
            <text :class="['listItemTitle']">{{ item.title.slice(0, 3) }}</text>
            <text :class="['listItemTitle', isLogin ? '' : 'mohu']">
              {{ item.title.slice(3, item.title.length) }}
            </text></view
          >
          <view v-else>
            <view :class="['listItemTitle1']" v-html="item.title"> </view>
          </view>
          <view :class="['listItemAbstract', isLogin ? '' : 'mohu']" v-if="item.newType !== 'search'" v-html="item.summary"></view>
          <view :class="['listItemAbstract', isLogin ? '' : 'mohu']" v-else v-html="item.MarkInRedContent || item.abstract"></view>
        </view>
      </view>

      <!-- <view class="tabContainer">
        <view class="tag">{{ item.tag }}</view>
      </view> -->

      <view :class="['listItemContent', isLogin ? '' : 'mohu']">
        <view style="display: flex">
          <view class="tag">{{ item.tag }}</view>
          <view class="listItemTime" style="margin-left: 10rpx">{{ item.time }}</view>
        </view>

        <view class="r_option">
          <image class="option_icon" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/eye_icon%402x.png"></image>
          <text class="option_text">{{ item.readNums }}</text>

          <image class="option_icon" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/like_icon%402x.png"></image>
          <text class="option_text">{{ item.likeNums }}</text>

          <image class="option_icon" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/share_icon%402x.png"></image>
          <text class="option_text">{{ item.shareNums }}</text>
        </view>
      </view>

      <!-- <view class="listItemFooter" v-if="item.needpay"></view> -->
    </view>
  </view>

  <u-empty mode="news" v-else> </u-empty>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";

const emit = defineEmits(["handleListJump", "onClick"]);
const isLogin = ref(uni.getStorageSync("token"));

const props = defineProps({
  // 列表内容
  data: {
    type: Array,
    default: () => [],
  },
});
console.log("props ===>", props.data);
const handleListJump = (item) => {
  emit("handleListJump", item);
};

// 点击新闻传给父组件
const handleClick = (item: any) => {
  emit("onClick", item);
};
</script>

<style lang="scss" scoped>
.list {
  box-sizing: border-box;
  background-color: #fff;
  padding: 0 40rpx 30rpx 40rpx;
  border-radius: 10rpx;
  font-family: "SourceHanSansCN-Regular";

  .listItem {
    border-bottom: 2rpx solid rgba(51, 51, 51, 0.1);
    box-sizing: border-box;
    padding: 30rpx 0;

    .listItemHeader {
      display: flex;
      justify-content: space-between;

      .ListItemImg {
        width: 204rpx;
        height: 204rpx;
        border-radius: 9rpx;
        overflow: hidden;
        background-color: #c4c4c4;
        flex-shrink: 0;
        position: relative;
        margin-right: 12rpx;

        .ListItemImage {
          width: 100%;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          z-index: 9;
        }

        .ListItemBg {
          filter: blur(30rpx);
        }

        .tag {
          position: absolute;
          right: 0;
          bottom: 0;
          box-sizing: border-box;
          padding: 6rpx 16rpx;
          border-radius: 4rpx;
          background-color: #e7303f;
          // font-size: 20rpx;
          font-size: var(--h6-font-size);
          color: #fff;
          z-index: 9;
        }
      }

      .listItemHeaderContent {
        // width: 100%;
        box-sizing: border-box;
        padding-left: 0rpx;
        display: flex;
        flex-direction: column;

        .listItemTitle1 {
          font-size: 32rpx;
          font-size: var(--h1-font-size);
          color: #333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          word-break: break-all;

          font-family: PingFangSC, PingFang SC;
          font-weight: bold;
          font-size: 32rpx;
          color: #192236;
          line-height: 45rpx;
          text-align: left;
          font-style: normal;
        }
        .listItemTitle {
          // font-size: 32rpx;
          // font-size: var(--h1-font-size);
          // color: #333;
          // display: -webkit-box;
          // -webkit-box-orient: vertical;
          // -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          word-break: break-all;

          font-family: PingFangSC, PingFang SC;
          font-weight: bold;
          font-size: 32rpx;
          color: #192236;
          line-height: 45rpx;
          text-align: left;
          font-style: normal;

          // text-align: left;
          &.noAbstract {
            -webkit-line-clamp: 4;
          }

          .isVip {
            display: inline-block;
            width: 50rpx;
            height: 29rpx;
            background-image: url(https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/icon_vip.png);
            background-size: cover;
          }
        }

        .listItemTitleContent {
          // font-size: 32rpx;
          font-size: var(--h1-font-size);
          // color: #333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          // font-weight: bold;

          .isVip {
            display: inline-block;
            width: 50rpx;
            height: 29rpx;
            background-image: url(https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/icon_vip.png);
            background-size: cover;
            box-sizing: border-box;
            margin-right: 12rpx;
          }
        }

        .listItemAbstract {
          box-sizing: border-box;
          padding-top: 12rpx;
          // font-size: 26rpx;
          font-size: var(--h3-font-size);
          color: rgba(51, 51, 51, 0.6);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;

          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #2d3849;
          line-height: 33rpx;
          text-align: left;
          font-style: normal;
        }
      }
    }

    .listItemContent {
      // font-size: 20rpx;
      font-size: var(--h6-font-size);
      color: #b9b9b9;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 21rpx 0 0 0;

      .listItemData {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .dataItem {
          margin-right: 12rpx;

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }

    .tabContainer {
      display: flex;
      box-sizing: border-box;
      padding-top: 21rpx;

      .tag {
        box-sizing: border-box;
        padding: 6rpx 16rpx;
        border-radius: 4rpx;
        background-color: #e7303f;
        // font-size: 20rpx;
        font-size: var(--h6-font-size);
        color: #fff;
      }
    }

    .listItemFooter {
      height: 74rpx;
      margin-top: 15rpx;
      background-image: url(https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/vip_sub_2.png);
      background-size: cover;
    }
  }
}

.listItemTitleContentText {
  font-family: "SourceHanSansCN-Medium";
}

.r_option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;

  .option_icon {
    width: 24rpx;
    height: 24rpx;
  }

  .option_text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #192236;
    line-height: 33rpx;
    text-align: justify;
    font-style: normal;
  }
}

.mohu {
  filter: blur(7rpx);
}
</style>