<script setup>

import HeaderBreadcrumb from "@/components/HeaderBreadcrumb.vue";
</script>

<template>
  <div>
    <header-breadcrumb :path="['关于我们', '画廊']"/>
    <div class="portfolio-area single-page-gallery">
      <div class="container">
        <div class="row g-4 g-lg-5 gallery-area" style="position: relative; height: 612.641px;">
          <!-- Card -->
          <div class="col-12 col-sm-6 col-lg-3" style="position: absolute; left: 0%; top: 0px;">
            <div class="portfolio-card">
              <div class="portfolio-image  wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
                <img src="/img/bg-img/inner/g-1.png" alt="">

                <!-- Overlay Content -->
                <div class="overlay-content d-flex align-items-center justify-content-center">
                  <div class="text-center venobox-area">
                    <a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="/img/bg-img/inner/g-1.png">
                      <span class="icon-Arrow-1"></span>
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <div class="portfolio-card mt-20">
              <div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
                <img src="/img/bg-img/inner/g-2.png" alt="">

                <!-- Overlay Content -->
                <div class="overlay-content d-flex align-items-center justify-content-center">
                  <div class="text-center">
                    <a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="/img/bg-img/inner/g-2.png">
                      <span class="icon-Arrow-1"></span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Card -->
          <div class="col-12 col-sm-6 col-lg-3" style="position: absolute; left: 25%; top: 0px;">
            <div class="portfolio-card">
              <div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
                <img src="/img/bg-img/inner/g-3.png" alt="">

                <!-- Overlay Content -->
                <div class="overlay-content d-flex align-items-center justify-content-center">
                  <div class="text-center">
                    <a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="/img/bg-img/inner/g-3.png">
                      <span class="icon-Arrow-1"></span>
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <div class="portfolio-card mt-20">
              <div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
                <img src="/img/bg-img/inner/g-4.png" alt="">

                <!-- Overlay Content -->
                <div class="overlay-content d-flex align-items-center justify-content-center">
                  <div class="text-center">
                    <a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="/img/bg-img/inner/g-4.png">
                      <span class="icon-Arrow-1"></span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Card -->
          <div class="col-12 col-sm-6 col-lg-3" style="position: absolute; left: 50%; top: 0px;">
            <div class="portfolio-card">
              <div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
                <img src="/img/bg-img/inner/g-5.png" alt="">

                <!-- Overlay Content -->
                <div class="overlay-content d-flex align-items-center justify-content-center">
                  <div class="text-center">
                    <a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="/img/bg-img/inner/g-5.png">
                      <span class="icon-Arrow-1"></span>
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <div class="portfolio-card mt-20">
              <div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
                <img src="/img/bg-img/inner/g-5.png" alt="">

                <!-- Overlay Content -->
                <div class="overlay-content d-flex align-items-center justify-content-center">
                  <div class="text-center">
                    <a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="/img/bg-img/inner/g-5.png">
                      <span class="icon-Arrow-1"></span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Card -->
          <div class="col-12 col-sm-6 col-lg-3" style="position: absolute; left: 75%; top: 0px;">
            <div class="portfolio-card">
              <div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
                <img src="/img/bg-img/inner/g-6.png" alt="">

                <!-- Overlay Content -->
                <div class="overlay-content d-flex align-items-center justify-content-center">
                  <div class="text-center">
                    <a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="/img/bg-img/inner/g-6.png">
                      <span class="icon-Arrow-1"></span>
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <div class="portfolio-card mt-20">
              <div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
                <img src="/img/bg-img/inner/g-7.png" alt="">

                <!-- Overlay Content -->
                <div class="overlay-content d-flex align-items-center justify-content-center">
                  <div class="text-center">
                    <a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="//img/bg-img/inner/g-7.png">
                      <span class="icon-Arrow-1"></span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>