first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,15 @@
<template>
<div id="app">
<router-view :key="$route.query.t"/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less">
@import "~@less/_.less";
</style>

View File

@@ -0,0 +1,3 @@
@import "normalize";
@import "colors";
@import "mixins";

View File

@@ -0,0 +1,185 @@
.hairline(@position, @color) when (@position = top) {
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
height: 1px;
width: 100%;
background-color: @color;
display: block;
z-index: 15;
// .transform-origin(50% 0%);
html.pixel-ratio-2 & {
.transform(scaleY(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleY(0.33));
}
}
}
.hairline(@position, @color) when (@position = left) {
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
width: 1px;
height: 100%;
background-color: @color;
display: block;
z-index: 15;
// .transform-origin(0% 50%);
html.pixel-ratio-2 & {
.transform(scaleX(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleX(0.33));
}
}
}
.hairline(@position, @color) when (@position = bottom) {
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 1px;
width: 100%;
background-color: @color;
display: block;
z-index: 15;
html.pixel-ratio-2 & {
.transform(scaleY(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleY(0.33));
}
}
}
.hairline(@position, @color) when (@position = right) {
&:after {
content: '';
position: absolute;
right: 0;
top: 0;
left: auto;
bottom: auto;
width: 1px;
height: 100%;
background-color: @color;
display: block;
z-index: 15;
// .transform-origin(100% 50%);
html.pixel-ratio-2 & {
.transform(scaleX(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleX(0.33));
}
}
}
// Shadow
.depth(@level:1) {
& when (@level = 0) {
box-shadow: none;
}
& when (@level = 1) {
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
}
& when (@level = 2) {
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
}
& when (@level = 3) {
box-shadow: 0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);
}
& when (@level = 4) {
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
}
& when (@level = 5) {
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12);
}
& when (@level = 6) {
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
}
& when (@level = 7) {
box-shadow: 0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12);
}
& when (@level = 8) {
box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
}
& when (@level = 9) {
box-shadow: 0 5px 6px -3px rgba(0,0,0,.2),0 9px 12px 1px rgba(0,0,0,.14),0 3px 16px 2px rgba(0,0,0,.12);
}
& when (@level = 10) {
box-shadow: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12);
}
& when (@level = 11) {
box-shadow: 0 6px 7px -4px rgba(0,0,0,.2),0 11px 15px 1px rgba(0,0,0,.14),0 4px 20px 3px rgba(0,0,0,.12);
}
& when (@level = 12) {
box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12);
}
& when (@level = 13) {
box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
}
& when (@level = 14) {
box-shadow: 0 7px 9px -4px rgba(0,0,0,.2),0 14px 21px 2px rgba(0,0,0,.14),0 5px 26px 4px rgba(0,0,0,.12);
}
& when (@level = 15) {
box-shadow: 0 8px 9px -5px rgba(0,0,0,.2),0 15px 22px 2px rgba(0,0,0,.14),0 6px 28px 5px rgba(0,0,0,.12);
}
& when (@level = 16) {
box-shadow: 0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);
}
& when (@level = 17) {
box-shadow: 0 8px 11px -5px rgba(0,0,0,.2),0 17px 26px 2px rgba(0,0,0,.14),0 6px 32px 5px rgba(0,0,0,.12);
}
& when (@level = 18) {
box-shadow: 0 9px 11px -5px rgba(0,0,0,.2),0 18px 28px 2px rgba(0,0,0,.14),0 7px 34px 6px rgba(0,0,0,.12);
}
& when (@level = 19) {
box-shadow: 0 9px 12px -6px rgba(0,0,0,.2),0 19px 29px 2px rgba(0,0,0,.14),0 7px 36px 6px rgba(0,0,0,.12);
}
& when (@level = 20) {
box-shadow: 0 10px 13px -6px rgba(0,0,0,.2),0 20px 31px 3px rgba(0,0,0,.14),0 8px 38px 7px rgba(0,0,0,.12);
}
& when (@level = 21) {
box-shadow: 0 10px 13px -6px rgba(0,0,0,.2),0 21px 33px 3px rgba(0,0,0,.14),0 8px 40px 7px rgba(0,0,0,.12);
}
& when (@level = 22) {
box-shadow: 0 10px 14px -6px rgba(0,0,0,.2),0 22px 35px 3px rgba(0,0,0,.14),0 8px 42px 7px rgba(0,0,0,.12);
}
& when (@level = 23) {
box-shadow: 0 11px 14px -7px rgba(0,0,0,.2),0 23px 36px 3px rgba(0,0,0,.14),0 9px 44px 8px rgba(0,0,0,.12);
}
& when (@level = 24) {
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);
}
}
.no-scrollbar() {
&::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
opacity: 0 !important;
}
}
.ellipsis() {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
word-wrap: break-word;
}

View File

@@ -0,0 +1,421 @@
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Prevent adjustments of font size after orientation changes in IE and iOS.
*/
.content {
margin-top: 1.333rem;
}
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
* 2. Add the correct display in IE.
*/
article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
display: block;
}
/**
* Add the correct display in IE 9-.
*/
audio,
canvas,
progress,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Add the correct display in IE 10-.
* 1. Add the correct display in IE.
*/
template, /* 1 */
[hidden] {
display: none;
}
/* Links
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/* Forms
========================================================================== */
/**
* 1. Change font properties to `inherit` in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
select,
textarea {
font: inherit; /* 1 */
margin: 0; /* 2 */
}
/**
* Restore the font weight unset by the previous rule.
*/
optgroup {
font-weight: bold;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}

View File

@@ -0,0 +1,7 @@
@import "../colors";
@import "../mixins";
h2 {
color: @theme;
display: flex;
}

View File

@@ -0,0 +1,114 @@
<template>
<div class="Comment">
<div class="back"></div>
<div class="title">全部评论</div>
<div class="list" v-if="comment.length !=0">
<div v-for="v in comment" class="lsity">
<div class="list_left">
<img :src="v.image" alt="">
<div>
<div class="name_a">{{v.nick_name}}</div>
<div class="time_a">{{v.create_time}}</div>
</div>
</div>
<div class="list_right">
<img src="../../static/img/icon/give_thumbs-up.png" alt="">
<span>{{v.praise_count}}</span>
</div>
</div>
</div>
<div class="nodata" v-else>
<img src="/static/img/hm_bg_img_no.png" alt="">
<p>快来发表你的评论吧</p>
</div>
</div>
</template>
<script>
export default {
name: "Comment",
data() {
return {}
},
props: {
comment: {
type: Array,
default: () => []
},
},
created() {
},
methods: {}
}
</script>
<style scoped lang="less">
.Comment {
.back {
padding: 0 !important;
width: 100%;
height: 0.213rem;
background-color: #f3f3f3;
}
.title {
height: 1.347rem;
background-color: #ffffff;
font-size: 0.427rem;
color: #333333;
line-height: 1.347rem;
padding: 0 0.32rem;
box-sizing: border-box;
}
.nodata {
text-align: center;
img {
width: 5.56rem;
height: 4.653rem;
margin-bottom: 0.68rem;
}
p {
font-size: 0.373rem;
color: #999999;
}
}
.list_left{
display: flex;
align-items: center;
img{
width: 1rem;
height: 1.093rem;
border-radius: 100%;
margin-right: 10px;
}
.name_a{
color: #333333;
font-size: 0.373rem;
margin-bottom: 0.2rem;
}
.time_a{
color: #999999;
font-size: 0.32rem;
}
}
.lsity{
display: flex;
justify-content: space-between;
padding: 18px 12px;
}
.list_right{
display: flex;
align-items: center;
img{
width: 16px;
height: 16px;
margin-right: 10px;
}
span{
color: #999999;
font-size: 0.32rem;
}
}
}
</style>

View File

@@ -0,0 +1,65 @@
<template>
<div class="Header">
<div class="left">
<img class="logo" src="/static/img/icon/gw_img_logo.png" alt="">
<img class="logo_text" src="/static/img/icon/logo_text_icon.png" alt="">
</div>
<div class="open">打开</div>
</div>
</template>
<script>
export default {
name: "Header",
data() {
return {}
},
created() {
},
methods: {}
}
</script>
<style scoped lang="less">
.Header {
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
height: 1.333rem;
background-color: #000000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.32rem;
box-sizing: border-box;
opacity: 0.7;
z-index: 999;
.left {
display: flex;
align-items: center;
.logo {
width: 0.867rem;
height: 0.867rem;
}
.logo_text {
width: 1.76rem;
height: 0.613rem;
margin-left: 0.253rem;
}
}
.open {
width: 1.92rem;
height: 0.693rem;
background-color: #d0302c;
border-radius: 0.107rem;
text-align: center;
line-height: 0.693rem;
font-size: 0.32rem;
color: #ffffff;
}
}
</style>

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>

View File

@@ -0,0 +1,22 @@
<template>
<div class="Live">
融媒直播
</div>
</template>
<script>
export default {
name: "Live",
data() {
return {}
},
created() {
},
methods: {}
}
</script>
<style scoped>
</style>

View File

@@ -0,0 +1,199 @@
<template>
<div class="Radio">
<hls-video ref="hlsVideo" :url="source" v-show="false"></hls-video>
<h2>{{ radioList.title }}</h2>
<img class="logo" width="100" :src="radioList.frontcover" alt="">
<img class="progress" :src="currentVideoStatus ? '/static/img/sound_spectrum.gif' : '/static/img/sound_spectrum.png'" alt="">
<div class="play_action">
<div class="refresh" @click="refresh">
<img src="/static/img/icon/live_broadcast_icon.png" alt="">
<div>当前直播</div>
</div>
<img class="play" @click="changeVideo"
:src=" currentVideoStatus ? '/static/img/radio_stop.png' : '/static/img/radio_up.png' " alt="">
<div class="menu" @click="getMenuList">
<img class="menu" src="/static/img/icon/program_list_icon.png" alt="">
<div>节目列表</div>
</div>
</div>
<van-popup v-model="isShowMenu"
class="list"
position="bottom"
:style="{ height: '70%' }">
<div class="title">节目单</div>
<ul>
<li v-for="(item,index) in MenuList"
@click="changeMp3(index)"
:key="index">
<div class="left">
<div class="list_name">{{ item.menu_name }}</div>
<div class="list_muse_name">{{ item.nick_name }}</div>
<img v-if="index == showGifIndex" class="gif" src="/static/img/act-list.gif" alt="">
</div>
<div class="time">{{ item.start_time }} - {{ item.end_time }}</div>
</li>
</ul>
</van-popup>
</div>
</template>
<script>
export default {
name: "Radio",
data() {
return {
radioList: {}, // 请求到的radio数据
source: [], // 视频播放地址
currentVideoStatus: false, // 当前视频的播放状态
isShowMenu: false, // 控制更多界面弹窗的显示
MenuList: [],
showGifIndex: 0
}
},
created() {
this.getRadio()
},
methods: {
changeMp3(index) {
this.showGifIndex = index
console.log(this.MenuList[this.showGifIndex])
this.source = [
{ type: "video/mp4", src: this.MenuList[this.showGifIndex].play_url}
];
this.isShowMenu = false
},
async getMenuList() {
this.MenuList = await this.$http.index.MenuList();
console.log(this.MenuList)
this.isShowMenu = true
},
refresh() {
this.$router.go(0)
},
changeVideo() {
if (this.currentVideoStatus) {
this.currentVideoStatus = false
this.$refs.hlsVideo.onPlayerPause()
} else {
this.currentVideoStatus = true
this.$refs.hlsVideo.onPlayerPlay()
}
},
async getRadio() {
this.radioList = await this.$http.index.radio();
this.source = [
{
type: "application/x-mpegURL",
src: this.radioList.play_url
}
];
}
}
}
</script>
<style scoped lang="less">
.Radio {
width: 7.48rem;
margin: 0 auto;
.list {
.title {
font-size: .37rem;
font-weight: 500;
color: #000;
text-align: center;
border-bottom: .01rem solid #ccc;
line-height: 1.6rem;
}
ul {
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .39rem;
border-bottom: .01rem solid #ccc;
.left {
position: relative;
.list_name{
font-size: .37rem;
color: #000;
}
.list_muse_name {
margin-top: .27rem;
font-size: .32rem;
color: #999;
}
.gif {
position: absolute;
right: -26px;
width: 0.37rem;
height: 0.39rem;
margin-left: 0.57rem;
top: 50%;
transform: translateY(-50%);
}
}
.time {
font-size: .37rem;
color: #000;
line-height: 1.6rem;
}
}
}
}
h2 {
font-size: 0.48rem;
color: #000000;
margin-bottom: 0.84rem;
text-align: center;
margin-top: 1.347rem;
}
.logo {
width: 7.467rem;
height: 7.467rem;
margin-bottom: 0.667rem;
}
.progress {
width: 100%;
height: 1.2rem;
margin-bottom: 0.733rem;
}
.play_action {
display: flex;
align-items: center;
justify-content: space-between;
.refresh {
text-align: center;
img {
width: 0.52rem;
height: 0.52rem;
}
div {
font-size: 0.267rem;
color: #999999;
}
}
.play {
width: 1.6rem;
height: 1.6rem;
}
.menu {
text-align: center;
img {
width: 0.587rem;
height: 0.52rem;
}
div {
font-size: 0.267rem;
color: #999999;
}
}
}
}
</style>

View File

@@ -0,0 +1,23 @@
<template>
<div class="Tv">
<tv-item></tv-item>
</div>
</template>
<script>
export default {
name: "Tv",
data() {
return {}
},
created() {
},
methods: {}
}
</script>
<style scoped>
</style>

View File

@@ -0,0 +1,79 @@
<template>
<div class="TvItem">
<ul>
<li @click="enterTvInfo(item)" v-for="(item,index) in ChannelList" :key="index">
<span>{{ item.title }}</span>
<img v-if="
isShow
? item.id == $route.query.id
: ''
" src="/static/img/act-list.gif" alt="">
</li>
</ul>
</div>
</template>
<script>
export default {
name: "TvItem",
data() {
return {
page: 1,
ChannelList: []
}
},
props: {
isShow: {
type: Boolean,
default: false
}
},
created() {
console.log(this.$route.query)
this.getChannelList()
},
methods: {
enterTvInfo(item) {
this.$router.push({
name: 'TvInfo',
query: {
id: item.id,
url: item.play_url,
t: Date.now()
}
})
},
async getChannelList() {
this.ChannelList = await this.$http.index.channelList({
page: this.page,
count: 15
});
console.log(this.ChannelList)
}
}
}
</script>
<style scoped lang="less">
.TvItem {
ul {
li {
display: flex;
align-items: center;
justify-content: space-between;
height: 1.6rem;
padding: 0 0.813rem;
box-sizing: border-box;
border-bottom: 1px solid #e5e5e5;
span {
font-size: 0.427rem;
color: #333333;
}
img {
width: 0.36rem;
height: 0.4rem;
}
}
}
}
</style>

View File

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

View File

@@ -0,0 +1,34 @@
<template>
<div class="opapp">
打开APP阅读全文
</div>
</template>
<script>
export default {
name: "opapp",
data() {
return {}
},
created() {
},
methods: {},
}
</script>
<style scoped lang="less">
.opapp{
width: 9.36rem;
height: 1.17rem;
border: .03rem solid #d0302c;
border-radius: .11rem;
font-size: .37rem;
font-weight: 500;
color: #d0302c;
line-height: 1.17rem;
text-align: center;
margin: 0 auto;
background: #fff;
}
</style>

View File

@@ -0,0 +1,80 @@
<template>
<div class="video">
<video-player class="video-player-box"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
customEventName="customstatechangedeventname">
</video-player>
</div>
</template>
<script>
export default {
data() {
return {
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0],
autoplay: false,
muted: false,
loop: false,
preload: "none",
language: "zh-CN",
aspectRatio: "16:9",
fluid: false,
poster: "",
sources: [],
notSupportedMessage: "此视频暂无法播放,请稍后再试",
controlBar: {
// 当前时间和总时间的 分隔符
timeDivider: true,
//当前播放时间
currentTimeDisplay: true,
// 总时间
durationDisplay: true,
/**
* 区分 currentTimeDisplay,timeDivider,durationDisplay
* remainingTimeDisplay显示默认样式,只显示当前播放时间,一般
* 为false
*/
remainingTimeDisplay: false,
fullscreenToggle: true,
},
}
}
},
watch: {
url(newVal,oldVal) {
this.playerOptions.sources = newVal;
}
},
props: {
url: {
type: Array,
default: () => []
}
},
created() {
this.playerOptions.sources = this.url;
},
mounted() {
},
methods: {
async onPlayerPlay(event) {
console.log("onPlayerPlay: ", this.$refs.videoPlayer)
await this.$refs.videoPlayer.player.play()
},
async onPlayerPause(event) {
console.log("onPlayerPause: ", this.$refs.videoPlayer)
await this.$refs.videoPlayer.player.pause()
},
}
}
</script>
<style scoped>
</style>

View File

@@ -0,0 +1,144 @@
<template>
<div class="recommend">
<div class="first" v-if="type_a == 1">
<div class="back"></div>
<div class="first_content">
<p class="title_top">相关推荐</p>
<ul>
<li v-for="(v,i) in datarecommend" :key="i" @click="jump(v.id)">
<div class="first_left">
<p class="first_left_top">{{v.title}}</p>
<p class="time">
{{v.create_time}}
</p>
</div>
<div class="first_right">
<img :src="v.icon" alt="">
</div>
</li>
</ul>
</div>
</div>
<div class="first_2" v-else>
<div class="first_content">
<p class="title_top">相关推荐</p>
<ul>
<li v-for="(v,i) in datarecommend" :key="i" @click="jump(v.id)">
<img :src="v.cover" alt="">
<div> {{v.title}}</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: "recommend",
props:{
type_a:{
type: Number,
required:true
},
datarecommend:{
type: Array,
required:true
},
},
data() {
return {
data_a:this.datarecommend,
index:null
}
},
created() {
console.log(this.data_a)
},
methods: {
jump(data){
this.$router.push({path:'/',query:{id:data}} )
location.reload();
console.log(data)
}
},
}
</script>
<style scoped lang="less">
.recommend {
.first {
.back {
padding: 0 !important;
width: 100%;
height: 0.213rem;
background-color: #f3f3f3;
}
.first_content {
padding-left: 0.32rem;
padding-right: 0.32rem;
.title_top{
font-size: 0.427rem;
color: #333333;
padding-top: 0.48rem;
}
ul{
li{
border-bottom: 1px solid #999999;
display: flex;
align-items: center;
justify-content: space-between;
.first_left_top{
width: 5.947rem;
font-size: 0.427rem;
color: #333333;
}
.time{
color: #999999;
font-size: 0.32rem;
}
.first_right img{
width: 3.013rem;
height: 2.267rem;
border-radius: 0.053rem;
}
}
}
}
}
.first_2{
padding-left: 0.32rem;
padding-right: 0.32rem;
.title_top{
font-size: 0.427rem;
color: #333333;
padding-top: 0.48rem;
}
ul{
display: flex;
overflow-X:auto ;
li{
margin-right: 5px;
img{
width: 3.653rem;
height: 2.08rem;
margin-bottom: 0.32rem;
}
div{
color: #333333;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 0.36rem;
width: 3.333rem;
height: 0.92rem;
}
}
}
}
}
</style>

View File

@@ -0,0 +1,27 @@
export default {
devBaseUrl: '/apis',
testBaseUrl: 'http://127.0.0.1:3000/api/json/test',
prodBaseUrl: 'https://zbhapi.ahtv.cn/h5',
urlList: {
radio: '/radio', //
MenuList: '/getMenuList',
channelList: '/channelList',
liveComment: '/liveComment',
newsDetail:'newsDetail',
interactDetail:'interactDetail',
videoDetail:'videoDetail'
},
checkUrl: function () {
switch (process.env.NODE_ENV) {
case "development":
return this.devBaseUrl;
break;
case "test":
return this.testBaseUrl;
break;
case "production":
return this.prodBaseUrl;
break;
}
}
}

View File

@@ -0,0 +1,60 @@
import axios from "axios";
import config from "@/config"
export default class http {
constructor() {
this.instance = axios.create({
baseURL: config.checkUrl(),
timeout: 3000,
headers: {'X-Custom-Header': 'foobar'}
});
this.interceptors()
}
async get(params) {
return await this.instance.get(params.url, {
params: params.data,
headers: Object.assign({
token: localStorage.getItem("token"),
"Content-Type": "application/json;"
}, params.headers)
})
}
async post(params) {
return await this.instance.post(params.url, params.data, {
headers: Object.assign({
token: localStorage.getItem("token"),
"Content-Type": "application/json;"
}, params.headers)
})
}
interceptors() {
// 添加请求拦截器
this.instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
this.instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
switch (response.data.resultCode) {
case "000":
return response.data.data
break;
case "500":
throw new Error(response.data.message);
break;
}
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
}
}

View File

@@ -0,0 +1,41 @@
import 'amfe-flexible'
import Vue from 'vue'
import App from './App'
import router from './router'
import Vant from 'vant';
import 'vant/lib/index.css';
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import "videojs-contrib-hls";
import videos from "./components/video";
import TvItem from "./components/TvItem";
import Header from "./components/Header";
import Comment from "./components/Comment";
import vrecommend from "./components/vrecommend";
import opapp from "./components/opapp";
Vue.component('hls-video', videos)
Vue.component('tv-item', TvItem)
Vue.component('v-header', Header)
Vue.component('v-comment', Comment)
Vue.component('v-recommend',vrecommend)
Vue.component('v-opapp',opapp)
Vue.use(Vant);
Vue.use(VueVideoPlayer);
Vue.config.productionTip = false
import serve from "./serve/_";
Vue.prototype.$http = serve
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

View File

@@ -0,0 +1,13 @@
<template>
<div class="about">
关于
</div>
</template>
<script>
export default {}
</script>
<style scoped>
</style>

View File

@@ -0,0 +1,43 @@
<template>
<div class="home">
<van-tabs v-model="active">
<van-tab title="包河Radio">
<Radio></Radio>
</van-tab>
<van-tab title="包河TV">
<Tv></Tv>
</van-tab>
<van-tab title="融媒直播">
<Live></Live>
</van-tab>
</van-tabs>
</div>
</template>
<script>
import Radio from "@/components/Radio"
import Tv from "@/components/Tv"
import Live from "@/components/Live"
export default {
data() {
return {
active: 0
}
},
created() {
},
methods: {
},
components: {
Radio,Tv,Live
}
}
</script>
<style scoped lang="less">
@import "~@page/Home.less";
</style>

View File

@@ -0,0 +1,59 @@
<template>
<div class="TvInfo">
<v-header></v-header>
<div class="content">
<hls-video :url="source"></hls-video>
<van-tabs v-model="active" line-width=" 0.533rem">
<van-tab title="频道">
<tv-item :is-show="true"></tv-item>
</van-tab>
<van-tab title="评论">
<v-comment :comment="Comment"></v-comment>
</van-tab>
</van-tabs>
</div>
</div>
</template>
<script>
export default {
name: "TvInfo",
data() {
return {
active: 0,
source: [],
Comment: []
}
},
// watch: {
// '$route' (newVal,oldVal) {
// console.log("路由参数发生改变: ", newVal,oldVal)
// this.source = [
// { type: "video/flv", src: newVal.query.url }
// ];
// console.log("2: ",this.source)
// }
// },
created() {
this.source = [
{ type: "video/flv", src: this.$route.query.url }
];
this.liveComment()
},
methods: {
async liveComment() {
let res = await this.$http.index.liveComment({
object_id: this.$route.query.id
});
this.Comment = res.list
console.log(res)
}
}
}
</script>
<style scoped lang="less">
</style>

View File

@@ -0,0 +1,130 @@
<template>
<div class="dibbling">
<v-header></v-header>
<hls-video :url="source" class="shipin"></hls-video>
<div class="title_b">
<div class="biaoti">{{news_data.title}}</div>
<div class="time_b">{{news_data.update_time}}</div>
<div class="tanx">
<div class="shouchang">
<img src="../../static/img/icon/collection-icon.png" alt="">
<span style="padding-right: 20px">收藏</span>
<img src="../../static/img/icon/give_thumbs-up.png" alt="">
<span>{{news_data.share_count}}</span>
</div>
<div class="yincang" @click="dakai">
<span>简介</span>
<img src="../../static/img/icon/open-close.png" alt="">
</div>
</div>
<div class="neirong" v-if="i">
{{news_data.des}}
</div>
</div>
<v-recommend :type_a="2" :datarecommend="drecommend"></v-recommend>
<v-comment :comment="Comment"></v-comment>
<v-opapp></v-opapp>
</div>
</template>
<script>
export default {
name: "dibbling",
data() {
return {
news_data:[],
source: [],
i:false,
drecommend:[],
nuwid:'',
Comment: []
}
},
created() {
let id = this.$route.query.id;
console.log(id)
this.nuwid=id
this.videoDetail()
},
methods: {
async videoDetail() {
let res = await this.$http.index.videoDetail({
id:this.nuwid
});
this.news_data=res.detail
this.source=res.detail.play_url
this.drecommend=res.recommend
this.Comment=res.comment
console.log(this.nuwid)
},
dakai(){
if (this.i==false){
this.i=true
}else {
this.i=false
}
}
},
}
</script>
<style scoped lang="less">
.shipin{
margin-top: 49px;
}
.title_b{
padding: 25px 11px 15px 11px;
.biaoti{
font-size: .48rem;
color: #333;
font-weight: 500;
letter-spacing: .01rem;
}
.time_b{
margin-top: .2rem;
font-size: .31rem;
color: #999;
}
.shouchang{
img{
width: 13px;
height: 13px;
}
span{
font-size: .32rem;
font-weight: 500;
color: #999;
vertical-align: middle;
}
}
.tanx{
display: flex;
align-items: center;
justify-content: space-between;
}
.yincang{
display: flex;
align-items: center;
span{
font-size: .32rem;
font-weight: 500;
color: #999;
vertical-align: middle;
padding-right: 10px;
}
img{
width: 9px;
height: 5px;
}
}
.neirong{
font-size: .37rem;
color: #999;
font-weight: 500;
margin-top: .26rem;
line-height: .62rem;
}
}
</style>

View File

@@ -0,0 +1,118 @@
<template>
<div class="interact">
<v-header></v-header>
<van-swipe @change="onChange" class="imgs">
<van-swipe-item v-for="(v,i) in news_data.image" :key="i" >
<img :src="v" alt="" >
</van-swipe-item>
<template #indicator>
<div class="custom-indicator">{{ current + 1 }}/2</div>
</template>
</van-swipe>
<div class="content_main">
<div class="con_top">
<img :src=" news_data.image_url" alt="" class="cont_img">
<div>
<div class="cont_top">{{news_data.nick_name}}</div>
<div class="cont_botm">{{news_data.update_time}}</div>
</div>
</div>
<div class="cont_botmtext">
{{news_data.content}}}
</div>
</div>
<v-comment :comment="commentnuw"></v-comment>
<v-opapp></v-opapp>
</div>
</template>
<script>
export default {
name: "interact",
data() {
return {
current: 0,
news_data:{},
commentnuw:[]
}
},
created() {
this.interactDetail()
},
methods: {
onChange(index) {
this.current = index;
},
async interactDetail() {
let res = await this.$http.index.interactDetail({
id:218
});
this.news_data=res.detail
this.commentnuw=res.comment
console.log(this.commentnuw)
},
},
}
</script>
<style scoped lang="less">
.custom-indicator {
width: 1.333rem;
height: 0.64rem;
position: absolute;
right: 5px;
bottom: 10px;
padding: 2px 5px;
font-size: 18px;
background: rgba(0, 0, 0, 0.6);
text-align: center;
line-height: 0.64rem;
border-radius: 0.32rem;
color: #ffffff;
}
.imgs{
margin-top: 50px;
width: 100%;
height: 400px;
}
.content_main{
margin-top: 30px;
padding-right: 0.3rem;
padding-left: 0.3rem;
margin-bottom: 0.587rem ;
}
.con_top{
display: flex;
}
.cont_img{
width: 0.96rem;
height: 0.96rem;
border-radius: 100%;
margin-right: 0.213rem;
}
.cont_top{
font-size: 0.373rem;
margin-bottom: 0.2rem;
}
.cont_botm {
font-size: 0.32rem;
color: #999999;
}
.cont_botmtext{
font-size: 0.427rem;
color: #333333;
margin-top: 0.373rem;
}
.back {
padding: 0 !important;
width: 100%;
height: 0.213rem;
background-color: #f3f3f3;
}
</style>

View File

@@ -0,0 +1,108 @@
<template>
<div class="news">
<v-header></v-header>
<div class="content">
<div class="news_title">{{news_data.title}}</div>
<div class="news_time">{{news_data.create_time}} 浏览量{{news_data.viewer_count}}</div>
<div class="news_content" v-html="news_data.content"></div>
<div class="news_img" @click="opentitle" v-if="i == true">
<img src="../../static/img/select-down.png" alt="">
</div>
<div class="news_op">打开APP阅读全文</div>
</div>
<uiff :datarecommend="drecommend" :type_a="1"></uiff>
<v-comment :comment="Comment"></v-comment>
</div>
</template>
<script>
import uiff from "../components/vrecommend"
export default {
components:{
"uiff":uiff
},
name: "news",
data() {
return {
news_data:[],
i:true,
drecommend:[],
Comment: []
}
},
beforeCreate() {
},
created() {
this.nuwid = this.$route.query.id
this.newsDetail()
},
methods: {
async newsDetail() {
let res = await this.$http.index.newsDetail({
id:519 /*this.nuwid*/
});
this.news_data=res.detail
this.drecommend=res.recommend
this.Comment=res.comment
console.log(this.news_data)
},
opentitle(){
this.i = false
document.querySelector(".news_content").style.height="auto";
}
},
}
</script>
<style scoped lang="less">
.content{
padding: 0.32rem;
.news_title{
font-size: 0.533rem;
letter-spacing: 0.013rem;
color: #333333;
padding-bottom: 0.507rem;
}
.news_time{
font-size: 0.32rem;
color: #999999;
}
.news_content{
width: 100%;
height: 15.08rem;
line-height: 0.667rem;
letter-spacing: 0.011rem;
color: #000000;
overflow: hidden;
Position:relative;
}
.news_img{
position: absolute;
bottom: -19PX;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0);
img{
width: 0.693rem;
height: 0.533rem;
}
}
.news_op{
margin-top: 0.96rem;
width: 9.36rem;
height: 1.173rem;
background-color: #d0302c;
border-radius: 0.107rem;
font-size: 0.373rem;
color: #ffffff;
text-align: center;
line-height: 1.173rem;
margin-bottom: 0.533rem;
}
}
</style>

View File

@@ -0,0 +1,24 @@
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ '@/page/dibbling')
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '@/page/About')
},
{
path: '/tvInfo',
name: 'TvInfo',
component: () => import(/* webpackChunkName: "tvInfo" */ '@/page/TvInfo')
}
]
})

View File

@@ -0,0 +1,7 @@
import http from "@/http";
import config from "@/config";
export default class BaseServe {
http = new http();
config = config;
}

View File

@@ -0,0 +1,8 @@
import BaseServe from "./BaseServe";
export default class CarServe extends BaseServe {
constructor() {
super();
}
}

View File

@@ -0,0 +1,60 @@
import BaseServe from "./BaseServe";
export default class IndexServe extends BaseServe {
constructor() {
super();
}
async radio (data = {}, headers = {}) {
return await this.http.get({
url: this.config.urlList.radio,
data: data,
headers: headers
})
}
async MenuList (data = {}, headers = {}) {
return await this.http.get({
url: this.config.urlList.MenuList,
data: data,
headers: headers
})
}
async channelList (data = {}, headers = {}) {
return await this.http.get({
url: this.config.urlList.channelList,
data: data,
headers: headers
})
}
async liveComment (data = {}, headers = {}) {
return await this.http.get({
url: this.config.urlList.liveComment,
data: data,
headers: headers
})
}
async newsDetail (data = {}, headers = {}) {
return await this.http.get({
url: this.config.urlList.newsDetail,
data: data,
headers: headers
})
}
async interactDetail (data = {}, headers = {}) {
return await this.http.get({
url: this.config.urlList.interactDetail,
data: data,
headers: headers
})
}
async videoDetail (data = {}, headers = {}) {
return await this.http.get({
url: this.config.urlList.videoDetail,
data: data,
headers: headers
})
}
}

View File

@@ -0,0 +1,7 @@
import IndexServe from "./IndexServe";
import CarServe from "./CarServe";
export default {
index: new IndexServe(),
car: new CarServe()
}