有点修改

src/components/m-icon/index.vue

@@ -2,20 +2,24 @@
   <svg
     class="icon"
     aria-hidden="true"
-    v-if="!isSvg"
+    v-if="isSvg"
     :style="`font-size:${size}`"
   >
-    <use :xlink:href="`#icon-${type}`"></use>
+    <use fill="#333" :xlink:href="`#icon-${type}`"></use>
   </svg>
   <!-- <span v-if="!isSvg" class="iconfont" :class="`icon-${type}`" style="fill:#ffffff"></span> -->
-  <img :src="`/svg/${type}.svg`" v-else />
+  <i :class="`icon-${type}`"  class="icon iconfont" :style="`font-size:${size};color:${color}`" v-else />
 </template>
 
 <script lang="ts" setup>
 import "./iconfont";
 const props = defineProps({
+  color:String,
   type: String,
-  isSvg: Boolean,
+  isSvg: {
+    type:String,
+    default:true
+  },
   size: String,
 });
 </script>

src/views/marked/index.vue

@@ -2,7 +2,7 @@
   <m-nav-bar class="navbar" v-if="navbar" />
   <div v-for="(oneLevel, index0) in jsonData" :key="index0" class="flex-box">
     <div class="one-level-title">
-      <m-icon  color="#07c160" type="biaotizhuangshi3" />
+      <m-icon  size="25px"  type="biaotizhuangshi3" />
       {{ oneLevel.title }}
       <m-icon class="icon-right" type="biaotizhuangshi3" />
     </div>
@@ -21,9 +21,13 @@
       <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">
-          <span class="four-level-title">{{ Number(index) + 1 }}</span>
+         
           <div>
-            {{ item }}
+            <span>
+              <span class="four-level-title">{{ Number(index) + 1 }}</span>
+            {{ item}}
+            </span>
+           
           </div>
         </div>
       </div>
@@ -113,6 +117,8 @@ axios({
 
   .three-level-explain {
     padding-top: 30px;
+    padding-left: 10px;
+    padding-right: 10px;
   }
 
   .two-level-title {
@@ -137,26 +143,29 @@ axios({
     left: 40px;
     top: 0;
     transform: translateY(-50%);
-  }
 
+  }
+  .four-level-explain {
+    display: flex;
+    margin-bottom: 5px;
+    
+  }
   .four-level-title {
-    width: 18px;
     height: 18px;
-    flex-shrink: 0;
-    margin-top: 3px;
-    margin-right: 5px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #498ef5;
+    width: 18px;
+    background: #498ef5;
+    text-align: center;
+    line-height: 18px;
     border-radius: 50%;
     font-size: 15px;
     font-weight: 400;
     color: #fefeff;
+    display: inline-block;
+    flex-shrink: 0;
+    justify-content: center;
+    margin-top: 2px;
+    
   }
 
-  .four-level-explain {
-    display: flex;
-    margin-bottom: 5px;
-  }
+
 }</style>