@ccn-ui-kit/descriptions 0.1.2

package/style/index.scss

@@ -0,0 +1,72 @@
+.ui-descriptions {
+  font-size: var(--ui-font-size-base);
+  color: #303133;
+
+  &__title {
+    margin-bottom: 20px;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: #1f2d3d;
+  }
+
+  // 用 CSS Grid 排布子项，列数由容器的 column prop 决定
+  &__body {
+    display: grid;
+  }
+
+  &__item {
+    display: flex;
+    align-items: stretch;
+    min-height: 36px;
+    padding: 10px 14px;
+    box-sizing: border-box;
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-right: 14px;
+    color: #606266;
+    font-weight: 500;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    color: #303133;
+  }
+
+  // 带边框模式：整体圆角表格，label 带独立背景色
+  &.is-bordered {
+    border: 1px solid #e4e7ed;
+    border-radius: 8px;
+    overflow: hidden;
+
+    .ui-descriptions__item {
+      min-height: 44px;
+      padding: 0;
+      border-right: 1px solid #e4e7ed;
+      border-bottom: 1px solid #e4e7ed;
+      background-color: #fff;
+    }
+
+    .ui-descriptions__label {
+      align-self: stretch;
+      margin-right: 0;
+      padding: 10px 14px;
+      background-color: #f5f7fa;
+      border-right: 1px solid #e4e7ed;
+      color: #606266;
+      font-weight: 600;
+      min-width: 100px;
+    }
+
+    .ui-descriptions__content {
+      padding: 10px 14px;
+    }
+  }
+}