<template> <div class="card-item"> <img src="../assets/images/card-item-bg.png" class="bg"/> <div class="card-item-content"> <div class="card-item-table"> <div class="card-item-cell price" v-if="data.voucherType === '2'"> <div class="label">免费</div> <div class="des">价值{{data.cost}}元</div> </div> <div class="card-item-cell price" v-else> <div class="label">{{data.cost}}<span class="unit">元</span></div> <div class="des">{{data.voucherType === '1' ? '提醒券' : data.voucherType === '2' ? '健康券' : data.voucherType === '3' ? '代金券' : ''}}</div> </div> <div class="card-item-cell info"> <div class="title">{{data.voucherName}}</div> <p>类型:{{data.categoryName}}</p> <p>机构:{{data.deptName}}</p> </div> </div> </div> </div> </template> <script> export default { name: 'CardItem', data () { return { } }, props: ['data'], created () { }, mounted: function () { }, computed: { }, methods: { } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .card-item { position: relative; margin-bottom: 0.6em; } .card-item > .bg { width: 100%; } .card-item > .card-item-content{ position: absolute; right: 0; left:0; top:0; bottom: 0; } .card-item > .card-item-content > .card-item-table { display: table; width: 100%; height: 100%; font-size: 1em; } .card-item > .card-item-content > .card-item-table > .card-item-cell { display: table-cell; vertical-align: middle; } .card-item > .card-item-content > .card-item-table > .price{ width: 30%; color:#43d1be; text-align:center; } .card-item > .card-item-content > .card-item-table > .price .label { font-size: 2em; font-weight: bold; color:#43d1be; padding: 0; } .card-item > .card-item-content > .card-item-table > .price .label > .unit { font-size:40%; font-weight:normal; } .card-item > .card-item-content > .card-item-table > .price > .des { font-size: 1em; margin-top: 8px; } .card-item > .card-item-content > .card-item-table > .info { width:70%; color:#35444f; padding-left:1em; position:relative; font-size: 0.9em; } .card-item > .card-item-content > .card-item-table > .info p { margin-bottom: 0; /* display: inline-block; white-space: nowrap; overflow: hidden; width: 13em; */ } .card-item > .card-item-content > .card-item-table > .info .title{ font-size: 1.3em; font-weight:bold; /* margin-bottom:0.5em; */ margin-bottom: 0; white-space: nowrap; max-width: 13.2em; overflow: hidden; } </style>