@ -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 : 254 px ;
height : 128 px ;
background - position : center center ;