Review changes batch 6 of 6

2026-07-20 06:52:33 +08:00
parent db97d3da27
commit 5a31a75da0
160 changed files with 9206 additions and 572 deletions
@@ -0,0 +1,127 @@
+<template>
+  <view
+    v-if="visible"
+    class="app-dialog-layer"
+    @click="closeOnMask && cancel()"
+  >
+    <view class="app-dialog" @click.stop>
+      <image
+        class="app-dialog__skin"
+        src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
+        mode="aspectFit"
+      />
+      <view class="app-dialog__content">
+        <text v-if="eyebrow" class="app-dialog__eyebrow">{{ eyebrow }}</text>
+        <text class="app-dialog__title">{{ title }}</text>
+        <text v-if="message" class="app-dialog__message">{{ message }}</text>
+        <slot />
+        <view
+          class="app-dialog__actions"
+          :class="{ 'app-dialog__actions--single': !showCancel }"
+        >
+          <AppButton
+            v-if="showCancel"
+            type="secondary"
+            :label="cancelText"
+            @click="cancel"
+          />
+          <AppButton :label="confirmText" @click="$emit('confirm')" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import AppButton from "@/components/AppButton.vue";
+
+defineProps({
+  visible: { type: Boolean, default: false },
+  eyebrow: { type: String, default: "" },
+  title: { type: String, required: true },
+  message: { type: String, default: "" },
+  confirmText: { type: String, default: "我知道了" },
+  cancelText: { type: String, default: "取消" },
+  showCancel: { type: Boolean, default: false },
+  closeOnMask: { type: Boolean, default: true },
+});
+const emit = defineEmits(["confirm", "cancel", "close"]);
+const cancel = () => {
+  emit("cancel");
+  emit("close");
+};
+</script>
+
+<style scoped lang="scss">
+.app-dialog-layer {
+  position: fixed;
+  z-index: 80;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 40rpx;
+  background: rgba(35, 18, 10, 0.62);
+}
+.app-dialog {
+  position: relative;
+  width: 650rpx;
+  max-width: 100%;
+  min-height: 520rpx;
+}
+.app-dialog__skin {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.app-dialog__content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  min-height: 520rpx;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 74rpx 66rpx 54rpx;
+  text-align: center;
+}
+.app-dialog__eyebrow {
+  color: #9f170f;
+  font-size: 22rpx;
+  font-weight: 700;
+  letter-spacing: 4rpx;
+}
+.app-dialog__title {
+  color: #8f160f;
+  font-size: 42rpx;
+  font-weight: 700;
+  letter-spacing: 4rpx;
+}
+.app-dialog__eyebrow + .app-dialog__title {
+  margin-top: 10rpx;
+}
+.app-dialog__message {
+  margin-top: 22rpx;
+  color: #513a28;
+  font-size: 27rpx;
+  line-height: 1.65;
+}
+.app-dialog__actions {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 1fr 1fr;
+  gap: 16rpx;
+  margin-top: auto;
+}
+.app-dialog__actions--single {
+  display: flex;
+  justify-content: center;
+}
+.app-dialog__actions .app-button {
+  width: 100%;
+  min-height: 82rpx;
+}
+</style>