admin_home/src/views/template/style/components/staticHtml/2.vue

<template>
  <div class="onlyImgSectorListBox">
    <div class="onlyImgSectorItemBox1">
      <img src="@/assets/template/component/pic1.png" />
      <img src="@/assets/template/component/pic2.png" />
    </div>
    <div class="onlyImgSectorItemBox3">
      <img src="@/assets/template/component/pic3.png" />
    </div>
    <div class="onlyImgSectorItemBox2">
      <img src="@/assets/template/component/pic4.png" />
    </div>
    <div class="onlyImgSectorItemBox1">
      <img src="@/assets/template/component/pic1.png" />
      <img src="@/assets/template/component/pic2.png" />
    </div>
    <div class="onlyImgSectorItemBox3">
      <img src="@/assets/template/component/pic3.png" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id:{
      type:Number,
      default:0
    },
    sort:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
     
    };
  },
  methods: {
    
  },
  mounted() {
    
  },
};
</script>

<style scoped lang="less">
  .onlyImgSectorListBox {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    //border: 2px dashed #999;
    position: relative;
    height: 300px;
    img {
      width: 100%;
      display: block;
    }
    .onlyImgSectorItemBox1, .onlyImgSectorItemBox2, .onlyImgSectorItemBox3 {
      height: 300px;
      box-sizing: border-box;
    }
    .onlyImgSectorItemBox2 {
      width: 50%;
      padding: 0 10px;
      img {
        height: 100%;
      }
    }
    .onlyImgSectorItemBox3 {
      width: 12.4%;
      img {
        height: 100%;
      }
    }
    .onlyImgSectorItemBox1{
      width: 12.4%;
      padding-right: 10px;
      img {
        height: 50%;
        &:first-child {
          padding-bottom: 5px;
        }
        &:last-child {
          padding-top: 5px;
        }
      }
    }
  }
</style>