Commit 834666d087b82451c00cdb3c58f76604e586ee53
1 parent
c7cd60d8
企业
Showing
4 changed files
with
134 additions
and
63 deletions
webintroduce/src/assets/images/enterprise/close.png
0 → 100644
176 KB
webintroduce/src/assets/images/enterprise/guide.png
0 → 100644
43 KB
webintroduce/src/components/Vsetion.vue
0 → 100644
| 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
| @@ -14,37 +14,66 @@ | @@ -14,37 +14,66 @@ | ||
| 14 | </div> | 14 | </div> |
| 15 | 15 | ||
| 16 | <div class="detail-con"> | 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 | </div> | 40 | </div> |
| 41 | 41 | ||
| 42 | </div> | 42 | </div> |
| 43 | </template> | 43 | </template> |
| 44 | 44 | ||
| 45 | <script> | 45 | <script> |
| 46 | +import Vsetion from '../components/Vsetion' | ||
| 46 | export default { | 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 | </script> | 78 | </script> |
| 50 | 79 | ||
| @@ -85,44 +114,5 @@ export default { | @@ -85,44 +114,5 @@ export default { | ||
| 85 | .detail-con{ | 114 | .detail-con{ |
| 86 | background: $baseWhiteBg; | 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 | </style> | 118 | </style> |