fix: 图片替换

src/views/Home/AboutPage.vue

@@ -167,11 +167,11 @@ export default {
   min-height: 45vw;
   min-height: 45vw;
   max-height: 45vw;
   max-height: 45vw;
   position: relative;
   position: relative;
-  background-color: #222222;
+  background-color: #00090a;
   background-image: url(~@/assets/about/01.jpg);
   background-image: url(~@/assets/about/01.jpg);
   background-repeat: no-repeat;
   background-repeat: no-repeat;
-  background-size: 100% auto;
-  background-position: center bottom;
+  background-size: contain;
+  background-position: right bottom;
   padding: 0 5%;
   padding: 0 5%;
 }
 }
 
 

src/views/Home/IndexPage.vue

@@ -3,9 +3,14 @@
     <div class="slides">
     <div class="slides">
       <Swiper ref="swiper" :options="swiperOptions">
       <Swiper ref="swiper" :options="swiperOptions">
         <SwiperSlide v-for="(s, i) in slides" :key="i">
         <SwiperSlide v-for="(s, i) in slides" :key="i">
-          <router-link class="slide-item" :to="s.route">
+          <component
+            :is="s.route ? 'router-link' : 'div'"
+            class="slide-item"
+            :title="s.title"
+            :to="s.route"
+          >
             <img class="slide-item-img" :src="s.img" :alt="s.title" />
             <img class="slide-item-img" :src="s.img" :alt="s.title" />
-          </router-link>
+          </component>
         </SwiperSlide>
         </SwiperSlide>
       </Swiper>
       </Swiper>
       <div class="slides-switchers">
       <div class="slides-switchers">
@@ -58,6 +63,15 @@
     <div class="image-wrapper-1"></div>
     <div class="image-wrapper-1"></div>
     <div class="image-wrapper-2"></div>
     <div class="image-wrapper-2"></div>
 
 
+    <div class="business-prospect">
+      <div class="business-prospect-content">
+        <h3 class="business-prospect-title underline-title">行业前景</h3>
+        <div class="business-prospect-text">
+          互联网行业席卷全球，带来新的产业革命。我们从事的跨境电商行业着眼全球市场，比纯粹的国内电商更有格局、更有潜力。也许你还在为错过国内电商黄金时代而后悔不迭，但我们希望多年后你不要再为错过跨境电商时代而捶胸顿足！每个时代都有自己的机会，而跨境电商就是全球电商行业未来的方向。时代赐予我们机会，行业赋予我们力量！只要你有梦想，晶闪就是你的平台！让我们共同成长见证未来!
+        </div>
+      </div>
+    </div>
+
     <!-- <div class="news-report">
     <!-- <div class="news-report">
       <h2 class="underline-title news-report-title">新闻报道</h2>
       <h2 class="underline-title news-report-title">新闻报道</h2>
       <div class="news-wrapper">
       <div class="news-wrapper">
@@ -90,8 +104,6 @@ import 'swiper/css/swiper.css'
 
 
 import ImgSlide1 from '@/assets/index/slide-1.jpg'
 import ImgSlide1 from '@/assets/index/slide-1.jpg'
 import ImgSlide2 from '@/assets/index/slide-2.jpg'
 import ImgSlide2 from '@/assets/index/slide-2.jpg'
-import ImgSlide3 from '@/assets/index/slide-3.jpg'
-import ImgSlide4 from '@/assets/index/slide-4.jpg'
 
 
 import ImgNews1 from '@/assets/index/news-1.png'
 import ImgNews1 from '@/assets/index/news-1.png'
 import ImgNews2 from '@/assets/index/news-2.jpg'
 import ImgNews2 from '@/assets/index/news-2.jpg'
@@ -104,10 +116,12 @@ export default {
       swiperOptions: {},
       swiperOptions: {},
 
 
       slides: [
       slides: [
-        { img: ImgSlide1, title: '111', route: '/about' },
-        { img: ImgSlide2, title: '222', route: '/join-us' },
-        { img: ImgSlide3, title: '333', route: '/' },
-        { img: ImgSlide4, title: '444', route: '/' },
+        { img: ImgSlide1, title: '关于晶闪', route: '/about' },
+        {
+          img: ImgSlide2,
+          title: '加入我们，点击图片查看岗位',
+          route: '/join-us',
+        },
       ],
       ],
 
 
       news: [
       news: [
@@ -278,6 +292,27 @@ export default {
   font-size: 16px;
   font-size: 16px;
 }
 }
 
 
+.business-prospect {
+  background-image: url(~@/assets/index/business-prospect.jpg);
+  background-size: cover;
+  color: #fff;
+}
+
+.business-prospect-content {
+  padding: 40px 10%;
+}
+
+.business-prospect-title {
+  margin: 0;
+  margin-bottom: 40px;
+  font-size: 36px;
+}
+
+.business-prospect-text {
+  line-height: 30px;
+  width: 400px;
+}
+
 .news-report {
 .news-report {
   background-image: url(~@/assets/index/news-bg.jpg);
   background-image: url(~@/assets/index/news-bg.jpg);
   color: #fff;
   color: #fff;
@@ -408,6 +443,16 @@ export default {
   .news-summary::before {
   .news-summary::before {
     display: none;
     display: none;
   }
   }
+
+  .business-prospect-content {
+    padding: 20px 10%;
+  }
+
+  .business-prospect-text {
+    width: unset;
+    font-size: 14px;
+    line-height: 24px;
+  }
 }
 }
 
 
 @media screen and (max-width: 1400px) {
 @media screen and (max-width: 1400px) {