ionic4学习笔记15-某东项目个人中心

野性酷女 2023-02-20 10:49 84阅读 0赞

1、html代码

<ion-content>
    
      
    
    
      <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代码 无