BJ_web_developers / webintroduce

Commit 834666d087b82451c00cdb3c58f76604e586ee53

Authored by liuqimichale
1 parent c7cd60d8

企业

Inline Side-by-side
Showing 4 changed files with 134 additions and 63 deletions
webintroduce/src/assets/images/enterprise/close.png 0 → 100644
View file @834666d

176 KB
webintroduce/src/assets/images/enterprise/guide.png 0 → 100644
View file @834666d

43 KB
webintroduce/src/components/Vsetion.vue 0 → 100644
  View file @834666d
  1 +<template>
  2 + <div class="detail-section displayFlex" :style="{height:setionheight,'flex-direction':rowReverse}">
  3 + <div class="detail-section-bg" :style="{backgroundImage:'url('+bgImg+')'}"></div>
  4 + <div class="detail-section-list pos-rel">
  5 + <div>
  6 + <p class="detail-list-title">{{mytitle}}</p>
  7 + <ul class="detail-list">
  8 + <li v-for="(list,index) in insideList" :key="index">
  9 + {{list}}
  10 + </li>
  11 + </ul>
  12 + </div>
  13 +
  14 + </div>
  15 + </div>
  16 +</template>
  17 +
  18 +<script>
  19 +export default {
  20 + name: 'Vsetion',
  21 + props:{
  22 + mytitle: String,
  23 + rowReverse:String,
  24 + setionheight:String,
  25 + bgImg:String,
  26 + insideList:{
  27 + type:Array
  28 + }
  29 + }
  30 +}
  31 +</script>
  32 +
  33 +<style scoped lang="scss">
  34 + .detail-section{
  35 + width: 1100px;
  36 + margin: 94px auto 0;
  37 + >div{
  38 + flex: 1;
  39 + }
  40 + }
  41 + .detail-section-bg{
  42 + background: url("../assets/images/enterprise/inside.png") no-repeat center center;
  43 + background-repeat: no-repeat;
  44 + background-position: center center;
  45 + }
  46 + .detail-section-list{
  47 + text-align: left;
  48 + div{
  49 + @include pos-middle;
  50 + }
  51 + }
  52 + .detail-list-title{
  53 + display: inline-block;
  54 + padding: 4px 10px 2px;
  55 + margin-bottom: 10px;
  56 + text-align: left;
  57 + background: #14BACE;
  58 + font-size: 24px;
  59 + color: #fff;
  60 + border-radius: 2px;
  61 + }
  62 + .detail-list li{
  63 + margin-top: 10px;
  64 + font-size: 16px;
  65 + color: rgba(0,0,0,.6);
  66 + white-space: nowrap;
  67 + position: relative;
  68 + padding-left: 19px;
  69 + &:before{
  70 + content: '';
  71 + width: 6px;
  72 + height: 6px;
  73 + position: absolute;
  74 + border-radius: 50%;
  75 + top:50%;
  76 + left: 5px;
  77 + transform: translateY(-50%);
  78 + background-color: #70CCBB;
  79 + }
  80 + }
  81 +</style>
... ...
webintroduce/src/views/enterprise.vue
  View file @834666d
... ... @@ -14,37 +14,66 @@
14 14 </div>
15 15  
16 16 <div class="detail-con">
17   - <div class="detail-section displayFlex" style="height:291px;width: 1100px; ">
18   - <div style="flex: 1" class="detail-section-left"></div>
19   - <div style="flex: 1" class="detail-section-right pos-rel">
20   - <div>
21   - <p class="detail-right-title">路内停车管理</p>
22   - <ul class="detail-list">
23   - <li>
24   - 实时采集车位状态停车时长，后台实时监管后台实时监管
25   - </li>
26   - <li>
27   - 精确记录停车时长，后台实时监管后台实时监管
28   - </li>
29   - <li>
30   - 有效杜绝跑冒滴漏
31   - </li>
32   - <li>
33   - 停车入位、规范有序、智能有偿
34   - </li>
35   - </ul>
36   - </div>
  17 + <Vsetion
  18 + mytitle="路内停车管理"
  19 + v-bind:insideList="insideList"
  20 + rowReverse=""
  21 + setionheight="291px"
  22 + v-bind:bgImg="InsideImg"
  23 + ></Vsetion>
37 24  
38   - </div>
39   - </div>
  25 + <Vsetion
  26 + mytitle="封闭式停车无人值守管理"
  27 + v-bind:insideList="closeList"
  28 + rowReverse="row-reverse"
  29 + setionheight="263px"
  30 + v-bind:bgImg="CloseImg"
  31 + ></Vsetion>
  32 +
  33 + <Vsetion
  34 + mytitle="城市停车诱导系统"
  35 + v-bind:insideList="guideList"
  36 + rowReverse=""
  37 + setionheight="263px"
  38 + v-bind:bgImg="guideImg"
  39 + ></Vsetion>
40 40 </div>
41 41  
42 42 </div>
43 43 </template>
44 44  
45 45 <script>
  46 +import Vsetion from '../components/Vsetion'
46 47 export default {
47   - name: 'VEnterprise'
  48 + name: 'VEnterprise',
  49 + components:{
  50 + Vsetion
  51 + },
  52 + data(){
  53 + return {
  54 + insideList:[
  55 + '实时采集车位状态停车时长，后台实时监管后台实时监管',
  56 + '精确记录停车时长，后台实时监管后台实时监管',
  57 + '有效杜绝跑冒滴漏',
  58 + '停车入位、规范有序、智能有偿',
  59 + ],
  60 + InsideImg: require('../assets/images/enterprise/inside.png'),
  61 + closeList:[
  62 + '无人值守，降低人工运营成本，提高车场收益',
  63 + '无人值守，降低人工运营成',
  64 + '无人值守，降低人工运营成本，提',
  65 + ],
  66 + CloseImg: require('../assets/images/enterprise/close.png'),
  67 + guideList:[
  68 + '城市停车三级诱导城市停车三级诱导城市停车三级诱导',
  69 + '实时交通路况展示（红、黄、绿）通路况展示（红、黄、绿）',
  70 + '停车场剩余泊位实时更新',
  71 + '减少停车时长，提高停车效率',
  72 + '缓解局部交通微循环，减少拥堵'
  73 + ],
  74 + guideImg: require('../assets/images/enterprise/guide.png')
  75 + }
  76 + }
48 77 }
49 78 </script>
50 79  
... ... @@ -85,44 +114,5 @@ export default {
85 114 .detail-con{
86 115 background: $baseWhiteBg;
87 116 }
88   - .detail-section{
89   - margin: 94px auto 0;
90   - }
91   - .detail-section-left{
92   - background: url("../assets/images/enterprise/inside.png") no-repeat center center;
93   - }
94   - .detail-section-right{
95   - text-align: left;
96   - div{
97   - @include pos-middle;
98   - }
99   - }
100   - .detail-right-title{
101   - background: #14BACE;
102   - padding: 4px 10px 2px;
103   - text-align: left;
104   - display: inline-block;
105   - font-size: 24px;
106   - color: #fff;
107   - border-radius: 2px;
108   - }
109   - .detail-list li{
110   - margin-top: 10px;
111   - font-size: 16px;
112   - color: rgba(0,0,0,.6);
113   - white-space: nowrap;
114   - position: relative;
115   - padding-left: 19px;
116   - &:before{
117   - content: '';
118   - width: 6px;
119   - height: 6px;
120   - position: absolute;
121   - border-radius: 50%;
122   - top:50%;
123   - left: 5px;
124   - transform: translateY(-50%);
125   - background-color: #70CCBB;
126   - }
127   - }
  117 +
128 118 </style>
... ...