修改学车必看和考前须知样式

src/views/marked/index.vue

@@ -1,15 +1,15 @@
 <template>
   <m-nav-bar class="navbar" v-if="navbar" />
-  <div v-for="oneLevel in jsonData" class="flex-box">
+  <div v-for="(oneLevel, index0) in jsonData" :key="index0" class="flex-box">
     <div class="one-level-title">
-      <m-icon type="biaotizhuangshi3" />
+      <m-icon  color="#07c160" type="biaotizhuangshi3" />
       {{ oneLevel.title }}
       <m-icon class="icon-right" type="biaotizhuangshi3" />
     </div>
     <div v-if="oneLevel.explain" class="one-level-explain box-set">
       {{ oneLevel.explain }}
     </div>
-    <div class="two-flex-box" v-for="twoLevel in oneLevel.twoLevel">
+    <div class="two-flex-box" :key="index1" v-for="(twoLevel, index1) in oneLevel.twoLevel">
       <div class="two-level-title">
         <m-icon type="biaotizhuangshi1" />
         {{ twoLevel.title }}
@@ -18,16 +18,9 @@
       <div v-if="twoLevel.explain" class="box-set">
         {{ twoLevel.explain }}
       </div>
-      <div
-        class="box-set three-level-explain"
-        v-for="threeLevel in twoLevel.threeLevel"
-      >
+      <div :key="index2" class="box-set three-level-explain" v-for="(threeLevel, index2) in twoLevel.threeLevel">
         <div class="three-level-title">{{ threeLevel.title }}</div>
-        <div
-          class="four-level-explain"
-          v-for="(item, index) in threeLevel.list"
-          :key="item"
-        >
+        <div class="four-level-explain" v-for="(item, index) in threeLevel.list" :key="item">
           <span class="four-level-title">{{ Number(index) + 1 }}</span>
           <div>
             {{ item }}
@@ -62,6 +55,7 @@ axios({
   background-color: #ffffff;
   z-index: 10;
 }
+
 .flex-box {
   display: flex;
   flex-direction: column;
@@ -69,6 +63,7 @@ axios({
   font-size: 17px;
   font-family: PingFang SC;
   padding: 40px 0 20px;
+
   .box-set {
     width: 336px;
     border: 1px solid #498ef5;
@@ -83,20 +78,24 @@ axios({
     position: relative;
     margin-top: 40px;
   }
+
   .icon-right {
     transform: rotate(180deg);
   }
+
   .two-flex-box {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: 30px;
   }
+
   .one-level-title {
     font-size: 28px;
     font-weight: bold;
     color: #000000;
     position: relative;
+
     &::after {
       content: "";
       width: 100%;
@@ -109,16 +108,19 @@ axios({
       transform: translateY(100%);
     }
   }
-  .one-level-explain {
-  }
+
+  .one-level-explain {}
+
   .three-level-explain {
     padding-top: 30px;
   }
+
   .two-level-title {
     font-size: 24px;
     font-weight: bold;
     color: #0a1a33;
   }
+
   .three-level-title {
     display: flex;
     justify-content: center;
@@ -136,6 +138,7 @@ axios({
     top: 0;
     transform: translateY(-50%);
   }
+
   .four-level-title {
     width: 18px;
     height: 18px;
@@ -151,9 +154,9 @@ axios({
     font-weight: 400;
     color: #fefeff;
   }
+
   .four-level-explain {
     display: flex;
     margin-bottom: 5px;
   }
-}
-</style>
+}</style>