🌱 材料详情

src/components/wiki/twc-materials.vue

@@ -1,7 +1,11 @@
 <template>
-  <!-- todo 点击展开 overlay -->
   <div class="twc-materials-grid">
-    <div class="twc-material-box" v-for="(item, index) in props.data" :key="index">
+    <div
+      class="twc-material-box"
+      v-for="(item, index) in props.data"
+      :key="index"
+      @click="checkData(item)"
+    >
       <div class="twc-material-left">
         <div class="twc-material-bg">
           <img :src="item.bg" alt="bg" />
@@ -15,13 +19,35 @@
       </div>
     </div>
   </div>
+  <TwoMaterial :data="curData" v-model="showOverlay" />
 </template>
 <script lang="ts" setup>
+import { ref } from "vue";
+
+import TwoMaterial from "./two-material.vue";
+import { WikiMaterialData } from "../../data";
+import showSnackbar from "../func/snackbar";
+
 interface TwcMaterialsProp {
   data: TGApp.App.Calendar.Material[];
 }
 
 const props = defineProps<TwcMaterialsProp>();
+const showOverlay = ref(false);
+const curData = ref<TGApp.App.Material.WikiItem>();
+
+function checkData(item: TGApp.App.Calendar.Material) {
+  const material = WikiMaterialData.find((m) => m.id === item.id);
+  if (material) {
+    curData.value = material;
+    showOverlay.value = true;
+  } else {
+    showSnackbar({
+      text: `材料 ${item.name} 暂无详细信息`,
+      color: "warn",
+    });
+  }
+}
 </script>
 <style lang="css" scoped>
 .twc-materials-grid {
@@ -38,6 +64,7 @@ const props = defineProps<TwcMaterialsProp>();
   border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
   background: var(--box-bg-1);
+  cursor: pointer;
   gap: 10px;
 }
 

src/components/wiki/two-material.vue

@@ -0,0 +1,84 @@
+<template>
+  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
+    <div v-if="props.data" class="twom-container">
+      <div class="twom-box">
+        <!-- todo 根据类型显示不同的背景 -->
+        <div class="twom-top">
+          <div class="twom-ttl">{{ props.data.name }}</div>
+          <div class="twom-right">
+            <img :src="`/icon/material/${props.data.id}.webp`" alt="icon" />
+          </div>
+          <div class="twom-tbl">{{ props.data.type }}</div>
+        </div>
+        <div class="twom-bottom">
+          <div class="twom-desc">{{ props.data.description }}</div>
+          <div class="twom-source" v-if="props.data.source.length > 1">
+            {{ props.data.source }}
+          </div>
+          <div class="twom-convert" v-if="props.data.convert.length > 1">
+            {{ props.data.convert }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </TOverlay>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+import TOverlay from "../main/t-overlay.vue";
+
+interface TwoMaterialProps {
+  modelValue: boolean;
+  data: TGApp.App.Material.WikiItem;
+}
+
+type TwoMaterialEmits = (e: "update:modelValue", value: boolean) => void;
+
+const props = defineProps<TwoMaterialProps>();
+const emits = defineEmits<TwoMaterialEmits>();
+
+const visible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emits("update:modelValue", value);
+  },
+});
+
+function onCancel() {
+  visible.value = false;
+}
+</script>
+<style lang="css" scoped>
+.twom-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border-radius: 10px;
+  background: var(--app-side-bg);
+  column-gap: 10px;
+}
+
+.twom-box {
+  position: relative;
+  overflow: hidden;
+  width: 800px;
+  height: 400px;
+  border-radius: 10px;
+}
+
+.twom-top {
+  position: relative;
+  display: flex;
+  height: 200px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  border-bottom: 1px solid var(--common-shadow-1);
+  background-position: center;
+  background-size: cover;
+}
+</style>