02

montier/package.json

@@ -9,16 +9,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
+    "axios": "^1.5.0",
+    "docx-preview": "^0.1.18",
     "element-plus": "^2.3.9",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
     "pinia": "^2.1.6",
     "swiper": "7.4.1",
-    "wow.js": "^1.2.2",
-    "wowjs": "^1.1.3",
-    "animate.css": "^4.1.1",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.2.4",
+    "wow.js": "^1.2.2",
+    "wowjs": "^1.1.3"
   },
   "devDependencies": {
     "@types/node": "^20.4.9",

montier/src/components/HeaderPage.vue

@@ -4,37 +4,37 @@ import { useRouter } from "vue-router";
 let caselist = ref<any>([
   {
     detail: {
-      title: 'Door', position: 'Door'
+      title: 'Hotel FFE', position: 'Hotel FFE', name: 0
     }
   },
   {
     detail: {
-      title: 'Window', position: 'Window'
+      title: 'Door', position: 'Door', name: 1
     }
   },
   {
     detail: {
-      title: 'Railing', position: 'Railing'
+      title: 'Window', position: 'Window', name: 2
     }
   },
   {
     detail: {
-      title: 'Building Materials', position: 'Building Materials',
+      title: 'Railing', position: 'Railing', name: 3
     }
   },
   {
     detail: {
-      title: 'Kitchen Cabinets with Customization', position: 'Kitchen Cabinets with Customization'
+      title: 'Building Materials', position: 'Building Materials', name: 4
     }
   },
   {
     detail: {
-      title: 'Kitchen faucet and sink', position: 'Kitchen faucet and sink'
+      title: 'Kitchen Cabinets with Customization', position: 'Kitchen Cabinets with Customization', name: 5
     }
   },
   {
     detail: {
-      title: 'Sanitary Ware', position: 'Sanitary Ware',
+      title: 'Sanitary Ware', position: 'Sanitary Ware', name: 6
     }
   }
 ])
@@ -149,7 +149,7 @@ const getProduct = async () => {
                 <div class="menu-container mt-1">
                   <ul>
                     <li class="nav-item text-center" v-for="(item, index) in caselist" :key="index"
-                      @click="goPage(`/productcenter/${item.detail.position}`)">
+                      @click="goPage(`/productcenter/${item.detail.name}`)">
                       <div>
                         <div class="nav-item-link px-16-px text-overflow-ellipsis" :title="item.detail.title">{{
                           item.detail.title }}</div>

montier/src/pages/AboutUs.vue

@@ -72,7 +72,7 @@ const goPage = () => {
 }
 .procurement-max-width{
   width: 100%;
-  height: 100%;
+  height: 35rem;
 }
 .second-img{
   top: 50%;
@@ -111,6 +111,8 @@ const goPage = () => {
   /*text-indent: 20px;*/
 }
 @media (max-width: 1000px)  {
-
+  .procurement-max-width{
+    height: 18rem;
+  }
 }
 </style>

montier/src/pages/NewsMessage.vue

@@ -45,4 +45,5 @@ let title = ref<any>({
             margin-bottom: 11.9rem;
         }
     }
-}</style>
+}
+</style>

montier/src/pages/Productmessage.vue

@@ -1,10 +1,9 @@
 <template>
     <div class="productcenter">
         <div class="door-bgc position-relative">
-            <img src="../assets/img/door/door.jpg" alt="Door">
+            <img :src="banner.src" alt="Door">
             <span class="position-absolute doortitle color-fff font-bold"
-                :class="mobileShow ? 'font-size-16' : 'font-size-50'">Safety, Health, and Environmental
-                Protection</span>
+                :class="mobileShow ? 'font-size-16' : 'font-size-50'" v-if="banner.title != ''">{{ banner.title }}</span>
         </div>
         <div class="box">
             <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
@@ -43,6 +42,11 @@ import useHomeStore from '../store/modules/homepage'
 let Home = useHomeStore()
 let productList = Array<any>([])
 let product = Array<any>([])
+let banner = ref({
+    src: '',
+    title: '',
+    name: ''
+})
 let activeName = ref<any>('')
 let mobileShow = ref<any>(false)
 
@@ -72,7 +76,7 @@ onMounted(() => {
     })
 })
 
-if (router.currentRoute.value.params.name == 'Door') {
+if (router.currentRoute.value.params.name == '1') {
     productList = [
         {
             title: 'Entrance Doors'
@@ -87,22 +91,37 @@ if (router.currentRoute.value.params.name == 'Door') {
             title: 'Sliding Doors'
         }
     ]
+    banner.value = {
+        src: new URL("../assets/img/door/door.jpg", import.meta.url).href,
+        title: 'Safety, Health, and Environmental Protection',
+        name: 'Door'
+    }
     activeName.value = productList[0].title
     product = Home.$state.Entrance
-} else if (router.currentRoute.value.params.name == 'Window') {
+} else if (router.currentRoute.value.params.name == '2') {
     productList = []
     product = []
-} else if (router.currentRoute.value.params.name == 'Railing') {
+} else if (router.currentRoute.value.params.name == '3') {
     productList = []
     product = []
-} else if (router.currentRoute.value.params.name == 'Building Materials') {
+} else if (router.currentRoute.value.params.name == '4') {
     productList = []
     product = []
-} else if (router.currentRoute.value.params.name == 'Kitchen Cabinets with Customization') {
+} else if (router.currentRoute.value.params.name == '5') {
     productList = []
-    product = []
-} else if (router.currentRoute.value.params.name == 'Kitchen faucet and sink') {
+    banner.value = {
+        src: new URL("../assets/img/Kitchen/01.jpg", import.meta.url).href,
+        title: '',
+        name: 'Kitchen'
+    }
+    product = Home.$state.Cabinet
+} else if (router.currentRoute.value.params.name == '0') {
     productList = []
+    banner.value = {
+        src: new URL('../assets/img/FFE/1.jpg', import.meta.url).href,
+        title: '',
+        name: 'Hotel FFE'
+    }
     product = []
 } else if (router.currentRoute.value.params.name == 'Sanitary Ware') {
     productList = []
@@ -164,13 +183,13 @@ if (router.currentRoute.value.params.name == 'Door') {
         .all-pic {
             width: 95%;
             display: flex;
-            flex-wrap: wrap;
-            margin: auto;
+            flex-direction: column;
             margin-top: 2rem;
+            align-items: center;
 
             .pic1 {
-                width: 30%;
-                height: 20rem;
+                width: 70%;
+                // height: 20rem;
                 margin: 0 3rem 3rem 0;
                 overflow: hidden;
 
@@ -196,7 +215,7 @@ if (router.currentRoute.value.params.name == 'Door') {
 .productcenter {
     .door-bgc {
         width: 100%;
-        height: 55rem;
+        height: 95vh;
 
         img {
             width: 100%;

montier/src/pages/ProjectCase.vue

@@ -22,7 +22,7 @@
         v-else-if="selectIndex === 3">
         <div>
           <div class="case-img overflow-hidden position-relative"
-            @click="goPage(`/productcenter/${item.name}`, 'productCenter')">
+            @click="goPage(`/productcenter/${item.position}`, '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>
@@ -58,13 +58,13 @@ let bannerList = ref<any>([
   { 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, 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' },
+  { detail: new URL('../assets/img/center06.jpg', import.meta.url).href, name: 'Hotel FFE', position: 0 },
+  { detail: new URL("../assets/img/center01.jpg", import.meta.url).href, name: 'Doors', position: 1 },
+  { detail: new URL("../assets/img/center02.jpg", import.meta.url).href, name: 'Windows', position: 2 },
+  { detail: new URL("../assets/img/center03.jpg", import.meta.url).href, name: 'Railings', position: 3 },
+  { detail: new URL("../assets/img/center04.jpg", import.meta.url).href, name: 'Building Materials', position: 4 },
+  { detail: new URL("../assets/img/center05.jpg", import.meta.url).href, name: 'Kitchen Cabinets with Customizations', position: 5 },
+  { detail: new URL("../assets/img/center07.jpg", import.meta.url).href, name: 'Sanitary Wares', position: 6 },
 ])
 let screenWidth = ref<any>('')
 let mobileShow = ref<any>(false)

montier/src/pages/Service.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="width-100 bannerImg wow animated fadeInUp">
+    <div class="width-100 bannerImg wow animated fadeInUp" :class="selectIndex == 1 ? 'bannerImg1' : ''">
         <!-- 服务 -->
         <div v-if="selectIndex == 1">
-            <div class="">
+            <div class="servicebg">
                 <div class="gallery-container">
                     <div class="gallery">
                         <div class="gallery-item position-relative" v-for="item, index in servicelist" :key="index"
@@ -22,7 +22,7 @@
             <!-- <swiper-slide v-for="item, index in newslist" :key="index" class="hover-scale"
                 @click="goPage1(`/news/${item.title}`)"> -->
             <swiper-slide v-for="item, index in newslist" :key="index" class="hover-scale">
-                <div class="case">
+                <div class="case" @click="goPage1(`/news/${item.position}`)">
                     <div class="case-img overflow-hidden position-relative">
                         <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative"
                             loading="lazy">
@@ -55,8 +55,8 @@ const props = defineProps(['index'])
 let selectIndex = props.index
 
 let newslist = ref<any>([
-    { 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' }
+    { detail: new URL("../assets/img/information.jpg", import.meta.url).href, title: 'What can we do for you?', position: 0 },
+    { detail: new URL("../assets/img/page02.jpg", import.meta.url).href, title: 'Growth History of MONTIER', position: 1 }
 ])
 
 let servicelist = ref<any>([
@@ -114,16 +114,16 @@ onMounted(() => {
     padding: 0;
     box-sizing: border-box;
 }
-
 .gallery-container {
     margin: 25rem 0;
     display: grid;
     place-content: center;
+    margin-right: 25%;
 }
 
 .gallery {
     // --s: 20vw;
-    scale: 1.35;
+    scale: 1.25;
     /* control the size */
     --g: -2px;
     /* control the gap */
@@ -132,7 +132,7 @@ onMounted(() => {
     .gallery-item {
         // position: relative;
         overflow: hidden;
-        background: rgba(191, 191, 191, 1);
+        background: #ffffff;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -332,7 +332,12 @@ onMounted(() => {
     // background-position: right;
     // width: 2vw;
 }
-
+.bannerImg1{
+    width: 100% !important;
+    background: url('../assets/img/servicebg.jpg') no-repeat;
+    background-size: 150%;
+    background-position: center;
+}
 .bannerImg {
     width: 80vw;
     margin: 0 auto 10px;

montier/src/store/modules/homepage.ts

@@ -76,6 +76,22 @@ const useHomeStore = defineStore('Home', {
                         { detail: new URL("../../assets/img/Door/108.png", import.meta.url).href, name: 'Interior Doors' }
                     ]
                 },
+            ),
+            Cabinet: Array<any>(
+                {
+                    name: 'Kitchen Cabinet',
+                    children: [
+                        { detail: new URL("../../assets/img/Kitchen/02.jpg", import.meta.url).href, name: 'Kitchen Cabinet' },
+                        { detail: new URL("../../assets/img/Kitchen/03.jpg", import.meta.url).href, name: 'Kitchen Cabinet' },
+                        { detail: new URL("../../assets/img/Kitchen/04.jpg", import.meta.url).href, name: 'Kitchen Cabinet' },
+                    ]
+                },
+                {
+                    name: 'Kitchen Sinks/Faucets',
+                    children: [
+                        { detail: new URL("../../assets/img/Kitchen/05.jpg", import.meta.url).href, name: 'Kitchen Cabinet' },
+                    ]
+                }
             )
         }
     },