zmt
4 years ago
8 changed files with 861 additions and 1 deletions
-
6src/pages.json
-
4src/subpackage/device/js/device_api.js
-
849src/subpackage/device/pages/audio_manage/audio_manage.vue
-
3src/subpackage/device/pages/index/index.vue
-
BINsrc/subpackage/device/static/images/i_txt.png
-
BINsrc/subpackage/device/static/images/i_voice_1.png
-
BINsrc/subpackage/device/static/images/i_voice_2.png
-
BINsrc/subpackage/device/static/images/i_voice_3.png
@ -0,0 +1,849 @@ |
|||
<template> |
|||
<view class="switch-manage"> |
|||
<store-name></store-name> |
|||
<view class="sm-tit"> |
|||
<text>{{pageInfo.name || '-'}}</text> |
|||
<text>{{pageInfo.tips || ''}}</text> |
|||
</view> |
|||
<view class="sm-list"> |
|||
<view class="sl-item" v-for="(e, i) in deviceList" :key="i"> |
|||
<view class="si-top"> |
|||
<image mode="aspectFit" :src="getIcon()"></image> |
|||
<view class="st-right"> |
|||
<view class="sr-name">{{e.hardware_name || '-'}}</view> |
|||
<!-- 门闸没有状态查询 --> |
|||
<!-- 请求接口自定义字段设备状态 1->在线，0->离线 --> |
|||
<view class="sr-bot" v-if="pageInfo.id !=5"> |
|||
<view :class="[e.defineStatusCode == 1?'active':'']"> |
|||
<text>{{ e.defineStatusCode == 1 ? '设备在线' : e.defineStatusCode == 0?'设备离线' : '-' }}</text> |
|||
</view> |
|||
<image mode="aspectFit" src="/subpackage/device/static/images/refresh.png" |
|||
@click="refreshStatusBtn({switchInfo:e, index:i})"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<block v-if="pageInfo.name=='音响管理'"> |
|||
<view class="si-bottom"> |
|||
<view v-if="pageInfo.isOpen" @click="operateBtn({ switchInfo: e, status: 1 })"> |
|||
<image mode="aspectFit" :src="pageInfo.openIcon || ''"></image> |
|||
<view>{{pageInfo.openName || '-'}}</view> |
|||
</view> |
|||
<view v-if="pageInfo.isClose" @click="operateBtn({ switchInfo: e, status: 0 })"> |
|||
<image mode="aspectFit" :src="pageInfo.closeIcon || ''"></image> |
|||
<view>{{pageInfo.closeName || '-'}}</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<!-- <block v-else> |
|||
<view class="si-bottom" v-if="pageInfo.isOpen || pageInfo.isClose"> |
|||
<view v-if="pageInfo.isOpen" @click="operateBtn({ switchInfo: e, status: 1 })"> |
|||
<image mode="aspectFit" :src="pageInfo.openIcon || ''"></image> |
|||
<view>{{pageInfo.openName || '-'}}</view> |
|||
</view> |
|||
<view v-if="pageInfo.isClose" @click="operateBtn({ switchInfo: e, status: 0 })"> |
|||
<image mode="aspectFit" :src="pageInfo.closeIcon || ''"></image> |
|||
<view>{{pageInfo.closeName || '-'}}</view> |
|||
</view> |
|||
</view> |
|||
</block> --> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 音频控制 --> |
|||
<view class="voice_control_pad" v-if="voicePadConfig.showVoicePad"> |
|||
<!-- 文字转语音 --> |
|||
<view class="cover_bg" @click.stop="voicePadConfig.showVoicePad=false"> |
|||
</view> |
|||
<view class="v_box" v-if="voicePadConfig.step==0"> |
|||
<textarea value="" v-model="voicePadConfig.txt" placeholder="请输您要说的话，输入标点符号，智能语音效果更好哦！" /> |
|||
<view class="v_btns"> |
|||
<view class="voice_btn btn_white" @click="sendVoice(voicePadConfig.txt)">发送</view> |
|||
<view class="voice_btn btn_green" @click="listenVoice(voicePadConfig.txt)">试听</view> |
|||
</view> |
|||
</view> |
|||
<!-- 录音 --> |
|||
<view class="v_box" v-else> |
|||
<view class="voice_title">请说话</view> |
|||
<image class="voice_img" src="../../static/images/i_voice.png" :src="getVoiceIcon(voicePadConfig.step)" |
|||
:class="voicePadConfig.step==2?'voice_img_playing':''"></image> |
|||
<view class="voice_btn " @longpress="longPressHandle" @touchend="touchEndHandle" |
|||
hover-class="btn_active" v-if="voicePadConfig.step<3">按住说话</view> |
|||
<!-- <view class="voice_btn btn_active" v-else-if="voicePadConfig.step==2">按住说话</view> --> |
|||
<!-- hover-class --> |
|||
<view class="v_btns" v-else-if="voicePadConfig.step==3"> |
|||
<view class="voice_btn btn_white" @click="sendVoice()">发送</view> |
|||
<view class="voice_btn btn_green" @click="listenVoice()">听取录音</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
const recorderManager = uni.getRecorderManager(); |
|||
const innerAudioContext = uni.createInnerAudioContext(); |
|||
innerAudioContext.autoplay = true; |
|||
|
|||
import store_name from '../../components/store_name/store_name'; |
|||
import deviceServer from '../../js/device_server'; |
|||
import deviceApi from '../../js/device_api'; |
|||
const showArr = { |
|||
|
|||
's14': { |
|||
id: 14, |
|||
name: '音响管理', |
|||
isOpen: true, |
|||
isClose: true, |
|||
openIcon: '/subpackage/device/static/images/i_txt.png', |
|||
closeIcon: '/subpackage/device/static/images/i_voice.png', |
|||
openName: '文转音', |
|||
closeName: '语音', |
|||
hardware_type: 'AudioPlayer', |
|||
tips: "点击对应音响的麦克风可以进行说话，说话内容将通过音响播放。", |
|||
}, |
|||
|
|||
} |
|||
import { |
|||
mapState |
|||
} from 'vuex'; |
|||
import util from '../../../../utils/util'; |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
'store-name': store_name |
|||
}, |
|||
computed: { |
|||
...mapState({ |
|||
curStoreInfo: state => state.device.curStoreInfo, |
|||
}), |
|||
getVoiceIcon() { |
|||
return i => { |
|||
return `../../static/images/i_voice_${i}.png` |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
watch: { |
|||
curStoreInfo(newVal, oldVal) { |
|||
this.deviceList = []; |
|||
this.getDeviceList({ |
|||
stadium_id: newVal.id, |
|||
hardware_type: this.pageInfo.hardware_type |
|||
}) |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
pageInfo: {}, |
|||
deviceList: [], |
|||
voicePadConfig: { |
|||
showVoicePad: true, |
|||
step: 1, // 0,文字转语音 1 未录音, 2 录音中, 3 录音结束 |
|||
txt: "", |
|||
voicePath: "", |
|||
voiceUrl: "", |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
let self = this; |
|||
recorderManager.onStop(function(res) { |
|||
console.log('recorder stop' + JSON.stringify(res)); |
|||
self.voicePadConfig.voicePath = res.tempFilePath; |
|||
}); |
|||
|
|||
let _pageInfo = showArr[`s${options.sid}`] || {}; |
|||
this.pageInfo = _pageInfo; |
|||
uni.setNavigationBarTitle({ |
|||
title: _pageInfo.name |
|||
}); |
|||
|
|||
this.getDeviceList({ |
|||
stadium_id: this.curStoreInfo.id, |
|||
hardware_type: _pageInfo.hardware_type |
|||
}) |
|||
}, |
|||
methods: { |
|||
longPressHandle(e) { |
|||
console.log("长按开始..."); |
|||
this.voicePadConfig.step = 2 |
|||
console.log('开始录音'); |
|||
recorderManager.start({ |
|||
format: "wav" |
|||
}); |
|||
}, |
|||
touchEndHandle(e) { |
|||
console.log("触摸结束..."); |
|||
this.voicePadConfig.step = 3 |
|||
console.log('录音结束'); |
|||
recorderManager.stop(); |
|||
}, |
|||
//处理音响数据 |
|||
HandleVoiceOperate({ |
|||
switchInfo, |
|||
status |
|||
}) { |
|||
console.log(switchInfo, status); |
|||
if (status === 1) { //文字转语音 |
|||
console.log("文字转语音"); |
|||
this.voicePadConfig.showVoicePad = true |
|||
this.voicePadConfig.step = 0 |
|||
// this.voicePadConfig |
|||
} else { //语音发送 |
|||
console.log("语音发送"); |
|||
this.voicePadConfig.showVoicePad = true |
|||
this.voicePadConfig.step = 1 |
|||
} |
|||
}, |
|||
//发送语音到中控 |
|||
async sendVoice() { |
|||
let that = this |
|||
console.log(deviceApi.ORIGIN) |
|||
//文字转语音 |
|||
let _url = ""; //需上传给后台的语音地址 |
|||
if(this.voicePadConfig.step==0){ |
|||
let txt = this.voicePadConfig.txt |
|||
_url = `${deviceApi.ORIGIN}/ouxuanac/tts/textToVoice.wav?text=${txt}&voice_type=4&speed=-1&volume=10`; |
|||
} |
|||
//已录音 |
|||
if(this.voicePadConfig.step==3){ |
|||
console.log("88888",that.voicePadConfig.voicePath); |
|||
let e = await deviceServer.uploadFile({ |
|||
url: deviceApi.uploadAudio, |
|||
filePath: that.voicePadConfig.voicePath |
|||
}); |
|||
let _res = util.jsonPar(e.data); |
|||
if (_res.code == 0) { |
|||
console.log(123, _res) |
|||
that.voicePadConfig.voiceUrl = _res.data.url |
|||
console.log("上传成功:", that.voicePadConfig.voiceUrl); |
|||
_url = _res.data.url // 上传后地址 |
|||
} else { |
|||
console.error('上传录音失败--->', _res); |
|||
util.showNone(_res.message || '上传录音失败，请重试！') |
|||
return |
|||
} |
|||
} |
|||
//组装中控所需data |
|||
let _data = { |
|||
"device": this.curStoreInfo.device_name, |
|||
"data": { |
|||
"name": "audio-player", |
|||
"value": { |
|||
"url": _url |
|||
} |
|||
}, |
|||
"token": "f0d5c19b-b87e-11eb-bc7d-5254005df464" |
|||
} |
|||
//发送命令到中控 |
|||
this.operateReq({ |
|||
data: _data |
|||
}) |
|||
|
|||
}, |
|||
//试听语音 TODO |
|||
async listenVoice() { |
|||
let txt = this.voicePadConfig.txt |
|||
console.log('播放录音', txt); |
|||
if(this.voicePadConfig.step==0){ |
|||
//需要将语音下载到本地,然后播放 |
|||
let url =`${deviceApi.ORIGIN}/ouxuanac/tts/textToVoice.wav?text=${txt}&voice_type=4&speed=-1&volume=10`; |
|||
let updated_url = await this.getDownloadUrl(url) |
|||
innerAudioContext.src = updated_url |
|||
} |
|||
if(this.voicePadConfig.step==3){ |
|||
innerAudioContext.src = this.voicePadConfig.voicePath; |
|||
} |
|||
if(innerAudioContext.src)innerAudioContext.play(); |
|||
}, |
|||
//TODO |
|||
getDownloadUrl(url) { |
|||
console.log('下载录音'); |
|||
return new Promise((rs,rj)=>{ |
|||
|
|||
}) |
|||
return "下载录音" |
|||
}, |
|||
|
|||
getDeviceList({ |
|||
stadium_id, |
|||
hardware_type, |
|||
limit = 100, |
|||
page = 1 |
|||
}) { |
|||
util.showLoad(); |
|||
deviceServer.get({ |
|||
url: deviceApi.hardwareList, |
|||
data: { |
|||
'filter[hardware_type]': hardware_type, |
|||
'filter[stadium_id]': stadium_id, |
|||
'limit': limit, |
|||
'page': page, |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
let _list = res.list || []; |
|||
this.deviceList = _list; |
|||
console.log(res) |
|||
}) |
|||
.catch(util.hideLoad) |
|||
}, |
|||
// 按钮操作， status 0 -> 关（左）， 1 -> 开（右） |
|||
operateBtn: util.debounce(function({ |
|||
switchInfo, |
|||
status |
|||
}) { |
|||
if (switchInfo.hardware_type === "AudioPlayer") return this.HandleVoiceOperate({ |
|||
switchInfo, |
|||
status |
|||
}); //单独处理音响操作0704 |
|||
|
|||
let _data = this.getOperateReqData({ |
|||
switchInfo, |
|||
status |
|||
}) |
|||
//针对门禁没有关按钮发两条命令->开&关 20201224 后端： 直接发两条 关的那条这里填5 然后你那边不用管返回 |
|||
if (switchInfo.hardware_type === 'AccessControl' && status == 1) { |
|||
this.operateReq({ |
|||
data: this.getOperateReqData({ |
|||
switchInfo, |
|||
status: 0 |
|||
}), |
|||
isTip: false, |
|||
isLoad: false |
|||
}); |
|||
} |
|||
|
|||
this.operateReq({ |
|||
data: _data |
|||
}); |
|||
|
|||
}, 300, 300), |
|||
|
|||
// 获取接口参数结构 |
|||
getOperateReqData({ |
|||
switchInfo, |
|||
status |
|||
}) { |
|||
let { |
|||
curStoreInfo |
|||
} = this; |
|||
|
|||
let _query = switchInfo.hardware_type === 'GateControl' ? |
|||
this.getGateQuery({ |
|||
switchInfo, |
|||
status |
|||
}) : |
|||
this.getSwitchQuery({ |
|||
switchInfo, |
|||
status |
|||
}); |
|||
let _data = { |
|||
device: curStoreInfo.device_name, // 中控名, |
|||
data: _query, // 后端数据结构， 参考src\subpackage\device\js\ouxuanac.md |
|||
}; |
|||
|
|||
//针对门禁没有关按钮发两条命令->开&关 20201224 后端： 直接发两条 关的那条这里填5 然后你那边不用管返回 |
|||
if (switchInfo.hardware_type === 'AccessControl' && status == 0) _data['delay'] = '5'; |
|||
|
|||
return _data; |
|||
}, |
|||
// 操作接口请求 |
|||
operateReq({ |
|||
data, |
|||
isTip = true, |
|||
isLoad = true |
|||
}) { |
|||
let that = this |
|||
if (isLoad) util.showLoad(); |
|||
deviceServer.post({ |
|||
url: deviceApi.ouxuanac, |
|||
data: data, |
|||
isDefaultGet: false, |
|||
}) |
|||
.then(res => { |
|||
if (isLoad) util.hideLoad(); |
|||
if (res.data.code == 0) { |
|||
if (isTip) util.showNone(res.data.message || '操作成功！'); |
|||
that.voicePadConfig.showVoicePad = false; //操作成功后关闭voicePad |
|||
} else { |
|||
if (isTip) util.showNone(res.data.message || '操作失败！'); |
|||
} |
|||
}) |
|||
.catch(err => { |
|||
if (isLoad) util.hideLoad() |
|||
}) |
|||
}, |
|||
|
|||
// 门闸数据结构 // 门闸数据结构不统一 |
|||
getGateQuery({ |
|||
switchInfo, |
|||
status |
|||
}) { |
|||
let { |
|||
enter_id, |
|||
leave_id, |
|||
hardware_net_addr |
|||
} = switchInfo; |
|||
// 进出控制ID |进入-> enter_id 离开-> leave_id| |
|||
let _cid = status === 1 ? enter_id : |
|||
status === 0 ? leave_id : ''; |
|||
return { |
|||
name: 'gate', |
|||
value: { |
|||
tcp: hardware_net_addr + '', |
|||
cid: _cid + '' |
|||
}, |
|||
is_delay: true, |
|||
queue_group: 'gate' |
|||
} |
|||
}, |
|||
// |
|||
refreshStatusBtn: util.debounce(function({ |
|||
switchInfo, |
|||
index |
|||
}) { |
|||
this.getStatusReq({ |
|||
data: this.getSwitchStatusQuery(switchInfo), |
|||
index, |
|||
}) |
|||
}, 300, 300), |
|||
// 获取设备状态 |
|||
getStatusReq({ |
|||
data, |
|||
index |
|||
}) { |
|||
let _deviceList = this.deviceList.slice(); |
|||
util.showLoad(); |
|||
deviceServer.post({ |
|||
url: deviceApi.ouxuanac, |
|||
data: data, |
|||
isDefaultGet: false, |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
let _data = res.data || {}; |
|||
console.log(this.changeLowerCase(_data.data)) |
|||
if (_data.code == 504 || this.changeLowerCase(_data.data).indexOf('timeout') != -1) { |
|||
_deviceList[index]['defineStatusCode'] = 0; |
|||
|
|||
} else if (_data.code == 0 && this.changeLowerCase(_data.data).indexOf('timeout') == -1) { |
|||
_deviceList[index]['defineStatusCode'] = 1; |
|||
} else { |
|||
util.showNone(_data.message || '操作失败！'); |
|||
} |
|||
this.deviceList = _deviceList; |
|||
// if(res.data.code == 0){ |
|||
// if(isTip)util.showNone(res.data.message || '操作成功！'); |
|||
// }else{ |
|||
// if(isTip)util.showNone(res.data.message || '操作失败！'); |
|||
// } |
|||
}) |
|||
.catch(util.hideLoad) |
|||
}, |
|||
|
|||
// 咖啡机和门闸暂时没有状态 |
|||
// 设备状态请求参数数据结构 |
|||
getSwitchStatusQuery(switchInfo) { |
|||
let { |
|||
curStoreInfo |
|||
} = this; |
|||
let { |
|||
hardware_connect_method, |
|||
hardware_type, |
|||
hardware_id, |
|||
node_id, |
|||
hardware_net_addr |
|||
} = switchInfo; |
|||
|
|||
|
|||
const _query = { |
|||
name: this.getStatusQueryName(switchInfo), |
|||
value: { |
|||
id: hardware_id + '', |
|||
} // value 内值全为String |
|||
}; |
|||
|
|||
if (this.changeLowerCase(hardware_connect_method) === 'tcp') _query.value['tcp'] = hardware_net_addr + ''; |
|||
let _flag = this.changeLowerCase(hardware_connect_method) === 'serialport485' || this.changeLowerCase( |
|||
hardware_connect_method) === 'tcp'; |
|||
if (_flag) { |
|||
if (hardware_type === 'Air') { // 空调开关状态 key为 op |
|||
_query.value['op'] = 'status' |
|||
_query['name'] = this.getAirQueryName(switchInfo) |
|||
} else { |
|||
_query.value['p'] = node_id + ''; // 硬件子id |
|||
// postData.value['o'] = this.getRelayStatus(status); // 开关状态 |
|||
} |
|||
} |
|||
|
|||
return { |
|||
device: curStoreInfo.device_name, // 中控名, |
|||
data: _query, // 后端数据结构， 参考src\subpackage\device\js\ouxuanac.md |
|||
} |
|||
|
|||
// this.getStatusReq({ |
|||
// index, |
|||
// data: { |
|||
// device: curStoreInfo.device_name, // 中控名, |
|||
// data: _query, // 后端数据结构， 参考src\subpackage\device\js\ouxuanac.md |
|||
// } |
|||
// }) |
|||
}, |
|||
// switchInfo -> 当前开关信息 |
|||
// status -> 开关状态 0 -> 关（右）， 1 -> 开（左） |
|||
// 数据结构参考 src\subpackage\device\js\ouxuanac.md |
|||
// 空调开关数据结构独立判断处理 hardware_type === 'Air' |
|||
getSwitchQuery({ |
|||
switchInfo, |
|||
status |
|||
}) { |
|||
let { |
|||
hardware_connect_method, |
|||
hardware_type, |
|||
hardware_id, |
|||
node_id, |
|||
hardware_net_addr |
|||
} = switchInfo; |
|||
|
|||
const postData = { |
|||
name: this.getQueryName(switchInfo), |
|||
value: { |
|||
id: hardware_id + '', |
|||
} // value 内值全为String |
|||
}; |
|||
|
|||
if (this.changeLowerCase(hardware_connect_method) === 'gpio') postData.value['status'] = this |
|||
.getRelayStatus(status); |
|||
|
|||
// tcp 连接需要 hardware_net_addr |
|||
if (this.changeLowerCase(hardware_connect_method) === 'tcp') postData.value['tcp'] = hardware_net_addr + |
|||
''; |
|||
let _flag = this.changeLowerCase(hardware_connect_method) === 'serialport485' || this.changeLowerCase( |
|||
hardware_connect_method) === 'tcp'; |
|||
if (_flag) { |
|||
if (hardware_type === 'Air') { // 空调开关状态 key为 op |
|||
postData.value['op'] = this.getAirRelayStatus(status); |
|||
postData['name'] = this.getAirQueryName(switchInfo) |
|||
} else { |
|||
// 空调设备不需要以下两个字段 |
|||
postData.value['p'] = node_id + ''; // 硬件子id |
|||
postData.value['o'] = this.getRelayStatus(status); // 开关状态 |
|||
} |
|||
} |
|||
return postData; |
|||
}, |
|||
changeLowerCase(str) { |
|||
return str.toString().toLocaleLowerCase(); |
|||
}, |
|||
// 常规开关状态 |
|||
// Low = "low", // 低电位，为开启 |
|||
// High = "high", // 高电位， 为关闭 |
|||
getRelayStatus(status) { |
|||
return ['high', 'low'][status] || '' |
|||
}, |
|||
|
|||
// 空调状态 |
|||
// status = "status", |
|||
// on = "on", |
|||
// off = "off", |
|||
getAirRelayStatus(status) { |
|||
return ['off', 'on'][status] || '' |
|||
}, |
|||
|
|||
// 非空调获取状态name |
|||
getStatusQueryName(switchInfo) { |
|||
let { |
|||
hardware_connect_method |
|||
} = switchInfo; |
|||
let _obj = { |
|||
'Gpio': 'get-rpio', // 全设备 |
|||
'SerialPort485': 'zzio404d-gpio-status', |
|||
'Tcp': 'zzio404d-gpio-status-tcp', |
|||
}; |
|||
|
|||
return _obj[hardware_connect_method] || '' |
|||
}, |
|||
|
|||
// 非空调获取设置name |
|||
getQueryName(switchInfo) { |
|||
let { |
|||
hardware_connect_method |
|||
} = switchInfo; |
|||
let _obj = { |
|||
'Gpio': 'set-rpio', // 全设备 |
|||
'SerialPort485': 'zzio404d-gpio', |
|||
'Tcp': 'zzio404d-gpio-tcp', |
|||
}; |
|||
|
|||
return _obj[hardware_connect_method] || '' |
|||
}, |
|||
// 空调name获取 |
|||
getAirQueryName(switchInfo) { |
|||
let { |
|||
hardware_connect_method, |
|||
hardware_model |
|||
} = switchInfo; |
|||
let _flag = this.changeLowerCase(hardware_connect_method) === 'tcp' && this.changeLowerCase( |
|||
hardware_model) === 'jianda'; |
|||
if (_flag) return 'ray-air-rs-tcp'; |
|||
let _obj = { |
|||
'acmelec': 'acmelec', |
|||
'zhongnan': 'zhongnan', |
|||
'jianda': 'ray-air-rs' |
|||
}; |
|||
return _obj[this.changeLowerCase(hardware_model)] || ''; |
|||
}, |
|||
|
|||
getIcon() { |
|||
let { |
|||
pageInfo |
|||
} = this; |
|||
if (!pageInfo.id) return ''; |
|||
return `/subpackage/device/static/images/devices/${pageInfo.id}.png` |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
|
|||
.sm-tit { |
|||
padding-left: 40upx; |
|||
padding-top: 52upx; |
|||
padding-bottom: 30upx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-wrap: nowrap; |
|||
|
|||
text:first-child { |
|||
line-height: 60upx; |
|||
font-size: 44upx; |
|||
font-weight: 500; |
|||
color: #333; |
|||
} |
|||
|
|||
text:last-child { |
|||
width: 466rpx; |
|||
color: #9C9C9F; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.sm-list { |
|||
padding: 0 32upx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
|
|||
.sl-item { |
|||
margin-bottom: 30upx; |
|||
width: 328upx; |
|||
border-radius: 10upx; |
|||
background-color: #fff; |
|||
|
|||
.si-top { |
|||
padding: 20upx 20upx 30upx; |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
|
|||
>image { |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
margin-right: 20upx; |
|||
width: 80upx; |
|||
height: 80upx; |
|||
} |
|||
|
|||
.st-right { |
|||
flex-grow: 1; |
|||
|
|||
>.sr-name { |
|||
margin-bottom: 8upx; |
|||
line-height: 44upx; |
|||
font-size: 32upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
} |
|||
|
|||
.sr-bot { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
>view { |
|||
margin-right: 8upx; |
|||
padding: 0 12upx; |
|||
font-size: 20upx; |
|||
line-height: 28upx; |
|||
border-radius: 28upx; |
|||
border: 2upx solid #9A9A9D; |
|||
color: #9A9A9D; |
|||
|
|||
&::before { |
|||
content: ''; |
|||
margin-right: 12upx; |
|||
margin-top: -4upx; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
width: 8upx; |
|||
height: 8upx; |
|||
border-radius: 50%; |
|||
background-color: #9A9A9D; |
|||
} |
|||
|
|||
&.active { |
|||
color: #333333; |
|||
|
|||
&::before { |
|||
background-color: $themeColor; |
|||
} |
|||
} |
|||
} |
|||
|
|||
>image { |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
width: 32upx; |
|||
height: 32upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.si-bottom { |
|||
padding-top: 30upx; |
|||
padding-bottom: 30upx; |
|||
display: flex; |
|||
justify-content: center; |
|||
border-top: 2upx solid #F2F2F7; |
|||
|
|||
>view { |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
width: 50%; |
|||
|
|||
>image { |
|||
display: block; |
|||
margin: 0 auto 20upx; |
|||
width: 100upx; |
|||
height: 100upx; |
|||
} |
|||
|
|||
>view { |
|||
font-size: 24upx; |
|||
line-height: 34upx; |
|||
text-align: center; |
|||
color: #9a9a9d; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//语音控制板 |
|||
.voice_control_pad { |
|||
position: fixed; |
|||
top: 0; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 1; |
|||
|
|||
.cover_bg { |
|||
position: fixed; |
|||
top: 0; |
|||
background: rgba($color: #000000, $alpha: .3); |
|||
z-index: 2; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.v_box { |
|||
z-index: 3; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
border-radius: 5rpx; |
|||
width: 620rpx; |
|||
height: 550rpx; |
|||
background-color: white; |
|||
|
|||
textarea { |
|||
margin-top: 50rpx; |
|||
width: 560rpx; |
|||
height: 260rpx; |
|||
} |
|||
|
|||
.voice_title { |
|||
max-width: 560rpx; |
|||
color: #1A1A1A; |
|||
font-size: 32rpx; |
|||
font-weight: 800; |
|||
margin-top: 68rpx; |
|||
} |
|||
|
|||
.voice_img { |
|||
margin-top: 70rpx; |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
} |
|||
|
|||
.voice_img_playing { |
|||
width: 206rpx; |
|||
height: 100rpx; |
|||
} |
|||
|
|||
.voice_btn { |
|||
margin-top: 100rpx; |
|||
width: 392rpx; |
|||
height: 112rpx; |
|||
background: #009874; |
|||
border-radius: 5rpx; |
|||
text-align: center; |
|||
line-height: 112rpx; |
|||
color: white; |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.btn_active { |
|||
color: black; |
|||
background-color: rgba($color: #000000, $alpha: .4); |
|||
} |
|||
|
|||
.btn_white { |
|||
width: 204rpx; |
|||
height: 88rpx; |
|||
background-color: white; |
|||
color: #009874; |
|||
border: 1rpx solid #009874; |
|||
line-height: 88rpx; |
|||
} |
|||
|
|||
.btn_green { |
|||
width: 204rpx; |
|||
height: 88rpx; |
|||
background-color: #009874; |
|||
color: white; |
|||
line-height: 88rpx; |
|||
} |
|||
|
|||
.v_btns { |
|||
width: 470rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 200 | Height: 200 | Size: 11 KiB |
|
After Width: 200 | Height: 200 | Size: 9.9 KiB |
|
After Width: 103 | Height: 50 | Size: 2.9 KiB |
|
After Width: 102 | Height: 100 | Size: 2.4 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue