政府banner

liuqimichale
1 parent 4e88579c
Showing 4 changed files with 108 additions and 61 deletions
webintroduce/src/assets/images/government/banner.png
webintroduce/src/components/Vbanner.vue
webintroduce/src/views/enterprise.vue
webintroduce/src/views/government.vue
+<template>
+  <div class="banner pos-rel" :style="{backgroundImage:'url('+bannerBg+')'}">
+    <div class="banner-des">
+      <p class="banner-title">{{bannerTitle}}</p>
+      <p class="banner-sub-title">{{subTitle}}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Vbanner',
+  props:{
+    bannerTitle:String,
+    subTitle:String,
+    bannerBg:String
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .banner {
+    height: $baseBannerHeight;
+    /*background: url("../assets/images/enterprise/banner.png");*/
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .banner-des {
+    width: 1100px;
+    color: $baseColor;
+    @include pos-middle;
+    border-bottom: 1px solid #fff;
+  }
+
+  .banner-title {
+    font-size: 77px;
+  }
+
+  .banner-sub-title {
+    margin: 43px 0;
+    font-size: 42px;
+    color: rgba(255, 255, 255, .8);
+  }
+</style>
 <template>
-    <div>
-      <div class="banner pos-rel">
-        <div class="banner-des">
-          <p class="banner-title">城市级智慧停车运营管理云平台</p>
-          <p class="banner-sub-title">一城一网一平台 一车一位一编号</p>
-        </div>
-      </div>
+  <div>
+    <Vbanner
+      v-bind:bannerBg="bannerImg"
+    bannerTitle="城市级智慧停车运营管理云平台"
+    subTitle="一城一网一平台 一车一位一编号"
+    ></Vbanner>
  
-      <div class="introduce-main">
-        <p class="introduce-title">城市级智慧停车运营管理云平台</p>
-        <p class="introduce-des">城市级智慧停车管理云平台，通过物联网、云计算以及互联网技术，深度整合城市停车资源，对城市路内停车管理以及封闭式停车管理建立统一管理平台，真正实现“一城一网一平台，一车一位一编号”，推进停车位资源优化配置，实现城市停车标准化、精细化管理，盘活停车泊位存量，优化泊位增量，规范停车秩序，解决停车难题，提高城市停车治理水平</p>
+    <div class="introduce-main">
+      <p class="introduce-title">城市级智慧停车运营管理云平台</p>
+      <p class="introduce-des">
+        城市级智慧停车管理云平台，通过物联网、云计算以及互联网技术，深度整合城市停车资源，对城市路内停车管理以及封闭式停车管理建立统一管理平台，真正实现“一城一网一平台，一车一位一编号”，推进停车位资源优化配置，实现城市停车标准化、精细化管理，盘活停车泊位存量，优化泊位增量，规范停车秩序，解决停车难题，提高城市停车治理水平</p>
  
-      </div>
+    </div>
  
-      <div class="detail-con">
-        <Vsetion
+    <div class="detail-con">
+      <Vsetion
         mytitle="路内停车管理"
         v-bind:insideList="insideList"
         rowReverse=""
         setionheight="291px"
         v-bind:bgImg="InsideImg"
-        ></Vsetion>
-
-        <Vsetion
-          mytitle="封闭式停车无人值守管理"
-          v-bind:insideList="closeList"
-          rowReverse="row-reverse"
-          setionheight="263px"
-          v-bind:bgImg="CloseImg"
-        ></Vsetion>
+      ></Vsetion>
  
-        <Vsetion
-          mytitle="城市停车诱导系统"
-          v-bind:insideList="guideList"
-          rowReverse=""
-          setionheight="263px"
-          v-bind:bgImg="guideImg"
-        ></Vsetion>
-      </div>
+      <Vsetion
+        mytitle="封闭式停车无人值守管理"
+        v-bind:insideList="closeList"
+        rowReverse="row-reverse"
+        setionheight="263px"
+        v-bind:bgImg="CloseImg"
+      ></Vsetion>
  
+      <Vsetion
+        mytitle="城市停车诱导系统"
+        v-bind:insideList="guideList"
+        rowReverse=""
+        setionheight="263px"
+        v-bind:bgImg="guideImg"
+      ></Vsetion>
     </div>
+
+  </div>
 </template>
  
 <script>
 import Vsetion from '../components/Vsetion'
+import Vbanner from '../components/Vbanner'
 export default {
   name: 'VEnterprise',
-  components:{
-    Vsetion
+  components: {
+    Vsetion, Vbanner
   },
-  data(){
+  data() {
     return {
-      insideList:[
+      bannerImg:require('../assets/images/enterprise/banner.png'),
+      insideList: [
         '实时采集车位状态停车时长，后台实时监管后台实时监管',
         '精确记录停车时长，后台实时监管后台实时监管',
         '有效杜绝跑冒滴漏',
         '停车入位、规范有序、智能有偿',
       ],
       InsideImg: require('../assets/images/enterprise/inside.png'),
-      closeList:[
+      closeList: [
         '无人值守，降低人工运营成本，提高车场收益',
         '无人值守，降低人工运营成',
         '无人值守，降低人工运营成本，提',
       ],
       CloseImg: require('../assets/images/enterprise/close.png'),
-      guideList:[
+      guideList: [
         '城市停车三级诱导城市停车三级诱导城市停车三级诱导',
         '实时交通路况展示（红、黄、绿）通路况展示（红、黄、绿）',
         '停车场剩余泊位实时更新',
@@ -78,40 +80,25 @@ export default {
 </script>
  
 <style scoped lang="scss">
-.banner{
-  height: $baseBannerHeight;
-  background: url("../assets/images/enterprise/banner.png") no-repeat;
-  background-size: 100% 100%;
-}
-  .banner-des{
-    width: 1100px;
-    color: $baseColor;
-    @include pos-middle;
-    border-bottom: 1px solid #fff;
-  }
-  .banner-title{
-    font-size: 77px;
-  }
-  .banner-sub-title{
-    margin: 43px 0;
-    font-size: 42px;
-    color: rgba(255,255,255,.8);
-  }
-  .introduce-main{
+
+  .introduce-main {
     height: 860px;
     padding: 82px 0;
     background: $baseBgColor url("../assets/images/enterprise/introduce-main.png") no-repeat center 316px;
   }
-  .introduce-title{
+
+  .introduce-title {
     font-size: $fontSizeTitle;
   }
-  .introduce-des{
+
+  .introduce-des {
     width: 869px;
     margin: 41px auto 97px;
     line-height: 20px;
     font-size: $fontSizeSubTitle;
   }
-  .detail-con{
+
+  .detail-con {
     background: $baseWhiteBg;
   }
  
 <template>
-    <div>1</div>
+    <div>
+      <Vbanner
+        v-bind:bannerBg="bannerImg"
+        bannerTitle="城市级智慧停车管理数据中心"
+        subTitle="物联网+互联网+云计算+大数据"
+      ></Vbanner>
+    </div>
 </template>
  
 <script>
+import Vbanner from '../components/Vbanner'
 export default {
-  name: 'government'
+  name: 'government',
+  components:{
+    Vbanner
+  },
+  data(){
+    return{
+      bannerImg:require('../assets/images/government/banner.png')
+    }
+  }
 }
 </script>