banner添加文字

src/components/index/custom-carousel.vue

@@ -15,7 +15,7 @@
                 <img @click="openDetail(item)"  :style="carouselImgstyle" :src="item.fileUrl" alt="">
             </div>
         </a-carousel>
-        
+        <div class="banner_title" v-show="imglist.length>0">{{bannerTitle}}</div>
     </div>
 </template>
 
@@ -44,10 +44,14 @@ const props = defineProps({
         type: Object,
         default: ()=>[]
     },
+    title: {
+        type: String,
+        default: ''
+    },
 });
 //监听浏览器宽度变化
 const screenWidth = ref(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)
-
+const bannerTitle = ref('')
 onMounted(()=>{
     console.log(props.CarouselHight,screenWidth.value);
     // if (props?.CarouselHight && props.CarouselHight != '') {
@@ -76,6 +80,14 @@ watch(()=>props.carouselList ,(val,oldval)=>{
     // immediate:true,
     deep:true
 })
+watch(()=>props.title ,(val,oldval)=>{
+    if (val) {
+        bannerTitle.value = val
+    }
+},{
+    immediate:true,
+    deep:true
+})
 
 async function openDetail (e){
     //回到顶部
@@ -109,6 +121,7 @@ async function openDetail (e){
     width: 100vw;
     max-width: 1920px;
     margin: 0 auto;
+    position: relative;
 }
 .left-arrow {
     left: 40px;
@@ -128,5 +141,15 @@ async function openDetail (e){
   background: #364d79;
   overflow: hidden;
 }
-
+.banner_title{
+    position: absolute;
+    z-index: 100;
+    top: 60px;
+    left: 100px;
+    color: #ffffff;
+    font-size: 30px;
+    font-weight: bold;
+    width: 1200px;
+    margin: 0 auto;
+}
 </style>

src/views/components/AboutUsComponent.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="indexCom">
          <!-- banner组件 -->
-        <CustomCarousel :CarouselHight="CarouselHight" :carouselList="carouselList" />
+        <CustomCarousel :title="title" :CarouselHight="CarouselHight" :carouselList="carouselList" />
          <!-- 主页内容 -->
         <AboutUsMain />
 </div>

src/views/components/CompanyNewsCom.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="indexCom">
          <!-- banner组件 -->
-         <CustomCarousel :CarouselHight="CarouselHight" :carouselList="carouselList" />
+         <CustomCarousel :title="title" :CarouselHight="CarouselHight" :carouselList="carouselList" />
          <!-- 主页内容 -->
          <component :is="currentview" :muenId="muenId"></component>
 </div>