52 lines
1.6 KiB
Vue
52 lines
1.6 KiB
Vue
|
<script setup>
|
||
|
|
import {ref} from 'vue'
|
||
|
|
import XModal from "./XModal.vue";
|
||
|
|
import fmt from '../static/images/fmt.png';
|
||
|
|
import play from '../static/icons/play.png';
|
||
|
|
|
||
|
|
const show = ref(false);
|
||
|
|
const playVideo = ref(false);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view @click="show=true">
|
||
|
|
<slot></slot>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<x-modal
|
||
|
|
class="x-video-modal"
|
||
|
|
v-model:show="show">
|
||
|
|
<view class="!p-[20rpx] relative">
|
||
|
|
<image
|
||
|
|
@click="show=false"
|
||
|
|
class="!w-[52rpx] !h-[52rpx] !absolute left-1/2 -translate-x-1/2 bottom-[-100rpx]"
|
||
|
|
src="/static/icons/close.png">
|
||
|
|
</image>
|
||
|
|
|
||
|
|
<view class="!w-full relative rounded-[16rpx] overflow-hidden">
|
||
|
|
<image v-if="!playVideo" class="!w-full" mode="widthFix" :src="fmt"></image>
|
||
|
|
<view @click="playVideo=!playVideo" v-if="!playVideo"
|
||
|
|
class="absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,.4)] z-10 !flex justify-center items-center">
|
||
|
|
<image class="!w-[94rpx] !h-[94rpx]" :src="play"></image>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<video
|
||
|
|
autoplay
|
||
|
|
@pause="playVideo=!playVideo"
|
||
|
|
class="!w-full"
|
||
|
|
v-else
|
||
|
|
src="https://shopyunlng.oss-cn-beijing.aliyuncs.com/upload/2025/03-18/15-31-150289-429952696.m4v">
|
||
|
|
</video>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</x-modal>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.x-video-modal {
|
||
|
|
.tui-modal-box {
|
||
|
|
margin-bottom: 200rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|