|
|
|
@ -6,7 +6,10 @@ |
|
|
|
<!-- 地图弹框 --> |
|
|
|
<div id="shopInfo" class="boxShop boxShop2"> |
|
|
|
<div id="shopNum"> |
|
|
|
<marquees :speed="25" :delay="0.8" class="name" :content="shop.shopName">{{ shop.shopName }} </marquees> |
|
|
|
<marquees v-if="nameWidth > 220" :speed="25" :delay="0.8" class="name" :content="switchLanguage(shop, 'shopName')" |
|
|
|
>{{ switchLanguage(shop, 'shopName') }} |
|
|
|
</marquees> |
|
|
|
<span v-else ref="nameRef" class="name">{{ switchLanguage(shop, 'shopName') }}</span> |
|
|
|
</div> |
|
|
|
<div class="map-flex"> |
|
|
|
<div class="pop-bottom__detail" @click="handleDetail">{{ $t('detail') }}</div> |
|
|
|
@ -22,13 +25,14 @@ |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import marquees from '@/base/Marquees/Marquees.vue' |
|
|
|
|
|
|
|
import { useRootStore } from '@/store/root' |
|
|
|
import { storeToRefs } from 'pinia' |
|
|
|
import { nextTick, ref, watch } from 'vue' |
|
|
|
|
|
|
|
const store = useRootStore() |
|
|
|
const { shop } = storeToRefs(store) |
|
|
|
|
|
|
|
const nameRef = ref() |
|
|
|
const nameWidth = ref(0) |
|
|
|
const emits = defineEmits(['handle-go', 'handle-Detail']) |
|
|
|
function handleGO() { |
|
|
|
emits('handle-go') |
|
|
|
@ -38,6 +42,11 @@ function handleGO() { |
|
|
|
function handleDetail() { |
|
|
|
emits('handle-Detail') |
|
|
|
} |
|
|
|
watch(shop, () => { |
|
|
|
nextTick(() => { |
|
|
|
nameWidth.value = nameRef.value.clientWidth |
|
|
|
}) |
|
|
|
}) |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
@ -55,7 +64,7 @@ function handleDetail() { |
|
|
|
/* stylelint-disable-next-line selector-id-pattern */ |
|
|
|
#shopInfo { |
|
|
|
position: absolute; |
|
|
|
z-index: 500; |
|
|
|
z-index: 900 !important; |
|
|
|
width: 254px; |
|
|
|
height: 128px; |
|
|
|
background-position: center center; |
|
|
|
|