74-案例-小兔仙确认订单

19-案例-小兔仙确认订单

lib文件夹 --- 》放字体，iconfont，框架，库等文件

手机端端网页 ---》 像素大厨 -- 》设计图模式选 2X ， ---》默认375px *813pt

页面最上面的时间和信号不用写代码，画红圈的不用写，从填写订单下面开始写

• 最下面这一行“去支付”要固定在浏览器下面。固定定位 position:fixed
• 盒子分成俩，上面一大块做滚轮-滑动查看，下面固定一条做支付。
• 数据，内容 要准备标签，未来链接数据库可以替换数据。
• 浏览器的最小字号是12px，所以设计图上字号小于12px的直接设置成12px
• 红色字体颜色可以设置一个公共样式
• 设计师给的图里有虚线框，代表这个区域是可以点的，右边的虚线框一般设置为44mm左右

/* 删除线 */ text-decoration: line-through;

小兔鲜-移动端-确认订单页面

html代码

    
    
    
    
    
    
    


    
    

        
       

            

                
            
            

                

                    
林丽
                    
18500667882
                
                

                    
北京市  海淀区  中关村软件园   信息科技大厦1号
                        楼410#   
                
            
            

                
            
       
       


       
       

            

                
                    
                
            
            

                
康尔贝 非接触式红外体温仪 
                    领券立减30元 婴儿级材质 测温…
                
粉色    红外体温计
                
                

                    ¥266
                    ¥299
                
            
            

                
                1
            

       
       


       
       
       
        

            

                
配送方式
                
顺丰快递
            
            

                
买家备注
                
希望可以尽快发货，谢谢～
            
            

                
支付方式
                
支付宝
            
        
       


       
        

            

                
商品总价
                ¥299.00
            

            

                
运费
                ¥0.00
            

            

                
折扣
                -¥30.00
            
        

       
    

    




    
    

       
       

        
        合计：¥266.00
       
       

        去支付
    
    

order.css代码

/* 主体内容：滑动查看 */
body {
    background-color: #f7f7f8;
}

/* 公共样式 */
.red {
    color: #cf4444;
}
/* 公共样式：面板pannel */
.pannel {
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
}



/* 主体内容：滑动查看 */
.main {
    /* 80px:为了内容不被底部区域盖住 */
    padding: 12px 11px 80px;
}
/* 用户信息区域 */
.user_msg {
    display: flex;
    /* 侧轴垂直居中 */
    align-items: center;
    padding: 15px 0 15px 11px;
}


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

.user_msg .user{
    flex: 1;
}


.user_msg .user .top{
    display: flex;
}


.user_msg .user .top h5 {
    width: 55px;
    font-size: 15px;
}

.user_msg .user .top p {
    font-size: 13px;
}

.user_msg .user .bottom p {
    font-size: 12px;
    margin-top: 5px;
    line-height: 18px;
}

.user_msg .more {
    width: 44px;
    height: 44px;
    /* background-color: pink; */
    text-align: center;
    line-height: 44px;
    color: #808080;
} 
/* 用户信息区域 */


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

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



.goods .info {
    flex: 1;
}

.goods .info h5 {
    font-size: 13px;
    line-height: 19px;
    font-weight: 400;
}

.goods .info p {
    width: 100px;
	height: 16px;
    margin: 5px 0;
    background-color: #f7f7f8;
	border-radius: 2px;
    font-size: 12px;
    color: #888888;

}

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

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


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


.goods .price span:last-child {
    font-size: 12px;
    color: #999999;
    margin-left: 5px;
    /* 删除线 */
    text-decoration: line-through;
}


.goods .count {
    width: 44px;
    height: 44px;
    margin-right: 5px;
    /* background-color: pink; */
    text-align: center;

}
/* 商品goods区域 */




/* rest其他模块 */
.rest {
    padding: 15px;
}

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

}

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

.rest h5,
p {
    font-size: 13px;
    /* 取消h5加粗 */
	font-weight: 400;
	line-height: 21px;
	color: #262626; 
}

.rest div:nth-child(2n) {
    display: flex;
}

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


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

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

.rest div:last-child .iconfont {
    margin-left: 10px;
    width: 7px;
	height: 11px;
    color: #808080;
    line-height: 11px;
}
/* rest其他模块 */



/* 商品总价 */
.total {
    padding: 15px;
}

.total div {
    display: flex;
    margin-bottom: 30px;
    justify-content: space-between;
}

.total div h5,
span {
    font-size: 13px;
    /* 取消h5加粗 */
	font-weight: 400;
	line-height: 21px;
	color: #262626; 
}

.total div i {
    font-style: normal;
}

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

/* 商品总价 */


/* 主体内容：滑动查看 */





/* 底部支付：固定定位 position:fixed */
.pay {
    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    /* 主轴对齐方式 */
    justify-content: space-between;
    /* 侧轴对齐方式 */
    align-items: center;
    width: 100%;
    height: 80px;

    padding: 0 11px;
    /* background-color: pink; */
    border-top: 1px solid #ededed;
}


.pay .left {
    font-size: 12px;
}


.pay .left i {
    font-size: 20px;
    /* i标签是斜体，加normal就取消斜体了 */
    font-style: normal;
}


.pay .right a {
    /* a标签是行内元素，一行可显示多个，由内容撑开，变成块元素能设置宽高 */
    display: block;
    width: 91px;
	height: 35px;
    /* 渐变背景 */
	background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);
    /* 圆角 */
	border-radius: 3px;

    /* 去除a标签的下划线 */
    text-decoration: none;
    /* 水平居中 */
    text-align: center;
    /* 垂直居中 */
	line-height: 35px;
    font-size: 13px;
	color: #ffffff;
}

/* 底部支付：固定定位 */

base.css代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    width: 100%;
}

代码运行效果图