切页面

通过提供image+效果图，使用css，js实现页面的布局和效果。
scss是一个升级版的css工具，很好用。

html

<include file="Public:top" />

<div class="no-data no-data-open">
    <img src="/Wx/YearCard/image/sorry.png">
    <div class="text-sorry">非常抱歉!</div>
    <div class="text-tips">您还未办理文旅年卡，赶快去办理吧!</div>
    <div class="no-data-btn">办理年卡</div>
</div>

<include file="Public:bottom" />

scss

@import "../../sassmixins/mixins";

body {
  margin: 0;
  background-color: #f1f1f1;
}
.no-data{
  display: none;
   px2rem(750px);
  height: auto;
  img {
    position: absolute;
    top: px2rem(240px);
    left: 50%;
    transform: translateX(-50%);
     px2rem(114px);
  }

  .text-sorry{
    position:absolute;
    top: px2rem(240+40+140px);
     100%;
    text-align: center;
    font-size:px2rem(50px);
    font-weight:bold;
    color:rgba(49,49,49,1);
    line-height:px2rem(50px);
  }

  .text-tips {
    position: absolute;
    top: px2rem(240+40+140+48+55px);
     100%;
    text-align: center;
    font-size:px2rem(30px);
    font-weight:500;
    color:rgba(49,49,49,1);
    line-height:px2rem(50px);
  }

  .no-data-btn {
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    top: px2rem(240+40+140+48+55+200px);
    px2rem(710px);
    height:px2rem(100px);
    background:rgba(94,202,190,1);
    border-radius:50px;
    text-align: center;
    line-height: px2rem(100px);
    color:white;
    font-size:px2rem(38px);
  }
}

.no-data-open {
  display: block;
}

css

body {
  margin: 0;
  background-color: #f1f1f1;
}

.no-data {
  display: none;
   10rem;
  height: auto;
}

.no-data img {
  position: absolute;
  top: 3.2rem;
  left: 50%;
  transform: translateX(-50%);
   1.52rem;
}

.no-data .text-sorry {
  position: absolute;
  top: 5.6rem;
   100%;
  text-align: center;
  font-size: 0.66667rem;
  font-weight: bold;
  color: #313131;
  line-height: 0.66667rem;
}

.no-data .text-tips {
  position: absolute;
  top: 6.97333rem;
   100%;
  text-align: center;
  font-size: 0.4rem;
  font-weight: 500;
  color: #313131;
  line-height: 0.66667rem;
}

.no-data .no-data-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 9.64rem;
   9.46667rem;
  height: 1.33333rem;
  background: #5ecabe;
  border-radius: 50px;
  text-align: center;
  line-height: 1.33333rem;
  color: white;
  font-size: 0.50667rem;
}

.no-data-open {
  display: block;
}

切页面，最核心的，就是css布局了。以及class命名之类的。