|
Before Width: | Height: | Size: 534 B |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 853 B |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 969 B |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 391 B |
|
Before Width: | Height: | Size: 398 B |
|
Before Width: | Height: | Size: 498 B |
|
Before Width: | Height: | Size: 219 KiB |
|
Before Width: | Height: | Size: 635 B |
|
Before Width: | Height: | Size: 434 B |
|
Before Width: | Height: | Size: 844 B |
|
Before Width: | Height: | Size: 817 B |
|
Before Width: | Height: | Size: 638 B |
|
Before Width: | Height: | Size: 825 B |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 749 B |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 704 B |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 905 B |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 560 B |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 874 B |
|
Before Width: | Height: | Size: 318 B |
|
Before Width: | Height: | Size: 282 B |
|
Before Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 600 B |
|
Before Width: | Height: | Size: 716 B |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 537 B |
|
Before Width: | Height: | Size: 540 B |
|
Before Width: | Height: | Size: 537 B |
|
Before Width: | Height: | Size: 540 B |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 208 B |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 287 B |
|
Before Width: | Height: | Size: 518 B |
|
Before Width: | Height: | Size: 518 B |
|
Before Width: | Height: | Size: 502 B |
|
Before Width: | Height: | Size: 541 B |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 237 B |
|
Before Width: | Height: | Size: 244 B |
|
Before Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 622 B |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 247 B |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 208 B |
|
Before Width: | Height: | Size: 815 B |
|
Before Width: | Height: | Size: 823 B |
|
Before Width: | Height: | Size: 276 B |
|
Before Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 566 B |
|
Before Width: | Height: | Size: 537 B |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 870 B |
|
Before Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 889 B |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 457 B |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 21 KiB |
@ -1,28 +0,0 @@ |
|||||
<template> |
|
||||
<div class="button" @click="close"> |
|
||||
<img src="../../assets/images/close.png" alt="" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
const emits = defineEmits(['click']) |
|
||||
|
|
||||
function close() { |
|
||||
emits('click') |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.button { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
width: 80px; |
|
||||
height: 80px; |
|
||||
background: var(--color-linear-goldenyellow); |
|
||||
border-radius: 12px; |
|
||||
img { |
|
||||
width: 56px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,36 +0,0 @@ |
|||||
<template> |
|
||||
<div class="go-btn" @click="go"> |
|
||||
<p class="text">GO HERE！</p> |
|
||||
<p class="text">去这里!</p> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
const emits = defineEmits(['click']) |
|
||||
|
|
||||
function go() { |
|
||||
emits('click') |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.go-btn { |
|
||||
padding-top: 30px; |
|
||||
padding-left: 210px; |
|
||||
width: 430px; |
|
||||
height: 140px; |
|
||||
background: url('../../assets/images/detail/go.png') no-repeat center center; |
|
||||
background-size: cover; |
|
||||
align-items: center; |
|
||||
position: absolute; |
|
||||
z-index: 3; |
|
||||
left: 50%; |
|
||||
transform: translateX(-50%); |
|
||||
.text { |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
text-align: justify; |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,109 +0,0 @@ |
|||||
<template> |
|
||||
<div ref="wrapElRef" class="wrap-El"> |
|
||||
<div ref="contentElRef" class="content" @animationend="animationend" :class="state.animationClass" :style="contentStyle"> |
|
||||
<slot></slot> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { reactive, computed, watch, nextTick, ref } from 'vue' |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
content: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
delay: { |
|
||||
type: Number, |
|
||||
default: 0.8 |
|
||||
}, |
|
||||
speed: { |
|
||||
type: Number, |
|
||||
default: 40 |
|
||||
} |
|
||||
}) |
|
||||
const state = reactive({ |
|
||||
wrapWidth: 0, //父盒子宽度 |
|
||||
firstRound: true, //判断是否 |
|
||||
duration: 0, //一次动画需要的时间 |
|
||||
offsetWidth: 0, //子盒子的宽度 |
|
||||
animationClass: '' //添加animate动画 |
|
||||
}) |
|
||||
|
|
||||
const wrapElRef = ref(null) |
|
||||
const contentElRef = ref(null) |
|
||||
|
|
||||
const contentStyle = computed(() => { |
|
||||
return { |
|
||||
//第一次从头开始,第二次动画的时候需要从最右边出来所以宽度需要多出父盒子的宽度 |
|
||||
paddingLeft: (state.firstRound ? 0 : state.wrapWidth) + 'px', |
|
||||
//只有第一次的时候需要延迟 |
|
||||
animationDelay: (state.firstRound ? props.delay : 0) + 's', |
|
||||
animationDuration: state.duration + 's' |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
function animationend() { |
|
||||
state.firstRound = false |
|
||||
state.duration = (state.offsetWidth + state.wrapWidth) / props.speed |
|
||||
state.animationClass = 'animate-infinite' |
|
||||
} |
|
||||
|
|
||||
watch( |
|
||||
() => props.content, |
|
||||
() => { |
|
||||
nextTick(() => { |
|
||||
const wrapWidth = wrapElRef.value.getBoundingClientRect().width |
|
||||
const offsetWidth = contentElRef.value.getBoundingClientRect().width |
|
||||
state.wrapWidth = wrapWidth |
|
||||
state.offsetWidth = offsetWidth |
|
||||
if (state.offsetWidth > state.wrapWidth) { |
|
||||
state.duration = offsetWidth / props.speed |
|
||||
state.animationClass = 'animate' |
|
||||
} else { |
|
||||
state.animationClass = '' |
|
||||
state.duration = 0 |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
{ |
|
||||
immediate: true |
|
||||
} |
|
||||
) |
|
||||
</script> |
|
||||
<style scoped> |
|
||||
.wrap-El { |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
padding: 0; |
|
||||
} |
|
||||
|
|
||||
.wrap-El .content { |
|
||||
position: absolute; |
|
||||
height: 100%; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
|
|
||||
.animate { |
|
||||
animation: paomadeng linear; |
|
||||
} |
|
||||
|
|
||||
.animate-infinite { |
|
||||
animation: paomadeng-infinite linear infinite; |
|
||||
} |
|
||||
|
|
||||
@keyframes paomadeng { |
|
||||
to { |
|
||||
transform: translate3d(-100%, 0, 0); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@keyframes paomadeng-infinite { |
|
||||
to { |
|
||||
transform: translate3d(-100%, 0, 0); |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,198 +0,0 @@ |
|||||
<template> |
|
||||
<Dialog @close="back"> |
|
||||
<div class="content"> |
|
||||
<div class="carousel"> |
|
||||
<EffectFade :list="[activity.fileUrl, activity.fileUrl]"> |
|
||||
<template v-slot="{ item }"> |
|
||||
<div class="banner-wrapper"> |
|
||||
<img :src="config.sourceUrl + item" alt="" class="banner" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
</EffectFade> |
|
||||
</div> |
|
||||
<div class="intro-content"> |
|
||||
<h1 class="name pos">{{ switchLanguage(activity, 'activityName') }}</h1> |
|
||||
<ScrollView class="content-scroll" scrollbar> |
|
||||
<p class="intro pos">{{ switchLanguage(activity, 'activityContent') }}</p> |
|
||||
</ScrollView> |
|
||||
<div class="time-wrapper pos"> |
|
||||
<p class="common first">{{ $t('ActivityTime') }}：{{ activity.startDate }} {{ $t('zhi') + activity.endDate }}</p> |
|
||||
<p class="common">{{ $t('activityAddress') }}：{{ switchLanguage(activity, 'activityAddress') }}</p> |
|
||||
</div> |
|
||||
<Go class="detail-go" v-if="activity.shopId || activity.point" @click="handleActivity" /> |
|
||||
</div> |
|
||||
<Button class="btn" @click="back" /> |
|
||||
<ThumbQRCode class="thumbs" :title="$t('yuyue')" /> |
|
||||
</div> |
|
||||
</Dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { useRouter } from 'vue-router' |
|
||||
import { useStore } from '@/store/root' |
|
||||
import Dialog from '@/layouts/Dialog.vue' |
|
||||
import Button from '@/base/Button/Button.vue' |
|
||||
import EffectFade from '@/components/EffectFade/EffectFade.vue' |
|
||||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
||||
import Go from '@/base/Go/Go.vue' |
|
||||
import ThumbQRCode from '@/base/ThumbQRCode/ThumbQRCode.vue' |
|
||||
import Shop from '@/utils/Class/Shop' |
|
||||
|
|
||||
const MALL_TYPE = 1 //商场活动 |
|
||||
const BRAND_TYPE = 2 //品牌活动 |
|
||||
const MEMBER_TYPE = 3 //会员活动 |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
activity: Object, |
|
||||
config: Object |
|
||||
}) |
|
||||
|
|
||||
const router = useRouter() |
|
||||
const store = useStore() |
|
||||
|
|
||||
function handleActivity() { |
|
||||
let shop |
|
||||
if (props.activity.activityType === BRAND_TYPE) { |
|
||||
shop = store.shopList.find(item => item.shopId === props.activity.shopId) |
|
||||
} |
|
||||
if (props.activity.activityType === MALL_TYPE || props.activity.activityType === MEMBER_TYPE) { |
|
||||
const { floorOrder, floor, activityName, fileUrl, point } = props.activity |
|
||||
shop = new Shop(activityName, floorOrder, floor, fileUrl, point) |
|
||||
} |
|
||||
|
|
||||
if (!shop) { |
|
||||
return |
|
||||
} |
|
||||
store.SET_SHOP(shop) |
|
||||
router.push('/nav') |
|
||||
} |
|
||||
|
|
||||
const emits = defineEmits(['close']) |
|
||||
function back() { |
|
||||
emits('close') |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.pos { |
|
||||
position: relative; |
|
||||
z-index: 5; |
|
||||
} |
|
||||
.content { |
|
||||
position: relative; |
|
||||
width: 700px; |
|
||||
margin: 0 auto; |
|
||||
margin-top: 350px; |
|
||||
z-index: 2; |
|
||||
.thumbs { |
|
||||
position: absolute; |
|
||||
top: 120px; |
|
||||
right: -156px; |
|
||||
} |
|
||||
&::before { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
top: 373px; |
|
||||
left: 0; |
|
||||
z-index: 2; |
|
||||
width: 700px; |
|
||||
height: 420px; |
|
||||
background: #ffffff; |
|
||||
border-radius: 12px; |
|
||||
} |
|
||||
.intro-content { |
|
||||
position: relative; |
|
||||
height: 420px; |
|
||||
.name { |
|
||||
padding: 28px 56px 32px 56px; |
|
||||
font-weight: 700; |
|
||||
font-size: 24px; |
|
||||
color: rgba(0, 0, 0, 0.8); |
|
||||
} |
|
||||
} |
|
||||
.common { |
|
||||
font-weight: 700; |
|
||||
font-size: 14px; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
margin-left: 56px; |
|
||||
&.first { |
|
||||
padding-bottom: 8px; |
|
||||
} |
|
||||
} |
|
||||
.content-scroll { |
|
||||
position: relative; |
|
||||
height: 140px; |
|
||||
overflow: hidden; |
|
||||
margin: 0 34px 64px 56px; |
|
||||
padding-right: 16px; |
|
||||
:deep(.bscroll-vertical-scrollbar) { |
|
||||
width: 6px !important; |
|
||||
background: rgba(0, 0, 0, 0.02) !important; |
|
||||
border-radius: 6px !important; |
|
||||
opacity: 1 !important; |
|
||||
.bscroll-indicator { |
|
||||
width: 6px !important; |
|
||||
background: rgba(0, 0, 0, 0.1) !important; |
|
||||
border-radius: 6px !important; |
|
||||
border: none !important; |
|
||||
} |
|
||||
} |
|
||||
.intro { |
|
||||
font-weight: 400; |
|
||||
font-size: 14px; |
|
||||
line-height: 200%; |
|
||||
text-align: justify; |
|
||||
color: rgba(0, 0, 0, 0.6); |
|
||||
margin-bottom: 64px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.detail-go { |
|
||||
bottom: -70px; |
|
||||
} |
|
||||
|
|
||||
.carousel { |
|
||||
width: 700px; |
|
||||
height: 393px; |
|
||||
|
|
||||
:deep(.swiper) { |
|
||||
overflow: visible !important; |
|
||||
z-index: auto; |
|
||||
} |
|
||||
:deep(.swiper-pagination) { |
|
||||
right: 32px; |
|
||||
left: auto; |
|
||||
bottom: 5px; |
|
||||
width: auto; |
|
||||
} |
|
||||
:deep(.swiper-pagination-bullet) { |
|
||||
width: 16px !important; |
|
||||
height: 3px !important; |
|
||||
background: rgba(0, 0, 0, 0.1); |
|
||||
border-radius: 3px !important; |
|
||||
opacity: inherit !important; |
|
||||
&.swiper-pagination-bullet-active { |
|
||||
background: #f1b33e; |
|
||||
border-radius: 3px !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.banner-wrapper { |
|
||||
width: 700px; |
|
||||
height: 393px; |
|
||||
border-radius: 12px; |
|
||||
.banner { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: cover; |
|
||||
border-radius: 12px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.btn { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: -120px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||