feat: 小程序页面优化和新增剧本库功能
This commit is contained in:
@@ -188,7 +188,7 @@ import { useAppStore } from '../../stores/app.js'
|
||||
import { useMenuButtonSafeArea } from '../../composables/useMenuButtonSafeArea.js'
|
||||
|
||||
const store = useAppStore()
|
||||
const { capsuleTopReservePx, topbarStyle } = useMenuButtonSafeArea({ extraTopPx: 10 })
|
||||
const { capsuleTopReservePx, topbarStyle } = useMenuButtonSafeArea({ extraTopPx: 2 })
|
||||
const isEdit = ref(false)
|
||||
const saving = ref(false)
|
||||
const birthday = ref('')
|
||||
@@ -372,23 +372,23 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.topbar {
|
||||
height: 92rpx;
|
||||
height: 72rpx;
|
||||
display: grid;
|
||||
grid-template-columns: 90rpx 1fr 90rpx;
|
||||
grid-template-columns: 76rpx 1fr 76rpx;
|
||||
align-items: center;
|
||||
padding: 0 32rpx;
|
||||
padding: 0 28rpx;
|
||||
}
|
||||
|
||||
.back {
|
||||
color: #fff;
|
||||
font-size: 68rpx;
|
||||
font-size: 56rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@@ -399,7 +399,7 @@ onMounted(() => {
|
||||
|
||||
.save {
|
||||
color: #b94cff;
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -408,35 +408,36 @@ onMounted(() => {
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0 28rpx 28rpx;
|
||||
padding: 0 24rpx 28rpx;
|
||||
margin-top: -6rpx;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1rpx solid rgba(124, 75, 255, 0.34);
|
||||
border: 1rpx solid rgba(155, 110, 255, 0.14);
|
||||
background:
|
||||
radial-gradient(circle at 92% 12%, rgba(104, 66, 255, 0.14), transparent 34%),
|
||||
rgba(10, 13, 43, 0.74);
|
||||
box-shadow: inset 0 0 34rpx rgba(123, 60, 255, 0.08), 0 14rpx 48rpx rgba(0, 0, 0, 0.22);
|
||||
radial-gradient(circle at 92% 12%, rgba(104, 66, 255, 0.1), transparent 34%),
|
||||
rgba(10, 13, 43, 0.54);
|
||||
box-shadow: inset 0 0 30rpx rgba(123, 60, 255, 0.05), 0 10rpx 36rpx rgba(0, 0, 0, 0.16);
|
||||
backdrop-filter: blur(24rpx);
|
||||
-webkit-backdrop-filter: blur(24rpx);
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
min-height: 190rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 22rpx;
|
||||
padding: 22rpx 28rpx;
|
||||
min-height: 156rpx;
|
||||
border-radius: 22rpx;
|
||||
margin-bottom: 18rpx;
|
||||
padding: 18rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28rpx;
|
||||
gap: 22rpx;
|
||||
}
|
||||
|
||||
.avatar-wrap {
|
||||
position: relative;
|
||||
width: 136rpx;
|
||||
height: 136rpx;
|
||||
width: 118rpx;
|
||||
height: 118rpx;
|
||||
flex-shrink: 0;
|
||||
padding: 5rpx;
|
||||
border-radius: 50%;
|
||||
@@ -455,8 +456,8 @@ onMounted(() => {
|
||||
position: absolute;
|
||||
right: -4rpx;
|
||||
bottom: -2rpx;
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #8f4dff, #582cff);
|
||||
box-shadow: 0 0 18rpx rgba(158, 91, 255, 0.62);
|
||||
@@ -465,7 +466,7 @@ onMounted(() => {
|
||||
.pen-icon {
|
||||
width: 17rpx;
|
||||
height: 6rpx;
|
||||
margin: 18rpx auto;
|
||||
margin: 16rpx auto;
|
||||
border-radius: 999rpx;
|
||||
background: #fff;
|
||||
transform: rotate(-45deg);
|
||||
@@ -486,20 +487,20 @@ onMounted(() => {
|
||||
|
||||
.hero-name {
|
||||
color: #fff;
|
||||
font-size: 42rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.hero-star {
|
||||
font-size: 26rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
margin-top: 8rpx;
|
||||
color: rgba(239, 232, 255, 0.84);
|
||||
font-size: 25rpx;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
|
||||
.hero-line {
|
||||
@@ -511,9 +512,9 @@ onMounted(() => {
|
||||
|
||||
.hero-quote {
|
||||
display: block;
|
||||
margin-top: 14rpx;
|
||||
margin-top: 12rpx;
|
||||
color: #b94cff;
|
||||
font-size: 25rpx;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -550,9 +551,9 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-radius: 24rpx;
|
||||
border-radius: 22rpx;
|
||||
margin-bottom: 18rpx;
|
||||
padding: 24rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
}
|
||||
|
||||
.section-head,
|
||||
@@ -572,7 +573,7 @@ onMounted(() => {
|
||||
|
||||
.section-title {
|
||||
color: rgba(239, 232, 255, 0.9);
|
||||
font-size: 25rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -659,9 +660,9 @@ onMounted(() => {
|
||||
.bio-title-icon::after { top: 15rpx; }
|
||||
|
||||
.profile-row {
|
||||
min-height: 64rpx;
|
||||
min-height: 60rpx;
|
||||
display: grid;
|
||||
grid-template-columns: 154rpx 1fr 24rpx;
|
||||
grid-template-columns: 142rpx 1fr 24rpx;
|
||||
align-items: center;
|
||||
border-top: 1rpx solid rgba(180, 139, 255, 0.16);
|
||||
}
|
||||
@@ -672,14 +673,14 @@ onMounted(() => {
|
||||
|
||||
.row-label {
|
||||
color: rgba(205, 191, 238, 0.82);
|
||||
font-size: 24rpx;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
|
||||
.row-input,
|
||||
.row-value {
|
||||
min-width: 0;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 24rpx;
|
||||
font-size: 23rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -693,7 +694,7 @@ onMounted(() => {
|
||||
|
||||
.chevron {
|
||||
color: rgba(218, 204, 243, 0.7);
|
||||
font-size: 44rpx;
|
||||
font-size: 38rpx;
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
}
|
||||
@@ -729,26 +730,28 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.astro-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-top: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22rpx;
|
||||
margin-top: 10rpx;
|
||||
padding-top: 16rpx;
|
||||
border-top: 1rpx solid rgba(180, 139, 255, 0.16);
|
||||
}
|
||||
|
||||
.astro-col {
|
||||
min-width: 0;
|
||||
padding: 18rpx 18rpx 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mbti-col {
|
||||
border-left: 1rpx solid rgba(180, 139, 255, 0.18);
|
||||
padding-left: 18rpx;
|
||||
padding-right: 0;
|
||||
border-left: 0;
|
||||
padding-top: 18rpx;
|
||||
border-top: 1rpx solid rgba(180, 139, 255, 0.12);
|
||||
}
|
||||
|
||||
.astro-title-row {
|
||||
display: grid;
|
||||
grid-template-columns: 34rpx 74rpx 1fr 18rpx;
|
||||
grid-template-columns: 34rpx 76rpx 1fr 18rpx;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
@@ -773,26 +776,26 @@ onMounted(() => {
|
||||
|
||||
.astro-title {
|
||||
color: rgba(222, 211, 240, 0.76);
|
||||
font-size: 24rpx;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
|
||||
.astro-current {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 23rpx;
|
||||
font-size: 22rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.select-title {
|
||||
display: block;
|
||||
margin-top: 22rpx;
|
||||
margin-top: 16rpx;
|
||||
color: rgba(222, 211, 240, 0.72);
|
||||
font-size: 21rpx;
|
||||
}
|
||||
|
||||
.zodiac-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14rpx 8rpx;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 14rpx 10rpx;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
@@ -801,20 +804,20 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
gap: 7rpx;
|
||||
color: rgba(226, 217, 246, 0.84);
|
||||
font-size: 19rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.zodiac-bubble {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #a855ff;
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
background: rgba(124, 58, 237, 0.28);
|
||||
border: 1rpx solid rgba(173, 84, 255, 0.36);
|
||||
}
|
||||
@@ -829,12 +832,12 @@ onMounted(() => {
|
||||
.mbti-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12rpx;
|
||||
gap: 12rpx 14rpx;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.mbti-chip {
|
||||
height: 42rpx;
|
||||
height: 40rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user