TeyvatGuide/src/components/main/t-itembox.vue

<template>
  <div class="tib-box">
    <div class="tib-bg">
      <slot name="bg">
        <img :src="modelValue.bg" alt="bg" />
      </slot>
    </div>
    <div class="tib-icon">
      <slot name="icon">
        <img :src="modelValue.icon" alt="icon" />
      </slot>
    </div>
    <div class="tib-cover">
      <div class="tib-lt">
        <img :src="modelValue.lt" alt="lt" />
      </div>
      <div v-show="modelValue.rt" class="tib-rt">
        {{ modelValue.rt }}
      </div>
      <div class="tib-inner">
        <slot name="inner-icon">
          <img v-show="modelValue.innerIcon" :src="modelValue.innerIcon" alt="inner-icon" />
        </slot>
        <slot name="inner-text">
          <span>{{ modelValue.innerText }}</span>
        </slot>
      </div>
    </div>
    <div v-if="modelValue.display === 'outer'" class="tib-outer">
      <slot name="outer-text">
        <span>{{ modelValue.outerText }}</span>
      </slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";

export interface TItemBoxData {
  bg: string;
  icon: string;
  size: string;
  height: string;
  display: "inner" | "outer";
  clickable: boolean;
  lt: string;
  ltSize: string;
  rt?: string;
  rtSize?: string;
  innerHeight?: number;
  innerIcon?: string;
  innerText: string;
  outerHeight?: number;
  outerText?: string;
}

interface TItemBoxProps {
  modelValue: TItemBoxData;
}

const props = defineProps<TItemBoxProps>();

const getCursor = computed(() => (props.modelValue.clickable ? "pointer" : "default"));
const getInnerHeight = computed(() => `${props.modelValue.innerHeight}px`);
const getInnerFont = computed(() => `${props.modelValue.innerHeight / 2}px`);
const getOuterHeight = computed(() => `${props.modelValue.outerHeight}px`);
const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
</script>
<style lang="css" scoped>
.tib-box {
  position: relative;
  width: v-bind(modelValue[ "size"]);
  height: v-bind(modelValue[ "height"]);
  cursor: v-bind(getCursor);
}

.tib-bg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: v-bind(modelValue[ "size"]);
  height: v-bind(modelValue[ "size"]);
  border-radius: 5px;
}

.tib-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tib-icon {
  position: relative;
  overflow: hidden;
  width: v-bind(modelValue[ "size"]);
  height: v-bind(modelValue[ "size"]);
  border-radius: 5px;
}

.tib-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tib-cover {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: v-bind(modelValue[ "size"]);
  height: v-bind(modelValue[ "size"]);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.tib-lt {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: v-bind(modelValue[ "ltSize"]);
  height: v-bind(modelValue[ "ltSize"]);
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.tib-lt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tib-rt {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: v-bind(modelValue[ "rtSize"]);
  height: v-bind(modelValue[ "rtSize"]);
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 40%);
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  color: var(--common-color-white);
  font-family: var(--font-title);
}

.tib-inner {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: v-bind(getInnerHeight);
  align-items: center;
  justify-content: center;
  background: rgb(20 20 20 / 40%);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: var(--common-color-white);
  font-family: var(--font-title);
  font-size: v-bind(getInnerFont);
}

.tib-inner img {
  width: v-bind(getInnerHeight);
  height: v-bind(getInnerHeight);
  margin-right: 5px;
}

.tib-outer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: v-bind(getOuterHeight);
  color: var(--common-text-title);
  font-size: v-bind(getOuterFont);
  text-align: center;
}
</style>