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

fix: add A01 ornamental auth assets

Browse Source
This commit is contained in:
rain
2026-07-13 16:00:22 +08:00
parent 83d58268ac
commit 778cd8e7bf
8 changed files with 81 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/auth/entry.vue
+38 -13
View File
@@ -11,25 +11,29 @@
<view class="brand-intro">
<view class="title-decoration">
<image class="title-cloud title-cloud-left" src="/static/assets/icons/action/create-cloud-v2.png" mode="aspectFit" />
<image class="title-cloud title-cloud-left" src="/static/assets/icons/auth/auth-title-cloud-v1.png" mode="aspectFit" />
<text class="brand-title">家谱</text>
<image class="title-cloud title-cloud-right" src="/static/assets/icons/action/create-cloud-v2.png" mode="aspectFit" />
<image class="title-cloud title-cloud-right" src="/static/assets/icons/auth/auth-title-cloud-v1.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" />
<image class="brand-divider__ornament" src="/static/assets/icons/auth/auth-divider-knot-v1.png" mode="aspectFit" />
<view class="brand-divider__line" />
</view>
<text class="brand-subtitle">为家族留存可传承的记忆</text>
<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" />
<image class="brand-divider__ornament" src="/static/assets/icons/auth/auth-divider-knot-v1.png" mode="aspectFit" />
<view class="brand-divider__line" />
</view>
</view>
<view class="entry-actions">
<view class="entry-button entry-button--primary" hover-class="entry-button--pressed" @click="openLogin">
<image class="button-corner-asset button-corner-asset--top-left" src="/static/assets/icons/auth/auth-button-corner-v1.png" mode="aspectFit" />
<image class="button-corner-asset button-corner-asset--top-right" src="/static/assets/icons/auth/auth-button-corner-v1.png" mode="aspectFit" />
<image class="button-corner-asset button-corner-asset--bottom-left" src="/static/assets/icons/auth/auth-button-corner-v1.png" mode="aspectFit" />
<image class="button-corner-asset button-corner-asset--bottom-right" src="/static/assets/icons/auth/auth-button-corner-v1.png" mode="aspectFit" />
<view class="entry-button__content">
<image class="entry-button__icon" src="/static/assets/icons/auth/login-outline-v1.png" mode="aspectFit" />
<text>登录</text>
@@ -37,6 +41,10 @@
</view>
<view class="entry-button entry-button--secondary" hover-class="entry-button--pressed" @click="prepareWechatLogin">
<image class="button-corner-asset button-corner-asset--top-left" src="/static/assets/icons/auth/auth-button-corner-v1.png" mode="aspectFit" />
<image class="button-corner-asset button-corner-asset--top-right" src="/static/assets/icons/auth/auth-button-corner-v1.png" mode="aspectFit" />
<image class="button-corner-asset button-corner-asset--bottom-left" src="/static/assets/icons/auth/auth-button-corner-v1.png" mode="aspectFit" />
<image class="button-corner-asset button-corner-asset--bottom-right" src="/static/assets/icons/auth/auth-button-corner-v1.png" mode="aspectFit" />
<view class="entry-button__content">
<image class="entry-button__icon entry-button__icon--wechat" src="/static/assets/icons/auth/wechat-licensed-v1.png" mode="aspectFit" />
<text>微信登录</text>
@@ -170,10 +178,7 @@ const prepareAgreement = () => {
line-height: 1;
}
.title-cloud {
width: 56rpx;
height: 34rpx;
}
.title-cloud { width: 64rpx; height: 40rpx; }
.title-cloud-left { margin-right: 0; }
.title-cloud-right { margin-left: 0; transform: scaleX(-1); }
@@ -233,8 +238,22 @@ const prepareAgreement = () => {
border-radius: 2rpx;
content: '';
pointer-events: none;
z-index: 1;
}
.button-corner-asset {
position: absolute;
z-index: 2;
width: 54rpx;
height: 54rpx;
pointer-events: none;
}
.button-corner-asset--top-left { top: 4rpx; left: 4rpx; }
.button-corner-asset--top-right { top: 4rpx; right: 4rpx; transform: scaleX(-1); }
.button-corner-asset--bottom-left { bottom: 4rpx; left: 4rpx; transform: scaleY(-1); }
.button-corner-asset--bottom-right { right: 4rpx; bottom: 4rpx; transform: scale(-1); }
.entry-button--primary {
border-color: #9e170e;
background: #b7170d;
@@ -259,7 +278,7 @@ const prepareAgreement = () => {
.entry-button--primary .entry-button__icon { filter: brightness(0) invert(1); }
.entry-button__content {
position: relative;
z-index: 1;
z-index: 3;
display: flex;
align-items: center;
transform: translateX(-20rpx);
@@ -284,13 +303,13 @@ const prepareAgreement = () => {
.agreement-row {
display: flex;
align-items: flex-start;
align-items: center;
justify-content: center;
margin-top: 141rpx;
padding: 0 44rpx calc(32rpx + env(safe-area-inset-bottom));
color: #6b5a4a;
font-size: 20rpx;
line-height: 1.7;
line-height: 30rpx;
}
.agreement-check {
@@ -301,7 +320,7 @@ const prepareAgreement = () => {
box-sizing: border-box;
width: 30rpx;
height: 30rpx;
margin: 7rpx 12rpx 0 0;
margin: 0 12rpx 0 0;
border: 2rpx solid #b88d4b;
border-radius: 50%;
color: #fffaf0;
@@ -310,6 +329,12 @@ const prepareAgreement = () => {
}
.agreement-check.checked { background: #b7170d; border-color: #b7170d; }
.agreement-copy { text-align: center; }
.agreement-copy {
display: flex;
align-items: center;
line-height: 30rpx;
text-align: center;
white-space: nowrap;
}
.agreement-link { color: #b7170d; }
</style>