.wrapbg { background: #f5f5f5; } /***用户中心***/ .usercenter { max-width: 1200px; margin: 180px auto 0; } .user_box{ display: flex; margin-top: 20px; padding-bottom: 20px; } .user_box_left{ width: 220px; background: #fff; padding: 15px; } .user_box_left .title{ font-size: 16px; margin:20px 0 10px 15px; } .user_box_left li{ margin: 0 10px; line-height: 40px; list-style: none; } .user_box_left li a{ color: #888; } .user_box_left .current a{ color: #ff6709; } .user_box_right{ flex: 1; margin-left: 20px; background: #fff; } .user_box_right .current_title{ font-weight: bold; border-bottom: 2px solid #ff6709; padding: 10px 15px; color: #ff6709; } .user_index_content1{ padding: 50px; display: flex; } .user_index_content1 .left_content{ display: flex; align-items: center; border-bottom: 1px solid #ddd; width: 100%; padding-bottom: 50px; } .user_index_content1 .left_content .pic{ border: 1px solid #ddd; border-radius: 50%; width: 162px; height: 162px; display: flex; justify-content: center; align-items: center; } .user_index_content1 .left_content .pic .img{ border-radius: 50%; width: 150px; height: 150px; } .user_index_content1 .left_content .info{ margin-left: 30px; } .user_index_content1 .left_content .info .title{ font-size: 24px; font-weight: 400; color: #616161; } .user_index_content1 .left_content .info .description{ color: #aaa; margin-top: 5px; } .user_index_content1 .left_content .info .description1 .iconfont { font-size: 12px; } .user_index_content1 .left_content .info .description1{ margin-top: 10px; } .user_index_content1 .left_content .info .description2{ margin-top: 10px; color: #888; } .user_index_content2{ padding: 0 50px 50px 50px; display: flex; flex-wrap: wrap; } .user_index_content2 .item{ width: 50%; display: flex; margin: 15px 0; align-items: center; } .user_index_content2 .item .icon{ width: 100px; height: 100px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .user_index_content2 .item .icon .iconfont{ font-size: 52px; color: #fff; } .user_index_content2 .item .info{ margin-left: 15px; } .user_index_content2 .item .info .title .span1{ font-size: 18px; font-weight: 400; } .user_index_content2 .item .info .title .span2{ color: #ff6700; font-size: 18px; } .user_index_content2 .item .info .description a{ color: #888; } .user_index_content2 .item .info .description .iconfont{ font-size: 12px; } .user_index_content2 .bg1{ background: #ff5b00; } .user_index_content2 .bg2{ background: #78c552; } .user_index_content2 .bg3{ background: #0098f3; } .user_index_content2 .bg4{ background: #ffa700; } .user_content_box { padding: 15px 20px; } .user_content_box h2.title { margin: 0; font-size: 30px; font-weight: 400; line-height: 68px; color: #757575; } .index_info_form{ padding: 50px; display: flex; align-items: center; } .index_info_form .left_content{ width: 30%; display: flex; flex-wrap: wrap; } .index_info_form .left_content .face{ border: 1px solid #ddd; border-radius: 50%; width: 162px; height: 162px; display: flex; justify-content: center; align-items: center; margin: 0 auto; } .index_info_form .left_content .face .img{ border-radius: 50%; width: 150px; height: 150px; } .index_info_form .left_content .input_box{ width: 100%; text-align: center; margin-top: 15px; } .index_info_form .right_content{ width: 60%; display: flex; flex-wrap: wrap; padding-left: 20px; } .index_info_form .item{ display: flex; margin: 10px 0; width: 100%; } .index_info_form .item .label{ width: 130px; text-align: right; margin-top: 7px; } .index_info_form .item .input_box{ flex: 1; display: flex; flex-wrap: wrap; align-items: center; } .index_info_form .item .iconfont{ font-size: 18px; } .index_info_form .item .iconcuo{ color: #ff6709; } .index_info_form .item .iconduihao{ color: #55d034; margin-top: 3px; } .index_info_form .item .input_box .input{ width: 70%; margin-right: 10px; padding-left: 10px; color: #888; } .index_info_form .item .input_box .btn{ background: #ff6709; border: none; border-radius: 5px; color: #fff; width: 100px; text-align: center; line-height: 32px; margin-top: 10px; cursor: pointer; } .myorder_title{ font-size: 26px; color: #666; } .myorder_nav{ display: flex; margin:1rem 0; justify-content: space-between; width: 100%; } .myorder_nav .myorder_nav_left{ display: flex; align-items: center; } .myorder_nav .myorder_nav_form{ border: 1px solid #ddd; display: flex; width: 230px; justify-content: space-between; } .myorder_nav .myorder_nav_form input{ border: none; padding:10px; width: 100%; } .myorder_nav .myorder_nav_form .icon{ background: #fff; border: none; border-left: 1px solid #ddd; display: flex; align-items: center; width: 40px; justify-content: center; } .myorder_nav .item{ display: flex; align-items: center; font-size: 16px; } .myorder_nav .item .line{ width: 1px; height: 15px; background: #ddd; margin: 0 10px; } .myorder_nav .item .current{ color: #ff6709; } .myorder_box .item{ margin-bottom: 20px; } .myorder_box .style_color1{ border: 1px solid #ddd; } .myorder_box .item_info{ background: #fafafa; padding: 20px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; } .myorder_box .item .item_info .text2{ font-size: 18px; margin-bottom: 5px; } .myorder_box .item .item_info .item_info_right{ display: flex; align-items: center; } .myorder_box .item .item_info .item_info_right .text1{ font-size: 26px; } .myorder_box .item .item_info .text3{ color: #888; } .myorder_box .item .item_goods{ display: flex; padding: 20px; position: relative; } .myorder_box .item .item_goods .pay_box{ position: absolute; right: 20px; top: 20px; } .myorder_box .item .item_goods .pay_box a{ display: inline-block; } .myorder_box .item .item_goods .pay_box .pay_button1{ background: #ff6709; width: 100px; text-align: center; line-height: 30px; margin-bottom: 7px; color: #fff; } .myorder_box .item .item_goods .pay_box .pay_button1 a{ color: #fff; } .myorder_box .item .item_goods .pay_box .pay_button2{ background: #fff; border: 1px solid #ddd; width: 100px; text-align: center; line-height: 30px; margin-bottom:7px; } .myorder_box .item .item_goods .goods_box{ width:80%; } .myorder_box .item .item_goods .goods_box .goods_item{ width: 100%; display: flex; align-items: center; } .myorder_box .item .item_goods .goods_box .goods_item .pic{ width: 100px; } .myorder_box .item .item_goods .goods_box .goods_item .info{ margin-left: 10px; } .myorder_box .style_color2 { border: 1px solid #ff5b00; } .myorder_box .style_color2 .item_info{ border-bottom: 1px solid #ff5b00; background: #fffaf7; } .myorder_box .style_color2 .item_info .text2{ color: #ff5b00; } .myorder_box .style_color3 { border: 1px solid #83c44e; } .myorder_box .style_color3 .pay_button3{ background: #83c44e; width: 100px; text-align: center; color: #fff; line-height: 30px; margin-bottom: 7px; } .myorder_box .style_color3 .item_info{ border-bottom: 1px solid #83c44e; background: #fafff6; } .myorder_box .style_color3 .item_info .text2{ color: #83c44e; } .myorder_detail_nav{ display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin: 20px 0; align-items: center; } .myorder_detail_nav .myorder_detail_nav_left{ font-size: 18px; } .myorder_detail_nav .myorder_detail_nav_right .button1{ background: #fff; border: 1px solid #ddd; width: 100px; text-align: center; line-height: 30px; margin-bottom: 7px; display: inline-block; margin-left: 10px; } .myorder_detail_nav .myorder_detail_nav_right .button2{ background: #ff5b00; color: #fff; width: 100px; text-align: center; line-height: 30px; margin-bottom: 7px; display: inline-block; margin-left: 10px; } .myorder_detail_goods .item{ display: flex; align-items: center; border-bottom: 1px solid #ddd; padding-bottom: 10px; padding-top: 10px; justify-content: space-between; } .myorder_detail_goods .goods_name{ flex: 1; } .myorder_detail_goods .goods_price{ } .myorder_detail_goods .item .pic{ width: 100px; } .myorder_detail_address{ padding-bottom: 20px; border-bottom: 1px solid #ddd; margin-top: 20px; color: #666; } .myorder_detail_address .item{ margin-bottom: 10px; display: flex; } .myorder_detail_address .item .label{ font-weight: bold; } .myorder_detail_address .title{ font-size: 18px; margin-bottom:20px; } .myorder_detail_total{ display: flex; justify-content: flex-end; margin-top: 20px; } .myorder_detail_total .box{ display: flex; width: 250px; flex-wrap: wrap; } .myorder_detail_total .box .item{ width: 100%; display: flex; justify-content: space-between; margin-bottom: 10px; align-items: center; } .myorder_detail_total .box .item .text{ color: #ff5b00; } .myorder_detail_total .box .item .text1{ font-size: 30px; } .myorder_comment{ } .myorder_comment .item{ border-bottom: 1px solid #ddd; padding: 10px 0; width: 100%; display: flex; } .myorder_comment .pic{ width: 120px; } .myorder_comment .score_box{ color: #bbb; font-size: 24px; margin-bottom: 10px; } .myorder_comment .is--active .layui-icon{ color: #ff5b00!important; } .myorder_comment .comnment_textarea{ border: 1px solid #ddd; width: 100%; height: 60px; padding: 10px; } .myorder_comment .rating-stars-container{ display: flex; margin-bottom: 10px; } .myorder_comment .rating-stars-container .layui-icon{ color: #ddd; font-size: 18px; margin-right: 3px; } .myorder_comment .info{ flex: 1; } .myorder_comment .comment_content{ width: 100%; } .myorder_comment .btn_box{ width: 100%; display: flex; justify-content: flex-end; margin-top: 10px; } .myorder_comment .btn_box .btn{ background: #fff; border: 1px solid #ddd; width: 100px; text-align: center; line-height: 30px; margin-bottom: 7px; display: inline-block; margin-left: 10px; } /***用户中心样式结束***/ /***会员登陆***/ .signinbg { width: 100%; margin-top: 180px; display: flex; align-items: center; justify-content: center; } .signinbg .signin_box { width: 500px; border: solid 1px #eee; display: flex; justify-content: flex-center; margin: 0 auto; } .user_entrence_box { display: flex; border: 1px solid #ddd; flex-wrap: wrap; background: #fff; } .user_entrence_box .title_box { border-bottom: 1px solid #ddd; width: 100%; line-height: 70px; display: flex; justify-content: center; font-size: 20px; align-items: center; padding: 0 !important; } .user_entrence_box .title_box .current { font-weight: bold; color: #ff6709 !important; } .user_entrence_box .title_box .item { padding: 5px 15px; color: #888; border-left: 1px solid #ddd; } .user_entrence_box .info_box .item1 { width: 100%; display: flex; justify-content: space-between; } .user_entrence_box .title_box .item:first-child { border-left: none; } .user_entrence_box .info_box { width: 100%; padding: 25px; display: flex; flex-wrap: wrap; align-items: center; } .send_code { width: 90px; border-radius: 25px; height: 32px; color: #ff6709; text-align: center; line-height: 32px; margin-left: 10px; font-size: 12px; cursor: pointer; border: 1px solid #ff6709; background: #fff; } .user_entrence_box .info_box .item { width: 100%; display: flex; align-items: center; margin-top: 15px; margin-bottom: 15px; } .user_entrence_box .info_box .item .icon { background: #eee; height: 50px; width: 50px; text-align: center; line-height: 50px; color: #aaa; border: 1px solid #ddd; border-right: none; } .user_entrence_box .info_box .item .input_box { flex: 1; } .user_entrence_box .info_box .item .input { height: 50px; flex: 1; width: 100%; padding-left: 10px; } .user_entrence_box .info_box .btn { background: #ff6709; border: none; color: #fff; width: 100%; font-size: 18px !important; text-align: center; height: 40px; line-height: 40px; } /***会员登录 样式结束***/ @media (max-width:960px) { .signinbg { margin-top: 140px; } } .address-list .address-item { display: inline-block; width: 277px; height: 178px; border: 1px solid #e0e0e0; cursor: pointer; position: relative; margin-right: 18px; margin-bottom: 20px; vertical-align: top; -webkit-transition: all .4s ease; transition: all .4s ease } .address-list .address-item.selected { border-color: #ff6700; } .address-list .address-item.selected:hover { border-color: #ff6700; } .address-list .address-item:nth-child(3n) { margin-right: 0; } .address-list .address-item .show-action.address-action { opacity: 1 } .address-list .address-item:hover { border-color: #b0b0b0 } .address-list .address-item:hover .address-action { opacity: 1 } .address-list .address-item:hover .iconfont { background-color: #b0b0b0 } .address-list .address-item:hover .add-desc { color: #b0b0b0 } .address-list .address-item.active, .address-list .address-item.active:hover { border-color: #ff6700 } .address-list .iconfont { display: block; width: 30px; height: 30px; margin: 0 auto 8px; font-size: 30px; line-height: 30px; background-color: #e0e0e0; border-radius: 17px; text-align: center; -webkit-transition: all .4s ease; transition: all .4s ease; color: #fff } .address-list .add-desc { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); color: #b0b0b0 } .address-list .address-info { padding: 15px 24px 0 } .address-list .consignee { font-size: 18px; color: #333; line-height: 30px; margin-bottom: 10px } .address-list .consignee span { float: right; font-size: 14px; color: #757575 } .address-list .address-action, .address-list .address-info, .address-list .telephone { line-height: 22px; color: #757575 } .address-list .address-con span { display: inline-block; margin-right: 3px; word-wrap: break-word } .address-list .address-con .info { width: 100% } .address-list .address-action { text-align: right; position: absolute; right: 24px; bottom: 10px; opacity: 0 } .address-list .address-action span { color: #ff6700; margin-left: 10px } .address-list .more-btn { margin-bottom: 30px; height: 50px; line-height: 50px; background-color: #eee; color: #424242; text-align: center; cursor: pointer } .address-list .more-btn span .iconfont-normal { display: inline-block; margin-left: 3px; position: relative; top: -1px; font-size: 14px; vertical-align: middle } /* 弹出窗增加地址样式 */ .mask{ width: 100%; height: 100%; background: #000; overflow: hidden; position: fixed; left: 0; top: 0; opacity: .6; filter: alpha(opacity=60); z-index: 9999; display: none } .address_box { background: #fff; border-radius: 5px; display: block; padding: 25px; box-sizing: border-box; } .address_box .address_close { width: 30px; height: 30px; float: right; cursor: pointer; } .add_address{ cursor: pointer; } .address_form .item { width: 50%; float: left; margin-top: 20px; display: flex; } .address_form .address_info { width: 100%; } .address_form .item .item_right { flex: 1; } .address_form .item .item_right .input { line-height: 36px; width: 100%; padding-left: 10px; } .address_form label { width: 90px; text-align: right; line-height: 36px; } .address_form .btn_box { display: flex; width: 100%; justify-content: center; } .address_form .btn_box .btn { width: 85px; line-height: 42px; display: inline-block; margin: 0 5px; border-radius: 3px; font-size: 16px; margin-top: 30px; color: #fff; text-align: center; background: #ff6700; border: none; } .address_form .city_box { width: 33%; float: left; padding-left: 45px; } .address_form .city_box select { height: 36px; width: 170px; color: #888; } .address_title { font-size: 24px; text-align: center; margin: 20px 0; } /* 弹出窗增加地址样式结束*/