update home

src/views/copilot/components/button.vue

@@ -0,0 +1,90 @@
+<!-- 
+    filename: button.vue
+    author: liubin
+    date: 2024-04-16 15:02:34
+    description: 
+-->
+
+<template>
+  <button
+    class="copilot-btn"
+    :class="[active ? 'active' : '']"
+    @click="$emit('click', label)"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script>
+export default {
+  name: "CopilotButton",
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style>
+button {
+  appearance: none;
+  outline: none;
+  border: none;
+  background: none;
+}
+</style>
+
+<style scoped>
+.copilot-btn {
+  flex: 1;
+  position: relative;
+  background: #006acd40;
+  backdrop-filter: blur(3px);
+  text-align: center;
+  padding: 12px;
+  padding-left: 20px;
+  color: #fff;
+  font-size: 22px;
+  letter-spacing: 10px;
+  cursor: pointer;
+}
+
+.copilot-btn.active {
+  background: linear-gradient(
+    to top,
+    #159aff99,
+    #159aff44,
+    #006acd40
+  ) !important;
+}
+
+.copilot-btn::before,
+.copilot-btn::after {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 0;
+  background: transparent;
+  border-style: solid;
+  border-width: 2px;
+  border-color: transparent;
+  border-top-color: #007be4;
+}
+
+.copilot-btn::before {
+  left: 0;
+  border-left-color: #007be4;
+}
+
+.copilot-btn::after {
+  right: 0;
+  border-right-color: #007be4;
+}
+</style>