Files
APP/pages/6155/deviceDetail.vue
2025-07-14 09:46:58 +08:00

1334 lines
32 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">
<image class="img" :src="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.battary}}%</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.xuhang}}</view>
<view class="smallTxt">续航时间</view>
</view>
</view>
</view>
</view>
<view class="eqinfo">
<view class="item">
<text class="lbl">蓝牙名称</text>
<text class="value">{{formData.name}}</text>
</view>
<view class="item">
<text class="lbl">信号强度</text>
<text class="value">{{formData.RSSI}}</text>
</view>
<view class="item">
<text class="lbl">设备状态</text>
<text class="value">{{formData.statu}}</text>
</view>
</view>
<view class="lamp">
<view class="title">
<text>灯光亮度</text>
<text>{{formData.liangDu}}%</text>
</view>
<view class="slider-container">
<slider min="1" max="100" step="1" :disabled="false" :value="formData.liangDu" activeColor="#bbe600"
backgroundColor="#00000000" block-size="20" block-color="#ffffffde" @change="sliderChange"
@changing="sliderChange" class="custom-slider" />
</view>
</view>
<view class="lampMode">
<view class="mode fleft" v-on:click.stop="ModeSetting('main')">
<view class="leftImg">
<image class="img" src="/static/images/6155/DeviceDetail/mainLamp.png" mode="aspectFit"></image>
</view>
<view class="rightTxt">
<text class="bigTxt">主灯模式</text>
<text class="smallTxt">强光模式</text>
</view>
</view>
<view class="mode marginLeft fleft" v-on:click.stop="ModeSetting('fu')">
<view class="leftImg">
<image class="img" src="/static/images/6155/DeviceDetail/fuLamp.png" mode="aspectFit"></image>
</view>
<view class="rightTxt">
<text class="bigTxt">辅灯模式</text>
<text class="smallTxt">泛光模式</text>
</view>
</view>
<view class="mode fleft" v-on:click.stop="UploadOpenImg()">
<view class="leftImg">
<image class="img" src="/static/images/6155/DeviceDetail/open.png" mode="aspectFit"></image>
</view>
<view class="rightTxt">
<text class="bigTxt">开机画面</text>
<text class="smallTxt">上传</text>
</view>
</view>
<view class="clear"></view>
</view>
<view class="usrinfo">
<view>
<text class="usrtitle fleft">人员信息登记</text>
<view class="btnSend fright" v-on:click.stop="sendUsr">发送</view>
<view class="clear"></view>
</view>
<view class="item">
<text class="lbl">单位</text>
<input class="value" v-model="user.company" placeholder="请输入单位" placeholder-class="usrplace" />
</view>
<view class="item">
<text class="lbl">姓名</text>
<input class="value" v-model="user.name" placeholder="请输入姓名" placeholder-class="usrplace" />
</view>
<view class="item">
<text class="lbl">职位</text>
<input class="value" v-model="user.job" placeholder="请输入职位" placeholder-class="usrplace" />
</view>
<view class="item">
<text class="lbl">ID号</text>
<input class="value" v-model="user.id" placeholder="请输入ID" placeholder-class="usrplace" />
</view>
</view>
<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>
<!-- 弹窗通知 -->
<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" />
<!-- 下方菜单 -->
<BottomSlideMenuPlus :config="Status.BottomMenu" @close="closeMenu" @itemClick="handleItemClick"
@btnClick="btnClick">
<view class="addIco">
<view class="icoContent center" v-on:click.stop="checkImgUpload()">
<image mode="aspectFit" class="img" src="/static/images/6155/DeviceDetail/add.png"></image>
</view>
</view>
</BottomSlideMenuPlus>
<Progress :config="Status.Progress"></Progress>
</view>
</template>
<script>
import ble from '../../api/6155/BlueHelper';
import { deviceReName } from '../../api/common';
export default {
data() {
return {
Status: {
refferKey: '',
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
},
BottomMenu: {
show: false,
showHeader: true,
menuItems: [{
text: '强光',
icon: '/static/images/6155/DeviceDetail/qiang.png'
},
{
text: '弱光',
icon: '/static/images/6155/DeviceDetail/ruo.png'
},
{
text: '爆闪',
icon: '/static/images/6155/DeviceDetail/shan.png'
}
],
activeIndex: -1,
bgColor: '#2a2a2a',
itemBgColor: '#3a3a3a',
textColor: '#ffffffde',
textAlign: 'flex-start',
title: '主灯模式',
showDivider: false,
dividerColor: '#00000000',
dividerThickness: '0rpx',
dividerMargin: '10rpx',
itemHeight: '80rpx',
type: '',
showBtn: true,
btnBgColor: "#bbe600",
btnText: "确定",
btnTextColor: "#232323de",
showMask: true,
maskBgColor: '#00000066',
showClose: false
},
Progress: {
show: false, //是否显示
height: '20rpx',
showMask: true, //是否显示mask
maskBgColor: '#00000000', //mask背景颜色
contentBgColor: '#121212', //总背景颜色
showText: true, //是否显示当前进度的文字
txtColor: '#ffffffde', //文字的颜色
curr: 20, //当前进度
total: 100, //总进度
proBgColor: '#2a2a2a', //进度条底色,
proBorder: '', //进度条border
currBgColor: '#bbe600', //当前进度底色
currBorder: '', //当前进度border
borderRadius: '10rpx'
}
},
formData: {
img: '/static/images/6155/DeviceDetail/equip.png',
battary: '60',
xuhang: '1小时',
name: 'JQZM-EF4651',
RSSI: '-30',
statu: '运行中',
liangDu: '50',
id:''
},
cEdit: {
mode: ''
},
user: {
company: '黄石消防支队',
name: '菜英俊',
job: '小队长',
id: 'HSXF01061'
},
device: {
deviceId: ''
}
}
},
onLoad: function() {
var these = this;
let eventChannel = this.getOpenerEventChannel();
eventChannel.on('detailData', function(data) {
console.log("收到父页面的参数:" + JSON.stringify(data));
var device = data.data;
these.device.deviceId = device.deviceMac;
these.formData.name=device.bluetoothName?device.bluetoothName:device.deviceName;
these.formData.img=device.devicePic;
these.formData.id=device.id;
})
ble.featrueValueCallback = these.bleValueNotify;
},
onHide: function() {
},
onBackPress(e) {
var these = this;
console.log("these.device=" + JSON.stringify(these.device));
if (these.device.deviceId) {
if (e.from === 'backbutton') {
ble.getLinkBlue((res) => {
if (res.devices.length == 0) {
console.log("没有已连接的蓝牙设备")
uni.navigateBack();
return;
}
let f = res.devices.find(function(v) {
return v.deviceId == these.device.deviceId;
});
if (!f) {
console.log("该设备没有连接")
uni.navigateBack();
return;
}
uni.showModal({
title: '提示',
content: '是否断开与设备的蓝牙连接?',
success: function(res) {
if (res.confirm) {
disconnectDevice(these.device.deviceId);
}
uni.navigateBack();
}
});
});
return true;
}
}
return false;
},
computed: {
RSSIRemark: function() {
let remark = '极弱';
if (this.formData.RSSI <= 0 && this.formData.RSSI >= -30) {
remark = '强';
}
if (this.formData.RSSI < -30 && this.formData.RSSI >= -60) {
remark = '一般';
}
if (this.formData.RSSI < -60 && this.formData.RSSI >= -85) {
remark = '弱';
}
if (this.formData.RSSI < -85 && this.formData.RSSI >= -100) {
remark = '微弱';
}
}
},
methods: {
bleValueNotify: function(data) {
console.log("读取到设备发送的数据:" + JSON.stringify(data));
// data.characteristicId
// data.deviceId
// data.serviceId
// data.value
},
proParam: function() {
this.alert('提示', "敬请期待");
},
handRemark: function() {
this.alert('提示', "敬请期待");
},
handVideo: function() {
this.alert('提示', "敬请期待");
},
checkImgUpload: function() {
console.log("123213213213");
var these = this;
// 处理像素数据并发送
var processAndSendImageData = function(pixels) {
return new Promise((resolve, reject) => {
// 创建RGB565格式的像素数据
const rgb565Data = convertToRGB565(pixels);
// 分包发送
sendImagePackets(rgb565Data).then(resolve).catch(reject);
});
}
// 将RGBA转换为RGB565
var convertToRGB565 = function(pixels) {
var rgbaToRgb565 = function(r, g, b, a = 255) {
// 忽略透明度(如果需要考虑透明度,请根据需求处理)
// 将8位颜色值压缩到RGB565对应的位数
const r5 = Math.round((r / 255) * 31); // 5位0-31
const g6 = Math.round((g / 255) * 63); // 6位0-63
const b5 = Math.round((b / 255) * 31); // 5位0-31
// 合并为16位整数
return (r5 << 11) | (g6 << 5) | b5;
}
const result = new Uint16Array(160 * 80);
let index = 0;
console.log("pixels.length=" + pixels.length);
for (let i = 0; i < pixels.length; i += 4) {
const r = pixels[i];
const g = pixels[i + 1];
const b = pixels[i + 2];
// 转换为RGB565 (R:5bit, G:6bit, B:5bit)
const rgb565 = ((r & 0xF8) << 8) | ((g & 0xFC) << 3) | (b >> 3);
//let rgb565=rgbaToRgb565(r,g,b);
result[index++] = rgb565;
}
return result;
}
// 分包发送图片数据
var sendImagePackets = function(imageData) {
return new Promise((resolve, reject) => {
// this.isSending = true;
// this.progress = 0;
// this.currentPacket = 0;
// 总数据包数
const totalPackets = 52;
let currentPacket = 1;
let key = "linkedDevices";
var store = uni.getStorageInfoSync();
var f = store.keys.find(function(v) {
return v == key;
});
// console.log("倒计时5");
var linkedDevices = [];
if (f) {
var str = uni.getStorageSync(key);
if (str) {
linkedDevices = JSON.parse(str);
}
}
// console.log("倒计时4");
if (linkedDevices && linkedDevices.length && linkedDevices.length > 0) {
// console.log("倒计时3");
f = linkedDevices.find(function(v) {
return v.deviceId == these.device.deviceId;
});
if (f) {
// 发送单个数据包
const sendNextPacket = () => {
if (currentPacket > totalPackets) {
uni.hideLoading();
these.Status.BottomMenu.show = false;
these.Status.Progress.show = false;
these.Status.Pop.showPop = true;
these.Status.Pop.message = "上传成功";
these.Status.Pop.iconUrl =
"/static/images/6155/DeviceDetail/uploadSuccess.png";
resolve();
return;
}
// 计算当前包的数据
let packetSize = 250;
if (currentPacket <= 51) {
packetSize = 250; // 前51个包每个500字节
} else {
packetSize = 50; // 最后一个包100字节
}
// 创建数据包
const startIndex = (currentPacket - 1) * packetSize;
const endIndex = Math.min(startIndex + packetSize, imageData
.length);
if (startIndex > endIndex) {
return;
}
const packetData = imageData.slice(startIndex,
endIndex); // imageData.subarray(startIndex, endIndex);
console.log("imageData.length=" + imageData.length +
",startIndex=" +
startIndex +
",endIndex=" + endIndex + ",数据包长度" + (endIndex -
startIndex) +
',packetData.length=' + packetData.length);
// 构建数据包
const bufferSize = 5 + packetData.length * 2; // 头部5字节 + 数据部分
const buffer = new ArrayBuffer(bufferSize);
const dataView = new DataView(buffer);
// 填充头部
dataView.setUint8(0, 0x55); // 帧头
dataView.setUint8(1, 0x02); // 帧类型:开机画面
dataView.setUint8(2, '0x' + currentPacket.toString(16).padStart(2,
'0')); // 包序号
// if(packetData.length==250)
// {
// dataView.setUint8(3, 0x01);
// dataView.setUint8(4, 0xFF);
// }
if (packetData.length == 250) {
dataView.setUint8(3, 0x01);
dataView.setUint8(4, 0xF4);
} else {
dataView.setUint8(3, 0x00);
dataView.setUint8(4, 0x64);
}
// 填充数据每个RGB565值占2字节
for (let i = 0; i < packetData.length; i++) {
dataView.setUint16(5 + i * 2, packetData[i], false); // 大端字节序
}
console.log(
`发送数据包${currentPacket}/${totalPackets},${dataView.getUint8(0)} ${dataView.getUint8(1)} ${dataView.getUint8(2)}`
)
//发送数据包
ble.sendDataNew(f.deviceId, f.writeServiceId, f.wirteCharactId, buffer)
.then(() => {
console.log("发送一个包完成了");
these.Status.Progress.curr = currentPacket;
currentPacket++;
setTimeout(sendNextPacket, 100);
}).catch(err => {
console.log("发送数据包失败了" + JSON.stringify(err));
// this.isSending = false;
these.Status.BottomMenu.show = false;
these.Status.Progress.show = false;
these.alert("发送数据包失败了");
uni.hideLoading();
reject(err);
});
}
// 开始发送数据
sendNextPacket();
}
}
});
}
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success: function(res) {
uni.navigateTo({
url: "/pages/6155/ImgCrop",
events: {
ImgCutOver: function(data) {
console.log("我收到裁剪后的图片了,感谢老铁," + data)
uni.showLoading({
title: "正在发送..."
});
these.Status.Progress.show = true;
these.Status.Progress.curr = 0;
these.Status.Progress.total = 52;
these.Status.BottomMenu.show = false;
setTimeout(function() {
processAndSendImageData(data).catch(() => {
});
}, 0)
}
},
success(ev) {
ev.eventChannel.emit('checkImg', {
data: res.tempFiles[0].path
})
},
fail(ex) {
console.log("跳转页面失败"+JSON.stringify(ex));
}
});
}
});
},
UploadOpenImg: function() {
//上传开机画面
this.Status.BottomMenu.menuItems = [];
this.Status.BottomMenu.title = "上传开机画面";
this.Status.BottomMenu.type = "checkImg";
this.Status.BottomMenu.show = true;
},
ModeSetting: function(type) {
this.cEdit.mode = type;
let items = [];
let title = '';
switch (type) {
case "main":
title = '主灯模式';
items = [
{
text: '强光',
icon: '/static/images/6155/DeviceDetail/qiang.png'
},
{
text: '弱光',
icon: '/static/images/6155/DeviceDetail/ruo.png'
},
{
text: '爆闪',
icon: '/static/images/6155/DeviceDetail/shan.png'
}
];
break;
case "fu":
title = '辅灯模式';
items = [{
text: '泛光',
icon: '/static/images/6155/DeviceDetail/fan.png'
}];
break;
}
this.Status.BottomMenu.menuItems = items;
this.Status.BottomMenu.title = title;
this.Status.BottomMenu.type = type;
this.Status.BottomMenu.show = true;
},
showMenu(flag) {
this.Status.BottomMenu.show = true;
},
closeMenu() {
this.Status.BottomMenu.show = false;
},
btnClick(item, index) {
if (this.Status.BottomMenu.activeIndex == -1) {
this.showToast('请选择模式');
return;
}
//发送指令给设备
switch (this.Status.BottomMenu.type) {
case "main":
this.setMode(this.Status.BottomMenu.activeIndex);
break;
case "fu":
this.setMode(this.Status.BottomMenu.activeIndex);
break;
}
this.closeMenu();
},
setMode(mode) {
this.currentMode = mode;
let dataValue = 0;
switch (mode) {
case 0:
dataValue = 0x01;
console.log('开始切换到弱光模式');
break;
case 1:
dataValue = 0x02;
console.log('开始切换到工作光模式');
break;
case 2:
dataValue = 0x03;
console.log('开始切换到强光模式');
break;
case 2:
dataValue = 0x04;
console.log('开始切换到爆闪模式');
break;
case 4:
dataValue = 0x00; // 爆关闭主灯光
console.log('关闭主灯光');
break;
}
// 构建数据包
const buffer = new ArrayBuffer(8);
const dataView = new DataView(buffer);
dataView.setUint8(0, 0x4A); // 帧头
dataView.setUint8(1, 0x51);
dataView.setUint8(2, 0x4F);
dataView.setUint8(3, 0x43);
if(this.Status.BottomMenu.type=='main'){
//主灯模式
dataView.setUint8(4, 0x04); // 帧类型
}else{
//副灯模式
dataView.setUint8(4, 0x05); // 帧类型
}
dataView.setUint8(5, dataValue); // 数据
dataView.setUint16(6, '9C41');
// 发送数据
ble.LinkBlue(this.device.deviceId, () => {
setTimeout(() => {
ble.sendData(this.device.deviceId, buffer);
}, 1000);
});
},
handleItemClick(item, index) {
switch (this.Status.BottomMenu.type) {
case "main":
break;
case "fu":
break;
}
this.Status.BottomMenu.activeIndex = index;
},
HidePop: function() {
if (this.Status.Pop.clickEvt == 'SendUsr') {
}
this.Status.Pop.showPop = false;
},
sendUsr: function() {
// this.alert(JSON.stringify(this.user));
//生成位图并分包发送 //暂时弹出成功提示
var these = this;
var textLines = [
this.user.company,
this.user.name,
this.user.job,
this.user.id
];
var sendText = function() {
// 总数据包数
const totalPackets = textLines.length;
let currentPacket = 1;
// 发送单个数据包
const sendNextPacket = () => {
if (currentPacket > totalPackets) {
these.Status.Pop = {
showPop: true, //是否显示弹窗
popType: 'custom',
bgColor: '#383934bd',
borderColor: '#BBE600',
textColor: '#ffffffde',
buttonBgColor: '#BBE600',
buttonTextColor: '#232323DE',
iconUrl: '/static/images/6155/DeviceDetail/sendSucc.png',
message: '人员信息发送成功',
buttonText: '确定',
clickEvt: 'SendUsr',
visiblePrompt: false,
promptTitle: '',
modelValue: '',
visibleClose: true
}
return;
}
// 获取当前行文字
const text = textLines[currentPacket - 1] || '';
let arr = ""; // gbk.encode(text)
let gbkData = ""; //gbk.arr2hex(arr);
console.log(JSON.stringify(gbkData));
// 构建数据包
const bufferSize = 5 + text.length * 2; // 头部4字节 + 数据部分
const buffer = new ArrayBuffer(bufferSize);
const dataView = new DataView(buffer);
// 填充头部
dataView.setUint8(0, 0x55); // 帧头
dataView.setUint8(1, 0x03); // 帧类型:文字
dataView.setUint8(2, currentPacket.toString(16)); // 包序号
dataView.setUint16(3, (text.length * 2).toString(16)); // 数据长度
console.log("gbkData.length=" + gbkData.length)
// 填充数据
for (let i = 1; i <= text.length * 2; i++) {
const highNibble = gbkData[i * 2 - 2]; // 高4位
const lowNibble = gbkData[i * 2 - 1]; // 低4位如果是奇数长度补0
console.log("i=" + i + "," + highNibble + lowNibble)
// 组合高低位并转换为字节值
const byteValue = parseInt(highNibble + lowNibble, 16);
dataView.setUint8(5 + i - 1, byteValue);
}
console.log("dataView.length=" + dataView.byteLength)
// 发送数据包
ble.LinkBlue(these.device.deviceId, () => {
setTimeout(() => {
ble.sendData(these.device.deviceId, buffer).then(() => {
// 更新进度
console.log(
`发送文字数据包 ${currentPacket}/${totalPackets}: ${text}`
);
// 发送下一个包
currentPacket++;
setTimeout(sendNextPacket, 100);
}).catch(err => {
// this.isSendingText = false;
uni.showToast({
title: '文字发送失败',
icon: 'none'
});
});
}, 0);
});
// }).catch(err => {
// this.isSendingText = false;
// console.log(`文字编码失败: ${err}`);
// uni.showToast({
// title: '编码失败',
// icon: 'none'
// });
// });
};
// 开始发送第一个包
sendNextPacket();
}
sendText();
},
ack: function() {
var these = this;
let eventChannel = this.getOpenerEventChannel();
eventChannel.emit('ack', {
data: '我已收到了您的消息,谢谢。'
});
},
sliderChange: function(evt) {
this.formData.liangDu = evt.detail.value;
//给蓝牙设备发送信号更新亮度
setTimeout(() => {
this.sendBrightness();
}, 100);
},
sendBrightness: function() {
const buffer = new ArrayBuffer(6);
const dataView = new DataView(buffer);
let data = '0x' + parseInt(this.formData.liangDu).toString(16);
console.log("亮度:" + this.formData.liangDu + ',16进制:' + data);
dataView.setUint8(0, 0x55); // 帧头
dataView.setUint8(1, 0x01); // 帧类型:亮度调节
dataView.setUint8(2, 0x01); // 包序号
dataView.setUint8(3, 0x00); // 数据长度
dataView.setUint8(4, 0x01); // 数据长度
dataView.setUint8(5, data); // 数据
// 发送数据
ble.LinkBlue(this.device.deviceId, () => {
setTimeout(() => {
ble.sendData(this.device.deviceId, buffer);
}, 1000)
});
}
}
}
</script>
<style>
.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;
}
.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;
}
.lampMode {
padding: 30rpx 0rpx;
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;
}
.mode.marginLeft {
margin-left: 34rpx !important;
}
.mode .leftImg .img {
width: 70rpx;
height: 70rpx;
}
.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: 40rpx;
border-radius: 8px;
width: 82rpx;
height: 40rpx;
color: rgba(35, 35, 35, 0.87);
font-family: PingFang SC;
font-size: 20rpx;
font-weight: 400;
letter-spacing: 0.07px;
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%;
}
.usrinfo .value .uni-input-input {
color: rgba(255, 255, 255, 0.87);
font-family: PingFang SC;
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0.07px;
text-align: left;
}
.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;
}
/* .custom-slider .uni-slider-handle-wrapper {
height: 60rpx !important;
border-radius: 3px;
}
.custom-slider .uni-slider-active {
background-color: #FF6B6B !important;
}
.custom-slider .uni-slider-handle {
width: 60rpx !important;
height: 60rpx !important;
border-radius: 16rpx !important;
background-color: #FFFFFFde !important;
margin-top: -15px !important;
border: none !important;
}
.custom-slider .uni-slider-thumb {
width: 60rpx !important;
height: 60rpx !important;
border-radius: 16rpx !important;
background-color: #00000000 !important;
border: none !important;
} */
.addIco {
width: 100%;
height: 360rpx;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
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;
}
</style>