|
|
@@ -0,0 +1,915 @@
|
|
|
+<template>
|
|
|
+ <view class="infoBox">
|
|
|
+ <!-- <image class="pageBg" src="/static/device/devicebg.png" mode="aspectFill"></image> -->
|
|
|
+ <view class="pageContent">
|
|
|
+ <view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
|
|
|
+ <view class="customHead">
|
|
|
+ <view class="back-wrap" @click="goBack">
|
|
|
+ <image src="/static/public/back.png" mode="aspectFill" class="backimg"></image>
|
|
|
+ </view>
|
|
|
+ <text class="customTitle">{{picMode===1?'我的艾灸椅':'穴位编辑'}}</text>
|
|
|
+ <navigator :url="'/pages/device/detail/detail?name='+deviceName+'&deviceId='+deviceId+'&rssi='+rssi"
|
|
|
+ class="plus">
|
|
|
+ <image v-if="picMode===1" src="/static/public/view-list.png" mode="aspectFill" class="menuimg"></image>
|
|
|
+ </navigator>
|
|
|
+ </view>
|
|
|
+ <scroll-view class="boxs" scroll-y="true">
|
|
|
+ <view class="proBox" v-if="picMode == 1">
|
|
|
+ <image class="proimg" src="/static/device/aijiuyi2.png" mode="aspectFill"></image>
|
|
|
+ <view class="pointbox" v-if="deviceStatus == 3">
|
|
|
+ <view class="pointContainer">
|
|
|
+ <text class="pointLabel" v-if="acupointList.length > 0 && curCaseIndex < acupointList.length">{{acupointList[curCaseIndex].name}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="prostatus">蓝牙{{linked?'已':'未'}}连接</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 座椅角度 -->
|
|
|
+ <view class="angleSection" v-if="picMode == 1">
|
|
|
+ <text class="angleLabel">座椅角度(拖动滑块调整)</text>
|
|
|
+ <l-sliderRange ref="slideRange" :anglenum="chairAngle" :min="90" :max="150" :step="15" @change="onSliderAngleChange"></l-sliderRange>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 模式选择 -->
|
|
|
+ <view class="controlMode" v-if="picMode == 1">
|
|
|
+ <text class="modetxt">选择模式</text>
|
|
|
+ <view class="modechange" @click="isShowDrawer2 = true">
|
|
|
+ <text class="modeName">{{modelist[modeType]}}</text>
|
|
|
+ <view class="changeBtn">
|
|
|
+ <text class="changetxt">切换</text>
|
|
|
+ <image class="changeinmg" src="/static/device/change.png" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 其他功能 -->
|
|
|
+ <view class="otherSetting" v-if="modeType != 0 && picMode == 1">
|
|
|
+ <text class="otherTxt">其他功能</text>
|
|
|
+ <view class="func">
|
|
|
+ <view class="funcitem">
|
|
|
+ <image class="funcimg" src="/static/device/gongneng1.png" mode="aspectFill"></image>
|
|
|
+ <text class="functxt">艾灸余量</text>
|
|
|
+ </view>
|
|
|
+ <view class="funcitem">
|
|
|
+ <image class="funcimg" src="/static/device/gongneng2.png" mode="aspectFill"></image>
|
|
|
+ <text class="functxt">滤芯状态</text>
|
|
|
+ </view>
|
|
|
+ <view class="funcitem">
|
|
|
+ <image class="funcimg" src="/static/device/gongneng2.png" mode="aspectFill"></image>
|
|
|
+ <text class="functxt">回收仓占用</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 自定义模式切换按钮 -->
|
|
|
+ <view class="modeChange" v-if="modeType == 2">
|
|
|
+ <view class="modeBtn" @click="picModeChange(1)" :class="picMode===1?'curBtn':''">
|
|
|
+ <text class="modeBtnTxt" :style="{color:picMode===1?'#545F71':'#fff'}">设备</text>
|
|
|
+ </view>
|
|
|
+ <view class="modeBtn" @click="picModeChange(2)" :class="picMode===2?'curBtn':''">
|
|
|
+ <text class="modeBtnTxt" :style="{color:picMode===2?'#545F71':'#fff'}">穴位</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 穴位图 -->
|
|
|
+ <view class="acupointPic" v-if="modeType == 2 && picMode == 2">
|
|
|
+ <image class="acupointBg" src="/static/device/persionbg.png" mode="aspectFill"></image>
|
|
|
+ <view class="acupoint" :class="index == acupointIndex ? 'curAcupoint':''" @click="showTimeDraw(index)"
|
|
|
+ v-for="(item,index) in acupointList" :key="index"
|
|
|
+ :style="{left:item.x+'rpx',top:item.y+'rpx'}">
|
|
|
+ </view>
|
|
|
+ <view class="tipsbox" v-if="acupointIndex != -1"
|
|
|
+ :style="{left:50+acupointList[acupointIndex].x+'rpx',top:-50+acupointList[acupointIndex].y+'rpx'}">
|
|
|
+ <text class="tipsTxt">{{acupointList[acupointIndex].name}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 白噪音 -->
|
|
|
+ <view class="musicCard" v-if="modeType == 0 && picMode == 1">
|
|
|
+ <text class="musicname">白噪音</text>
|
|
|
+ <view class="musliclist">
|
|
|
+ <text class="musictxt" :class="{'current':curAudioInx==inx}" v-for="(itm,inx) in audiolist"
|
|
|
+ :key="inx" @click="changeAudio(itm.url,inx)">{{itm.name}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 开始/暂停/停止 -->
|
|
|
+ <view class="startbox" v-if="modeType != 0">
|
|
|
+ <view class="stop" v-if="deviceStatus==0">
|
|
|
+ <image class="startbtn" @click="startDeviceEvt()" src="/static/device/start.png" mode="aspectFill"></image>
|
|
|
+ <text class="starttxt">开始</text>
|
|
|
+ </view>
|
|
|
+ <view class="hot" v-if="deviceStatus==1">
|
|
|
+ <view class="hotone">
|
|
|
+ <text class="hoting">{{ispreHot == false?'正在预热':'点火中'}}</text>
|
|
|
+ <text class="hotnum">{{hotPercentage}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="stopbox" @click="stopPreHot">
|
|
|
+ <image class="stopimg" src="/static/device/stop.png" mode="aspectFill"></image>
|
|
|
+ <text class="stoptext">结束</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="hot" v-if="deviceStatus==3 || deviceStatus==5">
|
|
|
+ <view class="hotone" v-if="deviceStatus==3">
|
|
|
+ <text class="hoting">正在艾灸</text>
|
|
|
+ <text class="hotnum">{{subTime}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="hotone" v-if="deviceStatus==5">
|
|
|
+ <text class="hoting">已暂停</text>
|
|
|
+ <text class="hotnum">{{subTime}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="pausebox" @click="stopAijiu">
|
|
|
+ <image class="pauseimg" :src="deviceStatus==5?'/static/device/start.png':'/static/device/pause.png'" mode="aspectFill"></image>
|
|
|
+ <text class="pausetxt">{{deviceStatus==5?'开始':'暂停'}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="stopbox" @click="stopPreHot">
|
|
|
+ <image class="stopimg" src="/static/device/stop.png" mode="aspectFill"></image>
|
|
|
+ <text class="stoptext">结束</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="hot" v-if="deviceStatus==4">
|
|
|
+ <view class="hotone">
|
|
|
+ <text class="hoting unfire">正在灭火中,请勿操作</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="empty" v-if="modeType == 0"></view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 音乐播放器 - 固定底部 -->
|
|
|
+ <view class="musicPlayerFixed" v-if="modeType == 0">
|
|
|
+ <view class="musicPlayer">
|
|
|
+ <view class="leftbox">
|
|
|
+ <image class="playerimg" :src="audiolist[curAudioInx].posterimg" mode="aspectFill"></image>
|
|
|
+ <view class="musicnamebox">
|
|
|
+ <text class="mtime">{{formatTime(currentTime)}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="rightbox">
|
|
|
+ <view class="playBtn" @click="playAudio">
|
|
|
+ <image class="playericon"
|
|
|
+ :src="ispause?'/static/device/playerbtn.png':'/static/device/pauseicon.png'"
|
|
|
+ mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <image @click="isShowDrawer3 = true" class="menuicon" src="/static/device/menubtn.png"
|
|
|
+ mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 异常提示弹框 -->
|
|
|
+ <customPopup :isShow="excepDrawer" @closePop="excepDrawer=false">
|
|
|
+ <text class="tip1 toptip" v-if="exceTxt == 1">检查到有异物</text>
|
|
|
+ <text class="tip1" v-if="exceTxt == 1">已暂停艾灸,清理后重试</text>
|
|
|
+ <text class="tip1 toptip" v-if="exceTxt == 2">艾条识别错误</text>
|
|
|
+ <text class="tip1" v-if="exceTxt == 2">已暂停艾灸,重新插入艾条后重试</text>
|
|
|
+ <text class="tip1 toptip" v-if="exceTxt == 3">上艾失败</text>
|
|
|
+ <text class="tip1 toptip" v-if="exceTxt == 4">点火失败</text>
|
|
|
+ <view class="confirmBtnWrap">
|
|
|
+ <text class="confirmBtn" @click="excepDrawer = false; exceTxt = 0;">我知道了</text>
|
|
|
+ </view>
|
|
|
+ </customPopup>
|
|
|
+
|
|
|
+ <!-- 确认结束弹框 -->
|
|
|
+ <customPopup :isShow="isShowConfirm" @closePop="isShowConfirm=false">
|
|
|
+ <text class="confirmTxt toptip">确认结束艾灸?</text>
|
|
|
+ <view class="confirmBtns">
|
|
|
+ <view class="cbtn" @click="isShowConfirm=false">
|
|
|
+ <text class="cbtnTxt">取消</text>
|
|
|
+ </view>
|
|
|
+ <view class="cbtn redbtn" @click="confirmStop">
|
|
|
+ <text class="cbtnTxt">结束</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </customPopup>
|
|
|
+
|
|
|
+ <!-- 模式选择弹框 -->
|
|
|
+ <customPopup :isShow="isShowDrawer2" @closePop="isShowDrawer2=false">
|
|
|
+ <view class="modeList">
|
|
|
+ <view class="modeItem" @click="changeMode(0)">
|
|
|
+ <text class="modeItemTxt">无艾灸模式</text>
|
|
|
+ <view class="checkboxCustom">
|
|
|
+ <view v-if="modeType == 0" class="checkboxCircle"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="modeItem" @click="changeMode(1)">
|
|
|
+ <text class="modeItemTxt">专业模式</text>
|
|
|
+ <view class="checkboxCustom">
|
|
|
+ <view v-if="modeType == 1" class="checkboxCircle"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="modeItem" @click="changeMode(2)">
|
|
|
+ <text class="modeItemTxt">自定义模式</text>
|
|
|
+ <view class="checkboxCustom">
|
|
|
+ <view v-if="modeType == 2" class="checkboxCircle"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="modeItem" @click="changeMode(3)">
|
|
|
+ <text class="modeItemTxt">专家模式</text>
|
|
|
+ <view class="checkboxCustom">
|
|
|
+ <view v-if="modeType == 3" class="checkboxCircle"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </customPopup>
|
|
|
+
|
|
|
+ <!-- 音乐弹窗 -->
|
|
|
+ <customPopup :isShow="isShowDrawer3" @closePop="isShowDrawer3=false">
|
|
|
+ <view class="audiolists">
|
|
|
+ <text class="playname">当前播放</text>
|
|
|
+ <view class="audiolist" :class="curAudioInx==inx?'curAudio':''" v-for="(itm,inx) in audiolist"
|
|
|
+ :key="inx" @click="changeAudio(itm.url,inx)">
|
|
|
+ <text class="audioTxt">{{itm.name}}</text>
|
|
|
+ <view class="signal-container" v-if="curAudioInx==inx">
|
|
|
+ <view class="signal-bar bar1"></view>
|
|
|
+ <view class="signal-bar bar2"></view>
|
|
|
+ <view class="signal-bar bar3"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </customPopup>
|
|
|
+
|
|
|
+ <!-- 时间配置器 -->
|
|
|
+ <customPopup :isShow="isShowTimeDrawer" @closePop="isShowTimeDrawer=false">
|
|
|
+ <text class="aijiuTime">选择灸疗时间</text>
|
|
|
+ <view class="timePickerRow">
|
|
|
+ <picker mode="multiSelector" :range="timeRange" @change="bindTimeChange">
|
|
|
+ <text class="timePickerTxt">{{selectedHour}}小时 {{selectedMinute}}分钟</text>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ <view class="timeBtns">
|
|
|
+ <view class="tbtn" @click="cancelAijiuTime(0)">
|
|
|
+ <text class="tbtnTxt">取消</text>
|
|
|
+ </view>
|
|
|
+ <view class="tbtn confirmBtn2" @click="cancelAijiuTime(1)">
|
|
|
+ <text class="tbtnTxt confirmBtn2Txt">确认</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </customPopup>
|
|
|
+
|
|
|
+ <!-- 重连弹框 -->
|
|
|
+ <view class="maskbg" v-if="reconnectDrawer">
|
|
|
+ <view class="maskbox">
|
|
|
+ <text class="maskTxt">蓝牙连接断开,第{{reconnectCount}}次重连中...</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <ay-toast ref="ayToast" />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import customPopup from '@/components/customPopup/customPopup.nvue'
|
|
|
+import ayToast from '@/components/ay-toast/ay-toast.nvue'
|
|
|
+import lSliderRange from '@/components/l-sliderRange/l-sliderRange.nvue'
|
|
|
+import bleMixin from './mixins/ble-mixin.js'
|
|
|
+import audioMixin from './mixins/audio-mixin.js'
|
|
|
+import acupointMixin from './mixins/acupoint-mixin.js'
|
|
|
+import bleManager, { CHAIR_ANGLE } from '@/utils/ble'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ customPopup,
|
|
|
+ ayToast,
|
|
|
+ lSliderRange
|
|
|
+ },
|
|
|
+ mixins: [bleMixin, audioMixin, acupointMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ statusBarHeight: 44,
|
|
|
+ deviceId: '',
|
|
|
+ deviceName: '',
|
|
|
+ rssi: '',
|
|
|
+ subTime: '00:00:00',
|
|
|
+ isShowDrawer2: false,
|
|
|
+ modeType: 0, // 0无艾灸 1专业 2自定义 3专家
|
|
|
+ modelist: ['无艾灸模式', '专业模式', '自定义模式', '专家模式'],
|
|
|
+ chairAngle: 90
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ const sysInfo = uni.getSystemInfoSync()
|
|
|
+ this.statusBarHeight = sysInfo.statusBarHeight || 44
|
|
|
+
|
|
|
+ this.deviceId = options.deviceId || ''
|
|
|
+ this.deviceName = options.name || ''
|
|
|
+ this.rssi = options.rssi || ''
|
|
|
+
|
|
|
+ // TODO: 后续接口确定后实现 - 下载穴位列表
|
|
|
+ // TODO: 后续接口确定后实现 - 下载专业模式推荐方案
|
|
|
+
|
|
|
+ this.initAudio()
|
|
|
+ this.initBle()
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ this.destroyAudio()
|
|
|
+ this.disconnectBle()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack()
|
|
|
+ },
|
|
|
+ // 座椅角度控制 - 来自 l-sliderRange 组件
|
|
|
+ onSliderAngleChange(val) {
|
|
|
+ this.chairAngle = val
|
|
|
+ this._sendAngleCommand()
|
|
|
+ },
|
|
|
+ _sendAngleCommand() {
|
|
|
+ const angleMap = {
|
|
|
+ 90: CHAIR_ANGLE.LEVEL_1,
|
|
|
+ 105: CHAIR_ANGLE.LEVEL_2,
|
|
|
+ 120: CHAIR_ANGLE.LEVEL_3,
|
|
|
+ 135: CHAIR_ANGLE.LEVEL_4,
|
|
|
+ 150: CHAIR_ANGLE.LEVEL_5
|
|
|
+ }
|
|
|
+ const level = angleMap[this.chairAngle] || CHAIR_ANGLE.LEVEL_1
|
|
|
+ if (this.linked) {
|
|
|
+ bleManager.setChairAngle(level).catch(e => console.error('setAngle fail', e))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.infoBox {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ background-image: linear-gradient(to bottom, rgba(56,149,136,1), rgba(56,149,136,0.5));
|
|
|
+}
|
|
|
+.pageBg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 1400rpx;
|
|
|
+}
|
|
|
+.pageContent {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.status-bar {
|
|
|
+ background-color: rgba(0,0,0,0);
|
|
|
+}
|
|
|
+.customHead {
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 88rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+
|
|
|
+}
|
|
|
+.back-wrap {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.backimg {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+}
|
|
|
+.customTitle {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+.plus {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.menuimg {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+}
|
|
|
+.boxs {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.proBox {
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+}
|
|
|
+.proimg {
|
|
|
+ width: 600rpx;
|
|
|
+ height: 500rpx;
|
|
|
+}
|
|
|
+.pointbox {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.pointContainer {
|
|
|
+ background-color: #389588;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ padding-right: 24rpx;
|
|
|
+ padding-top: 8rpx;
|
|
|
+ padding-bottom: 8rpx;
|
|
|
+}
|
|
|
+.pointLabel {
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+.prostatus {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+/* 座椅角度 */
|
|
|
+.angleSection {
|
|
|
+ padding-left: 38rpx;
|
|
|
+ padding-right: 38rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+}
|
|
|
+.angleLabel {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+}
|
|
|
+/* 模式选择 */
|
|
|
+.controlMode {
|
|
|
+ margin-left: 38rpx;
|
|
|
+ margin-right: 38rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ background-color: rgba(255,255,255,0.9);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+}
|
|
|
+.modetxt {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #9BA5B7;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+.modechange {
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #389588;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 20rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+}
|
|
|
+.modeName {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+.changeBtn {
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.changetxt {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #389588;
|
|
|
+ margin-right: 8rpx;
|
|
|
+}
|
|
|
+.changeinmg {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+}
|
|
|
+/* 其他功能 */
|
|
|
+.otherSetting {
|
|
|
+ margin-left: 38rpx;
|
|
|
+ margin-right: 38rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+}
|
|
|
+.otherTxt {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+.func {
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.funcitem {
|
|
|
+ width: 200rpx;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+.funcimg {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+}
|
|
|
+.functxt {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
+/* 自定义模式切换 */
|
|
|
+.modeChange {
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+.modeBtn {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background-color: #545F71;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+}
|
|
|
+.curBtn {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+}
|
|
|
+.modeBtnTxt {
|
|
|
+ font-size: 26rpx;
|
|
|
+}
|
|
|
+/* 穴位图 */
|
|
|
+.acupointPic {
|
|
|
+ position: relative;
|
|
|
+ margin-left: 38rpx;
|
|
|
+ margin-right: 38rpx;
|
|
|
+ height: 700rpx;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.acupointBg {
|
|
|
+ width: 300rpx;
|
|
|
+ height: 650rpx;
|
|
|
+}
|
|
|
+.acupoint {
|
|
|
+ position: absolute;
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ background-color: #389588;
|
|
|
+ border-radius: 20rpx;
|
|
|
+}
|
|
|
+.curAcupoint {
|
|
|
+ background-color: #F65252;
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ border-radius: 28rpx;
|
|
|
+}
|
|
|
+.tipsbox {
|
|
|
+ position: absolute;
|
|
|
+ background-color: #333;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding-left: 12rpx;
|
|
|
+ padding-right: 12rpx;
|
|
|
+ padding-top: 6rpx;
|
|
|
+ padding-bottom: 6rpx;
|
|
|
+}
|
|
|
+.tipsTxt {
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 22rpx;
|
|
|
+}
|
|
|
+/* 白噪音 */
|
|
|
+.musicCard {
|
|
|
+ margin-left: 38rpx;
|
|
|
+ margin-right: 38rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ background-color: rgba(255,255,255,0.9);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ height:100px;
|
|
|
+}
|
|
|
+.musicname {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #545F71;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+.musliclist {
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.musictxt {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #9BA5B7;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ padding-right: 24rpx;
|
|
|
+ padding-top: 12rpx;
|
|
|
+ padding-bottom: 12rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ background-color: #F5F7FA;
|
|
|
+}
|
|
|
+.current {
|
|
|
+ background-color: #389588;
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+.musicPlayerFixed {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+}
|
|
|
+.musicPlayer {
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background-color: rgba(255,255,255,0.5);
|
|
|
+ padding-left: 20rpx;
|
|
|
+ padding-right: 20rpx;
|
|
|
+ padding-top: 50px;
|
|
|
+ padding-bottom: 40px;
|
|
|
+ border-radius:16px 16px 0 0;
|
|
|
+}
|
|
|
+.leftbox {
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.playerimg {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+}
|
|
|
+.musicnamebox {
|
|
|
+ margin-left: 16rpx;
|
|
|
+}
|
|
|
+.mtime {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #545F71;
|
|
|
+}
|
|
|
+.rightbox {
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.playBtn {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.playericon {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+}
|
|
|
+.menuicon {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+}
|
|
|
+/* 开始/暂停/停止 */
|
|
|
+.startbox {
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+}
|
|
|
+.stop {
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.startbtn {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+}
|
|
|
+.starttxt {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
+.hot {
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.hotone {
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 40rpx;
|
|
|
+}
|
|
|
+.hoting {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+.unfire {
|
|
|
+ color: #F65252;
|
|
|
+}
|
|
|
+.hotnum {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #E0FFF8;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 8rpx;
|
|
|
+}
|
|
|
+.pausebox {
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 40rpx;
|
|
|
+}
|
|
|
+.pauseimg {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+}
|
|
|
+.pausetxt {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-top: 6rpx;
|
|
|
+}
|
|
|
+.stopbox {
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.stopimg {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+}
|
|
|
+.stoptext {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #F65252;
|
|
|
+ margin-top: 6rpx;
|
|
|
+}
|
|
|
+.empty {
|
|
|
+ height: 180rpx;
|
|
|
+}
|
|
|
+/* 弹框样式 */
|
|
|
+.tip1 {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #545F71;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+}
|
|
|
+.toptip {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.confirmBtnWrap {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.confirmBtn {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background-color: #389588;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ padding-left: 60rpx;
|
|
|
+ padding-right: 60rpx;
|
|
|
+ padding-top: 16rpx;
|
|
|
+ padding-bottom: 16rpx;
|
|
|
+}
|
|
|
+.confirmTxt {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #545F71;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.confirmBtns {
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 40rpx;
|
|
|
+}
|
|
|
+.cbtn {
|
|
|
+ width: 240rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ background-color: #F3F3F3;
|
|
|
+}
|
|
|
+.redbtn {
|
|
|
+ background-color: #F65252;
|
|
|
+}
|
|
|
+.cbtnTxt {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #545F71;
|
|
|
+}
|
|
|
+/* 模式选择弹框 */
|
|
|
+.modeList {
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
+.modeItem {
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 100rpx;
|
|
|
+ border-bottom-width: 1px;
|
|
|
+ border-bottom-style: solid;
|
|
|
+ border-bottom-color: #EEF1F4;
|
|
|
+}
|
|
|
+.modeItemTxt {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #545F71;
|
|
|
+}
|
|
|
+.checkboxCustom {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ border-width: 2px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: #389588;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.checkboxCircle {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: #389588;
|
|
|
+}
|
|
|
+/* 音乐弹窗 */
|
|
|
+.audiolists {
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
+.playname {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #9BA5B7;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+.audiolist {
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 90rpx;
|
|
|
+ padding-left: 10rpx;
|
|
|
+ padding-right: 10rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+}
|
|
|
+.curAudio {
|
|
|
+ background-color: #F0F8F7;
|
|
|
+}
|
|
|
+.audioTxt {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #545F71;
|
|
|
+}
|
|
|
+.signal-container {
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: flex-end;
|
|
|
+}
|
|
|
+.signal-bar {
|
|
|
+ width: 6rpx;
|
|
|
+ margin-left: 4rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ background-color: #389588;
|
|
|
+}
|
|
|
+.bar1 {
|
|
|
+ height: 16rpx;
|
|
|
+}
|
|
|
+.bar2 {
|
|
|
+ height: 24rpx;
|
|
|
+}
|
|
|
+.bar3 {
|
|
|
+ height: 32rpx;
|
|
|
+}
|
|
|
+/* 时间选择器 */
|
|
|
+.aijiuTime {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #545F71;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+}
|
|
|
+.timePickerRow {
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+}
|
|
|
+.timePickerTxt {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #545F71;
|
|
|
+}
|
|
|
+.timeBtns {
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 30rpx;
|
|
|
+}
|
|
|
+.tbtn {
|
|
|
+ width: 240rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ background-color: #F3F3F3;
|
|
|
+}
|
|
|
+.confirmBtn2 {
|
|
|
+ background-color: #389588;
|
|
|
+}
|
|
|
+.tbtnTxt {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #545F71;
|
|
|
+}
|
|
|
+.confirmBtn2Txt {
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+/* 重连遮罩 */
|
|
|
+.maskbg {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: rgba(0,0,0,0.6);
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.maskbox {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 40rpx;
|
|
|
+}
|
|
|
+.maskTxt {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #545F71;
|
|
|
+}
|
|
|
+</style>
|