clunt
/
RuoYi-Cloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页布局样式修改

This commit is contained in:
小哥 2022-10-25 11:29:17 +08:00
parent 72c89c716d
commit b6e3a1c49e
6 changed files with 218 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ruoyi-ui/src/assets/styles/index.scss
View File

@ -121,7 +121,7 @@ aside {
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
padding: 20px; //padding: 20px;
} }
.components-container { .components-container {

9
ruoyi-ui/src/components/PageTabs.vue
View File

@ -81,13 +81,14 @@ export default {
display: flex; display: flex;
position: relative; position: relative;
padding-left: 0px; padding-left: 0px;
margin-top: 0px;
} }
.tabs-li { .tabs-li {
width: 100px; width: 100px;
height: 40px; height: 40px;
margin: 0 5px; margin-right: 10px;
border-radius: 5px; border-radius: 6px;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
line-height: 38px; line-height: 38px;
@ -106,11 +107,13 @@ export default {
} }
.tabs-li.active { .tabs-li.active {
height: 43px;
line-height: 43px;
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
border-width: 1px 1px 0; border-width: 1px 1px 0;
background-color: #006CE1; background-color: #006CE1;
position: relative; position: relative;
bottom: 4px bottom: 4px;
} }
.tabs-li::marker { .tabs-li::marker {

2
ruoyi-ui/src/components/RightFence.vue
View File

@ -21,7 +21,7 @@ export default {
.right-fence-box { .right-fence-box {
// width: 423px; // width: 423px;
width: 25.5%; width: 25.5%;
min-height: calc(100% - 104px); min-height: calc(100% - 100px);
border-radius: 6px; border-radius: 6px;
box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
border-radius: 6px; border-radius: 6px;

1
ruoyi-ui/src/layout/components/AppMain.vue
View File

@ -38,6 +38,7 @@ export default {
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
position: relative; position: relative;
padding: 24px;
} }
.left-main{ .left-main{
width: calc(75% - 40px); width: calc(75% - 40px);

2
ruoyi-ui/src/layout/index.vue
View File

@ -89,7 +89,7 @@ export default {
.app-wrapper { .app-wrapper {
@include clearfix; @include clearfix;
position: relative; position: relative;
height: calc(100% - 0px); height: 100%;
width: 100%; width: 100%;
overflow-y: hidden; overflow-y: hidden;

19
ruoyi-ui/src/views/index.vue
View File

@ -4,9 +4,18 @@
class="alive-tabs" class="alive-tabs"
:tabdate="tabdate"> :tabdate="tabdate">
</PageTabs> </PageTabs>
<div style="width: 100%;height: calc(100vh - 500px);background-color: #ffffff;margin-left: 5px;box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.1);border-radius: 6px;"> <div class="tabs-content">
<el-row>
<el-col :span="5">
<div style="background-color: #00afff;height: 90%">
</div> </div>
</el-col>
<el-col :span="19">
</el-col>
</el-row>
</div>
</div> </div>
</template> </template>
@ -77,5 +86,13 @@ export default {
width: 100%; width: 100%;
height: calc(100% - 0.3rem); height: calc(100% - 0.3rem);
} }
.tabs-content{
width: 100%;
height: calc(100vh - 219px);
background-color: #ffffff;
box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.1);
border-radius: 6px;
padding: 24px;
}
</style> </style>