|
|
@@ -1,9 +1,14 @@
|
|
|
/* 自定义tabs */
|
|
|
<template>
|
|
|
<transition>
|
|
|
- <div class="gy-tab" :class="typeClass">
|
|
|
- <div class="gy-tab-success" @click="showDoThing()">{{title}}</div>
|
|
|
- <div>
|
|
|
+ <div :class='areaClass'>
|
|
|
+ <div class="gy-card-header">
|
|
|
+ <div :class='circleColor'></div>
|
|
|
+ <span class="gy-card-title">{{ title }}</span>
|
|
|
+ <img class="gy-card-decoration01" src="../../assets/img/controlcenter/decoration01.png">
|
|
|
+ <img class="gy-card-decoration02" src="../../assets/img/controlcenter/decoration02.png">
|
|
|
+ </div>
|
|
|
+ <div :class='contentClass'>
|
|
|
<slot></slot>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -13,59 +18,212 @@
|
|
|
<script>
|
|
|
/**
|
|
|
* todo 鼠标的焦点事件
|
|
|
- * 放大,拖动
|
|
|
+ * todo 放大
|
|
|
+ * todo 拖动
|
|
|
+ * todo 控制区
|
|
|
+ *
|
|
|
+ * 动态值:
|
|
|
+ * 1. label-area中的 height,margin-top
|
|
|
+ * 2. gy-card-circle-yellow中的颜色
|
|
|
+ * 3. gy-card-content-25 中的高度
|
|
|
+ *
|
|
|
*/
|
|
|
export default {
|
|
|
name: 'gy-card',
|
|
|
props: {
|
|
|
- // 标题
|
|
|
title: {
|
|
|
type: String,
|
|
|
- default: '',
|
|
|
+ default: '校验区',
|
|
|
required: true
|
|
|
},
|
|
|
- // type 会有 success warning error 三种类型,用来控制显示样式
|
|
|
- type: {
|
|
|
+ areaStyle: {
|
|
|
type: String,
|
|
|
- default: 'success'
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- visible: true
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- showDoThing() {
|
|
|
- this.visible = false;
|
|
|
+ default: 'check',
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+ circleStyle: {
|
|
|
+ type: String,
|
|
|
+ default: 'green',
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+ contentStyle: {
|
|
|
+ type: String,
|
|
|
+ default: '44',
|
|
|
+ required: true
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- //通过调用的type 来计算需要显示的class
|
|
|
- typeClass() {
|
|
|
- return `gy-tab--${this.type}`;
|
|
|
+ areaClass() {
|
|
|
+ return `gy-card-area-${this.areaStyle}`;
|
|
|
+ },
|
|
|
+ circleColor() {
|
|
|
+ return `gy-card-circle-${this.circleStyle}`;
|
|
|
+ },
|
|
|
+ contentClass() {
|
|
|
+ return `gy-card-content-${this.contentStyle}`;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped="scoped">
|
|
|
- .gy-tab {
|
|
|
- margin: auto;
|
|
|
+ .gy-card-area-problem {
|
|
|
+ position: relative;
|
|
|
+ height: 89vh;
|
|
|
+ background-color: #292929;
|
|
|
+ border-radius: 7px;
|
|
|
+ margin: 0px;
|
|
|
+ padding-top: 0;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gy-card-header {
|
|
|
+ position: relative;
|
|
|
+ height: 40px;
|
|
|
+ background-color: #292929;
|
|
|
+ color: white;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gy-card-content-89 {
|
|
|
+ position: relative;
|
|
|
+ height: calc(89vh - 50px);
|
|
|
+ background-color: #000000;
|
|
|
+ color: white;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 7px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gy-card-content-44 {
|
|
|
+ position: relative;
|
|
|
+ height: calc(44vh - 50px);
|
|
|
+ background-color: #000000;
|
|
|
+ color: white;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 7px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gy-card-content-37 {
|
|
|
+ position: relative;
|
|
|
+ height: calc(37vh - 50px);
|
|
|
+ background-color: #000000;
|
|
|
+ color: white;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 7px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gy-card-content-25 {
|
|
|
+ position: relative;
|
|
|
+ height: calc(25vh - 50px);
|
|
|
+ background-color: #000000;
|
|
|
+ color: white;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 7px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gy-card-circle-green {
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ background-color: #008000;
|
|
|
+ -moz-border-radius: 50%;
|
|
|
+ -webkit-border-radius: 50%;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gy-card-circle-yellow {
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ background-color: #ffff00;
|
|
|
+ -moz-border-radius: 50%;
|
|
|
+ -webkit-border-radius: 50%;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gy-card-title {
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gy-card-decoration01 {
|
|
|
+ position: absolute;
|
|
|
+ right: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gy-card-decoration02 {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gy-card-area-alarm {
|
|
|
+ position: relative;
|
|
|
+ height: 25vh;
|
|
|
+ margin-top: 10px;
|
|
|
+ background-color: #292929;
|
|
|
+ border-radius: 7px;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gy-card-area-check {
|
|
|
+ position: relative;
|
|
|
+ height: 44vh;
|
|
|
+ background-color: #292929;
|
|
|
+ border-radius: 7px;
|
|
|
+ margin: 0px;
|
|
|
+ padding-top: 0;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
- .gy-tab--success {
|
|
|
- background: #f0f9eb;
|
|
|
- color: cadetblue;
|
|
|
+ .gy-card-area-control {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 44vh;
|
|
|
+ background-color: #292929;
|
|
|
+ border-radius: 7px;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding-top: 0;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
- .gy-tab--warning {
|
|
|
- background: #fdf6ec;
|
|
|
- color: #e6a28b;
|
|
|
+ .gy-card-area-label {
|
|
|
+ position: relative;
|
|
|
+ height: 25vh;
|
|
|
+ margin-top: 10px;
|
|
|
+ background-color: #292929;
|
|
|
+ border-radius: 7px;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
- .gy-tab--error {
|
|
|
- background: #fef0f0;
|
|
|
- color: #f681b0;
|
|
|
+ .gy-card-area-recommended {
|
|
|
+ position: relative;
|
|
|
+ height: 37vh;
|
|
|
+ background-color: #292929;
|
|
|
+ border-radius: 7px;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
</style>
|
yangxuxian