公共卡片头部

liuqimichale
1 parent 50b9599a
Showing 5 changed files with 83 additions and 4 deletions
src/components/VParking.vue
src/components/base/CardTitle.vue
src/images/content/cardTitleBg.png
src/images/content/cardTitleSide.png
src/view/VHome.vue
+<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>
+<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>
@@ -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;
   }