白色主题

miniprogram_npm/tdesign-miniprogram/cell/cell.wxml

@@ -1,5 +1,5 @@
 <view
-  style="{{ customStyle }}"
+  style="{{ style }}"
   class="{{prefix}}-class {{classPrefix}} {{ hover ? classPrefix + '--hover' : ''}} {{ !bordered ? classPrefix + '--borderless' : ''}} {{classPrefix}}--{{align}}"
   hover-class="{{classPrefix}}--hover-class"
   hover-stay-time="70"
@@ -8,11 +8,14 @@
   aria-label="{{ariaLabel}}"
 >
   <view class="{{classPrefix}}__left {{prefix}}-class-left">
-    <t-icon wx:if="{{ leftIcon }}" name="{{leftIcon}}" class="{{classPrefix}}__left-icon {{prefix}}-class-left-icon" />
+    <t-icon
+      wx:if="{{ leftIcon }}"
+      name="{{leftIcon}}"
+      t-class="{{classPrefix}}__left-icon {{prefix}}-class-left-icon"
+    />
     <slot name="left-icon" />
     <t-image
       wx:if="{{ image }}"
-      class="{{classPrefix}}__left-image"
       shape="round"
       t-class="{{classPrefix}}__left-image {{prefix}}-class-image"
       src="{{ image }}"
@@ -40,9 +43,13 @@
   </view>
 
   <view class="{{classPrefix}}__right {{prefix}}-class-right">
-    <t-icon wx:if="{{ arrow }}" name="chevron-right" class="{{classPrefix}}__right-icon {{prefix}}-class-right-icon" />
+    <t-icon
+      wx:if="{{ arrow }}"
+      name="chevron-right"
+      t-class="{{classPrefix}}__right-icon {{prefix}}-class-right-icon"
+    />
     <block wx:else>
-      <t-icon name="{{rightIcon}}" class="{{classPrefix}}__right-icon {{prefix}}-class-right-icon" />
+      <t-icon name="{{rightIcon}}" t-class="{{classPrefix}}__right-icon {{prefix}}-class-right-icon" />
       <slot name="right-icon" />
     </block>
   </view>

miniprogram_npm/tdesign-miniprogram/cell/cell.wxss

@@ -30,10 +30,10 @@
   display: flex;
   box-sizing: border-box;
   width: 100%;
-  padding: var(--td-cell-vertical-padding, 20rpx) var(--td-cell-horizontal-padding, 20rpx);
-  font-size: var(--td-cell-font-size, var(--td-font-size-m, 32rpx));
+  overflow: hidden;
+  padding: var(--td-cell-vertical-padding, 32rpx) var(--td-cell-horizontal-padding, 32rpx);
   line-height: var(--td-cell-line-height, 48rpx);
-  /*color: var(--td-cell-text-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));*/
+  height: var(--td-cell-height, auto);
   background-color: var(--td-cell-bg-color, var(--td-bg-color-block, #fff));
 }
 .t-cell::after {
@@ -44,10 +44,10 @@
   right: 0;
   left: 0;
   bottom: 0;
-  /*border-bottom: 1px solid var(--td-cell-border-color, var(--td-gray-color-3, #e7e7e7));*/
-  border-bottom: 10rpx solid var(--td-cell-border-color, var(--td-gray-color-3, #3C4043));
-  /*transform: scaleY(0.5);*/
-  /*left: 32rpx;*/
+  border-bottom: 1px solid var(--td-cell-border-color, var(--td-gray-color-3, #e7e7e7));
+  transform: scaleY(0.5);
+  left: var(--td-border-left-space, var(--td-cell-horizontal-padding, 32rpx));
+  right: var(--td-border-right-space, 0);
 }
 .t-cell--borderless::after {
   display: none;
@@ -55,10 +55,10 @@
 .t-cell__description {
   font-size: var(--td-cell-description-font-size, var(--td-font-size-base, 28rpx));
   line-height: var(--td-cell-description-line-height, 44rpx);
-  /*color: var(--td-cell-description-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));*/
+  color: var(--td-cell-description-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
 }
 .t-cell__description-text {
-  margin-top: 8rpx;
+  margin-top: calc(var(--td-spacer, 16rpx) / 2);
 }
 .t-cell__note {
   display: flex;
@@ -78,40 +78,38 @@
 }
 .t-cell__title-text {
   display: flex;
-  font-size: 32rpx;
+  font-size: var(--td-cell-title-font-size, var(--td-font-size-m, 32rpx));
+  color: var(--td-cell-title-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
   font-weight: 400;
 }
 .t-cell__left,
 .t-cell__right {
   display: flex;
   align-items: center;
-  font-size: var(--td-cell-icon-size, 48rpx);
-  line-height: var(--td-cell-line-height, 48rpx);
 }
 .t-cell__left:not(:empty) {
-  margin-right: 16rpx;
+  margin-right: var(--td-spacer, 16rpx);
 }
 .t-cell__left-icon {
-  font-size: var(--td-cell-icon-size, 48rpx);
+  color: var(--td-cell-left-icon-color, var(--td-brand-color, var(--td-primary-color-8, #0052d9)));
+  font-size: var(--td-cell-left-icon-font-size, 48rpx);
 }
 .t-cell__left-image {
   height: var(--td-cell-image-height, 96rpx);
   width: var(--td-cell-image-width, 96rpx);
 }
 .t-cell__right {
-  margin-left: 8rpx;
-  color: var(--td-cell-right-icon-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+  margin-left: calc(var(--td-spacer, 16rpx) / 2);
 }
 .t-cell__right-icon {
   color: var(--td-cell-right-icon-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
-  font-size: var(--td-cell-icon-size, 48rpx);
-  line-height: var(--td-cell-line-height, 48rpx);
+  font-size: var(--td-cell-right-icon-font-size, 48rpx);
 }
 .t-cell--hover.t-cell--hover-class {
   background-color: var(--td-cell-hover-color, var(--td-gray-color-1, #f3f3f3));
 }
 .t-cell--required {
-  font-size: var(--td-cell-font-size, var(--td-font-size-m, 32rpx));
+  font-size: var(--td-cell-required-font-size, var(--td-font-size-m, 32rpx));
   color: var(--td-cell-required-color, var(--td-error-color-6, #e34d59));
 }
 .t-cell--middle {

miniprogram_npm/tdesign-miniprogram/cell/props.js

@@ -11,7 +11,7 @@ const props = {
         type: Boolean,
         value: true,
     },
-    customStyle: {
+    style: {
         type: String,
         value: '',
     },

miniprogram_npm/tdesign-miniprogram/cell/type.d.ts

@@ -11,7 +11,7 @@ export interface TdCellProps {
         type: BooleanConstructor;
         value?: boolean;
     };
-    customStyle?: {
+    style?: {
         type: StringConstructor;
         value?: string;
     };