dvcp_v2_webapp/ui/dv/layout/AiDvDisplay/components/Display0.vue

<template>
  <div class="display0">
    <div class="display0-container">
      <div class="display0-content">
        <img class="leftBg" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-left.png">
        <img class="contentBg" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-bg.png" alt=""/>
        <img class="leftBg" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-left.png">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'display0',
}
</script>

<style lang="scss" scoped>
.display0 {
  //position: relative;
  width: 840px;
  height: 465px;

  .display0-content {
    display: flex;
    position: absolute;
    width: 100%;
    height: 465px;
    align-items: center;
    justify-content: space-between;
    background-size: cover;


    .leftBg {
      position: absolute;
      left: 0;

      &:last-of-type {
        left: unset;
        right: 0;
        transform: rotate(180deg);
      }
    }
    .contentBg{
      transform-style: preserve-3d;
    }
  }
}
</style>