事件卡片

src/utils/model/card/index.vue

@@ -72,6 +72,9 @@ export default {
         width: 100%;
         display: flex;
         justify-content: space-between;
+        font-family: var(--fm);
+        color: var(--color1);
+        font-weight: bold;
     }
     .head:empty{
         border-bottom: none !important;

src/views/event/components/view/card.vue

@@ -1,14 +1,14 @@
 <template>
-  <div>
+  <div class="eventCard">
     <el-row :gutter="12">
       <el-col :span="6" v-for="(item, itemIndex) in tableData" :key="itemIndex" style="height:420px">
-        <el-card shadow="always" style="background:white;box-shadow:2px 2px 10px #909090" class="card">
-          <div style="display:flex;justify-content:space-between;align-items:center">
-            <p style="font-size:18px"><span># {{ (itemIndex + 1) + ((queryParams.current - 1) * queryParams.size)
-            }}</span></p>
-            <div class="fun" style="color:blue;display:flex;justify-content: flex-end;" v-if="!projectId && !show">
-              <span style="margin-right: 10px;" @click="handleEdit(item)" v-if="true">编辑</span>
-              <span style="margin-right: 10px;" @click="handleEdit(item)" v-else>查看</span>
+        <myCard shadow="always">
+          <div slot="head">
+            <div style="font-size:18px">
+              <!-- <span># {{ (itemIndex + 1) + ((queryParams.current - 1) * queryParams.size)}}</span> -->
+              <span>{{ item.questionName }}</span>
+            </div>
+            <div v-if="!projectId && !show">
               <el-dropdown @command="handleCommand($event, item)" trigger="click">
                 <span class="el-dropdown-link">
                   <i class="el-icon-more" style="font-size: 16px;"></i>
@@ -26,38 +26,38 @@
                       </el-dropdown-menu>
                     </el-dropdown>
                   </el-dropdown-item>
-                  <el-dropdown-item command="3" divided class="color-red">删除</el-dropdown-item>
+                  <!-- <el-dropdown-item command="3" divided class="color-red">删除</el-dropdown-item> -->
                 </el-dropdown-menu>
               </el-dropdown>
             </div>
           </div>
-
-          <p>
-            <span style="font-weight:bolder">事件名称：</span>
-            <el-tooltip class="item" effect="light" placement="top" :content="item.questionName">
-              <el-link type="primary"
-                @click="checkVisual(item.scenarioNames, item.id, item.questionName)">{{ item.questionName }}</el-link>
-            </el-tooltip>
-          </p>
-          <p><span style="font-weight:bolder">相关报告数量：</span> <span>{{ item.reportNum || 0 }}</span> </p>
-          <p><span style="font-weight:bolder">相关专题库数量：</span> <span>{{ item.reportNum || 0 }}</span> </p>
-          <p>
-            <span style="font-weight:bolder">应用场景：</span>
-            <el-tooltip class="item" effect="light" placement="top">
-              <div slot="content"><span v-for="name in item.scenarioNames">{{ name }}&nbsp;&nbsp;</span></div>
-              <span v-if="item.scenarioNames">{{ item.scenarioNames[0] }}
-                <span v-if="item.scenarioNames.length > 1">
-
-                  <span><img src="@/assets/img/更多.png" style="width:18px;vertical-align:bottom" /></span>
-                </span>
-              </span>
-            </el-tooltip>
-          </p>
-          <p><span style="font-weight:bolder">事件时间：</span> <span>{{ item.eventDate }}</span> </p>
-          <p><span style="font-weight:bolder">描述：</span> <span>{{ item.description }}</span> </p>
-          <p><span style="font-weight:bolder">创建人：</span> <span>{{ item.createPersonName }}</span> </p>
-          <p><span style="font-weight:bolder">创建时间：</span> <span>{{ item.createTime }}</span> </p>
-        </el-card>
+          <div>
+            <el-form label-position="right" label-width="140px">
+              <el-form-item label="报告数量："> {{ item.reportNum || 0  }} </el-form-item>
+              <el-form-item label="专题库数量：">{{ item.reportNum || 0 }}</el-form-item>
+              <el-form-item label="应用场景：">
+                <el-tooltip class="item" effect="light" placement="top">
+                  <div slot="content"><span v-for="name in item.scenarioNames">{{ name }}&nbsp;&nbsp;</span></div>
+                  <span v-if="item.scenarioNames">{{ item.scenarioNames[0] }}
+                    <span v-if="item.scenarioNames.length > 1">
+                      <span><img src="@/assets/img/更多.png" style="width:18px;vertical-align:bottom" /></span>
+                    </span>
+                  </span>
+                </el-tooltip>
+              </el-form-item>
+              <el-form-item label="时间：">{{ item.eventDate }}</el-form-item>
+              <el-form-item label="描述：">{{ item.description }}</el-form-item>
+              <el-form-item label="创建人：">{{ item.createPersonName }}</el-form-item>
+              <el-form-item label="创建时间：">{{ item.createTime }}</el-form-item>
+            </el-form>
+          </div>
+          <div slot="foot">
+            <div class="btn">
+              <i class="el-icon-edit" @click="handleEdit(item)"></i>
+              <i class="el-icon-delete" @click="handleCommand('3', item)"></i>
+            </div>
+          </div>
+        </myCard>
       </el-col>
     </el-row>
   </div>
@@ -80,4 +80,32 @@ export default {
   methods: {},
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss">
+.eventCard{
+  .el-form-item__label{
+    // text-align: justify;
+    // text-align-last: justify;
+    // text-justify: distribute-all-lines;
+
+  }
+  .el-form-item{
+    margin-bottom: 0px;
+  }
+  .el-form-item__content{
+    font-family: var(--fm) !important;
+    color: var(--color2) !important;
+  }
+}
+</style>
+<style lang="scss" scoped>
+  .eventCard{
+    .btn{
+      margin: 0;
+      i{
+        color: var(--color2);
+        font-size: 16px;
+        margin-right:16px
+      }
+    }
+  }
+</style>