28

src/views/traffic/components/box-2.vue

@@ -11,8 +11,14 @@
         {{ item.name }}
       </li>
     </ul>
-
-    <div id="traffic-map" class="traffic-map-big" :class="{ 'traffic-map': routers.length > 0 }" />
+	<div>
+		<div class="title-1">
+		  <div class="title">
+		    <span> 核心路段展 </span>
+		  </div>
+		</div>
+		<div id="traffic-map" class="traffic-map-big" :class="{ 'traffic-map': routers.length > 0 }" />
+	</div>
 
     <div v-if="routers.length > 0" class="list">
       <div class="item" v-for="(item, index) in routers" :key="index" @click="handleRouter(item)">
@@ -225,6 +231,30 @@
 </script>
 
 <style lang="scss" scoped>
+	.title-1 {
+	  position: relative;
+	  margin-bottom:vh(20);
+	  .title {
+	    margin: vh(10) auto;
+		margin-top:0;
+	    width: vw(1500);
+	    height: vh(32);
+	    display: flex;
+	    align-items: center;
+	    justify-content: center;
+	    background-image: url('@/assets/images/title-4.png');
+	    background-size: 100% 100%;
+	    & > span {
+	      font-weight: 800;
+	      font-size: vw(24);
+	      background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
+	      -webkit-background-clip: text;
+	      background-clip: text;
+	      -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
+	      color: transparent; /* 兼容其他浏览器 */
+	    }
+	  }
+	}
   .box-2 {
     margin-top: vh(120);
     display: flex;
@@ -265,7 +295,7 @@
     position: relative;
     z-index: 9;
     width: vw(2116);
-    height: vh(955);
+    height: vh(890);
     margin-left: vw(8);
     box-sizing: border-box;
     background-image: url('/src/assets/images/map-bg-2.png');