zoukankan      html  css  js  c++  java
  • 微信 小程序组件 加入购物车全套 one wxss

    //1,wxss

    /*外部容器*/
    .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    }
     
    /*整体列表*/
    .carts-list {
    display: flex;
    flex-direction: column;
    }
     
    /*每行单元格*/
    .carts-item {
    display: flex;
    flex-direction: row;
    height:220rpx;
    /*width属性解决标题文字太短而缩略图偏移*/
    100%;
    align-items: center;
    ">white;
    margin-bottom: 1px;
    }
    /* 对号图标 */
    .carts-choice{
    margin-right: 20rpx;
    margin-left: 24rpx;
    }
    /*左部图片*/
    .carts-image {
    160rpx;
    height:160rpx;
    margin-right: 20rpx;
    }
    .carts-image image{
    100%;
    height: 100%;
    }
     
     
    /*右上部分标题*/
    .carts-title {
    margin: 10rpx;
    font-size: 28rpx;
    }
     
    /*右下部分价格与数量*/
    .carts-subtitle {
    font-size: 25rpx;
    color:#ff3300;
    margin: 20rpx 0 20rpx;
    }
     
    /*加减号控制数量*/
    .stepper{
    display: flex;
    border-radius: 5px;
    text-align: center;
    }

    .stepper text{
    display: block;
    50rpx;
    height: 50rpx;
    border:1px solid #ddd;
    line-height: 50rpx;
    color: #cccccc;
    }
    .stepper text.normal{
    border:1px solid rgba(221,221,221,1);
    }
    .stepper text.disabled{
    border:1px solid rgba(221,221,221,0.3);
    }
    .stepper .number{
    80rpx;
    font-size: 28rpx;
    height: 50rpx;
    border: 1px solid #ddd;
    line-height: 50rpx;
    color: #333333;
    }
    .stepper text:first-child{
    border-right: none;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    }
    .stepper text:last-child{
    border-left: none;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    }
    .carts-list .delete{
    flex: 1;
    height: 100%;
    position: relative;
    }
    .delete-img{
    32rpx;
    height: 32rpx;
    position: absolute;
    right: 24rpx;
    bottom: 20rpx;
    }
    .delete-img image{
    100%;
    height: 100%;
    vertical-align: top;
    }

    /* 全选和区结算按钮 ********************************/
    /*底部按钮*/
    .carts-footer {
    100%;
    height: 120rpx;
    display: flex;
    /* flex-direction: row; */
    /* justify-content: space-between; */
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    ">white;
    }
     
    /*复选框*/
    .carts-footer icon {
    margin-left: 20rpx;
    margin-right: 15rpx;
    }
     
    /*全选字样*/
    .carts-footer text {
    font-size: 30rpx;
    margin-left: 8rpx;
    line-height: 10rpx;
    }
    .all-chioce{
    height: 100%;
    border-top: 1px solid #dddddd;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    justify-content: space-between;
    }
    .footer-left{
    190rpx;
    display: flex;
    align-items: center;
    }
    .footer-right{
    padding-right: 25rpx;
    flex: 1;
    direction: rtl;
    }
    .right-text{
    line-height: 80rpx;
    }
    .right-text text:last-child{
    color: #ff3300;
    }
    /* .right-text{ */
    /* margin-bottom: 10rpx; */
    /* } */
    .footer-right .free{
    font-size: 20rpx;
    color:#cccccc;
    }
    /*立即结算按钮*/
    .carts-footer .button {
    line-height: 120rpx;
    text-align: center;
    260rpx;
    height: 120rpx;
    ">#ff3300;
    color: white;
    font-size: 36rpx;
    border-radius: 0;
    border: 0;
    }
    /* 全选和区结算按钮 ********************************/

    /*复选框样式*/
    /* .carts-list icon {
    margin-top: 60rpx;
    margin-right: 20rpx;
    } */
  • 相关阅读:
    自己建二维obj
    微信webview
    闭包
    angular
    2015项目timeline
    项目总结
    aa
    AHA高级心血管生命支持ACLS课前自我评估测试
    BASH_SOURCE
    bootstrap--小李子demo
  • 原文地址:https://www.cnblogs.com/dianzan/p/7519946.html
Copyright © 2011-2022 走看看