设置消毒登记

src/components/Operator.vue

@@ -25,10 +25,13 @@
         <div class="num">000/100</div>
       </div>
     </div>
+    <LogPicker />
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import LogPicker from 'cpns/dialogs/LogPicker'
+</script>
 
 <style lang="scss" scoped>
 .operator_main_content {

src/components/Setting/components/Admin.vue

@@ -52,6 +52,9 @@
   }
   .form_wrap {
     margin-bottom: 35px;
+    width: 330px;
+    height: 151px;
+    box-sizing: border-box;
   }
   .btn_wrap {
     display: flex;

src/components/dialogs/LogPicker.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="log_picker_dialog_container">
+    <div class="modal_content">
+      <p class="title">设置消毒等级</p>
+      <div class="log_select">
+        <van-picker
+          :columns="columns"
+          :show-toolbar="false"
+          visible-option-num="3"
+          option-height="42"
+          v-model="selectedValues"
+        />
+      </div>
+
+      <div class="ok_btn">确定</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const columns = ref([
+  { text: '1 Log', value: '1' },
+  { text: '2 Log', value: '2' },
+  { text: '3 Log', value: '3' },
+  { text: '4 Log', value: '4' },
+  { text: '5 Log', value: '5' },
+  { text: '6 Log', value: '6' },
+  { text: '7 Log', value: '7' },
+  { text: '8 Log', value: '8' },
+  { text: '9 Log', value: '9' },
+  { text: '10 Log', value: '10' },
+  { text: '11 Log', value: '11' },
+  { text: '12 Log', value: '12' },
+])
+
+const selectedValues = ref(['6'])
+</script>
+
+<style lang="scss" scoped>
+.log_picker_dialog_container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .modal_content {
+    width: 476px;
+    height: 407px;
+    border-radius: 16px;
+    background: #ffffff;
+    box-sizing: border-box;
+    padding: 45px 68px 62px 68px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .title {
+      font-family: Source Han Sans CN;
+      font-size: 22px;
+      font-weight: normal;
+      letter-spacing: 0.04em;
+      color: #000000;
+      margin-bottom: 39px;
+    }
+    .log_select {
+      width: 340px;
+      height: 113px;
+      overflow: hidden;
+      margin-bottom: 48px;
+    }
+    .ok_btn {
+      width: 340px;
+      height: 68px;
+      border-radius: 8px;
+      background: #06518b;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: Source Han Sans CN;
+      font-size: 23px;
+      font-weight: 350;
+      letter-spacing: 0em;
+      color: #ffffff;
+    }
+  }
+}
+</style>

src/main.js

@@ -2,13 +2,14 @@ import { createApp } from 'vue'
 import router from './router'
 import store from './store'
 import App from './App.vue'
-import { DatePicker, TimePicker } from 'vant'
+import { DatePicker, TimePicker, Picker } from 'vant'
 import 'vant/lib/index.css'
 import '@/assets/css/reset.css'
 import './style.scss'
 
 createApp(App)
   .use(router)
+  .use(Picker)
   .use(DatePicker)
   .use(TimePicker)
   .use(store)