Env setup

rc-busness/assets/css/index.less

@@ -1,4 +1,38 @@
-@media screen and (max-width:768px){
+@media screen and(min-width: 320px) and(max-width:768px){
+
+ 
+   
+    .searchBara{
+      position: fixed;
+      top: 0;
+      width: 100%;
+      position: fixed;
+       top:0;
+    background: white;
+    z-index: 9999;
+      overflow-x: auto;
+       white-space: nowrap;
+     span{
+       margin-top: 0.08rem;
+       display: block;
+     }
+   img{
+     width: 0.64rem;
+     height: 0.64rem;
+     display: block;
+   }
+     li{
+        display: inline-block;
+           margin-left: 0.20rem;
+           width: 0.64rem;
+           text-align: center;
+height: 0.64rem;
+background: #F6F6F6;
+border-radius: 50%;
+opacity: 1;
+     }
+   }
+  
   .rc-login{
     width: 92%;
     margin:0 auto;
@@ -133,7 +167,12 @@ ul{
 }
 img{
   width: 0.19rem;
-  height: 0.20rem;
+  height: 0.19rem;
+  display: block;
+}
+img:last-child{
+  width: 0.22rem;
+  height: 0.22rem;
   display: block;
 }
 span{
@@ -155,8 +194,8 @@ flex-direction: column;
     justify-content: center;
     margin-top: 8px;
     img{
-      width: 0.19rem;
-      height: 0.32rem;
+      width: 0.22rem;
+      height: 0.22rem;
       display: block;
     }
 }
@@ -223,8 +262,6 @@ flex-direction: column;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 100%;
-  height: 100%;
   border: 1px solid #d7d7d7;
 .rc-click{
   width: 100%;
@@ -238,7 +275,7 @@ flex-direction: column;
     width: 1.77rem;
     height: 100px;
     display: block;
-    margin-top: 0.20rem;
+    margin-top: 0.40rem;
   }
   span{
     font-size: 0.18rem;
@@ -270,6 +307,7 @@ text-overflow: -o-ellipsis-lastline;
     justify-content: center;
     position: relative;
     z-index: 9999;
+    padding-bottom: 0.34rem;
     i{
     font-style: normal;
     width: 1.30rem;
@@ -356,6 +394,8 @@ opacity: 1;
     .selectionswitch{
       .rc-conta{
         max-height: 1.9rem;
+        min-height: 1.9rem;
+
       }
            width: 100%;
            margin-top: 0.45rem;
@@ -389,11 +429,10 @@ border-radius: 0.03rem;
           }
 
           img{
-              width: 0.85rem;
+              width: 100%;
     display: flex;
     margin: 0 auto;
-    height: 1.14rem
-;
+    height:100%;
           }
           i{
 font-style: normal;
@@ -417,6 +456,7 @@ display: block;
     word-break: break-all;
     white-space: normal;
     height: 0.25rem;
+    margin-top: 0.08rem;
 
       }
       strong{
@@ -469,8 +509,8 @@ color: #FFFFFF;
 }
 
 
-
 @media screen and (min-width: 768px) and (max-width: 1920px){ 
+
   .sw-center{
     display: none;
   }
@@ -511,6 +551,12 @@ li{
   margin-top: 0.08rem;
 }
 }
+img{
+width: 0.30rem;
+height: 0.30rem;
+display: block;
+}
+
 img{
 width: 0.30rem;
 height: 0.30rem;

rc-busness/assets/css/search.less

@@ -250,16 +250,20 @@
         font-size: 12px;
         text-align: center;
         width: 80%;
+        overflow-x: auto;
+    white-space: nowrap;
           }
           li{
-              width: 40%;
+            display: inline-block;
+            text-align: center;
+            display: flex;
+            align-items: center;
 height: 26px;
 background: #FFFFFF;
 border: 1px solid #D7D7D7;
-  line-height: 26px;
-  float: left;
+padding: 0 5px 0 5px;
 border-radius: 100px;
-  margin-left: 9px;
+            
           }
     }
   
@@ -279,23 +283,27 @@
             font-size: 12px;
             text-align: center;
             width: 80%;
+            overflow-x: auto;
+            white-space: nowrap;
           }
           li{
-              width: 40%;
+            display: inline-block;
+            text-align: center;
+            display: flex;
+            align-items: center;
             height: 26px;
             background: #FFFFFF;
             border: 1px solid #D7D7D7;
-  line-height: 26px;
-  float: left;
+            padding: 0 5px 0 5px;
             border-radius: 100px;
-  margin-left: 9px;
-  
           }
     }
     .rc-contair{
         margin-top: 24px;
         .rc-rccontair{
-  height:160px;display:flex;align-items: center
+  height:1.6rem;display:flex;align-items: center;
+  width: 100%
+
         }
         ul{
             text-align: center;
@@ -315,10 +323,10 @@
             }
   
             img{
-                width: 85px;
+                width: 100%;
       display: flex;
       margin: 0 auto;
-      height: 114px
+      height: 100%
   ;
             }
             i{
@@ -342,6 +350,8 @@
             -webkit-box-orient: vertical;
             word-break: break-all;
             white-space: normal;
+            margin-top: 0.15rem;
+            height: 0.25rem;
         }
         strong{
             width: 130px;
@@ -360,6 +370,7 @@ margin-top: 20px;
         }
         .rc-click{
             max-height: 1.9rem;
+            min-height: 1.9rem;
         }
     }
   }

rc-busness/package.json

@@ -10,7 +10,7 @@
   },
   "config": {
     "nuxt": {
-      "host": "192.168.10.108",
+      "host": "localhost",
       "port": "8080"
     }
   },
@@ -26,11 +26,11 @@
     "less-loader": "^6.0.0",
     "nuxt": "^2.15.7",
     "nuxt-tailvue": "^1.0.95",
-    "postcss-px2rem": "^0.3.0",
-    
     "qrcodejs2": "^0.0.2",
+    "swiper": "^5.4.5",
     "vant": "^2.12.22",
-    "vue-awesome-swiper": "^4.1.1"
+    "vue-awesome-swiper": "^4.1.1",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@vant/area-data": "^1.1.5",

rc-busness/postcss.config.js

@@ -1,3 +1,4 @@
+/*
 module.exports = {
   plugins: {
       'postcss-pxtorem': {
@@ -6,3 +7,4 @@ module.exports = {
       }
   }
 }
+*/