123

src/api/home/diy.ts

@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+//当前客户下的站点地址
+export function getPlatformIndexDiyPcPage(query: any) {
+  return request({
+    url: '/mall/indexDiyPcPage/getPlatformIndexDiyPcPage',
+    method: 'get',
+    params: query
+  });
+}

src/views/home/index-mro.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="home-pages">
     <div class="head-pages">
+      <div class="bg-img">
+        <img :src="carouselList.length && carouselList[carouselIndex].imageUrl" alt="" />
+      </div>
       <!--  头部 -->
       <div class="home-head" @mouseleave="leaveClassify">
         <!-- 分类 -->
@@ -35,7 +38,7 @@
         </div>
         <!-- 轮播区域 -->
         <div class="carousel-bos">
-          <el-carousel trigger="click" height="540px">
+          <el-carousel trigger="click" height="540px" @change="onCarousel">
             <el-carousel-item v-for="item in carouselList" :key="item">
               <img :src="item.imageUrl" alt="" />
             </el-carousel-item>
@@ -200,6 +203,7 @@ const classifyShow = ref<any>(false);
 const classifyInfo = ref<any>([]);
 const classifyList = ref<any>([]);
 const carouselList = ref<any>([]);
+const carouselIndex = ref<any>(0);
 const realList = ref<any>([]);
 const interestsList = ref<any>([]);
 const sellList = ref<any>([]);
@@ -244,6 +248,7 @@ getProductCategoryTree({
 getHomeAdList({}).then((res) => {
   if (res.code == 200) {
     carouselList.value = res.data;
+    carouselIndex.value = 0;
   }
 });
 
@@ -322,6 +327,10 @@ const onNav = (item: any) => {
     }
   });
 };
+
+const onCarousel = (res: any) => {
+  carouselIndex.value = res;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -329,9 +338,32 @@ const onNav = (item: any) => {
   width: 100%;
   .head-pages {
     width: 100%;
-    background: #000000;
+    // background: #000000;
     margin-top: 10px;
 
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: relative;
+    backdrop-filter: blur(95px);
+    filter: blur(30rpx);
+
+    .bg-img {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      z-index: -1;
+      filter: blur(30rpx);
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        height: 100%;
+        transform: scale(1.2);
+        filter: blur(30px);
+      }
+    }
+
     // 头部
     .home-head {
       width: 1200px;

src/views/home/index.vue

@@ -326,6 +326,7 @@ import profile from '@/assets/images/profile.jpg';
 import { onPath } from '@/utils/siteConfig';
 import { getToken } from '@/utils/auth';
 import { getInfo } from '@/api/login';
+import { getPlatformIndexDiyPcPage } from '@/api/home/diy';
 import {
   getProductCategoryTree,
   getHomeAdList,
@@ -377,6 +378,11 @@ const bigbrandOne = ref<any>({});
 const homeList = ref<any>([]);
 const router = useRouter();
 
+getPlatformIndexDiyPcPage({}).then((res) => {
+  if (res.code == 200) {
+  }
+});
+
 onMounted(() => {
   if (getToken()) {
     getInfo().then((res) => {