update home

src/views/copilot/components/select.vue

@@ -0,0 +1,75 @@
+<!-- 
+    filename: select.vue
+    author: liubin
+    date: 2024-04-17 09:50:03
+    description: 
+-->
+
+<template>
+  <div style="display: inline-block; text-align: center">
+    <div class="copilot-select">
+      <button
+        type="button"
+        v-for="item in options"
+        :key="item"
+        @click="currentActive = item"
+        :class="[item == currentActive ? 'active' : '']"
+      >
+        {{ item }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CopilotSelect",
+  components: {},
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      currentActive: '',
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped>
+.copilot-select {
+  display: flex;
+  align-items: center;
+  background: #01306c;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+button {
+  color: #fff;
+  padding: 8px 12px;
+  cursor: pointer;
+  position: relative;
+  transition: all .3s;
+}
+
+button.active,
+button:hover {
+  background: #1d74d8;
+}
+
+button:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  top: 20%;
+  left: -1px;
+  width: 2px;
+  height: 60%;
+  background: #02236d;
+}
+</style>