fix:代码优化

components/home/schoolRanking.vue

@@ -11,11 +11,11 @@
           <div class="li-tit" v-html="$t('home.ranking.item1Tit')"></div>
           <div class="li-tit1" v-html="$t('home.ranking.item1Tit1')"></div>
           <div class="item">
-            <div class="tit"><span class="no">No.</span><span class="num">1</span></div>
+            <div class="tit"><span class="no">2021.No.</span><span class="num">1</span></div>
             <div class="p" v-html="$t('home.ranking.item1Txt1')"></div>
           </div>
           <div class="item">
-            <div class="tit"><span class="no">No.</span><span class="num">8</span></div>
+            <div class="tit"><span class="no">2021.No.</span><span class="num">8</span></div>
             <div class="p" v-html="$t('home.ranking.item1Txt2')"></div>
           </div>
         </div>
@@ -30,11 +30,11 @@
           <div class="li-tit1" v-html="$t('home.ranking.item3Tit1')"></div>
 
           
-          <div class="item">
+          <div class="item item_two">
             <div class="tit"><span class="no">2021.No.</span><span class="num">1</span></div>
             <div class="p" v-html="$t('home.ranking.item3Txt1')"></div>
           </div>
-          <div class="item">
+          <div class="item item_last">
             <div class="tit"><span class="no">2021.No.</span><span class="num">7</span></div>
             <div class="p" v-html="$t('home.ranking.item3Txt2')"></div>
           </div>
@@ -170,48 +170,62 @@ export default {
       }
     }
     .content-mian {
-      // width: 1000px;
-      margin: 0 auto;
+      // margin: 0 auto;
       display: flex;
       justify-content: space-between;
       .li_center {
         align-self: center;
+        text-align: center;
       }
       .li {
-        // width: 1.05rem;
-        margin: auto;
-        &.mar-t {
-          // transform: translateY(-0.15rem);
-          .li-tit {
-            line-height: 0.15rem;
-            transform: translateY(0.1rem);
-          }
-        }
+        width: 2.5rem;
         .li-tit {
           text-align: center;
-          font-size: 0.13rem;
-          line-height: 100%;
+          font-size: .14rem;
+          line-height: .12rem;
           color: #fff;
+          font-weight: 400;
+        }
+        .li-tit1{
+        font-size: .12rem;
+        font-weight: 300;
+        line-height: .12rem;
+        color: #FFFFFF;
+        margin-top: .05rem;
+        text-align: center;
+        }
+        .li-tit2{
+        font-size: .12rem;
+        font-weight: 500;
+        line-height: .24rem;
+        color: #FFFFFF;
+        opacity: 1;
         }
         .item {
           .tit {
-            padding-top: 0.15rem;
-            font-size: 0.24rem;
-            color: #ffffff;
+            padding-top: 12px;
+            color: #FBFBFB;
             text-align: center;
-            margin-bottom: 0.03rem;
-            line-height: 100%;
-            span {
-              font-size: 0.12rem;
+            margin-bottom: 16px;
+            line-height: 20px;
+            .no {
+              font-size: 12px;
+            }
+            .num{
+              font-size: 18px;
             }
           }
           .p {
-            font-size: 0.1rem;
-            line-height: 0.16rem;
-            margin-bottom: 0.05rem;
-            color: #ffffff;
             text-align: center;
+            font-size: 12px;
+            color: #ffffff;
+          }
+        }
+        .item_last{
+          margin-top: .15rem;
         }
+        .item_two{
+          margin-top: .10rem;
         }
       }
     }