【uniapp】支付宝小程序蓝牙绑定步骤兼容ios蓝牙连接，并报 10017 写入特征值失败解决方案
2.解决方案 安卓手机需要设置低功耗蓝牙设备的最大传输单元my.setBLEMTU 必须在连接完蓝牙my.connectBLEDevice之后立马设置。1.问题：安卓手机写入数据的时候一直报10017 写入特征值失败。
·
1.问题：安卓手机写入数据的时候一直报10017 写入特征值失败
2.解决方案 安卓手机需要设置低功耗蓝牙设备的最大传输单元my.setBLEMTU 必须在连接完蓝牙my.connectBLEDevice之后立马设置
<template>
<view style="height:100%;padding-top: 40rpx;">
<view class="titleHead">{{pileList.length>0 ?'桩列表':'请选择以下服务'}}</view>
<view>
<!-- 绑定好充电桩 -->
<view class="content">
<view class="card" v-for="item in bluetoothList" @click="goDetail(item)" :key="item.pileCode">
<view class="card-itemA">
<view>{{item.bluetoothName}}</view>
<!-- <view v-if="item.isSelect == 'Y'">默认桩</view> -->
</view>
<view class="card-itemD">
<view>IMEI编码：</view>
<view>{{item.pileCode}}</view>
</view>
<!-- <view class="card-itemB">
<view class="card-itemB_A">
<view>IMEI编码：{{item.pileCode}}</view>
<view :class="[item.pileStatus =='01'?'':'error']">{{item.pileStatusDetailName}}</view>
</view>
<view class="tupian"></view>
</view> -->
<view class="card-itemE">
<view style="margin-right: 34rpx;" v-if="chargeMode">
<u-image width="30rpx" height="24rpx" :src="signalImg" :show-loading="false"></u-image>
</view>
<view v-if="chargeMode">
<u-image width="16rpx" height="30rpx" :src="wifeImg" :show-loading="false"></u-image>
</view>
<view v-if="!chargeMode" style="margin-right: 34rpx;">
<u-image width="16rpx" height="30rpx" :src="wifeImgs" :show-loading="false"></u-image>
</view>
<view v-if="!chargeMode">
<u-image width="30rpx" height="24rpx" :src="signalImgs" :show-loading="false"></u-image>
</view>
</view>
<view class="card-itemF" @click.stop="unBind(item)">
解绑
</view>
</view>
<!-- 绑桩 -->
<view class="top-title" style="margin-top: 30rpx;" v-if="bluetoothList.length>0">您可以选择以下服务</view>
<view class="top-item" @click="goScaning" style="margin-bottom: 50rpx;">
<view>绑定充电桩</view>
<view>
<view class="top-item_title">有充电桩且已完成安装，绑定个人后可以</view>
<view>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view>远程启停预约充电</view>
</view>
<!-- <view @click="startChargeFun">开始充电</view> -->
<!-- 切换模式 4G模式 -->
<view class="top-titles" style="margin-top: 30rpx;">模式切换</view>
<view class="top-item" style="margin-bottom: 50rpx;" @click="setChargeMode()">
<view>切换4G模式</view>
<view>
<view class="top-item_title">手机有网络时，使用联网模式可使用更多</view>
<view class="fourG-img">
</view>
</view>
<view>APP功能绑定充电桩后进行远程充电控制</view>
</view>
</view>
</view>
<!-- 蓝牙绑定中提示框 -->
<u-modal v-model="pendingShow" :show-title="false" :show-confirm-button="false" :show-cancel-button="false"
border-radius="30">
<view class="pending">
<view>绑定中……</view>
<view>提示：正在关联充电桩，请等待等待</view>
</view>
</u-modal>
<!-- 蓝牙绑定成功提示框 -->
<u-modal v-model="successShow" :show-title="false" :show-confirm-button="false" :show-cancel-button="false"
border-radius="30" :mask-close-able="false">
<view class="sucesses">
<view>蓝牙匹配中…</view>
<view>请在充电桩上刷卡以授权</view>
<view>
<view class="succ-img"></view>
<view>0:{{count>=10?count:'0'+count}} </view>
</view>
<view>提示:卡为包装箱内两张启停卡，刷任一张即可</view>
</view>
</u-modal>
<!-- 刷卡失败 重新刷卡授权 -->
<u-popup v-model="show" mode="center" border-radius="40" width="80%">
<view class="popsty">
<view>
刷卡失败
</view>
<view>是否需要重新刷卡授权</view>
<view class="btns">
<view @click="show = false">取消</view>
<view @click="reBind">绑定</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import blueteethCmd from '../../lib/blueteeth-cmd.js';
import utils from '../../lib/utils.js';
export default {
components: {
},
data() {
return {
pendingShow: false,
successShow: false,
show: false,
count: 30,
timer: null,
hasBindingFlag: false,
pileList: [],
nickName: '',
errFlag: false,
chargingFlag: false,
signalImg: require("@/static/xinhao.png"),
wifeImg: require("@/static/wife.png"),
signalImgs: require("@/static/xinhaoInac.png"),
wifeImgs: require("@/static/lanyaAc.png"),
bluetoothList: [],
currentBluethooth: {},
scanObj: {
deviceId: '',
pileCode: '',
materialNo: '',
bluetoothName: '',
deviceId: '',
serviceId: '',
characteristicId: '',
readCharacteristicId: '',
writeCharacteristicId: '',
},
readCharacteristicId: "", //读的值
writeCharacteristicId: "", //写的值
contactFlag: false, //蓝牙是否已连接
}
},
computed: {
chargeMode() {
return this.$store.state.chargingMode;
}
},
onShow() {
this.bluetoothList = uni.getStorageSync('bluetoothList') || []
// console.log(this.bluetoothList)
if (this.bluetoothList.length > 0) {
this.scanObj = this.bluetoothList[0]
uni.setStorageSync('contactFlag', false)
// console.log('有了')
} else {
// console.log('没了')
}
},
onLoad(options) {
console.log('xxxxxxxx')
console.log(options)
console.log('xxxxxxxx')
if (options && options.bluetoothName != undefined) {
this.scanObj.bluetoothName = options.bluetoothName
this.pendingShow = true;
this.initBluetooth()
console.log('cccccccc')
}
},
onReady() {
},
onHide() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
onUnload() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
methods: {
startChargeFun() {
console.log('开始充电')
const cmdCode = blueteethCmd.gen0032Cmd('01');
console.log(cmdCode)
console.log('开始充电')
// this.wirte0032CodeMsgId = utils.genUUID();
this.writeDataToEquip(cmdCode);
},
strToHexCharCode(num) {
return num.toString(16)
},
/*蓝牙刷卡倒计时*/
showDia() {
this.successShow = true;
this.countDown()
},
/*充电模式切换*/
setChargeMode(val) {
this.$store.commit("setChargingMode", true)
uni.switchTab({
url: '/pages/chargingHome/index'
})
},
/*解绑*/
unBind(ite) {
let that = this;
//-------解绑设备一定要先关闭蓝牙，不然再次搜索设备搜索不到---------重要！！！！！！！！-----------
my.disconnectBLEDevice({
deviceId: that.scanObj.deviceId,
success(res) {
that.bluetoothList = that.bluetoothList.filter((item) => {
return item.pileCode != ite.pileCode
});
uni.setStorageSync('bluetoothList', that.bluetoothList)
uni.removeStorageSync('curretBlueth')
console.log(that.bluetoothList)
},
fail(err) {
console.log(err)
}
})
// this.bluetoothList = this.bluetoothList.filter((item) => {
// return item.pileCode != ite.pileCode
// });
// uni.setStorageSync('bluetoothList', this.bluetoothList)
// uni.removeStorageSync('curretBlueth')
// console.log(this.bluetoothList)
},
/*扫码绑桩*/
goScaning() {
// console.log('开始扫码')
// this.successShow = true;
// this.countDown()
let that = this;
// console.log('开始扫码')
let list = []
uni.scanCode({
success: function(res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
// ZDC/F017W2000000209V0X210424010001/1440744500701/860061060058949/1210354581260045164/2010020001/ZDBT640028V07
//-------------------------------------------------桩编码860061060058949--------------物料号2010020001蓝牙名字ZDBT640028V07
list = res.result.split('/')
that.pendingShow = true;
that.scanObj['pileCode'] = list[3]
that.scanObj['materialNo'] = list[5]
that.scanObj['bluetoothName'] = list[6]
console.log(that.scanObj)
that.$store.commit('setBluethoothPileCode', list[3])
that.currentBluethooth.pileCode = list[3]
that.currentBluethooth.bluetoothName = list[6]
that.initBluetooth()
},
fail: function(res) {
uni.showToast({
title: '扫码失败'
})
}
});
},
/*蓝牙初始化*/
initBluetooth() {
console.log('蓝牙初始化')
let that = this;
my.openBluetoothAdapter({
success: res => {
console.log('蓝牙初始化')
console.log(res)
console.log('蓝牙初始化')
if (!res.isSupportBLE) {
that.pendingShow = false;
// my.alert({
// content: '抱歉，您的手机蓝牙暂不可用'
// });
uni.showToast({
title: '抱歉，您的手机蓝牙暂不可用'
})
return;
}
that.connectBluetooth()
},
fail: error => {
that.pendingShow = false;
// my.alert({
// content: JSON.stringify(error.errorMessage)
// });
uni.showToast({
title: JSON.stringify(error.errorMessage)
})
that.closeDeviceConnect()
},
});
},
/*搜索连接蓝牙*/
connectBluetooth() {
console.log('connectBluetooth')
console.log(this.scanObj.bluetoothName)
console.log('connectBluetooth')
let that = this;
let list = []
my.startBluetoothDevicesDiscovery({
allowDuplicatesKey: false,
success: () => {
my.onBluetoothDeviceFound(res => {
var deviceArray = res.devices;
for (var i = deviceArray.length - 1; i >= 0; i--) {
var deviceObj = deviceArray[i];
console.log('搜索设备')
console.log(that.scanObj.bluetoothName)
console.log(deviceObj)
console.log(deviceObj.name)
console.log('搜索设备')
//通过设备名称或者广播数据匹配目标设备，然后记录deviceID后面使用
// if (deviceObj.name != undefined) {
if (deviceObj.name == that.scanObj.bluetoothName) {
that.scanObj['deviceId'] = deviceObj.deviceId
//停止扫描
console.log('找到设备')
console.log(deviceObj.name)
console.log(deviceObj)
console.log('找到设备')
my.offBluetoothDeviceFound();
//连接设备
that.connectBLEDevice()
break;
}
// }
}
});
},
fail: error => {
that.pendingShow = false;
// my.alert({
// content: '启动扫描失败' + JSON.stringify(error.errorMessage)
// });
that.closeDeviceConnect()
},
});
},
/*连接蓝牙设备*/
connectBLEDevice() {
console.log('connectBLEDevice')
let that = this;
my.connectBLEDevice({
deviceId: that.scanObj.deviceId,
success: res => {
console.log('connectBLEDevice' + res)
if (uni.getSystemInfoSync().platform === 'android') {
my.setBLEMTU({
deviceId: that.scanObj.deviceId, // 设备ID，在【4】里获取到
mtu: 512, // 服务UUID，在【6】里能获取到
success(res) {
console.log('设置mtu成功')
that.getBluetoothService()
},
fail(err) {
console.error(err)
}
})
} else {
that.getBluetoothService()
}
// that.getBluetoothService()
},
fail: error => {
// my.alert({
// content: JSON.stringify(error)
// });
that.closeDeviceConnect()
},
});
},
/*获取桩蓝牙服务 */
getBluetoothService() {
let that = this;
console.log('获取桩蓝牙服务开始')
console.log(that.scanObj)
my.getBLEDeviceServices({
deviceId: that.scanObj.deviceId,
success: res => {
console.log('getBLEDeviceServices API开始执行')
console.log(res.services)
console.log('getBLEDeviceServices API结束执行')
if (uni.getSystemInfoSync().platform === 'android') { //安卓端
res.services.forEach(item => {
console.log(item)
if (item.serviceId.startsWith('0000fff0')) {
that.scanObj.serviceId = item.serviceId
}
})
} else { //ios端
res.services.forEach(item => {
console.log(item)
if (item.serviceId.startsWith('FFF0')) {
that.scanObj.serviceId = item.serviceId
}
})
}
that.getBluetoothCharacteristics()
},
fail: error => {
// my.alert({
// content: JSON.stringify(error)
// });
that.closeDeviceConnect()
},
});
console.log('获取桩蓝牙服务结束')
},
/*获取蓝牙特性*/
getBluetoothCharacteristics() {
let that = this;
console.log('获取蓝牙特性开始')
my.getBLEDeviceCharacteristics({
deviceId: that.scanObj.deviceId,
serviceId: that.scanObj.serviceId,
success: (res) => {
if (uni.getSystemInfoSync().platform === 'android') {
res.characteristics.forEach(item => {
console.log('getBLEDeviceCharacteristics API 开始')
console.log(item.characteristicId)
console.log('getBLEDeviceCharacteristics API 结束')
if (item.characteristicId.startsWith('0000fff1')) {
this.readCharacteristicId = item.characteristicId.toUpperCase()
this.scanObj.readCharacteristicId = item.characteristicId
.toUpperCase()
}
if (item.characteristicId.startsWith('0000fff2')) {
this.writeCharacteristicId = item.characteristicId.toUpperCase()
this.scanObj.writeCharacteristicId = item.characteristicId
.toUpperCase()
}
})
} else {
res.characteristics.forEach(item => {
console.log('getBLEDeviceCharacteristics API 开始')
console.log(item.characteristicId)
console.log('getBLEDeviceCharacteristics API 结束')
if (item.characteristicId.startsWith('FFF1')) {
this.readCharacteristicId = item.characteristicId.toUpperCase()
this.scanObj.readCharacteristicId = item.characteristicId
.toUpperCase()
}
if (item.characteristicId.startsWith('FFF2')) {
this.writeCharacteristicId = item.characteristicId.toUpperCase()
this.scanObj.writeCharacteristicId = item.characteristicId
.toUpperCase()
}
})
}
that.setBluetoothNotify()
},
fail: (error) => {
// my.alert({
// content: JSON.stringify(error)
// });
that.closeDeviceConnect()
}
});
console.log('获取蓝牙特性结束')
},
/*启用低功耗蓝牙设备特征值变化时的 notify*/
setBluetoothNotify() {
let that = this;
console.log('setBluetoothNotify 开始')
//启用低功耗蓝牙设备特征值变化时的 notify 功能的
my.notifyBLECharacteristicValueChange({
deviceId: that.scanObj.deviceId, // 设备ID，在【4】里获取到
serviceId: that.scanObj.serviceId, // 服务UUID，在【6】里能获取到
characteristicId: that.readCharacteristicId, // 特征值，在【7】里能获取到
state: true,
success(res) {
console.log('notifyBLECharacteristicValueChange API 开始执行')
// 下发获取充电桩状态数据
that.listenValueChange();
// 接受消息的方法
// that.looperGetPileStatusFun()
},
fail(err) {
console.log(err)
that.closeDeviceConnect()
}
})
},
/*监听蓝牙值的变化*/
listenValueChange() {
let that = this;
console.log('listenValueChange 监听到桩传回来值 开始执行')
my.onBLECharacteristicValueChange(res => {
let upWord = res.value.toUpperCase()
that.handleEquipNotifyBackCode(upWord);
console.log('xxxxxxxxx')
console.log(upWord)
console.log('xxxxxxxxx')
})
},
// ArrayBuffer转16进度字符串示例
ab2hex(buffer) {
const hexArr = Array.prototype.map.call(
new Uint8Array(buffer),
function(bit) {
return ('00' + bit.toString(16)).slice(-2)
}
)
return hexArr.join('')
},
/*处理桩返回的信号*/
handleEquipNotifyBackCode(notifyCode) {
console.log('handleEquipNotifyBackCode方法开始执行')
console.log(notifyCode)
let _ = this;
let startIndex = notifyCode.indexOf('7E');
let endIndex = notifyCode.lastIndexOf('7E');
if (startIndex >= 0 && endIndex > 0) {
const cmdCodeType = notifyCode.substring(startIndex + 2, startIndex + 6);
if ('0001' == cmdCodeType) { //桩提示登录
const cmdCode = blueteethCmd.gen8001Cmd(); //桩登录
_.writeDataToEquip(cmdCode);
setTimeout(() => {
const cmdCodes = blueteethCmd.gen0203Cmd(); //蓝牙绑定
this.writeDataToEquip(cmdCodes);
}, 1000)
} else if ('8203' == cmdCodeType) { //等待刷卡
this.pendingShow = false;
this.showDia()
} else if ('0007' == cmdCodeType) { //开始设置密码
this.successShow = false;
clearInterval(this.timer)
this.timer = null;
const cmdCodeBy0047 = blueteethCmd.gen0047Cmd(); //蓝牙绑定设置密码
this.writeDataToEquip(cmdCodeBy0047);
} else if ('8047' == cmdCodeType) { //0200 校验密码
const cmdCodeBy0200 = blueteethCmd.gen0200Cmd()
this.writeDataToEquip(cmdCodeBy0200)
} else if ('8200' == cmdCodeType) {
const acceptCodeby8200 = blueteethCmd.parse8200Cmd(notifyCode)
console.log('8200=' + notifyCode)
console.log(acceptCodeby8200)
if (acceptCodeby8200 == '00') { //校验成功 获取桩详情
console.log('校验成功')
const cmdCodeBy0051 = blueteethCmd.gen0051Cmd()
this.writeDataToEquip(cmdCodeBy0051)
}
} else if ('8051' == cmdCodeType) { //返回桩信息放进缓存里
const acceptCodeby8051 = blueteethCmd.parse8051Cmd(notifyCode)
this.parsePileObj(acceptCodeby8051)
if (this.bluetoothList.length == 0) {
this.bluetoothList.push(this.scanObj)
uni.setStorageSync('contactFlag', true)
uni.setStorageSync('bluetoothList', this.bluetoothList)
}
for (let item of this.bluetoothList) {
if (item.pileCode != this.scanObj.pileCode) {
this.bluetoothList.push(this.scanObj)
uni.setStorageSync('bluetoothList', this.bluetoothList)
}
}
}
}
},
/*8051解析转化为桩对象*/
parsePileObj(val) {
console.log('xxxdddd')
console.log(val)
console.log('xxxdddd')
//即插即用 00 不启用 01 开启
this.currentBluethooth.plugAndPlay = val.plugAndPlay == '00' ? false : true;
//无感充电 00不启用 01启用
this.currentBluethooth.noninductCode = val.noninductCode == '00' ? false : true;
// 桩状态
if (val.pileStatus == '00') {
this.currentBluethooth.pileStatus = '00'
this.currentBluethooth.pileStatusName = '空闲中'
} else if (val.pileStatus == '01') {
this.currentBluethooth.pileStatus = '01'
this.currentBluethooth.pileStatusName = '电子锁打开'
} else if (val.pileStatus == '02') {
this.currentBluethooth.pileStatus = '02'
this.currentBluethooth.pileStatusName = '枪头已拔下'
} else if (val.pileStatus == '03') {
this.currentBluethooth.pileStatus = '03'
this.currentBluethooth.pileStatusName = '车枪已连接'
} else if (val.pileStatus == '04') {
this.currentBluethooth.pileStatus = '04'
this.currentBluethooth.pileStatusName = '充电等待'
} else if (val.pileStatus == '05') {
this.currentBluethooth.pileStatus = '05'
this.currentBluethooth.pileStatusName = '充电中'
} else if (val.pileStatus == '06') {
this.currentBluethooth.pileStatus = '06'
this.currentBluethooth.pileStatusName = '充电结束'
} else if (val.pileStatus == '07') {
this.currentBluethooth.pileStatus = '07'
this.currentBluethooth.pileStatusName = '车枪已断开'
} else if (val.pileStatus == '08') {
this.currentBluethooth.pileStatus = '08'
this.currentBluethooth.pileStatusName = '定时中'
} else if (val.pileStatus == '09') {
this.currentBluethooth.pileStatus = '09'
this.currentBluethooth.pileStatusName = '预约中'
}
//电压
this.currentBluethooth.ua = val.Ua.toFixed(2)
//电流
this.currentBluethooth.la = val.la.toFixed(2)
//预约设置 00未设置 01单次 03循环
this.currentBluethooth.reservation = val.reservaType
if (val.reservaType == '01') { //单次预约
this.currentBluethooth.singleStartTime = val.singleStartTime
this.currentBluethooth.singleEndTime = val.singleEndTime
} else if (val.reservaType == '03') { //循环预约
this.currentBluethooth.loopStartTime = val.loopStartTime
this.currentBluethooth.loopChargeTime = val.loopChargeTime
}
//充电时长
let duration = Number(val.chargeDuration)
let hours = Math.floor(duration / 3600)
let minute = Math.floor((duration - (hours * 3600)) / 60)
//充电时长
this.currentBluethooth.chargeDuration = hours + ':' + minute
//充电电量
this.currentBluethooth.chargeElectricity = val.chargeElectricity.toFixed(2)
// uni.setStorageSync('curretBlueth', this.currentBluethooth)
console.log('xxxddddsss')
console.log(this.currentBluethooth)
console.log('xxxddddsss')
this.contactFlag = true;
// if (this.bluetoothList.length == 0) {
// this.bluetoothList.push(this.currentBluethooth)
// uni.setStorageSync('bluetoothList', this.bluetoothList)
// }
// for (let item of this.bluetoothList) {
// if (item.pileCode != this.currentBluethooth.pileCode) {
// this.bluetoothList.push(this.currentBluethooth)
// uni.setStorageSync('bluetoothList', this.bluetoothList)
// }
// }
},
/*往桩写入数据方法*/
writeDataToEquip(msg) {
let _ = this;
/*16进制字符串转字节流数组发送桩*/
function hexStringToArrayBuffer(str) {
if (!str) {
return new ArrayBuffer(0);
}
var buffer = new ArrayBuffer(str.length / 2);
let dataView = new DataView(buffer)
let ind = 0;
for (var i = 0, len = str.length / 2; i < len; i += 1) {
let code = parseInt(str.substr(2 * i, 2), 16)
dataView.setUint8(ind, code)
ind++
}
return buffer;
}
const bufferNew = hexStringToArrayBuffer(msg)
my.writeBLECharacteristicValue({
deviceId: _.scanObj.deviceId, // 设备ID，在【4】里获取到
serviceId: _.scanObj.serviceId, // 服务UUID，在【6】里能获取到
characteristicId: _.writeCharacteristicId, // 特征值，在【7】里能获取到
value: bufferNew,
success(res) {
console.log('jjjjjkkkkkk')
console.log('写入指令成功===' + msg)
console.log('jjjjjkkkkkk')
},
fail(err) {
console.error(err)
utils.errMsg('写入失败,请重新连接');
// 断开连接，重新连接
_.closeDeviceConnect();
}
})
},
/*成功倒计时*/
countDown() {
this.timer = setInterval(() => {
this.count--
if (this.count == 0) {
this.count = 30;
this.successShow = false;
this.show = true;
// console.log('定时器')
setInterval(this.timer)
// uni.switchTab({
// url: '/pages/chargingHome/index'
// })
}
}, 1000)
},
/*跳转到充电桩设置详情页面tabbar的第二个页面*/
goDetail(item) {
this.scanObj = item;
console.log(item)
if (this.contactFlag) { //列表页面已经连接了蓝牙 将解析的蓝牙对象直接带过去
uni.navigateTo({
url: '/pages/bluetoothCharging/index?scanObj=' + encodeURIComponent(JSON.stringify(this
.scanObj)) + '¤tPile=' + encodeURIComponent(JSON.stringify(this
.currentBluethooth))
})
} else {
uni.navigateTo({
url: '/pages/bluetoothCharging/index?scanObj=' + encodeURIComponent(JSON.stringify(this
.scanObj))
})
}
},
/*停止蓝牙连接*/
closeDeviceConnect() {
let _ = this;
this.successShow = false;
this.pendingShow = false;
this.contactFlag = false;
my.disconnectBLEDevice({
deviceId: _.scanObj.deviceId,
success(res) {
console.log(res)
},
fail(err) {
console.log(err)
}
})
},
/*刷卡失败 重新绑定*/
reBind() {
//重新流程走一遍
this.show = false;
this.goScaning()
}
}
}
</script>
<style lang="scss" scoped>
.titleHead {
width: 100%;
height: 66rpx;
font-size: 48rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #2D3748;
line-height: 66rpx;
margin: 0 50rpx 0 50rpx;
}
.content {
width: 100%;
height: 100%;
padding: 0rpx 50rpx 0;
box-sizing: border-box;
.top-title {
font-family: PingFangSC-Medium, PingFang SC;
font-size: 28rpx;
font-weight: 800;
color: #2E3849;
position: relative;
&::after {
content: '';
width: 10rpx;
height: 10rpx;
background: #1677FF;
border-radius: 50%;
position: absolute;
top: 50%;
left: 265rpx;
transform: translateY(-50%);
}
}
.top-titles {
font-family: PingFangSC-Medium, PingFang SC;
font-size: 28rpx;
font-weight: 800;
color: #2E3849;
position: relative;
&::after {
content: '';
width: 10rpx;
height: 10rpx;
background: #1677FF;
border-radius: 50%;
position: absolute;
top: 50%;
left: 130rpx;
transform: translateY(-50%);
}
}
.card {
width: 100%;
background: #FFFFFF;
height: 320rpx;
box-shadow: 0rpx -40rpx 56rpx 2rpx rgba(184, 196, 212, 0.25);
border-radius: 72rpx;
padding: 44rpx 46rpx 44rpx;
display: flex;
flex-direction: column;
margin-bottom: 40rpx;
.card-itemA {
font-size: 28rpx;
font-weight: 800;
display: flex;
justify-content: space-between;
>view {
&:nth-child(1) {
width: 100%;
height: 36rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 800;
color: #2D3748;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:nth-child(2) {
width: 98rpx;
height: 40rpx;
background: #1677FF;
border-radius: 20rpx;
color: #FFFFFF;
line-height: 40rpx;
font-size: 20rpx;
text-align: center;
}
}
}
.card-itemD {
display: flex;
justify-content: space-between;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #2D3748;
margin-top: 32rpx;
}
.card-itemE {
margin-top: 24rpx;
display: flex;
}
.card-itemF {
width: 116rpx;
height: 40rpx;
background: #D8D8D8;
text-align: center;
color: #FFFFFF;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 40rpx;
border-radius: 20rpx;
margin-top: 34rpx;
.error {}
}
.card-itemB {
display: flex;
flex: 1;
justify-content: space-between;
.card-itemB_A {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 20rpx;
padding-top: 10rpx;
>view {
&:nth-child(1) {
font-size: 20rpx;
font-weight: 800;
}
&:nth-child(2) {
width: 116rpx;
height: 40rpx;
background: #05B6B6;
border-radius: 20rpx;
color: #FFFFFF;
text-align: center;
font-size: 20rpx;
line-height: 40rpx;
}
}
.error {
width: 116rpx;
height: 40rpx;
background: #ff9900 !important;
border-radius: 20rpx;
color: #FFFFFF;
text-align: center;
font-size: 20rpx;
line-height: 40rpx;
}
}
.tupian {
height: 160rpx;
width: 184rpx;
background: url('../../static/chongdian.png');
background-size: 100% 100%;
}
}
}
.top-item {
width: 100%;
height: 160rpx;
margin-bottom: 10rpx;
background: #FFFFFF;
box-shadow: 0px 0px 30px 14px rgba(198, 189, 189, 0.13);
border-radius: 40rpx;
margin-top: 40rpx;
padding: 32rpx 20rpx 26rpx 40rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
.lanya-img {
width: 32rpx;
height: 48rpx;
background: url('../../static/lanya.png');
background-size: 100% 100%;
}
.fourG-img {
width: 48rpx;
height: 48rpx;
background: url('../../static/4G.png');
background-size: 100% 100%;
}
>view {
width: 100%;
&:nth-child(1) {
font-size: 28rpx;
font-weight: 800;
}
&:nth-child(2) {
font-size: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
>view {
&:nth-child(1) {
color: #1677FF;
font-weight: 400;
}
}
}
&:nth-child(3) {
font-size: 20rpx;
color: #1677FF;
font-weight: 400;
}
}
}
}
.pending {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
>view {
&:nth-child(1) {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
text-align: center;
width: 100%;
font-weight: 800;
color: #1677FF;
margin-bottom: 20rpx;
}
&:nth-child(2) {
font-size: 24rpx;
width: 100%;
text-align: center;
font-family: PingFangSC-Light, PingFang SC;
font-weight: 300;
color: #000000;
}
}
}
.sucesses {
display: flex;
flex-direction: column;
align-items: center;
padding: 30rpx 0 40rpx 0;
.succ-img {
height: 80rpx;
width: 86rpx;
background: url('../../static/lanyasucc.png');
background-size: 100% 100%;
}
>view {
&:nth-child(1) {
font-size: 44rpx;
font-family: PingFangSC-Light, PingFang SC;
font-weight: 300;
color: #1677FF;
text-align: center;
}
&:nth-child(2) {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
text-align: center;
width: 100%;
font-weight: 300;
color: #000000;
margin-top: 20rpx;
}
&:nth-child(3) {
font-size: 66rpx;
display: flex;
font-family: PingFangSC-Light, PingFang SC;
font-weight: 300;
color: #000000;
margin-top: 48rpx;
>view {
&:nth-child(1) {
margin-right: 30rpx;
}
}
.font {
color: #1677FF;
font-size: 32rpx;
margin: 0 10rpx;
}
}
&:nth-child(4) {
font-size: 24rpx;
font-family: PingFangSC-Light, PingFang SC;
font-weight: 300;
color: #000000;
text-align: left;
// width: 462rpx;
margin-top: 20rpx;
}
&:nth-child(5) {
font-size: 24rpx;
font-family: PingFangSC-Light, PingFang SC;
font-weight: 300;
color: #000000;
text-align: left;
width: 462rpx;
margin-top: 10rpx;
}
}
}
.popsty {
width: 100%;
height: 100%;
padding: 50rpx 50rpx 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #2D3748;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
>view {
&:nth-child(2) {
width: 100%;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1677FF;
text-align: center;
margin-top: 30rpx;
}
&:nth-child(1) {
width: 100%;
text-align: center;
}
}
.btns {
width: 100%;
display: flex;
margin-top: 80rpx;
justify-content: space-between;
>view {
width: 210rpx;
height: 80rpx;
border-radius: 45rpx;
border: 2rpx solid #1677FF;
text-align: center;
line-height: 80rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
text-indent: 0;
&:nth-child(1) {
color: #1677FF;
}
&:nth-child(2) {
color: #FFFFFF;
background: #1677FF;
}
}
}
}
</style>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
0
0- 0
已为社区贡献13条内容
所有评论(0)