ionic4學習筆記15-某東項目個人中心

1、html代碼

<ion-content>

  <!-- <div class="user_top">
      <div class="user_left">
          <img src="/assets/user.png">
      </div>
      <div class="user_right">
          <h4>用戶名:zhangsan</h4>
          <p>普通會員</p>  
      </div>        
  </div> -->


  <div class="user_top">
      <div class="user_left">
          <img src="/assets/user.png">
      </div>
      <div class="user_right">          
          <p>登錄/註冊  <ion-icon slot="start" name="arrow-forward"></ion-icon></p>  
      </div>        
  </div>


  <ion-list class="user_list">
    <ion-item-divider>
     </ion-item-divider>
    <ion-item>     
      <ion-icon name="copy-sharp" slot="start" color="danger"></ion-icon>
      <span>全部訂單</span>
    </ion-item>
    <ion-item>
      <ion-icon name="card" slot="start" color="success"></ion-icon>
      <span> 待付款</span>
    </ion-item>
    <ion-item lines="none">
      <ion-icon name="subway" slot="start" color="warning"></ion-icon>
      <span>待收貨</span>
    </ion-item>

    <ion-item-divider>
    </ion-item-divider>
    <ion-item>
      <ion-icon name="star-sharp" slot="start" color="tertiary"></ion-icon>
      <span>我的收藏</span>
    </ion-item>
    <ion-item>
      <ion-icon name="people" slot="start" color="secondary"></ion-icon>
      <span>在線客服</span>
    </ion-item>
  </ion-list>
</ion-content>

2、CSS

.user_top{

    background: url('/assets/user_bg.jpg') no-repeat center center / 100% 100%;
 
    color: #fff;
 
    padding: 3rem 1rem;
 
    display: flex;
    align-items: center;
 
    .user_left{
 
         width: 5rem;
 
         img{
             width: 5rem;
             height: 5rem;
             border-radius: 5rem;
         }
    }
 
    .user_right{
 
         flex: 1px;
 
         padding-left: 1rem;
 
         font-size: 1.4rem;
         h4{
 
             font-size: 1.6rem;
         }
 
         ion-icon{
             position: relative;
             top:.2rem;
         }
    }
 
 }
 
 
 
 
 ion-item-divider{
 
     min-height: 1rem!important;
 }
 
 .user_list{
 
     ion-icon{
 
         font-size: 1.8rem;
     }
 
     span{
 
         font-size: 1.6rem;
     }
 }

3、ts代碼 無