diff --git a/.gitignore b/.gitignore index a2a3040a..cfb8da96 100644 --- a/.gitignore +++ b/.gitignore @@ -29,3 +29,5 @@ build/ ### VS Code ### .vscode/ +/rc-busness/.nuxt/ +/rc-busness/node_modules/ diff --git a/rc-busness/assets/css/global.less b/rc-busness/assets/css/global.less new file mode 100644 index 00000000..a2a16334 --- /dev/null +++ b/rc-busness/assets/css/global.less @@ -0,0 +1,289 @@ +/*Body*/ +.rc-main { + padding:0 .2rem; + box-sizing:border-box; + margin:0 auto; +} +.ts-product-list{ + li{ + img{ + width: 320px; + height:auto; + object-fit: contain; + display: flex; + margin: 0 auto; + } + } + .active{ + color: #E2001A; + cursor: pointer; + } + .unactive{ + color:#999999; + cursor: pointer; + } +} + +.rc-age{ + display: flex; + h2{ + color:#333333; + } + ol{ + display: flex; + align-items: center; + flex-wrap: nowrap; + text-align: center; + width: 86%; + } + li{ + flex-shrink: 0; + } +} + +.rc-mubu{ + height: 100%; + background: #333333; + opacity: 0.6; + position: absolute; + bottom: 0; + width: 100%; + z-index: 8; +} +.ts-scrollable{ + overflow-y:hidden; + overflow-x:auto; + white-space: nowrap; + &::-webkit-scrollbar{ + display:none; + } + } +/*Body end*/ + +/* 头部 */ +.rc-top{ + position: relative; +} +/* 手机端 */ +@media screen and (max-width: 768px) +{ + .rc-main{ + width:100%; + } + .rc-top{ + margin-top: 74px; + } + .rc-home-header{ + width: 100%; + .rc-main + { + box-sizing: border-box; + display: flex; + justify-content: space-between; + align-items: center; + height: 70px; + background-color: #fff; + .rc-center{ + display: none; + } + } + .c-left img{ + width: 19px; + height: 14px; + display: block; + } + .c-right img{ + width: 97px; + height: 35px; + display: block; + } + .rc-search img{ + width: 19px; + height: 19px; + display: block; + } + &.fixed{ + position:fixed; + top: 0; + left: 0; + z-index:3; + } + } + .rc-age{ + h2{ + font-size: 16px; + margin-right:.1rem; + } + ol{ + font-size: 12px; + } + li{ + width: .64rem; + height: 26px; + line-height: 26px; + border-radius: 100px; + margin-left: 9px; + } + } + .ts-scrollable{ + .active{ + border: 2px solid #E2001A; + } + .unactive{ + border: 2px solid #d7d7d7; + } + } + .online{ + height:.03rem; + width:100%; + background:#f6f6f6; + margin-top:0.23rem; + } + .rc-fixright{ + width: 0.60rem; + height: 1.81rem; + position: fixed; + right: 0; + top: 30%; + z-index: 9999; + ul{ + width: 60px; + height: 181px; + box-shadow: 0px 0px 6px rgb(0 0 0 / 10%); + background-color: white; + display: flex; + flex-direction: column; + li{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 0.18rem; + } + li:last-child{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 0.18rem; + margin-bottom: 0.2rem; + } + } + img{ + width: 0.19rem; + height: 0.19rem; + display: block; + } + img:last-child{ + width: 0.22rem; + height: 0.22rem; + display: block; + } + span{ + font-size: 0.12rem; + color: #666666; + } + .tuntop{ + width: 60px; + height: 60px; + background: #FFFFFF; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); + opacity: 1; + display: block; + color: #666666; + font-size: 12px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 8px; + img{ + width: 0.22rem; + height: 0.22rem; + display: block; + } + } + } +} + /* pc端 */ +@media screen and (min-width: 768px) { + .rc-main { + width:100%; + max-width:1400px; + } + .online{ + height:8px; + width:100%; + background:#f6f6f6; + margin-top:23px; + } + .rc-home-header{ + height:120px ; + .rc-main + { + width: 92%; + margin: 0 auto; + // position: fixed; + top: 0; + z-index: 989; + background: white; + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + height: 120px; + ul + { + display: flex; + align-items: center; + margin-bottom: 20px; + li + { + margin-right: 25px; + color: #666666; + cursor: pointer; + font-size: 16px; + } + } + } + .c-left{ + display: none; + } + .rc-search{ + display: none; + } + .c-left img + { + width: 19px; + height: 14px; + display: block; + } + .c-right img{ + width: 120px; + height: 45px; + display: block; + } + } + + .ts-scrollable{ + .rc-age{ + h2 + { + font-size: 20px; + color: #333333; + } + li + { + margin-left: 40px; + width: 100px; + height: 40px; + line-height: 40px; + font-size: 18px; + } + } + } + +} +/* 头部 end */ \ No newline at end of file diff --git a/rc-busness/assets/css/index.less b/rc-busness/assets/css/index.less index 14bf3e55..15936444 100644 --- a/rc-busness/assets/css/index.less +++ b/rc-busness/assets/css/index.less @@ -1,36 +1,33 @@ -@media screen and(min-width: 320px) and(max-width:768px){ - - - +@media screen and (max-width:768px){ .searchBara{ - position: fixed; - top: 0; - width: 100%; - position: fixed; - top:0; - background: white; - z-index: 9999; - overflow-x: auto; - white-space: nowrap; - span{ - margin-top: 0.08rem; - display: block; - } - img{ - width: 0.64rem; - height: 0.64rem; - display: block; - } - li{ - display: inline-block; - margin-left: 0.20rem; - width: 0.64rem; - text-align: center; -height: 0.64rem; -background: #F6F6F6; -border-radius: 50%; -opacity: 1; - } + position: fixed; + width: 100%; + position: fixed; + top:70px; + background: white; + z-index: 9999; + overflow-x: auto; + white-space: nowrap; + overflow-y:hidden; + span{ + margin-top: 0.08rem; + display: block; + } + img{ + width: 0.64rem; + height: 0.64rem; + display: block; + } + li{ + display: inline-block; + margin-left: 0.20rem; + width: 0.64rem; + text-align: center; + height: 0.64rem; + background: #F6F6F6; + border-radius: 50%; + opacity: 1; + } } .rc-login{ @@ -67,7 +64,7 @@ opacity: 1; } .van-swipe{ - z-index: 9998; + z-index: 2; } .rc-usermessage{ width: 80%; @@ -80,443 +77,378 @@ opacity: 1; display: block; padding-top: 0.8rem; -color: #E1001A; - } - span{ - font-size: 0.16rem; - - margin-top: 0.17rem; -color: #666666; + color: #E1001A; + } + span{ + font-size: 0.16rem; -display: flex; -align-items: center; -justify-content: center; + margin-top: 0.17rem; + color: #666666; - } - i{ - font-style: normal; - width: 1.57rem; -height: 0.48rem; -border: 2px solid #E2001A; -border-radius: 0.30rem; -display: block; -line-height: 0.48rem; -font-size: 0.16rem; -color: #E2001A; + display: flex; + align-items: center; + justify-content: center; -margin: 0 auto; -margin-top: 0.32rem; -margin-bottom: 0.80rem; + } + i{ + font-style: normal; + width: 1.57rem; + height: 0.48rem; + border: 2px solid #E2001A; + border-radius: 0.30rem; + display: block; + line-height: 0.48rem; + font-size: 0.16rem; + color: #E2001A; - } + margin: 0 auto; + margin-top: 0.32rem; + margin-bottom: 0.80rem; - } - .rc-video{ - display: none; - } - .useraimg{ - width: 100%; - height: 4.69rem; -} + } - .van-swipe-item { - color: #fff; - height: 4.69rem; - width: 100%; - font-size: 0.20px; - line-height: 1.50rem; - text-align: center; - position: relative; - z-index: 9998; + } + .rc-video{ + display: none; + } + .useraimg{ + width: 100%; + height: auto; + object-fit: cover; + } + + .van-swipe-item { + color: #fff; + height: 3.75rem; + width: 100%; + font-size: 0.20px; + line-height: 1.50rem; + text-align: center; + position: relative; + } + .rc-lunbo{ + width: 100%; + margin-top: 0.46rem; + .rc-selection{ + display: none; + } + h2{ + text-align: center; + font-size: 0.26rem; + color: #E2001A; + } + #xxxFullScreen { + background-color: white; + margin-top: 0.40rem; + #swiper1 { + width: 100%; + overflow: hidden; + padding: 0 0 0.10rem 0; + } + .swiper-container{ + height: 6.45rem; + } + .swiper-container, .swiper-container2 { + width: 100%; + // overflow: visible !important; + height: 100%; + position: relative; + } + #swiper1 .swiper-container .swiper-wrapper .swiper-slide { + width: 3rem; + //height: 6.45rem !important; //Auto adaption + } + + /* 上一张 */ + #swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev { + margin-top: 0.05rem; + height: 100%; + + } + /* 下一张 */ + #swiper1 .swiper-container .swiper-wrapper .swiper-slide-next { + margin-top: 0.05rem; + height: 100%; + + } + .swiper-container .swiper-wrapper .swiper-slide-active { + height: 100%; + + } + .uservideo{ + width: 100%; + height: 2.51rem; + display: block; + } + } + .sw-center{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 1px solid #d7d7d7; + border-radius:4px; + .rc-click{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + img{ + width: 1.6rem; + height: 1.6rem; + object-fit: cover; + display: block; + margin-top: 0.40rem; + } + span{ + font-size: 0.18rem; + color: #E2001A; + display: block; + margin-top: 0.20rem; + } + p{ + font-size: 0.14rem; + 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; + width: 60%; + text-align: center; + line-height:.24rem; + } + em{ + font-style: normal; + font-size: 0.20rem; + color: #666666; + } + .sw-cen{ + width: 100%; + display: flex; + justify-content: center; + position: relative; + z-index: 3; + padding-bottom: 0.2rem; + i{ + font-style: normal; + width: 1.30rem; + height: 0.40rem; + border: 2px solid #E2001A; + border-radius: 0.30rem; + line-height: 0.40rem; + text-align: center; + color: #E2001A; + font-size: 0.14rem; + margin-top: 0.32rem; + display: block; + } + } + + } + } - } -.rc-fixright{ - width: 0.60rem; -height: 1.81rem; -position: fixed; -right: 0; -top: 30%; -z-index: 9999; + /* 中间的图片 */ + .swiper-container .swiper-wrapper .swiper-slide-active { + height: 165px !important; + } + .swiperWrap{ + height: 469px; + width: 100%; + img{ + height: 469px; + width: 100%; -ul{ - width: 60px; - height: 181px; - box-shadow: 0px 0px 6px rgb(0 0 0 / 10%); - background-color: white; - display: flex; - flex-direction: column; - li{ - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 0.18rem; - } - li:last-child{ - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 0.18rem; - margin-bottom: 0.2rem; - } -} -img{ - width: 0.19rem; - height: 0.19rem; - display: block; -} -img:last-child{ - width: 0.22rem; - height: 0.22rem; - display: block; -} -span{ - font-size: 0.12rem; -color: #666666; -} -.tuntop{ - width: 60px; -height: 60px; -background: #FFFFFF; -box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); -opacity: 1; -display: block; -color: #666666; -font-size: 12px; -display: flex; -flex-direction: column; - align-items: center; - justify-content: center; - margin-top: 8px; - img{ - width: 0.22rem; - height: 0.22rem; - display: block; - } -} -} -.rc-lunbo{ - width: 100%; - margin-top: 0.46rem; - .rc-selection{ - display: none; - } - h2{ - text-align: center; - font-size: 0.26rem; - color: #E2001A; - } - #xxxFullScreen { - background-color: white; - margin-top: 0.40rem; - #swiper1 { - width: 100%; - overflow: hidden; - padding: 0 0 0.10rem 0; -} - .swiper-container{ - height: 6.45rem; - } -.swiper-container, .swiper-container2 { - width: 100%; - // overflow: visible !important; - height: 100%; - position: relative; -} -#swiper1 .swiper-container .swiper-wrapper .swiper-slide { - width: 3rem; - height: 6.45rem !important; -} - -/* 上一张 */ -#swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev { - margin-top: 0.05rem; - height: 100%; + } + /deep/.swiper-pagination-bullet-active{ + background: red; + width: 8px; + height: 8px; + } + /deep/.swiper-pagination-bullet{ + width: 8px; + height: 8px; + background: #d7d7d7; -} -/* 下一张 */ -#swiper1 .swiper-container .swiper-wrapper .swiper-slide-next { - margin-top: 0.05rem; - height: 100%; + } -} -.swiper-container .swiper-wrapper .swiper-slide-active { - height: 100%; + /deep/.swiper-pagination-bullet-active { + opacity: 1; + background-color: red!important; -} -.uservideo{ - width: 100%; - height: 2.51rem; - display: block; -} -} -.sw-center{ - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - border: 1px solid #d7d7d7; -.rc-click{ - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} + } - img{ - width: 1.77rem; - height: 100px; - display: block; - margin-top: 0.40rem; - } - span{ - font-size: 0.18rem; -color: #E2001A; -display: block; -margin-top: 0.20rem; - } - p{ - font-size: 0.14rem; -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; - width: 60%; - } - em{ - font-style: normal; - font-size: 0.20rem; - color: #666666; - } - .sw-cen{ - width: 100%; - display: flex; - justify-content: center; - position: relative; - z-index: 9999; - padding-bottom: 0.34rem; - i{ - font-style: normal; - width: 1.30rem; - height: 0.40rem; - border: 2px solid #E2001A; - border-radius: 0.30rem; - line-height: 0.40rem; - text-align: center; - color: #E2001A; - font-size: 0.14rem; - margin-top: 0.32rem; - display: block; - } - } - -} + } + .rc-main + { + margin-top: 0.40rem; + overflow: hidden; + .ul-zhuan + { + width: 100%; + overflow-x: auto; + white-space: nowrap; + padding-top:4px; + &::-webkit-scrollbar{ + display:none; + } + span{ + margin-top: 0.08rem; + display: block; + } + img{ + width: 0.64rem; + height: 0.64rem; + display: block; + } + li{ + display: inline-block; + margin-left: 0.20rem; + width: 0.64rem; + text-align: center; + height: 0.64rem; + background: #F6F6F6; + border-radius: 50%; + opacity: 1; + } + } + + .selectionswitch{ + .rc-conta{ + max-height: 1.9rem; + min-height: 1.9rem; + + } + width: 100%; + margin-top: 0.45rem; + h2{ + text-align: center; + font-size: 0.26rem; + color: #E2001A; + } + .rc-contair{ + margin-top: 0.24rem; + .rc-rccontair{ + height:1.60rem;display:flex;align-items: center + } + ul{ + text-align: center; + align-items: center; + + li{ + + width: 43%; + margin-top: 0.16rem; + flex-direction: column; + text-overflow: -o-ellipsis-lastline; + overflow: hidden; + text-overflow: ellipsis; + display: inline-flex; + background: #FFFFFF; + border: 1px solid #D7D7D7; + margin-left: 0.15rem; + border-radius: 0.03rem; + } + + img{ + width: 100%; + display: flex; + margin: 0 auto; + height:100%; + } + i{ + font-style: normal; + font-size: 0.18rem; + margin-top: 0.08rem; + 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; + height: 0.25rem; + margin-top: 0.08rem; + + } + strong{ + width: 1.30rem; + height: 0.40rem; + border: 2px solid #E2001A; + + display: flex; + align-items: center; + justify-content: center; + border-radius: 30px; + margin: 0 auto; + font-size: 0.14rem; + color: #E2001A; + margin-top: 0.2rem; + margin-bottom: 0.3rem; + } + .userserlect{ + display: flex; + width: 100%; + justify-content: center; + align-items: center; + margin-top: 0.40rem; + span{ + width: 1.30rem; + height: 0.40rem; + background: #E2001A; + text-align: center; + line-height: 0.40rem; + border-radius: 0.30rem; + font-size: 0.14rem; + color: #FFFFFF; + } + + } + } + } + } + .active { + font-size: 0.14rem; + border: 1px solid red; + color: red; + + } + .unactive { + font-size: 0.14rem; + color: #444444; + border: 1px solid #D7D7D7; + } } - -/* 中间的图片 */ -.swiper-container .swiper-wrapper .swiper-slide-active { - height: 165px !important; -} -.swiperWrap{ - height: 469px; - width: 100%; - img{ - height: 469px; - width: 100%; - - - } - /deep/.swiper-pagination-bullet-active{ - background: red; - width: 8px; - height: 8px; - } - /deep/.swiper-pagination-bullet{ - width: 8px; - height: 8px; - background: #d7d7d7; - -} - -/deep/.swiper-pagination-bullet-active { - opacity: 1; - background-color: red!important; - -} - - -} - .rc-main{ - width: 100%; - margin-top: 0.40rem; - overflow-x: hidden; - overflow: hidden; - .ul-zhuan{ - width: 100%; - overflow-x: auto; - white-space: nowrap; - span{ - margin-top: 0.08rem; - display: block; - } - img{ - width: 0.64rem; - height: 0.64rem; - display: block; - } - li{ - display: inline-block; - margin-left: 0.20rem; - width: 0.64rem; - text-align: center; -height: 0.64rem; -background: #F6F6F6; -border-radius: 50%; -opacity: 1; - } - } - - .selectionswitch{ - .rc-conta{ - max-height: 1.9rem; - min-height: 1.9rem; - - } - width: 100%; - margin-top: 0.45rem; - h2{ - text-align: center; - font-size: 0.26rem; - color: #E2001A; - } - .rc-contair{ - margin-top: 0.24rem; - .rc-rccontair{ -height:1.60rem;display:flex;align-items: center - } - ul{ - text-align: center; - align-items: center; - - li{ - - width: 43%; - margin-top: 0.16rem; - flex-direction: column; - text-overflow: -o-ellipsis-lastline; - overflow: hidden; - text-overflow: ellipsis; - display: inline-flex; -background: #FFFFFF; -border: 1px solid #D7D7D7; -margin-left: 0.15rem; -border-radius: 0.03rem; - } - - img{ - width: 100%; - display: flex; - margin: 0 auto; - height:100%; - } - i{ -font-style: normal; - font-size: 0.18rem; - margin-top: 0.08rem; -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; - height: 0.25rem; - margin-top: 0.08rem; - - } - strong{ - width: 1.30rem; - height: 0.40rem; -border: 2px solid #E2001A; - -display: flex; - align-items: center; - justify-content: center; - border-radius: 30px; - margin: 0 auto; - font-size: 0.14rem; -color: #E2001A; -margin-top: 0.2rem; -margin-bottom: 0.3rem; - } - .userserlect{ - display: flex; - width: 100%; - justify-content: center; - align-items: center; - margin-top: 0.40rem; - span{ -width: 1.30rem; -height: 0.40rem; -background: #E2001A; -text-align: center; -line-height: 0.40rem; -border-radius: 0.30rem; -font-size: 0.14rem; -color: #FFFFFF; - } - - } - } - } - } - .active { - font-size: 0.14rem; - border: 1px solid red; - color: red; - - } - .unactive { - font-size: 0.14rem; - color: #444444; - border: 1px solid #D7D7D7; - } -} - - -@media screen and (min-width: 768px) and (max-width: 1920px){ - +@media screen and (min-width: 768px) +{ .sw-center{ display: none; } .useraimg{ width: 100%; height: 4.69rem; +object-fit: cover; } .van-swipe-item { color: #fff; @@ -568,12 +500,11 @@ color: #666666; } } .rc-lunbo{ - width: 90%; + width: 100%; margin-top: 0.46rem; margin: 0 auto; position: relative; margin-top: 1.50rem; - h2{ text-align: center; font-size: 0.40rem; @@ -582,92 +513,93 @@ color: #666666; #xxxFullScreen { background-color: white; margin-top: 100px; - #swiper1 { - width: 100%; - overflow: hidden; -} + #swiper1 { + width: 100%; + overflow: hidden; + } -.swiper-container, .swiper-container2 { - width: 100%; - height: 6.18rem; - // overflow: visible !important; - position: relative; -} + .swiper-container2 { + width: 100%; + height: 6.18rem; + // overflow: visible !important; + position: relative; + } #swiper1 .swiper-container .swiper-wrapper .swiper-slide { - width: 100%; - border-radius: 0.10rem; - height: 6.18rem; + width: 100%; + //height: 6.18rem; } /* 上一张 */ #swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev { margin-top: 5px; - height: 6.18rem !important; + //height: 6.18rem !important; } /* 下一张 */ #swiper1 .swiper-container .swiper-wrapper .swiper-slide-next { margin-top: 0.05rem; - height: 6.18rem !important; + //height: 6.18rem !important; } .swiper-container .swiper-wrapper .swiper-slide-active { - height: 6.18rem !important; + //height: 6.18rem !important; } .rc-video{ -position: relative; -display: flex; -.rc-right{ - width: 4.40rem; -height: 4.76rem; -display: flex; -margin-left: 1.95rem; -align-items: center; -justify-content: center; -flex-direction: column; -img{ - width: 3.38rem; -height: 2.01rem; -display: block; -} -span{ -font-size: 0.26rem; -display: block; -margin-top: 0.46rem; -color: #E2001A; -} -p{ -font-size: 0.16rem; -width: 2rem; - word-break: break-all; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; /* 这里是超出几行省略 */ - overflow: hidden; -color: #666666; -margin-top: 0.16rem; -} -em{ -font-style: normal; -font-size: 0.22rem; -color: #666666; -display: block; -margin-top: 0.16rem; -} -strong{ - font-style: normal; - list-style: none; - width: 1.30rem; -height: 0.40rem; -border: 2px solid #E2001A; -border-radius: 0.30rem; -display: block; -line-height: 0.40rem; -text-align: center; -color:#E2001A; -font-size: 0.14rem; -margin-top: 0.16rem; -} -} + position: relative; + display: flex; + justify-content: space-evenly; + .rc-right + { + width: 4.40rem; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + img{ + width: 320px; + height: auto; + } + span{ + font-size: 0.26rem; + display: block; + margin-top: 20px; + color: #E2001A; + } + p + { + font-size: 16px; + width:100%; + word-break: break-all; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; /* 这里是超出几行省略 */ + color: #666666; + margin-top: 0.16rem; + text-align: center; + } + em + { + font-style: normal; + font-size: 0.22rem; + color: #666666; + display: block; + margin-top: 0.16rem; + } + strong + { + font-style: normal; + width: 1.30rem; + height: 0.40rem; + border: 2px solid #E2001A; + border-radius: 0.30rem; + display: block; + line-height: 0.40rem; + text-align: center; + color:#E2001A; + font-size: 0.14rem; + margin-top: 0.16rem; + } + } .uservideo{ width: 5.60rem; height: 5.06rem; @@ -704,7 +636,7 @@ img{ } /* 中间的图片 */ .swiper-container .swiper-wrapper .swiper-slide-active { - height: 1.65rem !important; + //height: 1.65rem !important; } .swiperWrap{ height: 4.69rem; @@ -736,39 +668,41 @@ img{ } .rc-main{ - - width: 100%; margin-top: 0.40rem; .van-tabs{ display: none; } - ul{ - width: 90%; - display: flex; - justify-content: center; - span{ - margin-top: 0.08rem; - display: block; - } - img{ - width: 1.58rem; - height: 1.58rem; - display: block; - } - li{ - display: inline-flex; - cursor: pointer; - font-size: 16px; - margin-left: 0.40rem; - width: 1.58rem; - text-align: center; -height: 1.58rem; -background: #F6F6F6; -border-radius: 50%; - } - } + .rc-ma + { + padding-bottom:28px; + .ul-zhuan{ + width: 100%; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + flex-direction: row; + span{ + margin-top: 0.08rem; + display: block; + } + img{ + width: 1.58rem; + height: 1.58rem; + display: block; + } + li{ + cursor: pointer; + font-size: 16px; + width: 1.58rem; + text-align: center; + height: 1.58rem; + background: #F6F6F6; + border-radius: 50%; + } + } + } .selectionswitch{ width: 100%; h2{ @@ -796,47 +730,46 @@ margin-left: 0.40rem; } } - .rc-contair{ - margin-top: 0.24rem; - - ul{ - text-align: center; - margin-top: 0.77rem; - display: block; - width: 100%; - float: left; - li{ -width: 3.20rem; - height: 5.60rem; - border-radius: 0.03rem; - display: inline-flex; - background: #FFFFFF; - flex-direction: column; - justify-content: center; - align-items: center; - border: 1px solid #D7D7D7; - margin-top: 0.40rem; - } + .rc-contair + { + margin-top: 0.24rem; + ul{ + text-align: center; + margin-top: 0.77rem; + display: flex; + justify-content: space-between; + width: 100%; + li + { + border-radius: 3px; + display: inline-flex; + background: #FFFFFF; + flex-direction: column; + justify-content: center; + align-items: center; + border: 1px solid #D7D7D7; + margin-top: 0.40rem; + } - img{ - width: 1.69rem; -height: 2.28rem; - display: flex; - margin: 0 auto; -; - } - i{ -font-style: normal; - font-size: 0.18rem; - margin-top: 0.08rem; -color: #666666; -display: block; -font-size: 0.22rem; + img{ + width: 320px; + height:auto; + object-fit: contain; + display: flex; + margin: 0 auto; + } + i{ + font-style: normal; + font-size: 0.18rem; + margin-top: 0.08rem; + color: #666666; + display: block; + font-size: 0.22rem; -color: #666666; - - } - } + color: #666666; + + } + } span{ font-size: 0.30rem; color: #E2001A; @@ -887,7 +820,7 @@ color: #FFFFFF; } .active { font-size: 0.16rem; - border: 1px solid red; + border: 3px solid red; color: red; } diff --git a/rc-busness/assets/css/magnifier.less b/rc-busness/assets/css/magnifier.less new file mode 100644 index 00000000..b81918a9 --- /dev/null +++ b/rc-busness/assets/css/magnifier.less @@ -0,0 +1,189 @@ +@media screen and (max-width:768px) { + .magnify { + position: relative; + width: 100%; + } + .left_contaner { + width: 100%; + height: 100%; + } + .left_contaner .middle_img { + box-sizing: border-box; + position: relative; + width: 100%; + } + .left_contaner .shade { + background-color: rgba( 135,206,235, .5); + position: absolute; + top: 0; + left: 0; + cursor: move; + display: none; + } + .left_contaner .middle_img img { + width: 100%; + height: 100%; + } + .left_contaner .carousel { + width: 2.56rem; + margin: .20rem auto 0 auto; + display: -webkit-flex; + + } + + .left_contaner .carousel .show_box { + flex: 1; + overflow: hidden; + position: relative; + } + .left_contaner .carousel .arrow { + flex-basis: 25px; + cursor: pointer; + } + .left_contaner .carousel .left_arrow { + display: flex; + align-items: center; + img{ + width: .08rem; + height: .16rem; + } + + // background: url('../assets/image/userleft.jpg') no-repeat; + // background-position: center center; + } + .left_contaner .carousel .right_arrow { + // background: url('../assets/image/userright.png') no-repeat; + // background-position: center right; + // width: 8px; + // height: 16px; + display: flex; + align-items: center; + img{ + width: .08rem; + height: .16rem; + display: block; + margin-left: 0.06rem; + } + } + .left_contaner .carousel .picture_container { + height: 100%; + position: absolute; + overflow: hidden; + display: flex; + align-items: center; + top: 0; + left: 0; + } + .left_contaner .picture_container .picture_item { + height: 100%; + width: 60px; + height: 60px; + object-fit: contain; + border: 1px solid #d8d8d8 ; + margin-left: 5px; + box-sizing: border-box; + } + .left_contaner .picture_container .picture_item:hover { + border: 2px solid #E2001A; + } + .left_contaner .picture_container .picture_item img { + + width: 100%; + height: 100%; + } + .right_contanier { + overflow: hidden; + position: absolute; + top: 0; + border: 1px solid #ccc; + display: none; + } + .right_contanier .big_img { + position: absolute; + top: 0px; + left: 0px; + display: none; + } + + +} +// // /* 最小768px最大1920 *pc端/ +@media screen and (min-width: 768px) and (max-width: 1920px) { +.magnify { + position: relative; +} +.left_contaner { + width: 100%; + height: 100%; +} +.left_contaner .middle_img { + box-sizing: border-box; + position: relative; +} +.left_contaner .shade { + background-color: rgba( 135,206,235, .5); + position: absolute; + top: 0; + left: 0; + cursor: move; +} +.left_contaner .middle_img img { + width: 100%; + height: 100%; +} +.left_contaner .carousel { + width: 100%; + margin-top: 20px; + display: -webkit-flex; +} +.left_contaner .carousel .show_box { + flex: 1; + overflow: hidden; + position: relative; +} +.left_contaner .carousel .arrow { + flex-basis: 25px; + cursor: pointer; +} +.left_contaner .carousel .left_arrow { + background: url('../image/rc-left.png') no-repeat; + background-position: center center; +} +.left_contaner .carousel .right_arrow { + background: url('../image/rc-left.png') no-repeat; + background-position: center right; +} +.left_contaner .carousel .picture_container { + height: 100%; + position: absolute; + overflow: hidden; + top: 0; + left: 0; +} +.left_contaner .picture_container .picture_item { + height: 100%; + float: left; + padding: 5px; + box-sizing: border-box; +} +.left_contaner .picture_container .picture_item:hover { + border: 2px solid #E2001A; +} +.left_contaner .picture_container .picture_item img { + width: 100%; + height: 100%; +} +.right_contanier { + overflow: hidden; + position: absolute; + top: 0; + border: 1px solid #ccc; +} +.right_contanier .big_img { + position: absolute; + top: 0px; + left: 0px; +} + + +} \ No newline at end of file diff --git a/rc-busness/assets/css/product-list.less b/rc-busness/assets/css/product-list.less new file mode 100644 index 00000000..9ee63ad0 --- /dev/null +++ b/rc-busness/assets/css/product-list.less @@ -0,0 +1,595 @@ +/deep/ .el-drawer{ + height: 60%; +} +ul li ol li em strong i { + list-style: none; + font-style: normal; +} +.rc-main { + //rc-main start + margin-top:.23rem; + .usersearch { + margin: 0 auto; + overflow: hidden; + } + //rc-main end +} + +//手机端 +@media screen and (max-width: 768px) { + .usercontentshow{ + position: relative; + } + .online{height:.08rem;} + .rc-mubu{ + height: 100%; + background: #333333; + opacity: 0.6; + position: absolute; + bottom: 0; + width: 100%; + z-index: 998; + } +.rc-bottom{ + .rc-footer + { + position: absolute; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + span + { + width: 155px; + height: 48px; + border: 2px solid #E1001A; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + color: #E1001A; + border-radius: 30px; + } + em{ + width: 155px; + margin-left: 25px; + height: 48px; + background: #E2001A; + border-radius: 30px; + font-size: 14px; + color:#FFFFFF; + display: flex; + align-items: center; + font-style: normal; + justify-content: center; + list-style: none; + } + } + position: relative; + height: 100%; + height: 617px; + background: white; + z-index: 999; + .rc-productcat { + 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: 0; + font-size: 14px; + span { + margin-left: 3px; + } + img { + width: 24px; + height: 16px; + } + } + } + +} + + /deep/ .van-search__content { + width: 250px; + height: 32px; + border: 1px solid #d7d7d7; + border-radius: 200px; + background: white; + } + .rc-search { + width: 69px; + height: 32px; + background: #e1001a; + border-radius: 200px; + text-align: center; + color: white; + } + .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-variety { + 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: 11px; + } + } + .rc-product { + h2 { + font-size: 18px; + color: #333333; + margin-left: 12px; + } + } + .rc-productcat { + display: flex; + align-items: center; + flex-wrap: nowrap; + margin-bottom:.1rem; + .rc-cat { + width: 32%; + height: 34px; + background: #ffffff; + border-radius: 100px; + display: flex; + align-items: center; + justify-content: center; + font-size: .14rem; + margin-right:.2rem; + 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; + h2{ + font-size: 16px; + color: #333333; + } + ol{ + display: flex; + align-items: center; + flex-wrap: nowrap; + font-size: 12px; + text-align: center; + width: 80%; + } + li{ + width: 40%; + height: 26px; + background: #FFFFFF; + border: 1px solid #D7D7D7; + line-height: 26px; + float: left; + border-radius: 100px; + margin-left: 9px; + } + } + */ + .rc-contair{ + .rc-rccontair{ + height:160px; + display:flex; + align-items: center; + } + ul{ + text-align: center; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + &:after{ + content:""; + width:154px; + } + li{ + margin-bottom: .16rem; + border: 1px solid #D7D7D7; + display: inline-flex; + border-radius: 4px; + flex-direction: column; + max-width:1.6rem; + .rc-column + { + text-align:center; + padding:0 .15rem; + box-sizing: border-box; + span{ + height:.44rem; + font-size: 0.16rem; + 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; + } + } + } + img{ + max-width:1.6rem; + display: flex; + margin: 0 auto; + height: auto; + } + i{ + font-style: normal; + font-size: .18rem; + margin-top: 8px; + color: #666666; + display: block; + } + } + .rc-click{ + /* + max-height: 1.9rem; + min-height: 1.9rem; + */ + } + strong{ + width: 1.2rem; + 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; + margin-bottom: 32px; + } + } +} + +//pc端 +@media screen and (min-width: 768px){ + /deep/.el-dialog { + width: 920px; + height: 570px; + background: #FFFFFF; + } + + .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-cat{ + //margin-top: 24px; + } + +.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 { + 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: 108px; + height: 48px; + border-radius: 30px; + background: #ffffff; + border-radius: 100px; + display: flex; + align-items: center; + justify-content: flex-start; + font-size: 14px; + span { + margin-left: 0px; + font-size: 18px; + } + img { + /* + width: 24px; + height: 16px; + */ + display:none; + } + + } + } + + .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: 88%; + } + 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; + display: flex; + flex-wrap: wrap; + width: 100%; + li{ + border: 1px solid #D7D7D7; + border-radius: 3px; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.09); + margin-bottom:40px; + margin-right:16px; + max-width: 320px; + .rc-column + { + text-align:center; + padding:0 .15rem; + box-sizing: border-box; + margin-bottom: 32px; + span + { + height:80px; + font-size: 30px; + 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{ + font-style: normal; + font-size: 22px; + margin-top: 8px; + color: #666666; + display: block; + } + strong{ + width: 1.2rem; + 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; + } + } + } + img{ + width: 320px; + height:auto; + object-fit: contain; + display: flex; + margin: 0 auto; + } + } + + + .rc-rccontair{ + height:320px;display:flex;align-items: center + } + } +} \ No newline at end of file diff --git a/rc-busness/assets/css/producted.less b/rc-busness/assets/css/producted.less new file mode 100644 index 00000000..e0068f71 --- /dev/null +++ b/rc-busness/assets/css/producted.less @@ -0,0 +1,721 @@ +// 手机端 +@media screen and(min-width: 320px) and(max-width:768px) { + .rc-button{ + width: 100%; + display: flex; + align-items: center; + position: fixed; + justify-content: center; + height: 60px; + bottom: 0; + background-color: white; + + span{ + width: 160px; +height: 48px; +background: #E2001A; +border-radius: 30px; +font-size: 16px; +color:#FFFFFF; +display: block; +display: flex; +align-items: center; +justify-content: center; + } + span:last-child{ + margin-left: 40px; + } + } + .rc-headera{ + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + justify-content: center; + h3{ + color:#333333; + font-size: 26px; + } + .rc-title{ + img{ + width: 96px; + height: 96px; + + } + } + .userer{ + span{ + width: 130px; +height: 40px; +border: 2px solid #E2001A; +border-radius: 30px; +display: block; +color: #E2001A; +line-height: 40px; +margin-top: 42px; +font-size: 14px; + } + i{ + font-size: 18px; + font-style: normal; + display: block; + margin-top: 32px; +color: #E1001A; + } + } +} + /deep/.el-dialog { + width: 80%; + position: relative; +} + .rc-discount { + position: relative; + width: 100%; + img { + display: block; + width: 100%; + height: 100%; + } + .rc-contair { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + } + .rc-left { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: #e1001a; + padding-right: 21px; + width: 30%; + float: left; + height: 100%; + i { + font-style: normal; + font-size: 12px; + } + span { + font-size: 26px; + } + strong { + font-style: normal; + font-size: 12px; + display: block; + margin-top: 8px; + } + } + .rc-right { + display: flex; + flex-direction: column; + margin-left: 36px; + justify-content: center; + height: 100%; + i { + font-style: normal; + font-size: 16px; + color: #e1001a; + } + .rc-main { + color: #999999; + font-size: 12px; + } + span { + display: block; + margin-top: 8px; + } + em { + font-style: normal; + } + } + .rc-footer { + display: flex; + justify-content: flex-end; + margin-right: 10px; + span { + width: 72px; + height: 25px; + background: #e2001a; + text-align: center; + line-height: 25px; + font-size: 12px; + color: #ffffff; + margin-bottom: 8px; + border-radius: 100px; + margin-right: 8px; + cursor: pointer; + } + } + } + .active{ + border: 2px solid #E2001A; + color:#666666; + cursor: pointer; + font-size: 16px; + } + .unactive{ + border: 2px solid #808285; + color:#666666; + cursor: pointer; + font-size: 16px; + } + .rc-footimage{ + overflow: hidden; + width: 100%; + margin: 0 auto; + display: flex; + justify-content: center; + margin-top: 20px; + img{ + width: 100%; + } + + } + .rc-header { + width: 100%; + .rc-title { + width: 100%; + h2 { + font-size: 22px; + color: #e1001a; + } + } + .productdetails { + + margin-top: 19px; + .rc-productdetail { + display: flex; + align-items: center; + i { + font-style: normal; + font-size: 14px; + + color: #333333; + } + + span { + font-size: 18px; + margin-left: 8px; + color: #e1001a; + } + } + .rc-productdetai { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 10px; + i { + font-style: normal; + font-size: 14px; + color: #333333; + } + span { + font-size: 14px; + color: #666666; + margin-left: 8px; + } + em { + font-size: 14px; + font-style: normal; + margin-left: 68px; + color: #e2001a; + } + } + } + + .rc-productdeta { + margin-top: 20px; + .rc-prodtop { + display: flex; + align-items: center; + span { + font-size: 14px; + color: #333333; + } + em { + font-style: normal; + display: flex; + align-items: center; + justify-content: center; + width: 59px; + font-size: 16px; + margin-left: 4px; + height: 39px; + border-radius: 3px; + } + } + } + .rc-produnnum { + display: flex; + align-items: center; + padding-bottom: 20px; + margin-top: 16px; + span { + font-size: 14px; + color: #333333; + } + img { + width: 29px; + height: 29px; + display: block; + margin-left: 5px; + + } + .rc-message { + width: 29px; + margin-left: 8px; + height: 29px; + display: block; + } + + strong { + font-style: normal; + list-style: none; + width: 30px; + height: 30px; + border: 1px solid #d7d7d7; + opacity: 1; + border-radius: 3px; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + margin: 0 5px 0 5px; + color: #666666; + } + } + .certification { + .rc-button{ + width: 100%; + padding-top: 33px; + display: flex; + align-items: center; + span{ + width: 160px; +height: 48px; +background: #E2001A; +border-radius: 30px; +font-size: 16px; +color:#FFFFFF; +display: block; +display: flex; +align-items: center; +justify-content: center; + } + span:last-child{ + margin-left: 40px; + } + } + margin-top: 16px; + ul { + display: flex; + flex-direction: column; + line-height: 30px; + li { + float: left; + width: 100%; + text-align: left; + span { + font-size: 14px; + color: #333333; + } + i{ + font-style: normal; + font-size: 14px; + color: #666666; + margin-left: 8px; + } + } + } + } + } +} +// /* 最小768px最大1920 *pc端/ +@media screen and (min-width: 768px) and (max-width: 1920px) { + .rc-headera{ + + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + justify-content: center; + h3{ + color:#333333; + font-size: 26px; + } + .rc-title{ + img{ + width: 96px; + height: 96px; + + } + } + .userer{ + span{ + width: 130px; +height: 40px; +border: 2px solid #E2001A; +border-radius: 30px; +display: block; +color: #E2001A; +line-height: 40px; +margin-top: 42px; +font-size: 14px; + } + i{ + font-size: 18px; + font-style: normal; + display: block; + margin-top: 32px; +color: #E1001A; + } + } +} + .rc-header{ + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + h3{ + color:#333333; + font-size: 26px; + } + .rc-title{ + img{ + width: 96px; + height: 96px; + + } + } + .userer{ + img{ + width: 210px; + height: 210px; + display: flex; + justify-content: center; + flex-direction: column; + + } + + span{ + font-size: 16px; + +color: #333333; + } + i{ + font-size: 18px; + font-style: normal; + display: block; + margin-top: 32px; +color: #E1001A; + } + } +} + /deep/.el-dialog { + width: 440px; + height: 432px; + position: relative; +} + + .rc-discount { + position: relative; + img { + display: block; + width: 100%; + height: 100%; + } + .rc-contair { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + } + .rc-left { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: #e1001a; + padding-right: 21px; + width: 30%; + float: left; + height: 100%; + i { + font-style: normal; + font-size: 12px; + } + span { + font-size: 26px; + } + strong { + font-style: normal; + font-size: 12px; + display: block; + margin-top: 8px; + } + } + .rc-right { + display: flex; + flex-direction: column; + margin-left: 36px; + justify-content: center; + height: 100%; + i { + font-style: normal; + font-size: 16px; + color: #e1001a; + } + .rc-main { + color: #999999; + font-size: 12px; + } + span { + display: block; + margin-top: 8px; + } + em { + font-style: normal; + } + } + .rc-footer { + display: flex; + justify-content: flex-end; + margin-right: 10px; + span { + width: 72px; + height: 25px; + background: #e2001a; + text-align: center; + line-height: 25px; + font-size: 12px; + color: #ffffff; + margin-bottom: 8px; + border-radius: 100px; + margin-right: 8px; + cursor: pointer; + } + } + } + .rc-usermain{ + display: flex; + align-items: center; + } + .active{ + border: 2px solid #E2001A; + color:#666666; + cursor: pointer; + font-size: 16px; + } + .unactive{ + border: 2px solid #808285; + color:#666666; + cursor: pointer; + font-size: 16px; + } + .rc-header { + width: 100%; + margin-left: 80px; + .rc-footimage{ + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + img{ + width: 100%; + } + } + .rc-title { + height: 85px; + width: 100%; + display: flex; + align-items: center; + border-bottom: 1px solid #d8d8d8; + h2 { + +font-size: 30px; + color: #e1001a; + } + } + .productdetails { + .rc-button{ + width: 100%; + padding-top: 33px; + display: flex; + align-items: center; + span{ + width: 160px; +height: 48px; +background: #E2001A; +border-radius: 30px; +font-size: 16px; +color:#FFFFFF; +display: block; +display: flex; +align-items: center; +justify-content: center; +cursor: pointer; + } + span:last-child{ + margin-left: 40px; + } + } + margin-top: 19px; + .rc-productdetail { + display: flex; + align-items: center; + i { + font-style: normal; + font-size: 18px; + + color: #333333; + } + + span { + font-size: 18px; + margin-left: 8px; + color: #e1001a; + } + } + .rc-productdetai { + display: flex; + align-items: center; + margin-top: 10px; + border-bottom: 1px solid #d7d7d7; + padding-bottom: 17px; + i { + font-style: normal; + + +font-size: 18px; + color: #333333; + } + span { + +font-size: 20px; + color: #666666; + margin-left: 8px; + } + em { + font-size: 16px; + font-style: normal; + width: 40%; + text-align: right; + display: block; +color: #E2001A; + cursor: pointer; + } + } + } + + .rc-productdeta { + margin-top: 16px; + .rc-prodtop { + display: flex; + align-items: center; + span { + +font-size: 18px; + color: #333333; + } + em { + font-style: normal; + display: flex; + align-items: center; + justify-content: center; + width: 59px; + font-size: 16px; + margin-left: 10px; + height: 39px; + border-radius: 3px; + color:#666666; + } + } + } + .rc-produnnum { + display: flex; + align-items: center; + padding-bottom: 20px; + margin-top: 16px; + border-bottom: 1px solid #d7d7d7; + span { + font-size: 18px; + color: #333333; + } + img { + width: 29px; + height: 29px; + display: block; + } + .rc-message { + width: 29px; + margin-left: 8px; + height: 29px; + display: block; + } + + strong { + font-style: normal; + list-style: none; + width: 30px; + height: 30px; + border: 1px solid #d7d7d7; + opacity: 1; + border-radius: 3px; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + margin: 0 5px 0 5px; + color: #666666; + } + } + .certification { + .rc-button{ + width: 100%; + padding-top: 33px; + display: flex; + align-items: center; + span{ + width: 160px; +height: 48px; +background: #E2001A; +border-radius: 30px; +font-size: 16px; +color:#FFFFFF; +display: block; +display: flex; +align-items: center; +justify-content: center; + } + span:last-child{ + margin-left: 40px; + } + } + margin-top: 16px; + ul { + display: flex; + flex-direction: column; + line-height:40px; + text-align: left; + li { + width: 100%; + float: left; + span { + font-size: 18px; + color: #333333; + } + i{ + font-style: normal; + font-size: 16px; + color: #666666; + margin-left: 8px; + } + } + } + } + } + +} \ No newline at end of file diff --git a/rc-busness/assets/css/search.less b/rc-busness/assets/css/search.less index 41208b08..3814f7e6 100644 --- a/rc-busness/assets/css/search.less +++ b/rc-busness/assets/css/search.less @@ -11,60 +11,41 @@ } .rc-main { - width: 100%; - overflow: hidden; - .usersearch { - width: 93%; + width: 100%; margin: 0 auto; overflow: hidden; } - .active{ - border: 2px solid #E2001A; - color: #E2001A; - cursor: pointer; - } - .unactive{ - border: 2px solid #d7d7d7; - color:#999999; - cursor: pointer; - } } //手机端 @media screen and (max-width: 768px) { .usercontentshow{ position: relative; - z-index: 995; } - .rc-mubu{ - height: 100%; - background: #333333; - opacity: 0.6; - position: absolute; - bottom: 0; - width: 100%; - z-index: 998; - - } .rc-bottom{ + position: relative; + background: white; + z-index: 9; + .rc-bottoma{ + margin-bottom:2rem; + } .rc-footer{ - position: absolute; - bottom: 0; - display: flex; - align-items: center; - justify-content: center; - width: 100%; + 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; - + 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; @@ -96,11 +77,7 @@ cursor: pointer; } - position: relative; - height: 100%; - height: 6.17rem; - background: white; - z-index: 999; + .rc-productcat { display: flex; align-items: center; @@ -266,38 +243,6 @@ border-radius: 100px; } } - - - - .rc-age{ - 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{ @@ -416,18 +361,6 @@ margin-top: 20px; .rc-cat{ margin-top: 24px; } - .active{ - border: 2px solid #E2001A; - color: #E2001A; - cursor: pointer; - - } - .unactive{ - border: 2px solid #d7d7d7; - color:#999999; - cursor: pointer; - - } .rc-productcat { display: flex; align-items: center; @@ -589,38 +522,7 @@ margin-top: 20px; margin-left: 40px; color: #999999; } - } - - .rc-age{ - display: flex; - - 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{ - margin-left: 40px; - width: 130px; - height: 40px; - border: 2px solid #D7D7D7; - border-radius: 30px; - background: #FFFFFF; - line-height: 40px; - float: left; - color: #999999; - } - } - - + } .rc-contair{ margin-top: 40px; diff --git a/rc-busness/assets/组 4626.png b/rc-busness/assets/star-cat.png similarity index 100% rename from rc-busness/assets/组 4626.png rename to rc-busness/assets/star-cat.png diff --git a/rc-busness/components/NuxtLogo.vue b/rc-busness/components/NuxtLogo.vue deleted file mode 100644 index 970eba0e..00000000 --- a/rc-busness/components/NuxtLogo.vue +++ /dev/null @@ -1,11 +0,0 @@ - - - diff --git a/rc-busness/components/Tutorial.vue b/rc-busness/components/Tutorial.vue deleted file mode 100644 index 6440b8fb..00000000 --- a/rc-busness/components/Tutorial.vue +++ /dev/null @@ -1,46 +0,0 @@ - - diff --git a/rc-busness/components/header.vue b/rc-busness/components/header.vue index 36a54909..c69734ef 100644 --- a/rc-busness/components/header.vue +++ b/rc-busness/components/header.vue @@ -1,7 +1,5 @@ \ No newline at end of file diff --git a/rc-busness/pages/useraddress/addaddress.vue b/rc-busness/pages/useraddress/addaddress.vue deleted file mode 100644 index ddff523b..00000000 --- a/rc-busness/pages/useraddress/addaddress.vue +++ /dev/null @@ -1,72 +0,0 @@ - - - - - \ No newline at end of file diff --git a/rc-busness/pages/useraddress/editaddress.vue b/rc-busness/pages/useraddress/editaddress.vue deleted file mode 100644 index 7ad68b3b..00000000 --- a/rc-busness/pages/useraddress/editaddress.vue +++ /dev/null @@ -1,99 +0,0 @@ - - - - - \ No newline at end of file diff --git a/rc-busness/pages/useraddress/openaddress.vue b/rc-busness/pages/useraddress/openaddress.vue deleted file mode 100644 index a6af953c..00000000 --- a/rc-busness/pages/useraddress/openaddress.vue +++ /dev/null @@ -1,293 +0,0 @@ - - - - - diff --git a/rc-busness/pages/userlogin/userpassword.vue b/rc-busness/pages/userlogin/userpassword.vue deleted file mode 100644 index 9f1f9ac4..00000000 --- a/rc-busness/pages/userlogin/userpassword.vue +++ /dev/null @@ -1,282 +0,0 @@ -// - - - - - \ No newline at end of file diff --git a/rc-busness/pages/usersearch/search.vue b/rc-busness/pages/usersearch/search.vue index 67d80832..4ffd8cc9 100644 --- a/rc-busness/pages/usersearch/search.vue +++ b/rc-busness/pages/usersearch/search.vue @@ -33,7 +33,7 @@

我想搜

-
+
{{ item.title }} @@ -45,9 +45,9 @@
-
+

专区:

-
    +
    1. {{ item.tagName }}
      2. @@ -56,7 +56,7 @@

      年龄:

      -
        +
        1. {{ item.tagName }}
          2. @@ -93,18 +93,18 @@
          -
          +
          -
          +
          {{ item.title }}
          -
          +

          专区:

          -
            +
            1. {{ item.tagName }}
              2. @@ -113,7 +113,7 @@

              年龄:

              -
                +
                1. {{ item.tagName }}
                  2. @@ -121,7 +121,7 @@

              功能:

              -
                +
                1. {{ item.tagName }}
                  2. @@ -130,7 +130,7 @@

                  品种:

                  -
                    +
                    1. {{ item.tagName }}
                      2. @@ -162,7 +162,7 @@
              -
              +

              专区:

              1. @@ -693,5 +693,6 @@ this.dialogInfo1=false; \ No newline at end of file diff --git a/rc-busness/store/README.md b/rc-busness/store/README.md deleted file mode 100644 index 1972d277..00000000 --- a/rc-busness/store/README.md +++ /dev/null @@ -1,10 +0,0 @@ -# STORE - -**This directory is not required, you can delete it if you don't want to use it.** - -This directory contains your Vuex Store files. -Vuex Store option is implemented in the Nuxt.js framework. - -Creating a file in this directory automatically activates the option in the framework. - -More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).