|
|
|
@ -3,32 +3,56 @@ import Nav from '@/components/Nav.vue'; |
|
|
|
import { ref } from 'vue'; |
|
|
|
import router from '@/router'; |
|
|
|
|
|
|
|
//频道列表 |
|
|
|
|
|
|
|
const channelList = ref([]); |
|
|
|
function getChannel() { |
|
|
|
channelList.value = ([ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png", |
|
|
|
name: "量价时空四维预测术", |
|
|
|
// 订阅数量 |
|
|
|
subscriptionCount: 60, |
|
|
|
backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg", |
|
|
|
status: 1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id:2, |
|
|
|
image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png", |
|
|
|
name:"时空四维预测术", |
|
|
|
// 订阅数量 |
|
|
|
subscriptionCount:60, |
|
|
|
backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg", |
|
|
|
status:0 |
|
|
|
} |
|
|
|
]); |
|
|
|
} |
|
|
|
getChannel(); |
|
|
|
|
|
|
|
|
|
|
|
//频道 |
|
|
|
//获取传递的参数中的id |
|
|
|
const channel = ref(); |
|
|
|
//加载频道信息 |
|
|
|
function loadChannels(channelId){ |
|
|
|
channel.value = { |
|
|
|
// id:1, |
|
|
|
// image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png", |
|
|
|
// name:"量价时空四维预测术", |
|
|
|
// // 订阅数量 |
|
|
|
// subscriptionCount:60, |
|
|
|
// backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg", |
|
|
|
// status:0 |
|
|
|
id:2, |
|
|
|
const channel = ref({ |
|
|
|
id: 1, |
|
|
|
image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png", |
|
|
|
name: "量价时空四维预测术", |
|
|
|
// 订阅数量 |
|
|
|
subscriptionCount: 60, |
|
|
|
backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg", |
|
|
|
status:0 |
|
|
|
status: 1 |
|
|
|
}); |
|
|
|
//加载频道信息 |
|
|
|
function loadChannels(channelId) { |
|
|
|
channelList.value.forEach(ch =>{ |
|
|
|
if(ch.id == channelId){ |
|
|
|
channel.value = ch; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
loadChannels(); |
|
|
|
function toLink(channelId) { |
|
|
|
router.push({ path: '/channel', query: { id: channelId } }); |
|
|
|
console.log(channelId); |
|
|
|
loadChannels(channelId); |
|
|
|
loadShows(); |
|
|
|
} |
|
|
|
@ -148,16 +172,13 @@ function submit(){ |
|
|
|
<ChannelNav></ChannelNav> |
|
|
|
<div class="club-nav"> |
|
|
|
<div class="container"> |
|
|
|
<button @click="toLink(1)" class="nav-item">量价时空四维预测术</button> |
|
|
|
<button @click="toLink(2)" class="nav-item">云板&左侧频道</button> |
|
|
|
<button @click="toLink(3)" class="nav-item">HomilyChart第一频道</button> |
|
|
|
<button @click="toLink(4)" class="nav-item">TD频道</button> |
|
|
|
<button v-for="channel in channelList" @click="toLink(channel.id)" class="nav-item">{{ channel.name }}</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="channel"> |
|
|
|
<div class="channel-head"> |
|
|
|
<!-- 1-订阅按钮 --> |
|
|
|
<button v-if="channel.status==1" class="submited">已订阅</button> |
|
|
|
<button v-if="channel.status && channel.status == 1" class="submited">已订阅</button> |
|
|
|
<button v-else class="submit" @click="submit">订阅</button> |
|
|
|
<!-- 2-背景图片 --> |
|
|
|
<img alt="" class="bc-image" :src="channel.backgroundImage" /> |
|
|
|
@ -208,7 +229,8 @@ function submit(){ |
|
|
|
<!-- 评论 --> |
|
|
|
<span :comments="show.comments" class="right-item">{{ show.comments }}评论</span> |
|
|
|
<!-- 日期 --> |
|
|
|
<div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }} </div> |
|
|
|
<div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -263,34 +285,45 @@ function submit(){ |
|
|
|
color: white; |
|
|
|
border-radius: 5%; |
|
|
|
} |
|
|
|
|
|
|
|
.channel { |
|
|
|
width: 800px; |
|
|
|
margin-left: auto; |
|
|
|
margin-right: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.channel-head { |
|
|
|
position: relative; |
|
|
|
height: 200px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.bc-image { |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.submited { |
|
|
|
position: absolute; /* 绝对定位 */ |
|
|
|
top: 50px; /* 根据需要调整位置 */ |
|
|
|
right: 10px; /* 根据需要调整位置 */ |
|
|
|
position: absolute; |
|
|
|
/* 绝对定位 */ |
|
|
|
top: 50px; |
|
|
|
/* 根据需要调整位置 */ |
|
|
|
right: 10px; |
|
|
|
/* 根据需要调整位置 */ |
|
|
|
color: rgb(129, 132, 134); |
|
|
|
background-color: aliceblue; |
|
|
|
padding: 10px; |
|
|
|
border-radius: 10%; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
.submit { |
|
|
|
position: absolute; /* 绝对定位 */ |
|
|
|
top: 50px; /* 根据需要调整位置 */ |
|
|
|
right: 10px; /* 根据需要调整位置 */ |
|
|
|
position: absolute; |
|
|
|
/* 绝对定位 */ |
|
|
|
top: 50px; |
|
|
|
/* 根据需要调整位置 */ |
|
|
|
right: 10px; |
|
|
|
/* 根据需要调整位置 */ |
|
|
|
color: rgb(129, 132, 134); |
|
|
|
background-color: aliceblue; |
|
|
|
padding: 10px 20px; |
|
|
|
@ -298,6 +331,7 @@ function submit(){ |
|
|
|
border-radius: 10%; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
.channel-title { |
|
|
|
position: absolute; |
|
|
|
top: 0px; |
|
|
|
@ -311,6 +345,7 @@ function submit(){ |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.title-image { |
|
|
|
width: 90px; |
|
|
|
height: 90px; |
|
|
|
@ -318,6 +353,7 @@ function submit(){ |
|
|
|
vertical-align: top; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
|
|
|
|
.title-content { |
|
|
|
display: inline-block; |
|
|
|
position: absolute; |
|
|
|
@ -325,6 +361,7 @@ function submit(){ |
|
|
|
color: white; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.channel-title h3 { |
|
|
|
max-width: 75%; |
|
|
|
overflow: hidden; |
|
|
|
@ -335,6 +372,7 @@ function submit(){ |
|
|
|
margin: 0px; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
.channel-title span { |
|
|
|
padding: 4px 0; |
|
|
|
font-size: 14px; |
|
|
|
@ -343,38 +381,47 @@ function submit(){ |
|
|
|
|
|
|
|
.content-nav { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; /* 修正了属性名中的空格 */ |
|
|
|
background-color: #fff; /* 修正了属性名中的空格 */ |
|
|
|
border-bottom: 1px solid #ccc; /* 修正了属性名中的空格 */ |
|
|
|
justify-content: flex-start; |
|
|
|
/* 修正了属性名中的空格 */ |
|
|
|
background-color: #fff; |
|
|
|
/* 修正了属性名中的空格 */ |
|
|
|
border-bottom: 1px solid #ccc; |
|
|
|
/* 修正了属性名中的空格 */ |
|
|
|
margin: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.tab { |
|
|
|
padding: 10px 20px; |
|
|
|
border: none; |
|
|
|
background-color: transparent; /* 修正了属性名中的空格 */ |
|
|
|
background-color: transparent; |
|
|
|
/* 修正了属性名中的空格 */ |
|
|
|
cursor: pointer; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.active { |
|
|
|
color: red; |
|
|
|
border-bottom: 2px solid red; /* 修正了属性名中的空格 */ |
|
|
|
border-bottom: 2px solid red; |
|
|
|
/* 修正了属性名中的空格 */ |
|
|
|
} |
|
|
|
|
|
|
|
.list-display { |
|
|
|
list-style-type: none; |
|
|
|
padding: 0px; |
|
|
|
} |
|
|
|
|
|
|
|
.sub-topic { |
|
|
|
margin: 10px 0; |
|
|
|
padding: 10px; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.sub-left { |
|
|
|
height: 112px; |
|
|
|
width: 200px; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.sub-image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
@ -399,9 +446,11 @@ function submit(){ |
|
|
|
font-size: 16px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.right-title { |
|
|
|
margin-left: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.right-item { |
|
|
|
display: flex; |
|
|
|
color: #8e8e8e; |
|
|
|
@ -409,11 +458,11 @@ function submit(){ |
|
|
|
margin-right: 18px; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.img1 { |
|
|
|
margin-left: 10px; |
|
|
|
width: 22px; |
|
|
|
height: 22px; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
ting
7 months ago