存一个

Posted 2021-03-21 茶不二

<view class="bg_box"><image src="https://xcx.hy720.com/wtt/aaa.jpg"></image></view>

  <view class=\'bbot\' data-id="{{item.num_iid}}" bindtap=\'shopid\' data-title="{{item.title}}">
    <view class=\'image\'>
      <image src=\'https://xcx.hy720.com/20191021003.jpg\'></image>
    </view>
    <view class=\'item_info\'>
      <view class=\'shop_tit\'>
        <text class="jingdong">百亿补贴</text>
        <text class="text">title</text>
      </view>
      <view class="futitle">副标题</view>
      
      <view class="bj_butie">
        <view class="bj_left">
          <text class="left_a">￥58</text>
          <text class="left_b">日常价</text>
        </view>
        <view class="bj_zhong">
          <text class="zhong_a">补贴价</text>
          <view class="zhong_b"><text class="b1">￥</text><text class="b2">14</text><text class="b1">.9</text></view>
        </view>
        <view class="bj_right">
          <text class="right_a">￥58</text>
          <text class="right_b">日常价</text>
        </view>
      </view>

      <view class="purchase">立即抢购</view>
    </view>
  </view>

　　

 page{
  background-color: #d2171e;
}
.bg_box{
  width:100%;height:700rpx;background-size:100% 100%;
}
.bg_box image{
  width: 100%;
  height: 100%;
}

.bbot {
  width: 88%;
  height: 40vw;
  margin: 10px auto;
  display: flex;
  justify-content: space-around;
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-top: 20rpx;
  border-radius: 10rpx;
  padding-bottom: 10rpx;
  background-color: #fff;
}

.image {
  width: 260rpx;
  height: 260rpx; 
  /* overflow: hidden; */
   border-radius: 5rpx;
  margin-top: 15rpx;

}
.image image{
  width: 100%;
  height: 100%; 
}
.item_info {
  width: 55vw;
  margin-left: 20rpx;
  
}

.item_info .shop_tit .text {
  font-size: 34rpx;
}

.shop_tit {
  overflow: hidden;
	white-space: nowrap;
	text-overflow:ellipsis;
  margin-top: 6rpx;
}

.shop_tit .jingdong{
  margin-right: 10rpx;
  background: linear-gradient(90deg, #f94e09,#f20b05);
  width: 30rpx;
  color: #fff;
  border-radius: 5rpx;
  padding-left: 8rpx;
  padding-right: 8rpx;
  font-size: 22rpx;
  padding-bottom: 3rpx;
  padding-top: 3rpx;

}
.futitle{
  background-color: #f2f2f2;
  padding: 3rpx;
  font-size: 22rpx;
  margin-bottom: 8rpx;
  margin-top: 10rpx;
  border-radius: 5rpx;
}

.purchase{
  background-color: #ff4a2d;
  padding: 8rpx 30rpx;
  width: 180rpx;
  border-radius: 50rpx;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  margin-top: 3rpx;
  font-size: 30rpx;
}

.bj_butie{
  background: url("https://xcx.hy720.com/wtt/ss.jpg") no-repeat;
  width:100%;background-size:100% 100%; height: 120rpx;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.bj_left , .bj_zhong , .bj_right{
  width: 32%;
  height: 140rpx;
  position: absolute;
}
.bj_zhong{
  color: #fff;
  margin-left: 33%;
}
.bj_right{
  margin-left: 67%;
}
.left_a,.left_b,.zhong_a,.zhong_b,.right_a,.right_b{
  display: block;
  text-align: center;
}

.left_a,.left_b , .right_a,.right_b{
  margin-top: 20rpx;
  margin-bottom: 8rpx;
  color: #535353;
  font-size: 24rpx;
}
.zhong_a{
  font-size: 24rpx;
  margin-top: 5rpx;
}
.zhong_b .b1{
  font-size: 24rpx;
}
.zhong_b .b2{
  font-size: 36rpx;
}
.zhong_b{
  margin-top: -5rpx;
}