|
|
@@ -0,0 +1,775 @@
|
|
|
+<template>
|
|
|
+ <!-- pc端才使用 v-touch-->
|
|
|
+ <!--
|
|
|
+ v-touch:swipe.left="() => onSwipeChange(1)"
|
|
|
+ v-touch:swipe.right="() => onSwipeChange(-1)"
|
|
|
+ :swipe-options="{ direction: 'horizontal' }"
|
|
|
+
|
|
|
+-->
|
|
|
+ <div
|
|
|
+ class="poem-list-page"
|
|
|
+ @touchstart="(e) => touchstart(e.touches[0].pageX)"
|
|
|
+ @touchmove="(e) => touchmove(e.touches[0].pageX)"
|
|
|
+ @touchend="(e) => touchend((val) => onSwipeChange(val))"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="RWbox"
|
|
|
+ :style="`width: ${domWidth}px; left:-${
|
|
|
+ baseRWboxLeft ? 500 : indexAc * pageWidth
|
|
|
+ }px`"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(item1, index1) in listRes"
|
|
|
+ :key="index1"
|
|
|
+ :class="`ROW ROW${item1.waiClass + 1} ROWW${index1 + 1}`"
|
|
|
+ :style="`width:${pageWidth}px; opacity:${
|
|
|
+ index1 === indexAc ? '1' : isOpcMove ? '0' : ''
|
|
|
+ }`"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-for="(item2, index2) in item1.imgArr"
|
|
|
+ :key="index2"
|
|
|
+ :style="`transform: translateX(${isMoveFu(
|
|
|
+ index1,
|
|
|
+ item2.moveNum
|
|
|
+ )}px) translateZ(0);`"
|
|
|
+ :class="item2.classTxt"
|
|
|
+ :src="require(`@/assets/images/RW/${item2.imgName}.png`)"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+
|
|
|
+ <!-- 诗句内容 -->
|
|
|
+ <div
|
|
|
+ class="ROWtxt"
|
|
|
+ :class="[`typesetting-${getTypesettingIdx(item1['类型'])}`]"
|
|
|
+ >
|
|
|
+ <div class="inner-wrap">
|
|
|
+ <div class="title-wrap">
|
|
|
+ <h1>《{{ item1["标题"] }}》</h1>
|
|
|
+ <div class="sub-title">
|
|
|
+ <span class="author">{{ item1["作者"] }}</span>
|
|
|
+ <span class="age">{{ item1["朝代"] }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p>{{ item1["正文"] }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 最底部的文字提示 -->
|
|
|
+ <div :class="`RWind ${txtTit ? 'RWindShow' : ''}`">
|
|
|
+ 暂无更多内容
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 操作提示 -->
|
|
|
+ <OperationTip
|
|
|
+ class="operation-tip"
|
|
|
+ :direction="'h'"
|
|
|
+ :text="'下一章'"
|
|
|
+ color="green"
|
|
|
+ :is-show="isShowOperationTip"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 返场视频 -->
|
|
|
+ <div :class="`backVideo ${backVideoFlag ? 'backVideoShow' : ''}`">
|
|
|
+ <video
|
|
|
+ ref="backVideoRef"
|
|
|
+ src="@/assets/images/RW/play.mp4"
|
|
|
+ playsinline
|
|
|
+ muted
|
|
|
+ webkit-playsinline="true"
|
|
|
+ x5-video-player-type="h5"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 返回按钮 -->
|
|
|
+ <div class="RWback">
|
|
|
+ <BtnBack
|
|
|
+ class="button-back"
|
|
|
+ @click="btnBackFu"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 选择 时代 -->
|
|
|
+ <div
|
|
|
+ :class="`RWsBtn ${ageFlga ? 'RWsBtnHide' : ''}`"
|
|
|
+ @click="ageFlga = true"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ :src="require(`@/assets/images/icon_menu.png`)"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 选择时代出来的元素 -->
|
|
|
+ <div :class="`RWage ${ageFlga ? 'RWageShow' : ''}`">
|
|
|
+ <div
|
|
|
+ v-for="item in ageList"
|
|
|
+ :key="item"
|
|
|
+ :class="`RWageRow ${ageAc === item ? 'RWageRowAc' : ''}`"
|
|
|
+ @click="cutAgeFu(item)"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="RWageImg"
|
|
|
+ @click="ageFlga = false"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ :src="require(`@/assets/images/icon_close.png`)"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted } from "vue"
|
|
|
+import { useRouter } from "vue-router"
|
|
|
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
|
|
|
+import { arrList } from "./PoemList.js"
|
|
|
+import useMoveFu from "../moveFu"
|
|
|
+
|
|
|
+/**
|
|
|
+ * 排版
|
|
|
+ */
|
|
|
+function getTypesettingIdx(poemType) {
|
|
|
+ switch (poemType) {
|
|
|
+ case "七绝":
|
|
|
+ return 1
|
|
|
+ case "七律":
|
|
|
+ return 2
|
|
|
+ case "五绝":
|
|
|
+ return 3
|
|
|
+ case "五律":
|
|
|
+ return 4
|
|
|
+ default:
|
|
|
+ return 2
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const { touchstart, touchmove, touchend } = useMoveFu()
|
|
|
+
|
|
|
+// 提示语的显示隐藏
|
|
|
+const titShow = ref(true)
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+// 返场视频ref
|
|
|
+const backVideoRef = ref("")
|
|
|
+const backVideoFlag = ref(false)
|
|
|
+
|
|
|
+// 点击返回
|
|
|
+const btnBackFu = () => {
|
|
|
+ backVideoRef.value.play()
|
|
|
+ setTimeout(() => {
|
|
|
+ backVideoFlag.value = true
|
|
|
+ }, 100)
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ router.replace({
|
|
|
+ name: "MoreContent",
|
|
|
+ query: {
|
|
|
+ anchorIdx: 1,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }, 2200)
|
|
|
+}
|
|
|
+
|
|
|
+const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
|
|
|
+
|
|
|
+const listRes = ref(arrList)
|
|
|
+
|
|
|
+// 元素总宽度
|
|
|
+const domWidth = ref(0)
|
|
|
+const pageWidth = ref(0)
|
|
|
+
|
|
|
+// 当前选中索引
|
|
|
+const indexAc = ref(0)
|
|
|
+
|
|
|
+const baseRWboxLeft = ref(true)
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ baseRWboxLeft.value = false
|
|
|
+ }, 500)
|
|
|
+})
|
|
|
+
|
|
|
+// 底部文字提示显示和隐藏
|
|
|
+const txtTit = ref(false)
|
|
|
+
|
|
|
+const poemList = configExcel["诗词"]
|
|
|
+
|
|
|
+const isOpcMove = ref(true)
|
|
|
+
|
|
|
+// 时代数组
|
|
|
+const ageList = ref([])
|
|
|
+// 时代选中
|
|
|
+const ageAc = ref(poemList[0]["朝代"])
|
|
|
+
|
|
|
+// 时代显示隐藏切换
|
|
|
+const ageFlga = ref(false)
|
|
|
+
|
|
|
+// 切换时代
|
|
|
+const cutAgeFu = (val) => {
|
|
|
+ const index = listRes.value.findIndex((v) => v["朝代"] === val)
|
|
|
+
|
|
|
+ if (indexAc.value === index) return
|
|
|
+
|
|
|
+ titShow.value = false
|
|
|
+
|
|
|
+ isOpcMove.value = false
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ isOpcMove.value = true
|
|
|
+ }, 500)
|
|
|
+ indexAc.value = index
|
|
|
+ ageAc.value = val
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ const tempArr = []
|
|
|
+ const imgDataLenght = arrList.length
|
|
|
+ // 整个数组能分为多少段，向上取整
|
|
|
+ const isArrNum = Math.ceil(poemList.length / imgDataLenght)
|
|
|
+ for (let i = 0; i < isArrNum; i++) {
|
|
|
+ tempArr.push(poemList.slice(i * imgDataLenght, (i + 1) * imgDataLenght))
|
|
|
+ }
|
|
|
+
|
|
|
+ const ageListTemp = []
|
|
|
+
|
|
|
+ const arrRes = []
|
|
|
+
|
|
|
+ tempArr.forEach((v1) => {
|
|
|
+ v1.forEach((v2, i2) => {
|
|
|
+ v2.imgArr = arrList[i2]
|
|
|
+ v2.waiClass = i2
|
|
|
+ arrRes.push(v2)
|
|
|
+ if (!ageListTemp.includes(v2["朝代"])) ageListTemp.push(v2["朝代"])
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // console.log("-----", arrRes)
|
|
|
+ ageList.value = ageListTemp
|
|
|
+ listRes.value = arrRes
|
|
|
+
|
|
|
+ const fullWidth = window.innerWidth >= 500 ? 500 : window.innerWidth
|
|
|
+
|
|
|
+ pageWidth.value = fullWidth
|
|
|
+ // 总盒子的宽度
|
|
|
+ domWidth.value = fullWidth * poemList.length
|
|
|
+})
|
|
|
+
|
|
|
+// 向右是-1
|
|
|
+// 向左是 1
|
|
|
+const indexFlag = ref(0)
|
|
|
+const isShowOperationTip = ref(true)
|
|
|
+
|
|
|
+// 左右滑动
|
|
|
+const onSwipeChange = (val) => {
|
|
|
+ isShowOperationTip.value = false
|
|
|
+ let numResTemp = indexAc.value + val
|
|
|
+
|
|
|
+ let indexFlagTemp = -val
|
|
|
+
|
|
|
+ if (val === -1 && indexAc.value === 0) {
|
|
|
+ // 第一个页面左滑
|
|
|
+
|
|
|
+ txtTit.value = true
|
|
|
+ setTimeout(() => {
|
|
|
+ txtTit.value = false
|
|
|
+ }, 1000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (val === 1 && indexAc.value === listRes.value.length - 1) {
|
|
|
+ // numResTemp = 0
|
|
|
+
|
|
|
+ txtTit.value = true
|
|
|
+ setTimeout(() => {
|
|
|
+ txtTit.value = false
|
|
|
+ }, 1000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ titShow.value = false
|
|
|
+
|
|
|
+ indexAc.value = numResTemp
|
|
|
+
|
|
|
+ indexFlag.value = indexFlagTemp
|
|
|
+
|
|
|
+ // 底部朝代也要变化
|
|
|
+ ageAc.value = listRes.value[numResTemp]["朝代"]
|
|
|
+}
|
|
|
+
|
|
|
+// 是否触发移动的逻辑
|
|
|
+const isMoveFu = (index, num) => {
|
|
|
+ let numRes
|
|
|
+ if (index === indexAc.value) numRes = 0
|
|
|
+ else numRes = indexFlag.value * num * 2
|
|
|
+
|
|
|
+ return numRes
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+body {
|
|
|
+ -webkit-transform: translate3d(0, 0, 0);
|
|
|
+ transform: translate3d(0, 0, 0);
|
|
|
+}
|
|
|
+
|
|
|
+.poem-list-page {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f3f4ef;
|
|
|
+
|
|
|
+ .RWsBtn {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 22;
|
|
|
+ right: 20px;
|
|
|
+ bottom: 20px;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ opacity: 1;
|
|
|
+ transition: all 0.5s;
|
|
|
+ & > img {
|
|
|
+ width: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .RWsBtnHide {
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .RWage {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 22;
|
|
|
+ right: -220px;
|
|
|
+ bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ width: calc(100% - 70px);
|
|
|
+ height: 30px;
|
|
|
+ transition: all 0.5s;
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ .RWageRow {
|
|
|
+ transition: all 0.5s;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ font-family: KingHwa_OldSong;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-right: 15px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ color: #fff;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ }
|
|
|
+ .RWageRowAc {
|
|
|
+ color: #d6cda1;
|
|
|
+ border: 1px solid #d6cda1;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .RWageImg {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ & > img {
|
|
|
+ width: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .RWageShow {
|
|
|
+ right: 20px;
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .RWbox {
|
|
|
+ width: 8000px;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ background-image: url("../assets/images/RW/bg_caizhi.jpg");
|
|
|
+ background-size: contain;
|
|
|
+ transition: left 0.8s;
|
|
|
+
|
|
|
+ -webkit-backface-visibility: hidden;
|
|
|
+ backface-visibility: hidden;
|
|
|
+ .ROW {
|
|
|
+ position: relative;
|
|
|
+ transition: opacity 1.2s;
|
|
|
+ & > img {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ height: 100%;
|
|
|
+ transition: transform 1s;
|
|
|
+ -webkit-transform: translateZ(0);
|
|
|
+ -moz-transform: translateZ(0);
|
|
|
+ -ms-transform: translateZ(0);
|
|
|
+ -o-transform: translateZ(0);
|
|
|
+
|
|
|
+ transform: translateZ(0);
|
|
|
+ -webkit-backface-visibility: hidden;
|
|
|
+ backface-visibility: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ROW {
|
|
|
+ .ROW1_1 {
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .ROW1_2 {
|
|
|
+ z-index: 2;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ .ROW1_3 {
|
|
|
+ right: 5%;
|
|
|
+ }
|
|
|
+ .ROW2_1 {
|
|
|
+ z-index: 2;
|
|
|
+ left: -38%;
|
|
|
+ }
|
|
|
+ .ROW2_2 {
|
|
|
+ right: 5%;
|
|
|
+ }
|
|
|
+ .ROW2_3 {
|
|
|
+ z-index: 3;
|
|
|
+ right: -20%;
|
|
|
+ }
|
|
|
+ .ROW3_1 {
|
|
|
+ left: -36%;
|
|
|
+ }
|
|
|
+ .ROW3_2 {
|
|
|
+ height: 15%;
|
|
|
+ left: 10%;
|
|
|
+ }
|
|
|
+ .ROW3_3 {
|
|
|
+ z-index: 2;
|
|
|
+ height: 15%;
|
|
|
+ right: 10%;
|
|
|
+ }
|
|
|
+ .ROW3_4 {
|
|
|
+ right: 0%;
|
|
|
+ }
|
|
|
+ .ROW3_5 {
|
|
|
+ right: -5%;
|
|
|
+ }
|
|
|
+ .ROW4_1 {
|
|
|
+ left: -35%;
|
|
|
+ }
|
|
|
+ .ROW4_2 {
|
|
|
+ left: -40%;
|
|
|
+ height: 15%;
|
|
|
+ }
|
|
|
+ .ROW4_3 {
|
|
|
+ left: 10%;
|
|
|
+ height: 20%;
|
|
|
+ }
|
|
|
+ .ROW4_4 {
|
|
|
+ right: 6%;
|
|
|
+ height: 15%;
|
|
|
+ }
|
|
|
+ .ROW4_5 {
|
|
|
+ right: -17%;
|
|
|
+ }
|
|
|
+ .ROW5_1 {
|
|
|
+ left: -45%;
|
|
|
+ }
|
|
|
+ .ROW5_2 {
|
|
|
+ z-index: 2;
|
|
|
+ left: -17%;
|
|
|
+ }
|
|
|
+ .ROW5_3 {
|
|
|
+ z-index: 3;
|
|
|
+ left: 5%;
|
|
|
+ height: 15%;
|
|
|
+ }
|
|
|
+ .ROW5_4 {
|
|
|
+ z-index: 3;
|
|
|
+ left: 30%;
|
|
|
+ height: 15%;
|
|
|
+ }
|
|
|
+ .ROW5_5 {
|
|
|
+ right: -6%;
|
|
|
+ }
|
|
|
+ .ROW6_1 {
|
|
|
+ z-index: 3;
|
|
|
+ left: 2%;
|
|
|
+ height: 15%;
|
|
|
+ }
|
|
|
+ .ROW6_2 {
|
|
|
+ left: -10%;
|
|
|
+ }
|
|
|
+ .ROW6_3 {
|
|
|
+ z-index: 2;
|
|
|
+ left: -13%;
|
|
|
+ }
|
|
|
+ .ROW6_4 {
|
|
|
+ right: -10%;
|
|
|
+ }
|
|
|
+ .ROW6_5 {
|
|
|
+ right: -10%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ROWtxt {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ writing-mode: vertical-rl;
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ .inner-wrap {
|
|
|
+ > .title-wrap {
|
|
|
+ position: relative;
|
|
|
+ width: fit-content;
|
|
|
+ height: fit-content;
|
|
|
+ > h1 {
|
|
|
+ font-family: KingHwa_OldSong;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: calc(
|
|
|
+ 36 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ color: black;
|
|
|
+ line-height: calc(
|
|
|
+ 36 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ white-space: pre;
|
|
|
+ letter-spacing: 0.1em;
|
|
|
+ }
|
|
|
+ > .sub-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-140%, -50%);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ > .author {
|
|
|
+ white-space: pre;
|
|
|
+ font-family: KaiTi;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #b9aa70;
|
|
|
+ letter-spacing: 0em;
|
|
|
+ margin-inline-end: calc(
|
|
|
+ 6 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ }
|
|
|
+ > .age {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(
|
|
|
+ 21 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ height: calc(
|
|
|
+ 21 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ background-color: #b6a261;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-family: KaiTi;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: calc(
|
|
|
+ 16 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > p {
|
|
|
+ margin-right: calc(
|
|
|
+ 40 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ font-family: KaiTi;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: calc(
|
|
|
+ 20 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ color: black;
|
|
|
+ line-height: 1.6em;
|
|
|
+ white-space: pre;
|
|
|
+ letter-spacing: 0.2em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ROWtxt.typesetting-1 {
|
|
|
+ > .inner-wrap {
|
|
|
+ transform: translate(10%, -20%);
|
|
|
+ > p {
|
|
|
+ margin-top: calc(
|
|
|
+ 232 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ROWtxt.typesetting-2 {
|
|
|
+ > .inner-wrap {
|
|
|
+ transform: translate(10%, -4%);
|
|
|
+ > p {
|
|
|
+ margin-top: calc(
|
|
|
+ 102 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ROWtxt.typesetting-3 {
|
|
|
+ > .inner-wrap {
|
|
|
+ transform: translate(0, -9%);
|
|
|
+ > p {
|
|
|
+ margin-top: calc(
|
|
|
+ 135 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ROWtxt.typesetting-4 {
|
|
|
+ > .inner-wrap {
|
|
|
+ transform: translate(10%, -10%);
|
|
|
+ > p {
|
|
|
+ margin-top: calc(
|
|
|
+ 200 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ROW1 {
|
|
|
+ .ROWtxt {
|
|
|
+ padding-top: 15%;
|
|
|
+ padding-right: 40%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ROW2 {
|
|
|
+ .ROWtxt {
|
|
|
+ padding-right: 24%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ROW3 {
|
|
|
+ .ROWtxt {
|
|
|
+ padding-right: 30%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ROWW19 {
|
|
|
+ .ROWtxt {
|
|
|
+ padding-top: 87%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 底部文字提示
|
|
|
+ .RWind {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 15%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 100;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #b9aa70;
|
|
|
+ letter-spacing: 4px;
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.5s;
|
|
|
+ pointer-events: none;
|
|
|
+ font-family: KingHwa_OldSong;
|
|
|
+ }
|
|
|
+ .RWindShow {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 操作提示
|
|
|
+ .operation-tip {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 30;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 7%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ color: #7f9470;
|
|
|
+ font-size: 12px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ pointer-events: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ opacity: 1;
|
|
|
+ transition: opacity 1s;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .operation-tipHide {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ // 返场视频
|
|
|
+ .backVideo {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 30;
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: opacity 2s;
|
|
|
+ & > video {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .backVideoShow {
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+ // 返回按钮
|
|
|
+ .RWback {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 22;
|
|
|
+ left: 20px;
|
|
|
+ bottom: 20px;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .btn-back {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
