rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改部分样式

Browse Source
This commit is contained in:
rain
2026-07-27 17:29:58 +08:00
parent 04287e6777
commit 1e9e25fe67
53 changed files with 11562 additions and 2617 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/genealogy/g12-generation-poems.vue
+439 -98
View File
@@ -3,67 +3,145 @@
<view class="poem-page">
<GenealogyPageBackground />
<view class="poem-page__header">
<PageHeader :title="pageTitle" :action="poemState === 'list' || poemState === 'empty' ? '维护' : ''" custom-back @action="enterManagement" @back="requestBack" />
<PageHeader
:title="pageTitle"
:action="poemState === 'list' || poemState === 'empty' ? '维护' : ''"
custom-back
@action="enterManagement"
@back="requestBack"
/>
</view>
<view class="poem-panel" :class="`poem-state--${poemState}`">
<AppLoading v-if="poemState === 'loading'" text="正在读取字辈诗" description="正在整理家谱的传承字序。" />
<AppLoading
v-if="poemState === 'loading'"
text="正在读取字辈诗"
description="正在整理家谱的传承字序。"
/>
<view v-else-if="poemState === 'list'" class="poem-list">
<text class="poem-list__eyebrow">{{ genealogyName }} · 传承字序</text>
<text class="poem-list__title">{{ generationRangeTitle }}</text>
<text class="poem-list__copy">按已记录的世代和字辈展示传承字序。</text>
<view class="poem-rows">
<view v-for="item in visiblePoemRows" :key="item.poemId" class="poem-row" :class="{ 'poem-row--disabled': item.status === GENERATION_POEM_STATUS.DISABLED }">
<view
v-for="item in visiblePoemRows"
:key="item.poemId"
class="poem-row"
:class="{
'poem-row--disabled':
item.status === GENERATION_POEM_STATUS.DISABLED,
}"
>
<text class="poem-row__number">第 {{ item.generationNo }} 世</text>
<text class="poem-row__character">{{ item.generationText }}</text>
<text class="poem-row__status">{{ item.status === GENERATION_POEM_STATUS.DISABLED ? '已停用·记录保留' : '传承字序' }}</text>
<text class="poem-row__status">{{
item.status === GENERATION_POEM_STATUS.DISABLED
? "已停用·记录保留"
: "传承字序"
}}</text>
</view>
</view>
<view v-if="remainingPoemCount > 0" class="poem-load-more" @click="loadMorePoems">
<view
v-if="remainingPoemCount > 0"
class="poem-load-more"
@click="loadMorePoems"
>
<text>继续加载后续字辈（剩余 {{ remainingPoemCount }} 代）</text>
</view>
<view class="poem-action" @click="enterManagement">
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>{{ canManage ? '继续维护字辈诗' : '读取维护列表' }}</text>
<image
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/><text>{{ canManage ? "继续维护字辈诗" : "读取维护列表" }}</text>
</view>
</view>
<view v-else-if="poemState === 'edit'" class="poem-editor">
<text class="poem-list__eyebrow">服务端批量维护</text>
<text class="poem-list__title">录入完整字辈序列</text>
<text class="poem-list__copy">提交前会先请求服务端批量预览。无分隔符时每个字符对应一代；也可用空格、逗号、分号、顿号、斜杠或竖线分隔多字字辈。</text>
<text class="poem-list__copy"
>提交前会先请求服务端批量预览。无分隔符时每个字符对应一代；也可用空格、逗号、分号、顿号、斜杠或竖线分隔多字字辈。</text
>
<view class="poem-field">
<text>字辈内容</text>
<textarea v-model="poemDraft" auto-height :maxlength="MAX_GENERATION_POEM_INPUT_LENGTH" placeholder="例如：启宗敦本，或 克勤 克俭 承先 启后" placeholder-class="poem-placeholder" @input="invalidatePreview" />
<textarea
v-model="poemDraft"
auto-height
:maxlength="MAX_GENERATION_POEM_INPUT_LENGTH"
placeholder="例如：启宗敦本，或 克勤 克俭 承先 启后"
placeholder-class="poem-placeholder"
@input="invalidatePreview"
/>
</view>
<text v-if="poemError" class="poem-field-error">{{ poemError }}</text>
<view class="poem-policy">
<text>未被新文本覆盖的后续世代</text>
<view class="poem-policy__option" @click="toggleDisableMissing">
<image :src="disableMissing ? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png' : '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'" mode="aspectFit" />
<text :class="{ 'poem-policy__option-text--active': disableMissing }">{{ disableMissing ? '停用并保留记录' : '保持原状态' }}</text>
<image
:src="
disableMissing
? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png'
: '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'
"
mode="aspectFit"
/>
<text
:class="{ 'poem-policy__option-text--active': disableMissing }"
>{{ disableMissing ? "停用并保留记录" : "保持原状态" }}</text
>
</view>
</view>
<text class="poem-preview">{{ previewSummary }}</text>
<view class="poem-editor__actions">
<view class="poem-action" @click="requestLeaveEditor">
<image src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png" mode="aspectFit" /><text class="poem-action__secondary">取消</text>
<image
src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png"
mode="aspectFit"
/><text class="poem-action__secondary">取消</text>
</view>
<view class="poem-action" :class="{ 'poem-action--disabled': previewing || saving }" @click="previewPoems">
<image src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png" mode="aspectFit" /><text class="poem-action__secondary">{{ previewing ? '正在预览' : '服务端预览' }}</text>
<view
class="poem-action"
:class="{ 'poem-action--disabled': previewing || saving }"
@click="previewPoems"
>
<image
src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png"
mode="aspectFit"
/><text class="poem-action__secondary">{{
previewing ? "正在预览" : "服务端预览"
}}</text>
</view>
<view class="poem-action" :class="{ 'poem-action--disabled': !canSave || saving }" @click="savePoems">
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>{{ saving ? '正在保存' : '保存字辈' }}</text>
<view
class="poem-action"
:class="{ 'poem-action--disabled': !canSave || saving }"
@click="savePoems"
>
<image
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/><text>{{ saving ? "正在保存" : "保存字辈" }}</text>
</view>
</view>
</view>
<view v-else class="poem-state-card">
<text class="poem-list__eyebrow">{{ poemState === 'empty' ? '尚未建立字辈' : '字辈暂不可用' }}</text>
<text class="poem-list__title">{{ poemState === 'empty' ? '当前读取没有正常状态字辈' : '暂时无法读取字辈诗' }}</text>
<text class="poem-list__eyebrow">{{
poemState === "empty" ? "尚未建立字辈" : "字辈暂不可用"
}}</text>
<text class="poem-list__title">{{
poemState === "empty"
? "当前读取没有正常状态字辈"
: "暂时无法读取字辈诗"
}}</text>
<text class="poem-list__copy">{{ stateCopy }}</text>
<view class="poem-action" @click="handleStateAction">
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>{{ poemState === 'empty' ? '读取维护列表' : '重新读取' }}</text>
<image
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/><text>{{
poemState === "empty" ? "读取维护列表" : "重新读取"
}}</text>
</view>
</view>
</view>
@@ -79,7 +157,9 @@
@confirm="confirmDiscard"
@cancel="cancelDiscard"
/>
<view v-if="feedbackMessage" class="poem-feedback"><text>{{ feedbackMessage }}</text></view>
<view v-if="feedbackMessage" class="poem-feedback"
><text>{{ feedbackMessage }}</text></view
>
</view>
</template>
@@ -91,7 +171,11 @@ import AppLoading from "@/components/AppLoading.vue";
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
import PageHeader from "@/components/PageHeader.vue";
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
import {
appApi,
createRequestController,
isRequestCancelled,
} from "@/utils/api.js";
import {
MAX_GENERATION_POEM_INPUT_LENGTH,
GENERATION_POEM_STATUS,
@@ -119,32 +203,46 @@ const previewSignature = ref("");
const requestController = createRequestController();
let requestSequence = 0;
const visiblePoemRows = computed(() => poemRows.value.slice(0, visiblePoemCount.value));
const remainingPoemCount = computed(() => Math.max(0, poemRows.value.length - visiblePoemCount.value));
const pageTitle = computed(() => poemState.value === "edit" ? "维护字辈诗" : "字辈诗");
const visiblePoemRows = computed(() =>
poemRows.value.slice(0, visiblePoemCount.value),
);
const remainingPoemCount = computed(() =>
Math.max(0, poemRows.value.length - visiblePoemCount.value),
);
const pageTitle = computed(() =>
poemState.value === "edit" ? "维护字辈诗" : "字辈诗",
);
const generationRangeTitle = computed(() => {
if (!poemRows.value.length) return "尚未建立字辈";
const first = poemRows.value[0].generationNo;
const last = poemRows.value[poemRows.value.length - 1].generationNo;
return first === last ? `第 ${first} 世字辈` : `第 ${first}—${last} 世字辈`;
});
const draftSignature = computed(() => `${poemDraft.value}\u0000${disableMissing.value}`);
const canSave = computed(() => Boolean(preview.value) && previewSignature.value === draftSignature.value);
const draftSignature = computed(
() => `${poemDraft.value}\u0000${disableMissing.value}`,
);
const canSave = computed(
() =>
Boolean(preview.value) && previewSignature.value === draftSignature.value,
);
const previewSummary = computed(() => {
if (previewing.value) return "正在请求服务端预览。";
if (!preview.value) return "尚未请求服务端预览；预览成功后才可保存。";
return `服务端预览：新增 ${preview.value.createCount} 条，更新 ${preview.value.updateCount} 条，保留 ${preview.value.keepCount} 条，停用 ${preview.value.disableCount} 条。`;
});
const stateCopy = computed(() => poemState.value === "empty"
? "当前尚未添加可用的字辈，可进入维护页面查看。"
: "暂未读取到可展示的字辈，请稍后重试。",
const stateCopy = computed(() =>
poemState.value === "empty"
? "当前尚未添加可用的字辈，可进入维护页面查看。"
: "暂未读取到可展示的字辈，请稍后重试。",
);
const isDirty = computed(() => Boolean(
poemState.value === "edit" && editorSnapshot.value && (
poemDraft.value !== editorSnapshot.value.poemDraft ||
disableMissing.value !== editorSnapshot.value.disableMissing
const isDirty = computed(() =>
Boolean(
poemState.value === "edit" &&
editorSnapshot.value &&
(poemDraft.value !== editorSnapshot.value.poemDraft ||
disableMissing.value !== editorSnapshot.value.disableMissing),
),
));
);
const discardConfirmation = createDiscardConfirmation((visible) => {
discardVisible.value = visible;
});
@@ -168,8 +266,12 @@ const loadPoems = async ({ management = false } = {}) => {
poemError.value = "";
try {
const rows = management
? await appApi.getGenerationPoemManagement(genealogyId.value, { requestController })
: await appApi.getGenerationPoems(genealogyId.value, { requestController });
? await appApi.getGenerationPoemManagement(genealogyId.value, {
requestController,
})
: await appApi.getGenerationPoems(genealogyId.value, {
requestController,
});
if (sequence !== requestSequence) return false;
applyRows(rows);
canManage.value = management;
@@ -182,7 +284,10 @@ const loadPoems = async ({ management = false } = {}) => {
}
};
const loadMorePoems = () => {
visiblePoemCount.value = Math.min(poemRows.value.length, visiblePoemCount.value + POEM_RENDER_BATCH_SIZE);
visiblePoemCount.value = Math.min(
poemRows.value.length,
visiblePoemCount.value + POEM_RENDER_BATCH_SIZE,
);
};
const invalidatePreview = () => {
poemError.value = "";
@@ -202,7 +307,10 @@ const openEditor = () => {
disableMissing.value = false;
preview.value = null;
previewSignature.value = "";
editorSnapshot.value = Object.freeze({ poemDraft: poemDraft.value, disableMissing: disableMissing.value });
editorSnapshot.value = Object.freeze({
poemDraft: poemDraft.value,
disableMissing: disableMissing.value,
});
poemState.value = "edit";
return true;
};
@@ -234,13 +342,18 @@ const previewPoems = async () => {
previewing.value = true;
poemError.value = "";
try {
preview.value = await appApi.previewGenerationPoemBatch(genealogyId.value, {
poemText: poemDraft.value,
disableMissing: disableMissing.value,
}, { requestController });
preview.value = await appApi.previewGenerationPoemBatch(
genealogyId.value,
{
poemText: poemDraft.value,
disableMissing: disableMissing.value,
},
{ requestController },
);
previewSignature.value = draftSignature.value;
} catch (error) {
if (!isRequestCancelled(error)) poemError.value = error?.message || "服务端预览失败，请稍后重试。";
if (!isRequestCancelled(error))
poemError.value = error?.message || "服务端预览失败，请稍后重试。";
} finally {
previewing.value = false;
}
@@ -250,10 +363,14 @@ const savePoems = async () => {
saving.value = true;
poemError.value = "";
try {
await appApi.saveGenerationPoemBatch(genealogyId.value, {
poemText: poemDraft.value,
disableMissing: disableMissing.value,
}, { requestController });
await appApi.saveGenerationPoemBatch(
genealogyId.value,
{
poemText: poemDraft.value,
disableMissing: disableMissing.value,
},
{ requestController },
);
feedbackMessage.value = "服务端字辈已保存，正在刷新维护列表。";
const loaded = await loadPoems({ management: true });
if (!loaded) {
@@ -263,20 +380,23 @@ const savePoems = async () => {
editorSnapshot.value = null;
feedbackMessage.value = "服务端字辈已保存并已刷新。";
} catch (error) {
if (!isRequestCancelled(error)) poemError.value = error?.message || "字辈保存失败，请稍后重试。";
if (!isRequestCancelled(error))
poemError.value = error?.message || "字辈保存失败，请稍后重试。";
} finally {
saving.value = false;
}
};
const requestBack = () => runBackGuard({
transientOpen: discardVisible.value,
internalTrail: poemState.value === "edit",
submitting: previewing.value || saving.value,
"close-transient": cancelDiscard,
"pop-internal-trail": requestLeaveEditor,
"block-submitting": () => true,
});
const handleStateAction = () => poemState.value === "empty" ? enterManagement() : loadPoems();
const requestBack = () =>
runBackGuard({
transientOpen: discardVisible.value,
internalTrail: poemState.value === "edit",
submitting: previewing.value || saving.value,
"close-transient": cancelDiscard,
"pop-internal-trail": requestLeaveEditor,
"block-submitting": () => true,
});
const handleStateAction = () =>
poemState.value === "empty" ? enterManagement() : loadPoems();
onLoad((query) => {
genealogyId.value = String(query?.genealogyId || "");
@@ -292,46 +412,267 @@ onUnload(() => {
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.poem-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
.poem-page__header { z-index: 3; }
.poem-panel { @include adaptive.adaptive-genealogy-state-panel; z-index: 2; width: calc(100% - 32rpx); margin: 18rpx auto 0; padding: 76rpx 8%; box-sizing: border-box; }
.poem-panel > .app-loading { grid-area: 1 / 1 / -1 / -1; }
.poem-list, .poem-editor, .poem-state-card { min-width: 0; }
.poem-list__eyebrow { display: block; color: $brand-red; font-size: 23rpx; letter-spacing: 3rpx; }
.poem-list__title { display: block; margin-top: 11rpx; color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 35rpx; font-weight: 700; }
.poem-list__copy { display: block; margin-top: 10rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.55; }
.poem-rows { margin-top: 18rpx; }
.poem-load-more { display: flex; min-height: 64rpx; align-items: center; justify-content: center; margin-top: 14rpx; background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png") center / contain no-repeat; }
.poem-load-more text { color: $ink; font-size: 23rpx; font-weight: 700; }
.poem-row { @include adaptive.adaptive-genealogy-form-field; display: grid; min-height: 72rpx; margin-top: 10rpx; grid-template-columns: minmax(116rpx, 38%) minmax(0, 1fr) auto; align-items: center; }
.poem-row__number { z-index: 1; grid-column: 1; margin-left: 24rpx; color: $ink-muted; font-size: 23rpx; }
.poem-row__character { z-index: 1; grid-column: 2; min-width: 0; padding: 12rpx 16rpx 12rpx 0; color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 32rpx; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; word-break: break-word; }
.poem-row__status { z-index: 1; grid-column: 3; margin-right: 22rpx; color: $ink-muted; font-size: 22rpx; }
.poem-row--disabled .poem-row__character, .poem-row--disabled .poem-row__status { color: $ink-muted; opacity: .62; }
.poem-action { display: grid; width: 100%; min-height: 76rpx; margin-top: 20rpx; }
.poem-action--disabled { opacity: .55; }
.poem-action image { grid-area: 1 / 1; width: 100%; height: 100%; }
.poem-action text { z-index: 1; display: flex; grid-area: 1 / 1; align-items: center; justify-content: center; height: 100%; color: #fff9ed; font-size: 25rpx; font-weight: 700; letter-spacing: 2rpx; }
.poem-field { @include adaptive.adaptive-genealogy-form-field; display: grid; min-height: 118rpx; margin-top: 22rpx; }
.poem-field > text { z-index: 1; grid-area: 1 / 1; align-self: center; margin-left: 24rpx; color: $ink; font-size: 22rpx; font-weight: 700; }
.poem-field textarea { z-index: 1; grid-area: 1 / 1; box-sizing: border-box; width: auto; min-width: 0; min-height: 118rpx; margin-right: 20rpx; margin-left: 164rpx; padding-top: 34rpx; color: $ink; font-size: 22rpx; line-height: 1.5; }
.poem-placeholder { color: #a79884; }
.poem-field-error { display: block; margin-top: 4rpx; color: $brand-red; font-size: 24rpx; line-height: 34rpx; text-align: right; }
.poem-policy { display: flex; align-items: center; justify-content: space-between; margin-top: 22rpx; }
.poem-policy > text { color: $ink; font-size: 24rpx; font-weight: 700; }
.poem-policy__option { display: grid; width: 248rpx; min-height: 62rpx; }
.poem-policy__option image { grid-area: 1 / 1; width: 100%; height: 100%; }
.poem-policy__option text { z-index: 1; display: flex; grid-area: 1 / 1; align-items: center; justify-content: center; height: 100%; color: $ink; font-size: 23rpx; font-weight: 700; }
.poem-policy__option .poem-policy__option-text--active { color: #fff9ed; }
.poem-preview { display: block; margin-top: 22rpx; color: $ink-muted; font-size: 23rpx; line-height: 1.6; }
.poem-editor__actions { display: flex; gap: 14rpx; margin-top: 18rpx; }
.poem-editor__actions .poem-action { width: calc((100% - 28rpx) / 3); margin-top: 0; }
.poem-action .poem-action__secondary { color: $ink; }
.poem-state-card { padding: 180rpx 4% 70rpx; text-align: center; }
.poem-state-card .poem-list__eyebrow { text-align: center; }
.poem-state-card .poem-list__copy { margin-top: 22rpx; }
.poem-state-card .poem-action { width: 420rpx; max-width: 100%; margin: 34rpx auto 0; }
.poem-feedback { position: fixed; z-index: 30; top: 138rpx; left: 50%; display: flex; min-width: 260rpx; min-height: 74rpx; align-items: center; justify-content: center; padding: 0 34rpx; transform: translateX(-50%); background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png") center / contain no-repeat; }
.poem-feedback text { z-index: 1; color: $ink; font-size: 22rpx; }
@media (min-width: 400px) { .poem-panel { width: calc(100% - 48rpx); } }
.poem-page {
display: flex;
min-height: 100vh;
flex-direction: column;
background: $paper;
}
.poem-page__header {
z-index: 3;
}
.poem-panel {
@include adaptive.adaptive-genealogy-state-panel;
z-index: 2;
width: calc(100% - 32rpx);
margin: 18rpx auto 0;
padding: 76rpx 8%;
box-sizing: border-box;
}
.poem-panel > .app-loading {
grid-area: 1 / 1 / -1 / -1;
}
.poem-list,
.poem-editor,
.poem-state-card {
min-width: 0;
}
.poem-list__eyebrow {
display: block;
color: $brand-red;
font-size: 23rpx;
letter-spacing: 3rpx;
}
.poem-list__title {
display: block;
margin-top: 11rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 35rpx;
font-weight: 700;
}
.poem-list__copy {
display: block;
margin-top: 10rpx;
color: $ink-muted;
font-size: 24rpx;
line-height: 1.55;
}
.poem-rows {
margin-top: 18rpx;
}
.poem-load-more {
display: flex;
min-height: 64rpx;
align-items: center;
justify-content: center;
margin-top: 14rpx;
background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png")
center / contain no-repeat;
}
.poem-load-more text {
color: $ink;
font-size: 23rpx;
font-weight: 700;
}
.poem-row {
@include adaptive.adaptive-genealogy-form-field;
display: grid;
min-height: 72rpx;
margin-top: 10rpx;
grid-template-columns: minmax(116rpx, 38%) minmax(0, 1fr) auto;
align-items: center;
}
.poem-row__number {
z-index: 1;
grid-column: 1;
margin-left: 24rpx;
color: $ink-muted;
font-size: 23rpx;
}
.poem-row__character {
z-index: 1;
grid-column: 2;
min-width: 0;
padding: 12rpx 16rpx 12rpx 0;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 32rpx;
font-weight: 700;
line-height: 1.4;
overflow-wrap: anywhere;
word-break: break-word;
}
.poem-row__status {
z-index: 1;
grid-column: 3;
margin-right: 22rpx;
color: $ink-muted;
font-size: 22rpx;
}
.poem-row--disabled .poem-row__character,
.poem-row--disabled .poem-row__status {
color: $ink-muted;
opacity: 0.62;
}
.poem-action {
display: grid;
width: 100%;
min-height: 76rpx;
margin-top: 20rpx;
}
.poem-action--disabled {
opacity: 0.55;
}
.poem-action image {
grid-area: 1 / 1;
width: 100%;
height: 100%;
}
.poem-action text {
z-index: 1;
display: flex;
grid-area: 1 / 1;
align-items: center;
justify-content: center;
height: 100%;
color: #fff9ed;
font-size: 25rpx;
font-weight: 700;
letter-spacing: 2rpx;
}
.poem-field {
@include adaptive.adaptive-genealogy-form-field;
display: grid;
min-height: 118rpx;
margin-top: 22rpx;
}
.poem-field > text {
z-index: 1;
grid-area: 1 / 1;
align-self: center;
margin-left: 24rpx;
color: $ink;
font-size: 22rpx;
font-weight: 700;
}
.poem-field textarea {
z-index: 1;
grid-area: 1 / 1;
box-sizing: border-box;
width: auto;
min-width: 0;
min-height: 118rpx;
margin-right: 20rpx;
margin-left: 164rpx;
padding-top: 34rpx;
color: $ink;
font-size: 22rpx;
line-height: 1.5;
}
.poem-placeholder {
color: #a79884;
}
.poem-field-error {
display: block;
margin-top: 4rpx;
color: $brand-red;
font-size: 24rpx;
line-height: 34rpx;
text-align: right;
}
.poem-policy {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 22rpx;
}
.poem-policy > text {
color: $ink;
font-size: 24rpx;
font-weight: 700;
}
.poem-policy__option {
display: grid;
width: 248rpx;
min-height: 62rpx;
}
.poem-policy__option image {
grid-area: 1 / 1;
width: 100%;
height: 100%;
}
.poem-policy__option text {
z-index: 1;
display: flex;
grid-area: 1 / 1;
align-items: center;
justify-content: center;
height: 100%;
color: $ink;
font-size: 23rpx;
font-weight: 700;
}
.poem-policy__option .poem-policy__option-text--active {
color: #fff9ed;
}
.poem-preview {
display: block;
margin-top: 22rpx;
color: $ink-muted;
font-size: 23rpx;
line-height: 1.6;
}
.poem-editor__actions {
display: flex;
gap: 14rpx;
margin-top: 18rpx;
}
.poem-editor__actions .poem-action {
width: calc((100% - 28rpx) / 3);
margin-top: 0;
}
.poem-action .poem-action__secondary {
color: $ink;
}
.poem-state-card {
padding: 180rpx 4% 70rpx;
text-align: center;
}
.poem-state-card .poem-list__eyebrow {
text-align: center;
}
.poem-state-card .poem-list__copy {
margin-top: 22rpx;
}
.poem-state-card .poem-action {
width: 420rpx;
max-width: 100%;
margin: 34rpx auto 0;
}
.poem-feedback {
position: fixed;
z-index: 30;
top: 138rpx;
left: 50%;
display: flex;
min-width: 260rpx;
min-height: 74rpx;
align-items: center;
justify-content: center;
padding: 0 34rpx;
transform: translateX(-50%);
background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png")
center / contain no-repeat;
}
.poem-feedback text {
z-index: 1;
color: $ink;
font-size: 22rpx;
}
@media (min-width: 400px) {
.poem-panel {
width: calc(100% - 48rpx);
}
}
</style>