This commit is contained in:
952108534@qq.com
2022-01-20 12:13:02 +08:00
parent d3682fa241
commit b907a6292c
10 changed files with 574 additions and 390 deletions

View File

@@ -0,0 +1,212 @@
@media screen and (max-width:768px){
.usercontend{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.rc-useaddress{
textarea{
display: none;
}
}
.rc-button{
display: flex;
justify-content: center;
font-size: 14px;
width: 100%;
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
height: 80px;
align-items: center;
padding:0 20px 0 20px;
span
{
width: 160px;
height: 48px;
border: 2px solid #E2001A;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #E2001A;
}
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-max-width--xl{
h2{
display: none;
}
}
}
.rc-max-width--xl{
margin-top: 16px;
input{
width: 258px;
height: 34px;
border: none;
border-bottom: 1px solid #808285;
color: #999999;
font-size: 16px;
margin-left: 2px;
}
span{
font-size: 16px;
font-weight: bold;
width: 22%;
text-align: center;
color: #333333;
margin-top: 2px;
}
.rc-people{
width: 100%;
display: flex;
align-items: center;
span{
text-align: left;
}
}
// .rc-phone{
// }
// .rc-address{
// }
// .rc-useaddress{
// }
}
}
@media screen and (min-width: 769px)
{
.usercontend{
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-direction: column;
.rc-button{
display: flex;
justify-content: center;
font-size: 14px;
width: 100%;
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
height: 80px;
align-items: center;
padding:0 20px 0 20px;
span
{
width: 160px;
height: 48px;
border: 2px solid #E2001A;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #E2001A;
}
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;
}
}
h2{
font-size: 26px;
color: #333333;
text-align: center;
font-weight: bold;
}
.rc-useaddress{
display: flex;
align-items: center;
textarea{
width: 680px;
height: 118px;
background: #FFFFFF;
border: 1px solid #808285;
opacity: 1;
border-radius: 0px;
padding-top: 12px;
padding-left: 16px;
}
.userinput{
display: none;
}
}
}
.rc-max-width--xl{
margin-top: 16px;
input{
width: 680px;
height: 45px;
border: 1px solid #808285;
color: #999999;
font-size: 16px;
margin-left: 2px;
padding-left: 16px;
}
span{
font-size: 16px;
font-weight: bold;
width: 10%;
text-align: center;
color: #333333;
margin-top: 2px;
}
.rc-people{
width: 100%;
display: flex;
align-items: center;
}
// .rc-phone{
// }
// .rc-address{
// }
// .rc-useaddress{
// }
}
}

View File

@@ -0,0 +1,89 @@
@media screen and (max-width:768px){
.rc-button{
display: flex;
justify-content: center;
font-size: 14px;
width: 100%;
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
height: 80px;
align-items: center;
position: absolute;
bottom: 0;
padding:0 20px 0 20px;
span
{
width: 160px;
height: 48px;
border: 2px solid #E2001A;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #E2001A;
}
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-max-width--xl{
margin-top: 16px;
input{
width: 258px;
height: 34px;
border: none;
border-bottom: 1px solid #808285;
color: #999999;
font-size: 16px;
margin-left: 2px;
}
span{
font-size: 16px;
font-weight: bold;
width: 22%;
text-align: center;
color: #333333;
margin-top: 2px;
}
.rc-people{
width: 100%;
display: flex;
align-items: center;
span{
text-align: left;
}
}
// .rc-phone{
// }
// .rc-address{
// }
// .rc-useaddress{
// }
}
}
@media screen and (min-width: 769px)
{
}

View File

@@ -8,30 +8,6 @@ body{
.fade-leave-active {
opacity: 0;
}
.ts-mask{
width:100%;
height:100%;
position: fixed;
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;
}
}
.userloding {
position: fixed;
left: 50%;
@@ -402,12 +378,15 @@ img, picture {
}
.ts-scrollable{
li{
// width: 4.125rem;
width: 6rem;
overflow: hidden;
padding: 0 0.62rem;
height: 1.625rem;
margin-left: .5rem;
font-size:.75rem;
line-height: 1.375rem;
text-overflow:ellipsis;
white-space:nowrap;
line-height: 1.625rem;
}
&::-webkit-scrollbar{
display:none;
@@ -419,6 +398,7 @@ img, picture {
/* pc端 */
@media screen and (min-width: 769px)
{
/deep/.van-tabs__wrap
{
max-width: 768px;

View File

@@ -5,29 +5,10 @@
/deep/.van-swipe__indicator--active{
background-color: #E1001A;
}
.ts-carousel-indicator{
/deep/.swiper-pagination-bullet{
margin-left:.5rem;
}
/deep/.swiper-pagination-bullet-active{
background:#E2001A;
}
&.center{
width:100%;
text-align: center;
}
}
.ts-position-identifier{
}
.ul-zhuan,.ul-dog{
li{
background: unset;
img{
border-radius: 50%;
}
&.active {
.rc-ma{
.ul-zhuan{
li{
background: unset;;
img{
border-radius: 50%;
}
@@ -54,30 +35,6 @@
width:auto;
}
}
.ul-dog{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: row;
span{
margin-top: .5rem;
display: block;
}
img{
width: 9.5rem;
height: auto;
display: block;
}
li{
cursor: pointer;
font-size: 16px;
text-align: center;
margin-top:3rem;
margin-left:3rem;
}
}
@media screen and (max-width:768px){
.ul-dog{
display: none;
@@ -215,6 +172,7 @@
.uservideo{
width: 100%;
height:auto;
max-height: 15.68rem;
display: block;
video{
max-width:100%;
@@ -261,10 +219,6 @@
-webkit-box-orient: vertical;
max-width: 60%;
text-align: center;
word-break: keep-all;
height: 2.625rem;
display: flex;
align-items: center;
}
em{
font-style: normal;
@@ -370,21 +324,14 @@
.rc-selection{
display: none;
}
.sw-center{
display: none;
}
.useraimg{
width: 100%;
// height: 29.31rem;
object-fit: cover;
}
.ts-banner-swiper-container{
position:relative;
.ts-carousel-indicator{
position:absolute;
bottom:.4rem;
}
}
.sw-center{
display: none;
}
.useraimg{
width: 100%;
// height: 29.31rem;
object-fit: cover;
}
.van-swipe-item {
color: #fff;
height: 100%;

View File

@@ -26,10 +26,7 @@ span{
}
}
}
.rc-usermain{
width: 92%;
margin: 0 auto;
.rc-max-width--xl{
ul{
height: 70px;
display: block;

View File

@@ -9,10 +9,18 @@ ul li ol li em strong i {
//rc-main start
margin-top:.23rem;
.usersearch {
.ts-scrollable-container{
h2{
font-weight: bold;
color: #333333;
}
}
margin: 0 auto;
overflow: hidden;
}
//rc-main end
}
@@ -24,6 +32,53 @@ ul li ol li em strong i {
.usercontentshow{
position: relative;
.rc-productcat {
display: flex;
align-items: center;
flex-wrap: nowrap;
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 {
height: 1rem;
}
span {
margin-left: 0.18rem;
}
}
}
.userrccat{
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;
}
border: 2px solid #E2001A;
}
}
.userrccat{
width: 32%;
height: 34px;
@@ -93,48 +148,7 @@ ul li ol li em strong i {
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;
}
}
.userrccat{
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;
}
border: 2px solid #E2001A;
}
}
}
@@ -219,6 +233,7 @@ ul li ol li em strong i {
justify-content: center;
font-size: .14rem;
margin-right:.2rem;
margin-left: 16px;
span {
margin-left: 3px;
}
@@ -303,6 +318,7 @@ ul li ol li em strong i {
//pc端
@media screen and (min-width: 768px){
.userrccat{
width: 327px;
height: 48px;
@@ -328,6 +344,7 @@ ul li ol li em strong i {
}
.online{
width:100%;
margin-top: 17px;
&.bold{
height:0.5rem;
margin-top: 5rem;
@@ -378,7 +395,13 @@ ul li ol li em strong i {
}
.rc-bottom{
.rc-productcat {
.rc-productcat {
ol{
display: flex;
align-items: center;
flex-flow: row;
}
display: flex;
align-items: center;
flex-wrap: nowrap;
@@ -485,7 +508,7 @@ border-radius: 30px;
margin-left: 16px;
}
span {
margin-left: 0px;
margin-left: 4px;
}
img {
width: 24px;
@@ -542,18 +565,38 @@ border-radius: 30px;
}
*/
.ts-scrollable-container{
overflow-y: hidden;
overflow-x: clip;
width: 100%;
margin-top: 18px;
h2{
display: flex;
align-items: center;
width: 4%;
}
.ts-scrollable{
overflow-y: hidden;
overflow-x: clip;
width: 100%;
ol{
display: flex;
align-items: center;
}
.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;
}
}
}
}

View File

@@ -14,15 +14,6 @@ ul li ol li em strong i {
position: relative;
margin-top: 5.25rem;
.usersearch {
width: 100%;
margin: 0 auto;
overflow: hidden;
margin-top: 20px;
.rc-padding--md{
padding: 0;
}
}
.active{
border: 2px solid #E2001A;
color: #E2001A;
@@ -38,6 +29,22 @@ ul li ol li em strong i {
}
//手机端
@media screen and (max-width: 768px) {
.usersearch {
width: 100%;
margin: 0 auto;
overflow: hidden;
margin-top: 20px;
.ts-scrollable-container{
h2{
font-weight: bold;
color: #333333;
}
}
.rc-padding--md{
padding: 0;
}
}
.rc-button
{
display: flex;
@@ -47,6 +54,9 @@ ul li ol li em strong i {
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
height: 80px;
align-items: center;
position: absolute;
bottom: 0;
padding:0 20px 0 20px;
span
{
width: 160px;
@@ -129,8 +139,9 @@ strong{
color: #333333;
margin-top: 1.5rem;
h2{
font-size: 18px;
font-size: 16px;
font-weight: bold;
color: #333333;
}
span {
font-size: 14px;
@@ -168,6 +179,9 @@ strong{
// 我想搜
.usercontentshow{
position: relative;
.rc-column{
padding-bottom: 0;
}
.rc-productcat {
display: flex;
align-items: center;
@@ -189,13 +203,15 @@ justify-content: center;
margin-left: 1rem;
color: #999999;
img {
width: 1.5rem;
height: 1rem;
}
span {
margin-left: 0.18rem;
}
}
li:first-child{
margin-left: 0;
}
}
//筛选
.userselect{
@@ -220,7 +236,7 @@ margin-left: 0.18rem;
}
.ts-scrollable-container{
margin-top: 0.93rem;
margin-top: 1rem;
}
}
@@ -236,6 +252,7 @@ margin-left: 0.18rem;
}
h2{
margin-left: 0;
font-weight: bold;
}
}
@@ -275,22 +292,10 @@ border-radius: 100px;
.rc-bottom{
position: fixed;
background: white;
height: 617px;
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{
@@ -376,7 +381,25 @@ border-radius: 100px;
}
//pc端
@media screen and (min-width: 768px){
.usersearch {
width: 100%;
margin: 0 auto;
overflow: hidden;
margin-top: 40px;
.ts-scrollable-container{
h2{
font-weight: bold;
color: #333333;
}
}
.rc-padding--md{
padding: 0;
}
}
.online{
margin-top: 47px;
}
/deep/.el-dialog__header {
padding: 0;
margin: 0;
@@ -392,6 +415,7 @@ border-radius: 100px;
display: flex;
align-items: center;
width: 6%;
color: #333333;
}
.ts-scrollable{
// overflow-y: hidden;
@@ -501,9 +525,10 @@ margin-left: 8px;
color: #333333;
margin-top: 12px;
h2 {
font-size: 18px;
font-size: 26px;
font-weight: bold;
color: #333333;
margin-left: 12px;
margin: 0;
}
span {
font-size: 14px;
@@ -597,13 +622,16 @@ border-radius: 30px;
/deep/.van-search__content--square{
background: white;
}
/deep/.van-search{
padding-left: 0;
}
.van-search__content--square{
display: flex;
align-items: center;
justify-content: center;
background: white;
border: 1px solid #D7D7D7;
height: 80px;
height: 50px;
width: 1200px;
border-radius: 200px;
}
@@ -648,9 +676,11 @@ border-radius: 30px;
}
.rc-product {
h2 {
font-size: 18px;
font-size: 26px;
font-weight: bold;
color: #333333;
margin-left: 12px;
margin: 0;
}
}
.rc-productcat {