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.
383 lines
20 KiB
383 lines
20 KiB
<template>
|
|
<div class="liquid_contaienr">
|
|
<div class="left_container">
|
|
<p class="status">
|
|
<svg
|
|
v-if="operatorStore.replenishingFluidsWorkState == 1 && tabType == 1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
fill="none"
|
|
version="1.1"
|
|
width="155"
|
|
height="38"
|
|
viewBox="0 0 155 38"
|
|
>
|
|
<g>
|
|
<g>
|
|
<path
|
|
d="M50.888,17.076L50.888,29.348L47.352,29.348L47.352,31.246L70.7,31.246L70.7,29.348L60.69,29.348L60.69,21.158L68.828,21.158L68.828,19.26L60.69,19.26L60.69,12.318L69.842,12.318L69.842,10.394L48.34,10.394L48.34,12.318L58.635999999999996,12.318L58.635999999999996,29.348L52.89,29.348L52.89,17.076L50.888,17.076ZM83.726,8.48584C83.362,9.81509,82.894,11.1968,82.348,12.526L75.19800000000001,12.526L75.19800000000001,14.398L81.49000000000001,14.398C79.826,17.726,77.538,20.82,74.548,22.9C74.86,23.342,75.354,24.174,75.562,24.694C76.654,23.914,77.668,23.03,78.578,22.068L78.578,32.312L80.52799999999999,32.312L80.52799999999999,19.754C81.75,18.09,82.816,16.27,83.7,14.398L97.97399999999999,14.398L97.97399999999999,12.526L84.506,12.526C84.97399999999999,11.3532,85.39,10.1543,85.75399999999999,8.98106L83.726,8.48584ZM89.108,15.75L89.108,20.768L83.25800000000001,20.768L83.25800000000001,22.588L89.108,22.588L89.108,29.972L82.218,29.972L82.218,31.792L97.94800000000001,31.792L97.94800000000001,29.972L91.05799999999999,29.972L91.05799999999999,22.588L96.96000000000001,22.588L96.96000000000001,20.768L91.05799999999999,20.768L91.05799999999999,15.75L89.108,15.75ZM115.992,11.72L115.992,32.0337L117.864,32.0337L117.864,30.102L122.908,30.102L122.908,31.8249L124.858,31.8249L124.858,11.72L115.992,11.72ZM117.864,28.23L117.864,13.618L122.908,13.618L122.908,28.23L117.864,28.23ZM106.19,8.82425L106.164,13.436L102.49799999999999,13.436L102.49799999999999,15.334L106.112,15.334C105.93,21.886,105.124,27.658,101.848,31.09C102.342,31.402,103.044,32,103.356,32.4461C106.866,28.62,107.77600000000001,22.38,108.00999999999999,15.334L111.962,15.334C111.754,25.344,111.52,28.906,110.974,29.66C110.74,29.998,110.48,30.102,110.09,30.076C109.622,30.076,108.50399999999999,30.076,107.282,29.972C107.62,30.518,107.80199999999999,31.35,107.854,31.922C109.024,32,110.22,32.0264,110.948,31.922C111.702,31.818,112.196,31.584,112.664,30.908C113.47,29.79,113.652,25.994,113.86,14.424C113.86,14.138,113.86,13.436,113.86,13.436L108.062,13.436L108.114,8.82425L106.19,8.82425ZM145.372,19.9636C146.28199999999998,20.8224,147.322,22.0452,147.764,22.8781L148.82999999999998,21.9412C148.388,21.1348,147.348,19.9636,146.412,19.1828L145.372,19.9636ZM131.046,10.3912C132.346,11.434,133.958,12.9684,134.686,13.9832L136.038,12.734C135.232,11.746,133.64600000000002,10.2607,132.32,9.26909L131.046,10.3912ZM129.772,17.3913C131.124,18.3277,132.788,19.7325,133.594,20.6693L134.84199999999998,19.3685C134.01,18.4317,132.346,17.1308,130.994,16.2204L129.772,17.3913ZM130.31799999999998,30.6074L132.00799999999998,31.6742C133.074,29.3326,134.296,26.1845,135.20600000000002,23.5569L133.672,22.4905C132.684,25.3261,131.30599999999998,28.6302,130.31799999999998,30.6074ZM143.26600000000002,8.93028C143.656,9.66072,144.046,10.5476,144.358,11.356L136.376,11.356L136.376,13.228L153.562,13.228L153.562,11.356L146.412,11.356C146.1,10.4432,145.554,9.2955,145.034,8.40825L143.26600000000002,8.93028ZM145.112,18.35L150.624,18.35C149.922,21.2128,148.726,23.6329,147.21800000000002,25.6105C145.94400000000002,23.9449,144.93,22.0192,144.228,19.9636C144.54000000000002,19.4172,144.826,18.8968,145.112,18.35ZM145.112,13.618C144.228,16.634,142.382,20.302,140.06799999999998,22.6181C140.43200000000002,22.8781,141.03,23.4765,141.34199999999998,23.8409C141.966,23.1905,142.59,22.4357,143.162,21.6292C143.942,23.5809,144.93,25.3761,146.1,26.9637C144.436,28.7593,142.486,30.0862,140.406,30.971C140.796,31.3094,141.29000000000002,31.9858,141.55,32.4282C143.656,31.4654,145.57999999999998,30.1382,147.244,28.3689C148.752,30.0602,150.494,31.4134,152.47,32.3762C152.78199999999998,31.9078,153.35399999999998,31.1794,153.76999999999998,30.841C151.74200000000002,29.9822,149.94799999999998,28.6809,148.414,27.0417C150.416,24.4917,151.924,21.2388,152.73000000000002,17.102L151.534,16.66L151.22199999999998,16.764L145.86599999999999,16.764C146.28199999999998,15.854,146.62,14.944,146.93200000000002,14.06L145.112,13.618ZM139.834,13.566C138.924,16.4,137.05200000000002,19.8856,134.946,22.1237C135.336,22.4097,135.95999999999998,22.9821,136.24599999999998,23.3465C136.89600000000002,22.6441,137.546,21.8112,138.144,20.9264L138.144,32.4022L139.886,32.4022L139.886,18.038C140.588,16.712,141.186,15.36,141.68,14.086L139.834,13.566Z"
|
|
fill="#FA1C1C"
|
|
fill-opacity="1"
|
|
/>
|
|
</g>
|
|
<g>
|
|
<path
|
|
d="M15.017,4Q18.1087,4,20.8437,5.17347Q23.5787,6.34694,25.6172,8.38776Q27.6557,10.42857,28.8279,13.16667Q30,15.9048,30,19Q30,22.1293,28.8279,24.8503Q27.6557,27.5714,25.6172,29.6122Q23.5787,31.6531,20.8437,32.826499999999996Q18.1087,34,15.017,34Q11.8913,34,9.15628,32.826499999999996Q6.42129,31.6531,4.38279,29.6122Q2.34428,27.5714,1.17214,24.8503Q-3.79701e-7,22.1293,0,19Q0,15.9048,1.17214,13.16667Q2.34428,10.42857,4.38279,8.38775Q6.42129,6.34694,9.15628,5.17347Q11.8913,3.999999113026,15.017,4ZM23.5787,21.0748Q24.4621,21.0748,25.0736,20.4456Q25.6852,19.8163,25.6852,18.932000000000002Q25.6852,18.0476,25.0736,17.4354Q24.4621,16.8231,23.5787,16.8231L17.1914,16.8231L17.1914,10.42857Q17.1914,9.54422,16.5629,8.91497Q15.9343,8.28571,15.051,8.28571Q14.1676,8.28571,13.5561,8.91497Q12.9445,9.54422,12.9445,10.42857L12.9445,16.8231L6.55719,16.8231Q5.67384,16.8231,5.06229,17.4354Q4.45074,18.0476,4.45074,18.932000000000002Q4.45074,19.8163,5.06229,20.4456Q5.67384,21.0748,6.55719,21.0748L12.9445,21.0748L12.9445,27.4354Q12.9445,28.3197,13.5561,28.949Q14.1676,29.5782,15.051,29.5782Q15.9343,29.5782,16.5629,28.949Q17.1914,28.3197,17.1914,27.4354L17.1914,21.0748L23.5787,21.0748Z"
|
|
fill="#FA1C1C"
|
|
fill-opacity="1"
|
|
/>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<svg
|
|
v-if="operatorStore.drainingWorkState == 1 && tabType == 2"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
fill="none"
|
|
version="1.1"
|
|
width="155"
|
|
height="38"
|
|
viewBox="0 0 155 38"
|
|
>
|
|
<g>
|
|
<g>
|
|
<path
|
|
d="M50.888,17.076L50.888,29.348L47.352,29.348L47.352,31.246L70.7,31.246L70.7,29.348L60.69,29.348L60.69,21.158L68.828,21.158L68.828,19.26L60.69,19.26L60.69,12.318L69.842,12.318L69.842,10.394L48.34,10.394L48.34,12.318L58.635999999999996,12.318L58.635999999999996,29.348L52.89,29.348L52.89,17.076L50.888,17.076ZM83.726,8.48584C83.362,9.81509,82.894,11.1968,82.348,12.526L75.19800000000001,12.526L75.19800000000001,14.398L81.49000000000001,14.398C79.826,17.726,77.538,20.82,74.548,22.9C74.86,23.342,75.354,24.174,75.562,24.694C76.654,23.914,77.668,23.03,78.578,22.068L78.578,32.312L80.52799999999999,32.312L80.52799999999999,19.754C81.75,18.09,82.816,16.27,83.7,14.398L97.97399999999999,14.398L97.97399999999999,12.526L84.506,12.526C84.97399999999999,11.3532,85.39,10.1543,85.75399999999999,8.98106L83.726,8.48584ZM89.108,15.75L89.108,20.768L83.25800000000001,20.768L83.25800000000001,22.588L89.108,22.588L89.108,29.972L82.218,29.972L82.218,31.792L97.94800000000001,31.792L97.94800000000001,29.972L91.05799999999999,29.972L91.05799999999999,22.588L96.96000000000001,22.588L96.96000000000001,20.768L91.05799999999999,20.768L91.05799999999999,15.75L89.108,15.75ZM105.852,8.48584L105.852,13.748L102.55,13.748L102.55,15.568L105.852,15.568L105.852,21.288L102.212,22.25L102.602,24.174L105.852,23.212L105.852,29.972C105.852,30.31,105.72200000000001,30.414,105.384,30.44C105.124,30.44,104.11,30.44,103.044,30.414C103.27799999999999,30.908,103.538,31.714,103.616,32.208C105.22800000000001,32.208,106.21600000000001,32.156,106.866,31.844C107.49000000000001,31.558,107.72399999999999,31.038,107.72399999999999,29.972L107.72399999999999,22.666L110.818,21.73L110.584,19.962L107.72399999999999,20.768L107.72399999999999,15.568L110.532,15.568L110.532,13.748L107.72399999999999,13.748L107.72399999999999,8.48544L105.852,8.48584ZM111,23.758L111,25.552L115.42,25.552L115.42,32.392L117.318,32.392L117.318,8.66784L115.42,8.66784L115.42,12.942L111.546,12.942L111.546,14.71L115.42,14.71L115.42,18.35L111.624,18.35L111.624,20.092L115.42,20.092L115.42,23.758L111,23.758ZM119.71,8.66825L119.71,32.4184L121.582,32.4184L121.582,25.63L126.132,25.63L126.132,23.836L121.582,23.836L121.582,20.092L125.586,20.092L125.586,18.35L121.582,18.35L121.582,14.71L125.82,14.71L125.82,12.942L121.582,12.942L121.582,8.66825L119.71,8.66825ZM145.372,19.9636C146.28199999999998,20.8224,147.322,22.0452,147.764,22.8781L148.82999999999998,21.9412C148.388,21.1348,147.348,19.9636,146.412,19.1828L145.372,19.9636ZM131.046,10.3912C132.346,11.434,133.958,12.9684,134.686,13.9832L136.038,12.734C135.232,11.746,133.64600000000002,10.2607,132.32,9.26909L131.046,10.3912ZM129.772,17.3913C131.124,18.3277,132.788,19.7325,133.594,20.6693L134.84199999999998,19.3685C134.01,18.4317,132.346,17.1308,130.994,16.2204L129.772,17.3913ZM130.31799999999998,30.6074L132.00799999999998,31.6742C133.074,29.3326,134.296,26.1845,135.20600000000002,23.5569L133.672,22.4905C132.684,25.3261,131.30599999999998,28.6302,130.31799999999998,30.6074ZM143.26600000000002,8.93028C143.656,9.66072,144.046,10.5476,144.358,11.356L136.376,11.356L136.376,13.228L153.562,13.228L153.562,11.356L146.412,11.356C146.1,10.4432,145.554,9.2955,145.034,8.40825L143.26600000000002,8.93028ZM145.112,18.35L150.624,18.35C149.922,21.2128,148.726,23.6329,147.21800000000002,25.6105C145.94400000000002,23.9449,144.93,22.0192,144.228,19.9636C144.54000000000002,19.4172,144.826,18.8968,145.112,18.35ZM145.112,13.618C144.228,16.634,142.382,20.302,140.06799999999998,22.6181C140.43200000000002,22.8781,141.03,23.4765,141.34199999999998,23.8409C141.966,23.1905,142.59,22.4357,143.162,21.6292C143.942,23.5809,144.93,25.3761,146.1,26.9637C144.436,28.7593,142.486,30.0862,140.406,30.971C140.796,31.3094,141.29000000000002,31.9858,141.55,32.4282C143.656,31.4654,145.57999999999998,30.1382,147.244,28.3689C148.752,30.0602,150.494,31.4134,152.47,32.3762C152.78199999999998,31.9078,153.35399999999998,31.1794,153.76999999999998,30.841C151.74200000000002,29.9822,149.94799999999998,28.6809,148.414,27.0417C150.416,24.4917,151.924,21.2388,152.73000000000002,17.102L151.534,16.66L151.22199999999998,16.764L145.86599999999999,16.764C146.28199999999998,15.854,146.62,14.944,146.93200000000002,14.06L145.112,13.618ZM139.834,13.566C138.924,16.4,137.05200000000002,19.8856,134.946,22.1237C135.336,22.4097,135.95999999999998,22.9821,136.24599999999998,23.3465C136.89600000000002,22.6441,137.546,21.8112,138.144,20.9264L138.144,32.4022L139.886,32.4022L139.886,18.038C140.588,16.712,141.186,15.36,141.68,14.086L139.834,13.566Z"
|
|
fill="#FA1C1C"
|
|
fill-opacity="1"
|
|
/>
|
|
</g>
|
|
<g>
|
|
<path
|
|
d="M14.9833,4Q18.0936,4,20.8361,5.18729Q23.5786,6.37458,25.602,8.39799Q27.6254,10.4214,28.8127,13.14716Q30,15.8729,30,18.9833Q30,22.0936,28.8127,24.8361Q27.6254,27.5786,25.602,29.602Q23.5786,31.6254,20.8361,32.8127Q18.0937,34,14.9833,34Q11.8729,34,9.14716,32.8127Q6.42141,31.6254,4.39799,29.602Q2.37458,27.5786,1.18729,24.8361Q0.00000436071,22.0936,0,18.9833Q-0.00000436071,15.8729,1.18729,13.14716Q2.37459,10.42141,4.39799,8.39799Q6.4214,6.37458,9.14716,5.18729Q11.8729,4.00000498367,14.9833,4ZM22.4415,21.0234Q23.4448,21.0234,24.2475,20.505Q25.0502,19.9866,25.0502,18.9498Q25.0502,17.9465,24.2475,17.4615Q23.4448,16.976599999999998,22.4415,16.976599999999998L7.65886,16.976599999999998Q6.65552,16.976599999999998,5.8194,17.4615Q4.98328,17.9465,4.98328,18.9498Q4.98328,19.9866,5.8194,20.505Q6.65552,21.0234,7.65886,21.0234L22.4415,21.0234Z"
|
|
fill="#FA1C1C"
|
|
fill-opacity="1"
|
|
/>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</p>
|
|
<div class="vessel">
|
|
<div
|
|
class="liquid_column"
|
|
:style="{
|
|
'--height': `${
|
|
((disinfectantCapacity <= 0 ? 0 : disinfectantCapacity) / 5000) *
|
|
472
|
|
}px`,
|
|
}"
|
|
>
|
|
<div class="indicator">
|
|
当前剩余
|
|
<p>{{ disinfectantCapacity <= 0 ? 0 : disinfectantCapacity }}g</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right_container">
|
|
<div class="add_liquid_wrap" v-if="tabType == 1">
|
|
<van-field
|
|
type="number"
|
|
v-model="addLiquidVal"
|
|
:maxlength="6"
|
|
readonly
|
|
:formatter="formatter"
|
|
@click.stop="handleClickInput"
|
|
class="add_liquid_input"
|
|
/>
|
|
</div>
|
|
<div class="push_liquid_wrap" v-if="tabType == 2">
|
|
<p class="num">
|
|
{{ disinfectantCapacity <= 0 ? 0 : disinfectantCapacity }}
|
|
</p>
|
|
</div>
|
|
<img
|
|
class="btn mb"
|
|
v-if="!operatorStore.replenishingFluidsWorkState && tabType == 1"
|
|
:src="StartLiquid"
|
|
alt=""
|
|
@click="startAdd"
|
|
/>
|
|
<img
|
|
class="btn mb"
|
|
v-if="operatorStore.replenishingFluidsWorkState && tabType == 1"
|
|
:src="StopLiquidPause"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="btn"
|
|
v-if="operatorStore.replenishingFluidsWorkState && tabType == 1"
|
|
:src="StopLiquid"
|
|
alt=""
|
|
@click="stopAdd"
|
|
/>
|
|
<img
|
|
class="btn"
|
|
v-if="!operatorStore.replenishingFluidsWorkState && tabType == 1"
|
|
:src="StartLiquidPause"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="btn mb"
|
|
v-if="!operatorStore.drainingWorkState && tabType == 2"
|
|
:src="startPush"
|
|
@click="startTabLiquid"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="btn"
|
|
v-if="!operatorStore.drainingWorkState && tabType == 2"
|
|
:src="StartPushPause"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="btn mb"
|
|
v-if="operatorStore.drainingWorkState && tabType == 2"
|
|
:src="StopPushPause"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="btn"
|
|
v-if="operatorStore.drainingWorkState && tabType == 2"
|
|
:src="StopPush"
|
|
@click="stopPop"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<LiquidModal
|
|
v-if="tabType == 2 && tipModalVisible"
|
|
:hideTabLiquid="hideTabLiquid"
|
|
/>
|
|
<van-number-keyboard
|
|
v-model="addLiquidVal"
|
|
:show="numberKeyboardShow"
|
|
@input="handleInput"
|
|
:maxlength="6"
|
|
@blur="numberKeyboardShow = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import StartLiquid from '@/assets/img/liquid/1.png'
|
|
import StartLiquidPause from '@/assets/img/liquid/2.png'
|
|
import StopLiquid from '@/assets/img/liquid/3.png'
|
|
import StopLiquidPause from '@/assets/img/liquid/4.png'
|
|
|
|
import startPush from '@/assets/img/liquid/8.png'
|
|
import StartPushPause from '@/assets/img/liquid/5.png'
|
|
import StopPush from '@/assets/img/liquid/6.png'
|
|
import StopPushPause from '@/assets/img/liquid/7.png'
|
|
|
|
import LiquidModal from './dialogs/LiquidModal.vue'
|
|
import { useDeviceStore, useWebSocketStore, useOperatorStore } from '@/store'
|
|
import { ref } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import {
|
|
startReplenishingFluidsJSON,
|
|
stopReplenishingFluidsJSON,
|
|
stopDrainingJSON,
|
|
} from '@/mock/command'
|
|
|
|
const numberKeyboardShow = ref(false)
|
|
const operatorStore = useOperatorStore()
|
|
|
|
const props = defineProps({
|
|
tabType: {
|
|
type: Number,
|
|
},
|
|
})
|
|
|
|
const addLiquidVal = ref('2000')
|
|
const tipModalVisible = ref(false)
|
|
const webSocketStore = useWebSocketStore()
|
|
|
|
const isPopLiquidStatus = ref(false)
|
|
|
|
const formatter = value => {
|
|
if (parseInt(value) > 5000) {
|
|
return '5000'
|
|
}
|
|
if (parseInt(value) <= 0) {
|
|
return '0'
|
|
}
|
|
return value.replace(/^0+/gi, '')
|
|
}
|
|
|
|
const startAdd = () => {
|
|
if (!(operatorStore.replenishingFluidsWorkState == 1)) {
|
|
webSocketStore.sendCommandMsg(
|
|
startReplenishingFluidsJSON(parseInt(addLiquidVal.value)),
|
|
)
|
|
}
|
|
}
|
|
|
|
const stopAdd = () => {
|
|
if (operatorStore.replenishingFluidsWorkState == 1) {
|
|
webSocketStore.sendCommandMsg(stopReplenishingFluidsJSON)
|
|
}
|
|
}
|
|
|
|
const stopPop = () => {
|
|
if (operatorStore.drainingWorkState == 1) {
|
|
webSocketStore.sendCommandMsg(stopDrainingJSON)
|
|
}
|
|
}
|
|
|
|
const startTabLiquid = () => {
|
|
if (!(operatorStore.drainingWorkState == 1)) {
|
|
tipModalVisible.value = true
|
|
}
|
|
}
|
|
|
|
const hideTabLiquid = () => {
|
|
tipModalVisible.value = false
|
|
}
|
|
|
|
const deviceStore = useDeviceStore()
|
|
|
|
const { disinfectantCapacity } = storeToRefs(deviceStore)
|
|
|
|
const isFirstClick = ref(true)
|
|
|
|
const handleInput = value => {
|
|
if (isFirstClick.value) {
|
|
setTimeout(() => {
|
|
addLiquidVal.value = value + ''
|
|
})
|
|
isFirstClick.value = false
|
|
}
|
|
}
|
|
|
|
const handleClickInput = () => {
|
|
isFirstClick.value = true
|
|
numberKeyboardShow.value = true
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.liquid_contaienr {
|
|
margin-bottom: 19px;
|
|
height: 580px;
|
|
box-sizing: border-box;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.left_container {
|
|
width: 766px;
|
|
height: 580px;
|
|
border-radius: 16px;
|
|
background: #ffffff;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
position: relative;
|
|
.status {
|
|
position: absolute;
|
|
left: 116px;
|
|
top: 36px;
|
|
}
|
|
.vessel {
|
|
position: absolute;
|
|
width: 446px;
|
|
height: 472px;
|
|
left: 34px;
|
|
bottom: 23px;
|
|
background: url(../assets/img/liquid/chart.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
.liquid_column {
|
|
position: absolute;
|
|
background: linear-gradient(270deg, #91cefb, #3fafff, #91cefb);
|
|
height: var(--height);
|
|
box-sizing: border-box;
|
|
border-radius: 3px 3px 20px 20px;
|
|
width: 300px;
|
|
right: 9px;
|
|
bottom: 9px;
|
|
.indicator {
|
|
position: absolute;
|
|
top: -16px;
|
|
right: -260px;
|
|
width: 220px;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
line-height: normal;
|
|
letter-spacing: 0.04em;
|
|
color: #06518b;
|
|
display: flex;
|
|
align-items: center;
|
|
p {
|
|
font-family: Source Han Sans CN;
|
|
font-size: 26px;
|
|
font-weight: 900;
|
|
line-height: normal;
|
|
letter-spacing: 0em;
|
|
color: #06518b;
|
|
margin-left: 9px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right_container {
|
|
width: 424px;
|
|
height: 580px;
|
|
border-radius: 16px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
background: #ffffff;
|
|
padding: 32px 42px 45px 42px;
|
|
.btn {
|
|
width: 340px;
|
|
height: 108px;
|
|
}
|
|
.mb {
|
|
margin-bottom: 18px;
|
|
}
|
|
.add_liquid_wrap {
|
|
position: relative;
|
|
width: 340px;
|
|
height: 221px;
|
|
background-size: 100% 100%;
|
|
margin-bottom: 41px;
|
|
background: url(../assets/img/liquid/form.png);
|
|
.add_liquid_input {
|
|
position: absolute;
|
|
left: -9px;
|
|
bottom: 8px;
|
|
width: 150px;
|
|
height: 69px;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 42px;
|
|
font-weight: bold;
|
|
line-height: normal;
|
|
letter-spacing: 0.02em;
|
|
color: #000000;
|
|
}
|
|
}
|
|
.push_liquid_wrap {
|
|
position: relative;
|
|
width: 340px;
|
|
height: 239px;
|
|
background-size: 100% 100%;
|
|
margin-bottom: 36px;
|
|
background: url(../assets/img/liquid/push.png) no-repeat;
|
|
.num {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
left: 56px;
|
|
width: 175px;
|
|
height: 101px;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 70px;
|
|
font-weight: 900;
|
|
line-height: normal;
|
|
letter-spacing: 0.02em;
|
|
color: #000000;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|