|
|
@@ -4,21 +4,6 @@ li{list-style:none}
|
|
|
* PC端
|
|
|
*/
|
|
|
@media screen and (min-width:768px){
|
|
|
- .navLayout {min-height: 410px;}
|
|
|
- .crumbs{padding-left: 220px;padding-right: 20px;}
|
|
|
- .crumbs .link{display: block;float: right;font-size: 14px;color: #E15616;text-decoration: underline;}
|
|
|
- .navLayout .left{float:left;width:200px;line-height:50px;white-space:nowrap;text-indent:16px;font-size:16px;background:#FFF}
|
|
|
- .navLayout .left .title{color:#22272e;font-weight:bold;border-bottom:1px solid #f5f5f5}
|
|
|
- .navLayout .navList .tab{display:block;color:#22272e;position:relative;cursor: pointer;}
|
|
|
- .navLayout .navList .tab:before{content:'\276F';font-weight:normal;position:absolute;right:10px;top:0;transform:rotate(90deg);width:32px;height:32px;line-height:32px;text-align:center;color:#bec2c9}
|
|
|
- .navLayout .navList .con{position:relative;}
|
|
|
- .navLayout .navList .con:before,.navLayout .navList .con:after{content:'';position:absolute;width:168px;border-top:1px solid #f5f5f5;left:16px}
|
|
|
- .navLayout .navList .con:before{top:0}
|
|
|
- .navLayout .navList .con:after{bottom:0}
|
|
|
- .navLayout .navList .con a{display:block;font-size:14px;color:#627386;text-indent:32px}
|
|
|
- .navLayout .navList.on .tab:before{top:18px;transform:rotate(270deg);color:#e15616}
|
|
|
- .navLayout .navList.on .tab{color:#e15616}
|
|
|
- .navLayout .navList .con a.on{color:#e15616;background-color:#ffe6dc}
|
|
|
/*个人中心右侧*/
|
|
|
.navLayout .right{float:right;width:968px}
|
|
|
.order-header{width: 100%;height: 78px;box-sizing: border-box;padding: 20px;background-color: #FFF;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);}
|
|
|
@@ -79,18 +64,30 @@ li{list-style:none}
|
|
|
* 移动端
|
|
|
*/
|
|
|
@media screen and (max-width:768px){
|
|
|
-.navLayout{background:#FFF;border-top:1px solid #F5F5F5;border-bottom:1px solid #F5F5F5;}
|
|
|
-.navLayout .crumbs{display:none;}
|
|
|
-.navLayout .left{width:29.3vw;border-right:1px solid #F5F5F5;line-height:11.8vw;white-space:nowrap;text-indent:3.3vw;font-size:3.4vw;}
|
|
|
-.navLayout .left .title{color:#22272e;font-weight:bold;border-bottom:1px solid #f5f5f5;font-size: 3.7vw;}
|
|
|
-.navLayout .navList .tab{display:block;color:#22272e;position:relative}
|
|
|
-.navLayout .navList .tab:before{content:'\276F';font-weight:normal;position:absolute;right:1.4vw;top:1vw;transform:rotate(90deg);width:6.4vw;height:6.4vw;line-height:6.4vw;text-align:center;color:#bec2c9}
|
|
|
-.navLayout .navList .con a{display:block;color:#9aa5b5;}
|
|
|
-.navLayout .navList.on .tab:before{top:4vw;transform:rotate(270deg);color:#e15616}
|
|
|
-.navLayout .navList.on .tab{color:#e15616}
|
|
|
-.navLayout .navList .con a.on{color:#e15616;background-color:#ffe6dc}
|
|
|
-.navLayout .right{width:70.5vw}
|
|
|
-
|
|
|
+ .order-header{line-height:7.4vw;background:#FFF;padding:3.3vw;margin:1.5vw auto;font-size:3.1vw;position:relative}
|
|
|
+ .order-header p span{color:#E15616;margin:0 1vw}
|
|
|
+ .header-button .btn-server{position:absolute;right:3.3vw;top:3vw}
|
|
|
+ .container{box-sizing:border-box;width:100%;position:relative}
|
|
|
+ .container .list{line-height:7.4vw;background:#FFF;padding:3.3vw}
|
|
|
+ .container .list{margin-bottom:1vw;border-bottom:1px dashed #eee;position:relative}
|
|
|
+ .container .list p{display:inline-block;min-width:49%;line-height:5vw;font-size:3.4vw;color:#22272e}
|
|
|
+ .container .list p .label{color:#627386;margin-right:2vw}
|
|
|
+ .container .list-right{padding-top:2vw}
|
|
|
+ .container .list-btn,.header-button .btn-server{display:inline-block;height:8vw;line-height:8vw;font-size:3.4vw;color:#1890f9;padding:0 3vw;border-radius:4.5vw;background-color:#e0f1ff;border:solid 1px #1890f9}
|
|
|
+ .container .list-btn.ico{background-color:#ffd8d8;color:#f94b4b;border-color:#f94b4b;margin-left:2vw}
|
|
|
+ .header-button .btn-server{background-color:#E15616;color:#FFF;border-color:#E15616;}
|
|
|
+ .container .list-btn i{font-style:normal;}
|
|
|
+ .container .list-defalut{height:8vw;line-height:8vw}
|
|
|
+ .container .list-defalut .mIcon{display:inline-block;vertical-align:middle}
|
|
|
+ .container .list-defalut .mIcon:before{height:8vw;width:8vw;background-position:-94.1vw -36.7vw}
|
|
|
+ .container .list-defalut span{display:inline-block;height:6vw;line-height:6vw;font-size:3.1vw;color:#FFFFFF;background-color:#f94b4b;border-radius:3vw;padding:0 3vw;vertical-align:middle}
|
|
|
+ .container .list-defalut a{display:inline-block;height:6vw;line-height:6vw;margin-left:2vw;color:#1890f9;vertical-align:middle}
|
|
|
+ .container .list-defalut a{padding:0;margin:0;font-size: 3.1vw;}
|
|
|
+ .container .list .seclet{width:6vw;height:6vw;position:absolute;bottom:0;right:0;opacity:0}
|
|
|
+ .container .list .seclet .mIcon{width:6vw;height:6vw;display:block}
|
|
|
+ .container .list .seclet .mIcon:before{width:6vw;height:6vw;background-position:-75.1vw -7.8vw}
|
|
|
+ .container .list.checked{border:1px solid #E15616}
|
|
|
+ .container .list.checked .seclet{opacity:1}
|
|
|
|
|
|
|
|
|
|
chao