style: 修复小屏幕样式

This commit is contained in:
q4speed 2020-07-14 10:45:24 +08:00
parent b2d036a81b
commit 97bdb3f5e1
4 changed files with 47 additions and 8 deletions

View File

@ -1,7 +1,7 @@
<template>
<span class="adv-search-bar">
<el-link type="primary" @click="open">{{$t('commons.adv_search.title')}}</el-link>
<el-dialog :title="$t('commons.adv_search.combine')" :visible.sync="visible" width="70%">
<el-dialog :title="$t('commons.adv_search.combine')" :visible.sync="visible" custom-class="adv-dialog">
<div>
<!-- 如果有需求再加上-->
<!-- <div class="search-label">{{$t('commons.adv_search.combine')}}: </div>-->
@ -80,6 +80,33 @@
}
</script>
<style>
@media only screen and (min-width: 1800px) {
.el-dialog.adv-dialog {
width: 70%;
}
}
@media only screen and (min-width: 1560px) and (max-width: 1799px) {
.el-dialog.adv-dialog {
width: 80%;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1559px) {
.el-dialog.adv-dialog {
width: 90%;
}
}
@media only screen and (max-width: 1399px) {
.el-dialog.adv-dialog {
width: 70%;
min-width: 655px;
}
}
</style>
<style scoped>
.adv-search-bar {
margin-left: 5px;
@ -104,10 +131,20 @@
width: 100%;
}
@media only screen and (max-width: 1399px) {
.search-item {
width: 100%;
}
}
@media only screen and (min-width: 1400px) {
.search-item {
width: 50%;
}
}
.search-item {
display: inline-block;
width: 50%;
max-width: 50%;
margin-top: 10px;
}
</style>

View File

@ -64,12 +64,14 @@
.search-operator {
display: inline-block;
width: 160px;
width: 120px;
}
.search-content {
display: inline-block;
margin: 0 5px 0 10px;
width: calc(100% - 255px);
padding: 0 5px 0 10px;
width: calc(100% - 200px);
min-width: 400px;
box-sizing: border-box;
}
</style>

View File

@ -137,7 +137,7 @@ export default {
le: "小于等于",
equals: "等于",
between: "之间",
current_user: "是当前登录用户"
current_user: "是当前用户"
}
}
},

View File

@ -135,7 +135,7 @@ export default {
le: "小於等於",
equals: "等於",
between: "之間",
current_user: "是當前登錄用戶"
current_user: "是當前用戶"
}
}
},