first commit

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.30/在包河/src/components/footer.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="footer">
+    
+  </div>
+</template>
+  
+  <script>
+export default {
+  data() {},
+  methods: {},
+};
+</script>
+  
+<style lang="less" scoped>
+</style>

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.30/在包河/src/components/header.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="header">头部</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.30/在包河/src/components/live.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="live">
+    融媒直播
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.30/在包河/src/components/radio.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="radio">
+        <bh-video ref="bhVideo" v-if="videoUrl.length != 0" :show="false" :url="videoUrl"></bh-video>
+        <div class="title">{{ radioData.play_title }}</div>
+        <img class="fm" :src="radioData.play_img" alt="">
+        <img class="gif" :src="isPlaying ? '/static/img/sound_spectrum.gif' : '/static/img/sound_spectrum.png'" alt="">
+        <ul>
+            <li>
+                <img src="/static/img/live_broadcast_icon.png" alt="">
+                <p>当前直播</p>
+            </li>
+            <li>
+                <img @click="play" :src="isPlaying ? '/static/img/radio_stop.png' : '/static/img/radio_up.png'" alt="">
+            </li>
+            <li>
+                <img src="/static/img/program_list_icon.png" alt="">
+                <p>界面列表</p>
+            </li>
+        </ul>
+    </div>
+</template>
+  
+<script>
+
+export default {
+    data() {
+        return {
+            isPlaying: false, // false 表示未播放, true 正在播放
+            radioData: {},
+            videoUrl: []
+        }
+    },
+    created() {
+        this.getRadio()
+    },
+    methods: {
+        play() {
+            this.isPlaying ? this.$refs.bhVideo.PlayerPause() : this.$refs.bhVideo.PlayerPlay()
+            this.isPlaying = !this.isPlaying
+
+        },
+        async getRadio() {
+            this.radioData = await this.$http.index.radio();
+            this.videoUrl = [
+                { type: 'application/x-mpegURL', src:  this.radioData.play_url }
+            ]
+        }
+    }
+}
+</script>
+  
+<style lang="less" scoped>
+.radio {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .title {
+        font-family: PingFangSC-Bold;
+        font-size: 0.48rem;
+        color: #000000;
+        margin-top: 1.347rem;
+        margin-bottom: 0.84rem;
+    }
+
+    .fm {
+        width: 7.467rem;
+        height: 7.467rem;
+        margin-bottom: 0.667rem;
+    }
+
+    .gif {
+        width: 7.467rem;
+        height: 1.2rem;
+        margin-bottom: 0.733rem;
+    }
+
+    ul {
+        display: flex;
+        width: 7.467rem;
+
+        justify-content: space-between;
+
+        li {
+            text-align: center;
+
+            img {
+                width: 0.52rem;
+                height: 0.52rem;
+            }
+
+            p {
+                font-family: PingFang-SC-Medium;
+                font-size: 0.267rem;
+                color: #999999;
+            }
+
+            &:nth-child(2) {
+                img {
+                    width: 1.6rem;
+                    height: 1.6rem;
+                }
+            }
+        }
+    }
+}
+</style>

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.30/在包河/src/components/tv.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="tv">
+      <tv-list :list="tvData"></tv-list>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+      data() {
+          return {
+            tvData: []
+          }
+      },
+      created() {
+        this.getTv();
+      },
+      activated() {
+        console.log("activated");
+      },
+      methods: {
+        async getTv() {
+          this.tvData = await this.$http.index.tv();
+          console.log(this.tvData);
+        }
+      }
+  }
+  </script>
+  
+  <style lang="less" scoped>
+  
+  </style>

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.30/在包河/src/components/tvList.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="tvList">
+        <ul>
+            <router-link tag="li" :to="{ name: 'tvInfo', query: { id: v.id } }" v-for="v, i in list" :key="i">
+                <p>{{ v.title }}</p>
+                <img v-show="showIcon" src="/static/img/act-list.gif" alt="">
+            </router-link>
+        </ul>
+    </div>
+</template>
+  
+<script>
+export default {
+    name: 'tv-list',
+    props: {
+        showIcon: {
+            type: Boolean,
+            default: false
+        },
+        list: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+  
+<style lang="less" scoped>
+@import "~@less/mixins/index";
+.tvList {
+    ul {
+        li {
+            height: 1.6rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-left: 0.547rem;
+            padding-right: 0.36rem;
+            .border(bottom);
+            p {
+                font-family: PingFangSC-Bold;
+                font-size: 0.427rem;
+                color: #333333;
+            }
+
+            img {
+                width: 0.36rem;
+                height: 0.4rem;
+            }
+        }
+    }
+}
+</style>

历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.30/在包河/src/components/video.vue

@@ -0,0 +1,73 @@
+<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: 'bh-video',
+    props: {
+        url: {
+            default: () => [],
+            type: Array
+        },
+        show: {
+            default: true,
+            type: Boolean
+        }
+    },
+    data() {
+        return {
+            playerOptions: {
+                // videojs options
+                autoplay: false,
+                muted: false,
+                preload: 'auto',
+                language: 'zh-CN',
+                fluid: true,
+                playbackRates: [0.7, 1.0, 1.5, 2.0],
+                sources: this.url,
+                // poster: "https://pic.qtfm.cn/2020/0311/20200311053004.png",
+                poster: "",
+                notSupportedMessage: '此视频暂无法播放，请稍后再试',
+                controlBar: {
+                    timeDivider: true,
+                    durationDisplay: true,
+                    remainingTimeDisplay: false,
+                    fullscreenToggle: true, // 全屏按钮
+                    currentTimeDisplay: true, // 当前时间
+                    volumeControl: false, // 声音控制键
+                    playToggle: true, // 暂停和播放键
+                    progressControl: true // 进度条
+                }
+            }
+        }
+    },
+    mounted() {
+        console.log('this is current player instance object', this.player)
+    },
+    computed: {
+        player() {
+            return this.$refs.videoPlayer.player
+        }
+    },
+    methods: {
+        PlayerPlay() {
+            this.player.play()
+        },
+        PlayerPause() {
+            this.player.pause()
+        },
+    }
+}
+</script>
+  
+<style lang="less" scoped>
+.video {
+    width: 100%;
+}
+</style>