xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-11-16 23:53:48 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Layout fixed

Browse Source
This commit is contained in:
Vion
2022-01-08 20:29:31 +08:00
parent 82e02dbc0b
commit 15c71d6348
24 changed files with 2653 additions and 4390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
rc-busness/assets/css/global.less Normal file
View 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 */

1105
rc-busness/assets/css/index.less
View File

File diff suppressed because it is too large Load Diff

189
rc-busness/assets/css/magnifier.less Normal file
View 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
View 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
View 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;
}
}
}
}
}
}

146
rc-busness/assets/css/search.less
View File

@@ -11,60 +11,41 @@
} }
.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; display: flex;
bottom: 0; align-items: center;
display: flex; justify-content: space-evenly;
align-items: center; width: 100%;
justify-content: center; padding: 0 0.5rem;
width: 100%; box-sizing: border-box;
span{ span{
width: 1.55rem; width: 1.55rem;
height: 0.48rem; height: 0.48rem;
border: 2px solid #E1001A; border: 2px solid #E1001A;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
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{
@@ -416,18 +361,6 @@ margin-top: 20px;
.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;
align-items: center; align-items: center;
@@ -589,38 +522,7 @@ margin-top: 20px;
margin-left: 40px; margin-left: 40px;
color: #999999; 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{ .rc-contair{
margin-top: 40px; margin-top: 40px;

0
rc-busness/assets/组 4626.png → rc-busness/assets/star-cat.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

11
rc-busness/components/NuxtLogo.vue
View File

@@ -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>

46
rc-busness/components/Tutorial.vue
View File

@@ -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>

93
rc-busness/components/header.vue
View File

@@ -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>

255
rc-busness/components/magnifier.vue
View File

@@ -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,8 +18,7 @@
</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>
</div> </div>
@@ -62,12 +60,18 @@ export default {
return { return {
tableLabelTest1:this.tableLabelTest, tableLabelTest1:this.tableLabelTest,
pictureList: [ pictureList: [
{url: require("../assets/four.png")}, {url: require("../assets/four.png")},
{url: require("../assets/cat.png")}, {url: require("../assets/cat.png")},
{url: require("../assets/one.png")}, {url: require("../assets/one.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/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: '', // 中图图片地址
@@ -89,25 +93,25 @@ export default {
this.pictureList=newValue; this.pictureList=newValue;
this.menu=newValue; this.menu=newValue;
console.log(this.newValue); console.log(this.newValue);
} }
}, },
created() { created() {
let user= JSON.parse(localStorage.getItem("message"));
console.log(user);
if(user!==null){
this.pictureList=user;
}
if (user && user.length) {
this.pictureList = user
}
this.middleImg = this.pictureList[0].attachmentPath;
console.log(this.middleImg);
// 计算缩略图的宽度,默认是显示4张图片,两边箭头的宽度和为50
// this.itemWidth = (this.middleImgWidth-30) / 2
}, },
mounted() { mounted() {
let user= JSON.parse(localStorage.getItem("message"));
console.log(user);
if(user!==null){
this.pictureList=user;
}
if (user && user.length) {
this.pictureList = user
}
this.middleImg = this.pictureList[0].attachmentPath;
console.log(this.middleImg);
// 计算缩略图的宽度,默认是显示4张图片,两边箭头的宽度和为50
// this.itemWidth = (this.middleImgWidth-30) / 2
this.ifadroind(); this.ifadroind();
@@ -258,12 +262,12 @@ 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
}, 500) }, 500)
} }
}, },
/** /**
@@ -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>

0
rc-busness/components/usercation.vue
View File

25
rc-busness/components/userlogin.vue
View File

@@ -1,25 +0,0 @@
<!-- -->
<template>
<div>
</div>
</template>
<script>
export default {
data () {
return {
};
},
components: {},
methods: {}
}
</script>
<style>
</style>

218
rc-busness/pages/index.vue
View File

@@ -2,28 +2,29 @@
<div> <div>
<Myheader></Myheader> <!-- Suppose in header end -->
<div class="rc-login"> <Myheader></Myheader>
<div class="userunlogin" v-show="userunlogin" @click="userlogin"> <div class="rc-login">
<div class="user-left"> <div class="userunlogin" v-show="userunlogin" @click="userlogin">
<img src="../assets/image/rc-people.png" alt=""> <div class="user-left">
<span> <img src="../assets/image/rc-people.png" alt="">
登录/注册 <span>
</span> 登录/注册
</div> </span>
<div class="user-right"> </div>
<img src="../assets/image/rc-left.png" alt=""> <div class="user-right">
</div> <img src="../assets/image/rc-left.png" alt="">
</div>
</div>
</div>
<!-- Suppose in header end -->
<van-swipe :autoplay="30000">
<van-swipe-item v-for="(banner, index) in banners" :key="index">
<img :src="banner.src" class="useraimg"/>
</van-swipe-item>
</van-swipe>
</div> <div class="online" id="fixed-catbar-seperator"></div>
</div>
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(banner, index) in banners" :key="index">
<img :src="banner.src" class="useraimg"/>
</van-swipe-item>
</van-swipe>
<div class="online" style="height:3px;width:100%;background:#DDDDDD;margin-top:0.23rem"></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">
@@ -33,26 +34,25 @@
<div class="swiper-pagination swiper-pagination-bullets"></div> <div class="swiper-pagination swiper-pagination-bullets"></div>
</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
v-for="(item, index) in discountlist"
<li :key="index"
v-for="(item, index) in discountlist" @click="selectGoods(item, index)"
:key="index" :class="activeIndex == index ? 'active' : 'unactive'"
@click="selectGoods(item, index)" >
:class="activeIndex == index ? 'active' : 'unactive'" <img :src="item.catimage" alt="">
> <span>{{ item.title }}</span>
<img :src="item.catimage" alt=""> </li>
<span>{{ item.title }}</span> </ul>
</li> </div>
</div>
</ul> </div>
</div> <div class="online"></div>
</div>
<div class="online" style="height:3px;width:100%;background:#DDDDDD;margin-top:0.36REM"></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">
@@ -68,30 +68,29 @@
</div> </div>
<div class="rc-right"> <div class="rc-right">
<img :src=item.catimage alt=""> <img :src=item.catimage alt="">
<span>{{item.title}}</span> <span>{{item.title}}</span>
<p>{{item.detail}}</p> <p>{{item.detail}}</p>
<em>{{item.price}}</em> <em>{{item.price}}</em>
<strong @click="userbuy(item,index)">立即购买</strong> <strong @click="userbuy(item,index)">立即购买</strong>
</div> </div>
</div> </div>
<div class="sw-center" > <div class="sw-center" >
<div class="rc-click" @click="selectproduce(item,index)"> <div class="rc-click" @click="selectproduce(item,index)">
<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>
<img :src=item.catimage alt=""> <img :src=item.catimage alt="">
<span>{{item.title}}</span> <span>{{item.title}}</span>
<p>{{item.detail}}</p> <p>{{item.detail}}</p>
<em>{{item.price}}</em> <em>{{item.price}}</em>
</div> </div>
<div class="sw-cen"> <div class="sw-cen">
<i @click="userbuy(item,index)">立即购买</i> <i @click="userbuy(item,index)">立即购买</i>
</div> </div>
</div> </div>
</swiper-slide> </swiper-slide>
@@ -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>
<i>了解更多</i> <a href="https://royalcanin.com.cn/tailored-nutrition/details">
<i>了解更多</i>
</a>
</div> </div>
</div> </div>
@@ -576,17 +574,16 @@
</div> --> </div> -->
<div class="rc-fixright" > <div class="rc-fixright" >
<ul > <ul >
<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>
@@ -633,7 +630,7 @@
catlist:[], catlist:[],
chufanlist:[], chufanlist:[],
doglist:[], doglist:[],
gotop: false, gotop: false,
usersetting: `${settings.rbs}`, usersetting: `${settings.rbs}`,
activeIndex: 0, activeIndex: 0,
activeInde2: 0, activeInde2: 0,
@@ -721,36 +718,41 @@ activeInde3:0,
], ],
discountlist: [ discountlist: [
{ {
title: "明星猫粮", title: "明星猫粮",
catimage: require("../assets/cat.png"), catimage: require("../assets/star-cat.png"),
}, },
{
title: "猫湿粮",
catimage: require("../assets/two.png"),
},
{ {
title: "猫干粮", title: "猫干粮",
catimage: require("../assets/four.png"), catimage: require("../assets/cat.png"),
},
{
title: "猫湿粮",
catimage: require("../assets/one.png"),
}, },
{ {
title: "明星犬粮", title: "明星犬粮",
catimage: require("../assets/two.png"), catimage: require("../assets/six.png"),
}, },
{
title: "犬湿粮",
catimage: require("../assets/three.png"),
},
{ {
title: "犬干粮", title: "犬干粮",
catimage: require("../assets/three.png"), catimage: require("../assets/one.png"),
}, },
{ {
title: "犬湿粮", title: "处方用粮",
catimage: require("../assets/six.png"), catimage: require("../assets/four.png"),
},
}
], ],
discounchufang: [ discounchufang: [
{ {
title: "消化道", title: "消化道",
catimage: require("../assets/cat.png"), catimage: require("../assets/cat.png"),
@@ -962,17 +964,22 @@ activeInde3:0,
}, },
showmesg(){ showmesg(){
console.log('-----');
this.toTop(); this.toTop();
}, },
handleScroll(e) { handleScroll(e)
console.log(e); {
let scrolltop = document.documentElement.scrollTop || document.body.scrollTop; let fixedCatbarSeperator = document.getElementById("fixed-catbar-seperator");
console.log(scrolltop); let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
scrolltop > 1200 ? (this.gotop = true) : (this.gotop = false); if((scrolltop-fixedCatbarSeperator.offsetTop)>=0)
{
scrolltop>1500?(this.searchBar=false):(this.searchBar=true); this.gotop = true
console.log(this.searchBar); this.searchBar=false
}
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>

522
rc-busness/pages/personal/discount.vue
View File

@@ -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>

321
rc-busness/pages/personal/integral.vue
View File

@@ -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>

865
rc-busness/pages/productdetails/producted.vue
View File

@@ -2,37 +2,43 @@
<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="rc-title"> <div class="online"></div>
<h2>{{ item.productName }}</h2> <div class="rc-main">
</div> <div class="rc-title">
<h2>{{ item.productName }}</h2>
<div class="productdetails"> </div>
<div class="rc-productdetail"> </div>
<i>商品价格</i> <div class="online"></div>
<span>￥{{ item.rsp }}</span> <div class="rc-main">
<i style="font-size:12px;color:#999999">￥{{item.ecPrice}}</i> <div class="productdetails">
</div> <div class="rc-productdetail">
<div class="rc-productdetai"> <i>商品价格</i>
<div> <span>￥{{ item.rsp }}</span>
<i>活动促销:</i> <i style="font-size:12px;color:#999999">￥{{item.ecPrice}}</i>
<span>全场商品限时优惠</span> </div>
</div> <div class="rc-productdetai">
<em @click="userget()">立即领取</em> <div>
</div> <i>活动促销:</i>
<div class="rc-button" v-if="!userbuy"> <span>全场商品限时优惠</span>
<span @click="usertanchu(item,0)">加入购物车</span> </div>
<span @click="usertanchu(item,1)">立即购买</span> <em @click="userget()">立即领取</em>
</div> </div>
</div> <div class="rc-button" v-if="!userbuy">
<div class="online" style="height:3px;width:100%;background:#DDDDDD;margin-top:0.33rem"></div> <span @click="usertanchu(item,0)">加入购物车</span>
<span @click="usertanchu(item,1)">立即购买</span>
</div>
</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,46 +51,41 @@
{{ item.specifications }} {{ item.specifications }}
</em> </em>
</div> </div>
<div class="rc-produnnum"> </div>
<div> <div class="online"></div>
<span>商品数量</span>： <div class="rc-main">
</div> <div class="rc-produnnum">
<img src="../../assets/image/userjian.png" alt="" @click="sub()" /> <div><span>商品数量</span>：</div>
<strong>{{sales_num}}</strong> <img src="../../assets/image/userjian.png" alt="" @click="sub()" />
<img <strong>{{sales_num}}</strong>
src="../../assets/image/userjia.png" alt="" @click="plus()" <img src="../../assets/image/userjia.png" alt="" @click="plus()" class="rc-message" />
class="rc-message" </div>
</div>
<div class="rc-main">
/> <div class="certification">
</div> <ul>
<li>
<span
>服务说明：<i>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i></span
>
</li>
<li>
<span
>商品运费：<i>全场包邮(港澳除外)</i></span
>
</li>
<div class="certification"> <li>
<ul> <span
<li> >商品编号：<i>{{ item.brandCode }}</i></span
<span >
>服务说明：<i>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i></span </li>
> </ul>
</li>
<li> </div>
<span </div>
>商品运费：<i>全场包邮(港澳除外)</i></span
>
</li>
<li>
<span
>商品编号：<i>{{ item.brandCode }}</i></span
>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
@@ -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>

861
rc-busness/pages/productdetails/productlist.vue
View File

@@ -2,92 +2,94 @@
<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="rc-product">
<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'" >
<img :src="item.catimage" alt="" />
<span>{{ item.title }}</span>
</div>
</div>
</div>
<div class="usercontentshow" ref="usercontent"> <div class="rc-age">
<div class="rc-product"> <h2>专区:</h2>
<div class="rc-productcat"> <ol class="ts-scrollable">
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" > <li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
<img :src="item.catimage" alt="" /> {{ item.title }}
<span>{{ item.title }}</span> </li>
</div> </ol>
</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 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">
<h2>功能:</h2>
<ol class="ts-scrollable">
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
{{ item.title }}
</li>
</ol>
</div>
<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 catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
{{ item.title }} {{ item.title }}
</li> </li>
</ol> </ol>
</div> </div>
<div class="rc-age"> </div>
<h2>功能:</h2> </div>
<ol> </div>
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'"> <!-- rc-main end -->
{{ item.title }} <div class="online"></div>
</li> <!-- rc-main start -->
</ol> <div class="rc-main">
</div> <div class="usersearch">
<div class="rc-contair">
<div class="rc-age"> <ul>
<h2>品种:</h2> <li v-for="(item,index) in rccontair" :key="index">
<ol> <div class="rc-click" @click="selectproduce(item)">
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'"> <div class="rc-rccontair">
{{ item.title }} <img :src=item.picture alt="">
</li> </div>
</ol> </div>
</div> <div class="rc-column">
<div class="rc-click" @click="selectproduce(item)">
<span>{{item.categoryName}}</span>
<div class="rc-contair"> <i>0.001{{item.price}}</i>
<ul> </div>
<li v-for="(item,index) in rccontair" :key="index"> <strong @click="userbuy()">立即购买</strong>
<div class="rc-click" @click="selectproduce(item)"> </div>
<div class="rc-rccontair"> </li>
<img :src=item.picture alt=""> </ul>
</div> </div>
<span>{{item.categoryName}}</span> <div class="usershow" v-if="openshow">
<i>{{item.price}}</i> <div class="rc-show"></div>
</div> </div>
<strong @click="userbuy()">立即购买</strong> </div>
</li> </div>
</ul> <!-- rc-main end -->
</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="rc-show">
</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>

72
rc-busness/pages/useraddress/addaddress.vue
View File

@@ -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>

99
rc-busness/pages/useraddress/editaddress.vue
View File

@@ -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>

293
rc-busness/pages/useraddress/openaddress.vue
View File

@@ -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>

282
rc-busness/pages/userlogin/userpassword.vue
View File

@@ -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>

25
rc-busness/pages/usersearch/search.vue
View File

@@ -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>

10
rc-busness/store/README.md
View File

@@ -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).