ionic4学习笔记14-某东项目购物车列表

蔚落 2023-02-20 10:49 10阅读 0赞

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