huangmh
/
client_iot-daoshi-template-v
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 商户端信息展示重做

ShangHai_LongXiang
jiannibang 2 years ago
parent
c9e0e1b355
commit
5c70bef7b2
6 changed files with 189 additions and 129 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 189
      src/base/ShopItem/ShopItem.vue
  2. BIN
      src/base/ShopItem/arrow.png
  3. 12
      src/base/ShopItem/arrow.vue
  4. BIN
      src/base/ShopItem/loc.png
  5. 26
      src/base/ShopItem/loc.vue
  6. 77
      src/base/ShopItem/picsCom.vue

189
src/base/ShopItem/ShopItem.vue
View File

@ -58,25 +58,19 @@
<Transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut"> <Transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
<div v-if="isActive && pics && pics.length" class="pic-modal" @click="deactivate"> <div v-if="isActive && pics && pics.length" class="pic-modal" @click="deactivate">
<div class="content" @click.stop="void 0"> <div class="content" @click.stop="void 0">
<div class="header">
<img loading="lazy" :src="'./static/offline' + shop.logoUrl" alt="" class="logo" /> <img loading="lazy" :src="'./static/offline' + shop.logoUrl" alt="" class="logo" />
<div class="name">{{ switchLanguage(shop, 'shopName') }}</div> <div class="name">{{ switchLanguage(shop, 'shopName') }}</div>
<div class="meta"><img src="./loc.png" class="loc" />{{ shop.floor }}</div>
<div class="meta"><loc />{{ shop.floor }}</div>
<img class="close" src="./close.png" @click="deactivate" /> <img class="close" src="./close.png" @click="deactivate" />
<QRCodeFromText <QRCodeFromText
class="qrcode" class="qrcode"
:size="135"
:size="100"
:text="`${config.mobileNav}?code=${currentFloor.projectCode}&s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置&e=${shop.houseNumber}`" :text="`${config.mobileNav}?code=${currentFloor.projectCode}&s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置&e=${shop.houseNumber}`"
></QRCodeFromText> ></QRCodeFromText>
<div class="qrcode-meta">扫码导航<img src="./arrow.png" class="arrow" /></div>
<div class="pics">
<EffectFade :list="pics || []">
<template v-slot="{ item }">
<div class="pics-wrapper">
<img class="banner" :src="item" alt="" />
</div>
</template>
</EffectFade>
<div class="qrcode-meta">扫码导航 <arrow /></div>
</div> </div>
<picsCom :pics="pics"></picsCom>
</div></div></Transition </div></div></Transition
></Teleport> ></Teleport>
</div> </div>
@ -87,7 +81,10 @@ import QRCodeFromText from '@/components/QRCodeFromText/QRCodeFromText.vue'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root' import { useStore } from '@/store/root'
import { computed } from 'vue' import { computed } from 'vue'
import EffectFade from '@/components/EffectFade/EffectFade.vue'
import loc from './loc.vue'
import arrow from './arrow.vue'
import picsCom from './picsCom.vue'
const store = useStore() const store = useStore()
const { currentFloor, config, theme, showMap, path, shopPicsMap } = storeToRefs(store) const { currentFloor, config, theme, showMap, path, shopPicsMap } = storeToRefs(store)
const isBrandShowMap = computed(() => showMap.value && (path.value === '/brand' || path.value === '/foods')) const isBrandShowMap = computed(() => showMap.value && (path.value === '/brand' || path.value === '/foods'))
@ -423,7 +420,7 @@ const deactivate = () => store.SET_SHOP(null)
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 1000;
z-index: 10000;
.content { .content {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -432,63 +429,71 @@ const deactivate = () => store.SET_SHOP(null)
height: 870px; height: 870px;
background: #fff; background: #fff;
box-shadow: 0px 15px 24px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 15px 24px 0px rgba(0, 0, 0, 0.05);
.header {
position: relative;
height: 180px;
background: var(--guide-floorBg);
}
.logo { .logo {
position: absolute; position: absolute;
top: 20px;
top: 30px;
left: 68px; left: 68px;
width: 80px;
height: 80px;
border-radius: 12px;
width: 120px;
height: 120px;
border-radius: 16px;
border: 1px solid var(--b-10, rgba(0, 0, 0, 0.1)); border: 1px solid var(--b-10, rgba(0, 0, 0, 0.1));
background: var(--w-100, #fff); background: var(--w-100, #fff);
padding: 4px;
padding: 10px;
} }
.name { .name {
position: absolute; position: absolute;
top: 30px;
left: 172px;
color: var(--b-80, rgba(0, 0, 0, 0.8));
font-size: 24px;
top: 64px;
left: 220px;
color: var(--guide-floorColor);
font-size: 40px;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
line-height: 28px;
line-height: 47px;
} }
.meta { .meta {
position: absolute; position: absolute;
top: 66px;
left: 172px;
top: 123px;
left: 220px;
height: 23px; height: 23px;
display: inline-flex; display: inline-flex;
color: var(--b-60, rgba(0, 0, 0, 0.6));
color: var(--guide-floorColor);
font-size: 20px; font-size: 20px;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
align-items: center; align-items: center;
opacity: 0.8;
.loc { .loc {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 8px; margin-right: 8px;
fill: currentColor;
} }
} }
.qrcode { .qrcode {
position: absolute; position: absolute;
top: -50px;
right: 168px;
width: 150px;
height: 150px;
top: 30px;
right: 202px;
width: 120px;
height: 120px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 12px;
border-radius: 16px;
border: 1px solid var(--b-10, rgba(0, 0, 0, 0.1)); border: 1px solid var(--b-10, rgba(0, 0, 0, 0.1));
background: var(--w-100, #fff); background: var(--w-100, #fff);
} }
.qrcode-meta { .qrcode-meta {
position: absolute; position: absolute;
display: inline-flex; display: inline-flex;
top: 65px;
right: 334px;
color: var(--b-60, rgba(0, 0, 0, 0.6));
top: 122px;
right: 336px;
color: var(--guide-floorColor);
opacity: 0.6;
font-size: 20px; font-size: 20px;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
@ -502,53 +507,10 @@ const deactivate = () => store.SET_SHOP(null)
} }
.close { .close {
position: absolute; position: absolute;
width: 80px;
height: 80px;
top: 20px;
right: 68px;
}
.pics {
position: absolute;
left: 68px;
width: 120px;
height: 120px;
top: 30px;
right: 68px; right: 68px;
top: 120px;
:deep(.swiper) {
.swiper-pagination {
top: auto;
right: 0;
bottom: 0;
left: 0;
width: auto;
margin: auto;
.swiper-pagination-bullet {
width: 34px !important;
height: 4px !important;
background: var(--b-10, rgba(0, 0, 0, 0.1));
border-radius: 6px !important;
opacity: inherit !important;
margin: 0;
&.swiper-pagination-bullet-active {
background: var(--VI--, #516dd8);
border-radius: 6px !important;
}
}
}
}
.pics-wrapper {
position: relative;
width: 944px;
height: 724px;
border-radius: 16px;
overflow: hidden;
.banner {
width: 100%;
height: 708px;
object-fit: cover;
border-radius: 16px;
}
}
} }
} }
} }
@ -590,65 +552,48 @@ const deactivate = () => store.SET_SHOP(null)
left: auto; left: auto;
right: 0; right: 0;
width: 610px; width: 610px;
height: 914px;
box-shadow: 0px 15px 24px 0px rgba(0, 0, 0, 0.05);
border-radius: 24px 24px 0 0;
height: 800px;
.logo { .logo {
top: 40px;
left: 40px;
width: 150px;
height: 150px;
padding: 15px;
top: 30px;
left: 30px;
width: 120px;
height: 120px;
padding: 10px;
} }
.name { .name {
top: 74px;
left: 222px;
top: 40px;
right: 160px;
left: 180px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} }
.meta { .meta {
top: 128px;
left: 222px;
top: 100px;
left: 180px;
height: 28px; height: 28px;
font-size: 24px; font-size: 24px;
} }
.qrcode { .qrcode {
left: 40px;
bottom: 40px;
top: auto;
left: auto;
right: 30px;
bottom: auto;
top: 30px;
} }
.qrcode-meta { .qrcode-meta {
left: 222px;
bottom: 40px;
right: auto;
top: auto;
flex-direction: row-reverse;
top: 122px;
right: 158px;
.arrow { .arrow {
margin-left: 0; margin-left: 0;
margin-right: 4px; margin-right: 4px;
transform: rotate(180deg);
} }
} }
.close { .close {
right: 40px;
bottom: 40px;
top: auto;
}
.pics {
position: absolute;
left: 15px;
right: 15px;
top: 230px;
.pics-wrapper {
width: 580px;
height: 451px;
border-radius: 16px;
overflow: hidden;
.banner {
width: 100%;
height: 435px;
object-fit: cover;
border-radius: 16px;
}
}
width: 80px;
height: 80px;
right: 30px;
bottom: auto;
top: -62px;
} }
} }
} }

BIN
src/base/ShopItem/arrow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 332 B

12
src/base/ShopItem/arrow.vue
View File

@ -0,0 +1,12 @@
<template>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path class="color" d="M13.172 12.0003L8.22198 7.05026L9.63598 5.63626L16 12.0003L9.63598 18.3643L8.22198 16.9503L13.172 12.0003Z" />
</svg>
</template>
<style lang="scss" scoped>
.arrow {
.color {
fill: var(--guide-floorColor);
}
}
</style>

BIN
src/base/ShopItem/loc.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 912 B

26
src/base/ShopItem/loc.vue
View File

@ -0,0 +1,26 @@
<template>
<svg class="loc" width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3157_18608)">
<path
id="Vector"
d="M10 17.9169L14.125 13.7919C14.9408 12.9761 15.4963 11.9367 15.7213 10.8052C15.9463 9.67362 15.8308 8.50076 15.3892 7.43489C14.9477 6.36902 14.2 5.45802 13.2408 4.81707C12.2815 4.17612 11.1537 3.83401 10 3.83401C8.8463 3.83401 7.71851 4.17612 6.75924 4.81707C5.79997 5.45802 5.05229 6.36902 4.61076 7.43489C4.16923 8.50076 4.05368 9.67362 4.27871 10.8052C4.50374 11.9367 5.05926 12.9761 5.875 13.7919L10 17.9169ZM10 20.2736L4.69667 14.9703C3.64779 13.9214 2.93349 12.585 2.64411 11.1301C2.35473 9.67528 2.50326 8.16729 3.07092 6.79685C3.63858 5.4264 4.59987 4.25507 5.83324 3.43096C7.0666 2.60686 8.51665 2.16699 10 2.16699C11.4834 2.16699 12.9334 2.60686 14.1668 3.43096C15.4001 4.25507 16.3614 5.4264 16.9291 6.79685C17.4968 8.16729 17.6453 9.67528 17.3559 11.1301C17.0665 12.585 16.3522 13.9214 15.3033 14.9703L10 20.2736ZM10 11.3336C10.442 11.3336 10.866 11.158 11.1785 10.8454C11.4911 10.5329 11.6667 10.109 11.6667 9.66693C11.6667 9.2249 11.4911 8.80098 11.1785 8.48842C10.866 8.17586 10.442 8.00026 10 8.00026C9.55798 8.00026 9.13405 8.17586 8.82149 8.48842C8.50893 8.80098 8.33334 9.2249 8.33334 9.66693C8.33334 10.109 8.50893 10.5329 8.82149 10.8454C9.13405 11.158 9.55798 11.3336 10 11.3336ZM10 13.0003C9.11595 13.0003 8.2681 12.6491 7.64298 12.024C7.01786 11.3988 6.66667 10.551 6.66667 9.66693C6.66667 8.78287 7.01786 7.93503 7.64298 7.30991C8.2681 6.68478 9.11595 6.33359 10 6.33359C10.8841 6.33359 11.7319 6.68478 12.357 7.30991C12.9821 7.93503 13.3333 8.78287 13.3333 9.66693C13.3333 10.551 12.9821 11.3988 12.357 12.024C11.7319 12.6491 10.8841 13.0003 10 13.0003Z"
class="color"
/>
</g>
<defs>
<clipPath id="clip0_3157_18608">
<rect width="20" height="20" fill="white" transform="translate(0 0.5)" />
</clipPath>
</defs>
</svg>
</template>
<style lang="scss" scoped>
.loc {
width: 20px;
height: 20px;
margin-right: 8px;
.color {
fill: var(--guide-floorColor);
}
}
</style>

77
src/base/ShopItem/picsCom.vue
View File

@ -0,0 +1,77 @@
<script setup>
import { ref, defineProps } from 'vue'
import ScrollView from '@/base/ScrollView/ScrollView.vue'
const current = ref()
defineProps(['pics'])
</script>
<template>
<ScrollView class="pics" scrollbar>
<div class="grid">
<img v-for="pic in pics || []" :key="pic" class="pic" :src="pic" alt="" @click="current = pic" />
</div>
<Teleport v-if="current" to="body">
<div class="picDetail">
<img class="detail" :src="current" alt="" />
<img src="./close.png" class="close" @click="current = null" alt="" srcset="" />
</div> </Teleport
></ScrollView>
</template>
<style lang="scss" scoped>
.pics {
height: 690px;
.grid {
display: grid;
padding: 48px 68px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 24px;
}
.pic {
width: 170px;
height: 170px;
object-fit: cover;
border-radius: 16px;
}
}
.picDetail {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10001;
background: var(--b-80, rgba(0, 0, 0, 0.8));
.detail {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
object-fit: contain;
object-position: center;
z-index: 1;
}
.close {
position: absolute;
width: 120px;
height: 120px;
z-index: 2;
top: 30px;
right: 30px;
}
}
@media (min-aspect-ratio: 1/1) {
.pics {
height: 620px;
overflow: hidden;
.grid {
padding: 30px 24px;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save