scd_tools_ui/src/pages/netStructPicture/components/basicInfo.vue

<!-- 基础信息 -->
<template>
  <template>  
  <div class="container">  
    <div class="top-left">图片1</div>  
    <div class="top-right">图片2</div>  
    <div class="bottom-left">图片3</div>  
    <div class="bottom-right">图片4</div>  
    <div class="center">中间图片</div>  
  </div>  
</template>
</template>
<script setup>
import { onMounted, watch, ref,nextTick,defineEmits } from "vue";
const props = defineProps({
  checkDialogData: {
    type: Object,
    default: () => {},
  },
});
</script>
<style scoped lang="scss">  
.container {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  width: 100%;  
  height: 100vh; // 或者其他你需要的高度值  
}  
  
.top-left, .top-right, .bottom-left, .bottom-right {  
  width: 50px; // 根据需要调整宽度和高度  
  height: 50px; // 根据需要调整宽度和高度  
}  
  
.top-left {  
  background:url("~@/assets/image/instruct/navtop.png") no-repeat center center;  
}  
  
.top-right {  
  background: url("~@/assets/image/instruct/navtop.png") no-repeat center center;  
}  
  
.bottom-left {  
  background: url("~@/assets/image/instruct/navtop.png") no-repeat center center;  
}  
  
.bottom-right {  
  background: url("~@/assets/image/instruct/navtop.png") no-repeat center center;  
}  
  
.center {  
  width: 100px; // 根据需要调整宽度和高度  
  height: 100px; // 根据需要调整宽度和高度  
  background: url('path/to/centerImage.jpg') no-repeat center center;  
}  
</style>