default
/
website
Watch 5
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Activity
Browse Source

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

wangfei 6 years ago
parent
30ded73782
commit
73af197ea6
31 changed files with 514 additions and 58 deletions
Unified View Show Diff Stats
  1. 1
    1
      index.html
  2. 1
    0
      src/App.vue
  3. BIN
      src/assets/image/aboutUs/logo1.png
  4. BIN
      src/assets/image/aboutUs/logo2.png
  5. BIN
      src/assets/image/aboutUs/logo3.png
  6. BIN
      src/assets/image/aboutUs/logo4.png
  7. BIN
      src/assets/image/bg.png
  8. BIN
      src/assets/image/news/Bbanner.jpg
  9. BIN
      src/assets/image/news/Bitmap1.jpg
  10. BIN
      src/assets/image/news/Bitmap2.jpg
  11. BIN
      src/assets/image/news/Bitmap3.jpg
  12. BIN
      src/assets/image/news/Bitmap4.jpg
  13. BIN
      src/assets/image/wisdom/group01.png
  14. BIN
      src/assets/image/wisdom/group02.png
  15. BIN
      src/assets/image/wisdom/group03.png
  16. BIN
      src/assets/image/wisdom/group04.png
  17. BIN
      src/assets/image/wisdom/hudong.png
  18. BIN
      src/assets/image/wisdom/pipei.png
  19. BIN
      src/assets/image/wisdom/wisdom01.jpg
  20. BIN
      src/assets/image/wisdom/wisdom02.jpg
  21. BIN
      src/assets/image/wisdom/wisdom03.jpg
  22. BIN
      src/assets/image/wisdom/wisdom04.jpg
  23. BIN
      src/assets/image/wisdom/yinxiao.png
  24. BIN
      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 View File

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

+ 1
- 0
src/App.vue View File

20 
 }
 20 
 }
21 
 html,body,#app{
 21 
 html,body,#app{
22 
  height: 100%;
 22 
  height: 100%;
23 
+
23 
 }
 24 
 }
24 
 </style>
 25 
 </style>

BIN
src/assets/image/aboutUs/logo1.png View File


BIN
src/assets/image/aboutUs/logo2.png View File


BIN
src/assets/image/aboutUs/logo3.png View File


BIN
src/assets/image/aboutUs/logo4.png View File


BIN
src/assets/image/bg.png View File


BIN
src/assets/image/news/Bbanner.jpg View File


BIN
src/assets/image/news/Bitmap1.jpg View File


BIN
src/assets/image/news/Bitmap2.jpg View File


BIN
src/assets/image/news/Bitmap3.jpg View File


BIN
src/assets/image/news/Bitmap4.jpg View File


BIN
src/assets/image/wisdom/group01.png View File


BIN
src/assets/image/wisdom/group02.png View File


BIN
src/assets/image/wisdom/group03.png View File


BIN
src/assets/image/wisdom/group04.png View File


BIN
src/assets/image/wisdom/hudong.png View File


BIN
src/assets/image/wisdom/pipei.png View File


BIN
src/assets/image/wisdom/wisdom01.jpg View File


BIN
src/assets/image/wisdom/wisdom02.jpg View File


BIN
src/assets/image/wisdom/wisdom03.jpg View File


BIN
src/assets/image/wisdom/wisdom04.jpg View File


BIN
src/assets/image/wisdom/yinxiao.png View File


BIN
src/assets/image/wisdom/zhuapai.png View File


+ 1
- 1
src/components/commonComponents/footerNav.vue View File

3 
     <div class="footer-con">
 3 
     <div class="footer-con">
4 
       <p>友情链接：中华人民共和国公安部 ｜ 公安交警网 ｜ 中国人民保险 ｜ 中国平安 ｜ 阿里云 </p>
 4 
       <p>友情链接：中华人民共和国公安部 ｜ 公安交警网 ｜ 中国人民保险 ｜ 中国平安 ｜ 阿里云 </p>
5 
       <p>电话咨询: 025-57018336 周一到周日 9:00-18:00 ｜ 公司地址：南京市建邺区云锦路万达东坊630 ｜ 小鹿检测公众号 ｜ 小鹿检测小程序 </p>
 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 
     </div>
 8 
     </div>
9
9

+ 20
- 3
src/components/commonComponents/headerTab.vue View File

1 
 <template>
 1 
 <template>
2 
-  <div class="header-tab">
2 
+  <div class="header-tab"  :class="searchBarFixed == true ? 'up' :''">
3 
     <el-row>
 3 
     <el-row>
4 
        <el-col :span="12"><img class="header-img" src="../../assets/image/home/logo/logo.png" alt=""></el-col>
 4 
        <el-col :span="12"><img class="header-img" src="../../assets/image/home/logo/logo.png" alt=""></el-col>
5 
   <el-col :span="12"><el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
 5 
   <el-col :span="12"><el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
19 
 export default {
 19 
 export default {
20 
   data() {
 20 
   data() {
21 
     return {
 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 
   methods: {
 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 
     handleSelect(key, keyPath) {
 39 
     handleSelect(key, keyPath) {
27 
       if (key === "2") {
 40 
       if (key === "2") {
28 
         this.activeIndex = "2";
 41 
         this.activeIndex = "2";
64 
   position: fixed;
 77 
   position: fixed;
65 
   width: 100%;
 78 
   width: 100%;
66 
   top: 0;
 79 
   top: 0;
67 
-  margin: 20px 0;
80 
+  padding: 20px 0;
68 
   background-color: transparent;
 81 
   background-color: transparent;
69 
   z-index: 2;
 82 
   z-index: 2;
70 
 }
 83 
 }
84 
+.up{
85 
+   background-color: #0F1C38;
86 
+   transition: all 2s;
87 
+}
71 
 .header-tab .header-img{
 88 
 .header-tab .header-img{
72 
   width: 248px;
 89 
   width: 248px;
73 
   height: 35px;
 90 
   height: 35px;

+ 126
- 7
src/components/pages/aboutUs/aboutUs.vue View File

1 
 <template>
 1 
 <template>
2 
   <div class="about-us">
 2 
   <div class="about-us">
3 
       <headerTab></headerTab>
 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 
     <footerNav></footerNav>
 40 
     <footerNav></footerNav>
12
41
13 
   </div>
 42 
   </div>
27 
 </script>
 56 
 </script>
28
57
29 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 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 
 </style>
 150 
 </style>

+ 114
- 22
src/components/pages/index.vue View File

5 
   <div class="fullpage-wp" v-fullpage="opts">
 5 
   <div class="fullpage-wp" v-fullpage="opts">
6 
     <div class="page-1 page">
 6 
     <div class="page-1 page">
7 
       <div class="part-1" v-animate="{value: 'bounceInLeft'}">
 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 
       </div>
 15 
       </div>
11 
     </div>
 16 
     </div>
12 
     <div class="page-2 page">
 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 
     </div>
 26 
     </div>
15 
     <div class="page-3 page">
 27 
     <div class="page-3 page">
16 
       <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">vue-fullpage</p>
 28 
       <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">vue-fullpage</p>
19 
     </div>
 31 
     </div>
20 
   </div>
 32 
   </div>
21 
 </div>
 33 
 </div>
22 
-    <footerNav></footerNav>
34 
+    <!-- <footerNav></footerNav> -->
23
35
24 
   </div>
 36 
   </div>
25 
 </template>
 37 
 </template>
51 
 </script>
 63 
 </script>
52
64
53 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 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 
   width: 100%;
 71 
   width: 100%;
71 
   height: 100%;
 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 
 </style>
 169 
 </style>
78
170

+ 114
- 14
src/components/pages/newsInformation/newsInformation.vue View File

1 
 <template>
 1 
 <template>
2 
   <div class="news-information">
 2 
   <div class="news-information">
3 
       <headerTab></headerTab>
 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 
     <footerNav></footerNav>
 40 
     <footerNav></footerNav>
11
41
12 
   </div>
 42 
   </div>
18
48
19 
 export default {
 49 
 export default {
20 
   components: { headerTab, footerNav },
 50 
   components: { headerTab, footerNav },
21 
-
22 
-  data () {
23 
-    return {
24 
-
25 
-    }
51 
+
52 
+  data() {
53 
+    return {};
26 
   }
 54 
   }
27 
-}
55 
+};
28 
 </script>
 56 
 </script>
29
57
30 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 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 
 </style>
 133 
 </style>

+ 135
- 8
src/components/pages/solution/solution.vue View File

1 
 <template>
 1 
 <template>
2 
   <div class="solution">
 2 
   <div class="solution">
3 
       <headerTab></headerTab>
 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 
     <footerNav></footerNav>
 36 
     <footerNav></footerNav>
12
37
13 
   </div>
 38 
   </div>
21 
   components: { headerTab, footerNav },
 46 
   components: { headerTab, footerNav },
22
47
23 
   data() {
 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 
 </script>
 59 
 </script>
28
60
29 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 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 
 </style>
 158 
 </style>

+ 2
- 2
src/main.js View File

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