You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.5 KiB
74 lines
1.5 KiB
<template>
|
|
<div :id="shop.houseNumber" class="group-item isRow" :class="{ isActive }" @click="handleShop">
|
|
<p class="name">
|
|
<span class="shop-name">{{ switchLanguage(shop, 'shopName') }}</span>
|
|
<span class="name-right" @click="handleShopNav">导航</span>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
shop: Object,
|
|
isActive: Boolean
|
|
})
|
|
|
|
const emits = defineEmits(['click', 'nav'])
|
|
const handleShop = () => {
|
|
emits('click', props.shop)
|
|
}
|
|
const handleShopNav = () => {
|
|
emits('nav', props.shop)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.group-item {
|
|
background: #ffffff;
|
|
border-radius: var(--global-radius, 8px);
|
|
overflow: hidden;
|
|
display: flex;
|
|
width: 460px;
|
|
height: 76px;
|
|
padding-left: 12px;
|
|
align-items: center;
|
|
|
|
.name {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
padding-left: 24px;
|
|
overflow: hidden;
|
|
}
|
|
.shop-name {
|
|
font-weight: 700;
|
|
font-size: 20px;
|
|
line-height: 76px;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.name-right {
|
|
width: 120px;
|
|
display: flex;
|
|
line-height: 76px;
|
|
align-items: center;
|
|
font-weight: 700;
|
|
font-size: 20px;
|
|
color: #516dd8;
|
|
justify-content: center;
|
|
}
|
|
&.isActive {
|
|
background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
|
|
.shop-name {
|
|
color: #ffffff;
|
|
}
|
|
.name-right {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|