0829

montier/src/assets/css/index.css

@@ -2,6 +2,9 @@
 .line-height-2{
     line-height: 2;
 }
+.line-height-4{
+    line-height: 4;
+}
 
 /*字体大小*/
 .font-size-10{

montier/src/pages/AboutMessage.vue

@@ -62,7 +62,7 @@ onMounted(() => {
 
     .about {
         // height: 48.3rem;
-        height: 60vw;
+        height: 65rem;
         background: url("../assets/img/aboutus.jpg") no-repeat;
         background-size: cover;
         // background-position: center;
@@ -137,5 +137,12 @@ onMounted(() => {
 }
 
 
-@media screen and (width: 960px) {}
+@media screen and (max-width: 960px) {
+    .aboutmessage {
+        .about {
+            height: 50rem;
+            background: url("../assets/img/aboutus.jpg") no-repeat;
+        }
+    }
+}
 </style>

montier/src/pages/AllCases.vue

@@ -31,49 +31,49 @@ let caseList = Array<any>(
         title: 'Fairmont Empress Hotel',
         location: 'Victoria, Canada',
         units: '300+',
-        url: new URL("../assets/img/cases/01.jpg",import.meta.url).href
+        url: new URL("../assets/img/ProjectCase/01/1.jpg",import.meta.url).href
     },
     {
         title: 'Monsaraz Hilton',
         location: 'San Diego，USA',
         units: '200+',
-        url: new URL("../assets/img/cases/02.jpg",import.meta.url).href
+        url: new URL("../assets/img/ProjectCase/02/1.jpg",import.meta.url).href
     },
     {
         title: 'Canopy By Hilton San Francisco Soma Hotel',
         location: 'San Fransisco，USA',
         units: '200+',
-        url: new URL("../assets/img/cases/03.jpg",import.meta.url).href
+        url: new URL("../assets/img/ProjectCase/03/1.jpg",import.meta.url).href
     },
     {
         title: 'Lofts on Laurel',
         location: 'San Diego，USA',
         units: '20+',
-        url: new URL("../assets/img/cases/04.jpg",import.meta.url).href
+        url: new URL("../assets/img/ProjectCase/04/1.jpg",import.meta.url).href
     },
     {
         title: 'State&Oak Street',
         location: 'Carlsbad，CA，USA',
         units: '20+',
-        url: new URL("../assets/img/cases/05.jpg",import.meta.url).href
+        url: new URL("../assets/img/ProjectCase/05/1.jpg",import.meta.url).href
     },
     {
         title: '989 Johson Street',
         location: 'Victoria, Canada',
         units: '180+',
-        url: new URL("../assets/img/cases/06.jpg",import.meta.url).href
+        url: new URL("../assets/img/ProjectCase/06/1.jpg",import.meta.url).href
     },
     {
         title: 'Tarrace Lofts',
         location: 'Vista, California, USA',
         units: '20+',
-        url: new URL("../assets/img/cases/07.jpg",import.meta.url).href
+        url: new URL("../assets/img/ProjectCase/07/1.jpg",import.meta.url).href
     },
     {
         title: 'Ocean 17',
         location: 'Carlsbad，CA，USA',
         units: '17',
-        url: new URL("../assets/img/cases/08.jpg",import.meta.url).href
+        url: new URL("../assets/img/ProjectCase/08/1.jpg",import.meta.url).href
     },
 )
 

montier/src/pages/Allproduct.vue

@@ -7,6 +7,7 @@
                 <span class="imgtitle position-absolute color-fff">{{ item.name }}</span>
             </div>
         </div>
+        <div class="btn position-relative font-size-20" @click="goPage('/')">Back</div>
     </div>
 </template>
 
@@ -30,6 +31,21 @@ const goPage = (url: any) => {
 </script>
 
 <style scoped lang="less">
+.btn {
+    cursor: pointer;
+    left: 50%;
+    transform: translateX(-50%);
+    margin: 1rem 0 2rem;
+    float: left;
+    font-weight: bold;
+    padding: 1rem 2.5rem;
+    border: 1px solid #333;
+}
+
+.btn:hover {
+    color: #fa8106;
+    border: 1px solid #fa8106;
+}
 .allproduct {
     width: 100%;
     margin-top: 1rem;
@@ -42,11 +58,12 @@ const goPage = (url: any) => {
         flex-wrap: wrap;
 
         .product-img {
-            width: 23%;
-            height: 35vw;
+            cursor: pointer;
+            width: 22%;
+            height: 25rem;
             overflow: hidden;
-            margin-right: 2rem;
-            margin-bottom: 2rem;
+            margin-right: 3rem;
+            margin-bottom: 3rem;
 
             img {
                 width: 100%;
@@ -58,8 +75,10 @@ const goPage = (url: any) => {
                 width: 100%;
                 bottom: 0;
                 left: 0;
-                height: 5rem;
+                height: 4rem;
+                padding: 1rem;
                 background: rgba(0, 0, 0, 0.3);
+                box-sizing: border-box;
                 font-size: 26px;
                 display: flex;
                 align-items: center;

montier/src/pages/Casemessage.vue

@@ -27,14 +27,39 @@
                         </div>
                     </div>
                     <div class="casemessage-right" :class="mobileShow ? 'width-100' : 'width-70'">
-                        <img :src="casemessage.img[0].details" :alt="casemessage.img[0].name" class="width-100 imgcase" loading="lazy">
+                        <img :src="casemessage.img.details" :alt="casemessage.img.name" class="width-100 imgcase"
+                            loading="lazy">
                     </div>
                 </div>
             </div>
         </div>
         <div class="details">
             <h2><strong>DETAILS</strong></h2>
-            <img :src="casemessage.img[1].details" :alt="casemessage.img[1].name" class="img" :class="mobileShow ? 'width-70' : 'width-50'" loading="lazy">
+            <div class="details-pic" v-if="casemessage.img.children && casemessage.img.children.length > 0">
+                <div class="img" v-for="item, index in casemessage.img.children" :key="index">
+                    <img :src="item.details" :alt="item.name" loading="lazy">
+                </div>
+            </div>
+        </div>
+        <div class="other">
+            <h1 class="mb-2"><strong>Other Cases</strong></h1>
+            <swiper :modules="modules" :slides-per-view="slidesPerView" :loop="true" :space-between="50" navigation
+                :pagination="{ clickable: true }">
+                <!-- 项目案例 -->
+                <swiper-slide v-for="(item, index2) in bannerList" class="hover-scale cursor-pointer" :key="item.position">
+                    <div>
+                        <div class="case-img overflow-hidden position-relative"
+                            @click="goPage1(`/projectcase/${item.position}`, 'projectCases')">
+                            <img :src="item.detail" :alt="item.name" class="width-100 d-block position-relative imgcase1"
+                                loading="lazy" />
+                            <div class="position-absolute color-fff project-center-title">
+                                <span class="font-700 font-size-20">{{ item.name }}</span>
+                                <span class="font-700 font-size-20">{{ item.address }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </swiper-slide>
+            </swiper>
         </div>
         <div class="btn position-relative" :class="mobileShow ? 'font-size-16' : 'font-size-22'" @click="goPage">Back</div>
     </div>
@@ -42,9 +67,18 @@
 
 <script setup lang="ts">
 import router from '../router';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import { A11y, Navigation, Scrollbar } from "swiper";
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import { watch, reactive, ref, onMounted } from 'vue'
 
+let modules = [Navigation, Scrollbar, A11y];
+
 let casemessage = reactive<any>({})
+let slidesPerView = ref<number>(3)
 
 watch(() => router.currentRoute.value.params.name, (newValue: any) => {
     if (newValue == '0') {
@@ -56,10 +90,29 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             type: 'Hotel',
             solutions: 'Furniture,Fixtures＆Equipment, lights fixture',
             unites: '300+',
-            img: [
-                { details: new URL("../assets/img/cases/01.jpg", import.meta.url).href, name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel' },
-                { details: new URL("../assets/img/cases/001.jpg", import.meta.url).href, name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel' }
-            ]
+            img: {
+                details: new URL("../assets/img/ProjectCase/01/1.jpg", import.meta.url).href,
+                name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel',
+                children: [
+                    {
+                        details: new URL("../assets/img/ProjectCase/01/2.jpg", import.meta.url).href,
+                        name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel',
+                    },
+                    {
+                        details: new URL("../assets/img/ProjectCase/01/3.jpg", import.meta.url).href,
+                        name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/01/4.jpg", import.meta.url).href,
+                        name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/01/5.jpg", import.meta.url).href,
+                        name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/01/6.jpg", import.meta.url).href,
+                        name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel',
+                    },
+                ]
+            },
         }
     } else if (newValue == '1') {
         casemessage = {
@@ -70,10 +123,34 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             type: 'Hotel',
             solutions: 'Furniture,Fixtures＆Equipment, doors',
             unites: '200+',
-            img: [
-                { details: new URL("../assets/img/cases/02.jpg", import.meta.url).href, name: 'Monsaraz Hilton' },
-                { details: new URL("../assets/img/cases/002.jpg", import.meta.url).href, name: 'Monsaraz Hilton' }
-            ]
+            img: {
+                details: new URL("../assets/img/ProjectCase/02/2.jpg", import.meta.url).href,
+                name: 'Monsaraz Hilton',
+                children: [
+                    {
+                        details: new URL("../assets/img/ProjectCase/02/3.jpg", import.meta.url).href,
+                        name: 'Monsaraz Hilton',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/02/4.jpg", import.meta.url).href,
+                        name: 'Monsaraz Hilton',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/02/5.jpg", import.meta.url).href,
+                        name: 'Monsaraz Hilton',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/02/6.jpg", import.meta.url).href,
+                        name: 'Monsaraz Hilton',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/02/7.jpg", import.meta.url).href,
+                        name: 'Monsaraz Hilton',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/02/8.jpg", import.meta.url).href,
+                        name: 'Monsaraz Hilton',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/02/9.jpg", import.meta.url).href,
+                        name: 'Monsaraz Hilton',
+                    },
+                ]
+            },
         }
     } else if (newValue == '2') {
         casemessage = {
@@ -84,10 +161,35 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             type: 'Hotel',
             solutions: 'Furniture,Fixtures＆Equipment,lights fixture',
             unites: '200+',
-            img: [
-                { details: new URL("../assets/img/cases/03.jpg", import.meta.url).href, name: 'Canopy By Hilton San Francisco Soma Hotel' },
-                { details: new URL("../assets/img/cases/003.jpg", import.meta.url).href, name: 'Canopy By Hilton San Francisco Soma Hotel' }
-            ]
+            img: {
+                details: new URL("../assets/img/ProjectCase/03/1.jpg", import.meta.url).href,
+                name: 'Canopy By Hilton San Francisco Soma Hotel',
+                children: [
+                    {
+                        details: new URL("../assets/img/ProjectCase/03/2.jpg", import.meta.url).href,
+                        name: 'Canopy By Hilton San Francisco Soma Hotel',
+                    },
+                    {
+                        details: new URL("../assets/img/ProjectCase/03/3.jpg", import.meta.url).href,
+                        name: 'Canopy By Hilton San Francisco Soma Hotel',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/03/4.jpg", import.meta.url).href,
+                        name: 'Canopy By Hilton San Francisco Soma Hotel',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/03/5.jpg", import.meta.url).href,
+                        name: 'Canopy By Hilton San Francisco Soma Hotel',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/03/6.jpg", import.meta.url).href,
+                        name: 'Canopy By Hilton San Francisco Soma Hotel',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/03/7.jpg", import.meta.url).href,
+                        name: 'Canopy By Hilton San Francisco Soma Hotel',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/03/8.jpg", import.meta.url).href,
+                        name: 'Canopy By Hilton San Francisco Soma Hotel',
+                    },
+                ]
+            },
         }
     } else if (newValue == '3') {
         casemessage = {
@@ -98,10 +200,29 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             type: 'Condo',
             solutions: 'Building Materials',
             unites: '20+',
-            img: [
-                { details: new URL("../assets/img/cases/04.jpg", import.meta.url).href, name: 'Lofts on Laurel' },
-                { details: new URL("../assets/img/cases/004.jpg", import.meta.url).href, name: 'Lofts on Laurel' }
-            ]
+            img: {
+                details: new URL("../assets/img/ProjectCase/04/1.jpg", import.meta.url).href,
+                name: 'Lofts on Laurel',
+                children: [
+                    {
+                        details: new URL("../assets/img/ProjectCase/04/2.jpg", import.meta.url).href,
+                        name: 'Lofts on Laurel',
+                    },
+                    {
+                        details: new URL("../assets/img/ProjectCase/04/3.jpg", import.meta.url).href,
+                        name: 'Lofts on Laurel',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/04/4.jpg", import.meta.url).href,
+                        name: 'Lofts on Laurel',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/04/5.jpg", import.meta.url).href,
+                        name: 'Lofts on Laurel',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/04/6.jpg", import.meta.url).href,
+                        name: 'Lofts on Laurel',
+                    },
+                ]
+            },
         }
     } else if (newValue == '4') {
         casemessage = {
@@ -112,10 +233,32 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             type: 'Condo',
             solutions: 'Building Materials',
             unites: '20+',
-            img: [
-                { details: new URL("../assets/img/cases/05.jpg", import.meta.url).href, name: 'State&Oak Street' },
-                { details: new URL("../assets/img/cases/005.jpg", import.meta.url).href, name: 'State&Oak Street' }
-            ]
+            img: {
+                details: new URL("../assets/img/ProjectCase/05/1.jpg", import.meta.url).href,
+                name: 'State&Oak Street',
+                children: [
+                    {
+                        details: new URL("../assets/img/ProjectCase/05/2.jpg", import.meta.url).href,
+                        name: 'State&Oak Street',
+                    },
+                    {
+                        details: new URL("../assets/img/ProjectCase/05/3.jpg", import.meta.url).href,
+                        name: 'State&Oak Street',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/05/4.jpg", import.meta.url).href,
+                        name: 'State&Oak Street',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/05/5.jpg", import.meta.url).href,
+                        name: 'State&Oak Street',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/05/6.jpg", import.meta.url).href,
+                        name: 'State&Oak Street',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/05/7.jpg", import.meta.url).href,
+                        name: 'State&Oak Street',
+                    },
+                ]
+            },
         }
     } else if (newValue == '5') {
         casemessage = {
@@ -126,10 +269,31 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             type: 'Condo',
             solutions: 'Building Materials',
             unites: '180+',
-            img: [
-                { details: new URL("../assets/img/cases/06.jpg", import.meta.url).href, name: '989 Johson Street' },
-                { details: new URL("../assets/img/cases/006.jpg", import.meta.url).href, name: '989 Johson Street' }
-            ]
+            img: {
+                details: new URL("../assets/img/ProjectCase/06/1.jpg", import.meta.url).href,
+                name: '989 Johson Street',
+                children: [
+                    {
+                        details: new URL("../assets/img/ProjectCase/06/2.jpg", import.meta.url).href,
+                        name: '989 Johson Street',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/06/3.jpg", import.meta.url).href,
+                        name: '989 Johson Street',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/06/4.jpg", import.meta.url).href,
+                        name: '989 Johson Street',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/06/5.jpg", import.meta.url).href,
+                        name: '989 Johson Street',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/06/6.jpg", import.meta.url).href,
+                        name: '989 Johson Street',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/06/7.jpg", import.meta.url).href,
+                        name: '989 Johson Street',
+                    },
+                ]
+            },
         }
     } else if (newValue == '6') {
         casemessage = {
@@ -140,10 +304,29 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             type: 'Apartment',
             solutions: 'Building Materials',
             unites: '20+',
-            img: [
-                { details: new URL("../assets/img/cases/07.jpg", import.meta.url).href, name: 'Tarrace Lofts' },
-                { details: new URL("../assets/img/cases/007.jpg", import.meta.url).href, name: 'Tarrace Lofts' }
-            ]
+            img: {
+                details: new URL("../assets/img/ProjectCase/07/1.jpg", import.meta.url).href,
+                name: 'Tarrace Lofts',
+                children: [
+                    {
+                        details: new URL("../assets/img/ProjectCase/07/2.jpg", import.meta.url).href,
+                        name: 'Tarrace Lofts',
+                    },
+                    {
+                        details: new URL("../assets/img/ProjectCase/07/3.jpg", import.meta.url).href,
+                        name: 'Tarrace Lofts',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/07/4.jpg", import.meta.url).href,
+                        name: 'Tarrace Lofts',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/07/5.jpg", import.meta.url).href,
+                        name: 'Tarrace Lofts',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/07/6.jpg", import.meta.url).href,
+                        name: 'Tarrace Lofts',
+                    },
+                ]
+            },
         }
     } else if (newValue == '7') {
         casemessage = {
@@ -154,10 +337,40 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             type: 'Condo',
             solutions: 'Building Materials, lights fixture',
             unites: '17',
-            img: [
-                { details: new URL("../assets/img/cases/08.jpg", import.meta.url).href, name: 'Ocean 17' },
-                { details: new URL("../assets/img/cases/008.jpg", import.meta.url).href, name: 'Ocean 17' }
-            ]
+            img: {
+                details: new URL("../assets/img/ProjectCase/08/1.jpg", import.meta.url).href,
+                name: 'Ocean 17',
+                children: [
+                    {
+                        details: new URL("../assets/img/ProjectCase/08/2.3.jpg", import.meta.url).href,
+                        name: 'Ocean 17',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/08/2.jpg", import.meta.url).href,
+                        name: 'Ocean 17',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/08/3.jpg", import.meta.url).href,
+                        name: 'Ocean 17',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/08/4.jpg", import.meta.url).href,
+                        name: 'Ocean 17',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/08/5.jpg", import.meta.url).href,
+                        name: 'Ocean 17',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/08/6.jpg", import.meta.url).href,
+                        name: 'Ocean 17',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/08/7.jpg", import.meta.url).href,
+                        name: 'Ocean 17',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/08/8.jpg", import.meta.url).href,
+                        name: 'Ocean 17',
+                    }, {
+                        details: new URL("../assets/img/ProjectCase/08/9.jpg", import.meta.url).href,
+                        name: 'Ocean 17',
+                    },
+                ]
+            },
         }
     }
 }, { immediate: true, deep: true })
@@ -170,29 +383,114 @@ const goPage = () => {
     })
     document.getElementById('service')?.scrollIntoView()
 }
-
+const goPage1 = (url: any, name: string) => {
+    if (name != '') {
+        localStorage.setItem('scrollPosition', name)
+    }
+    document.documentElement.scrollTop = 0
+    router.push({
+        path: url
+    })
+}
+let bannerList = ref<any>([
+    { detail: new URL("../assets/img/ProjectCase/01/1.jpg", import.meta.url).href, name: 'Fairmont Empress Hotel', address: 'Victoria, Canada', position: 0 },
+    { detail: new URL("../assets/img/ProjectCase/02/1.jpg", import.meta.url).href, name: 'Monsaraz Hilton', address: 'San Diego，USA', position: 1 },
+    { detail: new URL("../assets/img/ProjectCase/03/1.jpg", import.meta.url).href, name: 'Canopy By Hilton San Francisco Soma Hotel', address: 'San Fransisco，USA', position: 2 },
+    { detail: new URL("../assets/img/ProjectCase/04/1.jpg", import.meta.url).href, name: 'Lofts on Laurel', address: 'San Diego，USA', position: 3 },
+    { detail: new URL("../assets/img/ProjectCase/05/1.jpg", import.meta.url).href, name: 'State&Oak Street', address: 'Carlsbad，CA，USA', position: 4 },
+    { detail: new URL("../assets/img/ProjectCase/06/1.jpg", import.meta.url).href, name: '989 Johson Street', address: 'Victoria, Canada', position: 5 },
+    { detail: new URL("../assets/img/ProjectCase/07/1.jpg", import.meta.url).href, name: 'Tarrace Lofts', address: 'Vista, California, USA', position: 6 },
+    { detail: new URL("../assets/img/ProjectCase/08/1.jpg", import.meta.url).href, name: 'Ocean 17', address: 'Carlsbad，CA，USA', position: 7 },
+])
 onMounted(() => {
+    bannerList.value.map((li: any) => {
+        bannerList.value = bannerList.value.filter((li: any) => {
+            return li.position != router.currentRoute.value.params.name
+        })
+    })
     if (document.body.offsetWidth < 960) {
         mobileShow.value = true
+        slidesPerView.value = 1
     } else {
         mobileShow.value = false
+        slidesPerView.value = 3
     }
     window.addEventListener('resize', function () {
         if (document.body.offsetWidth < 960) {
             mobileShow.value = true
+            slidesPerView.value = 1
         } else {
             mobileShow.value = false
+            slidesPerView.value = 3
         }
     })
 })
 </script>
 
 <style scoped lang="less">
+:deep(.swiper-button-prev:after) {
+    color: #fff;
+    font-size: 30px;
+}
+
+:deep(.swiper-button-next:after) {
+    color: #fff;
+    font-size: 30px;
+}
+
+.project-center-title {
+    bottom: 0;
+    left: 0;
+    height: 50px;
+    // line-height: 50px;
+    text-align: left;
+    background: rgba(0, 0, 0, .4);
+    width: 100%;
+    padding: 1rem 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.other {
+    width: 90%;
+    margin: auto;
+
+    .hover-scale {
+        .case-img {
+            img {
+                transition: all 3s;
+            }
+
+            .imgcase {
+                height: 42rem;
+            }
+
+            .imgcase1 {
+                height: 25rem;
+            }
+        }
+
+    }
+
+    .hover-scale:hover .case-img img {
+        transform: scale(1.2);
+    }
+
+    .hover-scale:hover .project-center-title {
+        background: #fa8106;
+    }
+
+    .hover-scale:hover .project-center-title1 {
+        background: #fa8106;
+    }
+}
+
 .btn {
     cursor: pointer;
     left: 50%;
     transform: translateX(-50%);
-    margin: 3rem 0;
+    margin: 2rem 0 2rem;
     float: left;
     font-weight: bold;
     padding: 1rem 2.5rem;
@@ -233,7 +531,8 @@ onMounted(() => {
             .year {
                 display: flex;
                 align-items: center;
-                span{
+
+                span {
                     white-space: nowrap;
                 }
 
@@ -285,23 +584,74 @@ onMounted(() => {
 }
 
 .details {
-    width: 75%;
+    width: 90%;
     margin: 20px auto;
     text-align: left;
 
-    .img {
-        margin-top: 2rem;
+    .details-pic {
+        width: 100%;
+        padding: 1rem;
+        display: flex;
+        flex-wrap: wrap;
+
+        .img {
+            width: 43%;
+            height: 33rem;
+            margin-right: 3rem;
+            margin-bottom: 3rem;
+            overflow: hidden;
+
+            img {
+                width: 100%;
+                height: 100%;
+                transition: 0.5s linear;
+            }
+
+            img:hover {
+                scale: 1.2;
+            }
+        }
     }
 }
 
 @media screen and (max-width: 960px) {
-    .btn{
+    .btn {
         left: 50%;
         transform: translateX(-50%);
+        margin: 2rem auto 1rem;
     }
-    .details{
+
+    .details {
+        width: 90%;
+        margin: 20px auto;
         text-align: center;
+
+        .details-pic {
+            width: 100%;
+            padding: 1rem;
+            display: flex;
+            flex-wrap: wrap;
+
+            .img {
+                width: 100%;
+                height: 15rem;
+                margin-right: 3rem;
+                margin-bottom: 3rem;
+                overflow: hidden;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    transition: 0.5s linear;
+                }
+
+                img:hover {
+                    scale: 1.2;
+                }
+            }
+        }
     }
+
     .casemessage {
         display: flex;
         flex-direction: column;
@@ -313,10 +663,12 @@ onMounted(() => {
             flex-direction: column;
             justify-content: space-between;
             margin-bottom: 10px;
-            .address-year{
+
+            .address-year {
                 display: flex;
                 flex-direction: column;
-                .address{
+
+                .address {
                     margin-bottom: 0.5rem;
                 }
             }

montier/src/pages/HomePage.vue

@@ -118,7 +118,7 @@ const onSlideChange = () => {
   background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.8) 70%);
   width: 100%;
   padding: 20px 20px 60px 20px;
-  font-size: 60px;
+  font-size: 55px;
   text-align: center;
 }
 

montier/src/pages/Procurement.vue

@@ -4,17 +4,18 @@
       <div class="content-img">
         <div class="fixed-width position-relative">
           <img :src="Imglist.img[0].details" class="procurement-max-width" :alt="Imglist.img[0].name" loading="lazy">
-          <img :src="Imglist.img[1].details" class="position-absolute second-img" :alt="Imglist.img[1].name" loading="lazy">
+          <img :src="Imglist.img[1].details" class="position-absolute second-img" :alt="Imglist.img[1].name"
+            loading="lazy">
           <!-- <span class="font-size-20 read-more pa-2 text-center position-absolute"
             :class="mobileShow ? 'read-more-mobile' : 'read-more-pc'">Read more</span> -->
         </div>
       </div>
       <div class="titledesign">
-        <div class="designtitle">
-          <div class="juxing"></div>
-          <h2><strong>{{ Imglist.title }}</strong></h2>
+        <div class="destitle">
+          <div class="zhu"></div>
+          <h1><strong>{{ Imglist.title }}</strong></h1>
         </div>
-        <p class="line-height-4 ml-3 content" :class="mobileShow ? 'font-size-16' : 'font-size-22'">
+        <p class="ml-3 content" :class="mobileShow ? 'font-size-16' : 'font-size-26'">
           {{ Imglist.content }}
         </p>
       </div>
@@ -57,7 +58,7 @@ onMounted(async () => {
 })
 
 watch(() => router.currentRoute.value.query.index, (newValue: any) => {
-  if(newValue == '0'){
+  if (newValue == '0') {
     Imglist = {
       title: 'Design',
       content: 'Solving all problems from design, and work out a practical scheme.They are project planning, archi-tectural design, interior design, product design.These four parts from a closed loop.',
@@ -66,7 +67,7 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
         { details: new URL("../assets/img/Design02.jpg", import.meta.url).href, name: 'Design' },
       ]
     }
-  }else if(newValue == '1'){
+  } else if (newValue == '1') {
     Imglist = {
       title: 'After -sale Service',
       content: 'We care about quality and care about longtime performance. After sales service is crucial for our business procedure. We offer online and swift response for after sales services.',
@@ -75,7 +76,7 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
         { details: new URL("../assets/img/After-saleService02.jpg", import.meta.url).href, name: 'After -sale Service' },
       ]
     }
-  }else if(newValue == '2'){
+  } else if (newValue == '2') {
     Imglist = {
       title: 'Manufacture',
       content: 'We are able to mass-customize products efficiently as per the approved specification. We manufacture case-goods, upholstery items and all type of solidwood products, as well as decorative lightings.Flexiblity of custom-made system achieve a lower costsin mass product.',
@@ -84,7 +85,7 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
         { details: new URL("../assets/img/Manufacture02.jpg", import.meta.url).href, name: 'Manufacture' },
       ]
     }
-  }else if(newValue == '3'){
+  } else if (newValue == '3') {
     Imglist = {
       title: 'Installation',
       content: 'We have our installation teams for site measurement taken and installation condition analysis. Our installation team is expert on flooring, mill work, cabinets, drapery，wall covering, and carpet.',
@@ -93,7 +94,7 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
         { details: new URL("../assets/img/Installation02.jpg", import.meta.url).href, name: 'Installation' },
       ]
     }
-  }else if(newValue == '4'){
+  } else if (newValue == '4') {
     Imglist = {
       title: 'Quality',
       content: 'Product quality is the lifeline of an company and the fundamental guarantee of its sustainable development. We have implemented a complex quality system to review all material and standard  operating procedures are audited regularly to ensure the standards are met.  MONTIER can deliver excellent products in line with German quality.',
@@ -102,7 +103,7 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
         { details: new URL("../assets/img/Quality02.jpg", import.meta.url).href, name: 'Quality' },
       ]
     }
-  }else if(newValue == '5'){
+  } else if (newValue == '5') {
     Imglist = {
       title: 'Logistics',
       content: 'We work with 3rd party forwarder for local and overseas logistic. For different schedule of delivery, we will manage warehousing for FF&E.',
@@ -112,8 +113,8 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
       ]
     }
   }
-  
-},{ immediate: true, deep: true })
+
+}, { immediate: true, deep: true })
 
 </script>
 
@@ -146,7 +147,8 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
   top: 50%;
   transform: translateY(-50%);
 }
-.second-img3{
+
+.second-img3 {
   width: 40%;
   height: 20vw;
   margin-left: 8rem;
@@ -191,58 +193,31 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
   /* text-indent: 20px; */
 }
 
-
-@media (max-width: 1000px) {
-  .procurement {
-    margin-top: 15vw;
-  }
-
-  .fixed-width {
-    width: 50vw;
-    height: 40vw;
-  }
-
-  .second-img {
-    height: 25vw;
-  }
-
-  /* .titledesign {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-
-    .designtitle {
-      margin-bottom: 2rem;
-    }
-  } */
-}
-
 .titledesign {
   box-sizing: border-box;
   margin: 0;
-  padding: 0;
   width: 100%;
   margin-top: 3rem;
   display: flex;
-  flex-direction: column;
-  justify-content: space-between;
   align-items: center;
   padding: 0 1.5rem;
 
-  .designtitle {
-    width: 100%;
+  .destitle {
+    width: 20%;
     margin-bottom: 1rem;
 
-    .juxing {
-      width: 2rem;
+    .zhu {
+      width: 2.5rem;
       height: 1rem;
       background-color: rgba(237, 125, 49);
       margin-bottom: 0.5rem;
     }
   }
 
+  .content {
+    width: 80%;
+    line-height: 2.5rem;
+  }
 }
 
 .btn {
@@ -261,4 +236,31 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
 .btn:hover {
   color: rgba(237, 125, 49);
   border: 1px solid rgba(237, 125, 49);
-}</style>
+}
+
+@media screen and (max-width: 960px) {
+  .procurement {
+    margin-top: 15vw;
+  }
+
+  .titledesign {
+    box-sizing: border-box;
+    margin: 0;
+    width: 100%;
+    margin-top: 2rem;
+    display: flex;
+    flex-direction: column;
+
+    .destitle {
+      width: 100%;
+      margin-bottom: 1rem;
+      text-align: left;
+    }
+
+    .content {
+      width: 100%;
+      line-height: 2rem;
+    }
+  }
+}
+</style>

montier/src/pages/Productmessage.vue

@@ -13,7 +13,16 @@
             </el-tabs>
             <div class="allpic">
                 <div v-for="item2, index2 in product" :key="index2" class="pic" v-if="product.length != 0">
-                    <img :src="item2.detail" :alt="item2.name" loading="lazy">
+                    <el-divider content-position="center" border-style="dashed">{{ item2.name }}</el-divider>
+                    <div class="all-pic">
+                        <div class="pic1" v-for="item3, index3 in item2.children" :key="index3"
+                            v-if="item2.children && item2.children.length > 0">
+                            <img :src="item3.detail" :alt="item2.name" loading="lazy">
+                        </div>
+                        <div class="allpic1" v-else>
+                            <el-empty description="No further content available at the moment" />
+                        </div>
+                    </div>
                 </div>
                 <div class="allpic1" v-else>
                     <el-empty description="No further content available at the moment" />
@@ -66,28 +75,20 @@ onMounted(() => {
 if (router.currentRoute.value.params.name == 'Door') {
     productList = [
         {
-            title: 'Entrance Doors',
-            children: []
+            title: 'Entrance Doors'
         },
         {
-            title: 'Interior Doors',
-            children: []
+            title: 'Interior Doors'
         },
         {
-            title: 'Fire Doors',
-            children: []
+            title: 'Fire Doors'
         },
         {
-            title: 'Sliding Doors',
-            children: []
+            title: 'Sliding Doors'
         }
     ]
     activeName.value = productList[0].title
-    if (activeName.value == 'Entrance Doors') {
-        product = Home.$state.Entrance
-    } else {
-        product = []
-    }
+    product = Home.$state.Entrance
 } else if (router.currentRoute.value.params.name == 'Window') {
     productList = []
     product = []
@@ -112,12 +113,29 @@ if (router.currentRoute.value.params.name == 'Door') {
 </script>
 
 <style scoped lang="less">
+:deep(.el-tabs__item) {
+    font-size: 26px !important;
+    padding-bottom: 1rem;
+
+    &:hover {
+        color: #fa8106;
+    }
+}
+
+:deep(.is-active) {
+    color: #fa8106;
+}
+
+:deep(.el-tabs__active-bar) {
+    background-color: #fa8106 !important;
+}
+
 .btn {
     display: inline-block;
     border: 1px solid #333;
     cursor: pointer;
     padding: 0.5rem 2rem;
-    margin: 1rem 0;
+    margin: 1.5rem 0;
     left: 50%;
     transform: translateX(-50%);
 }
@@ -129,25 +147,43 @@ if (router.currentRoute.value.params.name == 'Door') {
 
 .allpic {
     width: 100%;
+    box-sizing: border-box;
     display: flex;
+    flex-direction: column;
     flex-wrap: wrap;
-    overflow-y: auto;
+
+    :deep(.el-divider__text) {
+        font-size: 22px;
+        font-weight: bold;
+    }
 
     .pic {
-        width: 23%;
-        height: 15vw;
-        margin-right: 2rem;
-        margin-bottom: 2rem;
-        overflow: hidden;
+        width: 100%;
+        font-size: 26px;
 
-        img {
-            width: 100%;
-            height: 100%;
-            transition: 0.5s linear;
-        }
+        .all-pic {
+            width: 95%;
+            display: flex;
+            flex-wrap: wrap;
+            margin: auto;
+            margin-top: 2rem;
+
+            .pic1 {
+                width: 30%;
+                height: 20rem;
+                margin: 0 3rem 3rem 0;
+                overflow: hidden;
 
-        img:hover {
-            scale: 1.2;
+                img {
+                    width: 100%;
+                    height: 100%;
+                    transition: 0.5s linear;
+                }
+
+                img:hover {
+                    scale: 1.2;
+                }
+            }
         }
     }
 }
@@ -160,7 +196,7 @@ if (router.currentRoute.value.params.name == 'Door') {
 .productcenter {
     .door-bgc {
         width: 100%;
-        height: 60%;
+        height: 55rem;
 
         img {
             width: 100%;
@@ -192,7 +228,55 @@ if (router.currentRoute.value.params.name == 'Door') {
 }
 
 @media screen and (max-width: 960px) {
+    :deep(.el-tabs__item) {
+        font-size: 14px !important;
+    }
+
     .productcenter {
+        .allpic {
+            width: 100%;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+            margin-top: -2rem;
+
+            :deep(.el-divider__text) {
+                font-size: 10px;
+                font-weight: bold;
+            }
+
+            .pic {
+                width: 100%;
+                font-size: 26px;
+
+                .all-pic {
+                    width: 95%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    margin: auto;
+                    margin-top: 1rem;
+
+                    .pic1 {
+                        width: 28%;
+                        height: 5rem;
+                        margin: 0 1rem 1rem 0;
+                        overflow: hidden;
+
+                        img {
+                            width: 100%;
+                            height: 100%;
+                            transition: 0.5s linear;
+                        }
+
+                        img:hover {
+                            scale: 1.2;
+                        }
+                    }
+                }
+            }
+        }
+
         .door-bgc {
             width: 100%;
             height: 35%;
@@ -208,18 +292,6 @@ if (router.currentRoute.value.params.name == 'Door') {
             margin: 1rem auto 0;
         }
     }
-
-    .allpic {
-        box-sizing: border-box;
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
-
-        .pic {
-            width: 40%;
-            height: 25vw;
-        }
-    }
 }
 </style>
 

montier/src/pages/ProjectCase.vue

@@ -1,33 +1,15 @@
 <template>
-  <div class="m-auto project-case wow animated fadeInUp" :class="mobileShow?'width-90':'width-80'">
-    <swiper
-        :modules="modules"
-        :slides-per-view="slidesPerView"
-        :loop="true"
-        :space-between="50"
-        navigation
-        :pagination="{ clickable: true }"
-        @swiper="onSwiper"
-        @slideChange="onSlideChange"
-    >
-      <!-- <swiper-slide  v-for="(item,index) in bannerList" class="hover-scale cursor-pointer" :key="index" v-if="selectIndex === 1">
-        <div>
-          <div class="case-img overflow-hidden img-after" @click="changeindex">
-            <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase1" />
-          </div>
-          <div>
-            <h3 class="color-343434 font-size-18 line-height-2 border-bottom mb-1">North Sydney Landmark Project AURA Apartment</h3>
-            <p class="mb-1 align-items-center d-flex"><img src="../assets/img/i20.png" alt="address"><span class="ml-1 font-size-14 color-666">China</span></p>
-            <p class="align-items-center d-flex"><img src="../assets/img/i21.png" alt="units"><span class="ml-1 font-size-14 color-666">387 Units</span></p>
-          </div>
-        </div>
-      </swiper-slide> -->
-
+  <div class="m-auto project-case wow animated fadeInUp" :class="mobileShow ? 'width-90' : 'width-80'">
+    <swiper :modules="modules" :slides-per-view="slidesPerView" :loop="true" :space-between="50" navigation
+      :pagination="{ clickable: true }" @swiper="onSwiper" @slideChange="onSlideChange">
       <!-- 项目案例 -->
-      <swiper-slide  v-for="(item,index2) in bannerList" class="hover-scale cursor-pointer" :key="index2" v-if="selectIndex === 2">
+      <swiper-slide v-for="(item, index2) in bannerList" class="hover-scale cursor-pointer" :key="item.position"
+        v-if="selectIndex === 2">
         <div>
-          <div class="case-img overflow-hidden position-relative" @click="goPage(`/projectcase/${index}`, 'projectCase')">
-            <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase1" loading="lazy"/>
+          <div class="case-img overflow-hidden position-relative"
+            @click="goPage(`/projectcase/${item.position}`, 'projectCases')">
+            <img :src="item.detail" :alt="item.name" class="width-100 d-block position-relative imgcase1"
+              loading="lazy" />
             <div class="position-absolute color-fff project-center-title">
               <span class="font-700 font-size-20">{{ item.name }}</span>
               <span class="font-700 font-size-20">{{ item.address }}</span>
@@ -36,83 +18,83 @@
         </div>
       </swiper-slide>
       <!-- 产品中心 -->
-      <swiper-slide  v-for="(item,index3) in bannerList2" class="hover-scale cursor-pointer" :key="index3" v-else-if="selectIndex === 3">
+      <swiper-slide v-for="(item, index3) in bannerList2" class="hover-scale cursor-pointer" :key="index3"
+        v-else-if="selectIndex === 3">
         <div>
-          <div class="case-img overflow-hidden position-relative" @click="goPage(`/productcenter/${item.name}`, 'productCenter')">
-            <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase" loading="lazy"/>
+          <div class="case-img overflow-hidden position-relative"
+            @click="goPage(`/productcenter/${item.name}`, 'productCenter')">
+            <img :src="item.detail" :alt="item.name" class="width-100 d-block position-relative imgcase"
+              loading="lazy" />
             <span class="position-absolute color-fff project-center-title1 font-size-22 font-700">{{ item.name }}</span>
           </div>
         </div>
       </swiper-slide>
-      <!-- <div v-if="selectIndex == 2" class="projectall">
-        <p class="allproject" @click="goPage('/projectcase/allproject')">EXPLORE ALL PROJECTS >></p>
-      </div> -->
     </swiper>
-    <p v-if="selectIndex == 2" class="btn" @click="goPage('/projectcase', '')">EXLORE ALL PROJECTS</p>
-    <p v-if="selectIndex == 3" class="btn" @click="goPage('/productcenter', '')">EXLORE ALL PROJECTS</p>
+    <p v-if="selectIndex == 2" class="btn" @click="goPage('/projectcase', 'projectCases')">EXLORE ALL PROJECTS</p>
+    <p v-if="selectIndex == 3" class="btn" @click="goPage('/productcenter', 'productCenter')">EXLORE ALL PRODUCT</p>
   </div>
 </template>
 
 <script setup lang="ts">
 
-import {onMounted, ref} from "vue";
+import { onMounted, ref } from "vue";
 
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import 'swiper/css/scrollbar';
-import {A11y, Navigation, Scrollbar} from "swiper";
+import { A11y, Navigation, Scrollbar } from "swiper";
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import router from "../router";
-let modules = [Navigation,Scrollbar, A11y];
+let modules = [Navigation, Scrollbar, A11y];
 let bannerList = ref<any>([
-  {detail:new URL("../assets/img/cases/01.jpg",import.meta.url).href,title:'轮播', name: 'Fairmont Empress Hotel', address: 'Victoria, Canada'},
-  {detail:new URL("../assets/img/cases/02.jpg",import.meta.url).href,title:'轮播', name: 'Monsaraz Hilton', address: 'San Diego，USA'},
-  {detail:new URL("../assets/img/cases/03.jpg",import.meta.url).href,title:'轮播', name: 'Canopy By Hilton San Francisco Soma Hotel', address: 'San Fransisco，USA'},
-  {detail:new URL("../assets/img/cases/04.jpg",import.meta.url).href,title:'轮播', name: 'Lofts on Laurel', address: 'San Diego，USA'},
-  {detail:new URL("../assets/img/cases/05.jpg",import.meta.url).href,title:'轮播', name: 'State&Oak Street', address: 'Carlsbad，CA，USA'},
-  {detail:new URL("../assets/img/cases/06.jpg",import.meta.url).href,title:'轮播', name: '989 Johson Street', address: 'Victoria, Canada'},
-  {detail:new URL("../assets/img/cases/07.jpg",import.meta.url).href,title:'轮播', name: 'Tarrace Lofts', address: 'Vista, California, USA'},
-  {detail:new URL("../assets/img/cases/08.jpg",import.meta.url).href,title:'轮播', name: 'Ocean 17', address: 'Carlsbad，CA，USA'},
+  { detail: new URL("../assets/img/ProjectCase/01/1.jpg", import.meta.url).href, name: 'Fairmont Empress Hotel', address: 'Victoria, Canada', position: 0 },
+  { detail: new URL("../assets/img/ProjectCase/02/1.jpg", import.meta.url).href, name: 'Monsaraz Hilton', address: 'San Diego，USA', position: 1 },
+  { detail: new URL("../assets/img/ProjectCase/03/1.jpg", import.meta.url).href, name: 'Canopy By Hilton San Francisco Soma Hotel', address: 'San Fransisco，USA', position: 2 },
+  { detail: new URL("../assets/img/ProjectCase/04/1.jpg", import.meta.url).href, name: 'Lofts on Laurel', address: 'San Diego，USA', position: 3 },
+  { detail: new URL("../assets/img/ProjectCase/05/1.jpg", import.meta.url).href, name: 'State&Oak Street', address: 'Carlsbad，CA，USA', position: 4 },
+  { detail: new URL("../assets/img/ProjectCase/06/1.jpg", import.meta.url).href, name: '989 Johson Street', address: 'Victoria, Canada', position: 5 },
+  { detail: new URL("../assets/img/ProjectCase/07/1.jpg", import.meta.url).href, name: 'Tarrace Lofts', address: 'Vista, California, USA', position: 6 },
+  { detail: new URL("../assets/img/ProjectCase/08/1.jpg", import.meta.url).href, name: 'Ocean 17', address: 'Carlsbad，CA，USA', position: 7 },
 ])
 let bannerList2 = ref<any>([
-  {detail:new URL("../assets/img/center01.jpg",import.meta.url).href,title:'轮播', name: 'Door'},
-  {detail:new URL("../assets/img/center02.jpg",import.meta.url).href,title:'轮播', name: 'Window'},
-  {detail:new URL("../assets/img/center03.jpg",import.meta.url).href,title:'轮播', name: 'Railing'},
-  {detail:new URL("../assets/img/center04.jpg",import.meta.url).href,title:'轮播', name: 'Building Material'},
-  {detail:new URL("../assets/img/center05.jpg",import.meta.url).href,title:'轮播', name: 'Kitchen Cabinets with Customization'},
-  {detail:new URL("../assets/img/center06.jpg",import.meta.url).href,title:'轮播', name: 'Kitchen faucet and sink'},
-  {detail:new URL("../assets/img/center07.jpg",import.meta.url).href,title:'轮播', name: 'Sanitary Ware'},
+  { detail: new URL("../assets/img/center01.jpg", import.meta.url).href, name: 'Door' },
+  { detail: new URL("../assets/img/center02.jpg", import.meta.url).href, name: 'Window' },
+  { detail: new URL("../assets/img/center03.jpg", import.meta.url).href, name: 'Railing' },
+  { detail: new URL("../assets/img/center04.jpg", import.meta.url).href, name: 'Building Material' },
+  { detail: new URL("../assets/img/center05.jpg", import.meta.url).href, name: 'Kitchen Cabinets with Customization' },
+  { detail: new URL("../assets/img/center06.jpg", import.meta.url).href, name: 'Kitchen faucet and sink' },
+  { detail: new URL("../assets/img/center07.jpg", import.meta.url).href, name: 'Sanitary Ware' },
 ])
 let screenWidth = ref<any>('')
 let mobileShow = ref<any>(false)
 let selectIndex = ref<any>(1)
 const props = defineProps(['index'])
-if(props.index){
+if (props.index) {
   selectIndex.value = props.index
 }
 let slidesPerView = ref<number>(3)
-onMounted(async ()=>{
+onMounted(async () => {
   screenWidth.value = document.body.offsetWidth;
-  if(screenWidth.value<800){
+  if (screenWidth.value < 800) {
     mobileShow.value = true
     slidesPerView.value = 1
-  }else if(screenWidth.value<1000){
+  } else if (screenWidth.value < 1000) {
     mobileShow.value = true
     slidesPerView.value = 2
-  }else{
+  } else {
     mobileShow.value = false
     slidesPerView.value = 3
   }
-  window.addEventListener('resize',function(){
+  window.addEventListener('resize', function () {
     screenWidth.value = document.body.offsetWidth;
-    if(screenWidth.value<800){
+    if (screenWidth.value < 800) {
       mobileShow.value = true
       slidesPerView.value = 1
-    }else if(screenWidth.value<1000){
+    } else if (screenWidth.value < 1000) {
       mobileShow.value = true
       slidesPerView.value = 2
-    }else{
+    } else {
       mobileShow.value = false
       slidesPerView.value = 3
     }
@@ -126,7 +108,7 @@ const onSlideChange = () => {
 };
 
 const goPage = (url: any, name: string) => {
-  if(name != '') {
+  if (name != '') {
     localStorage.setItem('scrollPosition', name)
   }
   document.documentElement.scrollTop = 0
@@ -137,7 +119,7 @@ const goPage = (url: any, name: string) => {
 </script>
 
 <style scoped lang="less">
-.btn{
+.btn {
   cursor: pointer;
   float: left;
   margin-top: 3rem;
@@ -148,15 +130,18 @@ const goPage = (url: any, name: string) => {
   transform: translateX(-50%);
   font-weight: bold;
 }
-.btn:hover{
+
+.btn:hover {
   color: #fa8106;
   border: 1px solid #fa8106;
 }
-.projectall{
+
+.projectall {
   width: 100%;
   text-align: center;
 }
-.allproject{
+
+.allproject {
   cursor: pointer;
   display: inline-block;
   text-align: center;
@@ -167,85 +152,102 @@ const goPage = (url: any, name: string) => {
   border: 1px solid #333;
   color: #333;
 }
+
 .project-case {
-  .cursor-pointer{
+  .cursor-pointer {
     cursor: pointer;
   }
-  :deep(.swiper-button-prev:after){
+
+  :deep(.swiper-button-prev:after) {
     color: #fff;
     font-size: 30px;
   }
-  :deep(.swiper-button-next:after){
+
+  :deep(.swiper-button-next:after) {
     color: #fff;
     font-size: 30px;
   }
-  .img-after{
+
+  .img-after {
     border-bottom: solid .4em #fa8106;
   }
-  .border-bottom{
+
+  .border-bottom {
     border-bottom: 1px solid #eee;
   }
-  .hover-scale{
-    .case-img{
-      img{
+
+  .hover-scale {
+    .case-img {
+      img {
         transition: all 3s;
       }
-      .imgcase{
+
+      .imgcase {
         height: 42rem;
       }
-      .imgcase1{
+
+      .imgcase1 {
         height: 27rem;
       }
     }
 
   }
-  .hover-scale:hover .case-img img{
+
+  .hover-scale:hover .case-img img {
     transform: scale(1.2);
   }
-  .hover-scale:hover .project-center-title{
+
+  .hover-scale:hover .project-center-title {
     background: #fa8106;
   }
-  .hover-scale:hover .project-center-title1{
+
+  .hover-scale:hover .project-center-title1 {
     background: #fa8106;
   }
-  .project-center-title{
+
+  .project-center-title {
     bottom: 0;
     left: 0;
     height: 50px;
     // line-height: 50px;
     text-align: left;
-    background: rgba(0,0,0,.4);
+    background: rgba(0, 0, 0, .4);
     width: 100%;
     padding: 1rem 1rem;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
-  .project-center-title1{
+
+  .project-center-title1 {
     bottom: 0;
     left: 0;
     height: 50px;
     line-height: 50px;
     text-align: center;
-    background: rgba(0,0,0,.4);
+    background: rgba(0, 0, 0, .4);
     width: 100%;
   }
 }
+
 @media (max-width: 960px) {
-  .project-case .hover-scale .case-img .imgcase1{
+  .project-case .hover-scale .case-img .imgcase1 {
     height: 17rem;
   }
-  .project-case .hover-scale .case-img .imgcase{
+
+  .project-case .hover-scale .case-img .imgcase {
     height: 30rem;
   }
+
   .bannerImg {
-    margin-top:50px;
-    :deep(.swiper-button-prev:after){
+    margin-top: 50px;
+
+    :deep(.swiper-button-prev:after) {
       font-size: 30px;
     }
-    :deep(.swiper-button-next:after){
+
+    :deep(.swiper-button-next:after) {
       font-size: 30px;
     }
   }
-}
-</style>
+}</style>

montier/src/pages/Service.vue

@@ -123,7 +123,7 @@ onMounted(() => {
 
 .gallery {
     // --s: 20vw;
-    scale: 1.3;
+    scale: 1.35;
     /* control the size */
     --g: -2px;
     /* control the gap */
@@ -350,7 +350,7 @@ onMounted(() => {
 
 @media screen and (max-width: 1000px) {
     .gallery-container {
-        scale: 0.4;
+        scale: 0.35;
         margin: 0 0 10vw 0;
     }
 

montier/src/store/modules/homepage.ts

@@ -4,44 +4,78 @@ const useHomeStore = defineStore('Home', {
     state: () => {
         return {
             Entrance: Array<any>(
-                { detail: new URL("../../assets/img/Door/01.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/02.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/03.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/04.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/05.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/06.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/07.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/08.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/09.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/10.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/11.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/12.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/13.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/14.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/15.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/16.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/17.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/18.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/19.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/20.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/21.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/22.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/23.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/24.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/25.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/26.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/27.png", import.meta.url).href, name: 'Entrance Doors' },
-                { detail: new URL("../../assets/img/Door/28.png", import.meta.url).href, name: 'Entrance Doors' },
+                {
+                    name: 'Decorative wrought Entrance Doors',
+                    children: [
+                        { detail: new URL("../../assets/img/Door/01.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/02.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/03.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/04.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/05.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/06.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/07.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/08.png", import.meta.url).href, name: 'Entrance Doors' }
+                    ]
+                },
+                {
+                    name: 'Wrought Iron Entrance Doors',
+                    children: [
+                        { detail: new URL("../../assets/img/Door/09.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/10.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/11.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/12.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/13.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/14.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/15.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/16.png", import.meta.url).href, name: 'Entrance Doors' }
+                    ]
+                },
+                {
+                    name: 'Modern Safety Wrought Iron Entrance Doors',
+                    children: [
+                        { detail: new URL("../../assets/img/Door/17.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/18.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/19.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/20.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/21.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/22.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/23.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/24.png", import.meta.url).href, name: 'Entrance Doors' }
+                    ]
+                },
+                {
+                    name: 'Modern Design Metal Entrance Doors',
+                    children: [
+                        { detail: new URL("../../assets/img/Door/25.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/26.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/27.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/28.png", import.meta.url).href, name: 'Entrance Doors' }
+                    ]
+                },
+                {
+                    name: 'Modern Glass Metal Stainless Steel Pivot Door',
+                    children: [
+                        { detail: new URL("../../assets/img/Door/29.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/30.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/31.png", import.meta.url).href, name: 'Entrance Doors' },
+                        { detail: new URL("../../assets/img/Door/32.png", import.meta.url).href, name: 'Entrance Doors' }
+                    ]
+                }
             ),
             Interior: Array<any>(
-                { detail: new URL("../../assets/img/Door/101.png", import.meta.url).href, name: 'Interior Doors' },
-                { detail: new URL("../../assets/img/Door/102.png", import.meta.url).href, name: 'Interior Doors' },
-                { detail: new URL("../../assets/img/Door/103.png", import.meta.url).href, name: 'Interior Doors' },
-                { detail: new URL("../../assets/img/Door/104.png", import.meta.url).href, name: 'Interior Doors' },
-                { detail: new URL("../../assets/img/Door/105.png", import.meta.url).href, name: 'Interior Doors' },
-                { detail: new URL("../../assets/img/Door/106.png", import.meta.url).href, name: 'Interior Doors' },
-                { detail: new URL("../../assets/img/Door/107.png", import.meta.url).href, name: 'Interior Doors' },
-                { detail: new URL("../../assets/img/Door/108.png", import.meta.url).href, name: 'Interior Doors' },
+                {
+                    name: 'Wooden Internal Door',
+                    children: [
+                        { detail: new URL("../../assets/img/Door/101.png", import.meta.url).href, name: 'Interior Doors' },
+                        { detail: new URL("../../assets/img/Door/102.png", import.meta.url).href, name: 'Interior Doors' },
+                        { detail: new URL("../../assets/img/Door/103.png", import.meta.url).href, name: 'Interior Doors' },
+                        { detail: new URL("../../assets/img/Door/104.png", import.meta.url).href, name: 'Interior Doors' },
+                        { detail: new URL("../../assets/img/Door/105.png", import.meta.url).href, name: 'Interior Doors' },
+                        { detail: new URL("../../assets/img/Door/106.png", import.meta.url).href, name: 'Interior Doors' },
+                        { detail: new URL("../../assets/img/Door/107.png", import.meta.url).href, name: 'Interior Doors' },
+                        { detail: new URL("../../assets/img/Door/108.png", import.meta.url).href, name: 'Interior Doors' }
+                    ]
+                },
             )
         }
     },