8月24日提交，完成第二次开发

montier/src/App.vue

@@ -40,7 +40,7 @@ onMounted(() => {
 .appview{
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  // height: 100vh;
   .header{
     width: 100%;
   }

montier/src/components/HeaderPage.vue

@@ -253,14 +253,14 @@ const getProduct = async () => {
                 <span>{{ item.title }}</span>
               </el-menu-item>
             </el-sub-menu>
-            <el-menu-item index="4">
+            <el-menu-item index="4" @click="goPage('/news/all')">
               <template #title>
-                <span @click="goPage('/news/all')">News</span>
+                <span>News</span>
               </template>
             </el-menu-item>
-            <el-menu-item index="5">
+            <el-menu-item index="5" @click="goPage('/contactUs')">
               <template #title>
-                <span @click="goPage('/contactUs')">Contact Us</span>
+                <span>Contact Us</span>
               </template>
             </el-menu-item>
           </el-menu>

montier/src/pages/AboutMessage.vue

@@ -56,10 +56,12 @@ onMounted(() => {
 <style scoped lang="less">
 .aboutmessage {
     box-sizing: border-box;
+    // width: 100vw;
+    // height: 100vw;
 
     .about {
-        // height: 42vw;
-        height: 100%;
+        height: 48.3rem;
+        // height: 100%;
         background: url("../assets/img/aboutus.jpg") no-repeat;
         background-size: cover;
         background-position: center;

montier/src/pages/AboutUs.vue

@@ -11,7 +11,7 @@
     <div class="" :class="mobileShow?'width-100':'width-60'">
       <div class="content-img">
         <div class="fixed-width position-relative">
-          <img src="../assets/img/about.jpg" class="procurement-max-width" alt="Procurement & Manufacture">
+          <img src="../assets/img/about.jpg" class="procurement-max-width" alt="Procurement & Manufacture" loading="lazy">
           <span @click="goPage" class="font-size-20 read-more pa-2 text-center position-absolute" :class="mobileShow?'read-more-mobile':'read-more-pc'" v-show="!mobileShow">Read more</span>
         </div>
       </div>

montier/src/pages/AllCases.vue

@@ -3,17 +3,17 @@
         <div class="cases">
             <div class="cases-item" v-for="item, index in caseList" :key="index" @click="goPage(`/projectcase/${index}`)">
                 <div class="item-img">
-                    <img :src="item.url" :alt="item.title">
+                    <img :src="item.url" :alt="item.title" loading="lazy">
                     <span class="imgbgc"></span>
                 </div>
                 <h3>{{ item.title }}</h3>
                 <div class="other">
                     <span class="other-item">
-                        <img src="../assets/img/i20.png" alt="location">
+                        <img src="../assets/img/i20.png" alt="location" loading="lazy">
                         <p>{{ item.location }}</p>
                     </span>
                     <span class="other-item">
-                        <img src="../assets/img/i21.png" alt="units">
+                        <img src="../assets/img/i21.png" alt="units" loading="lazy">
                         <p>{{ item.units }} Units</p>
                     </span>
                 </div>
@@ -31,49 +31,49 @@ let caseList = Array<any>(
         title: 'Fairmont Empress Hotel',
         location: 'Victoria, Canada',
         units: '300+',
-        url: '/src/assets/img/cases/01.jpg'
+        url: new URL("../assets/img/cases/01.jpg",import.meta.url).href
     },
     {
         title: 'Monsaraz Hilton',
         location: 'San Diego，USA',
         units: '200+',
-        url: '/src/assets/img/cases/02.jpg'
+        url: new URL("../assets/img/cases/02.jpg",import.meta.url).href
     },
     {
         title: 'Canopy By Hilton San Francisco Soma Hotel',
         location: 'San Fransisco，USA',
         units: '200+',
-        url: '/src/assets/img/cases/03.jpg'
+        url: new URL("../assets/img/cases/03.jpg",import.meta.url).href
     },
     {
         title: 'Lofts on Laurel',
         location: 'San Diego，USA',
         units: '20+',
-        url: '/src/assets/img/cases/04.jpg'
+        url: new URL("../assets/img/cases/04.jpg",import.meta.url).href
     },
     {
         title: 'State&Oak Street',
         location: 'Carlsbad，CA，USA',
         units: '20+',
-        url: '/src/assets/img/cases/05.jpg'
+        url: new URL("../assets/img/cases/05.jpg",import.meta.url).href
     },
     {
         title: '989 Johson Street',
         location: 'Victoria, Canada',
         units: '180+',
-        url: '/src/assets/img/cases/06.jpg'
+        url: new URL("../assets/img/cases/06.jpg",import.meta.url).href
     },
     {
         title: 'Tarrace Lofts',
         location: 'Vista, California, USA',
         units: '20+',
-        url: '/src/assets/img/cases/07.jpg'
+        url: new URL("../assets/img/cases/07.jpg",import.meta.url).href
     },
     {
         title: 'Ocean 17',
         location: 'Carlsbad，CA，USA',
         units: '17',
-        url: '/src/assets/img/cases/08.jpg'
+        url: new URL("../assets/img/cases/08.jpg",import.meta.url).href
     },
 )
 

montier/src/pages/Allproduct.vue

@@ -1,8 +1,9 @@
 <template>
     <div class="allproduct">
         <div class="product">
-            <div class="product-img position-relative" v-for="item, index in allList" :key="index" @click="goPage(`/productcenter/${item.name}`)">
-                <img :src="item.url" :alt="item.name">
+            <div class="product-img position-relative" v-for="item, index in allList" :key="index"
+                @click="goPage(`/productcenter/${item.name}`)">
+                <img :src="item.url" :alt="item.name" loading="lazy">
                 <span class="imgtitle position-absolute color-fff">{{ item.name }}</span>
             </div>
         </div>
@@ -13,13 +14,13 @@
 import router from '../router';
 
 let allList = Array<any>(
-    { url: '/src/assets/img/center01.jpg', name: 'Door' },
-    { url: '/src/assets/img/center02.jpg', name: 'Window' },
-    { url: '/src/assets/img/center03.jpg', name: 'Railing' },
-    { url: '/src/assets/img/center04.jpg', name: 'Building Materials' },
-    { url: '/src/assets/img/center05.jpg', name: 'Kitchen Cabinets with Customization' },
-    { url: '/src/assets/img/center06.jpg', name: 'Kitchen faucet and sink' },
-    { url: '/src/assets/img/center07.jpg', name: 'Sanitary Ware' },
+    { url: new URL("../assets/img/center01.jpg", import.meta.url).href, name: 'Door'},
+    { url: new URL("../assets/img/center02.jpg", import.meta.url).href, name: 'Window' },
+    { url: new URL("../assets/img/center03.jpg", import.meta.url).href, name: 'Railing' },
+    { url: new URL("../assets/img/center04.jpg", import.meta.url).href, name: 'Building Materials' },
+    { url: new URL("../assets/img/center05.jpg", import.meta.url).href, name: 'Kitchen Cabinets with Customization' },
+    { url: new URL("../assets/img/center06.jpg", import.meta.url).href, name: 'Kitchen faucet and sink' },
+    { url: new URL("../assets/img/center07.jpg", import.meta.url).href, name: 'Sanitary Ware' },
 )
 
 const goPage = (url: any) => {
@@ -57,7 +58,7 @@ const goPage = (url: any) => {
                 width: 100%;
                 bottom: 0;
                 left: 0;
-                height: 3rem;
+                height: 5rem;
                 background: rgba(0, 0, 0, 0.3);
                 font-size: 26px;
                 display: flex;
@@ -79,6 +80,7 @@ const goPage = (url: any) => {
 @media screen and (max-width: 960px) {
     .allproduct {
         margin-top: 2rem;
+
         .product {
             display: flex;
             flex-direction: column;
@@ -86,6 +88,7 @@ const goPage = (url: any) => {
             .product-img {
                 width: 100%;
                 height: 125vw;
+
                 img {
                     width: 100%;
                     height: 100%;

montier/src/pages/Casemessage.vue

@@ -27,14 +27,14 @@
                         </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">
+                        <img :src="casemessage.img[0].details" :alt="casemessage.img[0].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'">
+            <img :src="casemessage.img[1].details" :alt="casemessage.img[1].name" class="img" :class="mobileShow ? 'width-70' : 'width-50'" loading="lazy">
         </div>
         <div class="btn position-relative" :class="mobileShow ? 'font-size-16' : 'font-size-22'" @click="goPage">Back</div>
     </div>
@@ -57,8 +57,8 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             solutions: 'Furniture,Fixtures＆Equipment, lights fixture',
             unites: '300+',
             img: [
-                { details: '/src/assets/img/cases/01.jpg', name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel' },
-                { details: '/src/assets/img/cases/001.jpg', name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel' }
+                { 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' }
             ]
         }
     } else if (newValue == '1') {
@@ -71,8 +71,8 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             solutions: 'Furniture,Fixtures＆Equipment, doors',
             unites: '200+',
             img: [
-                { details: '/src/assets/img/cases/02.jpg', name: 'Monsaraz Hilton' },
-                { details: '/src/assets/img/cases/002.jpg', name: 'Monsaraz Hilton' }
+                { 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' }
             ]
         }
     } else if (newValue == '2') {
@@ -85,8 +85,8 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             solutions: 'Furniture,Fixtures＆Equipment,lights fixture',
             unites: '200+',
             img: [
-                { details: '/src/assets/img/cases/03.jpg', name: 'Canopy By Hilton San Francisco Soma Hotel' },
-                { details: '/src/assets/img/cases/003.jpg', name: 'Canopy By Hilton San Francisco Soma Hotel' }
+                { 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' }
             ]
         }
     } else if (newValue == '3') {
@@ -99,8 +99,8 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             solutions: 'Building Materials',
             unites: '20+',
             img: [
-                { details: '/src/assets/img/cases/04.jpg', name: 'Lofts on Laurel' },
-                { details: '/src/assets/img/cases/004.jpg', name: 'Lofts on Laurel' }
+                { 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' }
             ]
         }
     } else if (newValue == '4') {
@@ -113,8 +113,8 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             solutions: 'Building Materials',
             unites: '20+',
             img: [
-                { details: '/src/assets/img/cases/05.jpg', name: 'State&Oak Street' },
-                { details: '/src/assets/img/cases/005.jpg', name: 'State&Oak Street' }
+                { 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' }
             ]
         }
     } else if (newValue == '5') {
@@ -127,8 +127,8 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             solutions: 'Building Materials',
             unites: '180+',
             img: [
-                { details: '/src/assets/img/cases/06.jpg', name: '989 Johson Street' },
-                { details: '/src/assets/img/cases/006.jpg', name: '989 Johson Street' }
+                { 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' }
             ]
         }
     } else if (newValue == '6') {
@@ -141,8 +141,8 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             solutions: 'Building Materials',
             unites: '20+',
             img: [
-                { details: '/src/assets/img/cases/07.jpg', name: 'Tarrace Lofts' },
-                { details: '/src/assets/img/cases/007.jpg', name: 'Tarrace Lofts' }
+                { 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' }
             ]
         }
     } else if (newValue == '7') {
@@ -155,8 +155,8 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             solutions: 'Building Materials, lights fixture',
             unites: '17',
             img: [
-                { details: '/src/assets/img/cases/08.jpg', name: 'Ocean 17' },
-                { details: '/src/assets/img/cases/008.jpg', name: 'Ocean 17' }
+                { 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' }
             ]
         }
     }
@@ -165,7 +165,10 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
 let mobileShow = ref<any>(false)
 const goPage = () => {
     document.documentElement.scrollTop = 0
-    router.back()
+    router.push({
+        path: '/'
+    })
+    document.getElementById('service')?.scrollIntoView()
 }
 
 onMounted(() => {

montier/src/pages/NewsMessage.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="newsmessage">
-        <div v-if="router.currentRoute.value.params.name == 'all'">
+        <div v-if="router.currentRoute.value.params.name == 'all'" class="news">
             <Title :value="title"></Title>
-            <Service :index="2"/>
+            <Service :index="2" />
         </div>
         <div v-else>
             新闻资讯
@@ -17,20 +17,32 @@ import Title from '../components/Title.vue';
 import { ref } from 'vue'
 
 let title = ref<any>({
-  title: "News",
-  desc: ""
+    title: "News",
+    desc: ""
 })
 
 
 </script>
 
 <style scoped lang="less">
-.newsmessage{
-    // margin-top: 1vw;
+.newsmessage {
+    .news {
+        margin-bottom: 10.9rem;
+    }
 }
+
 @media screen and (max-width: 960px) {
-    .newsmessage{
-        margin-top: 10vw;
+    .newsmessage {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+        margin-top: 2rem;
+
+        .news {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            margin-bottom: 11.9rem;
+        }
     }
-}
-</style>
+}</style>

montier/src/pages/Procurement.vue

@@ -3,8 +3,8 @@
     <div class="bg-F4F4F4 pa-2 border-box" :class="mobileShow ? 'width-100' : 'width-100'">
       <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">
-          <img :src="Imglist.img[1].details" class="position-absolute second-img" :alt="Imglist.img[1].name">
+          <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">
           <!-- <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>
@@ -62,8 +62,8 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
       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.',
       img: [
-        { details: '/src/assets/img/Design01.jpg', name: 'Design' },
-        { details: '/src/assets/img/Design02.jpg', name: 'Design' },
+        { details: new URL("../assets/img/Design01.jpg", import.meta.url).href, name: 'Design' },
+        { details: new URL("../assets/img/Design02.jpg", import.meta.url).href, name: 'Design' },
       ]
     }
   }else if(newValue == '1'){
@@ -71,8 +71,8 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
       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.',
       img: [
-        { details: '/src/assets/img/After-saleService01.jpg', name: 'After -sale Service' },
-        { details: '/src/assets/img/After-saleService02.jpg', name: 'After -sale Service' },
+        { details: new URL("../assets/img/After-saleService01.jpg", import.meta.url).href, name: 'After -sale Service' },
+        { details: new URL("../assets/img/After-saleService02.jpg", import.meta.url).href, name: 'After -sale Service' },
       ]
     }
   }else if(newValue == '2'){
@@ -80,8 +80,8 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
       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.',
       img: [
-        { details: '/src/assets/img/Manufacture01.jpg', name: 'Manufacture' },
-        { details: '/src/assets/img/Manufacture02.jpg', name: 'Manufacture' },
+        { details: new URL("../assets/img/Manufacture01.jpg", import.meta.url).href, name: 'Manufacture' },
+        { details: new URL("../assets/img/Manufacture02.jpg", import.meta.url).href, name: 'Manufacture' },
       ]
     }
   }else if(newValue == '3'){
@@ -89,8 +89,8 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
       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.',
       img: [
-        { details: '/src/assets/img/Installation01.jpg', name: 'Installation' },
-        { details: '/src/assets/img/Installation02.jpg', name: 'Installation' },
+        { details: new URL("../assets/img/Installation01.jpg", import.meta.url).href, name: 'Installation' },
+        { details: new URL("../assets/img/Installation02.jpg", import.meta.url).href, name: 'Installation' },
       ]
     }
   }else if(newValue == '4'){
@@ -98,8 +98,8 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
       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.',
       img: [
-        { details: '/src/assets/img/Quality01.jpg', name: 'Quality' },
-        { details: '/src/assets/img/Quality02.jpg', name: 'Quality' },
+        { details: new URL("../assets/img/Quality01.jpg", import.meta.url).href, name: 'Quality' },
+        { details: new URL("../assets/img/Quality02.jpg", import.meta.url).href, name: 'Quality' },
       ]
     }
   }else if(newValue == '5'){
@@ -107,8 +107,8 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
       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.',
       img: [
-        { details: '/src/assets/img/Logistics01.jpg', name: 'Logistics' },
-        { details: '/src/assets/img/Logistics02.jpg', name: 'Logistics' },
+        { details: new URL("../assets/img/Logistics01.jpg", import.meta.url).href, name: 'Logistics' },
+        { details: new URL("../assets/img/Logistics02.jpg", import.meta.url).href, name: 'Logistics' },
       ]
     }
   }
@@ -206,7 +206,7 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
     height: 25vw;
   }
 
-  .titledesign {
+  /* .titledesign {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
@@ -216,19 +216,24 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => {
     .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: 30%;
+    width: 100%;
+    margin-bottom: 1rem;
 
     .juxing {
       width: 2rem;

montier/src/pages/Productmessage.vue

@@ -2,17 +2,23 @@
     <div class="productcenter">
         <div class="door-bgc position-relative">
             <img src="../assets/img/door/door.jpg" alt="Door">
-            <span class="position-absolute doortitle color-fff" :class="mobileShow ? 'font-size-16' : 'font-size-50'">Safety, Health, and Environmental
+            <span class="position-absolute doortitle color-fff"
+                :class="mobileShow ? 'font-size-16' : 'font-size-50'">Safety, Health, and Environmental
                 Protection</span>
         </div>
         <div class="box">
             <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-                <el-tab-pane :label="item.title" :name="item.title" v-for="item, index in productList" :key="index">
-                    <div>
-                        <h2>{{ item.title }}</h2>
-                    </div>
-                </el-tab-pane>
+                <el-tab-pane :label="item.title" :name="item.title" v-for="item, index in productList"
+                    :key="index"></el-tab-pane>
             </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">
+                </div>
+                <div class="allpic1" v-else>
+                    <el-empty description="No further content available at the moment" />
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -20,14 +26,23 @@
 <script setup lang="ts">
 import router from '../router';
 import { ref, watch, onMounted } from 'vue'
-import type { TabsPaneContext } from 'element-plus/lib';
+import { TabsPaneContext, formContextKey } from 'element-plus/lib';
+import useHomeStore from '../store/modules/homepage'
 
+let Home = useHomeStore()
 let productList = Array<any>([])
+let product = Array<any>([])
 let activeName = ref<any>('')
 let mobileShow = ref<any>(false)
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
-
+    if(tab.props.name == 'Entrance Doors'){
+        product = Home.$state.Entrance
+    }else if(tab.props.name == 'Interior Doors'){
+        product = Home.$state.Interior
+    }else{
+        product = []
+    }
 }
 
 onMounted(() => {
@@ -45,74 +60,84 @@ onMounted(() => {
     })
 })
 
-// if (router.currentRoute.value.params.name == 'Building Materials') {
-//     show.value = true
-//     productList = [
-//         { title: 'Floor', position: 'Floor' },
-//         { title: 'Wall', position: 'Wall' },
-//         { title: 'roof', position: 'roof' }
-//     ]
-//     activeName.value = productList[0].title
-
-// } else if(router.currentRoute.value.params.name == 'Sanitary Ware') {
-//     show.value = true
-//     productList = [
-//         { title: 'Mirror', position: 'Mirror' },
-//         { title: 'Toilet', position: 'Toilet' },
-//         { title: 'Bathtub ', position: 'Bathtub ' },
-//         { title: 'Jacuzzi', position: 'Jacuzzi' },
-//         { title: 'Faucet', position: 'Faucet' },
-//         { title: 'Sink', position: 'Sink' },
-//         { title: 'Accessories', position: 'Accessories' },
-//         { title: 'Shower Glass', position: 'ShowerGlass' },
-//         { title: 'Bathroom', position: 'Bathroom' },
-//         { title: 'Shower system', position: 'Showersystem' },
-//     ] 
-//     activeName.value = productList[0].title
-// }
-
-// watch(() => router.currentRoute.value.params.name, (newValue: any) => {
-//     if(newValue == 'Door'){
-//         console.log(123);
-
-//     }
-// }, {  })
-
 if (router.currentRoute.value.params.name == 'Door') {
     productList = [
         {
             title: 'Entrance Doors',
-            children: [
-                {}
-            ]
+            children: []
+        },
+        {
+            title: 'Interior Doors',
+            children: []
         },
-        { title: 'Interior Doors' },
-        { title: 'Fire Doors' },
-        { title: 'Sliding Doors' }
+        {
+            title: 'Fire Doors',
+            children: []
+        },
+        {
+            title: 'Sliding Doors',
+            children: []
+        }
     ]
     activeName.value = productList[0].title
+    if(activeName.value == 'Entrance Doors'){
+        product = Home.$state.Entrance
+    }else{
+        product = []
+    }
 } else if (router.currentRoute.value.params.name == 'Window') {
-    console.log(2);
+    productList = []
+    product = []
 } else if (router.currentRoute.value.params.name == 'Railing') {
-    console.log(3);
+    productList = []
+    product = []
 } else if (router.currentRoute.value.params.name == 'Building Materials') {
-    console.log(4);
+    productList = []
+    product = []
 } else if (router.currentRoute.value.params.name == 'Kitchen Cabinets with Customization') {
-    console.log(5);
+    productList = []
+    product = []
 } else if (router.currentRoute.value.params.name == 'Kitchen faucet and sink') {
-    console.log(6);
+    productList = []
+    product = []
 } else if (router.currentRoute.value.params.name == 'Sanitary Ware') {
-    console.log(7);
+    productList = []
+    product = []
 }
 
+
 </script>
 
 <style scoped lang="less">
-.productcenter {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
+.allpic {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    overflow-y: auto;
+
+    .pic {
+        width: 23%;
+        height: 15vw;
+        margin-right: 2rem;
+        margin-bottom: 2rem;
+        overflow: hidden;
 
+        img {
+            width: 100%;
+            height: 100%;
+            transition: 0.5s linear;
+        }
+        img:hover{
+            scale: 1.2;
+        }
+    }
+}
+.allpic1{
+    width: 100%;
+    text-align: center;
+}
+
+.productcenter {
     .door-bgc {
         width: 100%;
         height: 60%;
@@ -123,10 +148,10 @@ if (router.currentRoute.value.params.name == 'Door') {
         }
 
         .doortitle {
-            bottom: 0;
+            bottom: 0.5%;
             left: 0;
             width: 100%;
-            z-index: 999;
+            z-index: 2;
             height: 14%;
             display: flex;
             justify-content: center;
@@ -137,13 +162,43 @@ if (router.currentRoute.value.params.name == 'Door') {
 
     .box {
         width: 90%;
-        margin: 2rem auto 0;
+        margin: 1rem auto 0;
+
+        .pagina {
+            float: right;
+            // margin-bottom: 2rem;
+        }
     }
 }
 
 @media screen and (max-width: 960px) {
     .productcenter {
-        margin-top: 14vw;
+        .door-bgc {
+            width: 100%;
+            height: 35%;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .box {
+            width: 90%;
+            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

@@ -27,7 +27,7 @@
       <swiper-slide  v-for="(item,index2) in bannerList" class="hover-scale cursor-pointer" :key="index2" v-if="selectIndex === 2">
         <div>
           <div class="case-img overflow-hidden position-relative" @click="goPage(`/projectcase/${index}`)">
-            <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase1" />
+            <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase1" loading="lazy"/>
             <div class="position-absolute color-fff project-center-title">
               <h3 class="font-700">{{ item.name }}</h3>
               <h3 class="font-700">{{ item.address }}</h3>
@@ -39,7 +39,7 @@
       <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}`)">
-            <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase" />
+            <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase" loading="lazy"/>
             <h3 class="position-absolute color-fff project-center-title1">{{ item.name }}</h3>
           </div>
         </div>
@@ -49,7 +49,7 @@
       </div> -->
     </swiper>
     <p v-if="selectIndex == 2" class="btn" @click="goPage('/projectcase')">EXLORE ALL PROJECTS</p>
-    <p v-if="selectIndex == 3" class="btn">EXLORE ALL PROJECTS</p>
+    <p v-if="selectIndex == 3" class="btn" @click="goPage('/productcenter')">EXLORE ALL PROJECTS</p>
   </div>
 </template>
 
@@ -205,6 +205,9 @@ const changeindex = () => {
   .hover-scale:hover .project-center-title{
     background: #fa8106;
   }
+  .hover-scale:hover .project-center-title1{
+    background: #fa8106;
+  }
   .project-center-title{
     bottom: 0;
     left: 0;
@@ -213,7 +216,7 @@ const changeindex = () => {
     text-align: left;
     background: rgba(0,0,0,.4);
     width: 100%;
-    padding: 0.5rem 1rem;
+    padding: 1rem 1rem;
     display: flex;
     flex-direction: column;
     justify-content: space-between;

montier/src/pages/Service.vue

@@ -5,25 +5,25 @@
             <div class="">
                 <div class="gallery-container">
                     <div class="gallery">
-                        <div class="gallery-item position-relative" v-for="item, index in servicelist" :key="index" @click="index==1 ? '' : goPage('/service', index > 1 ? index-1 : index)">
+                        <div class="gallery-item position-relative" v-for="item, index in servicelist" :key="index"
+                            @click="index == 1 ? '' : goPage('/service', index > 1 ? index - 1 : index)">
                             <span class="position-absolute" :class="index == 1 ? 'imgtitle1' : 'imgtitle'">
                                 <p class="title">{{ item.title }}</p>
                             </span>
-                            <img :src="item.detail" :alt="item.title"/>
+                            <img :src="item.detail" :alt="item.title" loading="lazy"/>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <!-- 新闻 -->
-        <swiper :modules="modules" :slides-per-View='per1' :space-between="50" :loop="true" :navigation="true"
+        <swiper :modules="modules" :slides-per-view="per1" :space-between="50" :loop="true" :navigation="true"
             class="service-img" v-else>
             <swiper-slide v-for="item, index in newslist" :key="index" class="hover-scale"
                 @click="goPage1(`/news/${item.title}`)">
-                <div>
+                <div class="case">
                     <div class="case-img overflow-hidden position-relative">
-                        <img src="../assets/img/information.jpg" alt="information"
-                            class="width-100 d-block position-relative">
+                        <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative" loading="lazy">
                     </div>
                     <div class="project-center-title1">
                         <p class="font-size-12 newsdate">2023-08-17</p>
@@ -48,18 +48,14 @@ import { ref, onMounted } from 'vue'
 import router from '../router';
 
 let modules = [Navigation, Pagination, Scrollbar, A11y]
-let per = ref<any>(5)
-let per1 = ref<any>(3)
+let per1 = ref<any>(2)
 const props = defineProps(['index'])
 
 let selectIndex = props.index
 
 let newslist = ref<any>([
-    { detail: new URL("../assets/img/page01.jpg", import.meta.url).href, title: 'Design' },
-    { detail: new URL("../assets/img/page02.jpg", import.meta.url).href, title: 'Procurement & Manufacture' },
-    { detail: new URL("../assets/img/page03.jpg", import.meta.url).href, title: 'Logistic and warehouseing' },
-    { detail: new URL("../assets/img/page04.jpg", import.meta.url).href, title: 'Installation' },
-    { detail: new URL("../assets/img/page05.jpg", import.meta.url).href, title: 'Quality Control' },
+    { detail: new URL("../assets/img/information.jpg", import.meta.url).href, title: 'What can we do for you?' },
+    { detail: new URL("../assets/img/page02.jpg", import.meta.url).href, title: 'Growth History of MONTIER' }
 ])
 
 let servicelist = ref<any>([
@@ -87,19 +83,19 @@ const goPage1 = (url: any) => {
 }
 
 onMounted(() => {
-    if (document.body.offsetWidth < 1000) {
-        per.value = 2
+    if (document.body.offsetWidth < 960) {
         per1.value = 1
+    } else if (newslist.value.length < 3) {
+        per1.value = newslist.value.length
     } else {
-        per.value = 5
         per1.value = 3
     }
     window.addEventListener('resize', function () {
-        if (document.body.offsetWidth < 1000) {
-            per.value = 2
+        if (document.body.offsetWidth < 960) {
             per1.value = 1
+        } else if (newslist.value.length < 3) {
+            per1.value = newslist.value.length
         } else {
-            per.value = 5
             per1.value = 3
         }
     })
@@ -135,7 +131,8 @@ onMounted(() => {
         display: flex;
         align-items: center;
         justify-content: center;
-        .imgtitle1{
+
+        .imgtitle1 {
             display: none;
         }
 
@@ -155,7 +152,7 @@ onMounted(() => {
             transition: 0.5s linear;
 
             .title {
-                -webkit-box-reflect: below -5px -webkit-linear-gradient(transparent 40%, #fff 100% );
+                -webkit-box-reflect: below -5px -webkit-linear-gradient(transparent 40%, #fff 100%);
                 overflow: hidden;
             }
         }
@@ -170,12 +167,13 @@ onMounted(() => {
         // img:hover{
         //     transform: scale(1.2);
         // }
-        .imgtitle:hover{
+        .imgtitle:hover {
             bottom: 0;
             transform: scale(1.2);
             background: orange;
         }
-        .imgtitle:hover + img{
+
+        .imgtitle:hover+img {
             transform: scale(1.2);
         }
     }
@@ -228,15 +226,27 @@ onMounted(() => {
 }
 
 .service-img {
-    padding: 0 20px;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    // padding: 0 20px;
 }
 
 .hover-scale {
-    .case-img {
-        cursor: pointer;
-
-        img {
-            transition: all 1s;
+    .case {
+        width: 70%;
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+
+        .case-img {
+            cursor: pointer;
+
+            img {
+                width: 100%;
+                height: 100%;
+                transition: all 1s;
+            }
         }
     }
 
@@ -291,29 +301,31 @@ onMounted(() => {
     }
 }
 
-:deep(.swiper-button-prev:after) {
-    display: none;
-}
+// :deep(.swiper-button-prev:after) {
+//     display: none;
+// }
 
-:deep(.swiper-button-next:after) {
-    display: none;
-}
+// :deep(.swiper-button-next:after) {
+//     display: none;
+// }
 
 /*自定义样式*/
 :deep(.swiper-button-prev) {
-    color: transparent;
-    background: url('../assets/img/left.png') no-repeat;
-    background-size: 100%;
-    background-position: left;
-    width: 2vw;
+    background: rgba(0, 0, 0, 0.2);
+    // color: transparent;
+    // background: url('../assets/img/left.png') no-repeat;
+    // background-size: 100%;
+    // background-position: left;
+    // width: 2vw;
 }
 
 :deep(.swiper-button-next) {
-    color: transparent;
-    background: url('../assets/img/right.png') no-repeat;
-    background-size: 100%;
-    background-position: right;
-    width: 2vw;
+    background: rgba(0, 0, 0, 0.2);
+    // color: transparent;
+    // background: url('../assets/img/right.png') no-repeat;
+    // background-size: 100%;
+    // background-position: right;
+    // width: 2vw;
 }
 
 .bannerImg {
@@ -331,7 +343,7 @@ onMounted(() => {
     }
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 1000px) {
     .gallery-container {
         scale: 0.4;
         margin: 0 0 10vw 0;
@@ -373,7 +385,7 @@ onMounted(() => {
 
     .bannerImg {
         margin-top: 50px;
-        width: 100vw;
+        width: 100%;
 
         :deep(.swiper-button-prev) {
             width: 40px;
@@ -383,4 +395,5 @@ onMounted(() => {
             width: 40px;
         }
     }
-}</style>
+}
+</style>

montier/src/pages/contactUs.vue

@@ -146,7 +146,7 @@ onMounted(async ()=>{
 .contactUs {
     width: 100%;
     // text-align: center;
-    // margin-top: 4.5vw;
+    margin-bottom: 12.4vw;
     .btn{
         margin-top: 3rem;
         position: relative;

montier/src/router/index.ts

@@ -28,15 +28,6 @@ const routes = [
             description: ''
         },
     },
-    // {
-    //     path: '/casedetail',
-    //     component: () => import('../pages/CaseDetails.vue'),
-    //     meta: { title: 'Service' },
-    //     content: {
-    //         keywords: 'FFE Building materials Smart hotelEnergy Saving',
-    //         description: ''
-    //     },
-    // },
     {
         path: '/contactUs',
         component: () => import('../pages/contactUs.vue'),

montier/src/store/modules/homepage.ts

@@ -3,7 +3,46 @@ import { defineStore } from "pinia";
 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' },
+            ),
+            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' },
+            )
         }
     },