修改页面显示问题
于肖磊
parent
7f93de11eb
commit
2cda176efd
|
|
@ -1,50 +1,4 @@
|
|||
/*
|
||||
* 放大缩小
|
||||
*/
|
||||
.scale-up-center {
|
||||
-webkit-animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
||||
animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
||||
}
|
||||
|
||||
.scale-up-center-infinite {
|
||||
-webkit-animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
|
||||
animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
|
||||
}
|
||||
|
||||
@keyframes scale-up-center {
|
||||
0% {
|
||||
-webkit-transform: scale(0.5);
|
||||
transform: scale(0.5);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 中心缩小
|
||||
*/
|
||||
.scale-out-center {
|
||||
-webkit-animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
|
||||
animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
|
||||
}
|
||||
.scale-out-center-infinite {
|
||||
-webkit-animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
|
||||
animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
|
||||
}
|
||||
|
||||
@keyframes scale-out-center {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 垂直放大
|
||||
*/
|
||||
|
|
@ -84,8 +38,8 @@
|
|||
}
|
||||
}
|
||||
/*
|
||||
* 交替垂直
|
||||
*/放大
|
||||
* 交替垂直放大
|
||||
*/
|
||||
.scale-up-ver-bottom-alternate {
|
||||
-webkit-animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
|
||||
animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
|
||||
|
|
@ -561,8 +515,8 @@
|
|||
}
|
||||
|
||||
/*
|
||||
* 在fwd
|
||||
*/中心滑动
|
||||
* 在fwd中心滑动
|
||||
*/
|
||||
.slide-in-fwd-center {
|
||||
-webkit-animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
|
|
|
|||
|
|
@ -19,29 +19,29 @@
|
|||
<view v-for="(item, index) in diy_data" :key="index" :style="'margin-top:' + (['float-window'].includes(item.key) ? '0rpx;z-index:1' : -(item.com_data.style.common_style.floating_up * 2 || 0) + 'rpx;z-index:' + (!isEmpty(item.com_data.style.common_style.module_z_index) ? item.com_data.style.common_style.module_z_index : 0))">
|
||||
<!-- 基础组件 -->
|
||||
<template v-if="item.is_enable == '1'">
|
||||
<componentDiySearch v-if="item.key == 'search'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiySearch>
|
||||
<componentDiyCarousel v-else-if="item.key == 'carousel'" :propOuterContainerPadding="outer_container_padding" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data" @onVideoPlay="video_play"></componentDiyCarousel>
|
||||
<componentDiyNavGroup v-else-if="item.key == 'nav-group'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyNavGroup>
|
||||
<componentDiyUserInfo v-else-if="item.key == 'user-info'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyUserInfo>
|
||||
<componentDiyNotice v-else-if="item.key == 'notice'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyNotice>
|
||||
<componentDiyVideo v-else-if="item.key == 'video'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyVideo>
|
||||
<componentDiyArticleList v-else-if="item.key == 'article-list'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyArticleList>
|
||||
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data" :propTop="(!is_immersion_model ? temp_sticky_top : 0) + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? (is_search_alone_row ? 66 + data_alone_row_space : 33) : 0"></componentDiyArticleTabs>
|
||||
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :ref="'diy_goods_buy' + index" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propDiyIndex="index" :propKey="item.id + index" :propValue="item.com_data" :propTop="(!is_immersion_model ? temp_sticky_top : 0) + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? (is_search_alone_row ? 66 + data_alone_row_space : 33) : 0" @goods_buy_event="goods_buy_event"></componentDiyGoodsTabs>
|
||||
<componentDiyGoodsList v-else-if="item.key == 'goods-list'" :ref="'diy_goods_buy' + index" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propDiyIndex="index" :propKey="item.id + index" :propValue="item.com_data" @goods_buy_event="goods_buy_event"></componentDiyGoodsList>
|
||||
<componentDiyDataMagic v-else-if="item.key == 'data-magic'" :propOuterContainerPadding="outer_container_padding" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyDataMagic>
|
||||
<componentDiyCustom v-else-if="item.key == 'custom'" :propOuterContainerPadding="outer_container_padding" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyCustom>
|
||||
<componentDiyImgMagic v-else-if="item.key == 'img-magic'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyImgMagic>
|
||||
<componentDiyHotZone v-else-if="item.key == 'hot-zone'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyHotZone>
|
||||
<componentDiySeckill v-else-if="item.key == 'seckill'" :propOuterContainerPadding="outer_container_padding" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiySeckill>
|
||||
<componentDiySearch v-if="item.key == 'search'" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiySearch>
|
||||
<componentDiyCarousel v-else-if="item.key == 'carousel'" :propOuterContainerPadding="outer_container_padding" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data" @onVideoPlay="video_play"></componentDiyCarousel>
|
||||
<componentDiyNavGroup v-else-if="item.key == 'nav-group'" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyNavGroup>
|
||||
<componentDiyUserInfo v-else-if="item.key == 'user-info'" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyUserInfo>
|
||||
<componentDiyNotice v-else-if="item.key == 'notice'" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyNotice>
|
||||
<componentDiyVideo v-else-if="item.key == 'video'" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyVideo>
|
||||
<componentDiyArticleList v-else-if="item.key == 'article-list'" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyArticleList>
|
||||
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data" :propTop="(!is_immersion_model ? temp_sticky_top : 0) + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? (is_search_alone_row ? 66 + data_alone_row_space : 33) : 0"></componentDiyArticleTabs>
|
||||
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :ref="'diy_goods_buy' + index" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propDiyIndex="index" :propKey="item.id + index" :propValue="item.com_data" :propTop="(!is_immersion_model ? temp_sticky_top : 0) + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? (is_search_alone_row ? 66 + data_alone_row_space : 33) : 0" @goods_buy_event="goods_buy_event"></componentDiyGoodsTabs>
|
||||
<componentDiyGoodsList v-else-if="item.key == 'goods-list'" :ref="'diy_goods_buy' + index" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propDiyIndex="index" :propKey="item.id + index" :propValue="item.com_data" @goods_buy_event="goods_buy_event"></componentDiyGoodsList>
|
||||
<componentDiyDataMagic v-else-if="item.key == 'data-magic'" :propOuterContainerPadding="outer_container_padding" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyDataMagic>
|
||||
<componentDiyCustom v-else-if="item.key == 'custom'" :propOuterContainerPadding="outer_container_padding" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyCustom>
|
||||
<componentDiyImgMagic v-else-if="item.key == 'img-magic'" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyImgMagic>
|
||||
<componentDiyHotZone v-else-if="item.key == 'hot-zone'" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyHotZone>
|
||||
<componentDiySeckill v-else-if="item.key == 'seckill'" :propOuterContainerPadding="outer_container_padding" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiySeckill>
|
||||
<!-- 插件 -->
|
||||
<componentDiyCoupon v-else-if="item.key == 'coupon'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyCoupon>
|
||||
<componentDiyCoupon v-else-if="item.key == 'coupon'" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyCoupon>
|
||||
<!-- 工具组件 -->
|
||||
<componentDiyFloatWindow v-else-if="item.key == 'float-window'" :propKey="item.id + index" :propValue="item.com_data"></componentDiyFloatWindow>
|
||||
<componentDiyTitle v-else-if="item.key == 'title'" :propKey="item.id + index" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propValue="item.com_data"></componentDiyTitle>
|
||||
<componentDiyAuxiliaryLine v-else-if="item.key == 'row-line'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyAuxiliaryLine>
|
||||
<componentDiyRichText v-else-if="item.key == 'rich-text'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyRichText>
|
||||
<componentDiyAuxiliaryBlank v-else-if="item.key == 'auxiliary-blank'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyAuxiliaryBlank>
|
||||
<componentDiyTitle v-else-if="item.key == 'title'" :propKey="item.id + index" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propValue="item.com_data"></componentDiyTitle>
|
||||
<componentDiyAuxiliaryLine v-else-if="item.key == 'row-line'" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyAuxiliaryLine>
|
||||
<componentDiyRichText v-else-if="item.key == 'rich-text'" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyRichText>
|
||||
<componentDiyAuxiliaryBlank v-else-if="item.key == 'auxiliary-blank'" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyAuxiliaryBlank>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
<!-- <view v-if="is_show('4')" class="pl-5" :style="score_style">评分0</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="form.is_shop_show == '1'" class="pr" :data-index="index" @tap.stop="goods_button_event">
|
||||
<view v-if="(form.is_shop_show == '1' && form.shop_button_effect == '1' && item.is_error == 0) || (form.is_shop_show == '1' && form.shop_button_effect == '0')" class="pr" :data-index="index" @tap.stop="goods_button_event">
|
||||
<block v-if="form.shop_type == 'text'">
|
||||
<view class="plr-11 padding-vertical-xs round" :style="button_style + ('color:' + new_style.shop_button_text_color)">{{ form.shop_button_text }}</view>
|
||||
</block>
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="form.is_shop_show == '1'" class="pr" :data-index="index" @tap.stop="goods_button_event">
|
||||
<view v-if="(form.is_shop_show == '1' && form.shop_button_effect == '1' && item.is_error == 0) || (form.is_shop_show == '1' && form.shop_button_effect == '0')" class="pr" :data-index="index" @tap.stop="goods_button_event">
|
||||
<block v-if="form.shop_type == 'text'">
|
||||
<view class="plr-11 padding-vertical-xs round" :style="button_style + ('color:' + new_style.shop_button_text_color)">{{ form.shop_button_text }}</view>
|
||||
</block>
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="form.is_shop_show == '1'" class="pr" :data-index="index1" :data-split-index="index" @tap.stop="goods_button_event">
|
||||
<view v-if="(form.is_shop_show == '1' && form.shop_button_effect == '1' && item.is_error == 0) || (form.is_shop_show == '1' && form.shop_button_effect == '0')" class="pr" :data-index="index1" :data-split-index="index" @tap.stop="goods_button_event">
|
||||
<block v-if="form.shop_type == 'text'">
|
||||
<view class="plr-11 padding-vertical-xs round" :style="button_style + ('color:' + new_style.shop_button_text_color)">{{ form.shop_button_text }}</view>
|
||||
</block>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<view :style="shop_margin_top">
|
||||
<view :style="shop_container">
|
||||
<view :style="shop_img_container">
|
||||
<componentGoodsList ref="diy_goods_list" :propKey="diy_key" :propIndex="propDiyIndex" :propValue="goods_tabs" :propIsCommonStyle="false" @goods_buy_event="goods_buy_event"></componentGoodsList>
|
||||
<componentGoodsList ref="diy_goods_list" :propKey="diy_key" :propDiyIndex="propDiyIndex" :propValue="goods_tabs" :propIsCommonStyle="false" @goods_buy_event="goods_buy_event"></componentGoodsList>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<model-panel :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :propIsCustomGroup="propIsCustomGroup" :propCustomGroupFieldId="propCustomGroupFieldId" @url_event="url_event"></model-panel>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'custom-group'">
|
||||
<model-custom-group :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propDataWidth="item.com_data.com_width" :propDataHeight="item.com_data.custom_height" :propSourceList="propSourceList" :propGroupSourceList="propGroupSourceList" :propIsCustom="propIsCustom"></model-custom-group>
|
||||
<model-custom-group :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propDataWidth="item.com_data.com_width" :propDataHeight="item.com_data.com_height" :propSourceList="propSourceList" :propGroupSourceList="propGroupSourceList" :propIsCustom="propIsCustom"></model-custom-group>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -8,29 +8,40 @@
|
|||
<scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-' + active_index" class="wh-auto">
|
||||
<view class="flex-row" :style="'height:' + tabs_height">
|
||||
<view v-for="(item, index) in tabs_list" :key="index" :id="'one-nav-item-' + index" class="item nowrap flex-col jc-c align-c gap-4" :class="tabs_theme + (index == active_index ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" :style="'flex:0 0 auto;margin-left:' + (index == 0 ? '0' : tabs_spacing) + 'rpx;margin-right:' + (index - 1 == tabs_list ? '0' : tabs_spacing) + 'rpx;'" :data-index="index" @tap="handle_event">
|
||||
<view class="nowrap flex-col jc-c align-c" :style="tabs_sign_spacing">
|
||||
<view v-if="tabs_theme_index == '4'" :class="'img oh ' + (!isEmpty(item.img) ? 'img-no-empty' : '')" :style="tabs_theme_style.tabs_top_img">
|
||||
<view class="nowrap ma-auto">
|
||||
<view v-if="tabs_theme_index == '4'" :class="'img oh pr z-i-deep ' + (!isEmpty(item.img) ? 'img-no-empty' : '')" :style="tabs_theme_style.tabs_top_img">
|
||||
<imageEmpty :propImageSrc="item.img[0]" propImgFit="aspectFit" propErrorStyle="width: 20rpx;height: 20rpx;"></imageEmpty>
|
||||
<!-- <image :src="item.img[0].url" class="img" mode="aspectFit" /> -->
|
||||
</view>
|
||||
<template v-if="item.tabs_type == '1'">
|
||||
<template v-if="!isEmpty(item.tabs_icon)">
|
||||
<view class="title" :style="index == active_index ? ['2', '4'].includes(tabs_theme_index) ? tabs_check : `` : '' + tabs_padding_bottom">
|
||||
<view :class="tabs_theme_index == '4' ? 'title pr z-i' : 'title pr z-i-deep'" :style="(tabs_theme_index == '4' ? tabs_sign_spacing : '') + (index == active_index ? (['2', '4'].includes(tabs_theme_index) ? tabs_check : '') : '' + tabs_padding_bottom)">
|
||||
<iconfont :name="'icon-' + item.tabs_icon" :color="index == active_index ? tabs_icon_checked_color : tabs_icon_color" propContainerDisplay="flex" :size="index == active_index ? tabs_icon_checked_size : tabs_icon_size"></iconfont>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="title" :style="index == active_index ? new_style.is_tabs_img_background == '1' && ['2', '4'].includes(tabs_theme_index) ? tabs_check : `` : tabs_padding_bottom">
|
||||
<view :class="tabs_theme_index == '4' ? 'title pr z-i' : 'title pr z-i-deep'" :style="(tabs_theme_index == '4' ? tabs_sign_spacing : '') + index == active_index ? new_style.is_tabs_img_background == '1' && ['2', '4'].includes(tabs_theme_index) ? tabs_check : '' : tabs_padding_bottom">
|
||||
<imageEmpty :propImageSrc="item.tabs_img[0]" :propStyle="index == active_index ? tabs_theme_style.tabs_img_checked : tabs_theme_style.tabs_img" propImgFit="heightFix" propErrorStyle="width: 40rpx;height: 40rpx;"></imageEmpty>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="title" :style="index == active_index ? ['2', '4'].includes(tabs_theme_index) ? tabs_theme_style.tabs_title_checked + tabs_check : tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title + tabs_padding_bottom">{{ item.title }}</view>
|
||||
<view :class="tabs_theme_index == '4' ? 'title pr z-i' : 'title pr z-i-deep'" :style="(tabs_theme_index == '4' ? tabs_sign_spacing : '') + (index == active_index ? ['2', '4'].includes(tabs_theme_index) ? tabs_theme_style.tabs_title_checked + tabs_check : tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title + tabs_padding_bottom)">{{ item.title }}</view>
|
||||
</template>
|
||||
<view class="desc" :style="tabs_theme_index == '1' && index == active_index ? tabs_check : ''">{{ item.desc }}</view>
|
||||
<iconfont v-if="tabs_theme_index == '3' && index == active_index" name="icon-checked-smooth" class="icon" :style="tabs_theme_index == '3' && index == active_index ? icon_tabs_check : ''" propContainerDisplay="flex" size="40rpx"></iconfont>
|
||||
<view class="bottom_line" :class="tabs_bottom_line_theme" :style="tabs_check"></view>
|
||||
<view class="desc pr z-i wh-auto" :style="tabs_sign_spacing + (tabs_theme_index == '1' && index == active_index ? tabs_check : '')">{{ item.desc }}</view>
|
||||
<template v-if="tabs_theme_index == '3' && index == active_index">
|
||||
<template v-if="!isEmpty(form.tabs_adorn_icon)">
|
||||
<view class="icon pr z-i wh-auto flex-row jc-c align-c" :style="tabs_sign_spacing">
|
||||
<iconfont :name="'icon-' + form.tabs_adorn_icon" :style="icon_tabs_check" propContainerDisplay="flex" size="40rpx"></iconfont>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="pr z-i wh-auto flex-row jc-c align-c ma-auto" :style="tabs_sign_spacing">
|
||||
<imageEmpty :propImageSrc="form.tabs_adorn_img[0]" :propStyle="tabs_adorn_img_style" propImgFit="aspectFit" propErrorStyle="width: 20rpx;height: 20rpx;"></imageEmpty>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
<view class="bottom_line z-i" :class="tabs_bottom_line_theme" :style="tabs_check + tabs_sign_spacing"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -132,6 +143,7 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
new_style: {},
|
||||
tabs_theme_index: '',
|
||||
tabs_theme: '',
|
||||
|
|
@ -164,6 +176,7 @@
|
|||
tabs_bottom_line_theme: '',
|
||||
tabs_sticky: '',
|
||||
tabs_height: '100%',
|
||||
tabs_adorn_img_style: '',
|
||||
// 默认数据
|
||||
old_radius: { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 },
|
||||
old_padding: { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 },
|
||||
|
|
@ -241,9 +254,10 @@
|
|||
const height = Math.max(tabs_size_checked + default_height, tabs_size, icon_height, is_img > -1 ? (tabs_img_height + default_height) : '');
|
||||
// 参数设置
|
||||
this.setData({
|
||||
form: new_content,
|
||||
new_style: new_style,
|
||||
tabs_spacing: Number(new_style.tabs_spacing),
|
||||
tabs_sign_spacing: !isEmpty(new_style.tabs_sign_spacing) ? `row-gap:${new_style.tabs_sign_spacing * 2}rpx;` : 'row-gap:8rpx;',
|
||||
tabs_sign_spacing: !isEmpty(new_style.tabs_sign_spacing) ? `margin-top: ${new_style.tabs_sign_spacing * 2}rpx;` : 'margin-top: 8rpx;',
|
||||
tabs_list: new_content.tabs_list,
|
||||
tabs_padding_bottom: this.get_padding_bottom(new_content, new_style),
|
||||
// 选项卡主题
|
||||
|
|
@ -261,8 +275,12 @@
|
|||
tabs_bottom_line_theme: new_style.tabs_one_theme == '1' ? 'tabs-bottom-line-theme' : '',
|
||||
tabs_theme_1_style: new_style.tabs_one_theme == '1',
|
||||
tabs_height: ['2', '4'].includes(new_content.tabs_theme) ? height * 2 + 'rpx' : '100%;',
|
||||
tabs_adorn_img_style: this.get_tabs_adorn_img_style(new_style),
|
||||
});
|
||||
},
|
||||
get_tabs_adorn_img_style(new_style) {
|
||||
return radius_computer(new_style?.tabs_adorn_img_radius || this.old_radius) + `height: ${(new_style?.tabs_adorn_img_height || 10) * 2}rpx;${ new_style.is_tabs_adorn_img_background == '1' ? tabs_check.value : ''}`;
|
||||
},
|
||||
// 获取选项卡主题
|
||||
get_tabs_theme(data) {
|
||||
let arr = {
|
||||
|
|
@ -283,7 +301,7 @@
|
|||
bottom = 3;
|
||||
}
|
||||
} else if (form.tabs_theme == '3') {
|
||||
bottom = 10;
|
||||
bottom = !isEmpty(form.tabs_adorn_icon) ? new_style.tabs_adorn_icon_size : new_style.tabs_adorn_img_height;
|
||||
}
|
||||
const tabs_sign_spacing = !isEmpty(new_style.tabs_sign_spacing) ? new_style.tabs_sign_spacing : 4;
|
||||
return ['1', '2', '4'].includes(form.tabs_theme) ? '' : `padding-bottom: ${(tabs_sign_spacing + bottom) * 2 }rpx;`;
|
||||
|
|
@ -369,6 +387,7 @@
|
|||
border-radius: 100%;
|
||||
border: 2rpx solid transparent;
|
||||
display: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
&.tabs-style-1 {
|
||||
&.active {
|
||||
|
|
@ -395,7 +414,8 @@
|
|||
.desc {
|
||||
border-radius: 40rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.tabs-style-3 {
|
||||
|
|
@ -404,6 +424,7 @@
|
|||
// background: #ff2222;
|
||||
border-radius: 40rpx;
|
||||
padding: 6px 12px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -428,6 +449,7 @@
|
|||
// background: #ff5e5e;
|
||||
border-radius: 40rpx;
|
||||
padding: 2px 7px;
|
||||
box-sizing: border-box;
|
||||
// color: #fff;
|
||||
}
|
||||
.img {
|
||||
|
|
@ -459,4 +481,7 @@
|
|||
.pb-0 {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.ma-auto {
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -146,10 +146,9 @@
|
|||
if (!Array.isArray(tabs_bg) || tabs_bg.length === 0 || !tabs_bg[0] || !tabs_bg[0].color) {
|
||||
new_tabs_background = 'background:#fff;';
|
||||
}
|
||||
|
||||
this.setData({
|
||||
tabs_data: new_tabs_data,
|
||||
style_container: this.propIsCommon ? common_styles_computer(new_style.common_style) + new_tabs_background : new_content.tabs_top_up == '1' ? gradient_computer(new_style.common_style) + margin_computer(this.propSpacingCommonStyle) + new_tabs_background : '', // 如果是选项卡轮播，不需要走默认样式
|
||||
style_container: this.propIsCommon ? new_tabs_background + common_styles_computer(new_style.common_style) : new_content.tabs_top_up == '1' ? new_tabs_background + gradient_computer(new_style.common_style) + margin_computer(this.propSpacingCommonStyle) : '', // 如果是选项卡轮播，不需要走默认样式
|
||||
style_img_container: this.propIsCommon ? common_img_computer(new_style.common_style, this.propIndex) : new_content.tabs_top_up == '1' ? background_computer(new_style.common_style) + padding_computer(this.propSpacingCommonStyle, 1, true) + 'box-sizing: border-box;' : '', // 如果是选项卡轮播，不需要走默认样式
|
||||
tabs_top_style: new_tabs_top_style,
|
||||
// 判断是否置顶
|
||||
|
|
|
|||
Loading…
Reference in New Issue