Scrollbar: change color

src/assets/components.css

@@ -43,12 +43,11 @@
   }
 
   .scrollbar::-webkit-scrollbar-thumb {
-    /* @apply  rounded-full */
+    @apply bg-neutral-300 rounded-full
-    @apply bg-primary rounded-full
   }
 
   .scrollbar::-webkit-scrollbar-thumb:hover {
-    @apply bg-primary
+    @apply bg-neutral-400
   }
 }
 

src/components/Discover/Conformance/ConformanceResults.vue

@@ -91,7 +91,7 @@
                 <td class="p-2 text-right truncate">{{ trace.count }}</td>
                 <td class="p-2 text-center">{{ trace.ratio }}%</td>
                 <td class="p-2 text-center">
-                  <div class="btn btn-sm btn-c-primary cursor-pointer" @click="switchCaseData(trace.id)">More</div>
+                  <div class="btn btn-sm btn-c-primary cursor-pointer" @click="issusModal = true">More</div>
                 </td>
               </tr>
             </tbody>
@@ -190,7 +190,7 @@
                 <td class="p-2 text-right truncate">{{ trace.count }}</td>
                 <td class="p-2 text-center">{{ trace.ratio }}%</td>
                 <td class="p-2 text-center">
-                  <div class="btn btn-sm btn-c-primary cursor-pointer" @click="switchCaseData(trace.id)">More</div>
+                  <div class="btn btn-sm btn-c-primary cursor-pointer" @click="issusModal = true">More</div>
                 </td>
               </tr>
             </tbody>
@@ -198,14 +198,17 @@
       </div>
     </div>
   </section>
+  <MoreModal :issusModal="issusModal"></MoreModal>
 </section>
 </template>
 <script>
 import iconNA from '@/components/icons/IconNA.vue';
+import MoreModal from './MoreModal.vue';
 
 export default {
   data() {
     return {
+      issusModal: false,
       traceList: [
         {
           id: 1,
@@ -241,6 +244,7 @@ export default {
   },
   components: {
     iconNA,
+    MoreModal,
   },
   methods: {
     /**
@@ -251,13 +255,6 @@ export default {
      progressWidth(value){
       return `width:${value}%;`
     },
-    /**
-     * switch case data
-     * @param {number} id
-     */
-    switchCaseData(id) {
-      console.log(id);
-    },
   }
 }
 </script>

src/components/Discover/Conformance/ConformanceSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-<section class="h-full shadow-[1px_0px_4px_rgba(0,0,0,0.25)] bg-neutral-100 absolute inset-y-0 left-0 " :class="isShowBar?'w-full':'w-[300px]'">
+<section class="h-full shadow-[1px_0px_4px_rgba(0,0,0,0.25)] bg-neutral-100 absolute inset-y-0 left-0" :class="isShowBar?'w-full':'w-[300px]'">
   <!-- header -->
   <div class="bg-neutral-200 px-4">
     <p class="h2">Rule Settings</p>

src/components/Discover/Conformance/ConformanceSidebar/ActList.vue

@@ -4,7 +4,7 @@
     <p class="h2 pl-2 border-b mb-3">Activity</p>
     <div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]">
         <div class="flex items-center w-[166px]" v-for="(act, index) in data" :key="index">
-            <Checkbox v-model="actList" :inputId="index" name="actList" :value="act" />
+            <Checkbox v-model="actList" :inputId="index.toString()" name="actList" :value="act" />
             <label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}{{ index }}</label>
         </div>
     </div>

src/components/Discover/Conformance/MoreModal.vue

@@ -0,0 +1,13 @@
+<template>
+<Dialog :visible="issusModal" modal header="Header" :style="{ width: '50vw' }">
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Dialog>
+</template>
+<script>
+export default {
+  props: ['issusModal'],
+}
+</script>

src/main.js

@@ -44,6 +44,7 @@ import Slider from 'primevue/slider';
 import Calendar from 'primevue/calendar';
 import Tooltip from 'primevue/tooltip';
 import Checkbox from 'primevue/checkbox';
+import Dialog from 'primevue/dialog';
 
 const emitter = mitt();
 const app = createApp(App);
@@ -93,6 +94,7 @@ app.component('Chart', Chart);
 app.component('Slider', Slider);
 app.component('Calendar', Calendar);
 app.component('Checkbox', Checkbox);
+app.component('Dialog', Dialog);
 app.component('Draggable', draggable);  // 拖曳
 app.directive('tooltip', Tooltip);
 

src/views/Discover/Conformance/index.vue

@@ -1,6 +1,6 @@
 <template>
   <main class="h-screen-main">
-    <!-- <StatusBar></StatusBar> -->
+    <StatusBar></StatusBar>
     <div class="h-full relative bg-neutral-50">
       <ConformanceSidebar></ConformanceSidebar>
       <ConformanceResults></ConformanceResults>