frost-craft/frost-navigation
1
0
Fork 0
Code Releases Activity

优化移动端显示效果

Browse Source
This commit is contained in:
Frost-ZX
2021-06-05 11:08:28 +08:00
parent 8046a66540
commit 2ce4eadc2f
3 changed files with 71 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/Settings.vue
View File

@@ -4,9 +4,13 @@
<el-form label-position="left" label-width="7rem">
<el-form-item label="字体大小">
<el-input-number v-model="config.fontSize"
:min="12" :max="32" label="字体大小" size="small"
<el-form-item label="字体大小" class="set-font">
<el-input-number
v-model="config.fontSize"
:min="12"
:max="32"
label="字体大小"
size="small"
></el-input-number>
</el-form-item>
@@ -19,11 +23,19 @@
</el-form-item>
<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-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>
@@ -101,10 +113,16 @@ export default {
overflow-y: auto;
.wrapper {
padding: 1.5rem 2rem;
padding: 1.5rem;
width: 100%;
max-width: 50rem;
background-color: #FFF;
}
}
.set-font {
/deep/ .el-input-number {
width: 7rem;
}
}
</style>

14
src/views/Tools.vue
View File

@@ -196,11 +196,11 @@ export default {
.tool-item {
flex-shrink: 0;
margin: .5rem;
margin: 0.5rem;
padding: 1rem;
width: 16rem;
border-left: .2rem solid @colorPrimary;
border-radius: .25rem;
border-left: 0.2rem solid @colorPrimary;
border-radius: 0.25rem;
background-color: #FFF;
font-size: 0;
color: #555;
@@ -210,7 +210,7 @@ export default {
&:hover {
border-left-color: @colorSecondary;
transform: translateY(-.2rem);
transform: translateY(-0.2rem);
}
&.disabled {
@@ -218,15 +218,15 @@ export default {
}
.item-title {
margin-bottom: .5rem;
margin-bottom: 0.5rem;
font-weight: bold;
font-size: .9rem;
font-size: 0.9rem;
}
.item-content {
height: calc(1.5em * 2);
line-height: 1.5em;
font-size: .75rem;
font-size: 0.75rem;
color: #999;
}
}