save

src/assets/css/colors.scss

@@ -7,6 +7,6 @@ $font-color: rgb(187, 187, 187);
 $main: rgb(12, 140, 233);
 $second: rgb(75, 110, 175);
 $item-hover: rgb(75, 75, 75);
-$space: 20rem;
+$space: 24rem;
 $footer-height: 40rem;
 $card-radius: 8rem;

src/components/BaseButton.vue

@@ -2,13 +2,19 @@
 import Tooltip from "@/components/Tooltip.vue";
 import {Icon} from "@iconify/vue";
 
-defineProps<{
+interface IProps {
   keyboard?: string,
   active?: boolean
   disabled?: boolean
   loading?: boolean
-  size?: string
-}>()
+  size?: 'small' | 'normal' | 'large',
+  type?: 'primary' | 'link'
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  type: 'primary',
+  size: 'normal',
+})
 
 defineEmits(['click'])
 
@@ -24,6 +30,7 @@ function click() {
          :class="[
              active && 'active',
              size,
+             type,
              (disabled||loading) && 'disabled',
              !disabled && 'hvr-grow'
          ]">
@@ -53,7 +60,6 @@ function click() {
   align-items: center;
   justify-content: center;
   transition: all .3s;
-  background: rgb(75, 85, 99);
   //background: #999;
   //background: rgb(60, 63, 65);
   //background: var(--color-second-bg);
@@ -79,6 +85,13 @@ function click() {
     }
   }
 
+  &.large {
+    height: 50rem;
+    font-size: 18rem;
+    padding: 0 18rem;
+  }
+
+
   & > span {
     font-size: 16rem;
     color: white;
@@ -92,14 +105,13 @@ function click() {
     opacity: .7;
   }
 
-  &.large {
-    height: 50rem;
-    font-size: 18rem;
-    padding: 0 18rem;
-  }
 
   &.primary {
-    background: $main;
+    background: rgb(75, 85, 99);
+  }
+
+  &.link {
+    border-bottom-color: black;
   }
 
   &.active {

src/components/Modal/Confirm.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+import Modal from "@/components/Modal/Modal.vue";
+</script>
+
+<template>
+  <Modal>
+
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/components/Modal/Modal.vue

@@ -4,6 +4,7 @@ import Tooltip from "@/components/Tooltip.vue";
 import {Icon} from '@iconify/vue';
 import {useEsc} from "@/hooks/event.ts";
 import {$ref} from "vue/macros";
+import BaseButton from "@/components/BaseButton.vue";
 
 interface IProps {
   modelValue?: boolean,
@@ -11,6 +12,7 @@ interface IProps {
   title?: string,
   subTitle?: string,
   fullScreen?: boolean;
+  padding?: boolean
 }
 
 const props = withDefaults(defineProps<IProps>(), {
@@ -82,20 +84,29 @@ useEsc(close, () => props.modelValue)
                 fullScreen?'full':'window'
             ]"
       >
-        <Tooltip title="关闭">
-          <Icon @click="close"
-                v-if="showClose"
-                class="close hvr-grow pointer"
-                width="20" color="#929596"
-                icon="ion:close-outline"/>
-        </Tooltip>
-        <div class="modal-header" v-if="props.title">
+        <div class="modal-header">
           <div class="title">{{ props.title }}</div>
-          <div class="sub-title" v-if="props.subTitle">{{ props.subTitle }}</div>
+          <Tooltip title="关闭">
+            <Icon @click="close"
+                  v-if="showClose"
+                  class="close hvr-grow pointer"
+                  width="20" color="#929596"
+                  icon="ion:close-outline"/>
+          </Tooltip>
+          <!--          <div class="sub-title" v-if="props.subTitle">{{ props.subTitle }}</div>-->
         </div>
-        <div class="modal-body">
+        <div class="modal-body" :class="{padding}">
           <slot></slot>
         </div>
+        <div class="modal-footer">
+          <div class="left">
+
+          </div>
+          <div class="right">
+            <BaseButton type="link">取消</BaseButton>
+            <BaseButton>确定</BaseButton>
+          </div>
+        </div>
       </div>
     </div>
   </Teleport>
@@ -105,7 +116,7 @@ useEsc(close, () => props.modelValue)
 @import "@/assets/css/colors";
 
 $modal-mask-bg: rgba(#000, .45);
-$radius: 16rem;
+$radius: 24rem;
 $time: 0.3s;
 $header-height: 60rem;
 
@@ -202,18 +213,16 @@ $header-height: 60rem;
     flex-direction: column;
     transition: transform $time, opacity $time;
 
-
     .modal-header {
       display: flex;
-      flex-direction: column;
-      justify-content: center;
+      justify-content: space-between;
       align-items: center;
-      padding: 15rem $space;
+      padding: 24rem 24rem 16rem;
       border-radius: $radius $radius 0 0;
 
       .title {
         color: var(--color-font-1);
-        font-weight: 500;
+        font-weight: bold;
         font-size: 28rem;
         line-height: 33rem;
       }
@@ -235,6 +244,48 @@ $header-height: 60rem;
       flex: 1;
       overflow: hidden;
       display: flex;
+
+      &.padding {
+        padding: 4rem 24rem 24rem;
+      }
+    }
+
+    .modal-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16rem 24rem;
+      color: #fff;
+      font-size: 18rem;
+      background: rgba(0, 0, 0, .2);
+      border-radius: 0 0 24rem 24rem;
+
+      .left {
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        .text {
+          color: white;
+          font-size: 16rem;
+          cursor: pointer;
+        }
+
+        &.active {
+          .text {
+            color: white;
+          }
+        }
+      }
+
+      .right {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: flex-end;
+        height: 100%;
+        gap: $space;
+      }
     }
   }