diff --git a/montier/src/assets/css/index.css b/montier/src/assets/css/index.css
index 48e138b..f61fe03 100644
--- a/montier/src/assets/css/index.css
+++ b/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;
diff --git a/montier/src/assets/iconfont/demo_index.html b/montier/src/assets/iconfont/demo_index.html
index f394068..ccd80d1 100644
--- a/montier/src/assets/iconfont/demo_index.html
+++ b/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>
diff --git a/montier/src/assets/iconfont/iconfont.css b/montier/src/assets/iconfont/iconfont.css
index 2fc0f83..88e31fc 100644
--- a/montier/src/assets/iconfont/iconfont.css
+++ b/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";
 }
diff --git a/montier/src/assets/iconfont/iconfont.js b/montier/src/assets/iconfont/iconfont.js
index f814507..9548f2b 100644
--- a/montier/src/assets/iconfont/iconfont.js
+++ b/montier/src/assets/iconfont/iconfont.js
@@ -1 +1 @@
-window._iconfont_svg_string_4216264='<svg><symbol id="icon-wodechanpin" viewBox="0 0 1024 1024"><path d="M960.369621 237.743038c31.375039-11.601993 36.05496-28.53097 36.054961-37.604902s-4.69497-26.017958-36.054961-37.589855L579.324669 21.804523c-18.524064-6.861879-42.946935-10.623874-68.76927-10.623874-25.807286 0-50.245206 3.761995-68.769269 10.608826L60.741177 162.548281c-31.359991 11.586945-36.05496 28.53097-36.05496 37.589855s4.679922 26.017958 36.05496 37.604902l381.029905 140.743758c18.524064 6.846831 42.961983 10.608826 68.769269 10.608826 25.822334 0 50.245206-3.761995 68.76927-10.608826l381.06-140.743758z m-508.155241 113.070523L71.169427 210.671722c-11.722377-4.31877-15.875619-7.52399-16.46249-7.52399h-0.030096c0.481535 0 4.574586-6.786639 16.492586-11.180649L452.199332 50.049582c30.141104-11.150553 86.601126-11.120457 116.682038 0.015048l381.044953 140.773854c12.008288 4.439154 15.875619 8.78802 16.492586 8.712781-0.481535 1.203838-4.574586 5.718232-16.492586 10.112242l-381.044953 140.894238c-30.065864 11.075313-86.525886 11.406369-116.66699 0.255816zM412.261993 430.628047L77.880827 303.29204a72.471072 72.471072 0 0 0-25.566519-5.041074C20.532974 298.250966 0.007529 322.989846 0.007529 361.256859v424.684095c0 40.027627 22.94817 89.204426 66.737792 105.666917l331.943394 127.351056a73.870534 73.870534 0 0 0 26.123294 5.041073c33.406516 0 56.745933-25.912622 56.745933-63.005893V536.32506c-0.015048-45.399756-29.810049-90.844656-69.295949-105.697013zM451.446933 960.994107c0 20.299725-10.217579 32.909933-26.649972 32.909933-4.830402 0-10.052051-1.038311-15.42418-3.069788L77.444435 863.483196C47.814962 852.332643 30.10349 815.299564 30.10349 785.940954V361.256859c0-12.279152 2.874164-32.909933 22.210818-32.909933 4.46925 0 9.495275 1.038311 14.912549 3.084836l334.396214 127.336008c27.477612 10.35301 49.823862 45.128892 49.823862 77.55729v424.669047zM970.000329 298.250966a72.982704 72.982704 0 0 0-25.747094 5.056122l-333.749152 127.305911c-39.199988 14.747021-68.769269 60.191921-68.769269 105.697013v424.684095c0 37.093271 22.933122 63.005893 55.767815 63.005893 8.396773 0 17.154697-1.685374 26.078149-5.071169l332.319593-127.290864c38.402445-14.446061 67.369807-59.890961 67.369807-105.697013V361.256859c0-37.680142-21.413276-63.005893-53.269849-63.005893zM993.174218 785.940954c0 33.391468-21.022028 67.429999-47.957913 77.572338l-332.319593 127.290864a43.925054 43.925054 0 0 1-15.394083 3.099884c-16.071243 0-25.671854-12.2942-25.671855-32.909933V536.32506c0-33.07546 21.638995-67.144087 49.342327-77.55729l333.749152-127.305912c5.462417-2.061573 10.533586-3.099884 15.078076-3.099884 20.916692 0 23.173889 23.008362 23.173889 32.909933v424.669047z"  ></path></symbol><symbol id="icon-shouye" viewBox="0 0 1024 1024"><path d="M969.6 502.4l-118.4-112-323.2-300.8c-9.6-9.6-22.4-9.6-32 0l-313.6 297.6c-3.2 3.2-6.4 6.4-9.6 9.6l-118.4 112c-9.6 9.6-9.6 22.4 0 32s22.4 9.6 32 0l83.2-80 0 393.6c0 48 41.6 89.6 92.8 89.6l83.2 0c38.4 0 70.4-28.8 70.4-67.2l0-217.6 99.2 0 99.2 0 0 217.6c0 35.2 32 67.2 70.4 67.2l83.2 0c51.2 0 92.8-38.4 92.8-89.6l0-396.8 80 73.6c9.6 9.6 22.4 9.6 32 0C979.2 524.8 979.2 512 969.6 502.4zM809.6 857.6c0 25.6-19.2 44.8-44.8 44.8l-83.2 0c-12.8 0-22.4-9.6-22.4-22.4L659.2 640c0-12.8-9.6-22.4-22.4-22.4l-121.6 0-121.6 0c-12.8 0-22.4 9.6-22.4 22.4l0 240c0 12.8-9.6 22.4-22.4 22.4l-83.2 0c-25.6 0-44.8-19.2-44.8-44.8l0-438.4 294.4-281.6 294.4 281.6L809.6 857.6z"  ></path></symbol><symbol id="icon-24gl-newspaper" viewBox="0 0 1024 1024"><path d="M885.333333 981.333333H181.333333a53.393333 53.393333 0 0 1-53.333333-53.333333V96a53.393333 53.393333 0 0 1 53.333333-53.333333h704a53.393333 53.393333 0 0 1 53.333334 53.333333v832a53.393333 53.393333 0 0 1-53.333334 53.333333zM181.333333 85.333333a10.666667 10.666667 0 0 0-10.666666 10.666667v832a10.666667 10.666667 0 0 0 10.666666 10.666667h704a10.666667 10.666667 0 0 0 10.666667-10.666667V96a10.666667 10.666667 0 0 0-10.666667-10.666667z m565.333334 725.333334H320a21.333333 21.333333 0 0 1 0-42.666667h426.666667a21.333333 21.333333 0 0 1 0 42.666667z m0-170.666667H320a21.333333 21.333333 0 0 1 0-42.666667h426.666667a21.333333 21.333333 0 0 1 0 42.666667z m0-213.333333H618.666667a21.333333 21.333333 0 0 1 0-42.666667h128a21.333333 21.333333 0 0 1 0 42.666667z m0-170.666667H618.666667a21.333333 21.333333 0 0 1 0-42.666667h128a21.333333 21.333333 0 0 1 0 42.666667zM497.726667 468.133333A21.333333 21.333333 0 0 0 512 448V234.666667a21.333333 21.333333 0 0 0-42.666667 0v152.52L336.666667 221.333333a21.333333 21.333333 0 0 0-38 13.333334v213.333333a21.333333 21.333333 0 0 0 42.666666 0V295.48L474 461.333333a21.333333 21.333333 0 0 0 23.72 6.806667z" fill="#5C5C66" ></path></symbol><symbol id="icon-lianxiwomen" viewBox="0 0 1024 1024"><path d="M839.06 961.16h-68.92c-74.73 0-148.63-11.78-219.66-35-213.2-69.7-382.1-238.61-451.81-451.81-23.22-71.03-35-144.93-35-219.65v-68.92c0-16.85 3.53-33.29 10.47-48.86 19.47-43.59 62.7-71.76 110.14-71.76h103.38c66.51 0 120.62 54.11 120.62 120.62v206.77c0 48.54-28.66 91.22-71.87 110.22 44.41 77.61 108.04 141.25 185.65 185.66 19.01-43.23 61.7-71.88 110.22-71.88h206.77c66.5 0 120.62 54.12 120.62 120.62v103.38c0 47.44-28.17 90.66-71.75 110.15-15.58 6.94-32 10.46-48.86 10.46zM184.28 99.62c-33.86 0-64.74 20.16-78.67 51.35-4.96 11.11-7.48 22.83-7.48 34.81v68.92c0 71.08 11.21 141.37 33.3 208.95 66.31 202.79 226.96 363.45 429.75 429.77 67.56 22.08 137.86 33.28 208.96 33.28h68.92c11.98 0 23.69-2.51 34.81-7.47 31.18-13.93 51.34-44.83 51.34-78.68V737.16c0-47.5-38.65-86.15-86.15-86.15H632.29c-39.36 0-74.58 27.9-83.73 66.37a17.352 17.352 0 0 1-9.61 11.68c-4.84 2.15-10.41 2.05-15.12-0.4-97.93-51-176.65-129.73-227.64-227.66a17.233 17.233 0 0 1-0.4-15.12c2.2-4.83 6.51-8.37 11.68-9.6 38.45-9.16 66.35-44.38 66.35-83.73V185.78c0-47.5-38.65-86.15-86.15-86.15H184.28z" fill="#333333" ></path></symbol><symbol id="icon-gongcheng" viewBox="0 0 1024 1024"><path d="M692.662857 951.100952H331.337143c-6.826667 0-12.190476-5.36381-12.190476-12.190476v-672.914286c0-6.826667 5.36381-12.190476 12.190476-12.190476h361.325714c6.826667 0 12.190476 5.36381 12.190476 12.190476v672.914286c0 6.826667-5.36381 12.190476-12.190476 12.190476z m-349.135238-24.380952h336.944762v-648.533333H343.527619v648.533333z"  ></path><path d="M611.230476 278.186667h-198.460952c-6.826667 0-12.190476-5.36381-12.190476-12.190477V182.125714c0-6.826667 5.36381-12.190476 12.190476-12.190476h198.460952c6.826667 0 12.190476 5.36381 12.190476 12.190476v83.870476c0 6.826667-5.36381 12.190476-12.190476 12.190477z m-186.270476-24.380953h174.08V194.31619h-174.08v59.489524zM331.337143 951.100952H150.674286c-6.826667 0-12.190476-5.36381-12.190476-12.190476v-512c0-6.826667 5.36381-12.190476 12.190476-12.190476h180.662857c6.826667 0 12.190476 5.36381 12.190476 12.190476v512c0 6.826667-5.36381 12.190476-12.190476 12.190476z m-168.472381-24.380952h156.281905v-487.619048H162.864762v487.619048zM873.325714 951.100952h-180.662857c-6.826667 0-12.190476-5.36381-12.190476-12.190476v-512c0-6.826667 5.36381-12.190476 12.190476-12.190476h180.662857c6.826667 0 12.190476 5.36381 12.190476 12.190476v512c0 6.826667-5.36381 12.190476-12.190476 12.190476z m-168.472381-24.380952h156.281905v-487.619048h-156.281905v487.619048zM464.944762 520.045714h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM464.944762 404.23619h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM464.944762 635.855238h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM464.944762 751.908571h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM464.944762 867.718095h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476z"  ></path><path d="M240.88381 945.005714c-6.826667 0-12.190476-5.36381-12.190477-12.190476V535.161905c0-6.826667 5.36381-12.190476 12.190477-12.190476s12.190476 5.36381 12.190476 12.190476v397.897143c0 6.582857-5.36381 11.946667-12.190476 11.946666zM783.11619 945.005714c-6.826667 0-12.190476-5.36381-12.190476-12.190476V535.161905c0-6.826667 5.36381-12.190476 12.190476-12.190476s12.190476 5.36381 12.190477 12.190476v397.897143a12.190476 12.190476 0 0 1-12.190477 11.946666zM612.449524 520.045714h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM612.449524 404.23619h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM612.449524 635.855238h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM612.449524 751.908571h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM612.449524 867.718095h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM512 180.662857c-6.826667 0-12.190476-5.36381-12.190476-12.190476V85.089524c0-6.826667 5.36381-12.190476 12.190476-12.190476s12.190476 5.36381 12.190476 12.190476v83.382857c0 6.826667-5.36381 12.190476-12.190476 12.190476z"  ></path></symbol><symbol id="icon-zhuanshufuwu" viewBox="0 0 1024 1024"><path d="M703.658667 170.666667a73.142857 73.142857 0 0 1 56.198095 26.331428l2.852571 3.657143 149.869715 205.04381a73.142857 73.142857 0 0 1-2.169905 89.161142l-3.096381 3.584L560.298667 874.788571a73.142857 73.142857 0 0 1-104.399238 3.218286l-3.218286-3.315809L113.249524 505.465905a73.142857 73.142857 0 0 1-8.338286-88.015238l2.608762-3.900953 151.015619-212.163047a73.142857 73.142857 0 0 1 54.857143-30.573715L318.147048 170.666667h385.536z m0 73.142857H318.122667l-151.015619 212.163047 339.407238 369.249524L853.528381 448.853333 703.658667 243.809524zM658.285714 390.095238v73.142857H365.714286v-73.142857h292.571428z"  ></path></symbol></svg>',function(e){var c=(c=document.getElementsByTagName("script"))[c.length-1],t=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var n,a,o,s,h,i=function(c,t){t.parentNode.insertBefore(c,t)};if(t&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}n=function(){var c,t=document.createElement("div");t.innerHTML=e._iconfont_svg_string_4216264,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(c=document.body).firstChild?i(t,c.firstChild):c.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(n,0):(a=function(){document.removeEventListener("DOMContentLoaded",a,!1),n()},document.addEventListener("DOMContentLoaded",a,!1)):document.attachEvent&&(o=n,s=e.document,h=!1,d(),s.onreadystatechange=function(){"complete"==s.readyState&&(s.onreadystatechange=null,l())})}function l(){h||(h=!0,o())}function d(){try{s.documentElement.doScroll("left")}catch(c){return void setTimeout(d,50)}l()}}(window);
\ No newline at end of file
+window._iconfont_svg_string_4216264='<svg><symbol id="icon-shijian" viewBox="0 0 1024 1024"><path d="M512 64c-256 0-460.8 208-460.8 460.8s208 460.8 460.8 460.8 460.8-208 460.8-460.8S768 64 512 64zM512 940.8c-227.2 0-412.8-185.6-412.8-412.8s185.6-412.8 412.8-412.8 412.8 185.6 412.8 412.8S742.4 940.8 512 940.8z" fill="#ed7d31" ></path><path d="M809.6 544l-278.4 0 0-281.6c0-12.8-9.6-22.4-22.4-22.4-12.8 0-22.4 9.6-22.4 22.4l0 307.2c0 12.8 9.6 22.4 22.4 22.4 0 0 3.2 0 3.2 0l297.6 0c12.8 0 22.4-9.6 22.4-22.4C832 553.6 822.4 544 809.6 544z" fill="#ed7d31" ></path></symbol><symbol id="icon-zuobiao" viewBox="0 0 1024 1024"><path d="M537.556007 1012.4818C530.997032 1019.720669 521.678488 1023.840025 511.880019 1023.840025 502.041556 1023.840025 492.723012 1019.720669 486.164037 1012.4818 446.370255 968.608655 97.624746 578.829558 97.624746 404.136854 97.624746 221.085455 282.395876 0 511.880019 0 618.823309 0 723.087018 47.312607 805.394157 133.179191 880.982347 211.96688 926.095298 313.271051 926.095298 404.136854 926.095298 578.829558 577.349789 968.608655 537.556007 1012.4818ZM511.880019 68.269333C325.94907 68.269333 166.65396 252.960475 166.65396 404.136854 166.65396 520.758631 395.858147 805.95407 511.880019 938.093423 627.821903 805.914076 857.066083 520.678644 857.066083 404.136854 857.066083 252.960475 697.770973 68.269333 511.880019 68.269333ZM511.880019 558.91267C416.694891 558.91267 339.26699 482.364631 339.26699 388.299328 339.26699 294.194032 416.694891 217.645993 511.880019 217.645993 607.025152 217.645993 684.453054 294.194032 684.453054 388.299328 684.453054 482.364631 607.025152 558.91267 511.880019 558.91267ZM511.880019 285.915326C454.768942 285.915326 408.296204 331.828152 408.296204 388.299328 408.296204 444.730511 454.768942 490.683331 511.880019 490.683331 568.951101 490.683331 615.42384 444.730511 615.42384 388.299328 615.42384 331.828152 568.951101 285.915326 511.880019 285.915326Z" fill="#ed7d31" ></path></symbol><symbol id="icon-wodechanpin" viewBox="0 0 1024 1024"><path d="M960.369621 237.743038c31.375039-11.601993 36.05496-28.53097 36.054961-37.604902s-4.69497-26.017958-36.054961-37.589855L579.324669 21.804523c-18.524064-6.861879-42.946935-10.623874-68.76927-10.623874-25.807286 0-50.245206 3.761995-68.769269 10.608826L60.741177 162.548281c-31.359991 11.586945-36.05496 28.53097-36.05496 37.589855s4.679922 26.017958 36.05496 37.604902l381.029905 140.743758c18.524064 6.846831 42.961983 10.608826 68.769269 10.608826 25.822334 0 50.245206-3.761995 68.76927-10.608826l381.06-140.743758z m-508.155241 113.070523L71.169427 210.671722c-11.722377-4.31877-15.875619-7.52399-16.46249-7.52399h-0.030096c0.481535 0 4.574586-6.786639 16.492586-11.180649L452.199332 50.049582c30.141104-11.150553 86.601126-11.120457 116.682038 0.015048l381.044953 140.773854c12.008288 4.439154 15.875619 8.78802 16.492586 8.712781-0.481535 1.203838-4.574586 5.718232-16.492586 10.112242l-381.044953 140.894238c-30.065864 11.075313-86.525886 11.406369-116.66699 0.255816zM412.261993 430.628047L77.880827 303.29204a72.471072 72.471072 0 0 0-25.566519-5.041074C20.532974 298.250966 0.007529 322.989846 0.007529 361.256859v424.684095c0 40.027627 22.94817 89.204426 66.737792 105.666917l331.943394 127.351056a73.870534 73.870534 0 0 0 26.123294 5.041073c33.406516 0 56.745933-25.912622 56.745933-63.005893V536.32506c-0.015048-45.399756-29.810049-90.844656-69.295949-105.697013zM451.446933 960.994107c0 20.299725-10.217579 32.909933-26.649972 32.909933-4.830402 0-10.052051-1.038311-15.42418-3.069788L77.444435 863.483196C47.814962 852.332643 30.10349 815.299564 30.10349 785.940954V361.256859c0-12.279152 2.874164-32.909933 22.210818-32.909933 4.46925 0 9.495275 1.038311 14.912549 3.084836l334.396214 127.336008c27.477612 10.35301 49.823862 45.128892 49.823862 77.55729v424.669047zM970.000329 298.250966a72.982704 72.982704 0 0 0-25.747094 5.056122l-333.749152 127.305911c-39.199988 14.747021-68.769269 60.191921-68.769269 105.697013v424.684095c0 37.093271 22.933122 63.005893 55.767815 63.005893 8.396773 0 17.154697-1.685374 26.078149-5.071169l332.319593-127.290864c38.402445-14.446061 67.369807-59.890961 67.369807-105.697013V361.256859c0-37.680142-21.413276-63.005893-53.269849-63.005893zM993.174218 785.940954c0 33.391468-21.022028 67.429999-47.957913 77.572338l-332.319593 127.290864a43.925054 43.925054 0 0 1-15.394083 3.099884c-16.071243 0-25.671854-12.2942-25.671855-32.909933V536.32506c0-33.07546 21.638995-67.144087 49.342327-77.55729l333.749152-127.305912c5.462417-2.061573 10.533586-3.099884 15.078076-3.099884 20.916692 0 23.173889 23.008362 23.173889 32.909933v424.669047z"  ></path></symbol><symbol id="icon-shouye" viewBox="0 0 1024 1024"><path d="M969.6 502.4l-118.4-112-323.2-300.8c-9.6-9.6-22.4-9.6-32 0l-313.6 297.6c-3.2 3.2-6.4 6.4-9.6 9.6l-118.4 112c-9.6 9.6-9.6 22.4 0 32s22.4 9.6 32 0l83.2-80 0 393.6c0 48 41.6 89.6 92.8 89.6l83.2 0c38.4 0 70.4-28.8 70.4-67.2l0-217.6 99.2 0 99.2 0 0 217.6c0 35.2 32 67.2 70.4 67.2l83.2 0c51.2 0 92.8-38.4 92.8-89.6l0-396.8 80 73.6c9.6 9.6 22.4 9.6 32 0C979.2 524.8 979.2 512 969.6 502.4zM809.6 857.6c0 25.6-19.2 44.8-44.8 44.8l-83.2 0c-12.8 0-22.4-9.6-22.4-22.4L659.2 640c0-12.8-9.6-22.4-22.4-22.4l-121.6 0-121.6 0c-12.8 0-22.4 9.6-22.4 22.4l0 240c0 12.8-9.6 22.4-22.4 22.4l-83.2 0c-25.6 0-44.8-19.2-44.8-44.8l0-438.4 294.4-281.6 294.4 281.6L809.6 857.6z"  ></path></symbol><symbol id="icon-24gl-newspaper" viewBox="0 0 1024 1024"><path d="M885.333333 981.333333H181.333333a53.393333 53.393333 0 0 1-53.333333-53.333333V96a53.393333 53.393333 0 0 1 53.333333-53.333333h704a53.393333 53.393333 0 0 1 53.333334 53.333333v832a53.393333 53.393333 0 0 1-53.333334 53.333333zM181.333333 85.333333a10.666667 10.666667 0 0 0-10.666666 10.666667v832a10.666667 10.666667 0 0 0 10.666666 10.666667h704a10.666667 10.666667 0 0 0 10.666667-10.666667V96a10.666667 10.666667 0 0 0-10.666667-10.666667z m565.333334 725.333334H320a21.333333 21.333333 0 0 1 0-42.666667h426.666667a21.333333 21.333333 0 0 1 0 42.666667z m0-170.666667H320a21.333333 21.333333 0 0 1 0-42.666667h426.666667a21.333333 21.333333 0 0 1 0 42.666667z m0-213.333333H618.666667a21.333333 21.333333 0 0 1 0-42.666667h128a21.333333 21.333333 0 0 1 0 42.666667z m0-170.666667H618.666667a21.333333 21.333333 0 0 1 0-42.666667h128a21.333333 21.333333 0 0 1 0 42.666667zM497.726667 468.133333A21.333333 21.333333 0 0 0 512 448V234.666667a21.333333 21.333333 0 0 0-42.666667 0v152.52L336.666667 221.333333a21.333333 21.333333 0 0 0-38 13.333334v213.333333a21.333333 21.333333 0 0 0 42.666666 0V295.48L474 461.333333a21.333333 21.333333 0 0 0 23.72 6.806667z" fill="#5C5C66" ></path></symbol><symbol id="icon-lianxiwomen" viewBox="0 0 1024 1024"><path d="M839.06 961.16h-68.92c-74.73 0-148.63-11.78-219.66-35-213.2-69.7-382.1-238.61-451.81-451.81-23.22-71.03-35-144.93-35-219.65v-68.92c0-16.85 3.53-33.29 10.47-48.86 19.47-43.59 62.7-71.76 110.14-71.76h103.38c66.51 0 120.62 54.11 120.62 120.62v206.77c0 48.54-28.66 91.22-71.87 110.22 44.41 77.61 108.04 141.25 185.65 185.66 19.01-43.23 61.7-71.88 110.22-71.88h206.77c66.5 0 120.62 54.12 120.62 120.62v103.38c0 47.44-28.17 90.66-71.75 110.15-15.58 6.94-32 10.46-48.86 10.46zM184.28 99.62c-33.86 0-64.74 20.16-78.67 51.35-4.96 11.11-7.48 22.83-7.48 34.81v68.92c0 71.08 11.21 141.37 33.3 208.95 66.31 202.79 226.96 363.45 429.75 429.77 67.56 22.08 137.86 33.28 208.96 33.28h68.92c11.98 0 23.69-2.51 34.81-7.47 31.18-13.93 51.34-44.83 51.34-78.68V737.16c0-47.5-38.65-86.15-86.15-86.15H632.29c-39.36 0-74.58 27.9-83.73 66.37a17.352 17.352 0 0 1-9.61 11.68c-4.84 2.15-10.41 2.05-15.12-0.4-97.93-51-176.65-129.73-227.64-227.66a17.233 17.233 0 0 1-0.4-15.12c2.2-4.83 6.51-8.37 11.68-9.6 38.45-9.16 66.35-44.38 66.35-83.73V185.78c0-47.5-38.65-86.15-86.15-86.15H184.28z" fill="#333333" ></path></symbol><symbol id="icon-gongcheng" viewBox="0 0 1024 1024"><path d="M692.662857 951.100952H331.337143c-6.826667 0-12.190476-5.36381-12.190476-12.190476v-672.914286c0-6.826667 5.36381-12.190476 12.190476-12.190476h361.325714c6.826667 0 12.190476 5.36381 12.190476 12.190476v672.914286c0 6.826667-5.36381 12.190476-12.190476 12.190476z m-349.135238-24.380952h336.944762v-648.533333H343.527619v648.533333z"  ></path><path d="M611.230476 278.186667h-198.460952c-6.826667 0-12.190476-5.36381-12.190476-12.190477V182.125714c0-6.826667 5.36381-12.190476 12.190476-12.190476h198.460952c6.826667 0 12.190476 5.36381 12.190476 12.190476v83.870476c0 6.826667-5.36381 12.190476-12.190476 12.190477z m-186.270476-24.380953h174.08V194.31619h-174.08v59.489524zM331.337143 951.100952H150.674286c-6.826667 0-12.190476-5.36381-12.190476-12.190476v-512c0-6.826667 5.36381-12.190476 12.190476-12.190476h180.662857c6.826667 0 12.190476 5.36381 12.190476 12.190476v512c0 6.826667-5.36381 12.190476-12.190476 12.190476z m-168.472381-24.380952h156.281905v-487.619048H162.864762v487.619048zM873.325714 951.100952h-180.662857c-6.826667 0-12.190476-5.36381-12.190476-12.190476v-512c0-6.826667 5.36381-12.190476 12.190476-12.190476h180.662857c6.826667 0 12.190476 5.36381 12.190476 12.190476v512c0 6.826667-5.36381 12.190476-12.190476 12.190476z m-168.472381-24.380952h156.281905v-487.619048h-156.281905v487.619048zM464.944762 520.045714h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM464.944762 404.23619h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM464.944762 635.855238h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM464.944762 751.908571h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM464.944762 867.718095h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476z"  ></path><path d="M240.88381 945.005714c-6.826667 0-12.190476-5.36381-12.190477-12.190476V535.161905c0-6.826667 5.36381-12.190476 12.190477-12.190476s12.190476 5.36381 12.190476 12.190476v397.897143c0 6.582857-5.36381 11.946667-12.190476 11.946666zM783.11619 945.005714c-6.826667 0-12.190476-5.36381-12.190476-12.190476V535.161905c0-6.826667 5.36381-12.190476 12.190476-12.190476s12.190476 5.36381 12.190477 12.190476v397.897143a12.190476 12.190476 0 0 1-12.190477 11.946666zM612.449524 520.045714h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM612.449524 404.23619h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM612.449524 635.855238h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM612.449524 751.908571h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM612.449524 867.718095h-53.638095c-6.826667 0-12.190476-5.36381-12.190477-12.190476s5.36381-12.190476 12.190477-12.190476h53.638095c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM512 180.662857c-6.826667 0-12.190476-5.36381-12.190476-12.190476V85.089524c0-6.826667 5.36381-12.190476 12.190476-12.190476s12.190476 5.36381 12.190476 12.190476v83.382857c0 6.826667-5.36381 12.190476-12.190476 12.190476z"  ></path></symbol><symbol id="icon-zhuanshufuwu" viewBox="0 0 1024 1024"><path d="M703.658667 170.666667a73.142857 73.142857 0 0 1 56.198095 26.331428l2.852571 3.657143 149.869715 205.04381a73.142857 73.142857 0 0 1-2.169905 89.161142l-3.096381 3.584L560.298667 874.788571a73.142857 73.142857 0 0 1-104.399238 3.218286l-3.218286-3.315809L113.249524 505.465905a73.142857 73.142857 0 0 1-8.338286-88.015238l2.608762-3.900953 151.015619-212.163047a73.142857 73.142857 0 0 1 54.857143-30.573715L318.147048 170.666667h385.536z m0 73.142857H318.122667l-151.015619 212.163047 339.407238 369.249524L853.528381 448.853333 703.658667 243.809524zM658.285714 390.095238v73.142857H365.714286v-73.142857h292.571428z"  ></path></symbol></svg>',function(e){var c=(c=document.getElementsByTagName("script"))[c.length-1],t=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var a,o,n,i,l,s=function(c,t){t.parentNode.insertBefore(c,t)};if(t&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}a=function(){var c,t=document.createElement("div");t.innerHTML=e._iconfont_svg_string_4216264,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(c=document.body).firstChild?s(t,c.firstChild):c.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),a()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(n=a,i=e.document,l=!1,d(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,h())})}function h(){l||(l=!0,n())}function d(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(d,50)}h()}}(window);
\ No newline at end of file
diff --git a/montier/src/assets/iconfont/iconfont.json b/montier/src/assets/iconfont/iconfont.json
index 13e7aa0..cdc94fa 100644
--- a/montier/src/assets/iconfont/iconfont.json
+++ b/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",
diff --git a/montier/src/assets/iconfont/iconfont.ttf b/montier/src/assets/iconfont/iconfont.ttf
index 8871dc0..7827f45 100644
Binary files a/montier/src/assets/iconfont/iconfont.ttf and b/montier/src/assets/iconfont/iconfont.ttf differ
diff --git a/montier/src/assets/iconfont/iconfont.woff b/montier/src/assets/iconfont/iconfont.woff
index d200c2a..cbd5aee 100644
Binary files a/montier/src/assets/iconfont/iconfont.woff and b/montier/src/assets/iconfont/iconfont.woff differ
diff --git a/montier/src/assets/iconfont/iconfont.woff2 b/montier/src/assets/iconfont/iconfont.woff2
index e1c748b..1290518 100644
Binary files a/montier/src/assets/iconfont/iconfont.woff2 and b/montier/src/assets/iconfont/iconfont.woff2 differ
diff --git a/montier/src/assets/img/After-saleService.jpg b/montier/src/assets/img/After-saleService.jpg
new file mode 100644
index 0000000..0deb54a
Binary files /dev/null and b/montier/src/assets/img/After-saleService.jpg differ
diff --git a/montier/src/assets/img/After-saleService01.jpg b/montier/src/assets/img/After-saleService01.jpg
new file mode 100644
index 0000000..a3e70db
Binary files /dev/null and b/montier/src/assets/img/After-saleService01.jpg differ
diff --git a/montier/src/assets/img/After-saleService02.jpg b/montier/src/assets/img/After-saleService02.jpg
new file mode 100644
index 0000000..905b267
Binary files /dev/null and b/montier/src/assets/img/After-saleService02.jpg differ
diff --git a/montier/src/assets/img/Design.jpg b/montier/src/assets/img/Design.jpg
new file mode 100644
index 0000000..81f0a22
Binary files /dev/null and b/montier/src/assets/img/Design.jpg differ
diff --git a/montier/src/assets/img/Design01.jpg b/montier/src/assets/img/Design01.jpg
new file mode 100644
index 0000000..8bc09e1
Binary files /dev/null and b/montier/src/assets/img/Design01.jpg differ
diff --git a/montier/src/assets/img/Design02.jpg b/montier/src/assets/img/Design02.jpg
new file mode 100644
index 0000000..2cf004e
Binary files /dev/null and b/montier/src/assets/img/Design02.jpg differ
diff --git a/montier/src/assets/img/Door/01.png b/montier/src/assets/img/Door/01.png
new file mode 100644
index 0000000..0cd4420
Binary files /dev/null and b/montier/src/assets/img/Door/01.png differ
diff --git a/montier/src/assets/img/Door/02.png b/montier/src/assets/img/Door/02.png
new file mode 100644
index 0000000..487e388
Binary files /dev/null and b/montier/src/assets/img/Door/02.png differ
diff --git a/montier/src/assets/img/Door/03.png b/montier/src/assets/img/Door/03.png
new file mode 100644
index 0000000..d204f84
Binary files /dev/null and b/montier/src/assets/img/Door/03.png differ
diff --git a/montier/src/assets/img/Door/04.png b/montier/src/assets/img/Door/04.png
new file mode 100644
index 0000000..b0960d1
Binary files /dev/null and b/montier/src/assets/img/Door/04.png differ
diff --git a/montier/src/assets/img/Door/05.png b/montier/src/assets/img/Door/05.png
new file mode 100644
index 0000000..58e6e6d
Binary files /dev/null and b/montier/src/assets/img/Door/05.png differ
diff --git a/montier/src/assets/img/Door/06.png b/montier/src/assets/img/Door/06.png
new file mode 100644
index 0000000..fb8ce0c
Binary files /dev/null and b/montier/src/assets/img/Door/06.png differ
diff --git a/montier/src/assets/img/Door/07.png b/montier/src/assets/img/Door/07.png
new file mode 100644
index 0000000..cda9429
Binary files /dev/null and b/montier/src/assets/img/Door/07.png differ
diff --git a/montier/src/assets/img/Door/08.png b/montier/src/assets/img/Door/08.png
new file mode 100644
index 0000000..91fd854
Binary files /dev/null and b/montier/src/assets/img/Door/08.png differ
diff --git a/montier/src/assets/img/Door/09.png b/montier/src/assets/img/Door/09.png
new file mode 100644
index 0000000..1f37735
Binary files /dev/null and b/montier/src/assets/img/Door/09.png differ
diff --git a/montier/src/assets/img/Door/10.png b/montier/src/assets/img/Door/10.png
new file mode 100644
index 0000000..c15bc10
Binary files /dev/null and b/montier/src/assets/img/Door/10.png differ
diff --git a/montier/src/assets/img/Door/11.png b/montier/src/assets/img/Door/11.png
new file mode 100644
index 0000000..b687421
Binary files /dev/null and b/montier/src/assets/img/Door/11.png differ
diff --git a/montier/src/assets/img/Door/12.png b/montier/src/assets/img/Door/12.png
new file mode 100644
index 0000000..8bbb566
Binary files /dev/null and b/montier/src/assets/img/Door/12.png differ
diff --git a/montier/src/assets/img/Door/13.png b/montier/src/assets/img/Door/13.png
new file mode 100644
index 0000000..6286b2a
Binary files /dev/null and b/montier/src/assets/img/Door/13.png differ
diff --git a/montier/src/assets/img/Door/14.png b/montier/src/assets/img/Door/14.png
new file mode 100644
index 0000000..4a5afd9
Binary files /dev/null and b/montier/src/assets/img/Door/14.png differ
diff --git a/montier/src/assets/img/Door/15.png b/montier/src/assets/img/Door/15.png
new file mode 100644
index 0000000..34699e4
Binary files /dev/null and b/montier/src/assets/img/Door/15.png differ
diff --git a/montier/src/assets/img/Door/16.png b/montier/src/assets/img/Door/16.png
new file mode 100644
index 0000000..16cfccc
Binary files /dev/null and b/montier/src/assets/img/Door/16.png differ
diff --git a/montier/src/assets/img/Door/17.png b/montier/src/assets/img/Door/17.png
new file mode 100644
index 0000000..bb8dfe0
Binary files /dev/null and b/montier/src/assets/img/Door/17.png differ
diff --git a/montier/src/assets/img/Door/18.png b/montier/src/assets/img/Door/18.png
new file mode 100644
index 0000000..243a586
Binary files /dev/null and b/montier/src/assets/img/Door/18.png differ
diff --git a/montier/src/assets/img/Door/19.png b/montier/src/assets/img/Door/19.png
new file mode 100644
index 0000000..5f0ccbb
Binary files /dev/null and b/montier/src/assets/img/Door/19.png differ
diff --git a/montier/src/assets/img/Door/20.png b/montier/src/assets/img/Door/20.png
new file mode 100644
index 0000000..6226402
Binary files /dev/null and b/montier/src/assets/img/Door/20.png differ
diff --git a/montier/src/assets/img/Door/21.png b/montier/src/assets/img/Door/21.png
new file mode 100644
index 0000000..3e064ce
Binary files /dev/null and b/montier/src/assets/img/Door/21.png differ
diff --git a/montier/src/assets/img/Door/22.png b/montier/src/assets/img/Door/22.png
new file mode 100644
index 0000000..16ac42e
Binary files /dev/null and b/montier/src/assets/img/Door/22.png differ
diff --git a/montier/src/assets/img/Door/23.png b/montier/src/assets/img/Door/23.png
new file mode 100644
index 0000000..9925faf
Binary files /dev/null and b/montier/src/assets/img/Door/23.png differ
diff --git a/montier/src/assets/img/Door/24.png b/montier/src/assets/img/Door/24.png
new file mode 100644
index 0000000..aa729ef
Binary files /dev/null and b/montier/src/assets/img/Door/24.png differ
diff --git a/montier/src/assets/img/Door/25.png b/montier/src/assets/img/Door/25.png
new file mode 100644
index 0000000..420dee2
Binary files /dev/null and b/montier/src/assets/img/Door/25.png differ
diff --git a/montier/src/assets/img/Door/26.png b/montier/src/assets/img/Door/26.png
new file mode 100644
index 0000000..b2b2715
Binary files /dev/null and b/montier/src/assets/img/Door/26.png differ
diff --git a/montier/src/assets/img/Door/27.png b/montier/src/assets/img/Door/27.png
new file mode 100644
index 0000000..cdcc1b7
Binary files /dev/null and b/montier/src/assets/img/Door/27.png differ
diff --git a/montier/src/assets/img/Door/28.png b/montier/src/assets/img/Door/28.png
new file mode 100644
index 0000000..6faead8
Binary files /dev/null and b/montier/src/assets/img/Door/28.png differ
diff --git a/montier/src/assets/img/Door/door.jpg b/montier/src/assets/img/Door/door.jpg
new file mode 100644
index 0000000..6139244
Binary files /dev/null and b/montier/src/assets/img/Door/door.jpg differ
diff --git a/montier/src/assets/img/Installation.jpg b/montier/src/assets/img/Installation.jpg
new file mode 100644
index 0000000..b2b3f29
Binary files /dev/null and b/montier/src/assets/img/Installation.jpg differ
diff --git a/montier/src/assets/img/Installation01.jpg b/montier/src/assets/img/Installation01.jpg
new file mode 100644
index 0000000..cd84a52
Binary files /dev/null and b/montier/src/assets/img/Installation01.jpg differ
diff --git a/montier/src/assets/img/Installation02.jpg b/montier/src/assets/img/Installation02.jpg
new file mode 100644
index 0000000..152b2ae
Binary files /dev/null and b/montier/src/assets/img/Installation02.jpg differ
diff --git a/montier/src/assets/img/Logistics.jpg b/montier/src/assets/img/Logistics.jpg
new file mode 100644
index 0000000..1498826
Binary files /dev/null and b/montier/src/assets/img/Logistics.jpg differ
diff --git a/montier/src/assets/img/Logistics01.jpg b/montier/src/assets/img/Logistics01.jpg
new file mode 100644
index 0000000..1d0f807
Binary files /dev/null and b/montier/src/assets/img/Logistics01.jpg differ
diff --git a/montier/src/assets/img/Logistics02.jpg b/montier/src/assets/img/Logistics02.jpg
new file mode 100644
index 0000000..824d2fd
Binary files /dev/null and b/montier/src/assets/img/Logistics02.jpg differ
diff --git a/montier/src/assets/img/Manufactrue.jpg b/montier/src/assets/img/Manufactrue.jpg
new file mode 100644
index 0000000..d39d88e
Binary files /dev/null and b/montier/src/assets/img/Manufactrue.jpg differ
diff --git a/montier/src/assets/img/Manufacture01.jpg b/montier/src/assets/img/Manufacture01.jpg
new file mode 100644
index 0000000..4243967
Binary files /dev/null and b/montier/src/assets/img/Manufacture01.jpg differ
diff --git a/montier/src/assets/img/Manufacture02.jpg b/montier/src/assets/img/Manufacture02.jpg
new file mode 100644
index 0000000..0102a13
Binary files /dev/null and b/montier/src/assets/img/Manufacture02.jpg differ
diff --git a/montier/src/assets/img/Quality.jpg b/montier/src/assets/img/Quality.jpg
new file mode 100644
index 0000000..92d3c31
Binary files /dev/null and b/montier/src/assets/img/Quality.jpg differ
diff --git a/montier/src/assets/img/Quality01.jpg b/montier/src/assets/img/Quality01.jpg
new file mode 100644
index 0000000..89a6afd
Binary files /dev/null and b/montier/src/assets/img/Quality01.jpg differ
diff --git a/montier/src/assets/img/Quality02.jpg b/montier/src/assets/img/Quality02.jpg
new file mode 100644
index 0000000..9150dda
Binary files /dev/null and b/montier/src/assets/img/Quality02.jpg differ
diff --git a/montier/src/assets/img/Service.jpg b/montier/src/assets/img/Service.jpg
new file mode 100644
index 0000000..8a44f00
Binary files /dev/null and b/montier/src/assets/img/Service.jpg differ
diff --git a/montier/src/assets/img/aboutus.jpg b/montier/src/assets/img/aboutus.jpg
new file mode 100644
index 0000000..11b9e0c
Binary files /dev/null and b/montier/src/assets/img/aboutus.jpg differ
diff --git a/montier/src/assets/img/cases/001.jpg b/montier/src/assets/img/cases/001.jpg
new file mode 100644
index 0000000..3e4b1ac
Binary files /dev/null and b/montier/src/assets/img/cases/001.jpg differ
diff --git a/montier/src/assets/img/cases/002.jpg b/montier/src/assets/img/cases/002.jpg
new file mode 100644
index 0000000..4fc42d4
Binary files /dev/null and b/montier/src/assets/img/cases/002.jpg differ
diff --git a/montier/src/assets/img/cases/003.jpg b/montier/src/assets/img/cases/003.jpg
new file mode 100644
index 0000000..704ea2b
Binary files /dev/null and b/montier/src/assets/img/cases/003.jpg differ
diff --git a/montier/src/assets/img/cases/004.jpg b/montier/src/assets/img/cases/004.jpg
new file mode 100644
index 0000000..a50b333
Binary files /dev/null and b/montier/src/assets/img/cases/004.jpg differ
diff --git a/montier/src/assets/img/cases/005.jpg b/montier/src/assets/img/cases/005.jpg
new file mode 100644
index 0000000..075bc22
Binary files /dev/null and b/montier/src/assets/img/cases/005.jpg differ
diff --git a/montier/src/assets/img/cases/006.jpg b/montier/src/assets/img/cases/006.jpg
new file mode 100644
index 0000000..0ba2181
Binary files /dev/null and b/montier/src/assets/img/cases/006.jpg differ
diff --git a/montier/src/assets/img/cases/007.jpg b/montier/src/assets/img/cases/007.jpg
new file mode 100644
index 0000000..cebea43
Binary files /dev/null and b/montier/src/assets/img/cases/007.jpg differ
diff --git a/montier/src/assets/img/cases/008.jpg b/montier/src/assets/img/cases/008.jpg
new file mode 100644
index 0000000..a8788c7
Binary files /dev/null and b/montier/src/assets/img/cases/008.jpg differ
diff --git a/montier/src/assets/img/cases/008.png b/montier/src/assets/img/cases/008.png
new file mode 100644
index 0000000..776e25c
Binary files /dev/null and b/montier/src/assets/img/cases/008.png differ
diff --git a/montier/src/assets/img/cases/01.jpg b/montier/src/assets/img/cases/01.jpg
new file mode 100644
index 0000000..b7e277a
Binary files /dev/null and b/montier/src/assets/img/cases/01.jpg differ
diff --git a/montier/src/assets/img/cases/02.jpg b/montier/src/assets/img/cases/02.jpg
new file mode 100644
index 0000000..4422183
Binary files /dev/null and b/montier/src/assets/img/cases/02.jpg differ
diff --git a/montier/src/assets/img/cases/03.jpg b/montier/src/assets/img/cases/03.jpg
new file mode 100644
index 0000000..9e1ae01
Binary files /dev/null and b/montier/src/assets/img/cases/03.jpg differ
diff --git a/montier/src/assets/img/cases/04.jpg b/montier/src/assets/img/cases/04.jpg
new file mode 100644
index 0000000..c7d5333
Binary files /dev/null and b/montier/src/assets/img/cases/04.jpg differ
diff --git a/montier/src/assets/img/cases/05.jpg b/montier/src/assets/img/cases/05.jpg
new file mode 100644
index 0000000..6f59735
Binary files /dev/null and b/montier/src/assets/img/cases/05.jpg differ
diff --git a/montier/src/assets/img/cases/06.jpg b/montier/src/assets/img/cases/06.jpg
new file mode 100644
index 0000000..07b22b9
Binary files /dev/null and b/montier/src/assets/img/cases/06.jpg differ
diff --git a/montier/src/assets/img/cases/07.jpg b/montier/src/assets/img/cases/07.jpg
new file mode 100644
index 0000000..24e88c1
Binary files /dev/null and b/montier/src/assets/img/cases/07.jpg differ
diff --git a/montier/src/assets/img/cases/08.jpg b/montier/src/assets/img/cases/08.jpg
new file mode 100644
index 0000000..4358fa4
Binary files /dev/null and b/montier/src/assets/img/cases/08.jpg differ
diff --git a/montier/src/assets/img/center01.png b/montier/src/assets/img/center01.png
deleted file mode 100644
index de231d2..0000000
Binary files a/montier/src/assets/img/center01.png and /dev/null differ
diff --git a/montier/src/assets/img/center02.png b/montier/src/assets/img/center02.png
deleted file mode 100644
index 5071b68..0000000
Binary files a/montier/src/assets/img/center02.png and /dev/null differ
diff --git a/montier/src/assets/img/center03.png b/montier/src/assets/img/center03.png
deleted file mode 100644
index 6a2643f..0000000
Binary files a/montier/src/assets/img/center03.png and /dev/null differ
diff --git a/montier/src/assets/img/center04.png b/montier/src/assets/img/center04.png
deleted file mode 100644
index a239d8b..0000000
Binary files a/montier/src/assets/img/center04.png and /dev/null differ
diff --git a/montier/src/assets/img/center05.png b/montier/src/assets/img/center05.png
deleted file mode 100644
index b89abd9..0000000
Binary files a/montier/src/assets/img/center05.png and /dev/null differ
diff --git a/montier/src/assets/img/center06.png b/montier/src/assets/img/center06.png
deleted file mode 100644
index eeb5b8e..0000000
Binary files a/montier/src/assets/img/center06.png and /dev/null differ
diff --git a/montier/src/assets/img/center07.png b/montier/src/assets/img/center07.png
deleted file mode 100644
index 7b234c5..0000000
Binary files a/montier/src/assets/img/center07.png and /dev/null differ
diff --git a/montier/src/components/FooterPage.vue b/montier/src/components/FooterPage.vue
index 4e2d4ec..8971c3d 100644
--- a/montier/src/components/FooterPage.vue
+++ b/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">
diff --git a/montier/src/components/HeaderPage.vue b/montier/src/components/HeaderPage.vue
index d7adb0f..eb1deaf 100644
--- a/montier/src/components/HeaderPage.vue
+++ b/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>
diff --git a/montier/src/pages/AboutMessage.vue b/montier/src/pages/AboutMessage.vue
new file mode 100644
index 0000000..e057c0a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/montier/src/pages/AboutUs.vue b/montier/src/pages/AboutUs.vue
index d97e59e..54d8e14 100644
--- a/montier/src/pages/AboutUs.vue
+++ b/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>
diff --git a/montier/src/pages/AllCases.vue b/montier/src/pages/AllCases.vue
new file mode 100644
index 0000000..0cded70
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/montier/src/pages/Allproduct.vue b/montier/src/pages/Allproduct.vue
new file mode 100644
index 0000000..1248be3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/montier/src/pages/Breadcrumbs.vue b/montier/src/pages/Breadcrumbs.vue
deleted file mode 100644
index 56bb100..0000000
--- a/montier/src/pages/Breadcrumbs.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/montier/src/pages/CaseDetails.vue b/montier/src/pages/CaseDetails.vue
deleted file mode 100644
index f563888..0000000
--- a/montier/src/pages/CaseDetails.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/montier/src/pages/Casemessage.vue b/montier/src/pages/Casemessage.vue
new file mode 100644
index 0000000..2522f97
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/montier/src/pages/Procurement.vue b/montier/src/pages/Procurement.vue
index 932ffe9..3c591af 100644
--- a/montier/src/pages/Procurement.vue
+++ b/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>
\ No newline at end of file
diff --git a/montier/src/pages/ProductCenter.vue b/montier/src/pages/ProductCenter.vue
deleted file mode 100644
index 929cec8..0000000
--- a/montier/src/pages/ProductCenter.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/montier/src/pages/Productmessage.vue b/montier/src/pages/Productmessage.vue
new file mode 100644
index 0000000..456ba7f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/montier/src/pages/ProjectCase.vue b/montier/src/pages/ProjectCase.vue
index 655df4f..fd443bf 100644
--- a/montier/src/pages/ProjectCase.vue
+++ b/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" @click="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%;
   }
 }
diff --git a/montier/src/pages/Service.vue b/montier/src/pages/Service.vue
index ddbd0d2..4f4d165 100644
--- a/montier/src/pages/Service.vue
+++ b/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>
\ No newline at end of file
+}</style>
diff --git a/montier/src/pages/projectCases.vue b/montier/src/pages/projectCases.vue
deleted file mode 100644
index 0202174..0000000
--- a/montier/src/pages/projectCases.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/montier/src/router/index.ts b/montier/src/router/index.ts
index 742748b..331a6f9 100644
--- a/montier/src/router/index.ts
+++ b/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: ''
-        },
+        }
     }
 ]
 
diff --git a/montier/src/store/modules/homepage.ts b/montier/src/store/modules/homepage.ts
index 6d76acc..8a9be67 100644
--- a/montier/src/store/modules/homepage.ts
+++ b/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: []
-                }
-            ]
+            
         }
     },