修改bug

src/views/copilot/factoryData/components/rightContainer.vue

@@ -8,9 +8,7 @@
 <template>
   <div class="copilot-container">
     <!-- refresh btn  -->
-    <button
-      v-if="false"
-      style="
+    <button v-if="false" style="
         appearance: none;
         outline: none;
         border: none;
@@ -20,54 +18,44 @@
         position: absolute;
         top: 8px;
         right: 8px;
-      "
-      @click="$emit('refresh')"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        style="width: 24px; height: 24px"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
-        />
+      " @click="$emit('refresh')">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        style="width: 24px; height: 24px">
+        <path stroke-linecap="round" stroke-linejoin="round"
+          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
       </svg>
     </button>
     <!-- decoration  -->
     <div class="corner tl"></div>
     <div class="corner tr"></div>
-    <div  class="corner bl"></div>
-    <div  class="corner br"></div>
+    <div class="corner bl"></div>
+    <div class="corner br"></div>
     <!-- content  -->
-    <div
-      class="container-head"
-      :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
-    >
+    <div class="container-head" ref="container-head"
+      :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
       <Icon :icon="icon"></Icon>
       <h2 class="container-title">{{ title }}</h2>
+      <div class="button-than" style="margin-left: auto;">
+        <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
+          @click="() => $emit('update:than', i)" />
+      </div>
     </div>
-    <div
-      class="container-body"
-      :class="[
-        side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
-      ]"
-    >
+    <div class="container-body" :class="[
+      side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
+    ]">
       <slot />
     </div>
   </div>
 </template>
 
 <script>
-import ContainerIconVue from "./ContainerIcon.vue";
+import ContainerIconVue from "./ContainerIcon.vue"
+import CopilotButton from "./button.vue"
 export default {
   name: "DashboardContainer",
   components: {
     Icon: ContainerIconVue,
+    CopilotButton
   },
   props: {
     side: {
@@ -78,15 +66,28 @@ export default {
       type: String,
       default: "cube",
     },
+    than: {
+      type: String,
+    },
     title: {
       type: String,
       default: "Default Title",
     },
   },
   data() {
-    return {};
+    return {
+    };
   },
   computed: {},
+  mounted() {
+    this.$nextTick(() => {
+      let button = document.getElementsByClassName('button-than')
+      console.log(button);
+      button[0].children[0].style.borderRadius = '4px 0 0 4px'
+      button[0].children[1].style.borderRadius = '0px 4px 4px 0'
+      console.log(button[0].children[0].style);
+    })
+  },
   methods: {},
 };
 </script>