优化移动端显示效果
This commit is contained in:
@@ -3,8 +3,8 @@
|
|||||||
// 滚动条
|
// 滚动条
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: .5rem;
|
width: 0.5rem;
|
||||||
height: .5rem;
|
height: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
@@ -20,6 +20,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 选中文本
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: @colorPrimary;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
// 标签
|
// 标签
|
||||||
|
|
||||||
html {
|
html {
|
||||||
@@ -76,21 +83,21 @@ body {
|
|||||||
// 阴影
|
// 阴影
|
||||||
|
|
||||||
.shadow-1 {
|
.shadow-1 {
|
||||||
box-shadow: 0 0 .5rem rgba(0, 0, 0, .1);
|
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.shadow-2 {
|
.shadow-2 {
|
||||||
box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .05);
|
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.shadow-3 {
|
.shadow-3 {
|
||||||
box-shadow: 0 .5rem 1rem -.4rem rgba(0, 0, 0, .12);
|
box-shadow: 0 0.5rem 1rem -0.4rem rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 载入中(链接列表)
|
// 载入中(链接列表)
|
||||||
|
|
||||||
.loading-link {
|
.loading-link {
|
||||||
background-color: rgba(255, 255, 255, .5) !important;
|
background-color: rgba(255, 255, 255, 0.5) !important;
|
||||||
backdrop-filter: blur(.2rem);
|
backdrop-filter: blur(.2rem);
|
||||||
|
|
||||||
.el-loading-spinner {
|
.el-loading-spinner {
|
||||||
@@ -120,7 +127,7 @@ body {
|
|||||||
padding: 1rem 1.5rem !important;
|
padding: 1rem 1.5rem !important;
|
||||||
background-color: @colorPrimary;
|
background-color: @colorPrimary;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
.shadow-3();
|
.shadow-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-drawer__body {
|
.el-drawer__body {
|
||||||
@@ -129,6 +136,10 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.el-input {
|
.el-input {
|
||||||
input::-webkit-inner-spin-button,
|
input::-webkit-inner-spin-button,
|
||||||
input::-webkit-outer-spin-button {
|
input::-webkit-outer-spin-button {
|
||||||
@@ -155,6 +166,28 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-message {
|
||||||
|
width: 80%;
|
||||||
|
min-width: 16rem;
|
||||||
|
max-width: 25rem;
|
||||||
|
.shadow-2;
|
||||||
|
|
||||||
|
&.el-message--info {
|
||||||
|
background-color: #FFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-message-box {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 90%;
|
||||||
|
min-width: 16rem;
|
||||||
|
max-width: 25rem;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
.el-select-dropdown {
|
.el-select-dropdown {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
}
|
}
|
||||||
|
@@ -4,9 +4,13 @@
|
|||||||
|
|
||||||
<el-form label-position="left" label-width="7rem">
|
<el-form label-position="left" label-width="7rem">
|
||||||
|
|
||||||
<el-form-item label="字体大小">
|
<el-form-item label="字体大小" class="set-font">
|
||||||
<el-input-number v-model="config.fontSize"
|
<el-input-number
|
||||||
:min="12" :max="32" label="字体大小" size="small"
|
v-model="config.fontSize"
|
||||||
|
:min="12"
|
||||||
|
:max="32"
|
||||||
|
label="字体大小"
|
||||||
|
size="small"
|
||||||
></el-input-number>
|
></el-input-number>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
@@ -19,11 +23,19 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="清除数据">
|
<el-form-item label="清除数据">
|
||||||
<el-button type="danger" size="medium" @click="resetDatas('settings')">清除设置</el-button>
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
size="medium"
|
||||||
|
@click="resetDatas('settings')"
|
||||||
|
>清除设置</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="danger" size="medium" @click="resetDatas('cache')">清除缓存</el-button>
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
size="medium"
|
||||||
|
@click="resetDatas('cache')"
|
||||||
|
>清除缓存</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
</el-form>
|
</el-form>
|
||||||
@@ -101,10 +113,16 @@ export default {
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
padding: 1.5rem 2rem;
|
padding: 1.5rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 50rem;
|
max-width: 50rem;
|
||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.set-font {
|
||||||
|
/deep/ .el-input-number {
|
||||||
|
width: 7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@@ -196,11 +196,11 @@ export default {
|
|||||||
|
|
||||||
.tool-item {
|
.tool-item {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin: .5rem;
|
margin: 0.5rem;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
width: 16rem;
|
width: 16rem;
|
||||||
border-left: .2rem solid @colorPrimary;
|
border-left: 0.2rem solid @colorPrimary;
|
||||||
border-radius: .25rem;
|
border-radius: 0.25rem;
|
||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
color: #555;
|
color: #555;
|
||||||
@@ -210,7 +210,7 @@ export default {
|
|||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-left-color: @colorSecondary;
|
border-left-color: @colorSecondary;
|
||||||
transform: translateY(-.2rem);
|
transform: translateY(-0.2rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
@@ -218,15 +218,15 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.item-title {
|
.item-title {
|
||||||
margin-bottom: .5rem;
|
margin-bottom: 0.5rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: .9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-content {
|
.item-content {
|
||||||
height: calc(1.5em * 2);
|
height: calc(1.5em * 2);
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
font-size: .75rem;
|
font-size: 0.75rem;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user