进出场信息

liuqimichale
1 parent dcff1e92
Showing 4 changed files with 42 additions and 9 deletions
src/components/VInout.vue
src/components/base/CardTitle.vue
src/images/content/access-icon.png
src/view/VHome.vue
@@ -2,7 +2,10 @@
     <div class="theme-wrap">
         <card-title> <span>进出场消息</span></card-title>
         <div class="theme-body">
-
+            <div class="access-title">
+                <p><span><span class="access-icon"></span>万达停车场  京A243547 进场</span> <span>07:20</span></p>
+            </div>
+            <div class="access-img" :style="{backgroundImage:'url('+imgUrl+')'}"></div>
         </div>
     </div>
 </template>
@@ -19,8 +22,8 @@ export default {
   data(){
     return{
       sideNum: 23454,
-      closeNum: 23454
-    }
+      closeNum: 23454,
+      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'}
   }
 }
 </script>
@@ -33,6 +36,35 @@ export default {
         height: calc(100% - 30px);
         margin-left: 20px;
     }
+    .access-title{
+        height: 30% ;
+        display: flex;
+        align-items: center;
+        p {
+            width: 99%;
+            padding-right: 20px;
+            height: 26px;
+            line-height: 26px;
+            display: flex;
+            justify-content: space-between;
+            background: linear-gradient(to right, rgba(0, 45, 140, .1) , rgba(0, 45, 140, .7));
  
+        }
+        .access-icon{
+            display: inline-block;
+            vertical-align: middle;
+            width: 22px;
+            height: 26px;
+            margin-right: 10px;
+            background: url("../images/content/access-icon.png") no-repeat 0 center;
+            background-size: 22px 22px;
+        }
+    }
+    .access-img{
+        width: 93%;
+        height: 60%;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+    }
  
 </style>
@@ -12,7 +12,6 @@ export default {
  
 <style scoped lang="scss">
     .theme-title {
-        margin-left: -2px;
         height: 30px;
         line-height: 30px;
         background: url("../../images/content/cardTitleBg.png") no-repeat;
@@ -69,11 +69,13 @@ export default {
   }
   .frame-wrap{
     height: calc((100% - 20px)/3);
-    border-image-source: url("../images/content/frame-wrap.png");
-    border-image-slice: 3 16 11 3 fill;
-    border-width: 3px 18px 11px 3px;
-    border-style: solid;
-    background-clip: border-box;
+    background: url("../images/content/frame-wrap.png");
+    background-size: 100% 100%;
+    /*border-image-source: url("../images/content/frame-wrap.png");*/
+    /*border-image-slice: 3 16 11 3 fill;*/
+    /*border-width: 3px 18px 11px 3px;*/
+    /*border-style: solid;*/
+    /*background-clip: border-box;*/
   }
  
 </style>