add 我的卡券账户前端页面 table card

Andy
1 parent e4acf226
Showing 5 changed files with 228 additions and 70 deletions
src/assets/cardticket/card_gray.png
src/assets/cardticket/card_red.png
src/styles/index.scss
src/views/account/index.vue
src/views/cardticket/index.vue
@@ -107,3 +107,40 @@ p{
 .margin-top-24{
   margin-top: 24px;
 }
+.bgcolor-fff{
+  background-color: #fff;
+}
+.boxshadow-4{
+  box-shadow:0px 4px 10px 0px rgba(225,227,228,1);
+  border-radius:4px;
+}
+.padding-0{
+  padding: 0!important;
+}
+.margin-bottom16{
+  margin-bottom: 16px;
+}
+.float-left{
+  float: left;
+}
+.float-right{
+  float: right;
+}
+/*不换行 省略号*/
+.hs-hidden-nowrap{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+//定位
+.pos-rel{
+  position: relative;
+}
+.pos-abs{
+  position: absolute;
+}
+//鼠标
+.hs-cursor-pointer{
+  cursor: pointer;
+}
+
@@ -31,7 +31,7 @@
     </el-row>
     <!--账户明细 sta-->
     <el-card shadow="always" class="card-second-top margin-top-24">
-      <el-tabs :tab-position="left" >
+      <el-tabs :tab-position="tabPosition" >
         <el-tab-pane label="充值记录">
           <el-table
             :data="paytableData"
@@ -102,13 +102,6 @@
         </el-tab-pane>
       </el-tabs>
-     <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-        <el-tab-pane label="充值" name="first">
-
-        </el-tab-pane>
-        <el-tab-pane label="支出" name="second">配置管理</el-tab-pane>
-      </el-tabs>-->
-
     </el-card>
   </div>
 </template>
@@ -129,6 +122,7 @@ export default {
   data() {
     return {
       list: null,
+      tabPosition:'top',
       listLoading: true,
       btnLoading:false,
       loading:false,
@@ -232,5 +226,4 @@ export default {
   .el-card__header{
     padding:10px 20px!important;;
   }
-
 </style>
-<template>
-  <div class="app-container">
-    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
-
-    <el-tree
-      ref="tree2"
-      :data="data2"
-      :props="defaultProps"
-      :filter-node-method="filterNode"
-      class="filter-tree"
-      default-expand-all
-    />
+<template>
+  <div class="app-container" style="padding: 0px">
+    <!--卡券 sta-->
+    <el-row :gutter="16" class="">
+      <el-col :span="6" v-for="(ticket,id) in ticketList" :key="id" class="margin-bottom16">
+        <el-card class="box-card">
+          <div class="ticket-title boxshadow-4  " :class="ticket.ptype == 1 ?'eff-bgcolor': 'off-bgcolor'">
+            <div class=" float-left" :class="ticket.ptype == 1 ?'eff-icon': 'off-icon'"></div>
+            <div class="ticket-name hs-hidden-nowrap hs-cursor-pointer float-left" >{{ticket.plname}}</div>
+            <div class="ticket-oper float-right">{{ticket.pname}}</div>
+          </div>
+          <div class="ticket-content">
+            <div class="ticket-main clearfix">
+              <div class=" hs-hidden-nowrap hs-cursor-pointer float-left" :class="ticket.ptype == 1 ?'ticket-effmoney': 'ticket-offmoney'">{{ticket.pmoney}}</div>
+              <div class="ticket-notes float-left">元 优惠券</div>
+            </div>
+            <div class="ticket-time">有效时间:{{ticket.ptime}}</div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
@@ -19,60 +28,179 @@ export default {
   data() {
     return {
-      filterText: '',
-      data2: [{
-        id: 1,
-        label: 'Level one 1',
-        children: [{
-          id: 4,
-          label: 'Level two 1-1',
-          children: [{
-            id: 9,
-            label: 'Level three 1-1-1'
-          }, {
-            id: 10,
-            label: 'Level three 1-1-2'
-          }]
-        }]
-      }, {
-        id: 2,
-        label: 'Level one 2',
-        children: [{
-          id: 5,
-          label: 'Level two 2-1'
-        }, {
-          id: 6,
-          label: 'Level two 2-2'
-        }]
-      }, {
-        id: 3,
-        label: 'Level one 3',
-        children: [{
-          id: 7,
-          label: 'Level two 3-1'
-        }, {
-          id: 8,
-          label: 'Level two 3-2'
-        }]
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      }
-    }
-  },
-  watch: {
-    filterText(val) {
-      this.$refs.tree2.filter(val)
+      ticketList:[
+        {
+          id:'123',
+          ptype:'1',
+          plname:'静雅地上停车场',
+          pname:'有效',
+          pmoney:'50',
+          ptime:'2019/8/30',
+        },
+        {
+          id:'123',
+          ptype:'2',
+          plname:'静雅地上停车场',
+          pname:'无效',
+          pmoney:'50',
+          ptime:'2019/8/30',
+        },
+        {
+          id:'123',
+          ptype:'2',
+          plname:'静雅地上停车场',
+          pname:'无效',
+          pmoney:'50',
+          ptime:'2019/8/30',
+        },
+        {
+          id:'123',
+          ptype:'1',
+          plname:'静雅地上停车场',
+          pname:'有效',
+          pmoney:'50',
+          ptime:'2019/8/30',
+        },
+        {
+          id:'123',
+          ptype:'1',
+          plname:'静雅地上停车场',
+          pname:'有效',
+          pmoney:'50',
+          ptime:'2019/8/30',
+        },
+        {
+          id:'123',
+          ptype:'2',
+          plname:'静雅地上停车场',
+          pname:'无效',
+          pmoney:'50',
+          ptime:'2019/8/30',
+        },
+        {
+          id:'123',
+          ptype:'2',
+          plname:'静雅地上停车场',
+          pname:'无效',
+          pmoney:'50',
+          ptime:'2019/8/30',
+        },
+        {
+          id:'123',
+          ptype:'1',
+          plname:'静雅地上停车场',
+          pname:'有效',
+          pmoney:'50',
+          ptime:'2019/8/30',
+        },
+      ]
     }
   },
+
   methods: {
-    filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    }
+
   }
 }
 </script>
+<style lang="scss" scoped>
+  .el-card__body{
+    padding: 0;
+  }
+  .ticket-title{
+    height: 46px;
+    line-height: 46px;
+    width: 100%;
+  }
+  .ticket-content{
+    height: 98px;
+    width: 100%;
+  }
+  .eff-bgcolor{
+    background-color: rgb(64, 158, 255);
+  }
+  .off-bgcolor{
+    background-color: #909399;
+  }
+  .eff-icon{
+    margin:8px 8px 8px 16px;
+    height: 30px;
+    width: 30px;
+    background-image: url("../../assets/cardticket/card_red.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  .off-icon{
+    margin:8px 8px 8px 16px;
+    height: 30px;
+    width: 30px;
+    background-image: url("../../assets/cardticket/card_gray.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  .ticket-name{
+    width:120px;
+    height:46px;
+    font-size:14px;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+    line-height:46px;
+  }
+  .ticket-oper{
+    font-size:12px;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+    width:42px;
+    height:20px;
+    line-height: 20px;
+    text-align: center;
+    border-radius:2px;
+    margin-top: 10px;
+    margin-right: 16px;
+    border:1px solid rgba(255,255,255,1);
+  }
+  .ticket-main{
+    width:100%;
+    height:62px;
+    .ticket-effmoney{
+      font-size:44px;
+      font-weight:600;
+      color:rgb(64, 158, 255);
+      height:62px;
+      line-height:62px;
+      margin-left: 16px;
+      max-width: 120px;
+    }
+    .ticket-offmoney{
+      font-size:44px;
+      font-weight:600;
+      color:rgba(92,92,92,1);
+      height:62px;
+      line-height:62px;
+      margin-left: 16px;
+      max-width: 120px;
+    }
+    .ticket-notes{
+      height: 20px;
+      line-height: 20px;
+      font-size:14px;
+      font-weight:500;
+      color:rgba(64,64,64,1);
+      width: 70px;
+      margin-left: 10px;
+      margin-top: 30px;
+    }
+  }
+  .ticket-time{
+    width:143px;
+    height:20px;
+    font-size:14px;
+    font-weight:500;
+    color:rgba(64,64,64,1);
+    line-height:20px;
+    margin-left: 16px;
+  }
+
+</style>
+