*{
box-sizing:border-box;
}


body{

margin:0;

font-family:
"Microsoft YaHei",
Arial;

background:#f5f7fb;

color:#333;

}



.header{

height:75px;

background:#fff;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 60px;

box-shadow:0 2px 10px #ddd;

}



.logo{

font-size:28px;

font-weight:bold;

color:#1677ff;

}



.nav a{

margin-left:25px;

text-decoration:none;

color:#333;

font-size:16px;

}



.container{

width:1200px;

max-width:95%;

margin:35px auto;

}




.notice{

background:#fff;

padding:25px;

border-radius:18px;

border-left:5px solid #1677ff;

line-height:30px;

}





.category{

display:flex;

gap:18px;

margin:30px 0;

flex-wrap:wrap;

}



.category a{

background:#fff;

padding:12px 30px;

border-radius:30px;

color:#1677ff;

text-decoration:none;

box-shadow:0 5px 15px #ddd;

cursor:pointer;

}



.search{

width:100%;

height:55px;

border-radius:30px;

border:1px solid #ddd;

padding:0 30px;

font-size:18px;

}





.goods{

margin-top:30px;

}



.item{


background:#fff;


height:110px;


padding:20px 30px;


border-radius:15px;


display:flex;


align-items:center;


justify-content:space-between;


margin-bottom:15px;


box-shadow:0 5px 20px rgba(0,0,0,.05);


}



.left{

display:flex;

align-items:center;

gap:25px;

}



.icon{

width:60px;

height:60px;

border-radius:50%;

background:#1677ff;

color:#fff;

font-size:30px;

display:flex;

align-items:center;

justify-content:center;

}





.tag{

display:inline-block;

background:#e8f1ff;

color:#1677ff;

padding:3px 10px;

border-radius:10px;

font-size:13px;

}



.name{

font-size:20px;

font-weight:bold;

margin-top:5px;

}




.stock{

background:#edf4ff;

color:#1677ff;

padding:8px 18px;

border-radius:8px;

}




.price{

font-size:25px;

color:#ff4d4f;

font-weight:bold;

}



.btn{

background:#ff7657;

color:#fff;

padding:13px 30px;

border-radius:30px;

text-decoration:none;

}





.btn:hover{

opacity:.85;

}



@media(max-width:700px){


.header{

padding:0 20px;

}



.nav{

display:none;

}



.item{

height:auto;

flex-wrap:wrap;

gap:15px;

}



.container{

width:95%;

}



.pay-box{


width:500px;


max-width:90%;


margin:50px auto;


background:#fff;


padding:35px;


border-radius:20px;


box-shadow:0 10px 30px #ddd;


}



.order-item{


padding:15px 0;


font-size:18px;


border-bottom:1px solid #eee;


}



.money{


color:#ff4d4f;


font-size:25px;


font-weight:bold;


}



.input{


width:100%;


height:45px;


border:1px solid #ddd;


border-radius:10px;


padding:0 15px;


font-size:16px;


}



.pay-method{


background:#f5f8ff;


padding:15px;


border-radius:10px;


}



.pay-btn{


width:100%;


height:50px;


margin-top:25px;


border:0;


background:#1677ff;


color:white;


font-size:18px;


border-radius:25px;


cursor:pointer;


}



/* 支付成功页面 */


.success-box{

width:500px;

max-width:92%;

margin:60px auto;

background:white;

padding:40px;

border-radius:25px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.success-icon{

width:70px;

height:70px;

margin:auto;

background:#22c55e;

color:white;

font-size:45px;

line-height:70px;

border-radius:50%;

}



.success-box h2{

font-size:28px;

margin:20px 0;

}



.loading{

font-size:18px;

color:#1677ff;

margin:30px 0;

}



.tip{

color:#999;

}



.done{

font-size:22px;

color:#22c55e;

margin:25px;

}



.order-info{

background:#f7f9fc;

padding:20px;

border-radius:15px;

text-align:left;

}



.card-area{

margin-top:25px;

text-align:left;

}



.card-area textarea{

width:100%;

height:120px;

padding:15px;

border-radius:12px;

border:1px solid #ddd;

font-size:16px;

resize:none;

}




/* 手机端 */


@media(max-width:700px){


.header{

height:auto;

padding:15px 20px;

}


.logo{

font-size:22px;

}



.nav{

display:none;

}



.container{

width:94%;

}



.item{

display:block;

height:auto;

padding:20px;

}



.left{

margin-bottom:15px;

}



.price{

margin:15px 0;

}



.btn{

display:block;

text-align:center;

}



.success-box{

padding:25px 20px;

margin:30px auto;

}


.success-box h2{

font-size:24px;

}



}


}