fix: 实体关系模块右侧列表详情样式调整

2023-06-30 10:41:29 +08:00
parent 30883802cb
commit 0e752cb3a3
6 changed files with 138 additions and 68 deletions
--- a/src/assets/css/components/views/charts2/graphRightDetailBlock.scss
+++ b/src/assets/css/components/views/charts2/graphRightDetailBlock.scss
@@ -1,11 +1,23 @@
-$font-size: 14px;
+$font-size: 12px;
 .graph-detail-basic-info {
  position: relative;
-  padding-bottom: 20px;
+  padding-bottom: 12px;
  display: flex;
  justify-content: space-between;
  //height: 100%;

+  .graph-detail-header {
+    display: flex;
+    flex-direction: column;
+
+    .entity-graph-type {
+      font-family: NotoSansSChineseRegular;
+      font-size: 12px;
+      color: #717171;
+      font-weight: 400;
+    }
+  }
+
  .entity-type {
    color: #717171;
  }
@@ -31,8 +43,8 @@ $font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
-        height: 28px;
-        width: 28px;
+        height: 18px;
+        width: 18px;
        border-radius: 50%;
        background-color: #EFF1F4;
        cursor: pointer;
@@ -40,15 +52,16 @@ $font-size: 14px;

        i {
          color: #717171;
-          font-size: 12px;
+          font-size: 10px;
+          -webkit-transform: scale(0.8); // 强制给文字进行缩放，达到12px以下小字体的效果
        }
      }
    }
  }

  .graph-detail__icon {
-    width: 52px;
-    height: 52px;
+    width: 50px;
+    height: 50px;
    overflow: hidden;
    display: flex;
    justify-content: center;
@@ -56,7 +69,7 @@ $font-size: 14px;
    align-items: center;
    margin-right: 10px;
    border-radius: 50%;
-    background-color: #e5edf3;
+    background-color: #F3F7FA;

    i {
      font-size: 26px;
@@ -72,7 +85,8 @@ $font-size: 14px;
 }

 .graph-basic-info__block {
-  margin: 10px 0;
+  margin-top: 12px;
+  margin-bottom: 18px;

  .graph-header__icon {
    width: 3px !important;
@@ -103,6 +117,7 @@ $font-size: 14px;
        color: #353636;
        font-weight: 400;
        overflow-wrap: break-word;
+        line-height: normal;
      }
    }

@@ -117,18 +132,21 @@ $font-size: 14px;

      .graph-relationship-item-label, .graph-relationship-item-value {
        font-family: NotoSansSChineseRegular;
-        font-size: $font-size; // 原型上为12px，呈现效果不好，后续再调节
+        font-size: $font-size;
        color: #353636;
        font-weight: 400;
        //height: 40px;
        display: flex;
        align-items: center !important;
        padding-top: 1px;
+
+        .graph-relationship-item-label-icon {
+          font-size: 14px;
+        }
      }

      .graph-relationship-item-value {
        color: #717171;
-
      }
    }
  }
@@ -143,7 +161,13 @@ $font-size: 14px;
      margin-bottom: 10px;
      margin-right: 9px;
      padding: 0 8px;
+      height: 24px;
+      line-height: 24px;
      font-size: 12px;
+
+      span {
+        margin-top: -2px;
+      }
    }
  }
 }
@@ -152,6 +176,10 @@ $font-size: 14px;
  padding-bottom: 10px;
 }

+.padding-b-4 {
+  padding-bottom: 4px;
+}
+
 //修改popover样式
 .graph-popover {
  width: auto !important;
@@ -165,6 +193,16 @@ $font-size: 14px;
  background: #303133 !important;
 }

-.graph-expand-relationship__icon:hover {
-  color: #D80000 !important;
+.graph-expand-relationship__icon {
+  font-size: 13px;
+  &:hover {
+    color: #D80000 !important;
+  }
+}
+
+.graph-basic-info__block-title {
+  font-family: NotoSansHans-Medium;
+  font-size: 13px;
+  color: #353636;
+  font-weight: 600;
 }
--- a/src/assets/css/components/views/charts2/graphRightListBlock.scss
+++ b/src/assets/css/components/views/charts2/graphRightListBlock.scss
@@ -1,4 +1,4 @@
-$font-size: 14px;
+$font-size: 12px;
 .graph-list-header {
  display: flex;
  justify-content: space-between;
@@ -6,7 +6,7 @@ $font-size: 14px;
  .graph-list-header-title {
    display: flex;
    align-items: center;
-    margin-bottom: 14px;
+    margin-bottom: 10px;

    span {
      font-family: PingFangSC-Semibold;
@@ -25,7 +25,7 @@ $font-size: 14px;

  .graph-list-header-number {
    font-family: NotoSansSChineseRegular;
-    font-size: 14px;
+    font-size: 12px;
    color: #717171;
    font-weight: 400;

@@ -36,46 +36,47 @@ $font-size: 14px;
 }

 .graph-list-expand-btn-block {
-  margin-top: 20px;
-  margin-bottom: 30px;
+  margin-top: 16px;
+  margin-bottom: 24px;

  .graph-list-expand-btn {
+    width: 90px;
+    height: 28px;
+    line-height: 28px;
    background: #38ACD2;
-    border: 1px solid rgba(46, 136, 166, 0.85);
-    border-radius: 2px;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: NotoSansHans-Medium;
+    font-weight: 500;
+    padding: 10px 0;
+    cursor: pointer;

-    span {
-      display: flex;
-      align-items: center;
-
-      i {
-        font-size: 18px;
-        margin-right: 7px;
-      }
-    }
-
-    &.el-button {
-      padding: 8px 10px !important;
+    i {
+      font-size: 16px;
+      margin-right: 7px;
    }
  }
 }

 .graph-list-content-header {
-  font-family: NotoSansHans-Medium;
  font-size: 14px;
  color: #353636;
-  font-weight: bold;
+  font-weight: 500;
 }

 .graph-list-content {
  padding: 0 10px;

  .graph-list-item-ip {
-    margin-bottom: 12px;
+    margin-bottom: 10px;
    font-family: NotoSansSChineseRegular;
    font-size: $font-size;
    color: #353636;
-    font-weight: 600;
+    font-weight: 400;
    cursor: pointer;

    &:hover {
@@ -88,29 +89,31 @@ $font-size: 14px;
    background: rgba(247, 247, 247, 1);
    border: 1px solid rgba(226, 229, 236, 1);
    border-radius: 2px;
-    padding: 15px;
+    padding: 10px 15px;

    .graph-list-item, .graph-list-item__app {
      display: flex;

      .graph-list-item-label, .graph-list-item-label__app {
        width: 62px;
-        margin-right: 15px;
+        //margin-right: 15px;
        font-family: NotoSansSChineseRegular;
-        font-size: $font-size; // 原型上为12px，但页面呈现效果不好
+        font-size: $font-size;
        color: #717171;
        font-weight: 400;
        flex-shrink: 0;
      }

      .graph-list-item-label__app {
-        width: 78px;
-        line-height: 24px;
+        width: 73px;
+        display: flex;
+        align-items: flex-start;
+        line-height: 22px;
      }

      .graph-list-country-flag {
-        width: 20px;
-        height: 18px;
+        width: 16px;
+        height: 14px;
        margin-right: 5px;
      }

@@ -119,6 +122,9 @@ $font-size: 14px;
        font-size: $font-size;
        color: #353636;
        font-weight: 400;
+        line-height: 18px;
+        display: flex;
+        align-items: center;
      }

      .graph-list-item-value1 {
@@ -137,9 +143,17 @@ $font-size: 14px;
  padding-bottom: 20px;
 }

+.padding-b-16 {
+  padding-bottom: 16px;
+}
+
+.padding-b-12 {
+  padding-bottom: 12px;
+}
+
 .graph-list-dividing-line {
  width: 300px;
  height: 1px;
  background: #ECECEC;
-  margin: 12px 0;
+  margin: 11px 0;
 }
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -34,6 +34,7 @@
    .overview__title {
      color: #333;
      font-size: 14px;
+      font-weight: 600;
    }
    .overview__content-loading.overview__content {
      position: relative;
@@ -130,6 +131,9 @@
              background-color: #F6C738;
            }
          }
+          &.row__content--width90 {
+            width: 90px;
+          }
          &.row__content--width200 {
            width: 200px;
          }
@@ -144,7 +148,7 @@
        }
        .row__contents {
          display: flex;
-          flex-direction: column;
+          //flex-direction: column;

          .row__content {
            padding: 2px 0;
@@ -157,14 +161,21 @@
              padding-bottom: 0;
            }
          }
+          .row__content-accept {
+            margin-left: 39px;
+          }
          .row__charts-msg {
            width: auto;
-            padding-right: 20px;
+            padding-right: 10px;
+          }
+          .new-row__charts-msg {
+            width: auto;
+            padding-right: 10px;
          }
          .row__charts {
            height: 20px;
            width: 60px;
-            padding-left: 5px;
+            //padding-left: 5px;
          }
        }
        .row__charts {
@@ -292,3 +303,6 @@
    }
  }
 }
+.margin-l-140 {
+  margin-left: 140px;
+}