Skip to content

W
wangxiaolu-sfa-ui
提交 c89c2e22 authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

style(commonmenu): 样式：调整首页常用菜单样式，超出范围垂直滚动

上级 cef7f318
隐藏空白字符变更
内嵌 并排
正在显示 包含 156 行增加 和 143 行删除
src/assets/styles/index.scss
浏览文件 @ c89c2e22
...@@ -125,24 +125,21 @@ aside { ...@@ -125,24 +125,21 @@ aside {
// 全局样式 // 全局样式
// 容器 // 容器
.app-container { .app-container {
flex: 1; padding: 30px;
display: flex; height: 100%;
flex-direction: column;
align-items: center;
padding: 20px;
// 内容区域 // 内容区域
>.container { >.container {
width: 100%; width: 100%;
height: 100%;
background-color: var(--el-bg-color-overlay); background-color: var(--el-bg-color-overlay);
padding: 20px;
} }
} }
.components-container { // .components-container {
margin: 30px 50px; // margin: 30px 50px;
position: relative; // position: relative;
} // }
.pagination-container { .pagination-container {
margin-top: 30px; margin-top: 30px;
...@@ -197,9 +194,9 @@ aside { ...@@ -197,9 +194,9 @@ aside {
} }
// 分割线调整宽度线条 // 分割线调整宽度线条
.splitpanes--vertical > .splitpanes__splitter { .splitpanes--vertical>.splitpanes__splitter {
width: 2px; /* 调整粗细 */ width: 2px;
background: #ddd; /* 可选：修改颜色 */ /* 调整粗细 */
} background: #ddd;
/* 可选：修改颜色 */
}
\ No newline at end of file
src/components/CommonMenu/index.vue
浏览文件 @ c89c2e22
<template> <template>
<el-row :gutter="20"> <el-row>
<el-col :span="24"> <el-col>
<el-card shadow="never"> <el-card shadow="never">
<div slot="header" <div slot="header"
class="el-card__header"> class="el-card__header">
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
自定义 自定义
</el-button> </el-button>
</div> </div>
<!-- -->
<div class="el-card__body"> <div class="el-card__body">
<div v-for="o in commonMenuList" <div v-for="o in commonMenuList"
class="item"> class="item">
...@@ -34,7 +35,8 @@ ...@@ -34,7 +35,8 @@
</div> </div>
<el-dialog title="编辑常用菜单" <el-dialog title="编辑常用菜单"
v-model="visible" v-model="visible"
draggable overflow> draggable
overflow>
<el-transfer ref="myTransfer" <el-transfer ref="myTransfer"
v-model="selectList" v-model="selectList"
:data="menuList" :data="menuList"
...@@ -89,110 +91,128 @@ const rightChange = (val) => { ...@@ -89,110 +91,128 @@ const rightChange = (val) => {
<style scoped <style scoped
lang="scss"> lang="scss">
.el-card { .el-row {
margin-top: 20px; height: 100%;
width: 100%;
.el-card__header {
.custom {
float: right;
padding: 3px 0;
}
}
.el-card__body { .el-col {
padding-left: 15px !important; height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
.item {
display: inline-block;
/* margin: 0 20px 20px 0; */
}
}
.none { .el-card {
font-size: 14px; height: 100%;
a { .el-card__header {
color: #337ab7; .custom {
} float: right;
} padding: 3px 0;
} }
}
/* 内部有个额外的 div */
::v-deep(.el-card__body) {
max-height: 100%;
display: flex;
flex-direction: column;
}
/* 穿梭框样式重写 */ /* 当前页面的标签样式 */
::v-deep(.el-dialog__body) { .el-card__body {
display: flex; padding-left: 15px !important;
justify-content: center; display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
gap: 20px;
max-height: 100%;
overflow-y: auto;
.item {
display: inline-block;
/* margin: 0 20px 20px 0; */
}
}
.el-transfer { .none {
display: flex; font-size: 14px;
height: 100%;
gap: 50px;
width: 100%;
/* 隐藏中间按钮 */ a {
.el-transfer__buttons { color: #337ab7;
display: none; }
}
} }
.el-transfer-panel {
flex: 1;
display: flex;
flex-direction: column;
/* 隐藏头部列表数量统计 */ /* 穿梭框样式重写 */
.el-transfer-panel__header { ::v-deep(.el-dialog__body) {
display: none; display: flex;
} justify-content: center;
.el-transfer-panel__body { .el-transfer {
display: flex; display: flex;
flex-direction: column; height: 100%;
flex: 1; gap: 50px;
width: 100%;
/* 隐藏中间按钮 */
.el-transfer__buttons {
display: none;
}
.el-transfer-panel {
flex: 1;
display: flex;
flex-direction: column;
/* 隐藏头部列表数量统计 */
.el-transfer-panel__header {
display: none;
}
.el-transfer-panel__body {
display: flex;
flex-direction: column;
flex: 1;
}
}
.el-transfer-panel:nth-last-of-type(1) {
.el-checkbox__inner {
background-color: #409eff;
}
.el-checkbox__inner::after {
transform: rotate(45deg) scaleY(1);
height: 6px;
width: 3px;
left: 4px;
box-sizing: content-box;
content: "";
border: 1px solid #fff;
border-left: 0;
border-top: 0;
position: absolute;
top: 1px;
transition: transform .15s ease-in .05s;
transform-origin: center;
}
}
.el-transfer-panel {
width: 100%;
}
} }
} }
.el-transfer-panel:nth-last-of-type(1) { /* 小屏幕样式 */
.el-checkbox__inner { @media (max-width: 768px) {
background-color: #409eff; ::v-deep(.el-dialog) {
width: 100%;
} }
.el-checkbox__inner::after { ::v-deep(.el-transfer) {
transform: rotate(45deg) scaleY(1); flex-direction: column;
height: 6px;
width: 3px;
left: 4px;
box-sizing: content-box;
content: "";
border: 1px solid #fff;
border-left: 0;
border-top: 0;
position: absolute;
top: 1px;
transition: transform .15s ease-in .05s;
transform-origin: center;
} }
} }
.el-transfer-panel {
width: 100%;
}
} }
} }
/* 小屏幕样式 */
@media (max-width: 768px) {
::v-deep(.el-dialog) {
width: 100%;
}
::v-deep(.el-transfer) {
flex-direction: column;
}
}
</style> </style>
src/layout/components/AppMain.vue
浏览文件 @ c89c2e22
...@@ -39,12 +39,8 @@ function addIframe() { ...@@ -39,12 +39,8 @@ function addIframe() {
<style lang="scss" <style lang="scss"
scoped> scoped>
.app-main { .app-main {
/* 50= navbar 50 */
min-height: calc(100vh - 50px);
width: 100%; width: 100%;
background-color: var(--el-bg-color); background-color: var(--el-bg-color);
display: flex;
flex-direction: column;
} }
</style> </style>
......
src/layout/index.vue
浏览文件 @ c89c2e22
...@@ -106,22 +106,21 @@ function setLayout() { ...@@ -106,22 +106,21 @@ function setLayout() {
transition: width 0.28s; transition: width 0.28s;
} }
.app-main{
// 头部固定菜单高度 50px
height: calc(100vh - 50px);
}
// 开启头部固定以后，main的高度需要设置为100vh // 开启头部固定以后，main的高度需要设置为100vh
.fixed-header+.app-main { .fixed-header+.app-main {
min-height: 100vh; height: 100vh;
padding-top: 50px; padding-top: 50px;
} }
// 有头部标签导航时 // 有头部标签导航时
.hasTagsView { .hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
// min-height: calc(100vh - 84px);
min-height: 100vh;
}
.fixed-header+.app-main { .fixed-header+.app-main {
height: 100vh;
padding-top: 84px; padding-top: 84px;
} }
} }
...@@ -140,31 +139,31 @@ function setLayout() { ...@@ -140,31 +139,31 @@ function setLayout() {
} }
// 有些页面高度固定就是 100 vh - 头部高度作为可视区域 // // 有些页面高度固定就是 100 vh - 头部高度作为可视区域
// 例如：小 BI 分析中的商品管理页面，中间可用区域固定高度，不能撑开整个网页滚动 // // 例如：小 BI 分析中的商品管理页面，中间可用区域固定高度，不能撑开整个网页滚动
// 所以要动态计算高度 // // 所以要动态计算高度
::v-deep() { // ::v-deep() {
// 无头部固定，无头部 Tags-view // // 无头部固定，无头部 Tags-view
.client-fix-height { // .client-fix-height {
// 头部导航 50，上下内边距 20 // // 头部导航 50，上下内边距 20
height: calc(100vh - 50px - 40px); // height: calc(100vh - 50px - 40px);
} // }
// 头部固定时 // // 头部固定时
.fixed-header+.app-main { // .fixed-header+.app-main {
.client-fix-height { // .client-fix-height {
height: calc(100vh - 50px - 40px) !important; // height: calc(100vh - 50px - 40px) !important;
} // }
} // }
// 有头部标签时 // // 有头部标签时
.hasTagsView { // .hasTagsView {
.fixed-header+.app-main { // .fixed-header+.app-main {
.client-fix-height { // .client-fix-height {
height: calc(100vh - 50px - 34px - 40px) !important; // height: calc(100vh - 50px - 34px - 40px) !important;
} // }
} // }
} // }
} // }
</style> </style>
\ No newline at end of file
src/views/index.vue
浏览文件 @ c89c2e22
...@@ -72,7 +72,6 @@ const handleSetLineChartData = (type) => { ...@@ -72,7 +72,6 @@ const handleSetLineChartData = (type) => {
<style lang="scss" <style lang="scss"
scoped> scoped>
.app-container { .app-container {
padding: 20px;
>div { >div {
padding: 0; padding: 0;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论