CampusBookConnect/src/app/request/request.page.html

<!-- <ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>request</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">我的请求</ion-title>
    </ion-toolbar>
  </ion-header>
</ion-content> -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>我的请求</ion-title>
  </ion-toolbar>
</ion-header>
<!-- <ion-content>
  <ion-card>
    <ion-card-content>
      <ion-item lines="none">
        <div class="touxiang">
          <ion-avatar slot="start">
            <img src="assets/touxiang.png">
          </ion-avatar>
        </div>
        <ion-label>
          <h2>用户名</h2>
          <p>手机号</p>
        </ion-label>
      </ion-item>
    </ion-card-content>
  </ion-card>
</ion-content> -->

<ion-content class="ion-padding">
  
  <div class="book-info">
    <img src="assets/音乐会曲.jpg" alt="Book Image">
    <div class="book-details">
      <h2>书名</h2>
      <p class="author">作者</p>
      <p class="publisher">出版社</p>
      <p>其他图书信息</p>
    </div>
  </div>

  <ion-card class="full-width-card">
  <div class="user-info">
    <ion-item lines="full">
      <ion-label style="font-size: 20px;">基本信息</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>收件人</ion-label>
      <ion-input type="text" placeholder="请输入收件人" slot="end" style="text-align: right;"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>地址</ion-label>
      <ion-input type="text" placeholder="请输入取书地" slot="end" style="text-align: right;"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>手机号码</ion-label>
      <ion-input type="tel" placeholder="请输入手机号码" slot="end" style="text-align: right;"></ion-input>
    </ion-item>

    <ion-item lines="none">
      <ion-label>备注</ion-label>
    </ion-item>
    
    <ion-item lines="none">
      <ion-card color="light" style="margin-left: 0px;margin-top: 0px;width: 100%;">
        <ion-textarea placeholder="备注" (input)="updateCharacterCount($event)"></ion-textarea>
        <div class="character-count">0/50</div>
      </ion-card>
    </ion-item>
  </div>
  </ion-card>
  <!-- <ion-button expand="block" color="success" (click)="submitOrder()">提交订单</ion-button> -->
  <ion-button id="present-alert" expand="block" color="success">提交订单</ion-button>
  <ion-alert
    trigger="present-alert"
    header="确认订单！"
    [buttons]="alertButtons">
  </ion-alert>
</ion-content>