|
@@ -16,8 +16,6 @@
|
|
:style="{
|
|
:style="{
|
|
left: hotspot1X + 'px',
|
|
left: hotspot1X + 'px',
|
|
top: hotspot1Y + 'px',
|
|
top: hotspot1Y + 'px',
|
|
- width: hotspotSize + 'px',
|
|
|
|
- height: hotspotSize + 'px',
|
|
|
|
}"
|
|
}"
|
|
@click="onClickHotspot(1)"
|
|
@click="onClickHotspot(1)"
|
|
/>
|
|
/>
|
|
@@ -26,8 +24,6 @@
|
|
:style="{
|
|
:style="{
|
|
left: hotspot2X + 'px',
|
|
left: hotspot2X + 'px',
|
|
top: hotspot2Y + 'px',
|
|
top: hotspot2Y + 'px',
|
|
- width: hotspotSize + 'px',
|
|
|
|
- height: hotspotSize + 'px',
|
|
|
|
}"
|
|
}"
|
|
@click="onClickHotspot(2)"
|
|
@click="onClickHotspot(2)"
|
|
/>
|
|
/>
|
|
@@ -127,7 +123,6 @@ const hotspot1X = ref(-100)
|
|
const hotspot1Y = ref(-100)
|
|
const hotspot1Y = ref(-100)
|
|
const hotspot2X = ref(-100)
|
|
const hotspot2X = ref(-100)
|
|
const hotspot2Y = ref(-100)
|
|
const hotspot2Y = ref(-100)
|
|
-const hotspotSize = ref(0)
|
|
|
|
function setHotspotPos() {
|
|
function setHotspotPos() {
|
|
const { x: x1, y: y1 } = utils.mapPosFromDraftToWindow({ x: 484, y: 420 }, 'cover', 1920, 972)
|
|
const { x: x1, y: y1 } = utils.mapPosFromDraftToWindow({ x: 484, y: 420 }, 'cover', 1920, 972)
|
|
hotspot1X.value = x1
|
|
hotspot1X.value = x1
|
|
@@ -135,8 +130,6 @@ function setHotspotPos() {
|
|
const { x: x2, y: y2 } = utils.mapPosFromDraftToWindow({ x: 214, y: 700 }, 'cover', 1920, 972)
|
|
const { x: x2, y: y2 } = utils.mapPosFromDraftToWindow({ x: 214, y: 700 }, 'cover', 1920, 972)
|
|
hotspot2X.value = x2
|
|
hotspot2X.value = x2
|
|
hotspot2Y.value = y2
|
|
hotspot2Y.value = y2
|
|
- const { x: size } = utils.mapPosFromDraftToWindow({ x: 48, y: 48 }, 'cover', 1920, 972)
|
|
|
|
- hotspotSize.value = size
|
|
|
|
}
|
|
}
|
|
setHotspotPos()
|
|
setHotspotPos()
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
@@ -203,7 +196,7 @@ const activeVideoIdx = ref(0)
|
|
writing-mode: vertical-lr;
|
|
writing-mode: vertical-lr;
|
|
font-family: KingHwa_OldSong, KingHwa_OldSong;
|
|
font-family: KingHwa_OldSong, KingHwa_OldSong;
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
- font-size: 6.17vh;
|
|
|
|
|
|
+ font-size: calc(60px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
|
|
color: #474747;
|
|
color: #474747;
|
|
letter-spacing: 0.2em;
|
|
letter-spacing: 0.2em;
|
|
}
|
|
}
|
|
@@ -223,8 +216,8 @@ const activeVideoIdx = ref(0)
|
|
right: 11vw;
|
|
right: 11vw;
|
|
}
|
|
}
|
|
>p{
|
|
>p{
|
|
- font-size: calc(30 / 970 * 100vh);
|
|
|
|
- line-height: calc(36 / 970 * 100vh);
|
|
|
|
|
|
+ font-size: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
|
|
|
|
+ line-height: calc(36px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
|
|
text-indent: 2em;
|
|
text-indent: 2em;
|
|
font-family: KaiTi, KaiTi;
|
|
font-family: KaiTi, KaiTi;
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
@@ -233,8 +226,8 @@ const activeVideoIdx = ref(0)
|
|
font-family: KaiTi, KaiTi;
|
|
font-family: KaiTi, KaiTi;
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
color: #707F48;
|
|
color: #707F48;
|
|
- font-size: calc(42 / 970 * 100vh);
|
|
|
|
- line-height: calc(50 / 970 * 100vh);
|
|
|
|
|
|
+ font-size: calc(42px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
|
|
|
|
+ line-height: calc(50px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
>p:nth-of-type(2) {
|
|
>p:nth-of-type(2) {
|