1
0
forked from dyf/APP
Files
APP/pages/6107/BJQ6107.vue

1622 lines
34 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="content contentBg">
<view class="eq">
<view class="leftImg" @click.stop="previewImg(device.devicePic?device.devicePic:formData.img)">
<image class="img" :src="device.devicePic?device.devicePic:formData.img" mode="aspectFit"></image>
</view>
<view class="rightTxt">
<view class="row">
<image class="img" src="/static/images/6155/DeviceDetail/battry.png" mode="aspectFit"></image>
<view class="txt">
<view class="bigTxt">{{formData.sta_PowerPercent}}%</view>
<view class="smallTxt">电量</view>
</view>
</view>
<view class="row">
<image class="img" src="/static/images/6155/DeviceDetail/time.png" mode="aspectFit"></image>
<view class="txt">
<view class="bigTxt">{{formData.sta_charge?dic.sta_charge[formData.sta_charge+'']:"未充电" }}
</view>
<view class="smallTxt">设备状态</view>
</view>
</view>
</view>
</view>
<view class="eqinfo">
<view class="item">
<text class="lbl">设备名称</text>
<text class="value">{{device.deviceName}}</text>
</view>
<view class="item">
<text class="lbl">Mac地址</text>
<text class="value">{{device.deviceMac}}</text>
</view>
<view class="item">
<text class="lbl">蓝牙名称</text>
<text class="value">{{device.bluetoothName}}</text>
</view>
<view class="item">
<text class="lbl">蓝牙状态</text>
<text class="value" :class="formData.bleStatu?'green':'red'">{{formData.bleStatu?'已连接':'未连接'}}</text>
</view>
</view>
<!-- <view class="warnnig">
<view>设备静止报警中</view>
</view>
<view class="warnnig">
<view>设备声光报警中</view>
</view>
<view class="lampMode">
<view class="sosContent">
<view class="btnSos openSos center" :class="{active:formData.sta_LedType==='led_alarm'}"
@click="sosSetting(dic.sta_LightType[4],4)">
{{formData.sta_LedType==='led_alarm'?'报警中':'声光报警'}}
</view>
<view class="btnSos closeSos center" @click="sosSetting(dic.sta_LightType[3],3)">解除</view>
</view>
</view> -->
<view class="lamp">
<view class="title">
<text>灯光模式</text>
</view>
</view>
<view class="lampMode">
<view class="mode fleft " v-for="item,index in dic.sta_LightType.filter(v=>{return v.group=='sta_LedType'})"
:class="{'active':formData[item.group]===item.key,
'marginLeft':index%2===1,
'displayNone':!item.show
}" v-on:click.stop="LighSetting(item,index)">
<view class="leftImg">
<image class="img" :src="formData[item.group]===item.key?item.activeImg:item.img" mode="aspectFit">
</image>
</view>
<view class="rightTxt">
<text class="bigTxt">{{item.name}}</text>
</view>
</view>
<view class="clear"></view>
</view>
<view class="lamp">
<view class="title">
<text>语音播报</text>
</view>
</view>
<view class="lampMode">
<view class="mode fleft " v-on:click.stop="playVolume()"
:class="{'active':formData.sta_VoiceType==='8'}">
<view class="leftImg">
<image class="img" :class="{'displayNone':formData.sta_VoiceType==='8'}"
src="/static/images/common/play.png" mode="aspectFit"></image>
<image class="img" :class="{'displayNone':formData.sta_VoiceType!=='8'}"
src="/static/images/common/pauseActive.png" mode="aspectFit"></image>
</view>
<view class="rightTxt">
<text class="bigTxt">播放语音</text>
</view>
</view>
<view class="mode fleft marginLeft" v-on:click.stop="audioManager()">
<view class="leftImg">
<image class="img" src="/static/images/common/uploadCloud.png" mode="aspectFit"></image>
</view>
<view class="rightTxt">
<text class="bigTxt">语音管理</text>
</view>
</view>
<view class="mode fleft marginLeft" v-on:click.stop="volumechange()">
<view class="leftImg">
<image class="img" src="/static/images/common/uploadCloud.png" mode="aspectFit"></image>
</view>
<view class="rightTxt">
<text class="bigTxt">音量调节</text>
</view>
</view>
<view class="clear"></view>
</view>
<view class="usrinfo lamp">
<view @click="Status.usrToggle=!Status.usrToggle">
<text class="usrtitle fleft">人员信息登记</text>
<view class="image fright" :style="{transform:Status.usrToggle?'rotate(0deg)':'rotate(180deg)' }">
<image class="img" src="/static/images/6155/DeviceDetail/slideToggle.png" mode="aspectFit"></image>
</view>
<view class="clear"></view>
</view>
<view :class="Status.usrToggle?'':'displayNone'">
<view style="margin: 20rpx 0rpx;">
<view class="btnSend fright" v-on:click.stop="sendUsr(null)">发送</view>
<view class="clear"></view>
</view>
<view class="item">
<text class="lbl">单位</text>
<input class="value" v-model="formData.company" placeholder="请输入单位" placeholder-class="usrplace" />
</view>
<view class="item">
<text class="lbl">姓名</text>
<input class="value" v-model="formData.usrname" placeholder="请输入姓名" placeholder-class="usrplace" />
</view>
<view class="item">
<text class="lbl">职位</text>
<input class="value" v-model="formData.job" placeholder="请输入职位" placeholder-class="usrplace" />
</view>
<view class="item">
<text class="lbl">ID号</text>
<input class="value" v-model="formData.usrid" placeholder="请输入ID" placeholder-class="usrplace" />
</view>
</view>
</view>
<view class="warn" style="padding-bottom: 20rpx;">
<view class="proinfo lamp">
<text class="title">产品信息</text>
<view class="itemcontent">
<view class="item" @click="proParam()">
<image class="img" src="/static/images/6155/DeviceDetail/param.png" mode="aspectFit"></image>
<text class="txt">产品参数</text>
</view>
<view class="item" @click="handRemark()">
<image class="img" src="/static/images/6155/DeviceDetail/remark.png" mode="aspectFit"></image>
<text class="txt">操作说明</text>
</view>
<view class="item" @click="handVideo()">
<image class="img" src="/static/images/6155/DeviceDetail/video.png" mode="aspectFit"></image>
<text class="txt">操作视频</text>
</view>
</view>
</view>
</view>
<!-- 弹窗通知 -->
<MessagePopup :visible="Status.Pop.showPop" :type="Status.Pop.popType" :bgColor="Status.Pop.bgColor"
:borderColor="Status.Pop.borderColor" :textColor="Status.Pop.textColor"
:buttonBgColor="Status.Pop.buttonBgColor" :buttonTextColor="Status.Pop.buttonTextColor"
:iconUrl="Status.Pop.iconUrl" :message="Status.Pop.message" :buttonText="Status.Pop.buttonText"
@buttonClick="HidePop" :visiblePrompt="Status.Pop.visiblePrompt" :promptTitle="Status.Pop.promptTitle"
v-model="Status.Pop.modelValue" @closePop="closePop" :buttonCancelText="Status.Pop.buttonCancelText"
:showCancel="Status.Pop.showCancel" @cancelPop="closePop" />
<!-- 下方菜单 -->
<global-loading ref="loading" />
</view>
</template>
<script>
import gbk from '@/utils/gbk.js'
import BleTool from '@/utils/BleHelper.js'
import BleReceive from '@/utils/BleReceive';
import {
showLoading,
hideLoading,
updateLoading
} from '@/utils/loading.js'
import request, {
baseURL
} from '@/utils/request.js'
import Common from '@/utils/Common.js'
const pagePath = "/pages/018A/HBY018A";
var ble = null;
var these = null;
var recei = null;
var instrusionTime = null;
export default {
data() {
return {
Status: {
curr: 0,
total: 0,
pageHide: false,
Pop: {
showPop: false, //是否显示弹窗
popType: 'custom',
bgColor: '#383934bd',
borderColor: '#BBE600',
textColor: '#ffffffde',
buttonBgColor: '#BBE600',
buttonTextColor: '#232323DE',
iconUrl: '',
message: '您确定要这样做吗?',
buttonText: '确定',
clickEvt: '',
visiblePrompt: false,
promptTitle: '设备名称',
modelValue: '',
visibleClose: false,
okCallback: null,
buttonCancelText: '',
showCancel: false,
},
usrToggle: false,
},
formData: {
img: '/static/images/common/HBY102.png',
sta_PowerPercent: '',
xuhang: '',
blename: '',
deviceId: '',
deviceName: '',
RSSI: '',
statu: '',
sta_address: '',
bleStatu: false,
sta_charge: '',
sta_LedType: '',
sta_RadarType: '',
sta_Online: '',
warnTime: '',
sta_sosadd: "",
sta_sosName: '',
sta_IntrusTime: ''
},
dic: {
sta_LightType: [
{
key: 'led_flash',
name: '聚光/泛光',
show: true,
img: '/static/images/6155/light.png',
activeImg: '/static/images/100/lightActive.png',
group: 'sta_LedType'
},
{
key: 'led_low_flash',
name: '聚光',
show: true,
img: '/static/images/102/lowFlash.png',
activeImg: '/static/images/102/lowFlashActive.png',
group: 'sta_LedType'
},
{
key: 'led_steady',
name: '泛光',
show: true,
img: '/static/images/102/liting.png',
activeImg: '/static/images/102/litingActive.png',
group: 'sta_LedType'
},
{
key: 'led_off',
name: '红蓝警示',
show: true,
img: '/static/images/100/light.png',
activeImg: '/static/images/100/lightActive.png',
group: 'sta_LedType'
}
],
sta_charge: {
"0": '未充电',
"1": '充电中'
}
},
device: {
id: "",
deviceName: "",
deviceImei: "",
deviceMac: "",
communicationMode: 0,
devicePic: "",
typeName: "",
bluetoothName: null,
deviceStatus: null,
bindingTime: "",
onlineStatus: 0,
battery: "0",
latitude: null,
longitude: null,
alarmStatus: null,
detailPageUrl: "/pages/650/HBY650",
showConfirm: false
}
}
},
onUnload() {
console.log("页面卸载,释放资源");
ble.removeAllCallback(pagePath);
clearInterval(instrusionTime);
instrusionTime = 0;
},
onLoad: function() {
these = this;
recei = BleReceive.getBleReceive();
ble = BleTool.getBleTool();
ble.addReceiveCallback(this.bleValueNotify, pagePath);
ble.addStateBreakCallback(this.bleStateBreak, pagePath);
ble.addStateRecoveryCallback(this.bleStateRecovry, pagePath);
ble.addDisposeCallback(this.deviceDispose, pagePath);
ble.addRecoveryCallback(this.deviceRecovry, pagePath);
let eventChannel = this.getOpenerEventChannel();
eventChannel.on('detailData', function(data) {
// console.log("收到父页面的参数:" + JSON.stringify(data));
var device = data.data;
these.device = device;
let f = ble.data.LinkedList.find((v) => {
if (v.macAddress == device.deviceMac) {
// console.log("找到设备了", v);
these.formData.deviceId = v.deviceId;
return true;
}
return false;
});
if (!f) {
these.showBleUnConnect();
return;
}
let form = f.formData;
if (form) {
let keys = Object.keys(form);
for (var i = keys.length; i >= 0; i--) {
let key = keys[i];
these.formData[key] = form[key];
}
}
these.formData.blename = f.name ? f.name : "Unname";
these.formData.deviceName = device.deviceName;
these.formData.bleStatu = false;
these.formData.deviceId = f.deviceId;
ble.LinkBlue(f.deviceId, f.writeServiceId, f.wirteCharactId, f.notifyCharactId).then(res => {
these.formData.bleStatu = true;
});
these.formData.sta_IntrusTime = 0;
these.formData.sta_sosadd = "";
these.setBleFormData();
});
},
onHide: function() {
this.Status.pageHide = true;
},
onShow() {
this.Status.pageHide = false;
},
computed: {
},
methods: {
LighSetting(item, index) {
let val = item.key;
if (item.key === this.formData.sta_LedType) {
val = 'led_off';
}
let f = this.getDevice();
// #ifdef APP-PLUS
if (!f) {
this.showBleUnConnect();
return;
}
// #endif
// #ifdef H5
f = {
deviceId: '12345'
}
// #endif
let json = {
ins_LedType: val
}
json = JSON.stringify(json);
ble.sendString(f.deviceId, json, f.writeServiceId, f.wirteCharactId, 30).then(res => {
this.formData.sta_LedType = val;
these.setBleFormData();
}).catch(ex => {
this.showMsg(ex.msg);
});
},
sosSetting(item, isOk) {
if (item.key == 'led_alarm' && this.formData.sta_LedType == 'led_alarm') {
return;
}
if (item.key == 'led_off' && this.formData.sta_LedType !== 'led_alarm') {
return;
}
let f = this.getDevice();
// #ifdef APP-PLUS
if (!f) {
this.showBleUnConnect();
return;
}
// #endif
// #ifdef H5
f = {
deviceId: '12345'
}
// #endif
debugger;
let task = (val) => {
let promise = new Promise((resolve, reject) => {
let json = {
ins_LedType: val
}
json = JSON.stringify(json);
ble.sendString(f.deviceId, json, f.writeServiceId, f.wirteCharactId, 30).then(res => {
this.formData.sta_LedType = val;
these.setBleFormData();
resolve();
}).catch(ex => {
this.showMsg(ex.msg);
reject(ex);
});
});
return promise;
}
if (item.key == 'led_alarm') {
this.showPop({
message: '确定开启声光报警?',
iconUrl: "/static/images/6155/DeviceDetail/uploadErr.png",
borderColor: "#e034344d",
buttonBgColor: "#E03434",
okCallback: () => {
task("led_alarm");
},
buttonText: "开启",
showCancel: true,
buttonCancelText: '取消'
});
} else {
if (this.formData.sta_LedType == 'led_alarm') {
this.showPop({
message: '确定解除声光报警模式?',
iconUrl: "/static/images/6155/DeviceDetail/uploadErr.png",
borderColor: "#e034344d",
buttonBgColor: "#E03434",
okCallback: () => {
task(item.key).then(r => {
}).catch(ex => {
});
},
buttonText: "解除",
showCancel: true,
buttonCancelText: '取消'
});
} else {
task(item.key);
}
}
},
deviceRecovry(res) {
if (this.Status.pageHide) {
return;
}
if (res.deviceId == these.formData.deviceId) {
this.formData.bleStatu = true;
setTimeout(() => {
hideLoading(these, 1000);
});
uni.showToast({
icon: 'success',
title: '蓝牙连接成功'
});
}
},
deviceDispose(res) {
if (this.Status.pageHide) {
return;
}
if (res.deviceId == these.formData.deviceId) {
this.formData.bleStatu = false;
setTimeout(() => {
hideLoading(these, 1000);
});
uni.showToast({
icon: 'fail',
title: '蓝牙连接已断开'
});
}
},
bleStateBreak() {
if (this.Status.pageHide) {
return;
}
//蓝牙适配器不可用
this.formData.bleStatu = false;
uni.showToast({
icon: 'fail',
title: '蓝牙已不可用'
})
hideLoading(this);
},
bleStateRecovry() {
console.log("蓝牙可用");
if (this.Status.pageHide) {
return;
}
console.log("蓝牙可用");
//蓝牙适配器再次可用,尝试恢复连接
showLoading(this, {
text: "蓝牙恢复可用,正在连接设备"
});
ble.LinkBlue(these.formData.deviceId).then(() => {
these.formData.bleStatu = true;
updateLoading(these, {
text: '连接成功'
});
}).catch(ex => {
updateLoading(these, {
text: ex.msg
})
}).finally(() => {
setTimeout(() => {
hideLoading(these);
}, 1000);
});
},
previewImg(img) {
if (!img) {
return;
}
uni.previewImage({
urls: [img]
})
},
bleValueNotify(receive, device, path, recArr) { //订阅消息
if (receive.deviceId !== this.formData.deviceId) {
return;
}
if (this.Status.pageHide) {
return;
}
let json = recei.ReceiveData(receive, device, pagePath, recArr);
console.log("json=", json)
let active = -1;
let f = this.Status.BottomMenu.menuItems.find((item, index) => {
if (item.value === json.sta_RadarType) {
active = index;
}
});
let msg = [];
if (json.sta_PowerPercent <= 20 && (json.sta_charge === 0 || json.sta_charge === '0')) {
msg.push("设备电量低");
}
let keys = Object.keys(json);
keys.forEach(key => {
if (key in this.formData) {
// console.log("key=",key+",value=",json[key]);
this.formData[key] = json[key];
}
});
if (msg.length > 0) {
this.showMsg(msg.join(','));
}
these.setBleFormData();
},
getDevice: function() {
// console.log("LinkedList=", ble.data.LinkedList);
// console.log("formData=", these.formData);
let f = ble.data.LinkedList.find((v) => {
return v.macAddress == these.device.deviceMac;
});
return f;
},
setBleFormData() {
ble.data.LinkedList.find((v) => {
if (v.deviceId == these.formData.deviceId) {
v.formData = these.formData;
return true;
}
return false;
});
uni.setStorageSync(ble.StorageKey, ble.data.LinkedList);
},
showBleUnConnect() {
this.showPop({
message: "蓝牙未连接过该设备,请使用蓝牙重新添加该设备",
iconUrl: "/static/images/6155/DeviceDetail/uploadErr.png",
borderColor: "#e034344d",
buttonBgColor: "#E03434",
buttonText: '去连接',
buttonTextColor: '#232323de',
okCallback: function() {
uni.navigateTo({
url: "/pages/common/addBLE/addEquip",
events: {
BindOver: function(data) {
console.log(data)
these.formData.bleStatu = true;
}
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('detailData', {
data: these.device
})
},
fail(ex) {
console.log("跳转失败", ex);
}
})
}
});
},
proParam: function() {
uni.navigateTo({
url: '/pages/common/productDes/index?id=' + this.device.id,
success(ev) {
}
});
},
handRemark: function() {
uni.navigateTo({
url: '/pages/common/operatingInstruct/index?id=' + this.device.id,
success(ev) {
}
});
},
handVideo: function() {
uni.navigateTo({
url: '/pages/common/operationVideo/index?id=' + this.device.id,
success(ev) {
}
});
},
closePop: function() {
this.Status.Pop.showPop = false;
if (this.Status.Pop.cancelCallback) {
this.Status.Pop.cancelCallback();
}
},
HidePop: function() {
if (this.Status.Pop.clickEvt == 'SendUsr') {
}
this.Status.Pop.showPop = false;
if (this.Status.Pop.okCallback) {
this.Status.Pop.okCallback();
}
},
showPop: function(option) {
// hideLoading(this);
let def = {
showPop: true, //是否显示弹窗
popType: 'custom',
bgColor: '#383934bd',
borderColor: '#BBE600',
textColor: '#ffffffde',
buttonBgColor: '#BBE600',
buttonTextColor: '#232323DE',
iconUrl: '',
message: '',
buttonText: '确定',
clickEvt: '',
visiblePrompt: false,
promptTitle: '',
modelValue: '',
visibleClose: false,
okCallback: null,
showSlot: false,
buttonCancelText: '',
showCancel: false,
}
let keys = Object.keys(def);
for (let i = 0; i < keys.length; i++) {
let key = keys[i];
if (key in option) {
continue;
}
this.Status.Pop[key] = def[key];
}
if (option) {
keys = Object.keys(option);
for (let i = 0; i < keys.length; i++) {
let key = keys[i];
this.Status.Pop[key] = option[key];
}
}
if (!option.borderColor) {
option.borderColor = '#BBE600';
option.buttonBgColor = '#BBE600';
}
these.Status.Pop.showPop = true;
},
showMsg(msg, isSucc) {
let icoUrl = '/static/images/6155/DeviceDetail/uploadErr.png';
let borderColor = "#e034344d";
let buttonBgColor = "#E03434";
if (isSucc) {
icoUrl = '/static/images/common/success.png';
borderColor = "#BBE600";
buttonBgColor = "#BBE600";
}
this.showPop({
message: msg,
iconUrl: icoUrl,
borderColor: borderColor,
buttonBgColor: buttonBgColor,
buttonText: '确定',
okCallback: null
});
}
}
}
</script>
<style>
.content {
padding: 30rpx;
box-sizing: border-box;
}
.eq {
width: 100%;
height: 250rpx;
border-radius: 8px;
background: rgba(26, 26, 26, 1);
box-sizing: border-box;
padding: 24rpx 28rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
margin-bottom: 24rpx;
}
.eq .leftImg {
box-sizing: border-box;
padding: 36rpx;
border-radius: 16rpx;
background: rgba(42, 42, 42, 0.5);
}
.eq .leftImg,
.eq .rightTxt {
width: 50%;
height: 100%;
}
.eq .rightTxt {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: space-evenly;
align-items: flex-start;
}
.eq .leftImg .img {
width: 100%;
height: 100%;
}
.eq .rightTxt .img {
width: 52rpx;
height: 52rpx;
}
.eq .rightTxt .row {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
padding-left: 50rpx;
}
.eq .rightTxt .row .txt {
padding-left: 20rpx;
}
.eq .bigTxt {
color: rgba(255, 255, 255, 0.87);
font-family: PingFang SC;
font-size: 28rpx;
font-weight: 400;
}
.eq .smallTxt {
color: rgba(255, 255, 255, 0.6);
font-family: PingFang SC;
font-size: 24rpx;
font-weight: 400;
}
.eqinfo {
border-radius: 16rpx;
background: rgba(26, 26, 26, 1);
box-sizing: border-box;
padding: 14rpx 0rpx;
}
.eqinfo .item {
width: 100%;
height: 60rpx;
line-height: 60rpx;
padding: 0rpx 28rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
}
.eqinfo .lbl {
color: rgba(255, 255, 255, 0.87);
font-family: PingFang SC;
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0.07px;
text-align: left;
}
.eqinfo .value {
color: rgba(255, 255, 255, 0.6);
font-family: PingFang SC;
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0.07px;
text-align: left;
}
.lamp {
margin-top: 24rpx;
}
.lamp .title {
width: 100%;
height: 60rpx;
line-height: 60rpx;
padding: 0rpx 28rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
}
.lamp.noPadding .title,
.lamp.noPadding .smlltitle {
padding: 0rpx 0rpx !important;
}
.lamp .smlltitle {
width: 100%;
line-height: 15rpx;
padding: 0rpx 28rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
font-size: 26rpx;
color: rgba(255, 255, 255, 0.6);
}
.lamp .title .img {
width: 32rpx;
height: 32rpx;
margin-top: 20rpx;
}
.lampMode {
width: 100%;
box-sizing: border-box;
}
.lampMode .mode {
width: calc(calc(100% - 34rpx) / 2);
border-radius: 8px;
margin-top: 20rpx;
background: rgba(26, 26, 26, 1);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: flex-start;
padding: 30rpx;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: #00000000;
}
.lampMode .mode.active {
border-color: #aed600 !important;
}
.lampMode .mode.active .bigTxt {
color: #aed600 !important;
}
.mode.marginLeft {
margin-left: 34rpx !important;
}
.mode .leftImg {
width: 70rpx;
height: 70rpx;
border-radius: 4px;
background: rgba(255, 255, 255, 0.06);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.mode.active .leftImg {
background: rgba(255, 255, 255, 0.06);
}
.mode .leftImg .img {
width: 40rpx;
height: 40rpx;
}
.mode .rightTxt {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: center;
align-items: flex-start;
padding-left: 20rpx;
}
.mode .bigTxt {
color: rgba(255, 255, 255, 0.87);
font-family: PingFang SC;
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0.07px;
}
.mode .smallTxt {
color: rgba(255, 255, 255, 0.6);
font-family: PingFang SC;
font-size: 24rpx;
font-weight: 400;
letter-spacing: 0.07px;
}
.usrinfo {
border-radius: 8px;
width: 100%;
box-sizing: border-box;
padding: 24rpx 28rpx;
background: rgba(26, 26, 26, 1);
}
.usrtitle {
color: rgba(255, 255, 255, 0.87);
font-family: PingFang SC;
font-size: 28rpx;
font-weight: 400;
height: 40rpx;
line-height: 40rpx;
letter-spacing: 0.07px;
}
.usrinfo .btnSend {
line-height: 65rpx;
border-radius: 8px;
width: 120rpx;
height: 65rpx;
color: rgba(35, 35, 35, 0.87);
font-family: PingFang SC;
font-size: 24rpx;
font-weight: 400;
letter-spacing: 0.15rpx;
text-align: center;
background-color: #BBE600;
}
.usrinfo .item {
border-radius: 8px;
width: 100%;
box-sizing: border-box;
line-height: 90rpx;
height: 90rpx;
background: rgba(42, 42, 42, 1);
margin-top: 24rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
}
.usrinfo .lbl {
width: 120rpx;
height: 100%;
padding-left: 24rpx;
box-sizing: border-box;
text-align: right;
color: rgba(255, 255, 255, 0.87);
font-family: PingFang SC;
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0.07px;
}
.usrinfo .value {
width: calc(100% - 120rpx);
height: 100%;
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0.07px;
text-align: left;
}
.usrinfo .value .uni-input-input {
color: rgba(255, 255, 255, 0.87);
font-family: PingFang SC;
}
.usrplace {
color: rgba(255, 255, 255, 0.4);
font-family: PingFang SC;
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0.07px;
text-align: left;
}
.proinfo .itemcontent {
display: flex;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-evenly;
}
.proinfo .item {
width: 180rpx;
height: 180rpx;
box-sizing: border-box;
padding: 40rpx;
border-radius: 16rpx;
background: rgba(26, 26, 26, 1);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.proinfo .item .img {
width: 50rpx;
height: 50rpx;
}
.proinfo .item .txt {
color: rgba(255, 255, 255, 0.6);
font-family: PingFang SC;
font-size: 24rpx;
font-weight: 400;
margin-top: 20rpx;
letter-spacing: 0.07px;
text-align: left;
}
.slider-container {
padding: 0px;
}
.addIco {
width: 100%;
height: 360rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.icoContent {
width: 240rpx;
height: 240rpx;
border-radius: 8rpx;
background: rgba(58, 58, 58, 1);
}
.icoContent .img {
width: 70rpx;
height: 70rpx;
}
.arrowContent {
border-radius: 16rpx;
background: rgba(26, 26, 26, 1);
width: 100%;
padding: 30rpx 0rpx;
}
.modeSetting {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
align-items: center;
justify-content: flex-start;
}
.modeSetting .arrow {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
width: calc(100% / 3);
margin-bottom: 25rpx;
}
.modeSetting .arrow .text {
color: rgba(255, 255, 255, 0.6);
font-family: PingFang SC;
font-size: 24rpx;
font-weight: 400;
letter-spacing: 0.14rpx;
}
.modeSetting .arrow.active .text {
color: rgba(35, 35, 35, 0.87);
}
.modeSetting .arrow .outCircle {
width: 130rpx;
height: 130rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
border: 4rpx solid #00000000;
border-radius: 50%;
background: rgba(42, 42, 42, 1);
}
.modeSetting .arrow .item {
width: 100%;
height: 100%;
border-radius: 50%;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.modeSetting .arrow.active .outCircle {
border: 4rpx solid rgba(174, 214, 0, 1);
padding: 4rpx;
}
.modeSetting .item.active .p100 {
background: rgba(174, 214, 0, 1);
border-radius: 50%;
}
.modeSetting .item .img {
width: 52rpx;
height: 56rpx;
}
.modeSetting .item .img.translate {
transform: rotate(180deg);
}
.modeSetting .arrow .activity {
display: none;
}
.modeSetting .arrow.active .nomal {
display: none;
}
.modeSetting .arrow.active .item {
background: rgba(174, 214, 0, 1);
}
.modeSetting .arrow.active .activity {
display: block !important;
}
.usrinfo .image {
width: 30rpx;
height: 40rpx;
}
.usrinfo .img {
width: 30rpx;
height: 40rpx;
}
.content {
box-sizing: border-box;
width: 100%;
min-height: 100vh;
height: auto;
}
.contentBg {
background-color: #121212;
color: #ffffffde;
}
.fleft {
float: left;
}
.fright {
float: right;
}
.clear {
clear: both;
}
.displayNone {
display: none !important;
}
.p100 {
width: 100%;
height: 100%;
}
.center {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.centerLeft {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
}
.warnnig {
border-radius: 16rpx;
width: 100%;
height: 70rpx;
line-height: 70rpx;
background: rgba(224, 52, 52, 1);
box-sizing: border-box;
padding: 0rpx 30rpx;
margin-top: 20rpx;
color: rgba(255, 255, 255, 0.87);
font-family: 'PingFang SC';
font-size: 28rpx;
font-weight: 400;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
}
.netContent {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: flex-end;
justify-content: space-around;
align-items: flex-end;
width: 50rpx;
}
.marginTop10 {
margin-top: 20rpx;
}
.warnnig {
border-radius: 16rpx;
width: 100%;
height: 70rpx;
line-height: 70rpx;
background: rgba(224, 52, 52, 1);
box-sizing: border-box;
padding: 0rpx 30rpx;
margin-top: 20rpx;
color: rgba(255, 255, 255, 0.87);
font-family: 'PingFang SC';
font-size: 28rpx;
font-weight: 400;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
}
.sosContent {
width: 100%;
height: 110rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-top: 24rpx;
}
.btnSos {
border-radius: 92rpx;
height: 100%;
color: rgba(255, 255, 255, 0.87);
font-family: PingFang SC;
font-size: 28rpx;
font-weight: 400;
line-height: 110rpx;
letter-spacing: 0.014rpx;
text-align: center;
}
.openSos {
width: 62%;
background: #1a1a1a;
color: #e03434;
box-sizing: border-box;
border: 1rpx solid #e03434;
}
.openSos.active {
background: #e03434 !important;
color: rgba(255, 255, 255, 0.87) !important;
}
.closeSos {
width: 32%;
background: #1a1a1a;
}
.warn {
border-radius: 16rpx;
background: #1a1a1a;
width: 100%;
box-sizing: border-box;
margin-top: 25rpx;
}
.warn .header {
width: 100%;
box-sizing: border-box;
padding: 20rpx 25rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: space-between;
}
.paddingTop0 {
padding: 0rpx 25rpx !important;
}
.line {
width: calc(100% - 50rpx);
height: 0rpx;
border-bottom: 1rpx solid rgba(255, 255, 255, 0.06);
margin: 30rpx 25rpx
}
.sliderTxt {
color: rgba(255, 255, 255, 0.6);
font-family: PingFang SC;
font-size: 24rpx;
font-weight: 400;
letter-spacing: 0.07px;
}
.sliderVal {
color: rgba(174, 214, 0, 1);
font-family: PingFang SC;
font-size: 24rpx;
font-weight: 400;
letter-spacing: 0.07px;
}
</style>