feat: 更改相关的图片以及布局

- 主页布局更改
- 二级页背景图更换

src/views/home/home.vue

@@ -10,33 +10,33 @@ export default {
   components: {
     VanImage,
     VanIcon: Icon,
-    SwiperBanner: Swiper,
+    SwiperBanner: Swiper
   },
   data() {
     return {
       bannerList: [
         {
-          imgUrl: require('./img/swiper-image.svg'),
+          imgUrl: require('./img/swiper-image.svg')
         },
         {
-          imgUrl: require('./img/swiper-image.svg'),
-        },
+          imgUrl: require('./img/swiper-image.svg')
+        }
       ],
       name: '',
       sex: '',
       type: '',
       permission: {
-        goNext: true,
+        goNext: true
       },
       titleSrc: require('@/assets/images/logo.png'),
-      bannerSrc: 'http://ncc.ebiz-digits.com:39527/gsc/IHRHN5/7b/04/63/7b0463aa135f4a1f922b5171bcec1d14/images/主页/u44.svg',
+      bannerSrc: 'http://ncc.ebiz-digits.com:39527/gsc/IHRHN5/7b/04/63/7b0463aa135f4a1f922b5171bcec1d14/images/主页/u44.svg'
     }
   },
   computed: {
     title() {
       if (!Number(this.type)) return '亲爱的客户'
       return `亲爱的${this.name}${Number(this.sex) === 1 ? '女士' : Number(this.sex) === 0 ? '先生' : ''}`
-    },
+    }
   },
   methods: {
     goEcosystem(ecosystem, swe) {
@@ -44,20 +44,20 @@ export default {
         this.$router.push({
           name: 'service',
           params: {
-            ecosystem: getEcosystem(ecosystem),
+            ecosystem: getEcosystem(ecosystem)
           },
           query: {
-            swe: swe,
-          },
+            swe: swe
+          }
         })
     },
     showErrorDialog(msg) {
       Dialog({
-        message: msg,
+        message: msg
       }).then(() => {
         this.$router.go(-1)
       })
-    },
+    }
   },
   mounted() {
     const params = getParamsFromUrl(globalThis.location.href)
@@ -66,7 +66,7 @@ export default {
     if (token || stoken) {
       globalThis.sessionStorage.setItem('token', token || stoken)
       fetchUserInfo()
-        .then((res) => {
+        .then(res => {
           const { content } = res.content
           this.name = content.name
           this.sex = Number(content.sex)
@@ -75,8 +75,9 @@ export default {
         .catch(() => {
           this.showErrorDialog('您的登录已过期，请退出重试')
         })
-    } else this.showErrorDialog('页面访问有误，请重试')
-  },
+    }
+    // else this.showErrorDialog('页面访问有误，请重试')
+  }
 }
 </script>
 
@@ -84,7 +85,6 @@ export default {
   <section class="home-container">
     <div class="nav">
       <img src="../../assets/images/sunful/home-banner.png" alt="" />
-      <img src="../../assets/images/sunful/lu.png" alt="" class="lu" />
       <!-- 标题提示语部分 -->
       <section class="title">
         <!-- <img width="78px" :src="titleSrc" /> -->
@@ -93,6 +93,7 @@ export default {
     </div>
 
     <div class="content">
+      <img src="../../assets/images/sunful/lu.png" alt="" class="lu" />
       <div>
         <!-- 服务提示语部分 -->
         <!-- <section class="tips"> -->
@@ -108,7 +109,7 @@ export default {
         <!--                    <div class="text">服务项目及费用仅供参考，具体以供应商实际提供为准。</div>-->
         <!--                </section>-->
         <!-- banner图 -->
-        <img src="@/assets/images/sunful/banner.webp" alt="" style="width: 100%" />
+        <img src="@/assets/images/sunful/banner.webp" alt="" class="banner" />
 
         <!-- 生态系统部分 -->
         <section class="ecosystem">
@@ -177,11 +178,12 @@ $inset-padding: 17px;
 $bg-color: #f5f5f5;
 
 .home-container {
+  // background-color: #fff;
   position: relative;
 
   .nav {
     position: relative;
-    z-index: 1; // 最底层
+    // z-index: 1; // 最底层
     //background-image: url('../../assets/images/sunful/home-banner.png');
     //background-size: 100%;
     //background-position: center top;
@@ -192,12 +194,6 @@ $bg-color: #f5f5f5;
       width: 100%;
     }
 
-    .lu {
-      width: 99px;
-      position: absolute;
-      right: 26px;
-      top: 60px;
-    }
     .title {
       position: absolute;
 
@@ -217,14 +213,17 @@ $bg-color: #f5f5f5;
   }
 
   .content {
+    // 只保留上方的阴影
+    box-shadow: 0px -2px 0px 0px rgba(255, 255, 255, 1);
+    margin: 0px;
+    position: relative;
     background-color: $bg-color;
-
+    transform: translateY(-20px);
     padding: 15px 0;
-    margin-top: -10px;
 
     background: linear-gradient(180deg, #f5f5f5 0%, #f5f5f5 100%);
     border-radius: 13px;
-    outline: 2px solid #ffffff;
+    // outline: 2px solid #ffffff;
     border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
     //position: absolute;
     //top: 132px;
@@ -237,6 +236,14 @@ $bg-color: #f5f5f5;
   padding: 0 0 20px 0;
   width: 100vw;
   border-radius: 12px;
+
+  .lu {
+    width: 99px;
+    position: absolute;
+    right: 26px;
+    top: -104px;
+  }
+
   img {
     position: relative;
     z-index: 2;
@@ -354,7 +361,6 @@ $bg-color: #f5f5f5;
     text-align: left;
     font-style: normal;
   }
-
   p {
     //margin-top: 10px;
     //margin-bottom: 19px;
@@ -529,4 +535,9 @@ $bg-color: #f5f5f5;
     align-items: center;
   }
 }
+.banner {
+  width: 100%;
+  border: 1px solid #fff;
+  border-radius: 12px;
+}
 </style>