8月22日提交

montier/src/assets/css/index.css

@@ -57,6 +57,9 @@
 .font-bold{
     font-weight: bold;
 }
+.font-700{
+    font-weight: 700;
+}
 
 .incline-text{
     font-style: italic;

montier/src/assets/iconfont/demo_index.html

@@ -55,6 +55,18 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#x32;</span>
+                <div class="name">时间</div>
+                <div class="code-name">&amp;#x32;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe679;</span>
+                <div class="name">坐标</div>
+                <div class="code-name">&amp;#xe679;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe633;</span>
                 <div class="name">我的产品</div>
                 <div class="code-name">&amp;#xe633;</div>
@@ -108,9 +120,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1692348351208') format('woff2'),
-       url('iconfont.woff?t=1692348351208') format('woff'),
-       url('iconfont.ttf?t=1692348351208') format('truetype');
+  src: url('iconfont.woff2?t=1692611278872') format('woff2'),
+       url('iconfont.woff?t=1692611278872') format('woff'),
+       url('iconfont.ttf?t=1692611278872') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -137,6 +149,24 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-shijian"></span>
+            <div class="name">
+              时间
+            </div>
+            <div class="code-name">.icon-shijian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zuobiao"></span>
+            <div class="name">
+              坐标
+            </div>
+            <div class="code-name">.icon-zuobiao
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-wodechanpin"></span>
             <div class="name">
               我的产品
@@ -219,6 +249,22 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shijian"></use>
+                </svg>
+                <div class="name">时间</div>
+                <div class="code-name">#icon-shijian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zuobiao"></use>
+                </svg>
+                <div class="name">坐标</div>
+                <div class="code-name">#icon-zuobiao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-wodechanpin"></use>
                 </svg>
                 <div class="name">我的产品</div>

montier/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4216264 */
-  src: url('iconfont.woff2?t=1692348351208') format('woff2'),
-       url('iconfont.woff?t=1692348351208') format('woff'),
-       url('iconfont.ttf?t=1692348351208') format('truetype');
+  src: url('iconfont.woff2?t=1692611278872') format('woff2'),
+       url('iconfont.woff?t=1692611278872') format('woff'),
+       url('iconfont.ttf?t=1692611278872') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shijian:before {
+  content: "\32";
+}
+
+.icon-zuobiao:before {
+  content: "\e679";
+}
+
 .icon-wodechanpin:before {
   content: "\e633";
 }

montier/src/assets/iconfont/iconfont.json

@@ -6,6 +6,20 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "629339",
+      "name": "时间",
+      "font_class": "shijian",
+      "unicode": "32",
+      "unicode_decimal": 50
+    },
+    {
+      "icon_id": "947131",
+      "name": "坐标",
+      "font_class": "zuobiao",
+      "unicode": "e679",
+      "unicode_decimal": 59001
+    },
+    {
       "icon_id": "1831570",
       "name": "我的产品",
       "font_class": "wodechanpin",

montier/src/components/FooterPage.vue

@@ -3,30 +3,30 @@
     <div class="content">
       <div class="box">
         <div class="navs">
-          <router-link to="/" class="nav-item">
+          <div class="nav-item" @click="goPage('/')">
             <i class="iconfont icon-shouye"></i>
-            <div to="/" class="title">Home</div>
-          </router-link>
+            <span class="title">Home</span>
+          </div>
           <div class="nav-item" @click="goto('productCenter')">
             <i class="iconfont icon-wodechanpin"></i>
-            <div class="title">Product Center</div>
+            <span class="title">Product Center</span>
           </div>
           <div class="nav-item" @click="goto('service')">
             <i class="iconfont icon-zhuanshufuwu"></i>
-            <div class="title">Service</div>
+            <span class="title">Service</span>
           </div>
           <div class="nav-item" @click="goto('projectCases')">
             <i class="iconfont icon-gongcheng"></i>
-            <div class="title">Project Cases</div>
+            <span class="title">Project Cases</span>
           </div>
-          <router-link to="/news/all" class="nav-item">
+          <div class="nav-item" @click="goPage('/news/all')">
             <i class="iconfont icon-24gl-newspaper"></i>
-            <div class="title">News</div>
-          </router-link>
-          <router-link to="/contactUs" class="nav-item">
+            <span class="title">News</span>
+          </div>
+          <div class="nav-item" @click="goPage('/contactUs')">
             <i class="iconfont icon-lianxiwomen"></i>
-            <div class="title">Contact Us</div>
-          </router-link>
+            <span class="title">Contact Us</span>
+          </div>
         </div>
       </div>
     </div>
@@ -35,6 +35,7 @@
 
 <script  setup lang="ts">
 import { onMounted } from "vue";
+import router from "../router";
 
 const goto = (idname: any) => {
   document.getElementById(idname)?.scrollIntoView()
@@ -43,6 +44,11 @@ const goto = (idname: any) => {
 onMounted(async () => {
 
 })
+
+const goPage = (url: any) => {
+  document.documentElement.scrollTop = 0
+  router.push(url)
+}
 </script>
 
 <style scoped lang="less">

montier/src/components/HeaderPage.vue

@@ -4,57 +4,37 @@ import { useRouter } from "vue-router";
 let caselist = ref<any>([
   {
     detail: {
-      title: 'door', position: 'door'
+      title: 'Door', position: 'Door'
     }
   },
   {
     detail: {
-      title: 'window', position: 'window'
+      title: 'Window', position: 'Window'
     }
   },
   {
     detail: {
-      title: 'railing and stair', position: 'rs'
+      title: 'Railing', position: 'Railing'
     }
   },
   {
     detail: {
-      title: 'Building Materials', position: 'BM',
-      children: [{
-        detail: { title: 'Floor', position: 'Floor' }
-      },
-      {
-        detail: { title: 'Wall', position: 'Wall' }
-      },
-      { detail: { title: 'roof', position: 'roof' } }]
+      title: 'Building Materials', position: 'Building Materials',
     }
   },
   {
     detail: {
-      title: 'Kitchen Cabinets with Customization', position: 'KCwC'
+      title: 'Kitchen Cabinets with Customization', position: 'Kitchen Cabinets with Customization'
     }
   },
   {
     detail: {
-      title: 'Kitchen faucet and sink', position: 'Kfs'
+      title: 'Kitchen faucet and sink', position: 'Kitchen faucet and sink'
     }
   },
   {
     detail: {
-      title: 'Sanitary Ware', position: 'SW',
-      children: [{
-        detail: { title: 'Mirror', position: 'Mirror' }
-      },
-      { detail: { title: 'Toilet', position: 'Toilet' } },
-      { detail: { title: 'Bathtub ', position: 'Bathtub' } },
-      { detail: { title: 'Jacuzzi ', position: 'Jacuzzi' } },
-      { detail: { title: 'Faucet ', position: 'Faucet' } },
-      { detail: { title: 'Sink ', position: 'Sink' } },
-      { detail: { title: 'Accessories ', position: 'Accessories' } },
-      { detail: { title: 'Shower Glass ', position: 'Shower Glass' } },
-      { detail: { title: 'Bathroom ', position: 'Bathroom' } },
-      { detail: { title: 'Shower system ', position: 'Shower system' } },
-      ]
+      title: 'Sanitary Ware', position: 'Sanitary Ware',
     }
   }
 ])
@@ -119,18 +99,21 @@ const mobheadFun = async () => {
 const getProduct = async () => {
   productListArr.value = [
     [{ type: 'Design', position: 'Design' }],
-    [{ type: 'Procurement & Manufacture', position: 'PM' }],
-    [{ type: 'Logistic and warehouseing', position: 'Lw' }],
-    [{ type: 'Installaion', position: 'Installaion' }],
-    [{ type: 'quality control', position: 'qc' }],
+    [{ type: 'After -sale Service', position: 'AsS' }],
+    [{ type: 'Manufacture', position: 'Manufacture' }],
+    [{ type: 'Installation', position: 'Installaion' }],
+    [{ type: 'Quality', position: 'Quality' }],
+    [{ type: 'Logistics', position: 'Logistics' }]
   ]
   projectlist.value = [
-    { title: 'State Street, Carlsbad, CA', position: 'SSCC' },
-    { title: 'Lofts on Laurel, San Diego', position: 'LLSD' },
-    { title: 'Virgin Hotel,SFO', position: 'VHS' },
-    { title: 'GOA, India Wyndham', position: 'GIW' },
-    { title: 'METROPICA, MIAMI', position: 'MM' },
-    { title: '989 Johnson Street, Victoria,Canada', position: 'JSVC' },
+    { title: 'Fairmont Empress Hotel', position: 'FEH' },
+    { title: 'Monsaraz Hilton', position: 'MH' },
+    { title: 'Canopy By Hilton San Francisco Soma Hotel', position: 'CBHSFSH' },
+    { title: 'Lofts on Laurel', position: 'LL' },
+    { title: 'State&Oak Street', position: 'SOS' },
+    { title: '989 Johson Street', position: '989JS' },
+    { title: 'Tarrace Lofts', position: 'TL' },
+    { title: 'Ocean 17', position: 'Ocean' }
   ]
 }
 </script>
@@ -161,11 +144,12 @@ const getProduct = async () => {
             </div>
             <div class="category-item ml-3 font-size-14 position-relative">
               <div class="nav-item-title d-flex px-1 align-items-center"
-                :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goto('productCenter')">Product Center</div>
+                :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goPage('/productcenter')">Product Center</div>
               <div class="dui-dropdown-men position-absolute">
                 <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.title}`)">
+                    <li class="nav-item text-center" v-for="(item, index) in caselist" :key="index"
+                      @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>
@@ -194,13 +178,14 @@ const getProduct = async () => {
 
             <div class="category-item ml-3 font-size-14 position-relative">
               <div class="nav-item-title px-1 d-flex align-items-center"
-                :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goto('projectCases')">Project Cases</div>
+                :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goPage('/projectcase')">Project Cases</div>
               <div class="dui-dropdown-men position-absolute">
                 <div class="menu-container mt-1">
                   <ul>
                     <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/${item.title}`)">{{ item.title }}</div>
+                        <div class="nav-item-link px-16-px text-overflow-ellipsis"
+                          @click="goPage(`/projectcase/${index}`)">{{ item.title }}</div>
                       </div>
                     </li>
                   </ul>
@@ -247,7 +232,8 @@ const getProduct = async () => {
               <template #title>
                 <span>Product Center</span>
               </template>
-              <el-menu-item :index="'1-' + index" v-for="(item, index) in caselist" :key="index" @click="goPage(`/productcenter/${item.detail.title}`)">
+              <el-menu-item :index="'1-' + index" v-for="(item, index) in caselist" :key="index"
+                @click="goPage(`/productcenter/${item.detail.position}`)">
                 {{ item.detail.title }}
               </el-menu-item>
             </el-sub-menu>
@@ -262,7 +248,8 @@ const getProduct = async () => {
               <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/${item.title}`)">
+              <el-menu-item :index="'3-' + index + 1" v-for="item, index in projectlist" :key="index"
+                @click="goPage(`/projectcase/${index}`)">
                 <span>{{ item.title }}</span>
               </el-menu-item>
             </el-sub-menu>
@@ -284,9 +271,10 @@ const getProduct = async () => {
 </template>
 
 <style scoped lang="less">
-.headerpage{
+.headerpage {
   margin-bottom: 3vw;
 }
+
 .navbar {
   box-shadow: 1px 5px 5px #eee;
   position: fixed;
@@ -525,5 +513,4 @@ const getProduct = async () => {
   .navbar-brand-logo {
     width: 360px;
   }
-}
-</style>
+}</style>

montier/src/pages/AboutMessage.vue

@@ -0,0 +1,134 @@
+<template>
+    <div class="aboutmessage">
+        <div class="about position-relative">
+            <div class="message position-absolute">
+                <h2 class="color-fff font-bold">About Us</h2>
+                <div class="color-fff font-700" :class="mobileShow ? 'font-size-14 aboutitem1' : 'font-size-20 aboutitem'">
+                    <strong>·&emsp;</strong>
+                    <p class="content">
+                        MONTIERI Group is an one-stop service solution for international Hotel and real estate project
+                        development. Company was established in 2002, aims to provide one-stop solutions from design to
+                        product.
+                        We have developed branches in many cities in China，USA and Canada. We have successfully done many
+                        international projects globally.
+                    </p>
+                </div>
+                <div class="color-fff font-700 aboutitem"
+                    :class="mobileShow ? 'font-size-14 aboutitem1' : 'font-size-20 aboutitem'">
+                    <strong>·&emsp;</strong>
+                    <p class="content">
+                        We have more than 17 years overseas experience, professional management and operation experience.
+                        The critical point is working backwards in mind, seeking and achieving value for every project and
+                        client. Then, working from achieving value to budget, time and quality, back to create a feasible
+                        concept. MONTIERI also invested in real estate projects in California and Canada。
+                    </p>
+                </div>
+                <span class="color-fff btn position-absolute" :class="mobileShow ? 'font-size-20' : 'font-size-26'"
+                    @click="goPage">Back</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import router from '../router';
+import { onMounted, ref } from 'vue';
+
+const goPage = () => router.back()
+
+let mobileShow = ref<any>(false)
+onMounted(() => {
+    if (document.body.offsetWidth < 960) {
+        mobileShow.value = true
+    } else {
+        mobileShow.value = false
+    }
+    window.addEventListener('resize', function () {
+        if (document.body.offsetWidth < 960) {
+            mobileShow.value = true
+        } else {
+            mobileShow.value = false
+        }
+    })
+})
+</script>
+
+<style scoped lang="less">
+.aboutmessage {
+    box-sizing: border-box;
+
+    .about {
+        // height: 42vw;
+        height: 100%;
+        background: url("../assets/img/aboutus.jpg") no-repeat;
+        background-size: cover;
+        background-position: center;
+        box-sizing: border-box;
+
+        .message {
+            box-sizing: border-box;
+            background: rgba(137, 144, 153, 0.35);
+            top: 50%;
+            transform: translateY(-50%);
+            height: 50%;
+            padding: 2vw 3vw;
+            overflow: hidden;
+            height: 50%;
+            display: flex;
+            flex-direction: column;
+
+            .aboutitem {
+                margin-top: 2vw;
+                display: flex;
+
+                .content {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 4;
+                    -webkit-box-orient: vertical;
+                    display: -moz-box;
+                    -moz-line-clamp: 4;
+                    -moz-box-orient: vertical;
+                    word-wrap: break-word;
+                    word-break: break-all;
+                    white-space: normal;
+                }
+            }
+
+            .aboutitem1 {
+                margin-top: 2vw;
+                display: flex;
+
+                .content {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 6;
+                    -webkit-box-orient: vertical;
+                    display: -moz-box;
+                    -moz-line-clamp: 6;
+                    -moz-box-orient: vertical;
+                    word-wrap: break-word;
+                    word-break: break-all;
+                    white-space: normal;
+                }
+            }
+
+            .btn {
+                cursor: pointer;
+                bottom: 1vw;
+                left: 50%;
+                transform: translateX(-50%);
+            }
+
+            .btn:hover {
+                color: rgb(255, 192, 0);
+            }
+        }
+    }
+}
+
+
+@media screen and (width: 960px) {}
+</style>

montier/src/pages/AboutUs.vue

@@ -5,15 +5,14 @@
         <h3 class="font-size-18 color-343434 line-height-2 mb-2 text-align-justify"><strong>About MONTIERI</strong></h3>
         <p class="font-size-16 color-343434 line-height-2 text-align-justify">MONTIERI is committed to providing you with one-stop building materials, Hotel FF&E  services, and making your work more convenient.
         </p>
-        <button class="small-button font-size-14" v-show="mobileShow">Read more</button>
-
+        <router-link to="/about" class="small-button font-size-14" v-show="mobileShow">Read more</router-link>
       </div>
     </div>
     <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">
-          <span 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>
+          <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>
     </div>
@@ -23,6 +22,7 @@
 <script setup lang="ts">
 
 import {onMounted, ref} from "vue";
+import router from "../router";
 
 let screenWidth = ref<any>('')
 let mobileShow = ref<any>(false)
@@ -42,6 +42,12 @@ onMounted(async ()=>{
     }
   })
 })
+const goPage = () => {
+  document.documentElement.scrollTop = 0
+  router.push({
+    path: '/about'
+  })
+}
 </script>
 
 <style scoped>

montier/src/pages/AllCases.vue

@@ -0,0 +1,172 @@
+<template>
+    <div class="allcases">
+        <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">
+                    <span class="imgbgc"></span>
+                </div>
+                <h3>{{ item.title }}</h3>
+                <div class="other">
+                    <span class="other-item">
+                        <img src="../assets/img/i20.png" alt="location">
+                        <p>{{ item.location }}</p>
+                    </span>
+                    <span class="other-item">
+                        <img src="../assets/img/i21.png" alt="units">
+                        <p>{{ item.units }} Units</p>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import router from '../router';
+import { onMounted, ref } from 'vue'
+
+let caseList = Array<any>(
+    {
+        title: 'Fairmont Empress Hotel',
+        location: 'Victoria, Canada',
+        units: '300+',
+        url: '/src/assets/img/cases/01.jpg'
+    },
+    {
+        title: 'Monsaraz Hilton',
+        location: 'San Diego，USA',
+        units: '200+',
+        url: '/src/assets/img/cases/02.jpg'
+    },
+    {
+        title: 'Canopy By Hilton San Francisco Soma Hotel',
+        location: 'San Fransisco，USA',
+        units: '200+',
+        url: '/src/assets/img/cases/03.jpg'
+    },
+    {
+        title: 'Lofts on Laurel',
+        location: 'San Diego，USA',
+        units: '20+',
+        url: '/src/assets/img/cases/04.jpg'
+    },
+    {
+        title: 'State&Oak Street',
+        location: 'Carlsbad，CA，USA',
+        units: '20+',
+        url: '/src/assets/img/cases/05.jpg'
+    },
+    {
+        title: '989 Johson Street',
+        location: 'Victoria, Canada',
+        units: '180+',
+        url: '/src/assets/img/cases/06.jpg'
+    },
+    {
+        title: 'Tarrace Lofts',
+        location: 'Vista, California, USA',
+        units: '20+',
+        url: '/src/assets/img/cases/07.jpg'
+    },
+    {
+        title: 'Ocean 17',
+        location: 'Carlsbad，CA，USA',
+        units: '17',
+        url: '/src/assets/img/cases/08.jpg'
+    },
+)
+
+const goPage = (url: any) => {
+    document.documentElement.scrollTop = 0
+    router.push({
+        path: url
+    })
+}
+</script>
+
+<style scoped lang="less">
+.allcases {
+    margin-top: 1rem;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+
+    .cases {
+        box-sizing: border-box;
+        width: 100%;
+        padding: 2rem;
+        display: flex;
+        flex-wrap: wrap;
+
+        .cases-item {
+            width: 30%;
+            margin-bottom: 2rem;
+            margin-right: 3.5rem;
+
+            .item-img {
+                position: relative;
+                width: 100%;
+                height: 75%;
+                margin-bottom: 0.5rem;
+                overflow: hidden;
+
+                .imgbgc {
+                    position: absolute;
+                    bottom: 0;
+                    width: 100%;
+                    height: 0.5rem;
+                    z-index: 2;
+                    left: 0;
+                    background-color: #fa8106;
+                }
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    transition: 0.5s linear;
+                }
+
+                img:hover {
+                    scale: 1.2;
+                }
+            }
+
+            .other {
+                display: flex;
+                flex-direction: column;
+                align-items: left;
+                margin-top: 1rem;
+                border-top: 1px solid #888;
+                padding: 0.5rem 0 0 0;
+
+                .other-item {
+                    display: flex;
+                    font-size: 14px;
+                    color: #888;
+
+                    img {
+                        margin-right: 1rem;
+                    }
+                }
+
+                .other-item:first-child {
+                    margin: 0.5rem 0;
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width: 960px) {
+    .allcases{
+        .cases{
+            margin-top: 1rem;
+            .cases-item{
+                width: 100%;
+                margin-right: 0;
+                margin-bottom: 3rem;
+            }
+        }
+    }
+}
+</style>

montier/src/pages/Allproduct.vue

@@ -0,0 +1,96 @@
+<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">
+                <span class="imgtitle position-absolute color-fff">{{ item.name }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+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' },
+)
+
+const goPage = (url: any) => {
+    document.documentElement.scrollTop = 0
+    router.push(url)
+}
+</script>
+
+<style scoped lang="less">
+.allproduct {
+    width: 100%;
+    margin-top: 1rem;
+
+    .product {
+        box-sizing: border-box;
+        padding: 1rem;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+
+        .product-img {
+            width: 23%;
+            height: 35vw;
+            overflow: hidden;
+            margin-right: 2rem;
+            margin-bottom: 2rem;
+
+            img {
+                width: 100%;
+                height: 100%;
+                transition: 0.5s linear;
+            }
+
+            .imgtitle {
+                width: 100%;
+                bottom: 0;
+                left: 0;
+                height: 3rem;
+                background: rgba(0, 0, 0, 0.3);
+                font-size: 26px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            img:hover {
+                scale: 1.2;
+            }
+
+            img:hover+.imgtitle {
+                background: #fa8106;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 960px) {
+    .allproduct {
+        margin-top: 2rem;
+        .product {
+            display: flex;
+            flex-direction: column;
+
+            .product-img {
+                width: 100%;
+                height: 125vw;
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+    }
+}</style>

montier/src/pages/Breadcrumbs.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="breadcrumb d-flex flex-nowrap">
-    <div class="item" v-for="(item,index) in breadcrumbList" :key="index">
-      <a :href="item.href"><h5 class="color-666 d-inline-block font-size-16">{{ item.title }}</h5><span v-if="index != listLength" class="mx-1 color-666">/</span></a>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {onMounted, ref} from "vue";
-
-  let breadcrumbList = ref<any>(
-      [
-        {href:'/',title:'Home'},
-        {href:'/',title:'Case Detail'}
-      ]
-  )
-  let listLength = ref<number>(0)
-
-  onMounted(async ()=>{
-    listLength.value = breadcrumbList.value.length - 1
-  })
-</script>
-
-<style scoped lang="less">
-.breadcrumb{
-  .item:hover h5{
-    color: #fa8106;
-  }
-}
-</style>

montier/src/pages/CaseDetails.vue

@@ -1,83 +0,0 @@
-<template>
-  <div class="m-auto case-details" :class="mobileShow?'width-90':'width-80'">
-    <Breadcrumbs></Breadcrumbs>
-    <div class="case-dateils">
-      <div class="switch-menu d-flex flex-nowrap">
-        <div class="s30 width-50 text-center" :class="selectIndex === index?'selected':''" v-for="(item,index) in switchList" @click="selectMethods(index)" :key="index"><span>{{ item }}</span></div>
-      </div>
-      <div class="case-content">
-        <div v-if="selectIndex === 0">
-          <img src="../assets/img/projectCase.png" class="width-100 mt-2" alt="Project Case">
-        </div>
-        <div v-else-if="selectIndex === 1">
-          <h3 class="font-size-18 color-343434 mb-1">Quality</h3>
-          <p class="line-height-2 font-size-16 color-343434">Striving for perfection is our philosophy.</p>
-          <p class="line-height-2 font-size-16 color-343434">Owing to its European quality control standards, automatic HOMAG product lines,integrated design and production software, and best raw materials from world well-known suppliers. OPPEIN can deliver excellent products in line with German quality.
-          </p>
-          <p class="line-height-2 font-size-16 color-343434">We have implemented a complex quality system to review all material and standard  operating procedures are audited regularly to ensure the standards are met..
-          </p>
-          <img src="../assets/img/projectCase1.png" class="width-100 mt-2" alt="Project Case">
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Breadcrumbs from "./Breadcrumbs.vue"
-import {onMounted, ref} from "vue";
-let screenWidth = ref<any>('')
-let mobileShow = ref<any>(false)
-let selectIndex = ref<number>(1)
-let slidesPerView = ref<number>(3)
-let switchList = ref<any>(['DETAILS','QUALITY'])
-onMounted(async ()=>{
-  screenWidth.value = document.body.offsetWidth;
-  if(screenWidth.value<800){
-    mobileShow.value = true
-    slidesPerView.value = 1
-  }else if(screenWidth.value<1000){
-    mobileShow.value = true
-    slidesPerView.value = 2
-  }else{
-    mobileShow.value = false
-    slidesPerView.value = 3
-  }
-  window.addEventListener('resize',function(){
-    screenWidth.value = document.body.offsetWidth;
-    if(screenWidth.value<800){
-      mobileShow.value = true
-      slidesPerView.value = 1
-    }else if(screenWidth.value<1000){
-      mobileShow.value = true
-      slidesPerView.value = 2
-    }else{
-      mobileShow.value = false
-      slidesPerView.value = 3
-    }
-  })
-})
-const selectMethods = (index:number) => {
-  selectIndex.value = index
-}
-</script>
-
-<style scoped lang="less">
-.s30{
-  font-size: calc(30 * 100vw / 1920);
-  span{
-    transition: all .5s;
-    cursor: pointer;
-  }
-}
-.s30 span:hover{
-  color: #fa8106;
-  border-bottom: 2px solid #fa8106;
-}
-.selected{
-  span{
-    color: #fa8106;
-    border-bottom: 2px solid #fa8106;
-  }
-}
-</style>

montier/src/pages/Casemessage.vue

@@ -0,0 +1,336 @@
+<template>
+    <div>
+        <div class="procurement align-items-center width-80 m-auto">
+            <div class="pa-2 border-box">
+                <div class="casemessage">
+                    <div class="casemessage-left">
+                        <p class="font-size-26"><strong>{{ casemessage.title }}</strong></p>
+                        <div class="address-year" :class="mobileShow ? 'font-size-12' : 'font-size-16'">
+                            <span class="address">
+                                <i class="iconfont icon-zuobiao" :class="mobileShow ? 'font-size-12' : 'font-size-16'"></i>
+                                <span>{{ casemessage.country }}</span>
+                            </span>
+                            <span class="year">
+                                <i class="iconfont icon-shijian" :class="mobileShow ? 'font-size-12' : 'font-size-16'"></i>
+                                <span>{{ casemessage.year }}</span>
+                            </span>
+                        </div>
+                        <div class="message" :class="mobileShow ? 'font-size-12' : 'font-size-16'">
+                            <p class="item"><strong>Address: </strong>{{ casemessage.address }}</p>
+                            <p class="item"><strong>Type: </strong>{{ casemessage.type }}</p>
+                            <p class="item"><strong>Solutions: </strong>{{ casemessage.solutions }}</p>
+                            <p class="item"><strong>Unites: </strong>{{ casemessage.unites }}</p>
+                        </div>
+                        <div class="share" :class="mobileShow ? 'font-size-16 mb-2 mt-1' : 'sont-size-22'">
+                            <span><strong>Share To: </strong></span>
+
+                        </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">
+                    </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'">
+        </div>
+        <div class="btn position-relative" :class="mobileShow ? 'font-size-16' : 'font-size-22'" @click="goPage">Back</div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import router from '../router';
+import { watch, reactive, ref, onMounted } from 'vue'
+
+let casemessage = reactive<any>({})
+
+watch(() => router.currentRoute.value.params.name, (newValue: any) => {
+    if (newValue == '0') {
+        casemessage = {
+            title: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel',
+            country: 'Victoria, Canada',
+            year: 2020,
+            address: '721 Government St, Victoria, BC V8W 1W5,Canada',
+            type: 'Hotel',
+            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' }
+            ]
+        }
+    } else if (newValue == '1') {
+        casemessage = {
+            title: 'Monsaraz Hilton',
+            country: 'San Diego，USA',
+            year: 2021,
+            address: '1451 Rosecrans St, San Diego, CA 92106,USA',
+            type: 'Hotel',
+            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' }
+            ]
+        }
+    } else if (newValue == '2') {
+        casemessage = {
+            title: 'Canopy By Hilton San Francisco Soma Hotel',
+            country: 'San Fransisco，USA',
+            year: 2018,
+            address: '333 O\'Farrell St #101, San Francisco, CA 94102,USA',
+            type: 'Hotel',
+            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' }
+            ]
+        }
+    } else if (newValue == '3') {
+        casemessage = {
+            title: 'Lofts on Laurel',
+            country: 'San Diego，USA',
+            year: 2021,
+            address: '2466 First Ave., San Diego, CA 92101',
+            type: 'Condo',
+            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' }
+            ]
+        }
+    } else if (newValue == '4') {
+        casemessage = {
+            title: 'State&Oak Street',
+            country: 'Carlsbad，CA，USA',
+            year: 2020,
+            address: '3088 State St, Carlsbad, CA 92008',
+            type: 'Condo',
+            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' }
+            ]
+        }
+    } else if (newValue == '5') {
+        casemessage = {
+            title: '989 Johson Street',
+            country: 'Victoria, Canada',
+            year: 2020,
+            address: '989 Johnson StVictoria, BC V8V 3N7',
+            type: 'Condo',
+            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' }
+            ]
+        }
+    } else if (newValue == '6') {
+        casemessage = {
+            title: 'Tarrace Lofts',
+            country: 'Vista, California, USA',
+            year: 2020,
+            address: '516 S. Santa Fe Avenue,Vista,California',
+            type: 'Apartment',
+            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' }
+            ]
+        }
+    } else if (newValue == '7') {
+        casemessage = {
+            title: 'Ocean 17',
+            country: 'Carlsbad，CA，USA',
+            year: 2023,
+            address: '2501 State Street Carlsbad, California 92008,USA',
+            type: 'Condo',
+            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' }
+            ]
+        }
+    }
+}, { immediate: true, deep: true })
+
+let mobileShow = ref<any>(false)
+const goPage = () => {
+    document.documentElement.scrollTop = 0
+    router.back()
+}
+
+onMounted(() => {
+    if (document.body.offsetWidth < 960) {
+        mobileShow.value = true
+    } else {
+        mobileShow.value = false
+    }
+    window.addEventListener('resize', function () {
+        if (document.body.offsetWidth < 960) {
+            mobileShow.value = true
+        } else {
+            mobileShow.value = false
+        }
+    })
+})
+</script>
+
+<style scoped lang="less">
+.btn {
+    cursor: pointer;
+    left: 50%;
+    transform: translateX(-50%);
+    margin: 3rem 0;
+    float: left;
+    font-weight: bold;
+    padding: 1rem 2.5rem;
+    border: 1px solid #333;
+}
+
+.btn:hover {
+    color: #fa8106;
+    border: 1px solid #fa8106;
+}
+
+.procurement {
+    margin-top: 2vw;
+}
+
+.casemessage {
+    padding: 15px;
+    display: flex;
+    justify-content: space-between;
+    // align-items: center;
+    overflow: hidden;
+
+    .casemessage-left {
+        width: 50%;
+        font-size: 26px;
+        margin-right: 5%;
+
+        .address-year {
+            padding: 1rem 0rem;
+            border-bottom: 1px solid #333;
+            display: flex;
+
+            .address {
+                margin-right: 4rem;
+            }
+
+            .address,
+            .year {
+                display: flex;
+                align-items: center;
+                span{
+                    white-space: nowrap;
+                }
+
+                .iconfont {
+                    color: #ed7d31;
+                    // font-size: 2rem;
+                    margin-right: 1rem;
+                }
+            }
+        }
+
+        .message {
+            padding: 4rem 0;
+            // font-size: 16px;
+            border-bottom: 2px solid rgba(232, 232, 232);
+
+            .item {
+                margin: 10px 0;
+                // color: #888;
+            }
+        }
+
+        .button-left {
+            // position: absolute;
+            cursor: pointer;
+            float: left;
+            padding: 10px 20px;
+            background-color: #fa8106;
+            float: left;
+            margin-top: 5vw;
+            font-size: 16px;
+            color: #fff;
+        }
+    }
+
+    .casemessage-right {
+        // width: 45%;
+        height: 25vw;
+        overflow: hidden;
+
+        img {
+            transition: all 3s;
+        }
+    }
+
+    .casemessage-right:hover img {
+        transform: scale(1.1);
+    }
+}
+
+.details {
+    width: 75%;
+    margin: 20px auto;
+    text-align: left;
+
+    .img {
+        margin-top: 2rem;
+    }
+}
+
+@media screen and (max-width: 960px) {
+    .btn{
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .details{
+        text-align: center;
+    }
+    .casemessage {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .casemessage-left {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            margin-bottom: 10px;
+            .address-year{
+                display: flex;
+                flex-direction: column;
+                .address{
+                    margin-bottom: 0.5rem;
+                }
+            }
+
+            .button-left {
+                white-space: nowrap;
+            }
+        }
+
+        .casemessage-right {
+            height: 35vw;
+
+            .imgcase {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
+</style>

montier/src/pages/Procurement.vue

@@ -1,122 +1,43 @@
 <template>
-  <div class="procurement m-auto align-items-center" :class="mobileShow ? 'width-90' : 'd-flex  width-80'"
-    v-if="selectIndex == 0">
+  <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">
-          <img src="../assets/img/Installationofplasticwindows.jpg" class="procurement-max-width"
-            alt="Installation of plasticwindows">
-          <img src="../assets/img/ShoppingCartonLaptop.jpg" class="position-absolute second-img" alt="Shopping Cart on Laptop">
-          <span class="font-size-20 read-more pa-2 text-center position-absolute"
-            :class="mobileShow ? 'read-more-mobile' : 'read-more-pc'">Read more</span>
+          <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">
+          <!-- <span class="font-size-20 read-more pa-2 text-center position-absolute"
+            :class="mobileShow ? 'read-more-mobile' : 'read-more-pc'">Read more</span> -->
         </div>
       </div>
       <div class="titledesign">
         <div class="designtitle">
           <div class="juxing"></div>
-          <h2><strong>Design</strong></h2>
+          <h2><strong>{{ Imglist.title }}</strong></h2>
         </div>
-        <p class="font-size-14 line-height-4 ml-3">Solving all problems from design, and work out apractical scheme.They
-          ere preoject
-          planning,
-          archi-tectural design, interior design, product design.These four parts trom a closed loop.
+        <p class="line-height-4 ml-3 content" :class="mobileShow ? 'font-size-16' : 'font-size-22'">
+          {{ Imglist.content }}
         </p>
       </div>
-    </div>
-  </div>
-  <div class="procurement m-auto align-items-center" :class="mobileShow ? 'width-90' : 'd-flex  width-80'"
-    v-else-if="selectIndex == 1">
-    <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="../assets/img/Installationofplasticwindows.jpg" class="procurement-max-width"
-            alt="Installation of plasticwindows">
-          <img src="../assets/img/ShoppingCartonLaptop.jpg" class="position-absolute second-img" alt="Shopping Cart on Laptop">
-          <span class="font-size-20 read-more pa-2 text-center position-absolute"
-            :class="mobileShow ? 'read-more-mobile' : 'read-more-pc'">Read more</span>
-        </div>
-      </div>
-      <!-- <p class="mt-2 font-size-18 color-343434">Procurement & Manufacture</p> -->
-      <div class="titledesign">
-        <div class="designtitle">
-          <div class="juxing"></div>
-          <h2><strong>Procurement & Manufacture</strong></h2>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="procurement m-auto align-items-center" :class="mobileShow ? 'width-90' : 'd-flex  width-80'"
-    v-else-if="selectIndex == 2">
-    <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="../assets/img/Installationofplasticwindows.jpg" class="procurement-max-width"
-            alt="Installation of plasticwindows">
-          <img src="../assets/img/ShoppingCartonLaptop.jpg" class="position-absolute second-img" alt="Shopping Cart on Laptop">
-          <span class="font-size-20 read-more pa-2 text-center position-absolute"
-            :class="mobileShow ? 'read-more-mobile' : 'read-more-pc'">Read more</span>
-        </div>
-      </div>
-      <div class="titledesign">
-        <div class="designtitle">
-          <div class="juxing"></div>
-          <h2><strong>Logistic and warehouseing</strong></h2>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="procurement m-auto align-items-center" :class="mobileShow ? 'width-90' : 'd-flex  width-80'"
-    v-else-if="selectIndex == 3">
-    <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="../assets/img/Installationofplasticwindows.jpg" class="procurement-max-width"
-            alt="Installation of plasticwindows">
-          <img src="../assets/img/ShoppingCartonLaptop.jpg" class="position-absolute second-img" alt="Shopping Cart on Laptop">
-          <span class="font-size-20 read-more pa-2 text-center position-absolute"
-            :class="mobileShow ? 'read-more-mobile' : 'read-more-pc'">Read more</span>
-        </div>
-      </div>
-      <div class="titledesign">
-        <div class="designtitle">
-          <div class="juxing"></div>
-          <h2><strong>Installation</strong></h2>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="procurement m-auto align-items-center" :class="mobileShow ? 'width-90' : 'd-flex  width-80'"
-    v-else-if="selectIndex == 4">
-    <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="../assets/img/Installationofplasticwindows.jpg" class="procurement-max-width"
-            alt="Procurement & Manufacture">
-          <img src="../assets/img/ShoppingCartonLaptop.jpg" class="position-absolute second-img" alt="Shopping Cart on Laptop">
-          <span class="font-size-20 read-more pa-2 text-center position-absolute"
-            :class="mobileShow ? 'read-more-mobile' : 'read-more-pc'">Read more</span>
-        </div>
-      </div>
-      <div class="titledesign">
-        <div class="designtitle">
-          <div class="juxing"></div>
-          <h2><strong>quality control</strong></h2>
-        </div>
-      </div>
+      <p class="btn position-relative" @click="goPage()">Back</p>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 
-import { onMounted, ref } from "vue";
+import { onMounted, ref, reactive, watch } from "vue";
 import router from "../router";
 
 let screenWidth = ref<any>('')
 let mobileShow = ref<any>(false)
 let selectIndex = ref<any>('')
+let Imglist = reactive<any>({})
 selectIndex.value = router.currentRoute.value.query.index
 
+const goPage = () => {
+  document.documentElement.scrollTop = 0
+  router.back()
+}
 
 onMounted(async () => {
   screenWidth.value = document.body.offsetWidth;
@@ -134,15 +55,76 @@ onMounted(async () => {
     }
   })
 })
+
+watch(() => router.currentRoute.value.query.index, (newValue: any) => {
+  if(newValue == '0'){
+    Imglist = {
+      title: 'Design',
+      content: 'Solving all problems from design, and work out a practical scheme.They are project planning, archi-tectural design, interior design, product design.These four parts from a closed loop.',
+      img: [
+        { details: '/src/assets/img/Design01.jpg', name: 'Design' },
+        { details: '/src/assets/img/Design02.jpg', name: 'Design' },
+      ]
+    }
+  }else if(newValue == '1'){
+    Imglist = {
+      title: 'After -sale Service',
+      content: 'We care about quality and care about longtime performance. After sales service is crucial for our business procedure. We offer online and swift response for after sales services.',
+      img: [
+        { details: '/src/assets/img/After-saleService01.jpg', name: 'After -sale Service' },
+        { details: '/src/assets/img/After-saleService02.jpg', name: 'After -sale Service' },
+      ]
+    }
+  }else if(newValue == '2'){
+    Imglist = {
+      title: 'Manufacture',
+      content: 'We are able to mass-customize products efficiently as per the approved specification. We manufacture case-goods, upholstery items and all type of solidwood products, as well as decorative lightings.Flexiblity of custom-made system achieve a lower costsin mass product.',
+      img: [
+        { details: '/src/assets/img/Manufacture01.jpg', name: 'Manufacture' },
+        { details: '/src/assets/img/Manufacture02.jpg', name: 'Manufacture' },
+      ]
+    }
+  }else if(newValue == '3'){
+    Imglist = {
+      title: 'Installation',
+      content: 'We have our installation teams for site measurement taken and installation condition analysis. Our installation team is expert on flooring, mill work, cabinets, drapery，wall covering, and carpet.',
+      img: [
+        { details: '/src/assets/img/Installation01.jpg', name: 'Installation' },
+        { details: '/src/assets/img/Installation02.jpg', name: 'Installation' },
+      ]
+    }
+  }else if(newValue == '4'){
+    Imglist = {
+      title: 'Quality',
+      content: 'Product quality is the lifeline of an company and the fundamental guarantee of its sustainable development. We have implemented a complex quality system to review all material and standard  operating procedures are audited regularly to ensure the standards are met.  MONTIER can deliver excellent products in line with German quality.',
+      img: [
+        { details: '/src/assets/img/Quality01.jpg', name: 'Quality' },
+        { details: '/src/assets/img/Quality02.jpg', name: 'Quality' },
+      ]
+    }
+  }else if(newValue == '5'){
+    Imglist = {
+      title: 'Logistics',
+      content: 'We work with 3rd party forwarder for local and overseas logistic. For different schedule of delivery, we will manage warehousing for FF&E.',
+      img: [
+        { details: '/src/assets/img/Logistics01.jpg', name: 'Logistics' },
+        { details: '/src/assets/img/Logistics02.jpg', name: 'Logistics' },
+      ]
+    }
+  }
+  
+},{ immediate: true, deep: true })
+
 </script>
 
 <style scoped>
-.procurement{
+.procurement {
   margin: 2vw auto 2vw;
 }
+
 .fixed-width {
-  width: 50%;
-  height: 20vw;
+  width: 60%;
+  height: 30vw;
 }
 
 .procurement-max-width {
@@ -153,11 +135,22 @@ onMounted(async () => {
 
 .second-img {
   top: 50%;
-  right: -70%;
+  right: -100%;
   transform: translateX(-50%) translateY(-50%);
   background: #fff;
-  width: 50%;
-  height: 16vw;
+  width: 70%;
+  height: 20vw;
+}
+
+.second-img1 {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.second-img3{
+  width: 40%;
+  height: 20vw;
+  margin-left: 8rem;
+  margin-top: 5rem;
 }
 
 .read-more {
@@ -213,30 +206,54 @@ onMounted(async () => {
     height: 25vw;
   }
 
-  .font-size-14 {
-    /* display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden; */
-    font-size: 12px;
-    line-clamp: 4;
+  .titledesign {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+
+    .designtitle {
+      margin-bottom: 2rem;
+    }
   }
 }
 
 .titledesign {
   width: 100%;
-  margin-top: 2rem;
+  margin-top: 3rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 0 1.5rem;
 
   .designtitle {
+    width: 30%;
+
     .juxing {
-      width: 30%;
-      height: 1vw;
-      background-color: rgba(0, 0, 0, 0.5);
+      width: 2rem;
+      height: 1rem;
+      background-color: rgba(237, 125, 49);
       margin-bottom: 0.5rem;
     }
   }
 
+}
+
+.btn {
+  cursor: pointer;
+  margin-top: 3rem;
+  left: 50%;
+  font-size: 20px;
+  width: 10rem;
+  height: 3rem;
+  border: 1px solid #333;
+  text-align: center;
+  line-height: 3rem;
+  transform: translateX(-50%);
+}
+
+.btn:hover {
+  color: rgba(237, 125, 49);
+  border: 1px solid rgba(237, 125, 49);
 }</style>

montier/src/pages/ProductCenter.vue

@@ -1,85 +0,0 @@
-<template>
-    <div class="productcenter">
-        <div class="box" v-if="!show">
-            {{ router.currentRoute.value.params.name }}
-        </div>
-        <div class="box" v-else>
-            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-                <el-tab-pane :label="item.title" :name="item.position" v-for="item,index in productList" :key="index">
-                    <div>
-                        <h2>{{ item.title }}</h2>
-                    </div>
-                </el-tab-pane>
-            </el-tabs>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import router from '../router';
-import { ref } from 'vue'
-import type { TabsPaneContext } from 'element-plus/lib';
-
-let show = ref<any>(false)
-let productList = Array<any>([])
-let activeName = ref<any>('Floor')
-
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event)
-}
-
-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
-}else{
-    show.value = false
-}
-
-</script>
-
-<style scoped lang="less">
-.productcenter {
-    margin-top: 2vw;
-
-    .box {
-        width: 90%;
-        margin: 0 auto;
-    }
-}
-
-@media screen and (max-width: 960px) {
-    .productcenter {
-        margin-top: 14vw;
-    }
-}
-</style>
-
-<style>
-.demo-tabs > .el-tabs__content {
-  padding: 10px;
-  color: #6b778c;
-  font-size: 32px;
-  font-weight: 600;
-}
-</style>

montier/src/pages/Productmessage.vue

@@ -0,0 +1,158 @@
+<template>
+    <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
+                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-tabs>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import router from '../router';
+import { ref, watch, onMounted } from 'vue'
+import type { TabsPaneContext } from 'element-plus/lib';
+
+let productList = Array<any>([])
+let activeName = ref<any>('')
+let mobileShow = ref<any>(false)
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+
+}
+
+onMounted(() => {
+    if (document.body.offsetWidth < 960) {
+        mobileShow.value = true
+    } else {
+        mobileShow.value = false
+    }
+    window.addEventListener('resize', function () {
+        if (document.body.offsetWidth < 960) {
+            mobileShow.value = true
+        } else {
+            mobileShow.value = false
+        }
+    })
+})
+
+// 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: [
+                {}
+            ]
+        },
+        { title: 'Interior Doors' },
+        { title: 'Fire Doors' },
+        { title: 'Sliding Doors' }
+    ]
+    activeName.value = productList[0].title
+} else if (router.currentRoute.value.params.name == 'Window') {
+    console.log(2);
+} else if (router.currentRoute.value.params.name == 'Railing') {
+    console.log(3);
+} else if (router.currentRoute.value.params.name == 'Building Materials') {
+    console.log(4);
+} else if (router.currentRoute.value.params.name == 'Kitchen Cabinets with Customization') {
+    console.log(5);
+} else if (router.currentRoute.value.params.name == 'Kitchen faucet and sink') {
+    console.log(6);
+} else if (router.currentRoute.value.params.name == 'Sanitary Ware') {
+    console.log(7);
+}
+
+</script>
+
+<style scoped lang="less">
+.productcenter {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+
+    .door-bgc {
+        width: 100%;
+        height: 60%;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+
+        .doortitle {
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            z-index: 999;
+            height: 14%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: rgba(0, 0, 0, 0.2);
+        }
+    }
+
+    .box {
+        width: 90%;
+        margin: 2rem auto 0;
+    }
+}
+
+@media screen and (max-width: 960px) {
+    .productcenter {
+        margin-top: 14vw;
+    }
+}
+</style>
+
+<style>
+.demo-tabs>.el-tabs__content {
+    padding: 10px;
+    color: #6b778c;
+    font-size: 32px;
+    font-weight: 600;
+}
+</style>

montier/src/pages/ProjectCase.vue

@@ -10,7 +10,7 @@
         @swiper="onSwiper"
         @slideChange="onSlideChange"
     >
-      <swiper-slide  v-for="(item,index) in bannerList" class="hover-scale cursor-pointer" :key="index" v-if="selectIndex === 1">
+      <!-- <swiper-slide  v-for="(item,index) in bannerList" class="hover-scale cursor-pointer" :key="index" v-if="selectIndex === 1">
         <div>
           <div class="case-img overflow-hidden img-after" @click="changeindex">
             <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase1" />
@@ -21,20 +21,26 @@
             <p class="align-items-center d-flex"><img src="../assets/img/i21.png" alt="units"><span class="ml-1 font-size-14 color-666">387 Units</span></p>
           </div>
         </div>
-      </swiper-slide>
-      <swiper-slide  v-for="(item,index2) in bannerList" class="hover-scale cursor-pointer" :key="index2" v-else-if="selectIndex === 2">
+      </swiper-slide> -->
+
+      <!-- 项目案例 -->
+      <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/${item.name}`)">
+          <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" />
-            <h3 class="position-absolute color-fff project-center-title">Door</h3>
+            <div class="position-absolute color-fff project-center-title">
+              <h3 class="font-700">{{ item.name }}</h3>
+              <h3 class="font-700">{{ item.address }}</h3>
+            </div>
           </div>
         </div>
       </swiper-slide>
+      <!-- 产品中心 -->
       <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">
+          <div class="case-img overflow-hidden position-relative" @clickan class="s">="goPage(`/productcenter/${item.name}`)">
             <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase" />
-            <h3 class="position-absolute color-fff project-center-title">{{ item.name }}</h3>
+            <h3 class="position-absolute color-fff project-center-title1">{{ item.name }}</h3>
           </div>
         </div>
       </swiper-slide>
@@ -42,6 +48,8 @@
         <p class="allproject" @click="goPage('/projectcase/allproject')">EXPLORE ALL PROJECTS >></p>
       </div> -->
     </swiper>
+    <p v-if="selectIndex == 2" class="btn" @click="goPage('/projectcase')">EXLORE ALL PROJECTS</p>
+    <p v-if="selectIndex == 3" class="btn">EXLORE ALL PROJECTS</p>
   </div>
 </template>
 
@@ -58,18 +66,23 @@ import { Swiper, SwiperSlide } from 'swiper/vue';
 import router from "../router";
 let modules = [Navigation,Scrollbar, A11y];
 let bannerList = ref<any>([
-  {detail:new URL("../assets/img/Banner/Banner1.jpg",import.meta.url).href,title:'轮播', name: 'Door'},
-  {detail:new URL("../assets/img/Banner/Banner2.jpg",import.meta.url).href,title:'轮播', name: 'Door'},
-  {detail:new URL("../assets/img/Banner/Banner3.jpg",import.meta.url).href,title:'轮播', name: 'Door'}
+  {detail:new URL("../assets/img/cases/01.jpg",import.meta.url).href,title:'轮播', name: 'Fairmont Empress Hotel', address: 'Victoria, Canada'},
+  {detail:new URL("../assets/img/cases/02.jpg",import.meta.url).href,title:'轮播', name: 'Monsaraz Hilton', address: 'San Diego，USA'},
+  {detail:new URL("../assets/img/cases/03.jpg",import.meta.url).href,title:'轮播', name: 'Canopy By Hilton San Francisco Soma Hotel', address: 'San Fransisco，USA'},
+  {detail:new URL("../assets/img/cases/04.jpg",import.meta.url).href,title:'轮播', name: 'Lofts on Laurel', address: 'San Diego，USA'},
+  {detail:new URL("../assets/img/cases/05.jpg",import.meta.url).href,title:'轮播', name: 'State&Oak Street', address: 'Carlsbad，CA，USA'},
+  {detail:new URL("../assets/img/cases/06.jpg",import.meta.url).href,title:'轮播', name: '989 Johson Street', address: 'Victoria, Canada'},
+  {detail:new URL("../assets/img/cases/07.jpg",import.meta.url).href,title:'轮播', name: 'Tarrace Lofts', address: 'Vista, California, USA'},
+  {detail:new URL("../assets/img/cases/08.jpg",import.meta.url).href,title:'轮播', name: 'Ocean 17', address: 'Carlsbad，CA，USA'},
 ])
 let bannerList2 = ref<any>([
-  {detail:new URL("../assets/img/center01.png",import.meta.url).href,title:'轮播', name: 'Door'},
-  {detail:new URL("../assets/img/center02.png",import.meta.url).href,title:'轮播', name: 'Window'},
-  {detail:new URL("../assets/img/center03.png",import.meta.url).href,title:'轮播', name: 'Railing'},
-  {detail:new URL("../assets/img/center04.png",import.meta.url).href,title:'轮播', name: 'Building Material'},
-  {detail:new URL("../assets/img/center05.png",import.meta.url).href,title:'轮播', name: 'Kitchen Cabinets with Customization'},
-  {detail:new URL("../assets/img/center06.png",import.meta.url).href,title:'轮播', name: 'Kitchen faucet and sink'},
-  {detail:new URL("../assets/img/center07.png",import.meta.url).href,title:'轮播', name: 'Sanitary Ware'},
+  {detail:new URL("../assets/img/center01.jpg",import.meta.url).href,title:'轮播', name: 'Door'},
+  {detail:new URL("../assets/img/center02.jpg",import.meta.url).href,title:'轮播', name: 'Window'},
+  {detail:new URL("../assets/img/center03.jpg",import.meta.url).href,title:'轮播', name: 'Railing'},
+  {detail:new URL("../assets/img/center04.jpg",import.meta.url).href,title:'轮播', name: 'Building Material'},
+  {detail:new URL("../assets/img/center05.jpg",import.meta.url).href,title:'轮播', name: 'Kitchen Cabinets with Customization'},
+  {detail:new URL("../assets/img/center06.jpg",import.meta.url).href,title:'轮播', name: 'Kitchen faucet and sink'},
+  {detail:new URL("../assets/img/center07.jpg",import.meta.url).href,title:'轮播', name: 'Sanitary Ware'},
 ])
 let screenWidth = ref<any>('')
 let mobileShow = ref<any>(false)
@@ -113,6 +126,7 @@ const onSlideChange = () => {
 };
 
 const goPage = (url: any) => {
+  document.documentElement.scrollTop = 0
   router.push({
     path: url
   })
@@ -123,6 +137,21 @@ const changeindex = () => {
 </script>
 
 <style scoped lang="less">
+.btn{
+  cursor: pointer;
+  float: left;
+  margin-top: 3rem;
+  padding: 1rem 2rem;
+  border: 1px solid #333;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  font-weight: bold;
+}
+.btn:hover{
+  color: #fa8106;
+  border: 1px solid #fa8106;
+}
 .projectall{
   width: 100%;
   text-align: center;
@@ -173,16 +202,29 @@ const changeindex = () => {
   .hover-scale:hover .case-img img{
     transform: scale(1.1);
   }
-  .hover-scale:hover h3{
-    color: #fa8106;
+  .hover-scale:hover .project-center-title{
+    background: #fa8106;
   }
   .project-center-title{
     bottom: 0;
     left: 0;
     height: 50px;
     line-height: 50px;
+    text-align: left;
+    background: rgba(0,0,0,.4);
+    width: 100%;
+    padding: 0.5rem 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .project-center-title1{
+    bottom: 0;
+    left: 0;
+    height: 50px;
+    line-height: 50px;
     text-align: center;
-    background: rgba(0,0,0,.5);
+    background: rgba(0,0,0,.4);
     width: 100%;
   }
 }

montier/src/pages/Service.vue

@@ -1,19 +1,24 @@
 <template>
     <div class="width-100 bannerImg">
-        <swiper :modules="modules" :slides-per-View='per' :space-between="50" :loop="true" :navigation="true"
-            class="service-img" v-if="selectIndex == 1">
-            <swiper-slide v-for="item, index in servicelist" :key="index" class="hover-scale">
-                <div>
-                    <div class="case-img overflow-hidden position-relative sww" @click="goPage('/service', index)">
-                        <img :src="item.detail" alt="information" class="width-100 d-block position-relative">
-                        <h3 class="position-absolute color-fff project-center-title">{{ item.title }}</h3>
+        <!-- 服务 -->
+        <div v-if="selectIndex == 1">
+            <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)">
+                            <span class="position-absolute" :class="index == 1 ? 'imgtitle1' : 'imgtitle'">
+                                <p class="title">{{ item.title }}</p>
+                            </span>
+                            <img :src="item.detail" :alt="item.title"/>
+                        </div>
                     </div>
                 </div>
-            </swiper-slide>
-        </swiper>
+            </div>
+        </div>
+        <!-- 新闻 -->
         <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 servicelist" :key="index" class="hover-scale"
+            <swiper-slide v-for="item, index in newslist" :key="index" class="hover-scale"
                 @click="goPage1(`/news/${item.title}`)">
                 <div>
                     <div class="case-img overflow-hidden position-relative">
@@ -49,12 +54,22 @@ 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' },
+])
+
 let servicelist = ref<any>([
-    { detail: new URL("../assets/img/page01.png", import.meta.url).href, title: 'Design' },
-    { detail: new URL("../assets/img/page02.png", import.meta.url).href, title: 'Procurement & Manufacture' },
-    { detail: new URL("../assets/img/page03.png", import.meta.url).href, title: 'Logistic and warehouseing' },
-    { detail: new URL("../assets/img/page04.png", import.meta.url).href, title: 'Installation' },
-    { detail: new URL("../assets/img/page05.png", import.meta.url).href, title: 'Quality Control' },
+    { detail: new URL('../assets/img/Design.jpg', import.meta.url).href, title: 'Design' },
+    { detail: new URL('../assets/img/Service.jpg', import.meta.url).href, title: 'Service' },
+    { detail: new URL('../assets/img/After-saleService.jpg', import.meta.url).href, title: 'After -sale Service' },
+    { detail: new URL('../assets/img/Manufactrue.jpg', import.meta.url).href, title: 'Manufactrue' },
+    { detail: new URL('../assets/img/Installation.jpg', import.meta.url).href, title: 'Installation' },
+    { detail: new URL('../assets/img/Quality.jpg', import.meta.url).href, title: 'Quality' },
+    { detail: new URL('../assets/img/Logistics.jpg', import.meta.url).href, title: 'Logistics' },
 ])
 
 const goPage = (url: any, index: any) => {
@@ -100,6 +115,118 @@ onMounted(() => {
     box-sizing: border-box;
 }
 
+.gallery-container {
+    margin: 12vw 0;
+    display: grid;
+    place-content: center;
+}
+
+.gallery {
+    --s: 15vw;
+    /* control the size */
+    --g: -2px;
+    /* control the gap */
+    display: grid;
+
+    .gallery-item {
+        // position: relative;
+        overflow: hidden;
+        background: rgba(191, 191, 191, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .imgtitle1{
+            display: none;
+        }
+
+        .imgtitle {
+            z-index: 999;
+            height: 25%;
+            clip-path: polygon(0% 0%, 100% 0%, 82% 100%, 18% 100%);
+            width: 70%;
+            background: rgba(0, 0, 0, 0.3);
+            bottom: 5%;
+            color: #fff;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: 0.5s linear;
+
+            .title {
+                -webkit-box-reflect: below -5px -webkit-linear-gradient(transparent 40%, #fff 100% );
+                overflow: hidden;
+            }
+        }
+
+        img {
+            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
+            width: 90%;
+            height: 90%;
+            transition: 0.5s linear;
+        }
+
+        // img:hover{
+        //     transform: scale(1.2);
+        // }
+        .imgtitle:hover{
+            bottom: 0;
+            transform: scale(1.2);
+            background: orange;
+        }
+        .imgtitle:hover + img{
+            transform: scale(1.2);
+        }
+    }
+}
+
+.gallery>div {
+    grid-area: 1/1;
+    /* 规定从第一行第一列开始显示项目 */
+    // width: var(--s);
+    aspect-ratio: 1.15;
+    /* 宽高比例缩放 */
+    object-fit: cover;
+    /* 保持图片原有比例, 会有剪切*/
+    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
+    transform: translate(var(--_x, 0), var(--_y, 0)) scale(var(--_t, 1));
+    /* 对图片进行移动和缩放 */
+    cursor: pointer;
+    /* 灰度滤镜 */
+    // transition: 0.2s linear;
+    /* 过渡效果 */
+}
+
+
+.gallery>div:nth-child(1) {
+    --_y: calc(-100% - var(--g));
+}
+
+.gallery>div:nth-child(7) {
+    --_y: calc(100% + var(--g));
+}
+
+.gallery>div:nth-child(3),
+.gallery>div:nth-child(5) {
+    --_x: calc(-75% - 0.87 * var(--g));
+}
+
+.gallery>div:nth-child(4),
+.gallery>div:nth-child(6) {
+    --_x: calc(75% + 0.87 * var(--g));
+}
+
+.gallery>div:nth-child(3),
+.gallery>div:nth-child(4) {
+    --_y: calc(-50% - 0.5 * var(--g));
+}
+
+.gallery>div:nth-child(5),
+.gallery>div:nth-child(6) {
+    --_y: calc(50% + 0.5 * var(--g));
+}
+
 .service-img {
     padding: 0 20px;
 }
@@ -204,7 +331,11 @@ onMounted(() => {
     }
 }
 
-@media (max-width: 800px) {
+@media screen and (max-width: 960px) {
+    .gallery-container {
+        scale: 0.4;
+        margin: 0 0 10vw 0;
+    }
 
     .sww {
         width: 35vw;
@@ -252,5 +383,4 @@ onMounted(() => {
             width: 40px;
         }
     }
-}
-</style>
+}</style>

montier/src/pages/projectCases.vue

@@ -1,129 +0,0 @@
-<template>
-    <div>
-        <div class="procurement align-items-center width-80 m-auto">
-            <div class="bg-F4F4F4 pa-2 border-box">
-                <div class="casemessage">
-                    <div class="casemessage-left">
-                        <p class="font-size-30">Fairmont Empress Hotel</p>
-                        <div class="message">
-                            <p class="item"><strong>Address: </strong>721 Government St, Victoria, BC V8W 1W5,Canada</p>
-                            <p class="item"><strong>Type: </strong>Hotel</p>
-                            <p class="item"><strong>Solutions: </strong>Furniture,Fixtures＆Equipment, lights fixture</p>
-                        </div>
-                        <p class="button-left">Get Aa Free Quote ></p>
-                    </div>
-                    <div class="casemessage-right width-100">
-                        <img src="../assets/img/Installwoodenflooring.jpg" alt="Installwoodenflooring"
-                            class="width-100 imgcase">
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="details">
-            <h2>DETAILS</h2>
-            <p class="details-message">Oppein Home, the largest cabinet manufacturer in Asia, will supply high-end cabinetry
-                and joinery for the
-                AURA residential development by Aqualand, an Australian property, hospitality and investment company.
-                This is the second collaboration between Oppein Home and Aqualand, and it turns out to be an impressive
-                achievement for both companies.</p>
-            <img src="../assets/img/Installwoodenflooring.jpg" alt="Install wooden flooring" class="width-100">
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped lang="less">
-.procurement {
-    margin-top: 2vw;
-}
-
-.casemessage {
-    padding: 15px;
-    display: flex;
-    justify-content: space-between;
-    // align-items: center;
-    overflow: hidden;
-
-    .casemessage-left {
-        width: 50%;
-        font-size: 26px;
-        margin-right: 5%;
-
-        .message {
-            margin-top: 5vw;
-            font-size: 16px;
-
-            .item {
-                margin: 10px 0;
-                color: #888;
-            }
-        }
-
-        .button-left {
-            // position: absolute;
-            cursor: pointer;
-            float: left;
-            padding: 10px 20px;
-            background-color: #fa8106;
-            float: left;
-            margin-top: 5vw;
-            font-size: 16px;
-            color: #fff;
-        }
-    }
-
-    .casemessage-right {
-        // width: 45%;
-        height: 20vw;
-        overflow: hidden;
-
-        img {
-            transition: all 3s;
-        }
-    }
-
-    .casemessage-right:hover img {
-        transform: scale(1.1);
-    }
-}
-
-.details {
-    width: 80%;
-    margin: 20px auto;
-    text-align: center;
-
-    .details-message {
-        margin: 20px 0;
-        text-align: left;
-    }
-}
-
-@media screen and (max-width: 960px) {
-    .casemessage {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-
-        .casemessage-left {
-            display: flex;
-            flex-wrap: wrap;
-            font-size: 10px;
-            margin-bottom: 10px;
-            .button-left{
-                white-space: nowrap;
-            }
-        }
-
-        .casemessage-right {
-            height: 35vw;
-
-            .imgcase {
-                width: 100%;
-                height: 100%;
-            }
-        }
-    }
-}</style>

montier/src/router/index.ts

@@ -21,7 +21,7 @@ const routes = [
     },
     {
         path: '/projectcase/:name',
-        component: () => import('../pages/projectCases.vue'),
+        component: () => import('../pages/Casemessage.vue'),
         meta: { title: 'Project Case' },
         content: {
             keywords: 'FFE Building materials Smart hotelEnergy Saving',
@@ -53,14 +53,39 @@ const routes = [
             keywords: 'FFE Building materials Smart hotelEnergy Saving',
             description: ''
         },
+    },
+    {
+        path: '/about',
+        component: () => import('../pages/AboutMessage.vue'),
+        meta: { title: 'About MONTIERI' },
+        content: {
+            keywords: 'FFE Building materials Smart hotelEnergy Saving',
+            description: ''
+        }
+    },{
+        path: '/projectcase',
+        component: () => import('../pages/AllCases.vue'),
+        meta: { title: 'Project Case' },
+        content: {
+            keywords: 'FFE Building materials Smart hotelEnergy Saving',
+            description: ''
+        }
+    },{
+        path: '/productcenter',
+        component: () => import('../pages/Allproduct.vue'),
+        meta: { title: 'Product Center' },
+        content: {
+            keywords: 'FFE Building materials Smart hotelEnergy Saving',
+            description: ''
+        }
     },{
         path: '/productcenter/:name',
-        component: () => import('../pages/ProductCenter.vue'),
+        component: () => import('../pages/Productmessage.vue'),
         meta: { title: 'Product Center' },
         content: {
             keywords: 'FFE Building materials Smart hotelEnergy Saving',
             description: ''
-        },
+        }
     }
 ]
 

montier/src/store/modules/homepage.ts

@@ -3,75 +3,7 @@ import { defineStore } from "pinia";
 const useHomeStore = defineStore('Home', {
     state: () => {
         return {
-            // 顶部导航栏数据
-            headerlist: [
-                {
-                    title: 'Home',
-                    position: 'home',
-                    children: []
-                },
-                {
-                    title: 'Product Center',
-                    position: 'PC',
-                    children: [
-                        { title: 'door', posistion: 'door' },
-                        { title: 'window', posistion: 'window' },
-                        { title: 'railing and stair', posistion: 'rs' },
-                        { title: 'Building Materials', posistion: 'BM', cdchildren: [
-                            { title: 'Floor', posistion: 'Floor' },
-                            { title: 'Wall', posistion: 'Wall' },
-                            { title: 'roof', posistion: 'roof' },
-                        ] },
-                        { title: 'wiKitchen Cabinets with Customizationndow', posistion: 'KCwC' },
-                        { title: 'Kitchen faucet and sink', posistion: 'Kfs' },
-                        { title: 'Sanitary Ware', posistion: 'SW', cdchildren: [
-                            { title: 'Mirror', posistion: 'Mirror' },
-                            { title: 'Toilet', posistion: 'Toilet' },
-                            { title: 'Bathtub ', posistion: 'Bathtub ' },
-                            { title: 'Jacuzzi', posistion: 'Jacuzzi' },
-                            { title: 'Faucet', posistion: 'Faucet' },
-                            { title: 'Sink', posistion: 'Sink' },
-                            { title: 'Accessories', posistion: 'Accessories' },
-                            { title: 'Shower Glass', posistion: 'SG' },
-                            { title: 'Bathroom', posistion: 'Bathroom' },
-                            { title: 'Shower system', posistion: 'Ss' },
-                        ] },
-                    ]
-                },
-                {
-                    title: 'Service',
-                    position: 'service',
-                    children: [
-                        { title: 'Design', posistion: 'Design' },
-                        { title: 'Procurement & Manufacture', posistion: 'PM' },
-                        { title: 'Logistic and warehouseing', posistion: 'Lw' },
-                        { title: 'Installaion', posistion: 'Installaion' },
-                        { title: 'quality control', posistion: 'qc' },
-                    ]
-                },
-                {
-                    title: 'Project Cases',
-                    position: 'PCases',
-                    children: [
-                        { title: 'State Street, Carlsbad, CA', posistion: 'SSCA' },
-                        { title: 'Lofts on Laurel, San Diego', posistion: 'LLSD' },
-                        { title: 'Virgin Hotel,SFO', posistion: 'VHS' },
-                        { title: 'GOA, India Wyndham', posistion: 'GIW' },
-                        { title: 'METROPICA, MIAMI', posistion: 'MM' },
-                        { title: '989 Johnson Street, Victoria,Canada', posistion: '9JSVC' },
-                    ]
-                },
-                {
-                    title: 'News',
-                    position: 'news',
-                    children: []
-                },
-                {
-                    title: 'Contact Us',
-                    position: 'CUs',
-                    children: []
-                }
-            ]
+            
         }
     },