headline

src/components/HeadLine.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="headline_container">
-    <h2 class="title_h2">{{ title }}</h2>
+    <h2 class="title_h2">
+      <span class="theme">{{ themeTitle }}</span
+      >{{ title }}
+    </h2>
     <p class="line1" v-if="line1">{{ line1 }}</p>
     <p class="line2" v-if="line2">{{ line2 }}</p>
   </div>
@@ -8,6 +11,10 @@
 
 <script setup>
 const props = defineProps({
+  themeTitle: {
+    type: String,
+    default: '',
+  },
   title: {
     type: String,
   },
@@ -25,16 +32,23 @@ const props = defineProps({
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding: 36px 0;
+  box-sizing: border-box;
   .title_h2 {
-    font-size: 13px;
-    font-family: Alibaba PuHuiTi;
+    font-size: 11px;
+    font-family: Source Han Sans CN;
     font-weight: 500;
-    color: #000000;
-    margin-bottom: 9px;
+    color: #191919;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+  }
+  .theme {
+    color: #f94622;
   }
   .line1 {
     font-size: 7px;
-    font-family: Alibaba PuHuiTi;
+    font-family: Source Han Sans CN;
     font-weight: 300;
     color: #595959;
     line-height: 16px;