diff --git a/montier/index.html b/montier/index.html index a59e34c..6e710aa 100644 --- a/montier/index.html +++ b/montier/index.html @@ -1,13 +1,17 @@ - - - - - montieri - - -
- - - + + + + + + + MONTIERI - FFE, building materials and smart energy saving for hotel/residential/commercial + + + +
+ + + + \ No newline at end of file diff --git a/montier/src/App.vue b/montier/src/App.vue index 36a24d3..c380d70 100644 --- a/montier/src/App.vue +++ b/montier/src/App.vue @@ -1,35 +1,55 @@ - + + diff --git a/montier/src/assets/css/index.css b/montier/src/assets/css/index.css index 36894aa..48e138b 100644 --- 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; } diff --git a/montier/src/assets/iconfont/demo.css b/montier/src/assets/iconfont/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ 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; +} diff --git a/montier/src/assets/iconfont/demo_index.html b/montier/src/assets/iconfont/demo_index.html new file mode 100644 index 0000000..f394068 --- /dev/null +++ b/montier/src/assets/iconfont/demo_index.html @@ -0,0 +1,326 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + + 查看项目 + +
+
+
+
    + +
  • + +
    我的产品
    +
    
    +
    • + +
  • + +
    首页
    +
    
    +
    • + +
  • + +
    24gl-newspaper
    +
    
    +
    • + +
  • + +
    联系我们
    +
    
    +
    • + +
  • + +
    工程
    +
    
    +
    • + +
  • + +
    专属服务
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@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');
+}
+
+

第二步：定义使用 iconfont 的样式

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

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 我的产品 +
    +
    .icon-wodechanpin +
    +
    • + +
  • + +
    + 首页 +
    +
    .icon-shouye +
    +
    • + +
  • + +
    + 24gl-newspaper +
    +
    .icon-24gl-newspaper +
    +
    • + +
  • + +
    + 联系我们 +
    +
    .icon-lianxiwomen +
    +
    • + +
  • + +
    + 工程 +
    +
    .icon-gongcheng +
    +
    • + +
  • + +
    + 专属服务 +
    +
    .icon-zhuanshufuwu +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    我的产品
    +
    #icon-wodechanpin
    +
    • + +
  • + +
    首页
    +
    #icon-shouye
    +
    • + +
  • + +
    24gl-newspaper
    +
    #icon-24gl-newspaper
    +
    • + +
  • + +
    联系我们
    +
    #icon-lianxiwomen
    +
    • + +
  • + +
    工程
    +
    #icon-gongcheng
    +
    • + +
  • + +
    专属服务
    +
    #icon-zhuanshufuwu
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/montier/src/assets/iconfont/iconfont.css b/montier/src/assets/iconfont/iconfont.css new file mode 100644 index 0000000..2fc0f83 --- /dev/null +++ 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"; +} + diff --git a/montier/src/assets/iconfont/iconfont.js b/montier/src/assets/iconfont/iconfont.js new file mode 100644 index 0000000..f814507 --- /dev/null +++ b/montier/src/assets/iconfont/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_4216264='',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("")}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 diff --git a/montier/src/assets/iconfont/iconfont.json b/montier/src/assets/iconfont/iconfont.json new file mode 100644 index 0000000..13e7aa0 --- /dev/null +++ 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 + } + ] +} diff --git a/montier/src/assets/iconfont/iconfont.ttf b/montier/src/assets/iconfont/iconfont.ttf new file mode 100644 index 0000000..8871dc0 Binary files /dev/null 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 new file mode 100644 index 0000000..d200c2a Binary files /dev/null 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 new file mode 100644 index 0000000..e1c748b Binary files /dev/null and b/montier/src/assets/iconfont/iconfont.woff2 differ diff --git a/montier/src/components/FooterPage.vue b/montier/src/components/FooterPage.vue index cdc5499..4e2d4ec 100644 --- a/montier/src/components/FooterPage.vue +++ b/montier/src/components/FooterPage.vue @@ -3,24 +3,30 @@
-
- Home + + +
Home
+ +
+ +
Product Center
-
-
Product Center
+
+ +
Service
-
-
Service
-
-
-
Project Cases
-
-
-
News
-
-
- Contact Us +
+ +
Project Cases
+ + +
News
+ + + +
Contact Us
+
@@ -40,6 +46,11 @@ onMounted(async () => { \ No newline at end of file diff --git a/montier/src/components/HeaderPage.vue b/montier/src/components/HeaderPage.vue index df9faa6..d7adb0f 100644 --- 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 () => {
Product Center
+ :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goto('productCenter')">Product Center
    -
  • +
  • {{ item.detail.title }}
    @@ -173,7 +177,7 @@ const getProduct = async () => {
    Service
    + :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goto('service')">Service
      @@ -190,13 +194,13 @@ const getProduct = async () => {
      Project Cases
      + :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goto('projectCases')">Project Cases
      • -
        {{ item.title }}
        +
        {{ item.title }}
      @@ -206,7 +210,7 @@ const getProduct = async () => {
      News
      + :class="scrollTopShow ? 'color-000' : 'color-000'" @click="goPage('/news/all')">News
      @@ -243,7 +247,7 @@ const getProduct = async () => { - + {{ item.detail.title }} @@ -258,13 +262,13 @@ const getProduct = async () => { - + {{ item.title }} @@ -284,6 +288,7 @@ const getProduct = async () => { margin-bottom: 3vw; } .navbar { + box-shadow: 1px 5px 5px #eee; position: fixed; top: 0; left: 0; diff --git a/montier/src/main.ts b/montier/src/main.ts index 2ee07f9..e8d1c4b 100644 --- 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()) diff --git a/montier/src/pages/HomePage.vue b/montier/src/pages/HomePage.vue index f08ee28..6a24fe0 100644 --- a/montier/src/pages/HomePage.vue +++ b/montier/src/pages/HomePage.vue @@ -61,7 +61,7 @@ let titleThree = ref({ desc: "" }) let titleFour = ref({ - 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; diff --git a/montier/src/pages/NewsMessage.vue b/montier/src/pages/NewsMessage.vue new file mode 100644 index 0000000..1c2686e --- /dev/null +++ b/montier/src/pages/NewsMessage.vue @@ -0,0 +1,36 @@ + + + + + \ No newline at end of file diff --git a/montier/src/pages/Procurement.vue b/montier/src/pages/Procurement.vue index 7a778de..932ffe9 100644 --- a/montier/src/pages/Procurement.vue +++ b/montier/src/pages/Procurement.vue @@ -138,7 +138,7 @@ onMounted(async () => { + + \ No newline at end of file diff --git a/montier/src/pages/Service.vue b/montier/src/pages/Service.vue index 339c69f..ddbd0d2 100644 --- a/montier/src/pages/Service.vue +++ b/montier/src/pages/Service.vue @@ -4,9 +4,8 @@ class="service-img" v-if="selectIndex == 1">
      -
      - information +
      + information

      {{ item.title }}

      @@ -14,15 +13,20 @@ - +
      information
      -
      2023-08-17
      -

      {{ item.title }}

      +

      2023-08-17

      +

      {{ item.title }}

      +

      + 新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详 + 情新闻详情新闻详情新闻详情新闻详情,新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情新闻详情 +

      @@ -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; } } -} \ No newline at end of file +} + \ No newline at end of file diff --git a/montier/src/pages/contactUs.vue b/montier/src/pages/contactUs.vue index 4bfe46f..b1e2bfb 100644 --- a/montier/src/pages/contactUs.vue +++ b/montier/src/pages/contactUs.vue @@ -1,7 +1,7 @@ \ No newline at end of file diff --git a/montier/src/router/index.ts b/montier/src/router/index.ts index fb1bd9a..742748b 100644 --- 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 \ No newline at end of file diff --git a/montier/tsconfig.json b/montier/tsconfig.json index f82888f..f4b1232 100644 --- 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"], diff --git a/montier/vite.config.ts b/montier/vite.config.ts index e6c6e63..f5d5797 100644 --- 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: {