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

feat: 完成70%全局样式与可读性优化

Browse Source
This commit is contained in:
rain
2026-07-31 11:27:15 +08:00
parent 96524e4d6c
commit 555aa00043
116 changed files with 1928 additions and 1169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/family/f01-family-feed.vue
+17 -12
View File
@@ -158,7 +158,7 @@ const handlePrimaryAction = () =>
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.family-page {
display: flex;
min-height: 100vh;
@@ -179,13 +179,13 @@ const handlePrimaryAction = () =>
.feed-heading text:first-child {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 31rpx;
font-size: clamp(17px, 31rpx, 22px);
font-weight: 700;
}
.feed-heading text:last-child {
margin-top: 6rpx;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
}
.feed-shortcuts {
display: grid;
@@ -200,7 +200,7 @@ const handlePrimaryAction = () =>
}
.feed-shortcut text {
color: $ink;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
font-weight: 700;
}
.feed-list {
@@ -208,7 +208,7 @@ const handlePrimaryAction = () =>
}
.feed-card,
.feed-state-card {
@include adaptive.adaptive-family-letter;
@include adaptive-family-letter;
box-sizing: border-box;
margin-top: 16rpx;
padding: 30rpx;
@@ -219,18 +219,23 @@ const handlePrimaryAction = () =>
}
.feed-card__publisher {
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.feed-card__content {
display: -webkit-box;
margin-top: 12rpx;
overflow: hidden;
color: $ink;
font-size: 28rpx;
font-size: clamp(16px, 28rpx, 20px);
line-height: 1.55;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.feed-card__meta {
margin-top: 12rpx;
color: $ink-muted;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
}
.feed-state-card {
min-height: 230rpx;
@@ -241,17 +246,17 @@ const handlePrimaryAction = () =>
}
.feed-state-card text:first-child {
color: $ink;
font-size: 31rpx;
font-size: clamp(17px, 31rpx, 22px);
font-weight: 700;
}
.feed-state-card text:last-child {
margin-top: 13rpx;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.45;
}
.feed-action {
@include adaptive.adaptive-scroll-button(primary);
@include adaptive-scroll-button(primary);
width: 514rpx;
max-width: 100%;
min-height: 76rpx;
@@ -263,7 +268,7 @@ const handlePrimaryAction = () =>
align-items: center;
justify-content: center;
color: #fff9ed;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
</style>
pages/family/f02-publish-feed.vue
+15 -15
View File
@@ -150,7 +150,7 @@ const resultCopy = computed(
},
error: {
title: "动态未提交",
copy: "当前内容仍保留在页面中，可返回表单继续核对。",
copy: submitError.value || "当前内容仍保留在页面中，可返回表单继续核对。",
action: "返回填写",
},
invalid: {
@@ -248,7 +248,7 @@ onUnmounted(() => {
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.publish-page {
display: flex;
min-height: 100vh;
@@ -257,7 +257,7 @@ onUnmounted(() => {
}
.publish-page__header,
.publish-panel {
@include adaptive.adaptive-family-content;
@include adaptive-family-content;
z-index: 1;
}
.publish-panel {
@@ -274,32 +274,32 @@ onUnmounted(() => {
.publish-result > text:first-child {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 36rpx;
font-size: clamp(19px, 36rpx, 24px);
font-weight: 700;
}
.publish-form > text:nth-child(2),
.publish-result > text:nth-child(2) {
margin-top: 12rpx;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.6;
}
.publish-field {
@include adaptive.adaptive-family-field;
@include adaptive-family-field;
margin-top: 20rpx;
padding: 18rpx 22rpx;
}
.publish-field__label {
display: block;
color: $ink;
font-size: 25rpx;
font-size: clamp(15px, 25rpx, 18px);
font-weight: 700;
}
.required-mark {
display: inline-block;
margin-right: 4rpx;
color: $brand-red;
font-size: 26rpx;
font-size: clamp(16px, 26rpx, 20px);
line-height: 1;
transform: translateY(-3rpx);
}
@@ -310,7 +310,7 @@ onUnmounted(() => {
width: 100%;
margin-top: 12rpx;
color: $ink;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
}
.publish-field input {
min-height: 64rpx;
@@ -328,11 +328,11 @@ onUnmounted(() => {
}
.publish-field__value--readonly text:first-child {
color: $ink;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
}
.publish-field__value--readonly text:last-child {
color: $ink-muted;
font-size: 20rpx;
font-size: clamp(13px, 20rpx, 16px);
}
.publish-field--content textarea {
min-height: 200rpx;
@@ -346,7 +346,7 @@ onUnmounted(() => {
display: block;
margin-top: 6rpx;
color: $ink-muted;
font-size: 20rpx;
font-size: clamp(13px, 20rpx, 16px);
line-height: 1.45;
}
.upload-button {
@@ -357,11 +357,11 @@ onUnmounted(() => {
border-radius: 8rpx;
background: transparent;
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.upload-receipt {
color: $ink-muted;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
overflow-wrap: anywhere;
}
.publish-placeholder {
@@ -370,7 +370,7 @@ onUnmounted(() => {
.publish-error {
margin-top: 12rpx;
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
line-height: 1.5;
}
.publish-form > .app-button {
pages/family/f03-feed-detail.vue
+14 -14
View File
@@ -283,7 +283,7 @@ onBackPress((event) => handleBackPress(event, requestBack));
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.feed-detail-page {
display: flex;
@@ -305,7 +305,7 @@ onBackPress((event) => handleBackPress(event, requestBack));
.feed-card,
.comment-section,
.feed-state-card {
@include adaptive.adaptive-family-content;
@include adaptive-family-content;
box-sizing: border-box;
}
.feed-card {
@@ -321,27 +321,27 @@ onBackPress((event) => handleBackPress(event, requestBack));
.feed-card__heading text:first-child,
.comment-card__heading text:first-child {
color: $brand-red;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
font-weight: 700;
}
.feed-card__heading text:last-child,
.comment-card__heading text:last-child {
color: $ink-muted;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
text-align: right;
}
.feed-card__content {
display: block;
margin-top: 20rpx;
color: $ink;
font-size: 29rpx;
font-size: clamp(16px, 29rpx, 20px);
line-height: 1.7;
white-space: pre-wrap;
}
.feed-card__meta {
margin-top: 22rpx;
color: $ink-muted;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
}
.feed-card .app-button {
margin-top: 18rpx;
@@ -350,7 +350,7 @@ onBackPress((event) => handleBackPress(event, requestBack));
.like-error {
display: block;
margin-top: 10rpx;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.like-note {
color: $ink-muted;
@@ -366,7 +366,7 @@ onBackPress((event) => handleBackPress(event, requestBack));
display: block;
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 32rpx;
font-size: clamp(17px, 32rpx, 22px);
font-weight: 700;
}
.comment-list {
@@ -380,7 +380,7 @@ onBackPress((event) => handleBackPress(event, requestBack));
display: block;
margin-top: 10rpx;
color: $ink;
font-size: 25rpx;
font-size: clamp(15px, 25rpx, 18px);
line-height: 1.55;
white-space: pre-wrap;
}
@@ -388,7 +388,7 @@ onBackPress((event) => handleBackPress(event, requestBack));
display: block;
margin-top: 18rpx;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.5;
}
.comment-editor {
@@ -405,7 +405,7 @@ onBackPress((event) => handleBackPress(event, requestBack));
border: 1rpx solid rgba(128, 89, 49, 0.3);
border-radius: 12rpx;
color: $ink;
font-size: 25rpx;
font-size: clamp(15px, 25rpx, 18px);
line-height: 1.55;
}
.comment-editor__placeholder {
@@ -418,7 +418,7 @@ onBackPress((event) => handleBackPress(event, requestBack));
display: block;
margin-top: 10rpx;
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.feed-state-card {
min-height: 340rpx;
@@ -432,13 +432,13 @@ onBackPress((event) => handleBackPress(event, requestBack));
.feed-state-card > text:first-child {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 35rpx;
font-size: clamp(19px, 35rpx, 24px);
font-weight: 700;
}
.feed-state-card > text:nth-child(2) {
margin-top: 18rpx;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.65;
}
.feed-state-card .app-button {
pages/family/f04-article-list.vue
+23 -15
View File
@@ -29,7 +29,12 @@
<view v-else class="article-list-state-card">
<text>{{ stateCopy.title }}</text>
<text>{{ stateCopy.copy }}</text>
<AppButton block :label="stateCopy.action" @click="handleStateAction" />
<AppButton
v-if="!hasValidContext || listState !== 'loading'"
block
:label="stateCopy.action"
@click="handleStateAction"
/>
</view>
</view>
</view>
@@ -97,19 +102,17 @@ const createArticle = () =>
? openPage("F06", { genealogyId: genealogyId.value, mode: "create" }, "F04")
: Promise.resolve(false);
const openArticle = (item) =>
openPage(
"F05",
{ genealogyId: genealogyId.value, articleId: item.id },
"F04",
);
openPage("F05", { genealogyId: genealogyId.value, articleId: item.id }, "F04");
const handleStateAction = () => {
if (!hasValidContext.value) return goBack();
return listState.value === "error" ? loadArticles() : createArticle();
if (listState.value === "error") return loadArticles();
if (listState.value === "empty") return createArticle();
return undefined;
};
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.article-list-page {
display: flex;
min-height: 100vh;
@@ -127,7 +130,7 @@ const handleStateAction = () => {
margin-top: 24rpx;
}
.article-card {
@include adaptive.adaptive-family-content;
@include adaptive-family-content;
display: flex;
min-height: 150rpx;
flex-direction: column;
@@ -142,22 +145,27 @@ const handleStateAction = () => {
.article-card__title {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 31rpx;
font-size: clamp(17px, 31rpx, 22px);
font-weight: 700;
}
.article-card__summary {
display: -webkit-box;
margin-top: 9rpx;
overflow: hidden;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.45;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.article-card__meta {
margin-top: 10rpx;
color: $brand-red;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
}
.article-list-state-card {
@include adaptive.adaptive-family-content;
@include adaptive-family-content;
width: 100%;
min-height: 340rpx;
margin-top: 30rpx;
@@ -170,13 +178,13 @@ const handleStateAction = () => {
.article-list-state-card > text:first-child {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 35rpx;
font-size: clamp(19px, 35rpx, 24px);
font-weight: 700;
}
.article-list-state-card > text:nth-child(2) {
margin-top: 18rpx;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.65;
}
.article-list-state-card .app-button {
pages/family/f05-article-detail.vue
+10 -10
View File
@@ -131,7 +131,7 @@ const handleStateAction = () =>
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.article-detail-page {
display: flex;
@@ -149,7 +149,7 @@ const handleStateAction = () =>
}
.article-card,
.article-state-card {
@include adaptive.adaptive-family-content;
@include adaptive-family-content;
box-sizing: border-box;
}
.article-card {
@@ -166,26 +166,26 @@ const handleStateAction = () =>
}
.article-card__category {
color: $brand-red;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
font-weight: 700;
}
.article-card__title {
margin-top: 14rpx;
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 40rpx;
font-size: clamp(20px, 40rpx, 26px);
font-weight: 700;
line-height: 1.32;
}
.article-card__meta {
margin-top: 16rpx;
color: $ink-muted;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.article-card__summary {
margin-top: 22rpx;
color: $ink-muted;
font-size: 25rpx;
font-size: clamp(15px, 25rpx, 18px);
line-height: 1.6;
}
.article-card__divider {
@@ -195,14 +195,14 @@ const handleStateAction = () =>
}
.article-card__content {
color: $ink;
font-size: 28rpx;
font-size: clamp(16px, 28rpx, 20px);
line-height: 1.85;
white-space: pre-wrap;
}
.article-card__views {
margin-top: 30rpx;
color: $ink-muted;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
text-align: right;
}
.article-state-card {
@@ -217,13 +217,13 @@ const handleStateAction = () =>
.article-state-card > text:first-child {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 35rpx;
font-size: clamp(19px, 35rpx, 24px);
font-weight: 700;
}
.article-state-card > text:nth-child(2) {
margin-top: 18rpx;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.65;
}
.article-state-card .app-button {
pages/family/f06-article-editor.vue
+17 -17
View File
@@ -283,7 +283,7 @@ onUnmounted(() => {
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.article-editor-page {
display: flex;
min-height: 100vh;
@@ -299,7 +299,7 @@ onUnmounted(() => {
}
.editor-panel,
.editor-result-card {
@include adaptive.adaptive-family-panel;
@include adaptive-family-panel;
width: 100%;
}
.editor-panel__body {
@@ -308,7 +308,7 @@ onUnmounted(() => {
.editor-eyebrow {
display: block;
color: $brand-red;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
letter-spacing: 3rpx;
text-align: center;
}
@@ -317,7 +317,7 @@ onUnmounted(() => {
margin-top: 10rpx;
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 34rpx;
font-size: clamp(19px, 34rpx, 24px);
font-weight: 700;
text-align: center;
}
@@ -325,7 +325,7 @@ onUnmounted(() => {
display: block;
margin: 10rpx 8rpx 22rpx;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.55;
text-align: center;
}
@@ -336,19 +336,19 @@ onUnmounted(() => {
display: block;
margin: 0 8rpx 8rpx;
color: $ink;
font-size: 25rpx;
font-size: clamp(15px, 25rpx, 18px);
font-weight: 700;
}
.required-mark {
display: inline-block;
margin-right: 4rpx;
color: $brand-red;
font-size: 26rpx;
font-size: clamp(16px, 26rpx, 20px);
line-height: 1;
transform: translateY(-3rpx);
}
.editor-control {
@include adaptive.adaptive-family-field;
@include adaptive-family-field;
display: flex;
min-height: 82rpx;
align-items: center;
@@ -358,7 +358,7 @@ onUnmounted(() => {
box-sizing: border-box;
width: 100%;
color: $ink;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
}
.editor-control input {
min-height: 82rpx;
@@ -374,7 +374,7 @@ onUnmounted(() => {
.editor-control--unavailable {
padding: 0 28rpx;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
}
.editor-control textarea {
min-height: 92rpx;
@@ -397,7 +397,7 @@ onUnmounted(() => {
.editor-field__hint {
display: block;
color: $ink-muted;
font-size: 20rpx;
font-size: clamp(13px, 20rpx, 16px);
line-height: 1.45;
}
.upload-button {
@@ -409,11 +409,11 @@ onUnmounted(() => {
border-radius: 8rpx;
background: transparent;
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.upload-receipt {
color: $ink-muted;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
overflow-wrap: anywhere;
}
.editor-placeholder {
@@ -423,8 +423,8 @@ onUnmounted(() => {
display: block;
margin: 12rpx 8rpx 0;
color: $brand-red;
font-size: 24rpx;
line-height: 34rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: max(1.35em, clamp(19px, 34rpx, 24px));
text-align: center;
}
.editor-panel__body > .app-button {
@@ -442,14 +442,14 @@ onUnmounted(() => {
margin-top: 14rpx;
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 36rpx;
font-size: clamp(19px, 36rpx, 24px);
font-weight: 700;
}
.editor-result-card__copy {
display: block;
margin-top: 16rpx;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.65;
}
.editor-result-card__body > .app-button {
pages/family/f07-album-list.vue
+12 -12
View File
@@ -252,7 +252,7 @@ onUnmounted(() => {
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.album-list-page {
display: flex;
min-height: 100vh;
@@ -268,7 +268,7 @@ onUnmounted(() => {
}
.album-state-card,
.album-card {
@include adaptive.adaptive-family-content;
@include adaptive-family-content;
}
.album-state-card {
min-height: 340rpx;
@@ -283,14 +283,14 @@ onUnmounted(() => {
.album-card text:first-child {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 35rpx;
font-size: clamp(19px, 35rpx, 24px);
font-weight: 700;
}
.album-state-card text:nth-child(2),
.album-card text:not(:first-child) {
margin-top: 12rpx;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.55;
}
.album-state-card .app-button {
@@ -313,25 +313,25 @@ onUnmounted(() => {
.album-dialog-field--cover > view > text:first-child {
display: block;
color: $ink;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
font-weight: 700;
}
.required-mark {
display: inline-block;
margin-right: 4rpx;
color: $brand-red;
font-size: 26rpx;
font-size: clamp(16px, 26rpx, 20px);
}
.album-dialog-field input,
.album-dialog-field textarea {
@include adaptive.adaptive-family-field;
@include adaptive-family-field;
box-sizing: border-box;
display: block;
width: 100%;
margin-top: 10rpx;
padding: 16rpx 22rpx;
color: $ink;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
}
.album-dialog-field input {
min-height: 76rpx;
@@ -354,7 +354,7 @@ onUnmounted(() => {
display: block;
margin-top: 6rpx;
color: $ink-muted;
font-size: 20rpx;
font-size: clamp(13px, 20rpx, 16px);
line-height: 1.45;
}
.upload-button {
@@ -366,18 +366,18 @@ onUnmounted(() => {
border-radius: 8rpx;
background: transparent;
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.upload-receipt {
color: $ink-muted;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
overflow-wrap: anywhere;
}
.album-field-error {
display: block;
margin-top: 8rpx;
color: $brand-red;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
line-height: 1.45;
}
</style>
pages/family/f08-album-detail.vue
+6 -6
View File
@@ -111,7 +111,7 @@ onUnload(() => {
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.album-detail-page {
display: flex;
min-height: 100vh;
@@ -127,7 +127,7 @@ onUnload(() => {
}
.album-state-card,
.photo-card {
@include adaptive.adaptive-family-content;
@include adaptive-family-content;
}
.album-state-card {
width: 100%;
@@ -142,13 +142,13 @@ onUnload(() => {
.album-state-card text:first-child {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 36rpx;
font-size: clamp(19px, 36rpx, 24px);
font-weight: 700;
}
.album-state-card text:nth-child(2) {
margin-top: 10rpx;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.6;
}
.album-state-card .app-button {
@@ -168,13 +168,13 @@ onUnload(() => {
.photo-card text:first-child {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 30rpx;
font-size: clamp(17px, 30rpx, 22px);
font-weight: 700;
}
.photo-card text:not(:first-child) {
margin-top: 8rpx;
color: $ink-muted;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
line-height: 1.5;
}
</style>
pages/family/f09-media-upload.vue
+14 -14
View File
@@ -274,7 +274,7 @@ onUnmounted(() => {
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.media-upload-page {
display: flex;
@@ -292,7 +292,7 @@ onUnmounted(() => {
}
.media-panel,
.media-state-card {
@include adaptive.adaptive-family-panel;
@include adaptive-family-panel;
box-sizing: border-box;
}
.media-panel {
@@ -307,13 +307,13 @@ onUnmounted(() => {
.media-panel__title {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 36rpx;
font-size: clamp(19px, 36rpx, 24px);
font-weight: 700;
}
.media-panel__note {
margin-top: 10rpx;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.55;
}
.media-field {
@@ -322,25 +322,25 @@ onUnmounted(() => {
.media-field__label {
margin: 0 6rpx 8rpx;
color: $ink;
font-size: 25rpx;
font-size: clamp(15px, 25rpx, 18px);
font-weight: 700;
}
.required-mark {
display: inline-block;
margin-right: 4rpx;
color: $brand-red;
font-size: 26rpx;
font-size: clamp(16px, 26rpx, 20px);
line-height: 1;
transform: translateY(-3rpx);
}
.media-field input,
.media-field textarea {
@include adaptive.adaptive-family-field;
@include adaptive-family-field;
box-sizing: border-box;
display: block;
width: 100%;
color: $ink;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
}
.media-field input {
min-height: 78rpx;
@@ -359,7 +359,7 @@ onUnmounted(() => {
border-radius: 12rpx;
background: rgba(255, 252, 245, 0.7);
color: $ink;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
}
.media-field textarea {
min-height: 116rpx;
@@ -389,17 +389,17 @@ onUnmounted(() => {
border-radius: 8rpx;
background: transparent;
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.upload-receipt {
color: $ink-muted;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
overflow-wrap: anywhere;
}
.field-error {
margin-top: 10rpx;
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
line-height: 1.45;
}
.media-panel .app-button {
@@ -416,13 +416,13 @@ onUnmounted(() => {
.media-state-card__title {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 35rpx;
font-size: clamp(19px, 35rpx, 24px);
font-weight: 700;
}
.media-state-card__copy {
margin-top: 16rpx;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.65;
}
.media-state-card .app-button {
pages/family/f10-video-list.vue
+9 -9
View File
@@ -124,26 +124,26 @@ const handleStateAction = () => returnToFamily();
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.video-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
.page-header, .page-content { z-index: 1; }
.page-content { flex: 1; padding: 18rpx 24rpx 72rpx; }
.video-panel, .video-state-card { box-sizing: border-box; @include adaptive.adaptive-family-content; }
.video-panel, .video-state-card { box-sizing: border-box; @include adaptive-family-content; }
.video-panel { padding: 30rpx; }
.video-panel__title, .video-panel__note, .video-field__label, .video-state-card text { display: block; }
.video-panel__title, .video-state-card__title { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 34rpx; font-weight: 700; }
.video-panel__note, .video-state-card__copy { margin-top: 12rpx; color: $ink-muted; font-size: 23rpx; line-height: 1.6; }
.video-panel__title, .video-state-card__title { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: clamp(19px, 34rpx, 24px); font-weight: 700; }
.video-panel__note, .video-state-card__copy { margin-top: 12rpx; color: $ink-muted; font-size: clamp(14px, 23rpx, 17px); line-height: 1.6; }
.video-field { margin-top: 24rpx; }
.video-field__label { margin-bottom: 10rpx; color: $ink; font-size: 24rpx; font-weight: 700; }
.video-field input, .video-field textarea { width: 100%; box-sizing: border-box; border: 1rpx solid rgba(143, 108, 63, .34); border-radius: 8rpx; background: rgba(255, 253, 247, .8); color: $ink; font-size: 24rpx; }
.video-field__label { margin-bottom: 10rpx; color: $ink; font-size: clamp(15px, 24rpx, 18px); font-weight: 700; }
.video-field input, .video-field textarea { width: 100%; box-sizing: border-box; border: 1rpx solid rgba(143, 108, 63, .34); border-radius: 8rpx; background: rgba(255, 253, 247, .8); color: $ink; font-size: clamp(15px, 24rpx, 18px); }
.video-field input { height: 76rpx; padding: 0 18rpx; }
.video-field textarea { min-height: 140rpx; padding: 16rpx 18rpx; }
.video-field--upload { display: flex; flex-wrap: wrap; align-items: center; gap: 12rpx; }
.video-field--upload .video-field__label { width: 100%; }
.upload-button { margin: 0; padding: 0 26rpx; border: 1rpx solid #b78a42; border-radius: 8rpx; background: #fffaf0; color: #805723; font-size: 23rpx; line-height: 64rpx; }
.upload-receipt { color: $ink-muted; font-size: 21rpx; }
.upload-button { margin: 0; padding: 0 26rpx; border: 1rpx solid #b78a42; border-radius: 8rpx; background: #fffaf0; color: #805723; font-size: clamp(14px, 23rpx, 17px); line-height: 64rpx; }
.upload-receipt { color: $ink-muted; font-size: clamp(13px, 21rpx, 16px); }
.required-mark, .field-error { color: $brand-red; }
.field-error { display: block; margin-top: 12rpx; font-size: 22rpx; }
.field-error { display: block; margin-top: 12rpx; font-size: clamp(14px, 22rpx, 17px); }
.video-panel .app-button { margin-top: 28rpx; }
.video-state-card { min-height: 340rpx; padding: 78rpx 52rpx 50rpx; text-align: center; }
.video-state-card .app-button { margin-top: 28rpx; }