优化卡片默认值

src/components/CardTemplate/index.vue

@@ -32,7 +32,7 @@
               </el-tooltip>
             </div>
           </div>
-          <div v-if="cardInfo.info.data.length > 0" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
+          <div v-if="cardInfo.info.data.length > 0" style="padding:15px" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
             <el-row :gutter="10">
               <el-col v-for="(item, index) in cardInfo.info.data" :key="index" :span="cardInfo.info.col">
                 <div class="flex-row" :style="infoStyle">
@@ -112,7 +112,7 @@
             </div>
           </div>
           <el-image class="img" :style="{ height: cardInfo.imgHeight + 'px' }" :src="imgVal(dataInfo)" alt="" />
-          <div v-if="cardInfo.info.data.length > 0" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
+          <div v-if="cardInfo.info.data.length > 0" style="padding:15px" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
             <el-row :gutter="10">
               <el-col v-for="(item, index) in cardInfo.info.data" :key="index" :span="cardInfo.info.col">
                 <div class="flex-row" :style="infoStyle">
@@ -280,7 +280,7 @@
               </el-tooltip> -->
             </div>
           </div>
-          <div v-if="cardInfo.info.data.length > 0" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
+          <div v-if="cardInfo.info.data.length > 0" style="padding:15px" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
             <el-row :gutter="10">
               <el-col v-for="(item, index) in cardInfo.info.data" :key="index" :span="cardInfo.info.col">
                 <div class="flex-row" :style="infoStyle">
@@ -493,21 +493,20 @@ export default {
     cardStyle2(model, item) {
       let style = {
         border: `1px solid ${this.cardInfo.borderColor}`,
-        boxShadow: `0 2px ${this.cardInfo.shadowPx}px 0 ${this.cardInfo.shadowColor} !important`
+        boxShadow: `0 2px ${this.cardInfo.shadowPx}px 0 ${this.cardInfo.shadowColor} !important`,
+        background: `linear-gradient(to bottom, ${this.cardInfo.bgColor} 0%, #ffffff 80%)`
       }
       if (this.cardInfo.termInfo.length > 0) {
         this.cardInfo.termInfo.forEach((val) => {
           if (val.string == '==' && val.val == item[this.cardInfo.subTitle.field]) {
             style.background = `linear-gradient(to bottom, ${val.style} 0%, #ffffff 80%)  `
-          } else if (val.string == '>' && item[this.cardInfo.subTitle.field] > val.val) {
+          }
+          if (val.string == '>' && item[this.cardInfo.subTitle.field] > val.val) {
             style.background = `linear-gradient(to bottom, ${val.style} 0%, #ffffff 80%)  `
-          } else if (val.string == '<' && item[this.cardInfo.subTitle.field] < val.val) {
+          }
+          if (val.string == '<' && item[this.cardInfo.subTitle.field] < val.val) {
             style.background = `linear-gradient(to bottom, ${val.style} 0%, #ffffff 80%)  `
-          } else {
-            style.background = `linear-gradient(to bottom, ${this.cardInfo.bgColor} 0%, #ffffff 80%)  `
           }
-
-          // style.background = `linear-gradient(to bottom, ${this.cardInfo.bgColor} 0%, #ffffff 80%)  `
         })
       }
       return { ...style }
@@ -637,6 +636,7 @@ export default {
   width: 100%;
   display: flex;
   justify-content: space-between;
+  padding: 10px;
   .titleLeft {
     width: 50%;
     overflow: hidden;