123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- <template>
- <div class='m-card' :class='"type-"+type'>
- <div class='name'>{{name}}</div>
- <div class='number'>
- {{total}}
- <i>{{unit}}</i>
- </div>
- <div class='type'>
- {{typeDict[type]}}
- <i v-show='[2,3].includes(type)'>:</i>
- <i v-show='[2,3].includes(type)'>{{number}}</i>
- </div>
- <!-- 右上角tag -->
- <div class='tag' v-if='[2,3].includes(type)'></div>
- </div>
- </template>
- <script>
- /**
- * 设备卡片
- * @props type 类型
- * @props name 设备类型名称
- * @props total 设备数量
- * @props unit 单位
- * @props number 重要维保/维修 的数量
- */
- export default {
- name: 'Card',
- props: {
- type: {
- //1 正常, 2维保 3 维修
- type: Number,
- default: 0,
- required: true,
- },
- name: {
- type: String,
- default: '',
- required: true,
- },
- unit: {
- type: String,
- default: '',
- required: true,
- },
- total: {
- type: Number,
- default: 0,
- required: true,
- },
- number: {
- type: Number,
- // default: 0,
- required: false,
- },
- },
- data() {
- return {
- typeDict: {
- 1: '正常运维',
- 2: '重要维保',
- 3: '重要维修',
- },
- }
- },
- created() {
- console.log(this.number, this.type)
- },
- components: {},
- beforeMount() {},
- mounted() {},
- methods: {},
- }
- </script>
- <style lang='less' scoped>
- .m-card {
- width: 100%;
- height: 100%;
- border-radius: 4px;
- background-size: cover !important;
- padding: 15px 0 15px 13px;
- line-height: 25px;
- display: flex;
- flex-direction: column;
- position: relative;
- .name,
- .number {
- font-size: 15px;
- font-weight: 500;
- color: #333333;
- flex: 1;
- }
- .number > i {
- font-size: 14px;
- color: #666;
- }
- .type {
- font-size: 14px;
- font-weight: 500;
- color: #2bad88;
- flex: 1;
- }
- .tag {
- position: absolute;
- right: 15px;
- top: 6px;
- border-top: 10px solid #0481e1;
- border-left: 5px solid #0481e1;
- border-right: 5px solid #0481e1;
- border-bottom: 3px solid transparent;
- }
- }
- // 正常运维
- .type-1,
- .type-4 {
- background: url('../../assets/images/normal.png');
- }
- // 重要维保
- .type-2,
- .type-5 {
- background: url('../../assets/images/weibao.png');
- .type {
- color: #0481e1;
- }
- .tag {
- border-color: #0481e1;
- border-bottom: 3px solid transparent;
- }
- }
- // 重要维修
- .type-3,
- .type-6 {
- background: url('../../assets/images/weixiu.png');
- .type {
- color: #d83931;
- }
- .tag {
- border-color: #d83931;
- border-bottom: 3px solid transparent;
- }
- }
- </style>
|