Scrollbar: change color

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>