upp

src/views/HotspotDetail1.vue

@@ -234,7 +234,7 @@ const onSwipeChange = (num, index) => {
     }
   }
   .HD1_3_1 {
-    top: 10%;
+    top: 12%;
     right: -60%;
     z-index: 1;
   }
@@ -244,7 +244,7 @@ const onSwipeChange = (num, index) => {
     z-index: 2;
   }
   .HD1_3_3 {
-    top: 38%;
+    top: 36%;
     right: -40%;
     z-index: 3;
   }

src/views/PoemList.js

@@ -0,0 +1,41 @@
+export const arrList = [
+  [
+    { classTxt: 'ROW1_1', imgName: "3_01", moveNum: 80 },
+    { classTxt: 'ROW1_2', imgName: "1_01", moveNum: 100 },
+    { classTxt: 'ROW1_3', imgName: "3_02", moveNum: 60 },
+  ],
+  [
+    { classTxt: 'ROW2_1', imgName: "2_01", moveNum: 80 },
+    { classTxt: 'ROW2_2', imgName: "3_03", moveNum: 60 },
+    { classTxt: 'ROW2_3', imgName: "1_02", moveNum: 100 },
+  ],
+  [
+    { classTxt: 'ROW3_1', imgName: "3_08", moveNum: 60 },
+    { classTxt: 'ROW3_2', imgName: "4_02", moveNum: 100 },
+    { classTxt: 'ROW3_3', imgName: "4_08", moveNum: 100 },
+    { classTxt: 'ROW3_4', imgName: "3_05", moveNum: 60 },
+    { classTxt: 'ROW3_5', imgName: "1_03", moveNum: 80 },
+  ],
+  [
+    { classTxt: 'ROW4_1', imgName: "3_04", moveNum: 60 },
+    { classTxt: 'ROW4_2', imgName: "4_04", moveNum: 100 },
+    { classTxt: 'ROW4_3', imgName: "4_05", moveNum: 100 },
+    { classTxt: 'ROW4_4', imgName: "4_02", moveNum: 100 },
+    { classTxt: 'ROW4_5', imgName: "2_01", moveNum: 80 },
+  ],
+  [
+    { classTxt: 'ROW5_1', imgName: "3_06", moveNum: 60 },
+    { classTxt: 'ROW5_2', imgName: "2_03", moveNum: 80 },
+    { classTxt: 'ROW5_3', imgName: "4_06", moveNum: 100 },
+    { classTxt: 'ROW5_4', imgName: "4_07", moveNum: 100 },
+    { classTxt: 'ROW5_5', imgName: "2_04", moveNum: 80 },
+  ],
+  [
+    { classTxt: 'ROW6_1', imgName: "4_09", moveNum: 100 },
+    { classTxt: 'ROW6_2', imgName: "3_07", moveNum: 60 },
+    { classTxt: 'ROW6_3', imgName: "2_03", moveNum: 80 },
+    { classTxt: 'ROW6_4', imgName: "2_01", moveNum: 80 },
+    { classTxt: 'ROW6_5', imgName: "3_03", moveNum: 60 },
+  ],
+]
+

src/views/PoemList.vue

@@ -4,64 +4,48 @@
       class="RWbox"
       :style="`width: ${domWidth}px; left:-${indexAc * pageWidth}px`"
     >
-      <!-- 第一种状态 -->
-
-      <!-- <div
-        class="ROW1"
-        :style="`width:${pageWidth}px`"
-      >
-        <img
-          :style="`transform: translateX(${indexAc===0?0:(-80*3)}px);`"
-          class="ROW1_1"
-          :src="require(`@/assets/images/RW/3_01.png`)"
-          alt=""
-        >
-        <img
-          :style="`transform: translateX(${indexAc===0?0:(-100*3)}px);`"
-          class="ROW1_2"
-          :src="require(`@/assets/images/RW/1_01.png`)"
-          alt=""
-        >
-        <img
-          :style="`transform: translateX(${indexAc===0?0:(-60*3)}px);`"
-          class="ROW1_3"
-          :src="require(`@/assets/images/RW/3_02.png`)"
-          alt=""
-        >
-      </div> -->
-
-      <!-- 第二种状态 -->
       <div
-        class="ROW2"
-        :style="`width:${pageWidth}px`"
+        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
-          :style="`transform: translateX(${indexAc===0?0:(-80*3)}px);`"
-          class="ROW1_1"
-          :src="require(`@/assets/images/RW/3_01.png`)"
+          v-for="(item2, index2) in item1.imgArr"
+          :key="index2"
+          :style="`transform: translateX(${isMoveFu(
+            index1,
+            item2.moveNum
+          )}px);`"
+          :class="item2.classTxt"
+          :src="require(`@/assets/images/RW/${item2.imgName}.png`)"
           alt=""
         >
-        <img
-          :style="`transform: translateX(${indexAc===0?0:(-100*3)}px);`"
-          class="ROW1_2"
-          :src="require(`@/assets/images/RW/1_01.png`)"
-          alt=""
-        >
-        <img
-          :style="`transform: translateX(${indexAc===0?0:(-60*3)}px);`"
-          class="ROW1_3"
-          :src="require(`@/assets/images/RW/3_02.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
-        v-for="(item, index) in poemList"
-        :key="index"
-        :style="`width:${pageWidth}px`"
-        class="ROW ROW1"
-      >
-      </div> -->
+    <!-- 最底部的索引 -->
+    <div :class="`RWind ${indexAcShow ? 'RWindShow' : ''}`">
+      {{ indexAc + 1 }} / {{ listRes.length }}
     </div>
 
     <!-- 操作提示 -->
@@ -69,7 +53,6 @@
       class="operation-tip"
       :direction="'h'"
       :text="'下一章'"
-      :is-show="isShowOperationTip"
       color="green"
     />
 
@@ -83,38 +66,81 @@
     </div>
 
     <!-- 返回按钮 -->
-    <BtnBack
-      v-show="!isShowMenu"
-      color="green"
-      class="button-back"
-      @click="btnBackFu"
+    <div class="RWback">
+      <BtnBack
+        class="button-back"
+        @click="btnBackFu"
+      />
+    </div>
+
+    <!-- 左右滑动外层盒子 -->
+    <div
+      v-touch:swipe.left="() => onSwipeChange(1)"
+      v-touch:swipe.right="() => onSwipeChange(-1)"
+      class="SWmove"
     />
 
-    <!-- 临时操作按钮 -->
-    <div class="aaaa">
-      <div @click="aaaaFu(1)">
-        ++++
+    <!-- 选择 时代 -->
+    <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>
-      <br>
-      <div @click="aaaaFu(-1)">
-        ----
+      <div
+        class="RWageImg"
+        @click="ageFlga = false"
+      >
+        <img
+          class=""
+          :src="require(`@/assets/images/icon_close.png`)"
+          alt=""
+        >
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, inject } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
+import { ref, onMounted } from "vue"
+import { useRouter } from "vue-router"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import { arrList } from "./PoemList.js"
 
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
-const $env = inject("$env")
+/**
+ * 排版
+ */
+function getTypesettingIdx(poemType) {
+  switch (poemType) {
+  case "七绝":
+    return 1
+  case "七律":
+    return 2
+  case "五绝":
+    return 3
+  case "五律":
+    return 4
+  default:
+    return 2
+  }
+}
 
+const router = useRouter()
 // 返场视频ref
 const backVideoRef = ref("")
 const backVideoFlag = ref(false)
@@ -138,7 +164,7 @@ const btnBackFu = () => {
 
 const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
-const poemList = configExcel["诗词"]
+const listRes = ref(arrList)
 
 // 元素总宽度
 const domWidth = ref(0)
@@ -147,83 +173,133 @@ const pageWidth = ref(0)
 // 当前选中索引
 const indexAc = ref(0)
 
+// 当前选中索引显示和隐藏
+const indexAcShow = ref(true)
+
+const poemList = configExcel["诗词"]
+
+const isOpcMove = ref(true)
+
+// 时代数组
+const ageList = ref([])
+// 时代选中
+const ageAc = ref(poemList[0]["朝代"])
+
+// 时代显示隐藏切换
+const ageFlga = ref(false)
+
+let indexTime = -1
+
+// 切换时代
+const cutAgeFu = (val) => {
+  const index = listRes.value.findIndex((v) => v["朝代"] === val)
+
+  if (isOpcMove.value === index) return
+
+  indexAcShow.value = true
+  clearTimeout(indexTime)
+  indexTime = setTimeout(() => {
+    indexAcShow.value = false
+  }, 1000)
+
+  isOpcMove.value = false
+
+  setTimeout(() => {
+    isOpcMove.value = true
+  }, 500)
+  indexAc.value = index
+  ageAc.value = val
+}
+
 onMounted(() => {
-  pageWidth.value = window.innerWidth
+  setTimeout(() => {
+    indexAcShow.value = false
+  }, 2000)
+
+  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 = window.innerWidth * poemList.length
+  domWidth.value = fullWidth * poemList.length
 })
 
-/**
- * 当前古诗
- */
-const currentIdx = ref(0)
-const currentPoem = computed(() => {
-  return poemList[currentIdx.value]
-})
+// 向右是-1
+// 向左是 1
+const indexFlag = ref(0)
 
-/**
- * 排版
- */
-function getTypesettingIdx(poemType) {
-  switch (poemType) {
-  case "七绝":
-    return 1
-  case "七律":
-    return 2
-  case "五绝":
-    return 3
-  case "五律":
-    return 4
-  default:
-    return 2
+// 左右滑动
+const onSwipeChange = (val) => {
+  let numResTemp = indexAc.value + val
+
+  let indexFlagTemp = -val
+
+  if (val === -1 && indexAc.value === 0) {
+    // 第一个页面左滑
+    numResTemp = listRes.value.length - 1
+    indexFlagTemp = -indexFlagTemp
+    isOpcMove.value = false
+
+    setTimeout(() => {
+      isOpcMove.value = true
+    }, 500)
+    // return
   }
-}
+  if (val === 1 && indexAc.value === listRes.value.length - 1) {
+    numResTemp = 0
+    indexFlagTemp = -indexFlagTemp
+    isOpcMove.value = false
 
-/**
- * swiper
- */
-let swiper = null
-const onSwiper = (swiperP) => {
-  swiper = swiperP
-}
-const onSlideChange = (e) => {
-  currentIdx.value = e.activeIndex
-}
+    setTimeout(() => {
+      isOpcMove.value = true
+    }, 500)
+    // return
+  }
 
-/**
- * 操作提示
- */
-const isShowOperationTip = ref(true)
-const unwatch = watch(currentIdx, (v) => {
-  isShowOperationTip.value = false
-  isShowOperationTipShadow.value = false
-  unwatch()
-})
-const isShowOperationTipShadow = ref(true)
-setTimeout(() => {
-  isShowOperationTipShadow.value = false
-}, 2000)
+  indexAcShow.value = true
+  clearTimeout(indexTime)
+  indexTime = setTimeout(() => {
+    indexAcShow.value = false
+  }, 1000)
 
-/**
- * 目录
- */
-const isShowMenu = ref(false)
-const temp = configExcel["诗词"].map((item) => {
-  return item["朝代"]
-})
-const menuList = Array.from(new Set(temp))
-function onClickMenuItem(menuItemName) {
-  const targetIdx = poemList.findIndex((item) => {
-    return item["朝代"] === menuItemName
-  })
-  swiper.slideTo(targetIdx)
-  isShowMenu.value = false
+  indexAc.value = numResTemp
+
+  indexFlag.value = indexFlagTemp
+
+  // 底部朝代也要变化
+  ageAc.value = listRes.value[numResTemp]["朝代"]
 }
 
-const aaaaFu = (val) => {
-  indexAc.value += val
-  // const dom = document.querySelector(".poem-list-page")
-  // dom.scrollLeft = dom.scrollLeft + window.innerWidth
+// 是否触发移动的逻辑
+const isMoveFu = (index, num) => {
+  let numRes
+  if (index === indexAc.value) numRes = 0
+  else numRes = indexFlag.value * num * 2
+
+  return numRes
 }
 </script>
 
@@ -233,11 +309,88 @@ const aaaaFu = (val) => {
   width: 100%;
   height: 100%;
   background-color: #f3f4ef;
-  .aaaa {
-    position: fixed;
-    z-index: 50;
-    bottom: 100px;
-    left: 100px;
+
+  // 滑动模块
+  .SWmove {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 21;
+  }
+  .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, 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 {
@@ -250,15 +403,18 @@ const aaaaFu = (val) => {
     background-size: cover;
     transition: all 1.2s;
 
-
-    .ROW1 {
+    .ROW {
       position: relative;
-      &>img{
+      transition: opacity 1.2s;
+      & > img {
         position: absolute;
         bottom: 0;
         height: 100%;
-        transition: all .8s;
+        transition: all 1s;
       }
+    }
+
+    .ROW {
       .ROW1_1 {
         left: 0;
       }
@@ -269,7 +425,267 @@ const aaaaFu = (val) => {
       .ROW1_3 {
         right: 5%;
       }
+      .ROW2_1 {
+        z-index: 2;
+        left: -33%;
+      }
+      .ROW2_2 {
+        right: 5%;
+      }
+      .ROW2_3 {
+        z-index: 3;
+        right: -20%;
+      }
+      .ROW3_1 {
+        left: -32%;
+      }
+      .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, 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, KaiTi;
+              font-weight: 400;
+              font-size: 20px;
+              color: #b9aa70;
+              letter-spacing: 0.3em;
+              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, 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, KaiTi;
+          font-weight: 400;
+          font-size: calc(
+            20 / v-bind("windowSizeWhenDesignForRef") *
+              v-bind("windowSizeInCssForRef")
+          );
+          color: black;
+          line-height: 1.8em;
+          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: 5px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 30;
+    font-size: 12px;
+    color: black;
+    opacity: 0;
+    transition: opacity 0.5s;
+    pointer-events: none;
+  }
+  .RWindShow {
+    opacity: 1;
   }
 
   // 操作提示
@@ -303,8 +719,26 @@ const aaaaFu = (val) => {
     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 {
-    z-index: 10;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 100%;
+    max-height: 100%;
   }
 }
 </style>