SOURCE

console 命令行工具 X clear

                    
>
console
<div class="phonePort">
  
  <div class="app-wrapper">
    <nav>
      <button class="nav-back-button">返回</button>
      <h3>交易训练</h3>
      <button class="nav-more-button">更多</button>
    </nav>
    <main>
      <header>
        <div class="balance-wrapper">
          <span class="title">资产总额</span>
          <span class="value">¥1,239,823</span>
        </div>
        <div class="profile-info-wrapper">
          <span class="avatar">
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3180783630,3325771437&fm=27&gp=0.jpg" />
            <span class="name">Ethan</span>
          </span>
        </div>
        <div class="score-wrapper">
          <span class="title">FDTScore</span>
          <span class="value">67.2</span>
        </div>
      </header>
      <div class="cards-wrapper">
        <div class="card">
          <span class="title">交易训练</span>
        </div>
        <div class="card">
          <span class="title">交易竞赛</span>
        </div>
        <div class="card">
          <span class="title">排行榜</span>
        </div>
        <div class="card">
          <span class="title">涨跌猜猜乐</span>
        </div>
      </div>
    </main>
  </div>

</div>
* {
  box-sizing: border-box;
}

.phonePort {
  position: relative;
  overflow: hidden;
  margin: 50px auto;
  width: 50%;
  height: 80vh;
  background-color: white;
}

.app-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-flow: column;
}

.app-wrapper nav {
  flex: 0 0 auto;
  height: 50px;
  width: 100%;
  background: #1D2558;
  display: flex;
  align-items: center;
}

.app-wrapper nav .nav-back-button {
  flex: 0 0 auto;
  height: 100%;
  width: 50px;
  background-color: lightgray;
}

.app-wrapper nav h3 {
  flex: 1 1 auto;
  height: 100%;
  color: white;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-wrapper nav .nav-more-button {
  visibility: hidden;
  flex: 0 0 auto;
  height: 100%;
  width: 50px;
}

.app-wrapper main {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-flow: column;
  flex-wrap: nowrap;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(7, 12, 40, 1.0);
}

.app-wrapper main header {
  width: 100%;
  height: 140px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.app-wrapper main header .balance-wrapper {
  width: 120px;
  height: 44px;
  border-radius: 0 22px 22px 0;
  background-color: rgba(32,36,61,1.0);
  flex: 0 0 auto;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-end;
  padding-right: 20px;
}

.app-wrapper main header .score-wrapper {
  width: 120px;
  height: 44px;
  border-radius: 22px 0 0 22px;
  background-color: rgba(32,36,61,1.0);
  flex: 0 0 auto;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 20px;
}

.app-wrapper main header .title {
  display: block;
  height: 16px;
  opacity: 0.6;
  font-family: SanFranciscoDisplay-Regular;
  font-size: 12px;
  color: #FFFFFF;
}

.app-wrapper main header .value {
  display: block;
  height: 16px;
  font-size: 12px;
  color: white;
}

.app-wrapper main header .profile-info-wrapper {
  flex-grow: 1 1 auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.app-wrapper main header .profile-info-wrapper .avatar {
  display: block;
  width: 70px;
  height: 70px;
  position: relative;
}

.app-wrapper main header .profile-info-wrapper .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  overflow: hidden;
  border: blue 1px solid;
  box-shadow: 0px 0px 30px blue;
}

.app-wrapper main header .profile-info-wrapper .avatar .name {
  position: absolute;
  bottom: -30px;
  font-size: 14px;
  color: white;
  display: block;
  width: 200px;
  text-align: center;
  left: -65px;
}

.app-wrapper main .cards-wrapper {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 5%;
}

.app-wrapper main .cards-wrapper .card {
  position: relative;
  width: 48%;
  height: 140px;
  margin-bottom: 14px;
  background-color: lightgreen;
}

.app-wrapper main .cards-wrapper .card .title {
  display: block;
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: white;
}