ajy/code/ajyApp/pages/device/deviceInfo/deviceInfo.nvue

<template>
	<view class="infoBox">
		<image class="content-bg" src="/static/device/devicebg.png" mode="scaleToFill"></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>
				<view class="headRight">
					<view class="userSwitchBtn" @click="goUserManage">
						<text class="userSwitchTxt">{{currentUserName || '选择用户'}}</text>
					</view>
					<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>
			</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="planSection" v-if="modeType != 0 && picMode == 1">
					<text class="planSectionTitle">选择方案</text>
					<view class="planCard" @click="showPlanDrawer">
						<view class="planCardLeft">
							<text class="planCardName">{{selectedPlan ? selectedPlan.name : '点击选择方案'}}</text>
							<text class="planCardDesc" v-if="selectedPlan && selectedPlan.description">{{selectedPlan.description}}</text>
						</view>
						<view class="planCardRight">
							<text class="planCardArrow">›</text>
						</view>
					</view>
				</view>

				<!-- 其他功能 -->
				<view class="otherSetting" v-if="modeType != 0 && picMode == 1">
					<text class="otherTxt">其他功能</text>
					<view class="func">
						<navigator v-if="modeType == 3" url="/pages/device/mycases/mycases" class="funcitem" hover-class="none">
							<image class="funcimg" src="/static/device/gongneng3.png" mode="aspectFill"></image>
							<text class="functxt">我的方案</text>
						</navigator>
						<navigator :url="`/pages/device/moxibustion/moxibustion?p1=${otherSetting.aijiuNum}&tab=p1`" class="funcitem" hover-class="none">
							<image class="funcimg" src="/static/device/gongneng1.png" mode="aspectFill"></image>
							<text class="functxt">艾灸余量</text>
						</navigator>
						<navigator :url="`/pages/device/moxibustion/moxibustion?p2=${otherSetting.lvxinNum}&tab=p2`" class="funcitem" hover-class="none">
							<image class="funcimg" src="/static/device/gongneng2.png" mode="aspectFill"></image>
							<text class="functxt">滤芯状态</text>
						</navigator>
						<navigator :url="`/pages/device/moxibustion/moxibustion?p3=${otherSetting.huishouNum}&tab=p3`" class="funcitem" hover-class="none">
							<image class="funcimg" src="/static/device/gongneng2.png" mode="aspectFill"></image>
							<text class="functxt">回收仓占用</text>
						</navigator>
					</view>
				</view>

				<!-- 自定义模式切换按钮 -->
				<view class="modeChange" v-if="modeType == 2">
					<view class="modeBtn" v-if="picMode===2" @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="isShowPlanDrawer" @closePop="isShowPlanDrawer=false">
			<text class="planDrawerTitle">选择方案</text>
			<text class="planDrawerSub">{{modelist[modeType]}} - 可用方案</text>
			<scroll-view class="planDrawerList" scroll-y="true">
				<view class="planDrawerEmpty" v-if="planList.length === 0 && !planLoading">
					<text class="planEmptyTxt">暂无可用方案</text>
				</view>
				<view class="planDrawerEmpty" v-if="planLoading">
					<text class="planEmptyTxt">加载中...</text>
				</view>
				<view class="planItem" :class="selectedPlan && selectedPlan.id === item.id ? 'planItemActive' : ''"
					v-for="(item, index) in planList" :key="index" @click="selectPlan(item)">
					<view class="planItemInfo">
						<text class="planItemName">{{item.name}}</text>
						<text class="planItemDesc" v-if="item.description">{{item.description}}</text>
						<view class="planItemMeta" v-if="item.steps || item.duration">
							<text class="planMetaTxt" v-if="item.steps">{{item.steps}}步</text>
							<text class="planMetaTxt" v-if="item.duration">约{{item.duration}}分钟</text>
						</view>
					</view>
					<view class="planItemCheck">
						<view class="checkboxCustom">
							<view v-if="selectedPlan && selectedPlan.id === item.id" class="checkboxCircle"></view>
						</view>
					</view>
				</view>
			</scroll-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" @click.stop="">
			<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 planMixin from './mixins/plan-mixin.js'
import { useBleStore } from '@/stores/ble'
import { CHAIR_ANGLE } from '@/utils/ble/constants.js'

export default {
	components: {
		customPopup,
		ayToast,
		lSliderRange
	},
	mixins: [bleMixin, audioMixin, acupointMixin, planMixin],
	data() {
		return {
			statusBarHeight: 44,
			deviceId: '',
			deviceName: '',
			rssi: '',
			isShowDrawer2: false,
			modelist: ['无艾灸模式', '专业模式', '自定义模式', '专家模式'],
			currentUserName: ''
		}
	},
	computed: {
		_bleStore() {
			return useBleStore()
		},
		subTime() {
			return this._bleStore.subTime
		},
		modeType: {
			get() { return this._bleStore.modeType },
			set(val) { this._bleStore.modeType = val }
		},
		chairAngle: {
			get() { return this._bleStore.chairAngle },
			set(val) { this._bleStore.chairAngle = val }
		},
		otherSetting() {
			return this._bleStore.otherSetting
		}
	},
	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.loadCurrentUser()
		this.initAudio()
		this.initBle()
	},
	onShow() {
		// 返回页面时刷新当前用户
		this.loadCurrentUser()
	},
	onUnload() {
		this.destroyAudio()
		this.disconnectBle()
	},
	methods: {
		goBack() {
			// 自定义模式下穴位编辑视图，返回切回设备视图而非真正返回页面
			if (this.modeType == 2 && this.picMode == 2) {
				this.picMode = 1
				return
			}
			uni.navigateBack()
		},
		/** 加载当前用户信息 */
		loadCurrentUser() {
			const user = uni.getStorageSync('current_manage_user')
			if (user && user.name) {
				this.currentUserName = user.name
			} else {
				this.currentUserName = ''
			}
		},
		/** 跳转用户管理页 */
		goUserManage() {
			uni.navigateTo({
				url: '/pages/device/userManage/userManage'
			})
		},
		// 座椅角度控制 - 来自 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) {
				this._bleStore.setChairAngle(level).catch(e => console.error('setAngle fail', e))
			}
		}
	}
}
</script>

<style>
.infoBox {
	flex: 1;
	position: relative;
}
.content-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 750rpx;
	height: 2000px;
}
.gradientBg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

}
.pageBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 750rpx;
	height: 1400rpx;
}
.pageContent {
	flex: 1;
	background-image: linear-gradient(to bottom, rgba(56,149,136,1), rgba(56,149,136,0.5));
	/* background-color: #333; */
}
.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;
}
.headRight {
	flex-direction: row;
	align-items: center;
}
.userSwitchBtn {
	background-color: rgba(255,255,255,0.2);
	border-radius: 24rpx;
	padding-left: 16rpx;
	padding-right: 16rpx;
	padding-top: 8rpx;
	padding-bottom: 8rpx;
	margin-right: 12rpx;
}
.userSwitchTxt {
	font-size: 24rpx;
	color: #FFFFFF;
}
.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;
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 30rpx;
}
.otherTxt {
	font-size: 28rpx;
	color: #9BA5B7;
	margin-bottom: 20rpx;
}
.func {
	flex-direction: row;
	flex-wrap: wrap;
}
.funcitem {
	width: 200rpx;
	align-items: center;
	margin-bottom: 20rpx;
}
.funcimg {
	width: 60rpx;
	height: 60rpx;
}
.functxt {
	font-size: 24rpx;
	color: #9BA5B7;
	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: space-between;
	align-self: stretch;
	padding: 0 80rpx;
}
.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;
}
/* 方案选择区 */
.planSection {
	margin-left: 38rpx;
	margin-right: 38rpx;
	margin-top: 20rpx;
	background-color: rgba(255,255,255,0.9);
	border-radius: 16rpx;
	padding: 30rpx;
}
.planSectionTitle {
	font-size: 28rpx;
	color: #9BA5B7;
	margin-bottom: 16rpx;
}
.planCard {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: #389588;
	border-radius: 40rpx;
	padding-left: 30rpx;
	padding-right: 24rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}
.planCardLeft {
	flex: 1;
}
.planCardName {
	font-size: 30rpx;
	font-weight: bold;
	color: #FFFFFF;
}
.planCardDesc {
	font-size: 22rpx;
	color: rgba(255,255,255,0.7);
	margin-top: 6rpx;
}
.planCardRight {
	width: 40rpx;
	align-items: center;
}
.planCardArrow {
	font-size: 40rpx;
	color: #FFFFFF;
}
/* 方案选择弹框 */
.planDrawerTitle {
	font-size: 32rpx;
	color: #545F71;
	font-weight: bold;
	text-align: center;
}
.planDrawerSub {
	font-size: 24rpx;
	color: #9BA5B7;
	text-align: center;
	margin-top: 8rpx;
	margin-bottom: 24rpx;
}
.planDrawerList {
	max-height: 600rpx;
}
.planDrawerEmpty {
	align-items: center;
	padding-top: 60rpx;
	padding-bottom: 60rpx;
}
.planEmptyTxt {
	font-size: 28rpx;
	color: #9BA5B7;
}
.planItem {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-left: 20rpx;
	padding-right: 20rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EEF1F4;
	border-radius: 12rpx;
}
.planItemActive {
	background-color: #F0F8F7;
}
.planItemInfo {
	flex: 1;
	margin-right: 20rpx;
}
.planItemName {
	font-size: 30rpx;
	color: #545F71;
	font-weight: bold;
}
.planItemDesc {
	font-size: 24rpx;
	color: #9BA5B7;
	margin-top: 8rpx;
}
.planItemMeta {
	flex-direction: row;
	margin-top: 10rpx;
}
.planMetaTxt {
	font-size: 22rpx;
	color: #389588;
	margin-right: 20rpx;
	background-color: rgba(56,149,136,0.1);
	padding-left: 12rpx;
	padding-right: 12rpx;
	padding-top: 4rpx;
	padding-bottom: 4rpx;
	border-radius: 8rpx;
}
.planItemCheck {
	width: 50rpx;
	align-items: center;
}
/* 弹框样式 */
.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>