政府introduce

liuqimichale
1 parent c4fe2d9d
Showing 6 changed files with 57 additions and 24 deletions
webintroduce/src/App.vue
webintroduce/src/assets/images/enterprise/introduce-main.png → webintroduce/src/assets/images/enterprise/introduce.png
webintroduce/src/assets/images/government/introduce.png
webintroduce/src/components/Vintroduce.vue
webintroduce/src/views/enterprise.vue
webintroduce/src/views/government.vue
@@ -107,7 +107,7 @@ export default {
     width: 22px;
     height: 22px;
     background: url("assets/images/back.png") no-repeat;
-    right:10px;
+    right:20px;
     bottom: 10px;
     display: none;
     cursor: pointer;
+<template>
+  <div class="introduce-main" :style="{backgroundImage:'url('+introduceBg+')'}">
+    <p class="introduce-title">{{introduceTitle}}</p>
+    <p class="introduce-des">{{introduceDes}}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Vintroduce',
+  props:{
+    introduceTitle:String,
+    introduceDes:String,
+    introduceBg:String
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .introduce-main {
+    height: 860px;
+    padding: 82px 0;
+    background-color: $baseBgColor ;
+    background-repeat: no-repeat;
+    background-position: center 316px;
+  }
+
+  .introduce-title {
+    font-size: $fontSizeTitle;
+  }
+
+  .introduce-des {
+    width: 869px;
+    margin: 41px auto 97px;
+    line-height: 20px;
+    font-size: $fontSizeSubTitle;
+  }
+</style>
@@ -6,12 +6,13 @@
     subTitle="一城一网一平台 一车一位一编号"
     ></Vbanner>
  
-    <div class="introduce-main">
-      <p class="introduce-title">城市级智慧停车运营管理云平台</p>
-      <p class="introduce-des">
-        城市级智慧停车管理云平台，通过物联网、云计算以及互联网技术，深度整合城市停车资源，对城市路内停车管理以及封闭式停车管理建立统一管理平台，真正实现“一城一网一平台，一车一位一编号”，推进停车位资源优化配置，实现城市停车标准化、精细化管理，盘活停车泊位存量，优化泊位增量，规范停车秩序，解决停车难题，提高城市停车治理水平</p>
+    <Vintroduce
+      :introduceBg="introduceBg"
+      introduceTitle="城市级智慧停车运营管理云平台"
+      introduceDes="
+      城市级智慧停车管理云平台，通过物联网、云计算以及互联网技术，深度整合城市停车资源，对城市路内停车管理以及封闭式停车管理建立统一管理平台，真正实现“一城一网一平台，一车一位一编号”，推进停车位资源优化配置，实现城市停车标准化、精细化管理，盘活停车泊位存量，优化泊位增量，规范停车秩序，解决停车难题，提高城市停车治理水平"
+      ></Vintroduce>
  
-    </div>
  
     <div class="detail-con">
       <Vsetion
@@ -45,14 +46,16 @@
 <script>
 import Vsetion from '../components/Vsetion'
 import Vbanner from '../components/Vbanner'
+import Vintroduce from '../components/Vintroduce'
 export default {
   name: 'VEnterprise',
   components: {
-    Vsetion, Vbanner
+    Vsetion, Vbanner, Vintroduce
   },
   data() {
     return {
       bannerImg:require('../assets/images/enterprise/banner.png'),
+      introduceBg:require('../assets/images/enterprise/introduce.png'),
       insideList: [
         '实时采集车位状态停车时长，后台实时监管后台实时监管',
         '精确记录停车时长，后台实时监管后台实时监管',
@@ -81,22 +84,7 @@ export default {
  
 <style scoped lang="scss">
  
-  .introduce-main {
-    height: 860px;
-    padding: 82px 0;
-    background: $baseBgColor url("../assets/images/enterprise/introduce-main.png") no-repeat center 316px;
-  }
  
-  .introduce-title {
-    font-size: $fontSizeTitle;
-  }
-
-  .introduce-des {
-    width: 869px;
-    margin: 41px auto 97px;
-    line-height: 20px;
-    font-size: $fontSizeSubTitle;
-  }
  
   .detail-con {
     background: $baseWhiteBg;
@@ -5,19 +5,26 @@
         bannerTitle="城市级智慧停车管理数据中心"
         subTitle="物联网+互联网+云计算+大数据"
       ></Vbanner>
+      <Vintroduce
+        :introduceBg="introduceBg"
+        introduceTitle="城市级智慧停车解决方案"
+        introduceDes="城市级智慧停车数据管理中心，面向政府城市停车管理部门，针对城市停车治理难题构建一套完整的技术解决方案，通过动静态交通数据融合，数据分析，应用物联网、云计算等技术，深度刻画城市级停车面貌，挖掘城市停车治理问题，提供数据以及决策支撑，有效提升城市停车治理效率，减少城市核心区道路拥堵，提高城市交通治理水平。"
+        ></Vintroduce>
     </div>
 </template>
  
 <script>
 import Vbanner from '../components/Vbanner'
+import Vintroduce from '../components/Vintroduce'
 export default {
   name: 'government',
   components:{
-    Vbanner
+    Vbanner, Vintroduce
   },
   data(){
     return{
-      bannerImg:require('../assets/images/government/banner.png')
+      bannerImg:require('../assets/images/government/banner.png'),
+      introduceBg:require('../assets/images/government/introduce.png')
     }
   }
 }