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> |
|||
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> |
|||
|
|||
<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> |
|||
<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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue