myapp_lifevault/src/app/tab1/tab1.page.html

<!-- tab2.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-title>首页</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="home">
  
  <!-- 轮播图部分 -->
  <div class="carousel_map">
    <div class="slide">
      <!--小圆点-->
      <input type="radio" name="pic" id="pic1" checked/>
      <input type="radio" name="pic" id="pic2"/>
      <input type="radio" name="pic" id="pic3"/>
      <input type="radio" name="pic" id="pic4"/>
      
      <div class="labels">
        <label for="pic1"></label>
        <label for="pic2"></label>
        <label for="pic3"></label>
        <label for="pic4"></label>
      </div>
      
      <!--需要轮播的图片-->
      <ul class="list">
        <li class="item">
          <a href="###">
            <img src="assets/img/slide1.png" style="height: 100%; width: 100%;"/>
          </a>
        </li>
        <li class="item">
          <a href="###">
            <img src="assets/img/slide2.png" style="height: 100%; width: 100%;"/>
          </a>
        </li>
        <li class="item">
          <a href="###">
            <img src="assets/img/slide3.png" style="height: 100%; width: 100%;"/>
          </a>
        </li>
        <li class="item">
          <a href="###">
            <img src="assets/img/slide3.png" style="height: 100%; width: 100%;"/>
          </a>
        </li>
        <li class="item">
          <a href="###">
            <img src="assets/img/slide1.png" style="height: 100%; width: 100%;"/>
          </a>
        </li>
      </ul>
    </div>
  </div>
  
   
   
  <!-- 卡片1 -->
  <ion-card>
    <ion-card-header>
      常用工具
    </ion-card-header>
    <ion-card-content>
      <ion-button expand="block" color="primary" (click)="backupAlbum()">
        <ion-icon name="images"></ion-icon>
        相册备份
      </ion-button>
      <ion-button expand="block" color="primary" (click)="backupContacts()">
        <ion-icon name="people"></ion-icon>
        通讯录备份
      </ion-button>
      <ion-button expand="block" color="primary" (click)="restoreFiles()">
        <ion-icon name="document"></ion-icon>
        文件恢复
      </ion-button>
    </ion-card-content>
  </ion-card>

  <!-- 卡片2 -->
  <ion-card>
    <ion-card-header>
      热门工具
    </ion-card-header>
    <ion-card-content>
      <ion-button expand="block" color="secondary" (click)="cleanFiles()">
        <ion-icon name="trash"></ion-icon>
        文件清理
      </ion-button>
      <ion-button expand="block" color="secondary" (click)="scanDocuments()">
        <ion-icon name="scan"></ion-icon>
        文档扫码
      </ion-button>
      <ion-button expand="block" color="secondary" (click)="recognizeText()">
        <ion-icon name="text"></ion-icon>
        文字识别
      </ion-button>
    </ion-card-content>
  </ion-card>

  <!-- 右下角上传按钮 -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click)="uploadFiles()">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>