首页布局样式修改

ruoyi-ui/src/assets/styles/index.scss

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

ruoyi-ui/src/components/PageTabs.vue

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

ruoyi-ui/src/components/RightFence.vue

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

ruoyi-ui/src/layout/components/AppMain.vue

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

ruoyi-ui/src/layout/index.vue

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

ruoyi-ui/src/views/index.vue

@@ -4,9 +4,18 @@
       class="alive-tabs"
       :tabdate="tabdate">
     </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>
+          </el-col>
+          <el-col :span="19">
+
+          </el-col>
+        </el-row>
+    </div>
   </div>
 </template>
 
@@ -77,5 +86,13 @@ export default {
   width: 100%;
   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>