diff --git a/src/pages-aigc/agreement/agreement.vue b/src/pages-aigc/agreement/agreement.vue new file mode 100644 index 0000000..20568f6 --- /dev/null +++ b/src/pages-aigc/agreement/agreement.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/src/pages-aigc/agreement/styles/index.scss b/src/pages-aigc/agreement/styles/index.scss new file mode 100644 index 0000000..ac4f7d0 --- /dev/null +++ b/src/pages-aigc/agreement/styles/index.scss @@ -0,0 +1,54 @@ +.aigc-agreement-page { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + overflow: hidden; + background: #ffffff; +} + +.aigc-agreement-scroll { + height: 0; + flex: 1 1 auto; + min-height: 0; + background: #ffffff; +} + +.aigc-agreement-document { + min-height: 100%; + padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); + box-sizing: border-box; +} + +.aigc-agreement-state { + min-height: 240px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 24px; + color: #7b8798; + font-size: 14px; + line-height: 22px; + box-sizing: border-box; +} + +.aigc-agreement-retry { + width: 120px; + height: 42px; + display: flex; + align-items: center; + justify-content: center; + margin: 16px 0 0; + padding: 0; + border-radius: 999px; + background: #102942; + color: #ffffff; + font-size: 14px; + line-height: 20px; + font-weight: 800; +} + +.aigc-agreement-retry::after { + border: 0; +} diff --git a/src/pages-aigc/components/AigcTopBar/index.vue b/src/pages-aigc/components/AigcTopBar/index.vue index 833f382..aa5de12 100644 --- a/src/pages-aigc/components/AigcTopBar/index.vue +++ b/src/pages-aigc/components/AigcTopBar/index.vue @@ -10,8 +10,7 @@ - - {{ rechargeLabel }} + {{ displayPoints }} 积分 @@ -37,10 +36,6 @@ const props = defineProps({ type: [Number, String], default: 0, }, - rechargeLabel: { - type: String, - default: "充值", - }, showActions: { type: Boolean, default: true, @@ -52,7 +47,7 @@ const props = defineProps({ }, }); -const emit = defineEmits(["back", "history", "recharge"]); +const emit = defineEmits(["back", "history"]); const statusBarHeight = ref(0); const navHeight = ref(52); diff --git a/src/pages-aigc/components/AigcTopBar/styles/index.scss b/src/pages-aigc/components/AigcTopBar/styles/index.scss index 06a67df..8dfcc55 100644 --- a/src/pages-aigc/components/AigcTopBar/styles/index.scss +++ b/src/pages-aigc/components/AigcTopBar/styles/index.scss @@ -18,6 +18,7 @@ } .aigc-nav-row { + position: relative; height: var(--aigc-nav-height); display: flex; align-items: center; @@ -53,12 +54,15 @@ } .aigc-topbar-actions { - flex: 1 1 auto; + position: absolute; + left: 50%; + transform: translateX(-50%); + flex: 0 0 auto; width: auto; min-width: 0; height: 36px; display: grid; - grid-template-columns: minmax(0, 1fr) 36px; + grid-template-columns: auto 36px; align-items: center; gap: 6px; border-radius: 999px; @@ -68,7 +72,7 @@ } .aigc-history-button, -.aigc-wallet-button { +.aigc-points-display { height: 36px; min-width: 0; display: flex; @@ -94,29 +98,15 @@ justify-content: center; } -.aigc-wallet-button { - justify-content: space-between; - gap: 6px; - padding: 0 8px; +.aigc-points-display { + min-width: 84px; + max-width: 112px; + justify-content: center; + padding: 0 12px; background: #102942; color: #ffffff; } -.aigc-wallet-label { - height: 24px; - flex: 0 0 auto; - display: inline-flex; - align-items: center; - padding: 0 8px; - border-radius: 999px; - background: rgba(32, 207, 117, 0.18); - color: #50e093; - font-size: 10px; - line-height: 24px; - font-weight: 900; - white-space: nowrap; -} - .aigc-wallet-points { min-width: 0; display: inline-flex; diff --git a/src/pages-aigc/detail/detail.vue b/src/pages-aigc/detail/detail.vue index 3c7834e..830a0fd 100644 --- a/src/pages-aigc/detail/detail.vue +++ b/src/pages-aigc/detail/detail.vue @@ -1,6 +1,6 @@ @@ -49,7 +42,7 @@ defineProps({ }, }); -const emit = defineEmits(["generate", "recharge"]); +const emit = defineEmits(["generate"]);