|
|
|
|
@ -0,0 +1,254 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="bocaiTV-container">
|
|
|
|
|
<div class="contenttitle">
|
|
|
|
|
<span>伯才TV</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="contentContainer">
|
|
|
|
|
<div class="block bgf">
|
|
|
|
|
<div class="title p12 tc bbdot1">实时播放控制</div>
|
|
|
|
|
<div class="control p20 df">
|
|
|
|
|
<div class="dfcloumn">
|
|
|
|
|
<div class="iconfont icon-xiangzuo1" size="23" color></div>上一页
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pause dfcloumn">
|
|
|
|
|
<div class="iconfont icon-zanting" size="23" color></div>暂停
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dfcloumn">
|
|
|
|
|
<div class="iconfont icon-xiangyou" size="23" color></div>下一页
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="showList">
|
|
|
|
|
<div class="title">播放列表</div>
|
|
|
|
|
<div class="list bgf">
|
|
|
|
|
<a-radio-group v-model="radioVal" @change="onChange" class="radiogroup">
|
|
|
|
|
<!-- <div class='dib' wx:for='{{sex}}' wx:key='value'> -->
|
|
|
|
|
<a-radio value="1">
|
|
|
|
|
<div class="dib">{{'播放招工列表'}}</div>
|
|
|
|
|
</a-radio>
|
|
|
|
|
<a-radio value="2">
|
|
|
|
|
<div class="dib">{{'播放招生列表'}}</div>
|
|
|
|
|
</a-radio>
|
|
|
|
|
<a-radio value="3">
|
|
|
|
|
<div class="dib">{{'招生招工交替播放'}}</div>
|
|
|
|
|
</a-radio>
|
|
|
|
|
<!-- </div> -->
|
|
|
|
|
</a-radio-group>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="showList">
|
|
|
|
|
<div class="title">播放间隔时间</div>
|
|
|
|
|
<div class="content p26 df bd1">
|
|
|
|
|
<div class>
|
|
|
|
|
<i class="iconfont icon-jian" @click="changeTime('minus')"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class style="min-width:40px">
|
|
|
|
|
<span style="font-size:30px">{{second}}</span> 秒
|
|
|
|
|
</div>
|
|
|
|
|
<div class>
|
|
|
|
|
<i class="iconfont icon-jia1" @click="changeTime('add')"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="showList">
|
|
|
|
|
<div class="title">更换logo</div>
|
|
|
|
|
<div class="logocontent bgf bd1">
|
|
|
|
|
<!-- <div class="iconfont icon-bocailogo" style></div> -->
|
|
|
|
|
<div>
|
|
|
|
|
<svg class="icon" aria-hidden="true">
|
|
|
|
|
<use xlink:href="#icon-bocailogo" />
|
|
|
|
|
</svg>
|
|
|
|
|
</div>
|
|
|
|
|
<a class="" >更换图片</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dtBtn" style>
|
|
|
|
|
<button class>更新配置</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
// import ''
|
|
|
|
|
let sp = document.createElement('script')
|
|
|
|
|
sp.src = '//at.alicdn.com/t/c/font_3135652_27jwfazqvln.js'
|
|
|
|
|
document.body.appendChild(sp)
|
|
|
|
|
export default {
|
|
|
|
|
// 组件名称
|
|
|
|
|
name: '',
|
|
|
|
|
// 局部注册的组件
|
|
|
|
|
components: {},
|
|
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
|
|
props: {},
|
|
|
|
|
// 组件状态值
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
second: 8,
|
|
|
|
|
radioVal: 1,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 计算属性
|
|
|
|
|
computed: {},
|
|
|
|
|
// 侦听器
|
|
|
|
|
watch: {},
|
|
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
|
|
/**
|
|
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
|
|
*/
|
|
|
|
|
created() {},
|
|
|
|
|
/**
|
|
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
|
|
*/
|
|
|
|
|
mounted() {},
|
|
|
|
|
// 组件方法
|
|
|
|
|
methods: {
|
|
|
|
|
onChange(e) {
|
|
|
|
|
console.log(e)
|
|
|
|
|
},
|
|
|
|
|
changeTime(e) {
|
|
|
|
|
if (e == 'add') {
|
|
|
|
|
this.second += 1
|
|
|
|
|
} else {
|
|
|
|
|
this.second -= 1
|
|
|
|
|
}
|
|
|
|
|
if (this.second <= 2) {
|
|
|
|
|
this.$message.warning('间隔时间不能少于2秒')
|
|
|
|
|
this.second = 2
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
.icon {
|
|
|
|
|
width: 1em;
|
|
|
|
|
height: 1em;
|
|
|
|
|
vertical-align: -0.15em;
|
|
|
|
|
fill: currentColor;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.contentContainer {
|
|
|
|
|
width: 430px;
|
|
|
|
|
}
|
|
|
|
|
.block {
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
border: 1px solid #dddddd;
|
|
|
|
|
// box-shadow: 0px 4px 4px 0px #dedede;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.p12 {
|
|
|
|
|
padding: 12px;
|
|
|
|
|
}
|
|
|
|
|
.p26 {
|
|
|
|
|
padding: 26px;
|
|
|
|
|
}
|
|
|
|
|
.block .title {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
.df {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
}
|
|
|
|
|
.control > div {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.control > div .iconfont {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
}
|
|
|
|
|
.control .pause .iconfont {
|
|
|
|
|
font-size: 38px;
|
|
|
|
|
line-height: 38px;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
}
|
|
|
|
|
.dfcloumn {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.showList .title {
|
|
|
|
|
padding: 24px 0px 16px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
.radiogroup {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
border: 1px solid #dddddd;
|
|
|
|
|
|
|
|
|
|
label:not(:last-child) {
|
|
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
}
|
|
|
|
|
label {
|
|
|
|
|
display: block;
|
|
|
|
|
padding: 17px 24px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
.ant-radio {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.showList > div .iconfont {
|
|
|
|
|
font-size: 38px;
|
|
|
|
|
line-height: 38px;
|
|
|
|
|
}
|
|
|
|
|
.showList .content {
|
|
|
|
|
line-height: 38px;
|
|
|
|
|
}
|
|
|
|
|
.showList .content input {
|
|
|
|
|
width: 36px;
|
|
|
|
|
height: 36px;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
border: 1px solid #d9d9d9;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.logocontent {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
// padding: 12px 22px;
|
|
|
|
|
a{
|
|
|
|
|
line-height: 88px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
color: blue;
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
> div {
|
|
|
|
|
width: 176px;
|
|
|
|
|
height: 88px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background-color: #ddd;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.logocontent svg {
|
|
|
|
|
width: 124px;
|
|
|
|
|
height: 88px;
|
|
|
|
|
color: #ccc;
|
|
|
|
|
}
|
|
|
|
|
.dtBtn {
|
|
|
|
|
padding: 34px 0;
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
width: 92px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
background: #ff4400;
|
|
|
|
|
outline: none;
|
|
|
|
|
border: none;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.iconfont {
|
|
|
|
|
color: #999;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
