!17 2022-1-17 Jiamin

Merge pull request !17 from Admin/sit-jiamin-v2
This commit is contained in:
Admin 2022-01-17 03:19:55 +00:00 committed by Gitee
commit 2d1f2210bb
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
8 changed files with 747 additions and 1325 deletions

View File

@ -1,8 +1,6 @@
@media screen and (max-width:768px){ @media screen and (max-width:768px){
.allmain{ .allmain{
.rc-top{
margin-top: 2.5rem;
}
} }
.active { .active {
@ -29,7 +27,7 @@
display: block; display: block;
margin-left: 32px; margin-left: 32px;
font-weight: bold; font-weight: bold;
cursor: pointer;
} }
span:first-child { span:first-child {
margin-left: 0; margin-left: 0;
@ -156,9 +154,7 @@ margin-top: 8px;
@media screen and (min-width: 769px){ @media screen and (min-width: 769px){
.allmain{ .allmain{
.rc-top{
margin-top: 1.5rem;
}
.rs-dis{ .rs-dis{
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;
@ -192,6 +188,7 @@ margin-top: 8px;
margin-left: 40px; margin-left: 40px;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
cursor: pointer;
} }
span:first-child { span:first-child {

View File

@ -129,13 +129,14 @@ img, picture {
height: 100%; height: 100%;
background: #333333; background: #333333;
opacity: 0.6; opacity: 0.6;
position: absolute; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
z-index: 8; z-index: 8;
} }
.ts-scrollable-container{ .ts-scrollable-container{
display: flex; display: flex;
align-items: center;
h2{ h2{
margin:0; margin:0;
display: flex; display: flex;

View File

@ -11,10 +11,13 @@
} }
.rc-main { .rc-main {
position: relative;
margin-top: 5.25rem;
.usersearch { .usersearch {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
margin-top: 20px;
} }
.active{ .active{
border: 2px solid #E2001A; border: 2px solid #E2001A;
@ -31,16 +34,217 @@
} }
//手机端 //手机端
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.active{
border: 2px solid #E2001A;
color: #E2001A;
cursor: pointer;
}
.unactive{
border: 2px solid #d7d7d7;
color:#999999;
cursor: pointer;
}
//搜索
.usersearch {
strong{
font-size: 18px;
color: #333333;
display: block;
font-weight: bold;
}
}
.rc-max-width--xl{
/deep/ .van-search__content {
width: 7rem;
height: 2rem;
border: 1px solid #d7d7d7;
border-radius: 12.5rem;
background: white;
}
/deep/.van-search{
padding: 0;
}
.rc-search {
width: 4.31rem;
height: 2rem;
background: #e1001a;
border-radius: 2rem;
text-align: center;
color: white;
font-size:0.87rem ;
}
.rc-title {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
color: #333333;
margin-top: 1.5rem;
span {
font-size: 14px;
color: #666666;
border-bottom: 1px solid #666666;
display: block;
}
}
// 热门搜索
.rc-variety {
margin-top: 1.06rem;
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: 5px;
}
li:first-child{
margin-left: 0;
}
}
// 我想搜
.usercontentshow{ .usercontentshow{
position: relative; position: relative;
.rc-productcat {
display: flex;
align-items: center;
flex-wrap: nowrap;
margin-top: 1rem;
ol{
display: flex;
align-items: center;
flex-flow: row;
.ts-standard-btn{
width: 7.87rem;
height: 2.25rem;
background: #FFFFFF;
border-radius: 6.25rem;
background: none;
display: flex;
align-items: center;
justify-content: center;
margin-left: 1rem;
color: #999999;
img {
width: 1.5rem;
height: 1rem;
} }
span {
margin-left: 0.18rem;
}
}
}
//筛选
.userselect{
display: flex;
align-items: center;
justify-content: center;
color: #666666;
font-size: 0.87rem;
margin-left: 0.94rem;
margin-top: 0;
img{
width: 1rem;
height: 1rem;
}
span{
display: block;
margin-left: 0.5rem;
display: block;
}
}
}
.ts-scrollable-container{
margin-top: 0.93rem;
}
}
.usersearch{
.rc-column{
strong{
font-size: 0.875rem;
font-weight: normal;
}
}
}
.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%;
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-bottom{ .rc-bottom{
position: relative; position: fixed;
background: white; background: white;
bottom: 0;
left: 0;
z-index: 9; z-index: 9;
ol li{
background: none;
width: 7.87rem;
height: 2.25rem;
background: #FFFFFF;
border-radius: 6.25rem;
background: none;
display: flex;
align-items: center;
justify-content: center;
margin-left: 1rem;
}
}
.rc-bottoma{ .rc-bottoma{
margin-bottom:2rem; margin-bottom:2rem;
} }
.rc-footer{ .rc-footer{
display: flex; display: flex;
align-items: center; align-items: center;
@ -78,11 +282,21 @@
margin-top: 0.24rem; margin-top: 0.24rem;
} }
.rc-product {
h2 {
font-size: 18px;
color: #333333;
margin-left: 12px;
}
.ts-scrollable{
margin-top: 1rem;
}
.rc-productcat { .rc-productcat {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: nowrap; flex-wrap: nowrap;
margin-top: 1rem;
.rc-cat { .rc-cat {
width: 32%; width: 32%;
height: 0.34rem; height: 0.34rem;
@ -104,23 +318,101 @@
} }
} }
}
} }
/deep/ .van-search__content { }
width: 2.50rem; //pc端
height: 0.32rem; @media screen and (min-width: 768px){
border: 1px solid #d7d7d7; strong{
border-radius: 2rem; font-size: 26px;
background: white; color: #333333;
display: block;
}
.ts-scrollable{}
.active{
border: 2px solid #E2001A;
color: #E2001A;
cursor: pointer;
}
.unactive{
border: 2px solid #d7d7d7;
color:#999999;
cursor: pointer;
}
.rc-main {
margin-top: 7.25rem;
}
.ts-scrollable-container{
margin-top: 40px;
}
/deep/.el-dialog {
width: 920px;
height: 570px;
background: #FFFFFF;
}
/deep/.van-search__action{
display: block;
} }
.rc-search { .rc-search {
width: 0.69rem; width: 100%;
height: 0.32rem;
background: #e1001a;
border-radius: 2rem;
text-align: center; text-align: center;
color: white; font-size:1.25rem ;
color: #666666;
}
.rc-productcat {
display: flex;
align-items: center;
flex-wrap: nowrap;
justify-content: space-between;
margin-top: 32px;
ol{
display: flex;
align-items: center;
flex-flow: row;
.ts-standard-btn{
width: 237px;
height: 48px;
background: #FFFFFF;
border-radius: 30px;
background: none;
display: flex;
align-items: center;
justify-content: center;
margin-left: 40px;
img {
width: 24px;
height: 24px;
}
span {
margin-left: 8px;
}
}
}
//筛选
.userselect{
display: flex;
align-items: center;
justify-content: center;
color: #666666;
font-size: 0.87rem;
margin-left: 0.94rem;
margin-top: 0;
img{
width: 1rem;
height: 1rem;
}
span{
display: block;
margin-left: 0.5rem;
display: block;
}
}
} }
.rc-title { .rc-title {
width: 100%; width: 100%;
@ -142,198 +434,20 @@
display: block; display: block;
margin-right: 8px; margin-right: 8px;
} }
} .rc-change{
display: none;
.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 { .rc-button
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%;
overflow-x: auto;
white-space: nowrap;
}
li{
display: inline-block;
text-align: center;
display: flex;
align-items: center;
height: 26px;
background: #FFFFFF;
border: 1px solid #D7D7D7;
padding: 0 5px 0 5px;
border-radius: 100px;
}
}
.rc-contair{
margin-top: 24px;
.rc-rccontair{
height:1.6rem;display:flex;align-items: center;
width: 100%
}
ul{
text-align: center;
align-items: center;
flex-wrap: nowrap;
li{
width: 43%;
margin-top: 16px;
background: #FFFFFF;
border: 1px solid #D7D7D7;
margin-left: 15px;
display: inline-flex;
flex-direction: column;
border-radius: 3px;
}
img{
width: 100%;
display: flex;
margin: 0 auto;
height: 100%
;
}
i{
font-style: normal;
font-size: 18px;
margin-top: 8px;
color: #666666;
display: block;
}
}
span{
font-size: 0.16rem;
color: #666666;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
white-space: normal;
margin-top: 0.15rem;
height: 0.25rem;
}
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;
margin-bottom: 0.32rem;
margin-top: 20px;
color: #E2001A;
margin-top: 20px;
}
.rc-click{
max-height: 1.9rem;
min-height: 1.9rem;
}
}
}
//pc端
@media screen and (min-width: 768px) and (max-width: 1920px) {
/deep/.el-dialog {
width: 920px;
height: 570px;
background: #FFFFFF;
}
.rc-button{
display: flex; display: flex;
justify-content: center; justify-content: center;
font-size: 16px; font-size: 16px;
width: 100%; width: 100%;
padding: 40px 0 40px 0; padding: 40px 0 40px 0;
span{ span
{
width: 160px; width: 160px;
height: 48px; height: 48px;
border: 2px solid #E2001A; border: 2px solid #E2001A;
@ -358,10 +472,8 @@ margin-top: 20px;
margin-left: 40px; margin-left: 40px;
} }
} }
.rc-bottom{ .rc-bottom{
.rc-cat{
margin-top: 24px;
}
.rc-productcat { .rc-productcat {
display: flex; display: flex;
align-items: center; align-items: center;
@ -392,33 +504,31 @@ margin-top: 20px;
} }
.form-search { .form-search {
display: none;
}
.rc-title {
width: 100%; width: 100%;
height: 110px;
}
/deep/.van-search__content--square{
background: white;
}
.van-search__content--square{
height: 110px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
margin: 0 auto; background: white;
color: #333333;
margin-top: 12px;
h2 {
font-size: 18px;
color: #333333;
margin-left: 12px;
} }
span { /deep/.van-field__left-icon
font-size: 14px; {
color: #666666; display: flex;
border-bottom: 1px solid #666666; align-items: center;
display: block; justify-content: center;
margin-right: 8px;
}
.rc-change{
display: none;
} }
/deep/.van-field__body
{
height: 110px;
} }
.rc-variety { .rc-variety {
margin-top: 30px; margin-top: 30px;
ul { ul {
@ -431,21 +541,23 @@ margin-top: 20px;
} }
ul li { ul li {
width: 80px; width: 130px;
height: 32px; height: 40px;
background: #ffffff; background: #ffffff;
border: 1px solid #d7d7d7; border: 2px solid #D7D7D7;
border-radius: 100px; border-radius: 30px;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
// color: #999999; display: flex;
float: left; align-items: center;
line-height: 32px; justify-content: center;
margin-left: 11px; margin-left: 32px;
}
li:first-child{
margin-left: 0;
} }
} }
.rc-product { .rc-product {
margin-top: 30px;
h2 { h2 {
font-size: 18px; font-size: 18px;
color: #333333; color: #333333;
@ -457,21 +569,21 @@ margin-top: 20px;
align-items: center; align-items: center;
flex-wrap: nowrap; flex-wrap: nowrap;
.rc-cat { .rc-cat {
width: 237px; width: 327px;
height: 48px; height: 48px;
border-radius: 30px; border-radius: 30px;
background: #ffffff; background: #ffffff;
border-radius: 100px; border-radius: 100px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: 16px;
font-size: 14px; font-size: 14px;
span { &:last-child{
margin-left: 3px; margin-left: 16px;
}
span {
margin-left: 0px;
} }
img { img {
width: 24px; width: 24px;
height: 16px; height: 16px;
@ -494,101 +606,4 @@ margin-top: 20px;
margin-left: 8px; 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-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
}
}
} }

View File

@ -1523,11 +1523,6 @@ this.activeInde3=index;
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@media screen and(min-width: 320px) and(max-width:768px){
}
@import url("../assets/css/global.less"); @import url("../assets/css/global.less");
@import url("../assets/css/index.less"); @import url("../assets/css/index.less");

View File

@ -2,11 +2,10 @@
<div class="allmain"> <div class="allmain">
<Myheader></Myheader> <Myheader></Myheader>
<div class="online bold rc-md-down" id="fixed-catbar-seperator"></div>
<!-- <tabs></tabs> --> <!-- <tabs></tabs> -->
<div class="rc-top"></div> <div class="rc-top"></div>
<div class="rc-usermain"> <div class="rc-usermain">
<div class="online bold"></div>
<div class="rc"> <div class="rc">
<span <span
v-for="(item, index) in discountlist" v-for="(item, index) in discountlist"
@ -28,14 +27,14 @@
> >
<img :src="userimage" alt="" /> <img :src="userimage" alt="" />
<div class="rc-contair"> <div class="rc-contair">
<div class="rc-left" ref="userleft" id="userleft"> <div class="rc-left" ref="userleft" id="userleft" :style='usercolor'>
<div> <div>
<i></i><span>{{ item.couponAmount }}</span> <i></i><span>{{item.couponTypeId=='4'?(item.discount) *10:item.couponAmount}}</span>
</div> </div>
<strong>{{ item.couponName }}</strong> <strong>{{ item.couponName }}</strong>
</div> </div>
<div class="rc-right"> <div class="rc-right">
<i> <i :style='usercolor'>
{{ item.couponName }} {{ item.couponName }}
</i> </i>
<div class="rc-userfont"> <div class="rc-userfont">
@ -71,6 +70,7 @@ export default {
userload: true, userload: true,
pastdue: false, pastdue: false,
unused: false, unused: false,
usercolor:{color:'#e1001a'},
usermessage:[], usermessage:[],
userstates:0, userstates:0,
userimage: require("../../assets/image/unused.png"), userimage: require("../../assets/image/unused.png"),
@ -207,21 +207,26 @@ export default {
this.pastdue = true; this.pastdue = true;
this.userimage = require("../../assets/image/hasused.png"); this.userimage = require("../../assets/image/hasused.png");
this.userstates=1 this.userstates=1
this.userdraw(this.usermessage.data.mobile,0) console.log(this.$refs.userleft);
this.usercolor={color:'white'}
this.userdraw(this.usermessage.data.mobile,1)
} }
if (this.activeIndex == 0) { if (this.activeIndex == 0) {
this.userload = true; this.userload = true;
this.pastdue = false; this.pastdue = false;
this.userdraw(this.usermessage.data.mobile,0) this.userdraw(this.usermessage.data.mobile,0)
this.usercolor={color:'#e1001a'}
this.userstates=0 this.userstates=0
this.userimage = require("../../assets/image/unused.png"); this.userimage = require("../../assets/image/unused.png");
} }
if (this.activeIndex == 2) { if (this.activeIndex == 2) {
this.userload = false; this.userload = false;
this.pastdue = true; this.pastdue = true;
this.userdraw(this.usermessage.data.mobile,0) this.userdraw(this.usermessage.data.mobile,2)
this.userstates=2 this.userstates=2
this.usercolor={color:'white'}
this.userimage = require("../../assets/image/expired.png"); this.userimage = require("../../assets/image/expired.png");
} }
console.log(index); console.log(index);
@ -242,6 +247,18 @@ export default {
// } // }
// dis_livchat(option); // dis_livchat(option);
// } // }
},
directives: {
'color': {
bind: function(el, binding){
el.style.color = binding.value
},
inserted: function(el){
}
},
}, },
mounted() { mounted() {
if(this.usermessage!=='' ||this.usermessage.data!==undefined){ if(this.usermessage!=='' ||this.usermessage.data!==undefined){

View File

@ -3,6 +3,7 @@
<Myheader></Myheader> <Myheader></Myheader>
<tabs></tabs> <tabs></tabs>
<div class="online"></div> <div class="online"></div>
<div class="rc-main" v-for="(item,index) in goldmedal" :key="index" > <div class="rc-main" v-for="(item,index) in goldmedal" :key="index" >
<div class="rc-border"></div> <div class="rc-border"></div>
<div <div
@ -133,6 +134,21 @@ export default {
state: "李某某", state: "李某某",
tel: "15124117917", tel: "15124117917",
address: "广东省 广州市 天河区 天河客运站118号", address: "广东省 广州市 天河区 天河客运站118号",
},
{
state: "李某某",
tel: "15124117917",
address: "广东省 广州市 天河区 天河客运站118号",
},
{
state: "李某某",
tel: "15124117917",
address: "广东省 广州市 天河区 天河客运站118号",
},
{
state: "李某某",
tel: "15124117917",
address: "广东省 广州市 天河区 天河客运站118号",
}, },
], ],
@ -197,638 +213,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/settlement.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>

View File

@ -1,7 +1,6 @@
<template> <template>
<div> <div>
<Myheader></Myheader> <Myheader></Myheader>
<div class="rc-top"></div> <div class="rc-top"></div>
<div class="rc-max-width--xl rc-main"> <div class="rc-max-width--xl rc-main">
<div class="usersearch"> <div class="usersearch">

View File

@ -1,9 +1,8 @@
<template> <template>
<div> <div>
<Myheader></Myheader> <Myheader></Myheader>
<div class="rc-top"> <div class="rc-top"></div>
<div class="rc-max-width--xl rc-main">
<div class="rc-main">
<div class="usersearch"> <div class="usersearch">
<div class="form-search"> <div class="form-search">
<van-search <van-search
@ -18,35 +17,39 @@
</template> </template>
</van-search> </van-search>
</div> </div>
<div class="rc-title"> <div class="rc-max-width--xl rc-title">
<h2>热门搜索</h2> <strong>热门搜索</strong>
<span class="rc-change">换一批</span> <span class="rc-change">换一批</span>
</div> </div>
<div class="rc-variety"> <div class="rc-max-width--xl rc-variety">
<ul> <ul>
<li v-for="(item, index) in searchdata" :key="index" @click="selectsearch(item, index)" :class="activeIndexa == index ? 'active' : 'unactive'"> <li v-for="(item, index) in searchdata" :key="index" @click="selectsearch(item, index)" :class="activeIndexa == index ? 'active' : 'unactive'">
{{ item.title }} {{ item.title }}
</li> </li>
</ul> </ul>
</div> </div>
<div class="usersearch">
<div class="usercontentshow" ref="usercontent"> <div class="usercontentshow" ref="usercontent">
<div class="rc-product">
<h2>我想搜</h2> <div class="usercontentshow rc-product">
<strong>我想搜</strong>
<div class="rc-productcat ts-scrollable"> <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'" > <ol>
<li v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" class="ts-standard-btn" ref="userstandard">
<img :src="item.catimage" alt="" /> <img :src="item.catimage" alt="" />
<span>{{ item.title }}</span> <span>{{ item.title }}</span>
</div> </li>
<div class="rc-productright" @click="userselect">
</ol>
<div class="rc-productcat userselect" @click="userselect" >
<img src="../../assets/image/rc-usericon.png" alt="" /> <img src="../../assets/image/rc-usericon.png" alt="" />
<span @click="usershow()">筛选</span> <span @click="usershow()">筛选</span>
</div> </div>
</div> </div>
</div> </div>
<div class="rc-age"> <div class="ts-scrollable-container">
<h2>专区:</h2> <strong>专区:</strong>
<ol class="ts-scrollable"> <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 }}
@ -54,56 +57,64 @@
</ol> </ol>
</div> </div>
<div class="rc-age"> <div class="ts-scrollable-container">
<h2>年龄:</h2> <strong>年龄:</strong>
<ol class="ts-scrollable"> <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>
</ol> </ol>
</div> </div>
</div>
</div>
</div>
</div>
<div class="online"></div>
<!-- rc-main start -->
<div class="rc-max-width--xl">
<div class="usersearch">
<div class="rc-contair"> <div class="rc-contair">
<ul> <ul class="ts-product-list">
<li v-for="(item,index) in rccontair" :key="index"> <li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
<div class="rc-click" @click="selectproduce(item)"> <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item)">
<div class="rc-rccontair"> <div class="rc-rccontair">
<img :src=item.picture alt=""> <img :src=item.picture alt="">
</div> </div>
<span>{{item.name}}</span>
<i>{{item.price}}</i>
</div> </div>
<strong @click="userbuy()">立即购买</strong> <div class="rc-column">
<div class="rc-click" @click="selectproduce(item)">
<span>{{item.categoryName}}</span>
<i>0.001{{item.price}}</i>
</div>
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="userbuy()">立即购买</strong>
</div>
</li> </li>
</ul> </ul>
</div> </div>
</div>
</div>
<div class="usershow" v-if="openshow"> <div class="usershow" v-if="openshow">
<div class="rc-show"> <div class="rc-show"></div>
</div> </div>
</div> </div>
<div v-if="isadrond" class="useronshow">
</div>
<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 rc-main" v-if="isshow"> <div class="rc-bottom rc-full-width" v-if="isshow">
<div class="rc-bottoma" > <div class="usersearch">
<div class="usercontentshow rc-column" ref="usercontent">
<div class="usercontentshow rc-product">
<div class="rc-productcat ts-scrollable"> <div class="rc-productcat ts-scrollable">
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" > <ol>
<li v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" class="ts-standard-btn" ref="userstandard">
<img :src="item.catimage" alt="" /> <img :src="item.catimage" alt="" />
<span>{{ item.title }}</span> <span>{{ item.title }}</span>
</li>
</ol>
</div>
</div> </div>
</div> <div class="ts-scrollable-container">
<div class="rc-age"> <strong>专区:</strong>
<h2>专区:</h2>
<ol class="ts-scrollable"> <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 }}
@ -111,25 +122,24 @@
</ol> </ol>
</div> </div>
<div class="rc-age"> <div class="ts-scrollable-container">
<h2>年龄:</h2> <strong>年龄:</strong>
<ol class="ts-scrollable"> <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>
</ol> </ol>
</div> </div>
<div class="rc-age"> <div class="ts-scrollable-container">
<h2>功能:</h2> <strong>功能:</strong>
<ol class="ts-scrollable"> <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>
</ol> </ol>
</div> </div>
<div class="ts-scrollable-container">
<div class="rc-age"> <strong>品种:</strong>
<h2>品种:</h2>
<ol class="ts-scrollable"> <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 }}
@ -137,74 +147,74 @@
</ol> </ol>
</div> </div>
</div> </div>
<div class="rc-footer">
<span @click="usershow()">取消</span>
<em @click="usershow()">确定</em>
</div>
</div> </div>
</div> </div>
</div>
<el-dialog <el-dialog
:visible.sync="dialogInfo1" :visible.sync="dialogInfo1"
hegight="700px" hegight="700px"
v-if="!isadrond" v-if="!isadrond"
> >
<div class="usersearch">
<div class="rc-bottom"> <div class="usercontentshow" ref="usercontent">
<div class="rc-bottoma" > <div class="usercontentshow rc-product">
<div class="rc-productcat"> <div class="rc-productcat ts-scrollable">
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" > <ol>
<li v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" class="ts-standard-btn" ref="userstandard">
<img :src="item.catimage" alt="" /> <img :src="item.catimage" alt="" />
<span>{{ item.name }}</span> <span>{{ item.title }}</span>
</li>
</ol>
</div> </div>
</div> </div>
<div class="rc-age"> <div class="ts-scrollable-container">
<h2>专区:</h2> <strong>专区:</strong>
<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.tagName }}
</li> </li>
</ol> </ol>
</div> </div>
<div class="rc-age"> <div class="ts-scrollable-container">
<h2>年龄:</h2> <strong>年龄:</strong>
<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.tagName }}
</li> </li>
</ol> </ol>
</div> </div>
<div class="rc-age"> <div class="ts-scrollable-container">
<h2>功能:</h2> <strong>功能:</strong>
<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.tagName }}
</li> </li>
</ol> </ol>
</div> </div>
<div class="ts-scrollable-container">
<div class="rc-age"> <strong>品种:</strong>
<h2>品种:</h2> <ol class="ts-scrollable">
<ol>
<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.tagName }}
</li> </li>
</ol> </ol>
</div> </div>
</div> </div>
</div> </div>
<div class="rc-button"> <div class="rc-button">
<span @click="openclose()">取消</span> <span @click="openclose()">取消</span>
<em>确认</em> <em>确认</em>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
<!-- rc-main end -->
</div> </div>
</template> </template>
@ -448,6 +458,10 @@ this.userst();
}, },
async usetmessage() { async usetmessage() {
this.$nextTick(() => {
this.$refs.userstandard[0].style.margin=0 + 'px'
})
let data = await biaome(this.value,10); let data = await biaome(this.value,10);
if(data){ if(data){
this.rccontair=data; this.rccontair=data;
@ -503,7 +517,7 @@ this.dialogInfo1=false;
this.isadrond=true; this.isadrond=true;
this.isshow=true; this.isshow=true;
this.$refs.usercontent.style.display='none '; // this.$refs.usercontent.style.display='none ';
this.dialogInfo1=false; this.dialogInfo1=false;
}) })
@ -645,7 +659,7 @@ this.dialogInfo1=false;
this.$nextTick(() => { this.$nextTick(() => {
this.isshow=false; this.isshow=false;
// dom // dom
this.$refs.usercontent.style.display='block '; // this.$refs.usercontent.style.display='block ';
}) })
}, },