bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/在包河/src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<h2>{{ msg }}</h2>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: '你好我是vue页面'
}
}
}
</script>
<style scoped>
</style>

126
历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/在包河/src/components/Radio.vue Normal file
View File

@@ -0,0 +1,126 @@
<template>
<div class="Radio">
<cvideo v-if="videoSrc.length != 0" :url="videoSrc" :show="false"></cvideo>
<div class="title">{{ list.play_title }}</div>
<img class="music" :src="list.play_img" alt="" />
<!-- require 是为了告诉浏览器这是一个代码 这里不用require无法加载图片 -->
<img
class="gif"
:src="
status
? require('@sta/img/sound_spectrum.gif')
: require('@sta/img/sound_spectrum.png')
"
alt=""
/>
<ul class="menu">
<li>
<img src="@sta/img/live_broadcast_icon.png" alt="" />
<div>当前直播</div>
</li>
<li>
<img
@click="playRadio"
:src="
status
? require('@sta/img/radio_stop.png')
: require('@sta/img/radio_up.png')
"
alt=""
/>
</li>
<li>
<img src="@sta/img/program_list_icon.png" alt="" />
<div>节目列表</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Radio",
data() {
return {
videoSrc: [],
// 把请求到的数据存到list里面
list: {},
status: false, //f未播放 t 播放
};
},
created() {
this.getRadio();
},
computed: {
cvideo() {
return this.$refs.cvideo;
},
},
methods: {
async getRadio() {
this.list = await this.$http.index.radio();
// console.log(this.list);
// m3u8视频播放地址用这个
this.videoSrc = [
{
type: "application/x-mpegURL",
src: this.list.play_url,
},
];
},
playRadio() {
this.status
? this.$children[0].PlayerPause()
: this.$children[0].PlayerPlay();
this.status = !this.status;
},
},
};
</script>
<style lang="less" scoped>
.Radio {
text-align: center;
margin-top: 1.347rem;
margin-bottom: 0.84rem;
.title {
font-family: PingFangSC-Bold;
font-size: 0.48rem;
color: #000000;
}
.music {
width: 7.467rem;
height: 7.467rem;
margin-bottom: 0.667rem;
}
.gif {
height: 1.2rem;
width: 7.467rem;
margin-bottom: 0.733rem;
}
.menu {
display: flex;
align-content: center;
justify-content: space-between;
width: 7.467rem;
margin: 0 auto;
li {
img {
width: 0.52rem;
height: 0.52rem;
}
&:nth-child(2) {
img {
width: 1.6rem;
height: 1.6rem;
}
}
div {
font-size: 0.267rem;
line-height: 0.56rem;
color: #999999;
}
}
}
}
</style>

22
历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/在包河/src/components/TV.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<div class="TV">
<!-- <TVlist></TVlist> -->
</div>
</template>
<script>
// import TVlist from './TVlist'
export default {
name: "TV",
data() {
return {};
},
methods: {},
// components: {
// TVlist
// }
};
</script>
<style lang="less" scoped>
</style>

45
历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/在包河/src/components/TVlist.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<ul class="TVlist">
<li v-for="i in 10" :key="i">
<span :class="i = 1 ?'active':''">安徽卫视</span>
<img src="@/img/act-list.gif" alt="" />
</li>
</ul>
</template>
<script>
export default {
name: "TVlist",
data() {
return {};
},
methods: {},
};
</script>
<style lang="less" scoped>
.TVlist {
li {
display: flex;
align-items: center;
justify-content: space-between;
height: 1.6rem;
background-color: #ffffff;
border-bottom: 0.013rem solid #e5e5e5;
padding-left: 0.547rem;
padding-right: 0.36rem;
span {
font-family: PingFangSC-Bold;
font-size: 0.427rem;
color: #333333;
}
.active {
color: #d0302c;
}
img {
width: 0.36rem;
height: 0.4rem;
}
}
}
</style>

71
历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/在包河/src/components/Video.vue Normal file
View File

@@ -0,0 +1,71 @@
<template>
<div class="Video">
<video-player
v-show="show"
class="video-player-box"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
>
</video-player>
</div>
</template>
<script>
import { videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
import "videojs-contrib-hls";
export default {
name: "Video",
// 定义一个 获取视频地址的参数
props: {
url: {
type: Array,
defaule: () => [],
},
show: {
type: Boolean,
defaule: true,
},
},
data() {
return {
playerOptions: {
// 视频是否静音播放
muted: false,
// 语言
language: "zh",
// 屏幕宽高比
aspectRatio: "16:9",
// 倍数
playbackRates: [0.7, 1.0, 1.5, 2.0],
// 视频播放地址
sources: this.url,
//
poster: "/static/images/author.jpg",
},
};
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
mounted () {
console.log(this.player)
},
methods: {
PlayerPlay() {
this.player.play();
},
PlayerPause() {
this.player.pause();
},
},
components: {
videoPlayer,
},
};
</script>
<style lang="less" scoped>
</style>

108
历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/在包河/src/components/live.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<div class="live">
<ul class="list">
<li v-for="v,i in list" :key="i">
<div class="top">
<img class="cover" :src="v.paly_img" alt="" />
<img class="state" v-if="v.paly_type==1" src="@sta/img/live_lab_ing.png" alt="" />
<img class="state" v-if="v.paly_type==2" src="@sta/img/live_lab_notice_big.png" alt="" />
<img class="state" v-if="v.paly_type==3" src="@sta/img/live_lab_playback_big.png" alt="" />
<div class="time" v-show="v.paly_type==2">
<div>直播时间：{{moment(v.play_time).format("MM-DD HH:MM")}}</div>
</div>
<span v-if="v.paly_type==1">{{v.play_count}}人在看</span>
<span v-else-if="v.paly_type==2">{{v.play_count}}人预约</span>
<span v-else>{{v.play_count}}人看过</span>
</div>
<div class="bottom">{{v.paly_title}}</div>
</li>
</ul>
</div>
</template>
<script>
import moment from 'moment';
export default {
name: "live",
data() {
return {
list: [],
};
},
created() {
this.getLive();
},
methods: {
async getLive() {
this.list = await this.$http.index.live();
console.log(this.list);
},
moment
},
};
</script>
<style scoped lang="less">
.live {
display: flex;
width: 100%;
justify-content: center;
.list {
width: 9.36rem;
margin-top: 0.4rem;
li {
width: 100%;
margin-bottom: 0.533rem;
.top {
width: 9.36rem;
position: relative;
margin-bottom: 0.28rem;
.cover {
width: 9.36rem;
height: 5.2rem;
border-radius: 0.053rem;
}
.state {
height: 0.48rem;
position: absolute;
top: 0.187rem;
right: 0.187rem;
}
.time {
position: absolute;
width: 3.733rem;
height: 0.533rem;
background-color: #000000;
border-radius: 0.267rem;
opacity: 0.7;
top: 50%;
left: 50%;
transform: translate(-50%);
div {
line-height: 0.533rem;
text-align: center;
font-family: PingFangSC-Medium;
font-size: 0.293rem;
line-height: 0.512rem;
color: #ffffff;
}
}
span {
position: absolute;
font-family: PingFangSC-Medium;
font-size: 0.293rem;
line-height: 0.512rem;
color: #ffffff;
bottom: 0.16rem;
right: 0.173rem;
}
}
.bottom {
font-size: 0.4rem;
line-height: 0.6rem;
color: #333333;
}
}
}
}
</style>