sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改选项卡和内容的间距

master
于肖磊 2024-12-26 17:27:05 +08:00
parent e46f04034b
commit 7ff5f4ad9e
3 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/diy/article-tabs.vue
View File

@ -3,9 +3,11 @@
<view class="article-tabs ou" :class="'article-tabs-' + propKey" :style="style_container"> <view class="article-tabs ou" :class="'article-tabs-' + propKey" :style="style_container">
<view class="ou" :style="style_img_container"> <view class="ou" :style="style_img_container">
<componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView> <componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
<view :style="article_container"> <view :style="article_margin_top">
<view :style="article_img_container"> <view :style="article_container">
<componentDiyArticleList :propKey="diy_key" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList> <view :style="article_img_container">
<componentDiyArticleList :propKey="diy_key" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -75,6 +77,7 @@
custom_nav_height: 33, custom_nav_height: 33,
diy_key: '', diy_key: '',
// 选项卡背景设置 // 选项卡背景设置
article_margin_top: '',
tabs_container: '', tabs_container: '',
tabs_img_container: '', tabs_img_container: '',
// 商品区域背景设置 // 商品区域背景设置
@ -193,8 +196,9 @@
top_up: new_content.tabs_top_up, top_up: new_content.tabs_top_up,
article_tabs: new_data, article_tabs: new_data,
style_container: common_styles_computer(common_style), style_container: common_styles_computer(common_style),
style_img_container: common_img_computer(common_style, this.propIndex) + 'gap:' + (new_style?.shop_content_spacing || 0) * 2 + 'rpx', style_img_container: common_img_computer(common_style, this.propIndex),
tabs_style: new_tabs_style, tabs_style: new_tabs_style,
article_margin_top: 'margin-top:' + (new_style?.article_content_spacing || 0) * 2 + 'rpx',
tabs_container: gradient_computer(tabs_data) + radius_computer(tabs_radius) + 'overflow: hidden;', tabs_container: gradient_computer(tabs_data) + radius_computer(tabs_radius) + 'overflow: hidden;',
tabs_img_container: background_computer(tabs_data) + padding_computer(tabs_padding) + 'box-sizing: border-box;overflow: hidden;', tabs_img_container: background_computer(tabs_data) + padding_computer(tabs_padding) + 'box-sizing: border-box;overflow: hidden;',
article_container: gradient_computer(article_content_data) + margin_computer(article_content_margin) + radius_computer(article_content_radius) + 'overflow: hidden;', article_container: gradient_computer(article_content_data) + margin_computer(article_content_margin) + radius_computer(article_content_radius) + 'overflow: hidden;',

12
components/diy/goods-tabs.vue
View File

@ -2,9 +2,11 @@
<view class="goods-tabs ou" :class="'goods-tabs-' + propKey" :style="style_container"> <view class="goods-tabs ou" :class="'goods-tabs-' + propKey" :style="style_container">
<view class="ou" :style="style_img_container"> <view class="ou" :style="style_img_container">
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView> <componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
<view :style="shop_container"> <view :style="shop_margin_top">
<view :style="shop_img_container"> <view :style="shop_container">
<componentGoodsList ref="diy_goods_list" :propKey="diy_key" :propIndex="propDiyIndex" :propValue="goods_tabs" :propIsCommonStyle="false" @goods_buy_event="goods_buy_event"></componentGoodsList> <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>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -77,6 +79,7 @@
tabs_container: '', tabs_container: '',
tabs_img_container: '', tabs_img_container: '',
// 商品区域背景设置 // 商品区域背景设置
shop_margin_top: '',
shop_container: '', shop_container: '',
shop_img_container: '', shop_img_container: '',
// 默认数据 // 默认数据
@ -186,10 +189,11 @@
top_up: new_content.tabs_top_up, top_up: new_content.tabs_top_up,
goods_tabs: new_data, goods_tabs: new_data,
style_container: common_styles_computer(common_style), style_container: common_styles_computer(common_style),
style_img_container: common_img_computer(common_style, this.propIndex) + 'gap:' + (new_style?.shop_content_spacing || 0) * 2 + 'rpx', style_img_container: common_img_computer(common_style, this.propIndex),
tabs_style: new_tabs_style, tabs_style: new_tabs_style,
tabs_container: gradient_computer(tabs_data) + radius_computer(tabs_radius) + 'overflow: hidden;', tabs_container: gradient_computer(tabs_data) + radius_computer(tabs_radius) + 'overflow: hidden;',
tabs_img_container: background_computer(tabs_data) + padding_computer(tabs_padding) + 'box-sizing: border-box;overflow: hidden;', tabs_img_container: background_computer(tabs_data) + padding_computer(tabs_padding) + 'box-sizing: border-box;overflow: hidden;',
shop_margin_top: 'margin-top:' + (new_style?.shop_content_spacing || 0) * 2 + 'rpx;',
shop_container: gradient_computer(shop_content_data) + margin_computer(shop_content_margin) + radius_computer(shop_content_radius) + 'overflow: hidden;', shop_container: gradient_computer(shop_content_data) + margin_computer(shop_content_margin) + radius_computer(shop_content_radius) + 'overflow: hidden;',
shop_img_container: background_computer(shop_content_data) + padding_computer(shop_content_padding) + 'box-sizing: border-box;overflow: hidden;', shop_img_container: background_computer(shop_content_data) + padding_computer(shop_content_padding) + 'box-sizing: border-box;overflow: hidden;',
}); });

14
components/diy/tabs-carousel.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<view class="ou pr" :style="style_container + swiper_bg_style"> <view class="ou pr" :style="style_container + swiper_bg_style">
<view class="pa top-0 wh-auto ht-auto" :style="swiper_bg_img_style"></view> <view class="pa top-0 wh-auto ht-auto" :style="swiper_bg_img_style"></view>
<view class="flex-col ou wh-auto" :style="style_img_container + (!isEmpty(swiper_bg_img_style) ? 'background-image: url(null);' : '')"> <view class="ou wh-auto" :style="style_img_container + (!isEmpty(swiper_bg_img_style) ? 'background-image: url(null);' : '')">
<componentDiyTabs :propContentPadding="propContentPadding" :propValue="propValue" :propTop="propTop" :propNavIsTop="propNavIsTop" :propTabsIsTop="propTabsIsTop" :propIsCommon="false" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propSpacingCommonStyle="spacing_common_style" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs> <componentDiyTabs :propContentPadding="propContentPadding" :propValue="propValue" :propTop="propTop" :propNavIsTop="propNavIsTop" :propTabsIsTop="propTabsIsTop" :propIsCommon="false" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propSpacingCommonStyle="spacing_common_style" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
<view :style="carousel_container"> <view :style="carousel_margin_top">
<view :style="carousel_img_container"> <view :style="carousel_container">
<componentDiycarousel :propValue="propValue" :propIsCommon="false" @onVideoPlay="video_play" @slideChange="slideChange"></componentDiycarousel> <view :style="carousel_img_container">
<componentDiycarousel :propValue="propValue" :propIsCommon="false" @onVideoPlay="video_play" @slideChange="slideChange"></componentDiycarousel>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -77,6 +79,7 @@
tabs_container: '', tabs_container: '',
tabs_img_container: '', tabs_img_container: '',
// 轮播图内容 // 轮播图内容
carousel_margin_top: '',
carousel_container: '', carousel_container: '',
carousel_img_container: '', carousel_img_container: '',
// top_up: '0', // top_up: '0',
@ -123,7 +126,8 @@
this.setData({ this.setData({
// style_container: `${common_styles_computer(common_style)};gap:${new_style.data_spacing * 2}rpx`, // style_container: `${common_styles_computer(common_style)};gap:${new_style.data_spacing * 2}rpx`,
style_container: `${common_styles_computer(new_style.common_style)};`, style_container: `${common_styles_computer(new_style.common_style)};`,
style_img_container: common_img_computer(new_style.common_style, this.propIndex) + 'gap:' + new_style.data_spacing * 2 + 'rpx', style_img_container: common_img_computer(new_style.common_style, this.propIndex),
carousel_margin_top: 'margin-top:' + new_style.data_spacing * 2 + 'rpx',
tabs_container: gradient_computer(tabs_data) + radius_computer(tabs_radius) + 'overflow: hidden;', tabs_container: gradient_computer(tabs_data) + radius_computer(tabs_radius) + 'overflow: hidden;',
tabs_img_container: background_computer(tabs_data) + padding_computer(tabs_padding) + 'box-sizing: border-box;overflow: hidden;', tabs_img_container: background_computer(tabs_data) + padding_computer(tabs_padding) + 'box-sizing: border-box;overflow: hidden;',
carousel_container: gradient_computer(carousel_content_data) + margin_computer(carousel_content_margin) + radius_computer(carousel_content_radius) + 'overflow: hidden;', carousel_container: gradient_computer(carousel_content_data) + margin_computer(carousel_content_margin) + radius_computer(carousel_content_radius) + 'overflow: hidden;',