feat: 完成70%全局样式与可读性优化
This commit is contained in:
@@ -411,7 +411,7 @@ onUnload(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
@import "../../styles/adaptive-frame-profiles.scss";
|
||||
.poem-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
@@ -422,7 +422,7 @@ onUnload(() => {
|
||||
z-index: 3;
|
||||
}
|
||||
.poem-panel {
|
||||
@include adaptive.adaptive-genealogy-state-panel;
|
||||
@include adaptive-genealogy-state-panel;
|
||||
z-index: 2;
|
||||
width: calc(100% - 32rpx);
|
||||
margin: 18rpx auto 0;
|
||||
@@ -440,7 +440,7 @@ onUnload(() => {
|
||||
.poem-list__eyebrow {
|
||||
display: block;
|
||||
color: $brand-red;
|
||||
font-size: 23rpx;
|
||||
font-size: clamp(14px, 23rpx, 17px);
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.poem-list__title {
|
||||
@@ -448,14 +448,14 @@ onUnload(() => {
|
||||
margin-top: 11rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 35rpx;
|
||||
font-size: clamp(19px, 35rpx, 24px);
|
||||
font-weight: 700;
|
||||
}
|
||||
.poem-list__copy {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
font-size: clamp(15px, 24rpx, 18px);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.poem-rows {
|
||||
@@ -472,11 +472,11 @@ onUnload(() => {
|
||||
}
|
||||
.poem-load-more text {
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
font-size: clamp(14px, 23rpx, 17px);
|
||||
font-weight: 700;
|
||||
}
|
||||
.poem-row {
|
||||
@include adaptive.adaptive-genealogy-form-field;
|
||||
@include adaptive-genealogy-form-field;
|
||||
display: grid;
|
||||
min-height: 72rpx;
|
||||
margin-top: 10rpx;
|
||||
@@ -488,7 +488,7 @@ onUnload(() => {
|
||||
grid-column: 1;
|
||||
margin-left: 24rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
font-size: clamp(14px, 23rpx, 17px);
|
||||
}
|
||||
.poem-row__character {
|
||||
z-index: 1;
|
||||
@@ -497,7 +497,7 @@ onUnload(() => {
|
||||
padding: 12rpx 16rpx 12rpx 0;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 32rpx;
|
||||
font-size: clamp(17px, 32rpx, 22px);
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
overflow-wrap: anywhere;
|
||||
@@ -508,7 +508,7 @@ onUnload(() => {
|
||||
grid-column: 3;
|
||||
margin-right: 22rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
font-size: clamp(14px, 22rpx, 17px);
|
||||
}
|
||||
.poem-row--disabled .poem-row__character,
|
||||
.poem-row--disabled .poem-row__status {
|
||||
@@ -537,12 +537,12 @@ onUnload(() => {
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #fff9ed;
|
||||
font-size: 25rpx;
|
||||
font-size: clamp(15px, 25rpx, 18px);
|
||||
font-weight: 700;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
.poem-field {
|
||||
@include adaptive.adaptive-genealogy-form-field;
|
||||
@include adaptive-genealogy-form-field;
|
||||
display: grid;
|
||||
min-height: 118rpx;
|
||||
margin-top: 22rpx;
|
||||
@@ -553,7 +553,7 @@ onUnload(() => {
|
||||
align-self: center;
|
||||
margin-left: 24rpx;
|
||||
color: $ink;
|
||||
font-size: 22rpx;
|
||||
font-size: clamp(14px, 22rpx, 17px);
|
||||
font-weight: 700;
|
||||
}
|
||||
.poem-field textarea {
|
||||
@@ -567,7 +567,7 @@ onUnload(() => {
|
||||
margin-left: 164rpx;
|
||||
padding-top: 34rpx;
|
||||
color: $ink;
|
||||
font-size: 22rpx;
|
||||
font-size: clamp(14px, 22rpx, 17px);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.poem-placeholder {
|
||||
@@ -577,8 +577,8 @@ onUnload(() => {
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
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: right;
|
||||
}
|
||||
.poem-policy {
|
||||
@@ -589,7 +589,7 @@ onUnload(() => {
|
||||
}
|
||||
.poem-policy > text {
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
font-size: clamp(15px, 24rpx, 18px);
|
||||
font-weight: 700;
|
||||
}
|
||||
.poem-policy__option {
|
||||
@@ -610,7 +610,7 @@ onUnload(() => {
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
font-size: clamp(14px, 23rpx, 17px);
|
||||
font-weight: 700;
|
||||
}
|
||||
.poem-policy__option .poem-policy__option-text--active {
|
||||
@@ -620,7 +620,7 @@ onUnload(() => {
|
||||
display: block;
|
||||
margin-top: 22rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
font-size: clamp(14px, 23rpx, 17px);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.poem-editor__actions {
|
||||
@@ -668,7 +668,7 @@ onUnload(() => {
|
||||
.poem-feedback text {
|
||||
z-index: 1;
|
||||
color: $ink;
|
||||
font-size: 22rpx;
|
||||
font-size: clamp(14px, 22rpx, 17px);
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.poem-panel {
|
||||
|
||||
Reference in New Issue
Block a user