From 2f658813f0e7854f29ad1b4b9dc0c57707505136 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Sun, 10 Sep 2023 14:29:56 +0800
Subject: [PATCH] placeholder

---
 src/components/Setting/components/User.vue |   3 +
 src/components/a.vue                       | 815 -----------------------------
 2 files changed, 3 insertions(+), 815 deletions(-)
 delete mode 100644 src/components/a.vue

diff --git a/src/components/Setting/components/User.vue b/src/components/Setting/components/User.vue
index e111a41..f4ed8d7 100644
--- a/src/components/Setting/components/User.vue
+++ b/src/components/Setting/components/User.vue
@@ -8,12 +8,14 @@
           @focus="showAddPasswordKey"
           type="text"
           class="username_form"
+          placeholder="请输入用户名"
         />
         <input
           v-model="newUserPassword"
           @focus="showAddMewPasswordKey"
           :type="showAddPassword ? 'text' : 'password'"
           class="password_form"
+          placeholder="请输入密码"
         />
         <img
           :src="showAddPassword ? Open : Eye"
@@ -44,6 +46,7 @@
           id="passKey"
           v-model="updateUserNewPassword"
           @focus="showpasswordKey"
+          placeholder="请输入新密码"
         />
         <p class="tip">{{ updateUserInfoTip }}</p>
       </div>
diff --git a/src/components/a.vue b/src/components/a.vue
deleted file mode 100644
index 33eb01d..0000000
--- a/src/components/a.vue
+++ /dev/null
@@ -1,815 +0,0 @@
-<template>
-  <div class="update_device_container">
-    <div class="row_wrap">
-      <p class="title">注射蠕动泵速率(g/min)</p>
-      <p class="num">
-        <van-field
-          type="number"
-          v-model="sprayLiquidConfigVal"
-          :clickable="true"
-          :formatter="formatter7"
-          readonly
-          @click.stop="hideClickKey(2)"
-        />
-      </p>
-    </div>
-    <div class="row_wrap">
-      <p class="title">消毒停止过氧化氢浓度(ppm)</p>
-      <p class="num">
-        <van-field
-          type="number"
-          v-model="stoped_gs"
-          :clickable="true"
-          :formatter="formatter1"
-          readonly
-          @click.stop="hideClickKey(3)"
-        />
-      </p>
-    </div>
-    <div class="row_wrap">
-      <p class="title">消毒继续过氧化氢浓度(ppm)</p>
-      <p class="num">
-        <van-field
-          type="number"
-          v-model="continued_gs"
-          :clickable="true"
-          :formatter="formatter2"
-          readonly
-          @click.stop="hideClickKey(4)"
-        />
-      </p>
-    </div>
-    <div class="row_wrap">
-      <p class="title">消毒停止相对湿度(%RH)</p>
-      <p class="num">
-        <van-field
-          type="number"
-          v-model="stoped_humi"
-          :clickable="true"
-          :formatter="formatter9"
-          readonly
-          @click.stop="hideClickKey(9)"
-        />
-      </p>
-    </div>
-    <div class="row_wrap">
-      <p class="title">消毒继续相对湿度(%RH)</p>
-      <p class="num">
-        <van-field
-          type="number"
-          v-model="continued_humi"
-          :clickable="true"
-          :formatter="formatter10"
-          readonly
-          @click.stop="hideClickKey(10)"
-        />
-      </p>
-    </div>
-    <div class="row_wrap">
-      <p class="title">消毒停止过氧化氢相对饱和度(%RS)</p>
-      <p class="num">
-        <van-field
-          type="number"
-          :formatter="formatter3"
-          v-model="stoped_satur"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(5)"
-        />
-      </p>
-    </div>
-    <div class="row_wrap">
-      <p class="title">消毒继续过氧化氢相对饱和度(%RS)</p>
-      <p class="num">
-        <van-field
-          type="number"
-          :formatter="formatter4"
-          v-model="continued_satur"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(6)"
-        />
-      </p>
-    </div>
-    <div class="row_wrap" @click="showLogPicker">
-      <p class="title">Log等级</p>
-      <div class="num">
-        <p class="log">{{ logVal }}</p>
-      </div>
-    </div>
-    <div class="row_wrap">
-      <p class="title">配方名称</p>
-      <div>
-        <input
-          id="id_formula"
-          type="text"
-          v-model="formula_id"
-          class="formula_input"
-          placeholder="请输入配方名称"
-          @focus="handleShowKeyBoard"
-        />
-      </div>
-    </div>
-    <van-number-keyboard
-      v-model="addLiquidConfigVal"
-      :title="addLiquidConfigVal"
-      :show="addLiquidConfigValShow"
-      @input="val => handleInput(val, 1)"
-      theme="custom"
-      close-button-text="配置"
-      @close="setAddliquidVal"
-      @blur="addLiquidConfigValShow = false"
-    />
-    <van-number-keyboard
-      v-model="sprayLiquidConfigVal"
-      @input="val => handleInput(val, 2)"
-      :title="sprayLiquidConfigVal"
-      :show="sprayLiquidConfigValShow"
-      theme="custom"
-      @close="setSprayLiquidVal"
-      close-button-text="配置"
-      @blur="sprayLiquidConfigValShow = false"
-    />
-    <van-number-keyboard
-      v-model="stoped_gs"
-      @input="val => handleInput(val, 3)"
-      :title="stoped_gs"
-      :show="stoped_gsShow"
-      theme="custom"
-      @close="setStopedGsVal"
-      close-button-text="配置"
-      @blur="stoped_gsShow = false"
-    />
-    <van-number-keyboard
-      v-model="continued_gs"
-      @input="val => handleInput(val, 4)"
-      :title="continued_gs"
-      @close="setcontinuedGsVal"
-      :show="continued_gsShow"
-      theme="custom"
-      close-button-text="配置"
-      @blur="continued_gsShow = false"
-    />
-    <van-number-keyboard
-      v-model="stoped_satur"
-      @input="val => handleInput(val, 5)"
-      :title="stoped_satur"
-      @close="setstopedSaturVal"
-      :show="stoped_saturShow"
-      theme="custom"
-      close-button-text="配置"
-      @blur="stoped_saturShow = false"
-    />
-    <van-number-keyboard
-      v-model="continued_satur"
-      @input="val => handleInput(val, 6)"
-      :title="continued_satur"
-      @close="setContinuedSaturVal"
-      :show="continued_saturShow"
-      theme="custom"
-      close-button-text="配置"
-      @blur="continued_saturShow = false"
-    />
-    <van-number-keyboard
-      v-model="max_humidity"
-      @input="val => handleInput(val, 7)"
-      :title="max_humidity"
-      @close="setMaxHumidityVal"
-      :show="max_humidityShow"
-      theme="custom"
-      close-button-text="配置"
-      @blur="max_humidityShow = false"
-    />
-    <van-number-keyboard
-      theme="custom"
-      close-button-text="配置"
-      @input="val => handleInput(val, 8)"
-      @close="setHeat_timeVal"
-      v-model="pre_heat_time_s"
-      :title="pre_heat_time_s"
-      :show="pre_heat_time_sShow"
-      @blur="pre_heat_time_sShow = false"
-    />
-    <van-number-keyboard
-      @input="val => handleInput(val, 9)"
-      theme="custom"
-      close-button-text="配置"
-      @close="setstoped_humiVal"
-      v-model="stoped_humi"
-      :title="stoped_humi"
-      :show="stoped_humiShow"
-      @blur="stoped_humiShow = false"
-    />
-    <van-number-keyboard
-      theme="custom"
-      @input="val => handleInput(val, 10)"
-      close-button-text="配置"
-      @close="setcontinued_humiVal"
-      v-model="continued_humi"
-      :title="continued_humi"
-      :show="continued_humiShow"
-      @blur="continued_humiShow = false"
-    />
-    <LogPicker
-      v-if="logVisible"
-      :hiddenLogVisible="hiddenLogVisible"
-      :changeLogVal="changeLogVal"
-      :logVal="logVal"
-    />
-    <div class="btns">
-      <div class="btn" @click="save">保存</div>
-      <div class="btn ml" @click="hiddleSettingModal">返回</div>
-    </div>
-    <div class="key_wrap" v-if="showkeyboard" id="keyboard_formula">
-      <SimpleKeyboard @onChange="onChange" :input="formula_id" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, watch } from 'vue'
-import SimpleKeyboard from 'cpns/SimpleKeyboard'
-import { showSuccessToast, showFailToast } from 'vant'
-import {
-  useSettingStore,
-  useWebSocketStore,
-  useOperatorStore,
-  useFormulaStore,
-} from '@/store'
-import { storeToRefs } from 'pinia'
-import {
-  setSettingValJSON,
-  addFormulaJSON,
-  getAllFormulaJSON,
-} from '@/mock/command'
-import LogPicker from 'cpns/dialogs/LogPicker'
-
-const settingStore = useSettingStore()
-const webSocketStore = useWebSocketStore()
-const operatorStore = useOperatorStore()
-const formulaStore = useFormulaStore()
-
-const { currentFormula } = storeToRefs(formulaStore)
-
-const max_humidity = ref('0')
-const continued_satur = ref('0')
-const stoped_satur = ref('0')
-const continued_gs = ref('0')
-const stoped_gs = ref('0')
-const addLiquidConfigVal = ref('0')
-const sprayLiquidConfigVal = ref('0')
-const stoped_humi = ref('0')
-const continued_humi = ref('0')
-const pre_heat_time_s = ref('0')
-
-const pre_heat_time_sShow = ref(false)
-const addLiquidConfigValShow = ref(false)
-const sprayLiquidConfigValShow = ref(false)
-const stoped_gsShow = ref(false)
-const continued_gsShow = ref(false)
-const stoped_saturShow = ref(false)
-const continued_saturShow = ref(false)
-const max_humidityShow = ref(false)
-const stoped_humiShow = ref(false)
-const continued_humiShow = ref(false)
-
-watch(currentFormula, (newValue, oldValue) => {
-  stoped_gs.value = newValue?.stoped_gs
-  continued_gs.value = newValue?.continued_gs
-  stoped_satur.value = newValue?.stoped_satur
-  continued_satur.value = newValue?.continued_satur
-  stoped_humi.value = newValue?.stoped_humi
-  continued_humi.value = newValue?.continued_humi
-  injection_pump_speed.value = newValue?.injection_pump_speed
-})
-
-const logVisible = ref(false)
-const logVal = ref('6')
-
-const formula_id = ref('')
-const save = () => {
-  if (formula_id.value == '') {
-    showFailToast('配方名称不能为空')
-    return
-  }
-  //   const data = {
-  //     formula_id: formula_id.value,
-  //     loglevel: logVal.value,
-  //     injection_pump_speed: sprayLiquidConfigVal.value,
-  //     stoped_gs: stoped_gs.value,
-  //     continued_gs: continued_gs.value,
-  //     stoped_satur: stoped_satur.value,
-  //     continued_satur: continued_satur.value,
-  //     stoped_humi: stoped_humi.value,
-  //     continued_humi: continued_humi.value,
-  //   }
-  //   console.log(data)
-  //   webSocketStore.sendCommandMsg(addFormulaJSON(data))
-  //   webSocketStore.sendCommandMsg(getAllFormulaJSON)
-  props.hideSettingModal()
-}
-
-const changeLogVal = val => {
-  logVal.value = val
-  logVisible.value = false
-}
-const hiddenLogVisible = () => {
-  logVisible.value = false
-}
-const showLogPicker = () => {
-  logVisible.value = true
-}
-
-const isFirstClick = ref(true)
-
-const props = defineProps({
-  hideSettingModal: {
-    type: Function,
-  },
-})
-
-const hiddleSettingModal = () => {
-  props.hideSettingModal()
-}
-
-const hideClickKey = flag => {
-  isFirstClick.value = true
-  stoped_humiShow.value = false
-  continued_humiShow.value = false
-  pre_heat_time_sShow.value = false
-  addLiquidConfigValShow.value = false
-  sprayLiquidConfigValShow.value = false
-  stoped_gsShow.value = false
-  continued_gsShow.value = false
-  stoped_saturShow.value = false
-  continued_saturShow.value = false
-  max_humidityShow.value = false
-  if (flag == 1) {
-    addLiquidConfigValShow.value = true
-  }
-  if (flag == 2) {
-    sprayLiquidConfigValShow.value = true
-  }
-  if (flag == 3) {
-    stoped_gsShow.value = true
-  }
-  if (flag == 4) {
-    continued_gsShow.value = true
-  }
-  if (flag == 5) {
-    stoped_saturShow.value = true
-  }
-  if (flag == 6) {
-    continued_saturShow.value = true
-  }
-  if (flag == 7) {
-    max_humidityShow.value = true
-  }
-  if (flag == 8) {
-    pre_heat_time_sShow.value = true
-  }
-  if (flag == 9) {
-    stoped_humiShow.value = true
-  }
-  if (flag == 10) {
-    continued_humiShow.value = true
-  }
-}
-
-const handleInput = (value, index) => {
-  if (isFirstClick.value) {
-    if (index == 1) {
-      setTimeout(() => {
-        addLiquidConfigVal.value = value + ''
-      })
-    }
-    if (index == 2) {
-      setTimeout(() => {
-        sprayLiquidConfigVal.value = value + ''
-      })
-    }
-    if (index == 3) {
-      setTimeout(() => {
-        stoped_gs.value = value + ''
-      })
-    }
-    if (index == 4) {
-      setTimeout(() => {
-        continued_gs.value = value + ''
-      })
-    }
-    if (index == 5) {
-      setTimeout(() => {
-        stoped_satur.value = value + ''
-      })
-    }
-    if (index == 6) {
-      setTimeout(() => {
-        continued_satur.value = value + ''
-      })
-    }
-    if (index == 7) {
-      setTimeout(() => {
-        max_humidity.value = value + ''
-      })
-    }
-    if (index == 8) {
-      setTimeout(() => {
-        pre_heat_time_s.value = value + ''
-      })
-    }
-    if (index == 9) {
-      setTimeout(() => {
-        stoped_humi.value = value + ''
-      })
-    }
-    if (index == 10) {
-      setTimeout(() => {
-        continued_humi.value = value + ''
-      })
-    }
-    isFirstClick.value = false
-  }
-}
-
-const formatter1 = value => {
-  if (parseInt(value) == 0) {
-    return '0'
-  }
-  let arr = settingStore.allSettingList.filter(item => item.name == 'stoped_gs')
-  if (arr && arr.length > 0) {
-    if (parseInt(value) > arr[0].val_upper_limit) {
-      return arr[0].val_upper_limit + ''
-    }
-    if (parseInt(value) < arr[0].val_lower_limit) {
-      return arr[0].val_lower_limit + ''
-    }
-  }
-  return value.replace(/^0+/gi, '')
-}
-
-const formatter2 = value => {
-  if (parseInt(value) == 0) {
-    return '0'
-  }
-  let arr = settingStore.allSettingList.filter(
-    item => item.name == 'continued_gs',
-  )
-  if (arr && arr.length > 0) {
-    if (parseInt(value) > arr[0].val_upper_limit) {
-      return arr[0].val_upper_limit + ''
-    }
-    if (parseInt(value) < arr[0].val_lower_limit) {
-      return arr[0].val_lower_limit + ''
-    }
-  }
-  return value.replace(/^0+/gi, '')
-}
-
-const formatter3 = value => {
-  if (parseInt(value) == 0) {
-    return '0'
-  }
-  let arr = settingStore.allSettingList.filter(
-    item => item.name == 'stoped_satur',
-  )
-  if (arr && arr.length > 0) {
-    if (parseInt(value) > arr[0].val_upper_limit) {
-      return arr[0].val_upper_limit + ''
-    }
-    if (parseInt(value) < arr[0].val_lower_limit) {
-      return arr[0].val_lower_limit + ''
-    }
-  }
-  return value.replace(/^0+/gi, '')
-}
-
-const formatter4 = value => {
-  if (parseInt(value) == 0) {
-    return '0'
-  }
-  let arr = settingStore.allSettingList.filter(
-    item => item.name == 'continued_satur',
-  )
-  if (arr && arr.length > 0) {
-    if (parseInt(value) > arr[0].val_upper_limit) {
-      return arr[0].val_upper_limit + ''
-    }
-    if (parseInt(value) < arr[0].val_lower_limit) {
-      return arr[0].val_lower_limit + ''
-    }
-  }
-  return value.replace(/^0+/gi, '')
-}
-
-const formatter5 = value => {
-  if (parseInt(value) == 0) {
-    return '0'
-  }
-  let arr = settingStore.allSettingList.filter(
-    item => item.name == 'max_humidity',
-  )
-  if (arr && arr.length > 0) {
-    if (parseInt(value) > arr[0].val_upper_limit) {
-      return arr[0].val_upper_limit + ''
-    }
-    if (parseInt(value) < arr[0].val_lower_limit) {
-      return arr[0].val_lower_limit + ''
-    }
-  }
-  return value.replace(/^0+/gi, '')
-}
-
-const formatter6 = value => {
-  if (parseInt(value) == 0) {
-    return '0'
-  }
-  let arr = settingStore.allSettingList.filter(
-    item => item.name == 'drainage_pump_speed',
-  )
-  if (arr && arr.length > 0) {
-    if (parseInt(value) > arr[0].val_upper_limit) {
-      return arr[0].val_upper_limit + ''
-    }
-    if (parseInt(value) < arr[0].val_lower_limit) {
-      return arr[0].val_lower_limit + ''
-    }
-  }
-  return value.replace(/^0+/gi, '')
-}
-
-const formatter7 = value => {
-  if (parseInt(value) == 0) {
-    return '0'
-  }
-  let arr = settingStore.allSettingList.filter(
-    item => item.name == 'injection_pump_speed',
-  )
-  if (arr && arr.length > 0) {
-    if (parseInt(value) > arr[0].val_upper_limit) {
-      return arr[0].val_upper_limit + ''
-    }
-    if (parseInt(value) < arr[0].val_lower_limit) {
-      return arr[0].val_lower_limit + ''
-    }
-  }
-  return value.replace(/^0+/gi, '')
-}
-
-const formatter8 = value => {
-  if (parseInt(value) == 0) {
-    return '0'
-  }
-  let arr = settingStore.allSettingList.filter(
-    item => item.name == 'pre_heat_time_s',
-  )
-  if (arr && arr.length > 0) {
-    if (parseInt(value) > arr[0].val_upper_limit) {
-      return arr[0].val_upper_limit + ''
-    }
-    if (parseInt(value) < arr[0].val_lower_limit) {
-      return arr[0].val_lower_limit + ''
-    }
-  }
-  return value.replace(/^0+/gi, '')
-}
-
-const formatter9 = value => {
-  if (parseInt(value) == 0) {
-    return '0'
-  }
-  let arr = settingStore.allSettingList.filter(
-    item => item.name == 'stoped_humi',
-  )
-  if (arr && arr.length > 0) {
-    if (parseInt(value) > arr[0].val_upper_limit) {
-      return arr[0].val_upper_limit + ''
-    }
-    if (parseInt(value) < arr[0].val_lower_limit) {
-      return arr[0].val_lower_limit + ''
-    }
-  }
-  return value.replace(/^0+/gi, '')
-}
-
-const formatter10 = value => {
-  if (parseInt(value) == 0) {
-    return '0'
-  }
-  let arr = settingStore.allSettingList.filter(
-    item => item.name == 'continued_humi',
-  )
-  if (arr && arr.length > 0) {
-    if (parseInt(value) > arr[0].val_upper_limit) {
-      return arr[0].val_upper_limit + ''
-    }
-    if (parseInt(value) < arr[0].val_lower_limit) {
-      return arr[0].val_lower_limit + ''
-    }
-  }
-  return value.replace(/^0+/gi, '')
-}
-
-const setAddliquidVal = () => {
-  const val = parseInt(addLiquidConfigVal.value)
-  if (isNaN(val)) {
-    showFailToast('设置失败,请填写正确参数')
-    return
-  }
-}
-
-const setStopedGsVal = () => {
-  const val = parseInt(stoped_gs.value)
-  if (isNaN(val)) {
-    showFailToast('设置失败,请填写正确参数')
-    return
-  }
-}
-
-const setcontinuedGsVal = () => {
-  const val = parseInt(continued_gs.value)
-  if (isNaN(val)) {
-    showFailToast('设置失败,请填写正确参数')
-    return
-  }
-}
-
-const setstopedSaturVal = () => {
-  const val = parseInt(stoped_satur.value)
-  if (isNaN(val)) {
-    showFailToast('设置失败,请填写正确参数')
-    return
-  }
-}
-
-const setContinuedSaturVal = () => {
-  const val = parseInt(continued_satur.value)
-  if (isNaN(val)) {
-    showFailToast('设置失败,请填写正确参数')
-    return
-  }
-}
-
-const setMaxHumidityVal = () => {
-  const val = parseInt(max_humidity.value)
-  if (isNaN(val)) {
-    showFailToast('设置失败,请填写正确参数')
-    return
-  }
-}
-
-const setHeat_timeVal = () => {
-  const val = parseInt(pre_heat_time_s.value)
-  if (isNaN(val)) {
-    showFailToast('设置失败,请填写正确参数')
-    return
-  }
-}
-
-const setstoped_humiVal = () => {
-  const val = parseInt(stoped_humi.value)
-  if (isNaN(val)) {
-    showFailToast('设置失败,请填写正确参数')
-    return
-  }
-}
-
-const setcontinued_humiVal = () => {
-  const val = parseInt(continued_humi.value)
-  if (isNaN(val)) {
-    showFailToast('设置失败,请填写正确参数')
-    return
-  }
-}
-
-const setSprayLiquidVal = () => {
-  const val = parseInt(sprayLiquidConfigVal.value)
-  if (isNaN(val)) {
-    showFailToast('设置失败,请填写正确参数')
-    return
-  }
-}
-
-const showkeyboard = ref(false)
-const onChange = a => {
-  formula_id.value = a
-}
-const handleShowKeyBoard = () => {
-  showkeyboard.value = true
-}
-
-onMounted(() => {
-  document.addEventListener('click', e => {
-    let box = document.getElementById('keyboard_formula')
-    let room = document.getElementById('id_formula')
-    if (!box?.contains(e.target) && e.target != room) {
-      showkeyboard.value = false
-    }
-  })
-})
-</script>
-
-<style lang="scss" scoped>
-.update_device_container {
-  box-sizing: border-box;
-  width: 100%;
-  height: 580px;
-  display: grid;
-  overflow: hidden;
-  grid-template-columns: repeat(2, 1fr);
-  row-gap: 20px;
-  column-gap: 20px;
-  padding: 20px;
-  padding-bottom: 180px;
-  position: relative;
-  .btns {
-    position: absolute;
-    right: 20px;
-    bottom: 20px;
-    width: 300px;
-    height: 68px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    .btn {
-      width: 111px;
-      height: 38px;
-      border-radius: 19px;
-      background: #06518b;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-family: Source Han Sans CN;
-      font-size: 14px;
-      font-weight: normal;
-      line-height: normal;
-      letter-spacing: 0.1em;
-      color: #ffffff;
-    }
-    .ml {
-      margin-left: 20px;
-    }
-  }
-  .row_wrap {
-    // width: 726px;
-    height: 80px;
-    border-radius: 14px;
-    background: #f6f6f6;
-    box-sizing: border-box;
-    padding: 0 18px 0 40px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .title {
-      font-family: Zona Pro;
-      white-space: nowrap;
-      font-size: 20px;
-      font-weight: normal;
-      letter-spacing: 0.06em;
-      color: #000000;
-    }
-    .num {
-      font-family: Source Han Sans CN;
-      font-size: 14px;
-      font-weight: 500;
-      letter-spacing: 0.1em;
-      color: #000000;
-      display: flex;
-      align-items: center;
-      .log {
-        width: 182px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-    .formula_input {
-      border: none;
-      height: 38px;
-      padding: 0 12px;
-      width: 220px;
-    }
-    .btn {
-      width: 87px;
-      height: 45px;
-      border-radius: 23px;
-      background: #06518b;
-      font-family: Source Han Sans CN;
-      font-size: 14px;
-      font-weight: normal;
-      letter-spacing: 0.1em;
-      color: #ffffff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-  .key_wrap {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 230px;
-  }
-}
-</style>