金典案例

liuqimichale
1 parent d619d5db
Showing 10 changed files with 184 additions and 5 deletions
build/webpack.base.conf.js
package.json
src/assets/css/commonCss/reset.css
src/assets/images/home/case-bg.png
src/assets/images/home/solution1.png
src/assets/images/home/solution2.png
src/assets/images/home/solution3.png
src/assets/images/home/together.png
src/main.js
src/views/home/index.vue
@@ -30,6 +30,11 @@ module.exports = {
   module: {
     rules: [
       {
+        test: /\.css/,
+        loader: "style-loader!css-loader",
+        include: []
+  },
+      {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: vueLoaderConfig
@@ -13,8 +13,12 @@
     "css-loader": "^0.28.11",
     "node-sass": "^4.13.0",
     "sass-loader": "^8.0.0",
+    "scss": "^0.2.4",
+    "scss-loader": "^0.0.1",
     "style-loader": "^1.1.2",
+    "swiper": "^5.2.1",
     "vue": "^2.5.2",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-loader": "^13.7.3",
     "vue-router": "^3.0.1",
     "vue-style-loader": "^3.1.2"
@@ -52,6 +56,7 @@
     "shelljs": "^0.7.6",
     "style-loader": "^1.1.2",
     "stylus-loader": "^3.0.2",
+    "swiper": "^5.2.1",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",
@@ -155,4 +155,7 @@ table {
   color: #333;
   text-align: center;
 }
+.bgCommon{
+  background:rgba(238,238,238,1);
+}
  
@@ -4,6 +4,10 @@ import Vue from &#39;vue&#39;
 import App from './App'
 import router from './router'
  
+
+
+
+
 require ('./assets/css/commonCss/reset.css')
  
 Vue.config.productionTip = false
@@ -3,6 +3,8 @@
       <div class="banner-wrapper">
  
  
+
+
         <ul class="widthCommon banner-text">
           <li>
             <div>覆盖城市</div>
@@ -28,23 +30,97 @@
           公司主营业务面向城市智慧停车、公安交通、公共交通三大领域，为政府、企业、个人提供综合交通信息服务，通过交通规划、方案设计、系统建设、运营和服务，深度整合城市动静态交通数据，构建以物联网、互联网、云计算、大数据、人工智能为核心技术的产品研发、生产、系统建设和维护为一体的城市级动静态交通业务生态服务体系。
         </div>
       </div>
+
+      <div class="bgCommon textCommonPadding">
+        <div class="heading-text">为什么选择我们?</div>
+
+      </div>
+
+      <div class="widthCommon textCommonPadding">
+        <div class="heading-text">解决方案?</div>
+        <ul class="solution-wrapper">
+          <li>
+            <span>智慧停车整体解决方案</span>
+          </li>
+          <li>
+            <span>城市公安交通整体解决方案</span>
+          </li>
+          <li>
+            <span>城市公共交通整体解决方案</span>
+          </li>
+        </ul>
+      </div>
+      <div class="case-wrapper textCommonPadding">
+        <div class="heading-text" style="color: #000">经典案例</div>
+        <ul class="case-main">
+          <li>1</li>
+          <li>1</li>
+          <li>1</li>
+          <li>1</li>
+          <li>1</li>
+          <li>1</li>
+          <li>1</li>
+        </ul>
+
+      </div>
+
+      <div class="together-wrapper textCommonPadding">
+        <div class="heading-text" style="color: #FFF">解决方案?</div>
+        <ul class="together-main">
+          <li>
+            <p>
+              城市级智慧停车领域：
+              规划设计、投融资、信息化建设、大数据整合、运营服务等全产业链服务。
+            </p>
+            <p>特许经营、合资运营</p>
+          </li>
+          <li>
+            <p>
+              城市级智慧停车领域：
+              信息化建设、大数据整合、运营服务。
+            </p>
+            <p>
+              系统集成加合作运营
+            </p>
+          </li>
+          <li>
+            <p>
+              城市公安交通、公共交通领域：
+              信息化建设，交通大数据整合，辅助政府决策，建设智能化交通信息服务生态体系。
+            </p>
+            <p>
+              政府采购
+            </p>
+          </li>
+        </ul>
+      </div>
+
+
     </div>
 </template>
  
 <script>
+
 export default {
-  name: 'index'
+  name: 'index',
+
+  data () {
+    return {
+
+    }
+  },
+
 }
 </script>
  
 <style scoped lang="">
   .banner-wrapper{
-    height: 761px;
+    height: 603px;
     background:rgba(0,0,0,.58);
     position: relative;
   }
   .banner-text{
-    height: 143px;
+    height: 124px;
     position: absolute;
     bottom: 0;
     left: 50%;
@@ -53,11 +129,97 @@ export default {
   }
   .banner-text li{
     flex: 1;
-    height: 71px;
-    line-height: 71px;
+    height: 62px;
+    line-height: 62px;
     font-size: 30px;
     color: #FFF;
     text-align: center;
   }
+  .solution-wrapper{
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+  }
+  .solution-wrapper li{
+    font-size: 18px;
+    color: #FFF;
+    width: 256px;
+    height: 358px;
+    position: relative;
+
+  }
+  .solution-wrapper li span{
+    display: block;
+    width: 100%;
+    font-size: 18px;
+    text-align: center;
+    position: absolute;
+    bottom: 22px;
+  }
+  .solution-wrapper li:nth-of-type(1){
+    background: url("../../assets/images/home/solution3.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .solution-wrapper li:nth-of-type(2){
+    margin: 0 177px;
+    background: url("../../assets/images/home/solution2.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .solution-wrapper li:nth-of-type(3){
+    background: url("../../assets/images/home/solution1.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .together-wrapper{
+    height: 537px;
+    background: url("../../assets/images/home/together.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .together-main{
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+  }
+  .together-main li{
+    padding: 20px;
+    width:236px;
+    height:325px;
+    border:2px solid rgba(255,255,255,1);
+    color: #FFF;
+    position: relative;
+  }
+  .together-main li:nth-of-type(2){
+    margin: 0 206px;
+  }
+  .together-main li p:nth-of-type(1){
+    font-size: 16px;
+  }
+  .together-main li p:nth-of-type(2){
+    width: 100%;
+    font-size: 20px;
+    text-align: center;
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+  }
+  .case-wrapper{
+    height: 1300px;
+    background: url("../../assets/images/home/case-bg.png") no-repeat;
+    background-size:100% 772px;
+  }
+  .case-main{
+    width: 1380px;
+    margin: 0 auto;
+  }
+  .case-main li{
+    float: left;
+    width: 460px;
+    height: 357px;
+    background: #0C51C0;
+    transition: ALL 0.4s ease-in-out;
+  }
+  .case-main li:hover{
+    transform: scale(1.2);
+  }
  
 </style>