mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 19:35:50 +00:00
perf: 优化设置样式
This commit is contained in:
kuaifan
parent
77843ccdee
commit
0fce0c2386
@ -72,7 +72,7 @@
|
||||
</div>
|
||||
|
||||
<template v-if="formData.open === 'open' && formData.modes.includes('auto')">
|
||||
<div class="block-setting-placeholder"></div>
|
||||
<div class="block-setting-space"></div>
|
||||
<div class="block-setting-box">
|
||||
<h3>{{ $L('自动签到') }}</h3>
|
||||
<div class="form-box">
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-setting-placeholder"></div>
|
||||
<div class="block-setting-space"></div>
|
||||
|
||||
<div class="block-setting-box">
|
||||
<h3>{{ $L('邮件通知设置') }}</h3>
|
||||
@ -62,7 +62,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-setting-placeholder"></div>
|
||||
<div class="block-setting-space"></div>
|
||||
|
||||
<div class="block-setting-box">
|
||||
<h3>{{ $L('忽略邮箱地址') }}</h3>
|
||||
|
||||
60
resources/assets/sass/pages/common.scss
vendored
60
resources/assets/sass/pages/common.scss
vendored
@ -774,3 +774,63 @@ body.window-portrait {
|
||||
}
|
||||
}
|
||||
|
||||
/*设置box*/
|
||||
.block-setting-box {
|
||||
position: relative;
|
||||
padding: 0 24px 4px;
|
||||
margin: 8px 0 16px;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 1px solid #eeeeee;
|
||||
border-radius: 8px;
|
||||
transition: box-shadow 0.3s;
|
||||
pointer-events: none;
|
||||
}
|
||||
&:hover {
|
||||
&:before {
|
||||
box-shadow: 0 0 10px #e6ecfa;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 24px;
|
||||
z-index: 2;
|
||||
line-height: 32px;
|
||||
box-sizing: content-box;
|
||||
padding: 0 10px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #eeeeee;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-box {
|
||||
margin-top: 24px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ivu-form-item {
|
||||
.ivu-form {
|
||||
padding: 12px 0 0 0;
|
||||
.ivu-form-item {
|
||||
margin-bottom: 8px;
|
||||
.ivu-form-item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.block-setting-space {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
64
resources/assets/sass/pages/page-apply.scss
vendored
64
resources/assets/sass/pages/page-apply.scss
vendored
@ -74,7 +74,7 @@
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.apply-box-top-report {
|
||||
@ -243,9 +243,8 @@
|
||||
flex: 1;
|
||||
padding: 8px 30px;
|
||||
|
||||
//
|
||||
.setting-component-item,
|
||||
.setting-item {
|
||||
.setting-item,
|
||||
.setting-component-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -261,7 +260,6 @@
|
||||
flex: 1;
|
||||
|
||||
.ivu-form-item {
|
||||
padding: 12px 0 0 0;
|
||||
.ivu-form-item .ivu-form-item-content {
|
||||
display: flex;
|
||||
|
||||
@ -270,56 +268,6 @@
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.block-setting-box {
|
||||
position: relative;
|
||||
padding: 24px 24px 4px;
|
||||
margin: 24px 0 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #eeeeee;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.block-setting-advance{
|
||||
>.ivu-form-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.ivu-form-item-label{
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 460px) {
|
||||
.block-setting-msg-unread{
|
||||
>.ivu-form-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.ivu-form-item-label{
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 24px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #eeeeee;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
transform: translateY(-50%)
|
||||
}
|
||||
}
|
||||
|
||||
@ -455,13 +403,7 @@
|
||||
.aibot-warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
.ivu-form {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
45
resources/assets/sass/pages/page-setting.scss
vendored
45
resources/assets/sass/pages/page-setting.scss
vendored
@ -267,51 +267,6 @@
|
||||
.setting-footer {
|
||||
margin: 0 -32px;
|
||||
}
|
||||
.block-setting-box {
|
||||
position: relative;
|
||||
padding: 44px 24px 4px;
|
||||
margin: 24px 0 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #eeeeee;
|
||||
transition: box-shadow 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px #e6ecfa;
|
||||
}
|
||||
h3 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 24px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #eeeeee;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.form-box {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ivu-form-item {
|
||||
.ivu-form {
|
||||
padding: 12px 0 0 0;
|
||||
.ivu-form-item {
|
||||
margin-bottom: 8px;
|
||||
.ivu-form-item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.block-setting-placeholder {
|
||||
height: 8px;
|
||||
}
|
||||
.export-data {
|
||||
margin-top: 6px;
|
||||
> p {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user