diff --git a/miniprogram/app.scss b/miniprogram/app.scss index 5901d33..d6fb045 100644 --- a/miniprogram/app.scss +++ b/miniprogram/app.scss @@ -14,7 +14,7 @@ $theme-color-dark-text: rgba(255, 255, 255, .5); $black-filter: brightness(0) opacity(.65); $white-filter: brightness(100) opacity(.65); -$blue-filter: opacity(.65); +$blue-filter: opacity(1); // 页面容器外边距 view.container { @@ -24,18 +24,23 @@ view.container { // 带阴影的 card view.card { - width: calc( 100% - 36px ); - padding: 0 18px; + width: calc( 100% - 40px ); + padding: 0 20px; border-radius: 15px; background-color: $theme-color-light-layout; box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, .08), 0 0.3px 0.9px 0 rgba(0, 0, 0, .05); } -image { +image.icon { filter: $black-filter; } +image.icon-sub { + filter: $black-filter; + opacity: .6; +} + // 顶部导航栏阴影 view.top-shadow { position: fixed; @@ -52,23 +57,27 @@ page { } view, text { - font-size: .99em; + font-size: .97em; + letter-spacing: .1em; font-family: Hiragino Sans GB, MicroSoft YaHei; } view.h1 { color: $theme-color-light-title; font-size: 1.5em; + letter-spacing: .1em; } view.h2 { color: $theme-color-light-title; font-size: 1.3em; + letter-spacing: .1em; } view.h3 { color: $theme-color-light-title; font-size: 1em; + letter-spacing: .1em; } @media (prefers-color-scheme: dark){ @@ -81,7 +90,11 @@ view.h3 { background-color: $theme-color-dark-layout; } - image { + image.icon { + filter: $white-filter; + } + + image.icon-sub { filter: $white-filter; } diff --git a/miniprogram/pages/Account/Account.wxml b/miniprogram/pages/Account/Account.wxml index a55abc5..360eb96 100644 --- a/miniprogram/pages/Account/Account.wxml +++ b/miniprogram/pages/Account/Account.wxml @@ -14,14 +14,28 @@ - + + - 秦浩轩 - 1806240113 + + + + 秦浩轩 + + 已认证 + + + + + + 1806240113 + + + 大连工业大学 diff --git a/miniprogram/pages/Account/UserCard.scss b/miniprogram/pages/Account/UserCard.scss index 5626684..3ad14e8 100644 --- a/miniprogram/pages/Account/UserCard.scss +++ b/miniprogram/pages/Account/UserCard.scss @@ -8,33 +8,68 @@ view.user-card { padding-bottom: 20px; view.avatar { - width: 70px; - height: 70px; + flex-basis: 80px; + width: 80px; + height: 80px; border-radius: 1000px; + flex-shrink: 0; overflow: hidden; } view.info { flex-grow: 1; padding-left: 20px; + max-width: calc(100% - 80px - 20px); view.theme { width: 100%; + padding: 20px 0 10px 0; display: flex; justify-content: flex-end; image { - width: 25px; - height: 25px; + width: 23px; + height: 23px; } } view.nick { - margin: 4px 0; + margin-bottom: 6px; + word-break: keep-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } view.student { - margin: 1px 0; + display: flex; + align-items: center; + + view.certified { + color: $theme-color-blue; + border: 1px solid $theme-color-blue; + border-radius: 4px; + margin-left: .3em; + font-size: .85em; + height: 1.2em; + padding: 0 2px; + display: flex; + justify-content: center; + align-items: center; + + view.text-icon { + margin-left: .3em; + } + } + } + + view.student-id { + margin-bottom: 3px; + } + + view.school { + text-align: right; + padding: 10px 0 20px 0; } } }