张延森 6 лет назад
Родитель
Сommit
96314d67c9
94 измененных файлов: 19333 добавлений и 439 удалений
  1. 2
    2
      index.html
  2. 17111
    0
      package-lock.json
  3. 39
    0
      src/App.vue
  4. Двоичные данные
      src/assets/image/aboutUs/logo1.png
  5. Двоичные данные
      src/assets/image/aboutUs/logo2.png
  6. Двоичные данные
      src/assets/image/aboutUs/logo3.png
  7. Двоичные данные
      src/assets/image/aboutUs/logo4.png
  8. Двоичные данные
      src/assets/image/bg.png
  9. Двоичные данные
      src/assets/image/home/background/Group27.jpg
  10. Двоичные данные
      src/assets/image/home/littleImg/second.png
  11. Двоичные данные
      src/assets/image/home/produce/Group45.png
  12. Двоичные данные
      src/assets/image/home/produce/Group46.png
  13. Двоичные данные
      src/assets/image/home/produce/Group47.png
  14. Двоичные данные
      src/assets/image/home/produce/Group48.png
  15. Двоичные данные
      src/assets/image/logoicon/Bitmap.png
  16. Двоичные данные
      src/assets/image/logoicon/Shape.png
  17. Двоичные данные
      src/assets/image/logoicon/aicustomer.png
  18. Двоичные данные
      src/assets/image/logoicon/cityLOGO.png
  19. Двоичные данные
      src/assets/image/logoicon/huijulogo.png
  20. Двоичные данные
      src/assets/image/logoicon/icon1.png
  21. Двоичные данные
      src/assets/image/logoicon/yinchenglogo.png
  22. Двоичные данные
      src/assets/image/logoicon/yuejian.png
  23. Двоичные данные
      src/assets/image/news/Bbanner.jpg
  24. Двоичные данные
      src/assets/image/news/Bitmap1.jpg
  25. Двоичные данные
      src/assets/image/news/Bitmap2.jpg
  26. Двоичные данные
      src/assets/image/news/Bitmap3.jpg
  27. Двоичные данные
      src/assets/image/news/Bitmap4.jpg
  28. Двоичные данные
      src/assets/image/program/community/G2.png
  29. Двоичные данные
      src/assets/image/program/community/出行-01.png
  30. Двоичные данные
      src/assets/image/program/community/大堂.png
  31. Двоичные данные
      src/assets/image/program/community/安防.png
  32. Двоичные данные
      src/assets/image/program/community/家居.png
  33. Двоичные данные
      src/assets/image/program/community/建设步伐.png
  34. Двоичные данные
      src/assets/image/program/community/操作系统.png
  35. Двоичные данные
      src/assets/image/program/community/用户使用.png
  36. Двоичные данные
      src/assets/image/program/community/空间.png
  37. Двоичные данные
      src/assets/image/program/community/管家.png
  38. Двоичные данные
      src/assets/image/program/community/管理.png
  39. Двоичные данные
      src/assets/image/program/community/资源 10.png
  40. Двоичные данные
      src/assets/image/program/community/资源 20.png
  41. Двоичные данные
      src/assets/image/program/community/资源 30.jpg
  42. Двоичные данные
      src/assets/image/program/community/资源 40.jpg
  43. Двоичные данные
      src/assets/image/program/community/资源 50.jpg
  44. Двоичные данные
      src/assets/image/program/community/资源 60.jpg
  45. Двоичные данные
      src/assets/image/program/community/资源 70.jpg
  46. Двоичные данные
      src/assets/image/program/community/资源-0.jpg
  47. Двоичные данные
      src/assets/image/program/community/门禁.png
  48. 0
    0
      src/assets/image/program/order/Bitmap2.jpg
  49. 0
    0
      src/assets/image/program/order/Bitmap3.jpg
  50. Двоичные данные
      src/assets/image/program/order/售后.png
  51. Двоичные данные
      src/assets/image/program/order/售后1.png
  52. Двоичные данные
      src/assets/image/program/order/团队.png
  53. Двоичные данные
      src/assets/image/program/order/团队1.png
  54. Двоичные данные
      src/assets/image/program/order/小程序.png
  55. Двоичные данные
      src/assets/image/program/order/悦见山.png
  56. Двоичные данные
      src/assets/image/program/order/时间.png
  57. Двоичные данные
      src/assets/image/program/order/时间1.png
  58. Двоичные данные
      src/assets/image/program/order/费用.png
  59. Двоичные данные
      src/assets/image/program/order/费用1.png
  60. Двоичные данные
      src/assets/image/program/order/软件.png
  61. Двоичные данные
      src/assets/image/program/order/运营 (3).png
  62. Двоичные данные
      src/assets/image/program/order/运营1.png
  63. Двоичные данные
      src/assets/image/wisdom/group01.png
  64. Двоичные данные
      src/assets/image/wisdom/group02.png
  65. Двоичные данные
      src/assets/image/wisdom/group03.png
  66. Двоичные данные
      src/assets/image/wisdom/group04.png
  67. Двоичные данные
      src/assets/image/wisdom/hudong.png
  68. Двоичные данные
      src/assets/image/wisdom/line/1.png
  69. Двоичные данные
      src/assets/image/wisdom/line/2.png
  70. Двоичные данные
      src/assets/image/wisdom/line/3.png
  71. Двоичные данные
      src/assets/image/wisdom/pipei.png
  72. Двоичные данные
      src/assets/image/wisdom/wisdom01.jpg
  73. Двоичные данные
      src/assets/image/wisdom/wisdom02.jpg
  74. Двоичные данные
      src/assets/image/wisdom/wisdom03.jpg
  75. Двоичные данные
      src/assets/image/wisdom/wisdom04.jpg
  76. Двоичные данные
      src/assets/image/wisdom/yinxiao.png
  77. Двоичные данные
      src/assets/image/wisdom/zhuapai.png
  78. 2
    2
      src/components/commonComponents/footerNav.vue
  79. 43
    16
      src/components/commonComponents/headerTab.vue
  80. 123
    0
      src/components/navicard/index.vue
  81. 126
    7
      src/components/pages/aboutUs/aboutUs.vue
  82. 415
    79
      src/components/pages/index.vue
  83. 114
    14
      src/components/pages/newsInformation/newsInformation.vue
  84. 31
    6
      src/components/pages/productCenter/AIwelcome.vue
  85. 32
    35
      src/components/pages/productCenter/bigscreen.vue
  86. 31
    33
      src/components/pages/productCenter/city.vue
  87. 30
    33
      src/components/pages/productCenter/community.vue
  88. 31
    34
      src/components/pages/productCenter/micro.vue
  89. 107
    7
      src/components/pages/productCenter/online.vue
  90. 120
    0
      src/components/pages/productCenter/prodNavi.vue
  91. 76
    125
      src/components/pages/productCenter/productCenter.vue
  92. 31
    34
      src/components/pages/productCenter/release.vue
  93. 864
    9
      src/components/pages/solution/solution.vue
  94. 5
    3
      src/main.js

+ 2
- 2
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>
@@ -92,7 +92,7 @@
92 92
     background: transparent;
93 93
     outline-style: none;
94 94
   }
95
-
95
+  * { touch-action: pan-y; } 
96 96
   a {
97 97
     margin: 0;
98 98
     padding: 0;

+ 17111
- 0
package-lock.json
Разница между файлами не показана из-за своего большого размера
Просмотреть файл


+ 39
- 0
src/App.vue Просмотреть файл

@@ -23,6 +23,10 @@ html,body,#app{
23 23
 }
24 24
 html,body,#app{
25 25
  height: 100%;
26
+
27
+}
28
+html{
29
+   touch-action:none;
26 30
 }
27 31
 .el-submenu__title i{
28 32
   display: none;
@@ -30,5 +34,40 @@ html,body,#app{
30 34
 .el-submenu__icon-arrow el-icon-arrow-down{
31 35
   display: none;
32 36
 }
37
+.el-carousel__mask{
38
+  background: rgba(0,0,0,0);
39
+  /* opacity: ;
40
+   */
41
+   /* background: linear-gradient() */
42
+   
43
+}
44
+.el-tabs__nav{
45
+  float: none;
46
+}
47
+.tab-bar el-tabs el-tabs--top{
48
+  width: 735px;
49
+  height: 110px;
50
+}
51
+
52
+.solution .solution-main .tab-bar {
53
+    height: 110px;
54
+    margin: 0 auto;
55
+    background-color: rgba(0,0,0,0) !important;
56
+    border-radius: 10px;
57
+    -webkit-box-shadow: 0px 0  !important;
58
+    box-shadow: 0px 0  !important;
59
+    margin-top: -55px;
60
+}
61
+.solution .solution-main .tab-bar .el-tabs__header{
62
+   z-index: 1000 ;
63
+    background-color: #fff !important;
64
+    width: 734px !important;
65
+    margin: auto !important;
66
+    border-radius: 10px !important;
67
+    box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
68
+  }
69
+  .solution .solution-main .tab-bar .el-tabs__header .el-tabs__active-bar{
70
+    width: 95px !important;
71
+  }
33 72
 
34 73
 </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/home/background/Group27.jpg Просмотреть файл


Двоичные данные
src/assets/image/home/littleImg/second.png Просмотреть файл


Двоичные данные
src/assets/image/home/produce/Group45.png Просмотреть файл


Двоичные данные
src/assets/image/home/produce/Group46.png Просмотреть файл


Двоичные данные
src/assets/image/home/produce/Group47.png Просмотреть файл


Двоичные данные
src/assets/image/home/produce/Group48.png Просмотреть файл


Двоичные данные
src/assets/image/logoicon/Bitmap.png Просмотреть файл


Двоичные данные
src/assets/image/logoicon/Shape.png Просмотреть файл


Двоичные данные
src/assets/image/logoicon/aicustomer.png Просмотреть файл


Двоичные данные
src/assets/image/logoicon/cityLOGO.png Просмотреть файл


Двоичные данные
src/assets/image/logoicon/huijulogo.png Просмотреть файл


Двоичные данные
src/assets/image/logoicon/icon1.png Просмотреть файл


Двоичные данные
src/assets/image/logoicon/yinchenglogo.png Просмотреть файл


Двоичные данные
src/assets/image/logoicon/yuejian.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/program/community/G2.png Просмотреть файл


Двоичные данные
src/assets/image/program/community/出行-01.png Просмотреть файл


Двоичные данные
src/assets/image/program/community/大堂.png Просмотреть файл


Двоичные данные
src/assets/image/program/community/安防.png Просмотреть файл


Двоичные данные
src/assets/image/program/community/家居.png Просмотреть файл


Двоичные данные
src/assets/image/program/community/建设步伐.png Просмотреть файл


Двоичные данные
src/assets/image/program/community/操作系统.png Просмотреть файл


Двоичные данные
src/assets/image/program/community/用户使用.png Просмотреть файл


Двоичные данные
src/assets/image/program/community/空间.png Просмотреть файл


Двоичные данные
src/assets/image/program/community/管家.png Просмотреть файл


Двоичные данные
src/assets/image/program/community/管理.png Просмотреть файл


Двоичные данные
src/assets/image/program/community/资源 10.png Просмотреть файл


Двоичные данные
src/assets/image/program/community/资源 20.png Просмотреть файл


Двоичные данные
src/assets/image/program/community/资源 30.jpg Просмотреть файл


Двоичные данные
src/assets/image/program/community/资源 40.jpg Просмотреть файл


Двоичные данные
src/assets/image/program/community/资源 50.jpg Просмотреть файл


Двоичные данные
src/assets/image/program/community/资源 60.jpg Просмотреть файл


Двоичные данные
src/assets/image/program/community/资源 70.jpg Просмотреть файл


Двоичные данные
src/assets/image/program/community/资源-0.jpg Просмотреть файл


Двоичные данные
src/assets/image/program/community/门禁.png Просмотреть файл


src/assets/image/program/order/Bitmap Copy 2.jpg → src/assets/image/program/order/Bitmap2.jpg Просмотреть файл


src/assets/image/program/order/Bitmap Copy 3.jpg → src/assets/image/program/order/Bitmap3.jpg Просмотреть файл


Двоичные данные
src/assets/image/program/order/售后.png Просмотреть файл


Двоичные данные
src/assets/image/program/order/售后1.png Просмотреть файл


Двоичные данные
src/assets/image/program/order/团队.png Просмотреть файл


Двоичные данные
src/assets/image/program/order/团队1.png Просмотреть файл


Двоичные данные
src/assets/image/program/order/小程序.png Просмотреть файл


Двоичные данные
src/assets/image/program/order/悦见山.png Просмотреть файл


Двоичные данные
src/assets/image/program/order/时间.png Просмотреть файл


Двоичные данные
src/assets/image/program/order/时间1.png Просмотреть файл


Двоичные данные
src/assets/image/program/order/费用.png Просмотреть файл


Двоичные данные
src/assets/image/program/order/费用1.png Просмотреть файл


Двоичные данные
src/assets/image/program/order/软件.png Просмотреть файл


Двоичные данные
src/assets/image/program/order/运营 (3).png Просмотреть файл


Двоичные данные
src/assets/image/program/order/运营1.png Просмотреть файл


Двоичные данные
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/line/1.png Просмотреть файл


Двоичные данные
src/assets/image/wisdom/line/2.png Просмотреть файл


Двоичные данные
src/assets/image/wisdom/line/3.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 Просмотреть файл


+ 2
- 2
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
 
@@ -28,7 +28,7 @@ export default {
28 28
   position: static;
29 29
   width: 100%;
30 30
   background: #0F1C38;
31
-  padding: 120px 0;
31
+  padding: 106px 0;
32 32
 
33 33
 }
34 34
 .footer .footer-con p{

+ 43
- 16
src/components/commonComponents/headerTab.vue Просмотреть файл

@@ -21,11 +21,44 @@
21 21
 export default {
22 22
   data () {
23 23
     return {
24
-      activeIndex: "1"
24
+      activeIndex: "1",
25
+      searchBarFixed: false
25 26
     };
26 27
   },
28
+  mounted() {
29
+    window.addEventListener("scroll", this.handleScroll);
30
+  },
31
+  created() {
32
+    this.changeTabBarActive();
33
+  },
27 34
   methods: {
28
-    handleSelect (key, keyPath) {
35
+    handleScroll() {
36
+      var scrollTop =
37
+        window.pageYOffset ||
38
+        document.documentElement.scrollTop ||
39
+        document.body.scrollTop;
40
+
41
+      if (scrollTop > 200) {
42
+        this.searchBarFixed = true;
43
+      } else {
44
+        this.searchBarFixed = false;
45
+      }
46
+    },
47
+    changeTabBarActive() {
48
+      this.nowPath = this.$route.path;
49
+      if (this.nowPath == "/") {
50
+        this.activeIndex = "1";
51
+      } else if (this.nowPath == "/solution") {
52
+        this.activeIndex = "2";
53
+      } else if (this.nowPath == "/online") {
54
+        this.activeIndex = "3";
55
+      } else if (this.nowPath == "/newsInformation") {
56
+        this.activeIndex = "4";
57
+      } else {
58
+        this.activeIndex = "5";
59
+      }
60
+    },
61
+    handleSelect(key, keyPath) {
29 62
       if (key === "2") {
30 63
         this.activeIndex = "2";
31 64
         this.$router.push("/solution");
@@ -43,18 +76,6 @@ export default {
43 76
         this.$router.push("/");
44 77
       }
45 78
       console.log(key, keyPath);
46
-      this.nowPath = this.$route.path;
47
-      if (this.nowPath == "/") {
48
-        this.activeIndex = "1";
49
-      } else if (this.nowPath == "/solution") {
50
-        this.activeIndex = "2";
51
-      } else if (this.nowPath == "/productCenter") {
52
-        this.activeIndex = "3";
53
-      } else if (this.nowPath == "/newsInformation") {
54
-        this.activeIndex = "4";
55
-      } else {
56
-        this.activeIndex = "5";
57
-      }
58 79
     }
59 80
   }
60 81
 };
@@ -64,9 +85,15 @@ export default {
64 85
 <style scoped>
65 86
 .header-tab {
66 87
   width: 100%;
67
-  margin: 20px 0;
88
+  position: absolute;
89
+  top: 0;
90
+  padding: 20px 0;
68 91
   background-color: transparent;
69
-  z-index: 2;
92
+  z-index: 99;
93
+}
94
+.up {
95
+  background-color: #0f1c38;
96
+  transition: all 2s;
70 97
 }
71 98
 .topNav{
72 99
   display: flex;

+ 123
- 0
src/components/navicard/index.vue Просмотреть файл

@@ -0,0 +1,123 @@
1
+<template>
2
+<div>
3
+  <div :class="{'nav-card': true, 'active': active}" @click.stop="clickCard()">
4
+    <div class="header">
5
+      <div v-if="active" class="hat">&nbsp;</div>
6
+      <div>{{title}}</div>
7
+    </div>
8
+    <div class="body">
9
+      <div v-for="(item, index) in items" :key="index" @click="clickItem(item, index)" :class="{ 'item-active': itemActive == index }">
10
+        <img v-if="active" :src="item.icon" alt="">
11
+        
12
+        <div>{{ item.text }}</div>
13
+      </div>
14
+    </div>
15
+  </div>
16
+</div>
17
+</template>
18
+
19
+
20
+<script>
21
+export default {
22
+  name: 'NaviCard',
23
+  props: [
24
+    'id',
25
+    'title',
26
+    'items',
27
+    'active'
28
+  ],
29
+  data () {
30
+    return {
31
+      itemActive: -1,
32
+    }
33
+  },
34
+  mounted() {
35
+  },
36
+  methods: {
37
+    clickCard() {
38
+      this.$emit('update:active', true)
39
+    },
40
+    clickItem(item, index) {
41
+      this.itemActive = index
42
+      this.$emit('update:active', true)
43
+      this.$emit('click', item)
44
+    }
45
+  }
46
+}
47
+</script>
48
+
49
+<style lang="less" scoped>
50
+.nav-card {
51
+  background:rgba(255,255,255,1);
52
+  box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
53
+  border-radius:10px;
54
+  padding: 12px 14px;
55
+  cursor: pointer;
56
+
57
+  &.active {
58
+    padding-top: 0;
59
+
60
+    .header {
61
+      font-size:15px;
62
+      font-weight:400;
63
+      color:rgba(0,0,0,1);
64
+      line-height:21px;
65
+
66
+      .hat {
67
+        margin: 0 auto;
68
+        width:73px;
69
+        height:13px;
70
+        background:rgba(78,132,255,1);
71
+        border-radius:0px 0px 70px 70px;
72
+      }
73
+    }
74
+
75
+    .body {
76
+      div {
77
+        text-align: center;
78
+        font-size:15px;
79
+        font-weight:400;
80
+        color:rgba(0,0,0,1);
81
+
82
+        &.item-active {
83
+          div {
84
+            color:rgba(78,132,255,1);
85
+          }
86
+        }
87
+        line-height:21px;
88
+      }
89
+    }
90
+  }
91
+
92
+
93
+  .header {
94
+    text-align: center;
95
+    font-size:12px;
96
+    color:rgba(153,153,153,1);
97
+    line-height:17px;
98
+    margin-bottom: 18px;
99
+  }
100
+
101
+  .body {
102
+    width: 100%;
103
+    display: flex;
104
+    // justify-content: space-between;
105
+    div {
106
+      flex: auto;
107
+      text-align: center;
108
+      font-size:12px;
109
+      color:rgba(153,153,153,1);
110
+      line-height:17px;
111
+      padding: 0 5px;
112
+      img {
113
+        height:20px;
114
+      }
115
+      & + div {
116
+        border-left: 1px dotted #000;
117
+        
118
+      }
119
+    }
120
+  }
121
+}
122
+</style>
123
+

+ 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 0px 5px 0 #4171f2;
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>

+ 415
- 79
src/components/pages/index.vue Просмотреть файл

@@ -1,79 +1,415 @@
1
-<template>
2
-  <div class="hello">
3
-    <headerTab></headerTab>
4
-  <div class="fullpage-container">
5
-  <div class="fullpage-wp" v-fullpage="opts">
6
-    <div class="page-1 page">
7
-      <div class="part-1" v-animate="{value: 'bounceInLeft'}">
8
-        <!-- <p class="">荟房智慧管家</p> -->
9
-
10
-      </div>
11
-    </div>
12
-    <div class="page-2 page">
13
-      <p class="part-2" v-animate="{value: 'bounceInRight'}">vue-fullpage</p>
14
-    </div>
15
-    <div class="page-3 page">
16
-      <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">vue-fullpage</p>
17
-      <p class="part-3" v-animate="{value: 'bounceInRight', delay: 600}">vue-fullpage</p>
18
-      <p class="part-3" v-animate="{value: 'zoomInDown', delay: 1200}">vue-fullpage</p>
19
-    </div>
20
-  </div>
21
-</div>
22
-    <footerNav></footerNav>
23
-
24
-  </div>
25
-</template>
26
-
27
-<script>
28
-import headerTab from "@/components/commonComponents/headerTab";
29
-import footerNav from "@/components/commonComponents/footerNav";
30
-
31
-export default {
32
-  components: { headerTab, footerNav },
33
-  data() {
34
-    return {
35
-      opts: {
36
-        start: 0,
37
-        dir: "v",
38
-        loop: false,
39
-        duration: 500,
40
-        beforeChange: function(prev, next) {
41
-          console.log("before", prev, next);
42
-        },
43
-        afterChange: function(prev, next) {
44
-          console.log("after", prev, next);
45
-        }
46
-      }
47
-    };
48
-  },
49
-  methods: {}
50
-};
51
-</script>
52
-
53
-<!-- 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%;
65
-}
66
-.page-container {
67
-  position: absolute;
68
-  left: 0;
69
-  top: 0;
70
-  width: 100%;
71
-  height: 100%;
72
-}
73
-.page-container .page {
74
-  height: 100%;
75
-  width: 100%;
76
-}
77
-
78
-</style>
79
-
1
+<template>
2
+  <div>
3
+    <div class="section" :style="{'height':offsetheight+'px'}">
4
+      <headerTab></headerTab>
5
+      <div class="container" :style="{'transform': 'translate3d(0px,-'+ fullPage*offsetheight +'px, 0px)'}">
6
+        <div class="page-1 page">
7
+          <div class="part-1" :class="page1 == true ? 'animated bounceInLeft' :''">
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>
14
+          </div>
15
+        </div>
16
+        <div class="page-2">
17
+          <p class="title">一站式解决方案</p>
18
+          <img :class="page2 == true ? 'animated flipInX' :''" src="../../assets/image/home/littleImg/second.png" alt>
19
+        </div>
20
+        <div class="page-3">
21
+          <p class="title">产品简介</p>
22
+          <div class="produce">
23
+            <div class="list first" :class="page3 == true ? 'animated bounceInLeft' :''">
24
+              <p class="list-name">AI迎宾判客系统</p>
25
+              <img src="../../assets/image/home/produce/Group45.png" alt>
26
+              <p class="list-desc">智慧人脸风控应用于案场、地铁、银行等</p>
27
+            </div>
28
+            <div class="list" :class="page3 == true ? 'animated rotateInDownRight' :''">
29
+              <p class="list-name">智慧大屏机</p>
30
+              <img src="../../assets/image/home/produce/Group46.png" alt>
31
+              <p class="list-desc">无人售楼终端机结合VR技术, 沉浸式看房体验</p>
32
+            </div>
33
+            <div class="list" :class="page3 == true ? 'animated bounceInDown' :''">
34
+              <p class="list-name">银城慧家APP</p>
35
+              <img src="../../assets/image/home/produce/Group47.png" alt>
36
+              <p class="list-desc">智慧社区管理软件,一键开启智慧社区美好生活</p>
37
+            </div>
38
+            <div class="list" :class="page3 == true ? 'animated bounceInRight' :''">
39
+              <p class="list-name">全楼盘</p>
40
+              <img src="../../assets/image/home/produce/Group48.png" alt>
41
+              <p class="list-desc">线上售楼处平台, 满足开发商和购房者共同需求</p>
42
+            </div>
43
+          </div>
44
+        </div>
45
+        <div class="page-4">
46
+          <div class="page-4-con">
47
+            <el-carousel :interval="4000" type="card" height="500px" indicator-position="none" arrow="never">
48
+              <el-carousel-item>
49
+                <p class="swiper-tittle">服务优势</p>
50
+                <div class="service">
51
+                  <p class="service-p1">定制化服务</p>
52
+                  <p class="service-p2">增值运维服务</p>
53
+                  <p class="service-p3">专业售后</p>
54
+                </div>
55
+              </el-carousel-item>
56
+              <el-carousel-item>
57
+                <p class="swiper-tittle">技术优势</p>
58
+                <div class="skill">
59
+                  <p class="skill-p1">超过十年的行业应用软件开发经验</p>
60
+                  <p class="skill-p2">丰富的智慧社区及智慧案场建设经验</p>
61
+                  <p class="skill-p3">长期的Java、Net、PHP、软件测试人才储备</p>
62
+                </div>
63
+              </el-carousel-item>
64
+              <el-carousel-item>
65
+                <p class="swiper-tittle">运营推广</p>
66
+                <div class="operation">
67
+                  <p class="Operation-p1">精准数字营销、专业策划设计</p>
68
+                  <p class="Operation-p2">DSP信息流广告</p>
69
+                  <p class="Operation-p3">线下社群活动</p>
70
+                </div>
71
+              </el-carousel-item>
72
+            </el-carousel>
73
+          </div>
74
+        </div>
75
+        <div class="page-5">
76
+          <p class="title">我们的客户</p>
77
+          <div class="logo-box">
78
+            <img src="../../assets/image/home/logo/Group29.png" alt>
79
+            <img src="../../assets/image/home/logo/Group32.png" alt>
80
+            <img src="../../assets/image/home/logo/Group35.png" alt>
81
+            <img src="../../assets/image/home/logo/Group40.png" alt>
82
+            <img src="../../assets/image/home/logo/Group41.png" alt>
83
+
84
+            <img src="../../assets/image/home/logo/Group30.png" alt>
85
+            <img src="../../assets/image/home/logo/Group33.png" alt>
86
+            <img src="../../assets/image/home/logo/Group36.png" alt>
87
+            <img src="../../assets/image/home/logo/Group39.png" alt>
88
+            <img src="../../assets/image/home/logo/Group42.png" alt>
89
+
90
+            <img src="../../assets/image/home/logo/Group31.png" alt>
91
+            <img src="../../assets/image/home/logo/Group34.png" alt>
92
+            <img src="../../assets/image/home/logo/Group37.png" alt>
93
+            <img src="../../assets/image/home/logo/Group38.png" alt>
94
+            <img src="../../assets/image/home/logo/Group43.png" alt>
95
+          </div>
96
+
97
+          <footerNav></footerNav>
98
+        </div>
99
+      </div>
100
+      <div class="fixed-list">
101
+        <div v-for="(i,index) in bannerList" :class="fullPage==index?'color':''" @click="pageInfo(index)" :key="index+'fiexd'"></div>
102
+      </div>
103
+    </div>
104
+  </div>
105
+</template>
106
+<script>
107
+import headerTab from "@/components/commonComponents/headerTab";
108
+import footerNav from "@/components/commonComponents/footerNav";
109
+
110
+export default {
111
+  components: { headerTab, footerNav },
112
+  data () {
113
+    return {
114
+      bannerList: [
115
+        //盒子背景颜色
116
+        {
117
+          width: "100%"
118
+        },
119
+        {
120
+          width: "100%"
121
+        },
122
+        {
123
+          width: "100%"
124
+        },
125
+        {
126
+          width: "100%"
127
+        },
128
+        {
129
+          width: "100%"
130
+        }
131
+      ],
132
+      offsetheight: document.documentElement.clientHeight, //获取当前页面的高度
133
+      fullPage: 0, //当前在第几页
134
+      fullPageNum: false, //是否在滑动
135
+      page2: false, //是否在第二页
136
+      page3: false, //是否在第三页
137
+    };
138
+  },
139
+  mounted () {
140
+    //
141
+
142
+    //在元素加载完毕的时候添加鼠标滑动事件
143
+    //
144
+    if (document.addEventListener) {
145
+      document.addEventListener("DOMMouseScroll", this.scroll, false);
146
+    }
147
+    window.onmousewheel = document.onmousewheel = this.scroll;
148
+  },
149
+  methods: {
150
+    //
151
+    //点击左侧小点时跳转到相应的page
152
+    //
153
+    pageInfo (index) {
154
+      this.fullPage = index;
155
+    },
156
+    //
157
+    //鼠标事件
158
+    //
159
+    scroll (e) {
160
+      e = e || window.event;
161
+      //
162
+      //是否正在滑动
163
+      //
164
+      if (this.fullPageNum) {
165
+        return false;
166
+      }
167
+      //
168
+      //   e.wheelDelta为负数时向下滑动
169
+      //
170
+      if (e.wheelDelta < 0) {
171
+        if (this.fullPage >= 4) {
172
+          return false;
173
+        }
174
+        this.fullPageNum = true;
175
+        this.pageInfo(this.fullPage + 1);
176
+        //
177
+        //  css设置动画事件为1000,所以等到1000ms后滚动状态为false
178
+        //
179
+        setTimeout(() => {
180
+          this.fullPageNum = false;
181
+        }, 500);
182
+        //
183
+        //   否则就是向上划
184
+        //
185
+      } else {
186
+        if (this.fullPage <= 0) {
187
+          return false;
188
+        }
189
+        this.fullPageNum = true;
190
+        this.pageInfo(this.fullPage - 1);
191
+        setTimeout(() => {
192
+          this.fullPageNum = false;
193
+        }, 1000);
194
+      }
195
+      console.log(this.fullPage, "fullPage");
196
+      if (this.fullPage == "2") {
197
+        this.page3 = true;
198
+      } else {
199
+        this.page3 = false;
200
+      }
201
+      if (this.fullPage == "1") {
202
+        this.page2 = true;
203
+      } else {
204
+        this.page2 = false;
205
+      }
206
+      if (this.fullPage == "0") {
207
+        this.page1 = true;
208
+      } else {
209
+        this.page1 = false;
210
+      }
211
+    }
212
+  }
213
+};
214
+</script>
215
+<style lang="less">
216
+.el-carousel__item h3 {
217
+  color: #475669;
218
+  font-size: 14px;
219
+  // opacity: 0.75;
220
+  // line-height: 200px;
221
+  margin: 0;
222
+}
223
+
224
+.el-carousel__item:nth-child(2n) {
225
+  // background-color: #99a9bf;
226
+}
227
+
228
+.el-carousel__item:nth-child(2n + 1) {
229
+  // background-color: #d3dce6;
230
+}
231
+.swiper-tittle {
232
+  font-size: 60px;
233
+  margin: 0 auto 58px auto;
234
+  color: rgba(255, 255, 255, 1);
235
+}
236
+.service,.skill,.operation {
237
+  display: flex;
238
+  justify-content: center;
239
+  flex-wrap: wrap;
240
+  p {
241
+    width: 573px;
242
+    height: 98px;
243
+    color: rgba(255, 255, 255, 1);
244
+    text-align: center;
245
+    line-height: 98px;
246
+    margin: 10px;
247
+    background: #2f2f80;
248
+    border-radius: 4px;
249
+    border: 1px solid rgba(151, 151, 151, 1);
250
+  }
251
+}
252
+.section {
253
+  overflow: hidden;
254
+  .page-1 {
255
+    background: url("../../assets/image/home/background/Group2.jpg") no-repeat
256
+      center;
257
+    width: 100%;
258
+    height: 100%;
259
+    background-size: 100% 100%;
260
+    .part-1 {
261
+      color: #fff;
262
+      position: relative;
263
+      top: 50%;
264
+      margin-top: -140px;
265
+      // transform: translateX(605px);
266
+      .part1-tit {
267
+        width: 480px;
268
+        font-size: 80px;
269
+        border-bottom: 4px solid #3b99fc;
270
+        margin: 0 auto;
271
+      }
272
+      span {
273
+        display: inline-block;
274
+        font-size: 34px;
275
+        margin: 15px 30px 10px 30px;
276
+        letter-spacing: 9px;
277
+      }
278
+      .part1-desc {
279
+        font-size: 34px;
280
+        letter-spacing: 9px;
281
+      }
282
+      .part1-tip {
283
+        background-color: #4e84ff;
284
+        font-size: 24px;
285
+        margin: 20px auto;
286
+        width: 350px;
287
+        letter-spacing: 26px;
288
+        height: 40px;
289
+        line-height: 40px;
290
+        border-radius: 4px;
291
+        padding-left: 16px;
292
+      }
293
+    }
294
+  }
295
+  .page-2 {
296
+    background: url("../../assets/image/home/background/Group26.jpg") no-repeat
297
+      center;
298
+    width: 100%;
299
+    height: 100%;
300
+    background-size: 100% 100%;
301
+    color: #fff;
302
+    .title {
303
+      font-size: 56px;
304
+      padding-top: 200px;
305
+    }
306
+    img {
307
+      width: 100%;
308
+    }
309
+  }
310
+  .page-3 {
311
+    background: url("../../assets/image/home/background/Group27.jpg") no-repeat
312
+      center;
313
+    width: 100%;
314
+    height: 100%;
315
+    background-size: 100% 100%;
316
+    .title {
317
+      font-size: 56px;
318
+      padding-top: 140px;
319
+      color: #fff;
320
+    }
321
+    .produce {
322
+      width: 1000px;
323
+      height: 680px;
324
+      margin: 20px auto;
325
+      .list {
326
+        width: 400px;
327
+        height: 300px;
328
+        background-color: #fff;
329
+        border-radius: 4px;
330
+        padding: 0 40px;
331
+        margin: 10px;
332
+        float: left;
333
+        .list-name {
334
+          color: #03033f;
335
+          border-bottom: 2px dashed #040445;
336
+          padding: 30px 0 18px 0;
337
+          font-size: 30px;
338
+        }
339
+        img {
340
+          width: 330px;
341
+          height: 150px;
342
+          margin-top: 16px;
343
+        }
344
+        .list-desc {
345
+          font-size: 18px;
346
+          line-height: 36px;
347
+          color: #000;
348
+        }
349
+      }
350
+    }
351
+  }
352
+  .page-4 {
353
+    background: url("../../assets/image/home/background/Group28.jpg") no-repeat
354
+      center;
355
+    width: 100%;
356
+    height: 100%;
357
+    background-size: 100% 100%;
358
+    display: flex;
359
+    align-items: center;
360
+    .page-4-con {
361
+      width: 100%;
362
+    }
363
+    .title {
364
+      font-size: 60px;
365
+      padding-top: 140px;
366
+      color: #fff;
367
+    }
368
+  }
369
+  .page-5 {
370
+    background: url("../../assets/image/home/background/Group29.jpg") no-repeat
371
+      center;
372
+    width: 100%;
373
+    height: 100%;
374
+    background-size: 100% 100%;
375
+    .title {
376
+      font-size: 56px;
377
+      padding-top: 180px;
378
+      color: #fff;
379
+    }
380
+    .logo-box {
381
+      width: 1200px;
382
+      height: 320px;
383
+      margin: 50px auto 60px auto;
384
+      img {
385
+        width: 230px;
386
+        height: 100px;
387
+        float: left;
388
+        margin: 5px;
389
+      }
390
+    }
391
+  }
392
+}
393
+.container {
394
+  width: 100%;
395
+  height: 100%;
396
+  position: relative;
397
+  transform: translate3d(0px, 0px, 0px);
398
+  transition: all 1000ms ease;
399
+}
400
+.fixed-list {
401
+  position: fixed;
402
+  top: 46%;
403
+  right: 20px;
404
+  z-index: 2;
405
+  div {
406
+    width: 10px;
407
+    height: 10px;
408
+    background: #ccc;
409
+    margin-bottom: 14px;
410
+  }
411
+  div.color {
412
+    background: #4e84ff;
413
+  }
414
+}
415
+</style>

+ 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>

+ 31
- 6
src/components/pages/productCenter/AIwelcome.vue Просмотреть файл

@@ -15,6 +15,7 @@
15 15
           </div>
16 16
         </div>
17 17
       </div>
18
+      <prod-navi class="nav" default="case"></prod-navi>
18 19
       <!-- <div class="product_bar">
19 20
         <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
20 21
           <el-menu-item index="1" class="item1"  background-color="#fff">
@@ -187,7 +188,11 @@ import headerTab from "@/components/commonComponents/headerTab";
187 188
 import footerNav from "@/components/commonComponents/footerNav";
188 189
 
189 190
 export default {
190
-  components: { headerTab, footerNav },
191
+  components: {
192
+    headerTab,
193
+    footerNav,
194
+    ProdNavi: () => import('./prodNavi'),
195
+  },
191 196
 
192 197
   data () {
193 198
     return {
@@ -195,21 +200,41 @@ export default {
195 200
       P1: '全方位布控,人脸自动抓取,智能判客',
196 201
       P2: '',
197 202
       P3: 'Intelligent face risk control syste',
198
-      activeIndex2: '1'
203
+      activeIndex2: '1',
199 204
     }
200 205
   },
201 206
   methods: {
202
-    handleSelect (key, keyPath) {
203
-      console.log(key, keyPath);
204
-    }
207
+    active1(){
208
+      this.order1 = false;
209
+      this.order_big = true;
210
+      this.wisdom_nav = true;
211
+      this.wisdom_big = false;
212
+    },
213
+    handleOpen(key, keyPath) {
214
+      // this.collapse == 'false'
215
+        console.log(key, keyPath);
216
+      },
217
+      handleClose(key, keyPath) {
218
+        console.log(key, keyPath);
219
+      }
205 220
   }
206 221
 }
207 222
 </script>
208 223
 
209 224
 <!-- Add "scoped" attribute to limit CSS to this component only -->
210 225
 <style scoped lang="less">
226
+.nav{
227
+  width: 1280px;
228
+  position: relative;
229
+  top: -64px;
230
+  // margin-top: -207px;
231
+  margin: auto;
232
+  display: flex;
233
+  justify-content: space-between;
234
+  align-items: center;
235
+}
211 236
 .product-center {
212
-  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
237
+  background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
213 238
   width: 100%;
214 239
   min-width: 1260px;
215 240
   height: 780px;

+ 32
- 35
src/components/pages/productCenter/bigscreen.vue Просмотреть файл

@@ -16,34 +16,7 @@
16 16
           </div>
17 17
         </div>
18 18
       </div>
19
-      <!-- <div class="product_bar">
20
-        <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
21
-          <el-menu-item index="1" class="item1"  background-color="#fff">
22
-            <div class="order">
23
-              <div class="blue_bar"></div>
24
-              <div class="product-order">产品订制</div>
25
-              <div class="order_bot">
26
-                <div class="order_bot_online">
27
-                  <img src="../../../assets/image/logoicon/shape.png" alt="">
28
-                 
29
-                  <span>全渠道在线平台</span>
30
-                </div>
31
-                <div class="order_bot_secondHandHouse">
32
-                  <img src="../../../assets/image/logoicon/huijulogo.png" alt="">
33
-                  
34
-                  <span>二手房管理平台</span>
35
-                </div>
36
-              </div>
37
-            </div>
38
-          </el-menu-item>
39
-          <el-menu-item index="2" class="item2">
40
-            智慧案场
41
-          </el-menu-item>
42
-          <el-menu-item index="3" class="item3">
43
-            智慧社区
44
-          </el-menu-item>
45
-        </el-menu>
46
-      </div>-->
19
+      <prod-navi class="nav" default="case"></prod-navi>
47 20
     </div>
48 21
 
49 22
     <div class="secondHouse-middle">
@@ -216,9 +189,13 @@
216 189
 <script>
217 190
 import headerTab from "@/components/commonComponents/headerTab";
218 191
 import footerNav from "@/components/commonComponents/footerNav";
219
-
192
+import naviCard from "../../navicard";
220 193
 export default {
221
-  components: { headerTab, footerNav },
194
+  components: {
195
+    headerTab,
196
+    footerNav,
197
+    ProdNavi: () => import('./prodNavi'),
198
+  },
222 199
 
223 200
   data () {
224 201
     return {
@@ -226,21 +203,41 @@ export default {
226 203
       P1: '无人售楼终端机结合VR技术,沉浸式看房体验',
227 204
       P2: '',
228 205
       P3: 'INTELLIGENT SALES OFFICE',
229
-      activeIndex2: '1'
206
+      activeIndex2: '1',
230 207
     }
231 208
   },
232 209
   methods: {
233
-    handleSelect (key, keyPath) {
234
-      console.log(key, keyPath);
235
-    }
210
+    active1(){
211
+      this.order1 = false;
212
+      this.order_big = true;
213
+      this.wisdom_nav = true;
214
+      this.wisdom_big = false;
215
+    },
216
+    handleOpen(key, keyPath) {
217
+      // this.collapse == 'false'
218
+        console.log(key, keyPath);
219
+      },
220
+      handleClose(key, keyPath) {
221
+        console.log(key, keyPath);
222
+      }
236 223
   }
237 224
 }
238 225
 </script>
239 226
 
240 227
 <!-- Add "scoped" attribute to limit CSS to this component only -->
241 228
 <style scoped lang="less">
229
+.nav{
230
+  width: 1280px;
231
+  position: relative;
232
+  top: -64px;
233
+  // margin-top: -207px;
234
+  margin: auto;
235
+  display: flex;
236
+  justify-content: space-between;
237
+  align-items: center;
238
+}
242 239
 .product-center {
243
-  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
240
+  background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
244 241
   width: 100%;
245 242
   min-width: 1260px;
246 243
   height: 780px;

+ 31
- 33
src/components/pages/productCenter/city.vue Просмотреть файл

@@ -17,34 +17,8 @@
17 17
           </div>
18 18
         </div>
19 19
       </div>
20
-      <!-- <div class="product_bar">
21
-        <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
22
-          <el-menu-item index="1" class="item1"  background-color="#fff">
23
-            <div class="order">
24
-              <div class="blue_bar"></div>
25
-              <div class="product-order">产品订制</div>
26
-              <div class="order_bot">
27
-                <div class="order_bot_online">
28
-                  <img src="../../../assets/image/logoicon/shape.png" alt="">
29
-                 
30
-                  <span>全渠道在线平台</span>
31
-                </div>
32
-                <div class="order_bot_secondHandHouse">
33
-                  <img src="../../../assets/image/logoicon/huijulogo.png" alt="">
34
-                  
35
-                  <span>二手房管理平台</span>
36
-                </div>
37
-              </div>
38
-            </div>
39
-          </el-menu-item>
40
-          <el-menu-item index="2" class="item2">
41
-            智慧案场
42
-          </el-menu-item>
43
-          <el-menu-item index="3" class="item3">
44
-            智慧社区
45
-          </el-menu-item>
46
-        </el-menu>
47
-      </div>-->
20
+
21
+      <prod-navi class="nav" default="community"></prod-navi>
48 22
     </div>
49 23
 
50 24
     <div class="city_content">
@@ -136,7 +110,11 @@ import headerTab from "@/components/commonComponents/headerTab";
136 110
 import footerNav from "@/components/commonComponents/footerNav";
137 111
 
138 112
 export default {
139
-  components: { headerTab, footerNav },
113
+  components: {
114
+    headerTab,
115
+    footerNav,
116
+    ProdNavi: () => import('./prodNavi'),
117
+  },
140 118
 
141 119
   data () {
142 120
     return {
@@ -144,19 +122,39 @@ export default {
144 122
       P1: '一站式社区服务共享空间',
145 123
       P2: '足不出户拓展生活空间 , 体验最便捷的品质生活',
146 124
       P3: 'INTELLIGENT FACE RISK CONTROL SYSTEM',
147
-      activeIndex2: '1'
125
+      activeIndex2: '1',
148 126
     }
149 127
   },
150 128
   methods: {
151
-    handleSelect (key, keyPath) {
152
-      console.log(key, keyPath);
153
-    }
129
+    active1(){
130
+      this.order1 = false;
131
+      this.order_big = true;
132
+      this.wisdom_nav = true;
133
+      this.wisdom_big = false;
134
+    },
135
+    handleOpen(key, keyPath) {
136
+      // this.collapse == 'false'
137
+        console.log(key, keyPath);
138
+      },
139
+      handleClose(key, keyPath) {
140
+        console.log(key, keyPath);
141
+      }
154 142
   }
155 143
 }
156 144
 </script>
157 145
 
158 146
 <!-- Add "scoped" attribute to limit CSS to this component only -->
159 147
 <style scoped lang="less">
148
+.nav{
149
+  width: 1280px;
150
+  position: relative;
151
+  top: -64px;
152
+  // margin-top: -207px;
153
+  margin: auto;
154
+  display: flex;
155
+  justify-content: space-between;
156
+  align-items: center;
157
+}
160 158
 .product-center {
161 159
   background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
162 160
   width: 100%;

+ 30
- 33
src/components/pages/productCenter/community.vue Просмотреть файл

@@ -19,34 +19,7 @@
19 19
           </div>
20 20
         </div>
21 21
       </div>
22
-      <!-- <div class="product_bar">
23
-        <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
24
-          <el-menu-item index="1" class="item1"  background-color="#fff">
25
-            <div class="order">
26
-              <div class="blue_bar"></div>
27
-              <div class="product-order">产品订制</div>
28
-              <div class="order_bot">
29
-                <div class="order_bot_online">
30
-                  <img src="../../../assets/image/logoicon/shape.png" alt="">
31
-                 
32
-                  <span>全渠道在线平台</span>
33
-                </div>
34
-                <div class="order_bot_secondHandHouse">
35
-                  <img src="../../../assets/image/logoicon/huijulogo.png" alt="">
36
-                  
37
-                  <span>二手房管理平台</span>
38
-                </div>
39
-              </div>
40
-            </div>
41
-          </el-menu-item>
42
-          <el-menu-item index="2" class="item2">
43
-            智慧案场
44
-          </el-menu-item>
45
-          <el-menu-item index="3" class="item3">
46
-            智慧社区
47
-          </el-menu-item>
48
-        </el-menu>
49
-      </div>-->
22
+      <prod-navi class="nav" default="community"></prod-navi>
50 23
     </div>
51 24
 
52 25
     <div class="community">
@@ -153,7 +126,11 @@ import headerTab from "@/components/commonComponents/headerTab";
153 126
 import footerNav from "@/components/commonComponents/footerNav";
154 127
 
155 128
 export default {
156
-  components: { headerTab, footerNav },
129
+  components: {
130
+    headerTab,
131
+    footerNav,
132
+    ProdNavi: () => import('./prodNavi'),
133
+  },
157 134
 
158 135
   data () {
159 136
     return {
@@ -161,18 +138,38 @@ export default {
161 138
       P1: '让业主享受智慧社区美好生活',
162 139
       P2: '整体掌控,一触即发;智能生活,全面掌控',
163 140
       P3: 'INTELLIGENT FACE RISK CONTROL SYSTEM',
164
-      activeIndex2: '1'
141
+      activeIndex2: '1',
165 142
     }
166 143
   },
167 144
   methods: {
168
-    handleSelect (key, keyPath) {
169
-      console.log(key, keyPath);
170
-    }
145
+    active1(){
146
+      this.order1 = false;
147
+      this.order_big = true;
148
+      this.wisdom_nav = true;
149
+      this.wisdom_big = false;
150
+    },
151
+    handleOpen(key, keyPath) {
152
+      // this.collapse == 'false'
153
+        console.log(key, keyPath);
154
+      },
155
+      handleClose(key, keyPath) {
156
+        console.log(key, keyPath);
157
+      }
171 158
   }
172 159
 }
173 160
 </script>
174 161
 <!-- Add "scoped" attribute to limit CSS to this component only -->
175 162
 <style scoped lang="less">
163
+.nav{
164
+  width: 1280px;
165
+  position: relative;
166
+  top: -64px;
167
+  // margin-top: -207px;
168
+  margin: auto;
169
+  display: flex;
170
+  justify-content: space-between;
171
+  align-items: center;
172
+}
176 173
 .product-center {
177 174
   background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
178 175
   width: 100%;

+ 31
- 34
src/components/pages/productCenter/micro.vue Просмотреть файл

@@ -13,34 +13,8 @@
13 13
           <div class="product_top_con_right"></div>
14 14
         </div>
15 15
       </div>
16
-      <!-- <div class="product_bar">
17
-        <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
18
-          <el-menu-item index="1" class="item1"  background-color="#fff">
19
-            <div class="order">
20
-              <div class="blue_bar"></div>
21
-              <div class="product-order">产品订制</div>
22
-              <div class="order_bot">
23
-                <div class="order_bot_online">
24
-                  <img src="../../../assets/image/logoicon/shape.png" alt="">
25
-                 
26
-                  <span>全渠道在线平台</span>
27
-                </div>
28
-                <div class="order_bot_secondHandHouse">
29
-                  <img src="../../../assets/image/logoicon/huijulogo.png" alt="">
30
-                  
31
-                  <span>二手房管理平台</span>
32
-                </div>
33
-              </div>
34
-            </div>
35
-          </el-menu-item>
36
-          <el-menu-item index="2" class="item2">
37
-            智慧案场
38
-          </el-menu-item>
39
-          <el-menu-item index="3" class="item3">
40
-            智慧社区
41
-          </el-menu-item>
42
-        </el-menu>
43
-      </div>-->
16
+      
17
+      <prod-navi class="nav" default="case"></prod-navi>
44 18
     </div>
45 19
 
46 20
     <div class="secondHouse-middle">
@@ -202,9 +176,12 @@
202 176
 <script>
203 177
 import headerTab from "@/components/commonComponents/headerTab";
204 178
 import footerNav from "@/components/commonComponents/footerNav";
205
-
206 179
 export default {
207
-  components: { headerTab, footerNav },
180
+  components: {
181
+    headerTab,
182
+    footerNav,
183
+    ProdNavi: () => import('./prodNavi'),
184
+  },
208 185
 
209 186
   data () {
210 187
     return {
@@ -212,18 +189,38 @@ export default {
212 189
       P1: '传统楼书的v2.0版本',
213 190
       P2: '利用移动设备进行房地产推广',
214 191
       P3: 'INTELLIGENT FACE RISK CONTROL SYSTEM',
215
-      activeIndex2: '1'
192
+      activeIndex2: '1',    
216 193
     }
217 194
   },
218 195
   methods: {
219
-    handleSelect (key, keyPath) {
220
-      console.log(key, keyPath);
221
-    }
196
+    active1(){
197
+      this.order1 = false;
198
+      this.order_big = true;
199
+      this.wisdom_nav = true;
200
+      this.wisdom_big = false;
201
+    },
202
+    handleOpen(key, keyPath) {
203
+      // this.collapse == 'false'
204
+        console.log(key, keyPath);
205
+      },
206
+      handleClose(key, keyPath) {
207
+        console.log(key, keyPath);
208
+      }
222 209
   }
223 210
 }
224 211
 </script>
225 212
 <!-- Add "scoped" attribute to limit CSS to this component only -->
226 213
 <style scoped lang="less">
214
+.nav{
215
+  width: 1280px;
216
+  position: relative;
217
+  top: -64px;
218
+  // margin-top: -207px;
219
+  margin: auto;
220
+  display: flex;
221
+  justify-content: space-between;
222
+  align-items: center;
223
+}
227 224
 .product-center {
228 225
   background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
229 226
   width: 100%;

+ 107
- 7
src/components/pages/productCenter/online.vue Просмотреть файл

@@ -13,6 +13,8 @@
13 13
             </div>
14 14
           </div>
15 15
         </div>
16
+
17
+        <prod-navi class="nav" default="product"></prod-navi>
16 18
         <!-- <div class="product_bar">
17 19
         <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
18 20
           <el-menu-item index="1" class="item1"  background-color="#fff">
@@ -302,13 +304,17 @@
302 304
     <footerNav></footerNav>
303 305
   </div>
304 306
 </template>
305
-
306 307
 <script>
307 308
 import headerTab from "@/components/commonComponents/headerTab";
308 309
 import footerNav from "@/components/commonComponents/footerNav";
310
+import naviCard from "../../navicard";
309 311
 
310 312
 export default {
311
-  components: { headerTab, footerNav },
313
+  components: {
314
+    headerTab,
315
+    footerNav,
316
+    ProdNavi: () => import('./prodNavi'),
317
+  },
312 318
 
313 319
   data () {
314 320
     return {
@@ -316,19 +322,113 @@ export default {
316 322
       P1: '线上售楼处平台,连接开发商与购房者的沟通桥梁',
317 323
       P2: '房产商借助微信小程序,基于微信生态圈,完成商业模式闭环',
318 324
       P3: 'Professional product customization',
319
-      activeIndex2: '1'
325
+      activeIndex2: '1',
326
+       activeCard: undefined,
327
+      productOrder:
328
+        {
329
+          id: '1',
330
+          title:  '产品订制',
331
+          items: [
332
+            {
333
+              icon: require('../../../assets/image/logoicon/shape.png'),
334
+              text: '全渠道在线平台',
335
+              Url:'/productCenter/online'
336
+            },
337
+            {
338
+              icon: require('../../../assets/image/logoicon/huijulogo.png'),
339
+              text: '二手房管理平台',
340
+              Url:'/productCenter'
341
+            }
342
+          ]
343
+        },
344
+        smartScenes:
345
+        {
346
+          id: '2',
347
+          title:  '智慧案场',
348
+          items: [
349
+            {
350
+              icon: require('../../../assets/image/logoicon/aicustomer.png'),
351
+              text: 'AI迎宾判客系统',
352
+              Url:'/productCenter/AIwelcome'
353
+            },
354
+            {
355
+              icon: require('../../../assets/image/logoicon/Bitmap.png'),
356
+              text: '智慧大屏机',
357
+              Url:'/productCenter/bigscreen'
358
+            },
359
+            {
360
+              icon: require('../../../assets/image/logoicon/yinchenglogo.png'),
361
+              text: '全案发布平台',
362
+               Url:'/productCenter/release'
363
+            },
364
+            {
365
+              icon: require('../../../assets/image/logoicon/yuejian.png'),
366
+              text: '微楼书',
367
+               Url:'/productCenter/micro'
368
+            },
369
+          ]
370
+        },
371
+        smartCommunity:
372
+        {
373
+          id: '3',
374
+          title:  '智慧社区',
375
+          items: [
376
+            {
377
+              icon: require('../../../assets/image/logoicon/icon1.png'),
378
+              text: '银城慧家APP',
379
+               Url:'/productCenter/community'
380
+            },
381
+            {
382
+              icon: require('../../../assets/image/logoicon/cityLOGO.png'),
383
+              text: '城的空间',
384
+               Url:'/productCenter/city'
385
+            }
386
+          ]
387
+        }
388
+    
320 389
     }
321 390
   },
322 391
   methods: {
323
-    handleSelect (key, keyPath) {
324
-      console.log(key, keyPath);
325
-    }
392
+    handleCardClick({ type, item }) {
393
+      console.log('--------->', type, item)
394
+      this.$router.push({path:item.Url})
395
+      if (type == 'card') {
396
+        this.activeCard = item;
397
+        console.log('......',item)
398
+        
399
+      } else {
400
+
401
+      }
402
+    },
403
+    active1(){
404
+      this.order1 = false;
405
+      this.order_big = true;
406
+      this.wisdom_nav = true;
407
+      this.wisdom_big = false;
408
+    },
409
+    handleOpen(key, keyPath) {
410
+      // this.collapse == 'false'
411
+        console.log(key, keyPath);
412
+      },
413
+      handleClose(key, keyPath) {
414
+        console.log(key, keyPath);
415
+      }
326 416
   }
327 417
 }
328 418
 </script>
329 419
 
330 420
 <!-- Add "scoped" attribute to limit CSS to this component only -->
331 421
 <style scoped lang="less">
422
+.nav{
423
+  width: 1280px;
424
+  position: relative;
425
+  top: -64px;
426
+  // margin-top: -207px;
427
+  margin: auto;
428
+  display: flex;
429
+  justify-content: space-between;
430
+  align-items: center;
431
+}
332 432
 .product-center {
333 433
   // background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
334 434
   width: 100%;
@@ -337,7 +437,7 @@ export default {
337 437
   // background-size: cover;
338 438
 }
339 439
 .product_center_top {
340
-  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
440
+  background: url(../../../assets/image/program/bg2.jpg) no-repeat center;
341 441
   width: 100%;
342 442
   min-width: 1260px;
343 443
   height: 780px;

+ 120
- 0
src/components/pages/productCenter/prodNavi.vue Просмотреть файл

@@ -0,0 +1,120 @@
1
+<template>
2
+  <div>
3
+    <naviCard v-bind="productOrder" @click="handleCardClick" :active.sync="activeCard.product" style="width: 400px;"></naviCard>
4
+    <naviCard v-bind="smartScenes" @click="handleCardClick" :active.sync="activeCard.case" style="width: 400px;"></naviCard>
5
+    <naviCard v-bind="smartCommunity" @click="handleCardClick" :active.sync="activeCard.community" style="width: 400px;"></naviCard>
6
+  </div>
7
+</template>
8
+
9
+<script>
10
+import naviCard from "../../navicard";
11
+
12
+export default {
13
+  name: 'ProdNavi',
14
+  components: {
15
+    naviCard,
16
+  },
17
+  props: [
18
+    'default',
19
+  ],
20
+  data () {
21
+    return {
22
+      activeCard: {
23
+        product: false,
24
+        case: false,
25
+        community: false,
26
+        [`${this.default}`]: true,
27
+      },
28
+      productOrder: {
29
+        id: 'product',
30
+        title:  '产品订制',
31
+        items: [
32
+          {
33
+            icon: require('../../../assets/image/logoicon/shape.png'),
34
+            text: '全渠道在线平台',
35
+            Url:'/productCenter/online'
36
+          },
37
+          {
38
+            icon: require('../../../assets/image/logoicon/huijulogo.png'),
39
+            text: '二手房管理平台',
40
+            Url:'/productCenter'
41
+          }
42
+        ]
43
+      },
44
+      smartScenes: {
45
+        id: 'case',
46
+        title:  '智慧案场',
47
+        items: [
48
+          {
49
+            icon: require('../../../assets/image/logoicon/aicustomer.png'),
50
+            text: 'AI迎宾判客系统',
51
+            Url:'/productCenter/AIwelcome'
52
+          },
53
+          {
54
+            icon: require('../../../assets/image/logoicon/Bitmap.png'),
55
+            text: '智慧大屏机',
56
+            Url:'/productCenter/bigscreen'
57
+          },
58
+          {
59
+            icon: require('../../../assets/image/logoicon/yinchenglogo.png'),
60
+            text: '全案发布平台',
61
+              Url:'/productCenter/release'
62
+          },
63
+          {
64
+            icon: require('../../../assets/image/logoicon/yuejian.png'),
65
+            text: '微楼书',
66
+              Url:'/productCenter/micro'
67
+          },
68
+        ]
69
+      },
70
+      smartCommunity: {
71
+        id: 'community',
72
+        title:  '智慧社区',
73
+        items: [
74
+          {
75
+            icon: require('../../../assets/image/logoicon/icon1.png'),
76
+            text: '银城慧家APP',
77
+              Url:'/productCenter/community'
78
+          },
79
+          {
80
+            icon: require('../../../assets/image/logoicon/cityLOGO.png'),
81
+            text: '城的空间',
82
+              Url:'/productCenter/city'
83
+          }
84
+        ]
85
+      },
86
+    }
87
+  },
88
+  watch: {
89
+    ['activeCard.product'] (nw, od) {
90
+      if (nw && !od) {
91
+        this.activeCard.case = this.activeCard.community = false
92
+      }
93
+    },
94
+    ['activeCard.case'] (nw, od) {
95
+      if (nw && !od) {
96
+        this.activeCard.product = this.activeCard.community = false
97
+      }
98
+    },
99
+    ['activeCard.community'] (nw, od) {
100
+      if (nw && !od) {
101
+        this.activeCard.case = this.activeCard.product = false
102
+      }
103
+    },
104
+    default (nw) {
105
+      console.log('--------->', nw)
106
+      if (!nw) return
107
+      this.activeCard[nw] = true
108
+    }
109
+  },
110
+  mounted () {
111
+
112
+  },
113
+  methods: {    
114
+    handleCardClick(item) {
115
+      this.$router.push({path:item.Url})
116
+    },
117
+  },
118
+}
119
+</script>
120
+

+ 76
- 125
src/components/pages/productCenter/productCenter.vue Просмотреть файл

@@ -41,121 +41,8 @@
41 41
           </el-menu-item>
42 42
         </el-menu>
43 43
       </div>-->
44
-      <div class="nav">
45
-        <div class="order_nav">
46
-          <div class="tittle">
47
-            <!-- <div class="blue_bar"></div> -->
48
-            <div class="product-order">产品订制</div>
49
-          </div>
50
-          <div class="product_order_nav">
51
-                <p class="online">
52
-                  全渠道在线平台
53
-                </p>
54
-                <div class="vertical_line"></div>
55
-                <p class="second_house">
56
-                  二手房管理平台
57
-                </p>
58
-          </div>
59
-        </div>
60
-
61
-
62
-        <!-- ------------------------------------------------- -->
63
-        
64
-        <!-- <el-row class="tac">
65
-  <el-col :span="8">
66
-    <el-menu
67
-      default-active="1"
68
-      class="el-menu-vertical-demo"
69
-      @open="handleOpen"
70
-      @close="handleClose"
71
-      background-color="#fff"
72
-       text-color="rgba(153,153,153,1)"
73
-       active-text-color="rgba(78,132,255,1)"
74
-      >
75
-
76
-        <el-submenu index="1">
77
-        <template slot="title">
78
-          <div class="tittle">
79
-           
80
-            <div class="product-order">产品订制</div>
81
-          </div>
82
-        </template>
83
-        <el-menu-item-group>
84
-          <el-menu-item index="1-1" style="display:inline-block">
85
-            <div class="order_bot_online">
86
-              <img src="../../../assets/image/logoicon/shape.png" alt="">
87
-              <span>全渠道在线平台</span>
88
-            </div>
89
-            
90
-          </el-menu-item>
91
-          <el-menu-item index="1-2" style="display:inline-block">
92
-            <div  class="order_bot_secondHandHouse">
93
-              <img src="../../../assets/image/logoicon/huijulogo.png" alt="">
94
-            <span>二手房管理平台</span>
95
-            </div>
96
-          </el-menu-item>
97
-        </el-menu-item-group>
98
-      </el-submenu>
99
-  
100
-      
101
-    </el-menu>
102
-  </el-col>
103 44
 
104
-  <el-col :span="8">
105
-    <el-menu
106
-      default-active="1"
107
-      class="el-menu-vertical-demo"
108
-      @open="handleOpen"
109
-      @close="handleClose"
110
-      background-color="#fff"
111
-       text-color="rgba(153,153,153,1)"
112
-       active-text-color="rgba(78,132,255,1)"
113
-      >
114
-      
115
-      <el-submenu index="2" >
116
-        <template slot="title">
117
-          <div class="tittle">
118
-            
119
-            <div class="product-order">产品订制</div>
120
-          </div>
121
-        </template>
122
-        <el-menu-item-group>
123
-          <el-menu-item index="2-1" style="display:inline-block">选项1</el-menu-item>
124
-          <el-menu-item index="2-2" style="display:inline-block">选项2</el-menu-item>
125
-        </el-menu-item-group>
126
-      </el-submenu>
127
-     
128
-    </el-menu>
129
-  </el-col>
130
-
131
-  <el-col :span="8">
132
-    <el-menu
133
-      default-active="1"
134
-      class="el-menu-vertical-demo"
135
-      @open="handleOpen"
136
-      @close="handleClose"
137
-      background-color="#fff"
138
-       text-color="rgba(153,153,153,1)"
139
-       active-text-color="rgba(78,132,255,1)"
140
-       v-model="collapse"
141
-      >
142
-      <el-submenu index="3">
143
-        <template slot="title">
144
-          <div class="tittle">
145
-          
146
-            <div class="product-order">产品订制</div>
147
-          </div>
148
-        </template>
149
-        <el-menu-item-group>
150
-          <el-menu-item index="3-1" style="display:inline-block">选项1</el-menu-item>
151
-          <el-menu-item index="3-2" style="display:inline-block">选项2</el-menu-item>
152
-        </el-menu-item-group>
153
-      </el-submenu>
154
-    </el-menu>
155
-  </el-col>
156
-
157
-</el-row> -->
158
-      </div>
45
+      <prod-navi class="nav" default="product"></prod-navi>
159 46
     </div>
160 47
     <div class="secondHouse-middle">
161 48
       <div class="secondHouse_content">
@@ -213,6 +100,7 @@
213 100
         </div>
214 101
       </div>
215 102
     </div>
103
+    
216 104
     <footerNav></footerNav>
217 105
   </div>
218 106
 </template>
@@ -220,9 +108,14 @@
220 108
 <script>
221 109
 import headerTab from "@/components/commonComponents/headerTab";
222 110
 import footerNav from "@/components/commonComponents/footerNav";
111
+// import ProdNavi from "./prodNavi";
223 112
 
224 113
 export default {
225
-  components: { headerTab, footerNav },
114
+  components: {
115
+    headerTab,
116
+    footerNav,
117
+    ProdNavi: () => import('./prodNavi'),
118
+  },
226 119
 
227 120
   data () {
228 121
     return {
@@ -233,9 +126,21 @@ export default {
233 126
       activeIndex2: '1',
234 127
       activeName: 'first',
235 128
       collapse:'true',
129
+      order1:true,
130
+      order_big:false,
131
+      wisdom_nav:true,
132
+      wisdom_big:false,
133
+      community:true,
134
+      community_big:false,
236 135
     }
237 136
   },
238 137
   methods: {
138
+    active1(){
139
+      this.order1 = false;
140
+      this.order_big = true;
141
+      this.wisdom_nav = true;
142
+      this.wisdom_big = false;
143
+    },
239 144
     handleOpen(key, keyPath) {
240 145
       // this.collapse == 'false'
241 146
         console.log(key, keyPath);
@@ -249,6 +154,27 @@ export default {
249 154
 
250 155
 <!-- Add "scoped" attribute to limit CSS to this component only -->
251 156
 <style scoped lang="less">
157
+
158
+.order_nav_big {
159
+  background-color: #fff;
160
+}
161
+
162
+
163
+.order_nav_big,.wisdom_nav_big,.community_big{
164
+  width: 430px;
165
+  height: 134px;
166
+  box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
167
+  border-radius:10px;
168
+  span{
169
+    font-size: 12px;
170
+  }
171
+  
172
+}
173
+.product_order_nav_big,.case_nav_big,.community_nav_big{
174
+  display: flex;
175
+  justify-content: space-around;
176
+}
177
+
252 178
 .nav_logo {
253 179
   width: 414px;
254 180
   margin: auto;
@@ -260,19 +186,31 @@ export default {
260 186
     height: 42px;
261 187
   }
262 188
 }
263
-.order_nav {
264
-  width: 414px;
265
-  height: 134px;
189
+.nav{
190
+  width: 1280px;
191
+  position: relative;
192
+  top: -64px;
193
+  // margin-top: -207px;
194
+  margin: auto;
195
+  display: flex;
196
+  justify-content: space-between;
197
+  align-items: center;
198
+}
199
+.order_nav,.wisdom_nav,.community,.community_nav {
200
+  width: 320px;
201
+  height: 85px;
266 202
   box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
267 203
   border-radius: 10px;
204
+  // background-color: red;
268 205
   // margin: auto;
269 206
 }
270
-.product_order_nav {
207
+.product_order_nav,.case_nav,.community_nav_big {
271 208
   // margin: 0 auto;
272 209
   display: flex;
273 210
   justify-content: center;
274 211
   justify-content: space-around;
275
-  
212
+  color:rgba(153,153,153,1);
213
+  font-size: 12px;
276 214
 }
277 215
 .nav1,
278 216
 .nav2,
@@ -284,11 +222,13 @@ export default {
284 222
   border-radius: 4px;
285 223
 }
286 224
 .product-center {
287
-  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
225
+  background: url(../../../assets/image/program/bg2.jpg) no-repeat center;
288 226
   width: 100%;
289 227
   min-width: 1260px;
290 228
   height: 780px;
229
+  // background-color: red;
291 230
   background-size: cover;
231
+  // border-radius: 
292 232
 }
293 233
 .product_box {
294 234
   width: 1260px;
@@ -350,18 +290,22 @@ export default {
350 290
   margin: 5px 0;
351 291
   // line-height: 10px;
352 292
 }
353
-.order_bot_online {
293
+.order_bot_online,.order_bot_secondHandHouse,.AIwelcome_big,.bigScreen_big,.yinchenglogo_big,.yuejian_big,.yincheng_big,.city_big {
354 294
   height: 58px;
355 295
   width: 115px;
296
+  margin-top: 20px;
356 297
   display: flex;
357
-
358 298
   flex-wrap: wrap;
359 299
   justify-content: center;
360 300
   align-content: space-between;
361 301
   img {
362
-    width: 35px;
302
+    // width: 35px;
363 303
     height: 42px;
364 304
   }
305
+  span{
306
+    display: flex;
307
+    align-content: flex-end;
308
+  }
365 309
 }
366 310
 .blue_bar {
367 311
   width: 73px;
@@ -384,6 +328,11 @@ export default {
384 328
     width: 110px;
385 329
     height: 32px;
386 330
   }
331
+  span{
332
+    display: flex;
333
+    align-content: flex-end;
334
+    
335
+  }
387 336
 }
388 337
 .item1,
389 338
 .item2,
@@ -411,6 +360,7 @@ export default {
411 360
   width: 100%;
412 361
   // background-color: red;
413 362
   background: url(../../../assets/image/program/bg.jpg) no-repeat center;
363
+  
414 364
   background-size: 100%;
415 365
   .secondHouse_content {
416 366
     width: 1260px;
@@ -489,6 +439,7 @@ export default {
489 439
 .vertical_line{
490 440
   // width:px;
491 441
 height:15px;
492
-border:1px solid rgba(196,196,196,1);
442
+border:1px dashed rgba(196,196,196,1);
493 443
 }
444
+
494 445
 </style>

+ 31
- 34
src/components/pages/productCenter/release.vue Просмотреть файл

@@ -13,34 +13,8 @@
13 13
           <div class="product_top_con_right"></div>
14 14
         </div>
15 15
       </div>
16
-      <!-- <div class="product_bar">
17
-        <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
18
-          <el-menu-item index="1" class="item1"  background-color="#fff">
19
-            <div class="order">
20
-              <div class="blue_bar"></div>
21
-              <div class="product-order">产品订制</div>
22
-              <div class="order_bot">
23
-                <div class="order_bot_online">
24
-                  <img src="../../../assets/image/logoicon/shape.png" alt="">
25
-                 
26
-                  <span>全渠道在线平台</span>
27
-                </div>
28
-                <div class="order_bot_secondHandHouse">
29
-                  <img src="../../../assets/image/logoicon/huijulogo.png" alt="">
30
-                  
31
-                  <span>二手房管理平台</span>
32
-                </div>
33
-              </div>
34
-            </div>
35
-          </el-menu-item>
36
-          <el-menu-item index="2" class="item2">
37
-            智慧案场
38
-          </el-menu-item>
39
-          <el-menu-item index="3" class="item3">
40
-            智慧社区
41
-          </el-menu-item>
42
-        </el-menu>
43
-      </div>-->
16
+      <prod-navi class="nav" default="case"></prod-navi>
17
+      
44 18
     </div>
45 19
 
46 20
     <div class="secondHouse-middle">
@@ -188,9 +162,12 @@
188 162
 <script>
189 163
 import headerTab from "@/components/commonComponents/headerTab";
190 164
 import footerNav from "@/components/commonComponents/footerNav";
191
-
192 165
 export default {
193
-  components: { headerTab, footerNav },
166
+  components: {
167
+    headerTab,
168
+    footerNav,
169
+    ProdNavi: () => import('./prodNavi'),
170
+  },
194 171
 
195 172
   data () {
196 173
     return {
@@ -198,19 +175,39 @@ export default {
198 175
       P1: '线上售楼处平台,连接开发商与购房者的沟通桥梁',
199 176
       P2: '房产商借助微信小程序,基于微信生态圈,完成商业模式闭环',
200 177
       P3: 'INTELLIGENT FACE RISK CONTROL SYSTEM',
201
-      activeIndex2: '1'
178
+      activeIndex2: '1',
202 179
     }
203 180
   },
204 181
   methods: {
205
-    handleSelect (key, keyPath) {
206
-      console.log(key, keyPath);
207
-    }
182
+    active1(){
183
+      this.order1 = false;
184
+      this.order_big = true;
185
+      this.wisdom_nav = true;
186
+      this.wisdom_big = false;
187
+    },
188
+    handleOpen(key, keyPath) {
189
+      // this.collapse == 'false'
190
+        console.log(key, keyPath);
191
+      },
192
+      handleClose(key, keyPath) {
193
+        console.log(key, keyPath);
194
+      }
208 195
   }
209 196
 }
210 197
 </script>
211 198
 
212 199
 <!-- Add "scoped" attribute to limit CSS to this component only -->
213 200
 <style scoped lang="less">
201
+.nav{
202
+  width: 1280px;
203
+  position: relative;
204
+  top: -64px;
205
+  // margin-top: -207px;
206
+  margin: auto;
207
+  display: flex;
208
+  justify-content: space-between;
209
+  align-items: center;
210
+}
214 211
 .product-center {
215 212
   background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
216 213
   width: 100%;

+ 864
- 9
src/components/pages/solution/solution.vue Просмотреть файл

@@ -1,14 +1,309 @@
1 1
 <template>
2 2
   <div class="solution">
3 3
       <headerTab></headerTab>
4
+        <div class="title">
5
+        <p class="tit">{{title}}</p>
6
+        <p class="label">{{desc}}</p>
7
+        <p class="label">{{desc2}}</p>
8
+        <p class="desc">{{engdesc}}</p>
9
+      </div>  
10
+      <div class="solution-main"> 
11
+      <el-tabs class="tab-bar" v-model="activeName" @tab-click="handleClick">
12
+        <el-tab-pane name="first">
13
+            <span slot="label"> <img src="../../../assets/image/program/building.png" alt="">智慧案场</span>
14
+            <div class="problem-box">
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
+           <div class="programme-box">
26
+                 <p class="con-tit">解决实践</p>
27
+             <span class="con-desc">The solution</span>
28
+             <div class="programme-con">
29
+               <img class="hudong" src="../../../assets/image/wisdom/group01.png" alt="">
30
+               <img class="shuzi" src="../../../assets/image/wisdom/group02.png" alt="">
31
+               <img class="zhineng" src="../../../assets/image/wisdom/group03.png" alt="">
32
+               <img class="yunduan" src="../../../assets/image/wisdom/group04.png" alt="">
33
+               <img class="line-one" src="../../../assets/image/wisdom/line/3.png" alt="">
34
+               <img class="line-two" src="../../../assets/image/wisdom/line/2.png" alt="">
35
+               <img class="line-three" src="../../../assets/image/wisdom/line/1.png" alt="">
36
+               <div class="con-one text-con">
37
+                 <img src="../../../assets/image/wisdom/hudong.png" alt="">
38
+                 <p class="text-tit">刷脸互动,精准营销</p>
39
+                 <p class="text-desc">多点部署刷脸广告机,以增加趣味性</p>
40
+                 <p class="text-desc">楼盘信息精准推送</p>
41
+               </div>
42
+               <div class="con-two text-con">
43
+                 <img src="../../../assets/image/wisdom/yinxiao.png" alt="">
44
+                 <p class="text-tit">数字化营销手段更易传播</p>
45
+                 <p class="text-desc">自媒体时代新工具 </p>
46
+                 <p class="text-desc">楼盘信息小程序一键分享,不受时间空间限制、线上预约更方便</p>
47
+               </div>
48
+               <div class="con-three text-con">
49
+                 <img src="../../../assets/image/wisdom/zhuapai.png" alt="">
50
+                 <p class="text-tit">智能人脸、车牌抓拍</p>
51
+                 <p class="text-desc">无感自适应识别,准确率达99%、专业地产案场场景设计</p>
52
+                 <p class="text-desc">VIP迎宾,提升接待服务</p>
53
+               </div>
54
+               <div class="con-four text-con">
55
+                 <img src="../../../assets/image/wisdom/pipei.png" alt="">
56
+                 <p class="text-tit">云端智能匹配到数据库</p>
57
+                 <p class="text-desc">自动识别标记自然访客与渠道客户、有效防止截客、飞单 </p>
58
+                 <p class="text-desc">低成本,高效率</p>
59
+               </div>
60
+          
61
+             </div>
62
+           </div>
63
+           <div class="best-box">
64
+               <p class="con-tit">最佳方案</p>
65
+             <span class="con-desc">Successful cases</span>
66
+             <div class="best-con">
67
+               <div class="logo">
68
+                 <img src="../../../assets/image/logoicon/Bitmap.png" alt="">
69
+                 <span>智慧大屏机</span>
70
+               </div>
71
+               <div class="logo">
72
+                 <img src="../../../assets/image/logoicon/yinchenglogo.png" alt="">
73
+                 <span>全案发布平台</span>
74
+               </div>
75
+               <div class="logo">
76
+                 <img src="../../../assets/image/logoicon/aicustomer.png" alt="">
77
+                 <span>AI迎宾判客系统</span>
78
+               </div>
79
+             </div>
80
+           </div>
81
+           </div>
82
+           <footerNav></footerNav>
83
+        </el-tab-pane>
84
+        
85
+        <el-tab-pane  name="second">
86
+            <span slot="label"><img src="../../../assets/image/program/house.png" alt="">智慧社区</span>
87
+            <div class="second-box">
88
+            <div class="community-box">
89
+              <p class="con-tit">智慧社区组成</p>
90
+              <p class="con-desc">Smart community composition</p>
91
+              <div class="community-con">
92
+                <div class="make-up">
93
+                  <div class="make-img">
94
+                    <img src="../../../assets/image/program/community/group10.png" alt="">
95
+                  </div>
96
+                  <p>智能门禁</p>
97
+                </div>
98
+                <div class="make-up">
99
+                     <div class="make-img">
100
+                  <img src="../../../assets/image/program/community/group01.png" alt="">
101
+                  </div>
102
+                  <p>智慧出行</p>
103
+                </div>
104
+                <div class="make-up">
105
+                  <div class="make-img">
106
+                    <img src="../../../assets/image/program/community/group07.png" alt="">
107
+                  </div>
108
+                  <p>智慧家居</p>
109
+                </div>
110
+                <div class="make-up">
111
+                  <div class="make-img">
112
+                    <img src="../../../assets/image/program/community/group02.png" alt="">
113
+                  </div>
114
+                  <p>智慧安防</p>
115
+                </div>
116
+                <div class="make-up">
117
+                  <div class="make-img">
118
+                    <img src="../../../assets/image/program/community/group09.png" alt="">
119
+                  </div>
120
+                  <p>智慧空间</p>
121
+                </div>
122
+                <div class="make-up">
123
+                  <div class="make-img">
124
+                    <img src="../../../assets/image/program/community/group04.png" alt="">
125
+                  </div>
126
+                  <p>自助大堂</p>
127
+                </div>
128
+                <div class="make-up">
129
+                  <div class="make-img">
130
+                    <img src="../../../assets/image/program/community/group05.png" alt="">
131
+                  </div>
132
+                  <p>智慧管家</p>
133
+                </div>
134
+              </div>
135
+            </div>
136
+            <div class="page-main main-first">
137
+              <p class="con-tit">智慧社区拓扑图</p>
138
+              <p class="con-desc">Topology of smart community</p>
139
+              <div class="page-box">
140
+                <img class="smart-img" src="../../../assets/image/program/community/Resource01.png" alt="">
141
+              </div>
142
+            </div>
143
+            <div class="page-main">
144
+              <p class="con-tit" style="width:95px;height:12px">解决方案</p>
145
+              <p class="con-desc">The solution</p>
146
+             <img class="solution-img" src="../../../assets/image/program/community/G2.png" alt="">
147
+            </div>
148
+               <div class="page-main super-box">
149
+                 <p class="con-tit" style="width:60px;">超脑</p>
150
+              <p class="con-desc">Super brain</p>
151
+              <div class="page-box"> 
152
+                <img class="img-up" src="../../../assets/image/program/community/group03.png" alt="">
153
+                 <img class="img-down" src="../../../assets/image/program/community/group06.png" alt="">
154
+                <img class="super-img" src="../../../assets/image/program/community/Resource02.png" alt="">
155
+                <div class="super-con super-one">
156
+                  <p class="super-tit">整合操作系统</p>
157
+                  <p class="super-desc">超脑平台一方面可以整合Windows和linux两个操作系统,通过操作系统内部署硬件厂商的软件系统来管理硬件。</p>
158
+                </div>
159
+                <div class="super-con super-two">
160
+                  <p class="super-tit">软件整合便于管理</p>
161
+                  <p class="super-desc">超脑平台通过荟房自主研发技术整合各个厂商的软件系统,形成统一的界面,便于管理社区各个硬件。</p>
162
+                </div>
163
+                <div class="super-con super-three">
164
+                  <img src="../../../assets/image/program/community/group08.png" alt="">
165
+                  <p class="super-tit">加快建设步伐</p>
166
+                  <p class="super-desc">不同的社区采购的硬件类别可能不同,厂商也可能不同。此时,只需接入超脑平台,即可打破各协议标准的屏障,加快智慧社区建设步伐。</p>
167
+                </div>
168
+                <div class="super-con super-four">
169
+                  <img src="../../../assets/image/program/community/group11.png" alt="">
170
+                  <p class="super-tit">方便用户使用</p>
171
+                  <p class="super-desc">对物业工作人员而言,不光免除需记住多个厂商的账号密码来进入社区各管理系统的繁杂。对于社区居民则大大提高了其用户体验,只需通过一个APP,即可在社区内畅行无阻。</p>
172
+                </div>
173
+              </div>
174
+              <p class="super-text">智慧社区作为新形势下社会管理创新的一种新模式,充分利用物联网、云计算、移动互联网等新一代信息技术的集成应用,为社区居民提供一个安全、舒适、便利的现代化、智慧化生活环境。而作为智慧社区不可或缺的智能硬件品类繁多,产品开发还面临多种协议标准的抉择,导致归属不同厂商的的不同硬件很难做到相互兼容,限制了各智能硬件的协同集成发展,故而提出“智慧社区超脑计划”。 </p>
175
+              <p class="super-text">为了更加快速有效的进行硬件对接及调试,我们倾尽开发能力打造了“超脑平台”。该平台可实现不同品牌、不同类型、不同接口的硬件设备轻松对接,对接完成后,再由超脑对接云端。在智慧社区建设中可以减轻后期开发量,缩短开发时间,提升效率。</p>
176
+            </div>
177
+              <div class="page-main">
178
+              <p class="con-tit" style="width:120px;">智慧家居</p>
179
+              <p class="con-desc">Intelligent household</p>
180
+             <img class="solution-img" src="../../../assets/image/program/community/Resource08.jpg" alt="">
181
+            </div>
182
+              <div class="page-main">
183
+              <p class="con-tit">美好生活畅想</p>
184
+              <p class="con-desc">Imagine a better life</p>
185
+             <img class="life-img" style="margin-top:40px;" src="../../../assets/image/program/community/Resource06.jpg" alt="">
186
+             <img class="life-img" src="../../../assets/image/program/community/Resource05.jpg" alt="">
187
+             <img class="life-img" src="../../../assets/image/program/community/Resource07.jpg" alt="">
188
+             <img class="life-img" src="../../../assets/image/program/community/Resource04.jpg" alt="">
189
+             <img class="life-img" style="margin-bottom:60px;" src="../../../assets/image/program/community/Resource03.jpg" alt="">
190
+            </div>
191
+            </div>
192
+            <footerNav></footerNav>
4 193
 
5
-   <div>
6
-
7
-  解决方案
8
-
9
-
10
-    </div>
11
-    <footerNav></footerNav>
194
+        </el-tab-pane>
195
+        <el-tab-pane name="third">
196
+            <span slot="label" ><img src="../../../assets/image/program/orderImg.png" alt="">产品定制</span>
197
+            <div class="third-box">
198
+          <div class="main-box">
199
+             <p class="con-tit">痛点描述</p>
200
+             <span class="con-desc">Existing problem</span>
201
+             <div class="img-box">
202
+             <div class="img-con"><img src="../../../assets/image/program/order/Bitmap.jpg" alt="">自建团队费时费力成本高</div>
203
+             <div class="img-con"><img src="../../../assets/image/program/order/Bitmap2.jpg" alt="">存在技术壁垒,项目周期长</div>
204
+             <div class="img-con"><img src="../../../assets/image/program/order/Bitmap3.jpg" alt="">企业业务分散,难专注</div>
205
+            </div>
206
+          </div>
207
+             <div class="main-box">
208
+             <p class="con-tit">解决方案</p>
209
+             <span class="con-desc">The solution</span>
210
+             <div class="label-box">
211
+               <div class="label-con" :class="bgHover==1?'hover-div':''"  @mouseenter="divHover(1)">
212
+                 <div class="label-img">
213
+                 <img v-if="bgHover==1" src="../../../assets/image/program/order/team1.png" alt="">
214
+                 <img v-if="bgHover!=1" src="../../../assets/image/program/order/team.png" alt="">
215
+                 </div>
216
+                 <p class="label-tit">专业开发团队</p>
217
+                 <p class="label-desc">团队拥有丰富实战经验,千万金额成功项目,实力不容小觑</p>
218
+               </div>
219
+               <div class="label-con" :class="bgHover==2?'hover-div':''"  @mouseenter="divHover(2)">
220
+                 <div class="label-img">
221
+                 <img v-if="bgHover==2" src="../../../assets/image/program/order/cost1.png" alt="">
222
+                 <img v-if="bgHover!=2" src="../../../assets/image/program/order/cost.png" alt="">
223
+                 </div>
224
+                 <p class="label-tit">开发费用透明</p>
225
+                 <p class="label-desc">消除行业壁垒,信息不对称问题,价格透明,比肩行业水平</p>
226
+               </div>
227
+               <div class="label-con" :class="bgHover==3?'hover-div':''"  @mouseenter="divHover(3)">
228
+                 <div class="label-img">
229
+                 <img v-if="bgHover==3" src="../../../assets/image/program/order/time1.png" alt="">
230
+                 <img v-if="bgHover!=3" src="../../../assets/image/program/order/time.png" alt="">
231
+                 </div>
232
+                 <p class="label-tit">高质按时交付</p>
233
+                 <p class="label-desc">不随意拖延开发工期,保证高质量按时交付成品</p>
234
+               </div>
235
+               <div class="label-con" :class="bgHover==4?'hover-div':''"  @mouseenter="divHover(4)">
236
+                 <div class="label-img">
237
+                 <img v-if="bgHover==4" src="../../../assets/image/program/order/Operation.png" alt="">
238
+                 <img v-if="bgHover!=4" src="../../../assets/image/program/order/Operation1.png" alt="">
239
+                 </div>
240
+                 <p class="label-tit">持续运营支持</p>
241
+                 <p class="label-desc">按需提供软件上线后运营支持,修复漏洞服务</p>
242
+               </div>
243
+               <div class="label-con" :class="bgHover==5?'hover-div':''"  @mouseenter="divHover(5)">
244
+                 <div class="label-img">
245
+                 <img  v-if="bgHover==5" src="../../../assets/image/program/order/afterSale1.png" alt="">
246
+                 <img  v-if="bgHover!=5" src="../../../assets/image/program/order/afterSale.png" alt="">
247
+                 </div>
248
+                 <p class="label-tit">售后服务周到</p>
249
+                 <p class="label-desc">秉承顾客至上理念,全方位跟进需求,专业解答您的所有疑惑</p>
250
+               </div>
251
+             
252
+            </div>
253
+           </div>
254
+               <div class="main-box">
255
+             <p class="con-tit">业务范围</p>
256
+             <span class="con-desc">The business scope</span>
257
+             <div class="business-box">
258
+               <div class="business-con" :class="colorHover==0?'hover-con':''"  @mouseenter="spanHover(0)">
259
+                 <img src="../../../assets/image/program/order/web.png" alt="">
260
+                 <p class="business-tit">web应用程序</p>
261
+                 <p class="business-desc">基于互联网,浏览器端的应用程序</p>
262
+               </div>
263
+               <div class="business-con" :class="colorHover==1?'hover-con':''"  @mouseenter="spanHover(1)">
264
+                 <img src="../../../assets/image/program/order/app.png" alt="">
265
+                 <p class="business-tit">APP软件开发</p>
266
+                 <p class="business-desc">基于iOS/Android应用开发 掌控智能终端时代</p>
267
+               </div>
268
+               <div class="business-con" :class="colorHover==2?'hover-con':''"  @mouseenter="spanHover(2)">
269
+                 <img src="../../../assets/image/program/order/wx.png" alt="">
270
+                 <p class="business-tit">微信二次开发</p>
271
+                 <p class="business-desc">定制手机网站 制作 布局移动互联网</p>
272
+               </div>
273
+               <div class="business-con" :class="colorHover==3?'hover-con':''"  @mouseenter="spanHover(3)">
274
+                 <img src="../../../assets/image/program/order/Applets.png" alt="">
275
+                 <p class="business-tit">小程序/H5定制</p>
276
+                 <p class="business-desc">满足各类移动营销需求</p>
277
+               </div>
278
+               <div class="business-con" :class="colorHover==4?'hover-con':''"  @mouseenter="spanHover(4)">
279
+                 <img src="../../../assets/image/program/order/software.png" alt="">
280
+                 <p class="business-tit">系统软件开发</p>
281
+                 <p class="business-desc">CRM\ERP\OA等软件系统的设计开发</p>
282
+               </div>
283
+               <div class="business-con" :class="colorHover==5?'hover-con':''"  @mouseenter="spanHover(5)">
284
+                 <img src="../../../assets/image/program/order/UI.png" alt="">
285
+                 <p class="business-tit">界面品牌设计</p>
286
+                 <p class="business-desc">专业高端视角页面设计 树立品牌形象</p>
287
+               </div>
288
+            </div>
289
+          <div class="main-box">
290
+             <p class="con-tit">最佳实践</p>
291
+             <span class="con-desc">Successful cases</span>
292
+             <div class="cases-box">
293
+                    <div class="cases-con"><img src="../../../assets/image/program/order/huiju.png" alt="">二手房</div>
294
+                    <div class="cases-con"><img src="../../../assets/image/program/order/quan.png" alt="">全渠道在线平台</div>
295
+                    <div class="cases-con" ><img style="height:40px;margin:50px auto;" src="../../../assets/image/program/order/yuejian.png" alt="">微楼书</div>
296
+                    <div class="cases-con"><img src="../../../assets/image/program/order/h5.png" alt="">H5</div>
297
+                    <div class="cases-con"><img src="../../../assets/image/program/order/Applets.png" alt="">小程序</div>
298
+            </div>
299
+            </div>
300
+            </div>
301
+            </div>
302
+            <footerNav></footerNav>
303
+        </el-tab-pane>
304
+      </el-tabs>
305
+  </div>
306
+    
12 307
 
13 308
   </div>
14 309
 </template>
@@ -21,11 +316,571 @@ export default {
21 316
   components: { headerTab, footerNav },
22 317
 
23 318
   data() {
24
-    return {};
319
+    return {
320
+      activeName: "first",
321
+      title: "智慧案场",
322
+      desc: "精准营销、人脸抓取、智能判客",
323
+      desc2: "",
324
+      engdesc: "Intelligent face risk control system",
325
+      colorHover: 2,
326
+      bgHover: 3
327
+    };
328
+  },
329
+  methods: {
330
+    handleClick(tab, event) {
331
+      console.log(tab, event);
332
+      if (this.activeName === "second") {
333
+        this.title = "智慧社区服务平台 ";
334
+        this.desc = "一个全系平台,四大集群系统";
335
+        this.desc2 = "";
336
+        this.engdesc = "Intelligent face risk control system";
337
+      } else if (this.activeName === "third") {
338
+        this.title = "按需定制";
339
+        this.desc = "软件开发 我们更懂你 ";
340
+        this.desc2 = "我们提供的就是您想要的服务";
341
+        this.engdesc = "We provide the service you want";
342
+      } else {
343
+        this.title = "智慧案场";
344
+        this.desc = "精准营销、人脸抓取、智能判客";
345
+        this.desc2 = "";
346
+        this.engdesc = "Intelligent face risk control system";
347
+      }
348
+    },
349
+
350
+    spanHover(index) {
351
+      this.colorHover = index;
352
+    },
353
+    divHover(index) {
354
+      this.bgHover = index;
355
+    }
25 356
   }
26 357
 };
27 358
 </script>
28 359
 
29 360
 <!-- Add "scoped" attribute to limit CSS to this component only -->
30
-<style scoped>
361
+<style lang="less" >
362
+
363
+.solution {
364
+  .title {
365
+    background: url("../../../assets/image/program/bannerbg.jpg") no-repeat
366
+      center;
367
+    width: 100%;
368
+    height: 760px;
369
+    background-size: 100% 100%;
370
+    opacity: 1 !important;
371
+    color: #fff;
372
+    .tit {
373
+      font-size: 64px;
374
+      padding-top: 220px;
375
+      font-weight: 100;
376
+      line-height: 100px;
377
+    }
378
+    .label {
379
+      font-size: 40px;
380
+      line-height: 60px;
381
+      font-weight: 100;
382
+    }
383
+    .desc {
384
+      font-size: 12px;
385
+      letter-spacing: 4px;
386
+      line-height: 50px;
387
+    }
388
+  }
389
+  .solution .solution-main .tab-bar{
390
+    
391
+  }
392
+  
393
+  .solution-main {
394
+    width: 100%;
395
+    .tab-bar {
396
+      height: 110px;
397
+      margin: 0 auto;
398
+      
399
+      background-color: #fff;
400
+      border-radius: 10px;
401
+      box-shadow: 0px 1px 4px 0px #4165f2;
402
+      margin-top: -55px;
403
+      .problem-box {
404
+        background-size: 100% 7300px;
405
+        background-image: -webkit-linear-gradient(#ebf1fc, #fdfcff, #e9f0fe);
406
+        background: url("../../../assets/image/bg.png") no-repeat 0 70px;
407
+      }
408
+      .el-tabs__header {
409
+        height: 100px;
410
+        margin: 0;
411
+        .el-tabs__active-bar {
412
+          left: 10%;
413
+          top: 0;
414
+          // width: 95px !important;
415
+          
416
+          display: flex;
417
+          justify-content: center;
418
+          // text-align: center;
419
+          height: 95px;
420
+          height: 12px;
421
+          border-radius:0px 0px 100px 100px;
422
+          background-color: #4e84ff;
423
+          width: 20px;
424
+        }
425
+        .el-tabs__item.is-active {
426
+          color: #4e84ff;
427
+        }
428
+        .el-tabs__item {
429
+          height: 100px;
430
+          width: 230px;
431
+          img {
432
+            display: block;
433
+            width: 22px;
434
+            height: 22px;
435
+            margin: 30px auto 0 auto;
436
+          }
437
+        }
438
+      }
439
+      .main-box {
440
+        width: 100%;
441
+        margin-top: -120px;
442
+        padding: 110px 0;
443
+        .con-tit {
444
+          background: repeating-linear-gradient(transparent, #4e84ff 100%);
445
+          width: 120px;
446
+          margin: 0 auto;
447
+          font-size: 30px;
448
+          color: #000;
449
+          margin-top: 80px;
450
+        }
451
+        .con-desc {
452
+          font-size: 13px;
453
+          letter-spacing: 4px;
454
+          line-height: 40px;
455
+          color: #4e84ff;
456
+        }
457
+        .img-box {
458
+          margin: 20px auto 0 auto;
459
+          .img-con {
460
+            width: 288px;
461
+            height: 250px;
462
+            border-radius: 6px;
463
+            background-color: rgb(243, 240, 240);
464
+            margin: 0 5px;
465
+            display: inline-block;
466
+            line-height: 50px;
467
+            color: #808080;
468
+            img {
469
+              display: block;
470
+              width: 100%;
471
+              border-radius: 6px 6px 0 0;
472
+            }
473
+          }
474
+        }
475
+        .label-box {
476
+          margin: 20px auto 0 auto;
477
+          width: 1300px;
478
+          .label-con {
479
+            width: 230px;
480
+            height: 160px;
481
+            box-shadow: 0px 0px 4px 0px #4181f2;
482
+            display: inline-block;
483
+            border-radius: 4px;
484
+            background-color: #fff;
485
+            margin: 0 10px;
486
+            .label-img {
487
+              width: 40px;
488
+              height: 40px;
489
+              background-color: #4e84ff;
490
+              border-radius: 20px;
491
+              margin: -20px auto 0 auto;
492
+              img {
493
+                width: 22px;
494
+                margin-top: 9px;
495
+              }
496
+            }
497
+            .label-tit {
498
+              font-size: 17px;
499
+              color: #000;
500
+              font-weight: 600;
501
+              margin-top: 20px;
502
+              line-height: 34px;
503
+            }
504
+            .label-desc {
505
+              font-size: 13px;
506
+              color: #808080;
507
+              text-align: left;
508
+              padding: 0 20px;
509
+              line-height: 20px;
510
+            }
511
+          }
512
+          .hover-div {
513
+            background-color: #4e84ff;
514
+            .label-tit {
515
+              color: #fff;
516
+            }
517
+            .label-desc {
518
+              color: #fff;
519
+            }
520
+            .label-img {
521
+              background-color: #fff;
522
+              box-shadow: 0px 0px 4px 0px #4181f2;
523
+            }
524
+          }
525
+        }
526
+        .business-box {
527
+          margin: 30px auto;
528
+          width: 816px;
529
+          height: 360px;
530
+          .business-con {
531
+            width: 230px;
532
+            height: 150px;
533
+            margin: 10px 20px;
534
+            float: left;
535
+            border-radius: 4px;
536
+            img {
537
+              height: 38px;
538
+              margin-top: 12px;
539
+            }
540
+            .business-tit {
541
+              font-size: 18px;
542
+              color: #000;
543
+              font-weight: 600;
544
+              line-height: 36px;
545
+            }
546
+            .business-desc {
547
+              font-size: 13px;
548
+              color: #444;
549
+              line-height: 20px;
550
+              width: 130px;
551
+              margin: 0 auto;
552
+            }
553
+          }
554
+          .hover-con {
555
+            box-shadow: 0px 0px 4px 0px #4181f2;
556
+          }
557
+        }
558
+        .cases-box {
559
+          margin: 40px auto;
560
+          width: 1050px;
561
+          height: 30px;
562
+          .cases-con {
563
+            width: 190px;
564
+            height: 186px;
565
+            border-radius: 6px;
566
+            margin: 0 10px;
567
+            box-shadow: 0px 0px 4px 0px #4181f2;
568
+            font-size: 18px;
569
+            color: #000;
570
+            float: left;
571
+            img {
572
+              display: block;
573
+              height: 60px;
574
+              margin: 40px auto;
575
+            }
576
+          }
577
+        }
578
+      }
579
+      .programme-box {
580
+        // background-color: #e3e9fd;
581
+        min-height: 1000px;
582
+        padding-top: 80px;
583
+        .con-tit {
584
+          background: repeating-linear-gradient(transparent, #4e84ff 100%);
585
+          width: 120px;
586
+          margin: 0 auto;
587
+          font-size: 30px;
588
+          color: #000;
589
+        }
590
+        .con-desc {
591
+          font-size: 13px;
592
+          letter-spacing: 4px;
593
+          line-height: 40px;
594
+          color: #4e84ff;
595
+        }
596
+        .programme-con {
597
+          width: 940px;
598
+          min-height: 1160px;
599
+          margin: 40px auto 0 auto;
600
+          position: relative;
601
+          .hudong {
602
+            width: 300px;
603
+            position: absolute;
604
+            left: 80px;
605
+          }
606
+          .shuzi {
607
+            width: 340px;
608
+            position: absolute;
609
+            right: 0;
610
+            top: 230px;
611
+          }
612
+          .zhineng {
613
+            width: 330px;
614
+            position: absolute;
615
+            left: 0;
616
+            top: 550px;
617
+          }
618
+          .yunduan {
619
+            width: 280px;
620
+            position: absolute;
621
+            right: 100px;
622
+            top: 840px;
623
+          }
624
+          .line-one {
625
+            width: 490px;
626
+            height: 230px;
627
+            position: absolute;
628
+            right: 360px;
629
+            top: 60px;
630
+          }
631
+          .line-two {
632
+            width: 484px;
633
+            position: absolute;
634
+            left: 88px;
635
+            top: 320px;
636
+          }
637
+          .line-three {
638
+            width: 530px;
639
+            position: absolute;
640
+            right: 360px;
641
+            top: 560px;
642
+          }
643
+          .text-con {
644
+            text-align: left;
645
+            img {
646
+              width: 36px;
647
+            }
648
+            .text-tit {
649
+              font-size: 22px;
650
+              color: #000;
651
+              line-height: 40px;
652
+            }
653
+            .text-desc {
654
+              font-size: 17px;
655
+              color: #808080;
656
+            }
657
+          }
658
+          .con-one {
659
+            position: absolute;
660
+            right: 100px;
661
+            top: 20px;
662
+          }
663
+          .con-two {
664
+            position: absolute;
665
+            left: 70px;
666
+            top: 290px;
667
+          }
668
+          .con-three {
669
+            position: absolute;
670
+            right: -40px;
671
+            top: 580px;
672
+          }
673
+          .con-four {
674
+            position: absolute;
675
+            left: 40px;
676
+            top: 870px;
677
+          }
678
+        }
679
+      }
680
+      .best-box {
681
+        padding-top: 100px;
682
+        .con-tit {
683
+          background: repeating-linear-gradient(transparent, #4e84ff 100%);
684
+          width: 120px;
685
+          margin: 0 auto;
686
+          font-size: 30px;
687
+          color: #000;
688
+        }
689
+        .con-desc {
690
+          font-size: 13px;
691
+          letter-spacing: 4px;
692
+          line-height: 40px;
693
+          color: #4e84ff;
694
+        }
695
+        .best-con {
696
+          width: 930px;
697
+          height: 240px;
698
+          margin: 60px auto 0 auto;
699
+          .logo {
700
+            float: left;
701
+            width: 280px;
702
+            height: 130px;
703
+            box-shadow: 0px 0px 5px 0 #4171f2;
704
+            margin: 0 15px;
705
+            border-radius: 4px;
706
+            img {
707
+              margin-top: 30px;
708
+            }
709
+            span {
710
+              float: right;
711
+              margin: 60px 20px 0 0;
712
+              font-size: 18px;
713
+            }
714
+          }
715
+        }
716
+      }
717
+      .second-box {
718
+        background: url("../../../assets/image/bg.png") no-repeat 0 70px;
719
+        background-size: 100% 7300px;
720
+        width: 100%;
721
+      }
722
+      .community-box {
723
+        width: 100%;
724
+        margin-top: -120px;
725
+        background-image: -webkit-linear-gradient(#ebf1fc, #fdfcff, #e9f0fe);
726
+        padding: 110px 0;
727
+        z-index: 1;
728
+        .con-tit {
729
+          background: repeating-linear-gradient(transparent, #4e84ff 100%);
730
+          width: 180px;
731
+          font-size: 30px;
732
+          color: #000;
733
+          margin: 90px auto 0 auto;
734
+        }
735
+        .con-desc {
736
+          font-size: 13px;
737
+          letter-spacing: 4px;
738
+          line-height: 40px;
739
+          color: #4e84ff;
740
+        }
741
+        .community-con {
742
+          width: 980px;
743
+          margin: 60px auto 0 auto;
744
+          height: 120px;
745
+
746
+          .make-up {
747
+            width: 100px;
748
+            float: left;
749
+            margin: 0 20px;
750
+            .make-img {
751
+              width: 50px;
752
+              margin: 0 auto;
753
+              height: 46px;
754
+              img {
755
+                width: 40px;
756
+                max-height: 46px;
757
+                display: block;
758
+                margin: 0 auto;
759
+              }
760
+            }
761
+
762
+            p {
763
+              line-height: 40px;
764
+              font-size: 18px;
765
+              color: #000;
766
+              height: 40px;
767
+            }
768
+          }
769
+        }
770
+      }
771
+
772
+      .page-main {
773
+        width: 100%;
774
+        padding: 20px 0;
775
+        .con-tit {
776
+          background: repeating-linear-gradient(transparent, #4e84ff 100%);
777
+          width: 210px;
778
+          font-size: 30px;
779
+          color: #000;
780
+          margin: 50px auto 0 auto;
781
+        }
782
+        .con-desc {
783
+          font-size: 13px;
784
+          letter-spacing: 4px;
785
+          line-height: 40px;
786
+          color: #4e84ff;
787
+        }
788
+        .page-box {
789
+          width: 1000px;
790
+          box-shadow: 0px 0px 6px 0px #4e6ef0;
791
+          padding: 40px 0;
792
+          margin: 40px auto;
793
+          border-radius: 6px;
794
+          background-color: #fff;
795
+          .smart-img {
796
+            width: 820px;
797
+          }
798
+        }
799
+        .solution-img {
800
+          width: 1000px;
801
+          margin: 20px auto;
802
+        }
803
+        .life-img {
804
+          width: 1000px;
805
+        }
806
+      }
807
+      .main-first {
808
+        padding-top: 60px;
809
+      }
810
+      .super-box {
811
+        .page-box {
812
+          position: relative;
813
+          padding: 20px;
814
+          margin: 40px auto 20px auto;
815
+          .img-up {
816
+            position: absolute;
817
+            left: 20px;
818
+            top: -160px;
819
+            width: 36px;
820
+          }
821
+          .img-down {
822
+            position: absolute;
823
+            left: 20px;
824
+            top: -40px;
825
+            width: 36px;
826
+          }
827
+          .super-img {
828
+            width: 340px;
829
+          }
830
+          .super-con {
831
+            position: absolute;
832
+            width: 260px;
833
+            text-align: left;
834
+            .super-tit {
835
+              font-size: 16px;
836
+              color: #000;
837
+              line-height: 30px;
838
+            }
839
+            .super-desc {
840
+              font-size: 13px;
841
+              color: #666;
842
+            }
843
+            img {
844
+              width: 34px;
845
+            }
846
+          }
847
+          .super-one {
848
+            left: 30px;
849
+            top: 120px;
850
+          }
851
+          .super-two {
852
+            left: 30px;
853
+            top: 260px;
854
+          }
855
+          .super-three {
856
+            right: 30px;
857
+            top: 50px;
858
+          }
859
+          .super-four {
860
+            right: 20px;
861
+            top: 200px;
862
+          }
863
+        }
864
+        .super-text {
865
+          font-size: 13px;
866
+          color: #666;
867
+          width: 1040px;
868
+          margin: 0 auto;
869
+          text-align: left;
870
+          line-height: 20px;
871
+        }
872
+      }
873
+      .third-box {
874
+        background: url("../../../assets/image/bg.png") no-repeat 0 90px;
875
+        background-size: 100% 7100px;
876
+        width: 100%;
877
+        .img-box {
878
+          .img-con {
879
+            margin: 0 26px;
880
+          }
881
+        }
882
+      }
883
+    }
884
+  }
885
+}
31 886
 </style>

+ 5
- 3
src/main.js Просмотреть файл

@@ -6,13 +6,13 @@ import router from './router'
6 6
 
7 7
 Vue.config.productionTip = false
8 8
 
9
-import 'animate.css'
10
-
9
+import animate from 'animate.css'
11 10
 import 'vue-fullpage/vue-fullpage.css'
12
-
13 11
 import VueFullpage from 'vue-fullpage'
14 12
 Vue.use(VueFullpage)
15 13
 
14
+Vue.use(animate)
15
+
16 16
 import ElementUI from 'element-ui'
17 17
 import 'element-ui/lib/theme-chalk/index.css'
18 18
 
@@ -25,6 +25,8 @@ Vue.use(ElementUI)
25 25
 // })
26 26
 
27 27
 /* eslint-disable no-new */
28
+
29
+
28 30
 new Vue({
29 31
 
30 32