|
|
@ -3,7 +3,7 @@ |
|
|
<img src="@/assets/images/home/bus_tip.svg" alt="" /> |
|
|
<img src="@/assets/images/home/bus_tip.svg" alt="" /> |
|
|
<h4>{{ switchLanguage(busTip, 'title') }}</h4> |
|
|
<h4>{{ switchLanguage(busTip, 'title') }}</h4> |
|
|
<div class="bus-to-right"> |
|
|
<div class="bus-to-right"> |
|
|
<img ref="busRefToRight" class="bus" src="@/assets/images/home/busToRight.svg" alt="" /> |
|
|
|
|
|
|
|
|
<div ref="busRefToRight" class="bus"></div> |
|
|
<img class="line" src="@/assets/images/home/lineToRight.svg" alt="" /> |
|
|
<img class="line" src="@/assets/images/home/lineToRight.svg" alt="" /> |
|
|
<div class="name-container"> |
|
|
<div class="name-container"> |
|
|
<span v-for="(item, index) in nameList" :key="index" :class="{ active: index === currentIndexToRight }">{{ |
|
|
<span v-for="(item, index) in nameList" :key="index" :class="{ active: index === currentIndexToRight }">{{ |
|
|
@ -12,7 +12,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bus-to-left"> |
|
|
<div class="bus-to-left"> |
|
|
<img ref="busRefToLeft" class="bus" src="@/assets/images/home/busToLeft.svg" alt="" /> |
|
|
|
|
|
|
|
|
<div ref="busRefToLeft" class="bus"></div> |
|
|
<img class="line" src="@/assets/images/home/lineToLeft.svg" alt="" /> |
|
|
<img class="line" src="@/assets/images/home/lineToLeft.svg" alt="" /> |
|
|
<div class="name-container"> |
|
|
<div class="name-container"> |
|
|
<span v-for="(item, index) in nameList" :key="index" :class="{ active: index === currentIndexToLeft }">{{ |
|
|
<span v-for="(item, index) in nameList" :key="index" :class="{ active: index === currentIndexToLeft }">{{ |
|
|
@ -90,8 +90,8 @@ function setBusPositionToLeft(val: number) { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
onMounted(() => { |
|
|
onMounted(() => { |
|
|
setBusPositionToLeft(0) |
|
|
|
|
|
setBusPositionToRight(3) |
|
|
|
|
|
|
|
|
setBusPositionToLeft(1) |
|
|
|
|
|
setBusPositionToRight(2) |
|
|
}) |
|
|
}) |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
@ -152,12 +152,35 @@ onMounted(() => { |
|
|
} |
|
|
} |
|
|
.bus { |
|
|
.bus { |
|
|
top: 85px; |
|
|
top: 85px; |
|
|
|
|
|
background-image: url('@/assets/images/home/busToLeft.svg'); |
|
|
|
|
|
&::after { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: -35px; |
|
|
|
|
|
left: 20px; |
|
|
|
|
|
z-index: 3; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.bus { |
|
|
.bus { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
top: 0; |
|
|
left: 0; |
|
|
left: 0; |
|
|
|
|
|
display: block; |
|
|
|
|
|
background-image: url('@/assets/images/home/busToRight.svg'); |
|
|
|
|
|
width: 54px; |
|
|
|
|
|
height: 21px; |
|
|
|
|
|
|
|
|
|
|
|
&::after { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 37px; |
|
|
|
|
|
left: 20px; |
|
|
|
|
|
z-index: 3; |
|
|
|
|
|
display: block; |
|
|
|
|
|
width: 22px; |
|
|
|
|
|
height: 22px; |
|
|
|
|
|
background: url('@/assets/images/home/point.svg'); |
|
|
|
|
|
content: ''; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
.line { |
|
|
.line { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
@ -186,18 +209,6 @@ onMounted(() => { |
|
|
position: relative; |
|
|
position: relative; |
|
|
// font-size: 24px; |
|
|
// font-size: 24px; |
|
|
// color: rgb(0 0 0 / 90%); |
|
|
// color: rgb(0 0 0 / 90%); |
|
|
|
|
|
|
|
|
&::after { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: -33px; |
|
|
|
|
|
right: 0; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
width: 22px; |
|
|
|
|
|
height: 22px; |
|
|
|
|
|
margin: auto; |
|
|
|
|
|
background: url('@/assets/images/home/point.svg'); |
|
|
|
|
|
content: ''; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|