h5轮播、九宫格、行内元素对齐、相对位置绝对位置

1、广告轮播

        <div>
          <van-swipe :autoplay="3000" >
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img v-lazy="image" style="width: 100%;" @click="gotoProPage(index)"/>
              </van-swipe-item>
          </van-swipe>
        </div>

2、行内元素底部对齐

屏幕快照 2018-11-12 下午8.42.57.png

            <p class="integral-purse-compromise"><span class="integral-purseleft">折合CNY:12345元</span>
              <span class="integral-purseright">
                <span class="integral-purserightNew" @click="turnInd">了解链贝</span>
                <span class="integral-purserightNew" @click="turnJiaoCheng">新手指引</span>
              </span>
            </p>

3、九宫格

屏幕快照 2018-11-12 下午8.45.05.png

        <div class="integral-purse-list">
          <van-row gutter="0">
            <van-col span="8">
              <div @click="turnInd" style="position: relative">
                <img src="../assets/integralPurseNewsz_hot.png" alt="" style="width: 47px;height: 43px;position: absolute;left: 0;top: -25px">
                <div style="height: 20px;margin: 25px 0 10px 0">
                  <img style="width: 20px;height: 20px" src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/IntegralPurseNewsz_yqhy.png" alt="">
                </div>
                <p>疯狂收徒</p>
                <p style="font-size: 11px;color: #FF0202;letter-spacing: 0;font-family: PingFangSC-Regular;">+2000 永久返佣</p>
              </div>
            </van-col>
            <van-col span="8">
              <div @click="turnJiaoCheng">
                <div style="height: 20px;margin: 25px 0 10px 0">
                  <img style="width: 20px;height: 20px" src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/IntegralPurseNewsz_tdpk.png" alt="">
                </div>
                <p>团队PK</p>
                <p style="font-size: 11px;color: #999999;letter-spacing: 0;font-family: PingFangSC-Regular;">+200</p>
              </div>
            </van-col>
            <van-col span="8">
              <div @click="turnHuoDong">
                <div style="height: 20px;margin: 25px 0 10px 0">
                  <img style="width: 20px;height: 20px" src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/IntegralPurseNewsz_lqqd.png" alt="">
                </div>
                <p>乐趣签到</p>
                <p style="font-size: 11px;color: #999999;letter-spacing: 0;font-family: PingFangSC-Regular;">+20</p>
              </div>
            </van-col>
            <van-col span="8">
              <div @click="turnHome">
                <div style="height: 20px;margin: 25px 0 10px 0">
                  <img style="width: 20px;height: 20px" src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/IntegralPurseNewsz_fxyl.png" alt="">
                </div>
                <p>分享有礼</p>
                <p style="font-size: 11px;color: #999999;letter-spacing: 0;font-family: PingFangSC-Regular;">+10</p>
              </div>
            </van-col>
            <van-col span="8">
              <div @click="turnDingDan">
                <div style="height: 20px;margin: 25px 0 10px 0">
                  <img style="width: 20px;height: 20px" src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/IntegralPurseNewsz_wdqf.png" alt="">
                </div>
                <p>问答抢分</p>
                <p style="font-size: 11px;color: #999999;letter-spacing: 0;font-family: PingFangSC-Regular;">+20</p>
              </div>
            </van-col>
            <van-col span="8">
              <div @click="turnFaBu">
                <div style="height: 20px;margin: 25px 0 10px 0">
                  <img style="width: 22px;height: 20px" src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/IntegralPurseNewsz_jrsq.png" alt="">
                </div>
                <p>加入社群</p>
                <p style="font-size: 11px;color: #999999;letter-spacing: 0;font-family: PingFangSC-Regular;">+10</p>
              </div>
            </van-col>
          </van-row>
        </div>