chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: edit layout ui

Browse source
This commit is contained in:
Net 2024-09-06 11:09:42 +07:00
parent 00c12e92e2
commit 9c8cae5273
1 changed files with 42 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/components/ItemCard.vue
View file

@ -1,44 +1,51 @@
<script setup lang="ts"> <script setup lang="ts">
import AppBox from './app/AppBox.vue'; import { ref } from 'vue';
import { Icon } from '@iconify/vue'; import { Icon } from '@iconify/vue';
defineProps<{ import { onMounted } from 'vue';
const props = defineProps<{
icon: string; icon: string;
text: string; text: string;
color: string; iconColor: string;
bgColor: string;
changeColor?: boolean; changeColor?: boolean;
index?: number;
}>(); }>();
const _self = ref<InstanceType<typeof HTMLDivElement>>();
onMounted(() => {
if (props.index === 0) {
_self.value?.focus();
}
});
</script> </script>
<template> <template>
<AppBox <button
style=" ref="_self"
padding: 0; class="wrapper surface-1 shadow-2"
border-radius: var(--radius-2); type="submit"
width: 320px;
height: 195px;
"
bordered
class="cursor-pointer"
@click="$emit('trigger')" @click="$emit('trigger')"
style="padding: 0; border-radius: var(--radius-2); width: 320px"
> >
<div class="column" style="height: 100%"> <div class="column justify-center" style="height: 100%">
<div class="col-9 flex justify-center items-center"> <div class="col-6 flex justify-center items-center">
<Icon <div
:icon="icon" class="q-pa-md row items-center"
width="64px" :style="`border-radius: 50%; background-color: hsla(${bgColor} / 0.1)`"
:class="`${$q.dark.isActive ? '' : 'app-text-muted'}`" >
:color="changeColor ? color : ''" <Icon :icon="icon" width="53px" :color="`var(${iconColor})`" />
/> </div>
</div> </div>
<div <div
class="col-3 flex text-bold text-h6 text-center justify-center items-center variable-item-card" class="col-2 flex text-bold text-h6 text-center justify-center items-center variable-item-card"
:class="{ dark: $q.dark.isActive }" :class="{ dark: $q.dark.isActive }"
:style="`background-color: ${color}`" :style="`background-color: ${bgColor}`"
> >
<div style="color: white">{{ $t(text) }}</div> <div style="font-size: 14px">{{ $t(text) }}</div>
</div> </div>
</div> </div>
</AppBox> </button>
</template> </template>
<style scoped> <style scoped>
@ -59,4 +66,15 @@ defineProps<{
--_var-filter: color; --_var-filter: color;
} }
} }
.wrapper {
appearance: none;
background: transparent;
outline: none;
border: none;
}
.wrapper:focus {
border: 2px solid var(--blue-6);
border-radius: 10px;
}
</style> </style>