Skip to content

Q
quantum-blocks-h5
Commit 8957ac22 authored by shida.liu's avatar shida.liu
Browse files
Options

feat: 鸿蒙购物车跳h5,分享暂时隐藏;

parent 5d41b663
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 249 additions and 164 deletions
app/web/page/activity/view/activity/index.vue
View file @ 8957ac22
<template> <template>
<div class="pageContent"> <div class="pageContent">
<div class="activity" :class="{hasBottomNav: navigatorConfig}" :style="transformStyle(pageData.commonStyle)"> <div
class="activity"
:class="{ hasBottomNav: navigatorConfig }"
:style="transformStyle(pageData.commonStyle)"
>
<template v-if="!noPageData && tenantIdCorrect"> <template v-if="!noPageData && tenantIdCorrect">
<div class="layout"> <div class="layout">
<template v-for="(item, index) in pageData.elements"> <template v-for="(item, index) in pageData.elements">
<div :style="transformStyle(item.commonStyle, item.point, item.name)" <div
:key="fixGridKey(item)" :style="transformStyle(item.commonStyle, item.point, item.name)"
:id="`item_${item.id}`" :key="fixGridKey(item)"
@click="dot(item.title)" :id="`item_${item.id}`"
@touchend="disTouch" @click="dot(item.title)"
@touchend="disTouch"
> >
<component :data-index="index" :id="item.id" :containerIndex="index" :component-data="item" :childItem="item" :is="item.name" :sa-info="getSaInfo(item)" v-bind="item.props"></component> <component
</div> :data-index="index"
:id="item.id"
:containerIndex="index"
:component-data="item"
:childItem="item"
:is="item.name"
:sa-info="getSaInfo(item)"
v-bind="item.props"
></component>
</div>
</template> </template>
<div <div
v-if="pageData.props.showPageBottomTip" v-if="pageData.props.showPageBottomTip"
:id="bottomInfo.i + pageData.elements.length" :id="bottomInfo.i + pageData.elements.length"
...@@ -22,109 +36,128 @@ ...@@ -22,109 +36,128 @@
<page-bottom-tip /> <page-bottom-tip />
</div> </div>
</div> </div>
<back-top v-if="showBackTop" :show-back-top="showBackTop" ref="backTop" /> <back-top
<invalid-notice v-model="pageInvalid" @toOtherActivity="toOtherActivity"/> v-if="showBackTop"
:show-back-top="showBackTop"
ref="backTop"
/>
<invalid-notice
v-model="pageInvalid"
@toOtherActivity="toOtherActivity"
/>
<coupon-modal :modal-data="couponModalData" v-model="showCouponModal" /> <coupon-modal :modal-data="couponModalData" v-model="showCouponModal" />
</template> </template>
<empty-state v-else /> <empty-state v-else />
</div> </div>
<!-- 底部导航 --> <!-- 底部导航 -->
<div v-if="navigatorConfig" class="bottomNav" :style="computedNavContainerStyle(navigatorConfig)"> <div
v-if="navigatorConfig"
class="bottomNav"
:style="computedNavContainerStyle(navigatorConfig)"
>
<div <div
class="navItem" class="navItem"
:class="{pic: item.type == 2, current: +navIndex === index}" :class="{ pic: item.type == 2, current: +navIndex === index }"
v-for="(item, index) in navigatorConfig.navigatorData" v-for="(item, index) in navigatorConfig.navigatorData"
:key="index" :key="index"
@click.stop="handleNavUrl(item, +navIndex === index)" @click.stop="handleNavUrl(item, +navIndex === index)"
> >
<img class="icon" :src="+navIndex === index ? item.selectIcon : item.icon" alt=""> <img
<span v-if="item.type == 1 && item.name" class="text" :style="computedNavTextStyle(item, +navIndex === index)">{{item.name}}</span> class="icon"
:src="+navIndex === index ? item.selectIcon : item.icon"
alt=""
/>
<span
v-if="item.type == 1 && item.name"
class="text"
:style="computedNavTextStyle(item, +navIndex === index)"
>{{ item.name }}</span
>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" src="./index.ts"></script> <script lang="ts" src="./index.ts"></script>
<style lang="less" scoped> <style lang="less" scoped>
@deep: ~'>>>'; @deep: ~">>>";
.pageContent{ .pageContent {
width: 100%;
height: 100%;
position: relative;
.bottomNav {
box-sizing: content-box;
width: 100%; width: 100%;
height: 100%; position: fixed;
position: relative; bottom: 0;
.bottomNav{ left: 0;
box-sizing: content-box; z-index: 899;
width: 100%; padding-top: 0;
position: fixed; padding-left: 4px;
bottom: 0; padding-right: 4px;
left: 0; padding-bottom: constant(safe-area-inset-bottom);
z-index: 899; padding-bottom: env(safe-area-inset-bottom);
padding-top: 0; display: flex;
padding-left: 4px; justify-content: space-around;
padding-right: 4px; .navItem {
padding-bottom: constant(safe-area-inset-bottom); width: 62px;
padding-bottom: env(safe-area-inset-bottom); height: 55px;
display: flex; display: flex;
justify-content: space-around; justify-content: center;
.navItem{ flex-direction: column;
width: 62px; align-items: center;
height: 55px; &.pic {
display: flex; .icon {
justify-content: center; max-width: 40px;
flex-direction: column; max-height: 40px;
align-items: center;
&.pic{
.icon{
max-width: 40px;
max-height: 40px;
}
}
.icon{
max-width: 35px;
max-height: 35px;
}
.text{
margin-top: 3px;
text-align: center;
font-size: 10px;
} }
} }
.icon {
max-width: 35px;
max-height: 35px;
}
.text {
margin-top: 3px;
text-align: center;
font-size: 10px;
}
} }
} }
.activity { }
width: 100%; .activity {
min-height: 100%; width: 100%;
background-color: rgb(244, 244, 244); min-height: 100%;
&.hasBottomNav{ background-color: rgb(244, 244, 244);
padding-bottom: calc(constant(safe-area-inset-bottom) + 55px); &.hasBottomNav {
padding-bottom: calc(env(safe-area-inset-bottom) + 55px); padding-bottom: calc(constant(safe-area-inset-bottom) + 55px);
} padding-bottom: calc(env(safe-area-inset-bottom) + 55px);
// box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); }
// overflow-x: hidden; // box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
// overflow-y: scroll; // overflow-x: hidden;
/deep/ .vue-grid-layout { // overflow-y: scroll;
padding-bottom: 40px; /deep/ .vue-grid-layout {
box-sizing: content-box; padding-bottom: 40px;
// transform: translateY(-10px); box-sizing: content-box;
transition-property: none; // transform: translateY(-10px);
transition-property: none;
.vue-grid-item { .vue-grid-item {
transition-property: none; transition-property: none;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
/* 不可设置溢出隐藏，tabs导航会出问题 */ /* 不可设置溢出隐藏，tabs导航会出问题 */
overflow: hidden; overflow: hidden;
& > *:first-child { & > *:first-child {
height: 100%; height: 100%;
}
} }
} }
} }
}
.del_transform { .del_transform {
overflow: visible !important; overflow: visible !important;
transform: none !important; transform: none !important;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment