|
@@ -14,6 +14,9 @@ import DetailImgAc from '@/assets/images/icon_home_detail-min-ac.png'
|
|
import AuthorImg from '@/assets/images/icon_home_author-min.png'
|
|
import AuthorImg from '@/assets/images/icon_home_author-min.png'
|
|
import AuthorImgAc from '@/assets/images/icon_home_author-min-ac.png'
|
|
import AuthorImgAc from '@/assets/images/icon_home_author-min-ac.png'
|
|
|
|
|
|
|
|
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
|
|
|
|
+
|
|
|
|
+
|
|
|
|
|
|
const store = useStore()
|
|
const store = useStore()
|
|
const router = useRouter()
|
|
const router = useRouter()
|
|
@@ -98,6 +101,11 @@ const scrollFu = (event, val) => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const hoverIndex = ref(null)
|
|
const hoverIndex = ref(null)
|
|
|
|
+
|
|
|
|
+const {
|
|
|
|
+ windowSizeInCssForRef,
|
|
|
|
+ windowSizeWhenDesignForRef,
|
|
|
|
+} = useSizeAdapt()
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
if (route.query.page) {
|
|
if (route.query.page) {
|
|
curPageIndex.value = parseInt(route.query.page)
|
|
curPageIndex.value = parseInt(route.query.page)
|
|
@@ -379,7 +387,7 @@ onMounted(() => {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|
|
z-index: 10;
|
|
z-index: 10;
|
|
- // opacity: 1;
|
|
|
|
|
|
+ opacity: 0.001;
|
|
.scroller-content {
|
|
.scroller-content {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 200vh;
|
|
height: 200vh;
|
|
@@ -475,8 +483,16 @@ onMounted(() => {
|
|
left: 50%;
|
|
left: 50%;
|
|
top: 50%;
|
|
top: 50%;
|
|
width: 551.84px;
|
|
width: 551.84px;
|
|
|
|
+ // height: calc(
|
|
|
|
+ // 941 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
|
+ // v-bind("windowSizeInCssForRef")
|
|
|
|
+ // );
|
|
// height: 937.05px;
|
|
// height: 937.05px;
|
|
- height: 100%;
|
|
|
|
|
|
+ height: 97%;
|
|
|
|
+ // height: calc(
|
|
|
|
+ // 961 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
|
+ // v-bind("windowSizeInCssForRef")
|
|
|
|
+ // );
|
|
// background: green;
|
|
// background: green;
|
|
transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1;
|
|
z-index: 1;
|
|
@@ -490,14 +506,14 @@ onMounted(() => {
|
|
|
|
|
|
> .painting-stem {
|
|
> .painting-stem {
|
|
width: 80%;
|
|
width: 80%;
|
|
- // height: 75%;
|
|
|
|
- height: calc(
|
|
|
|
- 371 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
|
- v-bind("windowSizeInCssForRef")
|
|
|
|
- );
|
|
|
|
|
|
+ height: 74%;
|
|
|
|
+ // height: calc(
|
|
|
|
+ // 671 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
|
+ // v-bind("windowSizeInCssForRef")
|
|
|
|
+ // );
|
|
position: absolute;
|
|
position: absolute;
|
|
left: 50%;
|
|
left: 50%;
|
|
- transform: translate(-50%, 22%);
|
|
|
|
|
|
+ transform: translate(-50%, 24%);
|
|
transition: opacity 1.5s ease;
|
|
transition: opacity 1.5s ease;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -522,7 +538,11 @@ onMounted(() => {
|
|
transform: translate(-46%, -50%);
|
|
transform: translate(-46%, -50%);
|
|
width: 551.84px;
|
|
width: 551.84px;
|
|
// height: 937.05px;
|
|
// height: 937.05px;
|
|
- height: 100%;
|
|
|
|
|
|
+ // height: 100%;
|
|
|
|
+ height: calc(
|
|
|
|
+ 941 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
|
+ );
|
|
z-index: 7;
|
|
z-index: 7;
|
|
pointer-events: none;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
will-change: transform;
|