Commit f5d4b70cbb732cb874624353602f4921daf61a81
1 parent
dcff1e92
进出场信息
Showing
4 changed files
with
42 additions
and
9 deletions
src/components/VInout.vue
| @@ -2,7 +2,10 @@ | @@ -2,7 +2,10 @@ | ||
| 2 | <div class="theme-wrap"> | 2 | <div class="theme-wrap"> |
| 3 | <card-title> <span>进出场消息</span></card-title> | 3 | <card-title> <span>进出场消息</span></card-title> |
| 4 | <div class="theme-body"> | 4 | <div class="theme-body"> |
| 5 | - | 5 | + <div class="access-title"> |
| 6 | + <p><span><span class="access-icon"></span>万达停车场 京A243547 进场</span> <span>07:20</span></p> | ||
| 7 | + </div> | ||
| 8 | + <div class="access-img" :style="{backgroundImage:'url('+imgUrl+')'}"></div> | ||
| 6 | </div> | 9 | </div> |
| 7 | </div> | 10 | </div> |
| 8 | </template> | 11 | </template> |
| @@ -19,8 +22,8 @@ export default { | @@ -19,8 +22,8 @@ export default { | ||
| 19 | data(){ | 22 | data(){ |
| 20 | return{ | 23 | return{ |
| 21 | sideNum: 23454, | 24 | sideNum: 23454, |
| 22 | - closeNum: 23454 | ||
| 23 | - } | 25 | + closeNum: 23454, |
| 26 | + imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552297151876&di=fcc094f43d6caaf4b9526dabbefd1243&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190124%2F1fc9d7e14be54986b9e2e055a2b5ccc1.jpeg'} | ||
| 24 | } | 27 | } |
| 25 | } | 28 | } |
| 26 | </script> | 29 | </script> |
| @@ -33,6 +36,35 @@ export default { | @@ -33,6 +36,35 @@ export default { | ||
| 33 | height: calc(100% - 30px); | 36 | height: calc(100% - 30px); |
| 34 | margin-left: 20px; | 37 | margin-left: 20px; |
| 35 | } | 38 | } |
| 39 | + .access-title{ | ||
| 40 | + height: 30% ; | ||
| 41 | + display: flex; | ||
| 42 | + align-items: center; | ||
| 43 | + p { | ||
| 44 | + width: 99%; | ||
| 45 | + padding-right: 20px; | ||
| 46 | + height: 26px; | ||
| 47 | + line-height: 26px; | ||
| 48 | + display: flex; | ||
| 49 | + justify-content: space-between; | ||
| 50 | + background: linear-gradient(to right, rgba(0, 45, 140, .1) , rgba(0, 45, 140, .7)); | ||
| 36 | 51 | ||
| 52 | + } | ||
| 53 | + .access-icon{ | ||
| 54 | + display: inline-block; | ||
| 55 | + vertical-align: middle; | ||
| 56 | + width: 22px; | ||
| 57 | + height: 26px; | ||
| 58 | + margin-right: 10px; | ||
| 59 | + background: url("../images/content/access-icon.png") no-repeat 0 center; | ||
| 60 | + background-size: 22px 22px; | ||
| 61 | + } | ||
| 62 | + } | ||
| 63 | + .access-img{ | ||
| 64 | + width: 93%; | ||
| 65 | + height: 60%; | ||
| 66 | + background-repeat: no-repeat; | ||
| 67 | + background-size: 100% 100%; | ||
| 68 | + } | ||
| 37 | 69 | ||
| 38 | </style> | 70 | </style> |
src/components/base/CardTitle.vue
| @@ -12,7 +12,6 @@ export default { | @@ -12,7 +12,6 @@ export default { | ||
| 12 | 12 | ||
| 13 | <style scoped lang="scss"> | 13 | <style scoped lang="scss"> |
| 14 | .theme-title { | 14 | .theme-title { |
| 15 | - margin-left: -2px; | ||
| 16 | height: 30px; | 15 | height: 30px; |
| 17 | line-height: 30px; | 16 | line-height: 30px; |
| 18 | background: url("../../images/content/cardTitleBg.png") no-repeat; | 17 | background: url("../../images/content/cardTitleBg.png") no-repeat; |
src/images/content/access-icon.png
0 → 100644
853 Bytes
src/view/VHome.vue
| @@ -69,11 +69,13 @@ export default { | @@ -69,11 +69,13 @@ export default { | ||
| 69 | } | 69 | } |
| 70 | .frame-wrap{ | 70 | .frame-wrap{ |
| 71 | height: calc((100% - 20px)/3); | 71 | height: calc((100% - 20px)/3); |
| 72 | - border-image-source: url("../images/content/frame-wrap.png"); | ||
| 73 | - border-image-slice: 3 16 11 3 fill; | ||
| 74 | - border-width: 3px 18px 11px 3px; | ||
| 75 | - border-style: solid; | ||
| 76 | - background-clip: border-box; | 72 | + background: url("../images/content/frame-wrap.png"); |
| 73 | + background-size: 100% 100%; | ||
| 74 | + /*border-image-source: url("../images/content/frame-wrap.png");*/ | ||
| 75 | + /*border-image-slice: 3 16 11 3 fill;*/ | ||
| 76 | + /*border-width: 3px 18px 11px 3px;*/ | ||
| 77 | + /*border-style: solid;*/ | ||
| 78 | + /*background-clip: border-box;*/ | ||
| 77 | } | 79 | } |
| 78 | 80 | ||
| 79 | </style> | 81 | </style> |