From e4deda95e23c47c79e8b3b5ba10c800793fd6934 Mon Sep 17 00:00:00 2001
From: xiaohei <11674173+xiaohei102908@user.noreply.gitee.com>
Date: Mon, 28 Aug 2023 18:13:23 +0800
Subject: [PATCH] =?UTF-8?q?0828=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 montier/src/components/HeaderPage.vue | 15 +++++++-------
 montier/src/components/Title.vue      |  2 +-
 montier/src/pages/AboutMessage.vue    | 25 ++++++++++++++---------
 montier/src/pages/AboutUs.vue         | 13 ++++++------
 montier/src/pages/HomePage.vue        | 27 +++++++++++++++++--------
 montier/src/pages/NewsMessage.vue     |  2 +-
 montier/src/pages/Productmessage.vue  | 38 ++++++++++++++++++++++++++---------
 montier/src/pages/ProjectCase.vue     | 38 ++++++++++++++++++++---------------
 montier/src/pages/Service.vue         | 25 +++++++++++++----------
 montier/src/router/index.ts           |  4 ++--
 10 files changed, 118 insertions(+), 71 deletions(-)

diff --git a/montier/src/components/HeaderPage.vue b/montier/src/components/HeaderPage.vue
index b18cfba..6c9a47f 100644
--- a/montier/src/components/HeaderPage.vue
+++ b/montier/src/components/HeaderPage.vue
@@ -133,7 +133,7 @@ const getProduct = async () => {
         <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="category-item font-size-18 position-relative">
               <div class="nav-item-title px-1 d-flex align-items-center"
                 :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goPage('/')">Home</div>
               <div class="dui-dropdown-men position-absolute">
@@ -219,9 +219,9 @@ const getProduct = async () => {
     <div v-else>
       <div class="MobileHead">
         <div class="logoimg text-center position-absolute" @click="goPage('/')"><img src="../assets/img/logo.png"
-            alt="深圳市小之物联科技有限公司" class="width-100"></div>
-        <div class="position-absolute menuIcon color-8c8fa4"><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="关闭菜单栏"
+            alt="MONTIERI" class="width-100"></div>
+        <div class="position-absolute menuIcon color-8c8fa4"><img src="../assets/img/menu.svg" alt="menu" class="width-15"
+            @click="mobheadFun" v-if="!clickStatus" /><img src="../assets/img/close.svg" class="width-15" alt="closemenu"
             @click="mobheadFun" v-else></div>
         <div class="mobmenu" :class="clickStatus ? 'mobmenu1' : ''">
           <el-menu default-active="0" class="el-menu-vertical-demo">
@@ -350,9 +350,9 @@ const getProduct = async () => {
 .nav-item-title {
   transition: all .3s;
   vertical-align: middle;
-  line-height: 16px;
-  font-weight: 400;
-  font-size: 14px;
+  line-height: 55px;
+  font-weight: normal;
+  font-size: 19px;
   cursor: pointer;
   position: relative;
   -moz-justify-content: center;
@@ -425,6 +425,7 @@ const getProduct = async () => {
 }
 
 .nav-item-link {
+  font-size: 16px;
   height: 40px;
   line-height: 40px;
   vertical-align: middle;
diff --git a/montier/src/components/Title.vue b/montier/src/components/Title.vue
index 7b45c26..a769686 100644
--- a/montier/src/components/Title.vue
+++ b/montier/src/components/Title.vue
@@ -20,7 +20,7 @@ const props=defineProps({
 <style scoped>
 .section-title{
   color: #333;
-  font-size: 30px;
+  font-size: 36px;
   font-weight: bold;
 }
 .lead{
diff --git a/montier/src/pages/AboutMessage.vue b/montier/src/pages/AboutMessage.vue
index 44f6946..89bd2d5 100644
--- a/montier/src/pages/AboutMessage.vue
+++ b/montier/src/pages/AboutMessage.vue
@@ -2,8 +2,8 @@
     <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'">
+                <h1 class="color-fff font-bold">About Us</h1>
+                <div class="color-fff" :class="mobileShow ? 'font-size-14 aboutitem1' : 'font-size-24 aboutitem'">
                     <strong>·&emsp;</strong>
                     <p class="content">
                         MONTIERI Group is an one-stop service solution for international Hotel and real estate project
@@ -13,8 +13,7 @@
                         international projects globally.
                     </p>
                 </div>
-                <div class="color-fff font-700 aboutitem"
-                    :class="mobileShow ? 'font-size-14 aboutitem1' : 'font-size-20 aboutitem'">
+                <div class="color-fff aboutitem" :class="mobileShow ? 'font-size-14 aboutitem1' : 'font-size-24 aboutitem'">
                     <strong>·&emsp;</strong>
                     <p class="content">
                         We have more than 17 years overseas experience, professional management and operation experience.
@@ -34,7 +33,9 @@
 import router from '../router';
 import { onMounted, ref } from 'vue';
 
-const goPage = () => router.back()
+const goPage = () => {
+    router.back()
+}
 
 let mobileShow = ref<any>(false)
 onMounted(() => {
@@ -60,11 +61,11 @@ onMounted(() => {
     // height: 100vw;
 
     .about {
-        height: 48.3rem;
-        // height: 100%;
+        // height: 48.3rem;
+        height: 60vw;
         background: url("../assets/img/aboutus.jpg") no-repeat;
         background-size: cover;
-        background-position: center;
+        // background-position: center;
         box-sizing: border-box;
 
         .message {
@@ -75,9 +76,10 @@ onMounted(() => {
             height: 50%;
             padding: 2vw 3vw;
             overflow: hidden;
-            height: 50%;
+            // height: 40%;
             display: flex;
             flex-direction: column;
+            line-height: 2.5rem;
 
             .aboutitem {
                 margin-top: 2vw;
@@ -118,14 +120,17 @@ onMounted(() => {
             }
 
             .btn {
+                border: 1px solid #eee;
                 cursor: pointer;
+                padding: 0.5rem 2rem;
                 bottom: 1vw;
                 left: 50%;
                 transform: translateX(-50%);
             }
 
             .btn:hover {
-                color: rgb(255, 192, 0);
+                border: 1px solid #fa8106;
+                color: #fa8106;
             }
         }
     }
diff --git a/montier/src/pages/AboutUs.vue b/montier/src/pages/AboutUs.vue
index 996bcb2..08f3784 100644
--- a/montier/src/pages/AboutUs.vue
+++ b/montier/src/pages/AboutUs.vue
@@ -2,8 +2,8 @@
   <div class="procurement wow animated fadeInUp m-auto align-items-center bg-F4F4F4 pa-2 border-box" :class="mobileShow?'width-90':'d-flex  width-80'">
     <div class="border-box" :class="mobileShow?'width-100':'width-40 ml-2'">
       <div class="bg-white" :class="mobileShow?'fixed-width-height-mobile':'fixed-width-height'">
-        <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.
+        <h3 class="font-size-24 color-343434 line-height-2 mb-2 text-align-justify"><strong>About MONTIERI</strong></h3>
+        <p class="font-size-20 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>
         <router-link to="/about" class="small-button font-size-14" v-show="mobileShow">Read more</router-link>
       </div>
@@ -43,6 +43,7 @@ onMounted(async ()=>{
   })
 })
 const goPage = () => {
+  localStorage.setItem('scrollPosition', 'aboutus')
   document.documentElement.scrollTop = 0
   router.push({
     path: '/about'
@@ -53,13 +54,12 @@ const goPage = () => {
 <style scoped>
 .fixed-width{
   width:100%;
-  height: 400px;
 }
 .fixed-width-height{
   width: 100%;
   padding: 15px;
   box-sizing: border-box;
-  transform: translateX(4%);
+  transform: translateX(5%);
   z-index: 99;
   position: relative;
 }
@@ -87,14 +87,15 @@ const goPage = () => {
   color: #fff;
   width: 60px;
   display: inline-block;
-  top: 80%;
+  top: 74%;
   transform: translateX(-50%) translateY(-50%);
   cursor: pointer;
   box-shadow: 0 4px 10px #333;
   z-index: 999;
 }
 .read-more-pc{
-  left: -1%;
+  left: -4%;
+  /* top: 76%; */
 }
 .read-more-mobile{
   right: 0%;
diff --git a/montier/src/pages/HomePage.vue b/montier/src/pages/HomePage.vue
index 6a24fe0..2a2f4f0 100644
--- a/montier/src/pages/HomePage.vue
+++ b/montier/src/pages/HomePage.vue
@@ -10,12 +10,12 @@
     </swiper>
   </div>
   <!-- About montier -->
-  <Title :value="titleOne"></Title>
-  <AboutUs/>
+  <Title :value="titleOne" id="aboutus"></Title>
+  <AboutUs />
 
   <!-- Service分类 -->
   <Title :value="title" id="service"></Title>
-  <servicePage :index="1"/>
+  <servicePage :index="1" />
 
   <!-- PRODUCT CENTER -->
   <Title :value="titleTwo" id="productCenter"></Title>
@@ -42,7 +42,17 @@ import Title from '../components/Title.vue';
 import servicePage from './Service.vue'
 import AboutUs from './AboutUs.vue'
 import projectCase from './ProjectCase.vue'
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+
+onMounted(() => {
+  const position = localStorage.getItem('scrollPosition')
+  if (position) {
+    setTimeout(() => {
+      document.getElementById(position)?.scrollIntoView()
+    }, 50)
+    localStorage.removeItem('scrollPosition');
+  }
+})
 
 let title = ref<any>({
   title: "Service",
@@ -107,8 +117,9 @@ const onSlideChange = () => {
   // background: rgba(0, 0, 0, .5);
   background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.8) 70%);
   width: 100%;
-  padding: 20px;
-  font-size: 54px;
+  padding: 20px 20px 60px 20px;
+  font-size: 60px;
+  text-align: center;
 }
 
 .title-img {
@@ -130,8 +141,8 @@ const onSlideChange = () => {
 @media (max-width: 800px) {
   .img-title {
     box-sizing: border-box;
-    font-size: 18px;
-    padding: 5px;
+    font-size: 16px;
+    padding-bottom: 20px;
   }
 
   .bannerImg {
diff --git a/montier/src/pages/NewsMessage.vue b/montier/src/pages/NewsMessage.vue
index 9fe5e05..3e650cd 100644
--- a/montier/src/pages/NewsMessage.vue
+++ b/montier/src/pages/NewsMessage.vue
@@ -5,7 +5,7 @@
             <Service :index="2" />
         </div>
         <div v-else>
-            新闻资讯
+            
         </div>
     </div>
 </template>
diff --git a/montier/src/pages/Productmessage.vue b/montier/src/pages/Productmessage.vue
index f1db557..3272edb 100644
--- a/montier/src/pages/Productmessage.vue
+++ b/montier/src/pages/Productmessage.vue
@@ -2,7 +2,7 @@
     <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"
+            <span class="position-absolute doortitle color-fff font-bold"
                 :class="mobileShow ? 'font-size-16' : 'font-size-50'">Safety, Health, and Environmental
                 Protection</span>
         </div>
@@ -20,6 +20,8 @@
                 </div>
             </div>
         </div>
+        <div class="color-333 btn position-relative" :class="mobileShow ? 'font-size-20' : 'font-size-26'" @click="goPage">
+            Back</div>
     </div>
 </template>
 
@@ -36,14 +38,15 @@ let activeName = ref<any>('')
 let mobileShow = ref<any>(false)
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
-    if(tab.props.name == 'Entrance Doors'){
+    if (tab.props.name == 'Entrance Doors') {
         product = Home.$state.Entrance
-    }else if(tab.props.name == 'Interior Doors'){
+    } else if (tab.props.name == 'Interior Doors') {
         product = Home.$state.Interior
-    }else{
+    } else {
         product = []
     }
 }
+const goPage = () => router.back()
 
 onMounted(() => {
     if (document.body.offsetWidth < 960) {
@@ -80,9 +83,9 @@ if (router.currentRoute.value.params.name == 'Door') {
         }
     ]
     activeName.value = productList[0].title
-    if(activeName.value == 'Entrance Doors'){
+    if (activeName.value == 'Entrance Doors') {
         product = Home.$state.Entrance
-    }else{
+    } else {
         product = []
     }
 } else if (router.currentRoute.value.params.name == 'Window') {
@@ -109,6 +112,21 @@ if (router.currentRoute.value.params.name == 'Door') {
 </script>
 
 <style scoped lang="less">
+.btn {
+    display: inline-block;
+    border: 1px solid #333;
+    cursor: pointer;
+    padding: 0.5rem 2rem;
+    margin: 1rem 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.btn:hover {
+    border: 1px solid #fa8106;
+    color: #fa8106;
+}
+
 .allpic {
     width: 100%;
     display: flex;
@@ -127,12 +145,14 @@ if (router.currentRoute.value.params.name == 'Door') {
             height: 100%;
             transition: 0.5s linear;
         }
-        img:hover{
+
+        img:hover {
             scale: 1.2;
         }
     }
 }
-.allpic1{
+
+.allpic1 {
     width: 100%;
     text-align: center;
 }
@@ -152,7 +172,7 @@ if (router.currentRoute.value.params.name == 'Door') {
             left: 0;
             width: 100%;
             z-index: 2;
-            height: 14%;
+            height: 10%;
             display: flex;
             justify-content: center;
             align-items: center;
diff --git a/montier/src/pages/ProjectCase.vue b/montier/src/pages/ProjectCase.vue
index b636fb0..37293d5 100644
--- a/montier/src/pages/ProjectCase.vue
+++ b/montier/src/pages/ProjectCase.vue
@@ -26,11 +26,11 @@
       <!-- 项目案例 -->
       <swiper-slide  v-for="(item,index2) in bannerList" class="hover-scale cursor-pointer" :key="index2" v-if="selectIndex === 2">
         <div>
-          <div class="case-img overflow-hidden position-relative" @click="goPage(`/projectcase/${index}`)">
+          <div class="case-img overflow-hidden position-relative" @click="goPage(`/projectcase/${index}`, 'projectCase')">
             <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase1" loading="lazy"/>
             <div class="position-absolute color-fff project-center-title">
-              <h3 class="font-700">{{ item.name }}</h3>
-              <h3 class="font-700">{{ item.address }}</h3>
+              <span class="font-700 font-size-20">{{ item.name }}</span>
+              <span class="font-700 font-size-20">{{ item.address }}</span>
             </div>
           </div>
         </div>
@@ -38,9 +38,9 @@
       <!-- 产品中心 -->
       <swiper-slide  v-for="(item,index3) in bannerList2" class="hover-scale cursor-pointer" :key="index3" v-else-if="selectIndex === 3">
         <div>
-          <div class="case-img overflow-hidden position-relative" @click="goPage(`/productcenter/${item.name}`)">
+          <div class="case-img overflow-hidden position-relative" @click="goPage(`/productcenter/${item.name}`, 'productCenter')">
             <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase" loading="lazy"/>
-            <h3 class="position-absolute color-fff project-center-title1">{{ item.name }}</h3>
+            <span class="position-absolute color-fff project-center-title1 font-size-22 font-700">{{ item.name }}</span>
           </div>
         </div>
       </swiper-slide>
@@ -48,8 +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" @click="goPage('/productcenter')">EXLORE ALL PROJECTS</p>
+    <p v-if="selectIndex == 2" class="btn" @click="goPage('/projectcase', '')">EXLORE ALL PROJECTS</p>
+    <p v-if="selectIndex == 3" class="btn" @click="goPage('/productcenter', '')">EXLORE ALL PROJECTS</p>
   </div>
 </template>
 
@@ -125,15 +125,15 @@ const onSlideChange = () => {
 
 };
 
-const goPage = (url: any) => {
+const goPage = (url: any, name: string) => {
+  if(name != '') {
+    localStorage.setItem('scrollPosition', name)
+  }
   document.documentElement.scrollTop = 0
   router.push({
     path: url
   })
 }
-const changeindex = () => { 
-  selectIndex.value = 2
-}
 </script>
 
 <style scoped lang="less">
@@ -191,16 +191,16 @@ const changeindex = () => {
         transition: all 3s;
       }
       .imgcase{
-        height: 600px;
+        height: 42rem;
       }
       .imgcase1{
-        height: 350px;
+        height: 27rem;
       }
     }
 
   }
   .hover-scale:hover .case-img img{
-    transform: scale(1.1);
+    transform: scale(1.2);
   }
   .hover-scale:hover .project-center-title{
     background: #fa8106;
@@ -212,7 +212,7 @@ const changeindex = () => {
     bottom: 0;
     left: 0;
     height: 50px;
-    line-height: 50px;
+    // line-height: 50px;
     text-align: left;
     background: rgba(0,0,0,.4);
     width: 100%;
@@ -231,7 +231,13 @@ const changeindex = () => {
     width: 100%;
   }
 }
-@media (max-width: 800px) {
+@media (max-width: 960px) {
+  .project-case .hover-scale .case-img .imgcase1{
+    height: 17rem;
+  }
+  .project-case .hover-scale .case-img .imgcase{
+    height: 30rem;
+  }
   .bannerImg {
     margin-top:50px;
     :deep(.swiper-button-prev:after){
diff --git a/montier/src/pages/Service.vue b/montier/src/pages/Service.vue
index 7f8b026..452c650 100644
--- a/montier/src/pages/Service.vue
+++ b/montier/src/pages/Service.vue
@@ -6,11 +6,11 @@
                 <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)">
+                            @click="index == 1 ? '' : goPage('/service', index > 1 ? index - 1 : index, 'service')">
                             <span class="position-absolute" :class="index == 1 ? 'imgtitle1' : 'imgtitle'">
                                 <p class="title">{{ item.title }}</p>
                             </span>
-                            <img :src="item.detail" :alt="item.title" loading="lazy"/>
+                            <img :src="item.detail" :alt="item.title" loading="lazy" />
                         </div>
                     </div>
                 </div>
@@ -19,18 +19,19 @@
         <!-- 新闻 -->
         <swiper :modules="modules" :slides-per-view="per1" :space-between="50" :loop="true" :navigation="true"
             class="service-img" v-else>
-            <swiper-slide v-for="item, index in newslist" :key="index" class="hover-scale"
-                @click="goPage1(`/news/${item.title}`)">
+            <!-- <swiper-slide v-for="item, index in newslist" :key="index" class="hover-scale"
+                @click="goPage1(`/news/${item.title}`)"> -->
+            <swiper-slide v-for="item, index in newslist" :key="index" class="hover-scale">
                 <div class="case">
                     <div class="case-img overflow-hidden position-relative">
-                        <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative" loading="lazy">
+                        <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative"
+                            loading="lazy">
                     </div>
                     <div class="project-center-title1">
                         <p class="font-size-12 newsdate">2023-08-17</p>
-                        <h3 class="newstitle">{{ item.title }}</h3>
+                        <span class="newstitle font-size-28">{{ item.title }}</span>
                         <p class="font-size-14 newsdate">
-                            新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详
-                            情新闻详情新闻详情新闻详情新闻详情,新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情
+
                         </p>
                     </div>
                 </div>
@@ -68,7 +69,8 @@ let servicelist = ref<any>([
     { detail: new URL('../assets/img/Logistics.jpg', import.meta.url).href, title: 'Logistics' },
 ])
 
-const goPage = (url: any, index: any) => {
+const goPage = (url: any, index: any, name: string) => {
+    localStorage.setItem('scrollPosition', name)
     document.documentElement.scrollTop = 0
     router.push({
         path: url,
@@ -114,13 +116,14 @@ onMounted(() => {
 }
 
 .gallery-container {
-    margin: 12vw 0;
+    margin: 25rem 0;
     display: grid;
     place-content: center;
 }
 
 .gallery {
-    --s: 15vw;
+    // --s: 20vw;
+    scale: 1.3;
     /* control the size */
     --g: -2px;
     /* control the gap */
diff --git a/montier/src/router/index.ts b/montier/src/router/index.ts
index 3149aa6..a8c3127 100644
--- a/montier/src/router/index.ts
+++ b/montier/src/router/index.ts
@@ -35,7 +35,7 @@ const routes = [
         content: {
             keywords: 'FFE Building materials Smart hotelEnergy Saving',
             description: ''
-        },
+        }
     },{
         path: '/news/:name',
         component: () => import('../pages/NewsMessage.vue'),
@@ -52,7 +52,7 @@ const routes = [
         content: {
             keywords: 'FFE Building materials Smart hotelEnergy Saving',
             description: ''
-        }
+        },
     },{
         path: '/projectcase',
         component: () => import('../pages/AllCases.vue'),