diff --git a/rc-busness/assets/css/discount.less b/rc-busness/assets/css/discount.less index 9b580ef7..e32d841b 100644 --- a/rc-busness/assets/css/discount.less +++ b/rc-busness/assets/css/discount.less @@ -1,8 +1,6 @@ @media screen and (max-width:768px){ .allmain{ - .rc-top{ - margin-top: 2.5rem; - } + } .active { @@ -29,7 +27,7 @@ display: block; margin-left: 32px; font-weight: bold; - + cursor: pointer; } span:first-child { margin-left: 0; @@ -156,9 +154,7 @@ margin-top: 8px; @media screen and (min-width: 769px){ .allmain{ - .rc-top{ - margin-top: 1.5rem; - } + .rs-dis{ display: flex; flex-flow: wrap; @@ -192,6 +188,7 @@ margin-top: 8px; margin-left: 40px; font-size: 16px; font-weight: bold; + cursor: pointer; } span:first-child { diff --git a/rc-busness/assets/css/global.less b/rc-busness/assets/css/global.less index 41a7a528..7d860107 100644 --- a/rc-busness/assets/css/global.less +++ b/rc-busness/assets/css/global.less @@ -128,13 +128,14 @@ img, picture { height: 100%; background: #333333; opacity: 0.6; - position: absolute; + position: fixed; bottom: 0; width: 100%; z-index: 8; } .ts-scrollable-container{ display: flex; + align-items: center; h2{ margin:0; display: flex; @@ -281,6 +282,11 @@ img, picture { .rc-top{ margin-top: 74px; } + .rc-list__header { + background: none; + padding: .5rem 0; + border-bottom: none; + } .ts-right-arr { border-bottom:1px solid #E1001A; padding-bottom:2px; diff --git a/rc-busness/assets/css/index.less b/rc-busness/assets/css/index.less index de8a815f..eeb5af6a 100644 --- a/rc-busness/assets/css/index.less +++ b/rc-busness/assets/css/index.less @@ -337,6 +337,8 @@ object-fit: cover; color: #fff; height: 100%; width: 100%; + font-size: 1.25rem; + line-height: 9.375rem; text-align: center; diff --git a/rc-busness/assets/css/search.less b/rc-busness/assets/css/search.less index 9fcef91a..86ff520b 100644 --- a/rc-busness/assets/css/search.less +++ b/rc-busness/assets/css/search.less @@ -1,67 +1,271 @@ .rc-top{ - position: relative; + position: relative; +} + +/deep/ .el-drawer{ + height: 60%; +} +ul li ol li em strong i { + list-style: none; + font-style: normal; + +} +.rc-main { + position: relative; + margin-top: 5.25rem; + .usersearch { + width: 100%; + margin: 0 auto; + overflow: hidden; + margin-top: 20px; + } + .active{ + border: 2px solid #E2001A; + color: #E2001A; + cursor: pointer; + + } + .unactive{ + border: 2px solid #d7d7d7; + color:#999999; + cursor: pointer; + + } +} +//手机端 +@media screen and (max-width: 768px) { + .active{ + border: 2px solid #E2001A; + color: #E2001A; + cursor: pointer; + + } + .unactive{ + border: 2px solid #d7d7d7; + color:#999999; + cursor: pointer; + + } +//搜索 +.usersearch { +strong{ + font-size: 18px; + color: #333333; + display: block; + font-weight: bold; +} +} +.rc-max-width--xl{ +/deep/ .van-search__content { + width: 7rem; + height: 2rem; + border: 1px solid #d7d7d7; + border-radius: 12.5rem; + background: white; +} +/deep/.van-search{ + padding: 0; +} +.rc-search { + width: 4.31rem; + height: 2rem; + background: #e1001a; + border-radius: 2rem; + text-align: center; + color: white; + font-size:0.87rem ; +} +.rc-title { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 auto; + color: #333333; + margin-top: 1.5rem; + + span { + font-size: 14px; + color: #666666; + border-bottom: 1px solid #666666; + display: block; + } +} +// 热门搜索 +.rc-variety { + margin-top: 1.06rem; + ul { + display: flex; + align-items: center; + flex-wrap: nowrap; + overflow: hidden; + width: 100%; + + } + ul li { + width: 80px; + height: 32px; + background: #ffffff; + border: 1px solid #d7d7d7; + border-radius: 100px; + text-align: center; + font-size: 14px; + float: left; + line-height: 32px; + margin-left: 5px; + } + li:first-child{ + margin-left: 0; + } +} +// 我想搜 +.usercontentshow{ + position: relative; + .rc-productcat { + display: flex; + align-items: center; + flex-wrap: nowrap; + margin-top: 1rem; + ol{ + display: flex; + align-items: center; + flex-flow: row; + .ts-standard-btn{ + width: 7.87rem; + height: 2.25rem; +background: #FFFFFF; +border-radius: 6.25rem; +background: none; +display: flex; +align-items: center; +justify-content: center; +margin-left: 1rem; +color: #999999; +img { +width: 1.5rem; +height: 1rem; +} +span { +margin-left: 0.18rem; +} + } + } +//筛选 + .userselect{ + display: flex; + align-items: center; + justify-content: center; + color: #666666; + font-size: 0.87rem; + margin-left: 0.94rem; + margin-top: 0; + img{ + width: 1rem; + height: 1rem; + } + span{ + display: block; + margin-left: 0.5rem; + display: block; + + } + } + + } + .ts-scrollable-container{ + margin-top: 0.93rem; + } + +} +.usersearch{ + .rc-column{ + strong{ + font-size: 0.875rem; + font-weight: normal; + } } - /deep/ .el-drawer{ - height: 60%; - } - ul li ol li em strong i { - list-style: none; - font-style: normal; - - } - .rc-main { - .usersearch { - width: 100%; - margin: 0 auto; - overflow: hidden; +} + + + +.rc-prefecture{ + display: flex; + h2{ + font-size: 16px; +color: #333333; +margin-left: 12px; } - .active{ - border: 2px solid #E2001A; - color: #E2001A; - cursor: pointer; - - } - .unactive{ - border: 2px solid #d7d7d7; - color:#999999; - cursor: pointer; - + ol{ + display: flex; + align-items: center; + flex-wrap: nowrap; + font-size: 12px; + text-align: center; + width: 80%; + overflow-x: auto; +white-space: nowrap; + } + li{ + display: inline-block; + text-align: center; + display: flex; + align-items: center; +height: 26px; +background: #FFFFFF; +border: 1px solid #D7D7D7; +padding: 0 5px 0 5px; +border-radius: 100px; + + } +} + +.rc-bottom{ + position: fixed; + background: white; + bottom: 0; + left: 0; + z-index: 9; + ol li{ + background: none; + width: 7.87rem; + height: 2.25rem; + background: #FFFFFF; + border-radius: 6.25rem; + background: none; + display: flex; + align-items: center; + justify-content: center; + margin-left: 1rem; + } + +} + +.rc-bottoma{ + margin-bottom:2rem; + } + + .rc-footer{ + display: flex; + align-items: center; + justify-content: space-evenly; + width: 100%; + padding: 0 0.5rem; + box-sizing: border-box; + span{ + width: 1.55rem; + height: 0.48rem; + border: 2px solid #E1001A; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.14rem; + color: #E1001A; + border-radius: 0.30rem; } - } - //手机端 -@media screen and (max-width: 768px) { - .usercontentshow{ - position: relative; - } - .rc-bottom{ - position: relative; - background: white; - z-index: 9; - .rc-bottoma{ - margin-bottom:2rem; - } - .rc-footer{ - display: flex; - align-items: center; - justify-content: space-evenly; - width: 100%; - padding: 0 0.5rem; - box-sizing: border-box; - span{ - width: 1.55rem; - height: 0.48rem; - border: 2px solid #E1001A; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.14rem; - color: #E1001A; - border-radius: 0.30rem; - } - em{ - width: 1.55rem; - margin-left: 0.25rem; + em{ + width: 1.55rem; + margin-left: 0.25rem; height: 0.48rem; background: #E2001A; border-radius: 0.30rem; @@ -72,17 +276,27 @@ font-style: normal; justify-content: center; list-style: none; - } - } - .rc-cat{ - margin-top: 0.24rem; } - + } + .rc-cat{ + margin-top: 0.24rem; + } - .rc-productcat { + .rc-product { + h2 { + font-size: 18px; + color: #333333; + margin-left: 12px; + } + .ts-scrollable{ + margin-top: 1rem; + } + + .rc-productcat { display: flex; align-items: center; flex-wrap: nowrap; + margin-top: 1rem; .rc-cat { width: 32%; height: 0.34rem; @@ -104,491 +318,292 @@ } } - + } } - /deep/ .van-search__content { - width: 2.50rem; - height: 0.32rem; - border: 1px solid #d7d7d7; - border-radius: 2rem; - background: white; - } - .rc-search { - width: 0.69rem; - height: 0.32rem; - background: #e1001a; - border-radius: 2rem; - text-align: center; - color: white; - } - .rc-title { - width: 100%; +} +//pc端 +@media screen and (min-width: 768px){ +strong{ + font-size: 26px; + color: #333333; + display: block; +} +.ts-scrollable{} +.active{ +border: 2px solid #E2001A; +color: #E2001A; +cursor: pointer; + +} +.unactive{ +border: 2px solid #d7d7d7; +color:#999999; +cursor: pointer; + +} +.rc-main { + margin-top: 7.25rem; + +} +.ts-scrollable-container{ + margin-top: 40px; +} +/deep/.el-dialog { + width: 920px; + height: 570px; + background: #FFFFFF; + } + /deep/.van-search__action{ + display: block; + } + .rc-search { + width: 100%; + text-align: center; + font-size:1.25rem ; + color: #666666; + } + .rc-productcat { + display: flex; + align-items: center; + flex-wrap: nowrap; + justify-content: space-between; + margin-top: 32px; + ol{ display: flex; align-items: center; - justify-content: space-between; - margin: 0 auto; - color: #333333; - margin-top: 12px; - h2 { - font-size: 18px; - color: #333333; - margin-left: 12px; + flex-flow: row; + .ts-standard-btn{ + width: 237px; + height: 48px; +background: #FFFFFF; +border-radius: 30px; +background: none; +display: flex; +align-items: center; +justify-content: center; +margin-left: 40px; +img { +width: 24px; +height: 24px; +} +span { +margin-left: 8px; +} } - span { - font-size: 14px; - color: #666666; - border-bottom: 1px solid #666666; + } +//筛选 + .userselect{ + display: flex; + align-items: center; + justify-content: center; + color: #666666; + font-size: 0.87rem; + margin-left: 0.94rem; + margin-top: 0; + img{ + width: 1rem; + height: 1rem; + } + span{ display: block; - margin-right: 8px; + margin-left: 0.5rem; + display: block; + } } - .rc-variety { - ul { + } + .rc-title { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 auto; + color: #333333; + margin-top: 12px; + h2 { + font-size: 18px; + color: #333333; + margin-left: 12px; + } + span { + font-size: 14px; + color: #666666; + border-bottom: 1px solid #666666; + display: block; + margin-right: 8px; + } + .rc-change{ + display: none; + } + } + + .rc-button + { + display: flex; + justify-content: center; + font-size: 16px; + width: 100%; + padding: 40px 0 40px 0; + span + { + width: 160px; + height: 48px; + border: 2px solid #E2001A; + border-radius: 30px; + display: flex; + align-items: center; + justify-content: center; + color: #E2001A; + cursor: pointer; + } + em{ + font-style: normal; + width: 164px; + height: 48px; + background: #E2001A; + cursor: pointer; + border-radius: 30px; + display: flex; + align-items: center; + justify-content: center; + color: #FFFFFF; + margin-left: 40px; + } + } + +.rc-bottom{ + .rc-productcat { + display: flex; + align-items: center; + flex-wrap: nowrap; + .rc-cat { + width: 237px; +height: 48px; +border-radius: 30px; + background: #ffffff; + display: flex; + align-items: center; + justify-content: center; + margin-left: 16px; + font-size: 14px; + span { + margin-left: 3px; + } + + img { + width: 24px; + height: 16px; + } + + } + } + + + +} + .form-search { + width: 100%; + height: 110px; + } + /deep/.van-search__content--square{ + background: white; + } + .van-search__content--square{ + height: 110px; display: flex; align-items: center; - flex-wrap: nowrap; - overflow: hidden; - width: 100%; - - } - ul li { - width: 80px; - height: 32px; - background: #ffffff; - border: 1px solid #d7d7d7; - border-radius: 100px; - text-align: center; - font-size: 14px; - float: left; - line-height: 32px; - margin-left: 11px; - } - } - .rc-product { - h2 { - font-size: 18px; - color: #333333; - margin-left: 12px; - } - } - .rc-productcat { + justify-content: center; + background: white; + } + /deep/.van-field__left-icon + { + display: flex; + align-items: center; + justify-content: center; + } + /deep/.van-field__body + { + height: 110px; + } + + + .rc-variety { + margin-top: 30px; + ul { display: flex; align-items: center; flex-wrap: nowrap; - .rc-cat { - width: 32%; - height: 34px; - background: #ffffff; - border-radius: 100px; - display: flex; - align-items: center; - justify-content: center; - margin-left: 16px; - font-size: 14px; - span { - margin-left: 3px; - } - - img { - width: 24px; - height: 16px; - } - - } + overflow: hidden; + width: 100%; + + } - - .rc-productright { - display: flex; - align-items: center; - img { - width: 24px; - height: 20px; - margin-left: 15px; - } - span { - font-size: 14px; - color: #666666; - margin-left: 8px; - } - } - - .rc-prefecture{ - display: flex; - h2{ - font-size: 16px; - color: #333333; - margin-left: 12px; - } - ol{ - display: flex; - align-items: center; - flex-wrap: nowrap; - font-size: 12px; - text-align: center; - width: 80%; - overflow-x: auto; - white-space: nowrap; - } - li{ - display: inline-block; - text-align: center; - display: flex; - align-items: center; -height: 26px; -background: #FFFFFF; -border: 1px solid #D7D7D7; -padding: 0 5px 0 5px; -border-radius: 100px; - - } - } - .rc-contair{ - margin-top: 24px; - .rc-rccontair{ - height:1.6rem;display:flex;align-items: center; - width: 100% - - } - ul{ - text-align: center; - align-items: center; - flex-wrap: nowrap; - li{ - - width: 43%; - margin-top: 16px; - background: #FFFFFF; - border: 1px solid #D7D7D7; - margin-left: 15px; - display: inline-flex; - flex-direction: column; - border-radius: 3px; - - } - - img{ - width: 100%; - display: flex; - margin: 0 auto; - height: 100% - ; - } - i{ - font-style: normal; - font-size: 18px; - margin-top: 8px; - color: #666666; - display: block; - - } - } - span{ - font-size: 0.16rem; - color: #666666; - 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; - margin-top: 0.15rem; - height: 0.25rem; - } - strong{ - width: 130px; - height: 40px; - border: 2px solid #E2001A; - display: flex; - align-items: center; - justify-content: center; + ul li { + width: 130px; + height: 40px; + background: #ffffff; + border: 2px solid #D7D7D7; border-radius: 30px; - margin: 0 auto; + text-align: center; font-size: 14px; - margin-bottom: 0.32rem; - margin-top: 20px; - color: #E2001A; -margin-top: 20px; - } - .rc-click{ - max-height: 1.9rem; - min-height: 1.9rem; - } + display: flex; + align-items: center; + justify-content: center; + margin-left: 32px; + } + li:first-child{ + margin-left: 0; } } - //pc端 -@media screen and (min-width: 768px) and (max-width: 1920px) { - /deep/.el-dialog { - width: 920px; - height: 570px; - background: #FFFFFF; + .rc-product { + h2 { + font-size: 18px; + color: #333333; + margin-left: 12px; } - .rc-button{ - display: flex; - justify-content: center; - font-size: 16px; - width: 100%; - padding: 40px 0 40px 0; - span{ - width: 160px; - height: 48px; - border: 2px solid #E2001A; - border-radius: 30px; + } + .rc-productcat { display: flex; align-items: center; - justify-content: center; - color: #E2001A; - cursor: pointer; - } - em{ - font-style: normal; - width: 164px; - height: 48px; - background: #E2001A; - cursor: pointer; - border-radius: 30px; + flex-wrap: nowrap; + .rc-cat { + width: 327px; + height: 48px; + border-radius: 30px; + background: #ffffff; + border-radius: 100px; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + &:last-child{ + margin-left: 16px; + } + span { + margin-left: 0px; + } + img { + width: 24px; + height: 16px; + } + + } + } + + .rc-productright { display: flex; align-items: center; - justify-content: center; - color: #FFFFFF; - margin-left: 40px; - } - } - .rc-bottom{ - .rc-cat{ - margin-top: 24px; - } - .rc-productcat { - display: flex; - align-items: center; - flex-wrap: nowrap; - .rc-cat { - width: 237px; - height: 48px; - border-radius: 30px; - background: #ffffff; - display: flex; - align-items: center; - justify-content: center; - margin-left: 16px; - font-size: 14px; - span { - margin-left: 3px; - } - - img { - width: 24px; - height: 16px; - } - - } - } - - - + img { + width: 24px; + height: 20px; + margin-left: 15px; } - .form-search { - display: none; - } - .rc-title { - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - margin: 0 auto; - color: #333333; - margin-top: 12px; - h2 { - font-size: 18px; - color: #333333; - margin-left: 12px; - } - span { - font-size: 14px; - color: #666666; - border-bottom: 1px solid #666666; - display: block; - margin-right: 8px; - } - .rc-change{ - display: none; - } - } - - .rc-variety { - margin-top: 30px; - ul { - display: flex; - align-items: center; - flex-wrap: nowrap; - overflow: hidden; - width: 100%; - - - } - ul li { - width: 80px; - height: 32px; - background: #ffffff; - border: 1px solid #d7d7d7; - border-radius: 100px; - text-align: center; - font-size: 14px; - // color: #999999; - float: left; - line-height: 32px; - margin-left: 11px; - } - } - .rc-product { - margin-top: 30px; - h2 { - font-size: 18px; - color: #333333; - margin-left: 12px; - } - } - .rc-productcat { - display: flex; - align-items: center; - flex-wrap: nowrap; - .rc-cat { - width: 237px; - height: 48px; - border-radius: 30px; - background: #ffffff; - - border-radius: 100px; - display: flex; - align-items: center; - justify-content: center; - margin-left: 16px; - font-size: 14px; - span { - margin-left: 3px; - } - - img { - width: 24px; - height: 16px; - } - - } - } - - .rc-productright { - display: flex; - align-items: center; - img { - width: 24px; - height: 20px; - margin-left: 15px; - } - span { - font-size: 14px; - color: #666666; - margin-left: 8px; - } - } - - .rc-prefecture{ - display: flex; - margin-top: 47px; - h2{ - font-size: 20px; - color: #333333; - margin-left: 12px; - } - ol{ - display: flex; - align-items: center; - flex-wrap: nowrap; - font-size: 12px; - text-align: center; - width: 80%; - } - li{ - width: 130px; - height: 40px; - border: 2px solid #D7D7D7; - opacity: 1; - border-radius: 30px; - background: #FFFFFF; - line-height: 40px; - float: left; - margin-left: 40px; - color: #999999; - } - } - - .rc-contair{ - margin-top: 40px; - ul{ - text-align: center; - align-items: center; - flex-wrap: nowrap; - width: 100%; - overflow: hidden; - li{ - float: left; - width: 21%; - margin-top: 16px; - height: 560px; - background: #FFFFFF; - border: 1px solid #D7D7D7; - margin-left: 40px; - border-radius: 3px; - } - - img{ - width: 85px; - display: flex; - margin: 0 auto; - height: 114px - ; - } - i{ - font-style: normal; - font-size: 22px; - margin-top: 8px; - color: #666666; - display: block; - - } - } - span{ - overflow:hidden; - text-overflow:ellipsis; - -webkit-box-orient:vertical; - -webkit-line-clamp:2; - display: flex; - font-size: 30px; - color: #E2001A; - margin-top: 8px; - width: 256px; - text-align: center; - margin: 0 auto; - } - strong{ - width: 134px; - height: 40px; - border: 2px solid #E2001A; - display: flex; - align-items: center; - justify-content: center; - border-radius: 30px; - margin: 0 auto; - font-size: 14px; - color: #E2001A; - margin-top: 8px; - } - - .rc-rccontair{ - height:320px;display:flex;align-items: center - } - } - } \ No newline at end of file + span { + font-size: 14px; + color: #666666; + margin-left: 8px; + } + } + } \ No newline at end of file diff --git a/rc-busness/pages/index.vue b/rc-busness/pages/index.vue index 5d1788c3..b19137a5 100644 --- a/rc-busness/pages/index.vue +++ b/rc-busness/pages/index.vue @@ -710,10 +710,11 @@ import { userquery,postCourseId,biaomessage,userque,searchchanpin } from "../ajax/getData"; const settings = require("@/config"); export default { - middleware: 'metaTitle', - meta: {title: '首页'}, - data(){ - return{ + middleware: 'metaTitle', + // middleware: 'metaTitle', + meta: {title: '首页'}, + data(){ + return{ useraindex:0, usertitle:'明星猫粮', dogtitle:'明星狗粮', @@ -884,7 +885,7 @@ }, ], - discounchufang: [ + discounchufang: [ { title: "消化道", catimage: require("../assets/cat.png"), @@ -1329,6 +1330,10 @@ this.gotop = false; this.searchBar=true } + } + + + }, toTop() { let top = document.documentElement.scrollTop || document.body.scrollTop; @@ -1439,66 +1444,67 @@ - lianxi(item,index){ - if(item.title=='在线客服'){ - var option = { - customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'} - } - dis_livchat(option); - } - if(item.title=='购物车'){ - this.$router.push({ - path: "/myorder/userrecord", - }); - } - if(item.title=='营养专家'){ - var option = { - customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'} - } - dis_livchat(option); - } - - }, - userbuy(item){ - let user= localStorage.getItem("userInfo"); - this.courseId(item) - this.$router.push({ - path: "/myorder/userrecord", - }); - }, + lianxi(item,index){ + if(item.title=='在线客服'){ + var option = { + customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'} + } + dis_livchat(option); + } + if(item.title=='购物车'){ + this.$router.push({ + path: "/myorder/userrecord", - selectGoods(item,index){ - //console.log(item,index); - this.activeIndex=index; - //console.log(item.title); - this.ifadroind(item,index,this.useraindex) - // this.ifAdoid(item,index); + }); + } + if(item.title=='营养专家'){ + var option = { + customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'} + } + dis_livchat(option); + } - }, - quanshi(item,index){ - //console.log(item,index); - this.activeIndex5=index - //console.log(this.activeIndex5); - }, - userdoghot(item,index){ - this.activeIndex6=index + }, + userbuy(item){ + let user= localStorage.getItem("userInfo"); + this.courseId(item) + this.$router.push({ + path: "/myorder/userrecord", + + }); + }, + +selectGoods(item,index){ + console.log(item,index); + this.activeIndex=index; + console.log(item.title); + this.ifadroind(item,index,this.useraindex) +// this.ifAdoid(item,index); - }, - selectGo(item,index){ - this.activeInde2=index; - }, - selectGoo(item,index){ - this.activeInde3=index; - } - } +}, +quanshi(item,index){ + console.log(item,index); + this.activeIndex5=index + console.log(this.activeIndex5); + +}, +userdoghot(item,index){ + this.activeIndex6=index + +}, +selectGo(item,index){ +this.activeInde2=index; +}, +selectGoo(item,index){ + +this.activeInde3=index; } + }, + + + } \ No newline at end of file diff --git a/rc-busness/pages/productdetails/productlist.vue b/rc-busness/pages/productdetails/productlist.vue index 2189ff77..03490570 100644 --- a/rc-busness/pages/productdetails/productlist.vue +++ b/rc-busness/pages/productdetails/productlist.vue @@ -1,7 +1,6 @@