解决方案

liuqimichale
1 parent dac7137c
Showing 11 changed files with 157 additions and 3 deletions
webintroduce/src/assets/images/solution/government.png
webintroduce/src/assets/images/solution/operate.png
webintroduce/src/assets/images/solution/park.png
webintroduce/src/assets/images/solution/personal.png
webintroduce/src/assets/images/solution/worth-list01.png
webintroduce/src/assets/images/solution/worth-list02.png
webintroduce/src/assets/images/solution/worth-list03.png
webintroduce/src/assets/images/solution/worth1.png
webintroduce/src/assets/images/solution/worth2.png
webintroduce/src/assets/images/solution/worth3.png
webintroduce/src/views/solution.vue
@@ -29,25 +29,106 @@
     <div>
       <p class="plan-title">城市停车规划</p>
  
-      <p class="build-title">城市停车规划</p>
+      <p class="build-title">城市停车建设</p>
+      <Vsection
+        mytitle="面向政府停车管理部门"
+        v-bind:insideList="insideList"
+        rowReverse=""
+        setionheight="412px"
+        v-bind:bgImg="InsideImg"
+      ></Vsection>
+
+      <Vsection
+        mytitle="面向停车场运营企业"
+        v-bind:insideList="closeList"
+        rowReverse="row-reverse"
+        setionheight="412px"
+        v-bind:bgImg="CloseImg"
+      ></Vsection>
+
+
+      <Vsection
+        mytitle="面向车主个人 任你停APP"
+        v-bind:insideList="personalList"
+        rowReverse=""
+        setionheight="412px"
+        v-bind:bgImg="personalImg"
+      ></Vsection>
     </div>
  
+    <p class="operate-title">城市停车运营</p>
+    <p class="worth-title">行业价值</p>
+    <ul class="worth-list">
+      <li>
+        <div></div>
+        <p>政府</p>
+        <ul>
+          <li>实时掌握全市停车资源数据</li>
+          <li>多源数据融合分析，支撑城市停车管理决策</li>
+          <li>盘活存量市场，解决城市停车难题</li>
+          <li>减少拥堵，提升城市交通整体形象</li>
+        </ul>
+      </li>
  
+      <li>
+        <div></div>
+        <p>企业</p>
+        <ul>
+          <li>有效杜绝跑冒滴漏，提高车场收益</li>
+          <li>丰富的统计报表，实时获得各种经营数据</li>
+          <li>统一管理，规范运营，有效提高企业形象</li>
+          <li>高效停车诱导，提高车位周转率</li>
+        </ul>
+      </li>
  
+      <li>
+        <div></div>
+        <p>个人</p>
+        <ul>
+          <li>轻松停车，快速找到停车位</li>
+          <li>车位共享，有效利用闲置资源，提高车主收益</li>
+          <li>多种在线电子支付，方便快捷</li>
+          <li>周边服务，畅享优惠打折，减少停车费用</li>
+        </ul>
+      </li>
+    </ul>
   </div>
 </template>
  
 <script>
 import Vbanner from '../components/Vbanner'
-
+import Vsection from '../components/Vsection'
 export default {
   name: 'VSolution',
   components: {
-    Vbanner
+    Vbanner, Vsection
   },
   data() {
     return {
       bannerImg: require('../assets/images/solution/banner.png'),
+      insideList: [
+        '数据模型刻画',
+        '停车综合监测数据模停车分析研判',
+        '停车综合监测',
+        '动态交通组织优化',
+      ],
+      InsideImg: require('../assets/images/solution/government.png'),
+
+      closeList: [
+        '路内停车建设与管理',
+        '封闭式停车无人值守建设与管理无人值守建设与管理',
+        '城市停车诱导系统 '
+      ],
+      CloseImg: require('../assets/images/solution/park.png'),
+
+      personalList: [
+        '停车一键导航在线缴费快速出场',
+        '在线缴费快速出场在线缴费快速出场在线缴费快速出场',
+        '个人车位共享在线缴费',
+        '周边服务在线缴费快速出场',
+        '会员办理，积分兑'
+      ],
+      personalImg: require('../assets/images/solution/personal.png'),
     }
   }
 }
@@ -109,4 +190,77 @@ export default {
     padding-bottom: 30px;
     font-size: 32px;
   }
+  .operate-title{
+    padding: 74px 0 700px;
+    font-size:32px;
+    background: url("../assets/images/solution/operate.png") no-repeat center 150px;
+  }
+  .worth-title{
+    font-size:32px;
+    padding-bottom: 30px;
+  }
+  .worth-list{
+    width: 1200px;
+    margin: 0 auto 30px;
+    overflow: hidden;
+    background: #fff;
+    >li{
+      width:370px;
+      height:409px;
+      float: left;
+      background:rgba(255,255,255,1);
+      box-shadow:0px 7px 54px 0px rgba(157,165,167,0.7);
+      border-radius:8px;
+
+      &:nth-of-type(1){
+        background: url("../assets/images/solution/worth-list01.png") no-repeat;
+        background-size: 100% 100%;
+        div{
+          background: url("../assets/images/solution/worth1.png");
+        }
+        p{
+          color:rgba(239,94,62,1);
+        }
+      }
+      &:nth-of-type(2){
+        margin: 0 40px;
+        background: url("../assets/images/solution/worth-list02.png") no-repeat;
+        background-size: 100% 100%;
+        div{
+          background: url("../assets/images/solution/worth2.png");
+        }
+        p{
+          color:rgba(113,189,199,1);
+        }
+      }
+      &:nth-of-type(3){
+        background: url("../assets/images/solution/worth-list03.png") no-repeat;
+        background-size: 100% 100%;
+        div{
+          background: url("../assets/images/solution/worth3.png");
+        }
+        p{
+          color:rgba(242,188,98,1);
+        }
+      }
+      >div{
+        width: 140px;
+        height: 140px;
+        margin: 60px auto 10px;
+      }
+      >p{
+        font-size:32px;
+        margin-bottom: 10px;
+      }
+      li{
+        font-size:14px;
+        font-family:PingFang-SC-Medium;
+        font-weight:500;
+        color:rgba(0,0,0,.7);
+        line-height:35px;
+        text-align: left;
+        padding-left: 20px;
+      }
+    }
+  }
 </style>