<template>
|
<view class="pages-main">
|
<uni-nav-bar :fixed="true" status-bar right-text="" left-text="" :leftWidth="0" rightWidth="150rpx"
|
:title="navigationBarTitle">
|
<view class="uni-navbar-container-inner">
|
<text class="uni-nav-bar-text">{{navigationBarTitle }}</text>
|
</view>
|
<template v-slot:right>
|
<view v-if="currentPage < pageList.length">
|
<a @click="clickScanCode">
|
<uni-icons class="uni-panel-bar-icon" type="scan" size="28"></uni-icons>
|
</a>
|
<a @click="clickMore">
|
<uni-icons class="uni-panel-bar-icon" type="more-filled" size="28"></uni-icons>
|
</a>
|
</view>
|
|
</template>
|
</uni-nav-bar>
|
<swiper v-if="pageList.length > 0" circular indicator-dots class="swiper" :current="currentPage"
|
@change="changeSwiper">
|
<swiper-item v-for="(page,index) in pageList" class="swiper-item">
|
|
<view class="vehicle-header">
|
<view class="link-view">
|
<view v-if="page.link_status">
|
<!-- <image class="img-battery-charging" src="/images/bx_battery3.svg" alt="SVG" /> -->
|
<image class="img-battery-charging" src="/images/bx_battery2.svg" alt="SVG" />
|
<image class="img-battery-soc" :style="{width:(page.soc*0.4)+'rpx'}"
|
src="/images/bx_battery4.svg" alt="SVG" />
|
|
</view>
|
<view v-else>
|
<image class="img-battery" src="/images/bx_battery1.svg" alt="SVG" />
|
</view>
|
<template v-if="page.link_status">
|
<view class="soc-text">{{page.soc}}%</view>
|
<view class="status-text">{{getAgvStateText(page)}}</view>
|
</template>
|
|
|
<view v-else class="gray-text">{{translate('offline')}}</view>
|
</view>
|
</view>
|
<image class="vehicle-img " :class="page.link_status ?'':'gray-image'" mode="aspectFit"
|
src="/images/che.png" alt="picture" />
|
<view v-if="page.link_status" class="img-button-group">
|
<view type="primary" plain="true" class="img-text-button" @click="clickToMap(index,page)">
|
<a-button class="img-button" color='primary'>
|
<text class="ico map" />
|
</a-button>
|
<text>{{translate('scenes')}}</text>
|
|
</view>
|
<navigator :url="`/pages/task/log-list?ip=${page.ip}`" hover-class="other-navigator-hover">
|
<view type="primary" class="img-text-button">
|
<a-button class="img-button" color='primary'>
|
<text class="ico task-list" />
|
</a-button>
|
<text>{{translate('tasks')}}</text>
|
</view>
|
</navigator>
|
|
|
</view>
|
<view v-else class="unlink-content">
|
<view class="content2" v-if="page.conntecting">
|
<view class="auto-circle"></view>
|
|
<view class="text">{{translate('connecting')}}...</view>
|
</view>
|
<view class="content2" v-else>
|
<view class="text">{{translate('vehicle_offline_to_reconnect')}}</view>
|
<a-button type="primary" class="button" @click="clickRelink">{{translate('reconnect')}}
|
</a-button>
|
</view>
|
|
</view>
|
|
</swiper-item>
|
<swiper-item class="swiper-item">
|
|
<image class="title-img gray-image" src="/images/image_15.png" alt="picture" />
|
<view class="button-group">
|
<a-button type="primary" class="button"
|
@click="clickScanCode">{{translate('scan_add_device')}}</a-button>
|
<a-button type="ghost" class="button"
|
@click="clickManualAdd">{{translate('manual_add_device')}}</a-button>
|
</view>
|
</swiper-item>
|
</swiper>
|
<view v-else class="no-page items-center">
|
<view class="content ">
|
<image class="title-img gray-image" src="/images/image_15.png" alt="picture" />
|
<view class="button-group">
|
<a-button type="primary" class="button"
|
@click="clickScanCode">{{translate('scan_add_device')}}</a-button>
|
<a-button type="ghost" class="button"
|
@click="clickManualAdd">{{translate('manual_add_device')}}</a-button>
|
</view>
|
</view>
|
</view>
|
<view>
|
<uni-popup ref="refPopupInput" type="dialog">
|
<uni-popup-dialog mode="input" :title="translate('connect_device')" :value="inputPopupValue"
|
:placeholder="translate('input_vehicle_ip')" :beforeClose="true" @confirm="dialogInputConfirm"
|
@close="dialogInputClose"></uni-popup-dialog>
|
</uni-popup>
|
<!-- <uni-popup ref="refPopupMessage" type="dialog">
|
<uni-popup-dialog type="info" title="" :content="inputPopupValue"
|
@confirm="dialogMessageConfirm"></uni-popup-dialog>
|
</uni-popup> -->
|
<uni-popup ref="refPopupMenu" background-color="transparent" maskBackgroundColor="rgba(0, 0, 0, 0.2)">
|
<view class="popup-content" @click="closeMenu">
|
<view class="popup-content-menu ">
|
<a-button class="popup-content-menu-item" v-for="(item,index) in menuList" :key="index"
|
@click="menuItemChange(item)" :style="{'color':item.color}">
|
<view class="text">{{item.text}}</view>
|
<view v-if="item.id=='update' && newCarVersion" class="new" />
|
<view class="ico" :class="item.ico" />
|
<uni-icons :type="item.ico" size="20"></uni-icons>
|
</a-button>
|
</view>
|
</view>
|
</uni-popup>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
ref
|
} from "vue";
|
import {
|
session,
|
showToast,
|
showModal,
|
showError,
|
showInfo,
|
} from "@/comm/utils.js"
|
import TaskInit from "@/comm/extend.js"
|
import {
|
getAllScene,
|
mtBattery,
|
getAgvState,
|
checkIpLinkSuccess,
|
getShellVersion
|
} from "@/api/vehicle.js"
|
|
import {
|
Button
|
} from 'antd-mobile-vue-next'
|
export default {
|
name: "PagesMain",
|
components: {
|
'a-button': Button
|
},
|
data() {
|
return {
|
navigationBarTitle: "",
|
currentPage: 0,
|
pageList: [],
|
timerBatteryId: 0,
|
inputPopupValue: "",
|
menuList: [{
|
id: "edit",
|
ico: "edit-line",
|
text: this.translate('edit'),
|
color: "black"
|
},
|
{
|
id: "update",
|
ico: "update",
|
text: this.translate('update'),
|
color: "black"
|
},
|
{
|
id: "error",
|
ico: "info",
|
text: this.translate('errors'),
|
color: "black",
|
|
|
},
|
// {
|
// id: "tutorial",
|
// ico: "book",
|
// text: this.translate('tutorial'),
|
// color: "black"
|
// },
|
// {
|
// id: "share",
|
// ico: "share",
|
// text: this.translate('share'),
|
// color: "black"
|
// },
|
{
|
id: "backup",
|
ico: "copy",
|
text: this.translate('backup'),
|
color: "black"
|
},
|
{
|
id: "remove",
|
ico: "delete-outline",
|
text: this.translate('remove'),
|
color: "red"
|
}
|
]
|
|
}
|
},
|
onShow() {
|
console.log("show")
|
if (this.timerBatteryId) {
|
clearInterval(this.timerBatteryId)
|
}
|
setTimeout(() => {
|
this.loadVehicleBattery()
|
}, 2000)
|
this.timerBatteryId = setInterval(() => {
|
this.loadVehicleBattery()
|
}, 60 * 1000)
|
|
},
|
onHide() {
|
if (this.timerBatteryId) {
|
clearInterval(this.timerBatteryId)
|
this.timerBatteryId = 0
|
}
|
},
|
onLoad(option) {
|
const ip = option.connectedIp || ""
|
this.loadData(ip)
|
},
|
computed: {
|
tabList() {
|
return [...this.pageList, {
|
ip: ""
|
}]
|
},
|
newCarVersion() {
|
const page = this.pageList[this.currentPage]
|
return page?.newVer || false
|
}
|
|
},
|
|
methods: {
|
setData(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
async loadData(ip) {
|
|
try {
|
this.loadCarSaveVersion()
|
let list = session.getValue("vehicles") || []
|
|
list.forEach((page) => {
|
page.soc = 0
|
page.link_status = false
|
})
|
let curIndex = -1
|
if (ip)
|
curIndex = list.findIndex((a) => a.ip == ip)
|
if (curIndex < 0) {
|
|
this.pageList = list
|
if (this.pageList.length > 0)
|
this.navigationBarTitle = this.pageList[0].name
|
else
|
this.navigationBarTitle = ""
|
for (let i in list) {
|
const page = list[i]
|
const battery = await this.loadMTBattery(page.ip)
|
if (battery > -1) {
|
page.soc = battery
|
page.status = await this.loadAgvState(page.ip)
|
page.link_status = true
|
page.newVer = await this.checkServerVersion(page.ip)
|
this.setData({
|
currentPage: i
|
})
|
break
|
}
|
}
|
this.setData({
|
pageList: list
|
})
|
//this.pageList = [...list]
|
} else {
|
this.setData({
|
currentPage: curIndex
|
})
|
const page = list[curIndex]
|
const battery = await this.loadMTBattery(page.ip)
|
if (battery > -1) {
|
page.soc = battery
|
page.link_status = true
|
page.status = await this.loadAgvState(page.ip)
|
page.newVer = await this.checkServerVersion(page.ip)
|
} else {
|
page.link_status = false
|
}
|
|
this.pageList = [...list]
|
this.navigationBarTitle = page.name
|
}
|
} catch (ex) {
|
|
showError(ex, this.translate('error'))
|
}
|
},
|
|
async loadVehicleBattery() {
|
try {
|
|
const list = this.pageList
|
if (this.currentPage < list.length && this.currentPage > -1) {
|
const page = list[this.currentPage]
|
const battery = await this.loadMTBattery(page.ip)
|
if (battery > -1) {
|
page.soc = battery
|
page.status = await this.loadAgvState(page.ip)
|
page.newVer = await this.checkServerVersion(page.ip)
|
page.link_status = true
|
|
} else {
|
page.soc = 0
|
page.link_status = false
|
}
|
this.pageList = [...list]
|
}
|
|
// this.pageList = [...list]
|
|
} catch (ex) {
|
// showError(ex,this.translate('error'))
|
showToast(ex)
|
}
|
|
},
|
async loadMTBattery(ip) {
|
try {
|
let battery = await mtBattery(ip)
|
let str = `${battery}`
|
str = str.trim()
|
str = str.replace("%", "")
|
battery = parseInt(str)
|
return battery
|
} catch (ex) {
|
|
return -1
|
}
|
|
},
|
|
|
async loadAgvState(ip) {
|
try {
|
let info = await getAgvState(ip)
|
return info.status || 0
|
} catch (ex) {
|
|
return 0
|
}
|
|
},
|
getAgvStateText(page) {
|
let text = ""
|
if (page.status == 1) {
|
text = this.translate('idle')
|
} else if (page.status == 2) {
|
text = this.translate('at_work')
|
} else if (page.status == 3) {
|
text = this.translate('fault')
|
} else {
|
text = `${this.translate('state')}:${page.status}`
|
}
|
return text
|
},
|
async checkPageConnected(index) {
|
try {
|
const list = this.pageList
|
const page = list[index]
|
let battery = await this.loadMTBattery(page.ip)
|
if (battery > -1) {
|
page.soc = battery
|
page.link_status = true
|
page.status = await this.loadAgvState(page.ip)
|
page.newVer = await this.checkServerVersion(page.ip)
|
} else {
|
page.link_status = false
|
}
|
this.pageList = [...list]
|
} catch (ex) {
|
|
|
}
|
|
},
|
changeSwiper(evt) {
|
|
let index = evt.target.current || evt.detail.current;
|
this.setData({
|
currentPage: index
|
})
|
if (this.pageList.length == this.currentPage)
|
this.navigationBarTitle = ""
|
else
|
this.navigationBarTitle = this.pageList[this.currentPage].name
|
this.loadVehicleBattery()
|
},
|
async clickRelink() {
|
try {
|
|
const page = this.pageList[this.currentPage]
|
page.conntecting = true
|
let res = await this.checkConnectSuccess(page.ip)
|
if (!res) {
|
page.conntecting = false
|
uni.navigateTo({
|
url: `/pages/index/connect?ip=${ page.ip}&sid=${ page.wifi?.sid || ""}&reconnect=true`
|
})
|
} else {
|
page.conntecting = false
|
const list = this.pageList
|
list.forEach((page2) => {
|
if (page.ip != page2.ip) {
|
page2.soc = 0
|
page2.link_status = false
|
}
|
})
|
page.connectState = 2
|
const battery = await this.loadMTBattery(page.ip)
|
if (battery > -1) {
|
page.soc = battery
|
page.link_status = true
|
page.status = await this.loadAgvState(page.ip)
|
page.newVer = await this.checkServerVersion(page.ip)
|
this.setData({
|
pageList: list
|
})
|
}
|
}
|
} catch (ex) {
|
showError(ex, this.translate('error'))
|
}
|
},
|
async checkConnectSuccess(ip) {
|
try {
|
const res = await checkIpLinkSuccess(ip)
|
return true
|
} catch (ex) {
|
return false
|
}
|
|
},
|
|
|
clickScanCode() {
|
const that = this
|
uni.scanCode({
|
scanType: ["qrCode"],
|
success: function(res) {
|
console.log(res)
|
const result = res.result || ""
|
const arCode = result.split(";")
|
if (arCode.length != 3) {
|
showToast(this.translate("invalid_qr_code"))
|
return
|
}
|
let ip = arCode[0].trim()
|
if (!ip || !arCode[0].trim()) {
|
showToast(this.translate("invalid_qr_code"))
|
return
|
}
|
const curIndex = that.pageList.findIndex((a) => a.ip == ip)
|
if (curIndex < 0) {
|
if (that.pageList.length === 3) {
|
showToast(this.translate("only_3_vehicles_to_added"))
|
return
|
}
|
uni.navigateTo({
|
url: `/pages/index/connect?ip=${ ip}&sid=${ arCode[1]}&password=${ arCode[2]}`
|
})
|
} else {
|
showToast(this.translate('vehicle_ip_has_added'))
|
this.setData({
|
currentPage: curIndex
|
})
|
}
|
},
|
})
|
|
},
|
clickManualAdd() {
|
this.inputPopupValue = ""
|
// const _this = this
|
// uni.showModal({
|
// title: this.translate('connect_device'),
|
// showCancel: true,
|
// editable: true,
|
// placeholderText:this.translate('input_vehicle_ip'),
|
// success: function(res) {
|
// if (res.confirm) {
|
// _this.dialogInputConfirm(res.content)
|
// }
|
// }
|
// });
|
this.$refs.refPopupInput.open()
|
},
|
|
clickMore() {
|
if (this.currentPage < this.pageList.length) {
|
this.$refs.refPopupMenu.open("top")
|
}
|
|
},
|
clickInfo(page) {
|
const that = this
|
uni.navigateTo({
|
url: `/pages/index/detail?param=${JSON.stringify(page)}`,
|
events: {
|
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
|
remove_vehicle: function(data) {
|
const list = that.pageList
|
const index = that.currentPage
|
list.splice(index, 1)
|
that.setData({
|
currentPage: index,
|
pageList: list
|
})
|
session.setValue("vehicles", list)
|
// if (list.length > 0)
|
// that.navigationBarTitle = that.pageList[that.currentPage].name
|
// else
|
// that.navigationBarTitle = "添加设备"
|
uni.reLaunch({
|
url: "/pages/indde/index"
|
})
|
},
|
update_vehicle: function(data) {
|
console.log("update_vehicle", data)
|
const list = that.pageList
|
Object.assign(list[that.currentPage], data)
|
that.setData({
|
pageList: list
|
})
|
session.setValue("vehicles", list)
|
that.navigationBarTitle = list[that.currentPage].name
|
},
|
}
|
})
|
},
|
async clickToMap(index, page) {
|
try {
|
console.log("clicktomap")
|
const _this = this
|
const res = await getAllScene(page.ip) || []
|
const list = res?.sceneList || []
|
if (list.length === 0) {
|
uni.navigateTo({
|
url: `/pages/map/scene?ip=${page.ip}`,
|
events: {
|
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
|
create_finish: function() {
|
setTimeout(() => {
|
_this.clickToMap(index, page)
|
}, 500);
|
|
},
|
}
|
})
|
return
|
}
|
// getApp().globalData.sceneList = list
|
|
uni.navigateTo({
|
url: `/pages/map/index?ip=${page.ip}`,
|
events: {
|
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
|
check_connect: function(flag) {
|
page.link_status = flag
|
console.log(flag)
|
_this.checkPageConnected(index)
|
},
|
}
|
})
|
} catch (ex) {
|
showError(ex, this.translate('error'))
|
}
|
|
},
|
isValidIP(ip) {
|
// IPv4 地址正则表达式
|
const ipRegex =
|
/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
|
// 检查是否符合 IPv4 地址格式
|
return ipRegex.test(ip);
|
},
|
dialogInputConfirm(val) {
|
|
let text = val.trim()
|
if (!text) {
|
showToast(this.translate('input_vehicle_ip'))
|
this.$refs.refPopupInput.open()
|
return
|
}
|
if (!this.isValidIP(text)) {
|
showToast(this.translate('invalid_ip'))
|
this.$refs.refPopupInput.open()
|
return
|
}
|
|
|
this.$refs.refPopupInput.close()
|
|
const curIndex = this.pageList.findIndex((a) => a.ip == text)
|
if (curIndex < 0) {
|
if (this.pageList.length === 3) {
|
showToast(this.translate('only_3_vehicles_to_added'))
|
return
|
}
|
uni.navigateTo({
|
url: `/pages/index/connect?ip=${text}`
|
})
|
} else {
|
showToast(this.translate('vehicle_ip_has_added'))
|
this.setData({
|
currentPage: curIndex
|
})
|
return
|
}
|
|
|
},
|
dialogInputClose() {
|
this.$refs.refPopupInput.close()
|
},
|
menuItemChange(item) {
|
if (item.id == 'edit') {
|
const page = this.pageList[this.currentPage]
|
this.clickInfo(page)
|
|
} else if (item.id == "remove") {
|
const page = this.pageList[this.currentPage]
|
showModal({
|
content: `${this.translate('ask_delete_device')}`,
|
confirmText: this.translate('remove'),
|
cancelText: this.translate("cancel"),
|
|
}).then((res) => {
|
if (res) {
|
const list = this.pageList
|
let curPage = this.currentPage
|
list.splice(this.currentPage, 1)
|
|
// this.setData({
|
// currentPage: 0,
|
// pageList: list
|
// })
|
console.log(curPage, this.currentPage, this.pageList)
|
session.setValue("vehicles", list)
|
// if (list.length > 0)
|
// this.navigationBarTitle = this.pageList[this.currentPage].name
|
// else
|
// this.navigationBarTitle = "添加设备"
|
uni.reLaunch({
|
url: "/pages/index/index"
|
})
|
|
}
|
})
|
} else if (item.id == "backup") {
|
const page = this.pageList[this.currentPage]
|
uni.navigateTo({
|
|
url: `/pages/index/backup?ip=${page.ip}`
|
})
|
} else if (item.id == "error") {
|
const page = this.pageList[this.currentPage]
|
uni.navigateTo({
|
|
url: `/pages/error/index?ip=${page.ip}`
|
})
|
} else if (item.id == "update") {
|
const page = this.pageList[this.currentPage]
|
uni.navigateTo({
|
url: `/pages/version/car-program-upload?ip=${page.ip}`
|
})
|
}
|
},
|
async loadCarSaveVersion() {
|
try {
|
var verName = ""
|
var fileList = []
|
try {
|
fileList = await TaskInit.fileUtils.listSavedFiles('car_version')
|
} catch (ex) {
|
console.log(ex)
|
}
|
|
fileList.forEach((ele) => {
|
if (verName) {
|
if (verName < ele.name) {
|
verName = ele.name
|
}
|
} else {
|
verName = ele.name
|
}
|
})
|
|
this.localCarVersion = this.getVersionFromFileName(verName)
|
} catch (ex) {
|
this.localCarVersion = {
|
date: "",
|
ver: ""
|
}
|
}
|
},
|
getVersionFromFileName(fileName) {
|
if (!fileName.trim()) {
|
return {
|
date:"" ,
|
ver: ""
|
}
|
}
|
let versionInfos = fileName.trim().split('_');
|
let date = versionInfos[1]
|
let version2 = versionInfos[2]
|
let versionInfos2 = version2.split('.');
|
versionInfos2.pop()
|
return {
|
date,
|
ver: versionInfos2.join(".")
|
}
|
},
|
async checkServerVersion(ip) {
|
try {
|
|
if (!this.localCarVersion?.ver) {
|
return false
|
}
|
const verInfo = await getShellVersion(ip)
|
console.log(verInfo)
|
|
if (verInfo?.software_version) {
|
|
const isVer = `${this.localCarVersion?.date ||""}_${this.localCarVersion?.ver ||""}` > verInfo
|
.software_version
|
return isVer
|
}
|
|
} catch (ex) {
|
return false
|
}
|
return false
|
|
},
|
|
closeMenu() {
|
this.$refs.refPopupMenu.close()
|
},
|
translate(t, values) {
|
if (typeof this.$t == "function") {
|
const message = this.$t(`page.${t}`)
|
if (values) {
|
return message.replace(/{(\d+)}/g, (match, index) => {
|
const value = values[index]
|
return value !== undefined ? value : match
|
})
|
} else return message
|
} else return t;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.pages-main {
|
display: flex;
|
width: 750rpx;
|
height: 100vh;
|
flex-direction: column;
|
font-size: 30rpx;
|
background-color: #fff;
|
|
.justify-center {
|
justify-content: center;
|
}
|
|
.items-center {
|
align-items: center
|
}
|
|
.swiper {
|
flex: 1;
|
width: 100%;
|
|
|
.swiper-item {
|
width: 100%;
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
|
.vehicle-header {
|
|
width: 700rpx;
|
margin-left: 20rpx;
|
|
|
.link-view {
|
width: 100%;
|
height: 80rpx;
|
position: relative;
|
|
.img-battery {
|
position: absolute;
|
left: 0;
|
width: 64rpx;
|
height: 64rpx;
|
}
|
|
.img-battery-charging {
|
position: absolute;
|
left: 0;
|
width: 65rpx;
|
height: 64rpx;
|
}
|
|
.img-battery-charging2 {
|
position: absolute;
|
left: 0;
|
width: 90rpx;
|
height: 64rpx;
|
}
|
|
.img-battery-soc {
|
position: absolute;
|
left: 10rpx;
|
top: 21rpx;
|
width: 40rpx;
|
height: 22rpx;
|
background-color: #73D13D;
|
}
|
|
.gray-text {
|
position: absolute;
|
left: 90rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
color: #ccc;
|
}
|
|
|
.soc-text {
|
border-width: 0px;
|
position: absolute;
|
left: 90rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
}
|
|
.status-text {
|
border-width: 0px;
|
position: absolute;
|
left: 160rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
}
|
|
.charge2 {
|
background-color: #fff;
|
}
|
|
}
|
}
|
|
|
.img-button-group {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: row;
|
|
|
.img-text-button {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
margin: 50rpx;
|
|
.img-button {
|
display: flex;
|
width: 160rpx !important;
|
height: 160rpx !important;
|
align-items: center;
|
justify-content: center;
|
|
.ico {
|
font-size: 72rpx;
|
color: #1890FF;
|
}
|
|
|
}
|
|
text {
|
margin-top: 20rpx;
|
}
|
|
}
|
}
|
|
}
|
}
|
|
.no-page {
|
display: flex;
|
width: 100%;
|
flex: 1;
|
|
.content {
|
width: 750rpx;
|
display: flex;
|
flex-direction: column;
|
|
}
|
|
}
|
|
.title-img {
|
margin-top: 40rpx;
|
display: block;
|
margin-left: calc(50% - 180rpx);
|
width: 360rpx;
|
height: 500rpx;
|
}
|
|
.vehicle-img {
|
margin-top: 20rpx;
|
margin-left: calc(50% - 325rpx);
|
display: block;
|
width: 650rpx;
|
height: 692rpx;
|
|
}
|
|
.gray-image {
|
filter: grayscale(100%);
|
opacity: 0.5;
|
}
|
|
.unlink-content {
|
width: 100%;
|
flex: 1;
|
|
.content {
|
align-items: center;
|
text-align: center;
|
display: flex;
|
flex-direction: column;
|
font-size: 36rpx;
|
font-weight: 400;
|
}
|
|
.content2 {
|
margin: auto;
|
|
.auto-circle {
|
margin: auto;
|
width: 160rpx;
|
height: 160rpx;
|
border-radius: 50%;
|
border: 28rpx solid #1890FF;
|
border-top-color: transparent;
|
animation: drawCircle 1s infinite linear;
|
}
|
|
@keyframes drawCircle {
|
0% {
|
transform: rotate(0deg);
|
}
|
|
100% {
|
transform: rotate(360deg);
|
}
|
}
|
|
.text {
|
text-align: center;
|
margin-top: 20rpx;
|
margin-bottom: 20rpx;
|
}
|
|
}
|
|
}
|
|
.button-group {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
font-size: 30rpx !important;
|
}
|
|
.button {
|
margin: auto;
|
margin-top: 20rpx;
|
width: 400rpx !important;
|
border-radius: 4rpx;
|
}
|
|
.popup-content {
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
background-color: transparent;
|
}
|
|
.popup-content-menu {
|
margin-top: 150rpx;
|
margin-left: calc(750rpx - 330rpx);
|
width: 320rpx;
|
max-height: 50vh;
|
overflow: auto;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
background-color: #fff;
|
border-radius: 4rpx;
|
border: 2rpx solid gray;
|
}
|
|
.popup-content-menu-item {
|
display: flex;
|
flex-wrap: nowrap;
|
flex-direction: row !important;
|
// align-items: center;
|
padding: 10rpx 20rpx;
|
font-size: 32rpx;
|
|
.text {
|
flex: 1;
|
text-align: left;
|
}
|
|
.new {
|
background-color: red;
|
width: 10rpx;
|
height: 10rpx;
|
margin: 5rpx 10rpx;
|
border-radius: 5rpx;
|
}
|
}
|
|
|
|
}
|
</style>
|
