ting
7 months ago
5 changed files with 562 additions and 4 deletions
-
100vueHomilyLink/package-lock.json
-
1vueHomilyLink/package.json
-
2vueHomilyLink/src/assets/main.css
-
3vueHomilyLink/src/router/index.js
-
460vueHomilyLink/src/views/ChannelView.vue
@ -1,10 +1,468 @@ |
|||||
<script setup> |
<script setup> |
||||
|
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({ |
||||
|
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) { |
||||
|
channelList.value.forEach(ch =>{ |
||||
|
if(ch.id == channelId){ |
||||
|
channel.value = ch; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
loadChannels(); |
||||
|
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" |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
]) |
||||
|
|
||||
|
} |
||||
|
// |
||||
|
loadShows(); |
||||
|
//订阅 |
||||
|
function submit() { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
频道 |
|
||||
|
<Nav></Nav> |
||||
|
<ChannelNav></ChannelNav> |
||||
|
<div class="club-nav"> |
||||
|
<div class="container"> |
||||
|
<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 && channel.status == 1" class="submited">已订阅</button> |
||||
|
<button v-else class="submit" @click="submit">订阅</button> |
||||
|
<!-- 2-背景图片 --> |
||||
|
<img alt="" class="bc-image" :src="channel.backgroundImage" /> |
||||
|
<!-- 3-频道主题 --> |
||||
|
<div class="channel-title"> |
||||
|
<!-- 频道头像 --> |
||||
|
<img alt="" class="title-image" :src="channel.image" /> |
||||
|
<!-- 频道title --> |
||||
|
<div class="title-content"> |
||||
|
<h3 :name="channel.name">{{ channel.name }}</h3> |
||||
|
<span :subscriptionCount="channel.subscriptionCount">{{ channel.subscriptionCount }}已订阅</span> |
||||
|
<p style="line-height: 18px;">.</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 频道内容 --> |
||||
|
<div class="channel-content"> |
||||
|
<!-- 导航栏 --> |
||||
|
<div class="content-nav"> |
||||
|
<button class="tab">全部</button> |
||||
|
<button class="tab">文章</button> |
||||
|
<button class="tab">视频</button> |
||||
|
</div> |
||||
|
<!-- 内容 --> |
||||
|
<div class="content-list"> |
||||
|
<ul class="list-display"> |
||||
|
<!-- 一条 --> |
||||
|
<li v-for="show in shows"> |
||||
|
<div class="sub-topic"> |
||||
|
<!-- 左边 --> |
||||
|
<div class="sub-left"> |
||||
|
<img class="sub-image" :src="show.cover" alt="视频缩略图"> |
||||
|
<div v-if="show.flagType == 1" :videoDuration="show.videoDuration" class="video-time"> |
||||
|
{{ show.videoDuration }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 右边 --> |
||||
|
<div class="sub-right"> |
||||
|
<!-- title --> |
||||
|
<h3 :name="show.name" class="right-title">{{ show.name }}</h3> |
||||
|
|
||||
|
<div class="right-inline"> |
||||
|
<!-- 发布的用户名 --> |
||||
|
<div class="right-item"> |
||||
|
<img :src="show.user.avatar" class="img1"> |
||||
|
<div :username="show.user.username">{{ show.user.username }}</div> |
||||
|
</div> |
||||
|
<!-- 评论 --> |
||||
|
<span :comments="show.comments" class="right-item">{{ show.comments }}评论</span> |
||||
|
<!-- 日期 --> |
||||
|
<div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
<style scoped> |
<style scoped> |
||||
|
.club-nav { |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.nav-item:hover { |
||||
|
background-color: #407fdf; |
||||
|
color: #f1f1f1; |
||||
|
} |
||||
|
|
||||
|
.nav-item.router-link-active { |
||||
|
background-color: #407fdf; |
||||
|
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; |
||||
|
/* 根据需要调整位置 */ |
||||
|
color: rgb(129, 132, 134); |
||||
|
background-color: aliceblue; |
||||
|
padding: 10px; |
||||
|
border-radius: 10%; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
|
||||
|
.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; |
||||
|
top: 0px; |
||||
|
left: 0px; |
||||
|
padding-top: 60px; |
||||
|
padding-left: 50px; |
||||
|
box-sizing: border-box; |
||||
|
background: rgba(0, 0, 0, 0.4); |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.title-image { |
||||
|
width: 90px; |
||||
|
height: 90px; |
||||
|
margin-right: 25px; |
||||
|
vertical-align: top; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.title-content { |
||||
|
display: inline-block; |
||||
|
position: absolute; |
||||
|
width: 400px; |
||||
|
color: white; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.channel-title h3 { |
||||
|
max-width: 75%; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
font-size: 24px; |
||||
|
color: #fff; |
||||
|
margin: 0px; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
|
||||
|
.channel-title span { |
||||
|
padding: 4px 0; |
||||
|
font-size: 14px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.content-nav { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
/* 修正了属性名中的空格 */ |
||||
|
background-color: #fff; |
||||
|
/* 修正了属性名中的空格 */ |
||||
|
border-bottom: 1px solid #ccc; |
||||
|
/* 修正了属性名中的空格 */ |
||||
|
margin: 10px; |
||||
|
} |
||||
|
|
||||
|
.tab { |
||||
|
padding: 10px 20px; |
||||
|
border: none; |
||||
|
background-color: transparent; |
||||
|
/* 修正了属性名中的空格 */ |
||||
|
cursor: pointer; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.active { |
||||
|
color: 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%; |
||||
|
} |
||||
|
|
||||
|
.video-time { |
||||
|
position: absolute; |
||||
|
left: 70%; |
||||
|
top: 80%; |
||||
|
color: #fff; |
||||
|
background-color: rgba(31, 30, 30, 0.5); |
||||
|
border-radius: 20%; |
||||
|
font-size: smaller; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.right-inline { |
||||
|
display: flex; |
||||
|
margin-bottom: 15px; |
||||
|
align-items: center; |
||||
|
font-size: 16px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.right-title { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.right-item { |
||||
|
display: flex; |
||||
|
color: #8e8e8e; |
||||
|
font-size: 14px; |
||||
|
margin-right: 18px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.img1 { |
||||
|
margin-left: 10px; |
||||
|
width: 22px; |
||||
|
height: 22px; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
</style> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue