UP 大布局更换为flex布局

This commit is contained in:
sakuya 2021-05-09 19:24:49 +08:00
parent b2585ff6cd
commit f47dcabad7
3 changed files with 13 additions and 8 deletions

View File

@ -15,8 +15,12 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
::-webkit-scrollbar-track {background-color: rgba(50, 50, 50, 0.1);}
::-webkit-scrollbar-track:hover {background-color: rgba(50, 50, 50, 0.2);}
.aminui-side-split {position: absolute;top:0px;left:0px;bottom:0px;width:65px;background: #333;z-index: 5;}
.adminui-side-split-scroll {position: absolute;top:0px;left:0px;bottom:0px;right:0px;overflow: auto;overflow-x:hidden;}
/* 大布局样式 */
.aminui {display: flex;}
/* 左侧菜单 */
.aminui-side-split {width:65px;background: #333;}
.adminui-side-split-scroll {overflow: auto;overflow-x:hidden;height: 100%;}
.aminui-side-split li {cursor: pointer;width: 65px;height: 65px;color: #fff;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.aminui-side-split li i {font-size: 16px;}
.aminui-side-split li p {margin-top:5px;}
@ -28,12 +32,13 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
.adminui-side-split-scroll::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 0);}
.adminui-side-split-scroll::-webkit-scrollbar-track:hover {background-color: rgba(255, 255, 255, 0);}
.aminui-side {position: absolute;z-index: 5;top:0px;left:65px;bottom:0px;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;}
.aminui-side {display: flex;flex-flow: column;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;}
.adminui-side-top {border-bottom: 1px solid #ebeef5;height:50px;line-height: 50px;}
.adminui-side-top h2 {padding:0 20px;font-size: 17px;color: #3c4a54;}
.adminui-side-scroll {position: absolute;top:50px;left:0px;bottom:0px;right:0px;overflow: auto;overflow-x:hidden;}
.adminui-side-scroll {overflow: auto;overflow-x:hidden;flex: 1;}
.aminui-body {position: absolute;z-index: 4;top:0px;left:275px;bottom:0px;right:0px;}
/* 右侧内容 */
.aminui-body {flex: 1;display: flex;flex-flow: column;}
.adminui-header {height: 50px;border-bottom: 1px solid #ebeef5;background: #fff;box-shadow: 0 1px 4px rgba(0,21,41,.08);display: flex;justify-content:space-between;}
.adminui-header .left-panel {display: flex;align-items: center;padding-left:20px;}
@ -67,4 +72,4 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
.adminui-tags li.active {background: #09f;}
.adminui-tags li.active a {color: #fff;}
.adminui-main {position: absolute;top:85px;left:0px;right:0px;bottom:0px;overflow: auto;background-color: #f6f8f9;}
.adminui-main {overflow: auto;background-color: #f6f8f9;flex: 1;}

View File

@ -13,5 +13,5 @@
</script>
<style scoped>
iframe {border:0;position: absolute;top:0px;left:0px;right:0px;bottom:0px;width:100%;height:100%;}
iframe {border:0;width:100%;height:100%;display: block;}
</style>

View File

@ -18,7 +18,7 @@
<el-col :xl="6" :lg="8" :md="8" :sm="12" :xs="24" v-for="item in list" :key="item.title">
<el-card shadow="hover" :body-style="{ padding: '0px' }">
<el-image :src="item.image" fit="cover"></el-image>
<el-image :src="item.image" fit="cover" :preview-src-list="[item.image]"></el-image>
<div class="title">
<h2>{{item.title}}</h2>
<p>