当前位置：网站首页>【无标题】下单及支付

【无标题】下单及支付

2022-04-22 15:57:00 【xiexuzhao】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="/css/reset.css" rel="stylesheet" />
<link href="/css/common.css" rel="stylesheet" />
<link href="/css/style.css" rel="stylesheet" />
<link href="/css/toorder.css" rel="stylesheet" />
<style>
body{background-color:#f2f2f2;}
.Payment-From{ margin:0 auto;width:1200px;}
.Payment-From .Payment-Panel{}
.Payment-From .Payment-Panel .Payment-Panel-Tool{}
.Payment-From .Payment-Panel .Payment-Panel-Tool .Payment-Panel-Tool-Item{ width:180px;height:200px; background-color:red; margin: 5px 10px;line-height: 200px;text-align: center;color: #fff;border-radius: 20px;cursor: pointer;}
.Payment-From .Payment-Panel .Payment-Panel-Tool .Payment-Panel-Tool-Item:hover{background-color:orange;}
.Payment-From .Order-Panel{}
.Payment-From .Order-Panel .Order-Table{padding: 20px;background-color: #fff;border-radius: 20px;margin-top: 10px;}
.Payment-From .Order-Panel .Order-Table .Order-Table-Row{ height:60px;line-height:60px;}
.Payment-From .Order-Panel .Order-Table .Order-Table-Row .Order-Table-Row-Column{ height:60px;line-height:60px;width:250px; float:left;text-align: center;}
.Payment-From .Express-Panel{margin-top:10px; }
.Payment-From .Express-Panel .Express-Infor{}
.Payment-From .Express-Panel .Express-Infor .Express-Infor-Price{ height:40px;line-height:40px;border-radius: 12px;text-align: right;color: #666;background-color: #fff;font-size: 14px;}
.Payment-From .Express-Panel .Express-Infor .Express-Infor-Price .Express-Infor-PriceInfo{margin-left: 20px;margin-right: 20px; }
.Payment-From .ReciveUser-Panel{}
.Payment-From .ReciveUser-Panel .ReciveUser-Infor{padding: 20px 20px;}
.Payment-From .ReciveUser-Panel .ReciveUser-Infor .ReciveUser-Infor-Label{height:40px;line-height:40px;color: #666;}
.Payment-From .ReciveUser-Panel .ReciveUser-Infor .ReciveUser-Infor-Label .Label{width: 150px;font-size: 13px;}
.Payment-From .ReciveUser-Panel .ReciveUser-Infor .ReciveUser-Infor-Label .Control{}
.Payment-From .ReciveUser-Panel .ReciveUser-Infor .ReciveUser-Infor-Label .Control input{height: 28px;width:300px; text-indent: 10px;}
.Payment-From .Price-Panel{}
.Payment-From .Price-Panel .Price-Infor{}
.Payment-From .Price-Panel .Price-Infor .Payment-Btn{height: 40px;width: 100px; display: block;line-height: 40px;background-color: red;color: #fff;text-align: center;cursor: pointer;}
.Payment-From .Price-Panel .Price-Infor .Payment-Btn:hover{background-color: orange;}
.Payment-From .Price-Panel .Price-Infor .Price-Infor-Price{height:40px;line-height:40px;width: 200px;font-size: 14px;color: #666;}
.Payment-From .Price-Panel .Price-Infor .Price-Infor-Price .Price-Infor-PriceInfo{font-size: 14px; color:red;}

</style>
</head>
<body>
<div class="Payment-From">
<div class="Payment-Panel">
<div class="Payment-Panel-Tool clearfix_after">
<div class="Payment-Panel-Tool-Item fl">支付宝</div>
<div class="Payment-Panel-Tool-Item fl">微信</div>
<div class="Payment-Panel-Tool-Item fl">所有银行</div>
</div>
</div>
<div class="Order-Panel">
<div class="Order-Table">
<div class="Order-Table-Row">
<div class="Order-Table-Row-Column">
商品名称
</div>
<div class="Order-Table-Row-Column">
商品价格
</div>
<div class="Order-Table-Row-Column">
商品数量
</div>
<div class="Order-Table-Row-Column">
总金额
</div>
</div>
<div class="Order-Table-Row">
<div class="Order-Table-Row-Column">
人力资源系统
</div>
<div class="Order-Table-Row-Column">
￥100
</div>
<div class="Order-Table-Row-Column">
1
</div>
<div class="Order-Table-Row-Column">
￥100
</div>
</div>
<div class="Order-Table-Row">
<div class="Order-Table-Row-Column">
客户关系管理
</div>
<div class="Order-Table-Row-Column">
￥100
</div>
<div class="Order-Table-Row-Column">
1
</div>
<div class="Order-Table-Row-Column">
￥100
</div>
</div>
</div>
</div>
<div class="Express-Panel">
<div class="Express-Infor">
<div class="Express-Infor-Price"><em class="Express-Infor-PriceInfo">快递费:免费</em></div>
</div>
</div>
<div class="ReciveUser-Panel">
<div class="ReciveUser-Infor">
<div class="ReciveUser-Infor-Label clearfix_after"><em class="Label fl">收件人姓名</em><em class="Control fl"><input id="Text1" type="text" autocomplete="off" placeholder="请输入收件人姓名" /></em></div>
<div class="ReciveUser-Infor-Label clearfix_after"><em class="Label fl">收件人联系方式</em><em class="Control fl"><input id="Text1" type="text" /></em></div>
<div class="ReciveUser-Infor-Label clearfix_after"><em class="Label fl">收件人地址</em><em class="Control fl"><input id="Text1" type="text" /></em></div>
<div class="ReciveUser-Infor-Label clearfix_after"><em class="Label fl">收件人邮政编码</em><em class="Control fl"><input id="Text1" type="text" /></em></div>
</div>
</div>
<div class="Price-Panel">
<div class="Price-Infor clearfix_after">
<a class="Payment-Btn fr">立即支付</a><div class="Price-Infor-Price fr">合计金额:<em class="Price-Infor-PriceInfo">￥123.00元</em></div>
</div>
</div>
</div>
</body>
</html>

版权声明
本文为[xiexuzhao]所创，转载请带上原文链接，感谢
https://blog.csdn.net/xiexuzhao/article/details/124324621

当前位置：网站首页>【无标题】下单及支付

【无标题】下单及支付

边栏推荐

猜你喜欢

随机推荐