Design of mobile shopping payment interface

Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right

The design of the mobile shopping payment interface
looks like this

foreword

This is what I did with the project of the dark horse programmer, which contains some of my own experience

1. What did you use?

HTML5, CSS (including Flex)

Two, the code

1. HTML part

code show as below:

## 2.CSS样式

body {
    background-color: #f7f7f8;
}

/* 公共样式 */
.red{
    color: #cf4444;
}
/* 公共样式 */

/* 主体内容 */
.main{
    /* 设置下内边距或者下外边距80px的原因是为了当我们进入
    翻到最底下的时候，底下的内容不被固定定位导致脱标的pay内容遮住
    */
    padding: 12px 11px 80px;
}

.panel{
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
}

/* 用户信息 */
.main .user_msg{
    display: flex;
    align-items: center;
    padding: 15px 0 14px 11px;
}

.main .location{
    width: 30px;
    height: 30px;
    background-image: linear-gradient(90deg, 
    #6fc2aa 5%, 
    #54b196 100%);
    border-radius: 50%;
    margin-right: 10px;
    text-align: center;
    line-height: 30px;
    color: #fff;
}

.main .user_msg .user{
    flex: 1;
    /* 
    flex：整数 ，表示占用父级剩余尺寸的份数
    */
}

.main .user_msg .user .top{
    display: flex;
    font-size: 15px;
    line-height: 15px;
}

.main .user_msg .user .top h5{
    width: 55px;
}

.main .user_msg .user .buttom{
    margin-top: 5px;
    font-size: 12px;
}

.main .more{
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    /* background-color: pink; */
    color: #808080;
}

/* 商品 */
.goods{
    display: flex;
    align-items: center;
    padding: 11px 0 11px 11px;
}

.goods .pic{
    width: 85px;
    height: 85px;
    margin-right: 10px;
}

.goods .info{
    flex: 1;
}

.goods .info h5{
    font-size: 13px;
    color: #262626;
    /* 控制不加粗 */
    font-weight: 400;
}

.goods .info p{
    width: 98px;
    height: 20px;
    margin: 5px 0;
    background-color: #f7f7f8;
    font-size: 12px;
}

.goods .info p span:first-child{
    margin-right: 5px; 
}

.goods .info .price{
    font-size: 12px;
}

.goods .info .price i{
    font-size: 16px;
}

.goods .info .price span:last-child{
    margin-left: 5px;
    color: #999;
    text-decoration: line-through;
}

.goods .count{
    width: 44px;
    height: 44px;
    /* background-color: pink; */
    text-align: center;
    line-height: 44px;
}

/* 其它信息 */
.rest{
    padding: 15px ;
}

.rest div{
    display: flex;
    margin-bottom: 30px;
}

.rest div:last-child{
    margin-bottom: 0;
}

/* 找到第一个和第三个div，设置主轴对齐方式 */
.rest div:nth-child(2n+1){
    justify-content: space-between;
}

.rest div:nth-child(2) h5{
    margin-right: 20px;
}

.rest h5,
.rest p
{
    font-size: 13px;
    color: #262626;
    font-weight: 400;
}

.rest div:nth-child(2) p{
    font-size: 12px;
    color:#989898
}

.rest div:nth-child(3) p{
    line-height: 13px;
}

/* 快递信息 */
.kuaidi{
    padding:15px;
}
.kuaidi div{
    display: flex;
    margin-bottom: 30px;
}

.kuaidi div:last-child{
    margin-bottom: 0;
}

.kuaidi div{
    justify-content: space-between;
    color: #262626;
    font-size: 13px;
}
/* 主体内容 */

/* 底部支付 */
.pay{
    /* 底部支付需要固定定位 */
    position: fixed;
    /* 正常而言，定位一般使用子绝父相，但是
    固定定位是不需要设置父元素定位的 */
    left: 0;
    bottom: 0;
    /* 正常而言，不设置宽度的话就会和父元素的宽度一样
    但是固定定位脱标了，它的宽度就会由内容撑开
    所以需要设置100%的宽度来保证它和父元素的宽度一致
    */
    display: flex;
    /* 主轴对齐 */
    justify-content: space-between;
    /* 侧轴对齐 */
    align-items: center;
    padding: 0 12px;
    width: 100%;
    height: 80px;
    /* background-color: pink; */
    border-top: 1px solid #ededed;
}   

.pay .left {
    font-size: 12px;
    /* 因为浏览器的最小字号就是12px */
}

.pay .left span{
    font-size: 20px;
}

.pay .right{
    display: block;
    width: 90px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border-radius: 3px;
    background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);      
    color: #fff;
}
/* 底部支付 */