You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
419 lines
20 KiB
419 lines
20 KiB
<template>
|
|
<div class="operator_main_content">
|
|
<div class="left_contaienr">
|
|
<div class="info_cards">
|
|
<div class="card">
|
|
<DisinfectantLiquidInfo />
|
|
</div>
|
|
<div class="card">
|
|
<EnvironmentInfo :cardType="1" />
|
|
</div>
|
|
<div class="card">
|
|
<EnvironmentInfo :cardType="2" />
|
|
</div>
|
|
<div class="card">
|
|
<EnvironmentInfo :cardType="3" />
|
|
</div>
|
|
</div>
|
|
<div class="warn_wrap">
|
|
<p class="warn_text">警报信息</p>
|
|
<svg
|
|
v-if="
|
|
operatorStore.disinfectStatus != 0 &&
|
|
operatorStore.disinfectStatus != 3
|
|
"
|
|
@click="toDetail"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
fill="none"
|
|
version="1.1"
|
|
width="218"
|
|
height="50"
|
|
viewBox="0 0 218 50"
|
|
>
|
|
<g>
|
|
<g>
|
|
<rect
|
|
x="0"
|
|
y="0"
|
|
width="218"
|
|
height="50"
|
|
rx="25"
|
|
fill="#06518B"
|
|
fill-opacity="1"
|
|
/>
|
|
</g>
|
|
<g>
|
|
<ellipse
|
|
cx="26"
|
|
cy="25"
|
|
rx="19"
|
|
ry="19"
|
|
fill="#FFFFFF"
|
|
fill-opacity="1"
|
|
/>
|
|
</g>
|
|
<g>
|
|
<path
|
|
d="M65.16,27.84L72.68,27.84L72.68,29.24L65.16,29.24L65.16,27.84ZM65.16,25.22L72.68,25.22L72.68,26.58L65.16,26.58L65.16,25.22ZM63.28,23.939999999999998L63.28,30.52L74.64,30.52L74.64,23.939999999999998L63.28,23.939999999999998ZM60.36,31.62L60.36,33.3L77.7,33.3L77.7,31.62L60.36,31.62ZM68,15.3325L68,17.740000000000002L60.1,17.740000000000002L60.1,19.4L66.08,19.4C64.42,21.14,61.96,22.68,59.62,23.46C60.02,23.84,60.56,24.52,60.84,24.98C63.5,23.92,66.2,21.96,68,19.68L68,23.32L69.88,23.32L69.88,19.68C71.72,21.9,74.44,23.82,77.12,24.82C77.4,24.34,77.96000000000001,23.64,78.36,23.28C75.94,22.52,73.44,21.08,71.78,19.4L77.92,19.4L77.92,17.740000000000002L69.88,17.740000000000002L69.88,15.3325L68,15.3325ZM87.36,28.06L95.44,28.06L95.44,29.24L87.36,29.24L87.36,28.06ZM87.36,26.82L87.36,25.68L95.44,25.68L95.44,26.82L87.36,26.82ZM87.36,30.48L95.44,30.48L95.44,31.72L87.36,31.72L87.36,30.48ZM96.84,15.455C93.56,16.05844,87.62,16.34,82.72,16.36C82.88,16.740000000000002,83.06,17.380000000000003,83.08,17.8C84.74,17.8,86.52,17.759999999999998,88.32,17.7L87.98,18.86L82.96000000000001,18.86L82.96000000000001,20.32L87.44,20.32C87.28,20.72,87.1,21.119999999999997,86.92,21.52L81.53999999999999,21.52L81.53999999999999,23.060000000000002L86.08,23.060000000000002C84.84,25.08,83.18,26.86,80.98,28.08C81.36,28.46,81.9,29.14,82.16,29.58C83.44,28.82,84.56,27.9,85.53999999999999,26.86L85.53999999999999,33.965599999999995L87.36,33.965599999999995L87.36,33.18L95.44,33.18L95.44,33.965599999999995L97.32,33.965599999999995L97.32,24.22L87.56,24.22C87.8,23.84,88.02,23.46,88.24,23.060000000000002L99.25999999999999,23.060000000000002L99.25999999999999,21.52L89,21.52L89.5,20.32L98.14,20.32L98.14,18.86L90.02,18.86L90.4,17.6C93.22,17.439999999999998,95.92,17.2,98,16.82L96.84,15.455ZM109.14,26.74C110.78,27.08,112.86,27.8,114,28.36L114.78,27.14C113.62,26.6,111.56,25.96,109.92,25.64L109.14,26.74ZM107.22,29.3C110,29.62,113.46000000000001,30.42,115.38,31.12L116.22,29.76C114.22,29.08,110.8,28.34,108.1,28.04L107.22,29.3ZM103.38,16.16L103.38,33.9256L105.2,33.9256L105.2,33.120000000000005L118.36,33.120000000000005L118.36,33.9256L120.24000000000001,33.9256L120.24000000000001,16.16L103.38,16.16ZM105.2,31.44L105.2,17.880000000000003L118.36,17.880000000000003L118.36,31.44L105.2,31.44ZM110.02000000000001,18.08C109.02000000000001,19.64,107.32,21.16,105.64,22.119999999999997C106,22.4,106.64,22.96,106.92,23.259999999999998C107.44,22.92,107.96000000000001,22.52,108.47999999999999,22.08C109.02000000000001,22.619999999999997,109.64,23.119999999999997,110.34,23.58C108.74000000000001,24.28,106.97999999999999,24.82,105.3,25.14C105.62,25.48,106,26.22,106.18,26.68C108.08,26.22,110.12,25.5,111.94,24.54C113.56,25.38,115.38,26.04,117.2,26.42C117.42,26,117.9,25.34,118.25999999999999,25C116.62,24.72,114.97999999999999,24.240000000000002,113.5,23.619999999999997C114.94,22.66,116.16,21.52,117,20.22L115.94,19.58L115.66,19.66L110.82,19.66C111.1,19.32,111.36,18.96,111.58,18.6L110.02000000000001,18.08ZM109.53999999999999,21.08L114.32,21.1C113.66,21.72,112.82,22.3,111.88,22.82C110.96000000000001,22.3,110.18,21.72,109.53999999999999,21.08ZM128.1,33.909400000000005C128.6,33.5691,129.42000000000002,33.2887,135.07999999999998,31.5472C134.95999999999998,31.1466,134.8,30.3859,134.76,29.8653L130.12,31.2066L130.12,27.2228C131.2,26.4819,132.2,25.6412,133.01999999999998,24.7603C134.56,28.9444,137.22,31.9275,141.38,33.3287C141.66,32.8084,142.2,32.067499999999995,142.62,31.6672C140.7,31.1266,139.1,30.2056,137.78,28.9844C139,28.2638,140.38,27.3228,141.56,26.4019L139.98000000000002,25.2606C139.16,26.0616,137.86,27.0625,136.72,27.8434C135.94,26.9025,135.32,25.8212,134.86,24.66L141.94,24.66L141.94,23.04L134.1,23.04L134.1,21.54L140.45999999999998,21.54L140.45999999999998,20L134.1,20L134.1,18.6L141.3,18.6L141.3,16.96L134.1,16.96L134.1,15.333120000000001L132.2,15.333120000000001L132.2,16.96L125.26,16.96L125.26,18.6L132.2,18.6L132.2,20L126.26,20L126.26,21.54L132.2,21.54L132.2,23.04L124.42,23.04L124.42,24.66L130.64,24.66C128.8,26.2216,126.16,27.6431,123.78,28.3837C124.2,28.7644,124.76,29.465,125.04,29.9053C126.06,29.525,127.12,29.0447,128.16,28.4441L128.16,30.7662C128.16,31.5872,127.68,32.0075,127.28,32.2078C127.58,32.5881,127.98,33.4291,128.1,33.909400000000005ZM153.3,15.6525C152.95999999999998,16.414369999999998,152.34,17.55687,151.86,18.27844L153.07999999999998,18.839689999999997C153.62,18.198439999999998,154.26,17.216250000000002,154.88,16.314059999999998L153.3,15.6525ZM146.18,16.314059999999998C146.7,17.135939999999998,147.2,18.23844,147.36,18.939999999999998L148.8,18.29875C148.62,17.59687,148.07999999999998,16.53469,147.54000000000002,15.75281L146.18,16.314059999999998ZM152.48000000000002,27.22C152.06,28.1012,151.5,28.8825,150.84,29.5431C150.18,29.2028,149.5,28.8825,148.84,28.5819L149.6,27.22L152.48000000000002,27.22ZM146.54000000000002,29.2028C147.48000000000002,29.5834,148.54000000000002,30.0841,149.51999999999998,30.6047C148.3,31.4259,146.86,32.0066,145.3,32.3472C145.62,32.707499999999996,145.98000000000002,33.3684,146.16,33.789100000000005C147.98000000000002,33.288399999999996,149.66,32.547200000000004,151.06,31.4459C151.7,31.8263,152.26,32.1869,152.7,32.5272L153.84,31.2856C153.4,30.9853,152.86,30.6647,152.28,30.3244C153.32,29.1628,154.12,27.7409,154.62,25.98L153.6,25.6L153.3,25.66L150.36,25.66L150.74,24.740000000000002L149.07999999999998,24.42C148.92000000000002,24.82,148.76,25.24,148.56,25.66L145.92000000000002,25.66L145.92000000000002,27.22L147.76,27.22C147.36,27.9613,146.92000000000002,28.6422,146.54000000000002,29.2028ZM149.51999999999998,15.311869999999999L149.51999999999998,18.98L145.54000000000002,18.98L145.54000000000002,20.5L148.94,20.5C147.95999999999998,21.66,146.54000000000002,22.740000000000002,145.24,23.28C145.6,23.64,146.01999999999998,24.28,146.24,24.7C147.36,24.08,148.56,23.119999999999997,149.51999999999998,22.060000000000002L149.51999999999998,24.18L151.28,24.18L151.28,21.68C152.16,22.34,153.18,23.16,153.66,23.619999999999997L154.68,22.28C154.26,22,152.8,21.08,151.8,20.5L155.24,20.5L155.24,18.98L151.28,18.98L151.28,15.311869999999999L149.51999999999998,15.311869999999999ZM157.01999999999998,15.45219C156.56,19,155.66,22.380000000000003,154.07999999999998,24.48C154.48000000000002,24.740000000000002,155.2,25.36,155.48000000000002,25.66C155.92000000000002,25,156.34,24.259999999999998,156.7,23.439999999999998C157.12,25.2,157.64,26.82,158.32,28.2816C157.22,30.0841,155.7,31.4659,153.6,32.447199999999995C153.94,32.8078,154.44,33.5887,154.62,33.9894C156.6,32.9478,158.1,31.6462,159.24,30.0037C160.2,31.5659,161.4,32.827799999999996,162.88,33.7291C163.16,33.2684,163.7,32.5875,164.12,32.2469C162.51999999999998,31.3856,161.26,30.0037,160.26,28.2816C161.28,26.26,161.92000000000002,23.82,162.34,20.880000000000003L163.66,20.880000000000003L163.66,19.14L158.1,19.14C158.36,18.03781,158.57999999999998,16.875,158.76,15.692499999999999L157.01999999999998,15.45219ZM160.57999999999998,20.880000000000003C160.3,22.939999999999998,159.9,24.72,159.3,26.28C158.64,24.64,158.14,22.82,157.8,20.880000000000003L160.57999999999998,20.880000000000003ZM175.68,27.5L175.68,33.905L177.34,33.905L177.34,33.2L182.92000000000002,33.2L182.92000000000002,33.8647L184.64,33.8647L184.64,27.5L180.9,27.5L180.9,25.26L185.18,25.26L185.18,23.66L180.9,23.66L180.9,21.64L184.56,21.64L184.56,16.18L173.78,16.18L173.78,22.259999999999998C173.78,25.42,173.62,29.8,171.56,32.84C172,33.019999999999996,172.78,33.6028,173.12,33.9253C174.72,31.56,175.32,28.22,175.51999999999998,25.26L179.1,25.26L179.1,27.5L175.68,27.5ZM175.62,17.82L182.76,17.82L182.76,20L175.62,20L175.62,17.82ZM175.62,21.64L179.1,21.64L179.1,23.66L175.6,23.66L175.62,22.259999999999998L175.62,21.64ZM177.34,31.66L177.34,29.08L182.92000000000002,29.08L182.92000000000002,31.66L177.34,31.66ZM169.12,15.355L169.12,19.259999999999998L166.8,19.259999999999998L166.8,21.02L169.12,21.02L169.12,25.06L166.51999999999998,25.76L166.95999999999998,27.58L169.12,26.92L169.12,31.62C169.12,31.9,169.01999999999998,31.98,168.78,31.98C168.54000000000002,31.98,167.8,31.98,167,31.96C167.24,32.46,167.45999999999998,33.260000000000005,167.5,33.7C168.78,33.7203,169.6,33.66,170.14,33.36C170.68,33.06,170.86,32.58,170.86,31.62L170.86,26.38L173.06,25.7L172.82,23.98L170.86,24.560000000000002L170.86,21.02L173.01999999999998,21.02L173.01999999999998,19.259999999999998L170.86,19.259999999999998L170.86,15.355L169.12,15.355Z"
|
|
fill="#FFFFFF"
|
|
fill-opacity="1"
|
|
/>
|
|
</g>
|
|
<g>
|
|
<path
|
|
d="M18,17L18.964553,17L18.964553,19.60926C19.31313,18.12349,20.6479,17.0156627,22.2421,17.0156627C24.10176,17.0156627,25.60839,18.5212,25.60839,20.37952C25.60839,22.23783,24.10176,23.74337,22.2421,23.74337C20.6479,23.74337,19.31313,22.635550000000002,18.964553,21.14977L18.964553,26.86717C19.24149,26.62166,19.58398,26.33394,19.96769,26.04506C21.33735,25.01374,22.52761,24.491329999999998,23.505670000000002,24.491329999999998C24.16542,24.491329999999998,24.722929999999998,24.84602,25.162770000000002,25.543860000000002C25.502290000000002,26.08362,25.745359999999998,26.76603,25.980710000000002,27.4272C26.32795,28.4065,26.68869,29.4205,27.20569,29.426299999999998C27.23849,29.4147,27.560650000000003,29.2759,28.1104,27.8378C28.502000000000002,26.81229,28.893700000000003,25.4494,29.2718,24.13084C29.6614,22.77374,30.0627,21.37229,30.4717,20.3294C30.8594,19.33663,31.3629,18.32265,32.15,18.32265L34,18.32265L34,19.28651L32.1654,19.28651C32.140299999999996,19.29807,32.0265,19.3694,31.8413,19.6759C31.6774,19.94771,31.497999999999998,20.34096,31.3089,20.8441C30.938499999999998,21.82723,30.5643,23.13229,30.2016,24.39687C29.802300000000002,25.790599999999998,29.3875,27.2325,28.961199999999998,28.3159C28.5561,29.3414,28.0333,30.3901,27.21148,30.3901C26.650109999999998,30.3901,26.171689999999998,30.0701,25.79166,29.439799999999998C25.506149999999998,28.9655,25.28623,28.3467,25.07403,27.749200000000002C24.597540000000002,26.405540000000002,24.205930000000002,25.45518,23.5076,25.45518C22.757170000000002,25.45518,21.73668,25.92361,20.559919999999998,26.80843C19.74317,27.4227,19.10877,28.0474,18.964553,28.1922L18.964553,32.0229L34,32.0229L34,32.9867L18.964553,32.9867L18.964553,33L18,33L18,17ZM23.939709999999998,18.68313C23.48638,18.23012,22.88449,17.979518,22.2421,17.979518C21.59971,17.979518,20.99783,18.23012,20.54449,18.68313C20.09115,19.13614,19.84037,19.73952,19.84037,20.37952C19.84037,21.01952,20.09115,21.622889999999998,20.54449,22.0759C20.99783,22.52892,21.60164,22.779519999999998,22.2421,22.779519999999998C22.88257,22.779519999999998,23.48638,22.52892,23.939709999999998,22.0759C24.39305,21.622889999999998,24.64384,21.01952,24.64384,20.37952C24.64384,19.73952,24.39305,19.13614,23.939709999999998,18.68313ZM22.05305,19.22289L21.0885,19.22289L21.0885,20.57229L21.08464,20.57229L21.08464,21.53614L23.39956,21.53614L23.39956,20.57229L22.05305,20.57229L22.05305,19.22289Z"
|
|
fill-rule="evenodd"
|
|
fill="#06518B"
|
|
fill-opacity="1"
|
|
/>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="right_container">
|
|
<div class="setting_title">
|
|
<p>消毒设置</p>
|
|
<p>SET</p>
|
|
</div>
|
|
<div class="set_form">
|
|
<input
|
|
type="number"
|
|
:disabled="[1, 2].includes(operatorStore.disinfectStatus)"
|
|
v-model="roomSize"
|
|
class="room_size"
|
|
id="room_size"
|
|
@focus="handleShowKeyBoard"
|
|
/>
|
|
<div class="log" @click="showLogPicker">{{ logVal }}</div>
|
|
</div>
|
|
<div
|
|
:class="
|
|
[1, 2].includes(operatorStore.disinfectStatus)
|
|
? 'start cant'
|
|
: 'start style-btn'
|
|
"
|
|
@click="startDisinfect"
|
|
>
|
|
开始消毒
|
|
</div>
|
|
<div class="progress">
|
|
<p class="title">预计剩余时间</p>
|
|
<!-- <div class="tube">
|
|
<div
|
|
class="pro"
|
|
:style="{
|
|
'--width': '50px',
|
|
}"
|
|
></div>
|
|
</div>
|
|
<div class="num">000/100</div> -->
|
|
<div class="time">
|
|
{{
|
|
operatorStore.estimatedRemainingTimeS == 0
|
|
? '已结束'
|
|
: `${time_To_hhmmss(operatorStore.estimatedRemainingTimeS)}`
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <WarnModal /> -->
|
|
<LogPicker
|
|
v-if="logVisible"
|
|
:changeLogVal="changeLogVal"
|
|
:logVal="logVal"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import LogPicker from 'cpns/dialogs/LogPicker'
|
|
import WarnModal from 'cpns/dialogs/WarnModal'
|
|
import DisinfectantLiquidInfo from 'cpns/info/DisinfectantLiquidInfo'
|
|
import EnvironmentInfo from 'cpns/info/EnvironmentInfo'
|
|
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
|
import { useOperatorStore, useWebSocketStore } from '@/store'
|
|
import { startDisinfectionJSON, getStateJSON } from '@/mock/command'
|
|
import { showSuccessToast, showFailToast } from 'vant'
|
|
import { time_To_hhmmss } from '@/utils'
|
|
|
|
const operatorStore = useOperatorStore()
|
|
const webSocketStore = useWebSocketStore()
|
|
|
|
const props = defineProps({
|
|
changeShowOperator: {
|
|
type: Function,
|
|
},
|
|
handleShowKeyBoard: {
|
|
type: Function,
|
|
},
|
|
hideKeyBoard: {
|
|
type: Function,
|
|
},
|
|
input: {
|
|
type: String,
|
|
},
|
|
})
|
|
|
|
const toDetail = () => {
|
|
// 判断当前消毒任务是否开始，如果开始时才生效 否则点击不生效
|
|
if (operatorStore.disinfectStatus != 0) {
|
|
props.changeShowOperator(false)
|
|
}
|
|
}
|
|
|
|
const logVisible = ref(false)
|
|
const logVal = ref('3')
|
|
const roomSize = ref(0)
|
|
|
|
watch(() => {
|
|
if (props.input) {
|
|
roomSize.value = props.input?.match(/\d+/g)[0]
|
|
} else {
|
|
roomSize.value = 0
|
|
}
|
|
})
|
|
|
|
const changeLogVal = val => {
|
|
logVal.value = val
|
|
logVisible.value = false
|
|
}
|
|
|
|
const startDisinfect = () => {
|
|
// 改变开始消毒状态 如果已经开始则不可点击
|
|
if (![1, 2].includes(operatorStore.disinfectStatus)) {
|
|
if (roomSize.value == 0) {
|
|
showFailToast('请调整房间大小设置，不能为0')
|
|
} else {
|
|
localStorage.removeItem('bin')
|
|
localStorage.removeItem('envir1')
|
|
localStorage.removeItem('envir2')
|
|
localStorage.clear()
|
|
webSocketStore.sendCommandMsg(
|
|
startDisinfectionJSON(parseInt(logVal.value), parseInt(roomSize.value)),
|
|
)
|
|
props.changeShowOperator(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
const showLogPicker = () => {
|
|
if (![1, 2].includes(operatorStore.disinfectStatus)) {
|
|
logVisible.value = true
|
|
}
|
|
}
|
|
|
|
const timer = ref(null)
|
|
onMounted(() => {
|
|
timer.value = setInterval(() => {
|
|
webSocketStore.sendCommandMsg(getStateJSON)
|
|
}, 1000)
|
|
})
|
|
onUnmounted(() => {
|
|
timer.value = null
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.operator_main_content {
|
|
margin-bottom: 19px;
|
|
height: 580px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
.left_contaienr {
|
|
margin-right: 30px;
|
|
width: 766px;
|
|
height: 580px;
|
|
box-sizing: border-box;
|
|
border-radius: 16px;
|
|
background: #ffffff;
|
|
padding: 20px;
|
|
.info_cards {
|
|
width: 726px;
|
|
height: 470px;
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
column-gap: 20px;
|
|
row-gap: 20px;
|
|
margin-bottom: 20px;
|
|
.card {
|
|
width: 353px;
|
|
height: 225px;
|
|
border-radius: 17.5px;
|
|
background: #06518b;
|
|
}
|
|
}
|
|
.warn_wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
width: 726px;
|
|
height: 50px;
|
|
border-radius: 6px;
|
|
.warn_text {
|
|
font-family: Source Han Sans CN;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
color: #fa1c1c;
|
|
background: #f6f6f6;
|
|
width: 468px;
|
|
height: 50px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 22px;
|
|
}
|
|
.detail_btn {
|
|
width: 105px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
background: #06518b;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 18px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.1em;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
.right_container {
|
|
height: 580px;
|
|
box-sizing: border-box;
|
|
border-radius: 16px;
|
|
background: #ffffff;
|
|
flex: 1;
|
|
padding: 42px;
|
|
padding-top: 32px;
|
|
.setting_title {
|
|
width: 340px;
|
|
height: 45px;
|
|
border-radius: 23px;
|
|
background: #06518b;
|
|
padding: 0 24px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.1em;
|
|
color: #ffffff;
|
|
margin-bottom: 41px;
|
|
}
|
|
.set_form {
|
|
width: 340px;
|
|
height: 190px;
|
|
box-sizing: border-box;
|
|
margin-bottom: 41px;
|
|
overflow: hidden;
|
|
background: url(../assets/img/operator/form.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
.room_size {
|
|
position: absolute;
|
|
top: 45px;
|
|
left: 23px;
|
|
width: 189px;
|
|
height: 20px;
|
|
text-align: center;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
.log {
|
|
position: absolute;
|
|
top: 145px;
|
|
left: 0px;
|
|
width: 240px;
|
|
height: 42px;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.06em;
|
|
color: #0e0e0e;
|
|
}
|
|
}
|
|
.start {
|
|
margin-bottom: 30px;
|
|
width: 340px;
|
|
height: 45px;
|
|
border-radius: 23px;
|
|
background: #06518b;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.1em;
|
|
color: #ffffff;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.cant {
|
|
background: #f4f4f4;
|
|
}
|
|
.progress {
|
|
width: 340px;
|
|
height: 114px;
|
|
border-radius: 16px;
|
|
opacity: 1;
|
|
background: #f6f6f6;
|
|
box-sizing: border-box;
|
|
padding: 27px 24px 18px 27px;
|
|
.title {
|
|
font-family: Source Han Sans CN;
|
|
font-size: 12px;
|
|
font-weight: 350;
|
|
letter-spacing: 0.06em;
|
|
color: #9e9e9e;
|
|
margin-bottom: 13px;
|
|
}
|
|
.time {
|
|
text-align: center;
|
|
padding: 10px;
|
|
}
|
|
.tube {
|
|
width: 292px;
|
|
height: 14px;
|
|
border-radius: 7px;
|
|
background: #ffffff;
|
|
margin-bottom: 11px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.pro {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 14px;
|
|
width: var(--width);
|
|
border-radius: 7px;
|
|
background: #06518b;
|
|
}
|
|
}
|
|
.num {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 10px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.06em;
|
|
color: #9e9e9e;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|