签到完成

ui/packages/basic/AiBar.vue

@@ -1,117 +1,113 @@
 <template>
-  <div class="aibar" :style="{ marginBottom: marginBottom }" :class="[titlePosition === 'center' ? 'aibar-center' : '']">
-    <div v-if="titlePosition === 'center'"></div>
+  <div class="aibar" :style="{ marginBottom }" :class="{'aibar-cente':titlePosition === 'center',card}">
+    <div v-if="titlePosition === 'center'"/>
     <div class="aibar-left" :class="[titlePosition === 'center' ? 'aibar-left__center' : '']">
-      <template v-if="!isHasTitleSlot">{{ title }}</template>
+      <template v-if="!$scopedSlots.title">{{ title }}</template>
       <slot name="title" v-else></slot>
     </div>
     <div class="aibar-right">
-      <slot name="right"></slot>
+      <slot v-if="$scopedSlots.right" name="right"/>
+      <slot/>
     </div>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'AiBar',
+export default {
+  name: 'AiBar',
 
-    props: {
-      title: {
-        type: String
-      },
-
-      customCliker: {
-        type: Boolean,
-        default: false
-      },
-
-      marginBottom: {
-        type: String,
-        default: '16px'
-      },
-
-      titlePosition: {
-        type: String,
-        default: 'left'
-      }
+  props: {
+    title: {
+      type: String
     },
 
-    computed: {
-      isHasTitleSlot () {
-        return this.$slots.title
-      }
+    customCliker: {
+      type: Boolean,
+      default: false
     },
 
-    data () {
-      return {
-      }
-    }
-  }
+    marginBottom: {
+      type: String,
+      default: '16px'
+    },
+
+    titlePosition: {
+      type: String,
+      default: 'left'
+    },
+    card: Boolean
+  },
+}
 </script>
 
 <style lang="scss" scoped>
-  .aibar {
-    display: flex;
+.aibar {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  height: 56px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #EEEEEE;
+  box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
+
+  &.card {
+    background: #fff;
+  }
+
+  .aibar-left {
+    color: #222;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .aibar-left__center {
     position: relative;
+    width: 556px;
+    text-align: center;
+    word-break: break-all;
+    line-height: 24px;
+  }
+
+  .aibar-right {
+    display: flex;
     align-items: center;
-    justify-content: space-between;
-    height: 56px;
-    padding: 0 16px;
-    box-sizing: border-box;
-    border-bottom: 1px solid #EEEEEE;
+    color: #5088FF;
+    font-size: 12px;
 
-    .aibar-left {
-      color: #222;
-      font-size: 16px;
-      font-weight: 700;
+    i {
+      line-height: 1;
+      color: #5088FF;
     }
 
-    .aibar-left__center {
-      position: relative;
-      width: 556px;
-      text-align: center;
-      word-break: break-all;
-      line-height: 24px;
+    span {
+      font-size: 12px;
     }
 
-    .aibar-right {
+    & > div, & > a {
       display: flex;
       align-items: center;
-      color: #5088FF;
-      font-size: 12px;
+      margin-right: 20px;
 
-      i {
-        line-height: 1;
-        color: #5088FF;
-      }
-
-      span {
-        font-size: 12px;
-      }
-
-      & > div, & > a {
-        display: flex;
-        align-items: center;
-        margin-right: 20px;
-
-        &:last-child {
-          margin-right: 0;
-        }
+      &:last-child {
+        margin-right: 0;
       }
     }
   }
+}
 
-  .aibar-center {
-    height: auto;
-    padding: 10px 0;
+.aibar-center {
+  height: auto;
+  padding: 10px 0;
 
-    h2 {
-      margin: 0 0 10px 0;
-    }
-
-    p {
-      color: #888;
-      font-size: 14px;
-    }
+  h2 {
+    margin: 0 0 10px 0;
   }
+
+  p {
+    color: #888;
+    font-size: 14px;
+  }
+}
 </style>