迁移广播通知
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="bigHorn">
|
<div class="AppBroadcast">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<img src="./img/bigHorn-bg.png" alt="">
|
<img src="./img/bigHorn-bg.png" alt="">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
@@ -30,7 +30,8 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "bigHorn",
|
name: "AppBroadcast",
|
||||||
|
appName: "广播通知",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
bannerList: [
|
bannerList: [
|
||||||
@@ -38,7 +39,7 @@ export default {
|
|||||||
title: '素材播放',
|
title: '素材播放',
|
||||||
text: '支持音频立即播发和定时播发',
|
text: '支持音频立即播发和定时播发',
|
||||||
imgUrl: require('./img/bigHorn-icon11@2x.png'),
|
imgUrl: require('./img/bigHorn-icon11@2x.png'),
|
||||||
path: '/pages/bigHorn/addPlay',
|
path: './addPlay',
|
||||||
bgClass: 'bg-67A3F4'
|
bgClass: 'bg-67A3F4'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -50,13 +51,13 @@ export default {
|
|||||||
{
|
{
|
||||||
title: '音频录制',
|
title: '音频录制',
|
||||||
text: '音频文件的录制',
|
text: '音频文件的录制',
|
||||||
path: '/pages/resourcesManage/addPlay?type=1',
|
path: '/apps/AppResourcesManage/addPlay?type=1',
|
||||||
imgUrl: require('./img/bigHorn-icon33@2x.png'),
|
imgUrl: require('./img/bigHorn-icon33@2x.png'),
|
||||||
bgClass: 'bg-E5B565'
|
bgClass: 'bg-E5B565'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '媒资管理',
|
title: '媒资管理',
|
||||||
path: '/pages/resourcesManage/resourcesManage',
|
path: '/apps/AppResourcesManage/AppResourcesManage',
|
||||||
text: '支持音频文件和录音内容添加',
|
text: '支持音频文件和录音内容添加',
|
||||||
imgUrl: require('./img/bigHorn-icon44@2x.png'),
|
imgUrl: require('./img/bigHorn-icon44@2x.png'),
|
||||||
bgClass: 'bg-F19661'
|
bgClass: 'bg-F19661'
|
||||||
@@ -75,7 +76,7 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.bigHorn {
|
.AppBroadcast {
|
||||||
.header {
|
.header {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@@ -88,7 +89,7 @@ export default {
|
|||||||
width: 686px;
|
width: 686px;
|
||||||
padding: 40px 0;
|
padding: 40px 0;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.06);
|
box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.06);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 210px;
|
top: 210px;
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="label">播发内容</div>
|
<div class="label">播发内容</div>
|
||||||
<div class="value" @click="linkTo('/pages/resourcesManage/resourcesManage?isChoose=1')">
|
<div class="value" @click="linkTo('/pages/AppResourcesManage/AppResourcesManage?isChoose=1')">
|
||||||
<span :class="formData.mediaName == '请选择' ? 'color-999' : ''">{{ formData.mediaName }}</span>
|
<span :class="formData.mediaName == '请选择' ? 'color-999' : ''">{{ formData.mediaName }}</span>
|
||||||
<img src="./img/right-icon.png" alt="">
|
<img src="./img/right-icon.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
@@ -82,11 +82,10 @@
|
|||||||
<u-select v-model="showSelect" :list="selectList" @confirm="confirm" label-name="dictName"
|
<u-select v-model="showSelect" :list="selectList" @confirm="confirm" label-name="dictName"
|
||||||
value-name="dictValue"></u-select>
|
value-name="dictValue"></u-select>
|
||||||
<u-picker v-model="showDateTime" mode="time" :params="params" @confirm="confirm"></u-picker>
|
<u-picker v-model="showDateTime" mode="time" :params="params" @confirm="confirm"></u-picker>
|
||||||
<AiBack></AiBack>
|
<AiBack/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import AiBack from "@/components/AiBack";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "addPlay",
|
name: "addPlay",
|
||||||
@@ -169,11 +168,6 @@ export default {
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
components: {
|
|
||||||
AiBack
|
|
||||||
},
|
|
||||||
|
|
||||||
onLoad() {
|
onLoad() {
|
||||||
uni.$on('choose', e => {
|
uni.$on('choose', e => {
|
||||||
console.log(e)
|
console.log(e)
|
||||||
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 795 B After Width: | Height: | Size: 795 B |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 269 B After Width: | Height: | Size: 269 B |
|
Before Width: | Height: | Size: 766 B After Width: | Height: | Size: 766 B |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -9,13 +9,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ai-empty v-if="!list.length"></ai-empty>
|
<AiEmpty v-if="!list.length"/>
|
||||||
<AiBack></AiBack>
|
<AiBack/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import AiEmpty from '@/components/AiEmpty/AiEmpty'
|
|
||||||
import AiBack from "@/components/AiBack";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "onlineList",
|
name: "onlineList",
|
||||||
@@ -25,11 +23,6 @@ export default {
|
|||||||
list: []
|
list: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
components: {
|
|
||||||
AiEmpty,
|
|
||||||
AiBack
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
getList() {
|
getList() {
|
||||||
this.$http.post("/app/appdlbquipment/getDlbDeviceList", null, {
|
this.$http.post("/app/appdlbquipment/getDlbDeviceList", null, {
|
||||||
@@ -10,13 +10,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ai-empty v-if="!list.length"></ai-empty>
|
<AiEmpty v-if="!list.length"></AiEmpty>
|
||||||
<AiBack></AiBack>
|
<AiBack/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import AiEmpty from '@/components/AiEmpty/AiEmpty'
|
|
||||||
import AiBack from "@/components/AiBack";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "onlinePlayList",
|
name: "onlinePlayList",
|
||||||
@@ -27,11 +25,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
components: {
|
|
||||||
AiEmpty,
|
|
||||||
AiBack
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
getList() {
|
getList() {
|
||||||
this.$http.post("/app/appdlbquipment/getDlbDeviceList", null, {
|
this.$http.post("/app/appdlbquipment/getDlbDeviceList", null, {
|
||||||
@@ -22,7 +22,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import AiBack from "@/components/AiBack";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "playList",
|
name: "playList",
|
||||||
@@ -32,10 +31,6 @@ export default {
|
|||||||
list: []
|
list: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
components: {
|
|
||||||
AiBack
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
getList() {
|
getList() {
|
||||||
this.$http.post("/app/appzyvideobroadcast/getBroadcastRecords", null, {
|
this.$http.post("/app/appzyvideobroadcast/getBroadcastRecords", null, {
|
||||||
@@ -38,15 +38,6 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "selectEquipment",
|
name: "selectEquipment",
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -16,13 +16,6 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "selectMp3",
|
name: "selectMp3",
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
methods: {},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -45,7 +38,6 @@ export default {
|
|||||||
|
|
||||||
.info {
|
.info {
|
||||||
width: calc(100% - 60px);
|
width: calc(100% - 60px);
|
||||||
padding-bottom: 16px;
|
|
||||||
padding: 34px 0;
|
padding: 34px 0;
|
||||||
line-height: 44px;
|
line-height: 44px;
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
@@ -1,12 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="resourcesManage">
|
<div class="AppResourcesManage">
|
||||||
<div class="tab">
|
<div class="tab">
|
||||||
<u-tabs :list="tab" :is-scroll="false" :current="currIndex" @change="change" height="96"
|
<u-tabs :list="tab" :is-scroll="false" :current="currIndex" @change="change" height="96"
|
||||||
:bar-style="barStyle"></u-tabs>
|
:bar-style="barStyle"></u-tabs>
|
||||||
</div>
|
</div>
|
||||||
<div class="record" v-if="currIndex == 0">
|
<div class="record" v-if="currIndex == 0">
|
||||||
<div class="item" v-for="(item, index) in list" :key="index" @click="choose(item)">
|
<div class="item" v-for="(item, index) in list" :key="index" @click="choose(item)">
|
||||||
<img src="./img/play-icon.png" alt="">
|
<img :src="`${$cdn}video/play-icon.png`" alt="">
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>{{ item.name ? item.name.split('.')[0] : '-' }}</p>
|
<p>{{ item.name ? item.name.split('.')[0] : '-' }}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -18,22 +18,21 @@
|
|||||||
<p>{{ item.content }}</p>
|
<p>{{ item.content }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img src="./img/add-icon.png" alt="" class="add-img" @click="add">
|
<img src="img/add-icon.png" alt="" class="add-img" @click="add">
|
||||||
<u-popup v-model="isShow" mode="bottom">
|
<u-popup v-model="isShow" mode="bottom">
|
||||||
<div class="audio">
|
<div class="audio">
|
||||||
<AiVideo :src="url" autoplay></AiVideo>
|
<AiVideo :src="url" autoplay></AiVideo>
|
||||||
<!-- <audio :src="url" ref="audio" :controls="true" :name="autioName" style="display: block;"></audio> -->
|
<!-- <audio :src="url" ref="audio" :controls="true" :name="autioName" style="display: block;"></audio> -->
|
||||||
</div>
|
</div>
|
||||||
</u-popup>
|
</u-popup>
|
||||||
<AiBack></AiBack>
|
<AiBack/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import AiVideo from '@/components/AiVideo'
|
|
||||||
import AiBack from "@/components/AiBack";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "resourcesManage",
|
name: "AppResourcesManage",
|
||||||
|
appName: "媒资管理",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tab: [{name: '音频素材'}, {name: '文本素材'}],
|
tab: [{name: '音频素材'}, {name: '文本素材'}],
|
||||||
@@ -49,16 +48,10 @@ export default {
|
|||||||
barStyle: {width: '98px', bottom: '-3px', left: '-38px'}
|
barStyle: {width: '98px', bottom: '-3px', left: '-38px'}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
components: {
|
|
||||||
AiBack,
|
|
||||||
AiVideo
|
|
||||||
},
|
|
||||||
|
|
||||||
onLoad(query) {
|
onLoad(query) {
|
||||||
this.isChoose = query.isChoose ? true : false
|
this.isChoose = !!query.isChoose
|
||||||
this.getList()
|
this.getList()
|
||||||
uni.$on('getList', e => {
|
uni.$on('getList', () => {
|
||||||
this.isMore = false
|
this.isMore = false
|
||||||
this.list = []
|
this.list = []
|
||||||
this.current = 1
|
this.current = 1
|
||||||
@@ -83,7 +76,7 @@ export default {
|
|||||||
|
|
||||||
add() {
|
add() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/resourcesManage/addPlay?type=${this.currIndex === 0 ? 1 : 3}`
|
url: `./addPlay?type=${this.currIndex === 0 ? 1 : 3}`
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -147,7 +140,7 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.resourcesManage {
|
.AppResourcesManage {
|
||||||
padding-bottom: 128px;
|
padding-bottom: 128px;
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
@@ -157,9 +150,9 @@ export default {
|
|||||||
|
|
||||||
.audio {
|
.audio {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 400 rpx;
|
height: 400px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 104 rpx 0 46 rpx;
|
padding: 104px 0 46px;
|
||||||
|
|
||||||
audio {
|
audio {
|
||||||
|
|
||||||
@@ -238,7 +231,6 @@ export default {
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #666;
|
color: #666;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
text-overflow: -o-ellipsis-lastline;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
@@ -6,7 +6,7 @@
|
|||||||
<div class="label">音频文件</div>
|
<div class="label">音频文件</div>
|
||||||
<div class="value" @click="toRecord">
|
<div class="value" @click="toRecord">
|
||||||
<span class="color-999" :style="{ color: file ? '#333' : '' }">{{ file ? '已选择' : '请选择' }}</span>
|
<span class="color-999" :style="{ color: file ? '#333' : '' }">{{ file ? '已选择' : '请选择' }}</span>
|
||||||
<img src="./img/right-img.png" alt="">
|
<img src="img/right-img.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -34,7 +34,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AiBack from "@/components/AiBack";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "addPlay",
|
name: "addPlay",
|
||||||
@@ -47,10 +46,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
components: {
|
|
||||||
AiBack
|
|
||||||
},
|
|
||||||
|
|
||||||
onLoad(query) {
|
onLoad(query) {
|
||||||
this.type = query.type
|
this.type = query.type
|
||||||
uni.$on('record', e => {
|
uni.$on('record', e => {
|
||||||
@@ -61,7 +56,7 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
toRecord() {
|
toRecord() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/resourcesManage/recording`
|
url: `./recording`
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 269 B After Width: | Height: | Size: 269 B |
|
Before Width: | Height: | Size: 269 B After Width: | Height: | Size: 269 B |
|
Before Width: | Height: | Size: 531 B After Width: | Height: | Size: 531 B |
|
Before Width: | Height: | Size: 577 B After Width: | Height: | Size: 577 B |
@@ -109,23 +109,20 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<span v-if="isRecording || isStop" @click="restart">重新开始</span>
|
<span v-if="isRecording || isStop" @click="restart">重新开始</span>
|
||||||
<img v-if="isStop" :src="!isPlay ? playImg : stopImg" @click="play">
|
<img v-if="isStop" :src="`${$cdn}video/${!isPlay ? 'play-icon' : 'stop-img'}.png`" @click="play">
|
||||||
<img v-else :src="isRecording ? stopImg : microphone" @click="record">
|
<img v-else :src="isRecording ? stopImg : microphone" @click="record">
|
||||||
<span v-if="isStop" @click="save">保存</span>
|
<span v-if="isStop" @click="save">保存</span>
|
||||||
</div>
|
</div>
|
||||||
<AiBack></AiBack>
|
<AiBack/>
|
||||||
<audio style="opacity: 0; visibility: hidden;" :src="audioSrc" @ended="onAudioEnd"></audio>
|
<audio style="opacity: 0; visibility: hidden;" :src="audioSrc" @ended="onAudioEnd"></audio>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AiBack from "@/components/AiBack";
|
|
||||||
import Recorder from 'recorder-core'
|
import Recorder from 'recorder-core'
|
||||||
import 'recorder-core/src/engine/mp3'
|
import 'recorder-core/src/engine/mp3'
|
||||||
import 'recorder-core/src/engine/mp3-engine'
|
import 'recorder-core/src/engine/mp3-engine'
|
||||||
import stopImg from './img/stop-img.png'
|
|
||||||
import microphone from './img/microphone.png'
|
import microphone from './img/microphone.png'
|
||||||
import playImg from './img/play-icon.png'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'recording',
|
name: 'recording',
|
||||||
@@ -134,8 +131,6 @@ export default {
|
|||||||
isRecording: false,
|
isRecording: false,
|
||||||
progress: 0,
|
progress: 0,
|
||||||
microphone,
|
microphone,
|
||||||
playImg,
|
|
||||||
stopImg,
|
|
||||||
isPlay: false,
|
isPlay: false,
|
||||||
isStop: false,
|
isStop: false,
|
||||||
blobFile: null,
|
blobFile: null,
|
||||||
@@ -149,11 +144,6 @@ export default {
|
|||||||
duration: 0
|
duration: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
components: {
|
|
||||||
AiBack
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.audio = document.querySelector('audio')
|
this.audio = document.querySelector('audio')
|
||||||
@@ -177,8 +167,6 @@ export default {
|
|||||||
this.recorder.start()
|
this.recorder.start()
|
||||||
this.isRecording = true
|
this.isRecording = true
|
||||||
this.timing()
|
this.timing()
|
||||||
}, (msg, isUserNotAllow) => {
|
|
||||||
// this.$u.toast(`${isUserNotAllow ? '请同意授权' : msg}`)
|
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.stop()
|
this.stop()
|
||||||
@@ -410,7 +398,7 @@ uni-page-body {
|
|||||||
top: 16px;
|
top: 16px;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
background: url(./img/top.png) repeat-x;
|
background: url(img/top.png) repeat-x;
|
||||||
background-size: auto 6px;
|
background-size: auto 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2,29 +2,22 @@
|
|||||||
<div class="talking">
|
<div class="talking">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<p>刘家河村委会、张家村…等<span>20</span>个设备</p>
|
<p>刘家河村委会、张家村…等<span>20</span>个设备</p>
|
||||||
<img src="./img/right-img.png" alt="">
|
<img src="img/right-img.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<!-- <p class="time">00:00:13</p> -->
|
<!-- <p class="time">00:00:13</p> -->
|
||||||
<img src="./img/body.png" alt="">
|
<img src="img/body.png" alt="">
|
||||||
<p class="text">请先选择设备</p>
|
<p class="text">请先选择设备</p>
|
||||||
<p class="text">再点击下方按钮开始喊话~</p>
|
<p class="text">再点击下方按钮开始喊话~</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<img src="./img/stop-img.png" alt="">
|
<img :src="`${$cdn}video/stop-img.png`" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "talking",
|
name: "talking"
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
methods: {},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -10,15 +10,13 @@
|
|||||||
<image
|
<image
|
||||||
class="audio-control audio-control-switch"
|
class="audio-control audio-control-switch"
|
||||||
@click="audio.paused?play():audio.pause()"
|
@click="audio.paused?play():audio.pause()"
|
||||||
:src="paused ? playImg : stopImg"/>
|
:src="`${$cdn}video/${paused ? 'play-icon' : 'stop-img'}.png`"/>
|
||||||
<p>{{ paused ? '点击播放' : '点击停止播放' }}</p>
|
<p>{{ paused ? '点击播放' : '点击停止播放' }}</p>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import stopImg from '../pages/resourcesManage/img/stop-img.png'
|
|
||||||
import playImg from '../pages/resourcesManage/img/play-icon.png'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
@@ -29,8 +27,6 @@ export default {
|
|||||||
paused: true, //是否处于暂停状态
|
paused: true, //是否处于暂停状态
|
||||||
loading: false, //是否处于读取状态
|
loading: false, //是否处于读取状态
|
||||||
seek: false,
|
seek: false,
|
||||||
stopImg,
|
|
||||||
playImg
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -122,7 +118,7 @@ export default {
|
|||||||
<style>
|
<style>
|
||||||
.imt-audio {
|
.imt-audio {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 20 upx;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audio-wrapper {
|
.audio-wrapper {
|
||||||
@@ -131,8 +127,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.audio-number {
|
.audio-number {
|
||||||
width: 120 upx;
|
width: 120px;
|
||||||
font-size: 24 upx;
|
font-size: 24px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -144,39 +140,29 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.audio-control-wrapper {
|
.audio-control-wrapper {
|
||||||
margin-top: 40 upx;
|
margin-top: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audio-control-wrapper p {
|
.audio-control-wrapper p {
|
||||||
color: #999999;
|
color: #999999;
|
||||||
font-size: 26 rpx;
|
font-size: 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audio-control-wrapper image {
|
.audio-control-wrapper image {
|
||||||
width: 128 rpx;
|
width: 128px;
|
||||||
height: 128 rpx;
|
height: 128px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audio-control {
|
.audio-control {
|
||||||
font-size: 32 upx;
|
font-size: 32px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audio-control-next {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.audio-control-switch {
|
.audio-control-switch {
|
||||||
font-size: 40 upx;
|
font-size: 40px;
|
||||||
margin: 0 100 upx;
|
margin: 0 100px;
|
||||||
}
|
|
||||||
|
|
||||||
.audioLoading {
|
|
||||||
animation: loading 2s;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes loading {
|
@keyframes loading {
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 3.6 KiB |