0818提交

2 years ago · c83575f3ae
--- a/montier/index.html
+++ b/montier/index.html
@ -1,13 +1,17 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <link rel="icon" type="image/svg+xml" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>montieri</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>

 <head>
  <meta charset="UTF-8" />
  <!-- <link rel="icon" type="image/svg+xml" /> -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="keywords" content="FFE, Building materials, Smart hotel, Energy Saving" />
  <title>MONTIERI - FFE, building materials and smart energy saving for hotel/residential/commercial</title>
 </head>

 <body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
 </body>

 </html>
--- a/montier/src/App.vue
+++ b/montier/src/App.vue
@ -1,35 +1,55 @@
 <script setup lang="ts">
  import HeaderPage from './components/HeaderPage.vue';
  import FooterPage from './components/FooterPage.vue';
  import { useRoute } from 'vue-router'
  import {computed, onMounted} from "vue";
  import WOW from "wow.js";
 import HeaderPage from './components/HeaderPage.vue';
 import FooterPage from './components/FooterPage.vue';
 import { useRoute } from 'vue-router'
 import { computed, onMounted } from "vue";
 import WOW from "wow.js";

  const route = useRoute()
  console.log(route)
  const routerKey = computed(() => {
    return route.path + Math.random()
  })
  onMounted(()=>{
    let wow = new WOW({
      boxClass: "wow",
      animateClass: "animated",
      offset: 0,
      mobile: true,
      live: true,
      scrollContainer: null,
      resetAnimation: true,
    });
    wow.init();
  })
 const route = useRoute()
 const routerKey = computed(() => {
  return route.path + Math.random()
 })
 onMounted(() => {
  let wow = new WOW({
    boxClass: "wow",
    animateClass: "animated",
    offset: 0,
    mobile: true,
    live: true,
    scrollContainer: null,
    resetAnimation: true,
  });
  wow.init();
 })
 </script>

 <template>
  <HeaderPage></HeaderPage>
  <router-view :key="routerKey"></router-view>
  <FooterPage></FooterPage>
  <div class="appview">
    <HeaderPage class="header"></HeaderPage>
    <router-view :key="routerKey" class="view"></router-view>
    <FooterPage class="footer"></FooterPage>
  </div>
 </template>

 <style>
 @import './assets/css/index.css';
 <style lang="less">
@import './assets/css/index.css';

 </style>

 <style lang="less">
 .appview{
  display: flex;
  flex-direction: column;
  height: 100vh;
  .header{
    width: 100%;
  }
  .footer{
    width: 100%;
  }
  .view{
    flex: 1;
    // overflow-y: auto;
  }
 }
 </style>
--- a/montier/src/assets/css/index.css
+++ b/montier/src/assets/css/index.css
@ -4,6 +4,12 @@
 }

 /*字体大小*/
 .font-size-10{
    font-size: 10px;
 }
 .font-size-12{
    font-size: 12px;
 }
 .font-size-14{
    font-size: 14px;
 }
--- a/montier/src/assets/iconfont/demo.css
+++ b/montier/src/assets/iconfont/demo.css
@ -0,0 +1,539 @@
 /* Logo 字体 */
@font-face {
  font-family: "iconfont logo";
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
 }

 .logo {
  font-family: "iconfont logo";
  font-size: 160px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

 /* tabs */
 .nav-tabs {
  position: relative;
 }

 .nav-tabs .nav-more {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 42px;
  line-height: 42px;
  color: #666;
 }

 #tabs {
  border-bottom: 1px solid #eee;
 }

 #tabs li {
  cursor: pointer;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  border-bottom: 2px solid transparent;
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  color: #666;
 }


 #tabs .active {
  border-bottom-color: #f00;
  color: #222;
 }

 .tab-container .content {
  display: none;
 }

 /* 页面布局 */
 .main {
  padding: 30px 100px;
  width: 960px;
  margin: 0 auto;
 }

 .main .logo {
  color: #333;
  text-align: left;
  margin-bottom: 30px;
  line-height: 1;
  height: 110px;
  margin-top: -50px;
  overflow: hidden;
  *zoom: 1;
 }

 .main .logo a {
  font-size: 160px;
  color: #333;
 }

 .helps {
  margin-top: 40px;
 }

 .helps pre {
  padding: 20px;
  margin: 10px 0;
  border: solid 1px #e7e1cd;
  background-color: #fffdef;
  overflow: auto;
 }

 .icon_lists {
  width: 100% !important;
  overflow: hidden;
  *zoom: 1;
 }

 .icon_lists li {
  width: 100px;
  margin-bottom: 10px;
  margin-right: 20px;
  text-align: center;
  list-style: none !important;
  cursor: default;
 }

 .icon_lists li .code-name {
  line-height: 1.2;
 }

 .icon_lists .icon {
  display: block;
  height: 100px;
  line-height: 100px;
  font-size: 42px;
  margin: 10px auto;
  color: #333;
  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
  -moz-transition: font-size 0.25s linear, width 0.25s linear;
  transition: font-size 0.25s linear, width 0.25s linear;
 }

 .icon_lists .icon:hover {
  font-size: 100px;
 }

 .icon_lists .svg-icon {
  /* 通过设置 font-size 来改变图标大小 */
  width: 1em;
  /* 图标和文字相邻时，垂直对齐 */
  vertical-align: -0.15em;
  /* 通过设置 color 来改变 SVG 的颜色/fill */
  fill: currentColor;
  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
      normalize.css 中也包含这行 */
  overflow: hidden;
 }

 .icon_lists li .name,
 .icon_lists li .code-name {
  color: #666;
 }

 /* markdown 样式 */
 .markdown {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
 }

 .highlight {
  line-height: 1.5;
 }

 .markdown img {
  vertical-align: middle;
  max-width: 100%;
 }

 .markdown h1 {
  color: #404040;
  font-weight: 500;
  line-height: 40px;
  margin-bottom: 24px;
 }

 .markdown h2,
 .markdown h3,
 .markdown h4,
 .markdown h5,
 .markdown h6 {
  color: #404040;
  margin: 1.6em 0 0.6em 0;
  font-weight: 500;
  clear: both;
 }

 .markdown h1 {
  font-size: 28px;
 }

 .markdown h2 {
  font-size: 22px;
 }

 .markdown h3 {
  font-size: 16px;
 }

 .markdown h4 {
  font-size: 14px;
 }

 .markdown h5 {
  font-size: 12px;
 }

 .markdown h6 {
  font-size: 12px;
 }

 .markdown hr {
  height: 1px;
  border: 0;
  background: #e9e9e9;
  margin: 16px 0;
  clear: both;
 }

 .markdown p {
  margin: 1em 0;
 }

 .markdown>p,
 .markdown>blockquote,
 .markdown>.highlight,
 .markdown>ol,
 .markdown>ul {
  width: 80%;
 }

 .markdown ul>li {
  list-style: circle;
 }

 .markdown>ul li,
 .markdown blockquote ul>li {
  margin-left: 20px;
  padding-left: 4px;
 }

 .markdown>ul li p,
 .markdown>ol li p {
  margin: 0.6em 0;
 }

 .markdown ol>li {
  list-style: decimal;
 }

 .markdown>ol li,
 .markdown blockquote ol>li {
  margin-left: 20px;
  padding-left: 4px;
 }

 .markdown code {
  margin: 0 3px;
  padding: 0 5px;
  background: #eee;
  border-radius: 3px;
 }

 .markdown strong,
 .markdown b {
  font-weight: 600;
 }

 .markdown>table {
  border-collapse: collapse;
  border-spacing: 0px;
  empty-cells: show;
  border: 1px solid #e9e9e9;
  width: 95%;
  margin-bottom: 24px;
 }

 .markdown>table th {
  white-space: nowrap;
  color: #333;
  font-weight: 600;
 }

 .markdown>table th,
 .markdown>table td {
  border: 1px solid #e9e9e9;
  padding: 8px 16px;
  text-align: left;
 }

 .markdown>table th {
  background: #F7F7F7;
 }

 .markdown blockquote {
  font-size: 90%;
  color: #999;
  border-left: 4px solid #e9e9e9;
  padding-left: 0.8em;
  margin: 1em 0;
 }

 .markdown blockquote p {
  margin: 0;
 }

 .markdown .anchor {
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-left: 8px;
 }

 .markdown .waiting {
  color: #ccc;
 }

 .markdown h1:hover .anchor,
 .markdown h2:hover .anchor,
 .markdown h3:hover .anchor,
 .markdown h4:hover .anchor,
 .markdown h5:hover .anchor,
 .markdown h6:hover .anchor {
  opacity: 1;
  display: inline-block;
 }

 .markdown>br,
 .markdown>p>br {
  clear: both;
 }


 .hljs {
  display: block;
  background: white;
  padding: 0.5em;
  color: #333333;
  overflow-x: auto;
 }

 .hljs-comment,
 .hljs-meta {
  color: #969896;
 }

 .hljs-string,
 .hljs-variable,
 .hljs-template-variable,
 .hljs-strong,
 .hljs-emphasis,
 .hljs-quote {
  color: #df5000;
 }

 .hljs-keyword,
 .hljs-selector-tag,
 .hljs-type {
  color: #a71d5d;
 }

 .hljs-literal,
 .hljs-symbol,
 .hljs-bullet,
 .hljs-attribute {
  color: #0086b3;
 }

 .hljs-section,
 .hljs-name {
  color: #63a35c;
 }

 .hljs-tag {
  color: #333333;
 }

 .hljs-title,
 .hljs-attr,
 .hljs-selector-id,
 .hljs-selector-class,
 .hljs-selector-attr,
 .hljs-selector-pseudo {
  color: #795da3;
 }

 .hljs-addition {
  color: #55a532;
  background-color: #eaffea;
 }

 .hljs-deletion {
  color: #bd2c00;
  background-color: #ffecec;
 }

 .hljs-link {
  text-decoration: underline;
 }

 /* 代码高亮 */
 /* PrismJS 1.15.0
 https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
 /**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
 code[class*="language-"],
 pre[class*="language-"] {
  color: black;
  background: none;
  text-shadow: 0 1px white;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
 }

 pre[class*="language-"]::-moz-selection,
 pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection,
 code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
 }

 pre[class*="language-"]::selection,
 pre[class*="language-"] ::selection,
 code[class*="language-"]::selection,
 code[class*="language-"] ::selection {
  text-shadow: none;
  background: #b3d4fc;
 }

@media print {

  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none;
  }
 }

 /* Code blocks */
 pre[class*="language-"] {
  padding: 1em;
  margin: .5em 0;
  overflow: auto;
 }

 :not(pre)>code[class*="language-"],
 pre[class*="language-"] {
  background: #f5f2f0;
 }

 /* Inline code */
 :not(pre)>code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
 }

 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
  color: slategray;
 }

 .token.punctuation {
  color: #999;
 }

 .namespace {
  opacity: .7;
 }

 .token.property,
 .token.tag,
 .token.boolean,
 .token.number,
 .token.constant,
 .token.symbol,
 .token.deleted {
  color: #905;
 }

 .token.selector,
 .token.attr-name,
 .token.string,
 .token.char,
 .token.builtin,
 .token.inserted {
  color: #690;
 }

 .token.operator,
 .token.entity,
 .token.url,
 .language-css .token.string,
 .style .token.string {
  color: #9a6e3a;
  background: hsla(0, 0%, 100%, .5);
 }

 .token.atrule,
 .token.attr-value,
 .token.keyword {
  color: #07a;
 }

 .token.function,
 .token.class-name {
  color: #DD4A68;
 }

 .token.regex,
 .token.important,
 .token.variable {
  color: #e90;
 }

 .token.important,
 .token.bold {
  font-weight: bold;
 }

 .token.italic {
  font-style: italic;
 }

 .token.entity {
  cursor: help;
 }
--- a/montier/src/assets/iconfont/demo_index.html
+++ b/montier/src/assets/iconfont/demo_index.html
@ -0,0 +1,326 @@
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
 </head>
 <body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4216264" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">我的产品</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ae;</span>
                <div class="name">24gl-newspaper</div>
                <div class="code-name">&amp;#xe8ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">联系我们</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">工程</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe884;</span>
                <div class="name">专属服务</div>
                <div class="code-name">&amp;#xe884;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
 <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');
 }
 </code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
 <pre><code class="language-css"
 >.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
 </code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
 <pre>
 <code class="language-html"
 >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
 </code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-wodechanpin"></span>
            <div class="name">
              我的产品
            </div>
            <div class="code-name">.icon-wodechanpin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-24gl-newspaper"></span>
            <div class="name">
              24gl-newspaper
            </div>
            <div class="code-name">.icon-24gl-newspaper
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lianxiwomen"></span>
            <div class="name">
              联系我们
            </div>
            <div class="code-name">.icon-lianxiwomen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongcheng"></span>
            <div class="name">
              工程
            </div>
            <div class="code-name">.icon-gongcheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuanshufuwu"></span>
            <div class="name">
              专属服务
            </div>
            <div class="code-name">.icon-zhuanshufuwu
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
 <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
 </code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
 <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
 </code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wodechanpin"></use>
                </svg>
                <div class="name">我的产品</div>
                <div class="code-name">#icon-wodechanpin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-24gl-newspaper"></use>
                </svg>
                <div class="name">24gl-newspaper</div>
                <div class="code-name">#icon-24gl-newspaper</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lianxiwomen"></use>
                </svg>
                <div class="name">联系我们</div>
                <div class="code-name">#icon-lianxiwomen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongcheng"></use>
                </svg>
                <div class="name">工程</div>
                <div class="code-name">#icon-gongcheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuanshufuwu"></use>
                </svg>
                <div class="name">专属服务</div>
                <div class="code-name">#icon-zhuanshufuwu</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
 <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
 </code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
 <pre><code class="language-html">&lt;style&gt;
 .icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
 }
 &lt;/style&gt;
 </code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
 <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
 &lt;/svg&gt;
 </code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
 </body>
 </html>
--- a/montier/src/assets/iconfont/iconfont.css
+++ b/montier/src/assets/iconfont/iconfont.css
@ -0,0 +1,39 @@
@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');
 }

 .iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

 .icon-wodechanpin:before {
  content: "\e633";
 }

 .icon-shouye:before {
  content: "\e64f";
 }

 .icon-24gl-newspaper:before {
  content: "\e8ae";
 }

 .icon-lianxiwomen:before {
  content: "\e612";
 }

 .icon-gongcheng:before {
  content: "\e6a4";
 }

 .icon-zhuanshufuwu:before {
  content: "\e884";
 }

--- a/montier/src/assets/iconfont/iconfont.js
+++ b/montier/src/assets/iconfont/iconfont.js
--- a/montier/src/assets/iconfont/iconfont.json
+++ b/montier/src/assets/iconfont/iconfont.json
@ -0,0 +1,51 @@
 {
  "id": "4216264",
  "name": "web",
  "font_family": "iconfont",
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
    {
      "icon_id": "1831570",
      "name": "我的产品",
      "font_class": "wodechanpin",
      "unicode": "e633",
      "unicode_decimal": 58931
    },
    {
      "icon_id": "629343",
      "name": "首页",
      "font_class": "shouye",
      "unicode": "e64f",
      "unicode_decimal": 58959
    },
    {
      "icon_id": "7548884",
      "name": "24gl-newspaper",
      "font_class": "24gl-newspaper",
      "unicode": "e8ae",
      "unicode_decimal": 59566
    },
    {
      "icon_id": "7817221",
      "name": "联系我们",
      "font_class": "lianxiwomen",
      "unicode": "e612",
      "unicode_decimal": 58898
    },
    {
      "icon_id": "10032377",
      "name": "工程",
      "font_class": "gongcheng",
      "unicode": "e6a4",
      "unicode_decimal": 59044
    },
    {
      "icon_id": "34453380",
      "name": "专属服务",
      "font_class": "zhuanshufuwu",
      "unicode": "e884",
      "unicode_decimal": 59524
    }
  ]
 }
--- a/montier/src/assets/iconfont/iconfont.ttf
+++ b/montier/src/assets/iconfont/iconfont.ttf
--- a/montier/src/assets/iconfont/iconfont.woff
+++ b/montier/src/assets/iconfont/iconfont.woff
--- a/montier/src/assets/iconfont/iconfont.woff2
+++ b/montier/src/assets/iconfont/iconfont.woff2
--- a/montier/src/components/FooterPage.vue
+++ b/montier/src/components/FooterPage.vue
@ -3,24 +3,30 @@
    <div class="content">
      <div class="box">
        <div class="navs">
          <div class="nav-item">
            <router-link to="/" class="title">Home</router-link>
          <router-link to="/" class="nav-item">
            <i class="iconfont icon-shouye"></i>
            <div to="/" class="title">Home</div>
          </router-link>
          <div class="nav-item" @click="goto('productCenter')">
            <i class="iconfont icon-wodechanpin"></i>
            <div class="title">Product Center</div>
          </div>
          <div class="nav-item">
            <div class="title" @click="goto('productCenter')">Product Center</div>
          <div class="nav-item" @click="goto('service')">
            <i class="iconfont icon-zhuanshufuwu"></i>
            <div class="title">Service</div>
          </div>
          <div class="nav-item">
            <div class="title" @click="goto('service')">Service</div>
          </div>
          <div class="nav-item">
            <div class="title" @click="goto('projectCases')">Project Cases</div>
          </div>
          <div class="nav-item">
            <div class="title" @click="goto('informationCenter')">News</div>
          </div>
          <div class="nav-item">
            <router-link to="/contactUs" class="title">Contact Us</router-link>
          <div class="nav-item" @click="goto('projectCases')">
            <i class="iconfont icon-gongcheng"></i>
            <div class="title">Project Cases</div>
          </div>
          <router-link to="/news/all" class="nav-item">
            <i class="iconfont icon-24gl-newspaper"></i>
            <div class="title">News</div>
          </router-link>
          <router-link to="/contactUs" class="nav-item">
            <i class="iconfont icon-lianxiwomen"></i>
            <div class="title">Contact Us</div>
          </router-link>
        </div>
      </div>
    </div>
@ -40,6 +46,11 @@ onMounted(async () => {
 </script>

 <style scoped lang="less">
 .iconfont {
  color: #ffffff;
  font-size: 2rem;
 }

 .footerBox {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
@ -54,153 +65,41 @@ onMounted(async () => {
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }


    .address {
  .box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    // margin-top: 2.5rem;

    .navs {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      padding-bottom: 2.5rem;
      border-bottom: 1px solid #2f3140;
      justify-content: space-around;
      vertical-align: baseline;
      position: relative;
      left: 50%;
      transform: translateX(-50%);

      img {
        width: 12rem;
        margin-right: 1.875rem;
      .nav-item {
        cursor: pointer;
      }

      .right {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;

        .top {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;

          .item {
            font-weight: 600;
            color: #fff;
            line-height: 1.375rem;
            padding: 0 1.25rem;
            border-right: 1px solid #fff;
            cursor: pointer;
          }

          .item:first-child {
            padding-left: 0;
          }

          .item:last-child {
            border-right: none;
          }

          .item.active {
            color: #3069fe;
          }
        }

        .info {
          font-size: .875rem;
          color: #a8a9b3;
          line-height: 1.25rem;
          margin-top: 0.625rem;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;

          p {
            margin: 0;
            padding: 0;
            margin-right: 2.5rem;
          }

          p:first-child {
            width: 100%;
          }
        }

      }
    }

    .box {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      margin-top: 2.5rem;

      .navs {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        position: relative;
        top: 50%;
        transform: translateY(-40%);
        margin-right: 3.125rem;
        // margin: 1rem 3.125rem;
        display: flex;
        vertical-align: baseline;

        .nav-item {
          cursor: pointer;
          margin-right: 3.125rem;

          .title {
            font-size: 15px;
            font-weight: bold;
            color: #fff;
            line-height: 1.3125rem;
            margin-bottom: 0.9375rem;
          }
        flex-direction: column;
        align-items: center;

          .items {
            .item {
              font-size: 14px;
              color: #8c8fa4;
              line-height: 1.875rem;
              display: block;
            }
          }
        }
      }

      .center {
        vertical-align: baseline;

        .title {
          font-size: .75rem;
          color: #fff;
          line-height: 1.3125rem;
          margin-bottom: 0.9375rem;
        }

        .no-transition {
          width: 6.875rem;
          margin-top: 0.75rem;
        }
      }

      .right {
        .title {
          font-size: 15px;
          font-weight: bold;
@ -208,83 +107,40 @@ onMounted(async () => {
          line-height: 1.3125rem;
          margin-bottom: 0.9375rem;
        }

        .item {
          font-size: 14px;
          color: #bcbcbc;
          line-height: 1.875rem;
          cursor: pointer;
        }

        .item.active {
          color: #3069fe;
        }
      }
    }

    .copyright {
      font-size: .75rem;
      color: #8c8fa4;
      line-height: 1.0625rem;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      padding-top: 1.625rem;
      border-top: 1px solid #2f3140;
      margin-top: 2.5rem;
    }
  }
 }

@media screen and (max-width: 1200px) {
  .footerBox {
    padding: 1rem 0;
    padding: 6rem 0;
    overflow: hidden;

    .content {
      padding: 0 1.25rem;

      .address {
        display: initial;

        .right {
          .top {
            .item {
              padding: 0 0.625rem;
            }
          }
        }
      }

      .box {
        display: initial;
        text-align: center;

        .navs {
          display: none;
        }
          position: absolute;
          top: 2.3rem;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;

        .right {
          display: none;
        }
          .nav-item {
            width: 20%;
            text-align: center;

        .info {
          text-align: center;
            .iconfont {
              font-size: 1.5rem;
            }
          }
        }
      }

      .copyright {
        flex-wrap: wrap;
      }
    }
  }
 }</style>
--- a/montier/src/components/HeaderPage.vue
+++ b/montier/src/components/HeaderPage.vue
@ -109,6 +109,10 @@ const goPage = (url: any) => {
  clickStatus.value = false
  router.push(url)
 }
 // 定位
 const goto = (idname: any) => {
  document.getElementById(idname)?.scrollIntoView()
 }
 const mobheadFun = async () => {
  clickStatus.value = !clickStatus.value
 }
@ -157,11 +161,11 @@ 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'">Product Center</div>
                :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goto('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">
                    <li class="nav-item text-center" v-for="(item, index) in caselist" :key="index" @click="goPage(`/productcenter/${item.detail.title}`)">
                      <div>
                        <div class="nav-item-link px-16-px text-overflow-ellipsis" :title="item.detail.title">{{
                          item.detail.title }}</div>
@ -173,7 +177,7 @@ 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="goPage('/service')">Service</div>
                :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goto('service')">Service</div>
              <div class="dui-dropdown-men position-absolute">
                <div class="menu-container mt-1">
                  <ul>
@ -190,13 +194,13 @@ 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'">Project Cases</div>
                :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goto('projectCases')">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">{{ item.title }}</div>
                        <div class="nav-item-link px-16-px text-overflow-ellipsis" @click="goPage(`/projectcase/${item.title}`)">{{ item.title }}</div>
                      </div>
                    </li>
                  </ul>
@ -206,7 +210,7 @@ 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'">News</div>
                :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goPage('/news/all')">News</div>
              <div class="dui-dropdown-men position-absolute">
                <div class="menu-container mt-1">

@ -243,7 +247,7 @@ const getProduct = async () => {
              <template #title>
                <span>Product Center</span>
              </template>
              <el-menu-item :index="'1-' + index" v-for="(item, index) in caselist" :key="index">
              <el-menu-item :index="'1-' + index" v-for="(item, index) in caselist" :key="index" @click="goPage(`/productcenter/${item.detail.title}`)">
                {{ item.detail.title }}
              </el-menu-item>
            </el-sub-menu>
@ -258,13 +262,13 @@ 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">
              <el-menu-item :index="'3-' + index + 1" v-for="item, index in projectlist" :key="index" @click="goPage(`/projectcase/${item.title}`)">
                <span>{{ item.title }}</span>
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="4">
              <template #title>
                <span>News</span>
                <span @click="goPage('/news/all')">News</span>
              </template>
            </el-menu-item>
            <el-menu-item index="5">
@ -284,6 +288,7 @@ const getProduct = async () => {
  margin-bottom: 3vw;
 }
 .navbar {
  box-shadow: 1px 5px 5px #eee;
  position: fixed;
  top: 0;
  left: 0;
--- a/montier/src/main.ts
+++ b/montier/src/main.ts
@ -8,6 +8,8 @@ import 'element-plus/dist/index.css'
 import "animate.css";
 import 'animate.css/animate.compat.css'

 import './assets/iconfont/iconfont.css'

 const app = createApp(App)
 app.use(ElementPlus)
 app.use(createPinia())
--- a/montier/src/pages/HomePage.vue
+++ b/montier/src/pages/HomePage.vue
@ -61,7 +61,7 @@ let titleThree = ref<any>({
  desc: ""
 })
 let titleFour = ref<any>({
  title: "Information Center",
  title: "News",
  desc: ""
 })

@ -104,7 +104,8 @@ const onSlideChange = () => {
  // height: 50px;
  // line-height: 50px;
  // text-align: center;
  background: rgba(0, 0, 0, .5);
  // background: rgba(0, 0, 0, .5);
  background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.8) 70%);
  width: 100%;
  padding: 20px;
  font-size: 54px;
@ -136,7 +137,7 @@ const onSlideChange = () => {
  .bannerImg {
    margin: 0;
    padding: 0;
    margin-top: 50px;
    // margin-top: 50px;

    :deep(.swiper-button-prev:after) {
      font-size: 30px;
--- a/montier/src/pages/NewsMessage.vue
+++ b/montier/src/pages/NewsMessage.vue
@ -0,0 +1,36 @@
 <template>
    <div class="newsmessage">
        <div v-if="router.currentRoute.value.params.name == 'all'">
            <Title :value="title"></Title>
            <Service :index="2"/>
        </div>
        <div v-else>
            新闻资讯
        </div>
    </div>
 </template>

 <script setup lang="ts">
 import router from '../router';
 import Service from './Service.vue';
 import Title from '../components/Title.vue';
 import { ref } from 'vue'

 let title = ref<any>({
  title: "News",
  desc: ""
 })


 </script>

 <style scoped lang="less">
 .newsmessage{
    // margin-top: 1vw;
 }
@media screen and (max-width: 960px) {
    .newsmessage{
        margin-top: 10vw;
    }
 }
 </style>
--- a/montier/src/pages/Procurement.vue
+++ b/montier/src/pages/Procurement.vue
@ -138,7 +138,7 @@ onMounted(async () => {

 <style scoped>
 .procurement{
  margin: 3vw auto 2vw;
  margin: 2vw auto 2vw;
 }
 .fixed-width {
  width: 50%;
--- a/montier/src/pages/ProductCenter.vue
+++ b/montier/src/pages/ProductCenter.vue
@ -0,0 +1,85 @@
 <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>
--- a/montier/src/pages/Service.vue
+++ b/montier/src/pages/Service.vue
@ -4,9 +4,8 @@
            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">
                    <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>
                </div>
@ -14,15 +13,20 @@
        </swiper>
        <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 servicelist" :key="index" class="hover-scale"
                @click="goPage1(`/news/${item.title}`)">
                <div>
                    <div class="case-img overflow-hidden position-relative">
                        <img src="../assets/img/information.jpg" alt="information"
                            class="width-100 d-block position-relative">
                    </div>
                    <div class="project-center-title1">
                        <div class="font-size-14 newsdate">2023-08-17</div>
                        <h2 class="newstitle">{{ item.title }}</h2>
                        <p class="font-size-12 newsdate">2023-08-17</p>
                        <h3 class="newstitle">{{ item.title }}</h3>
                        <p class="font-size-14 newsdate">
                            新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详
                            情新闻详情新闻详情新闻详情新闻详情,新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情
                        </p>
                    </div>
                </div>
            </swiper-slide>
@ -61,6 +65,11 @@ const goPage = (url: any, index: any) => {
        }
    })
 }
 const goPage1 = (url: any) => {
    router.push({
        path: url
    })
 }

 onMounted(() => {
    if (document.body.offsetWidth < 1000) {
@ -98,17 +107,27 @@ onMounted(() => {
 .hover-scale {
    .case-img {
        cursor: pointer;

        img {
            transition: all 0.5s;
            transition: all 1s;
        }
    }

    .project-center-title1 {
        .newstitle {
            transition: all 0.5s;
        }
    }
 }

 .hover-scale:hover .case-img img {
    transform: scale(1.1);
 }

 .hover-scale:hover .project-center-title1 .newstitle {
    color: #F56C6C;
 }


 .project-center-title {
    bottom: 0;
@ -118,14 +137,29 @@ onMounted(() => {
    width: 100%;
    padding: 10px 5px;
 }

 .project-center-title1 {
    cursor: pointer;
    width: 100%;
    padding: 10px 5px;
    .newsdate{

    .newsdate {
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -moz-box;
        -moz-line-clamp: 2;
        -moz-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal;
    }
    .newstitle{

    .newstitle {
        margin: 10px 0;
        color: #333333;
    }
 }
@ -175,7 +209,8 @@ onMounted(() => {
    .sww {
        width: 35vw;
        height: 35vw;
        img{

        img {
            width: 35vw;
            height: 35vw;
        }
@ -217,4 +252,5 @@ onMounted(() => {
            width: 40px;
        }
    }
 }</style>
 }
 </style>
--- a/montier/src/pages/contactUs.vue
+++ b/montier/src/pages/contactUs.vue
@ -1,7 +1,7 @@
 <template>
    <div class="contactUs">
        <Title :value="title"></Title>
        <div class="contactuss">
        <div class="contactuss" :class="mobileShow ? 'width-100' : 'width-60'">
            <!-- 左边 -->
            <div class="contact-left">
                <div class="item">
@ -24,7 +24,7 @@
            </div>
            <!-- 右边 -->
            <div class="contact-right">
                <el-form ref="ruleFormRef" :model="form" class="demo-ruleForm" label-width="150px" :size="'default'"
                <el-form ref="ruleFormRef" :model="form" class="demo-ruleForm" :label-width="labelwidth" :size="'default'"
                    :inline="true" status-icon>
                    <el-form-item label="Requirements" prop="desc" style="width: 100%" :rules="[
                        {
@ -34,7 +34,7 @@
                        }]">
                        <el-input v-model="form.Requirements" placeholder="Requirements" type="textarea"/>
                    </el-form-item>
                    <el-form-item label="Name" style="width: 45%" :rules="[
                    <el-form-item label="Name" :style="{width: stylewidth}" :rules="[
                        {
                            required: true,
                            message: 'Please enter your name',
@ -42,7 +42,7 @@
                        }]">
                        <el-input v-model="form.name" placeholder="Name" clearable />
                    </el-form-item>
                    <el-form-item label="Email" style="width: 45%" :rules="[
                    <el-form-item label="Email" :style="{width: stylewidth}" :rules="[
                        {
                            required: true,
                            message: 'Please enter your email',
@ -50,7 +50,7 @@
                        }]">
                        <el-input v-model="form.email" placeholder="Email" clearable />
                    </el-form-item>
                    <el-form-item label="Phone Number" style="width: 45%" :rules="[
                    <el-form-item label="Phone" :style="{width: stylewidth}" :rules="[
                        {
                            required: true,
                            message: 'Please enter your phone number',
@ -58,7 +58,7 @@
                        }]">
                        <el-input v-model="form.phone" placeholder="Phone Number" clearable />
                    </el-form-item>
                    <el-form-item label="Country" style="width: 45%" :rules="[
                    <el-form-item label="Country" :style="{width: stylewidth}" :rules="[
                        {
                            required: true,
                            message: 'Please enter your country',
@ -66,7 +66,7 @@
                        }]">
                        <el-input v-model="form.country" placeholder="Country" clearable />
                    </el-form-item>
                    <el-form-item label="Address" style="width: 45%" :rules="[
                    <el-form-item label="Address" :style="{width: stylewidth}" :rules="[
                        {
                            required: true,
                            message: 'Please enter your address',
@ -74,7 +74,7 @@
                        }]">
                        <el-input v-model="form.address" placeholder="Address" clearable />
                    </el-form-item>
                    <el-form-item label="Title" style="width: 45%" :rules="[
                    <el-form-item label="Title" :style="{width: stylewidth}" :rules="[
                        {
                            required: true,
                            message: 'Please enter your title',
@ -93,18 +93,20 @@
                </el-form>
            </div>
        </div>
        <div class="btn font-size-16">Submit</div>
    </div>
 </template>

 <script setup lang="ts">
 import Title from '../components/Title.vue';
 import { ref, reactive } from 'vue'
 import { ref, reactive, onMounted } from 'vue'

 let title = ref<any>({
    title: "Contact Us",
    desc: ""
 })

 let labelwidth = ref<any>('150px')
 let stylewidth = ref<any>('45%')
 let form = reactive<any>({
    Requirements: '',
    name: '',
@ -115,25 +117,74 @@ let form = reactive<any>({
    title: '',
    company: ''
 })
 let mobileShow = ref<any>(false)
 onMounted(async ()=>{
  if(document.body.offsetWidth<1000){
    mobileShow.value = true
    labelwidth.value = '80px'
    stylewidth.value = '100%'
  }else{
    mobileShow.value = false
    labelwidth.value = '150px'
    stylewidth.value = '45%'
  }
  window.addEventListener('resize',function(){
    if(document.body.offsetWidth<1000){
      mobileShow.value = true
        labelwidth.value = '80px'
        stylewidth.value = '100%'
    }else{
      mobileShow.value = false
        labelwidth.value = '150px'
        stylewidth.value = '45%'
    }
  })
 })
 </script>

 <style scoped lang="less">
 .contactUs {
    margin-top: 4.5vw;
    width: 100%;
    // text-align: center;
    // margin-top: 4.5vw;
    .btn{
        margin-top: 3rem;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
        display: inline-block;
        // padding: 10px 40px;
        width: 20%;
        border: 1px solid #eee;
        background-color: #409EFF;
        text-align: center;
        height: 3rem;
        line-height: 3rem;
        font-weight: 700;
        margin-bottom: 10px;
        color: #ffffff;
    }
 }

 .contactuss {
    width: 80%;
    height: 30vw;
    // height: 16vw;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .contact-left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        justify-content: space-around;
        flex-wrap: wrap;
        .item{
            float: left;
            margin: 5px 0;
        }
    }

    .contact-right {
@ -147,11 +198,20 @@ let form = reactive<any>({
        margin-top: 15vw;

        .contactuss {
            height: 90vw;
            display: flex;
            flex-direction: column;
            // height: 90vw;

            .contact-left {
                width: 30%;
                font-size: 12px;
                display: block;
                // justify-content: space-around;
                .item{
                    margin-right: 10px;
                }
            }
            .contact-right{
                width: 80vw;
            }
        }
    }
--- a/montier/src/pages/projectCases.vue
+++ b/montier/src/pages/projectCases.vue
@ -4,7 +4,7 @@
            <div class="bg-F4F4F4 pa-2 border-box">
                <div class="casemessage">
                    <div class="casemessage-left">
                        <h3>Fairmont Empress Hotel</h3>
                        <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>
@ -12,9 +12,9 @@
                        </div>
                        <p class="button-left">Get Aa Free Quote ></p>
                    </div>
                    <div class="casemessage-right">
                    <div class="casemessage-right width-100">
                        <img src="../assets/img/Installwoodenflooring.jpg" alt="Installwoodenflooring"
                            class="width-100 height-100 imgcase">
                            class="width-100 imgcase">
                    </div>
                </div>
            </div>
@ -36,6 +36,10 @@
 </script>

 <style scoped lang="less">
 .procurement {
    margin-top: 2vw;
 }

 .casemessage {
    padding: 15px;
    display: flex;
@ -44,8 +48,9 @@
    overflow: hidden;

    .casemessage-left {
        width: 40%;
        width: 50%;
        font-size: 26px;
        margin-right: 5%;

        .message {
            margin-top: 5vw;
@ -58,7 +63,9 @@
        }

        .button-left {
            // position: absolute;
            cursor: pointer;
            float: left;
            padding: 10px 20px;
            background-color: #fa8106;
            float: left;
@ -69,7 +76,7 @@
    }

    .casemessage-right {
        width: 45%;
        // width: 45%;
        height: 20vw;
        overflow: hidden;

@ -95,18 +102,28 @@
 }

@media screen and (max-width: 960px) {
    .casemessage-left {
        background-color: pink;
        font-size: 14px;
    }
    .casemessage {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

    .casemessage-right {
        width: 50vw;
        height: 50vw;
        .casemessage-left {
            display: flex;
            flex-wrap: wrap;
            font-size: 10px;
            margin-bottom: 10px;
            .button-left{
                white-space: nowrap;
            }
        }

        .imgcase {
            width: 50vw;
            height: 50vw;
        .casemessage-right {
            height: 35vw;

            .imgcase {
                width: 100%;
                height: 100%;
            }
        }
    }
 }</style>
--- a/montier/src/router/index.ts
+++ b/montier/src/router/index.ts
@ -3,31 +3,75 @@ import {createRouter,createWebHistory} from "vue-router";
 const routes = [
    {
        path: '/',
        component: ()=>import('../pages/HomePage.vue')
        component: ()=>import('../pages/HomePage.vue'),
        content: {
            keywords: 'FFE Building materials Smart hotelEnergy Saving',
            description: ''
        },
        meta: { title: '' }
    },
    {
        path: '/service',
        component: () => import('../pages/Procurement.vue')
        component: () => import('../pages/Procurement.vue'),
        meta: { title: 'Service' },
        content: {
            keywords: 'FFE Building materials Smart hotelEnergy Saving',
            description: ''
        },
    },
    {
        path: '/projectcase/:name',
        component: () => import('../pages/projectCases.vue'),
        meta: { title: 'Project Case' },
        content: {
            keywords: 'FFE Building materials Smart hotelEnergy Saving',
            description: ''
        },
    },
    // {
    //     path: '/projectcase/allproject',
    //     component: () => import('../pages/ProjectCase.vue')
    //     path: '/casedetail',
    //     component: () => import('../pages/CaseDetails.vue'),
    //     meta: { title: 'Service' },
    //     content: {
    //         keywords: 'FFE Building materials Smart hotelEnergy Saving',
    //         description: ''
    //     },
    // },
    {
        path: '/projectcase/:name',
        component: () => import('../pages/projectCases.vue')
        path: '/contactUs',
        component: () => import('../pages/contactUs.vue'),
        meta: { title: 'Contact Us' },
        content: {
            keywords: 'FFE Building materials Smart hotelEnergy Saving',
            description: ''
        },
    },{
        path: '/casedetail',
        component: () => import('../pages/CaseDetails.vue')
        path: '/news/:name',
        component: () => import('../pages/NewsMessage.vue'),
        meta: { title: 'News' },
        content: {
            keywords: 'FFE Building materials Smart hotelEnergy Saving',
            description: ''
        },
    },{
        path: '/contactUs',
        component: () => import('../pages/contactUs.vue')
        path: '/productcenter/:name',
        component: () => import('../pages/ProductCenter.vue'),
        meta: { title: 'Product Center' },
        content: {
            keywords: 'FFE Building materials Smart hotelEnergy Saving',
            description: ''
        },
    }
 ]

 const router = createRouter({
    history: createWebHistory(),
    history: createWebHistory('/page/'),
    routes
 })

 router.beforeEach((to, from, next) => {
    document.title = `${to.meta.title}` || 'MONTIERI - FFE, building materials and smart energy saving for hotel/residential/commercial';
    next();
 })

 export default router
--- a/montier/tsconfig.json
+++ b/montier/tsconfig.json
@ -16,8 +16,8 @@

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
--- a/montier/vite.config.ts
+++ b/montier/vite.config.ts
@ -4,6 +4,7 @@ import path from 'path'

 // https://vitejs.dev/config/
 export default defineConfig({
  base: './page/',
  plugins: [vue()],
  resolve: {
    alias: {