modal

src/components/ClearModal.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="clear_modal">
+    <div class="modal_content">
+      <div class="cancel" @click="clear"></div>
+      <div class="ok" @click="handleOk"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  handleHidden: {
+    type: Function,
+  },
+  clearSetting: {
+    type: Function,
+  },
+})
+
+const clear = () => {
+  props.handleHidden()
+}
+
+const handleOk = () => {
+  props.clearSetting()
+  props.handleHidden()
+}
+</script>
+
+<style lang="scss" scoped>
+.clear_modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(23, 53, 112, 0.1);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .modal_content {
+    width: 400px;
+    height: 330px;
+    border-radius: 20px;
+    background: #ffffff;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+    background: url(../assets/img/modal.png) no-repeat;
+    background-size: 100% 100%;
+    .cancel {
+      position: absolute;
+      width: 170px;
+      height: 60px;
+      border-radius: 467px;
+      opacity: 1;
+      left: 21px;
+      bottom: 19px;
+    }
+    .ok {
+      position: absolute;
+      width: 170px;
+      height: 60px;
+      border-radius: 467px;
+      opacity: 1;
+      left: 210px;
+      bottom: 19px;
+    }
+  }
+}
+</style>

src/components/TimeSelect.vue

@@ -3,7 +3,7 @@
     <div class="left_container">
       <p class="title">{{ position }}</p>
       <div class="select_time" @click="showPicker = true">选择时间</div>
-      <p class="clear_time" @click="clearSetting">清除设定</p>
+      <p class="clear_time" @click="clearModalVisible = true">清除设定</p>
     </div>
     <div class="right_container">
       <p class="no_time" v-if="timeStore[`clock_status_${num}`] == 0">未设定</p>
@@ -79,6 +79,11 @@
         @confirm="onConfirm"
       />
     </van-popup>
+    <ClearModal
+      v-if="clearModalVisible"
+      :handleHidden="handleHidden"
+      :clearSetting="clearSetting"
+    />
   </div>
 </template>
 
@@ -86,6 +91,7 @@
 import { ref, onMounted } from 'vue'
 import { formatNumber } from '@/utils'
 import { useTimeStore } from '@/store'
+import ClearModal from 'cpns/ClearModal'
 
 const timeStore = useTimeStore()
 
@@ -98,9 +104,14 @@ const props = defineProps({
   },
 })
 
+const clearModalVisible = ref(false)
 const columns = ref([])
 const time = ref(0)
 
+const handleHidden = () => {
+  clearModalVisible.value = false
+}
+
 onMounted(() => {
   let arr = []
   for (let i = 0; i < 3; i++) {

vite.config.js

@@ -11,6 +11,9 @@ export default defineConfig({
     },
     extensions: ['.js', '.json', '.vue'],
   },
+  server: {
+    host: '0.0.0.0',
+  },
   plugins: [vue()],
   //配置sass
   css: {