diff --git a/rc-busness/ajax/getData.js b/rc-busness/ajax/getData.js index fa138d0b..a2a15752 100644 --- a/rc-busness/ajax/getData.js +++ b/rc-busness/ajax/getData.js @@ -73,9 +73,7 @@ export const postCourseId = (productCode,buyCount,memberId, mobile,productImg,pr * 是否存在购物车 */ export const isexistCart = (id, pet,address) => { - var data = { - memberId: id, - } + var data = { } return fetch('getCartProductInfo?memberId='+id,data,'POST') } diff --git a/rc-busness/assets/css/global.less b/rc-busness/assets/css/global.less index ef354c03..4a21e7a4 100644 --- a/rc-busness/assets/css/global.less +++ b/rc-busness/assets/css/global.less @@ -1,134 +1,147 @@ /*Body*/ -body{ - font-family: DINPro,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif; +body { + font-family: DINPro, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif; line-height: 1.5; color: #666; } + .fade-enter, .fade-leave-active { - opacity: 0; + opacity: 0; } -.ts-no-data{ + +.ts-no-data { text-align: center; - margin:3rem 0; + margin: 3rem 0; } -.ts-mask{ - width:100%; - height:100%; + +.ts-mask { + width: 100%; + height: 100%; position: fixed; - top:0; - left:0; - display:flex; + top: 0; + left: 0; + display: flex; flex-direction: column; justify-content: center; align-items: center; - z-index:99; - - .ts-mask-bg{ - background-color:#000; - opacity:.6; - width:100%; - height:100%; - z-index:0; - position:absolute; - left:0; - top:0; + z-index: 99; + + .ts-mask-bg { + background-color: #000; + opacity: .6; + width: 100%; + height: 100%; + z-index: 0; + position: absolute; + left: 0; + top: 0; } } -.userloding { - background: url(../image/onloading.png) center center no-repeat; - width: 3.12rem; - background-size: contain; - height: 3.12rem; - animation: rolling 4s infinite; - -webkit-animation:rolling 4s infinite; -} -@keyframe rolling -{ - from{ +.userloding { + background: url(../image/onloading.png) center center no-repeat; + width: 3.12rem; + background-size: contain; + height: 3.12rem; + animation: rolling 4s infinite; + -webkit-animation: rolling 4s infinite; +} + +@keyframe rolling { + from { transform: rotateZ(0deg); } - to{ + + to { transform: rotate(360deg); } } -@-webkit-keyframes rolling -{ - from{ + +@-webkit-keyframes rolling { + from { transform: rotateZ(0deg); } - to{ + + to { transform: rotate(360deg); } } .fade-enter-active, .fade-leave-active { - transition: opacity 0.5s; + transition: opacity 0.5s; } + //用户光点 -.rc-screen-reader{ +.rc-screen-reader { width: 0.81rem; height: 0.81rem; border-radius: 50%; - position: absolute; - background-color: red; + position: absolute; + background-color: red; top: 16%; - left: 66%; - display: block; - width: 0.37rem; - height: 0.37rem; + left: 66%; + display: block; + width: 0.37rem; + height: 0.37rem; } -img, picture { - display: block; - max-width: 100%; - height: auto; + +img, +picture { + display: block; + max-width: 100%; + height: auto; } + .rc-main { - padding-left:1.25rem; - padding-right:1.25rem; - box-sizing:border-box; - margin-left:auto; - margin-right:auto; + padding-left: 1.25rem; + padding-right: 1.25rem; + box-sizing: border-box; + margin-left: auto; + margin-right: auto; } + .ts-remove { text-decoration: line-through; } -.ts-product-list{ + +.ts-product-list { text-align: center; display: flex; flex-wrap: wrap; justify-content: space-evenly; - &:after{ - } - li{ + &:after {} + + li { border: 1px solid #D7D7D7; display: inline-flex; border-radius: 4px; flex-direction: column; - max-width:10rem; - .rc-column - { - text-align:center; - padding:0 1rem; + max-width: 10rem; + + .rc-column { + text-align: center; + padding: 0 1rem; box-sizing: border-box; - span{ - height:2.75rem; - font-size: 1rem; - text-overflow: -o-ellipsis-lastline; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - line-clamp: 2; - -webkit-box-orient: vertical; - word-break: break-all; - white-space: normal; - color:#E2001A; + + span { + height: 2.75rem; + font-size: 1rem; + text-overflow: -o-ellipsis-lastline; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; + word-break: break-all; + white-space: normal; + color: #E2001A; } - i{ + + i { font-style: normal; font-size: 1.125rem; margin-top: .5rem; @@ -136,30 +149,35 @@ img, picture { } } } - img{ - width:10rem; - height:10rem; + + img { + width: 10rem; + height: 10rem; object-fit: contain; display: flex; margin: 0 auto; height: auto; } - .active{ + + .active { color: #E2001A; cursor: pointer; } - .unactive{ - color:#999999; + + .unactive { + color: #999999; cursor: pointer; } } + .rc-container { - height: 100%; - max-width: 1400px; - background-color: #fff; - margin: auto; + height: 100%; + max-width: 1400px; + background-color: #fff; + margin: auto; } -.ts-standard-btn{ + +.ts-standard-btn { font-style: normal; width: 8.125rem; height: 2.5rem; @@ -172,22 +190,25 @@ img, picture { cursor: pointer; text-align: center; background: #E2001A; - &.center{ - margin-left:auto; - margin-right:auto; + + &.center { + margin-left: auto; + margin-right: auto; } - &.ts-standard-btn--two{ + + &.ts-standard-btn--two { background-color: transparent; color: #e2001a; border-color: #e2001a; } - &.ts-standard-btn--max-width{ - width:100%; + + &.ts-standard-btn--max-width { + width: 100%; } } -.rc-mubu{ +.rc-mubu { height: 100%; background: #333333; opacity: 0.6; @@ -196,54 +217,62 @@ img, picture { width: 100%; z-index: 8; } -.ts-scrollable-container{ + +.ts-scrollable-container { display: flex; align-items: center; - h2{ - margin:0; + + h2 { + margin: 0; display: flex; align-items: center; } - .ts-scrollable{ - overflow-y:hidden; - overflow-x:auto; + + .ts-scrollable { + overflow-y: hidden; + overflow-x: auto; white-space: nowrap; display: flex; align-items: center; flex-wrap: nowrap; text-align: center; width: 86%; - li{ + + li { border-radius: 100px; - flex-shrink:0; + flex-shrink: 0; } } - .active{ + + .active { color: #E2001A; cursor: pointer; border: 2px solid #E2001A; } - .unactive{ - color:#999999; + + .unactive { + color: #999999; cursor: pointer; border: 2px solid #d7d7d7; } } - .online{ - width:100%; - background:#d7d7d7; - margin-top:1.5rem; - height:.06rem; - &.bold{ - height:.32rem; - background:#f6f6f6; +.online { + width: 100%; + background: #d7d7d7; + margin-top: 1.5rem; + height: .06rem; + + &.bold { + height: .32rem; + background: #f6f6f6; } - } +} + /*Body end*/ /* 头部 */ -.rc-fixright{ +.rc-fixright { width: 3.75rem; height: auto; position: fixed; @@ -252,14 +281,16 @@ img, picture { background: #FFFFFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.16); border-radius: .25rem; - z-index:3; - ul{ + z-index: 3; + + ul { width: 60px; height: 181px; background-color: white; display: flex; flex-direction: column; - li{ + + li { width: 100%; display: flex; flex-direction: column; @@ -267,21 +298,25 @@ img, picture { align-items: center; margin-top: 1.125rem; } - li:last-child{ + + li:last-child { margin-bottom: 0.2rem; } } - img{ + + img { width: 1.25rem; height: auto; display: block; } - span{ + + span { font-size: 0.12rem; } - .tuntop{ + + .tuntop { width: 100%; - height:4.125rem; + height: 4.125rem; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; @@ -291,229 +326,261 @@ img, picture { } } -.ts-max-width--460{ +.ts-max-width--460 { max-width: 460px; - margin-left: auto!important; - margin-right: auto!important; + margin-left: auto !important; + margin-right: auto !important; } -.ts-standard-input{ +.ts-standard-input { background: #F6F6F6; width: 100%; height: 3rem; border-radius: 4px; - padding:.875rem 0 .875rem 1rem; + padding: .875rem 0 .875rem 1rem; + &::-webkit-input-placeholder { text-align: left; } - &.ts-standard-input--two{ - - } + + &.ts-standard-input--two {} } + .ts-right-arr { font-style: normal; line-height: 22px; color: #E2001A; - font-weight:bold; - &.ts-right-arr--two:after{ + font-weight: bold; + + &.ts-right-arr--two:after { content: " "; width: .5rem; height: 1rem; background: url(../image/rc-left.png) no-repeat left top; background-size: contain; display: block; - position:absolute; - right:0; - top:.25rem; + position: absolute; + right: 0; + top: .25rem; } } /* 手机端 */ -@media screen and (max-width: 768px) -{ +@media screen and (max-width: 768px) { html { //font-size:100px; } + .rc-md-up { - display: none!important; + display: none !important; } - .rc-main{ - width:100%; + + .rc-main { + width: 100%; } - .rc-top{ + + .rc-top { margin-top: 90px; } - .rc-list__header { - } + .rc-list__header {} + .ts-right-arr { - border-bottom:1px solid #E1001A; - padding-bottom:2px; + border-bottom: 1px solid #E1001A; + padding-bottom: 2px; } - .rc-home-header{ + + .rc-home-header { width: 100%; - .rc-main - { + + .rc-main { box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; height: 70px; background-color: #fff; - .rc-center{ + + .rc-center { display: none; } } - .c-left img{ + + .c-left img { width: 19px; height: 14px; display: block; } - .c-right img{ + + .c-right img { width: 97px; height: 35px; display: block; } - .rc-search img{ + + .rc-search img { width: 19px; height: 19px; display: block; } - &.fixed{ - position:fixed; + + &.fixed { + position: fixed; top: 0; left: 0; - z-index:3; + z-index: 3; } - } - .ts-scrollable-container{ - margin-bottom:1.25rem; - &:last-child{ - margin-bottom:0; + } + + .ts-scrollable-container { + margin-bottom: 1.25rem; + + &:last-child { + margin-bottom: 0; } - h2{ + + h2 { font-size: 16px; - margin-right:.1rem; + margin-right: .1rem; } - .ts-scrollable{ - li{ + + .ts-scrollable { + li { width: 6rem; overflow: hidden; padding: 0 0.62rem; height: 1.625rem; margin-left: .5rem; - font-size:.75rem; - text-overflow:ellipsis; - white-space:nowrap; + font-size: .75rem; + text-overflow: ellipsis; + white-space: nowrap; line-height: 1.625rem; } - &::-webkit-scrollbar{ - display:none; + + &::-webkit-scrollbar { + display: none; } } } - + } - /* pc端 */ -@media screen and (min-width: 769px) -{ - - /deep/.van-tabs__wrap - { + +/* pc端 */ +@media screen and (min-width: 769px) { + + /deep/.van-tabs__wrap { max-width: 768px; margin: 0 auto; } - + html { - font-size:16px; + font-size: 16px; } - .rc-top{ + + .rc-top { margin-top: 124px; } - .ts-product-list{ + + .ts-product-list { text-align: left; //display:block; - display:flex; - li{ - max-width:20rem; - min-width:18.75rem; - width:22.8vw; + display: flex; + + li { + max-width: 20rem; + min-width: 18.75rem; + width: 22.8vw; //margin-right:.875rem; - margin-left:2vw; - padding-left:1px; - padding-right:1px; + margin-left: 2vw; + padding-left: 1px; + padding-right: 1px; box-sizing: border-box; - .rc-column{ - span{ - font-size:1.875rem; + + .rc-column { + span { + font-size: 1.875rem; height: 5.2rem; } } - &:nth-child(4n+1){ - margin-left:0; + + &:nth-child(4n+1) { + margin-left: 0; } - &:nth-child(4n){ + + &:nth-child(4n) { //margin-right:0; } } - img{ - width:100%; - max-width:320px; - min-width:160px; + + img { + width: 100%; + max-width: 320px; + min-width: 160px; } } + .ts-right-arr { cursor: pointer; - border-bottom : unset; - padding-right:1rem; - position:relative; - &:after{ + border-bottom: unset; + padding-right: 1rem; + position: relative; + + &:after { content: " "; width: .5rem; height: 1rem; background: url(../image/arr-right-red.png) no-repeat left top; background-size: contain; display: block; - position:absolute; - right:0; - top:.25rem; + position: absolute; + right: 0; + top: .25rem; } } + .rc-main { - width:100%; - max-width:1400px; + width: 100%; + max-width: 1400px; } + .rc-list--inline:not([role=tablist]):not([role=menubar]) { - -ms-flex-wrap: wrap; - flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } - .layout-container, .rc-layout-container { - margin-left: -1rem; - margin-right: -1rem; + + .layout-container, + .rc-layout-container { + margin-left: -1rem; + margin-right: -1rem; } - .rc-fixright{ - width:5.5rem; + + .rc-fixright { + width: 5.5rem; display: flex; flex-direction: column; align-items: center; - ul{ - width:100%; + + ul { + width: 100%; height: 100%; - li{ - margin-top: .5rem; - height:4.125rem; - cursor: pointer; - img{ - width:22px; - height:auto; - } + + li { + margin-top: .5rem; + height: 4.125rem; + cursor: pointer; + + img { + width: 22px; + height: auto; + } } } } - .rc-home-header{ - height:120px ; - .rc-main - { + + .rc-home-header { + height: 120px; + + .rc-main { width: 100%; margin: 0 auto; // position: fixed; @@ -524,13 +591,13 @@ img, picture { align-items: center; flex-direction: column; height: 120px; - ul - { + + ul { display: flex; align-items: center; margin-bottom: 20px; - li - { + + li { margin-right: 25px; color: #666666; cursor: pointer; @@ -538,170 +605,191 @@ img, picture { } } } - .c-left{ + + .c-left { display: none; } - .rc-search{ + + .rc-search { display: none; } - .c-left img - { + + .c-left img { width: 19px; height: 14px; display: block; } - .c-right img{ + + .c-right img { width: 120px; height: 45px; display: block; } } - - .ts-scrollable-container - { - margin-top:1.25rem; - &:last-child{ - margin-bottom:0; + + .ts-scrollable-container { + margin-top: 1.25rem; + + &:last-child { + margin-bottom: 0; } - h2{ - font-size:20px; - padding-bottom:1rem; + + h2 { + font-size: 20px; + padding-bottom: 1rem; } - .ts-scrollable - { - padding-bottom:1rem; + + .ts-scrollable { + padding-bottom: 1rem; scrollbar-width: thin; - li - { + + li { margin-left: 30px; width: 8.125rem; height: 2.5rem; //line-height: 40px; font-size: .875rem; - padding:.375rem; + padding: .375rem; } - - &::-webkit-scrollbar{ + + &::-webkit-scrollbar { height: 6px; - width:50%; - background:transparent; + width: 50%; + background: transparent; } - &::-webkit-scrollbar-thumb{ - background-color:#d7d7d7; - border-radius:10px; - width:50%; + + &::-webkit-scrollbar-thumb { + background-color: #d7d7d7; + border-radius: 10px; + width: 50%; } - &::-webkit-scrollbar-track{ + + &::-webkit-scrollbar-track { //background-color:#ddd; - background-color:transparent; + background-color: transparent; } - &::-webkit-scrollbar-button{ - background:unset; + + &::-webkit-scrollbar-button { + background: unset; } + /* */ } } } -@media (max-width: 960px) -{ +@media (max-width: 960px) { .rc-lg-up { - display: none!important; + display: none !important; } } -@media (min-width: 1024px) -{ + +@media (min-width: 1024px) { .rc-xl-down { - display: none!important; + display: none !important; } } -@media screen and (min-width: 769px) and (max-width: 1370px) -{ + +@media screen and (min-width: 769px) and (max-width: 1370px) { .ts-product-list { - display:flex; + display: flex; + //justify-content: space-between; - li{ - margin-left:0; - margin-right:0; + li { + margin-left: 0; + margin-right: 0; } } } + .rc_contline { - border-bottom: 3px solid #f6f6f6; - height: 0px; - margin: 0; - clear: both; + border-bottom: 3px solid #f6f6f6; + height: 0px; + margin: 0; + clear: both; } .page_modules { - padding-top: 60px; + padding-top: 60px; } .cont_modules { - margin: 0 auto; - max-width: 1400px; + margin: 0 auto; + max-width: 1400px; } .inline_right { - display: flex; - justify-content: space-between; - width: 100%; + display: flex; + justify-content: space-between; + width: 100%; } .inline_mid { - display: flex; - justify-content: space-around; - width: 100%; + display: flex; + justify-content: space-around; + width: 100%; } .inline_left { - display: flex; - justify-content: space-evenly; - width: 100%; + display: flex; + justify-content: space-evenly; + width: 100%; } .li_inline { - li { - display: inline-block; - vertical-align: middle; - } + li { + display: inline-block; + vertical-align: middle; + } } .color_red { - color: #E2001A; + color: #E2001A; } .tc { - text-align: center; + text-align: center; } .tr { - text-align: right; + text-align: right; } -.el-dialog{ - width: 90%; - max-width: 440px; -} -#tns2-iw{ height: 90px;} -.rc-carousel:not(.rc-carousel--loaded){visibility:visible!important} -@media screen and (max-width: 768px) { - .el-message-box{ - width: 300px; - } - .el-dialog{ - width: 90%; - } -.diallog_width{ - .el-dialog{ - width: 100%; - } - .el-dialog__title{ - color: #e1001a; + +.diallog_width { + .el-dialog { + width: 90%; + max-width: 920px; } } - - } - \ No newline at end of file + +#tns2-iw { + height: 90px; +} + +.rc-carousel:not(.rc-carousel--loaded) { + visibility: visible !important +} + +@media screen and (max-width: 768px) { + .el-message-box { + width: 300px; + } + + .el-dialog { + width: 90%; + } + + .diallog_width { + .el-dialog { + width: 100%; + } + + .el-dialog__title { + color: #e1001a; + } + } + +} \ No newline at end of file diff --git a/rc-busness/components/address.vue b/rc-busness/components/address.vue new file mode 100644 index 00000000..615bb2f0 --- /dev/null +++ b/rc-busness/components/address.vue @@ -0,0 +1,281 @@ + + + + + diff --git a/rc-busness/pages/personal/settlement.less b/rc-busness/pages/personal/settlement.less index ea342148..f12e0020 100644 --- a/rc-busness/pages/personal/settlement.less +++ b/rc-busness/pages/personal/settlement.less @@ -184,6 +184,8 @@ ul li ol li em strong i { .rc-image { border: 1px solid #d8d8d8; margin-right: 20px; + width: 96px; + height: 96px; img { width: 96px; @@ -375,21 +377,38 @@ ul li ol li em strong i { .diallog_width { width: 100%; - max-width: 440px; + max-width: 920px; margin: 0 auto; + + .el-dialog { + width: 100%; + } } -.el-dialog__header{ +.el-dialog__header { color: #e1001a; } + //手机端 @media screen and (max-width: 768px) { - .settlement { - padding-top: 0; + .popnewaddr{ + position: absolute; + bottom: -14px; + left: 0; + width: 100%; + .btn{ + display: block; + background: #e2001a; + line-height: 48px; + text-align: center; + color: white; + font-size: 16px; + border-radius: 30px; + } } .diallog_width { width: 100%; - + } .inline { @@ -401,72 +420,101 @@ ul li ol li em strong i { } .pop_list { - p{ padding: 0; margin: 0; line-height: 180%;} + p { + padding: 0; + margin: 0; + line-height: 180%; + } + .mypersonal { border-bottom: 1px solid #d8d8d8; padding: 15px 0; } - input,.el-icon-edit{ + + input, + .el-icon-edit { margin-top: 20px; } } - .rc-main { - .address-list { - display: contents; + .settlement { + .rc-main { + padding-top: 0; - .mypersonal { - width: 100%; - height: auto; - display: none; - border: none; - padding: 0; + .rc-usermain { - &.active { - display: block; + h3, + p { + padding: 0; + margin: 0; + } + + .rc-usercenter h3 { + margin-top: 0; + } + } + } + + .rc-main { + width: 100%; + + .address-list { + display: contents; + + .mypersonal { + width: 100%; + height: auto; + display: none; border: none; + padding: 0; - .arrow_ph { + &.active { display: block; + border: none; + + .arrow_ph { + display: block; + } + + .edit { + display: none; + } } - .edit { - display: none; + &.add { + // display: block; } } + } - &.add { - // display: block; + .rc-usermain { + .rc-right { + display: table } } - } - .rc-usermain { - .rc-right { - display: table + .rc-merchandise { + padding: 15px 0 120px; + + ul { + float: none; + width: 100%; + } } - } - .rc-merchandise { - padding: 15px 0 120px; - - ul { - float: none; - width: 100%; - } - } - - .rc-foot { - .rc-foo { - display: flex; - justify-content: space-around; - flex-direction: row; - align-items: self-end; - position: fixed; - bottom: 0; - background: #fff; - width: 100%; - padding: 10px; + .rc-foot { + .rc-foo { + display: flex; + justify-content: space-around; + flex-direction: row; + align-items: self-end; + position: fixed; + left: 0; + bottom: 0; + background: #fff; + width: 100%; + padding: 10px; + } } } } diff --git a/rc-busness/pages/personal/settlement.vue b/rc-busness/pages/personal/settlement.vue index 5f71006a..521c3108 100644 --- a/rc-busness/pages/personal/settlement.vue +++ b/rc-busness/pages/personal/settlement.vue @@ -1,8 +1,9 @@