configStore

frontend/src/components/dnf/Equipment/Icon/index.vue

@@ -74,7 +74,8 @@ const getLocalImageURL = (url:string)=>{
     bottom: 0;
     width: 28px;
     height: 28px;
-    background-color: #00000060;
+    background-color: #00000090;
+    // filter: grayscale(100%);
   }
 }
 

frontend/src/components/dnf/Equipment/RaritySelect/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex gap-8px">
     <template v-for="(rarity,_) in rarities" :key="_">
-      <div class="w-14px h-14px shadow-[0px_0px_3px_#ffffff_inset,0px_0px_1px_#ffffff40]" :style="{background: rarity.background}" @click="value=rarity.value">
+      <div class="w-14px h-14px shadow-[0px_0px_3px_#ffffff_inset,0px_0px_1px_#ffffff40]" :style="{background: rarity.background}" @click="choose(rarity.value)">
         <div class="w-14px h-14px" :class="{'active': value === rarity.value}"></div>
       </div>
     </template>
@@ -10,6 +10,8 @@
 
 <script lang="ts" setup>
 
+const props = defineProps({})
+
 const value = defineModel<string>()
 
 const rarities = [{
@@ -29,6 +31,15 @@ const rarities = [{
   background: 'linear-gradient(180deg, #70faa7 0%, #7bfefe 100%)',
 }]
 
+const choose = (rarity: string) => {
+  if (value.value === rarity) {
+    value.value = undefined
+  }
+  else{
+    value.value = rarity
+  }
+}
+
 </script>
 
 <style lang="scss" scoped>