.center { display:flex; justify-content:space-between } @media screen and (max-width:1024px){
 .center { flex-direction:column } 
 } .center .cot { width:964px } @media screen and (max-width:1024px){
 .center .cot { width:100% } 
 } .center .cot .partList { min-height:194px; position:relative } .center .cot .partList .table { width:100% } .center .cot .partList .table .thead { background-color:#f6f8fc; display:flex; padding:6px 10px; width:100% } .center .cot .partList .table .thead li { align-items:center; display:flex; flex:3; padding-right:16px } .center .cot .partList .table .thead li .iconfont { align-items:center; border-radius:13px; color:#4066b8; cursor:pointer; display:flex; font-size:20px; height:26px; justify-content:center; width:26px } .center .cot .partList .table .thead li .iconfont:hover { color:#c80000 } .center .cot .partList .table .thead li:nth-child(2) { flex:5 } .center .cot .partList .table .thead li:first-child,.center .cot .partList .table .thead li:last-child { flex:unset; justify-content:center; width:40px } .center .cot .partList .table .tbody li { border-bottom:1px solid #d4d4d4; padding:10px; width:100% } .center .cot .partList .table .tbody li .tr { display:flex } .center .cot .partList .table .tbody li .tr>div { align-items:center; display:flex; flex:3; font-size:12px; padding-right:16px } .center .cot .partList .table .tbody li .tr>div .iconfont { align-items:center; border-radius:13px; color:#4066b8; cursor:pointer; display:flex; font-size:20px; height:26px; justify-content:center; width:26px } .center .cot .partList .table .tbody li .tr>div .iconfont:hover { color:#c80000 } .center .cot .partList .table .tbody li .tr>div .img { border-radius:6px; height:50px; overflow:hidden; width:50px } .center .cot .partList .table .tbody li .tr>div .part { flex:1; margin-left:10px } .center .cot .partList .table .tbody li .tr>div .part a { color:#4066b8 } .center .cot .partList .table .tbody li .tr>div .part a:hover { text-decoration:underline } .center .cot .partList .table .tbody li .tr>div .part p { margin:5px 0 } .center .cot .partList .table .tbody li .tr>div .part p.desc { color:#999; margin-bottom:0 } .center .cot .partList .table .tbody li .tr>div input { border:1px solid #d4d4d4; border-radius:4px; height:26px; padding-left:6px; width:120px } .center .cot .partList .table .tbody li .tr>div input:focus { border-color:#4066b8 } .center .cot .partList .table .tbody li .tr>div input[disabled] { background-color:#f6f8fc; cursor:not-allowed } .center .cot .partList .table .tbody li .tr>div:nth-child(2) { flex:5 } .center .cot .partList .table .tbody li .tr>div:first-child,.center .cot .partList .table .tbody li .tr>div:last-child { flex:unset; justify-content:center; width:40px } .center .cot .partList .table .tbody li .tr .price { align-items:flex-start; flex-direction:column; justify-content:center } .center .cot .partList .table .tbody li .tr .price .item { display:flex; flex-direction:column; height:100%; justify-content:space-around; padding:3px 0 } .center .cot .partList .table .tbody li .tr .price .item p { align-items:center; display:flex; font-size:14px; margin:6px } .center .cot .partList .table .tbody li .tr .price .item p .tag { background-color:#ff6221; border-radius:4px; color:#fff; font-size:11px; margin-left:5px; padding:2px 4px } .center .cot .partList .table .tbody li .tr .price .item p .tag.discount { background-color:#333 } .center .cot .partList .table .tbody li .tr .price .item p span { position:relative } .center .cot .partList .table .tbody li .tr .price .item p span del { bottom:-14px; color:#ccc; font-size:12px; left:0; position:absolute } .center .cot .partList .table .tbody li .tr .price .item p span em { bottom:-12px; color:#999; font-size:12px; left:0; position:absolute; text-decoration:line-through } .center .cot .partList .table .tbody li .tr .price .btn { margin:0; padding:8px 20px; width:100px } .center .cot .partList .table .tbody li .types { align-items:center; display:flex } .center .cot .partList .table .tbody li .types .tag { background-color:#ff6221; border-radius:2px; color:#fff; font-size:10px; margin-right:5px; padding:3px 4px } .center .cot .partList .table .tbody li .types .expired { color:#c80000; font-size:12px } .center .cot .partList .table .tbody li .types .expired:before { background-color:#c80000; border-radius:50%; content:""; display:inline-block; height:4px; margin-right:6px; width:4px } @media screen and (max-width:1024px){
 .center .cot .partList .table .thead { display:none } .center .cot .partList .table .tbody li .tr { position:relative } .center .cot .partList .table .tbody li .tr>div { flex:unset } .center .cot .partList .table .tbody li .tr>div .part .desc { display:none } .center .cot .partList .table .tbody li .tr>div:nth-child(2) { align-items:flex-start; padding-bottom:20px } .center .cot .partList .table .tbody li .tr>div:nth-child(3) { left:100px; position:absolute; top:35px } .center .cot .partList .table .tbody li .tr>.price:nth-child(4) { bottom:-12px; left:0; padding:0; position:absolute; width:100% } .center .cot .partList .table .tbody li .tr>.price:nth-child(4) .item { flex-direction:unset; justify-content:space-between; width:100% } .center .cot .partList .table .tbody li .tr>.price:nth-child(4) .item p { font-size:12px; margin:0; white-space:nowrap } .center .cot .partList .table .tbody li .tr>.price:nth-child(4) .item p span em { display:none } .center .cot .partList .table .tbody li .tr>.price:nth-child(4) .item p .tag { font-size:10px; padding:1px 4px } .center .cot .partList .table .tbody li .tr>.price:nth-child(4) .btn { display:none } .center .cot .partList .table .tbody li .tr>div:nth-child(6) { padding:0 } .center .cot .partList .table .tbody li .types .tag { margin-top:10px } 
 } .center .cot .partList .empty { align-items:center; display:flex; flex-direction:column; padding:20px } @media screen and (max-width:1024px){
 .center .cot .partList .empty { padding:20px 0 } 
 } .center .cot .partList .empty .iconfont { font-size:50px } .center .cot .partList .empty a { color:#333; display:inline-block; font-size:13px; margin:15px 0 0 } @media screen and (max-width:1024px){
 .center .cot .partList .empty a { font-size:12px } 
 } .center .cot .partList .empty a:hover { color:#4066b8; text-decoration:underline } .center .cot .partList .information { font-size:12px; margin-top:10px } .center .cot .partList .information a { color:#4066b8 } .center .cot .partList .information a:hover { text-decoration:underline } @media screen and (max-width:1024px){
 .center .cot .recommendBox { display:none } 
 } .center .cot .recommendBox .recommend { display:flex; flex-wrap:wrap } .center .cot .recommendBox .recommend li { background-color:#f6f8fc; border-radius:4px; margin:5px; padding:10px; width:220px } .center .cot .recommendBox .recommend li .title { border-bottom:1px solid #d4d4d4; margin-bottom:10px; padding-bottom:10px } .center .cot .recommendBox .recommend li .title a { color:#333; font-size:12px } .center .cot .recommendBox .recommend li .title a:hover { color:#4066b8 } .center .cot .recommendBox .recommend li .title a .iconfont { font-size:13px } .center .cot .recommendBox .recommend li .info { display:flex; width:100% } .center .cot .recommendBox .recommend li .info .img { height:50px; width:50px } .center .cot .recommendBox .recommend li .info .partnoInfo { flex:1; font-size:12px; margin-left:10px } .center .cot .recommendBox .recommend li .info .partnoInfo a { color:#4066b8; margin-bottom:2px } .center .cot .recommendBox .recommend li .info .partnoInfo a:hover { text-decoration:underline } .center .cot .recommendBox .recommend li .info .partnoInfo p { margin:4px 0 } .center .cot .recommendBox .recommend li .info .partnoInfo p.desc { -webkit-line-clamp:2; -webkit-box-orient:vertical; color:#999; display:-webkit-box; margin-left:-8px; overflow:hidden; text-overflow:ellipsis; transform:scale(.9); white-space:normal; word-break:break-all } .center .side { width:320px } .center .side .summary { position:sticky; top:20px } .center .side .summary .info { display:flex; flex-direction:column; padding-top:20px } .center .side .summary .info .number,.center .side .summary .info .price { border-bottom:1px solid #d4d4d4; display:flex; justify-content:space-between; margin-bottom:16px; padding-bottom:10px } .center .side .summary .info .price p:last-child { color:#c80000 } .center .side .summary .info .number { border:none; padding-bottom:0 } .center .side .summary .info .btn { width:100% } .center .side .summary .info .btn .iconfont { font-size:18px; margin-right:10px } .center .side .summary .info span { font-size:12px; margin:10px 0 } .center .side .summary .info span:before { background-color:#c80000; border-radius:50%; content:""; display:inline-block; height:4px; margin-right:5px; width:4px } .center .side .summary .info .desc { font-size:14px; text-align:center } .center .side .summary .info .desc a { color:#4066b8 } .center .side .summary .info .desc a:hover { text-decoration:underline } @media screen and (max-width:1024px){
 .center .side { width:100% } 
 }