更改样式与功能

rc-busness/assets/css/product-list.less

@@ -32,6 +32,53 @@ ul li ol li em strong i {
 
 	.usercontentshow{
 		position: relative;
+		.rc-productcat {
+			display: flex;
+			align-items: center;
+			flex-wrap: nowrap;
+			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 {
+		  height: 1rem;
+		  }
+		  span {
+		  margin-left: 0.18rem;
+		  }
+				}
+			  }
+			.userrccat{
+				width: 32%;
+				height: 34px;
+				background: #ffffff;
+				border-radius: 100px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-left: 0;
+				font-size: 14px;
+				span {
+					margin-left: 3px;
+				}
+				img {
+					width: 24px;
+					height: 16px;
+				}
+				border: 2px solid #E2001A;
+			}
+		}
 		.userrccat{
 			width: 32%;
 			height: 34px;
@@ -101,48 +148,7 @@ ul li ol li em strong i {
     height: 617px;
     background: white;
     z-index: 999;
-	.rc-productcat {
+
-		display: flex;
-		align-items: center;
-		flex-wrap: nowrap;
-		.rc-cat {
-			width: 32%;
-			height: 34px;
-			background: #ffffff;
-			border-radius: 100px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			margin-left: 0;
-			font-size: 14px;
-			span {
-				margin-left: 3px;
-			}
-			img {
-				width: 24px;
-				height: 16px;
-			}
-		}
-		.userrccat{
-			width: 32%;
-			height: 34px;
-			background: #ffffff;
-			border-radius: 100px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			margin-left: 0;
-			font-size: 14px;
-			span {
-				margin-left: 3px;
-			}
-			img {
-				width: 24px;
-				height: 16px;
-			}
-			border: 2px solid #E2001A;
-		}
-	}
 
 }
 
@@ -227,6 +233,7 @@ ul li ol li em strong i {
 		justify-content: center;
 		font-size: .14rem;
 		margin-right:.2rem;
+		margin-left: 16px;
 		span {
 			margin-left: 3px;
 		}
@@ -336,6 +343,7 @@ ul li ol li em strong i {
 	}
 	.online{
 		width:100%;
+		margin-top: 17px;
 	   &.bold{
 		   height:0.5rem;
 		   margin-top: 5rem;
@@ -493,7 +501,7 @@ border-radius: 30px;
 			margin-left: 16px;
 		}
 		span {
-			margin-left: 0px;
+			margin-left: 4px;
 		}
 		img {
 			width: 24px;
@@ -550,9 +558,9 @@ border-radius: 30px;
   }
 */
 .ts-scrollable-container{
-	overflow-y: hidden;
+
-	overflow-x: clip;
 	width: 100%;
+	margin-top: 18px;
    h2{
 	   display: flex;
 	   align-items: center;

rc-busness/assets/css/search.less

@@ -54,6 +54,9 @@ ul li ol li em strong i {
     box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
     height: 80px;
     align-items: center;
+    position: absolute;
+    bottom: 0;
+    padding:0 20px 0 20px;
     span
     {
       width: 160px;
@@ -176,6 +179,9 @@ strong{
 //  我想搜
 .usercontentshow{
   position: relative;
+  .rc-column{
+    padding-bottom: 0;
+  }
   .rc-productcat {
     display: flex;
     align-items: center;
@@ -203,6 +209,9 @@ span {
 margin-left: 0.18rem;
 }
       }
+      li:first-child{
+        margin-left: 0;
+      }
     }
 //筛选
     .userselect{
@@ -283,6 +292,7 @@ border-radius: 100px;
 .rc-bottom{
   position: fixed;
     background: white;
+    height: 617px;
     bottom: 0;
     left: 0;
     z-index: 9;

rc-busness/pages/productdetails/productlist.vue

@@ -11,17 +11,19 @@
         <div class="usercontentshow" ref="usercontent">
           <div class="rc-product ts-scrollable-container">
             <div class="rc-productcat ts-scrollable">
-              <div
+                     <ol>
-                class="rc-cat"
+                  <li
-                v-for="(item, index) in userproduct"
+                    v-for="(item, index) in userproduct"
-                :key="index"
+                    :key="index"
-                ref="userclicks"
+                     @click="selectGoods(item, index)"
-                @click="selectGoods(item, index)"
+                   :class="activeIndex == index ? 'active' : 'unactive'"
-                :class="activeIndex == index ? 'active' : 'unactive'"
+                    class="ts-standard-btn"
-              >
+                    ref="userstandard"
-                <img :src="item.catimage" alt="" />
+                  >
-                <span>{{ item.title }}</span>
+                    <img :src="item.catimage" alt="" />
-              </div>
+                    <span>{{ item.title }}</span>
+                  </li>
+                </ol>
             </div>
           </div>
           <div class="online rc-md-up"></div>
@@ -297,11 +299,13 @@
         <em>确认</em>
       </div>
     </el-dialog>
+       <MyFooter></MyFooter>
   </div>
 </template>
 
 <script>
 import Myheader from "~/components/header.vue";
+import MyFooter from '~/components/rc-footer.vue'
 import {
   userstype,
   biaome,
@@ -314,7 +318,7 @@ export default {
       value: "",
       isLoading: true,
       userstype: [],
-      activeIndex: "0",
+      activeIndex: "-1",
       allacindex: 0,
       userishwo: true,
       userishwo1: true,
@@ -504,16 +508,20 @@ export default {
   },
   components: {
     Myheader,
+    MyFooter
   },
   mounted() {
     let stype = this.$route.query.stype;
+        this.$nextTick(() => {
+        this.$refs.userstandard[0].style.margin = 0 + "px";
+      });
     this.userst();
-    this.activeIndex = stype;
+    // this.activeIndex = stype;
-    if (stype !== "" && stype !== undefined) {
+    // if (stype !== "" && stype !== undefined) {
-      this.onmessage(stype);
+    //   this.onmessage(stype);
-    } else {
+    // } else {
-      this.usetmessage();
+    //   this.usetmessage();
-    }
+    // }
   },
   methods: {
     async usersearch(stype, usertype) {
@@ -743,6 +751,9 @@ export default {
       this.activeIndexa = index;
     },
     selectage(item, index) {
+         if(this.activeIndex=='-1'){
+         this.activeIndex=0;
+       }
       let tagUsedAge = {};
       this.activeIndexc = index;
       this.userishwo1 = !this.userishwo1;
@@ -766,6 +777,9 @@ export default {
     },
     selectagc(item, index) {
       // let tagFunction = {};
+         if(this.activeIndex=='-1'){
+         this.activeIndex=0;
+       }
       this.activeIndexd = index;
       this.userishwo2 = !this.userishwo2;
       if (item.checked == false) {
@@ -796,6 +810,9 @@ export default {
       this.usersearch(this.userserachlist, this.activeIndex1);
     },
     selectagd(item, index) {
+         if(this.activeIndex=='-1'){
+         this.activeIndex=0;
+       }
       let tagBreed = {};
       this.activeIndexe = index;
       this.userishwo3 = !this.userishwo3;
@@ -818,6 +835,9 @@ export default {
       this.usersearch(this.userserachlist, this.activeIndex1);
     },
     selectproduct(item, index) {
+         if(this.activeIndex=='-1'){
+         this.activeIndex=0;
+       }
       this.activeIndexb = index;
       //  console.log(this.userishwo=!this.userishwo)
       if (item.checked == false) {

rc-busness/pages/usersearch/search.vue

@@ -219,12 +219,13 @@
                   </li>
                 </ol>
               </div>
-              <div class="rc-button">
+           
+            </div>
+          </div>
+             <div class="rc-button">
                 <span @click="openclose()">取消</span>
                 <em @click="openclose()">确认</em>
               </div>
-            </div>
-          </div>
         </div>
       </div>
       <el-dialog :visible.sync="dialogInfo1" hegight="700px" v-if="!isadrond">
@@ -312,11 +313,13 @@
       </el-dialog>
     </div>
     <!-- rc-main end -->
+      <MyFooter></MyFooter>
   </div>
 </template>
 
 <script>
 import Myheader from "~/components/header.vue";
+import MyFooter from '~/components/rc-footer.vue'
 import { biaome, userstype, searchchanpin } from "../../ajax/getData";
 export default {
   data() {
@@ -520,6 +523,7 @@ export default {
   },
   components: {
     Myheader,
+    MyFooter
   },
   mounted() {
     this.usetmessage();