RAS-WEB/src/views/screen/R_D_Environment/component/item.vue

<template>
  <div class="item-container">
    <div class="box-title" :class="[prop.pos == 'left'?'pos-l':'pos-r']">{{ prop.title }}</div>
    <div class="content">
      <slot></slot>      
    </div>
  </div>
</template>

<script setup>

const prop = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  pos: {
    type: String,
    default: 'left'
  }
})
</script>

<style lang="scss" scoped>
.item-container {
  width: 100%;
  height: 100%;
  .box-title {
    width: 100%;
    height: 41px;
    box-sizing: border-box;
    padding-left: 25px;
    font-size: 20px;
    line-height: 40px;
    color: #fff;
  }
  .pos-l {
    // background: linear-gradient(to right, #102238 0%, transparent 100%);
    background: url('/src/assets/images/box-title-l.png') no-repeat center center / 100% 100%;
  }
  .pos-r {
    // background: linear-gradient(to left, #102238 0%, transparent 100%);
    background: url('/src/assets/images/box-title-r.png') no-repeat center center / 100% 100%;
    text-align: right;
    padding-right: 25px;
  }
  .content {
    width: 100%;
    height: calc(100% - 41px);
  }
}
</style>