810 lines
25 KiB
Vue
810 lines
25 KiB
Vue
<template>
|
|
<view class="page" ref="page">
|
|
<page-header></page-header>
|
|
<view class="content">
|
|
<uni-row :gutter="12">
|
|
<uni-col :span="12">
|
|
<uni-row :gutter="12">
|
|
<uni-col :span="8">
|
|
<view class="block">
|
|
<view class="title">
|
|
<span>{{ temprator }}</span>
|
|
<span>°C</span>
|
|
</view>
|
|
<span>温度</span>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="8">
|
|
<view class="block">
|
|
<view class="title">
|
|
<span>{{ humidity }}</span>
|
|
<span>%RH</span>
|
|
</view>
|
|
<span>湿度</span>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="8">
|
|
<view class="block">
|
|
<view class="title">
|
|
<span>{{ pressure }}</span>
|
|
<span>Pa</span>
|
|
</view>
|
|
<span>压差</span>
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</uni-col>
|
|
<uni-col :span="12">
|
|
<uni-row :gutter="12">
|
|
<uni-col :span="12">
|
|
<view class="block">
|
|
<template v-if="connect">
|
|
<view class="tag">
|
|
<span class="icon wifi"></span>
|
|
</view>
|
|
<span>联网中</span>
|
|
</template>
|
|
<template v-else>
|
|
<view class="tag">
|
|
<span class="icon nowifi"></span>
|
|
</view>
|
|
<span>未连接</span>
|
|
</template>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="12">
|
|
<view class="block">
|
|
<template v-if="clean">
|
|
<view class="tag" @click="cleanMode(false)">
|
|
<span class="icon clean"></span>
|
|
</view>
|
|
<span>清扫模式</span>
|
|
</template>
|
|
<template v-else>
|
|
<view class="tag" @click="cleanMode(true)">
|
|
<span class="icon autorun"></span>
|
|
</view>
|
|
<span>自动模式</span>
|
|
</template>
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</uni-col>
|
|
</uni-row>
|
|
|
|
<scroll-view class="column" scroll-y="true">
|
|
|
|
<view class="list" v-for="(item, index) in sortedList" :key="index">
|
|
<uni-row style="width: 100%;text-align: left;display: flex;align-items: center;">
|
|
<uni-col style="flex: 0 0 60px;">
|
|
<uni-row type="flex" justify="center" align="middle" style="height: 40px;">
|
|
<span class="circle">{{index+1}}</span>
|
|
</uni-row>
|
|
</uni-col>
|
|
<uni-col style="flex: 1;">
|
|
<uni-row v-if="item.ic" class="info" :class="{
|
|
'over': item.isWarning == 'over', 'near': item.isWarning == 'near'
|
|
}">
|
|
<view>
|
|
{{ item.rfid }}
|
|
</view>
|
|
</uni-row>
|
|
<uni-row v-else class="info">
|
|
<span class="out-text"></span>
|
|
</uni-row>
|
|
</uni-col>
|
|
<uni-col style="flex: 0 0 200px;">
|
|
<uni-row v-if="item.ic" class="info-right" :class="{
|
|
'over': item.isWarning == 'over', 'near': item.isWarning == 'near'
|
|
}">
|
|
{{ item.text }}
|
|
</uni-row>
|
|
</uni-col>
|
|
</uni-row>
|
|
</view>
|
|
</scroll-view>
|
|
<uni-row :gutter="12" class="bottom">
|
|
<uni-col :span="6">
|
|
<view class="block">
|
|
<view class="tag" @click="lightClick">
|
|
<span class="icon light"></span>
|
|
<template v-if="light">
|
|
<span class="tag-text active">开启</span>
|
|
</template>
|
|
<template v-else>
|
|
<span class="tag-text">关闭</span>
|
|
</template>
|
|
</view>
|
|
<span>照明</span>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="block">
|
|
<view class="tag" @click="doorClick">
|
|
<span class="icon door"></span>
|
|
<template v-if="door">
|
|
<span class="tag-text active">开启</span>
|
|
</template>
|
|
<template v-else>
|
|
<span class="tag-text">关闭</span>
|
|
</template>
|
|
</view>
|
|
<span>开门</span>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="block">
|
|
<view class="tag" @click="disinfectClick">
|
|
<span class="icon xiaodu"></span>
|
|
<template v-if="disinfect">
|
|
<span class="tag-text active">开启</span>
|
|
</template>
|
|
<template v-else>
|
|
<span class="tag-text">关闭</span>
|
|
</template>
|
|
</view>
|
|
<span>消毒</span>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="block">
|
|
<view class="tag" @click="vacuumClick">
|
|
<span class="icon zhenkong"></span>
|
|
<template v-if="vacuum">
|
|
<span class="tag-text active">开启</span>
|
|
</template>
|
|
<template v-else>
|
|
<span class="tag-text">关闭</span>
|
|
</template>
|
|
</view>
|
|
<span>真空</span>
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</view>
|
|
<notice ref="notice"></notice>
|
|
<slot-notice ref="doorNotice" title="选择门">
|
|
<view class="door-select-content">
|
|
<view class="door-btn" @click="openLeftDoor">
|
|
<text>开左门</text>
|
|
</view>
|
|
<view class="door-btn" @click="openRightDoor">
|
|
<text>开右门</text>
|
|
</view>
|
|
</view>
|
|
</slot-notice>
|
|
<slot-notice ref="actionNotice" title="选择操作">
|
|
<view class="door-select-content">
|
|
<view class="door-btn" @click="storeEndoscope">
|
|
<text>存入</text>
|
|
</view>
|
|
<view class="door-btn" @click="takeEndoscope">
|
|
<text>取出</text>
|
|
</view>
|
|
</view>
|
|
</slot-notice>
|
|
<page-footer></page-footer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import PageHeader from '@/components/PageHeader.vue'
|
|
import PageFooter from '@/components/PageFooter.vue'
|
|
import Notice from '@/components/Notice.vue'
|
|
import SlotNotice from '@/components/SlotNotice.vue'
|
|
import { formatDateTime, getTimeDifference } from '@/utils/common.js'
|
|
import { getDataList } from '@/db/sqlite.js'
|
|
import * as db from '@/db/sqlite.js'
|
|
import cmd from '@/utils/cmd.js'
|
|
import storage from '@/utils/storage.js'
|
|
import * as Api from '@/api/index.js'
|
|
export default {
|
|
components: {
|
|
PageFooter, PageHeader, Notice, SlotNotice
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
list: [
|
|
// { ic: 'SN00394280', text: '已存入：32h 42m', isWarning: 'over' },
|
|
// { ic: 'SN00394281', text: '已存入：25h 15m', isWarning: 'near' },
|
|
// { ic: 'SN00394282', text: '已存入：5h 30m', isWarning: false },
|
|
// { ic: 'SN00394283', text: '已存入：12h 20m', isWarning: false },
|
|
// { ic: 'SN00394284', text: '已存入：8h 45m', isWarning: false },
|
|
// { ic: '', text: '', isWarning: false },
|
|
// { ic: '', text: '', isWarning: false },
|
|
// { ic: '', text: '', isWarning: false },
|
|
// { ic: 'SN00394285', text: '已存入：40h 10m', isWarning: 'over' },
|
|
// { ic: 'SN00394286', text: '已存入：22h 05m', isWarning: 'near' },
|
|
// { ic: 'SN00394287', text: '已存入：3h 55m', isWarning: false },
|
|
// { ic: '', text: '', isWarning: false },
|
|
// { ic: '', text: '', isWarning: false },
|
|
// { ic: '', text: '', isWarning: false },
|
|
// { ic: '', text: '', isWarning: false },
|
|
// { ic: '', text: '', isWarning: false }
|
|
],
|
|
timer: null, // 定时器
|
|
timeouter: null, // 延时器
|
|
currentCardNumber: '', // 当前卡号
|
|
|
|
currentName: '' // 当前用户名
|
|
}
|
|
},
|
|
computed: {
|
|
// 存储临期
|
|
endoNear() {
|
|
return this.$store.state.run.endoNear
|
|
},
|
|
// 存储超期
|
|
endoOver() {
|
|
return this.$store.state.run.endoOver
|
|
},
|
|
temprator() {
|
|
return this.$store.state.sensor.temp
|
|
},
|
|
humidity() {
|
|
return this.$store.state.sensor.humi
|
|
},
|
|
pressure() {
|
|
return this.$store.state.sensor.pressure
|
|
},
|
|
disinfect() {
|
|
// 消毒
|
|
return this.$store.state.relay.disinfect
|
|
},
|
|
vacuum() {
|
|
//真空
|
|
return this.$store.state.relay.vacuum
|
|
},
|
|
light() {
|
|
// 照明
|
|
return this.$store.state.relay.light
|
|
},
|
|
door() {
|
|
// 照明
|
|
return this.$store.state.relay.door
|
|
},
|
|
clean() {
|
|
// 清扫模式
|
|
return this.$store.state.clean
|
|
},
|
|
connect() {
|
|
// 联网状态
|
|
return this.$store.state.connect
|
|
},
|
|
sortedList() {
|
|
// 有数据的在前面，空数据在后面
|
|
let hasData = this.list.filter(item => item.ic && item.ic !== '')
|
|
let noData = this.list.filter(item => !item.ic || item.ic === '')
|
|
return [...hasData, ...noData]
|
|
}
|
|
},
|
|
watch: {},
|
|
onBackPress(option) {
|
|
uni.redirectTo({ url: '/pages/start', animationType: 'fade-out' })
|
|
return true;
|
|
},
|
|
async onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
uni.$on('notice', (data) => { this.showNotice(data) })
|
|
uni.$on('showDoorSelect', (cardNumber) => { this.showDoorSelect(cardNumber) })
|
|
uni.$on('showActionSelect', (cardNumber) => { this.showActionSelect(cardNumber) })
|
|
this.getData() // 注释掉以使用测试数据
|
|
this.startTimer()
|
|
|
|
},
|
|
onHide() {
|
|
uni.$off('notice')
|
|
uni.$off('showDoorSelect')
|
|
uni.$off('showActionSelect')
|
|
this.clearTimer()
|
|
},
|
|
methods: {
|
|
startTimer() {
|
|
this.timer = setInterval(() => {
|
|
this.getData() // 注释掉以使用测试数据
|
|
}, 60000)
|
|
},
|
|
clearTimer() {
|
|
clearInterval(this.timer)
|
|
},
|
|
showNotice(data) {
|
|
this.$nextTick(() => {
|
|
this.$refs.notice.open({
|
|
title: data.title || '',
|
|
content: data.content || '',
|
|
})
|
|
this.clearTimer()
|
|
this.getData()
|
|
this.startTimer()
|
|
})
|
|
},
|
|
async getData() {
|
|
let res = await getDataList('scope', 1, 16, 'key', 'asc')
|
|
if (res) {
|
|
this.handleData(res.list)
|
|
}
|
|
},
|
|
handleData(list) {
|
|
// console.log('handleData', list)
|
|
let data = []
|
|
for (let i = 0; i < 16; i++) {
|
|
data.push({ ic: '', text: '', isWarning: false, rfid: '' })
|
|
}
|
|
this.list = data
|
|
let curDate = formatDateTime()
|
|
for (let key = 0; key < list.length; key++) {
|
|
let i = list[key]
|
|
// 与当前时间差
|
|
let diff = getTimeDifference(formatDateTime(i.time), curDate)
|
|
let diffText = '已存入：' + diff.hours + 'h ' + diff.minutes + 'm'
|
|
|
|
let item = this.list[key]
|
|
item.ic = i.ic
|
|
item.text = ''
|
|
item.rfid = i.rfid
|
|
item.isWarning = false
|
|
if (i.ic != '') {
|
|
item.text = diffText
|
|
if (diff.hours >= this.endoNear) {
|
|
item.isWarning = 'near'
|
|
}
|
|
if (diff.hours >= this.endoOver) {
|
|
item.isWarning = 'over'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
lightClick() {
|
|
let light = this.$store.state.relay.light
|
|
cmd.Light(!light)
|
|
},
|
|
doorClick() {
|
|
// 调试手动关门
|
|
// let door = this.$store.state.relay.door
|
|
// cmd.Door(true)
|
|
// this.$refs.doorNotice.open()
|
|
uni.showToast({ title: '手动关门', icon: 'none' })
|
|
uni.$emit('closeDoor');
|
|
},
|
|
disinfectClick() {
|
|
// 消毒手动开启
|
|
if (this.$store.state.relay.disinfect == true) {
|
|
return false
|
|
}
|
|
let timer = this.$store.state.run.disinfectTime * 60 * 1000
|
|
clearTimeout(this.timeouter)
|
|
this.$store.state.autoDisinfect = false
|
|
cmd.Disinfect(true)
|
|
cmd.Wind(true)
|
|
this.timeouter = setTimeout(() => {
|
|
// 延时关闭
|
|
this.$store.state.autoDisinfect = true
|
|
cmd.Disinfect(false)
|
|
}, timer)
|
|
},
|
|
vacuumClick() {
|
|
|
|
},
|
|
openLeftDoor() {
|
|
// 打开左门
|
|
this.$refs.doorNotice.close()
|
|
cmd.LeftDoor(true)
|
|
// 通知start页面记录日志
|
|
uni.$emit('addLog', { name: this.currentCardNumber, action: '开左门' })
|
|
uni.showToast({
|
|
title: '左门已开启',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
openRightDoor() {
|
|
// 打开右门
|
|
this.$refs.doorNotice.close()
|
|
cmd.RightDoor(true)
|
|
// 通知start页面记录日志
|
|
uni.$emit('addLog', { name: this.currentCardNumber, action: '开右门' })
|
|
uni.showToast({
|
|
title: '右门已开启',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
cleanMode(status) {
|
|
this.$store.state.clean = status
|
|
uni.showToast({
|
|
title: '已切换至' + (status ? '清扫模式' : '自动模式'),
|
|
icon: 'none'
|
|
})
|
|
},
|
|
showDoorSelect(cardNumber) {
|
|
// 显示门选择弹窗
|
|
this.currentCardNumber = cardNumber
|
|
this.$nextTick(() => {
|
|
this.$refs.doorNotice.open()
|
|
})
|
|
|
|
db.selectDataList('user', {'ic': cardNumber}).then(res => {
|
|
if (res.length > 0) {
|
|
this.currentName = res[0].name
|
|
} else {
|
|
db.selectDataList('user', {'ic2': cardNumber}).then(res => {
|
|
if (res.length > 0) {
|
|
this.currentName = res[0].name
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
},
|
|
showActionSelect(cardNumber) {
|
|
// 显示操作选择弹窗（存入/取出）
|
|
// 根据当前门状态判断可执行的操作
|
|
this.currentCardNumber = cardNumber
|
|
this.$nextTick(() => {
|
|
this.$refs.actionNotice.open()
|
|
})
|
|
},
|
|
async storeEndoscope() {
|
|
// 存入内镜 - 门打开状态时才能存入
|
|
if (!this.$store.state.relay.door) {
|
|
uni.showToast({
|
|
title: '请先开门',
|
|
icon: 'none'
|
|
})
|
|
this.$refs.actionNotice.close()
|
|
return
|
|
}
|
|
|
|
this.$refs.actionNotice.close()
|
|
|
|
// 查找scope表中第一个空闲位置（ic为空的位置）
|
|
try {
|
|
let scopeList = await db.selectDataList('scope', {})
|
|
let emptyKey = -1
|
|
|
|
for (let i = 0; i < scopeList.length; i++) {
|
|
if (!scopeList[i].rfid || scopeList[i].rfid === '') {
|
|
emptyKey = scopeList[i].key
|
|
break
|
|
}
|
|
}
|
|
if (emptyKey === -1) {
|
|
uni.showToast({ title: '没有空闲位置', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
let rfid = ""
|
|
let endList = await db.selectDataList('endo', {ic: this.currentCardNumber})
|
|
if (endList.length > 0) {
|
|
rfid = endList[0].rfid
|
|
} else {
|
|
let endList = await db.selectDataList('endo', {ic2: this.currentCardNumber})
|
|
if (endList.length > 0) {
|
|
rfid = endList[0].rfid
|
|
}
|
|
}
|
|
|
|
// 更新scope表，记录存入信息
|
|
await db.updateSQL('scope', {
|
|
name: 'enter',
|
|
ic: this.currentCardNumber,
|
|
rfid: rfid,
|
|
time: formatDateTime()
|
|
}, 'key', emptyKey)
|
|
|
|
// 通知start页面记录日志
|
|
uni.$emit('storeEndoscope', { ic: this.currentCardNumber })
|
|
|
|
uni.showToast({
|
|
title: '内镜已存入',
|
|
icon: 'none'
|
|
})
|
|
// 关闭操作选择框
|
|
this.$refs.actionNotice.close()
|
|
// 刷新数据
|
|
this.getData()
|
|
// 添加入库记录到服务器
|
|
Api.endoscopeInwareLog({
|
|
'endoscope_steel_no': rfid,
|
|
'rfid_reader': '123456',
|
|
'user_name': this.currentName
|
|
})
|
|
|
|
} catch (error) {
|
|
console.log('存入内镜失败:', error)
|
|
uni.showToast({
|
|
title: '存入失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
|
|
async takeEndoscope() {
|
|
// 取出内镜 - 门关闭状态时才能取出
|
|
// if (this.$store.state.relay.door) {
|
|
// uni.showToast({
|
|
// title: '请先关门',
|
|
// icon: 'none'
|
|
// })
|
|
// this.$refs.actionNotice.close()
|
|
// return
|
|
// }
|
|
|
|
// this.$refs.actionNotice.close()
|
|
|
|
// 根据卡号查找scope表中的位置
|
|
try {
|
|
let rfid = ""
|
|
let endList = await db.selectDataList('endo', {ic: this.currentCardNumber})
|
|
if (endList.length > 0) {
|
|
rfid = endList[0].rfid
|
|
} else {
|
|
let endList = await db.selectDataList('endo', {ic2: this.currentCardNumber})
|
|
if (endList.length > 0) {
|
|
rfid = endList[0].rfid
|
|
}
|
|
}
|
|
|
|
let scopeList = await db.selectDataList('scope', {})
|
|
let foundKey = -1
|
|
for (let i = 0; i < scopeList.length; i++) {
|
|
if (scopeList[i].rfid == rfid) {
|
|
foundKey = scopeList[i].key
|
|
break
|
|
}
|
|
}
|
|
if (foundKey === -1) {
|
|
uni.showToast({
|
|
title: '未找到该内镜',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
// 更新scope表，清空该位置
|
|
await db.updateSQL('scope', {
|
|
name: 'leave',
|
|
ic: '',
|
|
rfid: '',
|
|
time: formatDateTime()
|
|
}, 'key', foundKey)
|
|
|
|
// 通知start页面记录日志
|
|
uni.$emit('takeEndoscope', { ic: this.currentCardNumber })
|
|
|
|
uni.showToast({
|
|
title: '内镜已取出',
|
|
icon: 'none'
|
|
})
|
|
this.$refs.actionNotice.close()
|
|
this.getData()
|
|
// 添加出库记录到服务器
|
|
Api.endoscopeOutwareLog({
|
|
'endoscope_steel_no': rfid,
|
|
'rfid_reader': '123456',
|
|
'user_name': this.currentName
|
|
})
|
|
|
|
} catch (error) {
|
|
console.log('取出内镜失败:', error)
|
|
uni.showToast({
|
|
title: '取出失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page{
|
|
/* padding: 10px; */
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.content{
|
|
flex: 1;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
padding: 10px 20px;
|
|
}
|
|
.block {
|
|
height: 120px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
border-radius: 15px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
padding: 6px;
|
|
background: linear-gradient(180deg, #1C1F31 2%, #0A0D1B 100%);
|
|
box-sizing: border-box;
|
|
/* border: 1px solid; */
|
|
border-image: linear-gradient(180deg, rgba(151, 149, 182, 0.41) 0%, #2A2D3D 100%) 1;
|
|
color: #fff;
|
|
}
|
|
.bottom .block {
|
|
height: 100px;
|
|
}
|
|
|
|
.block view.title span:first-child{
|
|
font-size: 28px;
|
|
font-weight: 500;
|
|
line-height: 36px;
|
|
}
|
|
.block view.title > span {
|
|
clear: both;
|
|
display: block;
|
|
}
|
|
.block > span:last-child{
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
line-height: 24px;
|
|
color: #C9C9C9;
|
|
}
|
|
.tag {
|
|
display: flex;
|
|
flex-direction: row;
|
|
/* margin-right: 10px; */
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding-top: 10px;
|
|
}
|
|
.tag .icon{
|
|
width:32px;
|
|
height:32px;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.tag .icon.xiaodu{
|
|
background-image: url("@/assets/xiaodu.png");
|
|
}
|
|
.tag .icon.zhenkong{
|
|
background-image: url("@/assets/zhenkong.png");
|
|
}
|
|
.tag .icon.light{
|
|
background-image: url("@/assets/light.png");
|
|
}
|
|
.tag .icon.door{
|
|
background-image: url("@/assets/door.png");
|
|
}
|
|
.tag .icon.wifi{
|
|
background-image: url("@/assets/wifi.png");
|
|
background-size: 100% auto;
|
|
margin-left: 50%;
|
|
}
|
|
.tag .icon.autorun{
|
|
background-image: url("@/assets/autorun.png");
|
|
background-size: 100% auto;
|
|
margin-left: 50%;
|
|
}
|
|
.tag .icon.nowifi{
|
|
background-image: url("@/assets/nowifi.png");
|
|
background-size: 100% auto;
|
|
margin-left: 50%;
|
|
}
|
|
.tag .icon.clean{
|
|
background-image: url("@/assets/clean.png");
|
|
background-size: 100% auto;
|
|
margin-left: 50%;
|
|
}
|
|
|
|
.tag .tag-text{
|
|
height: 24px;
|
|
line-height: 24px;
|
|
font-size: 14px;
|
|
width: 50px;
|
|
border-radius: 50px;
|
|
background: #777D90;
|
|
}
|
|
.tag .tag-text.active{
|
|
background: #00921c;
|
|
}
|
|
|
|
|
|
.column{
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.list{
|
|
display: flex;
|
|
height: 75px;
|
|
width: 100%;
|
|
/* border: 1px solid #C9C9C9; */
|
|
border-radius: 15px;
|
|
background: linear-gradient(180deg, #1C1F31 2%, #0A0D1B 100%);
|
|
box-sizing: border-box;
|
|
border: 1px solid #9795B6;
|
|
border-image: linear-gradient(180deg, rgba(151, 149, 182, 0.41) 0%, #2A2D3D 100%);
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
}
|
|
|
|
.circle{
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
border: 1px solid #fff;
|
|
color: #fff;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
.space{
|
|
border-right: 1px solid #fff;
|
|
height: 40px;
|
|
display: inline-block;
|
|
}
|
|
.info {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
color: #fff;
|
|
}
|
|
.info view {
|
|
display: inline-block;
|
|
}
|
|
.info-right {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
text-align: right;
|
|
color: #fff;
|
|
}
|
|
.info.near{
|
|
color: #FFC300;
|
|
}
|
|
.info.over{
|
|
color: red;
|
|
}
|
|
.out-text{
|
|
color: #777D90;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.door-select-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 40px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.door-btn {
|
|
width: 200px;
|
|
height: 80px;
|
|
background: linear-gradient(180deg, #1C1F31 2%, #0A0D1B 100%);
|
|
border: 1px solid #9795B6;
|
|
border-radius: 15px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.door-btn:active {
|
|
transform: scale(0.95);
|
|
background: linear-gradient(180deg, #2C2F41 2%, #1A1D2B 100%);
|
|
}
|
|
|
|
</style> |