xiaohei
1 year ago
24 changed files with 1443 additions and 314 deletions
Unified View
Diff Options
-
+15 -11montier/index.html
-
+47 -27montier/src/App.vue
-
+6 -0montier/src/assets/css/index.css
-
+539 -0montier/src/assets/iconfont/demo.css
-
+326 -0montier/src/assets/iconfont/demo_index.html
-
+39 -0montier/src/assets/iconfont/iconfont.css
-
+1 -0montier/src/assets/iconfont/iconfont.js
-
+51 -0montier/src/assets/iconfont/iconfont.json
-
BINmontier/src/assets/iconfont/iconfont.ttf
-
BINmontier/src/assets/iconfont/iconfont.woff
-
BINmontier/src/assets/iconfont/iconfont.woff2
-
+65 -209montier/src/components/FooterPage.vue
-
+14 -9montier/src/components/HeaderPage.vue
-
+2 -0montier/src/main.ts
-
+4 -3montier/src/pages/HomePage.vue
-
+36 -0montier/src/pages/NewsMessage.vue
-
+1 -1montier/src/pages/Procurement.vue
-
+85 -0montier/src/pages/ProductCenter.vue
-
+47 -11montier/src/pages/Service.vue
-
+75 -15montier/src/pages/contactUs.vue
-
+32 -15montier/src/pages/projectCases.vue
-
+55 -11montier/src/router/index.ts
-
+2 -2montier/tsconfig.json
-
+1 -0montier/vite.config.ts
+ 15
- 11
montier/index.html
View File
| @ -1,13 +1,17 @@ | |||||
| <!doctype html> | <!doctype html> | ||||
| <html lang="en"> | <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> | |||||
+ 47
- 27
montier/src/App.vue
View File
| @ -1,35 +1,55 @@ | |||||
| <script setup lang="ts"> | <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> | </script> | ||||
| <template> | <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> | </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> | </style> | ||||
+ 6
- 0
montier/src/assets/css/index.css
View File
+ 539
- 0
montier/src/assets/iconfont/demo.css
View File
| @ -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; | |||||
| } | |||||
+ 326
- 0
montier/src/assets/iconfont/demo_index.html
View File
| @ -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"></span> | |||||
| <div class="name">我的产品</div> | |||||
| <div class="code-name">&#xe633;</div> | |||||
| </li> | |||||
| <li class="dib"> | |||||
| <span class="icon iconfont"></span> | |||||
| <div class="name">首页</div> | |||||
| <div class="code-name">&#xe64f;</div> | |||||
| </li> | |||||
| <li class="dib"> | |||||
| <span class="icon iconfont"></span> | |||||
| <div class="name">24gl-newspaper</div> | |||||
| <div class="code-name">&#xe8ae;</div> | |||||
| </li> | |||||
| <li class="dib"> | |||||
| <span class="icon iconfont"></span> | |||||
| <div class="name">联系我们</div> | |||||
| <div class="code-name">&#xe612;</div> | |||||
| </li> | |||||
| <li class="dib"> | |||||
| <span class="icon iconfont"></span> | |||||
| <div class="name">工程</div> | |||||
| <div class="code-name">&#xe6a4;</div> | |||||
| </li> | |||||
| <li class="dib"> | |||||
| <span class="icon iconfont"></span> | |||||
| <div class="name">专属服务</div> | |||||
| <div class="code-name">&#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" | |||||
| ><span class="iconfont">&#x33;</span> | |||||
| </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"><link rel="stylesheet" href="./iconfont.css"> | |||||
| </code></pre> | |||||
| <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> | |||||
| <pre><code class="language-html"><span class="iconfont icon-xxx"></span> | |||||
| </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"><script src="./iconfont.js"></script> | |||||
| </code></pre> | |||||
| <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> | |||||
| <pre><code class="language-html"><style> | |||||
| .icon { | |||||
| width: 1em; | |||||
| height: 1em; | |||||
| vertical-align: -0.15em; | |||||
| fill: currentColor; | |||||
| overflow: hidden; | |||||
| } | |||||
| </style> | |||||
| </code></pre> | |||||
| <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> | |||||
| <pre><code class="language-html"><svg class="icon" aria-hidden="true"> | |||||
| <use xlink:href="#icon-xxx"></use> | |||||
| </svg> | |||||
| </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> | |||||
+ 39
- 0
montier/src/assets/iconfont/iconfont.css
View File
| @ -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"; | |||||
| } | |||||
+ 1
- 0
montier/src/assets/iconfont/iconfont.js
File diff suppressed because it is too large
View File
+ 51
- 0
montier/src/assets/iconfont/iconfont.json
View File
| @ -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 | |||||
| } | |||||
| ] | |||||
| } | |||||
BIN
montier/src/assets/iconfont/iconfont.ttf
View File
BIN
montier/src/assets/iconfont/iconfont.woff
View File
BIN
montier/src/assets/iconfont/iconfont.woff2
View File
+ 65
- 209
montier/src/components/FooterPage.vue
View File
+ 14
- 9
montier/src/components/HeaderPage.vue
View File
+ 2
- 0
montier/src/main.ts
View File
+ 4
- 3
montier/src/pages/HomePage.vue
View File
+ 36
- 0
montier/src/pages/NewsMessage.vue
View File
| @ -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> | |||||
+ 1
- 1
montier/src/pages/Procurement.vue
View File
+ 85
- 0
montier/src/pages/ProductCenter.vue
View File
| @ -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> | |||||