123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- <template>
- <div class='m-card' :class='"type-"+type' v-if='type != 4'>
- <div class='top-left'></div>
- <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 class='bottom-right'></div>
- </div>
- <!-- 更多主要设备 卡片 -->
- <div class='m-card type-4' v-else>
- <div class='type'>更多主要设备</div>
- <div class='toggle'>展开</div>
- </div>
- </template>
- <script>
- /**
- * 设备卡片
- * @props type 类型
- * @props name 设备类型名称
- * @props total 设备数量
- * @props unit 单位
- * @props number 重要维保/维修 的数量
- */
- export default {
- name: 'Card',
- props: {
- type: {
- //1 正常, 2维保 3 维修 4 更多设备
- 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: 8px 0 8px 12px;
- line-height: 25px;
- display: flex;
- flex-direction: column;
- position: relative;
- overflow: hidden;
- .name,
- .number {
- font-size: 14px;
- font-weight: 500;
- color: #333333;
- flex: 1;
- }
- .number {
- font-size: 20px;
- i {
- font-size: 12px;
- color: #666;
- }
- }
- .type {
- font-size: 13px;
- font-weight: 500;
- color: #2bad88;
- flex: 1;
- }
- .tag {
- position: absolute;
- right: 5px;
- top: 0;
- border-top: 10px solid #0481e1;
- border-left: 5px solid #0481e1;
- border-right: 5px solid #0481e1;
- border-bottom: 3px solid transparent;
- }
- .top-left {
- width: 100px;
- height: 100px;
- background: #edf6fd;
- border-radius: 100px;
- position: absolute;
- top: -50px;
- left: -30px;
- z-index: -1;
- }
- .bottom-right {
- width: 80px;
- height: 80px;
- background: #edf6fd;
- border-radius: 100px;
- position: absolute;
- bottom: -40px;
- right: -30px;
- z-index: -1;
- }
- }
- // 正常运维
- .type-1 {
- // background: url('../../assets/images/normal.png');
- border: 2.5px solid #aadfd0;
- .top-left,
- .bottom-right {
- background: #f0f9f7;
- }
- }
- // 重要维保
- .type-2 {
- border: 2.5px solid #9accf3;
- .top-left,
- .bottom-right {
- background: #edf6fd;
- }
- .type {
- color: #0481e1;
- }
- .tag {
- border-color: #0481e1;
- border-bottom: 3px solid transparent;
- }
- }
- // 重要维修
- .type-3 {
- border: 2.5px solid #efb1ad;
- .top-left,
- .bottom-right {
- background: #fcf1f0;
- }
- .type {
- color: #d83931;
- }
- .tag {
- border-color: #d83931;
- border-bottom: 3px solid transparent;
- }
- }
- // 更多设备
- .type-4 {
- display: flex;
- padding: 0;
- font-size: 14px;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- position: relative;
- border: 2.5px solid #cecfcf;
- .type {
- color: #666666;
- height: 20px;
- font-size: 14px;
- line-height: 20px;
- text-align: center;
- }
- .tag {
- border-color: #666;
- border-bottom: 3px solid transparent;
- }
- .toggle {
- color: #0481e1;
- font-size: 12px;
- font-weight: 400;
- position: absolute;
- bottom: 6px;
- right: 8px;
- }
- }
- </style>
|