adding JiaMin coding

rc-busness/assets/css/index.less

@@ -0,0 +1,936 @@
+@media screen and (max-width:768px){
+  .rc-login{
+    width: 92%;
+    margin:0 auto;
+  }
+   .userunlogin{
+    width: 100%;
+    height: 0.60rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .user-left{
+      display: flex;
+      align-items: center;
+      img{
+            width: 0.16rem;
+            height: 0.16rem;
+            display: block;
+      }
+      span{
+        color: #444444;
+        font-size: 0.16rem;
+       margin-left: 0.06rem;
+      }
+    }
+    .user-right{
+      img{
+        width: 8px;
+        height: 16px;
+        display: block;
+      }
+    }
+    
+   }
+  .van-swipe{
+    z-index: 9998;
+  }
+   .rc-usermessage{
+    width: 80%;
+    margin: 0 auto;
+    text-align: center;
+
+  em{
+    font-style: normal;
+    font-size: 0.3rem;
+    display: block;
+    padding-top: 0.8rem;
+
+color: #E1001A;
+  }
+  span{
+    font-size: 0.16rem;
+     
+        margin-top: 0.17rem;
+color: #666666;
+
+display: flex;
+align-items: center;
+justify-content: center;
+
+  }
+  i{
+     font-style: normal;
+     width: 1.57rem;
+height: 0.48rem;
+border: 2px solid #E2001A;
+border-radius: 0.30rem;
+display: block;
+line-height: 0.48rem;
+font-size: 0.16rem;
+color: #E2001A;
+
+margin: 0 auto;
+margin-top: 0.32rem;
+margin-bottom: 0.80rem;
+
+  }
+
+  }
+  .rc-video{
+    display: none;
+  }
+  .useraimg{
+  width: 100%;
+  height: 4.69rem;
+}
+
+  .van-swipe-item {
+    color: #fff;
+    height: 4.69rem;
+    width: 100%;
+    font-size: 0.20px;
+    line-height: 1.50rem;
+    text-align: center;
+    position: relative;
+    z-index: 9998;
+
+
+  }
+.rc-fixright{
+
+  width: 0.60rem;
+height: 1.81rem;
+position: fixed;
+right: 0;
+top: 30%;
+z-index: 9999;
+
+ul{
+  width: 60px;
+      height: 181px;
+      box-shadow: 0px 0px 6px rgb(0 0 0 / 10%);
+      background-color: white;
+      display: flex;
+      flex-direction: column;
+  li{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 0.18rem;
+  }
+  li:last-child{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 0.18rem;
+    margin-bottom: 0.2rem;
+  }
+}
+img{
+  width: 0.19rem;
+  height: 0.20rem;
+  display: block;
+}
+span{
+  font-size: 0.12rem;
+color: #666666;
+}
+.tuntop{
+  width: 60px;
+height: 60px;
+background: #FFFFFF;
+box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
+opacity: 1;
+display: block;
+color: #666666;
+font-size: 12px;
+display: flex;
+flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 8px;
+    img{
+      width: 0.19rem;
+      height: 0.32rem;
+      display: block;
+    }
+}
+}
+.rc-lunbo{
+   width: 100%;
+   margin-top: 0.46rem;
+   .rc-selection{
+     display: none;
+   }
+   h2{
+     text-align: center;
+     font-size: 0.26rem;
+     color: #E2001A;
+   }
+   #xxxFullScreen {
+    background-color: white;
+    margin-top: 0.40rem;
+    #swiper1 {
+    width: 100%;
+    overflow: hidden;
+    padding:  0 0 0.10rem 0;
+}
+ .swiper-container{
+   height: 6.45rem;
+ }
+.swiper-container, .swiper-container2 {
+    width: 100%;
+    // overflow: visible !important;
+    height: 100%;
+    position: relative;
+}
+#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
+    width: 3rem;
+    height: 6.45rem !important;
+
+}
+ 
+/* 上一张 */
+#swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev {
+    margin-top: 0.05rem;
+    height: 100%;
+
+}
+/* 下一张 */
+#swiper1 .swiper-container .swiper-wrapper .swiper-slide-next {
+    margin-top: 0.05rem;
+    height: 100%;
+
+}
+.swiper-container .swiper-wrapper .swiper-slide-active {
+    height: 100%;
+
+}
+.uservideo{
+  width: 100%;
+  height: 2.51rem;
+  display: block;
+}
+}
+.sw-center{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  height: 100%;
+  border: 1px solid #d7d7d7;
+.rc-click{
+  width: 100%;
+    display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+  img{
+    width: 1.77rem;
+    height: 100px;
+    display: block;
+    margin-top: 0.20rem;
+  }
+  span{
+    font-size: 0.18rem;
+color: #E2001A;
+display: block;
+margin-top: 0.20rem;
+
+  }
+  p{
+    font-size: 0.14rem;
+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;
+  width: 60%;
+  }
+  em{
+    font-style: normal;
+    font-size: 0.20rem;
+    color: #666666;
+  }
+  .sw-cen{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    position: relative;
+    z-index: 9999;
+    i{
+    font-style: normal;
+    width: 1.30rem;
+ height: 0.40rem;
+ border: 2px solid #E2001A;
+ border-radius: 0.30rem;
+ line-height: 0.40rem;
+ text-align: center;
+ color: #E2001A;
+ font-size: 0.14rem;
+ margin-top: 0.32rem;
+ display: block;
+    }
+  }
+  
+}
+}
+
+
+ 
+/* 中间的图片 */
+.swiper-container .swiper-wrapper .swiper-slide-active {
+    height: 165px !important;
+}
+.swiperWrap{
+  height: 469px;
+  width: 100%;
+  img{
+    height: 469px;
+    width: 100%;
+
+   
+  }
+   /deep/.swiper-pagination-bullet-active{
+     background: red;
+      width: 8px;
+    height: 8px;
+   }
+    /deep/.swiper-pagination-bullet{
+    width: 8px;
+    height: 8px;
+    background: #d7d7d7;
+ 
+}
+
+/deep/.swiper-pagination-bullet-active {
+    opacity: 1;
+    background-color: red!important;
+
+}
+
+
+}
+  .rc-main{
+    width: 100%;
+    margin-top: 0.40rem;
+    overflow-x: hidden;
+    overflow: hidden;
+    .ul-zhuan{
+       width: 100%;
+       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;
+      }
+    }
+
+    .selectionswitch{
+      .rc-conta{
+        max-height: 1.9rem;
+      }
+           width: 100%;
+           margin-top: 0.45rem;
+           h2{
+             text-align: center;
+             font-size: 0.26rem;
+            color: #E2001A;
+           }
+             .rc-contair{
+      margin-top: 0.24rem;
+      .rc-rccontair{
+height:1.60rem;display:flex;align-items: center
+      }
+      ul{
+          text-align: center;
+          align-items: center;
+        
+          li{
+                
+              width: 43%;
+              margin-top: 0.16rem;
+              flex-direction: column;
+              text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-flex;
+background: #FFFFFF;
+border: 1px solid #D7D7D7;
+margin-left: 0.15rem;
+border-radius: 0.03rem;
+          }
+
+          img{
+              width: 0.85rem;
+    display: flex;
+    margin: 0 auto;
+    height: 1.14rem
+;
+          }
+          i{
+font-style: normal;
+              font-size: 0.18rem;
+              margin-top: 0.08rem;
+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;
+    height: 0.25rem;
+
+      }
+      strong{
+          width: 1.30rem;
+         height: 0.40rem;
+border: 2px solid #E2001A;
+
+display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 30px;
+    margin: 0 auto;
+    font-size: 0.14rem;
+color: #E2001A;
+margin-top: 0.2rem;
+margin-bottom: 0.3rem;
+      }
+      .userserlect{
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        margin-top: 0.40rem;
+        span{
+width: 1.30rem;
+height: 0.40rem;
+background: #E2001A;
+text-align: center;
+line-height: 0.40rem;
+border-radius: 0.30rem;
+font-size: 0.14rem;
+color: #FFFFFF;
+        }
+
+      }
+  }
+    }
+  }
+  .active {
+    font-size: 0.14rem;
+     border: 1px solid red;
+     color: red;
+
+  }
+  .unactive {
+    font-size: 0.14rem;
+    color: #444444;
+     border: 1px solid #D7D7D7;
+  }
+}
+
+
+
+@media screen and (min-width: 768px) and (max-width: 1920px) {
+  .sw-center{
+    display: none;
+  }
+.useraimg{
+width: 100%;
+height: 4.69rem;
+}
+.van-swipe-item {
+  color: #fff;
+  height: 4.69rem;
+  width: 100%;
+  font-size: 0.20rem;
+  line-height: 1.50rem;
+  text-align: center;
+
+
+}
+.rc-fixright{
+width: 0.60rem;
+height: 1.81rem;
+background: #FFFFFF;
+box-shadow: 0px 0px 0.10rem rgba(0, 0, 0, 0.16);
+border-radius: 0.04rem;
+position: fixed;
+right: 0;
+top: 30%;
+display: flex;
+flex-direction: column;
+z-index: 9999;
+ul{
+height: 100%;
+li{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.08rem;
+}
+}
+img{
+width: 0.30rem;
+height: 0.30rem;
+display: block;
+}
+span{
+font-size: 0.12rem;
+color: #666666;
+}
+}
+.rc-lunbo{
+ width: 90%;
+ margin-top: 0.46rem;
+ margin: 0 auto;
+ position: relative;
+ margin-top: 1.50rem;
+ 
+ h2{
+   text-align: center;
+   font-size: 0.40rem;
+   color: #E2001A;
+ }
+ #xxxFullScreen {
+  background-color: white;
+  margin-top: 100px;
+  #swiper1 {
+  width: 100%;
+  overflow: hidden;
+}
+
+.swiper-container, .swiper-container2 {
+  width: 100%;
+  height: 6.18rem;
+  // overflow: visible !important;
+  position: relative;
+}
+#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
+  width: 100%;
+  border-radius: 0.10rem;
+  height: 6.18rem;
+}
+
+/* 上一张 */
+#swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev {
+  margin-top: 5px;
+  height: 6.18rem !important;
+}
+/* 下一张 */
+#swiper1 .swiper-container .swiper-wrapper .swiper-slide-next {
+  margin-top: 0.05rem;
+  height: 6.18rem !important;
+}
+.swiper-container .swiper-wrapper .swiper-slide-active {
+  height: 6.18rem !important;
+}
+.rc-video{
+position: relative;
+display: flex;
+.rc-right{
+  width: 4.40rem;
+height: 4.76rem;
+display: flex;
+margin-left: 1.95rem;
+align-items: center;
+justify-content: center;
+flex-direction: column;
+img{
+  width: 3.38rem;
+height: 2.01rem;
+display: block;
+}
+span{
+font-size: 0.26rem;
+display: block;
+margin-top: 0.46rem;
+color: #E2001A;
+}
+p{
+font-size: 0.16rem;
+width: 2rem;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
+  overflow: hidden;
+color: #666666;
+margin-top: 0.16rem;
+}
+em{
+font-style: normal;
+font-size: 0.22rem;
+color: #666666;
+display: block;
+margin-top: 0.16rem;
+}
+strong{
+  font-style: normal;
+  list-style: none;
+  width: 1.30rem;
+height: 0.40rem;
+border: 2px solid #E2001A;
+border-radius: 0.30rem;
+display: block;
+line-height: 0.40rem;
+text-align: center;
+color:#E2001A;
+font-size: 0.14rem;
+margin-top: 0.16rem;
+}
+}
+.uservideo{
+width: 5.60rem;
+height: 5.06rem;
+display: block;
+border: 1px solid red;
+
+}
+.userleft{
+position: absolute;
+top: 50%;
+left:0;
+margin-top: -0.115rem;
+img{
+  width: 0.11rem;
+  height: 0.22rem;
+  display: block;
+}
+}
+.userright{
+position: absolute;
+top: 50%;
+right:0;
+margin-top: -0.115rem;
+img{
+  width: 0.11rem;
+  height: 0.22rem;
+  display: block;
+}
+}
+}
+
+}
+
+}
+/* 中间的图片 */
+.swiper-container .swiper-wrapper .swiper-slide-active {
+  height: 1.65rem !important;
+}
+.swiperWrap{
+height: 4.69rem;
+width: 100%;
+img{
+  height: 4.69rem;
+  width: 100%;
+
+ 
+}
+ /deep/.swiper-pagination-bullet-active{
+   background: red;
+    width: 0.08rem;
+  height: 0.08rem;
+ }
+  /deep/.swiper-pagination-bullet{
+  width: 8rem;
+  height: 8px;
+  background: #d7d7d7;
+
+}
+
+/deep/.swiper-pagination-bullet-active {
+  opacity: 1;
+  background-color: red!important;
+
+}
+
+
+}
+.rc-main{
+
+
+  width: 100%;
+  margin-top: 0.40rem;
+  .van-tabs{
+    display: none;
+  }
+  ul{
+     width: 90%;
+      display: flex;
+      justify-content: center;
+    span{
+      margin-top: 0.08rem;
+      display: block;
+    }
+  img{
+    width: 1.58rem;
+    height: 1.58rem;
+    display: block;
+  }
+    li{
+       display: inline-flex;
+       cursor: pointer;
+       font-size: 16px;
+          margin-left: 0.40rem;
+          width: 1.58rem;
+          text-align: center;
+height: 1.58rem;
+background: #F6F6F6;
+border-radius: 50%;
+    }
+  }
+
+  .selectionswitch{
+         width: 100%;
+         h2{
+           text-align: center;
+           font-size: 0.40rem;
+          color: #E2001A;
+         }
+         .van-tabs{
+            display: none;
+         }
+ 
+  }
+  .rc-selection{
+    width: 100%;
+    ol{
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      li{
+font-size: 0.16rem;
+margin-left: 0.40rem;
+
+      }
+    }
+
+                     .rc-contair{
+    margin-top: 0.24rem;
+ 
+    ul{
+        text-align: center;
+      margin-top: 0.77rem;
+      display: block;
+      width: 100%;
+      float: left;
+        li{
+width: 3.20rem;
+  height: 5.60rem;
+  border-radius: 0.03rem;
+  display: inline-flex;
+  background: #FFFFFF;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #D7D7D7;
+  margin-top: 0.40rem;
+        }
+
+        img{
+         width: 1.69rem;
+height: 2.28rem;
+  display: flex;
+  margin: 0 auto;
+;
+        }
+        i{
+font-style: normal;
+            font-size: 0.18rem;
+            margin-top: 0.08rem;
+color: #666666;
+display: block;
+font-size: 0.22rem;
+
+color: #666666;
+            
+        }
+    }
+    span{
+font-size: 0.30rem;
+  color: #E2001A;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  margin-top:0.16rem;
+  -webkit-box-orient: vertical;
+
+    }
+    strong{
+        width: 1.30rem;
+       height: 0.40rem;
+border: 2px solid #E2001A;
+display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.30rem;
+  margin: 0 auto;
+  font-size: 0.14rem;
+color: #E2001A;
+margin-top: 0.24rem;
+    }
+    .userserlect{
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+      padding-bottom: 0.88rem;
+      padding-top: 0.80rem;
+      span{
+width: 1.30rem;
+height: 0.40rem;
+background: #E2001A;
+text-align: center;
+line-height: 0.40rem;
+border-radius: 0.30rem;
+font-size: 0.14rem;
+color: #FFFFFF;
+      }
+
+    }
+}
+  }
+}
+.active {
+  font-size: 0.16rem;
+   border: 1px solid red;
+   color: red;
+
+}
+.unactive {
+  font-size: 0.16rem;
+  color: #444444;
+   border: 1px solid #D7D7D7;
+}
+.rc-maa{
+    ul{
+     width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 0.77rem;
+    span{
+      margin-top: 0.08rem;
+      display: block;
+    }
+  img{
+    width: 1.58rem;
+    height: 1.58rem;
+    display: block;
+  }
+    li{
+       display: inline-block;
+       cursor: pointer;
+       font-size: 0.16rem;
+          margin-left: 0.40rem;
+          width: 1.58rem;
+          text-align: center;
+height: 1.58rem;
+background: #F6F6F6;
+border-radius: 50%;
+    }
+  }
+}
+
+
+  .userselection {
+ font-size: 0.16rem;
+
+color: #E2001A;
+
+}
+.unselection {
+  font-size: 0.16rem;
+ 
+}
+.rc-usermessage{
+  width: 50%;
+  margin: 0 auto;
+  text-align: center;
+
+em{
+  font-style: normal;
+  font-size: 0.30rem;
+  display: block;
+  padding-top: 0.80rem;
+
+color: #E1001A;
+}
+span{
+  font-size: 0.16rem;
+   
+      margin-top: 0.17rem;
+color: #666666;
+
+display: flex;
+align-items: center;
+justify-content: center;
+
+}
+i{
+   font-style: normal;
+   width: 1.57rem;
+height: 0.48rem;
+border: 2px solid #E2001A;
+border-radius: 0.30rem;
+display: block;
+line-height: 0.48rem;
+font-size: 0.16rem;
+color: #E2001A;
+
+margin: 0 auto;
+margin-top: 0.32rem;
+margin-bottom: 0.80rem;
+
+}
+
+}
+}

rc-busness/assets/css/search.less

@@ -0,0 +1,680 @@
+.rc-top{
+    position: relative;
+  }
+  
+  /deep/ .el-drawer{
+    height: 60%;
+  }
+  ul li ol li em strong i {
+    list-style: none;
+    font-style: normal;
+    
+  }
+  .rc-main {
+    width: 100%;
+    overflow: hidden;
+  
+    .usersearch {
+      width: 93%;
+      margin: 0 auto;
+      overflow: hidden;
+    }
+        .active{
+        border: 2px solid #E2001A;
+        color: #E2001A;
+        cursor: pointer;
+      }
+      .unactive{
+        border: 2px solid #d7d7d7;
+        color:#999999;
+        cursor: pointer;
+       }
+  }
+  //手机端
+@media screen and (max-width: 768px) {
+    .usercontentshow{
+        position: relative;
+          z-index: 995;
+    }
+    .rc-mubu{
+    height: 100%;
+    background: #333333;
+    opacity: 0.6;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 998;
+  
+  }
+  .rc-bottom{
+    .rc-footer{
+      position: absolute;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+       span{
+         width: 1.55rem;
+  height: 0.48rem;
+  border: 2px solid #E1001A;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   font-size: 0.14rem;
+   color: #E1001A;
+  border-radius: 0.30rem;
+  
+       }
+       em{
+         width: 1.55rem;
+         margin-left: 0.25rem;
+  height: 0.48rem;
+  background: #E2001A;
+  border-radius: 0.30rem;
+  font-size: 0.14rem;
+  color:#FFFFFF;
+  display: flex;
+  align-items: center;
+  font-style: normal;
+  justify-content: center;
+  list-style: none;
+       }
+    }
+     .rc-cat{
+       margin-top: 0.24rem;
+     }
+        .active{
+        border: 2px solid #E2001A;
+        color: #E2001A;
+        cursor: pointer;
+      
+      }
+      .unactive{
+        border: 2px solid #d7d7d7;
+        color:#999999;
+        cursor: pointer;
+      
+       }
+  position: relative;
+      height: 100%;
+      height: 6.17rem;
+      background: white;
+      z-index: 999;
+        .rc-productcat {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      .rc-cat {
+        width: 32%;
+        height: 0.34rem;
+        background: #ffffff;
+        border-radius: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 0.16rem;
+         font-size: 0.14rem;
+        span {
+          margin-left: 0.03rem;
+        }
+  
+        img {
+          width: 0.24rem;
+          height: 0.16rem;
+        }
+     
+      }
+    }
+  
+  }
+  
+    /deep/ .van-search__content {
+      width: 2.50rem;
+      height: 0.32rem;
+      border: 1px solid #d7d7d7;
+      border-radius: 2rem;
+      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;
+      }
+    }
+  
+    .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 {
+      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%;
+          }
+          li{
+              width: 40%;
+  height: 26px;
+  background: #FFFFFF;
+  border: 1px solid #D7D7D7;
+  line-height: 26px;
+  float: left;
+  border-radius: 100px;
+  margin-left: 9px;
+          }
+    }
+  
+  
+  
+      .rc-age{
+        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%;
+          }
+          li{
+              width: 40%;
+  height: 26px;
+  background: #FFFFFF;
+  border: 1px solid #D7D7D7;
+  line-height: 26px;
+  float: left;
+  border-radius: 100px;
+  margin-left: 9px;
+  
+          }
+    }
+    .rc-contair{
+        margin-top: 24px;
+        .rc-rccontair{
+  height:160px;display:flex;align-items: center
+        }
+        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: 85px;
+      display: flex;
+      margin: 0 auto;
+      height: 114px
+  ;
+            }
+            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;
+        }
+        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;
+        }
+    }
+  }
+  //pc端
+@media screen and (min-width: 768px) and (max-width: 1920px) {
+    /deep/.el-dialog {
+    width: 920px;
+    height: 570px;
+    background: #FFFFFF;
+    }
+      .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-cat{
+         margin-top: 24px;
+       }
+          .active{
+          border: 2px solid #E2001A;
+          color: #E2001A;
+          cursor: pointer;
+        
+        }
+        .unactive{
+          border: 2px solid #d7d7d7;
+          color:#999999;
+          cursor: pointer;
+        
+         }
+          .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 {
+        display: none;
+      }
+      .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;
+        }
+        .rc-change{
+            display: none;
+        }
+      }
+    
+      .rc-variety {
+          margin-top: 30px;
+        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;
+        //   color: #999999;
+          float: left;
+          line-height: 32px;
+          margin-left: 11px;
+        }
+      }
+      .rc-product {
+          margin-top: 30px;
+        h2 {
+          font-size: 18px;
+          color: #333333;
+          margin-left: 12px;
+        }
+      }
+      .rc-productcat {
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        .rc-cat {
+          width: 237px;
+    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 {
+            margin-left: 3px;
+          }
+    
+          img {
+            width: 24px;
+            height: 16px;
+          }
+      
+        }
+      }
+    
+      .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;
+          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-age{
+          display: flex;
+        
+          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{
+                margin-left: 40px;
+                width: 130px;
+    height: 40px;
+    border: 2px solid #D7D7D7;
+    border-radius: 30px;
+    background: #FFFFFF;
+    line-height: 40px;
+    float: left;
+    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
+          }
+      }
+    }