|
|
@@ -2,11 +2,182 @@
|
|
|
<div
|
|
|
class="home"
|
|
|
>
|
|
|
+ <div class="bg-mask" />
|
|
|
+ <Transition name="fade-out">
|
|
|
+ <Startup
|
|
|
+ v-if="!store.state.haveShownStartup"
|
|
|
+ class="startup"
|
|
|
+ />
|
|
|
+ </Transition>
|
|
|
+ <div
|
|
|
+ class="title-wrap"
|
|
|
+ :style="{
|
|
|
+ opacity: titleOpacity,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="title"
|
|
|
+ src="@/assets/images/home-title.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <div class="sub-text">
|
|
|
+ 南京博物院<br>
|
|
|
+ 绢本 墨笔<br>
|
|
|
+ 元 李衎<br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="painting-wrap">
|
|
|
+ <div
|
|
|
+ class="size-sign-h"
|
|
|
+ :style="{
|
|
|
+ opacity: sizeOpacity,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ src="@/assets/images/size-sign-h.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <span>100cm</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="size-sign-v"
|
|
|
+ :style="{
|
|
|
+ opacity: sizeOpacity,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ src="@/assets/images/size-sign-v.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <span>152cm</span>
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ class="painting-border"
|
|
|
+ src="@/assets/images/painting-border.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="painting"
|
|
|
+ :style="{
|
|
|
+ opacity: 1 - Math.max(stemOpacity * 0.5, leafOpacity * 0.5, stoneOpacity * 0.5),
|
|
|
+ }"
|
|
|
+ src="@/assets/images/home-painting.jpg"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="painting-stem"
|
|
|
+ :style="{
|
|
|
+ opacity: stemOpacity,
|
|
|
+ }"
|
|
|
+ src="@/assets/images/home-painting-stem.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="painting-leaf"
|
|
|
+ :style="{
|
|
|
+ opacity: leafOpacity,
|
|
|
+ }"
|
|
|
+ src="@/assets/images/home-painting-leaf.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="painting-stone"
|
|
|
+ :style="{
|
|
|
+ opacity: stoneOpacity,
|
|
|
+ }"
|
|
|
+ src="@/assets/images/home-painting-stone.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="hotspot-wrap">
|
|
|
+ <HotspotComp
|
|
|
+ v-show="isShowHotspot"
|
|
|
+ class="hotspot-1"
|
|
|
+ @click="isShowHotspotDetail1 = true"
|
|
|
+ />
|
|
|
+ <HotspotComp
|
|
|
+ v-show="isShowHotspot"
|
|
|
+ class="hotspot-2"
|
|
|
+ />
|
|
|
+ <HotspotComp
|
|
|
+ v-show="isShowHotspot"
|
|
|
+ class="hotspot-3"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="fixed-desc detail-desc-stem"
|
|
|
+ :style="{
|
|
|
+ opacity: stemOpacity,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ detailDescStem }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="fixed-desc detail-desc-leaf"
|
|
|
+ :style="{
|
|
|
+ opacity: leafOpacity,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ detailDescLeaf }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="fixed-desc detail-desc-stone"
|
|
|
+ :style="{
|
|
|
+ opacity: stoneOpacity,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ detailDescStone }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="fixed-desc summary-desc"
|
|
|
+ :style="{
|
|
|
+ opacity: summaryOpacity,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ summaryDesc }}
|
|
|
+ </div>
|
|
|
<OperationTip
|
|
|
- :text="`testtest`"
|
|
|
+ v-if="store.state.isStartupInvisible"
|
|
|
+ class="operation-tip"
|
|
|
+ text="了解作品"
|
|
|
:is-show="isShowOperationTip"
|
|
|
/>
|
|
|
- <BtnBack />
|
|
|
+ <div
|
|
|
+ ref="descEl"
|
|
|
+ class="desc"
|
|
|
+ >
|
|
|
+ <h3>作品简介：</h3>
|
|
|
+ <p
|
|
|
+ v-for="(item, index) in homepagePaintingDesc"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </p>
|
|
|
+ <h3>作者简介：</h3>
|
|
|
+ <p
|
|
|
+ v-for="(item, index) in homepageAuthorDesc"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </p>
|
|
|
+ <div class="bottom-mask" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <HotspotDetail1
|
|
|
+ v-if="isShowHotspotDetail1"
|
|
|
+ class="hotspot-detail"
|
|
|
+ @close="isShowHotspotDetail1 = false"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -14,6 +185,9 @@
|
|
|
import { ref, computed, watch, onMounted, inject } from "vue"
|
|
|
import { useRoute, useRouter } from "vue-router"
|
|
|
import { useStore } from "vuex"
|
|
|
+import Startup from '@/views/StartupView.vue'
|
|
|
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
|
|
|
+import HotspotDetail1 from '@/views/HotspotDetail1.vue'
|
|
|
|
|
|
const route = useRoute()
|
|
|
const router = useRouter()
|
|
|
@@ -21,16 +195,346 @@ const store = useStore()
|
|
|
|
|
|
const $env = inject('$env')
|
|
|
|
|
|
+const {
|
|
|
+ windowSizeInCssForRef,
|
|
|
+ windowSizeWhenDesignForRef,
|
|
|
+} = useSizeAdapt()
|
|
|
+
|
|
|
+const homepagePaintingDesc = configText.homepagePaintingDesc
|
|
|
+const homepageAuthorDesc = configText.homepageAuthorDesc
|
|
|
+const detailDescStem = configText.homepagePaintingDetailDescStem
|
|
|
+const detailDescLeaf = configText.homepagePaintingDetailDescLeaf
|
|
|
+const detailDescStone = configText.homepagePaintingDetailDescStone
|
|
|
+const summaryDesc = configText.homepagePaintingSummary
|
|
|
+
|
|
|
+const descEl = ref(null)
|
|
|
+const descElScrollTop = ref(0)
|
|
|
+onMounted(() => {
|
|
|
+ descEl.value.addEventListener('scroll', (e) => {
|
|
|
+ descElScrollTop.value = descEl.value.scrollTop
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
const isShowOperationTip = ref(true)
|
|
|
-setTimeout(() => {
|
|
|
- isShowOperationTip.value = false
|
|
|
-}, 1000)
|
|
|
+watch(descElScrollTop, (v) => {
|
|
|
+ if (v > 0) {
|
|
|
+ isShowOperationTip.value = false
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const isStartupInvisible = computed(() => {
|
|
|
+ return store.state.isStartupInvisible
|
|
|
+})
|
|
|
+
|
|
|
+const titleOpacity = computed(() => {
|
|
|
+ let ret = null
|
|
|
+ if (descElScrollTop.value <= window.innerHeight * 0.3) {
|
|
|
+ ret = 1 - (window.innerHeight * 0.3 - descElScrollTop.value) / (window.innerHeight * 0.3)
|
|
|
+ } else if (descElScrollTop.value > window.innerHeight * 0.3 && descElScrollTop.value < window.innerHeight * 0.5) {
|
|
|
+ ret = 1
|
|
|
+ } else {
|
|
|
+ ret = 1 - (descElScrollTop.value - window.innerHeight * 0.5) / (window.innerHeight * (0.75 - 0.5))
|
|
|
+ }
|
|
|
+ return ret
|
|
|
+})
|
|
|
+
|
|
|
+const stemOpacity = computed(() => {
|
|
|
+ let ret = null
|
|
|
+ if (descElScrollTop.value <= window.innerHeight * 2) {
|
|
|
+ ret = 0
|
|
|
+ } else if (descElScrollTop.value > window.innerHeight * 2 && descElScrollTop.value < window.innerHeight * 2.5) {
|
|
|
+ ret = (descElScrollTop.value - window.innerHeight * 2) / (window.innerHeight * (2.5 - 2))
|
|
|
+ } else if (descElScrollTop.value >= window.innerHeight * 2.5 && descElScrollTop.value <= window.innerHeight * 3) {
|
|
|
+ ret = 1
|
|
|
+ } else if (descElScrollTop.value > window.innerHeight * 3 && descElScrollTop.value < window.innerHeight * 3.5) {
|
|
|
+ ret = 1 - (descElScrollTop.value - window.innerHeight * 3) / (window.innerHeight * (3.5 - 3))
|
|
|
+ } else {
|
|
|
+ ret = 0
|
|
|
+ }
|
|
|
+ return ret
|
|
|
+})
|
|
|
+
|
|
|
+const leafOpacity = computed(() => {
|
|
|
+ let ret = null
|
|
|
+ if (descElScrollTop.value <= window.innerHeight * 4) {
|
|
|
+ ret = 0
|
|
|
+ } else if (descElScrollTop.value > window.innerHeight * 4 && descElScrollTop.value < window.innerHeight * 4.5) {
|
|
|
+ ret = (descElScrollTop.value - window.innerHeight * 4) / (window.innerHeight * (4.5 - 4))
|
|
|
+ } else if (descElScrollTop.value >= window.innerHeight * 4.5 && descElScrollTop.value <= window.innerHeight * 5) {
|
|
|
+ ret = 1
|
|
|
+ } else if (descElScrollTop.value > window.innerHeight * 5 && descElScrollTop.value < window.innerHeight * 5.5) {
|
|
|
+ ret = 1 - (descElScrollTop.value - window.innerHeight * 5) / (window.innerHeight * (5.5 - 5))
|
|
|
+ } else {
|
|
|
+ ret = 0
|
|
|
+ }
|
|
|
+ return ret
|
|
|
+})
|
|
|
+
|
|
|
+const stoneOpacity = computed(() => {
|
|
|
+ let ret = null
|
|
|
+ if (descElScrollTop.value <= window.innerHeight * 6) {
|
|
|
+ ret = 0
|
|
|
+ } else if (descElScrollTop.value > window.innerHeight * 6 && descElScrollTop.value < window.innerHeight * 6.5) {
|
|
|
+ ret = (descElScrollTop.value - window.innerHeight * 6) / (window.innerHeight * (6.5 - 6))
|
|
|
+ } else if (descElScrollTop.value >= window.innerHeight * 6.5 && descElScrollTop.value <= window.innerHeight * 7) {
|
|
|
+ ret = 1
|
|
|
+ } else if (descElScrollTop.value > window.innerHeight * 7 && descElScrollTop.value < window.innerHeight * 7.5) {
|
|
|
+ ret = 1 - (descElScrollTop.value - window.innerHeight * 7) / (window.innerHeight * (7.5 - 7))
|
|
|
+ } else {
|
|
|
+ ret = 0
|
|
|
+ }
|
|
|
+ return ret
|
|
|
+})
|
|
|
+
|
|
|
+const summaryOpacity = computed(() => {
|
|
|
+ let ret = null
|
|
|
+ if (descElScrollTop.value <= window.innerHeight * 8) {
|
|
|
+ ret = 0
|
|
|
+ } else if (descElScrollTop.value > window.innerHeight * 8 && descElScrollTop.value < window.innerHeight * 8.5) {
|
|
|
+ ret = (descElScrollTop.value - window.innerHeight * 8) / (window.innerHeight * (8.5 - 8))
|
|
|
+ } else if (descElScrollTop.value >= window.innerHeight * 6.5 && descElScrollTop.value <= window.innerHeight * 9) {
|
|
|
+ ret = 1
|
|
|
+ } else if (descElScrollTop.value > window.innerHeight * 9 && descElScrollTop.value < window.innerHeight * 9.5) {
|
|
|
+ ret = 1 - (descElScrollTop.value - window.innerHeight * 9) / (window.innerHeight * (9.5 - 9))
|
|
|
+ } else {
|
|
|
+ ret = 0
|
|
|
+ }
|
|
|
+ return ret
|
|
|
+})
|
|
|
+
|
|
|
+const sizeOpacity = computed(() => {
|
|
|
+ let ret = null
|
|
|
+ if (descElScrollTop.value <= window.innerHeight * 2) {
|
|
|
+ ret = 0
|
|
|
+ } else if (descElScrollTop.value > window.innerHeight * 2 && descElScrollTop.value < window.innerHeight * 2.5) {
|
|
|
+ ret = (descElScrollTop.value - window.innerHeight * 2) / (window.innerHeight * (2.5 - 2))
|
|
|
+ } else if (descElScrollTop.value >= window.innerHeight * 2.5 && descElScrollTop.value <= window.innerHeight * 7) {
|
|
|
+ ret = 1
|
|
|
+ } else if (descElScrollTop.value > window.innerHeight * 7 && descElScrollTop.value < window.innerHeight * 7.5) {
|
|
|
+ ret = 1 - (descElScrollTop.value - window.innerHeight * 7) / (window.innerHeight * (7.5 - 7))
|
|
|
+ } else {
|
|
|
+ ret = 0
|
|
|
+ }
|
|
|
+ return ret
|
|
|
+})
|
|
|
+
|
|
|
+const isShowHotspot = computed(() => {
|
|
|
+ let ret = null
|
|
|
+ if (descElScrollTop.value <= window.innerHeight * 2) {
|
|
|
+ ret = false
|
|
|
+ } else {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return ret
|
|
|
+})
|
|
|
+
|
|
|
+const isShowHotspotDetail1 = ref(false)
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.home {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- background-color: #000;
|
|
|
+ // 滚动条，只设置某一项可能导致不生效。
|
|
|
+ ::-webkit-scrollbar { width: 0; height: 0; }
|
|
|
+ >.bg-mask{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url(@/assets/images/home-painting.jpg);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ filter: grayscale(1) brightness(0.35);
|
|
|
+ }
|
|
|
+ >.startup{
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ >.title-wrap{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ transform: translate(-50%);
|
|
|
+ width: calc(43 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ height: calc(180 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ z-index: 5;
|
|
|
+ >img.title{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ >.sub-text{
|
|
|
+ position: absolute;
|
|
|
+ left: 110%;
|
|
|
+ top: 46%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ writing-mode: vertical-lr;
|
|
|
+ font-family: KaiTi, KaiTi;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ white-space: pre;
|
|
|
+ letter-spacing: 0.2em;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >.painting-wrap{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 48%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ height: calc(522 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ >.size-sign-h{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 0;
|
|
|
+ transform: translate(-50%, -105%);
|
|
|
+ width: calc(309 * 0.9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ >img{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ >span{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ font-family: KaiTi, KaiTi;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ text-shadow: 0px 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #F8DD86;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >.size-sign-v{
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(80%, -50%);
|
|
|
+ height: calc(464 * 0.9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ >img{
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ >span{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ font-family: KaiTi, KaiTi;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ text-shadow: 0px 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #F8DD86;
|
|
|
+ writing-mode: vertical-lr;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >img.painting-border{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ >img.painting, img.painting-stem, img.painting-leaf, img.painting-stone{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 90%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >.hotspot-wrap{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 48%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ height: calc(522 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ z-index: 7;
|
|
|
+ pointer-events: none;
|
|
|
+ >.hotspot-1{
|
|
|
+ position: absolute;
|
|
|
+ top: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ right: calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ pointer-events: initial;
|
|
|
+ }
|
|
|
+ >.hotspot-2{
|
|
|
+ position: absolute;
|
|
|
+ left: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ top: calc(125 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ pointer-events: initial;
|
|
|
+ }
|
|
|
+ >.hotspot-3{
|
|
|
+ position: absolute;
|
|
|
+ bottom: calc(-10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ right: calc(-10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ pointer-events: initial;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >.fixed-desc{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 2%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 100%;
|
|
|
+ height: 20%;
|
|
|
+ padding-left: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ padding-right: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-family: KaiTi, KaiTi;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ text-align: justified;
|
|
|
+ }
|
|
|
+ >.operation-tip{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: calc(77 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ >.desc{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding-top: 100vh;
|
|
|
+ color: white;
|
|
|
+ overflow: auto;
|
|
|
+ padding-left: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ padding-right: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ font-family: KaiTi, KaiTi;
|
|
|
+ color: #FFFFFF;
|
|
|
+ >h3{
|
|
|
+ margin-top: 1em;
|
|
|
+ margin-bottom: 0.5em;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ >p{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ text-align: justified;
|
|
|
+ margin-bottom: 0.5em;
|
|
|
+ }
|
|
|
+ >.bottom-mask{
|
|
|
+ width: 100%;
|
|
|
+ height: 750vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >.hotspot-detail{
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
任一存
