README/tab2.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start" style="width: auto; margin-left: 30px;">
      <ion-button>
        <ion-icon name="home"></ion-icon>
        <p style="font-weight: bold; 
        font-style: italic; 
        font-size: 15px;">匹配大厅</p>
      </ion-button>
    </ion-buttons>

    <ion-title>
      <div class="parent">
        <div class="child">
          <ion-icon name="newspaper"></ion-icon>
          <p>公告</p>
        </div>
        <div class="child">
          <ion-icon name="briefcase"></ion-icon>
          <p>背包</p>
        </div>
        <div class="child">
          <ion-icon name="card"></ion-icon>
          <p>通行证</p>
        </div>
        <div class="child">
          <ion-icon name="trophy"></ion-icon>
          <p>赛事</p>
        </div>
        <div class="child">
          <ion-icon name="cart"></ion-icon>
          <p>商店</p>
        </div>
      </div>
    </ion-title>
  </ion-toolbar>
</ion-header>


  <ion-card class="duiwu">
      <div class="left">
        <ion-icon name="person-circle"></ion-icon>
        <p>玩家</p>
      </div>
      <div class="center">
        <ion-icon name="diamond"></ion-icon>
        <p>无畏钻石</p>
      </div>
      <div class="right">
        <ion-icon name="add"></ion-icon>
        <ion-icon name="shoe"></ion-icon>
        <ion-icon name="alert"></ion-icon>
      </div>
  </ion-card>
  <ion-card class="duiwu">
    <div class="left">
      <ion-icon name="person-circle"></ion-icon>
      <p>玩家</p>
    </div>
    <div class="center">
      <ion-icon name="diamond"></ion-icon>
      <p>无畏钻石</p>
    </div>
    <div class="right">
      <ion-icon name="add"></ion-icon>
      <ion-icon name="shoe"></ion-icon>
      <ion-icon name="alert"></ion-icon>
    </div>
</ion-card>
<ion-card class="duiwu">
  <div class="left">
    <ion-icon name="person-circle"></ion-icon>
    <p>玩家</p>
  </div>
  <div class="center">
    <ion-icon name="diamond"></ion-icon>
    <p>无畏钻石</p>
  </div>
  <div class="right">
    <ion-icon name="add"></ion-icon>
    <ion-icon name="shoe"></ion-icon>
    <ion-icon name="alert"></ion-icon>
  </div>
</ion-card>
<ion-card class="duiwu">
  <div class="left">
    <ion-icon name="person-circle"></ion-icon>
    <p>玩家</p>
  </div>
  <div class="center">
    <ion-icon name="diamond"></ion-icon>
    <p>无畏钻石</p>
  </div>
  <div class="right">
    <ion-icon name="add"></ion-icon>
    <ion-icon name="shoe"></ion-icon>
    <ion-icon name="alert"></ion-icon>
  </div>
</ion-card>
<ion-card class="duiwu">
      <div class="left">
        <ion-icon name="person-circle"></ion-icon>
        <p>玩家</p>
      </div>
      <div class="center">
        <ion-icon name="diamond"></ion-icon>
        <p>无畏钻石</p>
      </div>
      <div class="right">
        <ion-icon name="add"></ion-icon>
        <ion-icon name="shoe"></ion-icon>
        <ion-icon name="alert"></ion-icon>
      </div>
  </ion-card>



<div class="content-container">
  <ion-content>
    <div class="top-section2">
      <div class="left2">
        <ion-button expand="block">竞技</ion-button>
      </div>
      <div class="middle2">
        <img src="assets/img/a.png" style="width: 200px; height: 150px;"  alt="">
        <p>VS</p>
      </div>
      <div class="right2">
        <ion-button expand="block">娱乐</ion-button>
      </div>
    </div>
  </ion-content>
</div>