0912，所有产品均已放入，新闻页面也放入，路由也已经更改

montier/src/api/index.ts

@@ -0,0 +1,2 @@
+import request from '../utils/index'
+export const sendEmail = (data: any) => request.post('/sendFrom', data)

montier/src/components/HeaderPage.vue

@@ -9,12 +9,12 @@ let caselist = ref<any>([
   },
   {
     detail: {
-      title: 'Doors', position: 'Door', name: 1
+      title: 'Doors', position: 'Doors', name: 1
     }
   },
   {
     detail: {
-      title: 'Windows', position: 'Window', name: 2
+      title: 'Windows', position: 'Windows', name: 2
     }
   },
   {
@@ -29,7 +29,7 @@ let caselist = ref<any>([
   },
   {
     detail: {
-      title: 'Kitchen Faucets/Sinks/Cabinets', position: 'Kitchen Faucets/Sinks/Cabinets', name: 5
+      title: 'Kitchen Faucets/Sinks/Cabinets', position: 'Kitchen Faucets Sinks Cabinets', name: 5
     }
   },
   {
@@ -73,16 +73,6 @@ const windowScrollListener = () => {
     scrollTopShow.value = false
   }
 }
-const goPage1 = (url: any, index: any) => {
-  document.documentElement.scrollTop = 0
-  clickStatus.value = false
-  router.push({
-    path: url,
-    query: {
-      index: index
-    }
-  })
-}
 // 跳转页面
 const goPage = (url: any) => {
   document.documentElement.scrollTop = 0
@@ -98,12 +88,12 @@ const mobheadFun = async () => {
 }
 const getProduct = async () => {
   productListArr.value = [
-    [{ type: 'Design', position: 'Design' }],
-    [{ type: 'After -sale Service', position: 'AsS' }],
-    [{ type: 'Manufacture', position: 'Manufacture' }],
-    [{ type: 'Installation', position: 'Installaion' }],
-    [{ type: 'Quality', position: 'Quality' }],
-    [{ type: 'Logistics', position: 'Logistics' }]
+    { type: 'Design', position: 'Design' },
+    { type: 'Manufacture', position: 'Manufacture' },
+    { type: 'Installation', position: 'Installaion' },
+    { type: 'Quality', position: 'Quality' },
+    { type: 'Logistics', position: 'Logistics' },
+    { type: 'After -sale Service', position: 'AsS' },
   ]
   projectlist.value = [
     { title: 'Fairmont Empress Hotel', position: 'FEH' },
@@ -149,7 +139,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.name}`)">
+                      @click="goPage(`/productcenter/${item.detail.position}`)">
                       <div>
                         <div class="nav-item-link px-16-px text-overflow-ellipsis" :title="item.detail.title">{{
                           item.detail.title }}</div>
@@ -166,8 +156,8 @@ const getProduct = async () => {
                 <div class="menu-container mt-1">
                   <ul>
                     <li class="nav-item text-center" v-for="(item, index) in productListArr" :key="index">
-                      <div @click="goPage1('/service', index)">
-                        <div class="nav-item-link px-16-px text-overflow-ellipsis" :title="item[0].type">{{ item[0].type
+                      <div @click="goPage(`/service/${item.type}`)">
+                        <div class="nav-item-link px-16-px text-overflow-ellipsis" :title="item.type">{{ item.type
                         }}</div>
                       </div>
                     </li>
@@ -185,7 +175,7 @@ const getProduct = async () => {
                     <li class="nav-item text-center" v-for="(item, index) in projectlist" :key="index">
                       <div>
                         <div class="nav-item-link px-16-px text-overflow-ellipsis"
-                          @click="goPage(`/projectcase/${index}`)">{{ item.title }}</div>
+                          @click="goPage(`/projectcase/${item.title}`)">{{ item.title }}</div>
                       </div>
                     </li>
                   </ul>
@@ -242,14 +232,14 @@ const getProduct = async () => {
                 <span>Service</span>
               </template>
               <el-menu-item :index="'2-' + index" v-for="(item, index) in productListArr"
-                @click="goPage1('/service', index)" :key="index">{{ item[0].type }}</el-menu-item>
+                @click="goPage(`/service/${item.type}`)" :key="index">{{ item.type }}</el-menu-item>
             </el-sub-menu>
             <el-sub-menu index="3">
               <template #title>
                 <span>Project Case</span>
               </template>
               <el-menu-item :index="'3-' + index + 1" v-for="item, index in projectlist" :key="index"
-                @click="goPage(`/projectcase/${index}`)">
+                @click="goPage(`/projectcase/${item.title}`)">
                 <span>{{ item.title }}</span>
               </el-menu-item>
             </el-sub-menu>

montier/src/pages/Casemessage.vue

@@ -89,7 +89,7 @@ let iconList = Array<any>(
 )
 
 watch(() => router.currentRoute.value.params.name, (newValue: any) => {
-    if (newValue == '0') {
+    if (newValue == 'Fairmont Empress Hotel') {
         casemessage = {
             title: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel',
             country: 'Victoria, Canada',
@@ -122,7 +122,7 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
                 ]
             },
         }
-    } else if (newValue == '1') {
+    } else if (newValue == 'Monsaraz Hilton') {
         casemessage = {
             title: 'Monsaraz Hilton',
             country: 'San Diego，USA',
@@ -160,7 +160,7 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
                 ]
             },
         }
-    } else if (newValue == '2') {
+    } else if (newValue == 'Canopy By Hilton San Francisco Soma Hotel') {
         casemessage = {
             title: 'Canopy By Hilton San Francisco Soma Hotel',
             country: 'San Fransisco，USA',
@@ -199,7 +199,7 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
                 ]
             },
         }
-    } else if (newValue == '3') {
+    } else if (newValue == 'Lofts on Laurel') {
         casemessage = {
             title: 'Lofts on Laurel',
             country: 'San Diego，USA',
@@ -232,7 +232,7 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
                 ]
             },
         }
-    } else if (newValue == '4') {
+    } else if (newValue == 'State&Oak Street') {
         casemessage = {
             title: 'State&Oak Street',
             country: 'Carlsbad，CA，USA',
@@ -268,7 +268,7 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
                 ]
             },
         }
-    } else if (newValue == '5') {
+    } else if (newValue == '989 Johson Street') {
         casemessage = {
             title: '989 Johson Street',
             country: 'Victoria, Canada',
@@ -303,7 +303,7 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
                 ]
             },
         }
-    } else if (newValue == '6') {
+    } else if (newValue == 'Tarrace Lofts') {
         casemessage = {
             title: 'Tarrace Lofts',
             country: 'Vista, California, USA',
@@ -336,7 +336,7 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
                 ]
             },
         }
-    } else if (newValue == '7') {
+    } else if (newValue == 'Ocean 17') {
         casemessage = {
             title: 'Ocean 17',
             country: 'Carlsbad，CA，USA',

montier/src/pages/NewsMessage.vue

@@ -5,7 +5,27 @@
             <Service :index="2" />
         </div>
         <div v-else>
-            
+            <div class="news-message">
+                <div class="news-title">
+                    <h1 v-if="newmessage.title"><strong>{{ newmessage.title }}</strong></h1>
+                    <h4 v-if="newmessage.date">{{ newmessage.date }}</h4>
+                </div>
+                <div class="content">
+                    <div class="contentmessage" v-if="newmessage.others && newmessage.others.length != 0">
+                        <div class="content-img" v-if="newmessage.banner" text-align="left">
+                            <img :src="newmessage.banner.detail" :alt="newmessage.banner.name" text-align="left">
+                        </div>
+                        <div class="content-item" v-for="item, index in newmessage.others" :key="index">
+                            <h3><strong>{{ item.position + ". " + item.title }}</strong></h3>
+                            <span v-html="item.content" class="font-size-18"></span>
+                            <div class="item-img" v-if="item.children">
+                                <img :src="item.children.detail" :alt="item.children.name">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="btn font-size-24" @click="goPage">Back</div>
+            </div>
         </div>
     </div>
 </template>
@@ -14,17 +34,94 @@
 import router from '../router';
 import Service from './Service.vue';
 import Title from '../components/Title.vue';
-import { ref } from 'vue'
+import { ref, onMounted, watch } from 'vue'
+import useHomeStore from '../store/modules/homepage'
+
+let Home = useHomeStore()
+let newmessage = ref<any>({})
 
 let title = ref<any>({
     title: "News",
     desc: ""
 })
 
+const goPage = () => {
+    localStorage.setItem('scrollPosition', 'informationCenter')
+    router.push('/')
+}
+
+onMounted(() => {
+    watch(() => router.currentRoute.value.params.name, (newValue: any) => {
+        Home.$state.News.map((li: any) => {
+            if (li.position == newValue) {
+                newmessage.value = li
+            }
+        })
+    }, { immediate: true, deep: true })
+})
+
 
 </script>
 
 <style scoped lang="less">
+.news-message {
+    width: 100%;
+    .btn{
+        width: 90%;
+        background-color: rgba(0, 0, 0, 0.5);
+        padding: 1rem;
+        text-align: center;
+        margin: 1rem auto;
+        color: #fff;
+        cursor: pointer;
+    }
+    .btn:hover{
+        color: #fa8106;
+    }
+
+    .news-title {
+        box-sizing: border-box;
+        padding: 2rem 0;
+        width: 100%;
+        text-align: center;
+
+        h1 {
+            margin-bottom: 1rem;
+        }
+    }
+
+    .content {
+        box-sizing: border-box;
+        width: 100%;
+        margin: 3rem 0 1rem 0;
+        border-top: 1px solid #333;
+        padding: 1rem;
+
+        // display: flex;
+        .contentmessage {
+            width: 100%;
+
+            .content-img {
+                float: right;
+                margin-left: 1rem;
+            }
+            .content-item{
+                width: 100%;
+                margin-bottom: 1.5rem;
+                h3{
+                    margin-bottom: 0.5rem;
+                }
+                span{
+                    line-height: 2rem;
+                }
+                .item-img{
+                    margin: 1rem 0;
+                }
+            }
+        }
+    }
+}
+
 .newsmessage {
     .news {
         margin-bottom: 10.9rem;
@@ -45,5 +142,4 @@ let title = ref<any>({
             margin-bottom: 11.9rem;
         }
     }
-}
-</style>
+}</style>

montier/src/pages/Procurement.vue

@@ -2,7 +2,7 @@
   <div class="procurement m-auto align-items-center" :class="mobileShow ? 'width-90' : 'd-flex  width-80'">
     <div class="bg-F4F4F4 pa-2 border-box" :class="mobileShow ? 'width-100' : 'width-100'">
       <div class="content-img">
-        <div class="fixed-width position-relative">
+        <div class="fixed-width position-relative" v-if="Imglist.img">
           <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">
@@ -57,8 +57,9 @@ onMounted(async () => {
   })
 })
 
-watch(() => router.currentRoute.value.query.index, (newValue: any) => {
-  if (newValue == '0') {
+watch(() => router.currentRoute.value.params.name, (newValue: any) => {
+  console.log(newValue)
+  if (newValue == 'Design') {
     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.',
@@ -67,7 +68,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 == 'After -sale Service') {
     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.',
@@ -76,7 +77,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 == 'Manufacture') {
     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.',
@@ -85,7 +86,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 == 'Installation') {
     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.',
@@ -94,7 +95,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 == 'Quality') {
     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.',
@@ -103,7 +104,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 == 'Logistics') {
     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.',

montier/src/pages/Productmessage.vue

@@ -1,65 +1,17 @@
 <template>
-    <div class="productcenter"
-        v-if="router.currentRoute.value.params.name != '3' && router.currentRoute.value.params.name != '6' && router.currentRoute.value.params.name != '2' && router.currentRoute.value.params.name != '4' && router.currentRoute.value.params.name != '5'">
-        <div class="door-bgc position-relative">
-            <img :src="banner.src" :alt="banner.name">
-            <span class="position-absolute doortitle color-fff font-bold"
-                :class="mobileShow ? 'font-size-16' : 'font-size-50'" v-if="banner.title && banner.title != ''">{{
-                    banner.title }}</span>
-        </div>
-        <div class="box">
-            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" v-if="productList.length != 0">
-                <el-tab-pane :label="item.title" :name="item.title" v-for="item, index in productList" :key="index">
-                    <div class="tabs-pic">
-                        <div class="top-pic">
-                            <img :src="doorproduct.top.detail" :alt="doorproduct.name">
-                        </div>
-                        <div class="footer-pic">
-                            <div class="footer-left">
-                                <img :src="doorproduct.footer.detail" :alt="doorproduct.name">
-                            </div>
-                            <div class="footer-right">
-                                <img :src="doorproduct.footer1.detail" :alt="doorproduct.name">
-                                <img :src="doorproduct.footer2.detail" :alt="doorproduct.name">
-                            </div>
-                        </div>
-                    </div>
-                </el-tab-pane>
-            </el-tabs>
-            <div class="allpic" v-if="router.currentRoute.value.params.name != '1'">
-                <div v-for="item2, index2 in product" :key="index2" class="pic" v-if="product.length != 0">
-                    <el-divider content-position="center" border-style="dashed" v-if="item2.name && item2.name != ''">{{
-                        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" />
-                </div>
-            </div>
-        </div>
-        <div class="color-333 btn position-relative" :class="mobileShow ? 'font-size-20' : 'font-size-26'" @click="goPage">
-            Back</div>
-    </div>
-    <div class="productcenter" v-else>
+    <div class="productcenter">
         <div class="railling-bgc">
             <div class="railling-banner">
-                <div class="banner-left">
+                <div class="banner-left" v-if="productmessage.banner1">
                     <img :src="productmessage.banner1.detail" :alt="productmessage.banner1.name">
                     <span class="banner-title">{{ productmessage.banner1.title }}</span>
                 </div>
                 <div class="banner-right">
-                    <div class="icon-img">
+                    <div class="icon-img" v-if="productmessage.banner2">
                         <img :src="productmessage.banner2.detail" :alt="productmessage.banner2.name">
                         <div class="banner-icon" v-if="productmessage.tips && productmessage.tips.length != 0">
-                            <span class="icon" :class="router.currentRoute.value.params.name == '5' ? 'kiticon' : ''" v-for="item, index in productmessage.tips" :key="index">
+                            <span class="icon" :class="router.currentRoute.value.params.name == '5' ? 'kiticon' : ''"
+                                v-for="item, index in productmessage.tips" :key="index">
                                 <img :src="item.detail" :alt="item.name">
                                 <span>{{ item.title }}</span>
                             </span>
@@ -70,16 +22,17 @@
                         </div>
                     </div>
                 </div>
-                <div class="banner">
+                <div class="banner" v-if="productmessage.banner3">
                     <img :src="productmessage.banner3.detail" :alt="productmessage.banner3.name">
                 </div>
             </div>
             <div class="pic">
+                <!-- 有标签页 -->
                 <el-tabs v-model="activeName2" class="demo-tabs" @tab-click="handleClick1"
                     v-if="productmessage.children && productmessage.children.length != 0">
                     <el-tab-pane :label="item.name" :name="item.name" v-for="item, index in productmessage.children"
                         :key="index">
-                        <div class="children-pic" v-if="router.currentRoute.value.params.name == '3'">
+                        <div class="children-pic" v-if="router.currentRoute.value.params.name == 'Railings&stairs'">
                             <div class="children-header">
                                 <div class="header-left">
                                     <h1>{{ item.message.title }}</h1>
@@ -103,7 +56,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="children-pic1" v-else-if="router.currentRoute.value.params.name == '6'">
+                        <div class="children-pic1" v-else-if="router.currentRoute.value.params.name == 'Sanitary Wares'">
                             <div class="allpic1" v-if="activeName2 == 'LED Mirror'">
                                 <div class="pic1-item" v-for="item2, index2 in item.others"
                                     v-if="item.others && item.others.length != 0" :key="index2">
@@ -421,7 +374,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="children-pic" v-if="router.currentRoute.value.params.name == '4'">
+                        <div class="children-pic" v-else-if="router.currentRoute.value.params.name == 'Building Materials'">
                             <div v-if="activeName2 == 'LVT/SPC Flooring'">
                                 <div class="flooring">
                                     <div class="flooring-header">
@@ -504,7 +457,13 @@
                                 </div>
                             </div>
                             <div v-else-if="activeName2 == 'FCP Series'">
-
+                                <div class="fcpseries">
+                                    <div class="fcplist" v-if="item.others && item.others.length != 0">
+                                        <div class="fcpitem" v-for="item2, index2 in item.others" :key="index2">
+                                            <img :src="item2.detail" :alt="item2.name">
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                             <div v-else-if="activeName2 == 'Stone Series'">
                                 <div class="stone">
@@ -522,7 +481,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="children-pic" v-if="router.currentRoute.value.params.name == '5'">
+                        <div class="children-pic" v-else-if="router.currentRoute.value.params.name == 'Kitchen Faucets Sinks Cabinets'">
                             <div v-if="activeName2 == 'Kitchen Cabinet'">
                                 <div class="kitcabinet">
                                     <img :src="item.banner.detail" :alt="item.banner.name" v-if="item.banner">
@@ -531,7 +490,7 @@
                                             <img :src="item.banner2.detail" :alt="item.name">
                                         </div>
                                         <div class="list-right" v-if="item.others && item.others.length != 0">
-                                            <div class="right-item" v-for="item2,index2 in item.others" :key="index2">
+                                            <div class="right-item" v-for="item2, index2 in item.others" :key="index2">
                                                 <img :src="item2.detail" :alt="item2.name">
                                             </div>
                                         </div>
@@ -545,16 +504,46 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="children-pic" v-else-if="router.currentRoute.value.params.name == 'Doors'">
+                            <div class="Doors">
+                                <div class="Doors-header" v-if="item.banner1">
+                                    <img :src="item.banner1.detail" :alt="item.banner1.name">
+                                </div>
+                                <div class="Doors-bottom">
+                                    <div class="bottom-left" v-if="item.leftimg">
+                                        <img :src="item.leftimg.detail" :alt="item.leftimg.name">
+                                    </div>
+                                    <div class="bottom-right" v-if="item.rightimg && item.rightimg.length != 0">
+                                        <div class="rightitem" v-for="item2, index2 in item.rightimg" :key="index2">
+                                            <img :src="item2.detail" :alt="item2.name">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                         <div class="btn position-relative font-size-24" @click="goPage">Back</div>
                     </el-tab-pane>
                 </el-tabs>
+                <!-- 无标签页 -->
                 <div v-else>
-                    <div class="window-pic" v-if="productmessage.others && productmessage.others.length != 0">
-                        <div class="window-item" v-for="item, index in productmessage.others" :key="index">
-                            <img :src="item.detail" :alt="item.name">
-                            <span>{{ item.title }}</span>
+                    <div v-if="router.currentRoute.value.params.name == 'Windows'">
+                        <div class="window-pic" v-if="productmessage.others && productmessage.others.length != 0">
+                            <div class="window-item" v-for="item, index in productmessage.others" :key="index">
+                                <img :src="item.detail" :alt="item.name">
+                                <span>{{ item.title }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else-if="router.currentRoute.value.params.name == 'Hotel FFE'">
+                        <div class="FFE">
+                            <div class="FFElist" v-if="productmessage.others && productmessage.others.length != 0">
+                                <div class="FFEitem" v-for="item2,index2 in productmessage.others" :key="index2">
+                                    <img :src="item2.detail" :alt="item2.name">
+                                </div>
+                            </div>
                         </div>
                     </div>
+                    <div class="btn position-relative font-size-24" @click="goPage">Back</div>
                 </div>
             </div>
         </div>
@@ -569,27 +558,11 @@ import useHomeStore from '../store/modules/homepage'
 
 let Home = useHomeStore()
 
-let productList = Array<any>([])
-let product = Array<any>([])
-let doorproduct = ref<any>({})
 let productmessage = ref<any>({})  // 产品内页大图
-let banner = ref({
-    src: '',
-    title: '',
-    name: ''
-})
 let activeName = ref<any>('')
 let activeName2 = ref<any>('')
 let mobileShow = ref<any>(false)
 
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-    activeName.value = tab.props.name
-    Home.$state.Doors.map((li: any) => {
-        if (li.name == activeName.value) {
-            doorproduct.value = li
-        }
-    })
-}
 const handleClick1 = (tab: TabsPaneContext, event: Event) => {
     activeName2.value = tab.props.name
 }
@@ -602,63 +575,13 @@ const goPage = () => {
 
 watch(() => router.currentRoute.value.params.name, (newValue: any) => {
     Home.$state.Products.map((li: any) => {
-        if (newValue == li.position) {
+        if (newValue == li.name) {
             productmessage.value = li
             if (li.children && li.children.length != 0) {
                 activeName2.value = li.children[0].name
             }
         }
     })
-    if (newValue == '1') {
-        productList = [{ title: 'Wrought Iron Doors' }, { title: 'Steel Security Doors' },
-        { title: 'Pivot Entrance Doors' }, { title: 'Wooden Internal Doors' }, { title: 'Fire Doors' },
-        { title: 'Sliding Doors' }, { title: 'Hanging Sliding Doors' }, { title: 'Fold Sliding Doors' }]
-        banner.value = {
-            src: new URL("../assets/img/Door/01.jpg", import.meta.url).href,
-            title: 'Safety, Health, and Environmental Protection',
-            name: 'Door'
-        }
-        activeName.value = productList[0].title
-        Home.$state.Doors.map((li: any) => {
-            if (li.name == activeName.value) {
-                doorproduct.value = li
-            }
-        })
-    } else if (newValue == '2') {
-        productList = []
-        product = []
-    } else if (newValue == '3') {
-        productList = []
-        product = []
-    } else if (newValue == '4') {
-        productList = []
-        product = []
-    } else if (newValue == '5') {
-        productList = []
-        banner.value = {
-            src: new URL("../assets/img/Kitchen/01.jpg", import.meta.url).href,
-            title: '',
-            name: 'Kitchen'
-        }
-    } else if (newValue == '0') {
-        productList = []
-        banner.value = {
-            src: new URL('../assets/img/FFE/1.jpg', import.meta.url).href,
-            title: '',
-            name: 'Hotel FFE'
-        }
-        product = [
-            {
-                children: [
-                    { detail: new URL("../assets/img/FFE/2.jpg", import.meta.url).href, name: 'Hotel FFE' },
-                    { detail: new URL("../assets/img/FFE/3.jpg", import.meta.url).href, name: 'Hotel FFE' },
-                ]
-            }
-        ]
-    } else if (newValue == '6') {
-        productList = []
-        product = []
-    }
 }, { immediate: true, deep: true })
 
 onMounted(() => {
@@ -680,39 +603,121 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
+// FFE
+.FFE {
+    width: 100%;
+
+    .FFElist {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .FFEitem {
+            width: 49%;
+            height: 30vw;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
+
+// Doors
+.Doors {
+    width: 100%;
+    box-sizing: border-box;
+
+    .Doors-header {
+        width: 100%;
+
+        img {
+            width: 100%;
+            border: 1px solid #333;
+            background-color: #ffffff;
+        }
+    }
+
+    .Doors-bottom {
+        margin-top: 2rem;
+        text-align: center;
+        display: flex;
+        width: 100%;
+        height: 45vw;
+        justify-content: space-between;
+
+        .bottom-left {
+            width: 70%;
+            height: 100%;
+
+            img {
+                width: 100%;
+                height: 100%
+            }
+        }
+
+        .bottom-right {
+            width: 28%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .rightitem {
+                width: 100%;
+                height: 49%;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+    }
+}
+
 // kitchen
-.sinks{
+.sinks {
     width: 100%;
     box-sizing: border-box;
 }
-.kitcabinet{
+
+.kitcabinet {
     width: 100%;
     text-align: center;
-    img{
+
+    img {
         margin-top: 2rem;
     }
-    .kitcabinet-list{
+
+    .kitcabinet-list {
         margin-top: 2rem;
         margin-bottom: 2rem;
         width: 100%;
         display: flex;
         justify-content: space-between;
-        .list-left{
+
+        .list-left {
             width: 55%;
-            img{
+
+            img {
                 width: 100%;
                 height: 100%;
             }
         }
-        .list-right{
+
+        .list-right {
             width: 43%;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
-            .right-item{
+
+            .right-item {
                 width: 100%;
                 height: 49%;
-                img{
+
+                img {
                     width: 100%;
                     height: 100%;
                 }
@@ -720,7 +725,23 @@ onMounted(() => {
         }
     }
 }
+
 // building
+.fcpseries {
+    width: 100%;
+    box-sizing: border-box;
+
+    .fcplist {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .fcpitem {
+            text-align: center;
+        }
+    }
+}
+
 .stone {
     width: 100%;
     box-sizing: border-box;
@@ -2257,7 +2278,8 @@ onMounted(() => {
                                 margin-right: 1rem;
                             }
                         }
-                        .kiticon{
+
+                        .kiticon {
                             margin-top: 0.8rem;
                         }
                     }
@@ -2315,47 +2337,6 @@ onMounted(() => {
     }
 }
 
-.tabs-pic {
-    width: 100%;
-    padding: 2rem;
-
-    .top-pic {
-        width: 100%;
-        margin-bottom: 1rem;
-
-        img {
-            width: 100%;
-        }
-    }
-
-    .footer-pic {
-        width: 100%;
-        display: flex;
-        align-items: center;
-
-        .footer-left {
-            width: 70%;
-            margin-right: 2%;
-
-            img {
-                width: 100%;
-            }
-        }
-
-        .footer-right {
-            width: 28%;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-
-            img {
-                width: 100%;
-                margin-bottom: 2rem;
-            }
-        }
-    }
-}
-
 :deep(.el-tabs__item) {
     font-size: 26px !important;
     padding-bottom: 1rem;
@@ -2436,39 +2417,6 @@ onMounted(() => {
     text-align: center;
 }
 
-.productcenter {
-    .door-bgc {
-        width: 100%;
-        height: 95vh;
-
-        img {
-            width: 100%;
-            height: 100%;
-        }
-
-        .doortitle {
-            bottom: 0.5%;
-            left: 0;
-            width: 100%;
-            z-index: 2;
-            height: 10%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background: rgba(0, 0, 0, 0.2);
-        }
-    }
-
-    .box {
-        width: 90%;
-        margin: 1rem auto 0;
-
-        .pagina {
-            float: right;
-            // margin-bottom: 2rem;
-        }
-    }
-}
 
 @media screen and (max-width: 960px) {
     :deep(.el-tabs__item) {
@@ -2535,11 +2483,9 @@ onMounted(() => {
             margin: 1rem auto 0;
         }
     }
-}
-</style>
+}</style>
 
-<style>
-.demo-tabs>.el-tabs__content {
+<style>.demo-tabs>.el-tabs__content {
     padding: 10px;
     color: #6b778c;
     font-size: 32px;

montier/src/pages/Service.vue

@@ -55,8 +55,7 @@ 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?', position: 0 },
-    { detail: new URL("../assets/img/page02.jpg", import.meta.url).href, title: 'Growth History of MONTIER', position: 1 }
+    { detail: new URL("../assets/img/information.jpg", import.meta.url).href, title: 'What can we do for you?', position: 0 }
 ])
 
 let servicelist = ref<any>([
@@ -245,6 +244,8 @@ onMounted(() => {
         transform: translateX(-50%);
 
         .case-img {
+            width: 40%;
+            height: 40%;
             cursor: pointer;
 
             img {

montier/src/pages/contactUs.vue

@@ -27,9 +27,9 @@
                 <el-form ref="ruleFormRef" :model="form" class="demo-ruleForm" :label-width="labelwidth" :size="'default'"
                     :inline="true" status-icon>
                     <el-form-item label="Requirements" prop="desc" style="width: 100%">
-                        <el-input v-model="form.Requirements" placeholder="Requirements" type="textarea"/>
+                        <el-input v-model="form.Requirements" placeholder="Requirements" type="textarea" />
                     </el-form-item>
-                    <el-form-item label="Name" :style="{width: stylewidth}" :rules="[
+                    <el-form-item label="Name" :style="{ width: stylewidth }" :rules="[
                         {
                             required: true,
                             message: 'Please enter your name',
@@ -37,7 +37,7 @@
                         }]">
                         <el-input v-model="form.name" placeholder="Name" clearable />
                     </el-form-item>
-                    <el-form-item label="Email" :style="{width: stylewidth}" :rules="[
+                    <el-form-item label="Email" :style="{ width: stylewidth }" :rules="[
                         {
                             required: true,
                             message: 'Please enter your email',
@@ -45,7 +45,7 @@
                         }]">
                         <el-input v-model="form.email" placeholder="Email" clearable />
                     </el-form-item>
-                    <el-form-item label="Phone" :style="{width: stylewidth}" :rules="[
+                    <el-form-item label="Phone" :style="{ width: stylewidth }" :rules="[
                         {
                             required: true,
                             message: 'Please enter your phone number',
@@ -53,7 +53,7 @@
                         }]">
                         <el-input v-model="form.phone" placeholder="Phone Number" clearable />
                     </el-form-item>
-                    <el-form-item label="Country" :style="{width: stylewidth}" :rules="[
+                    <el-form-item label="Country" :style="{ width: stylewidth }" :rules="[
                         {
                             required: true,
                             message: 'Please enter your country',
@@ -61,7 +61,7 @@
                         }]">
                         <el-input v-model="form.country" placeholder="Country" clearable />
                     </el-form-item>
-                    <el-form-item label="Address" :style="{width: stylewidth}" :rules="[
+                    <el-form-item label="Address" :style="{ width: stylewidth }" :rules="[
                         {
                             required: true,
                             message: 'Please enter your address',
@@ -69,7 +69,7 @@
                         }]">
                         <el-input v-model="form.address" placeholder="Address" clearable />
                     </el-form-item>
-                    <el-form-item label="Title" :style="{width: stylewidth}" :rules="[
+                    <el-form-item label="Title" :style="{ width: stylewidth }" :rules="[
                         {
                             required: true,
                             message: 'Please enter your title',
@@ -88,13 +88,15 @@
                 </el-form>
             </div>
         </div>
-        <div class="btn font-size-16">Submit</div>
+        <div class="btn font-size-16" @click="sendMessage">Submit</div>
     </div>
 </template>
 
 <script setup lang="ts">
+import { ElMessage } from 'element-plus'
 import Title from '../components/Title.vue';
 import { ref, reactive, onMounted } from 'vue'
+import { sendEmail } from '../api/index'
 
 let title = ref<any>({
     title: "Contact Us",
@@ -113,27 +115,82 @@ let form = reactive<any>({
     company: ''
 })
 let mobileShow = ref<any>(false)
-onMounted(async ()=>{
-  if(document.body.offsetWidth<1000){
-    mobileShow.value = true
-    labelwidth.value = '80px'
-    stylewidth.value = '100%'
-  }else{
-    mobileShow.value = false
-    labelwidth.value = '150px'
-    stylewidth.value = '45%'
-  }
-  window.addEventListener('resize',function(){
-    if(document.body.offsetWidth<1000){
-      mobileShow.value = true
+
+// 发送邮件
+const sendMessage = async () => {
+    // if (form.Requirements == '') {
+    //     return ElMessage({
+    //         message: 'Requirements cannot be empty',
+    //         type: 'error',
+    //     })
+    // }else if(form.name == ''){
+    //     return ElMessage({
+    //         message: 'name cannot be empty',
+    //         type: 'error',
+    //     })
+    // }else if(form.email == ''){
+    //     return ElMessage({
+    //         message: 'email cannot be empty',
+    //         type: 'error',
+    //     })
+    // }else if(form.phone == ''){
+    //     return ElMessage({
+    //         message: 'phone cannot be empty',
+    //         type: 'error',
+    //     })
+    // }else if(form.country == ''){
+    //     return ElMessage({
+    //         message: 'country cannot be empty',
+    //         type: 'error',
+    //     })
+    // }else if(form.address == ''){
+    //     return ElMessage({
+    //         message: 'address cannot be empty',
+    //         type: 'error',
+    //     })
+    // }else if(form.title == ''){
+    //     return ElMessage({
+    //         message: 'title cannot be empty',
+    //         type: 'error',
+    //     })
+    // }else if(form.company == ''){
+    //     return ElMessage({
+    //         message: 'company cannot be empty',
+    //         type: 'error',
+    //     })
+    // }
+    let data = {
+        nickname: 'kinder',
+        email: '2057347663@qq.com',
+        title: '测试',
+        text: '0912'
+    }
+    let result: any = await sendEmail(data)
+    console.log(result);
+    
+}
+
+onMounted(async () => {
+    if (document.body.offsetWidth < 1000) {
+        mobileShow.value = true
         labelwidth.value = '80px'
         stylewidth.value = '100%'
-    }else{
-      mobileShow.value = false
+    } else {
+        mobileShow.value = false
         labelwidth.value = '150px'
         stylewidth.value = '45%'
     }
-  })
+    window.addEventListener('resize', function () {
+        if (document.body.offsetWidth < 1000) {
+            mobileShow.value = true
+            labelwidth.value = '80px'
+            stylewidth.value = '100%'
+        } else {
+            mobileShow.value = false
+            labelwidth.value = '150px'
+            stylewidth.value = '45%'
+        }
+    })
 })
 </script>
 
@@ -142,7 +199,8 @@ onMounted(async ()=>{
     width: 100%;
     // text-align: center;
     margin-bottom: 12.4vw;
-    .btn{
+
+    .btn {
         margin-top: 3rem;
         position: relative;
         left: 50%;
@@ -176,7 +234,8 @@ onMounted(async ()=>{
         flex-direction: column;
         justify-content: space-around;
         flex-wrap: wrap;
-        .item{
+
+        .item {
             float: left;
             margin: 5px 0;
         }
@@ -200,15 +259,16 @@ onMounted(async ()=>{
             .contact-left {
                 font-size: 12px;
                 display: block;
+
                 // justify-content: space-around;
-                .item{
+                .item {
                     margin-right: 10px;
                 }
             }
-            .contact-right{
+
+            .contact-right {
                 width: 80vw;
             }
         }
     }
-}
-</style>
+}</style>

montier/src/router/index.ts

@@ -11,7 +11,7 @@ const routes = [
         meta: { title: '' }
     },
     {
-        path: '/service',
+        path: '/service/:name',
         component: () => import('../pages/Procurement.vue'),
         meta: { title: 'Service' },
         content: {

montier/src/store/modules/homepage.ts

@@ -3,60 +3,9 @@ import { defineStore } from "pinia";
 const useHomeStore = defineStore('Home', {
     state: () => {
         return {
-            Doors: Array<any>(
-                {
-                    name: 'Wrought Iron Doors',
-                    top: { detail: new URL("../../assets/img/Door/01/01.jpg", import.meta.url).href, name: 'Wrought Iron Doors' },
-                    footer: { detail: new URL("../../assets/img/Door/01/02.jpg", import.meta.url).href, name: 'Wrought Iron Doors' },
-                    footer1: { detail: new URL("../../assets/img/Door/01/03.jpg", import.meta.url).href, name: 'Wrought Iron Doors' },
-                    footer2: { detail: new URL("../../assets/img/Door/01/04.jpg", import.meta.url).href, name: 'Wrought Iron Doors' }
-                }, {
-                name: 'Steel Security Doors',
-                top: { detail: new URL("../../assets/img/Door/02/01.jpg", import.meta.url).href, name: 'Steel Security Doors' },
-                footer: { detail: new URL("../../assets/img/Door/02/02.jpg", import.meta.url).href, name: 'Steel Security Doors' },
-                footer1: { detail: new URL("../../assets/img/Door/02/03.jpg", import.meta.url).href, name: 'Steel Security Doors' },
-                footer2: { detail: new URL("../../assets/img/Door/02/04.jpg", import.meta.url).href, name: 'Steel Security Doors' }
-            }, {
-                name: 'Pivot Entrance Doors',
-                top: { detail: new URL("../../assets/img/Door/03/01.jpg", import.meta.url).href, name: 'Pivot Entrance Doors' },
-                footer: { detail: new URL("../../assets/img/Door/03/02.jpg", import.meta.url).href, name: 'Pivot Entrance Doors' },
-                footer1: { detail: new URL("../../assets/img/Door/03/03.jpg", import.meta.url).href, name: 'Pivot Entrance Doors' },
-                footer2: { detail: new URL("../../assets/img/Door/03/04.jpg", import.meta.url).href, name: 'Pivot Entrance Doors' }
-            }, {
-                name: 'Wooden Internal Doors',
-                top: { detail: new URL("../../assets/img/Door/04/01.jpg", import.meta.url).href, name: 'Wooden Internal Doors' },
-                footer: { detail: new URL("../../assets/img/Door/04/02.jpg", import.meta.url).href, name: 'Wooden Internal Doors' },
-                footer1: { detail: new URL("../../assets/img/Door/04/03.jpg", import.meta.url).href, name: 'Wooden Internal Doors' },
-                footer2: { detail: new URL("../../assets/img/Door/04/04.jpg", import.meta.url).href, name: 'Wooden Internal Doors' }
-            }, {
-                name: 'Fire Doors',
-                top: { detail: new URL("../../assets/img/Door/05/01.jpg", import.meta.url).href, name: 'Fire Doors' },
-                footer: { detail: new URL("../../assets/img/Door/05/02.jpg", import.meta.url).href, name: 'Fire Doors' },
-                footer1: { detail: new URL("../../assets/img/Door/05/03.jpg", import.meta.url).href, name: 'Fire Doors' },
-                footer2: { detail: new URL("../../assets/img/Door/05/04.jpg", import.meta.url).href, name: 'Fire Doors' }
-            }, {
-                name: 'Sliding Doors',
-                top: { detail: new URL("../../assets/img/Door/06/01.jpg", import.meta.url).href, name: 'Sliding Doors' },
-                footer: { detail: new URL("../../assets/img/Door/06/02.jpg", import.meta.url).href, name: 'Sliding Doors' },
-                footer1: { detail: new URL("../../assets/img/Door/06/03.jpg", import.meta.url).href, name: 'Sliding Doors' },
-                footer2: { detail: new URL("../../assets/img/Door/06/04.jpg", import.meta.url).href, name: 'Sliding Doors' }
-            }, {
-                name: 'Hanging Sliding Doors',
-                top: { detail: new URL("../../assets/img/Door/07/01.jpg", import.meta.url).href, name: 'Hanging Sliding Doors' },
-                footer: { detail: new URL("../../assets/img/Door/07/02.jpg", import.meta.url).href, name: 'Hanging Sliding Doors' },
-                footer1: { detail: new URL("../../assets/img/Door/07/03.jpg", import.meta.url).href, name: 'Hanging Sliding Doors' },
-                footer2: { detail: new URL("../../assets/img/Door/07/04.jpg", import.meta.url).href, name: 'Hanging Sliding Doors' }
-            }, {
-                name: 'Fold Sliding Doors',
-                top: { detail: new URL("../../assets/img/Door/08/01.jpg", import.meta.url).href, name: 'Fold Sliding Doors' },
-                footer: { detail: new URL("../../assets/img/Door/08/02.jpg", import.meta.url).href, name: 'Fold Sliding Doors' },
-                footer1: { detail: new URL("../../assets/img/Door/08/03.jpg", import.meta.url).href, name: 'Fold Sliding Doors' },
-                footer2: { detail: new URL("../../assets/img/Door/08/04.jpg", import.meta.url).href, name: 'Fold Sliding Doors' }
-            },
-            ),
             Products: Array<any>(
                 {
-                    name: 'Raillings&stairs',
+                    name: 'Railings&stairs',
                     position: '3',
                     banner1: { detail: new URL("../../assets/img/railling/01.jpg", import.meta.url).href, name: 'Raillings&stairs', title: 'Safety, Easy Install Railings and Stairs' },
                     banner2: { detail: new URL("../../assets/img/productbanner.jpg", import.meta.url).href, name: 'productbanner' },
@@ -105,7 +54,7 @@ const useHomeStore = defineStore('Home', {
                     )
                 },
                 {
-                    name: 'Sanitary Wares',
+                    name: 'Sanitary Ware',
                     position: '6',
                     banner1: { detail: new URL("../../assets/img/sanitary/01.jpg", import.meta.url).href, name: 'Sanitary Wares', title: 'Your design of comfortable customized bathroom' },
                     banner2: { detail: new URL("../../assets/img/productbanner.jpg", import.meta.url).href, name: 'productbanner' },
@@ -401,7 +350,7 @@ const useHomeStore = defineStore('Home', {
                         { detail: new URL("../../assets/img/building/icons/icon03.png", import.meta.url).href, name: 'Controllable Cost', title: 'Controllable Cost' },
                         { detail: new URL("../../assets/img/building/icons/icon04.png", import.meta.url).href, name: 'High Qulity', title: 'High Qulity' },
                     ),
-                    children: Array<any>( 
+                    children: Array<any>(
                         {
                             name: 'LVT/SPC Flooring',
                             banner: { detail: new URL("../../assets/img/building/flooring/01.jpg", import.meta.url).href, name: 'flooring', title: 'Green flooring that restores the texture of natural wood or stone, and brings nature home.' },
@@ -507,9 +456,15 @@ const useHomeStore = defineStore('Home', {
                         },
                         {
                             name: 'FCP Series',
-                            title: 'PRODUCT CATEGORY',
-                            bgctitle: 'FIBER CEMENT ROARD',
-                            mintitle: 'Various product categories,provide one-stop service for building boards',
+                            others: Array<any>(
+                                { detail: new URL("../../assets/img/building/fcp/01.png", import.meta.url).href, name: 'PRODUCT CATEGORY' },
+                                { detail: new URL("../../assets/img/building/fcp/02.png", import.meta.url).href, name: 'Calcium silicate board' },
+                                { detail: new URL("../../assets/img/building/fcp/03.png", import.meta.url).href, name: 'Fiber Cement Board' },
+                                { detail: new URL("../../assets/img/building/fcp/04.png", import.meta.url).href, name: 'Fireproof Calcium Silicate Board' },
+                                { detail: new URL("../../assets/img/building/fcp/05.png", import.meta.url).href, name: 'Fiber Cement Decorative Board' },
+                                { detail: new URL("../../assets/img/building/fcp/06.png", import.meta.url).href, name: 'Hospital Antibacterial Board' },
+                                { detail: new URL("../../assets/img/building/fcp/07.png", import.meta.url).href, name: 'Wood Grain Fiber Cement Siding Board' },
+                            )
                         },
                         {
                             name: 'Stone Series',
@@ -524,7 +479,7 @@ const useHomeStore = defineStore('Home', {
                     )
                 },
                 {
-                    name: 'Kitchen Faucets/Sinks/Faucets',
+                    name: 'Kitchen Faucets Sinks Cabinets',
                     position: '5',
                     banner1: { detail: new URL("../../assets/img/Kitchen/01.jpg", import.meta.url).href, name: 'Easy clean, Durable, Trendy Kitchen', title: 'Easy clean, Durable, Trendy Kitchen' },
                     banner2: { detail: new URL("../../assets/img/productbanner.jpg", import.meta.url).href, name: 'productbanner' },
@@ -553,6 +508,144 @@ const useHomeStore = defineStore('Home', {
 
                         }
                     )
+                },
+                {
+                    name: 'Doors',
+                    position: '1',
+                    banner1: {
+                        detail: new URL("../../assets/img/Door/01.jpg", import.meta.url).href, name: 'Safety, Health, and Customized Doors for your project',
+                        title: 'Safety, Health, and Customized Doors for your project'
+                    },
+                    banner2: { detail: new URL("../../assets/img/productbanner.jpg", import.meta.url).href, name: 'productbanner' },
+                    banner3: { detail: new URL("../../assets/img/Door/002.jpg", import.meta.url).href, name: 'Doors' },
+                    tips: Array<any>(
+                        { detail: new URL("../../assets/img/railling/icon01.png", import.meta.url).href, name: 'Safety', title: 'Safety' },
+                        { detail: new URL("../../assets/img/Door/001.png", import.meta.url).href, name: 'Anti-Fire', title: 'Anti-Fire' },
+                        { detail: new URL("../../assets/img/railling/icon03.png", import.meta.url).href, name: 'Customized', title: 'Customized' },
+                        { detail: new URL("../../assets/img/railling/icon04.png", import.meta.url).href, name: 'High Qulity', title: 'High Qulity' },
+                    ),
+                    children: Array<any>(
+                        {
+                            name: 'Wrought Iron Door',
+                            banner1: { detail: new URL("../../assets/img/Door/01/01.jpg", import.meta.url).href, name: 'Wrought Iron Door' },
+                            leftimg: { detail: new URL("../../assets/img/Door/01/02.jpg", import.meta.url).href, name: 'WROUGHT IRON ENTRANCE DOOR' },
+                            rightimg: Array<any>(
+                                { detail: new URL("../../assets/img/Door/01/03.jpg", import.meta.url).href, name: 'Wrought Iron Door' },
+                                { detail: new URL("../../assets/img/Door/01/04.jpg", import.meta.url).href, name: 'Wrought Iron Door' },
+                            )
+                        },
+                        {
+                            name: 'Steel Security Door',
+                            banner1: { detail: new URL("../../assets/img/Door/02/01.jpg", import.meta.url).href, name: 'Steel Security Door' },
+                            leftimg: { detail: new URL("../../assets/img/Door/02/02.jpg", import.meta.url).href, name: 'Steel Security Door' },
+                            rightimg: Array<any>(
+                                { detail: new URL("../../assets/img/Door/02/03.jpg", import.meta.url).href, name: 'Steel Security Door' },
+                                { detail: new URL("../../assets/img/Door/02/04.jpg", import.meta.url).href, name: 'Steel Security Door' },
+                            )
+                        },
+                        {
+                            name: 'Pivot Entrance  Door',
+                            banner1: { detail: new URL("../../assets/img/Door/03/01.jpg", import.meta.url).href, name: 'Pivot Entrance  Door' },
+                            leftimg: { detail: new URL("../../assets/img/Door/03/02.jpg", import.meta.url).href, name: 'Pivot Entrance  Door' },
+                            rightimg: Array<any>(
+                                { detail: new URL("../../assets/img/Door/03/03.jpg", import.meta.url).href, name: 'Pivot Entrance  Door' },
+                                { detail: new URL("../../assets/img/Door/03/04.jpg", import.meta.url).href, name: 'Pivot Entrance  Door' },
+                            )
+                        },
+                        {
+                            name: 'Wooden Internal Door',
+                            banner1: { detail: new URL("../../assets/img/Door/04/01.jpg", import.meta.url).href, name: 'Wooden Internal Door' },
+                            leftimg: { detail: new URL("../../assets/img/Door/04/02.jpg", import.meta.url).href, name: 'Wooden Internal Door' },
+                            rightimg: Array<any>(
+                                { detail: new URL("../../assets/img/Door/04/03.jpg", import.meta.url).href, name: 'Wooden Internal Door' },
+                                { detail: new URL("../../assets/img/Door/04/04.jpg", import.meta.url).href, name: 'Wooden Internal Door' },
+                            )
+                        },
+                        {
+                            name: 'Fire  Door',
+                            banner1: { detail: new URL("../../assets/img/Door/05/01.jpg", import.meta.url).href, name: 'Fire  Door' },
+                            leftimg: { detail: new URL("../../assets/img/Door/05/02.jpg", import.meta.url).href, name: 'Fire  Door' },
+                            rightimg: Array<any>(
+                                { detail: new URL("../../assets/img/Door/05/03.jpg", import.meta.url).href, name: 'Fire  Door' },
+                                { detail: new URL("../../assets/img/Door/05/04.jpg", import.meta.url).href, name: 'Fire  Door' },
+                            )
+                        },
+                        {
+                            name: 'Sliding  Door',
+                            banner1: { detail: new URL("../../assets/img/Door/06/01.jpg", import.meta.url).href, name: 'Sliding  Door' },
+                            leftimg: { detail: new URL("../../assets/img/Door/06/02.jpg", import.meta.url).href, name: 'Sliding  Door' },
+                            rightimg: Array<any>(
+                                { detail: new URL("../../assets/img/Door/06/03.jpg", import.meta.url).href, name: 'Sliding  Door' },
+                                { detail: new URL("../../assets/img/Door/06/04.jpg", import.meta.url).href, name: 'Sliding  Door' },
+                            )
+                        },
+                        {
+                            name: 'Hanging Sliding  Door',
+                            banner1: { detail: new URL("../../assets/img/Door/07/01.jpg", import.meta.url).href, name: 'Hanging Sliding  Door' },
+                            leftimg: { detail: new URL("../../assets/img/Door/07/02.jpg", import.meta.url).href, name: 'Hanging Sliding  Door' },
+                            rightimg: Array<any>(
+                                { detail: new URL("../../assets/img/Door/07/03.jpg", import.meta.url).href, name: 'Hanging Sliding  Door' },
+                                { detail: new URL("../../assets/img/Door/07/04.jpg", import.meta.url).href, name: 'Hanging Sliding  Door' },
+                            )
+                        },
+                        {
+                            name: 'Fold Sliding  Door',
+                            banner1: { detail: new URL("../../assets/img/Door/08/01.jpg", import.meta.url).href, name: 'Fold Sliding  Door' },
+                            leftimg: { detail: new URL("../../assets/img/Door/08/02.jpg", import.meta.url).href, name: 'Fold Sliding  Door' },
+                            rightimg: Array<any>(
+                                { detail: new URL("../../assets/img/Door/08/03.jpg", import.meta.url).href, name: 'Fold Sliding  Door' },
+                                { detail: new URL("../../assets/img/Door/08/04.jpg", import.meta.url).href, name: 'Fold Sliding  Door' },
+                            )
+                        }
+                    )
+                },
+                {
+                    name: 'Hotel FFE',
+                    position: '0',
+                    banner1: {
+                        detail: new URL("../../assets/img/FFE/1.jpg", import.meta.url).href,
+                        name: 'Montier  FF&E services will give you a fully installed and ready-to - use solution.',
+                        title: 'Montier  FF&E services will give you a fully installed and ready-to - use solution.'
+                    },
+                    banner2: { detail: new URL("../../assets/img/productbanner.jpg", import.meta.url).href, name: 'productbanner' },
+                    banner3: { detail: new URL("../../assets/img/FFE/02.jpg", import.meta.url).href, name: 'FFE' },
+                    tips: Array<any>(
+                        { detail: new URL("../../assets/img/FFE/icon01.png", import.meta.url).href, name: 'FFE for public area', title: 'FFE for public area' },
+                        { detail: new URL("../../assets/img/FFE/icon02.png", import.meta.url).href, name: 'FFE for rooms', title: 'FFE for rooms' },
+                        { detail: new URL("../../assets/img/FFE/icon03.png", import.meta.url).href, name: 'Energy saving for lights and heating', title: 'Energy saving for lights and heating' },
+                        { detail: new URL("../../assets/img/FFE/icon04.png", import.meta.url).href, name: 'Smart rooms', title: 'Smart rooms' },
+                    ),
+                    others: Array<any>(
+                        { detail: new URL('../../assets/img/FFE/2.jpg', import.meta.url).href, name: 'FFE' },
+                        { detail: new URL('../../assets/img/FFE/3.jpg', import.meta.url).href, name: 'FFE' },
+                    )
+                }
+            ),
+            News: Array<any>(
+                {
+                    title: 'What can we do for you?',
+                    date: '2023-8-18',
+                    position: '0',
+                    banner: { detail: new URL("../../assets/img/News/whatcanwedo.jpg", import.meta.url).href, name: 'what can we do for you?' },
+                    others: Array<any>(
+                        { position: '1', title: 'Our Main Market', content: '<p>USA, Canada,South America, Mid East</p>' },
+                        { position: '2', title: 'Hotel/Residential and customization products', content: '<p>From 4-5star hotel to residential projects with various products. \
+                        No MOQ, 5pcs for some items could be acceptable.We provide product design, specifications and shop drawings before productions. \
+                        The products are complied with USA/Canada certificates and regulations. Below is a typical procedure.</p>',
+                        children: { detail: new URL("../../assets/img/News/whatcanwedo01.jpg", import.meta.url).href, name: 'operation flow' }
+                    },
+                        { position: '3', title: 'Payment Terms', content: '<p>For standard products, 30% deposit only. \
+                        For customized design FF&E and high quality hotel relating products,so 40% down payment will be needed.</p>' },
+                        { position: '4', title: 'Shipping procedures', content: '<p>We have 15 years of experience for arranging overseas shipping to\
+                         various countries with predictable period.</p>' },
+                        { position: '5', title: 'Standards and Safety', content: '<p>Stricter than any manufacturers Quality Control in China, weekly products inspection reports on\
+                        site in details will be provided to keep you free of quality worries no matter in samples/mock-up room order or Bulk goods order. IS09001 &IS014001 Pollutant\
+                         discharge permit safety production standardization certificate, environmental label product certification, credit enterprise certification provided.</p>' },
+                        { position: '6', title: 'After Sales Service', content: '<p>5 year for windows/2 years of quality warranty for other products.<br/>\
+                        5 years spare parts maintenance will be provided for each order.</p>' },
+                        { position: '7', title: 'Efficient 24 hour on line Feedback', content: 'Our team including sales,designer,QC and technical staffs could answer your \
+                        questions and solve your problems very efficiently with great management.' },
+                    )
                 }
             )
         }

montier/src/utils/index.ts

@@ -0,0 +1,47 @@
+import axios from 'axios';
+import { ElLoading, ElMessage } from 'element-plus'
+const service = axios.create({
+    // process.env.NODE_ENV === 'development' 来判断是否开发环境
+    // easy-mock服务挂了，暂时不使用了
+    baseURL: 'http://192.168.1.26:8017',
+    timeout: 5000
+});
+var loadinginstace: any
+service.interceptors.request.use(
+    (config: any) => {
+        var access_token=''
+        if(JSON.parse(localStorage.getItem("token") || '')){
+            access_token=JSON.parse(localStorage.getItem("token") || '').access_token
+        }
+        config.headers={
+            'content-type':'application/json; charset=utf-8',
+            'Authorization':'bearer'+access_token
+        }
+        loadinginstace = ElLoading.service({ fullscreen: true })
+        return config;
+    },
+    (error: any) => {
+        console.log(error);
+        return Promise.reject();
+    }
+);
+
+service.interceptors.response.use(
+    (response: any) => {
+        loadinginstace.close();
+        if (response.status === 200) {
+            return response.data;
+        } else if(response.data.error == 'invalid_token'){
+            ElMessage.error('Please log in again')
+        } else {
+            Promise.reject();
+        }
+    },
+    (error: any) => {
+        loadinginstace.close();
+        console.log(error);
+        return Promise.reject();
+    }
+);
+
+export default service;

montier/vite.config.ts

@@ -10,5 +10,14 @@ export default defineConfig({
     alias: {
       '@': path.resolve(__dirname, 'src')
     }
+  },
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://192.168.1.26:8017/",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      }
+    }
   }
 })