feat: ui走查修复

src/packages/card/card.scss

@@ -1,3 +1,17 @@
+
+@mixin nut-card-border {
+	position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #e6e6e6;
+  transform: scaleY(0.5);
+  content: ' ';
+  display: block;
+}
 .nut-card-container{
   background: #fff;
   border-radius: 4px;
@@ -7,14 +21,20 @@
     color: $text-black-1;
     font-size: $font-size-body-small;
     line-height: 24px;
+    display: flex;
+    justify-content: space-between;
     .nut-card-title{
       flex: 1;
+      font-size: $font-size-body-normal;
+      font-weight: 600;
+      text-align: justify;
+    }
+    .nut-card-supply-title{ 
+      color: $text-black-4;
+      margin-left: 12px;
     }
     .nut-card-icon{
-      flex-basis: 17px;
-      .nut-icon-self{
-        width: 100%
-      }
+      margin-left: 12px;
     }
   }
   .switch-icon-class{
@@ -25,7 +45,10 @@
     padding: 12px;
     color: $text-black-2;
     font-size: $font-size-body-small;
-    @include nut-cell-border;
+    position: relative;
+    &:before{
+      @include nut-card-border;
+    }
   }
   .mut-card-bottom{
     display: flex;
@@ -34,12 +57,17 @@
     flex-wrap: wrap;
     min-height: 52px;
     padding: 0 12px;
-    @include nut-cell-border;
-    button{
+    position: relative;
+
+    &::before{
+      @include nut-card-border;
+    }    button{
       margin: 0 5px;
     }
   }
 }
 .full-content{
   margin: 0px;
-}
+}
+
+

src/packages/card/card.vue

@@ -6,7 +6,10 @@
       @click="headerClickHandler"
     >
       <slot name="title">
-        <div class="nut-card-title">{{title}}</div>
+        <div class="nut-card-title" v-if="title">{{title}}</div>
+        <div class="nut-card-title-content" v-if="!title">{{content}}</div>
+        <!-- 添加补充说明文案 -->
+        <div class="nut-card-supply-title" v-if="supplyTitle">{{supplyTitle}}</div>
         <div class="nut-card-icon" v-if="openIcon">
           <nut-icon
             type="self"
@@ -16,7 +19,7 @@
       </slot>
     </div>
     <template v-if="isOpen">
-      <div class="mut-card-content" v-if="content || hasContent">
+      <div class="mut-card-content" v-if="showContent">
         <slot name="content">{{content}}</slot>
       </div>
       <div class="mut-card-bottom" v-if="(footerButtons && footerButtons.length>0)||hasFooter">
@@ -24,6 +27,7 @@
           <template v-for="(item,index) in footerButtons">
             <nut-button
               :key="index"
+              color="#646464"
               size="small"
               type="bottom"
               @click="clickHandler(item.event)"
@@ -44,6 +48,11 @@ export default {
       type: String,
       default: ''
     },
+    supplyTitle: {
+      // 卡片标题补充文案
+      type: String,
+      default: ''
+    },
     openIcon: {
       // switch icon是否展示
       type: Boolean,
@@ -79,7 +88,12 @@ export default {
       default: false
     }
   },
-  computed: {},
+  computed: {
+    showContent() {
+      const { title, content, hasContent } = this;
+      return (title && content) || hasContent;
+    }
+  },
   methods: {
     clickHandler(event) {
       this.$emit(event);

src/packages/card/demo.vue

@@ -2,18 +2,19 @@
   <div class="demo-list card-list">
     <h4>基础样式</h4>
     <nut-card
-      title="这里是默认卡片内容"
+      content="这里是默认卡片内容"
       :footer-buttons="footerButtons"
       @click1="clickHandler1"
       @click2="clickHandler2"
     ></nut-card>
 
     <h4>可添加标题的卡片</h4>
-    <nut-card title="卡片标题" content="这里是卡片内容区域"></nut-card>
+    <nut-card title="卡片标题" supply-title="一小时" content="这里是卡片内容区域"></nut-card>
 
     <h4>带标题/操作</h4>
     <nut-card
       title="卡片标题"
+      supply-title="一小时"
       content="这里是卡片内容区域"
       :footer-buttons="footerButtons"
       @click1="clickHandler1"
@@ -21,10 +22,23 @@
     ></nut-card>
 
     <h4>可展开/收起的卡片</h4>
-    <nut-card title="卡片标题" content="这里是卡片内容区域" open-icon :is-open="isOpen"  @switch-click="switchClick"></nut-card>
+    <nut-card
+      title="卡片标题"
+      content="这里是卡片内容区域"
+      open-icon
+      :is-open="isOpen"
+      @switch-click="switchClick"
+    ></nut-card>
 
     <h4>通栏卡片</h4>
-    <nut-card title="卡片标题" content="这里是卡片内容区域" is-full></nut-card>
+    <nut-card
+      title="卡片标题"
+      content="这里是卡片内容区域"
+      is-full
+      open-icon
+      :is-open="isFullOpen"
+      @switch-click="switchFullClick"
+    ></nut-card>
 
     <h4>通过Slot插槽分发内容</h4>
     <nut-card has-content has-footer>
@@ -34,8 +48,8 @@
       </div>
       <div slot="content">这里是卡片内容区域</div>
       <div slot="footer">
-        <nut-button size="small" type="bottom" @click="clickHandler1">操作一</nut-button>
-        <nut-button size="small" type="bottom" @click="clickHandler2">操作二</nut-button>
+        <nut-button size="small" type="bottom" color="#646464" @click="clickHandler1">操作一</nut-button>
+        <nut-button size="small" type="bottom" color="#646464" @click="clickHandler2">操作二</nut-button>
       </div>
     </nut-card>
   </div>
@@ -46,6 +60,7 @@ export default {
   data() {
     return {
       isOpen: false,
+      isFullOpen: false,
       footerButtons: [
         { event: 'click1', clickName: '操作一' }, // event的值 对应组件的点击事件 clickName为按钮显示的文案
         { event: 'click2', clickName: '操作二' }
@@ -64,20 +79,30 @@ export default {
     switchClick() {
       // 展开收起卡片
       this.isOpen = !this.isOpen;
+    },
+    switchFullClick() {
+      // 展开收起卡片
+      this.isFullOpen = !this.isFullOpen;
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.card-list{
-  h4{
+.card-list {
+  h4 {
     padding: 0 15px;
   }
 }
 .card-title {
   display: flex;
   justify-content: space-between;
+  width: 100%;
+  .right {
+    flex: 1;
+    font-size: $font-size-body-normal;
+    font-weight: 600;
+  }
   .left {
     color: $text-black-4;
   }

src/packages/card/doc.md

@@ -6,69 +6,98 @@
 基础样式
 
 ```html
-<nut-card
-  title="这里是默认卡片内容"
-  :footer-buttons="footerButtons"
-  @click1="clickHandler1"
-  @click2="clickHandler2"
-></nut-card>
+    <nut-card
+      content="这里是默认卡片内容"
+      :footer-buttons="footerButtons"
+      @click1="clickHandler1"
+      @click2="clickHandler2"
+    ></nut-card>
 ```
 
 
 可添加标题的卡片
 
 ```html
-<nut-card title="卡片标题" content="这里是卡片内容区域"></nut-card>
+    <nut-card title="卡片标题" supply-title="一小时" content="这里是卡片内容区域"></nut-card>
 ```
 
 带标题/操作
 ```html
-<nut-card
-  title="卡片标题"
-  content="这里是卡片内容区域"
-  :footer-buttons="footerButtons"
-  @click1="clickHandler1"
-  @click2="clickHandler2"
-></nut-card>
+    <nut-card
+      title="卡片标题"
+      supply-title="一小时"
+      content="这里是卡片内容区域"
+      :footer-buttons="footerButtons"
+      @click1="clickHandler1"
+      @click2="clickHandler2"
+    ></nut-card>
 ```
 
 
 可展开/收起的卡片
 
 ```html
-<nut-card title="卡片标题" content="这里是卡片内容区域" open-icon :is-open="isOpen"  @switch-click="switchClick"></nut-card>
+    <nut-card
+      title="卡片标题"
+      content="这里是卡片内容区域"
+      open-icon
+      :is-open="isOpen"
+      @switch-click="switchClick"
+    ></nut-card>
 ```
 
 通栏卡片
 
 ```html
-<nut-card title="卡片标题" content="这里是卡片内容区域" is-full></nut-card>
+    <nut-card
+      title="卡片标题"
+      content="这里是卡片内容区域"
+      is-full
+      open-icon
+      :is-open="isFullOpen"
+      @switch-click="switchFullClick"
+    ></nut-card>
 ```
 ## 自定义内容
 Card组件提供了多个插槽，可以灵活地自定义内容
 
 ```html
-<nut-card has-content has-footer>
-  <div slot="title" class="card-title">
-    <div class="right">我是标题</div>
-    <div class="left">一小时</div>
-  </div>
-  <div slot="content">这里是卡片内容区域</div>
-  <div slot="footer">
-    <nut-button size="small" type="bottom" @click="clickHandler1">操作一</nut-button>
-    <nut-button size="small" type="bottom" @click="clickHandler2">操作二</nut-button>
-  </div>
-</nut-card>
+    <nut-card has-content has-footer>
+      <div slot="title" class="card-title">
+        <div class="right">我是标题</div>
+        <div class="left">一小时</div>
+      </div>
+      <div slot="content">这里是卡片内容区域</div>
+      <div slot="footer">
+        <nut-button size="small" type="bottom" color="#646464" @click="clickHandler1">操作一</nut-button>
+        <nut-button size="small" type="bottom" color="#646464" @click="clickHandler2">操作二</nut-button>
+      </div>
+    </nut-card>
+```
+```css
+.card-title {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  .right {
+    flex: 1;
+    font-size: $font-size-body-normal;
+    font-weight: 600;
+  }
+  .left {
+    color: $text-black-4;
+  }
+}
 ```
-
 以上操作对应的js部分
 ```javascript
 export default {
   data() {
     return {
       isOpen: false,
+      isFullOpen: false,
       footerButtons: [
-        { event: 'click1', clickName: '操作一' }, // event的值对应组件的点击事件， clickName的值为按钮显示的文案
+        { event: 'click1', clickName: '操作一' }, // event的值 对应组件的点击事件 clickName为按钮显示的文案
         { event: 'click2', clickName: '操作二' }
       ]
     };
@@ -85,6 +114,10 @@ export default {
     switchClick() {
       // 展开收起卡片
       this.isOpen = !this.isOpen;
+    },
+    switchFullClick() {
+      // 展开收起卡片
+      this.isFullOpen = !this.isFullOpen;
     }
   }
 };
@@ -98,6 +131,7 @@ export default {
 | 字段    | 说明                                  | 类型   | 默认值                                                   |
 |---------|---------------------------------------|--------|----------------------------------------------------------|
 | title     | 标题 | String | '' |
+| supply-title     | 补充说明文案 | String | '' |
 | open-icon  | 展开收起图标是否展示 | Boolean | false |
 | content  | 内容 | String  | '' |
 | is-open  | 是否展开卡片内容 | Boolean  | true |