修改数据产品列表页样式

lihua
Showing 1 changed file with 32 additions and 41 deletions
src/views/data_asset/registerCatalogManagement.vue
--- a/src/views/data_asset/registerCatalogManagement.vue
View file @2ef5e7a
+++ b/src/views/data_asset/registerCatalogManagement.vue
View file @2ef5e7a
@@ -427,37 +427,6 @@ const handleUploadClose = (itemGuid) => {
        </div>
        <div v-if="listData.length" v-for="(item, index) in listData" :key="item.guid" @click="handleDataClick(item)"
          :class="{ 'v-border-top': item.isRegister == 'Y', 'card-content': true, 'v-border-no-pass': item.isRegister == 'N' }">
-          <!-- <div class="top-dam-img"></div>
-          <div class="dam-catalog-content">
-            <div class="title-row">
-              <div class="title">
-                <ellipsis-tooltip :content="item.damName" class-name="w100f"
-                  :refName="'tooltipOver' + item.guid"></ellipsis-tooltip>
-              </div>
-            </div>
-            <div class="type-btn">
-              <div class="type">{{ item.subjectDomainName || item.subjectDomain || '--' }}</div>
-              <div class="type">{{ item.damTypeName || '--' }}</div>
-              <div class="type">{{ item.isRegister == 'Y' ? '已登记' : '未登记' }}</div>
-              <div class="type" v-if="item.foundMode">{{ item.foundMode ? (item.foundMode === 1 ? '自建' : '加工交付') : '--'
-                }}</div>
-            </div>
-            <div class="desc">{{ item.propertyDescription }}</div>
-            <el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click"
-              popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0">
-              <template #reference>
-                <el-icon class="list-more" color="#666" v-show="getTableBtns(item)?.length > 0"
-                  @click.stop="cardBtnVisible = true">
-                  <MoreFilled />
-                </el-icon>
-              </template>
-<div class="levitation-ul">
-  <span class="levitation-li" v-for="btn in getTableBtns(item)" @click="tableBtnClick({ row: item }, btn)">{{
-    btn.label }}</span>
-</div>
-</el-popover>
-</div> --><!-- 新增框放在列表的第一个 -->
          <div>
            <div class="v-top">
              <div class="top-tip">
@@ -479,11 +448,15 @@ const handleUploadClose = (itemGuid) => {
                  </div>
                </ellipsis-tooltip>
              </div>
+              <div class="label-main"> 
+                <div class="dataLabel" v-if="item.damTypeName">{{ item.damTypeName  }}</div>
+                <div class="dataLabel" style="margin-left: 4px;">{{ item.subjectDomainName || item.subjectDomain || '--' }}</div>
+              </div>
            </div>
            <div class="v-middle">
              <div class="mid-content">
-                <div class="left">资产类型</div>
+                <div class="left">登记主体</div>
-                <div class="right">{{ item.damTypeName || '--' }}</div>
+                <div class="right">{{ item.rightMainName || '--' }}</div>
              </div>
              <div class="mid-content">
                <div class="left">产品来源</div>
@@ -491,8 +464,8 @@ const handleUploadClose = (itemGuid) => {
                  }}</div>
              </div>
              <div class="mid-content">
-                <div class="left">所属主题</div>
+                <div class="left">登记机构</div>
-                <div class="right">{{ item.subjectDomainName || item.subjectDomain || '--' }}</div>
+                <div class="right">{{ item.exchangeName || '--' }}</div>
              </div>
            </div>
            <div class="v-bottom">
@@ -556,7 +529,7 @@ const handleUploadClose = (itemGuid) => {
  // height: calc(100% - 44px);
  display: flex;
  flex-wrap: wrap;
-  gap: 20px 20px;
+  gap: 15px 15px;
  align-content: flex-start;
  overflow-y: auto;
@@ -565,7 +538,7 @@ const handleUploadClose = (itemGuid) => {
  .v-add {
-    width: calc(25% - 20px);
+    width: calc(25% - 13px);
    min-width: 220px;
    height: 268px;
    // height: auto;
@@ -606,9 +579,9 @@ const handleUploadClose = (itemGuid) => {
  }
  .card-content {
-    width: calc(25% - 20px);
+    width: calc(25% - 13px);
    min-width: 220px;
-    height: 268px;
+    height: 264px;
    // height: auto;
    background: #FAFAFA;
    border: 1px solid rgba(229, 229, 229, 1);
@@ -659,7 +632,7 @@ const handleUploadClose = (itemGuid) => {
      display: flex;
      flex-direction: column;
      background: #FFFFFF;
-      padding: 16px 11px;
+      padding: 10px 11px;
      .top-tip {
        display: flex;
@@ -696,6 +669,22 @@ const handleUploadClose = (itemGuid) => {
        text-overflow: ellipsis;
      }
+      .label-main {
+        display: flex;
+        margin-top: 8px;
+            .dataLabel {
+                background: #F2F2F2;
+                border-radius: 2px;
+                font-size: 12px;
+                color: #666;
+                text-align: center;
+                line-height: 21px;
+                font-weight: 400;
+                padding: 0 8px;
+              }
+      }
      .top-des1 {
        font-size: 14px;
        color: #999999;
@@ -724,7 +713,8 @@ const handleUploadClose = (itemGuid) => {
        display: flex;
        justify-content: space-between;
        align-items: center;
-        padding: 8px 0;
+        padding-top: 8px;
+        //padding: 8px 0;
        .left {
          font-size: 14px;
@@ -745,6 +735,7 @@ const handleUploadClose = (itemGuid) => {
      display: flex;
      justify-content: end;
      padding: 0 11px;
+      margin-top: 12px;
    }
    .top-dam-img {