chore: update

src/modules/home/components/Brand.vue

@@ -2,7 +2,11 @@
 
 <template>
   <section class="section">
-    <div class="section-title"><h2>合作机构</h2></div>
+    <div class="section-title">
+      <em class="section-title_dot"></em>
+      <h2>合作机构</h2>
+      <em class="section-title_dot"></em>
+    </div>
   </section>
 </template>
 

src/modules/home/components/Course.vue

@@ -2,7 +2,11 @@
 
 <template>
   <section class="section">
-    <div class="section-title"><h2>定制专属类课程</h2></div>
+    <div class="section-title">
+      <em class="section-title_dot"></em>
+      <h2>定制专属类课程</h2>
+      <em class="section-title_dot"></em>
+    </div>
   </section>
 </template>
 

src/modules/home/components/Teacher.vue

@@ -2,7 +2,11 @@
 
 <template>
   <section class="section" id="teacher">
-    <div class="section-title"><h2>师资团队</h2></div>
+    <div class="section-title">
+      <em class="section-title_dot"></em>
+      <h2>师资团队</h2>
+      <em class="section-title_dot"></em>
+    </div>
   </section>
 </template>
 
@@ -14,5 +18,6 @@
   margin-top: 80px;
   --section-title-color: #fff;
   --section-title-dot-bgcolor: #fff;
+  --section-title-dot-border-color: #fff;
 }
 </style>

src/modules/home/style.scss

+.section {
+  --section-title-color: #333;
+  --section-title-dot-bgcolor: #aa1941;
+  --section-title-dot-border-color: #c1ab85;
+}
+.section-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30px 0;
+  h2 {
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 1;
+    color: var(--section-title-color);
+  }
+  .section-title_dot {
+    position: relative;
+    width: 16px;
+    height: 16px;
+    margin: 0 12px;
+    border: 1px dashed var(--section-title-dot-border-color);
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: '';
+      width: 6px;
+      height: 6px;
+      background-color: var(--section-title-dot-bgcolor);
+    }
+  }
+}

src/modules/home/views/Index.vue

@@ -13,40 +13,5 @@ import Brand from '../components/Brand.vue'
 </template>
 
 <style lang="scss">
-.section {
-  --section-title-color: #333;
-  --section-title-dot-bgcolor: #aa1941;
-}
-.section-title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 30px 0;
-  h2 {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 32px;
-    font-weight: 500;
-    line-height: 1;
-    color: var(--section-title-color);
-    &::after {
-      display: inline-block;
-      content: '';
-      width: 6px;
-      height: 6px;
-      margin: 0 12px;
-      background-color: var(--section-title-dot-bgcolor);
-    }
-    &::before {
-      display: inline-block;
-      content: '';
-      width: 6px;
-      height: 6px;
-      margin: 0 12px;
-      background-color: var(--section-title-dot-bgcolor);
-    }
-  }
-}
+@import '../style.scss';
 </style>