From 2caf92285eb2e6af0faf6be25152a67d84f5e1ae Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Fri, 8 Mar 2019 09:58:42 +0800
Subject: [PATCH] 公共卡片头部

---
 src/components/VParking.vue          | 26 ++++++++++++++++++++++++++
 src/components/base/CardTitle.vue    | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 src/images/content/cardTitleBg.png   | Bin 0 -> 2235 bytes
 src/images/content/cardTitleSide.png | Bin 0 -> 1535 bytes
 src/view/VHome.vue                   | 12 ++++++++----
 5 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 src/components/VParking.vue
 create mode 100644 src/components/base/CardTitle.vue
 create mode 100644 src/images/content/cardTitleBg.png
 create mode 100644 src/images/content/cardTitleSide.png

diff --git a/src/components/VParking.vue b/src/components/VParking.vue
new file mode 100644
index 0000000..955c379
--- /dev/null
+++ b/src/components/VParking.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="theme-wrap">
+        <card-title> <span>停车场消息</span></card-title>
+        <div class="theme-body">123</div>
+    </div>
+</template>
+
+<script>
+import CardTitle from './base/CardTitle'
+export default {
+  name: 'VParking',
+  components: {
+    CardTitle
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    .theme-wrap {
+        height: 100%;
+    }
+    .theme-body {
+        height: calc(100% - 30px);
+        background-color: #ff0;
+    }
+</style>
diff --git a/src/components/base/CardTitle.vue b/src/components/base/CardTitle.vue
new file mode 100644
index 0000000..11eb793
--- /dev/null
+++ b/src/components/base/CardTitle.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="theme-title">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'CardTitle'
+}
+</script>
+
+<style scoped lang="scss">
+    .theme-title {
+        margin-left: -2px;
+        height: 30px;
+        line-height: 30px;
+        background: url("../../images/content/cardTitleBg.png") no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .theme-title span {
+        margin-left: 60px;
+        position: relative;
+        font-size: 14px;
+    }
+
+    .theme-title span:before {
+        content: '';
+        background: url('../../images/content/cardTitleSide.png') no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        width: 40px;
+        height: 13px;
+        top: 3px;
+        left: -47px;
+    }
+
+    .theme-title span:after {
+        content: '';
+        background: url('../../images/content/cardTitleSide.png') no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        width: 40px;
+        height: 13px;
+        top: 3px;
+        right: -50px;
+    }
+</style>
diff --git a/src/images/content/cardTitleBg.png b/src/images/content/cardTitleBg.png
new file mode 100644
index 0000000..2d69514
Binary files /dev/null and b/src/images/content/cardTitleBg.png differ
diff --git a/src/images/content/cardTitleSide.png b/src/images/content/cardTitleSide.png
new file mode 100644
index 0000000..2a668c9
Binary files /dev/null and b/src/images/content/cardTitleSide.png differ
diff --git a/src/view/VHome.vue b/src/view/VHome.vue
index 36d4297..7952c4c 100644
--- a/src/view/VHome.vue
+++ b/src/view/VHome.vue
@@ -3,7 +3,9 @@
     <v-header></v-header>
     <ul class="main-wrap">
       <li class="main-left">
-        <div class="frame-wrap"></div>
+        <div class="frame-wrap">
+          <v-parking></v-parking>
+        </div>
         <div class="frame-wrap frame-wrap-center"></div>
         <div class="frame-wrap"></div>
       </li>
@@ -22,11 +24,13 @@
 <script>
 import VHeader from '../components/VHeader'
 import VMap from '../components/VMap'
+import VParking from '../components/VParking'
 export default {
   name: 'VHome',
   components: {
     VHeader,
-    VMap
+    VMap,
+    VParking
   }
 }
 </script>
@@ -58,8 +62,8 @@ export default {
   .frame-wrap{
     height: calc((100% - 20px)/3);
     border-image-source: url("../images/content/frame-wrap.png");
-    border-image-slice: 10 16 15 10 fill;
-    border-width: 10px 16px 15px 10px;
+    border-image-slice: 3 16 11 3 fill;
+    border-width: 3px 18px 11px 3px;
     border-style: solid;
     background-clip: border-box;
   }
--
libgit2 0.21.4