首页小标题修改

src/components/screen-title-home/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <div style="height: 36px" class="screen-title-w">
+    <div class="box">
+      <div class="guang" v-if="ifTime">
+        <img
+          class="guang-img"
+          :src="require('@/assets/images/common/guang-zd.png')"
+        />
+      </div>
+      <div class="guang1" v-if="ifTime">
+        <img
+          class="guang-img1"
+          :src="require('@/assets/images/common/guang-zd.png')"
+        />
+      </div>
+    </div>
+    <div class="screen-title">
+      <div class="left">
+        <slot name="left"></slot>
+      </div>
+      <div class="right">
+        <slot name="right"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "screen-title",
+  // mounted() {
+  //   console.log("Math.random()", Math.random());
+  //   // JavaScript Math.random()
+  // },
+  data() {
+    return {
+      ifTime: false,
+    };
+  },
+  // created() {
+  // },
+  mounted() {
+    let times = (Math.random() * 2000).toFixed(0);
+    setTimeout(() => {
+      this.ifTime = true;
+    }, times);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@keyframes run {
+  0% {
+    left: 0%;
+  }
+  100% {
+    left: calc(100% + 536px);
+  }
+}
+@keyframes run1 {
+  0% {
+    left: calc(0% - 268px);
+  }
+  100% {
+    left: calc(100% + 268px);
+  }
+}
+.screen-title-w {
+  width: 100%;
+  height: 36px;
+  background-size: 100% 100%;
+  background: url("~@/assets/images/common/card_title_home.png") no-repeat;
+}
+.screen-title {
+  position: relative;
+  top: -36px;
+  width: 100%;
+  height: 36px;
+  background-position: 0 0;
+  @include flex();
+  align-items: center;
+  justify-content: space-between;
+  font-family: "zaozigongfang";
+  font-style: italic;
+  font-size: 16px;
+  // background-size: 100% 100%;
+  // background: url("~@/assets/images/common/card_title_red.png") no-repeat;
+  padding-right: 16px;
+  box-sizing: border-box;
+  .left {
+    margin-left: 44px;
+    height: 50px;
+    line-height: 64px;
+  }
+  .right {
+    font-style: normal;
+  }
+}
+.box {
+  position: relative;
+  height: 36px;
+  overflow: hidden;
+  .guang {
+    position: relative;
+    .guang-img {
+      width: 268px;
+      height: 26px;
+      animation: run 4s linear infinite;
+      position: relative;
+      top: -10px;
+    }
+  }
+  .guang1 {
+    position: relative;
+    .guang-img1 {
+      width: 268px;
+      height: 26px;
+      animation: run1 4s linear infinite;
+      position: relative;
+      bottom: 10px;
+    }
+  }
+}
+</style>
+
+<style scoped>
+/* .screen-title-right > span {
+  border: 1px solid #e7743b !important;
+  color: #fbe9c5 !important;
+} */
+</style>

src/views/next/screen-content-left/home-left/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div class="card h292">
-      <screen-title>
+      <screen-title-home>
         <div slot="left" class="screen-title-left">移风简介</div>
-      </screen-title>
+      </screen-title-home>
       <div class="card-item-yfjj">
         <!-- <transition name="slide-transform"> -->
         <!-- <section v-if="currentIndex == 0"> -->
@@ -26,9 +26,9 @@
       </div>
     </div>
     <div class="card h266" style="margin-top: 8px">
-      <screen-title>
+      <screen-title-home>
         <div slot="left" class="screen-title-left">红色移风</div>
-      </screen-title>
+      </screen-title-home>
       <div class="card-item-hsyf">
         <div class="item" v-for="(item, index) in list" :key="index">
           <div class="item-box">
@@ -45,9 +45,9 @@
       </div>
     </div>
     <div class="card h318 m-top12">
-      <screen-title>
+      <screen-title-home>
         <div slot="left" class="screen-title-left">种都移风</div>
-      </screen-title>
+      </screen-title-home>
       <div class="card-item-zdyf">
         <div style="height: 268px">
           <div class="horizontal-scroll-nr">

src/views/next/screen-content-right/home-right/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div class="card h292">
-      <screen-title>
+      <screen-title-home>
         <div slot="left" class="screen-title-left">和美移风</div>
-      </screen-title>
+      </screen-title-home>
       <div class="card-item-hmyf">
         <div class="top">
           <div class="item">
@@ -30,9 +30,9 @@
       </div>
     </div>
     <div class="card h232" style="margin-top: 8px">
-      <screen-title>
+      <screen-title-home>
         <div slot="left" class="screen-title-left">善治移风</div>
-      </screen-title>
+      </screen-title-home>
 
       <div class="card-item-zdbf">
         <div class="yygz">
@@ -54,9 +54,9 @@
       </div> -->
     </div>
     <div class="card h349 m-top12">
-      <screen-title>
+      <screen-title-home>
         <div slot="left" class="screen-title-left">文化移风</div>
-      </screen-title>
+      </screen-title-home>
       <el-carousel height="300px">
         <el-carousel-item
           v-for="(item, index) in cultureList"