159 lines
3.5 KiB
Vue
159 lines
3.5 KiB
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/indexNewsInfo?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>
|