Compare commits
merge into: wanglin:master
wanglin:bogu_yjt
wanglin:channel_yjt
wanglin:dev
wanglin:home_zwk
wanglin:live_lh
wanglin:master
wanglin:study
pull from: wanglin:channel_yjt
wanglin:bogu_yjt
wanglin:channel_yjt
wanglin:dev
wanglin:home_zwk
wanglin:live_lh
wanglin:master
wanglin:study
18 Commits
master
...
channel_yj
| Author | SHA1 | Message | Date |
|---|---|---|---|
ting
|
47b715d690 |
频道订阅接口对接 文章视频跳转按钮
|
7 months ago |
|
ting
|
2f3eb78702 |
频道接口对接，订阅还没完成
|
7 months ago |
|
ting
|
7ac66edc23 |
Merge branch 'channel_yjt' into study
俱乐部api合并到study# especially if it merges an updated upstream into a topic branch. |
7 months ago |
|
ting
|
f07beea68c |
频道Api，频道页面视频导航栏跳转
|
7 months ago |
|
ting
|
7aaa16c717 |
Merge branch 'channel_yjt' into study
|
7 months ago |
|
ting
|
65e2d52d43 |
axios+频道侧栏
|
7 months ago |
|
ting
|
35600b7e4b |
频道展示列表视频时长
|
7 months ago |
lenghui
|
30771975b9 |
行内样式抽离
|
7 months ago |
|
ting
|
1d7ae243d5 |
频道更改：跳转不同频道
|
7 months ago |
|
ting
|
ba04cbb5c1 |
频道修改模拟数据内容
|
7 months ago |
|
lenghui
|
6741db2de0 |
Api编写
|
7 months ago |
|
lenghui
|
59a00a994a |
调整数据格式，计算日期
|
7 months ago |
|
ting
|
8b362d48e1 |
频道js模拟数据页面
|
7 months ago |
|
lenghui
|
4adc31f969 |
使用js改为动态页面，实现对后端数据的模拟
|
7 months ago |
|
lenghui
|
a383e058d1 |
显示优化
|
7 months ago |
|
ting
|
b1c654d808 |
Channel静态页面构建
|
7 months ago |
|
lenghui
|
a636ddc299 |
完成直播静态H5页面的跳转
|
7 months ago |
|
lenghui
|
3c735d1f4e |
H5静态页面
|
7 months ago |
13 changed files with 1192 additions and 41 deletions
-
343vueHomilyLink/package-lock.json
-
2vueHomilyLink/package.json
-
28vueHomilyLink/src/api/ChannelApi.js
-
15vueHomilyLink/src/api/LiveApi.js
-
16vueHomilyLink/src/api/index.js
-
BINvueHomilyLink/src/assets/live.jpg
-
40vueHomilyLink/src/assets/main.css
-
2vueHomilyLink/src/components/Nav.vue
-
5vueHomilyLink/src/main.js
-
3vueHomilyLink/src/router/index.js
-
472vueHomilyLink/src/views/ChannelView.vue
-
296vueHomilyLink/src/views/LiveView.vue
-
11vueHomilyLink/vite.config.js
@ -0,0 +1,28 @@ |
|||
import service from "."; |
|||
|
|||
const ChannelApi = { |
|||
//获取频道列表
|
|||
getchannels(){ |
|||
return service.get('/list'); |
|||
}, |
|||
//获取shows列表
|
|||
getShows(Id,UserId,FlagType){ |
|||
return service.post('/channel',{Id,UserId,FlagType}); |
|||
}, |
|||
//订阅状态
|
|||
subscribe(Id,UserId){ |
|||
return service.post('/subscription',{Id,UserId}) |
|||
}, |
|||
//取消订阅
|
|||
unSubscribe(Id,UserId){ |
|||
console.log("_________",Id); |
|||
return service.delete('/subscription',{ |
|||
params:{ |
|||
Id:Id, |
|||
UserId:UserId |
|||
} |
|||
}) |
|||
} |
|||
|
|||
} |
|||
export default ChannelApi; |
|||
@ -0,0 +1,15 @@ |
|||
import service from "."; |
|||
const liveApi = { |
|||
//获取直播列表
|
|||
getLiveList() { |
|||
return service.get('/live'); |
|||
}, |
|||
//预约
|
|||
addReservation(id,userId){ |
|||
return service.post('/reservation',{id,userId}); |
|||
}, |
|||
//取消预约
|
|||
cancelReservation(id,userId){ |
|||
return service.delete('/reservation',{id,userId}); |
|||
} |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
import axios from "axios"; |
|||
|
|||
const service = axios.create({ |
|||
// baseURL: 'http://192.168.8.191:8080',
|
|||
// baseURL: 'http://localhost:8080',
|
|||
baseURL: '/api', |
|||
}); |
|||
// http://192.168.8.191:8080
|
|||
|
|||
//Axios的响应拦截器..
|
|||
service.interceptors.response.use(resp => { |
|||
return resp.data; |
|||
}, error => { |
|||
return Promise.reject(error); |
|||
}); |
|||
export default service; |
|||
|
After Width: 310 | Height: 200 | Size: 39 KiB |
@ -1,35 +1,7 @@ |
|||
@import './base.css'; |
|||
|
|||
#app { |
|||
max-width: 1280px; |
|||
margin: 0 auto; |
|||
padding: 2rem; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
a, |
|||
.green { |
|||
text-decoration: none; |
|||
color: hsla(160, 100%, 37%, 1); |
|||
transition: 0.4s; |
|||
padding: 3px; |
|||
} |
|||
|
|||
@media (hover: hover) { |
|||
a:hover { |
|||
background-color: hsla(160, 100%, 37%, 0.2); |
|||
} |
|||
} |
|||
|
|||
@media (min-width: 1024px) { |
|||
body { |
|||
display: flex; |
|||
place-items: center; |
|||
} |
|||
|
|||
#app { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
padding: 0 2rem; |
|||
} |
|||
html,body{ |
|||
margin:0px; |
|||
height: 100%; |
|||
} |
|||
#app{ |
|||
height: 100%; |
|||
} |
|||
@ -1,10 +1,480 @@ |
|||
<script setup> |
|||
import Nav from '@/components/Nav.vue'; |
|||
import { computed, ref } from 'vue'; |
|||
import {ElMessage} from 'element-plus'; |
|||
import router from '@/router'; |
|||
import ChannelApi from '@/api/ChannelApi'; |
|||
|
|||
//频道列表 |
|||
const channelList = ref([]); |
|||
//视频上的导航栏 |
|||
const currentTab = ref(null); |
|||
const flagType = ref(null); |
|||
//频道 |
|||
//默认信息 |
|||
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:true |
|||
}); |
|||
//1-左侧导航栏加载 |
|||
function getChannels() { |
|||
//查询频道列表api |
|||
ChannelApi.getchannels().then((result) =>{ |
|||
console.log(result.data); |
|||
channelList.value = result.data; |
|||
console.log("++++",channelList.value); |
|||
}) |
|||
|
|||
} |
|||
getChannels(); |
|||
|
|||
function toLink(channelId) { |
|||
router.push({ path: '/channel', query: { id: channelId } }); |
|||
flagType.value = null; |
|||
currentTab.value = null; |
|||
loadShows(channelId,flagType.value); |
|||
console.log("flga",flagType.value); |
|||
} |
|||
|
|||
|
|||
|
|||
function changeTab(channelId, flagType) { |
|||
currentTab.value = flagType; |
|||
loadShows(channelId,flagType); |
|||
} |
|||
|
|||
// 展示列表1 |
|||
const shows = ref([]); |
|||
// 加载展示列表 |
|||
function loadShows(channleId,flagType) { |
|||
//shows查询api,根据id,userId |
|||
ChannelApi.getShows(channleId,90000000,flagType).then((result)=>{ |
|||
console.log(result.data) |
|||
channel.value = result.data.channel; |
|||
shows.value = result.data.shows; |
|||
}) |
|||
} |
|||
loadShows(channel.value.id,flagType.value); |
|||
|
|||
//订阅 |
|||
function submit(channelId) { |
|||
console.log("频道id",channelId); |
|||
ChannelApi.subscribe(channelId,90000000).then((result)=>{ |
|||
if(result && result.data.success){ |
|||
ElMessage.success('订阅成功！'); |
|||
loadShows(channelId,null); |
|||
}else{ |
|||
ElMessage.console.error('订阅失败！'); |
|||
} |
|||
}) |
|||
|
|||
} |
|||
//取消订阅 |
|||
function unsubmit(channelId){ |
|||
console.log("取消频道id",channelId); |
|||
ChannelApi.unSubscribe(channelId,90000000).then((result) =>{ |
|||
|
|||
if(result && result.data.success){ |
|||
console.log("取消频道id+++++++",channelId); |
|||
ElMessage.success('取消订阅成功！'); |
|||
loadShows(channelId,null); |
|||
} |
|||
}) |
|||
} |
|||
// function buttonActive(){ |
|||
|
|||
// } |
|||
// buttonActive(); |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
频道 |
|||
<Nav></Nav> |
|||
<ChannelNav></ChannelNav> |
|||
<div class="club-nav"> |
|||
<div class="container"> |
|||
<button v-for="ch in channelList.list" @click="toLink(ch.id)" class="nav-item">{{ ch.name }}</button> |
|||
</div> |
|||
</div> |
|||
<div class="channel"> |
|||
<div class="channel-head"> |
|||
<!-- 1-订阅按钮 --> |
|||
<button v-if="channel.status && channel.status == true" class="submited" |
|||
@click="unsubmit(channel.id)">取消订阅</button> |
|||
<button v-else class="submit" @click="submit(channel.id)">订阅</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> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 频道内容 --> |
|||
<div class="channel-content"> |
|||
<!-- 导航栏 --> |
|||
<div class="content-nav"> |
|||
<button |
|||
class="tab" |
|||
:class="{ active: currentTab == null }" |
|||
@click="changeTab(channel.id,null)">全部</button> |
|||
<button |
|||
class="tab" |
|||
:class="{ active: currentTab == 1 }" |
|||
@click="changeTab(channel.id,1)">视频</button> |
|||
<button |
|||
class="tab" |
|||
:class="{ active: currentTab == 2 }" |
|||
@click="changeTab(channel.id, 2)">文章</button> |
|||
</div> |
|||
<component :is="currentTabComponent"></component> |
|||
<!-- 内容 --> |
|||
<!-- 如果是全部 --> |
|||
|
|||
<div v-if="currentTab == null" 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 v-if="currentTab == 1" 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 v-if="currentTab == 2" 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> |
|||
@ -1,10 +1,300 @@ |
|||
<template> |
|||
<!-- 卡片 --> |
|||
<div class="card-container"> |
|||
<div v-for="(live, index) in liveList" :key="index" class="card"> |
|||
<div class="cover-image" :class="{ 'no-overlay': !live.status == 1 }" style="position:relative;"> |
|||
<img :src=live.cover alt="节目1"> |
|||
<div v-if="live.status == 1" class="overlay">即将开播</div> |
|||
<div v-if="live.status == 1" class="start-time">{{ getDateDay(live.startTime) }} {{ live.startTime.slice(11, 16) }}开播</div> |
|||
</div> |
|||
<div class="card-content"> |
|||
<div class="card-title">{{ live.liveName }}</div> |
|||
<div class="card-actions"> |
|||
<!-- 用户头像 --> |
|||
<img :src=live.user.avatar alt="节目1" class="user-avatar"> |
|||
<!-- 用户昵称，与头像同行显示 --> |
|||
<div class="card-info">{{ live.user.userName }}</div> |
|||
<!-- 预约按钮,如果预约过了，按钮变灰色，文字变灰色，按钮文字为“已预约” --> |
|||
<a v-if="live.reservation == 0" href="#" class="card-button" |
|||
@click="booking(live.id, live.user.userId)">预约</a> |
|||
<a v-else href="#" class="card-button" style="background-color: #ccc;">已预约</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
|
|||
<script setup> |
|||
import { ref } from 'vue'; |
|||
/* |
|||
模拟后端数据 |
|||
*/ |
|||
const liveList = ref([]); |
|||
|
|||
|
|||
//获取直播列表 |
|||
function getLive() { |
|||
liveList.value = [ |
|||
{ |
|||
id: 1, |
|||
cover: "src/assets/live.jpg", |
|||
user: { |
|||
userId: 1, |
|||
userName: "冷辉老师", |
|||
avatar: "src/assets/live.jpg" |
|||
}, |
|||
liveName: "猎庄之顶级波段", |
|||
startTime: "2024-12-01 09:55", |
|||
reservation: 1, //0表示未预约，1表示已预约 |
|||
status: 1 //0表示未开播，1表示已开播 |
|||
}, |
|||
{ |
|||
id: 2, |
|||
cover: "src/assets/live.jpg", |
|||
user: { |
|||
userId: 2, |
|||
userName: "冷辉老师", |
|||
avatar: "src/assets/live.jpg" |
|||
}, |
|||
liveName: "猎庄之顶级波段", |
|||
startTime: "2024-12-01 09:55", |
|||
reservation: 1, //0表示未预约，1表示已预约 |
|||
status: 1 |
|||
}, |
|||
{ |
|||
id: 3, |
|||
cover: "src/assets/live.jpg", |
|||
user: { |
|||
userId: 3, |
|||
userName: "冷辉老师", |
|||
avatar: "src/assets/live.jpg" |
|||
}, |
|||
liveName: "猎庄之顶级波段", |
|||
startTime: "2024-11-30 12:55", |
|||
reservation: 1, //0表示未预约，1表示已预约 |
|||
status: 1 |
|||
}, |
|||
{ |
|||
id: 4, |
|||
cover: "src/assets/live.jpg", |
|||
user: { |
|||
userId: 4, |
|||
userName: "冷辉老师", |
|||
avatar: "src/assets/live.jpg" |
|||
}, |
|||
liveName: "猎庄之顶级波段", |
|||
startTime: "2024-12-30 12:55", |
|||
reservation: 0, //0表示未预约，1表示已预约 |
|||
status: 1 |
|||
}, |
|||
{ |
|||
id: 5, |
|||
cover: "src/assets/live.jpg", |
|||
user: { |
|||
userId: 5, |
|||
userName: "冷辉老师", |
|||
avatar: "src/assets/live.jpg" |
|||
}, |
|||
liveName: "猎庄之顶级波段", |
|||
startTime: "2024-12-30 12:55", |
|||
reservation: 0, //0表示未预约，1表示已预约 |
|||
status: 1, |
|||
} |
|||
] |
|||
} |
|||
getLive(); |
|||
|
|||
// 判断开播日期与当前时间的关系（今天、明天、其他） |
|||
function getDateDay(startTime) { |
|||
const now = new Date(); |
|||
const start = new Date(startTime); |
|||
const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数 |
|||
if (now.toDateString() == start.toDateString()) { |
|||
return "今天"; |
|||
} else if (now.getTime() + oneDay >= start.getTime()) { |
|||
return "明天"; |
|||
} else { |
|||
return startTime.slice(5, 10); |
|||
} |
|||
} |
|||
|
|||
// //获取用户信息 |
|||
// const userInfo = ref([]); |
|||
// function getUserInfo() { |
|||
// userInfo.value = { |
|||
// userId: 1, |
|||
// userName: "冷辉老师", |
|||
// avatar: "src/assets/live.jpg", |
|||
// //预约信息 |
|||
// reservationList: [1,2,3] |
|||
// } |
|||
// } |
|||
// getUserInfo(); |
|||
|
|||
// console.log(userInfo.value); |
|||
|
|||
// /* 判断预约状态 */ |
|||
// function isBooking(liveId) { |
|||
// for (let i = 0; i < userInfo.value.reservationList.length; i++) { |
|||
// if (userInfo.value.reservationList[i] == liveId) { |
|||
// return true; |
|||
// } |
|||
// } |
|||
// return false; |
|||
// } |
|||
|
|||
|
|||
|
|||
/*点击预约按钮以后显示预约成功的提示，并将按钮变为不可点击状态，且将按钮的文字改为“已预约”，并将按钮的背景颜色改为灰色*/ |
|||
function booking(liveId, userId) { |
|||
alert("预约成功！"); |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
直播 |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.card-container { |
|||
/*居中显示*/ |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
/*宽度*/ |
|||
width: 916px; |
|||
font-family: Arial, sans-serif; |
|||
padding: 0; |
|||
flex-wrap: wrap; |
|||
/*超出自动换行*/ |
|||
background-color: #f4f4f4; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.card { |
|||
background-color: #fff; |
|||
border-radius: 8px; |
|||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
|||
margin: 10px; |
|||
overflow: hidden; |
|||
border: #666; |
|||
height: 190px; |
|||
width: 209px; |
|||
} |
|||
|
|||
.card .cover-image img { |
|||
width: 100%; |
|||
height: 100%; |
|||
/*图片占满整个卡片*/ |
|||
object-fit: cover; |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
.cover-image { |
|||
position: relative; |
|||
height: 120px; |
|||
width: 208px; |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
/*即将开播图层*/ |
|||
.overlay { |
|||
position: absolute; |
|||
z-index: 2; |
|||
text-align: center; |
|||
top: 30%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
color: #fff; |
|||
font-size: 18px; |
|||
} |
|||
|
|||
/*开播时间*/ |
|||
.start-time { |
|||
position: absolute; |
|||
z-index: 2; |
|||
text-align: center; |
|||
top: 60%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
color: #ffffffaf; |
|||
font-size: 15px; |
|||
width: 120px; |
|||
} |
|||
|
|||
.cover-image::before { |
|||
content: " "; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 207px; |
|||
height: 120px; |
|||
/*最后一个参数是半透明度，可以透过调整0-1的数值，调整到满意的透明度*/ |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
/*用于隐藏样式*/ |
|||
.cover-image.no-overlay::before { |
|||
display: none; |
|||
} |
|||
|
|||
.card-content { |
|||
padding: 8px; |
|||
} |
|||
|
|||
.card-title { |
|||
font-size: 13px; |
|||
font-weight: bold; |
|||
margin-bottom: 5px; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
|
|||
} |
|||
|
|||
.card-info { |
|||
font-size: 14px; |
|||
color: #666; |
|||
} |
|||
|
|||
.card-button { |
|||
display: inline-block; |
|||
padding: 5px 5px; |
|||
background-color: #eb8b31; |
|||
color: #fff; |
|||
text-decoration: none; |
|||
border-radius: 20px; |
|||
font-size: small; |
|||
width: 50px; |
|||
text-align: center; |
|||
margin-left: auto; |
|||
} |
|||
|
|||
.card-actions { |
|||
display: flex; |
|||
align-items: center; |
|||
/* 垂直居中对齐 */ |
|||
justify-content: space-between; |
|||
/* 按钮右对齐 */ |
|||
} |
|||
|
|||
.user-avatar { |
|||
border-radius: 50%; |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
|
|||
.card-info { |
|||
margin-left: 5px; |
|||
/* 昵称与头像之间的间距 */ |
|||
margin-top: 0; |
|||
/* 移除顶部外边距 */ |
|||
/*超长以后将内容省略显示*/ |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
|
|||
width: 90px; |
|||
font-size: 12px; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue