4.1

src/components/Title2/index.vue

@@ -1,7 +1,15 @@
 <template>
-  <div class="title-2">
+  <div v-if="type==1" class="title-2">
     <span>{{ title }}</span>
   </div>
+  <div v-if="type==2" class="title-2">
+	  <div class="item active">
+		  <span >{{ title }}</span>
+	  </div>
+	  <div class="item">
+		  <span>直通车购票</span>
+	  </div>
+  </div>
 </template>
 
 <script setup>
@@ -9,7 +17,11 @@
     title: {
       type: String,
       default: ''
-    }
+    },
+	type: {
+		type: Number,
+		default:1
+	}
   })
 </script>
 
@@ -19,10 +31,14 @@
     height: vh(28);
     display: flex;
     align-items: center;
-    background-image: url('@/assets/images/title-5.png');
+    // background-image: url('@/assets/images/title-5.png');
     background-size: 100% 100%;
-    & > span {
-      padding-left: vw(22);
+	.item{
+		// margin-right: vw(22);
+		padding:vw(5) vw(10);
+		// border-bottom:1px solid #ccc;
+	}
+    &  span {
       font-weight: bold;
       font-size: vw(15);
       background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
@@ -31,5 +47,10 @@
       -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
       color: transparent; /* 兼容其他浏览器 */
     }
+	& .active{
+		background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
+		color:#fff;
+		border-bottom:none;
+	}
   }
 </style>