update

2025-03-27 15:38:21 +08:00
parent 3c85d9e0e7
commit 15b26ab2d9
31 changed files with 1003 additions and 22 deletions
--- a/src/components/XVideoModal.vue
+++ b/src/components/XVideoModal.vue
@@ -0,0 +1,51 @@
+<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>