imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scrollbar: change color

Browse Source
This commit is contained in:
chiayin
2023-06-30 10:37:51 +08:00
parent d976bc529d
commit 466c6ea867
7 changed files with 26 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Discover/Conformance/ConformanceResults.vue
View File

@@ -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>

2
src/components/Discover/Conformance/ConformanceSidebar.vue
View File

@@ -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>

2
src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
View File

@@ -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>

13
src/components/Discover/Conformance/MoreModal.vue Normal file
View File

@@ -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>