cankao-h5/src/pages/realtimeInfo/pc/rank.vue

<template>
  <view class="pc_all">
    <PageTop></PageTop>

    <view class="content" :style="{ filter: Session.get('token') ? '' : 'blur(5px)' }">
      <view class="top_title">
        <text class="pageTitle">资讯头条榜</text>
        <image src="@/assets/zixun/top20_icon.png" class="title_icon"></image>
      </view>

      <view class="line"></view>

      <view class="r_list">
        <view class="list_item" v-for="(item, index) in newsList" :key="index">
          <view class="r_list_item_num">
            <view class="list_item_num num1" v-if="index < 3 && index == 0">{{ index + 1 }}</view>
            <view class="list_item_num num2" v-else-if="index < 3 && index == 1">{{ index + 1 }}</view>
            <view class="list_item_num num3" v-else-if="index < 3 && index == 2">{{ index + 1 }}</view>
            <view class="list_item_num nol_num" v-else>{{ index + 1 }}</view>
          </view>

          <view class="list_item_content">
            <text class="item_title" @click="goDetail(item)">{{ item.title }}</text>
            <text class="item_summary">{{ item.summary }}</text>

            <view class="item_bottom">
              <view>
                <text class="time">{{ item.source }}</text>
                <text class="time" style="margin-left: 30rpx">{{ dayjs(item.publish_time).format("YYYY-MM-DD HH:MM:ss") }}</text>
              </view>

              <text class="score">{{ item.news_score }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <LoginPopup
      :show="LoginShow"
      mode="center"
      @handlePopupClose="handlePopupClose"
      @handlePopupSuccessCallback="handlePopupSuccessCallback"
      @handlePopupErrorCallback="handlePopupErrorCallback" />
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from "vue";
import PageTop from "@/pages/realtimeInfo/pc/components/PageTop.vue";
import { getTopNews, getTopNewsDay } from "@/api/newsInfo";
import dayjs from "dayjs/esm/index";
import LoginPopup from "@/components/loginPopup/index.vue";
import { Session } from "@/utils/storage";

const newsList = ref([]);

// 概念标签贴标
async function getNewsList() {
  newsList.value = await getTopNewsDay({});
}

function goDetail(item) {
  uni.navigateTo({
    url: "/pages/realtimeInfo/pc/indexPC?id=" + item.news_id + "&type=1",
  });
}

onMounted(async (e) => {
  getNewsList();

  if (!Session.get("token")) {
    LoginShow.value = true;
  }
});

const LoginShow = ref(false);
const isLoginStatus = ref();
// 关闭弹框
const handlePopupClose = () => {
  LoginShow.value = false;
};

// 登录成功之后的回调
const handlePopupSuccessCallback = () => {
  isLoginStatus.value = true;
  window.location.reload();
  // uni.navigateTo({
  //   url: "/pages/realtimeInfo/rankDetail?type=" + type,
  // });
};

// 登录失败之后的回调
const handlePopupErrorCallback = () => {
  console.log("登录失败");
};
</script>

<style scoped lang="scss">
@import url("./index.css");

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

  .pageTitle {
    font-family: AlibabaPuHuiTiM;
    font-size: 26px;
    color: #1a1a1a;
    font-weight: bold;
  }

  .title_icon {
    width: 180rpx;
    height: 50rpx;
    margin-left: 20rpx;
  }
}

.line {
  width: 100%;
  height: 1px;
  background-color: #f0f0f0;
  margin-top: 50rpx;
}

.r_list {
  display: flex;
  flex-direction: column;
}

.list_item {
  display: flex;
  min-height: 200rpx;
  padding: 30rpx 0;
  border-bottom: 1px solid #f6f6f6;
  margin-top: 30rpx;

  .r_list_item_num {
    width: 100rpx;

    display: flex;
    text-align: center;
  }

  .list_item_num {
    margin-top: 10rpx;
    width: 20px;
    height: 20px;

    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;

    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #ffffff;
    padding-bottom: 5rpx;
  }

  .num1 {
    background: linear-gradient(168deg, #ffb505 0%, #fdcf1b 100%);
    border-radius: 3px;
  }

  .num2 {
    background: linear-gradient(169deg, #a9c3e3 0%, #92b2e0 100%);
    border-radius: 3px;
  }
  .num3 {
    background: linear-gradient(169deg, #f2996e 0%, #f77741 100%);
    border-radius: 3px;
  }

  .nol_num {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #93a2b3;
    line-height: 28px;
    text-align: left;
    font-style: normal;
  }

  .list_item_content {
    display: flex;
    flex-direction: column;

    flex: 1;
  }

  .item_title:hover {
    color: #057cff;
  }
  .item_title {
    font-family: PingFangSC, PingFang SC;
    font-weight: bold;
    font-size: 20px;
    color: #1a1a1a;
    cursor: pointer;
  }

  .item_summary {
    font-family: PingFangSC, PingFang SC;
    font-weight: normal;
    font-size: 16px;
    color: #333333;
    margin-top: 20rpx;
  }
}

.item_bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
  margin-bottom: 10rpx;
  .time {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #919191;
    line-height: 20px;
    text-align: left;
    font-style: normal;
  }

  .score {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 18px;
    color: #ffa800;
    line-height: 25px;
    text-align: right;
    font-style: normal;
  }
}
</style>