homework/src/app/tab4/tab4.page.html

<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<ion-header>
  <ion-toolbar>
      <ion-title>我的</ion-title>
      <ion-button slot="end" fill="outline" (click)="selectLanguage()">
        <ion-label>设置语言</ion-label>
      </ion-button>
      
      <ion-button  slot="end" fill="outline" (click)="goToedit()">
        <ion-label>编辑资料</ion-label>
      </ion-button>
  </ion-toolbar>
</ion-header>
<ion-content>

    <ion-card-content>
      <ion-avatar style="margin-left:15px;margin-top:15px; transform:scale(1.8)">
        <img src="https://img.wxcha.com/m00/f3/29/09c159ce965c65015c22807a9b09299f.jpg?down" >
      </ion-avatar>
      <ion-card-content>
        <p *ngIf="!user?.id" (click)="goToLogin()" style="margin-left:10px;margin-top:15px;font-size:20px"> 111</p>
        <p  style="margin-left:10px;margin-top:30px;font-size:20px">粉丝 10 喜欢 20 关注 59</p>
      </ion-card-content>
    </ion-card-content>

    <ion-card>
      <ion-item lines="none">
        <ion-label>欢迎来到金淘拼</ion-label>
        <ion-button>欢迎</ion-button>
      </ion-item>
      <ion-item lines="none">
        <ion-label >在金淘拼这个大家族里，每个人都有自己的位置</ion-label>
        <ion-button>打招呼</ion-button>
      </ion-item>
      <ion-item lines="none">
        <ion-label>给予您最优质的服务</ion-label>
        <ion-button>服务键</ion-button>
      </ion-item>
      <ion-item lines="none">
        <ion-label>可以帮助大家写攻略哦</ion-label>
        <!-- <ion-button slot="end" fill="outline">写攻略</ion-button> -->
        <ion-button>写攻略</ion-button>
      </ion-item>
    </ion-card>
    <style>
      .carousel-container {
          display: flex;
          overflow: hidden;
          width: 100%;
      }
      
      .carousel {
          display: flex;
          animation: scroll 10s linear infinite;
      }
      
      .card {
          flex: 0 0 200px;
          height: 150px;
          margin: 10px;
          background-color: #f0f0f0;
          border-radius: 5px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      
      @keyframes scroll {
          0% {
              transform: translateX(0);
          }
          100% {
              transform: translateX(-100%);
          }
      }
  </style>
  <div class="carousel-container">
    <div class="carousel">
        <div class="card">
          <ion-card>
            <img src="http://www.lueasygi.com/uploadimg/upeditor/image/20180424/1524560031133983.jpg">
          </ion-card>
        </div>
        <div class="card">
          <ion-card>
            <img src="http://www.lueasygi.com/uploadimg/upeditor/image/20180424/1524560031133983.jpg">
          </ion-card>
        </div>
        <div class="card">
          <ion-card>
            <img src="http://www.lueasygi.com/uploadimg/upeditor/image/20180424/1524560031133983.jpg">
          </ion-card>
        </div>
        <div class="card">
          <ion-card>
            <img src="http://www.lueasygi.com/uploadimg/upeditor/image/20180424/1524560031133983.jpg">
          </ion-card>
        </div>
        <div class="card">
          <ion-card>
            <img src="http://www.lueasygi.com/uploadimg/upeditor/image/20180424/1524560031133983.jpg">
          </ion-card>
        </div>
        <div class="card">
          <ion-card>
            <img src="http://www.lueasygi.com/uploadimg/upeditor/image/20180424/1524560031133983.jpg">
          </ion-card>
        </div>
        <div class="card">
          <ion-card>
            <img src="http://www.lueasygi.com/uploadimg/upeditor/image/20180424/1524560031133983.jpg">
          </ion-card>
        </div>
        <div class="card">
          <ion-card>
            <img src="http://www.lueasygi.com/uploadimg/upeditor/image/20180424/1524560031133983.jpg">
          </ion-card>
        </div>
        <div class="card"></div>
        <div class="card"></div>
    </div>