dyf/APP
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1663ae75e4914311f06514c9387ea28fabca4046
APP/pages/6155/deviceDetail.vue

1334 lines
32 KiB
Vue
Raw Normal View History

6155部分功能提交
2025-07-11 16:08:17 +08:00
<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)}`
)
//发送数据包
6155前端功能完成
2025-07-14 09:46:58 +08:00
ble.sendDataNew(f.deviceId, f.writeServiceId, f.wirteCharactId, buffer)
6155部分功能提交
2025-07-11 16:08:17 +08:00
.then(() => {
6155前端功能完成
2025-07-14 09:46:58 +08:00
console.log("发送一个包完成了");
6155部分功能提交
2025-07-11 16:08:17 +08:00
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>
Reference in New Issue Copy Permalink