wanglin
/
practice_VUE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

频道js模拟数据页面

channel_yjt
ting 7 months ago
parent
b1c654d808
commit
8b362d48e1
1 changed files with 198 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 271
      vueHomilyLink/src/views/ChannelView.vue

271
vueHomilyLink/src/views/ChannelView.vue
View File

@ -1,5 +1,130 @@
<script setup>
import Nav from '@/components/Nav.vue';
import { ref } from 'vue';
//频道
const channel = ref();
//加载频道信息
function loadChannels(){
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
}
}
loadChannels();
// 展示列表
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",
password:"123456",
},
releaseTime:"2024-05-26 11:42:00",
// 视频时长
videoDurition:"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",
password:"123456",
},
releaseTime:"2024-01-24 09:55:00",
// 视频时长
videoDurition:"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:2,
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>
@ -7,19 +132,20 @@ import Nav from '@/components/Nav.vue';
<div class="channel">
<div class="channel-head">
<!-- 1-订阅按钮 -->
<button disabled="disabled" type="button" class="submit">已订阅</button>
<button v-if="channel.status==1" class="submited">已订阅</button>
<button v-else class="submit" @click="submit">订阅</button>
<!-- 2-背景图片 -->
<img alt="" class="bc-image" src="https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg" />
<img alt="" class="bc-image" :src="channel.backgroundImage" />
<!-- 3-频道主题 -->
<div class="channel-title">
<!-- 频道头像 -->
<img alt="" class="title-image" src="https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png" />
<!-- 频道title -->
<div class="title-content">
<h3>量价时空四维预测术</h3>
<span>5525已订阅</span>
<p style="line-height: 18px;">.</p>
</div>
<!-- 频道头像 -->
<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>
<!-- 频道内容 -->
@ -29,69 +155,40 @@ import Nav from '@/components/Nav.vue';
<button class="tab">全部</button>
<button class="tab">文章</button>
<button class="tab">视频</button>
<button class="tab">合集</button>
</div>
<!-- 内容 -->
<div class="content-list">
<ul class="list-display">
<!-- 一条 -->
<li>
<div class="sub-topic">
<!-- 左边 -->
<div class="sub-left">
<img class="sub-image" src="https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg" alt="视频缩略图">
</div>
<!-- 右边 -->
<div class="sub-right">
<!-- title -->
<h3 class="right-title">大国博弈下的深度交易策略</h3>
<div class="right-inline">
<!-- HomilyLink -->
<div class="right-item">
<img src="https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg" class="img1">
<div>HomilyLink</div>
<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" :videoDurition="show.videoDurition" class="video-time">
{{ show.videoDurition }}
</div>
<!-- 评论 -->
<span class="right-item">0评论</span>
<!-- 日期 -->
<div class="right-item"> 05-26 11:42 </div>
</div>
</div>
<!-- 右边 -->
<div class="sub-right">
<!-- title -->
<h3 :name="show.name" class="right-title">{{ show.name }}</h3>
</div>
</li>
<li>
<div class="sub-topic">
<!-- 左边 -->
<div class="sub-left">
<img class="sub-image" src="https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg" alt="视频缩略图">
</div>
<!-- 右边 -->
<div class="sub-right">
<!-- title -->
<h3 class="right-title">大国博弈下的深度交易策略</h3>
<div class="right-inline">
<!-- HomilyLink -->
<div class="right-item">
<img src="https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg" class="img1">
<div>HomilyLink</div>
<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>
<!-- 评论 -->
<span class="right-item">0评论</span>
<!-- 日期 -->
<div class="right-item"> 05-26 11:42 </div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
@ -111,23 +208,39 @@ import Nav from '@/components/Nav.vue';
height: 100%;
width: 100%;
}
.submit{
.submited{
position: absolute; /* 绝对定位 */
top: 50px; /* 根据需要调整位置 */
right: 10px; /* 根据需要调整位置 */
color: rgb(129, 132, 134);
background-color: aliceblue;
padding: 10px;
border-radius: 5%;
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;
position: absolute;
left: 60px;
top: 50px;
background: rgba(0, 0, 0, .4);
width: 400px;
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
overflow: hidden;
}
.title-image{
width: 90px;
@ -192,12 +305,24 @@ import Nav from '@/components/Nav.vue';
.sub-left{
height: 112px;
width: 200px;
}
.sub-image{
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;

Write Preview
Loading…
Cancel
Save