This commit is contained in:
2025-03-29 14:17:56 +08:00
parent 4c392a23d3
commit ec261a1c3d
10 changed files with 237 additions and 174 deletions
+4 -2
View File
@@ -13,8 +13,10 @@ class CharacterEquipInfo:
"""强化类型"""
enchant: str
"""附魔"""
emblems: list[str]
"""徽章"""
emblem_0: str
"""徽章1"""
emblem_1: str
"""徽章2"""
fusion: int | None
"""贴膜ID"""
refine: int | None
@@ -25,7 +25,6 @@ export default defineComponent({
default: "primary"
}
},
emits: ["click"],
setup(props, { slots }) {
return () => {
const proerpties = {
@@ -1,8 +1,14 @@
<template>
<div class="flex flex-col gap-20px mx-10px">
<Weapon></Weapon>
<Suit></Suit>
<Universal></Universal>
<div class="flex flex-col mx-10px">
<calc-collapse title="武器">
<Weapon></Weapon>
</calc-collapse>
<calc-collapse title="套装">
<Suit></Suit>
</calc-collapse>
<calc-collapse title="通宝">
<Universal></Universal>
</calc-collapse>
</div>
</template>
@@ -13,6 +13,7 @@
:alt="suit.name"
:style="{ filter: curSuit === suit.value ? '' : 'grayscale(100%)' }"
@click="curSuit = suit.value"
@dblclick="handleDoubleClick"
/>
</div>
</template>
@@ -22,7 +23,13 @@
<div class="flex flex-wrap gap-4px content-start" :style="{width: `${rowCount * 32}px`}">
<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>
</div>
</div>
@@ -57,7 +64,7 @@ const suits = 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 raritiyList = ['神器','传说','史诗']
@@ -80,7 +87,15 @@ const chooseEqu = async(equip: IEquipment | undefined) => {
if (equip && configStore.config.equips[equip.itemDetailType]) {
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>
@@ -1,52 +1,64 @@
<script lang="tsx">
import { computed, defineComponent, ref, renderList } from "vue"
import type { IEnchantingInfo } from "@/api/info/type"
import { useInfoStore, useConfigStore } from "@/stores"
import { computed, defineComponent, ref, renderList } from 'vue'
import type { IEnchantingInfo } from '@/api/info/type'
import { useInfoStore, useConfigStore } from '@/stores'
export default defineComponent({
name: "Equip",
name: 'Equip',
props: {
part: {
type: String,
default: "头肩"
}
default: '头肩',
},
},
setup(props) {
const configStore = useConfigStore()
const can_upgrade = computed(() => {
return !["称号", "宠物"].includes(props.part as string)
return !['称号', '宠物'].includes(props.part as string)
})
// 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 enchanting_list = computed<IEnchantingInfo[] | undefined>(() => {
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)
})
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 currentInfo = function<T>(name: string, defaultValue?: T) {
const currentInfo = function <T>(name: string, defaultValue?: T) {
return computed<string | number>({
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) {
console.log(name, val)
if (val == undefined) {
return
}
if (name == "socket_right" && !has_socket_right.value) {
if (name == 'emblem_1' && !has_emblem_1.value) {
// configStore.setForge(props.part, name, 0)
return
}
@@ -54,61 +66,64 @@ export default defineComponent({
let parts: string[] = []
if (global_change.value) {
if (name === "enchanting") {
const enchant = basicInfoStore?.enchantings?.find(item => item.id == val) as IEnchantingInfo | undefined
if (name === 'enchanting') {
const enchant = basicInfoStore?.enchantings?.find((item) => item.id == val) as
| IEnchantingInfo
| undefined
if (enchant?.position) {
parts = enchant.position
}
}
if (["socket_left", "socket_right"].includes(name)) {
const emblem = basicInfoStore?.emblems?.find(item => item.id.toString() == val.toString()) as IEnchantingInfo | undefined
if (['emblem_0', 'emblem_1'].includes(name)) {
const emblem = basicInfoStore?.emblems?.find(
(item) => item.id.toString() == val.toString(),
) as IEnchantingInfo | undefined
if (emblem?.position) {
parts = emblem.position.filter(item => !["皮肤", "武器装扮", "光环"].includes(item))
parts = emblem.position.filter(
(item) => !['皮肤', '武器装扮', '光环'].includes(item),
)
}
}
if (["cursed_type", "cursed_number"].includes(name)) {
parts = basicInfoStore.parts.filter(e => !["称号", "宠物"].includes(e))
if (['reinforce_type', 'reinforce'].includes(name)) {
parts = basicInfoStore.parts.filter((e) => !['称号', '宠物'].includes(e))
}
} else {
parts = [props.part]
}
console.log(parts,val)
for (const part of parts) {
if (configStore.config.equips[part]) {
(configStore.config.equips[part] as Record<string, any>)[name] = val
}
}
}
},
})
}
// 附魔
const enchanting = currentInfo<string | number>("enchanting")
const enchanting = currentInfo<string | number>('enchanting')
// 镶嵌栏1
const socket_left = currentInfo<string | number>("socket_left", 0)
const emblem_0 = currentInfo<string | number>('emblem_0', 0)
// 镶嵌栏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
* @param val
*/
* 同步徽章1到徽章2
* @param val
*/
function changeSocket(val: number) {
if (has_socket_right.value) {
socket_right.value = val
if (has_emblem_1.value) {
emblem_1.value = val
}
}
@@ -118,7 +133,15 @@ export default defineComponent({
<div class="equ-profile-item">
<div class="mr-10px row-name">当前部位</div>
<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>
{can_upgrade.value ? (
<div class="equ-profile-item">
@@ -128,15 +151,17 @@ export default defineComponent({
<calc-option value={2}>强化</calc-option>
</calc-select>
<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-select>
{props.part == '武器' && (<calc-select v-model={dz_number.value} class="flex-1 !h-20px">
{renderList(9, i => (
{props.part == '武器' && (
<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-select>)}
</calc-select>
)}
</div>
) : (
<div></div>
@@ -145,7 +170,7 @@ export default defineComponent({
<div class="row-name">附魔</div>
<calc-select v-model={enchanting.value} class="flex-1 !h-20px">
<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-select>
@@ -153,17 +178,25 @@ export default defineComponent({
{has_socket.value ? (
<div class="equ-profile-item">
<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>
{renderList(emblem_list.value ?? [], item => (
<calc-option value={item.id}>{`${item.rarity}${item.type}徽章[${item.props}]`}</calc-option>
{renderList(emblem_list.value ?? [], (item) => (
<calc-option
value={item.id}
>{`${item.rarity}${item.type}徽章[${item.props}]`}</calc-option>
))}
</calc-select>
{has_socket_right.value && (
<calc-select v-model={socket_right.value} class="flex-1 !h-20px">
{has_emblem_1.value && (
<calc-select v-model={emblem_1.value} class="flex-1 !h-20px">
<calc-option value={0}>无</calc-option>
{renderList(emblem_list.value ?? [], item => (
<calc-option value={item.id}>{`${item.rarity}${item.type}徽章[${item.props}]`}</calc-option>
{renderList(emblem_list.value ?? [], (item) => (
<calc-option
value={item.id}
>{`${item.rarity}${item.type}徽章[${item.props}]`}</calc-option>
))}
</calc-select>
)}
@@ -174,7 +207,7 @@ export default defineComponent({
</div>
)
}
}
},
})
</script>
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div>
<calc-collapse class="w-510px" title="装备打造(点击人物部位切换)">
<calc-collapse class="w-40%" title="装备打造(点击人物部位切换)">
<equipment />
</calc-collapse>
</div>
-1
View File
@@ -25,7 +25,6 @@ const configStore = useConfigStore()
onMounted(async () => {
await infoStore.createCharacter(props.alter, '0')
configStore.loadConfig()
console.log("~~~~~~~~")
window.addEventListener('beforeunload', () => {
configStore.saveConfig()
})
@@ -107,10 +107,10 @@ export default defineComponent({
<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="flex bottom--5px relative z-2 transform -translate-x-1/4">
<CalcButton onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'subMax')}}>&lt;</CalcButton>
<CalcButton onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'sub')}}>-</CalcButton>
<CalcButton icon="plus" onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'add')}}></CalcButton>
<CalcButton icon="next" onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'addMax')}}></CalcButton>
<div onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'subMax')}}>&lt;</div>
<div onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'sub')}}>-</div>
<div onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'add')}}>+</div>
<div onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'addMax')}}>&gt;</div>
</div>
</div>
</>
+38 -29
View File
@@ -15,16 +15,19 @@ import api from '@/api'
// | '武器',
export interface IConfig {
skills: Record<string, { lv: number }>
equips: Record<string,
{ id: string,
reinforce: number,
reinforceType: number,
enchat: number,
emblems: string[],
upgrade: number,
refine: number,
adaptation:number
}
equips: Record<
string,
{
id: string
reinforce: number
reinforceType: number
enchat: number
emblem_0: string
emblem_1: string
upgrade: number
refine: number
adaptation: number
}
>
}
@@ -33,19 +36,19 @@ const defaultEqusConfig = {
reinforce: 0,
reinforceType: 0,
enchat: 0,
emblems: [],
emblem_0: "0",
emblem_1: "0",
upgrade: 0,
refine: 0,
adaptation: 0
adaptation: 0,
}
export const useConfigStore = defineStore('configStore', () => {
const config = ref<IConfig>({
skills: {},
equips: {}
equips: {},
})
const loadConfig = () => {
const infoStore = useInfoStore()
const alter = infoStore.infos?.alter
@@ -56,24 +59,30 @@ export const useConfigStore = defineStore('configStore', () => {
config.value = JSON.parse(localConfig)
}
}
if(!config.value) config.value = {
skills: {},
equips: {}
}
if(!config.value?.equips) config.value.equips = {}
if(!config.value?.skills) config.value.skills = {}
if (!config.value)
config.value = {
skills: {},
equips: {},
}
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 })
});
})
skillIDs.forEach(id => {
config.value && (config.value.skills[id] = { lv: infoStore.skills.find(skill => skill.id.toString() === id)?.maxLearnLv ?? 0 })
});
skillIDs.forEach((id) => {
config.value &&
(config.value.skills[id] = {
lv: infoStore.skills.find((skill) => skill.id.toString() === id)?.maxLearnLv ?? 0,
})
})
}
const saveConfig = () => {
@@ -84,7 +93,7 @@ export const useConfigStore = defineStore('configStore', () => {
}
}
const calc = async()=>{
const calc = async () => {
await api.calc(config.value)
}
@@ -92,6 +101,6 @@ export const useConfigStore = defineStore('configStore', () => {
config,
loadConfig,
saveConfig,
calc
calc,
}
})
+78 -78
View File
@@ -1,31 +1,31 @@
.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-size: 100% 100% !important;
width: 20px !important;
height: 20px !important;
&:hover {
background-image: url("@/assets/img/icon/reset_hover.png");
background-image: url("@/assets/img/icon/reset_hover.png") !important ;
}
&:active {
background-image: url("@/assets/img/icon/reset_active.png");
background-image: url("@/assets/img/icon/reset_active.png") !important;
}
&:disabled {
background-image: url("@/assets/img/icon/reset_disabled.png");
background-image: url("@/assets/img/icon/reset_disabled.png") !important;
}
}
.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-size: 100% 100% !important;
width: 20px !important;
height: 20px !important;
&:hover {
background-image: url("@/assets/img/icon/set_hover.png");
background-image: url("@/assets/img/icon/set_hover.png") !important;
}
&:active {
background-image: url("@/assets/img/icon/set_active.png");
background-image: url("@/assets/img/icon/set_active.png") !important ;
}
// &:disabled {
// background-image: url("@/assets/img/icon/set_disabled.png");
@@ -33,50 +33,50 @@
}
.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-size: 100% 100% !important;
width: 16px !important;
height: 16px !important;
&:hover {
background-image: url("@/assets/img/icon/prev_hover.png");
background-image: url("@/assets/img/icon/prev_hover.png") !important;
}
&:active {
background-image: url("@/assets/img/icon/prev_active.png");
background-image: url("@/assets/img/icon/prev_active.png") !important;
}
&:disabled {
background-image: url("@/assets/img/icon/prev_disabled.png");
background-image: url("@/assets/img/icon/prev_disabled.png") !important;
}
}
.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-size: 100% 100% !important;
width: 16px !important;
height: 16px !important;
&:hover {
background-image: url("@/assets/img/icon/next_hover.png");
background-image: url("@/assets/img/icon/next_hover.png") !important;
}
&:active {
background-image: url("@/assets/img/icon/next_active.png");
background-image: url("@/assets/img/icon/next_active.png") !important;
}
&:disabled {
background-image: url("@/assets/img/icon/next_disabled.png");
background-image: url("@/assets/img/icon/next_disabled.png") !important;
}
}
.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-size: 100% 100% !important;
width: 16px !important;
height: 16px !important;
&:hover {
background-image: url("@/assets/img/icon/dropdown_hover.png");
background-image: url("@/assets/img/icon/dropdown_hover.png") !important;
}
&:active {
background-image: url("@/assets/img/icon/dropdown_active.png");
background-image: url("@/assets/img/icon/dropdown_active.png") !important;
}
&:disabled {
background-image: url("@/assets/img/icon/dropdown_disabled.png");
@@ -84,197 +84,197 @@
}
.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-size: 100% 100% !important;
width: 20px !important;
height: 20px !important;
&:hover {
background-image: url("@/assets/img/icon/search_hover.png");
background-image: url("@/assets/img/icon/search_hover.png") !important;
}
&:active {
background-image: url("@/assets/img/icon/search_active.png");
background-image: url("@/assets/img/icon/search_active.png") !important;
}
&:disabled {
background-image: url("@/assets/img/icon/search_disabled.png");
background-image: url("@/assets/img/icon/search_disabled.png" ) !important;
}
}
.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-size: 100% 100% !important;
width: 16px !important;
height: 16px !important;
&:hover {
background-image: url("@/assets/img/icon/increase_hover.png");
background-image: url("@/assets/img/icon/increase_hover.png") !important;
}
&:active {
background-image: url("@/assets/img/icon/increase_active.png");
background-image: url("@/assets/img/icon/increase_active.png") !important;
}
&:disabled {
background-image: url("@/assets/img/icon/increase_disabled.png");
background-image: url("@/assets/img/icon/increase_disabled.png") !important ;
}
}
.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-size: 100% 100% !important;
width: 16px !important;
height: 16px !important;
&:hover {
background-image: url("@/assets/img/icon/reduce_hover.png");
background-image: url("@/assets/img/icon/reduce_hover.png") !important;
}
&:active {
background-image: url("@/assets/img/icon/reduce_active.png");
background-image: url("@/assets/img/icon/reduce_active.png") !important;
}
&:disabled {
background-image: url("@/assets/img/icon/reduce_disabled.png");
background-image: url("@/assets/img/icon/reduce_disabled.png") !important;
}
}
.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-size: 100% 100% !important;
width: 20px !important;
height: 20px !important;
&:hover {
background-image: url("@/assets/img/icon/plus_hover.png");
background-image: url("@/assets/img/icon/plus_hover.png") !important;
}
&:active {
background-image: url("@/assets/img/icon/plus_active.png");
background-image: url("@/assets/img/icon/plus_active.png") !important;
}
&:disabled {
background-image: url("@/assets/img/icon/plus_disabled.png");
background-image: url("@/assets/img/icon/plus_disabled.png") !important;
}
}
.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-size: 100% 100% !important;
width: 20px !important;
height: 20px !important;
&:hover {
background-image: url("@/assets/img/icon/detail_hover.png");
background-image: url("@/assets/img/icon/detail_hover.png") !important;
}
&:active {
background-image: url("@/assets/img/icon/detail_active.png");
background-image: url("@/assets/img/icon/detail_active.png") !important;
}
&:disabled {
background-image: url("@/assets/img/icon/detail_disabled.png");
background-image: url("@/assets/img/icon/detail_disabled.png") !important;
}
}
.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-size: 100% 100% !important;
width: 20px !important;
height: 20px !important;
&:hover {
background-image: url("@/assets/img/icon/home_hover.png");
background-image: url("@/assets/img/icon/home_hover.png") !important;
}
&:active {
background-image: url("@/assets/img/icon/home_active.png");
background-image: url("@/assets/img/icon/home_active.png") !important;
}
&:disabled {
background-image: url("@/assets/img/icon/home_disabled.png");
background-image: url("@/assets/img/icon/home_disabled.png") !important;
}
}
.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-size: 100% 100% !important;
width: 20px !important;
height: 20px !important;
&:hover {
background-image: url("@/assets/img/icon/reflesh_hover.png");
background-image: url("@/assets/img/icon/reflesh_hover.png") !important;
}
&:active {
background-image: url("@/assets/img/icon/reflesh_active.png");
background-image: url("@/assets/img/icon/reflesh_active.png") !important;
}
&:disabled {
background-image: url("@/assets/img/icon/reflesh_disabled.png");
background-image: url("@/assets/img/icon/reflesh_disabled.png") !important;
}
}
.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-size: 100% 100% !important;
width: 20px !important;
height: 20px !important;
&:hover {
background-image: url("@/assets/img/icon/update_hover.png");
background-image: url("@/assets/img/icon/update_hover.png") !important;
}
&:active {
background-image: url("@/assets/img/icon/update_active.png");
background-image: url("@/assets/img/icon/update_active.png") !important;
}
&:disabled {
background-image: url("@/assets/img/icon/update_disabled.png");
background-image: url("@/assets/img/icon/update_disabled.png") !important;
}
}
.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-size: 100% 100% !important;
width: 20px !important;
height: 20px !important;
&:hover {
background-image: url("@/assets/img/icon/share_hover.png");
background-image: url("@/assets/img/icon/share_hover.png") !important;
}
&:active {
background-image: url("@/assets/img/icon/share_active.png");
background-image: url("@/assets/img/icon/share_active.png") !important;
}
&:disabled {
background-image: url("@/assets/img/icon/share_disabled.png");
background-image: url("@/assets/img/icon/share_disabled.png") !important;
}
}
.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-size: 100% 100% !important;
width: 20px !important;
height: 20px !important;
&:hover {
background-image: url("@/assets/img/icon/import_hover.png");
background-image: url("@/assets/img/icon/import_hover.png") !important;
}
&:active {
background-image: url("@/assets/img/icon/import_active.png");
background-image: url("@/assets/img/icon/import_active.png") !important;
}
&:disabled {
background-image: url("@/assets/img/icon/import_disabled.png");
background-image: url("@/assets/img/icon/import_disabled.png") !important;
}
}
.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-size: auto 100% !important;
background-position: center center;
width: 20px !important;
height: 20px !important;
&: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-size: auto 100% !important;
background-position: center center;
}
&: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-size: auto 100% !important;
background-position: center center;
}
&: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-size: auto 100% !important;
background-position: center center;
@@ -282,26 +282,26 @@
}
.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-size: auto 100% !important;
background-position: center center;
width: 20px !important;
height: 20px !important;
&: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-size: auto 100% !important;
background-position: center center;
}
&: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-size: auto 100% !important;
background-position: center center;
}
&: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-size: auto 100% !important;
background-position: center center;
@@ -310,26 +310,26 @@
.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-size: auto 100% !important;
background-position: center center;
width: 20px !important;
height: 20px !important;
&: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-size: auto 100% !important;
background-position: center center;
}
&: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-size: auto 100% !important;
background-position: center center;
}
&: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-size: auto 100% !important;
background-position: center center;
@@ -337,26 +337,26 @@
}
.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-size: auto 100% !important;
background-position: center center;
width: 20px !important;
height: 20px !important;
&: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-size: auto 100% !important;
background-position: center center;
}
&: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-size: auto 100% !important;
background-position: center center;
}
&: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-size: auto 100% !important;
background-position: center center;
@@ -364,26 +364,26 @@
}
.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-size: auto 100% !important;
background-position: center center;
width: 20px !important;
height: 20px !important;
&: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-size: auto 100% !important;
background-position: center center;
}
&: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-size: auto 100% !important;
background-position: center center;
}
&: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-size: auto 100% !important;
background-position: center center;