fix: calibrate A01 entry visual layout
This commit is contained in:
rain
+69
-69
@@ -11,30 +11,36 @@
|
||||
|
||||
<view class="brand-intro">
|
||||
<view class="title-decoration">
|
||||
<view class="cloud cloud-left" />
|
||||
<image class="title-cloud title-cloud-left" src="/static/assets/icons/action/create-cloud-v2.png" mode="aspectFit" />
|
||||
<text class="brand-title">家谱</text>
|
||||
<view class="cloud cloud-right" />
|
||||
<image class="title-cloud title-cloud-right" src="/static/assets/icons/action/create-cloud-v2.png" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="brand-divider brand-divider--top">
|
||||
<view class="brand-divider__line" />
|
||||
<image class="brand-divider__ornament" src="/static/assets/icons/action/create-cloud-v2.png" mode="aspectFit" />
|
||||
<view class="brand-divider__line" />
|
||||
</view>
|
||||
<view class="gold-divider"><view class="divider-knot">⌘</view></view>
|
||||
<text class="brand-subtitle">为家族留存可传承的记忆</text>
|
||||
<view class="gold-divider"><view class="divider-knot">⌘</view></view>
|
||||
<view class="brand-divider brand-divider--bottom">
|
||||
<view class="brand-divider__line" />
|
||||
<image class="brand-divider__ornament" src="/static/assets/icons/action/create-cloud-v2.png" mode="aspectFit" />
|
||||
<view class="brand-divider__line" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="entry-actions">
|
||||
<view class="auth-button primary-button" hover-class="button-hover" @click="openLogin">
|
||||
<image class="button-icon" src="/static/assets/icons/auth/login-outline-v1.png" mode="aspectFit" />
|
||||
<view class="entry-button entry-button--primary" hover-class="entry-button--pressed" @click="openLogin">
|
||||
<image class="entry-button__icon" src="/static/assets/icons/auth/login-outline-v1.png" mode="aspectFit" />
|
||||
<text>登录</text>
|
||||
</view>
|
||||
|
||||
<view class="auth-button secondary-button" hover-class="button-hover" @click="prepareWechatLogin">
|
||||
<image class="button-icon wechat-icon" src="/static/assets/icons/auth/wechat-licensed-v1.png" mode="aspectFit" />
|
||||
<view class="entry-button entry-button--secondary" hover-class="entry-button--pressed" @click="prepareWechatLogin">
|
||||
<image class="entry-button__icon entry-button__icon--wechat" src="/static/assets/icons/auth/wechat-licensed-v1.png" mode="aspectFit" />
|
||||
<text>微信登录</text>
|
||||
</view>
|
||||
|
||||
<view class="register-link" hover-class="link-hover" @click="prepareRegister">
|
||||
<view class="link-line" />
|
||||
<text>还没有账号？<text class="register-emphasis">注册账号</text></text>
|
||||
<view class="link-line" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -118,7 +124,7 @@ const prepareAgreement = () => {
|
||||
|
||||
.auth-header {
|
||||
position: relative;
|
||||
height: 244rpx;
|
||||
height: 253rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -140,7 +146,7 @@ const prepareAgreement = () => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 196rpx 56rpx 0;
|
||||
padding: 150rpx 56rpx 0;
|
||||
color: #3f2c1d;
|
||||
}
|
||||
|
||||
@@ -160,47 +166,34 @@ const prepareAgreement = () => {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cloud {
|
||||
position: relative;
|
||||
width: 54rpx;
|
||||
height: 24rpx;
|
||||
border: 3rpx solid #dca34d;
|
||||
border-top: 0;
|
||||
border-radius: 0 0 26rpx 26rpx;
|
||||
.title-cloud {
|
||||
width: 76rpx;
|
||||
height: 46rpx;
|
||||
}
|
||||
|
||||
.cloud::before,
|
||||
.cloud::after {
|
||||
position: absolute;
|
||||
bottom: -3rpx;
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
border: 3rpx solid #dca34d;
|
||||
border-bottom: 0;
|
||||
border-radius: 50% 50% 0 0;
|
||||
content: '';
|
||||
}
|
||||
.title-cloud-left { margin-right: 10rpx; }
|
||||
.title-cloud-right { margin-left: 10rpx; transform: scaleX(-1); }
|
||||
|
||||
.cloud::before { left: 5rpx; }
|
||||
.cloud::after { right: 5rpx; }
|
||||
.cloud-right { transform: scaleX(-1); }
|
||||
|
||||
.gold-divider {
|
||||
.brand-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 430rpx;
|
||||
width: 426rpx;
|
||||
}
|
||||
|
||||
.brand-divider--top { margin: 47rpx 0 21rpx; }
|
||||
.brand-divider--bottom { margin: 34rpx 0 30rpx; }
|
||||
|
||||
.brand-divider__line {
|
||||
flex: 1;
|
||||
height: 1rpx;
|
||||
margin: 30rpx 0;
|
||||
background: #d5a34f;
|
||||
}
|
||||
|
||||
.divider-knot {
|
||||
padding: 0 14rpx;
|
||||
color: #d5a34f;
|
||||
background: #f8f2e9;
|
||||
font-size: 32rpx;
|
||||
line-height: 1;
|
||||
.brand-divider__ornament {
|
||||
width: 44rpx;
|
||||
height: 24rpx;
|
||||
margin: 0 14rpx;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
@@ -211,51 +204,65 @@ const prepareAgreement = () => {
|
||||
}
|
||||
|
||||
.entry-actions {
|
||||
margin: 130rpx 100rpx 0;
|
||||
margin: 95rpx 110rpx 0;
|
||||
}
|
||||
|
||||
.auth-button {
|
||||
.entry-button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 124rpx;
|
||||
height: 118rpx;
|
||||
border: 2rpx solid #d8ad63;
|
||||
border-radius: 8rpx;
|
||||
border-radius: 6rpx;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 42rpx;
|
||||
letter-spacing: 5rpx;
|
||||
font-size: 38rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
.entry-button::after {
|
||||
position: absolute;
|
||||
inset: 10rpx;
|
||||
border: 1rpx solid rgba(225, 180, 105, 0.92);
|
||||
border-radius: 2rpx;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.entry-button--primary {
|
||||
border-color: #9e170e;
|
||||
background: #b7170d;
|
||||
box-shadow: inset 0 0 0 4rpx #d69b5f;
|
||||
color: #fffaf0;
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
margin-top: 32rpx;
|
||||
.entry-button--primary::after { border-color: #edc67c; }
|
||||
|
||||
.entry-button--secondary {
|
||||
margin-top: 51rpx;
|
||||
background: rgba(255, 252, 245, 0.82);
|
||||
box-shadow: inset 0 0 0 3rpx rgba(229, 190, 133, 0.45);
|
||||
color: #60442f;
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
margin-right: 24rpx;
|
||||
.entry-button__icon {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.wechat-icon { width: 56rpx; }
|
||||
.button-hover { opacity: 0.84; }
|
||||
.entry-button__icon--wechat { width: 52rpx; }
|
||||
.entry-button--primary .entry-button__icon { filter: brightness(0) invert(1); }
|
||||
.entry-button > text { position: relative; z-index: 1; }
|
||||
.entry-button--pressed { opacity: 0.84; }
|
||||
|
||||
.register-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 70rpx;
|
||||
margin-top: 98rpx;
|
||||
color: #60442f;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
@@ -265,20 +272,13 @@ const prepareAgreement = () => {
|
||||
|
||||
.register-emphasis { color: #b7170d; }
|
||||
|
||||
.link-line {
|
||||
width: 58rpx;
|
||||
height: 1rpx;
|
||||
margin: 0 18rpx;
|
||||
background: #d5a34f;
|
||||
}
|
||||
|
||||
.link-hover { opacity: 0.65; }
|
||||
|
||||
.agreement-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
margin-top: 160rpx;
|
||||
margin-top: 128rpx;
|
||||
padding: 0 44rpx calc(32rpx + env(safe-area-inset-bottom));
|
||||
color: #6b5a4a;
|
||||
font-size: 24rpx;
|
||||
|
||||
Reference in New Issue
Block a user