提交

src/view/SilkRoadShanShiPinList/index.vue

@@ -301,6 +301,7 @@ const clickShowVideo = item => {
   if (!item) return;
   video.value = item || {};
   if (!videoEleHTML) videoEleHTML = document.querySelector("video");
+  videoEleHTML.currentTime = 0;
   videoEleHTML.play();
 };
 </script>

src/view/SilkRoadSpringFestivalGala/pages/six.vue

@@ -1,57 +1,90 @@
 <template>
-	<div>
-		<van-swipe ref="swipe" :touchable="false" :show-indicators="false" vertical indicator-color="white">
-			<van-swipe-item>
-				<div style="width: 100%; overflow: hidden; position: relative">
-					<transition name="fade">
-						<img v-if="step === 5" @click="nextPage" src="../../../assets/img/next.png" class="next" />
-					</transition>
-					<div class="six" :style="'background-image: url(' + bgimg + ')'">
-						<img :src="kuangimg" :style="
+  <div>
+    <van-swipe
+      ref="swipe"
+      :touchable="false"
+      :show-indicators="false"
+      vertical
+      indicator-color="white"
+    >
+      <van-swipe-item>
+        <div style="width: 100%; overflow: hidden; position: relative">
+          <transition name="fade">
+            <img
+              v-if="step === 5"
+              @click="nextPage"
+              src="../../../assets/img/next.png"
+              class="next"
+            />
+          </transition>
+          <div class="six" :style="'background-image: url(' + bgimg + ')'">
+            <img
+              :src="kuangimg"
+              :style="
                 step === 2
                   ? 'opacity: 1'
                   : step >= 3
                   ? 'width: 25%;transform: translate(0, 0);opacity: 1; top: 1em; left: 1em'
                   : 'opacity: 0'
-              " class="firstImg" />
-						<transition name="fade">
-							<div class="sImg img" v-if="step === 1" :style="'width:' + width + 'px;'">
-								<template v-for="(item, i) in text.texts" :key="i">
-									<p v-text="item" :style="
+              "
+              class="firstImg"
+            />
+            <transition name="fade">
+              <div
+                class="sImg img"
+                v-if="step === 1"
+                :style="'width:' + width + 'px;'"
+              >
+                <template v-for="(item, i) in text.texts" :key="i">
+                  <p
+                    v-text="item"
+                    :style="
                       stepBody >= i
                         ? 'opacity: 1;color: ' + text.color
                         : 'color: ' + text.color
-                    "></p>
-									<br />
-								</template>
-							</div>
-						</transition>
-						<transition name="fade">
-							<div class="body" @click="changeNextStep" v-if="nextStep === 1">
-								<div class="loading">
-									<div class="loading1">
-										<div class="loading2"></div>
-									</div>
-								</div>
-							</div>
-						</transition>
-						<img :src="text2img" :style="step >= 4 ? 'opacity: 1' : ''" class="tImg" />
-						<transition name="fade">
-							<div class="btns" v-if="step === 5">
-								<div class="btn" @click="() => showDown(1)" style="margin-left: 0"
-									:stype="'border-color:' + text.color + ';color:' + text.color">
-									下载壁纸
-								</div>
-								<div class="btn" @click="() => showDown(2)"
-									:stype="'border-color:' + text.color + ';color:' + text.color">
-									生成海报
-								</div>
-							</div>
-						</transition>
-					</div>
-				</div>
-			</van-swipe-item>
-			<!-- <van-swipe-item style="overflow: auto">
+                    "
+                  ></p>
+                  <br />
+                </template>
+              </div>
+            </transition>
+            <transition name="fade">
+              <div class="body" @click="changeNextStep" v-if="nextStep === 1">
+                <div class="loading">
+                  <div class="loading1">
+                    <div class="loading2"></div>
+                  </div>
+                </div>
+              </div>
+            </transition>
+            <img
+              :src="text2img"
+              :style="step >= 4 ? 'opacity: 1' : ''"
+              class="tImg"
+            />
+            <transition name="fade">
+              <div class="btns" v-if="step === 5">
+                <div
+                  class="btn"
+                  @click="() => showDown(1)"
+                  style="margin-left: 0"
+                  :stype="'border-color:' + text.color + ';color:' + text.color"
+                >
+                  下载壁纸
+                </div>
+                <div
+                  class="btn"
+                  @click="() => showDown(2)"
+                  :stype="'border-color:' + text.color + ';color:' + text.color"
+                >
+                  生成海报
+                </div>
+              </div>
+            </transition>
+          </div>
+        </div>
+      </van-swipe-item>
+      <!-- <van-swipe-item style="overflow: auto">
         <div
           v-if="showSheet == 1"
           style="
@@ -69,419 +102,461 @@
           <seven />
         </div>
       </van-swipe-item> -->
-			<van-swipe-item style="overflow: auto">
-				<eight ref="eightRef" @showTitleFunc="showTitleFunc" @showVideo="showVideo" />
-			</van-swipe-item>
-		</van-swipe>
-
-		<transition name="fade">
-			<div class="model" v-if="showImg !== undefined">
-				<div class="gs">
-					<img :src="bgimg" style="width: 100%; height: 100%" alt="" />
-				</div>
-				<van-icon color="#fff" size="26" name="close" class="close" @click="close" />
-				<div class="modelImg">
-					<p>请长按保存图片</p>
-					<img :src="showImg" style="width: 100%; height: 100%" />
-				</div>
-			</div>
-		</transition>
-
-		<transition name="fade">
-			<div v-if="showOverlay" class="model">
-				<van-icon color="#fff" size="26" name="close" class="close" @click="closeSeven" />
-				<video class="sevenvideo" src=""></video>
-			</div>
-		</transition>
-
-		<van-dialog v-model:show="showTitle" title="登录" show-cancel-button :before-close="closeTitle">
-			<van-field required v-model="from.name" label="昵称" type="text" placeholder="请输入昵称" />
-			<van-field required v-model="from.phone" label="联系方式" type="tel" placeholder="请输入手机号">
-				<template #button>
-					<van-button v-if="isCode === 0" @click="getCode" size="small" type="primary">获取验证码</van-button>
-					<van-count-down v-if="isCode !== 0" @finish="isCode = 0" :time="isCode" format="ss 秒" />
-				</template>
-			</van-field>
-			<van-field required v-model="from.code" label="验证码" type="tel" placeholder="请输入验证码" />
-		</van-dialog>
-	</div>
+      <van-swipe-item style="overflow: auto">
+        <eight
+          ref="eightRef"
+          @showTitleFunc="showTitleFunc"
+          @showVideo="showVideo"
+        />
+      </van-swipe-item>
+    </van-swipe>
+
+    <transition name="fade">
+      <div class="model" v-if="showImg !== undefined">
+        <div class="gs">
+          <img :src="bgimg" style="width: 100%; height: 100%" alt="" />
+        </div>
+        <van-icon
+          color="#fff"
+          size="26"
+          name="close"
+          class="close"
+          @click="close"
+        />
+        <div class="modelImg">
+          <p>请长按保存图片</p>
+          <img :src="showImg" style="width: 100%; height: 100%" />
+        </div>
+      </div>
+    </transition>
+
+    <transition name="fade">
+      <div v-if="showOverlay" class="model">
+        <van-icon
+          color="#fff"
+          size="26"
+          name="close"
+          class="close"
+          @click="closeSeven"
+        />
+        <video class="sevenvideo" src=""></video>
+      </div>
+    </transition>
+
+    <van-dialog
+      v-model:show="showTitle"
+      title="登录"
+      show-cancel-button
+      :before-close="closeTitle"
+    >
+      <van-field
+        required
+        v-model="from.name"
+        label="昵称"
+        type="text"
+        placeholder="请输入昵称"
+      />
+      <van-field
+        required
+        v-model="from.phone"
+        label="联系方式"
+        type="tel"
+        placeholder="请输入手机号"
+      >
+        <template #button>
+          <van-button
+            v-if="isCode === 0"
+            @click="getCode"
+            size="small"
+            type="primary"
+            >获取验证码</van-button
+          >
+          <van-count-down
+            v-if="isCode !== 0"
+            @finish="isCode = 0"
+            :time="isCode"
+            format="ss 秒"
+          />
+        </template>
+      </van-field>
+      <van-field
+        required
+        v-model="from.code"
+        label="验证码"
+        type="tel"
+        placeholder="请输入验证码"
+      />
+    </van-dialog>
+  </div>
 </template>
 <script setup>
-	import {
-		ref,
-		reactive,
-		nextTick
-	} from "vue";
-	import data from "../data/data.json";
-	import {
-		showToast
-	} from "vant";
-	// import seven from "./seven.vue";
-	import eight from "./eight.vue";
-
-	const from = reactive({
-		name: "",
-		phone: localStorage.getItem("silkRoadPhone"),
-		code: ""
-	})
-
-	// import { onMounted, reactive } from "vue";
-	// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
-	/**
-	 * window.$originData.orginParames.title 页面标题
-	 * window.$originData.orginParames.parameters 固定参数值
-	 * window.$originData.urlParames url参数
-	 */
-
-	import {
-		getStore,
-		getSendVerifyCode,
-		getInfo,
-		getDrawPlus
-	} from "@/api/SilkRoadSpringGala.js";
-
-	const showImg = ref(undefined);
-	const swipe = ref(null);
-	let width = window.$originData.orginParames.availWidth * 0.7;
-	const type = Math.floor(Math.random() * 12 + 1);
-	let ori = data[type - 1] || {
-		texts: []
-	};
-	let max = 0;
-	const showTitle = ref(false);
-	for (let i = 0; i < ori.texts.length; i++) {
-		max < ori.texts[i].length && (max = ori.texts[i].length);
-	}
-	width = 14 * max;
-	const url = {
-		bg: require("@/assets/img/12/" + type + "-1.png"),
-		bg2: require("@/assets/img/12/" + type + "-2.png"),
-		kuang: require("@/assets/img/12/" + type + ".kuang.png"),
-		text2: require("@/assets/img/12/" + type + ".text2.png"),
-	};
-	const text = reactive({
-		...data[type - 1],
-		width,
-	});
-	const isCode = ref(0); // 验证码
-	const bgimg = ref(url.bg);
-	const kuangimg = ref(url.kuang);
-	const text2img = ref(url.text2);
-	const step = ref(0); // 动画步骤 默认0
-	const stepBody = ref(0); // 首页文字显示动画 默认0
-	const nextStep = ref(0);
-	const eightRef = ref(null);
-
-	// 如果有手机号获取用户信息
-	if (from.phone) {
-		getInfo({
-			phone: from.phone
-		}).then(r => {
-			r.addr && localStorage.setItem("silkRoadAddress", r.addr);
-			r.userName && localStorage.setItem("silkRoadName", r.userName);
-		});
-	}
-	let t = setTimeout(() => {
-	  clearTimeout(t);
-	  step.value += 1;
-	  t = setInterval(() => {
-	    stepBody.value += 1;
-	    if (stepBody.value === text.texts.length) {
-	      nextStep.value = 1;
-	      clearInterval(t);
-	  		  t = setInterval(() => {
-	  		    nextStep.value === 2 && (step.value += 1);
-	  		    if (step.value === 5) clearInterval(t);
-	  		  }, 3000);
-	    }
-	  }, 2000);
-	}, 200);
-
-	function nextPage() {
-		if (step.value !== 5) return;
-		swipe.value.next();
-	}
-
-	function changeNextStep() {
-		nextStep.value += 1;
-	}
-
-	function showTitleFunc() {
-		showTitle.value = true;
-		from.name = "";
-		from.phone = "";
-		from.code = "";
-	}
-
-
-	function getCode() {
-		// 获取验证码
-		if (!/1[0-9]{10}/.test(from.phone)) {
-			showToast("请输入正确的手机号");
-			return;
-		}
-		getSendVerifyCode({
-			phone: from.phone
-		}).then(() => {
-			isCode.value = 60000;
-		})
-	}
-
-	function closeTitle(type) {
-		if (type !== 'confirm') return true;
-		const v = !from.code || !from.phone || !from.name;
-		if (v) {
-			showToast("请输入完整信息。");
-			return false;
-		}
-		getStore({
-			"userName": from.name,
-			"phone": from.phone,
-			"verifyCode": from.code
-		}).then(() => {
-			localStorage.setItem("silkRoadPhone", from.phone);
-			localStorage.setItem("silkRoadCode", from.code);
-			localStorage.setItem("silkRoadName", from.name);
-			isCode.value = 0;
-			showTitle.value = false;
-			// 调用子组件抽奖
-			eightRef.value.draw();
-			return true
-		}).catch(() => {
-
-			return false
-		})
-	}
-
-	function showDown(type) {
-		switch (type) {
-			case 1:
-				showImg.value = url.bg;
-				break;
-			case 2:
-				showImg.value = url.bg2;
-				break;
-		}
-	}
-
-	function close() {
-		showImg.value = undefined;
-	}
-
-	// 视频播放
-	const showOverlay = ref(false);
-	let time = -1;
-	let autoTime = 0;
-	let current = 0;
-
-	function showVideo(url) {
-		showOverlay.value = true;
-		nextTick(() => {
-			let ele = document.querySelector(".sevenvideo");
-			ele.src = url;
-			ele.currentTime = 0;
-			current = 0;
-			time = -1;
-			// 已经开始
-			ele.addEventListener("playing", function() {
-				time = Date.now();
-				current = ele.duration * 1000;
-			});
-			// 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
-			ele.addEventListener("canplay", endVideo, false);
-			//播放结束
-			ele.addEventListener(
-				"ended",
-				function() {
-					console.log("ended");
-					endVideo();
-					closeSeven();
-				},
-				false
-			);
-			//暂停
-			ele.addEventListener("pause", endVideo, false);
-			ele.play();
-		});
-	}
-
-	function closeSeven() {
-		let ele = document.querySelector(".sevenvideo");
-		ele.pause();
-		showOverlay.value = false;
-	}
-
-	function endVideo() {
-		if (time == -1) return;
-		const phone = localStorage.getItem("silkRoadPhone");
-		autoTime = Date.now() - time;
-		if (autoTime / current <= 0.95 || !phone)
-			return;
-		getDrawPlus({
-			phone
-		}).then(() => {
-			showToast("已增加一次抽奖机会！");
-		})
-	}
+import { ref, reactive, nextTick } from "vue";
+import {
+  getStore,
+  getSendVerifyCode,
+  getInfo,
+  getDrawPlus,
+} from "@/api/SilkRoadSpringGala.js";
+import data from "../data/data.json";
+import { showToast } from "vant";
+// import seven from "./seven.vue";
+import eight from "./eight.vue";
+
+const from = reactive({
+  name: "",
+  phone: localStorage.getItem("silkRoadPhone"),
+  code: "",
+});
+
+// import { onMounted, reactive } from "vue";
+// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
+/**
+ * window.$originData.orginParames.title 页面标题
+ * window.$originData.orginParames.parameters 固定参数值
+ * window.$originData.urlParames url参数
+ */
+
+const showImg = ref(undefined);
+const swipe = ref(null);
+let width = window.$originData.orginParames.availWidth * 0.7;
+const type = Math.floor(Math.random() * 12 + 1);
+let ori = data[type - 1] || {
+  texts: [],
+};
+let max = 0;
+const showTitle = ref(false);
+for (let i = 0; i < ori.texts.length; i++) {
+  max < ori.texts[i].length && (max = ori.texts[i].length);
+}
+width = 14 * max;
+const url = {
+  bg: require("@/assets/img/12/" + type + "-1.png"),
+  bg2: require("@/assets/img/12/" + type + "-2.png"),
+  kuang: require("@/assets/img/12/" + type + ".kuang.png"),
+  text2: require("@/assets/img/12/" + type + ".text2.png"),
+};
+const text = reactive({
+  ...data[type - 1],
+  width,
+});
+const isCode = ref(0); // 验证码
+const bgimg = ref(url.bg);
+const kuangimg = ref(url.kuang);
+const text2img = ref(url.text2);
+const step = ref(0); // 动画步骤 默认0
+const stepBody = ref(0); // 首页文字显示动画 默认0
+const nextStep = ref(0);
+const eightRef = ref(null);
+
+// 如果有手机号获取用户信息
+if (from.phone) {
+  getInfo({
+    phone: from.phone,
+  }).then(r => {
+    r.addr && localStorage.setItem("silkRoadAddress", r.addr);
+    r.userName && localStorage.setItem("silkRoadName", r.userName);
+  });
+}
+let t = setTimeout(() => {
+  clearTimeout(t);
+  step.value += 1;
+  t = setInterval(() => {
+    stepBody.value += 1;
+    if (stepBody.value === text.texts.length) {
+      nextStep.value = 1;
+      clearInterval(t);
+      t = setInterval(() => {
+        nextStep.value === 2 && (step.value += 1);
+        if (step.value === 5) clearInterval(t);
+      }, 3000);
+    }
+  }, 2000);
+}, 200);
+
+function nextPage() {
+  if (step.value !== 5) return;
+  swipe.value.next();
+}
+
+function changeNextStep() {
+  nextStep.value += 1;
+}
+
+function showTitleFunc() {
+  showTitle.value = true;
+  from.name = "";
+  from.phone = "";
+  from.code = "";
+}
+
+function getCode() {
+  // 获取验证码
+  if (!/1[0-9]{10}/.test(from.phone)) {
+    showToast("请输入正确的手机号");
+    return;
+  }
+  getSendVerifyCode({
+    phone: from.phone,
+  }).then(() => {
+    isCode.value = 60000;
+  });
+}
+
+function closeTitle(type) {
+  if (type !== "confirm") return true;
+  const v = !from.code || !from.phone || !from.name;
+  if (v) {
+    showToast("请输入完整信息。");
+    return false;
+  }
+  getStore({
+    userName: from.name,
+    phone: from.phone,
+    verifyCode: from.code,
+  })
+    .then(() => {
+      localStorage.setItem("silkRoadPhone", from.phone);
+      localStorage.setItem("silkRoadCode", from.code);
+      localStorage.setItem("silkRoadName", from.name);
+      isCode.value = 0;
+      showTitle.value = false;
+      // 调用子组件抽奖
+      eightRef.value.draw();
+      return true;
+    })
+    .catch(() => {
+      return false;
+    });
+}
+
+function showDown(type) {
+  switch (type) {
+    case 1:
+      showImg.value = url.bg;
+      break;
+    case 2:
+      showImg.value = url.bg2;
+      break;
+  }
+}
+
+function close() {
+  showImg.value = undefined;
+}
+
+// 视频播放
+const showOverlay = ref(false);
+let time = -1;
+let autoTime = 0;
+let current = 0;
+
+function showVideo(url) {
+  showOverlay.value = true;
+  nextTick(() => {
+    let ele = document.querySelector(".sevenvideo");
+    ele.src = url;
+    ele.currentTime = 0;
+    current = 0;
+    time = -1;
+    // 已经开始
+    ele.addEventListener("playing", function () {
+      time = Date.now();
+      current = ele.duration * 1000;
+    });
+    // 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
+    ele.addEventListener("canplay", endVideo, false);
+    //播放结束
+    ele.addEventListener(
+      "ended",
+      function () {
+        console.log("ended");
+        endVideo();
+        closeSeven();
+      },
+      false
+    );
+    //暂停
+    ele.addEventListener("pause", endVideo, false);
+    ele.play();
+  });
+}
+
+function closeSeven() {
+  let ele = document.querySelector(".sevenvideo");
+  ele.pause();
+  showOverlay.value = false;
+}
+
+function endVideo() {
+  if (time == -1) return;
+  const phone = localStorage.getItem("silkRoadPhone");
+  autoTime = Date.now() - time;
+  if (autoTime / current <= 0.95 || !phone) return;
+  getDrawPlus({
+    phone,
+  }).then(() => {
+    showToast("已增加一次抽奖机会！");
+  });
+}
 </script>
 <style lang="scss" scoped>
-	.six {
-		width: 100%;
-		height: 100vh;
-		background-size: 100% 100%;
-		position: relative;
-
-		.body {
-			position: absolute;
-			bottom: 10vh;
-			width: 100vw;
-		}
-
-		img,
-		.img {
-			width: 50%;
-			transition-property: all;
-			transition-duration: 2s;
-			opacity: 0;
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%, -50%);
-		}
-
-		.firstImg {
-			transition-delay: 1s;
-			-moz-transition-delay: 1s;
-			/* Firefox 4 */
-			-webkit-transition-delay: 1s;
-			/* Safari 和 Chrome */
-			-o-transition-delay: 1s;
-			/* Opera */
-		}
-
-		.sImg {
-			width: 70%;
-			color: #ffffff;
-			font-family: OPPOSans;
-			font-size: 14px;
-			line-height: 3em;
-			opacity: 1;
-
-			p {
-				display: inline-block;
-				white-space: nowrap;
-				transition-property: all;
-				transition-duration: 2s;
-				opacity: 0;
-			}
-		}
-
-		.tImg {
-			width: 80%;
-			transition-delay: 1s;
-			-moz-transition-delay: 1s;
-			/* Firefox 4 */
-			-webkit-transition-delay: 1s;
-			/* Safari 和 Chrome */
-			-o-transition-delay: 1s;
-			/* Opera */
-		}
-
-		.btns {
-			position: absolute;
-			text-align: center;
-			bottom: 10vh;
-			width: 100%;
-
-			>div {
-				display: inline-block;
-				border: 1px solid #fff;
-				border-radius: 2em;
-				font-weight: 600;
-				color: #fff;
-				padding: 5px 15px;
-				margin-left: 2em;
-			}
-		}
-
-		.fade-enter-from,
-		.fade-leave-to {
-			opacity: 0;
-		}
-
-		.fade-enter-active,
-		.fade-leave-active {
-			transition: opacity 1s ease;
-		}
-
-		.fade-enter-to,
-		.fade-leave-from {
-			opacity: 1;
-		}
-	}
-
-	.next {
-		bottom: 40px;
-		left: 50%;
-		transform: translateX(-50%);
-		top: inherit;
-		width: 2em;
-		z-index: 1;
-		position: absolute;
-		animation-name: an;
-		animation-duration: 1s;
-		animation-timing-function: linear;
-		animation-iteration-count: infinite;
-		animation-direction: alternate;
-	}
-
-	@keyframes an {
-		from {
-			bottom: 10px;
-		}
-
-		to {
-			bottom: 15px;
-		}
-	}
-
-	.model {
-		position: fixed;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		right: 0;
-		z-index: 10;
-		background-color: #00000080;
-
-		.gs {
-			width: 100vw;
-			height: 100vh;
-			filter: blur(10px);
-			-webkit-filter: blur(10px);
-		}
-
-		.modelImg {
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%, -50%);
-			width: 80%;
-			text-align: center;
-			color: #ffffff;
-		}
-
-		.close {
-			position: absolute;
-			top: 1em;
-			right: 1em;
-		}
-
-		.sevenvideo {
-			top: 50%;
-			transform: translateY(-50%);
-			width: 100%;
-			position: absolute;
-		}
-	}
+.six {
+  width: 100%;
+  height: 100vh;
+  background-size: 100% 100%;
+  position: relative;
+
+  .body {
+    position: absolute;
+    bottom: 10vh;
+    width: 100vw;
+  }
+
+  img,
+  .img {
+    width: 50%;
+    transition-property: all;
+    transition-duration: 2s;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .firstImg {
+    transition-delay: 1s;
+    -moz-transition-delay: 1s;
+    /* Firefox 4 */
+    -webkit-transition-delay: 1s;
+    /* Safari 和 Chrome */
+    -o-transition-delay: 1s;
+    /* Opera */
+  }
+
+  .sImg {
+    width: 70%;
+    color: #ffffff;
+    font-family: OPPOSans;
+    font-size: 14px;
+    line-height: 3em;
+    opacity: 1;
+
+    p {
+      display: inline-block;
+      white-space: nowrap;
+      transition-property: all;
+      transition-duration: 2s;
+      opacity: 0;
+    }
+  }
+
+  .tImg {
+    width: 80%;
+    transition-delay: 1s;
+    -moz-transition-delay: 1s;
+    /* Firefox 4 */
+    -webkit-transition-delay: 1s;
+    /* Safari 和 Chrome */
+    -o-transition-delay: 1s;
+    /* Opera */
+  }
+
+  .btns {
+    position: absolute;
+    text-align: center;
+    bottom: 10vh;
+    width: 100%;
+
+    > div {
+      display: inline-block;
+      border: 1px solid #fff;
+      border-radius: 2em;
+      font-weight: 600;
+      color: #fff;
+      padding: 5px 15px;
+      margin-left: 2em;
+    }
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 1s ease;
+  }
+
+  .fade-enter-to,
+  .fade-leave-from {
+    opacity: 1;
+  }
+}
+
+.next {
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  top: inherit;
+  width: 2em;
+  z-index: 1;
+  position: absolute;
+  animation-name: an;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+@keyframes an {
+  from {
+    bottom: 10px;
+  }
+
+  to {
+    bottom: 15px;
+  }
+}
+
+.model {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+  background-color: #00000080;
+
+  .gs {
+    width: 100vw;
+    height: 100vh;
+    filter: blur(10px);
+    -webkit-filter: blur(10px);
+  }
+
+  .modelImg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80%;
+    text-align: center;
+    color: #ffffff;
+  }
+
+  .close {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+  }
+
+  .sevenvideo {
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    position: absolute;
+  }
+}
 </style>