From ec261a1c3d7a2d335276e2e79819eb7867d689f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A5=BF=E7=93=9C=C2=B0?= <wxh_email@yeah.net>
Date: Sat, 29 Mar 2025 14:17:56 +0800
Subject: [PATCH] dev

---
 backend/core/basic/roleinfo.py                |   6 +-
 frontend/src/components/calc/button/index.vue |   1 -
 .../src/pages/Character/Equipment/Index.vue   |  14 +-
 .../Character/Equipment/components/Suit.vue   |  21 ++-
 .../Character/Forge/components/equipment.vue  | 135 +++++++++------
 frontend/src/pages/Character/Forge/index.vue  |   2 +-
 frontend/src/pages/Character/Index.vue        |   1 -
 .../Skill/components/SkillTree/index.tsx      |   8 +-
 frontend/src/stores/config.ts                 |  67 ++++----
 frontend/src/style/icon.scss                  | 156 +++++++++---------
 10 files changed, 237 insertions(+), 174 deletions(-)

diff --git a/backend/core/basic/roleinfo.py b/backend/core/basic/roleinfo.py
index 5b40ce94..61d1ef9a 100644
--- a/backend/core/basic/roleinfo.py
+++ b/backend/core/basic/roleinfo.py
@@ -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
diff --git a/frontend/src/components/calc/button/index.vue b/frontend/src/components/calc/button/index.vue
index 2afcedb9..bcd242a1 100644
--- a/frontend/src/components/calc/button/index.vue
+++ b/frontend/src/components/calc/button/index.vue
@@ -25,7 +25,6 @@ export default defineComponent({
       default: "primary"
     }
   },
-  emits: ["click"],
   setup(props, { slots }) {
     return () => {
       const proerpties = {
diff --git a/frontend/src/pages/Character/Equipment/Index.vue b/frontend/src/pages/Character/Equipment/Index.vue
index 8ac8cbc2..344ca63c 100644
--- a/frontend/src/pages/Character/Equipment/Index.vue
+++ b/frontend/src/pages/Character/Equipment/Index.vue
@@ -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>
 
diff --git a/frontend/src/pages/Character/Equipment/components/Suit.vue b/frontend/src/pages/Character/Equipment/components/Suit.vue
index 26ca9d12..4ccf9b65 100644
--- a/frontend/src/pages/Character/Equipment/components/Suit.vue
+++ b/frontend/src/pages/Character/Equipment/components/Suit.vue
@@ -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>
diff --git a/frontend/src/pages/Character/Forge/components/equipment.vue b/frontend/src/pages/Character/Forge/components/equipment.vue
index 56d0da02..870c6921 100644
--- a/frontend/src/pages/Character/Forge/components/equipment.vue
+++ b/frontend/src/pages/Character/Forge/components/equipment.vue
@@ -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>
 
diff --git a/frontend/src/pages/Character/Forge/index.vue b/frontend/src/pages/Character/Forge/index.vue
index e04f31f3..07d5544e 100644
--- a/frontend/src/pages/Character/Forge/index.vue
+++ b/frontend/src/pages/Character/Forge/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <calc-collapse class="w-510px" title="装备打造(点击人物部位切换)">
+    <calc-collapse class="w-40%" title="装备打造(点击人物部位切换)">
     <equipment />
   </calc-collapse>
   </div>
diff --git a/frontend/src/pages/Character/Index.vue b/frontend/src/pages/Character/Index.vue
index 03989e09..3b67fe76 100644
--- a/frontend/src/pages/Character/Index.vue
+++ b/frontend/src/pages/Character/Index.vue
@@ -25,7 +25,6 @@ const configStore = useConfigStore()
 onMounted(async () => {
   await infoStore.createCharacter(props.alter, '0')
   configStore.loadConfig()
-  console.log("~~~~~~~~")
   window.addEventListener('beforeunload', () => {
     configStore.saveConfig()
   })
diff --git a/frontend/src/pages/Character/Skill/components/SkillTree/index.tsx b/frontend/src/pages/Character/Skill/components/SkillTree/index.tsx
index f84bc4ef..ff8e768b 100644
--- a/frontend/src/pages/Character/Skill/components/SkillTree/index.tsx
+++ b/frontend/src/pages/Character/Skill/components/SkillTree/index.tsx
@@ -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>
         </>
diff --git a/frontend/src/stores/config.ts b/frontend/src/stores/config.ts
index 3d9ca416..fd07a4d5 100644
--- a/frontend/src/stores/config.ts
+++ b/frontend/src/stores/config.ts
@@ -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,
   }
 })
diff --git a/frontend/src/style/icon.scss b/frontend/src/style/icon.scss
index 33823e3c..f501656d 100644
--- a/frontend/src/style/icon.scss
+++ b/frontend/src/style/icon.scss
@@ -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;