@conecli/cone-render 0.10.1-shop3.5 → 0.10.1-shop3.50

package/dist/components/base/CommonFloorHead/index.module.scss

@@ -1,148 +1,163 @@
 .d-root {
-	position: relative;
-	width: 100%;
-	margin-bottom: -24px;
-	background-color: #ffffff;
+  position: relative;
+  width: 100%;
+  margin-bottom: -24px;
+  background-color: #ffffff;
 }
 
 .d-content-wrap {
-	position: absolute;
-	// display: flex;
-	// align-items: center;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 96px;
-	// height: 100%;
-
-	&.d-has-title-bg {
-		background-size: cover;
-
-		.d-text {
-			// margin-top: -14px;
-			color: #ffffff;
-		}
-
-		.d-sub-text {
-			// margin-top: -8px;
-			color: #ffffff;
-		}
-
-		.d-content {
-			bottom: 40px;
-		}
-	}
-
-	&.d-type-is-img {
-		.d-content {
-			bottom: 44%; // 当图片标题类型渲染时，兼容新老数据，下发的图片高度会有几个尺寸，所以这里改成百分比
-		}
-	}
-
-	.d-text {
-		// margin-top: 16px;
-		margin-left: 20px;
-		font-family: 'PingFang SC';
-		font-size: 32px;
-		// line-height: 32px;
-		font-weight: bold;
-		color: #1a1a1a;
-
-		// hack修复在使用overflowhidden（为了实现过长自动出现省略号）前提下，某些字体，例如PingFang SC，默认行高时，基线和底线部分的字体内容（例如：jpqy）有可能显示不完整的问题
-		position: relative;
-		top: 2px;
-		padding-bottom: 2px;
+  position: absolute;
+  // display: flex;
+  // align-items: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 96px;
+  // height: 100%;
+
+  &.d-has-title-bg {
+    background-size: cover;
+
+    .d-text {
+      // margin-top: -14px;
+      color: #ffffff;
+    }
+
+    .d-sub-text {
+      // margin-top: -8px;
+      color: #ffffff;
+    }
+
+    .d-content {
+      bottom: 40px;
+    }
+  }
+
+  &.d-type-is-img {
+    .d-content {
+      bottom: 44%; // 当图片标题类型渲染时，兼容新老数据，下发的图片高度会有几个尺寸，所以这里改成百分比
+    }
+  }
+
+  .d-text {
+    // margin-top: 16px;
+    margin-left: 20px;
+    font-family: 'PingFang SC';
+    font-size: 32px;
+    // line-height: 32px;
+    font-weight: bold;
+    color: #1a1a1a;
+
+    // hack修复在使用overflowhidden（为了实现过长自动出现省略号）前提下，某些字体，例如PingFang SC，默认行高时，基线和底线部分的字体内容（例如：jpqy）有可能显示不完整的问题
+    position: relative;
+    top: 2px;
+    padding-bottom: 2px;
     // 文字titile行高不够被遮盖问题 比如“g”字母
     line-height: 1.3;
-	}
-
-	.d-vertical-line {
-		position: relative;
-		top: -4px;
-		width: 1px;
-		height: 24px;
-		margin-left: 12px;
-		opacity: 0.3;
-		background: #ffffff;
-	}
-
-	.d-sub-text {
-		position: relative;
-		top: -2px;
-		margin-left: 12px;
-		font-family: 'PingFang SC';
-		font-size: 24px;
-		color: #808080;
-	}
+  }
+
+  .d-vertical-line {
+    position: relative;
+    top: -4px;
+    width: 1px;
+    height: 24px;
+    margin-left: 12px;
+    opacity: 0.3;
+    background: #ffffff;
+  }
+
+  .d-sub-text {
+    position: relative;
+    top: -2px;
+    margin-left: 12px;
+    font-family: 'PingFang SC';
+    font-size: 24px;
+    color: #808080;
+  }
 }
 
 .d-content-wrap-relative {
-	position: relative;
+  position: relative;
 }
 
 .d-content {
-	position: absolute;
-	bottom: 22px;
-	width: 100%;
-	display: flex;
-	justify-content: space-between;
-	align-items: flex-end;
+  position: absolute;
+  bottom: 22px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
 }
 
 .d-content-left {
-	flex: 1;
-	display: flex;
-	justify-content: flex-start;
-	align-items: flex-end;
-	max-width: calc(100% - 108px);
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-end;
+  max-width: calc(100% - 108px);
 }
 
 .d-content-right {
-	display: flex;
-	align-items: flex-end;
-	flex-shrink: 0;
+  display: flex;
+  align-items: flex-end;
+  flex-shrink: 0;
 }
 
 .d-title-more {
-	position: relative;
-	top: 16px;
-	display: flex;
-	align-items: flex-end;
-	height: 56px;
-	padding-bottom: 20px;
-	padding-left: 20px;
-	padding-right: 20px;
+  position: relative;
+  top: 16px;
+  display: flex;
+  align-items: flex-end;
+  height: 56px;
+  padding-bottom: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
 .d-title-more-text {
-	font-family: 'PingFang SC';
-	font-size: 24px;
-	color: #808080;
-	display: flex;
-	align-items: center;
-	font-weight: normal;
+  font-family: 'PingFang SC';
+  font-size: 24px;
+  color: #808080;
+  display: flex;
+  align-items: center;
+  font-weight: normal;
 }
 
 .d-title-more-text-white {
-	color: #ffffff;
+  color: #ffffff;
 }
 
 .d-title-more-arrow {
-	position: relative;
-	top: -4px;
-	width: 12px;
-	height: 20px;
-	margin-left: 10px;
+  position: relative;
+  top: -4px;
+  width: 12px;
+  height: 20px;
+  margin-left: 10px;
 }
 
 .d-img {
-	width: 100%;
-	display: block;
-	// height: auto;
-	height: 96px;
-	background: no-repeat top/100% auto;
+  width: 100%;
+  display: block;
+  // height: auto;
+  height: 96px;
+  background: no-repeat top/100% auto;
 }
 
 .d-place-holder {
-	height: 24px;
+  height: 24px;
+}
+
+:global {
+  .d-shop-pad {
+    :local {
+      .d-root {
+        .d-content-wrap-for-img {
+          height: 164px;
+        }
+        .d-img-bg {
+          height: 164px;
+        }
+      }
+    }
+  }
 }

package/dist/components/base/CommonFloorHead/index.tsx

@@ -1 +1 @@
-import React, { useMemo } from 'react'
  key: 1, 
+import React, { useMemo } from 'react';
  'https://m.360buyimg.com/imagetools/jfs/t1/170321/15/27425/230/61c1839aE0514462b/0b4d278fe18d91bb.png';
  'https://m.360buyimg.com/imagetools/jfs/t1/94671/2/26921/257/623d630aE681512e3/ded2e640c4a0a7ea.png';
  const getLogInfo = ReportContainerData.getReportClickFloorInfo(
    floorData,
    dataDefines,
    {
      clickArea: `title`,
      skuid: ``,
      tagList: [],
      labelList: [],
      pos: ``,
    },
    {
      la_p: ``,
    },
  );
  if (config) {
    JumpEventReport.jdJumpConfigUrl(config, {
      eventId: `TerminatorNew_${floorData.floorExtInfo?.moduleFlag}_Click`,
      jsonParam: getLogInfo,
    });
  }
  dataDefines,
  floorData,
  oldModuleFloorTitle, 
  titleText,
  titleMoreClick,
  additionalRenderContent,
  customClassName,
  const floorTitleDataDefine = dataDefines
    ? dataDefines.filter((item) => {
        return item.type === 'floorTitle';
      })
    : [];
  const floorTitle = oldModuleFloorTitle
    ? oldModuleFloorTitle
    : floorTitleDataDefine[0]?.nodeText?.data ?? {};
  const { detail, imageUrl, text, textBackground, type: floorTitleType = 1, subText } = floorTitle;
  if (floorTitleType === 1) {
    return null;
  }
  const bgMap = {
    '1': null,
    '2': textBackground || '',
    '3': imageUrl || '',
  };
  const useFloorTitleBgImg = bgMap[floorTitleType];
  return (
    <View
      className={classNames(styles['d-root'], customClassName)}
      onClick={floorTitleType === 3 ? gotoMPage.bind(this, dataDefines, floorData, detail) : {}}
    >
      <View
        className={classNames(styles['d-img'], {
          [styles['d-img-bg']]: useFloorTitleBgImg,
        })}
        style={useFloorTitleBgImg ? { backgroundImage: `url(${useFloorTitleBgImg})` } : {}}
      />
      <View
        className={classNames(
          styles['d-content-wrap'],
          floorTitleType === 2 && textBackground ? styles['d-has-title-bg'] : null,
          floorTitleType === 3 ? styles['d-type-is-img'] : null,
          useFloorTitleBgImg ? styles['d-content-wrap-for-img'] : null,
        )}
      >
        <View className={classNames(styles['d-content'], 'd-content')}>
          <View className={styles['d-content-left']}>
            {floorTitleType === 2 && text ? (
              <Text className={classNames(styles['d-text'], 'text-ellipsis', 'd-text')}>
                {titleText ? titleText : text}
              </Text>
            ) : null}
            {floorTitleType === 2 && subText
              ? [
                  textBackground ? <View key={1} className={styles['d-vertical-line']} /> : null,
                  <Text key={2} className={styles['d-sub-text']}>
                    {subText}
                  </Text>,
                ]
              : null}
            {additionalRenderContent ? additionalRenderContent(textBackground) : null}
          </View>
          <View className={styles['d-content-right']}>
            {titleMoreClick ? (
              <View
                className={classNames(styles['d-title-more'], 'd-title-more')}
                onClick={(e) => {
                  typeof titleMoreClick === 'function' && titleMoreClick(e);
                  e.stopPropagation();
                }}
              >
                <Text
                  className={classNames(
                    styles['d-title-more-text'],
                    textBackground || floorTitleType === 3
                      ? styles['d-title-more-text-white']
                      : null,
                  )}
                >
                  更多
                </Text>
                <Image
                  className={styles['d-title-more-arrow']}
                  src={textBackground || floorTitleType === 3 ? ICON_ARROW_WHITE : ICON_ARROW_GRAY}
                  mode="widthFix"
                />
              </View>
            ) : null}
          </View>
        </View>
      </View>
    </View>
  );
  props = {
    titleText: null,
    titleMoreClick: null,
    additionalRenderContent: null,
    customClassName: null,
    key: 1, 
  },
  return useMemo(() => {
    return <CommonFloorHeader {...props} />;
  }, [props.key]);