css

src/pages/modules/home.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-row type="flex" class="navs_wraper" justify="center" align="middle">
-    <el-col :span="visibleNav.length === 4 ? 5 : 7" class="nav_item" v-for="(e, i) in visibleNav" :key="i" :class="'nav_item_' + (i + 1)">
+  <el-row type="flex" class="navs_wraper" justify="start" align="middle">
+    <el-col class="nav_item" v-for="(e, i) in visibleNav" :key="i" :class="'nav_item_' + (i + 1)">
       <div class="nav_item_i" @click="toPage(e)">
         <div class="nav_icon"></div>
         <p>{{ e[$langPre.computedProp('title')] }}</p>
@@ -59,21 +59,25 @@ export default {
 @import '../../style/mixin'
 .navs_wraper
   width 100%
-  padding 0 2%
+  padding 2% 2.5% 0 2.5%
   flex-wrap wrap
   align-content center
 .nav_item
-  height 90%
-  padding 1.5%
+  width 32%
+  height 47%
+  padding 0.9%
   color #fff
   font-size .2rem
-  margin .1rem 1%
   border 1px solid #2f9ae3
   background-image: linear-gradient(to bottom,transparent 11px,rgba(32, 74, 128, 90%) 1px),
                     linear-gradient(to right,transparent 11px,rgba(32, 74, 128, 90%) 1px);
   background-size: 12px 12px;
   background-repeat: repeat;
   cursor pointer
+  margin-bottom 2%
+  &:nth-child(3n+2)
+    margin-left 2%
+    margin-right 2%
 .nav_item_i
   _fj(center,,column)
   height 100%
@@ -94,7 +98,7 @@ export default {
   width 35%
   padding-top 35%
   border-radius 50%
-  margin-bottom 10%
+  margin-bottom 3%
 .nav_item_1
   .nav_icon
     background #217872 center center / 70% auto url(../../images/new/RF1.png) no-repeat
@@ -103,7 +107,7 @@ export default {
     background #80732F center center / 70% auto url(../../images/new/RF2.png) no-repeat
 .nav_item_3
   .nav_icon
-    background #217872 center center / 70% auto url(../../images/new/RF3.png) no-repeat
+    background #00a9ff center center / 70% auto url(../../images/new/RF3.png) no-repeat
 .nav_item_4
   .nav_icon
     background #80372D center center / 70% auto url(../../images/new/RF4.png) no-repeat