ui库和web端产品库合并版本(还需修复细节)

ui/packages/basic/AiBar.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="aibar" :style="{ marginBottom: marginBottom }" :class="[titlePosition === 'center' ? 'aibar-center' : '']">
+    <div v-if="titlePosition === 'center'"></div>
+    <div class="aibar-left" :class="[titlePosition === 'center' ? 'aibar-left__center' : '']">
+      <template v-if="!isHasTitleSlot">{{ title }}</template>
+      <slot name="title" v-else></slot>
+    </div>
+    <div class="aibar-right">
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'AiBar',
+
+    props: {
+      title: {
+        type: String
+      },
+
+      customCliker: {
+        type: Boolean,
+        default: false
+      },
+
+      marginBottom: {
+        type: String,
+        default: '16px'
+      },
+
+      titlePosition: {
+        type: String,
+        default: 'left'
+      }
+    },
+
+    computed: {
+      isHasTitleSlot () {
+        return this.$slots.title
+      }
+    },
+
+    data () {
+      return {
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .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;
+
+    .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;
+      color: #5088FF;
+      font-size: 12px;
+
+      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;
+        }
+      }
+    }
+  }
+
+  .aibar-center {
+    height: auto;
+    padding: 10px 0;
+
+    h2 {
+      margin: 0 0 10px 0;
+    }
+
+    p {
+      color: #888;
+      font-size: 14px;
+    }
+  }
+</style>