小程序优惠卷

// pages/commodityType/commodityType.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
   
    windowHeight: 0,
    windowWidth: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  
    //获取手机宽度和高度
    wx.getSystemInfo({
      success: (res) => {
        console.log(res);
        this.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth,
          widthX4: res.windowWidth * 0.4,
          animationMiao: 500
        });
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

})

wxml

<view class='discount' style='width:{{windowWidth-40}}px;'>
                      <view class='discount_1' style='width:{{windowWidth*0.7-5}}px;padding-left:10px;'>
                          <text style='font-size:20px;'>福鼎房产中心优惠卷</text>
                          <text  style='font-size:13px;margin-top:10px;'>2018-04-27至2018-12-27</text>
                      </view>
                      <view class='fenjiexian'>
                          <view class='banyuan banyuan1'>
                          
                          </view>
                          <view style='flex:8;' class='whiteLine'>
                          
                          </view>
                          <view  class='banyuan banyuan2'>
                          
                          </view>
                      </view>
                      <view class='discount_1 discount_2' style='width:{{windowWidth*0.3-5}}px;color:white;padding-right:10px;'>
                          <text style='font-size:20px;'>￥300</text>
                          <text  style='font-size:13px;padding:5px 0px 5px 0px;'>代金卷</text>
                          <text  class='btn_style'>立即使用</text>
                      </view>
                  </view>

WXSS

/* pages/youhuijuan/youhuijuan.wxss */


/* / */
/* //优惠卷开始 */
.discount{
  display: flex;
  flex-direction: row;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 15px;
  border-radius: 10px;
  background-image: linear-gradient(90deg, #c7ecfa, #0bb4f2);
}
.discount_1{
  display: flex;
  flex-direction: column;
  color: white;
  padding-bottom: 10px;
  padding-top: 10px;
}
.discount_2{
  justify-content: space-around;
  align-items: center;
}
.btn_style{
  padding:5px 10px 5px 10px;
  background:white;
  font-size:13px;
  border-radius: 15px;
  color:#0bb4f2;
}
/* 优惠卷分界线 */
.fenjiexian{
  width: 10px;
  /* background-color: red; */
  display: flex;
  flex-direction: column;
}
.banyuan{
  width: 10px;
  height: 10px;
  background-color: white;
  flex: 1;
  border-radius: 10px;
}
.banyuan1{
  position: relative;
  bottom: 5px;
  left: 0px;
}
.banyuan2{
  position: relative;
  top: 5px;
  left: 0px;
}
/* 白色虚线 */
.whiteLine{
  border-left: 1px white dashed;
  position: relative;
  left: 5px;
  top: 0px;
}