tab2.page.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <ion-header [translucent]="true">
  2. <ion-toolbar>
  3. <ion-buttons slot="start" style="width: auto; margin-left: 30px;">
  4. <ion-button>
  5. <ion-icon name="home"></ion-icon>
  6. <p style="font-weight: bold;
  7. font-style: italic;
  8. font-size: 15px;">匹配大厅</p>
  9. </ion-button>
  10. </ion-buttons>
  11. <ion-title>
  12. <div class="parent">
  13. <div class="child">
  14. <ion-icon name="newspaper"></ion-icon>
  15. <p>公告</p>
  16. </div>
  17. <div class="child">
  18. <ion-icon name="briefcase"></ion-icon>
  19. <p>背包</p>
  20. </div>
  21. <div class="child">
  22. <ion-icon name="card"></ion-icon>
  23. <p>通行证</p>
  24. </div>
  25. <div class="child">
  26. <ion-icon name="trophy"></ion-icon>
  27. <p>赛事</p>
  28. </div>
  29. <div class="child">
  30. <ion-icon name="cart"></ion-icon>
  31. <p>商店</p>
  32. </div>
  33. </div>
  34. </ion-title>
  35. </ion-toolbar>
  36. </ion-header>
  37. <ion-card class="duiwu">
  38. <div class="left">
  39. <ion-icon name="person-circle"></ion-icon>
  40. <p>玩家</p>
  41. </div>
  42. <div class="center">
  43. <ion-icon name="diamond"></ion-icon>
  44. <p>无畏钻石</p>
  45. </div>
  46. <div class="right">
  47. <ion-icon name="add"></ion-icon>
  48. <ion-icon name="shoe"></ion-icon>
  49. <ion-icon name="alert"></ion-icon>
  50. </div>
  51. </ion-card>
  52. <ion-card class="duiwu">
  53. <div class="left">
  54. <ion-icon name="person-circle"></ion-icon>
  55. <p>玩家</p>
  56. </div>
  57. <div class="center">
  58. <ion-icon name="diamond"></ion-icon>
  59. <p>无畏钻石</p>
  60. </div>
  61. <div class="right">
  62. <ion-icon name="add"></ion-icon>
  63. <ion-icon name="shoe"></ion-icon>
  64. <ion-icon name="alert"></ion-icon>
  65. </div>
  66. </ion-card>
  67. <ion-card class="duiwu">
  68. <div class="left">
  69. <ion-icon name="person-circle"></ion-icon>
  70. <p>玩家</p>
  71. </div>
  72. <div class="center">
  73. <ion-icon name="diamond"></ion-icon>
  74. <p>无畏钻石</p>
  75. </div>
  76. <div class="right">
  77. <ion-icon name="add"></ion-icon>
  78. <ion-icon name="shoe"></ion-icon>
  79. <ion-icon name="alert"></ion-icon>
  80. </div>
  81. </ion-card>
  82. <ion-card class="duiwu">
  83. <div class="left">
  84. <ion-icon name="person-circle"></ion-icon>
  85. <p>玩家</p>
  86. </div>
  87. <div class="center">
  88. <ion-icon name="diamond"></ion-icon>
  89. <p>无畏钻石</p>
  90. </div>
  91. <div class="right">
  92. <ion-icon name="add"></ion-icon>
  93. <ion-icon name="shoe"></ion-icon>
  94. <ion-icon name="alert"></ion-icon>
  95. </div>
  96. </ion-card>
  97. <ion-card class="duiwu">
  98. <div class="left">
  99. <ion-icon name="person-circle"></ion-icon>
  100. <p>玩家</p>
  101. </div>
  102. <div class="center">
  103. <ion-icon name="diamond"></ion-icon>
  104. <p>无畏钻石</p>
  105. </div>
  106. <div class="right">
  107. <ion-icon name="add"></ion-icon>
  108. <ion-icon name="shoe"></ion-icon>
  109. <ion-icon name="alert"></ion-icon>
  110. </div>
  111. </ion-card>
  112. <div class="content-container">
  113. <ion-content>
  114. <div class="top-section2">
  115. <div class="left2">
  116. <ion-button expand="block">竞技</ion-button>
  117. </div>
  118. <div class="middle2">
  119. <img src="assets/img/a.png" style="width: 200px; height: 150px;" alt="">
  120. <p>VS</p>
  121. </div>
  122. <div class="right2">
  123. <ion-button expand="block">娱乐</ion-button>
  124. </div>
  125. </div>
  126. </ion-content>
  127. </div>