SOURCE

<!--我的界面-->
<div class="main-index">
    <div class="wraper">
        <div class="top">
            <div class="top-left date-box">
                <!--<img class="main-icon" src="../../img/main/icon-calendar.png" alt="日历">-->
                <div class="inner-box">
                    <div class="month">
                        3月
                    </div>
                    <div class="date">
                        16
                    </div>
                </div>
            </div>
            <div class="top-right">
                <p class="content">习大大教导我们，“幸福是奋斗出来的！”</p>
                <p class="writer">——省考笔试班 徐梦圆</p>
            </div>
        </div>
        <div class="middle">
            <img class="line-vertical" src="https://s1.ax1x.com/2018/03/17/95zqud.png" alt="">
            <img class="line-horizontal" src="https://s1.ax1x.com/2018/03/17/95z7ge.png" alt="">
            <div class="shuati square">
                <img class="main-icon" src="https://s1.ax1x.com/2018/03/17/95zOHI.png" alt="">
                <p class="name">在线刷题</p>
            </div>
            <div class="mingshi square">
                <img class="main-icon" src="https://s1.ax1x.com/2018/03/17/95zT3D.png" alt="">
                <p class="name">名师课堂</p>
            </div>
            <div class="daka square">
                <img class="main-icon" src="https://s1.ax1x.com/2018/03/17/95zHjH.png" alt="">
                <p class="name">大咖专栏</p>
            </div>
            <div class="gongju square">
                <img class="main-icon" src="https://s1.ax1x.com/2018/03/17/95zLDA.png" alt="">
                <p class="name">试用工具</p>
            </div>
        </div>
        <div class="ui-footer ui-footer-btn daily-footer new-bank-footer bottom">
            <ul class="ui-tiled ui-border-t">
            <li class="ui-border-r zero-flex-horizontal item">首页</li>
            <li class="ui-border-r zero-flex-horizontal item">我的</li>
            <li class="ui-border-r zero-flex-horizontal item">关于机构</li>
            </ul>
        </div>
    </div>

</div>

textarea {
  width: 400px;
  height: 300px;
  font-size: 12px;
}
.main-index .wraper {
  padding: 1rem .5rem .5rem .5rem;
  width:20rem;
}
.main-index .wraper .top .top-left .main-icon {
  width: 60px;
  float: left;
}
.main-index .wraper .top .date-box {
  background: #f4f6f9;
  -webkit-border-radius: 10px;
  padding: 5px;
  float: left;
  margin-right: 30px;
  display: inline-block;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.main-index .wraper .top .date-box .inner-box {
  width: 60px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.main-index .wraper .top .date-box .inner-box .date {
  text-align: center;
  font-size: 23px;
  font-weight: bold;
}
.main-index .wraper .top .date-box .inner-box .month {
  border: 1px solid #ea685a;
  background: #ea685a;
  color: #fff;
  text-align: center;
  font-size: 13px;
}
.main-index .wraper .top .top-right {
  margin-left: 2rem;
}
.main-index .wraper .top .top-right .content {
  font-size: 18px;
  color: #506da9;
  letter-spacing: 3px;
}
.main-index .wraper .top .top-right .writer {
  font-size: 15px;
  color: #506da9;
  float: right;
}
.main-index .wraper .middle {
  width: 9rem;
  height: 10rem;
  margin-top: 50px;
  box-shadow: 0 0 15px #c5c5c5;
  border-radius: 10px;
  position: relative;
  text-align: center;
}
.main-index .wraper .middle .line-vertical {
  position: absolute;
  height: 10rem;
  top: 0;
  left: 4.5rem;
}
.main-index .wraper .middle .line-horizontal {
  position: absolute;
  left: 0;
  top: 5rem;
  width: 9rem;
}
.main-index .wraper .middle .square {
  width: 4.5rem;
  height: 5rem;
  float: left;
}
.main-index .wraper .middle .square .main-icon {
  width: 55px;
  height: 45px;
  margin-top: 2rem;
}
.main-index .wraper .middle .daka {
  clear: left;
}
.main-index .wraper .middle .main-icon {
  width: 54px;
}
.main-index .wraper .middle .name {
  font-size: 12px;
}
.main-index .wraper .bottom {
  background: #ffffff;
  color: black;
  position: fixed;
  bottom: 0;
  position: fixed;
  border: 1px solid #bfbfbf;
}
.main-index .wraper .bottom .item {
  font-size: 15px;
  border-right: 1px solid #bfbfbf;
}