小程序自定义模板中商品分组和秒杀模块商品名称以两行显示，溢出省略

taiyuan
1 parent 782c1484
Showing 4 changed files with 75 additions and 42 deletions
components/diy_goodsGroup/diy_goodsGroup.wxml
components/diy_goodsGroup/diy_goodsGroup.wxss
components/diy_seckill/diy_seckill.wxml
components/diy_seckill/diy_seckill.wxss
@@ -208,7 +208,7 @@
                     </view>
                     <view class='zs_center_2l'>
-                        <view class='zs_wz1_2l' wx:if="{{object.goodstit}}">{{item.goods_name}}</view>
+                        <view class='zs_wz1_2l ellipsis-2' wx:if="{{object.goodstit}}">{{item.goods_name}}</view>
                         <view class='zs_wz2_2l' wx:if="{{object.goodsprice}}">
                             <block wx:if="{{item.prom_price || item.prom_integral}}">
@@ -498,9 +498,15 @@
                     </block>
                     <block wx:else>
-                        <image class="zs_t_img_x {{object.big_order_type==0?'zj':''}}{{object.big_order_type==1?'yj':''}}"
+											<!-- 原来的 -->
+											<!-- <image class="zs_t_img_x {{object.big_order_type==0?'zj':''}}{{object.big_order_type==1?'yj':''}}"
+											       src="{{item.goods_img}}" data-errorimg="goods_array[{{index}}].goods_img"  lazy-load="true"
+											       binderror="bind_bnerr3" mode="widthFix" style='max-height:290rpx'></image> -->
+												
+												<!-- 2021.11.27修改		 -->
+                        <image class="block zs_t_img_x {{object.big_order_type==0?'zj':''}}{{object.big_order_type==1?'yj':''}}"
                                src="{{item.goods_img}}" data-errorimg="goods_array[{{index}}].goods_img"  lazy-load="true"
-                               binderror="bind_bnerr3" mode="widthFix" style='max-height:290rpx'></image>
+                               binderror="bind_bnerr3" mode="widthFix"></image>
                     </block>
                     <block wx:if="{{object.goodicon==3}}">
@@ -523,7 +529,7 @@
                 </view>
                 <view class='zs_center_x'>
-                    <view class='zs_wz1_x' wx:if="{{object.goodstit}}">{{item.goods_name}}</view>
+                    <view class='zs_wz1_x ellipsis-2' wx:if="{{object.goodstit}}">{{item.goods_name}}</view>
                     <view class='zs_wz2_x' wx:if="{{object.goodsprice}}">
 						<block wx:if="{{item.prom_price || item.prom_integral}}">
@@ -123,12 +123,15 @@
 }
 .zs_goods_xiao_bottom {
-  width: 100%;
-  min-height: 300rpx;
+  /* width: 100%; */
+  /* min-height: 300rpx; */
   display: flex;
   border-bottom: 2rpx #eee solid;
-  padding: 10rpx;
+  /* padding: 10rpx; */
   background-color: white;
+	padding: 20rpx;
+	/* background-color: pink; */
+	box-sizing: border-box;
 }
 .zs_goods_xiao {
@@ -141,17 +144,17 @@
 }
 .zs_top_x {
-  width: 400rpx;
-  height: 318rpx;
-  margin-top: 20rpx;
-  display: flex;
+  /* width: 400rpx;
+  height: 318rpx; */
+  /* margin-top: 20rpx; */
+  /* display: flex; */
   position: relative;
 }
 .zs_t_img_x {
   width: 290rpx;
   height: 290rpx;
-  margin-left: 20rpx;
+  /* margin-left: 20rpx; */
 }
 .zs_t_img_x.zj{ border: 1rpx solid #eee;} 
@@ -159,22 +162,24 @@
 .zs_center_x {
-  width: 100%;
-  min-height: 200rpx;
+  /* width: 100%;
+  min-height: 200rpx; */
   font-size: 28rpx;
   color: #333;
-  text-align: left;
-  margin-top: 30rpx;
-  padding: 0 10rpx;
+	padding-left: 20rpx;
+  /* text-align: left; */
+  /* margin-top: 30rpx;
+  padding: 0 10rpx; */
 }
 .zs_wz1_x {
-  overflow: hidden;
-  text-overflow: ellipsis;
+  /* overflow: hidden;
+  text-overflow: ellipsis; */
+	height: 90rpx;
   margin-bottom: 10rpx;
   font-size: 28rpx;
-  white-space: nowrap;
-  width: 80%;
+  /* white-space: nowrap;
+  width: 80%; */
 }
 .zs_wz2_x {
@@ -229,10 +234,11 @@
 }
 .zs_t1_x1 {
+	position: absolute;
   width: 56rpx;
   height: 56rpx;
-  position: relative;
-  right: 285rpx;
+  /* position: relative; */
+  left: 6rpx;
   top: 6rpx;
 }
@@ -302,16 +308,16 @@
   font-size: 28rpx;
   color: #333;
   text-align: left;
-  padding: 0 10rpx;
+  /* padding: 0 10rpx; */
 }
 .zs_wz1_2l {
-  overflow: hidden;
-  text-overflow: ellipsis;
+  /* overflow: hidden;
+  text-overflow: ellipsis; */
   font-size: 28rpx;
-  white-space: nowrap;
-  height: 40rpx;
-  line-height: 40rpx;
+  /* white-space: nowrap; */
+  height: 90rpx;
+  /* line-height: 40rpx; */
   margin-top: 10rpx;
 }
@@ -825,4 +831,16 @@ top: 10rpx;
 	bottom: 10rpx;
 }
-.n_box{ position: absolute !important;z-index: 10}
 \ No newline at end of file
+.n_box{ position: absolute !important;z-index: 10}
+
+.block {
+	display: block;
+}
+
+.ellipsis-2 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
 \ No newline at end of file
@@ -62,7 +62,7 @@
               </view>
               <view class='sp_wz'>
-                <view class='sp_wzi'>{{aitem.goods_name}}</view>
+                <view class='sp_wzi ellipsis-2'>{{aitem.goods_name}}</view>
                 <view class='sp_jg'>￥{{aitem.price}}</view>
                 <view class='sp_jgx'>￥{{aitem.market_price}}</view>
               </view>
@@ -85,7 +85,7 @@
             </view>
             <view class="o1_right">
-              <view class="sp_wzi">{{aitem.title}}</view>
+              <view class="sp_wzi ellipsis-2">{{aitem.title}}</view>
               <view class="o1_sj_kill">
                 <text>{{aitem.djs.day}}</text> 天
                 <text>{{aitem.djs.hou}}</text> :
@@ -112,13 +112,13 @@ swiper {
   font-size: 30rpx;
   border-bottom: 2rpx solid #dcdcdc;
   width: 100%;
-  text-align: left;
+  /* text-align: left; */
   padding: 4rpx 0;
-  overflow: hidden;
-  height: 48rpx;
-  text-overflow: ellipsis;
+  /* overflow: hidden; */
+  height: 90rpx;
+  /* text-overflow: ellipsis;
   white-space: nowrap;
-  line-height: 48rpx;
+  line-height: 48rpx; */
 }
 .sp_wz .sp_jg {
@@ -222,12 +222,12 @@ swiper {
 .o1_right .sp_wzi {
   font-size: 30rpx;
   margin-bottom: 6rpx;
-  text-align: left;
+  /* text-align: left; */
   padding: 4rpx 0;
-  height: 48rpx;
-  overflow: hidden;
+  height: 90rpx;
+  /* overflow: hidden;
   white-space: nowrap;
-  text-overflow: ellipsis;
+  text-overflow: ellipsis; */
 }
 .o1_right .o1_sj_kill {
@@ -287,4 +287,13 @@ swiper {
    align-items: center;
 }
-.sp .sp_top .s_top_kill.gray{background-color:#bdbdc1;color: #fff;font-weight: normal}
 \ No newline at end of file
+.sp .sp_top .s_top_kill.gray{background-color:#bdbdc1;color: #fff;font-weight: normal}
+
+
+.ellipsis-2 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
 \ No newline at end of file