mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-09-20 02:34:24 +08:00
fix: layout/notice/login style bug (#415)
This commit is contained in:
WenKang
GitHub
parent
0316386a45
commit
35be7584b0
|
|
@ -3,12 +3,12 @@
|
|||
<template #content>
|
||||
<div class="header-msg">
|
||||
<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
|
||||
>
|
||||
</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">
|
||||
<div>
|
||||
<p class="msg-content">{{ item.content }}</p>
|
||||
|
|
@ -30,7 +30,8 @@
|
|||
v-if="unreadMsg.length > 0"
|
||||
class="header-msg-bottom-link"
|
||||
variant="text"
|
||||
theme="primary"
|
||||
theme="default"
|
||||
block
|
||||
@click="goDetail"
|
||||
>查看全部</t-button
|
||||
>
|
||||
|
|
@ -79,72 +80,71 @@ const goDetail = () => {
|
|||
<style lang="less" scoped>
|
||||
.header-msg {
|
||||
width: 400px;
|
||||
height: 500px;
|
||||
// height: 440px;
|
||||
margin: calc(0px - var(--td-comp-paddingTB-xs)) calc(0px - var(--td-comp-paddingLR-s));
|
||||
|
||||
.empty-list {
|
||||
height: calc(100% - 104px);
|
||||
height: calc(100% - 120px);
|
||||
text-align: center;
|
||||
padding-top: 135px;
|
||||
font-size: 14px;
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-secondary);
|
||||
|
||||
img {
|
||||
width: 63px;
|
||||
width: var(--td-comp-size-xxxxl);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 30px;
|
||||
margin-top: var(--td-comp-margin-xxl);
|
||||
}
|
||||
}
|
||||
|
||||
&-top {
|
||||
position: relative;
|
||||
height: 56px;
|
||||
font-size: 16px;
|
||||
font: var(--td-font-title-medium);
|
||||
color: var(--td-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 56px;
|
||||
border-bottom: 1px solid var(--td-component-border);
|
||||
text-align: left;
|
||||
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl) 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 24px;
|
||||
right: calc(var(--td-comp-paddingTB-l) - var(--td-comp-paddingLR-xl));
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
height: 48px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
|
||||
border-top: 1px solid var(--td-component-stroke);
|
||||
|
||||
&-link {
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
color: var(--td-brand-color);
|
||||
line-height: 48px;
|
||||
cursor: pointer;
|
||||
color: var(--td-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
.t-list {
|
||||
height: calc(100% - 104px);
|
||||
padding: var(--td-comp-margin-s) var(--td-comp-margin-s);
|
||||
}
|
||||
|
||||
.t-list-item {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
|
||||
border-radius: var(--td-radius-default);
|
||||
font-size: 14px;
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-primary);
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s linear;
|
||||
|
||||
&:hover {
|
||||
transition: background 0.2s ease;
|
||||
background: var(--td-bg-color-container-hover);
|
||||
background-color: var(--td-bg-color-container-hover);
|
||||
|
||||
.msg-content {
|
||||
color: var(--td-brand-color);
|
||||
|
|
@ -152,7 +152,7 @@ const goDetail = () => {
|
|||
|
||||
.t-list-item__action {
|
||||
button {
|
||||
bottom: 16px;
|
||||
bottom: var(--td-comp-margin-l);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -164,7 +164,7 @@ const goDetail = () => {
|
|||
}
|
||||
|
||||
.msg-content {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--td-comp-margin-s);
|
||||
}
|
||||
|
||||
.msg-type {
|
||||
|
|
@ -175,7 +175,7 @@ const goDetail = () => {
|
|||
button {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
right: var(--td-comp-margin-xxl);
|
||||
bottom: -6px;
|
||||
}
|
||||
}
|
||||
|
|
@ -184,8 +184,8 @@ const goDetail = () => {
|
|||
transition: all 0.2s ease;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
bottom: 16px;
|
||||
right: var(--td-comp-margin-xxl);
|
||||
bottom: var(--td-comp-margin-l);
|
||||
color: var(--td-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,33 +37,24 @@ const navToHelper = () => {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.login-header {
|
||||
padding: 0 24px;
|
||||
padding: 0 var(--td-comp-paddingLR-xl);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(5px);
|
||||
backdrop-filter: blur(10px);
|
||||
color: var(--td-text-color-primary);
|
||||
height: var(--td-comp-size-xxxl);
|
||||
|
||||
.logo {
|
||||
width: 188px;
|
||||
width: 178px;
|
||||
height: var(--td-comp-size-s);
|
||||
}
|
||||
|
||||
.operations-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.t-button {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 6px;
|
||||
box-sizing: content-box;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
margin-left: var(--td-comp-margin-l);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
<span class="tip">请使用微信扫一扫登录</span>
|
||||
<span class="refresh">刷新 <t-icon name="refresh" /> </span>
|
||||
</div>
|
||||
<qrcode-vue value="" :size="192" level="H" />
|
||||
<qrcode-vue value="" :size="160" level="H" />
|
||||
</template>
|
||||
|
||||
<!-- 手机号登陆 -->
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
<t-form-item class="verification-code" name="verifyCode">
|
||||
<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}秒后可重发` }}
|
||||
</t-button>
|
||||
</t-form-item>
|
||||
|
|
|
|||
|
|
@ -26,15 +26,13 @@
|
|||
top: 22%;
|
||||
left: 5%;
|
||||
min-height: 500px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
.title {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
font: var(--td-font-headline-large);
|
||||
color: var(--td-text-color-primary);
|
||||
margin-top: 4px;
|
||||
margin-top: var(--td-comp-margin-xs);
|
||||
|
||||
&.margin-no {
|
||||
margin-top: 0;
|
||||
|
|
@ -42,12 +40,12 @@
|
|||
}
|
||||
|
||||
.sub-title {
|
||||
margin-top: 16px;
|
||||
margin-top: var(--td-comp-margin-xxl);
|
||||
|
||||
.tip {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
margin-right: var(--td-comp-margin-s);
|
||||
font: var(--td-font-body-medium);
|
||||
|
||||
&:first-child {
|
||||
color: var(--td-text-color-secondary);
|
||||
|
|
@ -63,18 +61,18 @@
|
|||
|
||||
.item-container {
|
||||
width: 400px;
|
||||
margin-top: 48px;
|
||||
margin-top: var(--td-comp-margin-xxxxl);
|
||||
|
||||
&.login-qrcode {
|
||||
.tip-container {
|
||||
width: 192px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
margin-bottom: var(--td-comp-margin-l);
|
||||
font: var(--td-font-body-medium);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.tip {
|
||||
color: var(--td-text-color-primary);
|
||||
margin-right: var(--td-comp-margin-s);
|
||||
}
|
||||
|
||||
.refresh {
|
||||
|
|
@ -83,8 +81,8 @@
|
|||
color: var(--td-brand-color);
|
||||
|
||||
.t-icon {
|
||||
font-size: 14px;
|
||||
margin-left: 4px;
|
||||
font-size: var(--td-comp-size-xxxs);
|
||||
margin-left: var(--td-comp-margin-xs);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -109,14 +107,10 @@
|
|||
align-items: center;
|
||||
|
||||
&.remember-pwd {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--td-comp-margin-l);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
:deep(.t-checkbox__label) {
|
||||
color: var(--td-text-color-secondary);
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--td-brand-color);
|
||||
|
||||
|
|
@ -135,28 +129,27 @@
|
|||
|
||||
button {
|
||||
flex-shrink: 0;
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 11px;
|
||||
margin-left: var(--td-comp-margin-l);
|
||||
width: 128px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
margin-top: 48px;
|
||||
margin-top: var(--td-comp-margin-xxxxl);
|
||||
}
|
||||
}
|
||||
|
||||
.switch-container {
|
||||
margin-top: 24px;
|
||||
margin-top: var(--td-comp-margin-xxl);
|
||||
|
||||
.tip {
|
||||
font-size: 14px;
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-brand-color);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: 14px;
|
||||
margin-right: var(--td-comp-margin-l);
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
|
|
@ -169,25 +162,25 @@
|
|||
display: block;
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background: var(--td-gray-color-3);
|
||||
margin-left: 14px;
|
||||
background: var(--td-component-stroke);
|
||||
margin-left: var(--td-comp-margin-l);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.check-container {
|
||||
font-size: 14px;
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-secondary);
|
||||
|
||||
.tip {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-brand-color);
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 14px;
|
||||
font: var(--td-font-body-medium);
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
bottom: 64px;
|
||||
|
|
|
|||
|
|
@ -38,24 +38,6 @@ const msgData = [
|
|||
date: '2021-01-01 08:00',
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -167,13 +167,13 @@
|
|||
}
|
||||
|
||||
&-logo-t-logo {
|
||||
height: 32px;
|
||||
height: var(--td-comp-size-s);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-logo-tdesign-logo {
|
||||
padding: 0 24px;
|
||||
height: 32px;
|
||||
padding: 0 var(--td-comp-paddingLR-xl);
|
||||
height: var(--td-comp-size-s);
|
||||
width: 100%;
|
||||
color: var(--td-text-color-primary);
|
||||
}
|
||||
|
|
@ -207,7 +207,6 @@
|
|||
.logo-container {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
height: 64px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user