MrKBear/mini-dlpu-v3
MrKBear/mini-dlpu-v3
8
10
Fork 0
Code Issues 11 Pull Requests Projects 6 Releases Wiki Activity

Add login UI style

Browse Source
This commit is contained in:
MrKBear 2022-06-10 12:33:38 +08:00
parent 349930d438
commit 4c66a8974f
3 changed files with 127 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
miniprogram/app.scss
View File

@ -6,15 +6,18 @@ $theme-color-light-layout: #F8F8F8;
$theme-color-light-background: #f4f0f1;
$theme-color-light-title: rgba(0, 0, 0, .65);
$theme-color-light-text: rgba(0, 0, 0, .5);
$theme-color-light-line: rgba(0, 0, 0, .25);
$theme-color-dark-layout: #1f1f1f;
$theme-color-dark-background: #181615;
$theme-color-dark-title: rgba(255, 255, 255, .65);
$theme-color-dark-text: rgba(255, 255, 255, .5);
$theme-color-dark-line: rgba(255, 255, 255, .25);
$black-filter: brightness(0) opacity(.65);
$white-filter: brightness(100) opacity(.65);
$blue-filter: opacity(1);
$green-filter: hue-rotate(-110deg) opacity(1);
@mixin container {
width: 88%;
@ -83,6 +86,14 @@ view.h3 {
font-size: 1em;
letter-spacing: .1em;
}
view.button {
color: white;
background-color: $theme-color-blue;
text-align: center;
padding: 10px;
border-radius: 10px;
}
@media (prefers-color-scheme: dark){
page {

43
miniprogram/pages/Account/Account.wxml
View File

@ -33,7 +33,48 @@
</view>
</view>
<view class="student-id-input"></view>
<!-- 学号输入框 -->
<view class="student-info-input">
<view class="input-icon">
<image class="icon" src="../../image/account/Account_UserName.svg"></image>
</view>
<view class="input-view">
<input placeholder="请输入学号"/>
</view>
</view>
<!-- 密码输入框 -->
<view class="student-info-input">
<view class="input-icon">
<image class="icon" src="../../image/account/Account_PasswordHidden.svg"></image>
</view>
<view class="input-view">
<input placeholder="请输入密码"/>
</view>
</view>
<view style="height: 30px"/>
<!-- 提示语 -->
<view class="tip-info last-active">
<image src="../../image/account/Account_Info.svg"></image>
<view>账号最后活动时间: 2022.1.25-8.20</view>
</view>
<view class="tip-info agree-lic">
<image src="../../image/account/Account_Complete.svg"></image>
<view>同意<text>《用户协议》</text>和<text>《隐私政策》</text></view>
</view>
<view class="tip-info helper-link">
<image src="../../image/account/Account_Question.svg"></image>
<view>遇到问题了戳这里-><text>常见问题</text></view>
</view>
<!-- 登录按钮 -->
<view class="button save-button">
保存并验证
</view>
</view>
</view>

77
miniprogram/pages/Account/Login.scss
View File

@ -6,7 +6,7 @@ view.login-layer {
view.school-logo {
height: 0;
padding-top: 20px;
padding-top: 25px;
width: 100%;
text-align: center;
@ -40,7 +40,8 @@ view.login-layer {
view {
height: 0;
width: 100%;
border-top: 2px solid rgba(0,0,0,.1);
opacity: .5;
border-top: 2px solid $theme-color-light-line;
}
}
@ -78,6 +79,72 @@ view.login-layer {
}
}
}
view.student-info-input {
display: flex;
justify-content: center;
padding: 8px 0;
view.input-icon {
box-sizing: border-box;
padding: 3px 12px 3px 0;
flex-shrink: 0;
width: 38px;
height: 32px;
image {
width: 100%;
height: 100%;
}
}
view.input-view {
position: relative;
bottom: 3px;
box-sizing: border-box;
border-bottom: 1.5px solid $theme-color-light-line;
flex-grow: 1;
width: 100%;
height: 32px;
input {
width: 100%;
height: 100%;
}
}
}
view.tip-info {
width: 100%;
vertical-align: middle;
padding: 1px 0;
font-size: .9em;
image {
vertical-align: middle;
width: 16px;
height: 16px;
margin-right: 5px;
}
view {
vertical-align: middle;
display: inline;
text {
color: $theme-color-blue;
text-decoration: underline;
}
}
}
view.agree-lic image {
filter: $green-filter;
}
view.save-button {
margin: 15px 0 25px 0;
}
}
@media (prefers-color-scheme: dark) {
@ -93,7 +160,11 @@ view.login-layer {
}
view.line-bg view {
border-top: 2px solid rgba(255,255,255,.1);
border-top: 2px solid $theme-color-dark-line;
}
view.student-info-input view.input-view {
border-bottom: 1.5px solid $theme-color-dark-line;
}
}
}