!17 2022-1-17 Jiamin

Merge pull request !17 from Admin/sit-jiamin-v2

rc-busness/assets/css/discount.less

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

rc-busness/assets/css/global.less

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

rc-busness/assets/css/search.less

@@ -1,20 +1,23 @@
 .rc-top{
   position: relative;
-  }
+}
 
-  /deep/ .el-drawer{
+/deep/ .el-drawer{
   height: 60%;
-  }
+}
-  ul li ol li em strong i {
+ul li ol li em strong i {
   list-style: none;
   font-style: normal;
   
-  }
+}
-  .rc-main {
+.rc-main {
+  position: relative;
+  margin-top: 5.25rem;
   .usersearch {
     width: 100%;
     margin: 0 auto;
     overflow: hidden;
+    margin-top: 20px;
   }
   .active{
     border: 2px solid #E2001A;
@@ -28,19 +31,220 @@
     cursor: pointer;
   
    }
-  }
+}
-  //手机端
+//手机端
 @media screen and (max-width: 768px) {
-    .usercontentshow{
+  .active{
-        position: relative;
+    border: 2px solid #E2001A;
+    color: #E2001A;
+    cursor: pointer;
+  
   }
-  .rc-bottom{
+  .unactive{
-	position: relative;
+    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{
+  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{
+  position: fixed;
+    background: white;
+    bottom: 0;
+    left: 0;
     z-index: 9;
-	.rc-bottoma{
+  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{
   margin-bottom:2rem;
   }
+  
   .rc-footer{
   display: flex;
   align-items: center;
@@ -78,11 +282,21 @@
      margin-top: 0.24rem;
    }
   
+   .rc-product {
+    h2 {
+      font-size: 18px;
+      color: #333333;
+      margin-left: 12px;
+    }
+    .ts-scrollable{
+      margin-top: 1rem;
+    }
   
     .rc-productcat {
       display: flex;
       align-items: center;
       flex-wrap: nowrap;
+      margin-top: 1rem;
       .rc-cat {
         width: 32%;
         height: 0.34rem;
@@ -104,295 +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;
-    }
-    .rc-search {
-      width: 0.69rem;
-      height: 0.32rem;
-      background: #e1001a;
-      border-radius: 2rem;
-      text-align: center;
-      color: white;
-    }
-    .rc-title {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin: 0 auto;
   color: #333333;
-      margin-top: 12px;
-      h2 {
-        font-size: 18px;
-        color: #333333;
-        margin-left: 12px;
-      }
-      span {
-        font-size: 14px;
-        color: #666666;
-        border-bottom: 1px solid #666666;
   display: block;
-        margin-right: 8px;
+}
-      }
+.ts-scrollable{}
-    }
+.active{
+border: 2px solid #E2001A;
+color: #E2001A;
+cursor: pointer;
 
-    .rc-variety {
+}
-      ul {
+.unactive{
-        display: flex;
+border: 2px solid #d7d7d7;
-        align-items: center;
+color:#999999;
-        flex-wrap: nowrap;
+cursor: pointer;
-        overflow: hidden;
-        width: 100%;
 
-      }
+}
-      ul li {
+.rc-main {
-        width: 80px;
+  margin-top: 7.25rem;
-        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;
+.ts-scrollable-container{
-          height: 16px;
+  margin-top: 40px;
-        }
+}
-     
+/deep/.el-dialog {
-      }
-    }
-  
-    .rc-productright {
-      display: flex;
-      align-items: center;
-      img {
-        width: 24px;
-        height: 20px;
-        margin-left: 15px;
-      }
-      span {
-        font-size: 14px;
-        color: #666666;
-        margin-left: 8px;
-      }
-    }
-  
-    .rc-prefecture{
-        display: flex;
-        h2{
-            font-size: 16px;
-  color: #333333;
-  margin-left: 12px;
-        }
-          ol{
-            display: flex;
-        align-items: center;
-        flex-wrap: nowrap;
-        font-size: 12px;
-        text-align: center;
-        width: 80%;
-        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{
+  /deep/.van-search__action{
-        display: flex;
+    display: block;
-        justify-content: center;
+  }
-        font-size: 16px;
+  .rc-search {
     width: 100%;
-        padding: 40px 0 40px 0;
+    text-align: center;
-        span{
+    font-size:1.25rem ;
-    width: 160px;
+    color: #666666;
-    height: 48px;
-    border: 2px solid #E2001A;
-    border-radius: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #E2001A;
-    cursor: pointer;
-        }
-        em{
-          font-style: normal;
-          width: 164px;
-    height: 48px;
-    background: #E2001A;
-    cursor: pointer;
-    border-radius: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #FFFFFF;
-    margin-left: 40px;
-        }
-      }
-    .rc-bottom{
-       .rc-cat{
-         margin-top: 24px;
   }
   .rc-productcat {
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
-        .rc-cat {
+    justify-content: space-between;
+    margin-top: 32px;
+    ol{
+      display: flex;
+      align-items: center;
+      flex-flow: row;
+      .ts-standard-btn{
         width: 237px;
         height: 48px;
-    border-radius: 30px;
+background: #FFFFFF;
-          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;
-          margin-left: 16px;
+      color: #666666;
-           font-size: 14px;
+      font-size: 0.87rem;
-          span {
+      margin-left: 0.94rem;
-            margin-left: 3px;
+      margin-top: 0;
-          }
+      img{
-    
+        width: 1rem;
-          img {
+        height: 1rem;
-            width: 24px;
-            height: 16px;
       }
+      span{
+        display: block;
+        margin-left: 0.5rem;
+        display: block;
     
       }
     }
   
-    
-    
-    }
-      .form-search {
-        display: none;
   }
   .rc-title {
     width: 100%;
@@ -419,6 +439,96 @@ margin-top: 20px;
     }
   }
   
+  .rc-button
+  {
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    width: 100%;
+    padding: 40px 0 40px 0;
+    span
+    {
+      width: 160px;
+      height: 48px;
+      border: 2px solid #E2001A;
+      border-radius: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #E2001A;
+      cursor: pointer;
+    }
+    em{
+      font-style: normal;
+      width: 164px;
+      height: 48px;
+      background: #E2001A;
+      cursor: pointer;
+      border-radius: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #FFFFFF;
+      margin-left: 40px;
+    }
+  }
+
+.rc-bottom{
+      .rc-productcat {  
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    .rc-cat {
+    width: 237px;
+height: 48px;
+border-radius: 30px;
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 16px;
+       font-size: 14px;
+      span {
+        margin-left: 3px;
+      }
+
+      img {
+        width: 24px;
+        height: 16px;
+      }
+   
+    }
+  }
+
+
+
+}
+  .form-search {
+    width: 100%;
+    height: 110px;
+  }
+  /deep/.van-search__content--square{
+   background: white;
+  }
+  .van-search__content--square{
+    height: 110px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: white;
+  }
+  /deep/.van-field__left-icon
+  {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  /deep/.van-field__body
+  {
+  height: 110px;
+  }
+
+
   .rc-variety {
       margin-top: 30px;
     ul {
@@ -431,21 +541,23 @@ margin-top: 20px;
       
     }
     ul li {
-          width: 80px;
+      width: 130px;
-          height: 32px;
+      height: 40px;
       background: #ffffff;
-          border: 1px solid #d7d7d7;
+      border: 2px solid #D7D7D7;
-          border-radius: 100px;
+      border-radius: 30px;
       text-align: center;
       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 {
-          margin-top: 30px;
     h2 {
       font-size: 18px;
       color: #333333;
@@ -457,21 +569,21 @@ margin-top: 20px;
     align-items: center;
     flex-wrap: nowrap;
     .rc-cat {
-          width: 237px;
+      width: 327px;
       height: 48px;
       border-radius: 30px;
       background: #ffffff;
-        
       border-radius: 100px;
       display: flex;
       align-items: center;
       justify-content: center;
-          margin-left: 16px;
       font-size: 14px;
-          span {
+    &:last-child{
-            margin-left: 3px;
+      margin-left: 16px;
+    }
+    span {
+      margin-left: 0px;
     }
-    
     img {
       width: 24px;
       height: 16px;
@@ -494,101 +606,4 @@ margin-top: 20px;
       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
-          }
-      }
   }

rc-busness/pages/index.vue

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

rc-busness/pages/personal/discount.vue

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

rc-busness/pages/personal/settlement.vue

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

rc-busness/pages/productdetails/productlist.vue

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

rc-busness/pages/usersearch/search.vue

@@ -1,9 +1,8 @@
 <template>
 <div>
   <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="form-search">
         <van-search
@@ -18,35 +17,39 @@
           </template>
         </van-search>
       </div>
-      <div class="rc-title">
+      <div class="rc-max-width--xl rc-title">
-        <h2>热门搜索</h2>
+        <strong>热门搜索</strong>
         <span class="rc-change">换一批</span>
       </div>
-      <div class="rc-variety">
+      <div class="rc-max-width--xl rc-variety">
         <ul>
           <li v-for="(item, index) in searchdata" :key="index"  @click="selectsearch(item, index)" :class="activeIndexa == index ? 'active' : 'unactive'">
             {{ item.title }}
           </li>
         </ul>
       </div>
-
+      <div class="usersearch">
       <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-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=""  />
             <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="" />
             <span @click="usershow()">筛选</span>
           </div>
         </div>
       </div>
 
-      <div class="rc-age">
+      <div class="ts-scrollable-container">
-        <h2>专区:</h2>
+        <strong>专区:</strong>
       	<ol class="ts-scrollable">
 						<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
 							{{ item.tagName }}
@@ -54,56 +57,64 @@
 					</ol>
       </div>
 
-        <div class="rc-age">
+        <div class="ts-scrollable-container">
-        <h2>年龄:</h2>
+        <strong>年龄:</strong>
       		<ol class="ts-scrollable">
 						<li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
 							{{ item.tagName }}
 						</li>
 					</ol>
       </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">		
-         <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">
 										<img :src=item.picture alt="">   
 									</div>
-                    <span>{{item.name}}</span>
-                    <i>{{item.price}}</i>
 								</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>
 				</ul>
-
 			</div>
-</div>
-    </div>
-
-
 			<div class="usershow" v-if="openshow">
-  <div class="rc-show">
+				<div class="rc-show"></div>
-      
-</div>
 			</div>
-
 		</div>
-  <div v-if="isadrond">
+    <div v-if="isadrond" class="useronshow">
     <div class="rc-mubu" v-if="isshow" @click="usershow()">
    </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-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=""  />
             <span>{{ item.title }}</span>
+               </li>
+
+             </ol>
+        </div>
       </div>
 
-        </div>
+      <div class="ts-scrollable-container">
-    <div class="rc-age">
+        <strong>专区:</strong>
-        <h2>专区:</h2>
       	<ol class="ts-scrollable">
 						<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
 							{{ item.tagName }}
@@ -111,100 +122,99 @@
 					</ol>
       </div>
 
-        <div class="rc-age">
+        <div class="ts-scrollable-container">
-        <h2>年龄:</h2>
+        <strong>年龄:</strong>
       		<ol class="ts-scrollable">
 						<li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
 							{{ item.tagName }}
 						</li>
 					</ol>
       </div>
-       <div class="rc-age">
+          <div class="ts-scrollable-container">
-        <h2>功能:</h2>
+        <strong>功能:</strong>
       		<ol class="ts-scrollable">
 						<li v-for="(item, index) in catagea" :key="index"  @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
 							{{ item.tagName }}
 						</li>
 					</ol>
       </div>
-
+       <div class="ts-scrollable-container">
-       <div class="rc-age">
+        <strong>品种:</strong>
-        <h2>品种:</h2>
       		<ol class="ts-scrollable">
 						<li v-for="(item, index) in catageb" :key="index"  @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
 							{{ item.tagName }}
 						</li>
 					</ol>
       </div>
-  </div>
+</div>
-   <div class="rc-footer">
+</div>
-
-     <span @click="usershow()">取消</span>
-     <em @click="usershow()">确定</em>
-   </div>
-
   </div>
   </div>
-
     <el-dialog
     :visible.sync="dialogInfo1"
     hegight="700px"
   
     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=""  />
-            <span>{{ item.name }}</span>
+            <span>{{ item.title }}</span>
+               </li>
+             </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 prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
-            {{ item.title }}
+							{{ item.tagName }}
 						</li>
 					</ol>
       </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'">
-            {{ item.title }}
+							{{ item.tagName }}
 						</li>
 					</ol>
       </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'">
-            {{ item.title }}
+							{{ item.tagName }}
 						</li>
 					</ol>
       </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'">
-            {{ item.title }}
+							{{ item.tagName }}
 						</li>
 					</ol>
       </div>
-  </div>
+</div>
-  </div>
+</div>
-
    <div class="rc-button">
      <span @click="openclose()">取消</span>
      <em>确认</em>
    </div>
   </el-dialog>
+
+
 	</div>
+  	<!-- rc-main end -->
+
+
+
   </div>
 </template>
 
@@ -448,6 +458,10 @@ this.userst();
     },
 
            async usetmessage() {
+             this.$nextTick(() => {
+   this.$refs.userstandard[0].style.margin=0 + 'px'
+})
+            
       let data = await biaome(this.value,10);
       if(data){
         this.rccontair=data;
@@ -503,7 +517,7 @@ this.dialogInfo1=false;
     
         this.isadrond=true;
         this.isshow=true;
-           this.$refs.usercontent.style.display='none  ';
+          //  this.$refs.usercontent.style.display='none  ';
     this.dialogInfo1=false;
       
         })
@@ -645,7 +659,7 @@ this.dialogInfo1=false;
         this.$nextTick(() => {
       this.isshow=false;
             // dom元素更新后执行，因此这里能正确打印更改之后的值
-            this.$refs.usercontent.style.display='block  ';
+            // this.$refs.usercontent.style.display='block  ';
         })
     },