|
@@ -7,12 +7,25 @@ import Icon2 from "@/assets/img/home/icon2.png";
|
|
|
import Icon3 from "@/assets/img/home/icon3.png";
|
|
|
|
|
|
import Bolang from "@/assets/img/home/bolang.png";
|
|
|
+import BolangM from "@/assets/img/home/bolangM.png";
|
|
|
+
|
|
|
import line from "@/assets/img/home/xian.png";
|
|
|
import title from "@/assets/img/home/title.png";
|
|
|
|
|
|
+import Welcomeimg from "@/assets/img/home/welcome.png";
|
|
|
+
|
|
|
+import Bg from "@/assets/img/home/bg.png";
|
|
|
+import BgM from "@/assets/img/home/bgM.png";
|
|
|
+
|
|
|
+const allBg = computed(() => {
|
|
|
+ return screenWidth.value > 480 ? `url(${Bg})` : `url(${BgM})`;
|
|
|
+});
|
|
|
+
|
|
|
const router = useRouter();
|
|
|
|
|
|
const moduleIndex = ref(0);
|
|
|
+const screenWidth = ref();
|
|
|
+
|
|
|
watch(moduleIndex, (newValue: number) => {
|
|
|
// console.log(moduleIndex.value);
|
|
|
if (newValue === 3) {
|
|
@@ -24,13 +37,22 @@ watch(moduleIndex, (newValue: number) => {
|
|
|
|
|
|
onMounted(() => {
|
|
|
moduleIndex.value = 0;
|
|
|
+ screenWidth.value = window.innerWidth;
|
|
|
+ window.onresize = () => {
|
|
|
+ screenWidth.value = window.innerWidth;
|
|
|
+ };
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="all">
|
|
|
+ <div
|
|
|
+ class="all"
|
|
|
+ :style="{
|
|
|
+ bakcground: screenWidth > 480 ? Bg : BgM,
|
|
|
+ }"
|
|
|
+ >
|
|
|
<!-- 功能栏 -->
|
|
|
- <div class="option-box">
|
|
|
+ <div class="option-box" v-if="screenWidth > 480">
|
|
|
<!-- 线 -->
|
|
|
<img class="star-line" :src="line" alt="" />
|
|
|
<!-- 展馆介绍 -->
|
|
@@ -71,6 +93,17 @@ onMounted(() => {
|
|
|
<img :src="Icon3" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="welcome" v-else>
|
|
|
+ <img
|
|
|
+ :src="Welcomeimg"
|
|
|
+ alt=""
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ router.push({ path: '/introduceM' });
|
|
|
+ }
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </div>
|
|
|
|
|
|
<!-- 场馆介绍 -->
|
|
|
<Introduce
|
|
@@ -94,7 +127,7 @@ onMounted(() => {
|
|
|
|
|
|
<!-- -->
|
|
|
|
|
|
- <img class="wave" :src="Bolang" alt="" />
|
|
|
+ <img class="wave" :src="screenWidth > 480 ? Bolang : BolangM" alt="" />
|
|
|
|
|
|
<!-- title -->
|
|
|
<img class="title" :src="title" alt="" />
|
|
@@ -105,7 +138,7 @@ onMounted(() => {
|
|
|
.all {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- background-image: url("../../assets/img/home/bg.png");
|
|
|
+ background: v-bind("allBg");
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
.option-box {
|
|
@@ -151,6 +184,16 @@ onMounted(() => {
|
|
|
// display: none;
|
|
|
}
|
|
|
}
|
|
|
+ .welcome {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 15%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 40%;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.wave {
|
|
|
width: 100%;
|
|
@@ -165,4 +208,13 @@ onMounted(() => {
|
|
|
left: 20%;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+@media screen and (max-width: 480px) {
|
|
|
+ .title {
|
|
|
+ width: 85% !important;
|
|
|
+ left: 50% !important;
|
|
|
+ top: 6%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|