mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 18:26:38 +08:00
Merge branch 'sit-Carl' of https://gitee.com/carl_Ming_1/smart-admin into sit-Carl
This commit is contained in:
Carl
commit
a1c3d1cb7e
2
.gitignore
vendored
2
.gitignore
vendored
@ -29,3 +29,5 @@ build/
|
|||||||
|
|
||||||
### VS Code ###
|
### VS Code ###
|
||||||
.vscode/
|
.vscode/
|
||||||
|
/rc-busness/.nuxt/
|
||||||
|
/rc-busness/node_modules/
|
||||||
|
|||||||
289
rc-busness/assets/css/global.less
Normal file
289
rc-busness/assets/css/global.less
Normal file
@ -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 */
|
||||||
@ -1,17 +1,14 @@
|
|||||||
@media screen and(min-width: 320px) and(max-width:768px){
|
@media screen and (max-width:768px){
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.searchBara{
|
.searchBara{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top:0;
|
top:70px;
|
||||||
background: white;
|
background: white;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
overflow-y:hidden;
|
||||||
span{
|
span{
|
||||||
margin-top: 0.08rem;
|
margin-top: 0.08rem;
|
||||||
display: block;
|
display: block;
|
||||||
@ -67,7 +64,7 @@ opacity: 1;
|
|||||||
|
|
||||||
}
|
}
|
||||||
.van-swipe{
|
.van-swipe{
|
||||||
z-index: 9998;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.rc-usermessage{
|
.rc-usermessage{
|
||||||
width: 80%;
|
width: 80%;
|
||||||
@ -116,89 +113,18 @@ margin-bottom: 0.80rem;
|
|||||||
}
|
}
|
||||||
.useraimg{
|
.useraimg{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4.69rem;
|
height: auto;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-swipe-item {
|
.van-swipe-item {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
height: 4.69rem;
|
height: 3.75rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 0.20px;
|
font-size: 0.20px;
|
||||||
line-height: 1.50rem;
|
line-height: 1.50rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 9998;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.rc-lunbo{
|
.rc-lunbo{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -230,8 +156,7 @@ flex-direction: column;
|
|||||||
}
|
}
|
||||||
#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
|
#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
height: 6.45rem !important;
|
//height: 6.45rem !important; //Auto adaption
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 上一张 */
|
/* 上一张 */
|
||||||
@ -263,6 +188,7 @@ flex-direction: column;
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border: 1px solid #d7d7d7;
|
border: 1px solid #d7d7d7;
|
||||||
|
border-radius:4px;
|
||||||
.rc-click{
|
.rc-click{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -270,10 +196,10 @@ flex-direction: column;
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
img{
|
img{
|
||||||
width: 1.77rem;
|
width: 1.6rem;
|
||||||
height: 100px;
|
height: 1.6rem;
|
||||||
|
object-fit: cover;
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 0.40rem;
|
margin-top: 0.40rem;
|
||||||
}
|
}
|
||||||
@ -282,7 +208,6 @@ flex-direction: column;
|
|||||||
color: #E2001A;
|
color: #E2001A;
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 0.20rem;
|
margin-top: 0.20rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
p{
|
p{
|
||||||
font-size: 0.14rem;
|
font-size: 0.14rem;
|
||||||
@ -295,6 +220,8 @@ text-overflow: -o-ellipsis-lastline;
|
|||||||
line-clamp: 2;
|
line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
width: 60%;
|
width: 60%;
|
||||||
|
text-align: center;
|
||||||
|
line-height:.24rem;
|
||||||
}
|
}
|
||||||
em{
|
em{
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -306,8 +233,8 @@ text-overflow: -o-ellipsis-lastline;
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 9999;
|
z-index: 3;
|
||||||
padding-bottom: 0.34rem;
|
padding-bottom: 0.2rem;
|
||||||
i{
|
i{
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
width: 1.30rem;
|
width: 1.30rem;
|
||||||
@ -361,15 +288,19 @@ text-overflow: -o-ellipsis-lastline;
|
|||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.rc-main{
|
.rc-main
|
||||||
width: 100%;
|
{
|
||||||
margin-top: 0.40rem;
|
margin-top: 0.40rem;
|
||||||
overflow-x: hidden;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.ul-zhuan{
|
.ul-zhuan
|
||||||
|
{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
padding-top:4px;
|
||||||
|
&::-webkit-scrollbar{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
span{
|
span{
|
||||||
margin-top: 0.08rem;
|
margin-top: 0.08rem;
|
||||||
display: block;
|
display: block;
|
||||||
@ -509,14 +440,15 @@ color: #FFFFFF;
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media screen and (min-width: 768px) and (max-width: 1920px){
|
@media screen and (min-width: 768px)
|
||||||
|
{
|
||||||
.sw-center{
|
.sw-center{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.useraimg{
|
.useraimg{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4.69rem;
|
height: 4.69rem;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
.van-swipe-item {
|
.van-swipe-item {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@ -568,12 +500,11 @@ color: #666666;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.rc-lunbo{
|
.rc-lunbo{
|
||||||
width: 90%;
|
width: 100%;
|
||||||
margin-top: 0.46rem;
|
margin-top: 0.46rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 1.50rem;
|
margin-top: 1.50rem;
|
||||||
|
|
||||||
h2{
|
h2{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 0.40rem;
|
font-size: 0.40rem;
|
||||||
@ -587,7 +518,7 @@ color: #666666;
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-container, .swiper-container2 {
|
.swiper-container2 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 6.18rem;
|
height: 6.18rem;
|
||||||
// overflow: visible !important;
|
// overflow: visible !important;
|
||||||
@ -595,67 +526,68 @@ color: #666666;
|
|||||||
}
|
}
|
||||||
#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
|
#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 0.10rem;
|
//height: 6.18rem;
|
||||||
height: 6.18rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 上一张 */
|
/* 上一张 */
|
||||||
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev {
|
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
height: 6.18rem !important;
|
//height: 6.18rem !important;
|
||||||
}
|
}
|
||||||
/* 下一张 */
|
/* 下一张 */
|
||||||
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-next {
|
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-next {
|
||||||
margin-top: 0.05rem;
|
margin-top: 0.05rem;
|
||||||
height: 6.18rem !important;
|
//height: 6.18rem !important;
|
||||||
}
|
}
|
||||||
.swiper-container .swiper-wrapper .swiper-slide-active {
|
.swiper-container .swiper-wrapper .swiper-slide-active {
|
||||||
height: 6.18rem !important;
|
//height: 6.18rem !important;
|
||||||
}
|
}
|
||||||
.rc-video{
|
.rc-video{
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
.rc-right{
|
justify-content: space-evenly;
|
||||||
|
.rc-right
|
||||||
|
{
|
||||||
width: 4.40rem;
|
width: 4.40rem;
|
||||||
height: 4.76rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-left: 1.95rem;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
img{
|
img{
|
||||||
width: 3.38rem;
|
width: 320px;
|
||||||
height: 2.01rem;
|
height: auto;
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
span{
|
span{
|
||||||
font-size: 0.26rem;
|
font-size: 0.26rem;
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 0.46rem;
|
margin-top: 20px;
|
||||||
color: #E2001A;
|
color: #E2001A;
|
||||||
}
|
}
|
||||||
p{
|
p
|
||||||
font-size: 0.16rem;
|
{
|
||||||
width: 2rem;
|
font-size: 16px;
|
||||||
|
width:100%;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
|
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
|
||||||
overflow: hidden;
|
|
||||||
color: #666666;
|
color: #666666;
|
||||||
margin-top: 0.16rem;
|
margin-top: 0.16rem;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
em{
|
em
|
||||||
|
{
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 0.22rem;
|
font-size: 0.22rem;
|
||||||
color: #666666;
|
color: #666666;
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 0.16rem;
|
margin-top: 0.16rem;
|
||||||
}
|
}
|
||||||
strong{
|
strong
|
||||||
|
{
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
list-style: none;
|
|
||||||
width: 1.30rem;
|
width: 1.30rem;
|
||||||
height: 0.40rem;
|
height: 0.40rem;
|
||||||
border: 2px solid #E2001A;
|
border: 2px solid #E2001A;
|
||||||
@ -704,7 +636,7 @@ img{
|
|||||||
}
|
}
|
||||||
/* 中间的图片 */
|
/* 中间的图片 */
|
||||||
.swiper-container .swiper-wrapper .swiper-slide-active {
|
.swiper-container .swiper-wrapper .swiper-slide-active {
|
||||||
height: 1.65rem !important;
|
//height: 1.65rem !important;
|
||||||
}
|
}
|
||||||
.swiperWrap{
|
.swiperWrap{
|
||||||
height: 4.69rem;
|
height: 4.69rem;
|
||||||
@ -736,17 +668,21 @@ img{
|
|||||||
|
|
||||||
}
|
}
|
||||||
.rc-main{
|
.rc-main{
|
||||||
|
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 0.40rem;
|
margin-top: 0.40rem;
|
||||||
.van-tabs{
|
.van-tabs{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
ul{
|
|
||||||
width: 90%;
|
.rc-ma
|
||||||
|
{
|
||||||
|
padding-bottom:28px;
|
||||||
|
.ul-zhuan{
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
span{
|
span{
|
||||||
margin-top: 0.08rem;
|
margin-top: 0.08rem;
|
||||||
display: block;
|
display: block;
|
||||||
@ -757,10 +693,8 @@ img{
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
li{
|
li{
|
||||||
display: inline-flex;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-left: 0.40rem;
|
|
||||||
width: 1.58rem;
|
width: 1.58rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
height: 1.58rem;
|
height: 1.58rem;
|
||||||
@ -768,7 +702,7 @@ background: #F6F6F6;
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.selectionswitch{
|
.selectionswitch{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
h2{
|
h2{
|
||||||
@ -796,19 +730,18 @@ margin-left: 0.40rem;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.rc-contair{
|
.rc-contair
|
||||||
|
{
|
||||||
margin-top: 0.24rem;
|
margin-top: 0.24rem;
|
||||||
|
|
||||||
ul{
|
ul{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 0.77rem;
|
margin-top: 0.77rem;
|
||||||
display: block;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: left;
|
li
|
||||||
li{
|
{
|
||||||
width: 3.20rem;
|
border-radius: 3px;
|
||||||
height: 5.60rem;
|
|
||||||
border-radius: 0.03rem;
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -819,11 +752,11 @@ width: 3.20rem;
|
|||||||
}
|
}
|
||||||
|
|
||||||
img{
|
img{
|
||||||
width: 1.69rem;
|
width: 320px;
|
||||||
height: 2.28rem;
|
height:auto;
|
||||||
|
object-fit: contain;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
;
|
|
||||||
}
|
}
|
||||||
i{
|
i{
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -887,7 +820,7 @@ color: #FFFFFF;
|
|||||||
}
|
}
|
||||||
.active {
|
.active {
|
||||||
font-size: 0.16rem;
|
font-size: 0.16rem;
|
||||||
border: 1px solid red;
|
border: 3px solid red;
|
||||||
color: red;
|
color: red;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
189
rc-busness/assets/css/magnifier.less
Normal file
189
rc-busness/assets/css/magnifier.less
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
595
rc-busness/assets/css/product-list.less
Normal file
595
rc-busness/assets/css/product-list.less
Normal file
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
721
rc-busness/assets/css/producted.less
Normal file
721
rc-busness/assets/css/producted.less
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -11,49 +11,31 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
.rc-main {
|
.rc-main {
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.usersearch {
|
.usersearch {
|
||||||
width: 93%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
overflow: hidden;
|
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) {
|
@media screen and (max-width: 768px) {
|
||||||
.usercontentshow{
|
.usercontentshow{
|
||||||
position: relative;
|
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{
|
.rc-bottom{
|
||||||
|
position: relative;
|
||||||
|
background: white;
|
||||||
|
z-index: 9;
|
||||||
|
.rc-bottoma{
|
||||||
|
margin-bottom:2rem;
|
||||||
|
}
|
||||||
.rc-footer{
|
.rc-footer{
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: space-evenly;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
span{
|
span{
|
||||||
width: 1.55rem;
|
width: 1.55rem;
|
||||||
height: 0.48rem;
|
height: 0.48rem;
|
||||||
@ -64,7 +46,6 @@
|
|||||||
font-size: 0.14rem;
|
font-size: 0.14rem;
|
||||||
color: #E1001A;
|
color: #E1001A;
|
||||||
border-radius: 0.30rem;
|
border-radius: 0.30rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
em{
|
em{
|
||||||
width: 1.55rem;
|
width: 1.55rem;
|
||||||
@ -96,11 +77,7 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
}
|
}
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
height: 6.17rem;
|
|
||||||
background: white;
|
|
||||||
z-index: 999;
|
|
||||||
.rc-productcat {
|
.rc-productcat {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
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{
|
.rc-contair{
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
.rc-rccontair{
|
.rc-rccontair{
|
||||||
@ -415,18 +360,6 @@ margin-top: 20px;
|
|||||||
.rc-bottom{
|
.rc-bottom{
|
||||||
.rc-cat{
|
.rc-cat{
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
|
||||||
.active{
|
|
||||||
border: 2px solid #E2001A;
|
|
||||||
color: #E2001A;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
}
|
|
||||||
.unactive{
|
|
||||||
border: 2px solid #d7d7d7;
|
|
||||||
color:#999999;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.rc-productcat {
|
.rc-productcat {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -591,37 +524,6 @@ margin-top: 20px;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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{
|
.rc-contair{
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
ul{
|
ul{
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
@ -1,11 +0,0 @@
|
|||||||
<template>
|
|
||||||
<svg class="nuxt-logo" viewBox="0 0 45 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M24.7203 29.704H41.1008C41.6211 29.7041 42.1322 29.5669 42.5828 29.3061C43.0334 29.0454 43.4075 28.6704 43.6675 28.2188C43.9275 27.7672 44.0643 27.2549 44.0641 26.7335C44.0639 26.2121 43.9266 25.6999 43.6662 25.2485L32.6655 6.15312C32.4055 5.70162 32.0315 5.32667 31.581 5.06598C31.1305 4.8053 30.6195 4.66805 30.0994 4.66805C29.5792 4.66805 29.0682 4.8053 28.6177 5.06598C28.1672 5.32667 27.7932 5.70162 27.5332 6.15312L24.7203 11.039L19.2208 1.48485C18.9606 1.03338 18.5864 0.658493 18.1358 0.397853C17.6852 0.137213 17.1741 0 16.6538 0C16.1336 0 15.6225 0.137213 15.1719 0.397853C14.7213 0.658493 14.3471 1.03338 14.0868 1.48485L0.397874 25.2485C0.137452 25.6999 0.000226653 26.2121 2.8053e-07 26.7335C-0.000226092 27.2549 0.136554 27.7672 0.396584 28.2188C0.656614 28.6704 1.03072 29.0454 1.48129 29.3061C1.93185 29.5669 2.44298 29.7041 2.96326 29.704H13.2456C17.3195 29.704 20.3239 27.9106 22.3912 24.4118L27.4102 15.7008L30.0986 11.039L38.1667 25.0422H27.4102L24.7203 29.704ZM13.0779 25.0374L5.9022 25.0358L16.6586 6.36589L22.0257 15.7008L18.4322 21.9401C17.0593 24.2103 15.4996 25.0374 13.0779 25.0374Z" fill="#00DC82" />
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.nuxt-logo {
|
|
||||||
height: 180px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
<!-- Please remove this file from your project -->
|
|
||||||
<template>
|
|
||||||
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center sm:pt-0">
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1.2/dist/tailwind.min.css" rel="stylesheet">
|
|
||||||
<div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
|
|
||||||
<a class="flex justify-center pt-8 sm:pt-0" href="https://nuxtjs.org" target="_blank">
|
|
||||||
<svg width="218" height="45" viewBox="0 0 159 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M55.5017 6.81866H60.1727L70.0719 22.9912V6.81866H74.3837V29.7345H69.7446L59.8135 13.5955V29.7345H55.5017V6.81866Z" fill="#003543" /> <path d="M93.657 29.7344H89.6389V27.1747C88.7241 28.9761 86.8628 29.9904 84.5113 29.9904C80.7869 29.9904 78.3684 27.3059 78.3684 23.4423V13.2339H82.3865V22.5976C82.3865 24.8566 83.7594 26.4276 85.8171 26.4276C88.0712 26.4276 89.6389 24.6598 89.6389 22.2377V13.2339H93.657V29.7344Z" fill="#003543" /> <path d="M107.64 29.7344L103.784 24.2342L99.9291 29.7344H95.6492L101.596 21.1242L96.1074 13.2339H100.485L103.784 17.9821L107.051 13.2339H111.461L105.94 21.1242L111.886 29.7344H107.64Z" fill="#003543" /> <path d="M120.053 8.25848V13.2339H124.627V16.6063H120.053V24.7974C120.053 25.0725 120.162 25.3363 120.356 25.531C120.55 25.7257 120.813 25.8353 121.087 25.8357H124.627V29.728H121.98C118.386 29.728 116.035 27.6323 116.035 23.9687V16.6095H112.801V13.2339H114.83C115.776 13.2339 116.327 12.6692 116.327 11.7349V8.25848H120.053Z" fill="#003543" /> <path d="M134.756 24.5446V6.81866H139.066V23.1864C139.066 27.6067 136.943 29.7345 133.349 29.7345H128.332V25.8421H133.461C133.804 25.8421 134.134 25.7054 134.377 25.4621C134.619 25.2188 134.756 24.8888 134.756 24.5446Z" fill="#003543" /> <path d="M141.649 22.0409H145.799C146.029 24.6006 147.728 26.2308 150.472 26.2308C152.923 26.2308 154.623 25.2501 154.623 23.2199C154.623 18.3085 142.331 21.7129 142.331 12.9395C142.334 9.17515 145.568 6.55945 150.215 6.55945C155.05 6.55945 158.317 9.34153 158.516 13.6306H154.388C154.193 11.6341 152.632 10.2918 150.207 10.2918C147.953 10.2918 146.548 11.3397 146.548 12.9427C146.548 18.0173 159 14.2226 159 23.1576C159 27.4131 155.504 30 150.474 30C145.279 30 141.882 26.8563 141.654 22.0441" fill="#003543" /> <path d="M24.7203 29.704H41.1008C41.6211 29.7041 42.1322 29.5669 42.5828 29.3061C43.0334 29.0454 43.4075 28.6704 43.6675 28.2188C43.9275 27.7672 44.0643 27.2549 44.0641 26.7335C44.0639 26.2121 43.9266 25.6999 43.6662 25.2485L32.6655 6.15312C32.4055 5.70162 32.0315 5.32667 31.581 5.06598C31.1305 4.8053 30.6195 4.66805 30.0994 4.66805C29.5792 4.66805 29.0682 4.8053 28.6177 5.06598C28.1672 5.32667 27.7932 5.70162 27.5332 6.15312L24.7203 11.039L19.2208 1.48485C18.9606 1.03338 18.5864 0.658493 18.1358 0.397853C17.6852 0.137213 17.1741 0 16.6538 0C16.1336 0 15.6225 0.137213 15.1719 0.397853C14.7213 0.658493 14.3471 1.03338 14.0868 1.48485L0.397874 25.2485C0.137452 25.6999 0.000226653 26.2121 2.8053e-07 26.7335C-0.000226092 27.2549 0.136554 27.7672 0.396584 28.2188C0.656614 28.6704 1.03072 29.0454 1.48129 29.3061C1.93185 29.5669 2.44298 29.7041 2.96326 29.704H13.2456C17.3195 29.704 20.3239 27.9106 22.3912 24.4118L27.4102 15.7008L30.0986 11.039L38.1667 25.0422H27.4102L24.7203 29.704ZM13.0779 25.0374L5.9022 25.0358L16.6586 6.36589L22.0257 15.7008L18.4322 21.9401C17.0593 24.2103 15.4996 25.0374 13.0779 25.0374Z" fill="#00DC82" /></svg>
|
|
||||||
</a>
|
|
||||||
<div class="mt-8 bg-white overflow-hidden shadow sm:rounded-lg p-6">
|
|
||||||
<h2 class="text-2xl leading-7 font-semibold">
|
|
||||||
Welcome to your Nuxt Application
|
|
||||||
</h2>
|
|
||||||
<p class="mt-3 text-gray-600">
|
|
||||||
We recommend you take a look at the <a href="https://nuxtjs.org" target="_blank" class="text-green-500 hover:underline">Nuxt documentation</a>, whether you are new or have previous experience with the framework.<br>
|
|
||||||
</p>
|
|
||||||
<p class="mt-4 pt-4 text-gray-800 border-t border-dashed">
|
|
||||||
To get started, remove <code class="bg-gray-100 text-sm p-1 rounded border">components/Tutorial.vue</code> and start coding in <code class="bg-gray-100 text-sm p-1 rounded border">pages/index.vue</code>. Have fun!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center pt-4 space-x-2">
|
|
||||||
<a href="https://github.com/nuxt/nuxt.js" target="_blank"><svg
|
|
||||||
class="w-6 h-6 text-gray-600 hover:text-gray-800"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
||||||
aria-hidden="true"
|
|
||||||
role="img"
|
|
||||||
width="32"
|
|
||||||
height="32"
|
|
||||||
preserveAspectRatio="xMidYMid meet"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path d="M12 2.247a10 10 0 0 0-3.162 19.487c.5.088.687-.212.687-.475c0-.237-.012-1.025-.012-1.862c-2.513.462-3.163-.613-3.363-1.175a3.636 3.636 0 0 0-1.025-1.413c-.35-.187-.85-.65-.013-.662a2.001 2.001 0 0 1 1.538 1.025a2.137 2.137 0 0 0 2.912.825a2.104 2.104 0 0 1 .638-1.338c-2.225-.25-4.55-1.112-4.55-4.937a3.892 3.892 0 0 1 1.025-2.688a3.594 3.594 0 0 1 .1-2.65s.837-.262 2.75 1.025a9.427 9.427 0 0 1 5 0c1.912-1.3 2.75-1.025 2.75-1.025a3.593 3.593 0 0 1 .1 2.65a3.869 3.869 0 0 1 1.025 2.688c0 3.837-2.338 4.687-4.563 4.937a2.368 2.368 0 0 1 .675 1.85c0 1.338-.012 2.413-.012 2.75c0 .263.187.575.687.475A10.005 10.005 0 0 0 12 2.247z" fill="currentColor" /></svg></a>
|
|
||||||
<a href="https://twitter.com/nuxt_js" target="_blank"><svg
|
|
||||||
class="w-6 h-6 text-gray-600 hover:text-gray-800"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
||||||
aria-hidden="true"
|
|
||||||
role="img"
|
|
||||||
width="32"
|
|
||||||
height="32"
|
|
||||||
preserveAspectRatio="xMidYMid meet"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23z" fill="currentColor" /></svg></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,7 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<header class="rc-home-header fixed">
|
||||||
|
|
||||||
<header class="rc-home-header">
|
|
||||||
<div class="rc-main">
|
<div class="rc-main">
|
||||||
<nuxt-link :to="`../../productdetails/userdetails/`">
|
<nuxt-link :to="`../../productdetails/userdetails/`">
|
||||||
<div class="c-left">
|
<div class="c-left">
|
||||||
@ -53,92 +51,5 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
/* 手机端 */
|
@import url("../assets/css/global.less");
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.rc-home-header{
|
|
||||||
|
|
||||||
.rc-main{
|
|
||||||
width: 92%;
|
|
||||||
margin: 0 auto;
|
|
||||||
// position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 4%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
height: 70px;
|
|
||||||
background-color: white;
|
|
||||||
z-index: 9999 ;
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
/* pc端 */
|
|
||||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -7,7 +7,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="carousel">
|
<div class="carousel">
|
||||||
<div class="left_arrow arrow" @click="leftArrowClick">
|
<div class="left_arrow arrow" @click="leftArrowClick">
|
||||||
|
|
||||||
<img src="../assets/image/userleft.jpg" alt="">
|
<img src="../assets/image/userleft.jpg" alt="">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -19,7 +18,6 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="right_arrow arrow" @click="rightArrowClick">
|
<div class="right_arrow arrow" @click="rightArrowClick">
|
||||||
|
|
||||||
<img src="../assets/image/userright.png" alt="">
|
<img src="../assets/image/userright.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -68,6 +66,12 @@ export default {
|
|||||||
{url: require("../assets/six.png")},
|
{url: require("../assets/six.png")},
|
||||||
{url: require("../assets/six.png")},
|
{url: require("../assets/six.png")},
|
||||||
{url: require("../assets/six.png")},
|
{url: require("../assets/six.png")},
|
||||||
|
{url: require("../assets/four.png")},
|
||||||
|
{url: require("../assets/cat.png")},
|
||||||
|
{url: require("../assets/one.png")},
|
||||||
|
{url: require("../assets/six.png")},
|
||||||
|
{url: require("../assets/six.png")},
|
||||||
|
{url: require("../assets/six.png")},
|
||||||
],
|
],
|
||||||
menu:[],
|
menu:[],
|
||||||
middleImg: '', // 中图图片地址
|
middleImg: '', // 中图图片地址
|
||||||
@ -92,6 +96,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
let user= JSON.parse(localStorage.getItem("message"));
|
let user= JSON.parse(localStorage.getItem("message"));
|
||||||
console.log(user);
|
console.log(user);
|
||||||
if(user!==null){
|
if(user!==null){
|
||||||
@ -104,10 +112,6 @@ export default {
|
|||||||
console.log(this.middleImg);
|
console.log(this.middleImg);
|
||||||
// 计算缩略图的宽度,默认是显示4张图片,两边箭头的宽度和为50
|
// 计算缩略图的宽度,默认是显示4张图片,两边箭头的宽度和为50
|
||||||
// this.itemWidth = (this.middleImgWidth-30) / 2
|
// this.itemWidth = (this.middleImgWidth-30) / 2
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
this.ifadroind();
|
this.ifadroind();
|
||||||
@ -258,8 +262,8 @@ this.ifadroind();
|
|||||||
},
|
},
|
||||||
// 点击右边箭头
|
// 点击右边箭头
|
||||||
rightArrowClick () {
|
rightArrowClick () {
|
||||||
// 每次向左平移一个盒子的宽度,最多移动的宽度为(图片数组长度-4)*每张缩略图的宽度
|
// 每次向左平移一个盒子的宽度,最多移动的宽度为(图片数组长度-1)*每张缩略图的宽度
|
||||||
if (this.middleLeft > -this.itemWidth*(this.pictureList.length-4)) {
|
if (this.middleLeft > -this.itemWidth*(this.pictureList.length-1)) {
|
||||||
this.middleLeft -= this.itemWidth
|
this.middleLeft -= this.itemWidth
|
||||||
$('.picture_container').animate({
|
$('.picture_container').animate({
|
||||||
left: this.middleLeft
|
left: this.middleLeft
|
||||||
@ -293,196 +297,5 @@ this.ifadroind();
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@media screen and(min-width: 320px) and(max-width:768px) {
|
@import url("../assets/css/magnifier.less");
|
||||||
.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: 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 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
img{
|
|
||||||
width: 0.16rem;
|
|
||||||
height: 0.24rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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: 0.16rem;
|
|
||||||
height: 0.24rem;
|
|
||||||
display: block;
|
|
||||||
margin-left: 0.06rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.left_contaner .carousel .picture_container {
|
|
||||||
width: 200%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
.left_contaner .picture_container .picture_item {
|
|
||||||
height: 100%;
|
|
||||||
float: left;
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
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('../assets/image/rc-left.png') no-repeat;
|
|
||||||
background-position: center center;
|
|
||||||
}
|
|
||||||
.left_contaner .carousel .right_arrow {
|
|
||||||
background: url('../assets/image/rc-left.png') no-repeat;
|
|
||||||
background-position: center right;
|
|
||||||
}
|
|
||||||
.left_contaner .carousel .picture_container {
|
|
||||||
width: 200%;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,25 +0,0 @@
|
|||||||
<!-- -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
components: {},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
methods: {}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -10,7 +10,7 @@
|
|||||||
},
|
},
|
||||||
"config": {
|
"config": {
|
||||||
"nuxt": {
|
"nuxt": {
|
||||||
"host": "192.168.10.104",
|
"host": "0.0.0.0",
|
||||||
"port": "8080"
|
"port": "8080"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
<!-- Suppose in header end -->
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
<div class="rc-login">
|
<div class="rc-login">
|
||||||
<div class="userunlogin" v-show="userunlogin" @click="userlogin">
|
<div class="userunlogin" v-show="userunlogin" @click="userlogin">
|
||||||
@ -14,16 +15,16 @@
|
|||||||
<div class="user-right">
|
<div class="user-right">
|
||||||
<img src="../assets/image/rc-left.png" alt="">
|
<img src="../assets/image/rc-left.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<van-swipe :autoplay="3000">
|
<!-- Suppose in header end -->
|
||||||
|
<van-swipe :autoplay="30000">
|
||||||
<van-swipe-item v-for="(banner, index) in banners" :key="index">
|
<van-swipe-item v-for="(banner, index) in banners" :key="index">
|
||||||
<img :src="banner.src" class="useraimg"/>
|
<img :src="banner.src" class="useraimg"/>
|
||||||
</van-swipe-item>
|
</van-swipe-item>
|
||||||
</van-swipe>
|
</van-swipe>
|
||||||
|
|
||||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;margin-top:0.23rem"></div>
|
<div class="online" id="fixed-catbar-seperator"></div>
|
||||||
<!-- <div v-swiper:mySwiper="swiperOption" class="swiperWrap">
|
<!-- <div v-swiper:mySwiper="swiperOption" class="swiperWrap">
|
||||||
<div class="swiper-wrapper">
|
<div class="swiper-wrapper">
|
||||||
<div class="swiper-slide" v-for="(banner,index ) in banners" :key="index">
|
<div class="swiper-slide" v-for="(banner,index ) in banners" :key="index">
|
||||||
@ -34,10 +35,8 @@
|
|||||||
</div> -->
|
</div> -->
|
||||||
<div class="rc-main">
|
<div class="rc-main">
|
||||||
<div class="usermain">
|
<div class="usermain">
|
||||||
<div class="rc-ma">
|
<div :class="searchBar?'rc-ma':'rc-ma searchBara'">
|
||||||
<ul :class="searchBar?'ul-zhuan':'searchBara'" >
|
<ul class="ul-zhuan">
|
||||||
|
|
||||||
|
|
||||||
<li
|
<li
|
||||||
v-for="(item, index) in discountlist"
|
v-for="(item, index) in discountlist"
|
||||||
:key="index"
|
:key="index"
|
||||||
@ -47,12 +46,13 @@
|
|||||||
<img :src="item.catimage" alt="">
|
<img :src="item.catimage" alt="">
|
||||||
<span>{{ item.title }}</span>
|
<span>{{ item.title }}</span>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;margin-top:0.36REM"></div>
|
</div>
|
||||||
|
<div class="online"></div>
|
||||||
|
|
||||||
|
<div class="rc-main">
|
||||||
<div class="rc-lunbo">
|
<div class="rc-lunbo">
|
||||||
<!-- <h2>明星猫粮</h2> -->
|
<!-- <h2>明星猫粮</h2> -->
|
||||||
<div class="pageFullScreen" id="xxxFullScreen" v-show="catproduct">
|
<div class="pageFullScreen" id="xxxFullScreen" v-show="catproduct">
|
||||||
@ -80,7 +80,6 @@
|
|||||||
<div class="uservideo">
|
<div class="uservideo">
|
||||||
<video width="300px" height="251" controls="controls">
|
<video width="300px" height="251" controls="controls">
|
||||||
<source :src= item.video type="video/ogg" autoplay>
|
<source :src= item.video type="video/ogg" autoplay>
|
||||||
|
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -104,7 +103,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;margin-top:0.33rem"></div>
|
<div class="online"></div>
|
||||||
<div class="selectionswitch">
|
<div class="selectionswitch">
|
||||||
<h2>全价猫湿粮</h2>
|
<h2>全价猫湿粮</h2>
|
||||||
<van-tabs @change='userclick' class="van-tabs">
|
<van-tabs @change='userclick' class="van-tabs">
|
||||||
@ -151,8 +150,6 @@
|
|||||||
</ol>
|
</ol>
|
||||||
<div class="rc-maa">
|
<div class="rc-maa">
|
||||||
<ul>
|
<ul>
|
||||||
|
|
||||||
|
|
||||||
<li
|
<li
|
||||||
v-for="(item, index) in doglist"
|
v-for="(item, index) in doglist"
|
||||||
:key="index"
|
:key="index"
|
||||||
@ -188,7 +185,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;margin-top:0.33rem"></div>
|
<div class="online"></div>
|
||||||
<div class="selectionswitch">
|
<div class="selectionswitch">
|
||||||
<h2>全价猫干粮</h2>
|
<h2>全价猫干粮</h2>
|
||||||
<van-tabs @change='userclick' class="van-tabs">
|
<van-tabs @change='userclick' class="van-tabs">
|
||||||
@ -272,7 +269,7 @@
|
|||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;margin-top:0.33rem"></div>
|
<div class="online"></div>
|
||||||
|
|
||||||
<div class="selectionswitch">
|
<div class="selectionswitch">
|
||||||
<h2>全价犬湿粮</h2>
|
<h2>全价犬湿粮</h2>
|
||||||
@ -360,7 +357,7 @@
|
|||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;margin-top:0.33rem"></div>
|
<div class="online"></div>
|
||||||
<div class="selectionswitch">
|
<div class="selectionswitch">
|
||||||
<h2>全价犬干粮</h2>
|
<h2>全价犬干粮</h2>
|
||||||
<van-tabs @change='userdog' class="van-tabs">
|
<van-tabs @change='userdog' class="van-tabs">
|
||||||
@ -446,7 +443,7 @@
|
|||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;margin-top:0.33rem"></div>
|
<div class="online"></div>
|
||||||
|
|
||||||
<div class="selectionswitch">
|
<div class="selectionswitch">
|
||||||
<h2>处方用粮</h2>
|
<h2>处方用粮</h2>
|
||||||
@ -531,7 +528,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;margin-top:0.33rem"></div>
|
<div class="online"></div>
|
||||||
|
|
||||||
<div class="rc-usermessage">
|
<div class="rc-usermessage">
|
||||||
<em>为每一种健康需求度身定制</em>
|
<em>为每一种健康需求度身定制</em>
|
||||||
@ -539,8 +536,9 @@
|
|||||||
通常是他们体型、品种或生活方式上的特征。邀请您探索我们的营养系列，了解我们如何协助每一只爱宠过
|
通常是他们体型、品种或生活方式上的特征。邀请您探索我们的营养系列，了解我们如何协助每一只爱宠过
|
||||||
得更健康。
|
得更健康。
|
||||||
</span>
|
</span>
|
||||||
|
<a href="https://royalcanin.com.cn/tailored-nutrition/details">
|
||||||
<i>了解更多</i>
|
<i>了解更多</i>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -580,13 +578,12 @@
|
|||||||
<li v-for="(userfixed,index) in fixedlist" :key="index" @click="lianxi(userfixed,index)">
|
<li v-for="(userfixed,index) in fixedlist" :key="index" @click="lianxi(userfixed,index)">
|
||||||
<img :src="userfixed.catimage" alt="">
|
<img :src="userfixed.catimage" alt="">
|
||||||
<span> {{userfixed.title}}</span>
|
<span> {{userfixed.title}}</span>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="tuntop" @click="toTop" v-show="gotop">
|
<div class="tuntop" @click="toTop" v-show="gotop">
|
||||||
<img src="../assets/image/turntop.png" alt="">
|
<img src="../assets/image/turntop.png" alt="">
|
||||||
|
回到顶部
|
||||||
回到顶部</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Myfooter v-on:litentop='showmesg'></Myfooter>
|
<Myfooter v-on:litentop='showmesg'></Myfooter>
|
||||||
@ -724,30 +721,35 @@ activeInde3:0,
|
|||||||
discountlist: [
|
discountlist: [
|
||||||
{
|
{
|
||||||
title: "明星猫粮",
|
title: "明星猫粮",
|
||||||
catimage: require("../assets/cat.png"),
|
catimage: require("../assets/star-cat.png"),
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "猫干粮",
|
|
||||||
catimage: require("../assets/four.png"),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "猫湿粮",
|
title: "猫湿粮",
|
||||||
catimage: require("../assets/one.png"),
|
catimage: require("../assets/two.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "猫干粮",
|
||||||
|
catimage: require("../assets/cat.png"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "明星犬粮",
|
title: "明星犬粮",
|
||||||
catimage: require("../assets/two.png"),
|
catimage: require("../assets/six.png"),
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "犬干粮",
|
|
||||||
catimage: require("../assets/three.png"),
|
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "犬湿粮",
|
title: "犬湿粮",
|
||||||
catimage: require("../assets/six.png"),
|
catimage: require("../assets/three.png"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "犬干粮",
|
||||||
|
catimage: require("../assets/one.png"),
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "处方用粮",
|
||||||
|
catimage: require("../assets/four.png"),
|
||||||
|
|
||||||
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
discounchufang: [
|
discounchufang: [
|
||||||
@ -962,17 +964,22 @@ activeInde3:0,
|
|||||||
},
|
},
|
||||||
|
|
||||||
showmesg(){
|
showmesg(){
|
||||||
console.log('-----');
|
|
||||||
this.toTop();
|
this.toTop();
|
||||||
},
|
},
|
||||||
handleScroll(e) {
|
handleScroll(e)
|
||||||
console.log(e);
|
{
|
||||||
|
let fixedCatbarSeperator = document.getElementById("fixed-catbar-seperator");
|
||||||
let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
|
let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
console.log(scrolltop);
|
if((scrolltop-fixedCatbarSeperator.offsetTop)>=0)
|
||||||
scrolltop > 1200 ? (this.gotop = true) : (this.gotop = false);
|
{
|
||||||
|
this.gotop = true
|
||||||
scrolltop>1500?(this.searchBar=false):(this.searchBar=true);
|
this.searchBar=false
|
||||||
console.log(this.searchBar);
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.gotop = false;
|
||||||
|
this.searchBar=true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
toTop() {
|
toTop() {
|
||||||
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
@ -1139,6 +1146,7 @@ this.activeInde3=index;
|
|||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@import url("../assets/css/global.less");
|
||||||
@import url("../assets/css/index.less");
|
@import url("../assets/css/index.less");
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,522 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<Myheader></Myheader>
|
|
||||||
<div class="rc-main">
|
|
||||||
<div class="rc-usermain">
|
|
||||||
<div class="rc-header">
|
|
||||||
<span
|
|
||||||
v-for="(item, index) in discountlist"
|
|
||||||
:key="index"
|
|
||||||
@click="selectGoods(item, index)"
|
|
||||||
:class="activeIndex == index ? 'active' : 'unactive'"
|
|
||||||
>
|
|
||||||
{{ item.title }}
|
|
||||||
</span>
|
|
||||||
<!-- <span @click="tanchu()">弹出</span> -->
|
|
||||||
</div>
|
|
||||||
<div class="rs-dis">
|
|
||||||
<div
|
|
||||||
class="rc-discount"
|
|
||||||
v-for="(item, index) in newlist"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<img :src="userimage" alt="" />
|
|
||||||
<div class="rc-contair">
|
|
||||||
<div class="rc-left" ref="userleft" id="userleft">
|
|
||||||
<div>
|
|
||||||
<i>￥</i><span>{{ item.couponAmount }}</span>
|
|
||||||
</div>
|
|
||||||
<strong>{{ item.couponName }}</strong>
|
|
||||||
</div>
|
|
||||||
<div class="rc-right">
|
|
||||||
<i>
|
|
||||||
{{ item.couponDesc }}
|
|
||||||
</i>
|
|
||||||
<div class="rc-main" id="rc-main">
|
|
||||||
<span>有效期{{item.validFrom}}至</span>
|
|
||||||
<em>{{ item.validTo }}</em>
|
|
||||||
</div>
|
|
||||||
<nuxt-link :to="`/`">
|
|
||||||
<div class="rc-footer" v-if="userload">
|
|
||||||
<span @click="usertiao()">立即使用</span>
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {allConfig,getdraw} from "../../ajax/getData";
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
userload: true,
|
|
||||||
pastdue: false,
|
|
||||||
unused: false,
|
|
||||||
usermessage:[],
|
|
||||||
userstates:0,
|
|
||||||
userimage: require("../../assets/image/unused.png"),
|
|
||||||
newlist: [
|
|
||||||
{
|
|
||||||
price: "30",
|
|
||||||
pricestype: "新客优惠券",
|
|
||||||
special: "全场每满299-30",
|
|
||||||
period: "有效期",
|
|
||||||
starttime: "2021.11.29-2022.01.28",
|
|
||||||
catimage: require("../../assets/image/unused.png"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: "30",
|
|
||||||
pricestype: "新客优惠券",
|
|
||||||
special: "全场每满299-30",
|
|
||||||
period: "有效期",
|
|
||||||
starttime: "2021.11.29-2022.01.28",
|
|
||||||
catimage: require("../../assets/image/unused.png"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: "30",
|
|
||||||
pricestype: "新客优惠券",
|
|
||||||
special: "全场每满299-30",
|
|
||||||
period: "有效期",
|
|
||||||
starttime: "2021.11.29-2022.01.28",
|
|
||||||
catimage: require("../../assets/image/unused.png"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: "30",
|
|
||||||
pricestype: "新客优惠券",
|
|
||||||
special: "全场每满299-30",
|
|
||||||
period: "有效期",
|
|
||||||
starttime: "2021.11.29-2022.01.28",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: "30",
|
|
||||||
pricestype: "新客优惠券",
|
|
||||||
special: "全场每满299-30",
|
|
||||||
period: "有效期",
|
|
||||||
starttime: "2021.11.29-2022.01.28",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: "30",
|
|
||||||
pricestype: "新客优惠券",
|
|
||||||
special: "全场每满299-30",
|
|
||||||
period: "有效期",
|
|
||||||
starttime: "2021.11.29-2022.01.28",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: "30",
|
|
||||||
pricestype: "新客优惠券",
|
|
||||||
special: "全场每满299-30",
|
|
||||||
period: "有效期",
|
|
||||||
starttime: "2021.11.29-2022.01.28",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: "30",
|
|
||||||
pricestype: "新客优惠券",
|
|
||||||
special: "全场每满299-30",
|
|
||||||
period: "有效期",
|
|
||||||
starttime: "2021.11.29-2022.01.28",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: "30",
|
|
||||||
pricestype: "新客优惠券",
|
|
||||||
special: "全场每满299-30",
|
|
||||||
period: "有效期",
|
|
||||||
starttime: "2021.11.29-2022.01.28",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: "30",
|
|
||||||
pricestype: "新客优惠券",
|
|
||||||
special: "全场每满299-30",
|
|
||||||
period: "有效期",
|
|
||||||
starttime: "2021.11.29-2022.01.28",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
discountlist: [
|
|
||||||
{
|
|
||||||
title: "未使用",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "已使用",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "已过期",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
preferential: [
|
|
||||||
{
|
|
||||||
price: "30",
|
|
||||||
pricestype: "新客优惠券",
|
|
||||||
special: "全场每满299-30",
|
|
||||||
period: "有效期",
|
|
||||||
starttime: "2021.11.29-2022.01.28",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: "30",
|
|
||||||
pricestype: "新客优惠券",
|
|
||||||
special: "全场每满299-30",
|
|
||||||
period: "有效期",
|
|
||||||
starttime: "2021.11.29-2022.01.28",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: "30",
|
|
||||||
pricestype: "新客优惠券",
|
|
||||||
special: "全场每满299-30",
|
|
||||||
period: "有效期",
|
|
||||||
starttime: "2021.11.29-2022.01.28",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
userdiscount:[],
|
|
||||||
activeIndex: 0,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
//获取用户领取的优惠券
|
|
||||||
async userdraw(mobile,states) {
|
|
||||||
let data = await getdraw(mobile,states);
|
|
||||||
if(data){
|
|
||||||
console.log(data);
|
|
||||||
this.newlist=data.data;
|
|
||||||
console.log(this.newlist);
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
selectGoods(item, index) {
|
|
||||||
|
|
||||||
this.activeIndex = index;
|
|
||||||
if(this.usermessage!==null){
|
|
||||||
if (this.activeIndex == 1) {
|
|
||||||
this.userload = false;
|
|
||||||
this.pastdue = true;
|
|
||||||
this.userimage = require("../../assets/image/hasused.png");
|
|
||||||
this.userstates=1
|
|
||||||
this.userdraw(this.usermessage.data.mobile,1)
|
|
||||||
}
|
|
||||||
if (this.activeIndex == 0) {
|
|
||||||
this.userload = true;
|
|
||||||
this.pastdue = false;
|
|
||||||
this.userdraw(this.usermessage.data.mobile,0)
|
|
||||||
|
|
||||||
this.userstates=0
|
|
||||||
this.userimage = require("../../assets/image/unused.png");
|
|
||||||
}
|
|
||||||
if (this.activeIndex == 2) {
|
|
||||||
this.userload = false;
|
|
||||||
this.pastdue = true;
|
|
||||||
this.userdraw(this.usermessage.data.mobile,2)
|
|
||||||
this.userstates=2
|
|
||||||
this.userimage = require("../../assets/image/expired.png");
|
|
||||||
}
|
|
||||||
}else{
|
|
||||||
this.$message({
|
|
||||||
type: 'warning',
|
|
||||||
message: '请先去登录'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(index);
|
|
||||||
},
|
|
||||||
|
|
||||||
usertiao(){
|
|
||||||
this.$router.push({
|
|
||||||
path: "/",
|
|
||||||
query: {
|
|
||||||
stype: 1,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// tanchu() {
|
|
||||||
// console.log('---')
|
|
||||||
// var option = {
|
|
||||||
// customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
|
|
||||||
// }
|
|
||||||
// dis_livchat(option);
|
|
||||||
// }
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
|
|
||||||
|
|
||||||
if(this.usermessage!==null){
|
|
||||||
this.userdraw(this.usermessage.data.mobile,);
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Myheader,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
import Myheader from "~/components/header.vue";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
// 手机端
|
|
||||||
@media screen and(min-width: 320px) and(max-width:768px) {
|
|
||||||
.active {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #e2001a;
|
|
||||||
|
|
||||||
}
|
|
||||||
.unactive {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #444444;
|
|
||||||
|
|
||||||
}
|
|
||||||
.rc-header {
|
|
||||||
height: 64px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-left: 23px;
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
margin-left: 32px;
|
|
||||||
|
|
||||||
}
|
|
||||||
span:first-child {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-discount {
|
|
||||||
margin-left: 23px;
|
|
||||||
display: flex;
|
|
||||||
margin-top: 16px;
|
|
||||||
width: 335px;
|
|
||||||
background: #ffffff;
|
|
||||||
position: relative;
|
|
||||||
height: 120px;
|
|
||||||
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: 14px;
|
|
||||||
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;
|
|
||||||
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: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// // /* 最小768px最大1920 *pc端/
|
|
||||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
|
||||||
.rc-main {
|
|
||||||
width: 100%;
|
|
||||||
.rc-usermain {
|
|
||||||
width: 92%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.active {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #e2001a;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.unactive {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #444444;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.rc-header {
|
|
||||||
height: 64px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-left: 23px;
|
|
||||||
justify-content: center;
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
margin-left: 32px;
|
|
||||||
}
|
|
||||||
span:first-child {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rs-dis {
|
|
||||||
margin-top: 70px;
|
|
||||||
}
|
|
||||||
.rc-discount {
|
|
||||||
margin-left: 50px;
|
|
||||||
display: flex;
|
|
||||||
margin-top: 40px;
|
|
||||||
width: 335px;
|
|
||||||
background: #ffffff;
|
|
||||||
position: relative;
|
|
||||||
height: 120px;
|
|
||||||
float: left;
|
|
||||||
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: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-userright {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 78px;
|
|
||||||
justify-content: center;
|
|
||||||
height: 78px;
|
|
||||||
border: 2px solid #999999;
|
|
||||||
border-radius: 50%;
|
|
||||||
span {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
border: 1px solid #999999;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,321 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<Myheader></Myheader>
|
|
||||||
<div class="rc-header">
|
|
||||||
<div class="rc-main">
|
|
||||||
<ul>
|
|
||||||
<li v-for="(item,index) in userrecord" :key="index">
|
|
||||||
{{item.title}}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ol>
|
|
||||||
|
|
||||||
<li v-for="(item,index) in usermessage" :key="index">
|
|
||||||
<span>{{item.startDate}}</span>
|
|
||||||
<em>{{item.changeValue}}</em>
|
|
||||||
<i>{{item.remark}}</i>
|
|
||||||
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="rc-button">
|
|
||||||
<div class="rc-order">
|
|
||||||
<span>积分兑换</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Myheader from '~/components/header.vue'
|
|
||||||
import { memberAccount } from "../../ajax/getData";
|
|
||||||
export default {
|
|
||||||
data(){
|
|
||||||
return{
|
|
||||||
userrecord:[
|
|
||||||
{
|
|
||||||
title:'日期',
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title:'积分',
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title:'类型',
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
],
|
|
||||||
|
|
||||||
usermessage:[
|
|
||||||
{
|
|
||||||
title:'2021-09-11',
|
|
||||||
rccord:'+100',
|
|
||||||
buycord:'购物积分'
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title:'2021-09-11',
|
|
||||||
rccord:'+100',
|
|
||||||
buycord:'购物积分'
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title:'2021-09-11',
|
|
||||||
rccord:'+100',
|
|
||||||
buycord:'购物积分'
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title:'2021-09-11',
|
|
||||||
rccord:'+100',
|
|
||||||
buycord:'购物积分'
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title:'2021-09-11',
|
|
||||||
rccord:'+100',
|
|
||||||
buycord:'购物积分'
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
]
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
//请求猫
|
|
||||||
async catmessage() {
|
|
||||||
let user= JSON.parse(localStorage.getItem("userInfo"));
|
|
||||||
let data = await memberAccount(user.data.id);
|
|
||||||
if(data){
|
|
||||||
this.usermessage=data.data;
|
|
||||||
console.log(this.usermessage.data);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
this.catmessage();
|
|
||||||
|
|
||||||
},
|
|
||||||
components:{
|
|
||||||
Myheader,
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
ul li ol li em strong i {
|
|
||||||
list-style: none;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
.rc-header {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
//手机端
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
|
|
||||||
.rc-button{
|
|
||||||
width: 100%;
|
|
||||||
height: 80px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 12px;
|
|
||||||
|
|
||||||
.rc-order{
|
|
||||||
width: 164px;
|
|
||||||
height: 48px;
|
|
||||||
border: 2px solid #E2001A;
|
|
||||||
border-radius: 30px;
|
|
||||||
background: #E2001A;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
line-height: 48px;
|
|
||||||
span{
|
|
||||||
font-size: 16px;
|
|
||||||
display: block;
|
|
||||||
color: #FFFFFF;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-main{
|
|
||||||
width: 92%;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
ul{
|
|
||||||
height: 70px;
|
|
||||||
display: block;
|
|
||||||
border-bottom: 1px solid #D8D8D8;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #444444;
|
|
||||||
li{
|
|
||||||
float: left;
|
|
||||||
width: 30%;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
li:after{
|
|
||||||
// height: 2px;
|
|
||||||
// border: 1px solid red;
|
|
||||||
// display: block;
|
|
||||||
content:"|";
|
|
||||||
color: #707070;
|
|
||||||
margin-left: 5px;
|
|
||||||
|
|
||||||
}
|
|
||||||
li:last-child:after{
|
|
||||||
content:"";
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ol{
|
|
||||||
li{
|
|
||||||
font-style: normal;
|
|
||||||
display: block;
|
|
||||||
height: 32px;
|
|
||||||
margin-top: 16px;
|
|
||||||
display: flex;
|
|
||||||
// justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
color: #666666;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
i{
|
|
||||||
font-style: normal;
|
|
||||||
display: block;
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
span{
|
|
||||||
font-style: normal;
|
|
||||||
display: block;
|
|
||||||
width: 36%;
|
|
||||||
}
|
|
||||||
em{
|
|
||||||
font-style: normal;
|
|
||||||
display: block;
|
|
||||||
width: 23%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//pc端
|
|
||||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
|
||||||
.rc-button{
|
|
||||||
width: 100%;
|
|
||||||
height: 80px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 12px;
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
.rc-order{
|
|
||||||
width: 164px;
|
|
||||||
height: 48px;
|
|
||||||
border: 2px solid #E2001A;
|
|
||||||
border-radius: 30px;
|
|
||||||
background: #E2001A;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
line-height: 48px;
|
|
||||||
span{
|
|
||||||
font-size: 16px;
|
|
||||||
display: block;
|
|
||||||
color: #FFFFFF;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-main{
|
|
||||||
width: 92%;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 60px;
|
|
||||||
|
|
||||||
ul{
|
|
||||||
height: 64px;
|
|
||||||
background: #F6F6F6;
|
|
||||||
border: 1px solid #D7D7D7;
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 3px 3px 0px 0px;
|
|
||||||
display: block;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #444444;
|
|
||||||
li{
|
|
||||||
float: left;
|
|
||||||
width: 42%;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
ol{
|
|
||||||
li{
|
|
||||||
font-style: normal;
|
|
||||||
display: block;
|
|
||||||
height: 48px;
|
|
||||||
margin-top: 16px;
|
|
||||||
display: flex;
|
|
||||||
border: 1px solid #D7D7D7;
|
|
||||||
// justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
color: #666666;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
i{
|
|
||||||
font-style: normal;
|
|
||||||
display: block;
|
|
||||||
width: 34%;
|
|
||||||
}
|
|
||||||
span{
|
|
||||||
font-style: normal;
|
|
||||||
display: block;
|
|
||||||
width: 34%;
|
|
||||||
}
|
|
||||||
em{
|
|
||||||
font-style: normal;
|
|
||||||
display: block;
|
|
||||||
width: 34%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -2,15 +2,19 @@
|
|||||||
<div>
|
<div>
|
||||||
<div class="user" v-for="(item,index) in newlist" :key="index">
|
<div class="user" v-for="(item,index) in newlist" :key="index">
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
<div class="rc-usermain" >
|
<div class="rc-top"></div>
|
||||||
|
<div class="rc-usermain ts-product-detail">
|
||||||
<magnifier v-bind:parentmsg="msg" ></magnifier>
|
<magnifier v-bind:parentmsg="msg" ></magnifier>
|
||||||
<div class="rc-header" >
|
<div class="rc-header" >
|
||||||
<div class="rc-main" >
|
|
||||||
<div class="usermain">
|
<div class="usermain">
|
||||||
|
<div class="online"></div>
|
||||||
|
<div class="rc-main">
|
||||||
<div class="rc-title">
|
<div class="rc-title">
|
||||||
<h2>{{ item.productName }}</h2>
|
<h2>{{ item.productName }}</h2>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="online"></div>
|
||||||
|
<div class="rc-main">
|
||||||
<div class="productdetails">
|
<div class="productdetails">
|
||||||
<div class="rc-productdetail">
|
<div class="rc-productdetail">
|
||||||
<i>商品价格</i>
|
<i>商品价格</i>
|
||||||
@ -29,10 +33,12 @@
|
|||||||
<span @click="usertanchu(item,1)">立即购买</span>
|
<span @click="usertanchu(item,1)">立即购买</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;margin-top:0.33rem"></div>
|
</div>
|
||||||
|
<div class="online"></div>
|
||||||
|
|
||||||
|
|
||||||
<div class="rc-productdeta" v-if="userbuy">
|
<div class="rc-productdeta" v-if="userbuy">
|
||||||
|
<div class="rc-main">
|
||||||
<div class="rc-prodtop">
|
<div class="rc-prodtop">
|
||||||
<div>
|
<div>
|
||||||
<span>商品规格</span>：
|
<span>商品规格</span>：
|
||||||
@ -45,20 +51,17 @@
|
|||||||
{{ item.specifications }}
|
{{ item.specifications }}
|
||||||
</em>
|
</em>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-produnnum">
|
|
||||||
<div>
|
|
||||||
<span>商品数量</span>：
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="online"></div>
|
||||||
|
<div class="rc-main">
|
||||||
|
<div class="rc-produnnum">
|
||||||
|
<div><span>商品数量</span>：</div>
|
||||||
<img src="../../assets/image/userjian.png" alt="" @click="sub()" />
|
<img src="../../assets/image/userjian.png" alt="" @click="sub()" />
|
||||||
<strong>{{sales_num}}</strong>
|
<strong>{{sales_num}}</strong>
|
||||||
<img
|
<img src="../../assets/image/userjia.png" alt="" @click="plus()" class="rc-message" />
|
||||||
src="../../assets/image/userjia.png" alt="" @click="plus()"
|
|
||||||
class="rc-message"
|
|
||||||
|
|
||||||
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rc-main">
|
||||||
<div class="certification">
|
<div class="certification">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
@ -82,10 +85,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-footimage">
|
<div class="rc-footimage">
|
||||||
@ -462,742 +463,6 @@ usertanchu(item,orderm){
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
// 手机端
|
@import url("../../assets/css/global.less");
|
||||||
@media screen and(min-width: 320px) and(max-width:768px) {
|
@import url("../../assets/css/producted.less");
|
||||||
.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-main {
|
|
||||||
|
|
||||||
width: 92%;
|
|
||||||
margin: 0 auto;
|
|
||||||
.rc-title {
|
|
||||||
height: 85px;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
border-bottom: 1px solid #d8d8d8;
|
|
||||||
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;
|
|
||||||
border-bottom: 1px solid #d7d7d7;
|
|
||||||
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-main {
|
|
||||||
|
|
||||||
width: 92%;
|
|
||||||
margin: 0 auto;
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@ -2,26 +2,23 @@
|
|||||||
<div>
|
<div>
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
|
|
||||||
<div class="rc-top">
|
<div class="rc-top"></div>
|
||||||
<div class="online" style="height:2px;width:100%;background:#DDDDDD;margin-top:0.23rem"></div>
|
<div class="online"></div>
|
||||||
<div class="rc-main">
|
<div class="rc-main">
|
||||||
<div class="usersearch">
|
<div class="usersearch">
|
||||||
|
|
||||||
|
|
||||||
<div class="usercontentshow" ref="usercontent">
|
<div class="usercontentshow" ref="usercontent">
|
||||||
<div class="rc-product">
|
<div class="rc-product">
|
||||||
<div class="rc-productcat">
|
<div class="rc-productcat ts-scrollable">
|
||||||
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" >
|
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" >
|
||||||
<img :src="item.catimage" alt="" />
|
<img :src="item.catimage" alt="" />
|
||||||
<span>{{ item.title }}</span>
|
<span>{{ item.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rc-prefecture">
|
<div class="rc-age">
|
||||||
<h2>专区:</h2>
|
<h2>专区:</h2>
|
||||||
<ol>
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</li>
|
</li>
|
||||||
@ -30,15 +27,16 @@
|
|||||||
|
|
||||||
<div class="rc-age">
|
<div class="rc-age">
|
||||||
<h2>年龄:</h2>
|
<h2>年龄:</h2>
|
||||||
<ol>
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rc-age">
|
<div class="rc-age">
|
||||||
<h2>功能:</h2>
|
<h2>功能:</h2>
|
||||||
<ol>
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
|
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</li>
|
</li>
|
||||||
@ -47,14 +45,20 @@
|
|||||||
|
|
||||||
<div class="rc-age">
|
<div class="rc-age">
|
||||||
<h2>品种:</h2>
|
<h2>品种:</h2>
|
||||||
<ol>
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
|
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- rc-main end -->
|
||||||
|
<div class="online"></div>
|
||||||
|
<!-- rc-main start -->
|
||||||
|
<div class="rc-main">
|
||||||
|
<div class="usersearch">
|
||||||
<div class="rc-contair">
|
<div class="rc-contair">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(item,index) in rccontair" :key="index">
|
<li v-for="(item,index) in rccontair" :key="index">
|
||||||
@ -62,32 +66,30 @@
|
|||||||
<div class="rc-rccontair">
|
<div class="rc-rccontair">
|
||||||
<img :src=item.picture alt="">
|
<img :src=item.picture alt="">
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rc-column">
|
||||||
|
<div class="rc-click" @click="selectproduce(item)">
|
||||||
<span>{{item.categoryName}}</span>
|
<span>{{item.categoryName}}</span>
|
||||||
<i>{{item.price}}</i>
|
<i>0.001{{item.price}}</i>
|
||||||
</div>
|
</div>
|
||||||
<strong @click="userbuy()">立即购买</strong>
|
<strong @click="userbuy()">立即购买</strong>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="online" style="height:2px;width:100%;background:#DDDDDD;margin-top:0.23rem"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="usershow" v-if="openshow">
|
<div class="usershow" v-if="openshow">
|
||||||
<div class="rc-show">
|
<div class="rc-show"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- rc-main end -->
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div v-if="isadrond">
|
<div v-if="isadrond">
|
||||||
<div class="rc-mubu" v-if="isshow" @click="usershow()">
|
<div class="rc-mubu" v-if="isshow" @click="usershow()"></div>
|
||||||
</div>
|
|
||||||
<div class="rc-bottom" v-if="isshow">
|
<div class="rc-bottom" v-if="isshow">
|
||||||
<div class="rc-bottoma" >
|
<div class="rc-bottoma" >
|
||||||
<div class="rc-productcat">
|
<div class="rc-productcat ts-scrollable">
|
||||||
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
|
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
|
||||||
<img :src="item.catimage" alt="" />
|
<img :src="item.catimage" alt="" />
|
||||||
<span>{{ item.title }}</span>
|
<span>{{ item.title }}</span>
|
||||||
@ -96,7 +98,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="rc-prefecture">
|
<div class="rc-prefecture">
|
||||||
<h2>专区:</h2>
|
<h2>专区:</h2>
|
||||||
<ol>
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</li>
|
</li>
|
||||||
@ -105,7 +107,7 @@
|
|||||||
|
|
||||||
<div class="rc-age">
|
<div class="rc-age">
|
||||||
<h2>年龄:</h2>
|
<h2>年龄:</h2>
|
||||||
<ol>
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</li>
|
</li>
|
||||||
@ -113,7 +115,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="rc-age">
|
<div class="rc-age">
|
||||||
<h2>功能:</h2>
|
<h2>功能:</h2>
|
||||||
<ol>
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
|
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</li>
|
</li>
|
||||||
@ -122,7 +124,7 @@
|
|||||||
|
|
||||||
<div class="rc-age">
|
<div class="rc-age">
|
||||||
<h2>品种:</h2>
|
<h2>品种:</h2>
|
||||||
<ol>
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
|
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</li>
|
</li>
|
||||||
@ -147,7 +149,7 @@
|
|||||||
|
|
||||||
<div class="rc-bottom">
|
<div class="rc-bottom">
|
||||||
<div class="rc-bottoma" >
|
<div class="rc-bottoma" >
|
||||||
<div class="rc-productcat">
|
<div class="rc-productcat ts-scrollable">
|
||||||
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
|
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
|
||||||
<img :src="item.name" alt="" />
|
<img :src="item.name" alt="" />
|
||||||
<span>{{ item.title }}</span>
|
<span>{{ item.title }}</span>
|
||||||
@ -197,7 +199,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -530,690 +531,6 @@ this.dialogInfo1=false;
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped >
|
<style lang="less" scoped >
|
||||||
.rc-top{
|
@import url("../../assets/css/global.less");
|
||||||
position: relative;
|
@import url("../../assets/css/product-list.less");
|
||||||
}
|
|
||||||
|
|
||||||
/deep/ .el-drawer{
|
|
||||||
height: 60%;
|
|
||||||
}
|
|
||||||
ul li ol li em strong i {
|
|
||||||
list-style: none;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
}
|
|
||||||
.rc-main {
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-top:40px;
|
|
||||||
|
|
||||||
.usersearch {
|
|
||||||
width: 93%;
|
|
||||||
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) {
|
|
||||||
.rc-top{
|
|
||||||
position: relative;
|
|
||||||
margin-top: 74px;
|
|
||||||
}
|
|
||||||
.usercontentshow{
|
|
||||||
position: relative;
|
|
||||||
z-index: 997;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-cat{
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
.active{
|
|
||||||
border: 2px solid #E2001A;
|
|
||||||
color: #E2001A;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
}
|
|
||||||
.unactive{
|
|
||||||
border: 2px solid #d7d7d7;
|
|
||||||
color:#999999;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
}
|
|
||||||
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: 16px;
|
|
||||||
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;
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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%;
|
|
||||||
}
|
|
||||||
li{
|
|
||||||
width: 40%;
|
|
||||||
height: 26px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border: 1px solid #D7D7D7;
|
|
||||||
line-height: 26px;
|
|
||||||
float: left;
|
|
||||||
border-radius: 100px;
|
|
||||||
margin-left: 9px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.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%;
|
|
||||||
}
|
|
||||||
li{
|
|
||||||
width: 40%;
|
|
||||||
height: 26px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border: 1px solid #D7D7D7;
|
|
||||||
line-height: 26px;
|
|
||||||
float: left;
|
|
||||||
border-radius: 100px;
|
|
||||||
margin-left: 9px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-contair{
|
|
||||||
margin-top: 24px;
|
|
||||||
.rc-rccontair{
|
|
||||||
height:160px;display:flex;align-items: center
|
|
||||||
}
|
|
||||||
ul{
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
li{
|
|
||||||
float: left;
|
|
||||||
width: 43%;
|
|
||||||
margin-top: 16px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border: 1px solid #D7D7D7;
|
|
||||||
margin-left: 15px;
|
|
||||||
display: inline-flex;
|
|
||||||
border-radius: 3px;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
img{
|
|
||||||
width: 85px;
|
|
||||||
display: flex;
|
|
||||||
margin: 0 auto;
|
|
||||||
height: 114px
|
|
||||||
;
|
|
||||||
}
|
|
||||||
i{
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 18px;
|
|
||||||
margin-top: 8px;
|
|
||||||
color: #666666;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-click{
|
|
||||||
max-height: 1.9rem;
|
|
||||||
min-height: 1.9rem;
|
|
||||||
}
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
strong{
|
|
||||||
width: 130px;
|
|
||||||
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) and (max-width: 1920px) {
|
|
||||||
/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-bottom{
|
|
||||||
.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;
|
|
||||||
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: 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-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;
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@ -1,72 +0,0 @@
|
|||||||
<template>
|
|
||||||
<van-address-edit
|
|
||||||
:area-list="areaList"
|
|
||||||
show-postal
|
|
||||||
show-delete
|
|
||||||
show-set-default
|
|
||||||
show-search-result
|
|
||||||
:search-result="searchResult"
|
|
||||||
:area-columns-placeholder="['请选择', '请选择', '请选择']"
|
|
||||||
@save="onSave"
|
|
||||||
@delete="onDelete"
|
|
||||||
@change-detail="onChangeDetail"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { editaddress } from "../../ajax/getData";
|
|
||||||
import { Toast } from 'vant';
|
|
||||||
import { areaList } from '@vant/area-data';
|
|
||||||
export default {
|
|
||||||
data(){
|
|
||||||
return{
|
|
||||||
areaList,
|
|
||||||
searchResult: [],
|
|
||||||
userid:null,
|
|
||||||
addressdetail:'',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
async onSave(content) {
|
|
||||||
// Toast('save');
|
|
||||||
console.log(content);
|
|
||||||
let recipient=content.name;
|
|
||||||
let tel=content.tel;
|
|
||||||
let provinceId=Number(content.areaCode.substring(0,2)+'0000')//省份id
|
|
||||||
let cityId=Number(content.areaCode.substring(0,4)+'00') //城市id
|
|
||||||
let districtId=Number(content.areaCode);//区域编码
|
|
||||||
console.log(provinceId,cityId,districtId);
|
|
||||||
console.log(content.areaCode.substring(0,2)+'0000');//城市编码
|
|
||||||
console.log(content.areaCode.substring(0,4)+'00'); //市区id
|
|
||||||
console.log(content.areaCode) //区域编码
|
|
||||||
//id 详细地址 /收货人姓名 电话号码 省份id/城市id/区域编码
|
|
||||||
let data = await editaddress(this.userid,this.addressdetail,recipient,tel,provinceId,cityId,districtId);
|
|
||||||
console.log(data);
|
|
||||||
},
|
|
||||||
onDelete() {
|
|
||||||
Toast('delete');
|
|
||||||
},
|
|
||||||
onChangeDetail(val){
|
|
||||||
this.addressdetail=val;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
let user= JSON.parse(localStorage.getItem("userInfo"));
|
|
||||||
this.userid=user.data.id;
|
|
||||||
|
|
||||||
},
|
|
||||||
components:{
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,99 +0,0 @@
|
|||||||
<template>
|
|
||||||
<van-address-edit
|
|
||||||
:area-list="areaList"
|
|
||||||
show-postal
|
|
||||||
show-set-default
|
|
||||||
show-search-result
|
|
||||||
:search-result="searchResult"
|
|
||||||
:address-info="AddressInfo"
|
|
||||||
:area-columns-placeholder="['请选择', '请选择', '请选择']"
|
|
||||||
@save="onSave"
|
|
||||||
@change-detail="onChangeDetail"
|
|
||||||
>
|
|
||||||
<!-- <div class="main">
|
|
||||||
<span>我的</span>
|
|
||||||
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
</van-address-edit>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Toast } from 'vant';
|
|
||||||
import { areaList } from '@vant/area-data';
|
|
||||||
import { editupdate } from "../../ajax/getData";
|
|
||||||
export default {
|
|
||||||
data(){
|
|
||||||
return{
|
|
||||||
areaList,
|
|
||||||
searchResult: [],
|
|
||||||
AddressInfo:{//收货人信息初始值
|
|
||||||
name:'',//姓名
|
|
||||||
tel:'',//电话
|
|
||||||
province:'',//省份
|
|
||||||
city:'',//城市
|
|
||||||
country:'',//区县
|
|
||||||
address:'',
|
|
||||||
areaCode:'',//地址code：ID
|
|
||||||
addressDetail:'',//详细地址
|
|
||||||
isDefault:false,//是否选择默认
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
|
|
||||||
valf(){
|
|
||||||
setTimeout(()=>{
|
|
||||||
let s=this.$route.query.id;
|
|
||||||
console.log(s);
|
|
||||||
this.AddressInfo.name= s.recipient,
|
|
||||||
this.AddressInfo.tel=s.recipientPhone,
|
|
||||||
this.AddressInfo.province=s.name
|
|
||||||
this.AddressInfo.city=s.name
|
|
||||||
this.AddressInfo.addressDetail=s.detailAddress
|
|
||||||
this.AddressInfo.isDefault=s.isDefault,
|
|
||||||
this.AddressInfo.country='江西省'
|
|
||||||
this.AddressInfo.address='江西省'
|
|
||||||
|
|
||||||
},100)
|
|
||||||
},
|
|
||||||
async onSave(content) {
|
|
||||||
let data = await editupdate(this.tel);
|
|
||||||
console.log(data);
|
|
||||||
console.log(content);
|
|
||||||
// Toast('save');
|
|
||||||
console.log(content.areaCode.substring(0,2)+'0000');//城市编码
|
|
||||||
console.log(content.areaCode.substring(0,4)+'00'); //市区id
|
|
||||||
console.log(content.areaCode) //区域编码
|
|
||||||
|
|
||||||
},
|
|
||||||
onDelete() {
|
|
||||||
Toast('delete');
|
|
||||||
},
|
|
||||||
onChangeDetail(val){
|
|
||||||
|
|
||||||
console.log(this.searchResult);
|
|
||||||
console.log(val);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
this.valf();
|
|
||||||
this.searchResult = [
|
|
||||||
{
|
|
||||||
name: '黄龙万科中心',
|
|
||||||
address: '杭州市西湖区',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
},
|
|
||||||
components:{
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,293 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<Myheader></Myheader>
|
|
||||||
<div class="usermain">
|
|
||||||
<div class="rc-main" v-for="(item, index) in list" :key="index">
|
|
||||||
<div class="rc-center">
|
|
||||||
<div class="rc-header">
|
|
||||||
<em>
|
|
||||||
{{ item.recipient }}
|
|
||||||
</em>
|
|
||||||
<span>
|
|
||||||
{{ item.recipientPhone }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="rc-address">
|
|
||||||
<span>
|
|
||||||
{{ item.detailAddress }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="rc-footer">
|
|
||||||
<div class="rc-foot">
|
|
||||||
<span>设置为默认收货地址</span>
|
|
||||||
|
|
||||||
<!-- <van-switch v-model="checked" /> -->
|
|
||||||
</div>
|
|
||||||
<div class="rc-right">
|
|
||||||
<span @click="onEdit(item, index)">编辑</span>
|
|
||||||
<span @click="userdelete(item, index)">删除</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="rc-button">
|
|
||||||
<div class="rc-footbutton" @click="onAdd()">
|
|
||||||
<span>新增收货地址</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { areaList } from "@vant/area-data";
|
|
||||||
import { selectaddress } from "../../ajax/getData";
|
|
||||||
import { editdelete } from "../../ajax/getData";
|
|
||||||
import Myheader from "~/components/header.vue";
|
|
||||||
import { Toast } from "vant";
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chosenAddressId: "1",
|
|
||||||
checked: true,
|
|
||||||
userid: null,
|
|
||||||
usermessage:null,
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: "张三",
|
|
||||||
tel: "13000000000",
|
|
||||||
address: "浙江省杭州市西湖区文三路 138 号",
|
|
||||||
isDefault: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: "李四",
|
|
||||||
tel: "1310000000",
|
|
||||||
address: "浙江省杭州市拱墅区莫干山路 50 号",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: "李四",
|
|
||||||
tel: "1310000000",
|
|
||||||
address: "浙江省杭州市拱墅区莫干山路 50 号",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
areaList,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onAdd() {
|
|
||||||
Toast("新增地址");
|
|
||||||
|
|
||||||
this.$router.push({ path: "/useraddress/addaddress" });
|
|
||||||
},
|
|
||||||
onEdit(item, index) {
|
|
||||||
let userid = item.id;
|
|
||||||
console.log(item);
|
|
||||||
this.$router.push({
|
|
||||||
path: "/useraddress/editaddress",
|
|
||||||
query: {
|
|
||||||
id: item,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
//删除地址
|
|
||||||
async userdelete(item) {
|
|
||||||
console.log(item.memberId);
|
|
||||||
let data = await editdelete(this.userid, item.id);
|
|
||||||
this.editaddress(this.usermessage);
|
|
||||||
console.log(data);
|
|
||||||
},
|
|
||||||
|
|
||||||
//查询人的所有地址
|
|
||||||
async editaddress(user) {
|
|
||||||
let data = await selectaddress(user.data.id);
|
|
||||||
this.list=data.data;
|
|
||||||
console.log(this.list);
|
|
||||||
console.log(data);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Myheader,
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
//地址的查询
|
|
||||||
this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
|
|
||||||
this.editaddress(this.usermessage);
|
|
||||||
this.userid = this.usermessage.data.id;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped >
|
|
||||||
.rc-main {
|
|
||||||
width: 93%;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
//手机端
|
|
||||||
@media screen and(min-width: 320px) and(max-width:768px) {
|
|
||||||
.rc-button {
|
|
||||||
height: 80px;
|
|
||||||
background: #ffffff;
|
|
||||||
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
opacity: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.rc-footbutton {
|
|
||||||
width: 164px;
|
|
||||||
height: 48px;
|
|
||||||
border: 2px solid #e2001a;
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 30px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background: #e2001a;
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
|
||||||
font-size: 16px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: #333333;
|
|
||||||
em {
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-address {
|
|
||||||
margin-top: 8px;
|
|
||||||
text-overflow: -o-ellipsis-lastline;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.rc-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
margin-top: 8px;
|
|
||||||
.rc-right {
|
|
||||||
span {
|
|
||||||
border-bottom: 1px solid #666666;
|
|
||||||
}
|
|
||||||
span:first-child {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//pc端
|
|
||||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
|
||||||
.usermain{
|
|
||||||
|
|
||||||
width: 90%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.rc-main{
|
|
||||||
width: 45%;
|
|
||||||
height: 164px;
|
|
||||||
margin-top: 60px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border: 1px solid #D7D7D7;
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 3px;
|
|
||||||
margin-left: 40px;
|
|
||||||
float: left;
|
|
||||||
.rc-center{
|
|
||||||
margin-top: 24px;
|
|
||||||
margin-left: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-button {
|
|
||||||
height: 80px;
|
|
||||||
background: #ffffff;
|
|
||||||
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
opacity: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
.rc-footbutton {
|
|
||||||
width: 164px;
|
|
||||||
height: 48px;
|
|
||||||
border: 2px solid #e2001a;
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 30px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background: #e2001a;
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
|
||||||
font-size: 16px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: #333333;
|
|
||||||
em {
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-address {
|
|
||||||
margin-top: 8px;
|
|
||||||
text-overflow: -o-ellipsis-lastline;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.rc-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
margin-top: 8px;
|
|
||||||
.rc-right {
|
|
||||||
span {
|
|
||||||
border-bottom: 1px solid #666666;
|
|
||||||
}
|
|
||||||
span:first-child {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,282 +0,0 @@
|
|||||||
// <!-- -->
|
|
||||||
<template>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<!-- <Myheader/> -->
|
|
||||||
|
|
||||||
<p class="header">手机验证</p>
|
|
||||||
<div class="content">
|
|
||||||
<van-field
|
|
||||||
v-model="tel"
|
|
||||||
placeholder="请输入手机号"
|
|
||||||
:error-message="usertel"
|
|
||||||
clearable
|
|
||||||
|
|
||||||
/>
|
|
||||||
<van-field
|
|
||||||
v-model="sms"
|
|
||||||
center
|
|
||||||
clearable
|
|
||||||
placeholder="请输入验证码"
|
|
||||||
:error-message="test"
|
|
||||||
>
|
|
||||||
<van-button :disabled="flag" slot="button" size="small" @click="sendCode" class="rc-use">{{ buttonmsg }}</van-button>
|
|
||||||
|
|
||||||
</van-field>
|
|
||||||
|
|
||||||
<p class="header">新密码</p>
|
|
||||||
<van-field
|
|
||||||
v-model="password"
|
|
||||||
type="password"
|
|
||||||
placeholder="请输入新密码"
|
|
||||||
:error-message="pass"
|
|
||||||
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-field
|
|
||||||
v-model="password"
|
|
||||||
type="password"
|
|
||||||
placeholder="请再次输入新密码"
|
|
||||||
:error-message="pass"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
<p class="header">密码需要满足以下条件</p>
|
|
||||||
<!-- <input type="radio" id="male" value="Male" v-model="gender"> 至少8个以上字符
|
|
||||||
<input type="radio" id="female" value="Female" v-model="gender"> 至少含有字母和数字，不能有空格 -->
|
|
||||||
<div class="rc-user">
|
|
||||||
<van-button type="primary" :loading="loading" loading-text="登录..." size="large" :disabled="zhud" class="userbutton" style="border: 2px solid #E1001A;color:#E1001A;background:none;width:155px;height:48px" >取消</van-button>
|
|
||||||
|
|
||||||
<van-button type="primary" :loading="loading" loading-text="登录..." size="large" :disabled="zhud" @click="register()" class="userbutton" style="width: 155px;
|
|
||||||
height: 48px;
|
|
||||||
background: #E2001A;
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 30px;" >确定</van-button>
|
|
||||||
<!-- <van-divider @click="toLogin">注册账户</van-divider> -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {useredit} from '../../ajax/getData'
|
|
||||||
import Myheader from '~/components/header.vue' //引用头部公共组件
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
phone:'',
|
|
||||||
layerMSg:'手机格式不对',
|
|
||||||
tel:'',
|
|
||||||
password:'',
|
|
||||||
sms:'',
|
|
||||||
buttonmsg:'获取验证码',
|
|
||||||
flag:false,
|
|
||||||
adminCode:'',
|
|
||||||
zhud:false,
|
|
||||||
loading:false,
|
|
||||||
usertitle:true,
|
|
||||||
gender: ''
|
|
||||||
|
|
||||||
};
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
// Myheader,
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
usertel () {
|
|
||||||
if (this.tel === ""){
|
|
||||||
return ''
|
|
||||||
}else if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel)){
|
|
||||||
return '手机号格式错误'
|
|
||||||
}else {
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
pass () {
|
|
||||||
if (this.password === ""){
|
|
||||||
return ''
|
|
||||||
}else if(this.password.length<6){
|
|
||||||
return '密码不可小于6位'
|
|
||||||
}else {
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
test () {
|
|
||||||
if (this.sms === ""){
|
|
||||||
return ''
|
|
||||||
}else if(this.sms.length !== 5){
|
|
||||||
return '验证码格式错误'
|
|
||||||
}else {
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
components: {
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
//注册账户
|
|
||||||
sendCode () {
|
|
||||||
let time = 4
|
|
||||||
let timer
|
|
||||||
timer = setInterval(()=>{
|
|
||||||
time --
|
|
||||||
if(time === 0){
|
|
||||||
clearInterval(timer)
|
|
||||||
this.flag=false
|
|
||||||
this.buttonmsg = '点击发送验证码'
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.flag = true
|
|
||||||
this.buttonmsg = time + '秒后重新发送'
|
|
||||||
|
|
||||||
},1000)
|
|
||||||
this.getCode()
|
|
||||||
},
|
|
||||||
getCode () {
|
|
||||||
if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel) || this.tel===""){
|
|
||||||
this.$toast.show('Keeping it simple')('手机号码输入有误')
|
|
||||||
}else{
|
|
||||||
axios.get('https://www.daxunxun.com/users/sendCode?tel='+this.tel).then(res=>{
|
|
||||||
if(res.data === 1){
|
|
||||||
this.$toast.show('Keeping it simple')('用户名已注册，请更改')
|
|
||||||
}else if(res.data === 0){
|
|
||||||
this.$toast.show('Keeping it simple')('获取验证码失败')
|
|
||||||
}else{
|
|
||||||
this.adminCode = res.data.code
|
|
||||||
console.log(this.adminCode)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async register () {
|
|
||||||
|
|
||||||
if (this.tel === '' || this.usertel === '手机号码格式错误') {
|
|
||||||
|
|
||||||
this.$toast.show('手机号码输入有误')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (this.password === '' || this.pass === '密码格式错误，最少为6位') {
|
|
||||||
this.$toast.show('密码输入有误')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (this.sms === '' || this.sms !== this.adminCode) {
|
|
||||||
this.$toast.show('验证码输入有误')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let data=await userchange(this.tel);
|
|
||||||
console.log(data);
|
|
||||||
},
|
|
||||||
|
|
||||||
// reallR () {
|
|
||||||
// this.zhud=true
|
|
||||||
// this.loading=true
|
|
||||||
// axios.post('https://www.daxunxun.com/users/register', {
|
|
||||||
// username: this.tel,
|
|
||||||
// password: this.password
|
|
||||||
// }).then(res=>{
|
|
||||||
// this.zhud=false
|
|
||||||
// this.loading=false
|
|
||||||
// if (res.data === 2) {
|
|
||||||
// Toast('用户名已注册，请直接登录')
|
|
||||||
// } else if (res.data === 0) {
|
|
||||||
// Toast('注册失败')
|
|
||||||
// } else {
|
|
||||||
// Toast('注册成功')
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
i{
|
|
||||||
list-style: none;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
.rc-titel{
|
|
||||||
list-style: none;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
rc-header{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.rc-use{
|
|
||||||
width: 94px;
|
|
||||||
height: 30px;
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 30px;
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
border: 2px solid #E1001A;
|
|
||||||
color: #E1001A;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.rc-user{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.userbutton{
|
|
||||||
width: 335px;
|
|
||||||
height: 48px;
|
|
||||||
background: #E2001A;
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 30px;
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
van-button{
|
|
||||||
width: 335px;
|
|
||||||
height: 48px;
|
|
||||||
background: #E2001A;
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 30px;
|
|
||||||
}
|
|
||||||
.header{
|
|
||||||
font-size: 22px;
|
|
||||||
color: #333333;
|
|
||||||
text-align: left;
|
|
||||||
padding: 10px 16px;
|
|
||||||
}
|
|
||||||
input{
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
button{
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
list-style: none;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
.rc-center{
|
|
||||||
font-size: 30px;
|
|
||||||
color: #333333;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.rc-center input{
|
|
||||||
color: #999999;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.userlogin{
|
|
||||||
width: 92%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -33,7 +33,7 @@
|
|||||||
<div class="usercontentshow" ref="usercontent">
|
<div class="usercontentshow" ref="usercontent">
|
||||||
<div class="rc-product">
|
<div class="rc-product">
|
||||||
<h2>我想搜</h2>
|
<h2>我想搜</h2>
|
||||||
<div class="rc-productcat">
|
<div class="rc-productcat ts-scrollable">
|
||||||
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" >
|
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" >
|
||||||
<img :src="item.catimage" alt="" />
|
<img :src="item.catimage" alt="" />
|
||||||
<span>{{ item.title }}</span>
|
<span>{{ item.title }}</span>
|
||||||
@ -45,9 +45,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rc-prefecture">
|
<div class="rc-age">
|
||||||
<h2>专区:</h2>
|
<h2>专区:</h2>
|
||||||
<ol>
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
@ -56,7 +56,7 @@
|
|||||||
|
|
||||||
<div class="rc-age">
|
<div class="rc-age">
|
||||||
<h2>年龄:</h2>
|
<h2>年龄:</h2>
|
||||||
<ol>
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
@ -93,18 +93,18 @@
|
|||||||
<div v-if="isadrond">
|
<div v-if="isadrond">
|
||||||
<div class="rc-mubu" v-if="isshow" @click="usershow()">
|
<div class="rc-mubu" v-if="isshow" @click="usershow()">
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-bottom" v-if="isshow">
|
<div class="rc-bottom rc-main" v-if="isshow">
|
||||||
<div class="rc-bottoma" >
|
<div class="rc-bottoma" >
|
||||||
<div class="rc-productcat">
|
<div class="rc-productcat ts-scrollable">
|
||||||
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
|
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
|
||||||
<img :src="item.catimage" alt="" />
|
<img :src="item.catimage" alt="" />
|
||||||
<span>{{ item.title }}</span>
|
<span>{{ item.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-prefecture">
|
<div class="rc-age">
|
||||||
<h2>专区:</h2>
|
<h2>专区:</h2>
|
||||||
<ol>
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
@ -113,7 +113,7 @@
|
|||||||
|
|
||||||
<div class="rc-age">
|
<div class="rc-age">
|
||||||
<h2>年龄:</h2>
|
<h2>年龄:</h2>
|
||||||
<ol>
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
@ -121,7 +121,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="rc-age">
|
<div class="rc-age">
|
||||||
<h2>功能:</h2>
|
<h2>功能:</h2>
|
||||||
<ol>
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
|
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
@ -130,7 +130,7 @@
|
|||||||
|
|
||||||
<div class="rc-age">
|
<div class="rc-age">
|
||||||
<h2>品种:</h2>
|
<h2>品种:</h2>
|
||||||
<ol>
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
|
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
@ -162,7 +162,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-prefecture">
|
<div class="rc-age">
|
||||||
<h2>专区:</h2>
|
<h2>专区:</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
||||||
@ -693,5 +693,6 @@ this.dialogInfo1=false;
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped >
|
<style lang="less" scoped >
|
||||||
|
@import url("../../assets/css/global.less");
|
||||||
@import url("../../assets/css/search.less");
|
@import url("../../assets/css/search.less");
|
||||||
</style>
|
</style>
|
||||||
@ -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).
|
|
||||||
Loading…
Reference in New Issue
Block a user