<script setup>

</script>

<template>
  <div class="container">
    <div class="content1">
      <div class="wrap1">
        <div class="wrap1_1">
          <div class="wrap1_1_1">
            <img src="@/assets/images/YW—0314-A-1@3x.png" alt="">
          </div>
        </div>
        <div class="wrap1_2">
          <div class="wrap1_2_1">
            <img src="@/assets/images/H—128-A-0001@3x.png" alt="">
          </div>
        </div>
        <div class="wrap1_3">
          <div class="wrap1_3_1">
            <img src="@/assets/images/L—0381-D-0001@3x.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="content2">
      <div class="wrap1">
        <div class="wrap1_1">
          <img src="@/assets/images/zu28@3x.png" alt="">
        </div>
        <div class="wrap1_2">
          <div class="wrap1_2_1">
            <img src="@/assets/images/yqbwgjs@3x.png" alt="">
          </div>
          <div class="wrap1_2_2">
            <img src="@/assets/images/2323tys.png" alt="">
          </div>
        </div>
      </div>
      <div class="wrap2">

        <div class="wrap2_1">
          <img src="@/assets/images/37d12f2eb9389b502d3fca2a863.png" alt="">
        </div>
        <div class="wrap2_2">延庆博物馆（Yanqing
          Museum）是北京市延庆区一座大型综合性博物馆，属中国区县级大型综合性博物馆，位于延庆城区主干道繁华街区（妫水北街24号），其前身为延庆区文物管理所展陈库房。
          延庆博物馆是目前北京郊区规模最大、功能最全的区级现代化综合性博物馆，2004年开始筹备，2008年9月30日正式对外开放，2016年实施升级改造工程，2018年11月1日升级改造完成正式对外开放。全馆建筑面积逾6100平方米，展厅面积2400余平方米。延庆博物馆以延庆区文物管理所历年保藏、征集和延庆地区出土文物为基本素材
        </div>
      </div>
    </div>
    <div class="content3">
      <div class="wrap1">
        <div class="wrap1_1">
          <img src="@/assets/images/zi17@3x.png" alt="">
        </div>
        <div class="wrap1_2">
          <img src="@/assets/images/fdfdfdf1.png" alt="">
        </div>
      </div>
      <div class="wrap2">
        <div class="wrap2_1">
          <div class="wrap2_1_1">某某某某某-藏品</div>
          <div class="wrap2_1_2">
            咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩
          </div>
        </div>
        <div class="wrap2_2"></div>
      </div>
    </div>
    <div class="content4">
<div class="wrap1">
  <div class="wrap1_1"></div>
  <div class="wrap1_2">
    <div class="wrap1_2_1">某某某某某-藏品</div>
    <div class="wrap1_2_2">咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩</div>
  </div>
</div>
    </div>
    <div class="content5">
      <div class="wrap1">
        <div class="wrap1_2">
          <img src="@/assets/images/zu24@2x.png" alt="">
        </div>
        <div class="wrap1_1">
          <img src="@/assets/images/dfdf8@2x.png" alt="">
        </div>
      </div>
      <div class="wrap2">
        <img src="@/assets/images/dfdjqqd@2x.png" alt="">
      </div>
    </div>
    <div class="content6">
      <div class="wrap1">
        <div class="wrap1_1">
          <img src="@/assets/images/zughjlkop.png" alt="">
        </div>
        <div class="wrap1_2">
          <img src="@/assets/images/zujsf23@2x.png" alt="">
        </div>
      </div>
      <div class="wrap2">
        <img src="@/assets/images/jingqingqita1.png" alt="">
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.container {
  .content6 {
    margin-top: 179px;
    padding-left: 87px;
    padding-right: 87px;
    .wrap2 {
      background-repeat: no-repeat;
      box-sizing: border-box;
      padding: 77px 72px 92px 82px;
      margin-top: 51px;
      height: 727px;
      background-size: contain;
      background-image: url("@/assets/images/hb123322.png");
      display: flex;
      align-items: center;
      justify-content: center;
      img{

        width: 246px;
        height: 87px;
        color: #54796F;
      }
    }

    .wrap1 {
      display: flex;
      justify-content: space-between;
      align-items: end;

      .wrap1_2 {
        img {
          width: 184px;
          height: 87px;
        }
      }

      .wrap1_1 {
        border-radius: 51px;
        width: 850px;
        height: 200px;
        background-color: #5F4040;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 570px;
          height: 147px;
        }
      }
    }
  }
  .content5 {
    margin-top: 179px;
    padding-left: 87px;
    padding-right: 87px;

    .wrap2 {
      box-sizing: border-box;
      padding: 77px 72px 92px 82px;
      margin-top: 51px;
      height: 727px;
      background-size: contain;
      background-image: url("@/assets/images/sdfsfddfd.png");
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
    justify-content: center;
     img{

       width: 246px;
       height: 87px;
       color: #54796F;
     }
    }

    .wrap1 {
      display: flex;
      justify-content: space-between;
      align-items: end;

      .wrap1_2 {
        img {
          width: 184px;
          height: 87px;
        }
      }

      .wrap1_1 {
        border-radius: 51px;
        width: 850px;
        height: 200px;
        background-color: #54796F;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 608px;
          height: 139px;
        }
      }
    }
  }
  .content4 {
    margin-top: 51px;
    padding-left: 87px;
    padding-right: 87px;
    box-sizing: border-box;
    .wrap1{
      box-sizing: border-box;
      height: 727px;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: url("@/assets/images/jx58@2x.png");
      display: flex;
      align-items: center;
      padding: 87px 118px 92px 72px;
      .wrap1_2{
        .wrap1_2_2{
          width: 947px;
          height: 486px;
            overflow-y: auto;
          color: #8BA29C;
          font-size: 51px;
          line-height: 70px;
        }
        .wrap1_2_1{
          margin-bottom: 20px;
          color: #000;
          font-size: 61px;
          font-weight: 900;
        }

      }
      .wrap1_1{
        margin-right: 61px;
        flex-shrink: 0;
        width: 565px;
        height: 549px;
        background-color: #54796F;
        border-radius: 51px;

      }
    }

  }

  .content3 {
    margin-top: 179px;
    padding-left: 87px;
    padding-right: 87px;

    .wrap2 {
      box-sizing: border-box;
      padding: 77px 72px 92px 82px;
      margin-top: 51px;
      height: 727px;
      background-size: contain;
      background-image: url("@/assets/images/jx1@2x.png");
      display: flex;
      align-items: center;

      .wrap2_2 {
        flex-shrink: 0;
        width: 565px;
        height: 549px;
        background-color: #4E0A0A;
        border-radius: 51px;
      }

      .wrap2_1 {
        .wrap2_1_2 {
          height: 486px;
          overflow-y: auto;
          color: #A26E52;
          font-size: 51px;
        }

        .wrap2_1_1 {
          margin-bottom: 15px;
          color: #5F4040;
          font-size: 61px;
          font-weight: 900;
        }


      }
    }

    .wrap1 {
      display: flex;
      justify-content: space-between;
      align-items: end;

      .wrap1_2 {
        img {
          width: 184px;
          height: 87px;
        }
      }

      .wrap1_1 {
        border-radius: 51px;
        width: 850px;
        height: 200px;
        background-color: #A46247;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 408px;
          height: 133px;
        }
      }
    }
  }

  .content2 {
    margin-top: 276px;
    padding-left: 87px;
    padding-right: 87px;

    .wrap2 {
      padding-left: 41px;
      padding-right: 123px;
      border-radius: 51px;
      width: auto;
      border: 10px solid #547970;
      height: 604px;
      display: flex;
      align-items: center;

      .wrap2_2 {
        margin-left: 70px;
        font-weight: 700;
        color: #58605E;
        font-size: 51px;
        line-height: 80px;
        height: 492px;
        overflow-y: auto;
      }

      .wrap2_1 {
        flex-shrink: 0;
        border-radius: 51px;
        width: 492px;
        height: 492px;
        background-color: #54796F;
        position: relative;

        img {
          width: 481px;
          height: 481px;
          bottom: 20px;
          right: 20px;
          position: absolute;

        }
      }
    }

    .wrap1 {
      margin-bottom: 46px;
      display: flex;
      align-items: center;

      .wrap1_2 {
        margin-left: 46px;
        display: flex;
        flex-direction: column;

        .wrap1_2_2 {
          width: 430px;
          height: 41px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .wrap1_2_1 {
          width: 430px;
          height: 87px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .wrap1_1 {
        width: 126px;
        height: 118px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .content1 {
    background-size: contain;
    width: 1920px;
    height: 1920px;
    background-image: url("@/assets/images/800@3x.png");
    position: relative;

    .wrap1 {
      bottom: -77px;
      position: absolute;
      right: 128px;
      display: flex;

      .wrap1_3 {
        margin-left: 31px;
        width: 236px;
        height: 236px;
        border-radius: 31px;
        background-color: #A46247;
        position: relative;

        .wrap1_3_1 {
          top: -20px;
          left: -20px;
          position: absolute;

          img {
            width: 236px;
            height: 236px;
          }
        }


      }

      .wrap1_2 {
        margin-left: 31px;
        width: 236px;
        height: 236px;
        border-radius: 31px;
        background-color: #5F4040;
        position: relative;

        .wrap1_2_1 {
          top: -20px;
          left: -20px;
          position: absolute;

          img {
            width: 236px;
            height: 236px;
          }
        }


      }

      .wrap1_1 {
        width: 236px;
        height: 236px;
        border-radius: 31px;
        position: relative;
        background-color: #54796F;

        .wrap1_1_1 {
          top: -20px;
          left: -20px;
          position: absolute;

          img {
            width: 236px;
            height: 236px;
          }
        }


      }
    }
  }
}
</style>
