弹框确认和取消按钮位置不统一

1 year ago · 31c8cb56e6
4 changed files with 80 additions and 116 deletions
--- a/src/components/dialogs/DelPreModal.vue
+++ b/src/components/dialogs/DelPreModal.vue
@ -1,37 +1,16 @@
 <template>
-  <div class="del_pre_modal_container">
-    <div class="modal_content">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        fill="none"
-        version="1.1"
-        width="69"
-        height="69"
-        viewBox="0 0 69 69"
-      >
-        <g>
-          <path
-            d="M34.5,0C15.456,0,0,15.456,0,34.5C0,53.544,15.456,69,34.5,69C53.544,69,69,53.544,69,34.5C69,15.456,53.544,0,34.5,0ZM34.5,55.2C32.5335,55.2,30.981,53.613,30.981,51.681C30.981,49.7145,32.568,48.162,34.5,48.162C36.4665,48.162,38.019,49.749,38.019,51.681C38.019,53.613,36.4665,55.2,34.5,55.2ZM38.3295,15.8355L37.605,40.9515C37.5705,42.2625,36.225,43.2975,34.638,43.2975L34.086,43.2975C32.499,43.2975,31.1535,42.2625,31.119,40.9515L30.36,15.8355C30.291,13.8345,31.9125,12.144,33.9825,12.144L34.707,12.144C36.777,12.144,38.3985,13.8345,38.3295,15.8355Z"
-            fill="#FA1C1C"
-            fill-opacity="1"
-          />
-        </g>
-      </svg>
-      <p class="tips">
-        <span class="red">确定要删除当前预设吗？</span>
-      </p>
-      <div class="btns">
-        <div class="ok style-btn" @click="delThisPre">确定</div>
-        <div class="cancel style-btn" @click="handleCancel">取消</div>
-      </div>
-    </div>
-  </div>
+  <my-modal type="confirm" icon="warning"
+    content="确定要删除当前预设吗？"
+    v-model:visible="visible"
+    @ok="delThisPre"
+    @cancel="handleCancel"
+  ></my-modal>
 </template>

 <script setup>
 import { useFormulaStore, useWebSocketStore } from '@/store'
 import { delFormulaJSON, getAllFormulaJSON } from '@/mock/command'
+import { ref } from 'vue'

 const formulaStore = useFormulaStore()
 const webSocketStore = useWebSocketStore()
@ -41,6 +20,10 @@ const props = defineProps({
  },
 })

+
+const visible = ref(true);
+
+
 const handleCancel = () => {
  props.hideDelModal()
 }
--- a/src/components/dialogs/DisinfectModal.vue
+++ b/src/components/dialogs/DisinfectModal.vue
@ -1,43 +1,28 @@
 <template>
-  <div class="disinfect_modal_container">
-    <div class="modal_content">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        fill="none"
-        version="1.1"
-        width="69"
-        height="69"
-        viewBox="0 0 69 69"
-      >
-        <g>
-          <path
-            d="M34.5,0C15.456,0,0,15.456,0,34.5C0,53.544,15.456,69,34.5,69C53.544,69,69,53.544,69,34.5C69,15.456,53.544,0,34.5,0ZM34.5,55.2C32.5335,55.2,30.981,53.613,30.981,51.681C30.981,49.7145,32.568,48.162,34.5,48.162C36.4665,48.162,38.019,49.749,38.019,51.681C38.019,53.613,36.4665,55.2,34.5,55.2ZM38.3295,15.8355L37.605,40.9515C37.5705,42.2625,36.225,43.2975,34.638,43.2975L34.086,43.2975C32.499,43.2975,31.1535,42.2625,31.119,40.9515L30.36,15.8355C30.291,13.8345,31.9125,12.144,33.9825,12.144L34.707,12.144C36.777,12.144,38.3985,13.8345,38.3295,15.8355Z"
-            fill="#FA1C1C"
-            fill-opacity="1"
-          />
-        </g>
-      </svg>
-      <p class="tips">
-        <span class="red">消毒正在进行中，是否终止消毒！</span>
-      </p>
-      <div class="btns">
-        <div class="ok style-btn" @click="handleStart">确定</div>
-        <div class="cancel style-btn" @click="handleCancel">取消</div>
-      </div>
-    </div>
-  </div>
+  <my-modal type="confirm" icon="warning"
+    v-model:visible="visible"
+    @ok="handleStart"
+    @cancel="handleCancel"
+  >
+    <p class="tips"><span class="red">消毒正在进行中，是否终止消毒！</span></p>
+  </my-modal>
 </template>

 <script setup>
 import { stopDisinfectionJSON } from '@/mock/command'
 import { useOperatorStore, useWebSocketStore } from '@/store'
+import { ref } from 'vue'
+
 const props = defineProps({
  hideDisinfectModal: {
    type: Function,
  },
 })

+const visible = ref(true)
+
+
+
 const operatorStore = useOperatorStore()
 const webSocketStore = useWebSocketStore()

@ -59,6 +44,24 @@ const handleStart = () => {
 </script>

 <style lang="scss" scoped>
+.tips {
+  margin-top: 33px;
+  margin-bottom: 50px;
+  font-family: Source Han Sans CN;
+  font-size: 21px;
+  font-weight: normal;
+  letter-spacing: 0.04em;
+  color: #000000;
+  .red {
+    color: #fa1c1c;
+  }
+}
+
+
+
+
+
+
 .disinfect_modal_container {
  position: fixed;
  top: 0;
--- a/src/components/dialogs/LiquidModal.vue
+++ b/src/components/dialogs/LiquidModal.vue
@ -1,40 +1,18 @@
 <template>
-  <div class="liquid_modal_container">
-    <div class="modal_content">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        fill="none"
-        version="1.1"
-        width="69"
-        height="69"
-        viewBox="0 0 69 69"
-      >
-        <g>
-          <path
-            d="M34.5,0C15.456,0,0,15.456,0,34.5C0,53.544,15.456,69,34.5,69C53.544,69,69,53.544,69,34.5C69,15.456,53.544,0,34.5,0ZM34.5,55.2C32.5335,55.2,30.981,53.613,30.981,51.681C30.981,49.7145,32.568,48.162,34.5,48.162C36.4665,48.162,38.019,49.749,38.019,51.681C38.019,53.613,36.4665,55.2,34.5,55.2ZM38.3295,15.8355L37.605,40.9515C37.5705,42.2625,36.225,43.2975,34.638,43.2975L34.086,43.2975C32.499,43.2975,31.1535,42.2625,31.119,40.9515L30.36,15.8355C30.291,13.8345,31.9125,12.144,33.9825,12.144L34.707,12.144C36.777,12.144,38.3985,13.8345,38.3295,15.8355Z"
-            fill="#FA1C1C"
-            fill-opacity="1"
-          />
-        </g>
-      </svg>
-      <p class="warn_info mg">
-        请<span class="red">检查</span>是否接入排出容器
-      </p>
-      <p class="warn_info">
-        并确认<span class="red">容器是否大于</span>排出液体容积
-      </p>
-      <div class="btns">
-        <div class="ok style-btn" @click="tapLiquid">确定</div>
-        <div class="cancel style-btn" @click="cancelTap">取消</div>
-      </div>
-    </div>
-  </div>
+  <my-modal type="confirm" icon="warning"
+    v-model:visible="visible"
+    @ok="tapLiquid"
+    @cancel="cancelTap"
+  >
+    <p class="warn_info mg">请<span class="red">检查</span>是否接入排出容器</p>
+    <p class="warn_info" style="margin-bottom: 50px;">并确认<span class="red">容器是否大于</span>排出液体容积</p>
+  </my-modal>
 </template>

 <script setup>
 import { useWebSocketStore } from '@/store'
 import { startDrainingJSON } from '@/mock/command'
+import { ref } from 'vue'

 const webSocketStore = useWebSocketStore()

@ -44,6 +22,9 @@ const props = defineProps({
  },
 })

+const visible = ref(true)
+
+
 const tapLiquid = () => {
  webSocketStore.sendCommandMsg(startDrainingJSON)
  props?.hideTabLiquid()
@ -55,6 +36,21 @@ const cancelTap = () => {
 </script>

 <style lang="scss" scoped>
+.warn_info {
+  font-family: Source Han Sans CN;
+  font-size: 22px;
+  font-weight: normal;
+  letter-spacing: 0.04em;
+  color: #000000;
+  .red {
+    color: #fa1c1c;
+  }
+}
+.mg {
+  margin-top: 34px;
+  margin-bottom: 16px;
+}
+
 .liquid_modal_container {
  position: fixed;
  top: 0;
--- a/src/components/dialogs/UserModal.vue
+++ b/src/components/dialogs/UserModal.vue
@ -1,35 +1,13 @@
 <template>
-  <div class="user_modal_container">
-    <div class="modal_content">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        fill="none"
-        version="1.1"
-        width="69"
-        height="69"
-        viewBox="0 0 69 69"
-      >
-        <g>
-          <path
-            d="M34.5,0C15.456,0,0,15.456,0,34.5C0,53.544,15.456,69,34.5,69C53.544,69,69,53.544,69,34.5C69,15.456,53.544,0,34.5,0ZM34.5,55.2C32.5335,55.2,30.981,53.613,30.981,51.681C30.981,49.7145,32.568,48.162,34.5,48.162C36.4665,48.162,38.019,49.749,38.019,51.681C38.019,53.613,36.4665,55.2,34.5,55.2ZM38.3295,15.8355L37.605,40.9515C37.5705,42.2625,36.225,43.2975,34.638,43.2975L34.086,43.2975C32.499,43.2975,31.1535,42.2625,31.119,40.9515L30.36,15.8355C30.291,13.8345,31.9125,12.144,33.9825,12.144L34.707,12.144C36.777,12.144,38.3985,13.8345,38.3295,15.8355Z"
-            fill="#FA1C1C"
-            fill-opacity="1"
-          />
-        </g>
-      </svg>
-      <p class="tips">
-        请确认是否将 <span class="red">{{ userWarnInfo }}</span>
-      </p>
-      <div class="btns">
-        <div class="ok style-btn" @click="ok">确定</div>
-        <div class="cancel style-btn" @click="handleCancel">取消</div>
-      </div>
-    </div>
-  </div>
+  <my-modal type="confirm" icon="warning"
+    :content="`请确认是否将 ${userWarnInfo}`"
+    v-model:visible="visible"
+    @ok="ok"
+    @cancel="handleCancel"
+  ></my-modal>
 </template>
-
 <script setup>
+import { ref } from 'vue'
 const props = defineProps({
  userWarnInfo: {
    type: String,
@ -42,6 +20,10 @@ const props = defineProps({
  },
 })

+/** @var {Boolean} */
+const visible = ref(true);
+
+
 const ok = () => {
  props.handleOk()
  props.hideUserModal()