|
|
|
@ -3,141 +3,165 @@ 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(); |
|
|
|
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: 1 |
|
|
|
}); |
|
|
|
//加载频道信息 |
|
|
|
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, |
|
|
|
image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png", |
|
|
|
name:"量价时空四维预测术", |
|
|
|
// 订阅数量 |
|
|
|
subscriptionCount:60, |
|
|
|
backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg", |
|
|
|
status:0 |
|
|
|
} |
|
|
|
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(); |
|
|
|
function toLink(channelId) { |
|
|
|
router.push({ path: '/channel', query: { id: channelId } }); |
|
|
|
loadChannels(channelId); |
|
|
|
loadShows(); |
|
|
|
} |
|
|
|
|
|
|
|
// 展示列表1 |
|
|
|
const shows = ref([]); |
|
|
|
// 加载展示列表 |
|
|
|
function loadShows(){ |
|
|
|
shows.value = ([ |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
cover:" https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg", |
|
|
|
name:"联合利剑！五大机器人史诗升级", |
|
|
|
user:{ |
|
|
|
id:1, |
|
|
|
username:"HomilyLink", |
|
|
|
avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg", |
|
|
|
}, |
|
|
|
releaseTime:"2024-05-26 11:42:00", |
|
|
|
// 视频时长 |
|
|
|
videoDuration:"01:22:11", |
|
|
|
// 观看数量 |
|
|
|
viewCount:796, |
|
|
|
comments:1, |
|
|
|
likes:10, |
|
|
|
// 内容标识类型,图文还是视频 |
|
|
|
flagType:1, |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 4, |
|
|
|
cover:"https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg", |
|
|
|
name:"壁垒将至？中美博弈开启拼刺刀白热化阶段", |
|
|
|
user:{ |
|
|
|
id:1, |
|
|
|
username:"HomilyLink", |
|
|
|
avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg", |
|
|
|
}, |
|
|
|
releaseTime:"2024-01-24 09:55:00", |
|
|
|
// 视频时长 |
|
|
|
videoDuration:"03:56:00", |
|
|
|
// 观看数量 |
|
|
|
viewCount:"594", |
|
|
|
comments:50, |
|
|
|
likes:16, |
|
|
|
// 内容标识类型,图文还是视频 |
|
|
|
flagType:1, |
|
|
|
club:{ |
|
|
|
id: 1, |
|
|
|
image:"https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png", |
|
|
|
name:"博股俱乐部", |
|
|
|
introduction:"博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。", |
|
|
|
backgroundImage:"" |
|
|
|
}, |
|
|
|
channel:{ |
|
|
|
id:1, |
|
|
|
image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png", |
|
|
|
name:"量价时空四维预测术", |
|
|
|
// 订阅数量 |
|
|
|
subscriptionCount:60, |
|
|
|
backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg" |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 5, |
|
|
|
cover:"https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg", |
|
|
|
name:"壁垒将至？中美博弈开启拼刺刀白热化阶段", |
|
|
|
user:{ |
|
|
|
id:1, |
|
|
|
username:"HomilyLink", |
|
|
|
avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg", |
|
|
|
password:"123456", |
|
|
|
}, |
|
|
|
releaseTime:"2024-01-24 09:55:00", |
|
|
|
// 视频时长 |
|
|
|
videoDurition:"03:56:00", |
|
|
|
// 观看数量 |
|
|
|
viewCount:"594", |
|
|
|
comments:50, |
|
|
|
likes:16, |
|
|
|
// 内容标识类型,图文还是视频 |
|
|
|
flagType:0, |
|
|
|
club:{ |
|
|
|
id: 1, |
|
|
|
image:"https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png", |
|
|
|
name:"博股俱乐部", |
|
|
|
introduction:"博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。", |
|
|
|
backgroundImage:"" |
|
|
|
}, |
|
|
|
channel:{ |
|
|
|
id:1, |
|
|
|
image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png", |
|
|
|
name:"量价时空四维预测术", |
|
|
|
// 订阅数量 |
|
|
|
subscriptionCount:60, |
|
|
|
backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg" |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
]) |
|
|
|
function loadShows() { |
|
|
|
shows.value = ([ |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
cover: " https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg", |
|
|
|
name: "联合利剑！五大机器人史诗升级", |
|
|
|
user: { |
|
|
|
id: 1, |
|
|
|
username: "HomilyLink", |
|
|
|
avatar: "https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg", |
|
|
|
}, |
|
|
|
releaseTime: "2024-05-26 11:42:00", |
|
|
|
// 视频时长 |
|
|
|
videoDuration: "01:22:11", |
|
|
|
// 观看数量 |
|
|
|
viewCount: 796, |
|
|
|
comments: 1, |
|
|
|
likes: 10, |
|
|
|
// 内容标识类型,图文还是视频 |
|
|
|
flagType: 1, |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 4, |
|
|
|
cover: "https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg", |
|
|
|
name: "壁垒将至？中美博弈开启拼刺刀白热化阶段", |
|
|
|
user: { |
|
|
|
id: 1, |
|
|
|
username: "HomilyLink", |
|
|
|
avatar: "https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg", |
|
|
|
}, |
|
|
|
releaseTime: "2024-01-24 09:55:00", |
|
|
|
// 视频时长 |
|
|
|
videoDuration: "03:56:00", |
|
|
|
// 观看数量 |
|
|
|
viewCount: "594", |
|
|
|
comments: 50, |
|
|
|
likes: 16, |
|
|
|
// 内容标识类型,图文还是视频 |
|
|
|
flagType: 1, |
|
|
|
club: { |
|
|
|
id: 1, |
|
|
|
image: "https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png", |
|
|
|
name: "博股俱乐部", |
|
|
|
introduction: "博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。", |
|
|
|
backgroundImage: "" |
|
|
|
}, |
|
|
|
channel: { |
|
|
|
id: 1, |
|
|
|
image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png", |
|
|
|
name: "量价时空四维预测术", |
|
|
|
// 订阅数量 |
|
|
|
subscriptionCount: 60, |
|
|
|
backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg" |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 5, |
|
|
|
cover: "https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg", |
|
|
|
name: "壁垒将至？中美博弈开启拼刺刀白热化阶段", |
|
|
|
user: { |
|
|
|
id: 1, |
|
|
|
username: "HomilyLink", |
|
|
|
avatar: "https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg", |
|
|
|
password: "123456", |
|
|
|
}, |
|
|
|
releaseTime: "2024-01-24 09:55:00", |
|
|
|
// 视频时长 |
|
|
|
videoDurition: "03:56:00", |
|
|
|
// 观看数量 |
|
|
|
viewCount: "594", |
|
|
|
comments: 50, |
|
|
|
likes: 16, |
|
|
|
// 内容标识类型,图文还是视频 |
|
|
|
flagType: 0, |
|
|
|
club: { |
|
|
|
id: 1, |
|
|
|
image: "https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png", |
|
|
|
name: "博股俱乐部", |
|
|
|
introduction: "博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。", |
|
|
|
backgroundImage: "" |
|
|
|
}, |
|
|
|
channel: { |
|
|
|
id: 1, |
|
|
|
image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png", |
|
|
|
name: "量价时空四维预测术", |
|
|
|
// 订阅数量 |
|
|
|
subscriptionCount: 60, |
|
|
|
backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg" |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
]) |
|
|
|
|
|
|
|
} |
|
|
|
// |
|
|
|
loadShows(); |
|
|
|
//订阅 |
|
|
|
function submit(){ |
|
|
|
|
|
|
|
function submit() { |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -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" /> |
|
|
|
@ -168,7 +189,7 @@ function submit(){ |
|
|
|
<!-- 频道title --> |
|
|
|
<div class="title-content"> |
|
|
|
<h3 :name="channel.name">{{ channel.name }}</h3> |
|
|
|
<span :subscriptionCount="channel.subscriptionCount">{{ channel.subscriptionCount}}已订阅</span> |
|
|
|
<span :subscriptionCount="channel.subscriptionCount">{{ channel.subscriptionCount }}已订阅</span> |
|
|
|
<p style="line-height: 18px;">.</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -177,9 +198,9 @@ function submit(){ |
|
|
|
<div class="channel-content"> |
|
|
|
<!-- 导航栏 --> |
|
|
|
<div class="content-nav"> |
|
|
|
<button class="tab">全部</button> |
|
|
|
<button class="tab">文章</button> |
|
|
|
<button class="tab">视频</button> |
|
|
|
<button class="tab">全部</button> |
|
|
|
<button class="tab">文章</button> |
|
|
|
<button class="tab">视频</button> |
|
|
|
</div> |
|
|
|
<!-- 内容 --> |
|
|
|
<div class="content-list"> |
|
|
|
@ -190,7 +211,7 @@ function submit(){ |
|
|
|
<!-- 左边 --> |
|
|
|
<div class="sub-left"> |
|
|
|
<img class="sub-image" :src="show.cover" alt="视频缩略图"> |
|
|
|
<div v-if="show.flagType==1" :videoDuration="show.videoDuration" class="video-time"> |
|
|
|
<div v-if="show.flagType == 1" :videoDuration="show.videoDuration" class="video-time"> |
|
|
|
{{ show.videoDuration }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -198,7 +219,7 @@ function submit(){ |
|
|
|
<div class="sub-right"> |
|
|
|
<!-- title --> |
|
|
|
<h3 :name="show.name" class="right-title">{{ show.name }}</h3> |
|
|
|
|
|
|
|
|
|
|
|
<div class="right-inline"> |
|
|
|
<!-- 发布的用户名 --> |
|
|
|
<div class="right-item"> |
|
|
|
@ -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> |
|
|
|
@ -220,86 +242,98 @@ function submit(){ |
|
|
|
</template> |
|
|
|
<style scoped> |
|
|
|
.club-nav { |
|
|
|
height: 100vh; |
|
|
|
position: fixed; |
|
|
|
left: 30px; |
|
|
|
top: 30px; |
|
|
|
background-color: #ffffff; |
|
|
|
overflow-x: hidden; |
|
|
|
padding-top: 20px; |
|
|
|
transition: 0.5s; |
|
|
|
height: 100vh; |
|
|
|
position: fixed; |
|
|
|
left: 30px; |
|
|
|
top: 30px; |
|
|
|
background-color: #ffffff; |
|
|
|
overflow-x: hidden; |
|
|
|
padding-top: 20px; |
|
|
|
transition: 0.5s; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.container { |
|
|
|
padding: 0; |
|
|
|
margin: 0; |
|
|
|
list-style-type: none; |
|
|
|
background-color: #ffffff; |
|
|
|
padding: 0; |
|
|
|
margin: 0; |
|
|
|
list-style-type: none; |
|
|
|
background-color: #ffffff; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nav-item { |
|
|
|
border: none; |
|
|
|
background-color: #ffffff; |
|
|
|
padding: 10px 15px; |
|
|
|
width: 250px; |
|
|
|
height: 60px; |
|
|
|
text-decoration: none; |
|
|
|
font-size: 18px; |
|
|
|
color: rgb(19, 18, 18); |
|
|
|
display: block; |
|
|
|
transition: 0.3s; |
|
|
|
border: none; |
|
|
|
background-color: #ffffff; |
|
|
|
padding: 10px 15px; |
|
|
|
width: 250px; |
|
|
|
height: 60px; |
|
|
|
text-decoration: none; |
|
|
|
font-size: 18px; |
|
|
|
color: rgb(19, 18, 18); |
|
|
|
display: block; |
|
|
|
transition: 0.3s; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nav-item:hover { |
|
|
|
background-color: #407fdf; |
|
|
|
color: #f1f1f1; |
|
|
|
background-color: #407fdf; |
|
|
|
color: #f1f1f1; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-item.router-link-active { |
|
|
|
background-color: #407fdf; |
|
|
|
color: white; |
|
|
|
border-radius: 5%; |
|
|
|
background-color: #407fdf; |
|
|
|
color: white; |
|
|
|
border-radius: 5%; |
|
|
|
} |
|
|
|
.channel{ |
|
|
|
|
|
|
|
.channel { |
|
|
|
width: 800px; |
|
|
|
margin-left: auto; |
|
|
|
margin-right: auto; |
|
|
|
} |
|
|
|
.channel-head{ |
|
|
|
|
|
|
|
.channel-head { |
|
|
|
position: relative; |
|
|
|
height: 200px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.bc-image{ |
|
|
|
|
|
|
|
.bc-image { |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.submited{ |
|
|
|
position: absolute; /* 绝对定位 */ |
|
|
|
top: 50px; /* 根据需要调整位置 */ |
|
|
|
right: 10px; /* 根据需要调整位置 */ |
|
|
|
|
|
|
|
.submited { |
|
|
|
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; /* 根据需要调整位置 */ |
|
|
|
|
|
|
|
.submit { |
|
|
|
position: absolute; |
|
|
|
/* 绝对定位 */ |
|
|
|
top: 50px; |
|
|
|
/* 根据需要调整位置 */ |
|
|
|
right: 10px; |
|
|
|
/* 根据需要调整位置 */ |
|
|
|
color: rgb(129, 132, 134); |
|
|
|
background-color: aliceblue; |
|
|
|
padding: 10px 20px; |
|
|
|
|
|
|
|
|
|
|
|
border-radius: 10%; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
.channel-title{ |
|
|
|
position:absolute; |
|
|
|
|
|
|
|
.channel-title { |
|
|
|
position: absolute; |
|
|
|
top: 0px; |
|
|
|
left: 0px; |
|
|
|
padding-top: 60px; |
|
|
|
@ -311,21 +345,24 @@ function submit(){ |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
} |
|
|
|
.title-image{ |
|
|
|
|
|
|
|
.title-image { |
|
|
|
width: 90px; |
|
|
|
height: 90px; |
|
|
|
margin-right: 25px; |
|
|
|
vertical-align: top; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
.title-content{ |
|
|
|
|
|
|
|
.title-content { |
|
|
|
display: inline-block; |
|
|
|
position: absolute; |
|
|
|
width: 400px; |
|
|
|
color: white; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.channel-title h3{ |
|
|
|
|
|
|
|
.channel-title h3 { |
|
|
|
max-width: 75%; |
|
|
|
overflow: hidden; |
|
|
|
white-space: nowrap; |
|
|
|
@ -335,7 +372,8 @@ function submit(){ |
|
|
|
margin: 0px; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
.channel-title span{ |
|
|
|
|
|
|
|
.channel-title span { |
|
|
|
padding: 4px 0; |
|
|
|
font-size: 14px; |
|
|
|
color: #fff; |
|
|
|
@ -343,77 +381,88 @@ 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-display { |
|
|
|
list-style-type: none; |
|
|
|
padding: 0px; |
|
|
|
} |
|
|
|
|
|
|
|
.sub-topic { |
|
|
|
margin: 10px 0; |
|
|
|
padding: 10px; |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
} |
|
|
|
.sub-left{ |
|
|
|
|
|
|
|
.sub-left { |
|
|
|
height: 112px; |
|
|
|
width: 200px; |
|
|
|
position: relative; |
|
|
|
.sub-image{ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
.sub-image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.video-time{ |
|
|
|
|
|
|
|
.video-time { |
|
|
|
position: absolute; |
|
|
|
left: 70%; |
|
|
|
top: 80%; |
|
|
|
color: #fff; |
|
|
|
background-color: rgba(31, 30, 30, 0.5); |
|
|
|
background-color: rgba(31, 30, 30, 0.5); |
|
|
|
border-radius: 20%; |
|
|
|
font-size: smaller; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.right-inline{ |
|
|
|
.right-inline { |
|
|
|
display: flex; |
|
|
|
margin-bottom: 15px; |
|
|
|
align-items: center; |
|
|
|
font-size: 16px; |
|
|
|
|
|
|
|
} |
|
|
|
.right-title{ |
|
|
|
|
|
|
|
.right-title { |
|
|
|
margin-left: 10px; |
|
|
|
} |
|
|
|
.right-item{ |
|
|
|
|
|
|
|
.right-item { |
|
|
|
display: flex; |
|
|
|
color: #8e8e8e; |
|
|
|
font-size: 14px; |
|
|
|
margin-right: 18px; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.img1{ |
|
|
|
|
|
|
|
.img1 { |
|
|
|
margin-left: 10px; |
|
|
|
width: 22px; |
|
|
|
height: 22px; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
ting
7 months ago