ionic4學習筆記14-某東項目購物車列表

1、html頁面內容

<ion-content>
  <dl class="cart_list">
    <dt>
      <ion-checkbox color="danger"></ion-checkbox>
      <div class="img">

        <img src="assets/03.jpg" />
      </div>
    </dt>
    <dd>
      <h2 class="cart_title">這是一個商品標題這是一個商品標題這是一個商品標題</h2>
      <div class="cart_info">
        <div class="cart_price price">
          ¥100元
        </div>
        <div class="cart_num">
          <div class="input_left">-</div>
          <div class="input_center">
            <input type="text" readonly="readonly" value="1" name="num" id="num" />
          </div>
          <div class="input_right">+</div>
        </div>
      </div>
    </dd>
  </dl>

  <dl class="cart_list">
    <dt>
      <ion-checkbox color="danger"></ion-checkbox>
      <div class="img">

        <img src="assets/01.jpg" />
      </div>
    </dt>
    <dd>
      <h2 class="cart_title">這是一個商品標題這是一個商品標題這是一個商品標題</h2>
      <div class="cart_info">
        <div class="cart_price price">
          ¥100元
        </div>
        <div class="cart_num">
          <div class="input_left">-</div>
          <div class="input_center">
            <input type="text" readonly="readonly" value="1" name="num" id="num" />
          </div>
          <div class="input_right">+</div>
        </div>
      </div>
    </dd>
  </dl>
  <dl class="cart_list">
    <dt>
      <ion-checkbox color="danger"></ion-checkbox>
      <div class="img">

        <img src="assets/02.jpg" />
      </div>
    </dt>
    <dd>
      <h2 class="cart_title">這是一個商品標題這是一個商品標題這是一個商品標題</h2>
      <div class="cart_info">
        <div class="cart_price price">
          ¥100元
        </div>
        <div class="cart_num">
          <div class="input_left">-</div>
          <div class="input_center">
            <input type="text" readonly="readonly" value="1" name="num" id="num" />
          </div>
          <div class="input_right">+</div>
        </div>
      </div>
    </dd>
  </dl>
  <dl class="cart_list">
    <dt>
      <ion-checkbox color="danger"></ion-checkbox>
      <div class="img">

        <img src="assets/04.jpg" />
      </div>
    </dt>
    <dd>
      <h2 class="cart_title">這是一個商品標題這是一個商品標題這是一個商品標題</h2>
      <div class="cart_info">
        <div class="cart_price price">
          ¥100元
        </div>
        <div class="cart_num">
          <div class="input_left">-</div>
          <div class="input_center">
            <input type="text" readonly="readonly" value="1" name="num" id="num" />
          </div>
          <div class="input_right">+</div>
        </div>
      </div>
    </dd>
  </dl>


</ion-content>



<ion-footer>

  <ion-toolbar>

    <ion-buttons slot="start" class="checkout_info">
      <ion-checkbox color="danger"></ion-checkbox>全選

      <strong>合計：<span class="price">¥2000</span></strong>
    </ion-buttons>


    <ion-buttons slot="end" class="checkout_btn">
      <ion-button color="danger" fill="solid">
        去結算
      </ion-button>
    </ion-buttons>
  </ion-toolbar>

2、CSS

.cart_list{

    display: flex;
    padding: .5rem;    
    border:1px solid #eee;

    dt{

        width: 8rem;
        height: 7rem;       
        display: flex;
        align-items: center;
        ion-checkbox{
            width: 2rem;
            height: 2rem;
        }

        .img{

            flex: 1;

            padding: .5rem;
            img{
                width: 100%;
                height: 6rem;
            }

        }


    }


    dd{
        flex:1;      
        .cart_title{

            font-size: 1.4rem;
            height: 4rem;
        
            line-height: 1.5;
        }

        .cart_info{

            height: 3rem;
            

            display: flex;
            .cart_price{
                flex: 1;
                font-size: 1.4rem;

                height: 2.4rem;

                line-height: 2.4rem;
            }

            .cart_num{
                width: 8rem;
                display: flex;                
                .input_left,.input_right{

                    width: 2.4rem;
                    height: 2.4rem;
                    line-height: 2.4rem;
                    background: #eee;
                    border:1px solid #eee;
                    text-align: center;
                    font-size: 1.8rem;

                }

                .input_center{

                    flex: 1;

                    input{

                        width: 100%;
                        height: 2.4rem;
                        line-height: 2.4rem;
                        text-align: center;
                        border:1px solid #eee;
                    }
                }
            }

            
        }

        


    }

}

.checkout_info{

    ion-checkbox{
        width: 2rem;
        height: 2rem;

        padding-right: .3rem;
    }

    strong{

        padding-left: .6rem;
        font-size: 1.6rem;
    }
}

.checkout_btn{
    ion-button{
        font-size: 1.4rem;
    }
   
}

global.css

  .price{

    color: red;
  }

3、ts代碼 無