mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
Layout bug fix
This commit is contained in:
Vion
parent
f201c66fc7
commit
6f18acd491
@ -142,6 +142,7 @@ img, picture {
|
|||||||
}
|
}
|
||||||
li{
|
li{
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.active{
|
.active{
|
||||||
@ -267,7 +268,7 @@ img, picture {
|
|||||||
width:100%;
|
width:100%;
|
||||||
}
|
}
|
||||||
.rc-top{
|
.rc-top{
|
||||||
margin-top: 74px;
|
margin-top: 90px;
|
||||||
}
|
}
|
||||||
.rc-list__header {
|
.rc-list__header {
|
||||||
background: none;
|
background: none;
|
||||||
@ -348,7 +349,7 @@ img, picture {
|
|||||||
font-size:16px;
|
font-size:16px;
|
||||||
}
|
}
|
||||||
.rc-top{
|
.rc-top{
|
||||||
margin-top: 124px;
|
margin-top: 150px;
|
||||||
}
|
}
|
||||||
.ts-product-list{
|
.ts-product-list{
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|||||||
@ -273,6 +273,7 @@
|
|||||||
}
|
}
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 0.45rem;
|
margin-top: 0.45rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.active {
|
.active {
|
||||||
@ -286,22 +287,26 @@
|
|||||||
color: #444444;
|
color: #444444;
|
||||||
border: 1px solid #D7D7D7;
|
border: 1px solid #D7D7D7;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media screen and (min-width: 769px)
|
@media screen and (min-width: 769px)
|
||||||
{
|
{
|
||||||
|
.rc-selection{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.sw-center{
|
.sw-center{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.useraimg{
|
.useraimg{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 29.31rem;
|
// height: 29.31rem;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
.van-swipe-item {
|
.van-swipe-item {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
height: 29.31rem;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
line-height: 9.375rem;
|
line-height: 9.375rem;
|
||||||
@ -314,13 +319,19 @@ object-fit: cover;
|
|||||||
margin-top: 2.875rem;
|
margin-top: 2.875rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
//margin-top: 9.375rem;
|
// margin-top: 9.375rem;
|
||||||
#xxxFullScreen {
|
#xxxFullScreen {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
margin-top: 100px;
|
// margin-top: 100px;
|
||||||
#swiper1 {
|
#swiper1 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
margin-top: 2.31rem;
|
||||||
|
|
||||||
|
h2{
|
||||||
|
padding-bottom: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-container2 {
|
.swiper-container2 {
|
||||||
@ -463,8 +474,14 @@ img{
|
|||||||
|
|
||||||
}
|
}
|
||||||
.rc-max-width--xl {
|
.rc-max-width--xl {
|
||||||
|
|
||||||
.rc-ma
|
.rc-ma
|
||||||
{
|
{
|
||||||
|
.rc-margin-y--xl{
|
||||||
|
margin-bottom: 1.88rem;
|
||||||
|
}
|
||||||
|
// padding:60px 0;
|
||||||
|
|
||||||
.ul-zhuan{
|
.ul-zhuan{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -491,21 +508,71 @@ img{
|
|||||||
margin-left:1.25rem;
|
margin-left:1.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
margin-bottom: 0;
|
||||||
|
h2{
|
||||||
|
margin-top:2.31rem;
|
||||||
|
padding-bottom: 0.62rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.usermain{
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
padding-bottom: 2.82rem;
|
||||||
|
.ul-dog{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
span{
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
width: 9.5rem;
|
||||||
|
height: 9.5rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
li{
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 9.875rem;
|
||||||
|
text-align: center;
|
||||||
|
height: 9.875rem;
|
||||||
|
background: #F6F6F6;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-left:3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.rc-main{
|
.rc-main{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 2.5rem;
|
margin-top: 2.5rem;
|
||||||
|
|
||||||
|
.rc-text--center{
|
||||||
|
margin-top: 4.8rem;
|
||||||
|
|
||||||
|
}
|
||||||
.van-tabs{
|
.van-tabs{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.selectionswitch{
|
.selectionswitch{
|
||||||
|
|
||||||
|
.rc-text--center{
|
||||||
|
margin-top: 4.8rem;
|
||||||
|
}
|
||||||
.van-tabs{
|
.van-tabs{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.rc-selection{
|
.rc-selection{
|
||||||
|
display: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
ol{
|
ol{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@ -139,7 +139,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
// /* 最小768px最大1920 *pc端/
|
// /* 最小768px最大1920 *pc端/
|
||||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
@media screen and (min-width: 769px) {
|
||||||
.usecheck{
|
.usecheck{
|
||||||
display: flex;
|
display: flex;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|||||||
@ -41,8 +41,7 @@ color: #333333;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.rc-main {
|
.rc-main {
|
||||||
width: 92%;
|
|
||||||
margin: 0 auto;
|
|
||||||
.rc-userbottom{
|
.rc-userbottom{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -304,8 +303,6 @@ color: #333333;
|
|||||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
||||||
|
|
||||||
.rc-main {
|
.rc-main {
|
||||||
width: 92%;
|
|
||||||
margin: 0 auto;
|
|
||||||
.rc-userbottomm{
|
.rc-userbottomm{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
351
rc-busness/assets/css/useraddress.less
Normal file
351
rc-busness/assets/css/useraddress.less
Normal file
@ -0,0 +1,351 @@
|
|||||||
|
|
||||||
|
// 手机端
|
||||||
|
@media screen and(min-width: 320px) and(max-width:768px) {
|
||||||
|
.active {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e2001a;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.unactive {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #444444;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.rc-layout-container {
|
||||||
|
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
.rc-main {
|
||||||
|
.rc-usermaina{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.rc-headera {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 64px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.rc-userheader{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-center {
|
||||||
|
width: 100%;
|
||||||
|
height: 245px;
|
||||||
|
margin-top: 8px;
|
||||||
|
.rc-usermain {
|
||||||
|
.pc-bottom{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
.rc-image {
|
||||||
|
border: 1px solid #D8D8D8;
|
||||||
|
margin-top: 17px;
|
||||||
|
;
|
||||||
|
img {
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-right {
|
||||||
|
|
||||||
|
.rc-userbottomm{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 16px;
|
||||||
|
justify-content: center;
|
||||||
|
em
|
||||||
|
{
|
||||||
|
font-style: normal;
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
color: #E1001A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-userright {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 14px;
|
||||||
|
span{
|
||||||
|
display: block;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-userbottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 8px;
|
||||||
|
span{
|
||||||
|
color: #666666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
font-style: normal;
|
||||||
|
color: #E1001A;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-bottom {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 24px;
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
width: 130px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
color: #e2001a;
|
||||||
|
height: 40px;
|
||||||
|
border: 2px solid #e2001a;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
span:last-child{
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-title {
|
||||||
|
height: 52px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #d8d8d8;
|
||||||
|
justify-content: space-between;
|
||||||
|
span{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999999;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
em{
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.rc-usertitle strong{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// /* 最小768px最大1920 *pc端/
|
||||||
|
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
||||||
|
.active {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #e2001a;
|
||||||
|
cursor: pointer;
|
||||||
|
// margin-left: 40px;
|
||||||
|
}
|
||||||
|
.unactive {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #444444;
|
||||||
|
cursor: pointer;
|
||||||
|
// margin-left: 80px;
|
||||||
|
}
|
||||||
|
.rc-layout-container {
|
||||||
|
.rc-main {
|
||||||
|
.rc-headera {
|
||||||
|
display: flex;
|
||||||
|
height: 64px;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid #D7D7D7;
|
||||||
|
border-radius: 3px 3px 0px 0px;
|
||||||
|
font-size: 18px;
|
||||||
|
span:first-child{
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
margin-left: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-userheader{
|
||||||
|
width: 100%;
|
||||||
|
height: 64px;
|
||||||
|
background: #F6F6F6;
|
||||||
|
border: 1px solid #D7D7D7;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 18px;
|
||||||
|
span:first-child{
|
||||||
|
margin-left: 173px;
|
||||||
|
}
|
||||||
|
span:last-child{
|
||||||
|
margin-right: 87px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-center {
|
||||||
|
width: 100%;
|
||||||
|
height: 220px;
|
||||||
|
border: 1px solid #D7D7D7;
|
||||||
|
.rc-usermain {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 164px;
|
||||||
|
.rc-usercenter{
|
||||||
|
width: 25%;
|
||||||
|
em{
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-image {
|
||||||
|
border: 1px solid #D8D8D8;
|
||||||
|
margin-left: 40px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-right {
|
||||||
|
.rc-userbottom{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 16px;
|
||||||
|
|
||||||
|
em
|
||||||
|
{
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 18px;
|
||||||
|
|
||||||
|
color: #E1001A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-userright {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
span{
|
||||||
|
display: block;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-userbottomm {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 58%;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #E1001A;
|
||||||
|
font-weight: bold;
|
||||||
|
i{
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-bottom {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 40px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
width: 130px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
color: #e2001a;
|
||||||
|
height: 40px;
|
||||||
|
border: 2px solid #e2001a;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
span:last-child{
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-bottom {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-title {
|
||||||
|
height: 55px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #d8d8d8;
|
||||||
|
justify-content: space-between;
|
||||||
|
span{
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999999;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
strong{
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #444444;
|
||||||
|
}
|
||||||
|
em{
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-left: 40px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.rc-usertitle{
|
||||||
|
margin-right: 73px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
em{
|
||||||
|
display: block;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
rc-busness/assets/dog/four.jpg
Normal file
BIN
rc-busness/assets/dog/four.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
rc-busness/assets/dog/four.mp4
Normal file
BIN
rc-busness/assets/dog/four.mp4
Normal file
Binary file not shown.
BIN
rc-busness/assets/dog/one.jpg
Normal file
BIN
rc-busness/assets/dog/one.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
rc-busness/assets/dog/one.mp4
Normal file
BIN
rc-busness/assets/dog/one.mp4
Normal file
Binary file not shown.
BIN
rc-busness/assets/dog/three.jpg
Normal file
BIN
rc-busness/assets/dog/three.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
rc-busness/assets/dog/three.mp4
Normal file
BIN
rc-busness/assets/dog/three.mp4
Normal file
Binary file not shown.
BIN
rc-busness/assets/dog/two.jpg
Normal file
BIN
rc-busness/assets/dog/two.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
rc-busness/assets/dog/two.mp4
Normal file
BIN
rc-busness/assets/dog/two.mp4
Normal file
Binary file not shown.
BIN
rc-busness/assets/image/pc-banner1.png
Normal file
BIN
rc-busness/assets/image/pc-banner1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
rc-busness/assets/image/pc-banner2.png
Normal file
BIN
rc-busness/assets/image/pc-banner2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
@ -13,6 +13,7 @@
|
|||||||
</van-swipe-item>
|
</van-swipe-item>
|
||||||
</van-swipe>
|
</van-swipe>
|
||||||
|
|
||||||
|
|
||||||
<div class="online bold rc-md-down" id="fixed-catbar-seperator"></div>
|
<div class="online bold rc-md-down" id="fixed-catbar-seperator"></div>
|
||||||
<!-- <div v-swiper:mySwiper="swiperOption" class="swiperWrap">
|
<!-- <div v-swiper:mySwiper="swiperOption" class="swiperWrap">
|
||||||
<div class="swiper-wrapper">
|
<div class="swiper-wrapper">
|
||||||
@ -40,12 +41,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="online bold rc-md-up"></div>
|
<div class="online bold rc-md-up" v-show="catproduct"></div>
|
||||||
|
|
||||||
<div class="rc-full-width">
|
<div class="rc-full-width">
|
||||||
<div class="rc-lunbo rc-full-width">
|
<div class="rc-lunbo rc-full-width">
|
||||||
<!-- <h2>明星猫粮</h2> -->
|
<!-- <h2>明星猫粮</h2> -->
|
||||||
<div class="pageFullScreen" id="xxxFullScreen" v-show="catproduct">
|
<div class="pageFullScreen" id="xxxFullScreen" v-show="catproduct" ref="mingxing">
|
||||||
<!-- 内容 -->
|
<!-- 内容 -->
|
||||||
<div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1">
|
<div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1">
|
||||||
<h2 class="rc-beta rc-text--center">{{usertitle}}</h2>
|
<h2 class="rc-beta rc-text--center">{{usertitle}}</h2>
|
||||||
@ -90,12 +91,15 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="online bold"></div>
|
<div class="online bold" v-show="onemao"></div>
|
||||||
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md">
|
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" ref="usercontent" v-show="onemao">
|
||||||
<h2 class="rc-beta rc-text--center">全价猫湿粮</h2>
|
<h2 class="rc-beta rc-text--center" >全价猫湿粮</h2>
|
||||||
<van-tabs @change='catclick' class="van-tabs">
|
<van-tabs @change='catclick' class="van-tabs">
|
||||||
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
|
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
|
||||||
<div class="rc-contair">
|
<div class="rc-contair">
|
||||||
@ -182,8 +186,8 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="online bold"></div>
|
<div class="online bold" v-show="twomao"></div>
|
||||||
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md">
|
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="twomao" ref="catgan">
|
||||||
<h2 class="rc-beta rc-text--center">全价猫干粮</h2>
|
<h2 class="rc-beta rc-text--center">全价猫干粮</h2>
|
||||||
<van-tabs @change='catclick' class="van-tabs">
|
<van-tabs @change='catclick' class="van-tabs">
|
||||||
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
|
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
|
||||||
@ -275,12 +279,76 @@
|
|||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="online bold"></div>
|
<div class="online bold" v-show="dogshow"></div>
|
||||||
|
<div class="pageFullScreen" id="xxxFullScreen" v-show="dogshow" ref="mingxing">
|
||||||
|
<!-- 内容 -->
|
||||||
|
<div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1">
|
||||||
|
<div class="oc-top">
|
||||||
|
<h2 class="rc-beta rc-text--center">{{dogtitle}}</h2>
|
||||||
|
</div>
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<swiper :options="swiperOption">
|
||||||
|
<swiper-slide class="swiper-slide" v-for="(item, key) in doglistvideo" :key="key" >
|
||||||
|
<div class="rc-video">
|
||||||
|
<div class="uservideo">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rc-right">
|
||||||
|
<img :src=item.catimage alt="">
|
||||||
|
<span>{{item.title}}</span>
|
||||||
|
<p>{{item.detail}}</p>
|
||||||
|
<em>{{item.price}}</em>
|
||||||
|
<strong class="ts-standard-btn ts-standard-btn--two center" @click="userbuy(item,index)">立即购买</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sw-center" >
|
||||||
|
<div class="rc-click" @click="selectproduce(item,index)">
|
||||||
|
<div class="uservideo">
|
||||||
|
<video width="300px" height="251" controls="controls">
|
||||||
|
<source :src= item.video type="video/ogg" autoplay>
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img :src=item.catimage alt="">
|
||||||
|
<span>{{item.title}}</span>
|
||||||
|
<p>{{item.detail}}</p>
|
||||||
|
<em>{{item.price}}</em>
|
||||||
|
</div>
|
||||||
|
<div class="rc-full-width rc-margin-y--md">
|
||||||
|
<i @click="userbuy(item,index)" class="ts-standard-btn ts-standard-btn--two center">立即购买</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</swiper-slide>
|
||||||
|
</swiper>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md">
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="online bold" v-show="threemao"></div>
|
||||||
|
|
||||||
|
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="threemao" ref="doggshi">
|
||||||
<h2 class="rc-beta rc-text--center">全价犬湿粮</h2>
|
<h2 class="rc-beta rc-text--center">全价犬湿粮</h2>
|
||||||
<van-tabs @change='userdog' class="van-tabs">
|
<van-tabs @change='userdog' class="van-tabs">
|
||||||
|
<div class="online bold rc-md-down" v-show="threemao"></div>
|
||||||
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
|
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
|
||||||
|
<div class="online bold" v-show="threemao"></div>
|
||||||
|
<div class="usermain">
|
||||||
|
<ul class="ul-dog usermain">
|
||||||
|
<li
|
||||||
|
v-for="(item, index) in userdoglist"
|
||||||
|
:key="index"
|
||||||
|
@click="quanshi(item, index)"
|
||||||
|
:class="activeIndex5 == index ? 'active' : 'unactive'"
|
||||||
|
>
|
||||||
|
<img :src="item.catimage" alt="">
|
||||||
|
<span>{{ item.title }}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="rc-contair">
|
<div class="rc-contair">
|
||||||
<ul class="ts-product-list rc-margin-bottom--lg">
|
<ul class="ts-product-list rc-margin-bottom--lg">
|
||||||
<li v-for="(item,index) in dogshi" :key="index" class="rc-margin-top--md">
|
<li v-for="(item,index) in dogshi" :key="index" class="rc-margin-top--md">
|
||||||
@ -374,11 +442,28 @@
|
|||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="online bold"></div>
|
|
||||||
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md">
|
|
||||||
|
|
||||||
|
<div class="online bold" v-show="fourmao"></div>
|
||||||
|
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fourmao" ref="dogan">
|
||||||
<h2 class="rc-beta rc-text--center">全价犬干粮</h2>
|
<h2 class="rc-beta rc-text--center">全价犬干粮</h2>
|
||||||
<van-tabs @change='userdog' class="van-tabs">
|
<van-tabs @change='userdog' class="van-tabs">
|
||||||
|
<div class="online bold" v-show="fourmao"></div>
|
||||||
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
|
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
|
||||||
|
<div class="usermain">
|
||||||
|
<ul class="ul-dog usermain">
|
||||||
|
<li
|
||||||
|
v-for="(item, index) in userdoglist"
|
||||||
|
:key="index"
|
||||||
|
@click="userdoghot(item, index)"
|
||||||
|
:class="activeIndex6 == index ? 'active' : 'unactive'"
|
||||||
|
>
|
||||||
|
<img :src="item.catimage" alt="">
|
||||||
|
<span>{{ item.title }}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
<div class="rc-contair">
|
<div class="rc-contair">
|
||||||
<ul class="ts-product-list rc-margin-bottom--lg">
|
<ul class="ts-product-list rc-margin-bottom--lg">
|
||||||
<li v-for="(item,index) in doggan" :key="index" class="rc-margin-top--md">
|
<li v-for="(item,index) in doggan" :key="index" class="rc-margin-top--md">
|
||||||
@ -470,9 +555,9 @@
|
|||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="online bold"></div>
|
<div class="online bold" v-show="fivemao"></div>
|
||||||
|
|
||||||
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md">
|
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fivemao" ref="chufang">
|
||||||
<h2 class="rc-beta rc-text--center">处方用粮</h2>
|
<h2 class="rc-beta rc-text--center">处方用粮</h2>
|
||||||
<van-tabs @change='userclick' class="van-tabs">
|
<van-tabs @change='userclick' class="van-tabs">
|
||||||
<van-tab v-for="(item,index) in discounchufang" :key="index" :title="item.title">
|
<van-tab v-for="(item,index) in discounchufang" :key="index" :title="item.title">
|
||||||
@ -640,9 +725,19 @@
|
|||||||
return{
|
return{
|
||||||
useraindex:0,
|
useraindex:0,
|
||||||
usertitle:'明星猫粮',
|
usertitle:'明星猫粮',
|
||||||
|
dogtitle:'明星狗粮',
|
||||||
processinformation:[],
|
processinformation:[],
|
||||||
catshi:[],
|
catshi:[],
|
||||||
|
userindex:0,
|
||||||
userstype:'',
|
userstype:'',
|
||||||
|
onemao:false,
|
||||||
|
twomao:false,
|
||||||
|
threemao:false,
|
||||||
|
dogshow:false,
|
||||||
|
fourmao:false,
|
||||||
|
fivemao:false,
|
||||||
|
sixmao:false,
|
||||||
|
stypechange:true,
|
||||||
userunlogin:false,
|
userunlogin:false,
|
||||||
searchBar:true,
|
searchBar:true,
|
||||||
usermessage:[],
|
usermessage:[],
|
||||||
@ -670,24 +765,13 @@
|
|||||||
gotop: false,
|
gotop: false,
|
||||||
usersetting: `${settings.rbs}`,
|
usersetting: `${settings.rbs}`,
|
||||||
activeIndex: 0,
|
activeIndex: 0,
|
||||||
|
activeIndex5:0,
|
||||||
|
activeIndex6:0,
|
||||||
activeInde2: 0,
|
activeInde2: 0,
|
||||||
activeInde3:0,
|
activeInde3:0,
|
||||||
catproduct:true,
|
catproduct:true,
|
||||||
catfood:false,
|
catfood:false,
|
||||||
|
|
||||||
dogselection:[
|
|
||||||
{
|
|
||||||
title: "小型犬",
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "中型犬",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "大型犬",
|
|
||||||
},
|
|
||||||
|
|
||||||
],
|
|
||||||
|
|
||||||
selection:[
|
selection:[
|
||||||
{
|
{
|
||||||
@ -717,7 +801,7 @@ activeInde3:0,
|
|||||||
{src:require("../assets/image/four.jpg"),link:""},
|
{src:require("../assets/image/four.jpg"),link:""},
|
||||||
],
|
],
|
||||||
|
|
||||||
doglist: [
|
userdoglist: [
|
||||||
{
|
{
|
||||||
title: "小型犬",
|
title: "小型犬",
|
||||||
catimage: require("../assets/cat.png"),
|
catimage: require("../assets/cat.png"),
|
||||||
@ -759,44 +843,51 @@ activeInde3:0,
|
|||||||
{
|
{
|
||||||
title: "明星猫粮",
|
title: "明星猫粮",
|
||||||
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
||||||
catimage: require("../assets/cat.png"),
|
catimage: require("../assets/star-cat.png"),
|
||||||
price:'￥2'
|
price:'￥2'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "猫湿粮",
|
title: "猫湿粮",
|
||||||
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
||||||
|
|
||||||
price:'￥12',
|
price:'￥12',
|
||||||
catimage: require("../assets/four.png"),
|
catimage: require("../assets/two.png"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "猫干粮",
|
title: "猫干粮",
|
||||||
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
||||||
|
|
||||||
price:'￥102',
|
price:'￥102',
|
||||||
catimage: require("../assets/one.png"),
|
catimage: require("../assets/cat.png"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "犬湿粮",
|
title: "明星狗粮",
|
||||||
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
||||||
|
|
||||||
price:'￥112',
|
price:'￥112',
|
||||||
catimage: require("../assets/two.png"),
|
catimage: require("../assets/six.png"),
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: "犬干粮",
|
{
|
||||||
|
title: "犬湿粮",
|
||||||
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
||||||
|
|
||||||
price:'￥112',
|
price:'￥112',
|
||||||
catimage: require("../assets/three.png"),
|
catimage: require("../assets/three.png"),
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "犬干粮",
|
||||||
|
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
||||||
|
|
||||||
|
price:'￥112',
|
||||||
|
catimage: require("../assets/one.png"),
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "处方用粮",
|
title: "处方用粮",
|
||||||
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
||||||
price:'￥112',
|
price:'￥112',
|
||||||
catimage: require("../assets/six.png"),
|
catimage: require("../assets/four.png"),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
@ -855,6 +946,38 @@ activeInde3:0,
|
|||||||
price:'¥123.45',
|
price:'¥123.45',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
|
||||||
|
doglistvideo: [
|
||||||
|
{
|
||||||
|
title: "明星狗粮",
|
||||||
|
video:require("../assets/dog/one.mp4"),
|
||||||
|
catimage: require("../assets/dog/one.jpg"),
|
||||||
|
detail:'为10月龄及以上成犬量身打造的精准营养',
|
||||||
|
price:'¥123.45',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "狗湿粮",
|
||||||
|
video:require("../assets/dog/two.mp4"),
|
||||||
|
catimage: require("../assets/dog/two.jpg"),
|
||||||
|
detail:'为10月龄及以上英国成犬量身打造的精准营养',
|
||||||
|
price:'¥123.45',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "狗干粮",
|
||||||
|
video:require("../assets/dog/three.mp4"),
|
||||||
|
catimage: require("../assets/dog/three.jpg"),
|
||||||
|
detail:'为10月龄及以上英国犬成犬量身打造的精准营养',
|
||||||
|
price:'¥123.45',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "狗干粮",
|
||||||
|
video:require("../assets/dog/four.mp4"),
|
||||||
|
catimage: require("../assets/dog/four.jpg"),
|
||||||
|
detail:'为10月龄及以上英国成犬量身打造的精准营养',
|
||||||
|
price:'¥123.45',
|
||||||
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
fixedlist: [
|
fixedlist: [
|
||||||
{
|
{
|
||||||
@ -967,13 +1090,27 @@ activeInde3:0,
|
|||||||
Myfooter,
|
Myfooter,
|
||||||
tabs,
|
tabs,
|
||||||
unlogin,
|
unlogin,
|
||||||
|
// userswiper
|
||||||
},
|
},
|
||||||
created(){
|
created(){
|
||||||
vm=this;
|
vm=this;
|
||||||
},
|
},
|
||||||
|
watch:{
|
||||||
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
|
const that = this
|
||||||
|
this.ifAdoid()
|
||||||
|
// window.onresize = () => {
|
||||||
|
// setTimeout(() => {
|
||||||
|
// this.ifAdoid()
|
||||||
|
// }, 500);
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
|
this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
|
||||||
let jump = document.querySelectorAll('.d_jump')
|
|
||||||
if(this.usermessage==null ||this.usermessage==undefined){
|
if(this.usermessage==null ||this.usermessage==undefined){
|
||||||
this.userunlogin=true
|
this.userunlogin=true
|
||||||
}
|
}
|
||||||
@ -989,8 +1126,12 @@ vm=this;
|
|||||||
window.removeEventListener('scroll', this.scrollToTop);
|
window.removeEventListener('scroll', this.scrollToTop);
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
ifadroind(item,index,order){
|
|
||||||
console.log(item,order);
|
|
||||||
|
|
||||||
|
ifAdoid(item,index){
|
||||||
|
console.log(index);
|
||||||
|
this.userindex=index;
|
||||||
var sUserAgent = navigator.userAgent.toLowerCase();
|
var sUserAgent = navigator.userAgent.toLowerCase();
|
||||||
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
||||||
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
||||||
@ -1000,35 +1141,157 @@ vm=this;
|
|||||||
var bIsAndroid = sUserAgent.match(/android/i) == "android";
|
var bIsAndroid = sUserAgent.match(/android/i) == "android";
|
||||||
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
||||||
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
||||||
this.activeIndex=index;
|
|
||||||
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
||||||
console.log("当前是电脑打开")
|
console.log("当前是电脑打开")
|
||||||
this.usertitle=item.title
|
this.stypechange=false;
|
||||||
this.catlistvideo[order]=item;
|
console.log(this.usertitle)
|
||||||
this.catproduct=true;
|
|
||||||
console.log(this.catproduct);
|
// let catshiid=document.querySelectorAll('.selectionswitch');
|
||||||
|
// catshiid[this.userindex].style.display='none';
|
||||||
|
// catshiid[this.userindex].style.display='none';
|
||||||
|
this.catproduct=true;
|
||||||
|
this.onemao=false;
|
||||||
|
this.twomao=false;
|
||||||
|
this.threemao=false;
|
||||||
|
this.fourmao=false;
|
||||||
|
this.fivemao=false;
|
||||||
|
this.sixmao=false;
|
||||||
|
this.dogshow=false
|
||||||
|
// console.log(catshiid);
|
||||||
|
}else{
|
||||||
|
console.log("当前是手机打开")
|
||||||
|
this.stypechange=true;
|
||||||
|
this.onemao=true;
|
||||||
|
this.twomao=true;
|
||||||
|
this.threemao=true;
|
||||||
|
this.fourmao=true;
|
||||||
|
this.fivemao=true;
|
||||||
|
this.dogshow=true;
|
||||||
|
this.catproduct=true
|
||||||
|
this.sixmao=true;
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
ifadroind(item,index,order){
|
||||||
|
console.log(item,index,order);
|
||||||
|
|
||||||
|
|
||||||
|
var sUserAgent = navigator.userAgent.toLowerCase();
|
||||||
|
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
||||||
|
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
||||||
|
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
|
||||||
|
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
|
||||||
|
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
|
||||||
|
var bIsAndroid = sUserAgent.match(/android/i) == "android";
|
||||||
|
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
||||||
|
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
||||||
|
|
||||||
|
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
||||||
|
console.log("当前是电脑打开啊啊啊")
|
||||||
|
if(item.title=='明星猫粮'){
|
||||||
|
this.catproduct=true;
|
||||||
|
this.twomao=false;
|
||||||
|
this.threemao=false;
|
||||||
|
this.fourmao=false;
|
||||||
|
this.fivemao=false;
|
||||||
|
this.dogshow=false;
|
||||||
|
this.sixmao=false;
|
||||||
|
}
|
||||||
|
if(item.title=='猫湿粮'){
|
||||||
|
this.onemao=true;
|
||||||
|
this.dogshow=false;
|
||||||
|
console.log(this.onemao);
|
||||||
|
this.twomao=false;
|
||||||
|
this.threemao=false;
|
||||||
|
this.fourmao=false;
|
||||||
|
this.fivemao=false;
|
||||||
|
this.catproduct=false;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}if(item.title=='猫干粮'){
|
||||||
|
this.onemao=false;
|
||||||
|
this.twomao=true;
|
||||||
|
this.dogshow=false;
|
||||||
|
this.threemao=false;
|
||||||
|
this.fourmao=false;
|
||||||
|
this.chufang=false;
|
||||||
|
this.catproduct=false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(item.title=='犬干粮'){
|
||||||
|
this.onemao=false;
|
||||||
|
this.twomao=false;
|
||||||
|
this.threemao=false;
|
||||||
|
this.fourmao=true;
|
||||||
|
this.chufang=false;
|
||||||
|
this.dogshow=false;
|
||||||
|
this.catproduct=false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(item.title=='犬湿粮'){
|
||||||
|
this.onemao=false;
|
||||||
|
this.twomao=false;
|
||||||
|
this.threemao=true;
|
||||||
|
this.fourmao=false;
|
||||||
|
this.chufang=false;
|
||||||
|
this.catproduct=false;
|
||||||
|
this.dogshow=false;
|
||||||
|
}
|
||||||
|
if(item.title=='处方用粮'){
|
||||||
|
this.onemao=false;
|
||||||
|
this.twomao=false;
|
||||||
|
this.threemao=false;
|
||||||
|
this.fourmao=false;
|
||||||
|
this.fivemao=true;
|
||||||
|
this.dogshow=false;
|
||||||
|
this.catproduct=false;
|
||||||
|
}
|
||||||
|
if(item.title=='明星狗粮'){
|
||||||
|
this.onemao=false;
|
||||||
|
this.twomao=false;
|
||||||
|
this.threemao=false;
|
||||||
|
this.fourmao=false;
|
||||||
|
this.fivemao=false;
|
||||||
|
this.dogshow=true;
|
||||||
|
this.catproduct=false;
|
||||||
|
}
|
||||||
|
// this.usertitle=item.title
|
||||||
|
// this.catlistvideo[order]=item;
|
||||||
|
// this.catproduct=true;
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
this.catfood=true;
|
this.catfood=true;
|
||||||
this.catproduct=false;
|
// this.catproduct=false;
|
||||||
let userindex=index
|
let userindex=index
|
||||||
console.log(item,index);
|
console.log(item,index);
|
||||||
let mingxin=document.querySelector('.pageFullScreen');
|
let mingxin=document.querySelector('.pageFullScreen');
|
||||||
|
let dogtop=document.querySelector('.oc-top');
|
||||||
|
console.log(dogtop);
|
||||||
console.log(mingxin.offsetTop);
|
console.log(mingxin.offsetTop);
|
||||||
|
if(item.title=='犬湿粮'||item.title=='犬干粮'||item.title=='处方用粮'){
|
||||||
|
userindex=userindex-2
|
||||||
|
}else{
|
||||||
|
userindex=userindex-1
|
||||||
|
}
|
||||||
if(item.title=='明星猫粮'){
|
if(item.title=='明星猫粮'){
|
||||||
mingxin.scrollIntoView(true);
|
mingxin.scrollIntoView(true);
|
||||||
}else{
|
}else{
|
||||||
let catshiid=document.querySelectorAll('.selectionswitch');
|
let catshiid=document.querySelectorAll('.selectionswitch');
|
||||||
catshiid[userindex-1].scrollIntoView(true);
|
catshiid[userindex].scrollIntoView(true);
|
||||||
}
|
}
|
||||||
|
if(item.title=='明星狗粮')
|
||||||
|
dogtop.scrollIntoView(true);
|
||||||
|
// if(item.title=="猫湿粮"){
|
||||||
|
// this.catproduct=false;
|
||||||
|
// this.catfood=true;
|
||||||
|
// }else if(item.title=="明星猫粮"){
|
||||||
|
// this.catproduct=true;
|
||||||
|
// this.catfood=false;
|
||||||
|
|
||||||
if(item.title=="猫湿粮"){
|
// }
|
||||||
this.catproduct=false;
|
|
||||||
this.catfood=true;
|
|
||||||
}else if(item.title=="明星猫粮"){
|
|
||||||
this.catproduct=true;
|
|
||||||
this.catfood=false;
|
|
||||||
|
|
||||||
}
|
|
||||||
console.log("当前是手机打开")
|
console.log("当前是手机打开")
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1229,7 +1492,21 @@ catshiid[userindex-1].scrollIntoView(true);
|
|||||||
},
|
},
|
||||||
|
|
||||||
selectGoods(item,index){
|
selectGoods(item,index){
|
||||||
|
console.log(item,index);
|
||||||
|
this.activeIndex=index;
|
||||||
|
console.log(item.title);
|
||||||
this.ifadroind(item,index,this.useraindex)
|
this.ifadroind(item,index,this.useraindex)
|
||||||
|
// this.ifAdoid(item,index);
|
||||||
|
|
||||||
|
},
|
||||||
|
quanshi(item,index){
|
||||||
|
console.log(item,index);
|
||||||
|
this.activeIndex5=index
|
||||||
|
console.log(this.activeIndex5);
|
||||||
|
|
||||||
|
},
|
||||||
|
userdoghot(item,index){
|
||||||
|
this.activeIndex6=index
|
||||||
|
|
||||||
},
|
},
|
||||||
selectGo(item,index){
|
selectGo(item,index){
|
||||||
|
|||||||
@ -1,28 +1,27 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
<div class="online" style="height:3px;width:93%;background:#DDDDDD;margin:0 auto"></div>
|
<div class="rc-top"></div>
|
||||||
<div class="rc-header">
|
<div class="online" style=""></div>
|
||||||
<div class="rc-main" v-for="(item,index) in goldmedal" :key="index" >
|
<div class="rc-layout-container rc-one-column rc-full-width">
|
||||||
<div class="rc-border"></div>
|
|
||||||
|
<div class="rc-full-width" v-for="(item, index) in goldmedal" :key="index" >
|
||||||
<div
|
<div
|
||||||
class="mypersonal"
|
class="mypersonal"
|
||||||
v-for="(dataaddress, index) in useraddress"
|
v-for="(dataaddress, index) in useraddress"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<div class="my-delivery">
|
<div class="my-delivery">
|
||||||
<span>{{ dataaddress.state }}</span>
|
<span>{{ dataaddress.state }}</span>
|
||||||
<i>{{ dataaddress.tel }}</i>
|
<i>{{ dataaddress.tel }}</i>
|
||||||
</div>
|
</div>
|
||||||
<div class="per-delivery">
|
<div class="per-delivery">
|
||||||
<span>{{ dataaddress.address }}</span>
|
<span>{{ dataaddress.address }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
<div class="online"></div>
|
||||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
|
|
||||||
<div>
|
<div>
|
||||||
<div class="rc-center">
|
<div class="rc-center rc-max-width--xl" v-for="(item, index) in goldmedal" :key="index">
|
||||||
<div class="rc-usermain">
|
<div class="rc-usermain">
|
||||||
<div class="rc-image">
|
<div class="rc-image">
|
||||||
<img :src="item.catimage" alt="" />
|
<img :src="item.catimage" alt="" />
|
||||||
@ -38,12 +37,12 @@
|
|||||||
<span>数量:{{ item.specification }}件</span>
|
<span>数量:{{ item.specification }}件</span>
|
||||||
<i>￥{{ item.userprice }}</i>
|
<i>￥{{ item.userprice }}</i>
|
||||||
<div class="rc-bottom">
|
<div class="rc-bottom">
|
||||||
<span>联系客服申请售后</span>
|
<span class="ts-standard-btn ts-standard-btn--two">联系客服申请售后</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-bottomm">
|
<div class="rc-bottomm">
|
||||||
<span>联系客服申请售后</span>
|
<span class="ts-standard-btn ts-standard-btn--two">联系客服申请售后</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="rc-userbottomm">
|
<!-- <div class="rc-userbottomm">
|
||||||
<i>￥{{ item.userprice }}</i>
|
<i>￥{{ item.userprice }}</i>
|
||||||
<span>{{ item.orderstype }}</span>
|
<span>{{ item.orderstype }}</span>
|
||||||
@ -51,10 +50,9 @@
|
|||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="online bold"></div>
|
||||||
<div class="rc-merchandise">
|
<div class="rc-merchandise rc-max-width--xl">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<span>配送方式:</span>
|
<span>配送方式:</span>
|
||||||
@ -75,31 +73,34 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="online bold"></div>
|
||||||
<div class="rc-foot">
|
<div class="rc-foot rc-max-width--xl">
|
||||||
<div class="rc-foo">
|
<div class="rc-foo">
|
||||||
<div style="padding-top:55px">
|
<div class="ts-total">
|
||||||
<i>合计金额:</i>
|
<i>合计金额:</i>
|
||||||
<em>￥167.00</em>
|
<em>￥167.00</em>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding-bottom:40px">
|
<div style="padding-bottom:40px;cursor: pointer;">
|
||||||
<span>再次购买</span>
|
<span class="ts-standard-btn" @click="oncebuy()">再次购买</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="online bold"></div>
|
||||||
|
|
||||||
<div class="rc-button">
|
<div class="rc-button">
|
||||||
<div class="rc-left">
|
<div class="rc-left">
|
||||||
<span>总计：</span>
|
<span>总计：</span>
|
||||||
<em>￥167.00</em>
|
<em>￥167.00</em>
|
||||||
</div>
|
</div>
|
||||||
<strong ref="rccolor" @click="jiesuan">结算</strong>
|
<strong ref="rccolor" class="ts-standard-btn" @click="jiesuan">结算</strong>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -194,638 +195,6 @@ jiesuan(){
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
ul li ol li em strong i {
|
@import url("../../assets/css/global.less");
|
||||||
list-style: none;
|
@import url("../../assets/css/quiry.less");
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
.rc-header {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
//手机端
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.rc-button{
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 0.8rem;
|
|
||||||
background-color: white;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
.rc-left{
|
|
||||||
margin-left: 0.20rem;
|
|
||||||
}
|
|
||||||
span{
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
em{
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 0.18rem;
|
|
||||||
color: #E1001A;
|
|
||||||
}
|
|
||||||
strong{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 0.48rem;
|
|
||||||
background: #E2001A;
|
|
||||||
border-radius: 0.30rem;
|
|
||||||
color: white;
|
|
||||||
width: 1rem;
|
|
||||||
margin-right: 0.2rem
|
|
||||||
;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-main {
|
|
||||||
width: 92%;
|
|
||||||
margin: 0 auto;
|
|
||||||
.rc-userbottom{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.viewdetails{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.rc-foo{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.rc-receiving {
|
|
||||||
width: 100%;
|
|
||||||
height: 80px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
em {
|
|
||||||
font-style: normal;
|
|
||||||
color: #e1001a;
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
color: #666666;
|
|
||||||
font-size: 12px;
|
|
||||||
display: block;
|
|
||||||
margin-left: 18px;
|
|
||||||
width: 62%;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.delivery {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 80px;
|
|
||||||
.to-delivery {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-style: normal;
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
margin-left: 3px;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
font-style: normal;
|
|
||||||
margin-left: 8px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bo-delivery {
|
|
||||||
span {
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
color: #666666;
|
|
||||||
display: block;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mypersonal {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
height: 80px;
|
|
||||||
.my-delivery {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-style: normal;
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
font-style: normal;
|
|
||||||
margin-left: 8px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.per-delivery {
|
|
||||||
span {
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
color: #666666;
|
|
||||||
display: block;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-usermain {
|
|
||||||
display: flex;
|
|
||||||
.rc-image {
|
|
||||||
border: 1px solid #d8d8d8;
|
|
||||||
margin-top: 17px;
|
|
||||||
height: 96px;
|
|
||||||
img {
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-right {
|
|
||||||
.rc-userbottomm {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
margin-left: 16px;
|
|
||||||
justify-content: center;
|
|
||||||
em {
|
|
||||||
font-style: normal;
|
|
||||||
display: block;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-top: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
color: #e1001a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-userright {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
color: #666666;
|
|
||||||
font-size: 14px;
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-userbottom {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top: 8px;
|
|
||||||
span {
|
|
||||||
color: #666666;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
font-style: normal;
|
|
||||||
color: #e1001a;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.rc-bottom{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-bottomm {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 24px;
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
width: 130px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
line-height: 40px;
|
|
||||||
text-align: center;
|
|
||||||
color: #e2001a;
|
|
||||||
height: 40px;
|
|
||||||
font-size: 12px;
|
|
||||||
border: 2px solid #e2001a;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
span:last-child {
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.rc-merchandise {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 32px;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
line-height: 26px;
|
|
||||||
i {
|
|
||||||
font-style: normal;
|
|
||||||
color: #666666;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
list-style: none;
|
|
||||||
font-style: normal;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
span {
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
li:last-child {
|
|
||||||
i {
|
|
||||||
color: #e1001a;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.rc-payment{
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 32px;
|
|
||||||
.u-trackingnumber{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
i {
|
|
||||||
font-size: 14px;
|
|
||||||
font-style: normal;
|
|
||||||
margin-right: 16px;
|
|
||||||
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
width: 8px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
line-height: 26px;
|
|
||||||
i {
|
|
||||||
font-style: normal;
|
|
||||||
color: #666666;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
list-style: none;
|
|
||||||
font-style: normal;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
span {
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//pc端
|
|
||||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
|
||||||
|
|
||||||
.rc-main {
|
|
||||||
width: 92%;
|
|
||||||
margin: 0 auto;
|
|
||||||
.rc-userbottomm{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.rc-border{
|
|
||||||
width: 100%;
|
|
||||||
border-bottom: 1px solid #D7D7D7;
|
|
||||||
margin-top: 32px;
|
|
||||||
}
|
|
||||||
.rc-receiving {
|
|
||||||
width: 100%;
|
|
||||||
height: 80px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
em {
|
|
||||||
font-style: normal;
|
|
||||||
color: #E1001A;
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
color: #666666;
|
|
||||||
font-size: 16px;
|
|
||||||
display: block;
|
|
||||||
margin-top: 25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.delivery {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 140px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
.viewdetails{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
span{
|
|
||||||
color:#444444;
|
|
||||||
font-size: 18px;
|
|
||||||
display: block;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
width: 8px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.to-delivery {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-style: normal;
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
// margin-left: 16px;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
font-style: normal;
|
|
||||||
margin-left: 8px;
|
|
||||||
display: block;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bo-delivery {
|
|
||||||
span {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #666666;
|
|
||||||
display: block;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mypersonal {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 140px;
|
|
||||||
justify-content: center;
|
|
||||||
.my-delivery {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-style: normal;
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
margin-left: 3px;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
font-style: normal;
|
|
||||||
margin-left: 8px;
|
|
||||||
display: block;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.per-delivery {
|
|
||||||
span {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #666666;
|
|
||||||
display: block;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-usermain {
|
|
||||||
display: flex;
|
|
||||||
.rc-image {
|
|
||||||
border: 1px solid #d8d8d8;
|
|
||||||
margin-top: 17px;
|
|
||||||
img {
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-right {
|
|
||||||
.rc-bottomm{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.rc-usercenter{
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
em {
|
|
||||||
font-style: normal;
|
|
||||||
display: block;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-top: 17px;
|
|
||||||
color: #e1001a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
margin-left: 16px;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
.rc-userright {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
color: #666666;
|
|
||||||
font-size: 16px;
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
margin-top: 16px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-userbottom {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
width: 80%;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-left: 119px;
|
|
||||||
span {
|
|
||||||
color: #E1001A;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
font-style: normal;
|
|
||||||
color: #e1001a;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.rc-bottom {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 24px;
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
width: 164px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
line-height: 40px;
|
|
||||||
text-align: center;
|
|
||||||
color: #e2001a;
|
|
||||||
height: 40px;
|
|
||||||
border: 2px solid #e2001a;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-merchandise {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 32px;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
line-height: 40px;
|
|
||||||
font-size: 18px;
|
|
||||||
i {
|
|
||||||
font-style: normal;
|
|
||||||
color: #666666;
|
|
||||||
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
list-style: none;
|
|
||||||
font-style: normal;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
span {
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
li:last-child {
|
|
||||||
i {
|
|
||||||
color: #e1001a;
|
|
||||||
font-size: 20px;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.rc-payment{
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 80px;
|
|
||||||
.u-trackingnumber{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
i {
|
|
||||||
font-size: 18px;
|
|
||||||
font-style: normal;
|
|
||||||
margin-right: 16px;
|
|
||||||
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
width: 8px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
line-height: 40px;
|
|
||||||
font-size: 18px;
|
|
||||||
i {
|
|
||||||
font-style: normal;
|
|
||||||
color: #666666;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
list-style: none;
|
|
||||||
font-style: normal;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
span {
|
|
||||||
|
|
||||||
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-foot{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
.rc-foo{
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: self-end;
|
|
||||||
i{
|
|
||||||
font-style: normal;
|
|
||||||
color:#333333;
|
|
||||||
font-size: 20px;
|
|
||||||
margin-right: 20px;
|
|
||||||
|
|
||||||
}
|
|
||||||
em{
|
|
||||||
font-style: normal;
|
|
||||||
color: #E1001A;
|
|
||||||
font-size: 26px;
|
|
||||||
|
|
||||||
}
|
|
||||||
span{
|
|
||||||
display: block;
|
|
||||||
width: 164px;
|
|
||||||
margin-top: 36px;
|
|
||||||
background: #E2001A;
|
|
||||||
line-height: 48px;
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
height: 48px;
|
|
||||||
|
|
||||||
border-radius: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
<div class="rc-header">
|
<div class="rc-top"></div>
|
||||||
|
<div class="rc-full-width rc-layout-container">
|
||||||
<div class="rc-main">
|
<div class="rc-main">
|
||||||
<div class="rc-headera">
|
<div class="rc-headera">
|
||||||
<span
|
<span
|
||||||
@ -117,27 +118,39 @@ export default {
|
|||||||
|
|
||||||
goldmedal: [
|
goldmedal: [
|
||||||
{
|
{
|
||||||
ordernumber: "1111111111111111111",
|
ordernumber: "1111111111111111111",
|
||||||
orderstype: 1,
|
orderstype: 1,
|
||||||
usereat: "专属升级奖励",
|
usereat: "专属升级奖励",
|
||||||
ordernum: 0,
|
ordernum: 0,
|
||||||
num: "5kg",
|
num: "5kg",
|
||||||
specification: "1",
|
specification: "1",
|
||||||
buttontitle:'立即支付',
|
buttontitle:'立即支付',
|
||||||
userprice: "167.00",
|
userprice: "167.00",
|
||||||
catimage: require("../../assets/image/rc-win.png"),
|
catimage: require("../../assets/image/rc-win.png"),
|
||||||
|
orderDetailList:{
|
||||||
|
userlist:{
|
||||||
|
num:10,
|
||||||
|
pcs:10,
|
||||||
|
ecprice:167
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
ordernumber: "1111111111111111111",
|
ordernumber: "1111111111111111111",
|
||||||
|
usereat: "每年4次免积分产品试吃",
|
||||||
usereat: "每年4次免积分产品试吃",
|
ordernum: 0,
|
||||||
ordernum: 0,
|
buttontitle:'再次购买',
|
||||||
buttontitle:'再次购买',
|
catimage: require("../../assets/image/usereat.png"),
|
||||||
catimage: require("../../assets/image/usereat.png"),
|
orderstype: 2,
|
||||||
orderstype: 2,
|
userprice: "167.00",
|
||||||
userprice: "167.00",
|
orderDetailList:{
|
||||||
|
userlist:{
|
||||||
|
num:10,
|
||||||
|
pcs:10,
|
||||||
|
ecprice:167
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
ordernumber: "1111111111111111111",
|
ordernumber: "1111111111111111111",
|
||||||
@ -147,6 +160,13 @@ export default {
|
|||||||
catimage: require("../../assets/image/usercar.png"),
|
catimage: require("../../assets/image/usercar.png"),
|
||||||
orderstype: 3,
|
orderstype: 3,
|
||||||
userprice: "167.00",
|
userprice: "167.00",
|
||||||
|
orderDetailList:{
|
||||||
|
userlist:{
|
||||||
|
num:10,
|
||||||
|
pcs:10,
|
||||||
|
ecprice:167
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
ordernumber: "1111111111111111111",
|
ordernumber: "1111111111111111111",
|
||||||
@ -163,6 +183,13 @@ export default {
|
|||||||
catimage: require("../../assets/image/consult.png"),
|
catimage: require("../../assets/image/consult.png"),
|
||||||
orderstype: 2,
|
orderstype: 2,
|
||||||
userprice: "167.00",
|
userprice: "167.00",
|
||||||
|
orderDetailList:{
|
||||||
|
userlist:{
|
||||||
|
num:10,
|
||||||
|
pcs:10,
|
||||||
|
ecprice:167
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
ordernumber: "1111111111111111111",
|
ordernumber: "1111111111111111111",
|
||||||
@ -171,6 +198,13 @@ export default {
|
|||||||
catimage: require("../../assets/image/rc-book.png"),
|
catimage: require("../../assets/image/rc-book.png"),
|
||||||
orderstype: 3,
|
orderstype: 3,
|
||||||
userprice: "167.00",
|
userprice: "167.00",
|
||||||
|
orderDetailList:{
|
||||||
|
userlist:{
|
||||||
|
num:10,
|
||||||
|
pcs:10,
|
||||||
|
ecprice:100
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
ordernumber: "1111111111111111111",
|
ordernumber: "1111111111111111111",
|
||||||
@ -179,6 +213,13 @@ export default {
|
|||||||
catimage: require("../../assets/image/userself.png"),
|
catimage: require("../../assets/image/userself.png"),
|
||||||
orderstype: 3,
|
orderstype: 3,
|
||||||
userprice: "167.00",
|
userprice: "167.00",
|
||||||
|
orderDetailList:{
|
||||||
|
userlist:{
|
||||||
|
num:10,
|
||||||
|
pcs:10,
|
||||||
|
ecprice:100
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
usereat: "每年积分兑换1次价值288元的免费体检及100元医院绝育券",
|
usereat: "每年积分兑换1次价值288元的免费体检及100元医院绝育券",
|
||||||
@ -186,84 +227,83 @@ export default {
|
|||||||
catimage: require("../../assets/image/rc-health.png"),
|
catimage: require("../../assets/image/rc-health.png"),
|
||||||
orderstype: 3,
|
orderstype: 3,
|
||||||
userprice: "167.00",
|
userprice: "167.00",
|
||||||
|
orderDetailList:{
|
||||||
|
userlist:{
|
||||||
|
num:10,
|
||||||
|
pcs:10,
|
||||||
|
ecprice:100
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
let user= JSON.parse(localStorage.getItem("userInfo"));
|
let user= JSON.parse(localStorage.getItem("userInfo"));
|
||||||
this.userdata=user;
|
this.userdata=user;
|
||||||
let stype=this.$route.query.stype
|
let stype=this.$route.query.stype
|
||||||
|
if(user=='' ||user==null){
|
||||||
if(user=='' ||user==null){
|
this.$message({
|
||||||
this.$message({
|
type: 'warning',
|
||||||
type: 'warning',
|
message: '请先去登录'
|
||||||
message: '请先去登录'
|
});
|
||||||
});
|
return
|
||||||
return
|
}else{
|
||||||
}else{
|
this.indet(user.data.mobile,stype);
|
||||||
this.indet(user.data.mobile,stype);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Myheader,
|
Myheader,
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async indet(mobile,stype){
|
async indet(mobile,stype){
|
||||||
let data=await userindent(mobile,);
|
let data=await userindent(mobile,);
|
||||||
this.activeIndex=stype;
|
this.activeIndex=stype;
|
||||||
this.goldmedal=data;
|
//this.goldmedal=data;
|
||||||
let list=[];
|
let list=[];
|
||||||
let fahuolist=[];
|
let fahuolist=[];
|
||||||
console.log(this.goldmedal);
|
console.log(this.goldmedal);
|
||||||
for(let i=0;i<this.goldmedal.length;i++){
|
for(let i=0;i<this.goldmedal.length;i++){
|
||||||
list.push(this.goldmedal[i].orderDetailList);
|
list.push(this.goldmedal[i].orderDetailList);
|
||||||
|
}
|
||||||
}
|
},
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
async canceldanhao(orderNumber){
|
async canceldanhao(orderNumber){
|
||||||
let data=await canceldanhao(orderNumber);
|
let data=await canceldanhao(orderNumber);
|
||||||
console.log(data);
|
console.log(data);
|
||||||
if(data){
|
if(data){
|
||||||
this.$message({
|
this.$message({
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
message: '取消订单成功'
|
message: '取消订单成功'
|
||||||
});
|
});
|
||||||
this.indet(this.userdata.data.mobile);
|
this.indet(this.userdata.data.mobile);
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
},
|
userpay(item,index){
|
||||||
|
console.log(item);
|
||||||
userpay(item,index){
|
if(item.status==0){
|
||||||
console.log(item);
|
this.canceldanhao(item.orderNumber);
|
||||||
if(item.status==0){
|
}
|
||||||
this.canceldanhao(item.orderNumber);
|
console.log(item.buttontitle);
|
||||||
|
if(item.buttontitle=='立即支付'){
|
||||||
}
|
this.$router.push({
|
||||||
console.log(item.buttontitle);
|
path: "/personal/userpay",
|
||||||
if(item.buttontitle=='立即支付'){
|
query: {
|
||||||
this.$router.push({
|
stype: 1,
|
||||||
path: "/personal/userpay",
|
},
|
||||||
query: {
|
});
|
||||||
stype: 1,
|
}else if(item.buttontitle=='再次购买'){
|
||||||
},
|
this.$router.push({
|
||||||
});
|
path: "/myorder/userrecord",
|
||||||
}else if(item.buttontitle=='再次购买'){
|
query: {
|
||||||
this.$router.push({
|
stype: 1,
|
||||||
path: "/myorder/userrecord",
|
},
|
||||||
query: {
|
});
|
||||||
stype: 1,
|
}
|
||||||
},
|
},
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
selectGoods(item, index) {
|
selectGoods(item, index) {
|
||||||
this.activeIndex = index;
|
this.activeIndex = index;
|
||||||
if(index==1){
|
if(index==1){
|
||||||
@ -299,360 +339,6 @@ async canceldanhao(orderNumber){
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
@import url("../../assets/css/global.less");
|
||||||
// 手机端
|
@import url("../../assets/css/useraddress.less");
|
||||||
@media screen and(min-width: 320px) and(max-width:768px) {
|
|
||||||
.active {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #e2001a;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.unactive {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #444444;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.rc-header {
|
|
||||||
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
.rc-main {
|
|
||||||
width: 92%;
|
|
||||||
margin: 0 auto;
|
|
||||||
.rc-usermaina{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.rc-headera {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 64px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.rc-userheader{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-center {
|
|
||||||
width: 100%;
|
|
||||||
height: 245px;
|
|
||||||
margin-top: 8px;
|
|
||||||
.rc-usermain {
|
|
||||||
.pc-bottom{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
.rc-image {
|
|
||||||
border: 1px solid #D8D8D8;
|
|
||||||
margin-top: 17px;
|
|
||||||
;
|
|
||||||
img {
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-right {
|
|
||||||
|
|
||||||
.rc-userbottomm{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
margin-left: 16px;
|
|
||||||
justify-content: center;
|
|
||||||
em
|
|
||||||
{
|
|
||||||
font-style: normal;
|
|
||||||
display: block;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-top: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
color: #E1001A;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-userright {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
color: #666666;
|
|
||||||
font-size: 14px;
|
|
||||||
span{
|
|
||||||
display: block;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-userbottom {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top: 8px;
|
|
||||||
span{
|
|
||||||
color: #666666;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
i{
|
|
||||||
font-style: normal;
|
|
||||||
color: #E1001A;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-bottom {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 24px;
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
width: 130px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
line-height: 40px;
|
|
||||||
text-align: center;
|
|
||||||
color: #e2001a;
|
|
||||||
height: 40px;
|
|
||||||
border: 2px solid #e2001a;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
span:last-child{
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-title {
|
|
||||||
height: 52px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
border-bottom: 1px solid #d8d8d8;
|
|
||||||
justify-content: space-between;
|
|
||||||
span{
|
|
||||||
font-size: 14px;
|
|
||||||
color: #999999;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
em{
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
i{
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.rc-usertitle strong{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// /* 最小768px最大1920 *pc端/
|
|
||||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
|
||||||
.active {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #e2001a;
|
|
||||||
cursor: pointer;
|
|
||||||
// margin-left: 40px;
|
|
||||||
}
|
|
||||||
.unactive {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #444444;
|
|
||||||
cursor: pointer;
|
|
||||||
// margin-left: 80px;
|
|
||||||
}
|
|
||||||
.rc-header {
|
|
||||||
.rc-main {
|
|
||||||
width: 92%;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
.rc-headera {
|
|
||||||
display: flex;
|
|
||||||
height: 64px;
|
|
||||||
align-items: center;
|
|
||||||
border: 1px solid #D7D7D7;
|
|
||||||
border-radius: 3px 3px 0px 0px;
|
|
||||||
font-size: 18px;
|
|
||||||
span:first-child{
|
|
||||||
margin-left: 40px;
|
|
||||||
}
|
|
||||||
span{
|
|
||||||
margin-left: 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-userheader{
|
|
||||||
width: 100%;
|
|
||||||
height: 64px;
|
|
||||||
background: #F6F6F6;
|
|
||||||
border: 1px solid #D7D7D7;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 18px;
|
|
||||||
span:first-child{
|
|
||||||
margin-left: 173px;
|
|
||||||
}
|
|
||||||
span:last-child{
|
|
||||||
margin-right: 87px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-center {
|
|
||||||
width: 100%;
|
|
||||||
height: 220px;
|
|
||||||
border: 1px solid #D7D7D7;
|
|
||||||
.rc-usermain {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
height: 164px;
|
|
||||||
.rc-usercenter{
|
|
||||||
width: 25%;
|
|
||||||
em{
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-image {
|
|
||||||
border: 1px solid #D8D8D8;
|
|
||||||
margin-left: 40px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-right {
|
|
||||||
.rc-userbottom{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
margin-left: 16px;
|
|
||||||
|
|
||||||
em
|
|
||||||
{
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-top: 18px;
|
|
||||||
|
|
||||||
color: #E1001A;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-userright {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
color: #666666;
|
|
||||||
font-size: 16px;
|
|
||||||
span{
|
|
||||||
display: block;
|
|
||||||
margin-top: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-userbottomm {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 58%;
|
|
||||||
font-size: 20px;
|
|
||||||
color: #E1001A;
|
|
||||||
font-weight: bold;
|
|
||||||
i{
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pc-bottom {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-right: 40px;
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
width: 130px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
line-height: 40px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
color: #e2001a;
|
|
||||||
height: 40px;
|
|
||||||
border: 2px solid #e2001a;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 30px;
|
|
||||||
}
|
|
||||||
span:last-child{
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-bottom {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-title {
|
|
||||||
height: 55px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
border-bottom: 1px solid #d8d8d8;
|
|
||||||
justify-content: space-between;
|
|
||||||
span{
|
|
||||||
font-size: 16px;
|
|
||||||
color: #999999;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
strong{
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #444444;
|
|
||||||
}
|
|
||||||
em{
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
i{
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-left: 40px;
|
|
||||||
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.rc-usertitle{
|
|
||||||
margin-right: 73px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
em{
|
|
||||||
display: block;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user