dnftools/dcalc
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

dev

Browse Source
This commit is contained in:
imelon
2025-03-29 14:17:56 +08:00
parent 4c392a23d3
commit ec261a1c3d
10 changed files with 237 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/core/basic/roleinfo.py
+4 -2
View File
@@ -13,8 +13,10 @@ class CharacterEquipInfo:
"""强化类型""" """强化类型"""
enchant: str enchant: str
"""附魔""" """附魔"""
emblems: list[str] emblem_0: str
"""徽章""" """徽章1"""
emblem_1: str
"""徽章2"""
fusion: int | None fusion: int | None
"""贴膜ID""" """贴膜ID"""
refine: int | None refine: int | None
frontend/src/components/calc/button/index.vue
-1
View File
@@ -25,7 +25,6 @@ export default defineComponent({
default: "primary" default: "primary"
} }
}, },
emits: ["click"],
setup(props, { slots }) { setup(props, { slots }) {
return () => { return () => {
const proerpties = { const proerpties = {
frontend/src/pages/Character/Equipment/Index.vue
+10 -4
View File
@@ -1,8 +1,14 @@
<template> <template>
<div class="flex flex-col gap-20px mx-10px"> <div class="flex flex-col mx-10px">
<Weapon></Weapon> <calc-collapse title="武器">
<Suit></Suit> <Weapon></Weapon>
<Universal></Universal> </calc-collapse>
<calc-collapse title="套装">
<Suit></Suit>
</calc-collapse>
<calc-collapse title="通宝">
<Universal></Universal>
</calc-collapse>
</div> </div>
</template> </template>
frontend/src/pages/Character/Equipment/components/Suit.vue
+18 -3
View File
@@ -13,6 +13,7 @@
:alt="suit.name" :alt="suit.name"
:style="{ filter: curSuit === suit.value ? '' : 'grayscale(100%)' }" :style="{ filter: curSuit === suit.value ? '' : 'grayscale(100%)' }"
@click="curSuit = suit.value" @click="curSuit = suit.value"
@dblclick="handleDoubleClick"
/> />
</div> </div>
</template> </template>
@@ -22,7 +23,13 @@
<div class="flex flex-wrap gap-4px content-start" :style="{width: `${rowCount * 32}px`}"> <div class="flex flex-wrap gap-4px content-start" :style="{width: `${rowCount * 32}px`}">
<template v-for="(equip,_) in suitEquipments" :key="_"> <template v-for="(equip,_) in suitEquipments" :key="_">
<EquipmentIcon :equipment="equip" :inactive="configStore.config.equips[equip?.itemDetailType ?? '']?.id != equip?.id" @click="chooseEqu(equip)"/> <template v-if="equip?.rarity == curRarity || !curRarity">
<EquipmentIcon :equipment="equip" :inactive="configStore.config.equips[equip?.itemDetailType ?? '']?.id != equip?.id" @click="chooseEqu(equip)"/>
</template>
<template v-else>
<EquipmentIcon/>
</template>
</template> </template>
</div> </div>
</div> </div>
@@ -57,7 +64,7 @@ const suits = computed(() => {
}) })
const suitEquipments = computed(() => { const suitEquipments = computed(() => {
const equs = infoStore.equips.filter((a) => a.suit.includes(curSuit.value.toString()) && a.suit.length === 1) const equs = infoStore.equips.filter((a) => a.suit.includes(curSuit.value.toString()) && a.suit.length === 1 )
const res: (IEquipment | undefined)[] = [] const res: (IEquipment | undefined)[] = []
const raritiyList = ['神器','传说','史诗'] const raritiyList = ['神器','传说','史诗']
@@ -80,7 +87,15 @@ const chooseEqu = async(equip: IEquipment | undefined) => {
if (equip && configStore.config.equips[equip.itemDetailType]) { if (equip && configStore.config.equips[equip.itemDetailType]) {
configStore.config.equips[equip.itemDetailType].id = equip.id configStore.config.equips[equip.itemDetailType].id = equip.id
} }
await configStore.calc() // await configStore.calc()
}
const handleDoubleClick = () => {
if(!curRarity.value) return
if(curRarity.value == '太初') return
suitEquipments.value.filter(a=>!!a && a.rarity == curRarity.value).splice(0,11).forEach((a) => {
chooseEqu(a)
})
} }
</script> </script>
frontend/src/pages/Character/Forge/components/equipment.vue
+84 -51
View File
@@ -1,52 +1,64 @@
<script lang="tsx"> <script lang="tsx">
import { computed, defineComponent, ref, renderList } from "vue" import { computed, defineComponent, ref, renderList } from 'vue'
import type { IEnchantingInfo } from "@/api/info/type" import type { IEnchantingInfo } from '@/api/info/type'
import { useInfoStore, useConfigStore } from "@/stores" import { useInfoStore, useConfigStore } from '@/stores'
export default defineComponent({ export default defineComponent({
name: "Equip", name: 'Equip',
props: { props: {
part: { part: {
type: String, type: String,
default: "头肩" default: '头肩',
} },
}, },
setup(props) { setup(props) {
const configStore = useConfigStore() const configStore = useConfigStore()
const can_upgrade = computed(() => { const can_upgrade = computed(() => {
return !["称号", "宠物"].includes(props.part as string) return !['称号', '宠物'].includes(props.part as string)
}) })
// const globalStore = useGlobalStore() // const globalStore = useGlobalStore()
/** 是否有徽章 */ /** 是否有徽章 */
const has_socket = computed(() => !["称号", "宠物", "耳环", "武器"].includes(props.part as string)) const has_socket = computed(
() => !['称号', '宠物', '耳环', '武器'].includes(props.part as string),
)
/** 是否有右侧徽章 */ /** 是否有右侧徽章 */
const has_socket_right = computed(() => has_socket.value && !["辅助装备", "魔法石"].includes(props.part as string)) const has_emblem_1 = computed(
() => has_socket.value && !['辅助装备', '魔法石'].includes(props.part as string),
)
const basicInfoStore = useInfoStore() const basicInfoStore = useInfoStore()
const enchanting_list = computed<IEnchantingInfo[] | undefined>(() => { const enchanting_list = computed<IEnchantingInfo[] | undefined>(() => {
return basicInfoStore.enchantings return basicInfoStore.enchantings
?.filter(item => item.position.includes(props.part) && !item.position.includes("武器装扮") && !item.position.includes("宠物装备")) ?.filter(
(item) =>
item.position.includes(props.part) &&
!item.position.includes('武器装扮') &&
!item.position.includes('宠物装备'),
)
.sort((a, b) => b.rate - a.rate) .sort((a, b) => b.rate - a.rate)
}) })
const emblem_list = computed<IEnchantingInfo[] | undefined>(() => { const emblem_list = computed<IEnchantingInfo[] | undefined>(() => {
return basicInfoStore.emblems.filter(item => item.position.includes(props.part)) return basicInfoStore.emblems.filter((item) => item.position.includes(props.part))
}) })
const global_change = ref(false) const global_change = ref(false)
const currentInfo = function<T>(name: string, defaultValue?: T) { const currentInfo = function <T>(name: string, defaultValue?: T) {
return computed<string | number>({ return computed<string | number>({
get() { get() {
return (configStore.config.equips?.[props.part] as Record<string, any>)?.[name] ?? defaultValue ?? 0 return (
(configStore.config.equips?.[props.part] as Record<string, any>)?.[name] ??
defaultValue ??
0
)
}, },
set(val) { set(val) {
console.log(name, val)
if (val == undefined) { if (val == undefined) {
return return
} }
if (name == "socket_right" && !has_socket_right.value) { if (name == 'emblem_1' && !has_emblem_1.value) {
// configStore.setForge(props.part, name, 0) // configStore.setForge(props.part, name, 0)
return return
} }
@@ -54,61 +66,64 @@ export default defineComponent({
let parts: string[] = [] let parts: string[] = []
if (global_change.value) { if (global_change.value) {
if (name === "enchanting") { if (name === 'enchanting') {
const enchant = basicInfoStore?.enchantings?.find(item => item.id == val) as IEnchantingInfo | undefined const enchant = basicInfoStore?.enchantings?.find((item) => item.id == val) as
| IEnchantingInfo
| undefined
if (enchant?.position) { if (enchant?.position) {
parts = enchant.position parts = enchant.position
} }
} }
if (["socket_left", "socket_right"].includes(name)) { if (['emblem_0', 'emblem_1'].includes(name)) {
const emblem = basicInfoStore?.emblems?.find(item => item.id.toString() == val.toString()) as IEnchantingInfo | undefined const emblem = basicInfoStore?.emblems?.find(
(item) => item.id.toString() == val.toString(),
) as IEnchantingInfo | undefined
if (emblem?.position) { if (emblem?.position) {
parts = emblem.position.filter(item => !["皮肤", "武器装扮", "光环"].includes(item)) parts = emblem.position.filter(
(item) => !['皮肤', '武器装扮', '光环'].includes(item),
)
} }
} }
if (["cursed_type", "cursed_number"].includes(name)) { if (['reinforce_type', 'reinforce'].includes(name)) {
parts = basicInfoStore.parts.filter(e => !["称号", "宠物"].includes(e)) parts = basicInfoStore.parts.filter((e) => !['称号', '宠物'].includes(e))
} }
} else { } else {
parts = [props.part] parts = [props.part]
} }
console.log(parts,val)
for (const part of parts) { for (const part of parts) {
if (configStore.config.equips[part]) { if (configStore.config.equips[part]) {
(configStore.config.equips[part] as Record<string, any>)[name] = val (configStore.config.equips[part] as Record<string, any>)[name] = val
} }
} }
} },
}) })
} }
// 附魔 // 附魔
const enchanting = currentInfo<string | number>("enchanting") const enchanting = currentInfo<string | number>('enchanting')
// 镶嵌栏1 // 镶嵌栏1
const socket_left = currentInfo<string | number>("socket_left", 0) const emblem_0 = currentInfo<string | number>('emblem_0', 0)
// 镶嵌栏2 // 镶嵌栏2
const socket_right = currentInfo<string | number>("socket_right") const emblem_1 = currentInfo<string | number>('emblem_1')
// 增幅 // 增幅
const reinforce_type = currentInfo<string | number>("reinforce_type", 1) const reinforce_type = currentInfo<string | number>('reinforce_type', 1)
// 增幅数值 // 增幅数值
const reinforce = currentInfo<string | number>("reinforce") const reinforce = currentInfo<string | number>('reinforce')
// 锻造数值 // 锻造数值
const dz_number = currentInfo<string | number>("dz_number") const dz_number = currentInfo<string | number>('dz_number')
/** /**
* 同步徽章1到徽章2 * 同步徽章1到徽章2
* @param val * @param val
*/ */
function changeSocket(val: number) { function changeSocket(val: number) {
if (has_socket_right.value) { if (has_emblem_1.value) {
socket_right.value = val emblem_1.value = val
} }
} }
@@ -118,7 +133,15 @@ export default defineComponent({
<div class="equ-profile-item"> <div class="equ-profile-item">
<div class="mr-10px row-name">当前部位</div> <div class="mr-10px row-name">当前部位</div>
<span> {props.part}</span> <span> {props.part}</span>
{can_upgrade.value ? <calc-checkbox style="margin-left:auto" v-model={global_change.value} label="全局修改"></calc-checkbox> : <div></div>} {can_upgrade.value ? (
<calc-checkbox
style="margin-left:auto"
v-model={global_change.value}
label="全局修改"
></calc-checkbox>
) : (
<div></div>
)}
</div> </div>
{can_upgrade.value ? ( {can_upgrade.value ? (
<div class="equ-profile-item"> <div class="equ-profile-item">
@@ -128,15 +151,17 @@ export default defineComponent({
<calc-option value={2}>强化</calc-option> <calc-option value={2}>强化</calc-option>
</calc-select> </calc-select>
<calc-select v-model={reinforce.value} class="flex-1 !h-20px"> <calc-select v-model={reinforce.value} class="flex-1 !h-20px">
{renderList(32, i => ( {renderList(32, (i) => (
<calc-option value={i - 1}>{i - 1}</calc-option> <calc-option value={i - 1}>{i - 1}</calc-option>
))} ))}
</calc-select> </calc-select>
{props.part == '武器' && (<calc-select v-model={dz_number.value} class="flex-1 !h-20px"> {props.part == '武器' && (
{renderList(9, i => ( <calc-select v-model={dz_number.value} class="flex-1 !h-20px">
{renderList(9, (i) => (
<calc-option value={i - 1}>锻造+ {i - 1}</calc-option> <calc-option value={i - 1}>锻造+ {i - 1}</calc-option>
))} ))}
</calc-select>)} </calc-select>
)}
</div> </div>
) : ( ) : (
<div></div> <div></div>
@@ -145,7 +170,7 @@ export default defineComponent({
<div class="row-name">附魔</div> <div class="row-name">附魔</div>
<calc-select v-model={enchanting.value} class="flex-1 !h-20px"> <calc-select v-model={enchanting.value} class="flex-1 !h-20px">
<calc-option value={0}>无</calc-option> <calc-option value={0}>无</calc-option>
{renderList(enchanting_list.value ?? [], item => ( {renderList(enchanting_list.value ?? [], (item) => (
<calc-option value={item.id}>{item.props}</calc-option> <calc-option value={item.id}>{item.props}</calc-option>
))} ))}
</calc-select> </calc-select>
@@ -153,17 +178,25 @@ export default defineComponent({
{has_socket.value ? ( {has_socket.value ? (
<div class="equ-profile-item"> <div class="equ-profile-item">
<div class="row-name">徽章</div> <div class="row-name">徽章</div>
<calc-select onChange={changeSocket} v-model={socket_left.value} class="flex-1 !h-20px"> <calc-select
onChange={changeSocket}
v-model={emblem_0.value}
class="flex-1 !h-20px"
>
<calc-option value={0}>无</calc-option> <calc-option value={0}>无</calc-option>
{renderList(emblem_list.value ?? [], item => ( {renderList(emblem_list.value ?? [], (item) => (
<calc-option value={item.id}>{`${item.rarity}${item.type}徽章[${item.props}]`}</calc-option> <calc-option
value={item.id}
>{`${item.rarity}${item.type}徽章[${item.props}]`}</calc-option>
))} ))}
</calc-select> </calc-select>
{has_socket_right.value && ( {has_emblem_1.value && (
<calc-select v-model={socket_right.value} class="flex-1 !h-20px"> <calc-select v-model={emblem_1.value} class="flex-1 !h-20px">
<calc-option value={0}>无</calc-option> <calc-option value={0}>无</calc-option>
{renderList(emblem_list.value ?? [], item => ( {renderList(emblem_list.value ?? [], (item) => (
<calc-option value={item.id}>{`${item.rarity}${item.type}徽章[${item.props}]`}</calc-option> <calc-option
value={item.id}
>{`${item.rarity}${item.type}徽章[${item.props}]`}</calc-option>
))} ))}
</calc-select> </calc-select>
)} )}
@@ -174,7 +207,7 @@ export default defineComponent({
</div> </div>
) )
} }
} },
}) })
</script> </script>
frontend/src/pages/Character/Forge/index.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<calc-collapse class="w-510px" title="装备打造(点击人物部位切换)"> <calc-collapse class="w-40%" title="装备打造(点击人物部位切换)">
<equipment /> <equipment />
</calc-collapse> </calc-collapse>
</div> </div>
frontend/src/pages/Character/Index.vue
-1
View File
@@ -25,7 +25,6 @@ const configStore = useConfigStore()
onMounted(async () => { onMounted(async () => {
await infoStore.createCharacter(props.alter, '0') await infoStore.createCharacter(props.alter, '0')
configStore.loadConfig() configStore.loadConfig()
console.log("~~~~~~~~")
window.addEventListener('beforeunload', () => { window.addEventListener('beforeunload', () => {
configStore.saveConfig() configStore.saveConfig()
}) })
frontend/src/pages/Character/Skill/components/SkillTree/index.tsx
+4 -4
View File
@@ -107,10 +107,10 @@ export default defineComponent({
<div class="absolute"> <div class="absolute">
<div class="w-36px h-55px bg-gradient-linear bg-gradient-[180deg,#f8e26c_0%,#f87c43_94.34%] z-1"></div> <div class="w-36px h-55px bg-gradient-linear bg-gradient-[180deg,#f8e26c_0%,#f87c43_94.34%] z-1"></div>
<div class="flex bottom--5px relative z-2 transform -translate-x-1/4"> <div class="flex bottom--5px relative z-2 transform -translate-x-1/4">
<CalcButton onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'subMax')}}>&lt;</CalcButton> <div onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'subMax')}}>&lt;</div>
<CalcButton onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'sub')}}>-</CalcButton> <div onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'sub')}}>-</div>
<CalcButton icon="plus" onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'add')}}></CalcButton> <div onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'add')}}>+</div>
<CalcButton icon="next" onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'addMax')}}></CalcButton> <div onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'addMax')}}>&gt;</div>
</div> </div>
</div> </div>
</> </>
frontend/src/stores/config.ts
+38 -29
View File
@@ -15,16 +15,19 @@ import api from '@/api'
// | '武器', // | '武器',
export interface IConfig { export interface IConfig {
skills: Record<string, { lv: number }> skills: Record<string, { lv: number }>
equips: Record<string, equips: Record<
{ id: string, string,
reinforce: number, {
reinforceType: number, id: string
enchat: number, reinforce: number
emblems: string[], reinforceType: number
upgrade: number, enchat: number
refine: number, emblem_0: string
adaptation:number emblem_1: string
} upgrade: number
refine: number
adaptation: number
}
> >
} }
@@ -33,19 +36,19 @@ const defaultEqusConfig = {
reinforce: 0, reinforce: 0,
reinforceType: 0, reinforceType: 0,
enchat: 0, enchat: 0,
emblems: [], emblem_0: "0",
emblem_1: "0",
upgrade: 0, upgrade: 0,
refine: 0, refine: 0,
adaptation: 0 adaptation: 0,
} }
export const useConfigStore = defineStore('configStore', () => { export const useConfigStore = defineStore('configStore', () => {
const config = ref<IConfig>({ const config = ref<IConfig>({
skills: {}, skills: {},
equips: {} equips: {},
}) })
const loadConfig = () => { const loadConfig = () => {
const infoStore = useInfoStore() const infoStore = useInfoStore()
const alter = infoStore.infos?.alter const alter = infoStore.infos?.alter
@@ -56,24 +59,30 @@ export const useConfigStore = defineStore('configStore', () => {
config.value = JSON.parse(localConfig) config.value = JSON.parse(localConfig)
} }
} }
if(!config.value) config.value = { if (!config.value)
skills: {}, config.value = {
equips: {} skills: {},
} equips: {},
if(!config.value?.equips) config.value.equips = {} }
if(!config.value?.skills) config.value.skills = {} if (!config.value?.equips) config.value.equips = {}
if (!config.value?.skills) config.value.skills = {}
const part = infoStore.parts.filter(a => !config.value?.equips.hasOwnProperty(a)) const part = infoStore.parts.filter((a) => !config.value?.equips.hasOwnProperty(a))
const skillIDs = infoStore.skills.map(skill => skill.id.toString()).filter(a => !config.value?.skills.hasOwnProperty(a)) const skillIDs = infoStore.skills
.map((skill) => skill.id.toString())
.filter((a) => !config.value?.skills.hasOwnProperty(a))
part.forEach(p => { part.forEach((p) => {
config.value && (config.value.equips[p] = { ...defaultEqusConfig }) config.value && (config.value.equips[p] = { ...defaultEqusConfig })
}); })
skillIDs.forEach(id => { skillIDs.forEach((id) => {
config.value && (config.value.skills[id] = { lv: infoStore.skills.find(skill => skill.id.toString() === id)?.maxLearnLv ?? 0 }) config.value &&
}); (config.value.skills[id] = {
lv: infoStore.skills.find((skill) => skill.id.toString() === id)?.maxLearnLv ?? 0,
})
})
} }
const saveConfig = () => { const saveConfig = () => {
@@ -84,7 +93,7 @@ export const useConfigStore = defineStore('configStore', () => {
} }
} }
const calc = async()=>{ const calc = async () => {
await api.calc(config.value) await api.calc(config.value)
} }
@@ -92,6 +101,6 @@ export const useConfigStore = defineStore('configStore', () => {
config, config,
loadConfig, loadConfig,
saveConfig, saveConfig,
calc calc,
} }
}) })
frontend/src/style/icon.scss
+78 -78
View File
@@ -1,31 +1,31 @@
.icon-reset { .icon-reset {
background-image: url("@/assets/img/icon/reset.png"); background-image: url("@/assets/img/icon/reset.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/reset_hover.png"); background-image: url("@/assets/img/icon/reset_hover.png") !important ;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/reset_active.png"); background-image: url("@/assets/img/icon/reset_active.png") !important;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/reset_disabled.png"); background-image: url("@/assets/img/icon/reset_disabled.png") !important;
} }
} }
.icon-set { .icon-set {
background-image: url("@/assets/img/icon/set.png"); background-image: url("@/assets/img/icon/set.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/set_hover.png"); background-image: url("@/assets/img/icon/set_hover.png") !important;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/set_active.png"); background-image: url("@/assets/img/icon/set_active.png") !important ;
} }
// &:disabled { // &:disabled {
// background-image: url("@/assets/img/icon/set_disabled.png"); // background-image: url("@/assets/img/icon/set_disabled.png");
@@ -33,50 +33,50 @@
} }
.icon-prev { .icon-prev {
background-image: url("@/assets/img/icon/prev.png"); background-image: url("@/assets/img/icon/prev.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
width: 16px !important; width: 16px !important;
height: 16px !important; height: 16px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/prev_hover.png"); background-image: url("@/assets/img/icon/prev_hover.png") !important;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/prev_active.png"); background-image: url("@/assets/img/icon/prev_active.png") !important;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/prev_disabled.png"); background-image: url("@/assets/img/icon/prev_disabled.png") !important;
} }
} }
.icon-next { .icon-next {
background-image: url("@/assets/img/icon/next.png"); background-image: url("@/assets/img/icon/next.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
width: 16px !important; width: 16px !important;
height: 16px !important; height: 16px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/next_hover.png"); background-image: url("@/assets/img/icon/next_hover.png") !important;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/next_active.png"); background-image: url("@/assets/img/icon/next_active.png") !important;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/next_disabled.png"); background-image: url("@/assets/img/icon/next_disabled.png") !important;
} }
} }
.icon-dropdown { .icon-dropdown {
background-image: url("@/assets/img/icon/dropdown.png"); background-image: url("@/assets/img/icon/dropdown.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
width: 16px !important; width: 16px !important;
height: 16px !important; height: 16px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/dropdown_hover.png"); background-image: url("@/assets/img/icon/dropdown_hover.png") !important;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/dropdown_active.png"); background-image: url("@/assets/img/icon/dropdown_active.png") !important;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/dropdown_disabled.png"); background-image: url("@/assets/img/icon/dropdown_disabled.png");
@@ -84,197 +84,197 @@
} }
.icon-search { .icon-search {
background-image: url("@/assets/img/icon/search.png"); background-image: url("@/assets/img/icon/search.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/search_hover.png"); background-image: url("@/assets/img/icon/search_hover.png") !important;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/search_active.png"); background-image: url("@/assets/img/icon/search_active.png") !important;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/search_disabled.png"); background-image: url("@/assets/img/icon/search_disabled.png" ) !important;
} }
} }
.icon-increase { .icon-increase {
background-image: url("@/assets/img/icon/increase.png"); background-image: url("@/assets/img/icon/increase.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
width: 16px !important; width: 16px !important;
height: 16px !important; height: 16px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/increase_hover.png"); background-image: url("@/assets/img/icon/increase_hover.png") !important;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/increase_active.png"); background-image: url("@/assets/img/icon/increase_active.png") !important;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/increase_disabled.png"); background-image: url("@/assets/img/icon/increase_disabled.png") !important ;
} }
} }
.icon-reduce { .icon-reduce {
background-image: url("@/assets/img/icon/reduce.png"); background-image: url("@/assets/img/icon/reduce.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
width: 16px !important; width: 16px !important;
height: 16px !important; height: 16px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/reduce_hover.png"); background-image: url("@/assets/img/icon/reduce_hover.png") !important;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/reduce_active.png"); background-image: url("@/assets/img/icon/reduce_active.png") !important;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/reduce_disabled.png"); background-image: url("@/assets/img/icon/reduce_disabled.png") !important;
} }
} }
.icon-plus { .icon-plus {
background-image: url("@/assets/img/icon/plus.png"); background-image: url("@/assets/img/icon/plus.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/plus_hover.png"); background-image: url("@/assets/img/icon/plus_hover.png") !important;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/plus_active.png"); background-image: url("@/assets/img/icon/plus_active.png") !important;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/plus_disabled.png"); background-image: url("@/assets/img/icon/plus_disabled.png") !important;
} }
} }
.icon-detail { .icon-detail {
background-image: url("@/assets/img/icon/detail.png"); background-image: url("@/assets/img/icon/detail.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/detail_hover.png"); background-image: url("@/assets/img/icon/detail_hover.png") !important;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/detail_active.png"); background-image: url("@/assets/img/icon/detail_active.png") !important;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/detail_disabled.png"); background-image: url("@/assets/img/icon/detail_disabled.png") !important;
} }
} }
.icon-home { .icon-home {
background-image: url("@/assets/img/icon/home.png"); background-image: url("@/assets/img/icon/home.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/home_hover.png"); background-image: url("@/assets/img/icon/home_hover.png") !important;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/home_active.png"); background-image: url("@/assets/img/icon/home_active.png") !important;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/home_disabled.png"); background-image: url("@/assets/img/icon/home_disabled.png") !important;
} }
} }
.icon-reflesh { .icon-reflesh {
background-image: url("@/assets/img/icon/reflesh.png"); background-image: url("@/assets/img/icon/reflesh.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/reflesh_hover.png"); background-image: url("@/assets/img/icon/reflesh_hover.png") !important;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/reflesh_active.png"); background-image: url("@/assets/img/icon/reflesh_active.png") !important;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/reflesh_disabled.png"); background-image: url("@/assets/img/icon/reflesh_disabled.png") !important;
} }
} }
.icon-update { .icon-update {
background-image: url("@/assets/img/icon/update.png"); background-image: url("@/assets/img/icon/update.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/update_hover.png"); background-image: url("@/assets/img/icon/update_hover.png") !important;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/update_active.png"); background-image: url("@/assets/img/icon/update_active.png") !important;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/update_disabled.png"); background-image: url("@/assets/img/icon/update_disabled.png") !important;
} }
} }
.icon-share { .icon-share {
background-image: url("@/assets/img/icon/share.png"); background-image: url("@/assets/img/icon/share.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/share_hover.png"); background-image: url("@/assets/img/icon/share_hover.png") !important;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/share_active.png"); background-image: url("@/assets/img/icon/share_active.png") !important;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/share_disabled.png"); background-image: url("@/assets/img/icon/share_disabled.png") !important;
} }
} }
.icon-import { .icon-import {
background-image: url("@/assets/img/icon/import.png"); background-image: url("@/assets/img/icon/import.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/import_hover.png"); background-image: url("@/assets/img/icon/import_hover.png") !important;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/import_active.png"); background-image: url("@/assets/img/icon/import_active.png") !important;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/import_disabled.png"); background-image: url("@/assets/img/icon/import_disabled.png") !important;
} }
} }
.icon-menu-drug { .icon-menu-drug {
background-image: url("@/assets/img/icon/menu/drug.png"); background-image: url("@/assets/img/icon/menu/drug.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/menu/drug_hover.png"); background-image: url("@/assets/img/icon/menu/drug_hover.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/menu/drug_active.png"); background-image: url("@/assets/img/icon/menu/drug_active.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/menu/drug_disabled.png"); background-image: url("@/assets/img/icon/menu/drug_disabled.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
@@ -282,26 +282,26 @@
} }
.icon-menu-specificity { .icon-menu-specificity {
background-image: url("@/assets/img/icon/menu/specificity.png"); background-image: url("@/assets/img/icon/menu/specificity.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/menu/specificity_hover.png"); background-image: url("@/assets/img/icon/menu/specificity_hover.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/menu/specificity_active.png"); background-image: url("@/assets/img/icon/menu/specificity_active.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/menu/specificity_disabled.png"); background-image: url("@/assets/img/icon/menu/specificity_disabled.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
@@ -310,26 +310,26 @@
.icon-menu-favourite { .icon-menu-favourite {
background-image: url("@/assets/img/icon/menu/favourite.png"); background-image: url("@/assets/img/icon/menu/favourite.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/menu/favourite_hover.png"); background-image: url("@/assets/img/icon/menu/favourite_hover.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/menu/favourite_active.png"); background-image: url("@/assets/img/icon/menu/favourite_active.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/menu/favourite_disabled.png"); background-image: url("@/assets/img/icon/menu/favourite_disabled.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
@@ -337,26 +337,26 @@
} }
.icon-menu-recommend { .icon-menu-recommend {
background-image: url("@/assets/img/icon/menu/recommend.png"); background-image: url("@/assets/img/icon/menu/recommend.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/menu/recommend_hover.png"); background-image: url("@/assets/img/icon/menu/recommend_hover.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/menu/recommend_active.png"); background-image: url("@/assets/img/icon/menu/recommend_active.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/menu/recommend_disabled.png"); background-image: url("@/assets/img/icon/menu/recommend_disabled.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
@@ -364,26 +364,26 @@
} }
.icon-menu-set { .icon-menu-set {
background-image: url("@/assets/img/icon/menu/set.png"); background-image: url("@/assets/img/icon/menu/set.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
&:hover { &:hover {
background-image: url("@/assets/img/icon/menu/set_hover.png"); background-image: url("@/assets/img/icon/menu/set_hover.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
} }
&:active { &:active {
background-image: url("@/assets/img/icon/menu/set_active.png"); background-image: url("@/assets/img/icon/menu/set_active.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;
} }
&:disabled { &:disabled {
background-image: url("@/assets/img/icon/menu/set_disabled.png"); background-image: url("@/assets/img/icon/menu/set_disabled.png") !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: auto 100% !important; background-size: auto 100% !important;
background-position: center center; background-position: center center;