fullpage-show/src/components/pages/unit.vue

<template>
  <div class="section unit">
    <div class="box">
      <div class="wwintrobox wwintrobox1">
        <div class="wwtitle">{{props.title}}</div>
        <div class="wwintro1">{{props.years}}</div>
      </div>
      <div class="wwmap hide">
        <img :src="request(`/img/map/${props.img}.webp`)/img/map/${}.webp" alt="" />
      </div>
      <div class="wwbox fadeIn">
        <img
          :src="request(`/img/webp/${props.img}.webp`)"
          alt=""
          style="transform: translateY(-13.9579px) translateX(40.2477px)"
        />
      </div>
      <div class="wwinfobox">
        <div class="wwinfo">陕西省考古研究院藏</div>
        <div class="wwinfo">
          1991年陕西省长安区南里王村<br />贞观元年（627）窦皦墓出土
        </div>
      </div>
    </div>
  </div>
</template>
  
<script setup>
// ts写法
const props = withDefaults(defineProps<{
    title?: string, // 是否必传
    years?: string, // 是否必传
    position?: string, // 是否必传
    address?: string, // 是否必传
    img?: string, // 是否必传
    map?: string // 是否必传
}>(), {
    title:'玉梁金宝钿带',
    years:'北朝至唐早期',
    address:'陕西省考古研究院藏',
    position:'1991年陕西省长安区南里王村',
    map: 'map-yljbxd',
    img: 'yljbdd-1',
})
</script>
  
  <style lang="scss" scoped>
@import "/src/assets/style/index.css";
.section {
  position: relative;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: no-repeat center/cover;
  justify-content: flex-start;
}
</style>