aiCopilot样式提交

ui/packages/ai/AiCopilot.vue

@@ -0,0 +1,107 @@
+<script>
+export default {
+  name: "AiCopilot",
+  props: {
+    title: {default: "Copilot小助理"}
+  },
+  data() {
+    return {
+      show: false,
+      expand: false
+    }
+  },
+  computed: {
+    expandBtn: v => v.expand ? "收起" : "展开"
+  }
+}
+</script>
+
+<template>
+  <section class="AiCopilot">
+    <div class="copilot" v-if="show">
+      <div class="flex header">
+        <b class="fill" v-text="title"/>
+        <div class="expandBtn" v-text="expandBtn" @click="expand=!expand"/>
+        <div class="minimal" v-text="'最小化'" @click="show=false"/>
+      </div>
+      <div class="flex content">
+        <div class="left" :class="{expand}"></div>
+        <div class="right"></div>
+      </div>
+    </div>
+    <img class="icon" src="https://cdn.sinoecare.com/i/2024/06/04/665ec6f5ef213.png" @click="show=true"/>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.AiCopilot {
+  position: fixed;
+  right: 20px;
+  bottom: 48px;
+  display: flex;
+  align-items: flex-end;
+  gap: 18px;
+
+  .copilot {
+    border-radius: 0 0 8px 8px;
+    height: 600px;
+    background: #FFFFFF;
+    box-shadow: 0 0 20px 1px #0a255c1a;
+
+    .header {
+      height: 48px;
+      background-image: linear-gradient(90deg, #3577FD 0%, #216AFD 100%);
+      box-shadow: 0 2px 6px 0 #0a255c14;
+      border-radius: 8px 8px 0 0;
+      padding: 0 8px 0 14px;
+      color: #fff;
+      font-size: 14px;
+      gap: 14px;
+
+      & > b {
+        font-size: 16px;
+      }
+
+      .expandBtn, .minimal {
+        padding-left: 18px;
+        font-weight: normal;
+        background-position: left center;
+        background-repeat: no-repeat;
+        background-size: 14px 14px;
+        line-height: 20px;
+      }
+
+      .minimal {
+        background-image: url("https://cdn.sinoecare.com/i/2024/06/04/665ed2bd0a79e.png");
+      }
+
+      .expandBtn {
+        background-image: url("https://cdn.sinoecare.com/i/2024/06/04/665ed2bd8b021.png");
+      }
+    }
+
+    .content {
+      height: max-content;
+
+      .left {
+        width: 0;
+        transition: width 1s;
+
+        &.expand {
+          width: 332px;
+        }
+      }
+
+      .right {
+        width: 348px;
+      }
+    }
+  }
+
+  .icon {
+    width: 68px;
+    height: 58px;
+    cursor: pointer;
+  }
+}
+</style>