添加教程下载 和调整作品详情

src/component/HomePage/ColorboardUpload.vue

@@ -145,7 +145,8 @@
                     <div class="get_color_block">
                         <input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
                         <div class="get_color_button" @click="getTcxColor()">
-                            <span class="icon iconfont icon-huoquduixiang"></span>
+                            <!-- <span class="icon iconfont icon-huoquduixiang"></span> -->
+							<span class="fi fi-br-fill"></span>
                             <span class="get_color_des">{{ $t('ColorboardUpload.ExtractColor') }}</span>
                         </div>
 						<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
@@ -1374,9 +1375,8 @@ export default defineComponent({
                         vertical-align: middle;
                         cursor: pointer;
 
-                        .icon-huoquduixiang{
+                        .fi-br-fill{
                             margin-right: calc(0.5rem*1.2);
-                            font-size: calc(2rem*1.2);
                             color:#343579;
                             vertical-align: middle;
                         }

src/component/HomePage/scaleVideo.vue

@@ -0,0 +1,110 @@
+<template>
+	<div v-show="modalShow" class="general_video">
+		<div class="video_box">
+			<div class="general_video_btn" @click="clearVideo">
+				<i class="fi fi-rr-cross-small"></i>
+			</div>
+			<video ref="video" controls>
+				<source :src="url" type="video/mp4">
+				Your browser does not support the video tag or the file format of this video.
+			</video>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, h, ref ,toRefs,computed,reactive, watch} from "vue";
+export default defineComponent({
+	props:{
+		visible: {
+			type: Boolean,
+			default: false,
+		},
+		remove: {
+			type: Function, //传入移除节点方法,这里是createApp中的方法
+			default: null,
+		},
+		url: {
+			type: String,
+			default: "",
+		},
+	},
+	
+
+    setup(props:any,{emit}) {
+		const modalShow = ref(false);
+		modalShow.value = props.visible;
+		let clearVideo = ()=>{
+			modalShow.value = false
+		}
+		let video = ref(null)
+		watch(() => modalShow.value,
+			(newVal,oldVal)=>{
+				!newVal && props.remove()				
+			}
+		)
+        return {
+			modalShow,
+			clearVideo,
+			video,
+        };
+    },
+    data() {
+        return {
+            // moodTemplateId: "", //模板id
+			
+        };
+    },
+
+    mounted() {
+    },
+    methods: {
+		
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.general_video {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	background: rgba(0,0,0,.5);
+	z-index: 9999;
+	top: 0;
+	left: 0;
+	.video_box{
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+		width: 80%;
+		height: auto;
+		position: absolute;
+		video{
+			width: 100%;
+			height: 100%;
+			object-fit: contain;
+		}
+		.general_video_btn{
+			color: #fff;
+			border-radius: 50%;
+			background: #000;
+			width: 5rem;
+			height: 5rem;
+			position: absolute;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			right: 0;
+			top: 0;
+			transform: translate(50%,-50%);
+			cursor: pointer;
+			z-index: 2;
+			i{
+				font-size: 4rem;
+				display: flex;
+			}
+		}
+	}
+}
+</style>