busroute/src/components/box.vue

<template>
  <div
    class="box"
    :style="`width:${width}px;height:${height}px`"
  >
    <div class="box-top">
      {{ name }}
      <img :src="img32">
      <img :src="img31">
      <img :src="img33">
    </div>
    <div class="box-content">
      <slot />
    </div>
  </div>
</template>

<script setup lang='ts'>
import img32 from '@/assets/img/32.svg'
import img31 from '@/assets/img/31.svg'
import img33 from '@/assets/img/33.svg'

defineProps<{
  width: number,
  height: number,
  name: string
}>()
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;

  &-top {
    width: 100%;
    height: 40px;
    font-weight: 700;
    font-style: oblique;
    white-space: nowrap;
    text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.6980392157);
    font-size: 24px;
    color: white;
    line-height: 40px;
    text-indent: 73px;
    position: relative;

    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;

      &:first-child {
        top: -10px;
        width: 60px;
        height: 60px;
      }

      &:last-child {
        width: auto;
        height: 50%;
        left: unset;
        right: 45px;
        top: 50%;
        transform: translate(0, -50%);
      }
    }
  }

  &-content {
    height: calc(100% - 60px);
    background: linear-gradient(180deg, rgba(33, 133, 232, 0.0902) 0%, rgba(0, 170, 255, 0) 99%);
  }
}
</style>