image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-11-10 07:28:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: layout/notice/login style bug (#415)

Browse Source
This commit is contained in:
WenKang 2023-02-09 15:16:45 +08:00 committed by GitHub
parent 0316386a45
commit 35be7584b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/layouts/components/Notice.vue
View File

@ -3,12 +3,12 @@
<template #content> <template #content>
<div class="header-msg"> <div class="header-msg">
<div class="header-msg-top"> <div class="header-msg-top">
<p>通知</p> <p>通知中心</p>
<t-button v-if="unreadMsg.length > 0" class="clear-btn" variant="text" theme="primary" @click="setRead('all')" <t-button v-if="unreadMsg.length > 0" class="clear-btn" variant="text" theme="primary" @click="setRead('all')"
>清空</t-button >清空</t-button
> >
</div> </div>
<t-list v-if="unreadMsg.length > 0" class="narrow-scrollbar" :split="true"> <t-list v-if="unreadMsg.length > 0" class="narrow-scrollbar" :split="false">
<t-list-item v-for="(item, index) in unreadMsg" :key="index"> <t-list-item v-for="(item, index) in unreadMsg" :key="index">
<div> <div>
<p class="msg-content">{{ item.content }}</p> <p class="msg-content">{{ item.content }}</p>
@ -30,7 +30,8 @@
v-if="unreadMsg.length > 0" v-if="unreadMsg.length > 0"
class="header-msg-bottom-link" class="header-msg-bottom-link"
variant="text" variant="text"
theme="primary" theme="default"
block
@click="goDetail" @click="goDetail"
>查看全部</t-button >查看全部</t-button
> >
@ -79,72 +80,71 @@ const goDetail = () => {
<style lang="less" scoped> <style lang="less" scoped>
.header-msg { .header-msg {
width: 400px; width: 400px;
height: 500px; // height: 440px;
margin: calc(0px - var(--td-comp-paddingTB-xs)) calc(0px - var(--td-comp-paddingLR-s));
.empty-list { .empty-list {
height: calc(100% - 104px); height: calc(100% - 120px);
text-align: center; text-align: center;
padding-top: 135px; padding-top: 135px;
font-size: 14px; font: var(--td-font-body-medium);
color: var(--td-text-color-secondary); color: var(--td-text-color-secondary);
img { img {
width: 63px; width: var(--td-comp-size-xxxxl);
} }
p { p {
margin-top: 30px; margin-top: var(--td-comp-margin-xxl);
} }
} }
&-top { &-top {
position: relative; position: relative;
height: 56px; font: var(--td-font-title-medium);
font-size: 16px;
color: var(--td-text-color-primary); color: var(--td-text-color-primary);
text-align: center; text-align: left;
line-height: 56px; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl) 0;
border-bottom: 1px solid var(--td-component-border); display: flex;
align-items: center;
justify-content: space-between;
.clear-btn { .clear-btn {
position: absolute; right: calc(var(--td-comp-paddingTB-l) - var(--td-comp-paddingLR-xl));
top: 12px;
right: 24px;
} }
} }
&-bottom { &-bottom {
height: 48px;
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
border-top: 1px solid var(--td-component-stroke);
&-link { &-link {
text-decoration: none; text-decoration: none;
font-size: 14px;
color: var(--td-brand-color);
line-height: 48px;
cursor: pointer; cursor: pointer;
color: var(--td-text-color-placeholder);
} }
} }
.t-list { .t-list {
height: calc(100% - 104px); height: calc(100% - 104px);
padding: var(--td-comp-margin-s) var(--td-comp-margin-s);
} }
.t-list-item { .t-list-item {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
padding: 16px 24px; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
border-radius: var(--td-radius-default); border-radius: var(--td-radius-default);
font-size: 14px; font: var(--td-font-body-medium);
color: var(--td-text-color-primary); color: var(--td-text-color-primary);
line-height: 22px;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s linear;
&:hover { &:hover {
transition: background 0.2s ease; background-color: var(--td-bg-color-container-hover);
background: var(--td-bg-color-container-hover);
.msg-content { .msg-content {
color: var(--td-brand-color); color: var(--td-brand-color);
@ -152,7 +152,7 @@ const goDetail = () => {
.t-list-item__action { .t-list-item__action {
button { button {
bottom: 16px; bottom: var(--td-comp-margin-l);
opacity: 1; opacity: 1;
} }
} }
@ -164,7 +164,7 @@ const goDetail = () => {
} }
.msg-content { .msg-content {
margin-bottom: 16px; margin-bottom: var(--td-comp-margin-s);
} }
.msg-type { .msg-type {
@ -175,7 +175,7 @@ const goDetail = () => {
button { button {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: 24px; right: var(--td-comp-margin-xxl);
bottom: -6px; bottom: -6px;
} }
} }
@ -184,8 +184,8 @@ const goDetail = () => {
transition: all 0.2s ease; transition: all 0.2s ease;
opacity: 1; opacity: 1;
position: absolute; position: absolute;
right: 24px; right: var(--td-comp-margin-xxl);
bottom: 16px; bottom: var(--td-comp-margin-l);
color: var(--td-text-color-secondary); color: var(--td-text-color-secondary);
} }
} }

21
src/pages/login/components/Header.vue
View File

@ -37,33 +37,24 @@ const navToHelper = () => {
<style lang="less" scoped> <style lang="less" scoped>
.login-header { .login-header {
padding: 0 24px; padding: 0 var(--td-comp-paddingLR-xl);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
backdrop-filter: blur(5px); backdrop-filter: blur(10px);
color: var(--td-text-color-primary); color: var(--td-text-color-primary);
height: var(--td-comp-size-xxxl);
.logo { .logo {
width: 188px; width: 178px;
height: var(--td-comp-size-s);
} }
.operations-container { .operations-container {
display: flex; display: flex;
align-items: center; align-items: center;
.t-button { .t-button {
margin-left: 16px; margin-left: var(--td-comp-margin-l);
}
.icon {
height: 20px;
width: 20px;
padding: 6px;
box-sizing: content-box;
&:hover {
cursor: pointer;
}
} }
} }
} }

4
src/pages/login/components/Login.vue
View File

@ -45,7 +45,7 @@
<span class="tip">请使用微信扫一扫登录</span> <span class="tip">请使用微信扫一扫登录</span>
<span class="refresh">刷新 <t-icon name="refresh" /> </span> <span class="refresh">刷新 <t-icon name="refresh" /> </span>
</div> </div>
<qrcode-vue value="" :size="192" level="H" /> <qrcode-vue value="" :size="160" level="H" />
</template> </template>
<!-- 手机号登陆 --> <!-- 手机号登陆 -->
@ -60,7 +60,7 @@
<t-form-item class="verification-code" name="verifyCode"> <t-form-item class="verification-code" name="verifyCode">
<t-input v-model="formData.verifyCode" size="large" placeholder="请输入验证码" /> <t-input v-model="formData.verifyCode" size="large" placeholder="请输入验证码" />
<t-button variant="outline" :disabled="countDown > 0" @click="sendCode"> <t-button size="large" variant="outline" :disabled="countDown > 0" @click="sendCode">
{{ countDown == 0 ? '发送验证码' : `${countDown}秒后可重发` }} {{ countDown == 0 ? '发送验证码' : `${countDown}秒后可重发` }}
</t-button> </t-button>
</t-form-item> </t-form-item>

55
src/pages/login/index.less
View File

@ -26,15 +26,13 @@
top: 22%; top: 22%;
left: 5%; left: 5%;
min-height: 500px; min-height: 500px;
line-height: 22px;
} }
.title-container { .title-container {
.title { .title {
font-size: 36px; font: var(--td-font-headline-large);
line-height: 44px;
color: var(--td-text-color-primary); color: var(--td-text-color-primary);
margin-top: 4px; margin-top: var(--td-comp-margin-xs);
&.margin-no { &.margin-no {
margin-top: 0; margin-top: 0;
@ -42,12 +40,12 @@
} }
.sub-title { .sub-title {
margin-top: 16px; margin-top: var(--td-comp-margin-xxl);
.tip { .tip {
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: var(--td-comp-margin-s);
font-size: 14px; font: var(--td-font-body-medium);
&:first-child { &:first-child {
color: var(--td-text-color-secondary); color: var(--td-text-color-secondary);
@ -63,18 +61,18 @@
.item-container { .item-container {
width: 400px; width: 400px;
margin-top: 48px; margin-top: var(--td-comp-margin-xxxxl);
&.login-qrcode { &.login-qrcode {
.tip-container { .tip-container {
width: 192px; margin-bottom: var(--td-comp-margin-l);
margin-bottom: 16px; font: var(--td-font-body-medium);
font-size: 14px;
display: flex; display: flex;
justify-content: space-between; align-items: flex-start;
.tip { .tip {
color: var(--td-text-color-primary); color: var(--td-text-color-primary);
margin-right: var(--td-comp-margin-s);
} }
.refresh { .refresh {
@ -83,8 +81,8 @@
color: var(--td-brand-color); color: var(--td-brand-color);
.t-icon { .t-icon {
font-size: 14px; font-size: var(--td-comp-size-xxxs);
margin-left: 4px; margin-left: var(--td-comp-margin-xs);
} }
&:hover { &:hover {
@ -109,14 +107,10 @@
align-items: center; align-items: center;
&.remember-pwd { &.remember-pwd {
margin-bottom: 16px; margin-bottom: var(--td-comp-margin-l);
justify-content: space-between; justify-content: space-between;
} }
:deep(.t-checkbox__label) {
color: var(--td-text-color-secondary);
}
span { span {
color: var(--td-brand-color); color: var(--td-brand-color);
@ -135,28 +129,27 @@
button { button {
flex-shrink: 0; flex-shrink: 0;
width: 102px; margin-left: var(--td-comp-margin-l);
height: 40px; width: 128px;
margin-left: 11px;
} }
} }
} }
.btn-container { .btn-container {
margin-top: 48px; margin-top: var(--td-comp-margin-xxxxl);
} }
} }
.switch-container { .switch-container {
margin-top: 24px; margin-top: var(--td-comp-margin-xxl);
.tip { .tip {
font-size: 14px; font: var(--td-font-body-medium);
color: var(--td-brand-color); color: var(--td-brand-color);
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin-right: 14px; margin-right: var(--td-comp-margin-l);
&:last-child { &:last-child {
&::after { &::after {
@ -169,25 +162,25 @@
display: block; display: block;
width: 1px; width: 1px;
height: 12px; height: 12px;
background: var(--td-gray-color-3); background: var(--td-component-stroke);
margin-left: 14px; margin-left: var(--td-comp-margin-l);
} }
} }
} }
.check-container { .check-container {
font-size: 14px; font: var(--td-font-body-medium);
color: var(--td-text-color-secondary); color: var(--td-text-color-secondary);
.tip { .tip {
float: right; float: right;
font-size: 14px; font: var(--td-font-body-medium);
color: var(--td-brand-color); color: var(--td-brand-color);
} }
} }
.copyright { .copyright {
font-size: 14px; font: var(--td-font-body-medium);
position: absolute; position: absolute;
left: 5%; left: 5%;
bottom: 64px; bottom: 64px;

18
src/store/modules/notification.ts
View File

@ -38,24 +38,6 @@ const msgData = [
date: '2021-01-01 08:00', date: '2021-01-01 08:00',
quality: 'low', quality: 'low',
}, },
{
id: '127',
content: '二季度生产原材料采购项目 开票成功！',
type: '票务动态',
status: true,
collected: false,
date: '2021-01-01 08:00',
quality: 'low',
},
{
id: '128',
content: '三季度生产原材料采购项目 开票成功！',
type: '票务动态',
status: true,
collected: false,
date: '2021-01-01 08:00',
quality: 'low',
},
]; ];
type MsgDataType = typeof msgData; type MsgDataType = typeof msgData;

7
src/style/layout.less
View File

@ -167,13 +167,13 @@
} }
&-logo-t-logo { &-logo-t-logo {
height: 32px; height: var(--td-comp-size-s);
width: 100%; width: 100%;
} }
&-logo-tdesign-logo { &-logo-tdesign-logo {
padding: 0 24px; padding: 0 var(--td-comp-paddingLR-xl);
height: 32px; height: var(--td-comp-size-s);
width: 100%; width: 100%;
color: var(--td-text-color-primary); color: var(--td-text-color-primary);
} }
@ -207,7 +207,6 @@
.logo-container { .logo-container {
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
height: 64px;
margin-left: 24px; margin-left: 24px;
} }