对话气泡---中奖信息

效果：

---

代码：

<swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="1000">

        <block wx:for="{{msgList}}">

         <navigator url="/pages/index/index?title={{item.url}}" open-type="navigate">

<swiper-item>

        <view class='dialog cb'>

                  <view class="one"></view>

                  <view class='two'>{{item.title1}}</view>

                  <view class="three"></view>

                  <view class='four'>{{item.title2}}</view>

        </view>

</swiper-item>

</navigator>

</block>

</swiper>

---

.swiper_container {

  height: 100rpx;

}

.swiper_item {

  font-size: 30rpx;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.dialog{

  height:150px;

}

.one{

width:0px;

height:0px;

border-top: 10px solid transparent;

border-left: 20px solid transparent;

border-right: 20px solid #f38282;

border-bottom: 10px solid transparent;

margin-top: 35rpx;

float: left;

transform: rotate(-7deg);

/* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */

}

.two{

height:50px;

background-color:#f38282 ;

border-radius:20px;

float: left;

line-height: 90rpx;

font-size: 30rpx;

text-align: center;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

}

.three{

width:0px;

height:0px;

border-top: 10px solid transparent;

border-left: 20px solid #f38282;

border-right: 20px solid transparent;

border-bottom: 10px solid transparent;

margin-top: 35rpx;

float:right;

transform: rotate(7deg);

}

.four{

height:50px;

background-color:#f38282 ;

border-radius:20px;

float: right;

line-height: 90rpx;

font-size: 30rpx;

text-align: center;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

}

---

data{

}