390 lines
28 KiB
CSS
390 lines
28 KiB
CSS
|
|
*{font-family: "微软雅黑"}
|
|
body{background: #f5f5f5;}
|
|
ul{list-style: none; padding-left: 0;}
|
|
input, button, select {outline: none;}
|
|
.text-nowrap {max-width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
|
|
.text-nowrap-multi {display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
|
|
footer{height: 60px; background: white; box-shadow: 0 0 2px 3px rgba(0,0,0,.02); position: fixed; bottom: 0; left: 0; width: 100%; z-index: 99;}
|
|
footer ~ section{padding-bottom: 60px;}
|
|
footer{display: flex; justify-content: space-between;}
|
|
|
|
/*头部*/
|
|
.topFixed{position: fixed; background-color: #1d1700; box-shadow: 2px 2px 2px rgba(0,0,0,.2);right: 20px; bottom: 20px; border-radius: 20px; color: #fff; text-align: center; width: 50px;height: 32px; line-height: 32px; text-align: center; opacity: .9;z-index: 9999}
|
|
.topFixed i {font-size: 18px; }
|
|
.topFixed span {display: inline-block; float: left;}
|
|
|
|
|
|
/* 搜索 */
|
|
.search {box-shadow: 0 0 2px 3px rgba(0,0,0,.02);background-color: #fff;overflow: hidden;border-bottom: 1px solid #eee;position: fixed; height: 54px; line-height: 54px;width: 100%; z-index: 999;}
|
|
.searchCont{width: calc(100% - 20px); left: 10px; top: 10px; right: 10px ; bottom: 10px;background: #f2f2f2; border-radius: 3px; position: absolute; padding: 0 5px;}
|
|
.searchCont input {width: 100%;height: 100%;border: 0;background: none;}
|
|
.searchCont input::-webkit-input-placeholder{font-size: 14px;}
|
|
.searchCont button {position: absolute;right: 0;top: 0;line-height: 31px;color: #999;height: 100%;}
|
|
|
|
/* 弹出层 */
|
|
.backEject, .memberBack{position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 998; background: rgba(0,0,0,.6); display: none;}
|
|
|
|
.specsEject{background: #fff; position: fixed; left: 0; bottom: -100%; width: 100%; z-index: 999; border-radius: 10px 10px 0 0; padding: 10px; box-sizing: border-box; transition: .6s;}
|
|
.ejectHead{position: relative;}
|
|
.ejectHead-img{position: relative; width: 80px; height: 80px; border-radius: 5px; overflow: hidden;}
|
|
.ejectHead-text{width: calc(100% - 90px); position: absolute; left: 90px; bottom: 0;}
|
|
.ejectHead-price{color: #bc3635; font-size: 18px; font-weight: 600; margin-bottom: 5px;}
|
|
.ejectHead-price>small{font-size: 12px;}
|
|
.ejectChoose{margin-top: 20px; overflow: hidden; width: 100%;}
|
|
|
|
|
|
/* 个人中心 */
|
|
.mainHead, .temHead{width: 100%; box-sizing: border-box;background-position: top center; background-size: cover;}
|
|
.mainHead{background-image: url(../img/agent_bg.jpg); padding: 20px 15px 50px; position: relative;}
|
|
.mainHeadImg{position: relative; width: 67px; height: 67px; border-radius: 50%; overflow: hidden; background-color: #e5e5e5; border: 2px #d0a700 solid;}
|
|
.mainHeadImg>span, .temListUl-img>span, .accountHeadImg>span, .codeCont-head-img>span{position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-position: center; background-size: cover;}
|
|
.mainHeadText{width: calc(100% - 100px); position: absolute; left: 95px; top: 28px; display: flex;}
|
|
.mainHeadText-name{font-size: 16px; font-weight: 600; flex: 1;}
|
|
.mainHeadText-name>small{color: #634f00; font-weight: normal; font-size: 13px;}
|
|
.mainHeadText-name>p{margin-bottom: 5px;}
|
|
|
|
.mainNav {background: #fff; border-radius: 5px 5px 15px 15px; margin: -30px 10px 0; position: relative; padding: 0 10px 10px; text-align: center; width: calc(100% - 20px); box-shadow: 2px 4px 4px rgba(0,0,0,.05);}
|
|
.mainNavLabel{border-radius: 0 0 50% 50%; width: 90px; margin: 0 auto; line-height: 32px; background: linear-gradient(to right, #fff0d9, #e4bd84); color: #000; font-weight: 600; display: inline-block;}
|
|
.mainNavList{padding: 10px 10px 5px; display: flex; margin: 0;}
|
|
.mainNavList>li{flex: 2; text-align: center;}
|
|
.mainNavList>li span{font-weight: 600; font-size: 20px;}
|
|
.mainNavList>li.mainNavList-price{position: relative;}
|
|
.mainNavList>li.mainNavList-price::after{position: absolute; right: 0; top: 25%; content: ''; background: #dadada; width: 1px; height: 50%;}
|
|
.mainNavList>li.mainNavList-price span {color: #c52a1d;}
|
|
.mainNavList>li div.mainNavList-name {color: #a6a5a5; margin-top: 5px;}
|
|
|
|
.banner{margin: 15px 10px; overflow: hidden; padding: 10px;}
|
|
.banner>img {vertical-align: middle; margin: 0;}
|
|
|
|
.banner,.mainList {background:white; border-radius: 10px; box-shadow: 2px 2px 2px rgba(0,0,0,.05); box-sizing: border-box; }
|
|
|
|
.mainList{margin: 15px 10px 0; width: calc(100% - 20px); overflow: hidden;}
|
|
.mainList>li{text-align: center; width: 33.33%; float: left; padding: 15px 0; border-bottom:1px solid #f2f2f2;border-right:1px solid #f2f2f2;}
|
|
.mainList-icon{width: 25px; height: 25px; margin: 0 auto 2px;}
|
|
.mainList-icon img{width: 100%;}
|
|
.mainList-text{color: #818181; font-size: 15px;}
|
|
|
|
/* 会员身份 */
|
|
.Vip{display: inline-block; padding: 0 6px; border-radius: 3px; background: #4e3d00; color: #fff; font-size: 12px; font-weight: normal; line-height: 18px; margin-left: 8px;}
|
|
.Vip>img{width: 13px; height: 13px; margin: -2px 3px 0 0;}
|
|
|
|
|
|
/* 团队人数 */
|
|
.temHead {background-image: url(../img/tem_bg.png); color: #866b00; text-align: center; font-size: 16px; padding: 30px 20px;}
|
|
.temHead>p{font-size: 32px;}
|
|
.temNumber {background: white; overflow: hidden; margin-left: -1px;}
|
|
.temNumber li {width: 50%; float: left; display: flex; font-size: 15px; padding: 15px; box-sizing: border-box; border-bottom: #f2f2f2 1px solid; border-left: #ebeced 1px solid}
|
|
.temNumber-icon{width: 30px; height: 30px; margin-right: 10px; font-size: 16px; padding-top: 5px;}
|
|
.temNumber-icon img{margin-bottom: 0;}
|
|
.temNumber-text>p{margin: 5px 0 0; color: #a5a6a7;}
|
|
.temNumber-text>p>span{padding-right: 5px;}
|
|
span.temRed{ color: #ff5959;}
|
|
span.temBlue{color: #5fa8ff;}
|
|
|
|
.temForm{background: #fff; padding: 10px; box-sizing: border-box; border-bottom: #f2f2f2 1px solid; border-top: #f2f2f2 1px solid; overflow: hidden;}
|
|
.temSearch{width: calc(100% - 95px); margin-left: 10px; float: right; height: 32px;}
|
|
.temSearch>button{width: 60px; border: none; margin-left: 10px; line-height: 30px; box-sizing: border-box; border-radius: 5px; background: #ffde61; color: #655100;}
|
|
.temSearch>input{width: calc(100% - 75px); line-height: 32px; border: none; border-radius: 5px; background: #efefef; padding-left: 10px;}
|
|
.temSearch>input::-webkit-input-placeholder{font-size: 14px;}
|
|
.temScreen{width: 80px; float: left;}
|
|
.temScreen select{width: 100%; height: 33px; border: 1px #f1f1f1 solid; border-radius: 5px; background: #efefef; padding-left: 5px;}
|
|
|
|
.temListTitle{font-size: 17px; padding: 10px 15px;font-weight: 600;}
|
|
.temListUl{width: 100%;background: white;box-shadow: 2px 2px 2px rgba(0,0,0,.05); border-radius: 5px;overflow: hidden;}
|
|
.temListUl li {padding: 10px 15px; box-sizing: border-box; position: relative; border-bottom: 1px #f2f2f2 solid;}
|
|
.temListUl li:last-child{border: none;}
|
|
.temListUl-img {position: relative; height: 50px; width: 50px; border-radius: 50%; overflow: hidden;box-shadow: 2px 2px 2px rgba(0,0,0,.05);}
|
|
.temListUl-cont{position: absolute; left: 80px; top: 10px; width: calc(100% - 80px);}
|
|
.temListUl-cont .temListUl-cont-name {font-size: 16px; margin-bottom: 6px; }
|
|
.temListUl-cont .temListUl-cont-time{color: #999;}
|
|
|
|
/* 账户 */
|
|
.accountHead {display: flex; padding: 10px 15px; background: white;}
|
|
.accountHeadImg {width: 40px; height: 40px; position: relative; border-radius: 50%; overflow: hidden;}
|
|
.accountHeadText{line-height: 40px; margin-left: 10px;}
|
|
|
|
.account{padding: 5px 15px 15px 15px; background: white;box-shadow: 0 0 2px 3px rgba(0,0,0,.01);}
|
|
.accountBack{background-image: url(../img/account_bg.png); color: #fff; box-shadow: 0 2px 7px 0px rgba(67, 132, 253, .5);background-position: bottom center; background-size: 100% 100%; border-radius: 8px; overflow: hidden; padding: 15px; position: relative;}
|
|
.account-price{color: #cfdffe;}
|
|
.account-price>span{font-size: 26px; display: block; color: #fff; margin: 5px 0 15px;}
|
|
.account-nav{display: flex; margin-bottom: 0;}
|
|
.account-nav>li{margin-right: 20px; font-size: 16px;}
|
|
.account-nav>li>span{font-size: 15px;color: #e1ebff; padding-right: 3px;}
|
|
.account-btn{position: absolute; right: 0; top: 25px;background: linear-gradient(to right, #709af7, #6060ea); color: #eaebfb; border-radius: 40px 0 0 40px; padding: 5px 8px 5px 12px;}
|
|
.account-btn>i{font-size: 16px;}
|
|
|
|
.accountList{ background: white;margin: 15px 0 0;box-shadow: 0 0 2px 3px rgba(0,0,0,.01);}
|
|
.accountList-title{padding: 10px 0 10px 30px;font-size: 18px; font-weight: 600;position: relative;}
|
|
.accountList-title::after{position: absolute; left: 15px; top: 30%; height: 44%; content: ''; background: #e4b700; width: 5px; border-radius: 30px;}
|
|
.accountList-ul>li{padding: 15px; padding-bottom: 10px; border-top: 1px solid #f2f2f2; font-size: 16px;}
|
|
.accountList-ul-top{color: #313131;}
|
|
.accountList-ul-top>span{color: #bb7400;}
|
|
.accountList-ul-top, .accountList-ul-cont{display: flex;}
|
|
.accountList-ul-top-time, .accountList-ul-cont-text{flex: 1}
|
|
.accountList-ul-top-time>i{padding-right: 10px;}
|
|
.accountList-ul-cont{font-size: 14px; margin-top: 5px; color: #5d5d5d;}
|
|
span.accountList-ul-red{color: red}
|
|
span.accountList-ul-green{color: green;}
|
|
.empty{ text-align: center;padding-bottom: 30px; color: #7c7b7d; font-size: 16px; background: #fff; border-radius: 5px; margin: 10px 20px; box-shadow: 0 0 2px 3px rgba(0,0,0,.01);}
|
|
.empty>img{width: 160px; margin: 0 auto 20px; display: block;}
|
|
|
|
|
|
/* 卡管理 */
|
|
.cardHead, .cardNav{margin: 10px;}
|
|
.cardHead, .cardNav, .cardList-title, .cardList-ul{border-radius: 5px;box-shadow: 0 0 2px 3px rgba(0,0,0,.01);}
|
|
|
|
.cardNav{background: white; padding: 10px 15px;}
|
|
.cardNav-top{border-bottom: 1px solid #f2f2f2; padding-bottom: 10px; font-weight: 600}
|
|
.cardNav-ul {display: flex; margin: 10px 0 0;}
|
|
.cardNav-ul li{flex: 4; text-align: center; font-size: 12px; color: #6b6b6b;}
|
|
.cardNav-ul li span{display: block; font-size: 18px; color: #ff9502;;}
|
|
|
|
.cardList{margin: 0 10px;}
|
|
.cardList-title {background: white; padding: 8px 15px; display: flex;}
|
|
.cardList-title>span{flex: 1; font-size: 15px; font-weight: 600; line-height: 28px;}
|
|
.cardScreen{float: right;width: auto;}
|
|
.cardScreen>select {height: 28px; width: auto;}
|
|
|
|
.cardList-take{background:white; margin-top: 10px;}
|
|
.cardList-ul{padding: 8px 15px;}
|
|
.cardList-ul>li{border-bottom: 1px #f2f2f2 solid; padding-bottom: 10px;display: flex; margin-bottom: 10px;}
|
|
.cardList-ul>li:last-child{border: none; padding-bottom: 0; margin-bottom: 0;}
|
|
.cardList-ul .cardList-ul-left{flex: 1; width: 80%; line-height: 28px; font-size: 15px;}
|
|
.cardList-ul .cardList-ul-left>span{display: block;}
|
|
.cardList-ul-right{color: #fff;height: 22px; line-height: 22px; font-size: 12px; border-radius: 5px; padding: 0 5px; margin-top: 5px;}
|
|
.cardList-blue{background: #49a1f6;}
|
|
.cardList-brown{background: #ae925e;}
|
|
.cardList-grey{background: #747c8f;}
|
|
.cardList-green{background: #43c66e;}
|
|
.cardList-yellow{background: #f2a12a;}
|
|
|
|
/* 卡种选择 */
|
|
.cardChoose{padding: 10px;}
|
|
.cardChoose li{background: white; padding: 10px;box-shadow: 0 0 2px 3px rgba(0,0,0,.01); margin-bottom: 10px;display: flex; border-radius: 5px;}
|
|
.cardChoose-img{width: 45px; height: 45px; margin: 2px 15px 0 0;}
|
|
.cardChoose-cont {width: calc(100% - 60px); display: flex;}
|
|
.cardChoose-cont p {flex: 1; margin-bottom: 0;color: #999;}
|
|
.cardChoose-cont p span {display: block; font-size: 18px; font-weight: 600; margin-bottom: 3px; color: #313131;}
|
|
.cardChoose-cont i {font-size: 24px;line-height: 47px; color: #cacaca;}
|
|
|
|
/* 提现表单 */
|
|
.withdrawForm {background: white; border-radius: 5px; padding: 15px;box-shadow: 0 0 2px 3px rgba(0,0,0,.01); margin: 20px 15px;}
|
|
.withdrawForm-ul>li{overflow: hidden;border-bottom: 1px solid #f0f0f0; padding-bottom: 10px; margin-bottom: 10px;}
|
|
.withdrawForm-ul>li:last-child{border: none;}
|
|
.withdrawForm-ul>li .withdrawForm-ul-left {width: 100px; font-size: 16px; margin-right: 10px; font-weight: 600;}
|
|
/*.withdrawForm-ul>li .withdrawForm-ul-right{display: flex;width: calc(100% - 110px); padding-top: 2px; line-height: 25px;}*/
|
|
.withdrawForm-ul>li .withdrawForm-ul-right{display: flex;width: 100%; padding-top: 2px; line-height: 25px;}
|
|
|
|
.withdrawForm-add{text-align: center; font-size: 16px; line-height: 40px; margin-bottom: 20px}
|
|
.withdrawForm-add>i{padding-right: 5px}
|
|
.withdrawForm-ul>li .withdrawForm-ul-right i{font-size: 22px; color: #cccccc; line-height: 40px;}
|
|
.withdrawForm-ul .checkbox>input+label:after, .radio>input+label:after{top: 11px;}
|
|
.withdrawForm-ul .checkbox>input+label:before, .radio>input+label:before {top: 6px;}
|
|
.withdrawForm-ul-logo img{width: 35px; height: 35px; margin: 0;}
|
|
.withdrawForm-ul-text {display: flex; width: calc(100% - 45px); margin-left: 10px}
|
|
.withdrawForm-ul-text>div{flex: 1;}
|
|
.withdrawForm-ul-text>div>span{display: block; font-size: 16px; font-weight: 600;}
|
|
.withdrawForm-money p {font-weight: 600; font-size: 15px;}
|
|
.withdrawForm-money-input{border-bottom: 1px #f0f0f0 solid; font-size: 22px; padding-bottom: 10px;}
|
|
.withdrawForm-money-input>input{border: none; background: transparent;}
|
|
.withdrawForm-money-text{margin: 10px 0; color: #999;}
|
|
.withdrawForm-money-text button{background: transparent; border: none; color: #007ad0; padding-left: 10px;}
|
|
.withdrawForm-btn {background: #ffde61; color: #806500; border-radius: 5px; line-height: 40px; width: 100%; text-align: center; margin: 20px 0 10px; font-size: 15px;}
|
|
|
|
/* 添加银行卡 */
|
|
.formbox-label {width: 100%;line-height: 40px;padding: 0 15px; font-weight: 600;}
|
|
.formbox-input {width: 100%;padding: 0 15px;background-color: #fff;border-top: 1px solid #eee;border-bottom: 1px solid #eee;overflow: hidden;}
|
|
.formbox-input input {width: 100%;line-height: 40px;border: 0;}
|
|
|
|
.formbox-file-margin{text-align: center;}
|
|
.formbox-file {background: url(../img/file.png) no-repeat;padding-top: 50%;width: 50%;background-size: 100% 100%;position: relative;margin: 0 auto;}
|
|
.formbox-file input {height: 40px;width: 100%;border: none;border-bottom: solid 1px #F8F8F8;font-size: 27px;}
|
|
.formbox-file input#file {display: block;width: auto;border: 0;vertical-align: middle;width: 100%;height: 11rem;position: absolute;top: 0;opacity: 0;}
|
|
.formbox-input-img {width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 99;background-size: cover;background-position: center;}
|
|
.worksFile-btn {bottom: 0;left: 0;background: #c7c7c7;border-radius: 4px;width: 50%;line-height: 36px;color: #fff;display: inline-block;margin-top: 15px;text-align: center;}
|
|
|
|
|
|
/* 提现记录 */
|
|
.recordHead {background: white; padding: 20px 0; border-radius: 10px; margin: 15px;box-shadow: 0 0 2px 3px rgba(0,0,0,.01); text-align: center;}
|
|
.recordHead img{width:60px; margin: 0 auto;}
|
|
.recordHead-btn{background: #f3c303; color: #fff; border-radius: 5px; padding: 5px 15px; display: inline-block; margin-top: 15px;}
|
|
.recordUl-title{font-size: 16px; color: #999; text-align: center;}
|
|
.recordHead-price{color: #747474;}
|
|
.recordHead-price>span{display: block; font-size: 28px; color: #df0000; margin: 5px 0;}
|
|
.recordList {background: white; border-radius: 10px; box-shadow: 0 0 2px 3px rgba(0,0,0,.01); margin: 0 15px; padding: 15px; margin-top: 15px;}
|
|
.recordList li{margin-bottom: 10px; border-bottom: 1px solid #f0f0f0; padding-bottom: 10px;}
|
|
.recordList li:last-child{padding-bottom: 0; border: none; margin-bottom: 0;}
|
|
.recordList-name{display: flex; font-size: 16px; margin-bottom: 5px;}
|
|
.recordList-name>span, .recordList-time>span{flex: 1;}
|
|
.recordList-time {display: flex; color: #999;}
|
|
.recordList-time div.recordList-green{color: #4b9347;}
|
|
.recordList-time div.recordList-red{color: #df0000;}
|
|
|
|
/* 二维码分享 */
|
|
.codeBack{background-position:top center; background-size: cover; width: 100%; height: 100vh;}
|
|
.codeBack-title {padding: 40px; height: calc(20% + 30px); box-sizing: border-box;}
|
|
.codeCont {background: white; border-radius: 10px;box-shadow: 0 0 2px 3px rgba(0,0,0,.01); border: 5px solid #b0d6ff; width: 84%; margin: 0 auto; text-align: center; position: relative; height: 60%;}
|
|
.codeCont-head-img {width: 70px; height: 70px; border-radius: 50%; position: relative; margin: -30px auto 15px; overflow: hidden;border: 5px solid #b0d6ff;}
|
|
.codeCont-head-name {font-size: 16px;}
|
|
.codeCont-head-name>span{color: #bf7600; padding-right: 5px;}
|
|
.codeCont-img{background-position: center; background-size: 100% 100%; width: 70%; padding-top: 70%; position: absolute; left: 15%; top: 100px;}
|
|
.codeCont-scan{position: absolute; top: 10px; left: 10px; right: 10px; bottom: 0;}
|
|
.codeCont-text{position: absolute; top: calc(70% + 70px); width: 100%; text-align: center;}
|
|
|
|
/* 登录 */
|
|
.register{background: #fff; position: fixed; width: 100%; height: 100%; left: 0; top: 0; padding: 20px 15px;}
|
|
.registerTitle{margin-bottom: 40px; color: #999;}
|
|
.registerTitle>p{font-size: 25px; color: #313131;}
|
|
.registerList{border-bottom: 1px solid #f2f2f2; margin-bottom: 25px;}
|
|
.registerList-name>i{padding-right: 5px;}
|
|
.registerList-tel{line-height: 45px;display: flex;}
|
|
.registerList-tel>input{border: none; background: transparent;flex: 1;}
|
|
.registerList-tel>input::-webkit-input-placeholder{font-size: 14px;}
|
|
.registerList-tel>span{display: inline-block; width: 50px; font-weight: 600;}
|
|
.registerList-tel>button{border: #d8d8d8 1px solid; border-radius: 30px; background: transparent; height: 30px; line-height: 26px; float: right; margin-top: 9px; padding: 0 10px;}
|
|
.registerBtn{width: 100%; height: 42px; text-align: center;}
|
|
.registerBtn>button{width: 100%; background: #daa965; height: 100%; line-height: 42px; color: #fff; border-radius: 20px; border: none; font-size: 15px; margin-bottom: 10px;}
|
|
.registerBtn>span{font-size: 15px; color: #999;}
|
|
.registerBtn>span>i{font-size: 17px; padding-left: 5px;}
|
|
.registerBtn-left{ padding-left: 50px;}
|
|
|
|
/*我要进卡*/
|
|
.enterCard-title {width: 75%; margin: 0 auto; padding-top:10px; color: #fff; font-size: 50px; text-shadow: 1px 2px 8px rgb(193, 122, 62)}
|
|
.enterCard-title img{margin-bottom: 0}
|
|
|
|
|
|
.enterCard{background: url(../img/enter_card_02.png) #ffda3c; position: relative; width: 100%; height: 100vh; left: 0; top: 0; background-size: 100%; background-repeat: no-repeat; background-position: bottom center;;}
|
|
.enterCard-block {width: 80%; margin: 0 auto 10px;}
|
|
.enterCard-block input[disabled]{opacity: 1!important; color: #000;}
|
|
.enterCard-top, .enterCard-cont{width: 90%; margin: 10px auto 0; background: rgba(255,255,255,.9);border-radius: 10px; overflow: hidden;}
|
|
.enterCard-cont-title { margin-bottom: 10px;}
|
|
.enterCard-form {width: 80%; margin: 0 auto; text-align: center; padding: 10px 0 20px;}
|
|
.enterCard-block>span{width: 35px; background: #bfbfbf; color: #fff; display: inline-block;line-height: 23px; height: 25px; font-size: 15px; font-weight: 600}
|
|
.enterCard-block>span, .enterCard-block>input{border-radius: 5px; text-align: center;}
|
|
.enterCard-block>input{max-width: 75px; line-height: 26px; height: 26px; border:1px solid #6885fb; background: transparent; font-weight: 600; margin: 0 5px;}
|
|
.enterCard-btn button{background: linear-gradient(to right, #658dfe, #7d4def); color: #fff; text-align: center; border: none; width: 60%; border-radius: 5px; line-height: 35px; font-size: 16px; margin: 20px 0 0;}
|
|
.enterCard-address>input{margin-top:10px; line-height: 32px; border-radius: 5px; border: 1px solid #e4e4e4; padding-left: 10px}
|
|
|
|
.enterCard-cont {overflow: hidden;}
|
|
.enterCard-cont-title{background: linear-gradient(to right, #e1f1ff, #f5faff); line-height: 40px; height: 40px; padding-left: 25px; font-size: 16px; color: #3671f9; position: relative;}
|
|
.enterCard-cont-title::after{position: absolute; left: 15px; top: 28%;content: ''; height: 46%; width: 4px; background: #3671f9;}
|
|
.enterCard-cont-text{font-size: 16px; padding: 0 20px; line-height: 30px; margin: 10px 0; text-align: justify;}
|
|
|
|
|
|
/* 收货地址 */
|
|
.addressList{width: 100%;padding:15px;}
|
|
.addressList li {width: 100%;border: 1px solid #f2f2f2;border-radius: 4px;overflow: hidden;margin-bottom: 15px;background-color: #fff;}
|
|
.addressList-name, .addressList-phone{width: 50%;height: 30px;color: #444;float: left;line-height: 30px;box-sizing: border-box;margin-top: 2px;}
|
|
.addressList-name{padding-left: 10px;}
|
|
.addressList-phone{text-align: right;padding-right: 10px;}
|
|
.addressList-text{padding: 0;color: #666;border-bottom: 1px dashed #f2f2f2;padding-bottom: 10px;padding-left: 10px;clear: both;}
|
|
.color-orange{color: #c30d23;}
|
|
.addressList-btn{padding: 10px;color: #444;background-color: #fff;overflow: hidden;position: relative;}
|
|
.addressList-btn button{position: absolute;top: 10px;color: #848484;border: 1px solid #e6e6e6;width: 55px;height: 24px;border-radius: 4px;background-color: #f7f7f7;padding: 0;}
|
|
.addressList-btn-edit{right: 80px;}
|
|
.addressList-btn-delete{right: 10px;}
|
|
.addressList-radio {display: inline-block;width: 30px;float: left;}
|
|
.addressList-radio input{width: 20px; height: 20px;}
|
|
.addressList-btn span{line-height: 24px;}
|
|
|
|
.addressAdd {width: 96%;height: 40px; line-height: 40px; background-color: #d89014;color: #fff;font-size: 16px;text-align: center;border: none;position: absolute; top: calc(50% - 20px); left: 2%; border-radius: 30px;}
|
|
.addressAdd::after{display: none;}
|
|
|
|
/* 新增地址 */
|
|
.addressForm{background-color: #fff;border-bottom: 1px solid #eee;padding-bottom: 10px;}
|
|
.addressForm-input{width: 100%;overflow: hidden;padding: 10px;}
|
|
.addressForm-input-name{width: 90px;float: left;line-height: 30px;}
|
|
.addressForm-input input {width: calc(100% - 90px);float: left;line-height: 30px;border: 0;border-bottom: 1px solid #eee;background: 0 0;outline: 0;color: #666;padding: 0;}
|
|
.address-i {width: 20px;display: inline-block;color: #999;}
|
|
.addressForm-select {width: 100%;overflow: hidden;padding: 10px;position: relative;}
|
|
.addressForm-select textarea {width: calc(100% - 90px);float: right;border: 0;border-bottom: 1px solid #eee;background: 0 0;outline: 0;color: #666;}
|
|
|
|
.addressForm-mode{width: 100%;line-height: 20px;padding: 10px 13px;border-bottom: 1px solid #eee;border-top: 1px solid #eee;background-color: #fff;margin-top: 13px;position: relative;}
|
|
.addressForm-mode-btn{width: 30px;float: right;position: relative;text-align: right;}
|
|
.addressForm-mode-btn>input {position: absolute;top: 0;left: 0;display: block;width: 100%;height: 30px;margin: 0;opacity: 0;}
|
|
.addressForm-mode-btn>label {display: block;padding: 0;margin: 0;font-weight: 400;line-height: 20px;}
|
|
.addressForm-mode-btn>label:after, .addressForm-mode-btn>label:before {position: absolute;left: 0;display: block;pointer-events: none;content: ' ';border: 1px solid #eee;border-radius: .5rem;-webkit-transition: all .4s cubic-bezier(.175,.885,.32,1);-o-transition: all .4s cubic-bezier(.175,.885,.32,1);transition: all .4s cubic-bezier(.175,.885,.32,1);}
|
|
.addressForm-mode-btn>label:before {width: 30px;height: 20px;top: 0px;}
|
|
.addressForm-mode-btn>label:after {top: 1px;width: 18px;height: 18px;background-color: #fff;border-color: #eee;border-radius: 9px;-webkit-box-shadow: rgba(0,0,0,.05) 0 1px 0.2rem, rgba(0,0,0,.12) 0 1px 0.1rem;box-shadow: rgba(0,0,0,.05) 0 1px 0.2rem, rgba(0,0,0,.12) 0 1px 0.1rem;}
|
|
.addressForm-mode-btn>input:checked+label:before {background-color: #d89014;border-color: #d68905;}
|
|
.addressForm-mode-btn>input:checked+label:after {left: 10px;border-color: #fff;}
|
|
.addressForm-input input::-webkit-input-placeholder, .addressForm-select textarea::-webkit-input-placeholder{font-size: 15px;}
|
|
|
|
|
|
/* 我的订单 */
|
|
.orderNav {width: 100%;overflow: hidden;background-color: #fff;margin-bottom: 15px;}
|
|
.orderNav span {flex: 3;border-bottom: 1px solid #f2f2f2;height: 44px;line-height: 44px;text-align: center;}
|
|
.orderNav span.active {font-weight: 700;opacity: 1;color: #000;background-color: unset;position: relative;}
|
|
.orderNav span.active:after {background-color: unset;content: '';position: absolute;bottom: 0;width: 20px;left: calc(50% - 10px);height: 2px;background: #000;top: unset;}
|
|
|
|
.orderText-back{background: white;border-top: 1px solid #f2f2f2;border-bottom: 1px solid #f2f2f2;}
|
|
.orderText-name{display: flex;border-bottom: #f2f2f2 1px solid; padding: 10px 15px;}
|
|
.orderText-name>p{flex: 1; font-size: 16px; margin-bottom: 0;}
|
|
.orderText-name>span{color: #f8be22;}
|
|
|
|
.orderText-list{margin: 15px 0 0; padding: 0 15px;}
|
|
.orderText-list>li{padding-bottom: 15px; margin-bottom: 15px; border-bottom: #f2f2f2 1px solid;}
|
|
.orderText-list>li:last-child{border: none; padding-bottom: 0;}
|
|
.orderText-list-text{width: 100%;}
|
|
.orderText-list-name{font-size: 16px;}
|
|
.orderText-list-span{margin-top: 15px; display: flex; color: #999; line-height: 20px;}
|
|
.orderText-list-price{color: #fe2a00; font-size: 15px;flex: 1;}
|
|
|
|
.orderText-total{text-align: right; width: 100%; padding: 10px 15px; border-top: #f2f2f2 1px solid;border-bottom: #f2f2f2 1px solid;}
|
|
.orderText-total>span{font-size: 16px; font-weight: 600; padding-left: 5px;}
|
|
.orderText-total>span>small{font-size: 12px;}
|
|
|
|
.orderText-btn{text-align: right; padding: 10px 15px;}
|
|
.orderText-btn>button{padding: 5px 15px; border-radius: 3px; margin-left: 10px;}
|
|
.orderText-btn>button.orderText-btn-cancel{background: #fff; color: #b4b7b9; border: #dadfe3 1px solid;}
|
|
.orderText-btn>button.orderText-btn-pay{background: #d6a851; color: #fff; border: #d0a24f 1px solid;}
|
|
.nullData{text-align: center; padding: 120px 0 0; color: #999;}
|
|
.nullOrder{width: 140px;margin: 0px auto;}
|
|
|
|
|
|
/* 订单详情 */
|
|
.orderDetails-title {width: 100%;padding: 15px;background: #e6aa06;position: relative;}
|
|
.orderDetails-title-i {position: absolute;right: 15px;background: #fff;width: 40px;height: 40px;border-radius: 40px;text-align: center;line-height: 40px;top: 15px;}
|
|
.orderDetails-title-i i {color: #e08901;font-size: 18px;}
|
|
.orderDetails-title h5 {line-height: 20px;font-size: 16px;margin-bottom: 5px;}
|
|
.orderDetails-title h5, .orderDetails-title span{color: #fff;}
|
|
|
|
.orderAddress {width: 100%;padding: 10px 15px; box-sizing: border-box; background: white;display: flex;}
|
|
.orderAddress-top{width: 100%;}
|
|
.orderAddress-name{font-size: 16px;line-height: 20px;display: inline-block;vertical-align: bottom;font-weight: 700;}
|
|
.orderAddress-phone{font-size: 16px;line-height: 20px;display: inline-block;vertical-align: bottom;margin-left: 15px;font-weight: 700;}
|
|
.orderAddress-area{width: 100%;margin-top: 6px; color: #737373;}
|
|
.orderAddress-flex{flex: 1;}
|
|
.orderAddress i{font-size: 22px; line-height: 44px; color: #c5c5c5;}
|
|
|
|
.orderAddress-list{border-top: #f2f2f2 1px solid;padding: 8px 15px 0;}
|
|
.orderAddress-list>li {width: 100%;line-height: 30px;display: flex;}
|
|
.orderAddress-list-number{min-width: 80px;color: #000;padding-right: 10px;}
|
|
|
|
.orderDetails{width: 100%; box-sizing: border-box; margin-top: 5px;}
|
|
|
|
/* 订单确认 */
|
|
.orderDetails-total{float: left; line-height: 32px;}
|
|
.orderDetails-total>span{font-size: 16px; color: #d6a752;}
|
|
.confirm_address_null {width: 100%;text-align: center;font-size: 16px;text-align: center;line-height: 60px;background-image: url(../img/morning_42.png);background-color: #fff;background-size: 100%;background-repeat: no-repeat;background-position: bottom;}
|
|
|
|
.orderAddress-confirm .orderAddress-list-number{flex: 1;}
|
|
.orderAddress-confirm{padding: 0; margin-bottom: 0;}
|
|
.orderAddress-confirm>li{border-bottom: 1px solid #f2f2f2; line-height: 50px; padding: 0 15px;}
|
|
.orderAddress-confirm>li:last-child{border: none;}
|
|
|
|
|
|
/* 支付 */
|
|
.modular-list {overflow: hidden;background: #fff;border-bottom: solid 1px #e8e8e8;border-top: solid 1px #e8e8e8;padding-left: 10px;}
|
|
.modular-list>li {border-bottom: solid 1px #f5f5f5;padding-right: 10px;line-height: 48px;overflow: hidden;}
|
|
.confirm-price-color {color: #f93f28;}
|
|
.order-pay-icon {height: 24px;width: 24px;display: inline-block;vertical-align: middle;background-image: url(../img/pay-icon.png);background-size: cover;margin-right: 4px;}
|
|
.order-list-radio>input[type="radio"] {display: none;}
|
|
.order-list-radio>label {color: #999;line-height: 28px;padding-top: 2px;}
|
|
.order-list-radio>input[type="radio"]:checked + label {color: #e2a22f;}
|
|
.order-list-radio>label i {font-size: 18px;}
|
|
.order-pay-btn {padding: 10px;}
|
|
.order-pay-btn button {line-height: 40px;background: #d6a851;color: #fff;border: none;width: 100% ;border-radius: 4px;font-weight: bold;}
|
|
.balance-icon {background-position: 0 -24px;}
|