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

113
历届学生/front-end-team/项目练习/学生项目/缪虎/在包河VUE/src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

17
历届学生/front-end-team/项目练习/学生项目/缪虎/在包河VUE/src/components/Live.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<div class="Live">Live</div>
</template>
<script>
export default {
name: 'Live',
data () {
return {}
},
methods: {}
}
</script>
<style scoped lang="less">
</style>

186
历届学生/front-end-team/项目练习/学生项目/缪虎/在包河VUE/src/components/Radio.vue Normal file
View File

@@ -0,0 +1,186 @@
<template>
<div class="Radio">
<div class="title">{{ radioData.title }}</div>
<v-video ref="testvideo" :show="false" :url="videoSrc"></v-video>
<img class="radio_img" :src="radioData.frontcover" alt="" />
<img
class="audio_img"
:src="isPlay ? '../../static/img/sound_spectrum.gif' : '../../static/img/sound_spectrum.png'" alt=""
/>
<div class="action">
<div class="action_item">
<img src="../../static/img/live_broadcast_icon.png" alt="" />
<div class="action_item_title">当前直播</div>
</div>
<div class="action_item" @click="playVideo">
<img
class="play"
:src="
isPlay
? '../../static/img/radio_stop.png'
: '../../static/img/radio_up.png'
"
alt=""
/>
</div>
<div class="action_item" @click="showList">
<img src="../../static/img/program_list_icon.png" alt="" />
<div class="action_item_title">节目列表</div>
</div>
</div>
<van-popup v-model="show" position="bottom" :style="{ height: '70%' }">
<div class="popup">
<div class="popup_title">节目单</div>
<div class="popup_body"></div>
<div class="popup_close"></div>
</div>
</van-popup>
</div>
</template>
<script>
export default {
name: "Radio",
data() {
return {
isPlay: false, // 控制页面的播放状态 false 未播放 true 已播放
show: false, // 控制 节目列表的显示 false 不显示 true 显示
radioData: {},
videoSrc: [],
};
},
created() {
this.getRadioList();
},
mounted() {},
methods: {
async getRadioList() {
let res = await this.$http.index.radio();
this.radioData = res;
this.videoSrc = [
{
type: "application/x-mpegURL",
src: res.play_url,
},
];
console.log(this.videoSrc);
},
playVideo() {
this.isPlay ? this.$refs.testvideo.pause() : this.$refs.testvideo.play();
this.isPlay = !this.isPlay;
},
showList() {
this.show = !this.show;
},
},
};
</script>
<style scoped lang="less">
.Radio {
padding: 0 1.267rem;
text-align: center;
.title {
font-family: PingFangSC-Bold;
font-size: 0.48rem;
color: #000000;
margin-top: 1.347rem;
margin-bottom: 0.84rem;
}
.radio_img {
width: 7.467rem;
height: 7.467rem;
margin-bottom: 0.667rem;
}
.audio_img {
height: 1.2rem;
width: 100%;
margin-bottom: 0.733rem;
}
.action {
display: flex;
justify-content: space-between;
align-items: center;
.action_item {
img {
width: 0.52rem;
height: 0.52rem;
}
.play {
width: 1.6rem;
height: 1.6rem;
}
.action_item_title {
font-family: PingFang-SC-Medium;
font-size: 0.267rem;
color: #999999;
margin-top: 0.173rem;
}
}
}
.popup {
display: flex;
flex-direction: column;
height: 100%;
.popup_title {
font-size: 0.37rem;
font-weight: 500;
color: #000;
text-align: center;
border-bottom: 0.01rem solid #ccc;
line-height: 1.6rem;
}
.popup_body {
text-align: left;
flex: 1;
overflow-y: scroll;
.popup_body_item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.39rem;
border-bottom: 0.01rem solid #ccc;
.item_left {
display: flex;
align-items: center;
.text {
p {
font-size: 0.37rem;
color: #000;
}
span {
margin-top: 0.27rem;
font-size: 0.32rem;
color: #999;
}
}
img {
width: 0.37rem;
height: 0.39rem;
margin-left: 0.57rem;
}
}
.item_text {
font-size: 0.37rem;
color: #000;
line-height: 1.6rem;
}
}
}
.popup_close {
font-size: 0.37rem;
font-weight: 500;
text-align: center;
border-top: 0.01rem solid #ccc;
line-height: 1.6rem;
}
}
}
</style>

18
历届学生/front-end-team/项目练习/学生项目/缪虎/在包河VUE/src/components/TV.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="Tv">
<TvListComponents :show="false"></TvListComponents>
</div>
</template>
<script>
import TvListComponents from "@/components/TvList";
export default {
name: "Tv",
components: {
TvListComponents
},
};
</script>
<style scoped lang="less">
</style>

66
历届学生/front-end-team/项目练习/学生项目/缪虎/在包河VUE/src/components/TvList.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<div class="TvList">
<router-link
tag="div"
:to="{ name: 'TvInfo', query: { url: item.play_url, id: item.id } }"
class="Tv_item"
v-for="(item, index) in arr"
:key="index"
>
<span>{{ item.title }}</span>
<img v-show="show && $route.query.id == item.id" src="../../static/img/act-list.gif" alt="" />
</router-link>
</div>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: true,
},
},
data() {
return {
arr: [],
};
},
created() {
this.getChannelList();
},
methods: {
async getChannelList() {
let res = await this.$http.index.channelList({
page: 1,
count: 15,
});
this.arr = res;
console.log(res);
},
},
};
</script>
<style lang="less" scoped>
.TvList {
.Tv_item {
display: flex;
align-items: center;
justify-content: space-between;
height: 1.6rem;
padding-left: 0.547rem;
padding-right: 0.36rem;
span {
font-size: 0.427rem;
color: #333333;
}
img {
width: 0.36rem;
height: 0.4rem;
}
}
}
</style>

65
历届学生/front-end-team/项目练习/学生项目/缪虎/在包河VUE/src/components/Video.vue Normal file
View File

@@ -0,0 +1,65 @@
<template>
<div class="Video">
<video-player v-show="show" class="video-player-box"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
customEventName="customstatechangedeventname">
</video-player>
</div>
</template>
<script>
export default {
name: 'Video',
props: {
url: {
type: Array,
default: () => []
},
show: {
type: Boolean,
default: true
}
},
data () {
return {
playerOptions: {
muted: false,
language: 'en',
aspectRatio: "16:9", //视频的宽高比
playbackRates: [0.7, 1.0, 1.5, 2.0, 3.0],
sources: this.url,
poster: "/static/images/author.jpg",
}
}
},
watch: {
url(newVal) {
this.playerOptions.sources = newVal;
}
},
mounted() {
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
methods: {
play() {
this.player.play()
},
pause() {
this.player.pause()
},
}
}
</script>
<style scoped lang="less">
</style>

93
历届学生/front-end-team/项目练习/学生项目/缪虎/在包河VUE/src/components/recommend.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<div class="recommend">
<div class="title">相关推荐</div>
<van-tabs>
<ul class="text" v-if="XXXX == 1">
<li>
<div class="photo">
<img src="" alt="" />
<span>03:07</span>
</div>
<span>一生中总要有个夏天 给海岛，我的9天8夜</span>
</li>
<li>
<div class="photo">
<img src="" alt="" />
<span>03:07</span>
</div>
<span>特朗普说他有绝对权 利命令美企退出中国 </span>
</li>
<li>
<div class="photo">
<img src="" alt="" />
<span>03:07</span>
</div>
<span>七岁孩子被欺负了， 爸爸的做法引起关注...</span>
</li>
</ul>
</van-tabs>
</div>
</template>
<script>
export default {
name: "recommend",
data() {
return {
id: 1,
};
},
created() {
this.getrecommend();
},
mounted() {},
methods: {
async getrecommend() {
let res = await this.$http.id.recommend();
},
},
};
</script>
<style scoped lang="less">
.recommend {
.title {
font-size: 0.427rem;
color: #333333;
margin-top: 0.32rem;
margin-bottom: 0.37rem;
margin-left: 0.32rem;
}
.text {
margin-left: 0.24rem;
margin-bottom: 0.4rem;
.li {
display: flex;
overflow-x: scroll;
height: 100%;
padding-right: 0.1rem;
.photo {
position: relative;
img {
width: 2.74rem;
height: 1.56rem;
border-radius: 0.04rem;
}
span {
font-size: 0.22rem;
color: #ffffff;
position: absolute;
right: 0;
bottom: 0;
}
}
span {
font-size: 0.28rem;
color: #d0302c;
}
}
}
}
</style>