default
/
website
關註 5
收藏 0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Activity
瀏覽代碼

首页、解决问题、新闻资讯、关于

wangfei 6 年之前
父節點
30ded73782
當前提交
73af197ea6
共有 31 個文件被更改，包括 514 次插入 和 58 次删除
分割檢視 顯示文件統計
  1. 1
    1
      index.html
  2. 1
    0
      src/App.vue
  3. 二進制
      src/assets/image/aboutUs/logo1.png
  4. 二進制
      src/assets/image/aboutUs/logo2.png
  5. 二進制
      src/assets/image/aboutUs/logo3.png
  6. 二進制
      src/assets/image/aboutUs/logo4.png
  7. 二進制
      src/assets/image/bg.png
  8. 二進制
      src/assets/image/news/Bbanner.jpg
  9. 二進制
      src/assets/image/news/Bitmap1.jpg
  10. 二進制
      src/assets/image/news/Bitmap2.jpg
  11. 二進制
      src/assets/image/news/Bitmap3.jpg
  12. 二進制
      src/assets/image/news/Bitmap4.jpg
  13. 二進制
      src/assets/image/wisdom/group01.png
  14. 二進制
      src/assets/image/wisdom/group02.png
  15. 二進制
      src/assets/image/wisdom/group03.png
  16. 二進制
      src/assets/image/wisdom/group04.png
  17. 二進制
      src/assets/image/wisdom/hudong.png
  18. 二進制
      src/assets/image/wisdom/pipei.png
  19. 二進制
      src/assets/image/wisdom/wisdom01.jpg
  20. 二進制
      src/assets/image/wisdom/wisdom02.jpg
  21. 二進制
      src/assets/image/wisdom/wisdom03.jpg
  22. 二進制
      src/assets/image/wisdom/wisdom04.jpg
  23. 二進制
      src/assets/image/wisdom/yinxiao.png
  24. 二進制
      src/assets/image/wisdom/zhuapai.png
  25. 1
    1
      src/components/commonComponents/footerNav.vue
  26. 20
    3
      src/components/commonComponents/headerTab.vue
  27. 126
    7
      src/components/pages/aboutUs/aboutUs.vue
  28. 114
    22
      src/components/pages/index.vue
  29. 114
    14
      src/components/pages/newsInformation/newsInformation.vue
  30. 135
    8
      src/components/pages/solution/solution.vue
  31. 2
    2
      src/main.js

+ 1
- 1
index.html 查看文件 

@@ -4,7 +4,7 @@
4 4 
 <head>
5 5 
   <meta charset="utf-8">
6 6 
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 
-  <title>n</title>
7 
+  <title>website</title>
8 8 
 </head>
9 9
10 10 
 <body>

+ 1
- 0
src/App.vue 查看文件 

@@ -20,5 +20,6 @@ export default {
20 20 
 }
21 21 
 html,body,#app{
22 22 
  height: 100%;
23 
+
23 24 
 }
24 25 
 </style>

二進制
src/assets/image/aboutUs/logo1.png 查看文件


二進制
src/assets/image/aboutUs/logo2.png 查看文件


二進制
src/assets/image/aboutUs/logo3.png 查看文件


二進制
src/assets/image/aboutUs/logo4.png 查看文件


二進制
src/assets/image/bg.png 查看文件


二進制
src/assets/image/news/Bbanner.jpg 查看文件


二進制
src/assets/image/news/Bitmap1.jpg 查看文件


二進制
src/assets/image/news/Bitmap2.jpg 查看文件


二進制
src/assets/image/news/Bitmap3.jpg 查看文件


二進制
src/assets/image/news/Bitmap4.jpg 查看文件


二進制
src/assets/image/wisdom/group01.png 查看文件


二進制
src/assets/image/wisdom/group02.png 查看文件


二進制
src/assets/image/wisdom/group03.png 查看文件


二進制
src/assets/image/wisdom/group04.png 查看文件


二進制
src/assets/image/wisdom/hudong.png 查看文件


二進制
src/assets/image/wisdom/pipei.png 查看文件


二進制
src/assets/image/wisdom/wisdom01.jpg 查看文件


二進制
src/assets/image/wisdom/wisdom02.jpg 查看文件


二進制
src/assets/image/wisdom/wisdom03.jpg 查看文件


二進制
src/assets/image/wisdom/wisdom04.jpg 查看文件


二進制
src/assets/image/wisdom/yinxiao.png 查看文件


二進制
src/assets/image/wisdom/zhuapai.png 查看文件


+ 1
- 1
src/components/commonComponents/footerNav.vue 查看文件 

@@ -3,7 +3,7 @@
3 3 
     <div class="footer-con">
4 4 
       <p>友情链接：中华人民共和国公安部 ｜ 公安交警网 ｜ 中国人民保险 ｜ 中国平安 ｜ 阿里云 </p>
5 5 
       <p>电话咨询: 025-57018336 周一到周日 9:00-18:00 ｜ 公司地址：南京市建邺区云锦路万达东坊630 ｜ 小鹿检测公众号 ｜ 小鹿检测小程序 </p>
6 
-      <p> 2018 南京米鹿信息科技有限公司 苏ICP备17027893号-1</p>
6 
+      <p> ©2018 南京米鹿信息科技有限公司 苏ICP备17027893号-1</p>
7 7
8 8 
     </div>
9 9

+ 20
- 3
src/components/commonComponents/headerTab.vue 查看文件 

@@ -1,5 +1,5 @@
1 1 
 <template>
2 
-  <div class="header-tab">
2 
+  <div class="header-tab"  :class="searchBarFixed == true ? 'up' :''">
3 3 
     <el-row>
4 4 
        <el-col :span="12"><img class="header-img" src="../../assets/image/home/logo/logo.png" alt=""></el-col>
5 5 
   <el-col :span="12"><el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
 
@@ -19,10 +19,23 @@
19 19 
 export default {
20 20 
   data() {
21 21 
     return {
22 
-      activeIndex: "1"
22 
+      activeIndex: "1",
23 
+      searchBarFixed:false,
23 24 
     };
24 25 
   },
26 
+  mounted () {
27 
+  window.addEventListener('scroll', this.handleScroll)
28 
+},
25 29 
   methods: {
30 
+    handleScroll () {
31 
+  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
32 
+
33 
+  if (scrollTop > 200) {
34 
+    this.searchBarFixed = true
35 
+  } else {
36 
+    this.searchBarFixed = false
37 
+  }
38 
+},
26 39 
     handleSelect(key, keyPath) {
27 40 
       if (key === "2") {
28 41 
         this.activeIndex = "2";
 
@@ -64,10 +77,14 @@ export default {
64 77 
   position: fixed;
65 78 
   width: 100%;
66 79 
   top: 0;
67 
-  margin: 20px 0;
80 
+  padding: 20px 0;
68 81 
   background-color: transparent;
69 82 
   z-index: 2;
70 83 
 }
84 
+.up{
85 
+   background-color: #0F1C38;
86 
+   transition: all 2s;
87 
+}
71 88 
 .header-tab .header-img{
72 89 
   width: 248px;
73 90 
   height: 35px;

+ 126
- 7
src/components/pages/aboutUs/aboutUs.vue 查看文件 

@@ -1,13 +1,42 @@
1 1 
 <template>
2 2 
   <div class="about-us">
3 3 
       <headerTab></headerTab>
4 
-
5 
- <div>
6 
-
7 
-   关于我们
8 
-
4 
+       <div class="title">
5 
+        <p class="tit">定制专属专业平台运营服务</p>
6 
+        <p class="desc">Customized exclusive professional platform operation servic</p>
7 
+        <span></span>
8 
+      </div>
9 
+      <div class="about-main">
10 
+        <div class="main-left">
11 
+          <div class="logo">
12 
+          <img class="logo1" src="../../../assets/image/aboutUs/logo1.png" alt="">
13 
+          </div>
14 
+          <div class="logo">
15 
+          <img class="logo2" src="../../../assets/image/aboutUs/logo2.png" alt="">
16 
+          </div>
17 
+          <div class="logo">
18 
+          <img class="logo3" src="../../../assets/image/aboutUs/logo3.png" alt="">
19 
+          </div>
20 
+          <div class="logo">
21 
+          <img class="logo4" src="../../../assets/image/aboutUs/logo4.png" alt="">
22 
+          </div>
23 
+        </div>
24 
+        <div class="main-right">
25 
+          <p class="main-tit">关于我们</p>
26 
+          <div class="con">
27 
+            <p>南京荟房网络科技有限公司是领先的智慧社区系统集成和解决方案提供商。</p>
28 
+            <p>我们作为银城地产集团股份有限公司旗下的唯一互联网科技公司，自成立以来一直致力于智慧社区系统的集成及开发平台的搭建。基于客户需求持续创新，凭借自身强大的互联网和物联网技术，整合智能硬件接口，积极探索万物智联时代下的智慧生活服务运营生态系统。借助大数据分析处理和自动化调度管理，为社区数据信息化、小区治安智能化、环境治理精细化、生活底单高效化等社区管理需求提供实时、定制化的解决方案。</p>
29 
+            <p>为了更好地顺应市场发展，以及提供高质量的互联网+服务，荟房网络科技重视自主创新不断加大研发投入，从软件定制逐步迈向产品化、平台化及开放运营的发展方向。现已自主研发出一系列创新型互联网+应用，并取得十多项专利及著作权。</p>
30 
+            <p>融合创新，助力成长。荟房网络科技将矢志利用创新的互联网技术推动智慧社区的发展与变革，提升企业的核心竞争力，维护人类的长远发展和安全。</p>
31 
+          </div>
32 
+              <p class="main-tit">联系我们</p>
33 
+              <p class="info">hurongkai@ycdc.com</p>
34 
+              <p class="info">+86-13776686399</p>
35 
+              <p class="info">江苏南京宁双路28号汇智大厦A区6楼</p>
36 
+        </div>
9 37
10 
-    </div>
38 
+      </div>
39 
+
11 40 
     <footerNav></footerNav>
12 41
13 42 
   </div>
 
@@ -27,5 +56,95 @@ export default {
27 56 
 </script>
28 57
29 58 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
30 
-<style scoped>
59 
+<style lang="less" scoped>
60 
+.about-us {
61 
+  .title {
62 
+    background: url("../../../assets/image/news/Bbanner.jpg") no-repeat center;
63 
+    width: 100%;
64 
+    height: 700px;
65 
+    background-size: 100% 100%;
66 
+    opacity: 1 !important;
67 
+    color: #fff;
68 
+    .tit {
69 
+      font-size: 64px;
70 
+      padding-top: 240px;
71 
+      font-weight: 100;
72 
+    }
73 
+    .desc {
74 
+      font-size: 12px;
75 
+      letter-spacing: 4px;
76 
+      line-height: 60px;
77 
+    }
78 
+    span {
79 
+      display: inline-block;
80 
+      width: 78px;
81 
+      height: 11px;
82 
+      background-color: #4e84ff;
83 
+      margin-top: 20px;
84 
+    }
85 
+  }
86 
+  .about-main {
87 
+    padding: 40px 300px 100px 300px;
88 
+    min-height: 600px;
89 
+    position: relative;
90 
+    .main-left {
91 
+      position: absolute;
92 
+      left: 400px;
93 
+      .logo {
94 
+        width: 303px;
95 
+        height: 110px;
96 
+        box-shadow: 0px 1px 3px 0 #4165f2;
97 
+        margin-bottom: 20px;
98 
+        border-radius: 4px;
99 
+        .logo1 {
100 
+          width: 240px;
101 
+          height: 110px;
102 
+        }
103 
+        .logo2 {
104 
+          width: 225px;
105 
+          height: 38px;
106 
+          margin: 36px 0;
107 
+        }
108 
+        .logo3 {
109 
+          width: 200px;
110 
+          height: 46px;
111 
+          margin: 32px 0;
112 
+        }
113 
+        .logo4 {
114 
+          width: 240px;
115 
+          height: 110px;
116 
+        }
117 
+      }
118 
+    }
119 
+    .main-right {
120 
+      width: 630px;
121 
+      text-align: left;
122 
+      position: absolute;
123 
+      left: 840px;
124 
+      .main-tit {
125 
+        background: repeating-linear-gradient(transparent, #4e84ff 100%);
126 
+        height: 30px;
127 
+        line-height: 30px;
128 
+        font-size: 28px;
129 
+        width: 116px;
130 
+        color: #000;
131 
+        margin-bottom: 20px;
132 
+      }
133 
+      .con {
134 
+        font-size: 14px;
135 
+        color: #808080;
136 
+        padding-bottom: 10px;
137 
+        p {
138 
+          margin: 14px 0;
139 
+          line-height: 21px;
140 
+        }
141 
+      }
142 
+      .info{
143 
+        margin-bottom:14px;
144 
+        font-size: 16px;
145 
+        color: #666;
146 
+      }
147 
+    }
148 
+  }
149 
+}
31 150 
 </style>

+ 114
- 22
src/components/pages/index.vue 查看文件 

@@ -5,12 +5,24 @@
5 5 
   <div class="fullpage-wp" v-fullpage="opts">
6 6 
     <div class="page-1 page">
7 7 
       <div class="part-1" v-animate="{value: 'bounceInLeft'}">
8 
-        <!-- <p class="">荟房智慧管家</p> -->
8 
+        <p class="part1-tit">荟房智慧管家</p>
9 
+        <span>智慧案场</span>
10 
+        <span>迎宾系统</span>
11 
+        <span>智慧社区</span>
12 
+        <p class="part1-desc">您最贴心的地产智慧管家</p>
13 
+        <p class="part1-tip">银城旗下品牌</p>
9 14
10 15 
       </div>
11 16 
     </div>
12 17 
     <div class="page-2 page">
13 
-      <p class="part-2" v-animate="{value: 'bounceInRight'}">vue-fullpage</p>
18 
+          <div class="part-1" v-animate="{value: 'bounceInRight'}">
19 
+        <p class="part1-tit">荟房智慧管家</p>
20 
+        <span>智慧案场</span>
21 
+        <span>迎宾系统</span>
22 
+        <span>智慧社区</span>
23 
+        <p class="part1-desc">您最贴心的地产智慧管家</p>
24 
+        <p class="part1-tip">银城旗下品牌</p>
25 
+      </div>
14 26 
     </div>
15 27 
     <div class="page-3 page">
16 28 
       <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">vue-fullpage</p>
 
@@ -19,7 +31,7 @@
19 31 
     </div>
20 32 
   </div>
21 33 
 </div>
22 
-    <footerNav></footerNav>
34 
+    <!-- <footerNav></footerNav> -->
23 35
24 36 
   </div>
25 37 
 </template>
 
@@ -51,28 +63,108 @@ export default {
51 63 
 </script>
52 64
53 65 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
54 
-<style scoped>
55 
-.hello {
56 
-  width: 100%;
57 
-  height: 100%;
58 
-}
59 
-.hello .page-1 {
60 
-  background: url("../../assets/image/home/background/Group2.jpg") no-repeat
61 
-    center;
62 
-  width: 100%;
63 
-  height: 100%;
64 
-  background-size: 100% 100%;
66 
+<style lang="less">
67 
+html{
68 
+  overflow:auto;
65 69 
 }
66 
-.page-container {
67 
-  position: absolute;
68 
-  left: 0;
69 
-  top: 0;
70 
+.hello {
70 71 
   width: 100%;
71 72 
   height: 100%;
72 
-}
73 
-.page-container .page {
74 
-  height: 100%;
75 
-  width: 100%;
73 
+  .page-container {
74 
+    position: absolute;
75 
+    left: 0;
76 
+    top: 0;
77 
+    width: 100%;
78 
+    height: 100%;
79 
+    .page {
80 
+      height: 100%;
81 
+      width: 100%;
82 
+    }
83 
+  }
84 
+  .page-1 {
85 
+    background: url("../../assets/image/home/background/Group2.jpg") no-repeat
86 
+      center;
87 
+    width: 100%;
88 
+    height: 100%;
89 
+    background-size: 100% 100%;
90 
+    .part-1 {
91 
+
92 
+      color: #fff;
93 
+      position: relative;
94 
+      top: 50%;
95 
+      margin-top: -140px;
96 
+      // transform: translateX(605px);
97 
+      .part1-tit{
98 
+        width: 480px;
99 
+        font-size: 80px;
100 
+        border-bottom: 4px solid #3B99FC;
101 
+        margin: 0 auto;
102 
+      }
103 
+      span{
104 
+        display: inline-block;
105 
+        font-size: 34px;
106 
+        margin: 15px 30px 10px 30px ;
107 
+        letter-spacing:9px;
108 
+      }
109 
+      .part1-desc{
110 
+        font-size: 34px;
111 
+         letter-spacing:9px;
112 
+      }
113 
+      .part1-tip{
114 
+        background-color: #4E84FF;
115 
+        font-size: 24px;
116 
+        margin: 20px auto;
117 
+        width: 350px;
118 
+         letter-spacing:26px;
119 
+         height: 40px;
120 
+         line-height: 40px;
121 
+         border-radius: 4px;
122 
+         padding-left: 16px;
123 
+      }
124 
+    }
125 
+  }
126 
+  .page-2 {
127 
+    background: url("../../assets/image/home/background/Group26.jpg") no-repeat
128 
+      center;
129 
+    width: 100%;
130 
+    height: 100%;
131 
+    background-size: 100% 100%;
132 
+    .part-1 {
133 
+
134 
+      color: #fff;
135 
+      position: relative;
136 
+      top: 50%;
137 
+      margin-top: -140px;
138 
+      // transform: translateX(605px);
139 
+      .part1-tit{
140 
+        width: 480px;
141 
+        font-size: 80px;
142 
+        border-bottom: 4px solid #3B99FC;
143 
+        margin: 0 auto;
144 
+      }
145 
+      span{
146 
+        display: inline-block;
147 
+        font-size: 34px;
148 
+        margin: 15px 30px 10px 30px ;
149 
+        letter-spacing:9px;
150 
+      }
151 
+      .part1-desc{
152 
+        font-size: 34px;
153 
+         letter-spacing:9px;
154 
+      }
155 
+      .part1-tip{
156 
+        background-color: #4E84FF;
157 
+        font-size: 24px;
158 
+        margin: 20px auto;
159 
+        width: 350px;
160 
+         letter-spacing:26px;
161 
+         height: 40px;
162 
+         line-height: 40px;
163 
+         border-radius: 4px;
164 
+         padding-left: 16px;
165 
+      }
166 
+    }
167 
+  }
76 168 
 }
77 169 
 </style>
78 170

+ 114
- 14
src/components/pages/newsInformation/newsInformation.vue 查看文件 

@@ -1,12 +1,42 @@
1 1 
 <template>
2 2 
   <div class="news-information">
3 3 
       <headerTab></headerTab>
4 
-  <div>
5 
-
6 
-    新闻资讯
7 
-
8 
-
9 
-    </div>
4 
+      <div class="title">
5 
+        <p class="tit">新闻资讯</p>
6 
+        <p class="desc">News and information</p>
7 
+        <span></span>
8 
+      </div>
9 
+      <ul class="news-list">
10 
+        <li class="list">
11 
+          <img src="../../../assets/image/news/Bitmap1.jpg" alt="">
12 
+          <div class="list-right">
13 
+          <p class="list-tit">荟房网络将在浦口高新区建立分部全面支持悦见山智慧案场</p>
14 
+          <p class="list-desc">悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持,</p>
15 
+          </div>
16 
+        </li>
17 
+        <li class="list">
18 
+          <img src="../../../assets/image/news/Bitmap2.jpg" alt="">
19 
+          <div class="list-right">
20 
+          <p class="list-tit">荟房网络将在浦口高新区建立分部全面支持悦见山智慧案场</p>
21 
+          <p class="list-desc">悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持,</p>
22 
+          </div>
23 
+        </li>
24 
+        <li class="list">
25 
+          <img src="../../../assets/image/news/Bitmap3.jpg" alt="">
26 
+          <div class="list-right">
27 
+          <p class="list-tit">荟房网络将在浦口高新区建立分部全面支持悦见山智慧案场</p>
28 
+          <p class="list-desc">悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持,</p>
29 
+          </div>
30 
+        </li>
31 
+        <li class="list">
32 
+          <img src="../../../assets/image/news/Bitmap4.jpg" alt="">
33 
+          <div class="list-right">
34 
+          <p class="list-tit">荟房网络将在浦口高新区建立分部全面支持悦见山智慧案场</p>
35 
+          <p class="list-desc">悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持,</p>
36 
+          </div>
37 
+        </li>
38 
+      </ul>
39 
+
10 40 
     <footerNav></footerNav>
11 41
12 42 
   </div>
 
@@ -18,16 +48,86 @@ import footerNav from "@/components/commonComponents/footerNav";
18 48
19 49 
 export default {
20 50 
   components: { headerTab, footerNav },
21 
-
22 
-  data () {
23 
-    return {
24 
-
25 
-    }
51 
+
52 
+  data() {
53 
+    return {};
26 54 
   }
27 
-}
55 
+};
28 56 
 </script>
29 57
30 58 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
31 
-<style scoped>
32 
-
59 
+<style lang="less">
60 
+.news-information {
61 
+  .title {
62 
+    background: url("../../../assets/image/news/Bbanner.jpg") no-repeat center;
63 
+    width: 100%;
64 
+    height: 700px;
65 
+    background-size: 100% 100%;
66 
+    opacity: 1 !important;
67 
+    color: #fff;
68 
+    .tit {
69 
+      font-size: 64px;
70 
+      padding-top: 240px;
71 
+      font-weight: 100;
72 
+    }
73 
+    .desc {
74 
+      font-size: 12px;
75 
+      letter-spacing: 4px;
76 
+      line-height: 60px;
77 
+    }
78 
+    span {
79 
+      display: inline-block;
80 
+      width: 78px;
81 
+      height: 11px;
82 
+      background-color: #4e84ff;
83 
+      margin-top: 20px;
84 
+    }
85 
+  }
86 
+  .news-list {
87 
+    padding: 40px 300px 100px 300px;
88 
+    list-style: none;
89 
+    .list {
90 
+      position: relative;
91 
+      padding: 0;
92 
+      height: 180px;
93 
+      text-align: left;
94 
+      margin: 5px 0;
95 
+      img {
96 
+        position: absolute;
97 
+        width: 300px;
98 
+        height: 168px;
99 
+        left: 0;
100 
+      }
101 
+      .list-right {
102 
+        position: absolute;
103 
+        left: 320px;
104 
+        border-bottom: 1px solid #e5e5e5;
105 
+        height: 177px;
106 
+        .list-tit {
107 
+          font-size: 20px;
108 
+          color: #000;
109 
+          margin-top: 40px;
110 
+          line-height: 40px;
111 
+          font-weight: 600;
112 
+              overflow: hidden;
113 
+          text-overflow: ellipsis;
114 
+          display: -webkit-box;
115 
+          -webkit-line-clamp: 1;
116 
+          -webkit-box-orient: vertical;
117 
+        }
118 
+        .list-desc {
119 
+          font-size: 14px;
120 
+          color: #808080;
121 
+          padding-right: 30px;
122 
+          line-height: 22px;
123 
+          overflow: hidden;
124 
+          text-overflow: ellipsis;
125 
+          display: -webkit-box;
126 
+          -webkit-line-clamp: 4;
127 
+          -webkit-box-orient: vertical;
128 
+        }
129 
+      }
130 
+    }
131 
+  }
132 
+}
33 133 
 </style>

+ 135
- 8
src/components/pages/solution/solution.vue 查看文件 

@@ -1,13 +1,38 @@
1 1 
 <template>
2 2 
   <div class="solution">
3 3 
       <headerTab></headerTab>
4 
+        <div class="title">
5 
+        <p class="tit">智慧案场</p>
6 
+        <p class="label">精准营销、人脸抓取、智能判客</p>
7 
+        <p class="desc">Intelligent face risk control system</p>
8 
+      </div>
9 
+      <div class="solution-main">
4 10
5 
-   <div>
6 
-
7 
-  解决方案
8 
-
9 
-
10 
-    </div>
11 
+
12 
+      <el-tabs class="tab-bar" v-model="activeName" @tab-click="handleClick">
13 
+        <el-tab-pane name="first">
14 
+            <span slot="label"> <img src="../../../assets/image/program/building.png" alt="">智慧案场</span>
15 
+           <div class="main-box">
16 
+             <p class="con-tit">痛点描述</p>
17 
+             <span class="con-desc">Existing problem</span>
18 
+             <div class="img-box">
19 
+               <div class="img-con"><img src="../../../assets/image/wisdom/wisdom01.jpg" alt="">营销费用高效果差</div>
20 
+               <div class="img-con"><img src="../../../assets/image/wisdom/wisdom02.jpg" alt="">营销手段传统、数据反馈慢</div>
21 
+               <div class="img-con"><img src="../../../assets/image/wisdom/wisdom03.jpg" alt="">渠道商载客、大量飞单</div>
22 
+               <div class="img-con"><img src="../../../assets/image/wisdom/wisdom04.jpg" alt="">客户归属、划分不清</div>
23 
+             </div>
24 
+           </div>
25 
+        </el-tab-pane>
26 
+        <el-tab-pane  name="second">
27 
+            <span slot="label"><img src="../../../assets/image/program/house.png" alt="">智慧社区</span>
28 
+            智慧社区
29 
+        </el-tab-pane>
30 
+        <el-tab-pane name="third">
31 
+            <span slot="label" ><img src="../../../assets/image/program/orderImg.png" alt="">产品定制</span>
32 
+            产品定制
33 
+        </el-tab-pane>
34 
+      </el-tabs>
35 
+  </div>
11 36 
     <footerNav></footerNav>
12 37
13 38 
   </div>
 
@@ -21,11 +46,113 @@ export default {
21 46 
   components: { headerTab, footerNav },
22 47
23 48 
   data() {
24 
-    return {};
49 
+    return {
50 
+      activeName: "first"
51 
+    };
52 
+  },
53 
+  methods: {
54 
+    handleClick(tab, event) {
55 
+      console.log(tab, event);
56 
+    }
25 57 
   }
26 58 
 };
27 59 
 </script>
28 60
29 61 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
30 
-<style scoped>
62 
+<style lang="less" >
63 
+.solution {
64 
+  .title {
65 
+    background: url("../../../assets/image/program/bannerbg.jpg") no-repeat
66 
+      center;
67 
+    width: 100%;
68 
+    height: 760px;
69 
+    background-size: 100% 100%;
70 
+    opacity: 1 !important;
71 
+    color: #fff;
72 
+    .tit {
73 
+      font-size: 64px;
74 
+      padding-top: 240px;
75 
+      font-weight: 100;
76 
+    }
77 
+    .label {
78 
+      font-size: 40px;
79 
+      line-height: 90px;
80 
+    }
81 
+    .desc {
82 
+      font-size: 12px;
83 
+      letter-spacing: 4px;
84 
+      line-height: 40px;
85 
+    }
86 
+  }
87 
+  .solution-main {
88 
+    background: url("../../../assets/image/bg.png") no-repeat center;
89 
+    background-size: 100% 6000px;
90 
+    height: -webkit-fill-available;
91 
+    width: 100%;
92 
+    .tab-bar {
93 
+      height: 100px;
94 
+      margin: 0 auto;
95 
+      background-color: #fff;
96 
+      border-radius: 10px;
97 
+      box-shadow: 0px 1px 4px 0px #4165f2;
98 
+      margin-top: -55px;
99 
+      .el-tabs__header {
100 
+        height: 100px;
101 
+        .el-tabs__active-bar {
102 
+          top: 0;
103 
+          height: 10px;
104 
+          background-color: #4e84ff;
105 
+          width: 20px;
106 
+        }
107 
+        .el-tabs__item.is-active {
108 
+          color: #4e84ff;
109 
+        }
110 
+        .el-tabs__item {
111 
+          height: 100px;
112 
+          width: 230px;
113 
+          img {
114 
+            display: block;
115 
+            width: 22px;
116 
+            height: 22px;
117 
+            margin: 30px auto 0 auto;
118 
+          }
119 
+        }
120 
+      }
121 
+      .main-box {
122 
+        width: 100%;
123 
+        .con-tit {
124 
+          background: repeating-linear-gradient(transparent, #4e84ff 100%);
125 
+          width: 120px;
126 
+          margin: 0 auto;
127 
+          font-size: 30px;
128 
+          color: #000;
129 
+          margin-top: 80px;
130 
+        }
131 
+        .con-desc {
132 
+          font-size: 13px;
133 
+          letter-spacing: 4px;
134 
+          line-height: 40px;
135 
+          color: #4e84ff;
136 
+        }
137 
+        .img-box{
138 
+
139 
+          margin:  0 auto;
140 
+          .img-con{
141 
+            width: 288px;
142 
+            height: 250px;
143 
+            border-radius: 6px;
144 
+            background-color: #999;
145 
+            display: inline-block;
146 
+            img{
147 
+              display: block;
148 
+              width: 100%;
149 
+
150 
+
151 
+            }
152 
+          }
153 
+        }
154 
+      }
155 
+    }
156 
+  }
157 
+}
31 158 
 </style>

+ 2
- 2
src/main.js 查看文件 

@@ -7,9 +7,7 @@ import router from './router'
7 7 
 Vue.config.productionTip = false
8 8
9 9 
 import 'animate.css'
10 
-
11 10 
 import 'vue-fullpage/vue-fullpage.css'
12 
-
13 11 
 import VueFullpage from 'vue-fullpage'
14 12 
 Vue.use(VueFullpage)
15 13 
 
@@ -25,6 +23,8 @@ Vue.use(ElementUI)
25 23 
 // })
26 24
27 25 
 /* eslint-disable no-new */
26 
+
27 
+
28 28 
 new Vue({
29 29
30 30