@tplc/business 0.4.172 → 0.4.173

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.4.173](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.4.172...v0.4.173) (2025-07-26)
+
+
+### ✨ Features | 新功能
+
+* 调整布局点击 ([5bcc28a](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/5bcc28a02ad983b6c0542b08f03b491713e6f1a9))
+
 ### [0.4.172](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.4.171...v0.4.172) (2025-07-26)
 
 

package/components/lcb-banner/lcb-banner.vue

@@ -1,22 +1,43 @@
 <template>
   <view
-    class="lcb-banner"
-    :class="{ 'full-screen-background': fullScreenBackground }"
+    class="lcb-banner relative"
+    :class="{
+      'full-screen-background': fullScreenBackground,
+      'full-screen-swiper': fullScreenBackground && !height,
+    }"
     :style="{ filter: `blur(${Math.min(scrollTop / 100, 10)}px)` }"
   >
+    <view
+      class="absolute z-1 transition-all duration-300"
+      v-if="showTitle"
+      :style="{
+        color: titleColor,
+        fontSize: transformValueUnit(titleFontSize),
+        top: transformValueUnit(titleTop),
+        left: transformValueUnit(titleLeft),
+        fontWeight: titleFontWeight,
+      }"
+    >
+      {{ currentTitle }}
+    </view>
     <lcb-block
       v-bind="$props"
-      custom-class="overflow-visible lcb-banner-block"
-      :customStyle="fullScreenBackground ? { width: '100%', height: '100%' } : {}"
+      custom-class="overflow-visible lcb-banner-block flex flex-col"
+      :customStyle="
+        fullScreenBackground
+          ? { width: '100%', height: '100%', flex: 1, display: 'flex', flexDirection: 'column' }
+          : {}
+      "
     >
       <wd-swiper
         value-key="url"
         action
+        v-model:current="currentIndex"
         custom-indicator-class="custom-indicator-class"
         v-bind="{
           list: items,
           loop,
-          height: fullScreenBackground ? '100%' : transformValueUnit(height),
+          height: fullScreenBackground && !height ? '100%' : transformValueUnit(height),
           imgWidth: imgWidth && transformValueUnit(imgWidth),
           radius: transformValueUnit(radius),
           autoplay: Boolean(interval),
@@ -33,6 +54,12 @@
           ...supplementProps,
         }"
       />
+      <view
+        class="absolute top-0 left-0 w-full h-full z-1 pointer-events-none"
+        :style="{
+          background: fullMaskBgColor,
+        }"
+      />
     </lcb-block>
   </view>
 </template>
@@ -54,6 +81,11 @@ const props = withDefaults(defineProps<LcbBannerProps>(), {
   styleGroup: 1,
   radius: 0,
   slidingStyle: 1,
+  titleColor: '#fff',
+  titleFontSize: 28,
+  titleTop: 100,
+  titleLeft: 100,
+  fontWeight: 500,
 })
 const scrollTop = ref(0)
 const supplementProps = computed(() => {
@@ -71,8 +103,19 @@ const supplementProps = computed(() => {
   }
   return {}
 })
+const currentIndex = ref(0)
+const currentTitle = computed(() => {
+  return props.items?.[currentIndex.value]?.title
+})
 const indicatorCustomStyle = computed(() => {
-  return props.indicatorBottom ? `bottom: ${transformValueUnit(props.indicatorBottom)}` : ''
+  return props.indicatorBottom
+    ? `bottom: ${transformValueUnit(props.indicatorBottom)}`
+    : props.indicatorTop
+      ? `top: ${transformValueUnit(props.indicatorTop)}`
+      : ''
+})
+const fullMaskBgColor = computed(() => {
+  return props.items?.[currentIndex.value]?.maskBgColor
 })
 const customStyle = computed(() => {
   return props.paddingBottom ? `padding-bottom: ${transformValueUnit(props.paddingBottom)}` : ''
@@ -96,6 +139,9 @@ onPageScroll((e) => {
   position: fixed;
   top: 0;
   left: 0;
+}
+
+.full-screen-swiper {
   :deep(.wd-swiper, uni-swiper, .uni-swiper-wrapper, .uni-swiper-wrapper, .lcb-banner-block) {
     width: 100% !important;
     height: 100% !important;

package/components/lcb-banner/types.ts

@@ -2,7 +2,11 @@ import { ActionView } from 'action'
 import { LcbBlockProps } from '../lcb-block/types'
 
 export interface LcbBannerProps extends LcbBlockProps {
-  items?: Partial<ActionView>[]
+  items?: Partial<
+    ActionView & {
+      maskBgColor?: string
+    }
+  >[]
   imageWidth?: number
   /** 风格 1.平铺 2.卡片 */
   styleGroup?: 1 | 2
@@ -38,6 +42,7 @@ export interface LcbBannerProps extends LcbBlockProps {
   paddingBottom?: number
   /** 指示器底部距离 */
   indicatorBottom?: number
+  indicatorTop?: number
   snapToEdge?: boolean
   // 图片之间距离
   itemPadding?: number
@@ -52,4 +57,10 @@ export interface LcbBannerProps extends LcbBlockProps {
   slidingStyle?: 1 | 2
   maskBgColor?: string
   fullScreenBackground?: boolean
+  titleColor?: string
+  titleFontSize?: number
+  titleFontWeight?: number
+  titleTop?: number
+  titleLeft?: number
+  showTitle?: boolean
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tplc/business",
-  "version": "0.4.172",
+  "version": "0.4.173",
   "keywords": [
     "业务组件"
   ],

package/types/components/lcb-banner/lcb-banner.vue.d.ts

@@ -6,6 +6,11 @@ declare const _default: import('vue').DefineComponent<
       styleGroup: number
       radius: number
       slidingStyle: number
+      titleColor: string
+      titleFontSize: number
+      titleTop: number
+      titleLeft: number
+      fontWeight: number
     }
   >,
   {},
@@ -25,14 +30,24 @@ declare const _default: import('vue').DefineComponent<
           styleGroup: number
           radius: number
           slidingStyle: number
+          titleColor: string
+          titleFontSize: number
+          titleTop: number
+          titleLeft: number
+          fontWeight: number
         }
       >
     >
   >,
   {
     radius: number
+    fontWeight: number
     styleGroup: 1 | 2
     slidingStyle: 1 | 2
+    titleColor: string
+    titleFontSize: number
+    titleTop: number
+    titleLeft: number
   },
   {}
 >

package/types/components/lcb-banner/types.d.ts

@@ -1,7 +1,11 @@
 import { ActionView } from 'action'
 import { LcbBlockProps } from '../lcb-block/types'
 export interface LcbBannerProps extends LcbBlockProps {
-  items?: Partial<ActionView>[]
+  items?: Partial<
+    ActionView & {
+      maskBgColor?: string
+    }
+  >[]
   imageWidth?: number
   /** 风格 1.平铺 2.卡片 */
   styleGroup?: 1 | 2
@@ -37,6 +41,7 @@ export interface LcbBannerProps extends LcbBlockProps {
   paddingBottom?: number
   /** 指示器底部距离 */
   indicatorBottom?: number
+  indicatorTop?: number
   snapToEdge?: boolean
   itemPadding?: number
   /** 图片圆角 */
@@ -49,4 +54,10 @@ export interface LcbBannerProps extends LcbBlockProps {
   slidingStyle?: 1 | 2
   maskBgColor?: string
   fullScreenBackground?: boolean
+  titleColor?: string
+  titleFontSize?: number
+  titleFontWeight?: number
+  titleTop?: number
+  titleLeft?: number
+  showTitle?: boolean
 }