0814提交

montier/package-lock.json

@@ -416,6 +416,11 @@
         "vue-demi": "*"
       }
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "async-validator": {
       "version": "4.2.5",
       "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
@@ -469,6 +474,14 @@
         "ms": "^2.1.1"
       }
     },
+    "dom7": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-4.0.6.tgz",
+      "integrity": "sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==",
+      "requires": {
+        "ssr-window": "^4.0.0"
+      }
+    },
     "element-plus": {
       "version": "2.3.9",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.9.tgz",
@@ -786,6 +799,20 @@
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
+    "ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
+    "swiper": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-7.4.1.tgz",
+      "integrity": "sha512-dhbL4tpYFvHug1J7GnKElfTi6EYhlZy/vNZRhHkWFyUsWZ1Vovipxj3la5gqllMogygXJMe3zvVv+f6eppvWiA==",
+      "requires": {
+        "dom7": "^4.0.2",
+        "ssr-window": "^4.0.2"
+      }
+    },
     "tslib": {
       "version": "2.6.1",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.1.tgz",
@@ -855,6 +882,26 @@
         "semver": "^7.3.8"
       }
     },
+    "wow.js": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/wow.js/-/wow.js-1.2.2.tgz",
+      "integrity": "sha512-YTW9eiZimHCJDWofsiz2507txaPteUiQD461I/D8533AiRAn3+Y68/1LDuQ3OTgPjagGZLPYKrpoSgjzeQrO6A=="
+    },
+    "wowjs": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/wowjs/-/wowjs-1.1.3.tgz",
+      "integrity": "sha512-HQp1gi56wYmjOYYOMZ08TnDGpT+AO21RJVa0t1NJ3jU8l3dMyP+sY7TO/lilzVp4JFjW88bBY87RnpxdpSKofA==",
+      "requires": {
+        "animate.css": "^4.1.1"
+      },
+      "dependencies": {
+        "animate.css": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+          "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+        }
+      }
+    },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",

montier/package.json

@@ -13,6 +13,10 @@
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
     "pinia": "^2.1.6",
+    "swiper": "7.4.1",
+    "wow.js": "^1.2.2",
+    "wowjs": "^1.1.3",
+    "animate.css": "^4.1.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },

montier/src/App.vue

@@ -2,13 +2,26 @@
   import HeaderPage from './components/HeaderPage.vue';
   import FooterPage from './components/FooterPage.vue';
   import { useRoute } from 'vue-router'
-  import {computed} from "vue";
+  import {computed, onMounted} from "vue";
+  import WOW from "wow.js";
 
   const route = useRoute()
   console.log(route)
   const routerKey = computed(() => {
     return route.path + Math.random()
   })
+  onMounted(()=>{
+    let wow = new WOW({
+      boxClass: "wow",
+      animateClass: "animated",
+      offset: 0,
+      mobile: true,
+      live: true,
+      scrollContainer: null,
+      resetAnimation: true,
+    });
+    wow.init();
+  })
 </script>
 
 <template>
@@ -19,7 +32,4 @@
 
 <style>
  @import './assets/css/index.css';
- body{
-  background-color: pink;
- }
 </style>

montier/src/assets/img/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1672798432171" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6011" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M913.15 260.51a480.53 480.53 0 0 0-203.8-174 40 40 0 0 0-32.92 72.91C819.53 224.06 912 367.23 912 524.19c0 220.56-179.44 400-400 400s-400-179.44-400-400c0-157 92.47-300.14 235.57-364.75a40 40 0 0 0-32.92-72.91 480 480 0 1 0 598.5 174z" fill="#ffffff" p-id="6012"></path><path d="M172.06 524.19a15 15 0 0 0-30 0 369.94 369.94 0 1 0 739.88 0 369 369 0 0 0-120.59-273.27 15 15 0 0 0-20.23 22.16 340.79 340.79 0 0 1 110.82 251.11c0 187.44-152.5 339.94-339.94 339.94S172.06 711.64 172.06 524.19z" fill="#ffffff" p-id="6013"></path><path d="M692.89 218.75m-15 0a15 15 0 1 0 30 0 15 15 0 1 0-30 0Z" fill="#ffffff" p-id="6014"></path><path d="M512 595.26a40 40 0 0 0 40-40V59.81a40 40 0 0 0-80 0v495.45a40 40 0 0 0 40 40z" fill="#ffffff" p-id="6015"></path></svg>

montier/src/assets/img/menu.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1672797266248" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3946" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#ffffff" fill-opacity=".01" p-id="3947"></path><path d="M438.857143 548.571429a36.571429 36.571429 0 0 1 36.571428 36.571428v292.571429a36.571429 36.571429 0 0 1-36.571428 36.571428H146.285714a36.571429 36.571429 0 0 1-36.571428-36.571428V585.142857a36.571429 36.571429 0 0 1 36.571428-36.571428h292.571429z m438.857143 0a36.571429 36.571429 0 0 1 36.571428 36.571428v292.571429a36.571429 36.571429 0 0 1-36.571428 36.571428H585.142857a36.571429 36.571429 0 0 1-36.571428-36.571428V585.142857a36.571429 36.571429 0 0 1 36.571428-36.571428h292.571429z m-438.857143-438.857143a36.571429 36.571429 0 0 1 36.571428 36.571428v292.571429a36.571429 36.571429 0 0 1-36.571428 36.571428H146.285714a36.571429 36.571429 0 0 1-36.571428-36.571428V146.285714a36.571429 36.571429 0 0 1 36.571428-36.571428h292.571429z m438.857143 292.571428a36.571429 36.571429 0 1 1 0 73.142857H585.142857a36.571429 36.571429 0 0 1 0-73.142857h292.571429z m0-146.285714a36.571429 36.571429 0 1 1 0 73.142857H585.142857a36.571429 36.571429 0 0 1 0-73.142857h292.571429z m-146.285715-146.285714a36.571429 36.571429 0 1 1 0 73.142857H585.142857a36.571429 36.571429 0 0 1 0-73.142857h146.285714z" fill="#ffffff" p-id="3948"></path></svg>

montier/src/components/FooterPage.vue

@@ -1,11 +1,354 @@
 <template>
-  底部
+  <div class="footerBox">
+    <div class="content">
+      <div class="box">
+        <div class="navs">
+          <div class="nav-item">
+            <div class="title">Service</div>
+            <div class="items">
+              <div class="item" v-for="(item, index) in Home.$state.headerlist[2].children" :key="index">{{ item.title }}
+              </div>
+            </div>
+          </div>
+          <div class="nav-item">
+            <div class="title">Product Center</div>
+            <div class="items">
+              <div class="item" v-for="(item, index) in Home.$state.headerlist[1].children" :key="index">{{ item.title }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="nav-email">
+        <div class="email">
+          Email: bill@i-montieri.com
+        </div>
+        <div class="emial">
+          WhatsApp:
+        </div>
+      </div>
+      <div class="nav-email">
+        Location:
+      </div>
+      <div class="copyright">
+        <span>Copyright © 2022 深圳市小之物联科技有限公司 版权所有</span>
+        <span class="ml-1"> <a href="https://beian.miit.gov.cn/#/Integrated/index" class="color-8c8fa4"
+            target="_blank">粤ICP备2022149958号</a> <a
+            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030502009678" class="color-8c8fa4"><img
+              src="../assets/img/police1.png" alt="粤公网安备 44030502009678号" style="height: 12px;margin-right: 2px;"
+              class="ml-1">粤公网安备 44030502009678号</a></span>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts">
+<script  setup lang="ts">
+import { onMounted } from "vue";
+import useHomeStore from "../store/modules/homepage";
 
+let Home = useHomeStore()
+
+
+onMounted(async () => {
+
+})
+// const getProduct = async () => {
+//   let data={
+//     groupId: 3,
+//     pageSize: 8,
+//     language:userStore.language,
+//     pageNum: 1
+//   }
+//   let res = await getDataApi(data)
+//   if(res){
+//     let productList = <any>[]
+//     res.map((li:any,index:any) => {
+//       li.detail = JSON.parse(li.detail);
+//       li.detail['id'] = li.id
+//       li.detail['index']=li.id+''+index
+//       productList.push(li.detail)
+//     });
+//     let sameType = [];
+//     sameType = classify(productList, "type")
+//     productListArr.value = sameType
+//   }
+// }
+//数据归类方法
+// const classify = (arr:any, key:any) => {
+//   let kind = <any>[]; //存放属性标识
+//   let newArr = <any>[]; //返回的数据
+//   arr.map((item:any) => {
+//     // 判断key是否存在，不存在则添加
+//     if (!kind.includes(item[key])) {
+//       kind.push(item[key]); //kind添加新标识
+//       newArr.push([]); //添加数组
+//     }
+//     let index = kind.indexOf(item[key]); //返回带有标识在kind内的下标，判断加入哪个数组
+//     newArr[index].push(item); //将对象存入数组
+//   });
+//   return newArr;
+// }
 </script>
 
 <style scoped lang="less">
+.footerBox {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 1rem 0 1rem;
+  background-color: #0b1030;
+  white-space: nowrap;
+  position: relative;
+
+  .content {
+    width: 100%;
+    max-width: 75rem;
+    margin: auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+
+    .nav-email {
+      margin-top: 1rem;
+      color: #ffffff;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      vertical-align: baseline;
+      font-weight: bold;
+
+      .email {
+        margin-right: 1.5rem;
+      }
+    }
+
+    .address {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -webkit-align-items: center;
+      -ms-flex-align: center;
+      align-items: center;
+      padding-bottom: 2.5rem;
+      border-bottom: 1px solid #2f3140;
+
+      img {
+        width: 12rem;
+        margin-right: 1.875rem;
+        cursor: pointer;
+      }
+
+      .right {
+        -webkit-box-flex: 1;
+        -webkit-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
+
+        .top {
+          display: -webkit-box;
+          display: -webkit-flex;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-align: center;
+          -webkit-align-items: center;
+          -ms-flex-align: center;
+          align-items: center;
+
+          .item {
+            font-weight: 600;
+            color: #fff;
+            line-height: 1.375rem;
+            padding: 0 1.25rem;
+            border-right: 1px solid #fff;
+            cursor: pointer;
+          }
+
+          .item:first-child {
+            padding-left: 0;
+          }
+
+          .item:last-child {
+            border-right: none;
+          }
+
+          .item.active {
+            color: #3069fe;
+          }
+        }
+
+        .info {
+          font-size: .875rem;
+          color: #a8a9b3;
+          line-height: 1.25rem;
+          margin-top: 0.625rem;
+          display: -webkit-box;
+          display: -webkit-flex;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-align: center;
+          -webkit-align-items: center;
+          -ms-flex-align: center;
+          align-items: center;
+          -webkit-flex-wrap: wrap;
+          -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+
+          p {
+            margin: 0;
+            padding: 0;
+            margin-right: 2.5rem;
+          }
+
+          p:first-child {
+            width: 100%;
+          }
+        }
+
+      }
+    }
+
+    .box {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: justify;
+      -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+      justify-content: space-between;
+      margin-top: 2.5rem;
+
+      .navs {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        vertical-align: baseline;
+
+        .nav-item {
+          margin-right: 3.125rem;
+
+          .title {
+            font-size: 15px;
+            font-weight: bold;
+            color: #fff;
+            line-height: 1.3125rem;
+            margin-bottom: 0.9375rem;
+          }
+
+          .items {
+            .item {
+              font-size: 14px;
+              color: #8c8fa4;
+              line-height: 1.875rem;
+              display: block;
+            }
+          }
+        }
+      }
+
+      .center {
+        vertical-align: baseline;
+
+        .title {
+          font-size: .75rem;
+          color: #fff;
+          line-height: 1.3125rem;
+          margin-bottom: 0.9375rem;
+        }
+
+        .no-transition {
+          width: 6.875rem;
+          margin-top: 0.75rem;
+        }
+      }
+
+      .right {
+        .title {
+          font-size: 15px;
+          font-weight: bold;
+          color: #fff;
+          line-height: 1.3125rem;
+          margin-bottom: 0.9375rem;
+        }
+
+        .item {
+          font-size: 14px;
+          color: #bcbcbc;
+          line-height: 1.875rem;
+          cursor: pointer;
+        }
+
+        .item.active {
+          color: #3069fe;
+        }
+      }
+    }
+
+    .copyright {
+      font-size: .75rem;
+      color: #8c8fa4;
+      line-height: 1.0625rem;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      -webkit-box-align: center;
+      -webkit-align-items: center;
+      -ms-flex-align: center;
+      align-items: center;
+      padding-top: 1.625rem;
+      border-top: 1px solid #2f3140;
+      margin-top: 2.5rem;
+    }
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .footerBox {
+    padding: 1rem 0;
+    overflow: hidden;
+
+    .content {
+      padding: 0 1.25rem;
+
+      .address {
+        display: initial;
+
+        .right {
+          .top {
+            .item {
+              padding: 0 0.625rem;
+            }
+          }
+        }
+      }
+
+      .box {
+        display: initial;
+        text-align: center;
+
+        .navs {
+          display: none;
+        }
+
+        .right {
+          display: none;
+        }
+
+        .info {
+          text-align: center;
+        }
+      }
 
-</style>
+      .copyright {
+        flex-wrap: wrap;
+      }
+    }
+  }
+}</style>

montier/src/components/HeaderPage.vue

@@ -1,52 +1,17 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useRouter } from "vue-router";
-let caselist = ref<any>([
-  {
-    detail: {
-      title: 'door', position: 'door'
-    }
-  },
-  {
-    detail: {
-      title: 'window', position: 'window'
-    }
-  },
-  {
-    detail: {
-      title: 'railing and stair', position: 'rs'
-    }
-  },
-  {
-    detail: {
-      title: 'Building Materials', position: 'BM'
-    }
-  },
-  {
-    detail: {
-      title: 'Kitchen Cabinets with Customization', position: 'KCwC'
-    }
-  },
-  {
-    detail: {
-      title: 'Kitchen faucet and sink', position: 'Kfs'
-    }
-  },
-  {
-    detail: {
-      title: 'Sanitary Ware', position: 'SW'
-    }
-  },
-])
+import useHomeStore from '../store/modules/homepage'
+
+let Home = useHomeStore()
+
 
-let productListArr = ref<any>([])
 let screenWidth = ref<any>(0)
 let clickStatus = ref<any>(false)
 let scrollTopShow = ref<any>(true)
 const router = useRouter()
 onMounted(async () => {
   screenWidth.value = document.body.offsetWidth;
-  await getProduct()
   window.addEventListener('resize', function () {
     screenWidth.value = document.body.offsetWidth;
   })
@@ -67,136 +32,44 @@ const goPage = (url: any) => {
   clickStatus.value = false
   router.push(url)
 }
-// const mobheadFun = async () =>{
-//   clickStatus.value=!clickStatus.value
-// }
-const getProduct = async () => {
-  productListArr.value = [
-    [{ type: 'Design', position: 'Ds' }],
-    [{ type: 'Procurement & Manufacture', position: 'PM' }],
-    [{ type: 'Logistic and warehouseing', position: 'Lw' }],
-    [{ type: 'Installaion', position: 'Ts' }],
-    [{ type: 'quality control', position: 'qc' }],
-  ]
+const mobheadFun = async () => {
+  clickStatus.value = !clickStatus.value
 }
-const projectcaseslist = reactive([
-  [{ type: 'State Street, Carlsbad, CA', position: 'SSCC' }],
-  [{ type: 'Lofts on Laurel, San Diego', position: 'LLSD' }],
-  [{ type: 'Virgin Hotel,SFO', position: 'VHS' }],
-  [{ type: 'GOA, India Wyndham', position: 'GIW' }],
-  [{ type: 'METROPICA, MIAMI', position: 'MM' }],
-  [{ type: '989 Johnson Street, Victoria,Canada', position: 'JSV' }],
-])
 </script>
 
 <template>
   <div class="position-relative ">
-    <div class="navbar pb-4-px" :class="scrollTopShow ? '' : 'bg-white'" v-if="screenWidth > 1200">
+    <div class="navbar pb-4-px" :class="scrollTopShow ? 'bg-white' : 'bg-white'" v-if="screenWidth > 1200">
       <div class="navbar-container">
         <div class="navbar-header">
           <div class="navbar-brand">
             <router-link to="/" class="text-center">
               <div class="navbar-brand-logo" :class="scrollTopShow ? 'white-img' : 'black-img'"></div>
-              <!--              <p :class="scrollTopShow?'color-fff':'color-0167b1'" class="font-size-20">锁到之处  即小见大</p>-->
+                           <!-- <p :class="scrollTopShow?'color-fff':'color-0167b1'" class="font-size-20">锁到之处  即小见大</p> -->
             </router-link>
           </div>
         </div>
         <div class="site-header-navbar d-flex justify-content-between">
           <div class="navbar-left width-5"></div>
           <div class="navbar-category">
-            <div class="category-item font-size-14 position-relative">
-              <div class="nav-item-title px-1 d-flex align-items-center"
-                :class="scrollTopShow ? 'color-fff' : 'color-000'" @click="goPage('/')">Home</div>
-              <div class="dui-dropdown-men position-absolute">
-                <div class="menu-container mt-1">
-
-                </div>
-              </div>
-            </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-fff' : 'color-000'">
-                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">
-                      <div>
-                        <div class="nav-item-link px-16-px text-overflow-ellipsis" :title="item.detail.title">{{
-                          item.detail.title }}</div>
-                      </div>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </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-fff' : 'color-000'">
-                Service</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 productListArr" :key="index">
-                      <div>
-                        <div class="nav-item-link px-16-px text-overflow-ellipsis" :title="item[0].type">{{ item[0].type
-                        }}</div>
-                      </div>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-
-            <div class="category-item ml-3 font-size-14 position-relative">
+            <div class="category-item ml-3 font-size-14 position-relative" v-for="item, index in Home.$state.headerlist"
+              :key="index">
               <div class="nav-item-title d-flex px-1 align-items-center"
-                :class="scrollTopShow ? 'color-fff' : 'color-000'">
-                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 projectcaseslist" :key="index">
-                      <div>
-                        <div class="nav-item-link px-16-px text-overflow-ellipsis" :title="item[0].type">{{ item[0].type
-                        }}</div>
-                      </div>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-            <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-fff' : 'color-000'">
-                News</div>
-              <div class="dui-dropdown-men position-absolute">
+                :class="scrollTopShow ? 'color-000' : 'color-000'">
+                {{ item.title }}</div>
+              <div class="dui-dropdown-men position-absolute" v-if="item.children.length > 0">
                 <div class="menu-container mt-1">
                   <ul>
-                    <li class="nav-item text-center">
+                    <li class="nav-item text-center" v-for="(item2, index2) in item.children" :key="index2">
                       <div>
-                        <div class="nav-item-link px-16-px text-overflow-ellipsis">产品试用申请</div>
-                      </div>
-                    </li>
-                    <li class="nav-item text-center">
-                      <div>
-                        <div class="nav-item-link px-16-px text-overflow-ellipsis">产品安装指导</div>
+                        <div class="nav-item-link px-16-px text-overflow-ellipsis" :title="item2.title">{{
+                          item2.title }}</div>
                       </div>
                     </li>
                   </ul>
                 </div>
               </div>
             </div>
-
-            <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-fff' : 'color-000'">
-                Contact Us</div>
-              <div class="dui-dropdown-men position-absolute">
-                <div class="menu-container mt-1">
-
-                </div>
-              </div>
-            </div>
           </div>
           <div class="navbar-right width-10"></div>
         </div>
@@ -205,51 +78,45 @@ const projectcaseslist = reactive([
     <div v-else>
       <div class="MobileHead">
         <div class="logoimg text-center position-absolute">
-          <!-- <img src="../assets/img/logo1.png" alt="深圳市小之物联科技有限公司" class="width-100"> -->
+          <img src="../assets/img/logo.png" alt="montieri" class="width-100">
         </div>
         <div class="position-absolute menuIcon color-8c8fa4">
-          <!-- <img src="../assets/img/menu.svg" alt="菜单栏" class="width-15" v-if="!clickStatus" /> -->
-          <!-- <img src="../assets/img/close.svg" class="width-15" alt="关闭菜单栏" @click="mobheadFun" v-else> -->
+          <img src="../assets/img/menu.svg" alt="菜单栏" class="width-15" @click="mobheadFun" v-if="!clickStatus" />
+          <img src="../assets/img/close.svg" class="width-15" alt="关闭菜单栏" @click="mobheadFun" v-else>
         </div>
         <div class="mobmenu" :class="clickStatus ? 'mobmenu1' : ''">
           <el-menu default-active="0" class="el-menu-vertical-demo">
             <el-menu-item index="0" @click="goPage('/')">
-              <span>首页</span>
+              <span>Home</span>
             </el-menu-item>
             <el-sub-menu index="1">
               <template #title>
-                <span>解决方案</span>
+                <span>Product Center</span>
               </template>
-              <el-menu-item :index="'1-' + index" v-for="(item, index) in caselist" :key="index">
-                {{ item.detail.title }}
+              <el-menu-item :index="'1-' + index" v-for="(item, index) in Home.$state.headerlist[1].children" :key="index">
+                {{ item.title }}
               </el-menu-item>
             </el-sub-menu>
             <el-sub-menu index="2">
               <template #title>
-                <span>产品中心</span>
+                <span>Service</span>
               </template>
-              <el-menu-item :index="'2-' + index" v-for="(item, index) in productListArr" :key="index">{{ item[0].type
-              }}</el-menu-item>
+              <el-menu-item :index="'2-' + index" v-for="(item, index) in Home.$state.headerlist[2].children" :key="index">{{ item.title }}</el-menu-item>
             </el-sub-menu>
             <el-sub-menu index="3">
               <template #title>
-                <span>服务支持</span>
+                <span>Project Cases</span>
               </template>
-              <el-menu-item index="3-1">
-                <span>产品试用申请</span>
-              </el-menu-item>
-              <el-menu-item index="3-2">
-                <span>产品安装指导</span>
-              </el-menu-item>
+              <el-menu-item :index="'3-' + index" v-for="(item, index) in Home.$state.headerlist[3].children" :key="index">{{ item.title }}</el-menu-item>
             </el-sub-menu>
             <el-menu-item index="4">
               <template #title>
-                <span>合作发展</span>
+                <span>News</span>
               </template>
             </el-menu-item>
             <el-menu-item index="5">
               <template #title>
-                <span>联系小之</span>
+                <span>Contact Us</span>
               </template>
             </el-menu-item>
           </el-menu>
@@ -272,7 +139,7 @@ const projectcaseslist = reactive([
   font-smoothing: antialiased;
   z-index: 1001;
   box-sizing: border-box;
-  //box-shadow: 0 0 12px rgba(0,0,0,0.12);
+  // box-shadow: 0 0 12px rgba(0,0,0,0.12);
 }
 
 .navbar-container {
@@ -314,7 +181,7 @@ const projectcaseslist = reactive([
 }
 
 .white-img {
-  background: url("../assets/img/logo.png") no-repeat ;
+  background: url("../assets/img/logo1.png") no-repeat;
   background-size: 45% auto;
   background-position: center;
 }

montier/src/components/Title.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="text-center my-4 topBox">
+    <div class="wow animated fadeInUp text-center position-relative width-90  d-inline-block">
+      <h2 class="section-title">{{ props.value.title }}</h2>
+      <p class="color-8e8e8e font-size-18 mt-2">{{ props.value.desc }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props=defineProps({
+  value:{
+    type:Object,
+    default:()=>{}
+  }
+})
+
+</script>
+
+<style scoped>
+.section-title{
+  color: #333;
+  font-size: 30px;
+  font-weight: bold;
+}
+.lead{
+  position: absolute;
+  bottom: 10px;
+  font-size: 80px;
+  font-weight: bold;
+  opacity: 0.15;
+  text-align: center;
+  left: 50%;
+  display: block;
+  transform: translateX(-50%);
+  width: 100%;
+  z-index: -1;
+}
+@media (max-width: 1200px) {
+  .section-title{
+    font-size: 30px;
+  }
+  .lead{
+    font-size: 50px;
+    bottom: 10px;
+  }
+  .topBox{
+    margin-top: 30px;
+  }
+}
+
+@media (max-width: 800px) {
+  .section-title{
+    font-size: 24px;
+  }
+  .lead{
+    font-size: 30px;
+    bottom: 15px;
+  }
+  .topBox{
+    margin-top: 20px;
+  }
+}
+</style>

montier/src/main.ts

@@ -5,6 +5,8 @@ import { createPinia } from 'pinia'
 import router from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import "animate.css";
+import 'animate.css/animate.compat.css'
 
 const app = createApp(App)
 app.use(ElementPlus)

montier/src/pages/AboutMontieri.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="aboutmontieri">
+        <!-- 左边图片 -->
+        <div class="aboutpic">
+            <img src="../assets/img/about.jpg" alt="About" class="about-img">
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="less">
+.aboutmontieri{
+    width: 90vw;
+    margin: 0 auto;
+    padding: 10px;
+    background-color: #d0cece;
+    .aboutpic{
+        width: 50vw;
+        height: 35vw;
+        .about-img{
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+</style>

montier/src/pages/HomePage.vue

@@ -1,11 +1,106 @@
 <template>
+    <!-- 轮播图 -->
+    <div class="width-100 bannerImg">
+      <swiper
+          :modules="modules"
+          :slides-per-view="1"
+          :loop="true"
+          :space-between="50"
+          navigation
+          :pagination="{ clickable: true }"
+          @swiper="onSwiper"
+          @slideChange="onSlideChange"
+      >
+        <swiper-slide  v-for="(item,index) in bannerList" :key="index">
+          <img :src="item.detail" :alt="item.title" class="width-100 d-block" />
+          <span class="img-title">{{ item.title }}</span>
+        </swiper-slide>
+      </swiper>
+    </div>
+    <!-- About montier -->
+    <Title :value="titleOne"></Title>
+    <Aboutmontieri/>
     
+    <!-- Service分类 -->
+    <Title :value="title"></Title>
+    <servicePage/>
 </template>
 
 <script setup lang="ts">
+import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
 
+import Title from '../components/Title.vue';
+import Aboutmontieri from './AboutMontieri.vue'
+import servicePage from './Service.vue'
+import { ref } from 'vue'
+
+let title = ref<any>({
+  title:"Service",
+  desc:""
+})
+let titleOne = ref<any>({
+  title:"About montieri",
+  desc:""
+})
+
+let modules = [ Navigation, Pagination, Scrollbar, A11y ]
+let bannerList = ref<any>([
+  {detail:new URL("../assets/img/Banner/Banner1.jpg",import.meta.url).href,title:'Becoming your best Building materials, Hotel FF&E Supplier is our goal'},
+  {detail:new URL("../assets/img/Banner/Banner2.jpg",import.meta.url).href,title:'Customizable  Product and Best service for best you and your most beautiful Building'},
+  {detail:new URL("../assets/img/Banner/Banner3.jpg",import.meta.url).href,title:'Quality Always Matters'},
+])
+
+const onSwiper = (swiper:any) => {
+
+};
+const onSlideChange = () => {
+
+};
 </script>
 
 <style scoped lang="less">
+.d-block{
+  width: 100vw;
+  height: 49.5vw;
+  position: relative;
+}
+.img-title{
+  position: absolute;
+  bottom: 5%;
+  left: 7%;
+  right: 11%;
+  color: #fff;
+  font-weight: bold;
+  font-size: 54px;
+}
+ .bannerImg {
+  :deep(.swiper-button-prev:after){
+    color: #fff;
+    font-size: 30px;
+  }
+   :deep(.swiper-button-next:after){
+    color: #fff;
+    font-size: 30px;
+  }
+}
 
+ @media (max-width: 800px) {
+  .img-title{
+    font-size: 18px;
+  }
+   .bannerImg {
+     margin-top:50px;
+     :deep(.swiper-button-prev:after){
+       font-size: 30px;
+     }
+     :deep(.swiper-button-next:after){
+       font-size: 30px;
+     }
+   }
+ }
 </style>

montier/src/pages/Service.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="width-100 bannerImg">
+        <swiper :modules="modules" :slides-per-View='per' :space-between="50" :loop="true" :navigation="true">
+            <swiper-slide v-for="item, index in servicelist" :key="index">
+                <div class="sw">
+                    <img :src="item.detail" :alt="item.title" class="img">
+                    <span class="img-title">{{ item.title }}</span>
+                </div>
+            </swiper-slide>
+        </swiper>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Pagination, Navigation, Scrollbar, A11y } from 'swiper'
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+
+import { ref } from 'vue'
+
+let modules = [Navigation, Pagination, Scrollbar, A11y]
+let per = ref<any>(5)
+
+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' },
+])
+
+window.onresize = () => {
+    return (() => {
+        if (document.body.clientWidth <= 800) {
+            per.value = 3
+        } else {
+            per.value = 5
+        }
+    })()
+}
+</script>
+
+<style scoped lang="less">
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.sw {
+    margin: 10px 0;
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    height: 20vw;
+    width: 8vw;
+    padding: 10px 0;
+    background-color: #d0cece;
+    border-radius: 75px;
+
+    .img {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 8vw;
+        height: 8vw;
+        z-index: 2;
+        background-color: #fff;
+        border-radius: 0 0 72px 72px;
+        padding-bottom: 5px;
+    }
+
+    .img-title {
+        position: absolute;
+        bottom: 20%;
+        left: 50%;
+        transform: translateX(-50%);
+        color: #000;
+        font-weight: bold;
+    }
+}
+
+:deep(.swiper-button-prev:after) {
+    display: none;
+}
+
+:deep(.swiper-button-next:after) {
+    display: none;
+}
+
+/*自定义样式*/
+:deep(.swiper-button-prev) {
+    color: transparent;
+    background: url('../assets/img/left.png') no-repeat;
+    background-size: cover;
+    left: 1vw;
+    width: 2.5vw;
+}
+
+:deep(.swiper-button-next) {
+    color: transparent;
+    background: url('../assets/img/right.png');
+    background-size: cover;
+    right: 1vw;
+    width: 2.5vw;
+}
+
+.bannerImg {
+    :deep(.swiper-button-prev:after) {
+        color: #fff;
+        font-size: 30px;
+    }
+
+    :deep(.swiper-button-next:after) {
+        color: #fff;
+        font-size: 30px;
+    }
+}
+
+@media (max-width: 800px) {
+    .sw {
+        .img-title {
+            font-size: 10px;
+        }
+    }
+
+    .bannerImg {
+        margin-top: 50px;
+
+        :deep(.swiper-button-prev) {
+            width: 40px;
+        }
+
+        :deep(.swiper-button-next) {
+            width: 40px;
+        }
+    }
+}
+</style>

montier/src/store/modules/homepage.ts

@@ -3,7 +3,75 @@ 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: []
+                }
+            ]
         }
     },
 

montier/src/vite-env.d.ts

@@ -1,6 +1,13 @@
 /// <reference types="vite/client" />
+declare module 'animate.css'
+declare module 'axios'
+declare module 'pinia'
+declare module 'element-plus'
+declare module 'wowjs'
 declare module "*.vue" {
     import { DefineComponent } from "vue"
     const component: DefineComponent<{}, {}, any>
     export default component
 }
+
+declare module '*.js'