update:代码备份

src/components/ModalDialog.vue

@@ -0,0 +1,234 @@
+<script setup>
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  content: {
+    type: String,
+    default: "",
+  },
+  cancelText: {
+    type: String,
+    default: "取消",
+  },
+  confirmText: {
+    type: String,
+    default: "确定",
+  },
+  showCancel: {
+    type: Boolean,
+    default: true,
+  },
+  showConfirm: {
+    type: Boolean,
+    default: true,
+  },
+  onCancel: {
+    type: Function,
+    default: null,
+  },
+  onConfirm: {
+    type: Function,
+    default: null,
+  },
+});
+
+const handleCancel = () => {
+  props.onCancel?.();
+};
+
+const handleConfirm = () => {
+  props.onConfirm?.();
+};
+</script>
+
+<template>
+  <view class="modal-mask" :style="{ display: show ? 'flex' : 'none' }">
+    <view class="modal-wrap scale-in">
+      <image
+        class="dialog-light"
+        src="../static/common/dialog-light.png"
+        mode="widthFix"
+      />
+      <image
+        class="dialog-icon"
+        src="../static/common/dialog-icon.png"
+        mode="widthFix"
+      />
+
+      <view class="dialog-panel">
+        <image
+          class="dialog-bg"
+          src="../static/common/dialog-bg.png"
+          mode="scaleToFill"
+        />
+        <view class="dialog-content">
+          <slot>
+            <text v-if="title" class="dialog-title">{{ title }}</text>
+            <text v-if="content" class="dialog-text">{{ content }}</text>
+          </slot>
+        </view>
+
+        <view
+          v-if="showCancel || showConfirm"
+          class="dialog-actions"
+          :class="{ single: !(showCancel && showConfirm) }"
+        >
+          <view
+            v-if="showCancel"
+            class="dialog-button cancel"
+            @click="handleCancel"
+          >
+            <text>{{ cancelText }}</text>
+          </view>
+          <view
+            v-if="showConfirm"
+            class="dialog-button confirm"
+            @click="handleConfirm"
+          >
+            <text>{{ confirmText }}</text>
+          </view>
+          
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.modal-mask {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.62);
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+
+.modal-wrap {
+  position: relative;
+  display: flex;
+  width: 549rpx;
+  min-height: 318rpx;;
+  padding-top: 168rpx;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.dialog-light {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 520rpx;
+  z-index: 1;
+  transform-origin: center center;
+  animation: rotateLight 8s linear infinite;
+}
+
+.dialog-icon {
+  position: absolute;
+  top: 70rpx;
+  left: 50%;
+  width: 250rpx;
+  z-index: 5;
+  transform: translateX(-50%);
+}
+
+.dialog-panel {
+  position: relative;
+  width: 100%;
+  min-height: 318rpx;
+  padding: 98rpx 36rpx 40rpx 36rpx;
+  box-sizing: border-box;
+  z-index: 3;
+  border-radius: 24rpx;
+  border: 2rpx solid rgba(249, 213, 161, 0.5);
+  overflow: hidden;
+}
+
+.dialog-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 24rpx;
+}
+
+.dialog-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  text-align: center;
+}
+
+.dialog-title {
+  font-size: 28rpx;
+  font-weight: 700;
+  line-height: 40rpx;
+}
+
+.dialog-text {
+  margin-top: 10rpx;
+  font-size: 26rpx;
+  line-height: 36rpx;
+  white-space: pre-wrap;
+}
+
+.dialog-actions {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  margin-top: 50rpx;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20rpx;
+}
+
+.dialog-actions.single {
+  justify-content: center;
+}
+
+.dialog-button {
+  display: flex;
+  width: 232rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  border-radius: 44rpx;
+  justify-content: center;
+  align-items: center;
+  font-size: 26rpx;
+  font-weight: 500;
+}
+
+.dialog-button.cancel {
+  color: #fff;
+  background-color: rgba(255,255,255,0.2);
+}
+
+.dialog-button.confirm {
+  color: #000000;
+  background-color: #ffda3f;
+}
+
+@keyframes rotateLight {
+  from {
+    transform: translateX(-50%) rotate(0deg);
+  }
+
+  to {
+    transform: translateX(-50%) rotate(360deg);
+  }
+}
+</style>