fix(projects): fix class name conflict with unocss icon

This commit is contained in:
Soybean 2024-03-18 07:38:21 +08:00
parent 6ad51e9431
commit 455e48f792

View File

@ -7,30 +7,30 @@ defineOptions({ name: 'SearchFooter' });
<template> <template>
<div class="h-44px flex-y-center gap-14px px-24px"> <div class="h-44px flex-y-center gap-14px px-24px">
<span class="flex-y-center"> <span class="flex-y-center">
<icon-mdi-keyboard-return class="icon-shadow icon-item" /> <icon-mdi-keyboard-return class="operate-shadow operate-item" />
<span>{{ $t('common.confirm') }}</span> <span>{{ $t('common.confirm') }}</span>
</span> </span>
<span class="flex-y-center"> <span class="flex-y-center">
<icon-mdi-arrow-up-thin class="icon-shadow icon-item" /> <icon-mdi-arrow-up-thin class="operate-shadow operate-item" />
<icon-mdi-arrow-down-thin class="icon-shadow icon-item" /> <icon-mdi-arrow-down-thin class="operate-shadow operate-item" />
<span>{{ $t('common.switch') }}</span> <span>{{ $t('common.switch') }}</span>
</span> </span>
<span class="flex-y-center"> <span class="flex-y-center">
<icon-mdi-keyboard-esc class="icon-shadow icon-item" /> <icon-mdi-keyboard-esc class="operate-shadow operate-item" />
<span>{{ $t('common.close') }}</span> <span>{{ $t('common.close') }}</span>
</span> </span>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.icon-shadow { .operate-shadow {
box-shadow: box-shadow:
inset 0 -2px #cdcde6, inset 0 -2px #cdcde6,
inset 0 0 1px 1px #fff, inset 0 0 1px 1px #fff,
0 1px 2px 1px #1e235a66; 0 1px 2px 1px #1e235a66;
} }
.icon-item { .operate-item {
--at-apply: mr-6px p-2px text-20px; --at-apply: mr-6px p-2px text-20px;
} }
</style> </style>