企业介绍

liuqimichale
1 parent c082de71
Showing 8 changed files with 111 additions and 14 deletions
webintroduce/src/App.vue
webintroduce/src/assets/css/reset.css
webintroduce/src/assets/css/variables.scss
webintroduce/src/assets/images/enterprise/inside.png
webintroduce/src/assets/images/enterprise/introduce-main.png
webintroduce/src/assets/images/logo.png
webintroduce/src/components/VHeader.vue
webintroduce/src/views/enterprise.vue
 <template>
   <div id="app">
     <VHeader v-if="headerShow"></VHeader>
-    <transition :name="transitionName">
+    <!--<transition :name="transitionName">-->
+      <!--<keep-alive>-->
+        <!--<router-view class="main-wrap transitionBody"></router-view>-->
+      <!--</keep-alive>-->
+    <!--</transition>-->
+
+
       <keep-alive>
         <router-view class="main-wrap transitionBody"></router-view>
       </keep-alive>
-    </transition>
+
     <VFooter v-if="footerShow"></VFooter>
     <div id="backToTop" class="backToTop" @click="scrollIntoView"></div>
   </div>
@@ -132,6 +132,12 @@ table {
 .fr{
   float: right;
 }
+
+.displayFlex{
+  display: flex;
+}
+
+
 .contentWidth{
   width: 1200px;
   margin: 0 auto;
@@ -9,3 +9,7 @@ $baseWhiteBg: #fff;
 $baseGrayBg: #f5f5f5;
 $baseBannerHeight:601px;
+
+$fontSizeTitle:32px;
+
+$fontSizeSubTitle:14px;
 <template>
   <div class="header-wrap">
     <div class="contentWidth">
-      <div class="header-logo fl" @click="$router.push({name:'home'})">logo</div>
+      <div class="header-logo fl" @click="$router.push({name:'home'})"></div>
       <ul class="bar-wrap fr">
         <router-link
           :to="{path:link.linkPath}"
@@ -38,14 +38,17 @@ export default {
   .header-wrap {
     height: 80px;
     line-height: 80px;
-    background-color: $baseWhiteBg;
+    background-color: $baseWhiteBg ;
+  }
+  .header-logo{
+    width: 315px;
+    height: 80px;
+    background: url("../assets/images/logo.png") 0  center no-repeat;
   }
-
   .bar-wrap {
     >li{
-      float: left;
       height: 80px;
-      line-height: 80px;
+      float: left;
       margin-left: 73px;
       border-bottom: 2px solid #fff;
       color:rgba(0,0,0,.6);
@@ -2,17 +2,43 @@
     <div>
       <div class="banner pos-rel">
         <div class="banner-des">
-          <p class="main-title">城市级智慧停车运营管理云平台</p>
-          <p class="sub-title">一城一网一平台 一车一位一编号</p>
+          <p class="banner-title">城市级智慧停车运营管理云平台</p>
+          <p class="banner-sub-title">一城一网一平台 一车一位一编号</p>
         </div>
       </div>
       <div class="introduce-main">
-        <p class="main-title">城市级智慧停车运营管理云平台</p>
-        <p class="main-des">城市级智慧停车管理云平台，通过物联网、云计算以及互联网技术，深度整合城市停车资源，对城市路内停车管理以及封闭式停车管理建立统一管理平台，真正实现“一城一网一平台，一车一位一编号”，推进停车位资源优化配置，实现城市停车标准化、精细化管理，盘活停车泊位存量，优化泊位增量，规范停车秩序，解决停车难题，提高城市停车治理水平</p>
+        <p class="introduce-title">城市级智慧停车运营管理云平台</p>
+        <p class="introduce-des">城市级智慧停车管理云平台，通过物联网、云计算以及互联网技术，深度整合城市停车资源，对城市路内停车管理以及封闭式停车管理建立统一管理平台，真正实现“一城一网一平台，一车一位一编号”，推进停车位资源优化配置，实现城市停车标准化、精细化管理，盘活停车泊位存量，优化泊位增量，规范停车秩序，解决停车难题，提高城市停车治理水平</p>
       </div>
+      <div class="detail-con">
+        <div class="detail-section displayFlex" style="height:291px;width: 1100px; ">
+          <div style="flex: 1" class="detail-section-left"></div>
+          <div style="flex: 1" class="detail-section-right pos-rel">
+            <div>
+              <p class="detail-right-title">路内停车管理</p>
+              <ul class="detail-list">
+                <li>
+                 实时采集车位状态停车时长，后台实时监管后台实时监管
+                </li>
+                <li>
+                  精确记录停车时长，后台实时监管后台实时监管
+                </li>
+                <li>
+                  有效杜绝跑冒滴漏
+                </li>
+                <li>
+                  停车入位、规范有序、智能有偿
+                </li>
+              </ul>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
     </div>
 </template>
@@ -34,10 +60,10 @@ export default {
     @include pos-middle;
     border-bottom: 1px solid #fff;
   }
-  .main-title{
+  .banner-title{
     font-size: 77px;
   }
-  .sub-title{
+  .banner-sub-title{
     margin: 43px 0;
     font-size: 42px;
     color: rgba(255,255,255,.8);
@@ -45,6 +71,58 @@ export default {
   .introduce-main{
     height: 860px;
     padding: 82px 0;
-    background: $baseBgColor;
+    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;
+  }
+  .detail-section{
+    margin: 94px auto 0;
+  }
+  .detail-section-left{
+    background: url("../assets/images/enterprise/inside.png") no-repeat center center;
+  }
+  .detail-section-right{
+    text-align: left;
+    div{
+      @include pos-middle;
+    }
+  }
+  .detail-right-title{
+    background: #14BACE;
+    padding: 4px 10px 2px;
+    text-align: left;
+    display: inline-block;
+    font-size: 24px;
+    color: #fff;
+    border-radius: 2px;
+  }
+  .detail-list li{
+    margin-top: 10px;
+    font-size: 16px;
+    color: rgba(0,0,0,.6);
+    white-space: nowrap;
+    position: relative;
+    padding-left: 19px;
+    &:before{
+      content: '';
+      width: 6px;
+      height: 6px;
+      position: absolute;
+      border-radius: 50%;
+      top:50%;
+      left: 5px;
+      transform: translateY(-50%);
+      background-color: #70CCBB;
+    }
   }
 </style>