<script setup>
import ExamplesContent from './ExamplesContent.vue';
import { useBootstrapBreakpoint } from './useBreakpoint.js'; // 假设 useBreakpoint.js 路径正确
const { breakpoint } = useBootstrapBreakpoint();
</script>

<template>
  <div class="pageroot" id="examplesprocessroot">
    <div id="examplebanner" class="videorootbanner">
<!--      <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
<!--           src="/ExpVideoPreload.png"-->
<!--           class="videoimg"/>-->
      <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
             poster="/ExpVideoPreload.png"
             controls=""
             id="expbannervideo"
             muted autoplay="autoplay"
             loop="loop" playsinline webkit-playsinline
             class="bannervideos">
        <source src="/ExpVideo.mp4" type="video/mp4"></source>
      </video>
      <video v-else
          poster="/ExpVideoPreload.png"
          id="expbannervideo"
          muted autoplay="autoplay"
          loop="loop" playsinline webkit-playsinline
          class="bannervideos">
        <source src="/ExpVideo.mp4" type="video/mp4"></source>
      </video>
      <div id="expbanner" class="bannerovervideo">
        <div class="bannercontent">
          <span class="banner1">助力不同行业客户<br /></span>
          <span class="banner2">实现业务增长和竞争力提升</span>
        </div>
      </div>
    </div>
    <ExamplesContent></ExamplesContent>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "Examples"
}
</script>

<style scoped lang="scss">
@import "src/publicstyle.scss";

#examplesprocessbanner{
  @include media-breakpoint-between(xs, md) {
    background-image: url('/ExamplesRes/Examplesbanner_wep.png');
  }

  @include media-breakpoint-up(md) {
    background-image: url('/ExamplesRes/Examplesbanner.png');
  }
}
</style>
