|
@@ -482,18 +482,8 @@ onMounted(() => {
|
|
position: absolute;
|
|
position: absolute;
|
|
left: 50%;
|
|
left: 50%;
|
|
top: 50%;
|
|
top: 50%;
|
|
- width: 551.84px;
|
|
|
|
- // height: calc(
|
|
|
|
- // 941 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
|
- // v-bind("windowSizeInCssForRef")
|
|
|
|
- // );
|
|
|
|
- // height: 937.05px;
|
|
|
|
- height: 97%;
|
|
|
|
- // height: calc(
|
|
|
|
- // 961 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
|
- // v-bind("windowSizeInCssForRef")
|
|
|
|
- // );
|
|
|
|
- // background: green;
|
|
|
|
|
|
+ width: calc(99vh / 937 * 552);
|
|
|
|
+ height: 99vh;
|
|
transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1;
|
|
z-index: 1;
|
|
transition: top 1.5s ease, left 1.5s ease, width 1.5s ease, height 1.5s ease;
|
|
transition: top 1.5s ease, left 1.5s ease, width 1.5s ease, height 1.5s ease;
|
|
@@ -519,31 +509,25 @@ onMounted(() => {
|
|
}
|
|
}
|
|
> .painting-wrap2 {
|
|
> .painting-wrap2 {
|
|
left: 63%;
|
|
left: 63%;
|
|
- top: 46%;
|
|
|
|
- width: calc(551.84px * 1.45);
|
|
|
|
- height: calc(937.05px * 1.45);
|
|
|
|
|
|
+ top: 45%;
|
|
|
|
+ width: calc(125vh / 937 * 552);
|
|
|
|
+ height: calc(125vh);
|
|
}
|
|
}
|
|
|
|
|
|
> .painting-wrap3 {
|
|
> .painting-wrap3 {
|
|
- left: 50%;
|
|
|
|
- top: 0%;
|
|
|
|
- width: calc(551.84px * 5.45);
|
|
|
|
- height: calc(937.05px * 5.45);
|
|
|
|
|
|
+ left: 60%;
|
|
|
|
+ top: -20%;
|
|
|
|
+ width: calc(600vh / 937 * 552);
|
|
|
|
+ height: 600vh;
|
|
}
|
|
}
|
|
|
|
|
|
> .hotspot-wrap {
|
|
> .hotspot-wrap {
|
|
position: absolute;
|
|
position: absolute;
|
|
left: 50%;
|
|
left: 50%;
|
|
top: 50%;
|
|
top: 50%;
|
|
- transform: translate(-46%, -50%);
|
|
|
|
- width: 551.84px;
|
|
|
|
- // height: 937.05px;
|
|
|
|
- // height: 100%;
|
|
|
|
- height: calc(
|
|
|
|
- 941 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
|
- v-bind("windowSizeInCssForRef")
|
|
|
|
- );
|
|
|
|
- z-index: 7;
|
|
|
|
|
|
+ width: calc(99vh / 937 * 552);
|
|
|
|
+ height: 99vh;
|
|
|
|
+ transform: translate(-50%, -50%);
|
|
pointer-events: none;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
will-change: transform;
|
|
backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
@@ -559,8 +543,8 @@ onMounted(() => {
|
|
|
|
|
|
> .hotspot-1 {
|
|
> .hotspot-1 {
|
|
position: absolute;
|
|
position: absolute;
|
|
- top: 100px;
|
|
|
|
- right: 25px;
|
|
|
|
|
|
+ top: 11vh;
|
|
|
|
+ right: 0;
|
|
pointer-events: initial;
|
|
pointer-events: initial;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -573,8 +557,8 @@ onMounted(() => {
|
|
|
|
|
|
> .hotspot-3 {
|
|
> .hotspot-3 {
|
|
position: absolute;
|
|
position: absolute;
|
|
- bottom: 0px;
|
|
|
|
- right: 25px;
|
|
|
|
|
|
+ bottom: 0vh;
|
|
|
|
+ right: -1vh;
|
|
pointer-events: initial;
|
|
pointer-events: initial;
|
|
}
|
|
}
|
|
}
|
|
}
|