feat: 完成70%全局样式与可读性优化
This commit is contained in:
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user