43 lines
1.3 KiB
Vue
43 lines
1.3 KiB
Vue
<template>
|
|
<div class="page">
|
|
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="1s">
|
|
<img :src="item.pngurl" mode="widthFix"></img>
|
|
</section>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { bsInfo } from "@/utils/browser";
|
|
import WOW from "wow.js";
|
|
|
|
const item = ref({
|
|
pngurl: "http://localhost:5235/FileServer/Scale/DmsFile/SYSTEM/JPG/bd405061-a12c-4c41-b55c-f61aa8eebd89-3-3.JPG",
|
|
animateClass: "slideInLeft",
|
|
iteration: 2,
|
|
duration: 3000,
|
|
});
|
|
|
|
onMounted(() => {
|
|
var wow = new WOW({
|
|
boxClass: "wow", // animated element css class (default is wow)
|
|
animateClass: "animated", // animation css class (default is animated)
|
|
offset: 0, // distance to the element when triggering the animation (default is 0)
|
|
mobile: true, // trigger animations on mobile devices (default is true)
|
|
live: true, // act on asynchronously loaded content (default is true)
|
|
scrollContainer: null, // optional scroll container selector, otherwise use window,
|
|
resetAnimation: true, // reset animation on end (default is true)
|
|
});
|
|
wow.init();
|
|
});
|
|
</script>
|
|
<style scoped>
|
|
.page {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.swiper-item-png {
|
|
overflow: hidden;
|
|
}
|
|
</style> |