新增我的

projects/live-app/src/moduls/tabs/home/home.component.scss

@@ -1,5 +1,6 @@
 .content {
   --padding-bottom: 100px;
+  --background: #f8f8f8;
   .header {
     padding: 10px;
     background: #fd6f6a;

projects/live-app/src/moduls/tabs/my/my.component.html

@@ -48,10 +48,108 @@
     </div>
   </div>
   <div class="ad">
-    <div class="text">爱聊 <span>VIP</span></div>
-    <p>开通爱聊VIP，解锁海量专属主播聊天。</p>
+    <div class="ad-left">
+      <div class="text">爱聊 <span>VIP</span></div>
+      <p>开通爱聊VIP，解锁海量专属主播聊天。</p>
+    </div>
     <div class="btn">立即开通</div>
   </div>
   <div class="tool">
+    @for (item of tools; track $index) {
+    <div class="tool-li">
+      <div class="icon">
+        <img [src]="item.icon" alt="" />
+      </div>
+      <div class="label">
+        {{ item.title }}
+      </div>
+    </div>
+    }
+  </div>
+  <div class="order">
+    <div class="ladder">
+      <div class="top-block">
+        <div class="top2">
+          <div class="user-block">
+            <div class="user-avatar">
+              <img src="/img/2.png" alt="" class="tag" />
+              <img [src]="user?.get('avatar')" class="avatar" alt="" />
+            </div>
+            <div class="user-name">
+              {{ user?.get("name") }}
+            </div>
+          </div>
+          <div class="user-detail">
+            <div class="num">7.66</div>
+            <div class="pm">TOP2</div>
+          </div>
+        </div>
+        <div class="top1">
+          <div class="user-block">
+            <div class="user-avatar">
+              <img src="/img/2.png" alt="" class="tag" />
+              <img [src]="user?.get('avatar')" class="avatar" alt="" />
+            </div>
+            <div class="user-name">
+              {{ user?.get("name") }}
+            </div>
+          </div>
+          <div class="user-detail">
+            <div class="num">7.66</div>
+            <div class="pm">TOP1</div>
+          </div>
+        </div>
+        <div class="top3">
+          <div class="user-block">
+            <div class="user-avatar">
+              <img src="/img/2.png" alt="" class="tag" />
+              <img [src]="user?.get('avatar')" class="avatar" alt="" />
+            </div>
+            <div class="user-name">
+              {{ user?.get("name") }}
+            </div>
+          </div>
+          <div class="user-detail">
+            <div class="num">7.66</div>
+            <div class="pm">TOP2</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    @for (item of [user,user]; track $index) {
+    <div class="row">
+      <div class="row-left">
+        <span class="row-index">4</span>
+        <img [src]="item?.get('avatar')" alt="" class="row-avatar" />
+        <div class="row-name">{{ item?.get("name") }}</div>
+      </div>
+      <div class="row-right">
+        <div class="row-tpis">距离第一名</div>
+        <div class="row-tpis-num">3.5w <span></span></div>
+      </div>
+    </div>
+    }
+  </div>
+  <div class="setting">
+    <div class="setting-tabs">
+      <div class="row">
+        <div class="tabs-left">
+          <ion-icon name="remove-circle-outline"></ion-icon>
+          勿扰开关
+        </div>
+        <ion-toggle [checked]="true" color="tertiary"></ion-toggle>
+      </div>
+    </div>
+    <div class="list">
+      @for (item of settings; track $index) {
+      <div class="li">
+        <div class="li-lable">
+          <img [src]="item.icon" alt="" class="icon" />
+          {{ item.title }}
+        </div>
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+      </div>
+      }
+    </div>
   </div>
 </ion-content>

projects/live-app/src/moduls/tabs/my/my.component.scss

@@ -1,5 +1,6 @@
 .content {
   --padding-bottom: 100px;
+  --background: #f8f8f8;
   .header {
     padding: 10px;
     background: #fd6f6a;
@@ -91,12 +92,237 @@
       }
     }
   }
-  .ad{
+  .ad {
     display: flex;
-    padding: 10px;
-    font-size: 14px;
-    .text{
+    align-items: center;
+    padding: 6px 10px;
+    font-size: 12px;
+    border-radius: 2px;
+    margin: -4px auto 0;
+    background-image: url(/img/ad-banner.png);
+    background-size: 100% 100%;
+    width: 360px;
+    .ad-left {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      .text {
+        display: flex;
+        font-size: 14px;
+        font-weight: 600;
+        span {
+          background: linear-gradient(to left, #ff848a, rgb(255 199 202 / 71%));
+          color: white;
+          padding: 0px 4px;
+          font-size: 12px;
+          border-radius: 4px;
+          height: 18px;
+          line-height: 18px;
+          margin: 0 4px;
+        }
+      }
+      p {
+        color: #666666;
+      }
+    }
+    .btn {
+      background: white;
+      color: #ed3f38;
+      padding: 2px 4px;
+      border-radius: 4px;
+    }
+  }
+  .tool {
+    display: flex;
+    align-items: center;
+    padding: 6px 10px;
+    font-size: 12px;
+    justify-content: space-evenly;
+    border-radius: 2px;
+    background: #fff;
+    width: 360px;
+    margin: 10px auto;
+    border-radius: 10px;
+    color: #808080;
+    .tool-li {
       display: flex;
+      flex-direction: column;
+      align-items: center;
+      img {
+        width: 30px;
+        height: 30px;
+      }
     }
   }
+  .order {
+    width: 360px;
+    margin: 10px auto;
+    background-image: url(/img/用户榜底.png);
+    background-size: 100% 100%;
+    height: 220px;
+    padding: 6px 30px;
+    border-radius: 20px;
+    .ladder {
+      position: relative;
+      height: 120px;
+      width: 200px;
+      margin: 10px auto;
+      .top-block {
+        display: flex;
+        justify-content: space-evenly;
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 9;
+        align-items: self-end;
+        .top1,
+        .top2,
+        .top3 {
+          width: 60px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          .user-detail {
+            font-size: 12px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+          }
+          .pm {
+            font-weight: 600;
+            color: white;
+          }
+          .num {
+            color: #ffb63f;
+          }
+          .user-block {
+            font-size: 10px;
+            margin-bottom: 10px;
+            .user-avatar {
+              width: 40px;
+              height: 40px;
+              position: relative;
+              .tag {
+                position: absolute;
+                right: -7px;
+                top: -6px;
+                width: 20px;
+              }
+              .avatar {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+        }
+        .top1 {
+          margin-bottom: 20px;
+          .num {
+            color: #ffffb9;
+          }
+        }
+      }
+    }
+    .ladder::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 70px;
+      background-image: url(/img/top.png);
+      background-size: 100% 100%;
+    }
+    .row {
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 6px;
+      color: #999999;
+      .row-left {
+        display: flex;
+        align-items: center;
+        .row-avatar {
+          width: 30px;
+          height: 30px;
+          margin: 0 4px;
+        }
+      }
+      .row-right {
+        display: flex;
+        .row-tpis-num {
+          color: #f7931e;
+          display: flex;
+          align-items: center;
+          span {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background-color: #f7931e;
+            margin-left: 4px;
+          }
+        }
+      }
+    }
+  }
+  .setting{
+    width: 360px;
+    margin: 0 auto;
+    font-size: 14px;
+    .setting-tabs{
+      background: white;
+      border-radius: 10px;
+      .row{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px 10px;
+        .tabs-left{
+          display: flex;
+          align-items: center;
+          ion-icon{
+            font-size: 22px;
+            color: #e7435c;
+          }
+        }
+      }
+      ion-toggle{
+        --handle-height:14px;
+        --handle-width:14px;
+      }
+    }
+    .list{
+      background: white;
+      border-radius: 10px;
+      padding: 4px 10px;
+      margin: 10px auto;
+      .li{
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+        .li-lable{
+          display: flex;
+          align-items: center;
+          .icon{
+            width: 18px;
+            height: 16px;
+            margin-right: 10px;
+          }
+        }
+        ion-icon{
+          color: #666666;
+        }
+      }
+    }
+  }
+}
+ion-toggle::part(track),
+ion-toggle.toggle-checked::part(track) {
+  height: 20px;
+  width: 40px;
+  overflow: visible;
 }

projects/live-app/src/moduls/tabs/my/my.component.ts

@@ -11,11 +11,59 @@ import * as Parse from 'parse';
   imports: [IonicModule],
 })
 export class MyComponent implements OnInit {
-  user?:Parse.Object = Parse.User.current()
-  constructor() { }
-
+  user?: Parse.Object = Parse.User.current();
+  constructor() {}
+  tools: Array<{ icon: string; title: string }> = [
+    {
+      icon: '/img/钱包.png',
+      title: '钱包',
+    },
+    {
+      icon: '/img/相册.png',
+      title: '相册',
+    },
+    {
+      icon: '/img/邀请.png',
+      title: '邀请',
+    },
+    {
+      icon: '/img/设置.png',
+      title: '设置',
+    },
+  ];
+  settings: Array<{ icon: string; title: string; path: string }> = [
+    {
+      icon: '/img/成为主播.png',
+      title: '成为主播',
+      path: '',
+    },
+    {
+      icon: '/img/隐私.png',
+      title: '隐私协议',
+      path: '',
+    },
+    {
+      icon: '/img/意见反馈.png',
+      title: '意见反馈',
+      path: '',
+    },
+    {
+      icon: '/img/在线客服.png',
+      title: '在线客服',
+      path: '',
+    },
+    {
+      icon: '/img/直播协议.png',
+      title: '直播协议',
+      path: '',
+    },
+    {
+      icon: '/img/退出登录.png',
+      title: '退出登录',
+      path: '',
+    },
+  ];
   ngOnInit() {
     console.log(this.user);
   }
-
 }