Pre Merge pull request !11 from Admin/sit-Carl

.gitignore

@@ -29,3 +29,5 @@ build/
 
 ### VS Code ###
 .vscode/
+/rc-busness/.nuxt/
+/rc-busness/node_modules/

rc-busness/README.md

@@ -0,0 +1,69 @@
+# rc-busness
+
+## Build Setup
+
+```bash
+# install dependencies
+$ npm install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
+
+## Special Directories
+
+You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.
+
+### `assets`
+
+The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets).
+
+### `components`
+
+The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components).
+
+### `layouts`
+
+Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
+
+
+### `pages`
+
+This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing).
+
+### `plugins`
+
+The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins).
+
+### `static`
+
+This directory contains your static files. Each file inside this directory is mapped to `/`.
+
+Example: `/static/robots.txt` is mapped as `/robots.txt`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).
+
+### `store`
+
+This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).

rc-busness/ajax/getData.js

@@ -0,0 +1,570 @@
+import fetch from '../config/async/fetch'
+/**
+ * 点击对应课程请求三级分类
+ * @param {*一级课程id} classId
+ */
+export const syncClass = classId => fetch('/api/listhome/' + classId)
+
+/**
+ * 筛选条件下拉的展示请求
+*/
+export const filter = () => fetch('/api/listhome/filter/data')
+
+/**
+ * 获取课程列表
+*/
+export const courselist = (offset, courseId, type, sort, selectScreen = []) => {
+  var selectScreenStr = ''
+  // 过滤请求数组
+  selectScreen.forEach(function (element) {
+    for (var i = 0; i < element.classlist.length; i++) {
+      if (element.classlist[i].status) {
+        selectScreenStr += element.classlist[i].id + '/'
+      }
+    }
+  })
+  var data = {
+    offset,
+    limit: '15',
+    type,
+    sort,
+    courseId,
+    selectScreenStr
+  }
+  return fetch( '/api/courselist', data)
+}
+/**
+ * 获取课程详情
+ */
+export const getDetail = (id) => {
+  fetch( '/api/courseDetail/index/' + id)
+}
+
+/**
+ * 模糊查询
+ */
+export const getleckCourse = (name, offset) => {
+  let data = {
+    limit: '15',
+    offset,
+    name
+  }
+  return fetch('/api/getleckCourse', data)
+}
+
+/**
+ * 加入购物车
+ */
+
+export const postCourseId = (productCode,buyCount,memberId, mobile,productImg,productName,productPrice,specifications) => {
+  var data = {
+    buyCount:buyCount,
+    memberId: memberId,
+    mobile:mobile,
+    productCode:productCode,
+    productImg: productImg,
+    productName:productName,
+    productPrice:productPrice,
+    specifications:specifications
+  }
+  return fetch('/insertCartProductInfo', data,'POST')
+}
+/**
+ * 是否存在购物车
+ */
+ export const isexistCart = (id, pet,address) => {
+  var data = {
+    memberId: id,
+  }
+  return fetch('getCartProductInfo?memberId='+id,data,'POST')
+}
+
+/**
+ * 删除购物车
+ */
+export const deleteCart = (memberId, productCode) => {
+  var data = {
+    memberId: memberId,
+    productCode:productCode
+  }
+  return fetch('cancelCartProductInfo',data,'POST')
+}
+/**
+ * 购物车批量提交
+ */
+export const mostAddClass = (id) => {
+  return fetch('/api/mostAddClass/', {id})
+}
+/**
+ * 删除购物车
+ */
+// export const deleteCart = (deleteArr = []) => {
+
+
+
+//   // 拿到数组处理一下把
+//   let id = deleteArr.join('-')
+//   return fetch('/api/deleteCart/', {id})
+// }
+/**
+ * 发送验证码
+ */
+ export const sendMsg = (mobile, pet,address) => {
+  var data = {
+    phoneNumber:mobile,
+  }
+  return fetch('sendMsg', data, 'POST' )
+}
+
+/**
+ * 发送验证码数据
+ */
+ export const vadatnmsg = (msgNum,hash,tamp) => {
+  var data = {
+    msgNum:msgNum,
+    tamp:tamp,
+    hash:hash
+  }
+  return fetch('validateNum', data, 'POST' )
+}
+
+/**
+ * 筛选标签
+ */
+ export const userstype = (stype, pet,address) => {
+  var data = {
+    petType:0,
+  }
+  return fetch('productSearchTag/query?petType=' + 0, data, 'POST' )
+}
+/**
+ * 登录
+ */
+export const userLongin = (mobile, pet,address) => {
+  var data = {
+    id:'',
+    mobile:mobile,
+  }
+  return fetch('member?type=get', data, 'POST' )
+}
+
+  //注册
+export const useredit = (mobile, pet,address) => {
+  var data = {
+    mobile:mobile,
+    memberName:'',
+    realName:'',
+    gender:'',
+    email:'',
+    openId:'',
+    unionId:'',
+    birthday:'',
+    provinceId:'',
+    cityId:'',
+    districtId:'',
+    storeCode:'',
+    remark:'',
+    memberMark:'',
+  
+    remark:''
+  }
+  return fetch('member?type=add', data, 'POST' )
+}
+   //查询标品全部信息
+// export const userquery = (mobile, pet,address) => {
+//   var data = {
+//     channelId:"15",
+//     secret:'H5@2021'
+
+//   }
+//   return fetch('h5/brand/query', data, 'POST' )
+// }
+//点击商品全部信息
+export const userquery = (stype) => {
+
+  console.log(stype);
+  var data = {
+    goodsName:stype
+
+  }
+  return fetch('goods?goodsName='+stype, data, 'POST' )
+}
+//商品全部信息
+export const userque = (stype) => {
+
+  console.log(stype);
+  var data = {
+  }
+  return fetch('goods', data, 'POST' )
+}
+
+
+
+//标品全部信息
+export const biaomessage = (stype,name) => {
+  console.log(stype);
+  var data = {
+    petType:stype,
+    page:1,
+    row:10
+  }
+  return fetch('product/query?petType='+stype, data, 'POST' )
+}
+
+export const searchchanpin = (stype,categoryName,tagUsedAge,tagFunction,tagBreed) => {
+  console.log(stype);
+  var data = {
+    petType:stype,
+    page:1,
+    row:10
+  }
+  
+  // return fetch('product/query?petType='+stype+'&categoryName='+categoryName+'&tagUsedAge='+tagUsedAge+'&tagFunction='+tagFunction+'&tagBreed='+tagBreed, data, 'POST' )
+}
+
+
+//查询订单
+export const userindent = (phoneNumber,orderNumber,) => {
+  var data = { 
+    phoneNumber:'18112621098',
+    orderNumber:orderNumber,
+  }
+  return fetch('orderMaster/?type=query', data, 'POST' )
+}
+//查询订单详情
+export const userin = (orderNumber,) => {
+  var data = { 
+    orderNumber:orderNumber,
+  }
+  return fetch('orderMaster/?type=query', data, 'POST' )
+}
+
+
+
+//取消订单
+export const canceldanhao = (orderNumber) => {
+  var data = {
+   
+    orderNumber:orderNumber,
+  }
+  return fetch('cancelOrder/', data, 'POST' )
+}
+
+
+export const biaomessa = (stype) => {
+  console.log(stype);
+  var data = {
+    name:stype,
+    page:1,
+    row:10
+  }
+  return fetch('product/query', data, 'POST' )
+}
+
+export const biaome = (stype) => {
+  console.log(stype);
+  var data = {
+    name:stype,
+    rows:10,
+    page:1,
+  }
+  return fetch('product/query?name='+stype,data, 'POST' )
+}
+
+
+
+//会员积分
+export const memberAccount = (stype) => {
+  console.log(stype);
+  var data = {
+    memberId:stype
+  }
+  return fetch('memberAccount?type=history', data, 'POST' )
+}
+
+
+//查询订单信息
+export const ordermaster = (stype) => {
+  console.log(stype);
+  var data = {
+  
+    memberId:'223782'
+  }
+  return fetch('memberAccount', data, 'POST' )
+}
+
+//微信支付
+export const payOrderWX = (stype) => {
+  console.log(stype);
+  var data = {
+   
+    memberId:'223782'
+  }
+  return fetch('memberAccount', data, 'POST' )
+}
+
+
+
+
+export const insercar = (stype) => {
+  console.log(stype);
+  var data = {
+    petType:stype
+  }
+  return fetch('product/insertCartProductInfo', data, 'POST' )
+}
+
+
+
+
+
+//查询猫狗商品信息
+export const catquery = (productCode,type) => {
+  console.log(productCode);
+  var data = {
+   
+    petType:0
+
+  }
+  return fetch('h5/product/query', data, 'POST' )
+}
+//查询猫狗商品信息
+export const dogquery = (productCode,type) => {
+  console.log(productCode);
+  var data = {
+  
+    petType:1,
+    pet_type:0
+
+  }
+  return fetch('h5/product/query', data, 'POST' )
+}
+
+
+
+
+
+//查询单个商品
+export const oncequery = (productCode) => {
+
+  var data = {
+  
+    productCode:productCode
+
+  }
+  return fetch( "goodsByProductCode?productCode="+productCode, data, 'POST' )
+}
+
+
+//查询单个商品
+export const goodsmessage = (productCode) => {
+
+  var data = {
+    productCode:productCode
+
+  }
+  return fetch( "productMaster/query?productCode="+productCode, data, 'POST' )
+}
+
+
+
+
+  //优惠券的插入
+  export const inserdiscount = (mobile,couponId) => {
+    var data = {
+      mobile:mobile,
+      couponId:couponId
+    }
+    return fetch('coupon?type=fetch', data, 'POST' )
+  }
+
+
+    //优惠券的查询
+    export const getdiscount = (memberId,channelSecurity,mobile) => {
+      var data = {
+        memberId:memberId,
+        mobile:mobile
+      }
+      return fetch('memberAddress?type=getAll', data, 'POST' )
+    }
+
+       //可用的优惠券
+       export const alldiscount = (memberId,channelSecurity,mobile) => {
+        var data = {
+          memberId:memberId,
+        }
+        return fetch('couponConfig?type=getAll', data, 'POST' )
+      }
+
+
+        //用户领取的优惠券
+        export const getdraw = (mobile,states) => {
+          var data = {
+            mobile:mobile,
+            status:states
+          }
+          return fetch('coupon?type=getAll', data, 'POST' )
+        }
+
+
+  //微信支付
+  export const generateOrderWX = (list) => {
+    var data = [{
+      
+
+      }]
+    return fetch('generateOrderWX', list, 'POST' )
+  }
+  //用户所有的优惠券
+    export const allConfig = (memberId,channelSecurity,mobile) => {
+      var data = {
+      }
+      return fetch('couponConfig?type=getAll', data, 'POST' )
+    }
+    
+
+      //用户领取优惠券
+      export const getConfig = (memberId,couponId) => {
+        var data = {
+          memberId:memberId,
+          couponId:couponId,
+        }
+        return fetch('coupon?type=fetch', data, 'POST' )
+      }
+
+      
+      //用户下的优惠券
+      export const userConfig = (memberId,couponId) => {
+        var data = {
+          memberId:memberId,
+          couponId:couponId,
+        }
+        return fetch('coupon?type=fetch', data, 'POST' )
+      }
+
+
+
+
+    //用户订单的查询
+    // export const customerorders = (memberId,channelSecurity,mobile) => {
+    //   var data = {
+    //     productName:'幼猫全价粮',
+    //     buyCount:'2',
+    //     productId:'210352',
+    //     payAmount:'517',
+    //     memberId:'844350',
+    //     phoneNumber:'18112621098',
+    //   }
+    //   return fetch('generateOrderWX', data, 'POST' )
+    // }
+
+  
+  //地址的查询
+  export const selectaddress = (memberId, pet,address) => {
+    var data = {
+      memberId:memberId,
+    }
+    return fetch('memberAddress?type=getAll', data, 'POST' )
+  }
+
+
+  //地址的添加                  //id/详细地址/ 收货人姓名/收货人电话号码/省份id/城市id/区域编码
+  export const editaddress = (memberId, detailAddress,recipient,tel,provinceId,cityId,districtId) => {
+    var data = {
+      memberId:844350,
+      provinceId:25,
+      cityId:36,
+      districtId:418,
+      detailAddress:'古美路1455弄46号302',
+      recipient:'蒋缘缘2',
+      recipientPhone:'13671516167',
+      zipCode:'214423',
+      default:false,
+    }
+    return fetch('memberAddress?type=add', data, 'POST' )
+  }
+
+      //删除
+      export const editdelete = (memberId,ids) => {
+        var data = {
+          memberId:memberId,
+          ids:ids,
+        }
+        return fetch('memberAddress?type=delete', data, 'POST' )
+      }
+
+    //地址的编辑
+    export const editupdate = (mobile, pet,address) => {
+      var data = {
+  
+        memberId:'3242',
+        id:'620111',
+        provinceId:'',
+        cityId:'',
+        districtId:'',
+        detailAddress:'江西省萍乡市',
+        recipient:'刘佳敏',
+        recipientPhone:'13407998521',
+        zipCode:'',
+        isDefault:'',
+      }
+      return fetch('memberAddress?type=update', data, 'POST' )
+    }
+
+//修改密码
+export const userchange = (id, pet,address) => {
+  var data = {
+    id:id,
+  }
+  return fetch('member?type=update', data, 'POST' )
+}
+
+
+/**
+ * 登录
+ */
+
+export const getCartList = (user) => {
+  var data = {
+    user
+  }
+  return fetch('/api/cartList', data)
+}
+
+/**
+ * 提交订单
+ */
+
+export const submitOrder = (phone, id, total, oldOrder) => {
+  var data = {
+    phone,
+    id,
+    total,
+    oldOrder
+  }
+  return fetch('/api/submitOrder', data)
+}
+
+/**
+ * 支付成功
+ */
+
+export const paySuccess = (id, uers) => {
+  var data = {
+    id,
+    uers
+  }
+  return fetch('/api/paySuccess', data)
+}
+/**
+ * 请求订单列表
+ */
+
+export const getOrderList = (user, status) => {
+  var data = {
+    user,
+    status
+  }
+  return fetch('/api/getOrderList', data)
+}
+

rc-busness/assets/css/global.less

@@ -0,0 +1,289 @@
+/*Body*/
+.rc-main {
+	padding:0 .2rem;
+	box-sizing:border-box;
+	margin:0 auto;
+}
+.ts-product-list{
+	li{
+		img{
+			width: 320px;
+			height:auto;
+			object-fit: contain;
+			display: flex;
+			margin: 0 auto;
+		}
+	}
+	.active{
+		color: #E2001A;
+		cursor: pointer;
+	}
+	.unactive{
+		color:#999999;
+		cursor: pointer;
+	}
+}
+
+.rc-age{
+	display: flex;
+	h2{
+		color:#333333;
+	}
+	ol{
+		display: flex;
+		align-items: center;
+		flex-wrap: nowrap;
+		text-align: center;
+		width: 86%;
+	}
+	li{
+		flex-shrink: 0;
+	}
+}
+
+.rc-mubu{
+	height: 100%;
+	background: #333333;
+	opacity: 0.6;
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	z-index: 8;
+}
+.ts-scrollable{
+	 overflow-y:hidden;
+	 overflow-x:auto;
+	 white-space: nowrap;
+	 &::-webkit-scrollbar{
+		display:none;
+	 }
+ }
+/*Body end*/
+
+/* 头部 */
+.rc-top{
+	position: relative;
+}
+/* 手机端 */
+@media screen and (max-width: 768px) 
+{
+	.rc-main{
+		width:100%;
+	}
+	.rc-top{
+		margin-top: 74px;
+	}
+	.rc-home-header{
+		width: 100%;
+		.rc-main
+		{
+			box-sizing: border-box;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			height: 70px;
+			background-color: #fff;
+			.rc-center{
+				display: none;
+			}
+		}
+		.c-left img{
+			width: 19px;
+			height: 14px;
+			display: block;
+		}
+		.c-right img{
+			width: 97px;
+			height: 35px;
+			display: block;
+		}
+		.rc-search img{
+			width: 19px;
+			height: 19px;
+			display: block;
+		}
+		&.fixed{
+			position:fixed;
+			top: 0;
+			left: 0;
+			z-index:3;
+		}
+   }
+	.rc-age{
+		h2{
+			font-size: 16px;
+			margin-right:.1rem;
+		}
+		ol{
+			font-size: 12px;
+		}
+		li{
+			width: .64rem;
+			height: 26px;
+			line-height: 26px;
+			border-radius: 100px;
+			margin-left: 9px;
+		}
+	}
+	.ts-scrollable{
+		.active{
+			border: 2px solid #E2001A;
+		}
+		.unactive{
+			border: 2px solid #d7d7d7;
+		}
+	}
+	.online{
+		height:.03rem;
+		width:100%;
+		background:#f6f6f6;
+		margin-top:0.23rem;
+	}
+	.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.19rem;
+			display: block;
+		}
+		img:last-child{
+			width: 0.22rem;
+			height: 0.22rem;
+			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.22rem;
+				height: 0.22rem;
+				display: block;
+			}
+		}
+	}
+}
+  /* pc端 */
+@media screen and (min-width: 768px) {
+	.rc-main {
+		width:100%;
+		max-width:1400px;
+	}
+	.online{
+		height:8px;
+		width:100%;
+		background:#f6f6f6;
+		margin-top:23px;
+	}
+	.rc-home-header{
+		height:120px ;
+		.rc-main
+		{
+			width: 92%;
+			margin: 0 auto;
+			//  position: fixed;
+			top: 0;
+			z-index: 989;
+			background: white;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			flex-direction: column;
+			height: 120px;
+			ul
+			{
+				display: flex;
+				align-items: center;
+				margin-bottom: 20px;
+				li
+				{
+					margin-right: 25px;
+					color: #666666;
+					cursor: pointer;
+					font-size: 16px;
+				}
+			}
+		}
+		.c-left{
+			display: none;
+		}
+		.rc-search{
+			display: none;
+		}
+		.c-left img
+		{
+			width: 19px;
+			height: 14px;
+			display: block;
+		}
+		.c-right img{
+			width: 120px;
+			height: 45px;
+			display: block;
+		}
+	}
+	
+	.ts-scrollable{
+		.rc-age{
+			h2
+			{
+			font-size: 20px;
+			color: #333333;
+			}
+			li
+			{
+				margin-left: 40px;
+				width: 100px;
+				height: 40px;
+				line-height: 40px;
+				font-size: 18px;
+			}
+		}
+	}
+
+}
+/* 头部 end */

rc-busness/assets/css/index.less

@@ -0,0 +1,915 @@
+@media screen and (max-width:768px){
+    .searchBara{
+		position: fixed;
+		width: 100%;
+		position: fixed;
+		top:70px;
+		background: white;
+		z-index: 9999;
+		overflow-x: auto;
+		white-space: nowrap;
+		overflow-y:hidden;
+		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;
+  }
+   .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: 2;
+  }
+   .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: auto;
+		object-fit: cover;
+	}
+
+	.van-swipe-item {
+		color: #fff;
+		height: 3.75rem;
+		width: 100%;
+		font-size: 0.20px;
+		line-height: 1.50rem;
+		text-align: center;
+		position: relative;
+	}
+	.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; //Auto adaption
+	}
+
+	/* 上一张 */
+	#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;
+		border: 1px solid #d7d7d7;
+		border-radius:4px;
+		.rc-click{
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+		}
+		img{
+			width: 1.6rem;
+			height: 1.6rem;
+			object-fit: cover;
+			display: block;
+			margin-top: 0.40rem;
+		}
+		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%;
+			text-align: center;
+			line-height:.24rem;
+		}
+		em{
+			font-style: normal;
+			font-size: 0.20rem;
+			color: #666666;
+		}
+		.sw-cen{
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			position: relative;
+			z-index: 3;
+			padding-bottom: 0.2rem;
+			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
+		{
+			margin-top: 0.40rem;
+			overflow: hidden;
+			.ul-zhuan
+			{
+				width: 100%;
+				overflow-x: auto;
+				white-space: nowrap;
+				padding-top:4px;
+				&::-webkit-scrollbar{
+					display:none;
+				}
+				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;
+		min-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: 100%;
+		display: flex;
+		margin: 0 auto;
+		height:100%;
+		}
+		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;
+		margin-top: 0.08rem;
+
+		}
+		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)
+{
+  .sw-center{
+    display: none;
+  }
+.useraimg{
+width: 100%;
+height: 4.69rem;
+object-fit: cover;
+}
+.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;
+}
+
+img{
+width: 0.30rem;
+height: 0.30rem;
+display: block;
+}
+span{
+font-size: 0.12rem;
+color: #666666;
+}
+}
+.rc-lunbo{
+ width: 100%;
+ 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-container2 {
+		width: 100%;
+		height: 6.18rem;
+		// overflow: visible !important;
+		position: relative;
+	}
+#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
+  width: 100%; 
+  //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;
+	justify-content: space-evenly;
+	.rc-right
+	{
+		width: 4.40rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		img{
+			width: 320px;
+			height: auto;
+		}
+		span{
+			font-size: 0.26rem;
+			display: block;
+			margin-top: 20px;
+			color: #E2001A;
+		}
+		p
+		{
+			font-size: 16px;
+			width:100%;
+			word-break: break-all;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 2; /* 这里是超出几行省略 */
+			color: #666666;
+			margin-top: 0.16rem;
+			text-align: center;
+		}
+		em
+		{
+			font-style: normal;
+			font-size: 0.22rem;
+			color: #666666;
+			display: block;
+			margin-top: 0.16rem;
+		}
+		strong
+		{
+			font-style: normal;
+			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;
+  }
+
+	.rc-ma
+	{
+		padding-bottom:28px;
+		.ul-zhuan{
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			flex-direction: row;
+			span{
+				margin-top: 0.08rem;
+				display: block;
+			}
+			img{
+				width: 1.58rem;
+				height: 1.58rem;
+				display: block;
+			}
+			li{
+				cursor: pointer;
+				font-size: 16px;
+				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: flex;
+			justify-content: space-between;
+			width: 100%;
+			li
+			{
+				border-radius: 3px;
+				display: inline-flex;
+				background: #FFFFFF;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				border: 1px solid #D7D7D7;
+				margin-top: 0.40rem;
+			}
+
+			img{
+				width: 320px;
+				height:auto;
+				object-fit: contain;
+				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: 3px 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/magnifier.less

@@ -0,0 +1,189 @@
+@media screen and (max-width:768px) {
+	.magnify {
+	  position: relative;
+	  width: 100%;
+	}
+	.left_contaner {
+	  width: 100%;
+	  height: 100%;
+	}
+	.left_contaner .middle_img {
+	  box-sizing: border-box;
+	  position: relative;
+	  width: 100%;
+	}
+	.left_contaner .shade {
+	  background-color: rgba(	135,206,235, .5);
+	  position: absolute;
+	  top: 0;
+	  left: 0;
+	  cursor: move;
+	  display: none;
+	}
+	.left_contaner .middle_img img {
+	  width: 100%;
+	  height: 100%;
+	}
+	.left_contaner .carousel {
+	  width: 2.56rem;
+	  margin: .20rem auto 0 auto;
+	  display: -webkit-flex;
+
+	}
+
+	.left_contaner .carousel .show_box {
+	  flex: 1;
+	  overflow: hidden;
+	  position: relative;
+	}
+	.left_contaner .carousel .arrow {
+	  flex-basis: 25px;
+	  cursor: pointer;
+	}
+	.left_contaner .carousel .left_arrow {
+	  display: flex;
+	  align-items: center;
+	  img{
+		width: .08rem;
+		height: .16rem;
+	  }
+
+	  // background: url('../assets/image/userleft.jpg') no-repeat;
+	  // background-position: center center;
+	}
+	.left_contaner .carousel .right_arrow {
+	  // background: url('../assets/image/userright.png') no-repeat;
+	  // background-position: center right;
+	  // width: 8px;
+	  // height: 16px;
+		display: flex;
+		align-items: center;
+		img{
+			width: .08rem;
+			height: .16rem;
+			display: block;
+			margin-left: 0.06rem;
+	  }
+	}
+	.left_contaner .carousel .picture_container {
+	  height: 100%;
+	  position: absolute;
+	  overflow: hidden;
+	  display: flex;
+	  align-items: center;
+	  top: 0;
+	  left: 0;
+	}
+	.left_contaner .picture_container .picture_item {
+	  height: 100%;
+	  width: 60px;
+	  height: 60px;
+	  object-fit: contain;
+	  border: 1px solid #d8d8d8 ;
+	  margin-left: 5px;
+	  box-sizing: border-box;
+	}
+	.left_contaner .picture_container .picture_item:hover {
+	  border: 2px solid #E2001A;
+	}
+	.left_contaner .picture_container .picture_item img {
+
+	  width: 100%;
+	  height: 100%;
+	}
+	.right_contanier {
+	  overflow: hidden;
+	  position: absolute;
+	  top: 0;
+	  border: 1px solid #ccc;
+	  display: none;
+	}
+	.right_contanier .big_img {
+	  position: absolute;
+	  top: 0px;
+	  left: 0px;
+	  display: none;
+	}
+
+
+}
+// //    /* 最小768px最大1920 *pc端/
+@media screen and (min-width: 768px) and (max-width: 1920px) {
+.magnify {
+  position: relative;
+}
+.left_contaner {
+  width: 100%;
+  height: 100%;
+}
+.left_contaner .middle_img {
+  box-sizing: border-box;
+  position: relative;
+}
+.left_contaner .shade {
+  background-color: rgba(	135,206,235, .5);
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: move;
+}
+.left_contaner .middle_img img {
+  width: 100%;
+  height: 100%;
+}
+.left_contaner .carousel {
+  width: 100%;
+  margin-top: 20px;
+  display: -webkit-flex;
+}
+.left_contaner .carousel .show_box {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+.left_contaner .carousel .arrow {
+  flex-basis: 25px;
+  cursor: pointer;
+}
+.left_contaner .carousel .left_arrow {
+  background: url('../image/rc-left.png') no-repeat;
+  background-position: center center;
+}
+.left_contaner .carousel .right_arrow {
+  background: url('../image/rc-left.png') no-repeat;
+  background-position: center right;
+}
+.left_contaner .carousel .picture_container {
+  height: 100%;
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+}
+.left_contaner .picture_container .picture_item {
+  height: 100%;
+  float: left;
+  padding: 5px;
+  box-sizing: border-box;
+}
+.left_contaner .picture_container .picture_item:hover {
+  border: 2px solid #E2001A;
+}
+.left_contaner .picture_container .picture_item img {
+  width: 100%;
+  height: 100%;
+}
+.right_contanier {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  border: 1px solid #ccc;
+}
+.right_contanier .big_img {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+
+
+}

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

@@ -0,0 +1,595 @@
+/deep/ .el-drawer{
+  height: 60%;
+}
+ul li ol li em strong i {
+  list-style: none;
+  font-style: normal;
+}
+.rc-main {
+	//rc-main start
+	margin-top:.23rem;
+	.usersearch {
+		margin: 0 auto;
+		overflow: hidden;
+	}
+	 //rc-main end
+}
+
+//手机端
+@media screen and (max-width: 768px) {
+	.usercontentshow{
+		position: relative;
+	}
+	.online{height:.08rem;}
+	.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: 155px;
+			height: 48px;
+			border: 2px solid #E1001A;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 14px;
+			color: #E1001A;
+			border-radius: 30px;
+		 }
+		em{
+			width: 155px;
+			margin-left: 25px;
+			height: 48px;
+			background: #E2001A;
+			border-radius: 30px;
+			font-size: 14px;
+			color:#FFFFFF;
+			display: flex;
+			align-items: center;
+			font-style: normal;
+			justify-content: center;
+			list-style: none;
+		}
+  }
+	position: relative;
+    height: 100%;
+    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;
+			}
+		}
+	}
+
+}
+
+  /deep/ .van-search__content {
+    width: 250px;
+    height: 32px;
+    border: 1px solid #d7d7d7;
+    border-radius: 200px;
+    background: white;
+  }
+  .rc-search {
+    width: 69px;
+    height: 32px;
+    background: #e1001a;
+    border-radius: 200px;
+    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;
+	margin-bottom:.1rem;
+	.rc-cat {
+		width: 32%;
+		height: 34px;
+		background: #ffffff;
+		border-radius: 100px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: .14rem;
+		margin-right:.2rem;
+		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;
+		}
+		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{
+		.rc-rccontair{
+			height:160px;
+			display:flex;
+			align-items: center;
+		}
+		ul{
+			text-align: center;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-evenly;
+			&:after{
+				content:"";
+				width:154px;
+			}
+			li{
+				margin-bottom: .16rem;
+				border: 1px solid #D7D7D7;
+				display: inline-flex;
+				border-radius: 4px;
+				flex-direction: column;
+				max-width:1.6rem;
+				.rc-column
+				{
+					text-align:center;
+					padding:0 .15rem;
+					box-sizing: border-box;
+					span{
+							height:.44rem;
+							font-size: 0.16rem;
+							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;
+							color:#E2001A;
+						}
+				}
+			}
+			img{
+				max-width:1.6rem;
+				display: flex;
+				margin: 0 auto;
+				height: auto;
+			}
+			i{
+				font-style: normal;
+				font-size: .18rem;
+				margin-top: 8px;
+				color: #666666;
+				display: block;
+			}
+		}
+		.rc-click{
+			/*
+			max-height: 1.9rem;
+			min-height: 1.9rem;
+			*/
+		}
+		strong{
+			width: 1.2rem;
+			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;
+			margin-bottom: 32px;
+		}
+	}
+}
+
+//pc端
+@media screen and (min-width: 768px){
+	/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-cat{
+		//margin-top: 24px;
+	}
+
+.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 {
+    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: 108px;
+			height: 48px;
+			border-radius: 30px;
+			background: #ffffff;
+			border-radius: 100px;
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			font-size: 14px;
+		span {
+			margin-left: 0px;
+			font-size: 18px;
+		}
+		img {
+			/*
+			width: 24px;
+			height: 16px;
+			*/
+			display:none;
+		}
+  
+    }
+  }
+
+  .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: 88%;
+        }
+        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;
+		display: flex;
+		flex-wrap: wrap;
+		width: 100%;
+		li{
+			border: 1px solid #D7D7D7;
+			border-radius: 3px;
+			box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.09);
+			margin-bottom:40px;
+			margin-right:16px;
+			max-width: 320px;
+			.rc-column
+			{
+				text-align:center;
+				padding:0 .15rem;
+				box-sizing: border-box;
+				margin-bottom: 32px;
+				span
+				{
+					height:80px;
+					font-size: 30px;
+					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;
+					color:#E2001A;
+				}
+				i{
+					font-style: normal;
+					font-size: 22px;
+					margin-top: 8px;
+					color: #666666;
+					display: block;
+				}
+				strong{
+					width: 1.2rem;
+					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;
+				}
+			}
+		}
+		img{
+			width: 320px;
+			height:auto;
+			object-fit: contain;
+			display: flex;
+			margin: 0 auto;
+		}
+	}
+	
+
+    .rc-rccontair{
+		height:320px;display:flex;align-items: center
+	}
+  }
+}

rc-busness/assets/css/producted.less

@@ -0,0 +1,721 @@
+// 手机端
+@media screen and(min-width: 320px) and(max-width:768px) {
+              .rc-button{
+          width: 100%;
+          display: flex;
+          align-items: center;
+          position: fixed;
+          justify-content: center;
+          height: 60px;
+          bottom: 0;
+          background-color: white;
+
+          span{
+            width: 160px;
+height: 48px;
+background: #E2001A;
+border-radius: 30px;
+font-size: 16px;
+color:#FFFFFF;
+display: block;
+display: flex;
+align-items: center;
+justify-content: center;
+          }
+          span:last-child{
+              margin-left: 40px;
+          }
+        }
+  .rc-headera{
+ display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    h3{
+      color:#333333;
+      font-size: 26px;
+    }
+  .rc-title{
+     img{
+       width: 96px;
+       height: 96px;
+
+     }
+  }
+  .userer{
+    span{
+  width: 130px;
+height: 40px;
+border: 2px solid #E2001A;
+border-radius: 30px;
+display: block;
+color: #E2001A;
+line-height: 40px;
+margin-top: 42px;
+font-size: 14px;
+    }
+    i{
+        font-size: 18px;
+          font-style: normal;
+           display: block;
+           margin-top: 32px;
+color: #E1001A;
+    }
+  }
+}
+        /deep/.el-dialog {
+ width: 80%;
+ position: relative;
+}
+    .rc-discount {
+    position: relative;
+    width: 100%;
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .rc-contair {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .rc-left {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #e1001a;
+      padding-right: 21px;
+      width: 30%;
+      float: left;
+      height: 100%;
+      i {
+        font-style: normal;
+        font-size: 12px;
+      }
+      span {
+        font-size: 26px;
+      }
+      strong {
+        font-style: normal;
+        font-size: 12px;
+        display: block;
+        margin-top: 8px;
+      }
+    }
+    .rc-right {
+      display: flex;
+      flex-direction: column;
+      margin-left: 36px;
+      justify-content: center;
+      height: 100%;
+      i {
+        font-style: normal;
+        font-size: 16px;
+        color: #e1001a;
+      }
+      .rc-main {
+        color: #999999;
+        font-size: 12px;
+      }
+      span {
+        display: block;
+        margin-top: 8px;
+      }
+      em {
+        font-style: normal;  
+      }
+    }
+    .rc-footer {
+      display: flex;
+      justify-content: flex-end;
+      margin-right: 10px;
+      span {
+        width: 72px;
+        height: 25px;
+        background: #e2001a;
+        text-align: center;
+        line-height: 25px;
+        font-size: 12px;
+        color: #ffffff;
+        margin-bottom: 8px;
+        border-radius: 100px;
+        margin-right: 8px;
+        cursor: pointer;
+      }
+    }
+    }
+   .active{
+     border: 2px solid #E2001A;
+    color:#666666;
+      cursor: pointer;
+      font-size: 16px;
+    }
+    .unactive{
+      border: 2px solid #808285;
+      color:#666666;
+      cursor: pointer;
+           font-size: 16px;
+     }
+       .rc-footimage{
+        overflow: hidden;
+        width: 100%;
+        margin: 0 auto;
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+        img{
+          width: 100%;
+        }
+         
+      }
+  .rc-header {
+    width: 100%;
+      .rc-title {
+        width: 100%;
+        h2 {
+          font-size: 22px;
+          color: #e1001a;
+        }
+      }
+      .productdetails {
+   
+        margin-top: 19px;
+        .rc-productdetail {
+          display: flex;
+          align-items: center;
+          i {
+            font-style: normal;
+            font-size: 14px;
+
+            color: #333333;
+          }
+
+          span {
+            font-size: 18px;
+            margin-left: 8px;
+            color: #e1001a;
+          }
+        }
+        .rc-productdetai {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-top: 10px;
+          i {
+            font-style: normal;
+            font-size: 14px;
+            color: #333333;
+          }
+          span {
+            font-size: 14px;
+            color: #666666;
+            margin-left: 8px;
+          }
+          em {
+            font-size: 14px;
+            font-style: normal;
+            margin-left: 68px;
+            color: #e2001a;
+          }
+        }
+      }
+
+      .rc-productdeta {
+        margin-top: 20px;
+        .rc-prodtop {
+          display: flex;
+          align-items: center;
+          span {
+            font-size: 14px;
+            color: #333333;
+          }
+          em {
+            font-style: normal;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 59px;
+            font-size: 16px;
+            margin-left: 4px;
+            height: 39px;
+            border-radius: 3px;
+          }
+        }
+      }
+      .rc-produnnum {
+        display: flex;
+        align-items: center;
+        padding-bottom: 20px;
+        margin-top: 16px;
+        span {
+          font-size: 14px;
+          color: #333333;
+        }
+        img {
+          width: 29px;
+          height: 29px;
+          display: block;
+          margin-left: 5px;
+
+        }
+        .rc-message {
+          width: 29px;
+          margin-left: 8px;
+          height: 29px;
+          display: block;
+        }
+
+        strong {
+          font-style: normal;
+          list-style: none;
+          width: 30px;
+          height: 30px;
+          border: 1px solid #d7d7d7;
+          opacity: 1;
+          border-radius: 3px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          margin: 0 5px 0 5px;
+          color: #666666;
+        }
+      }
+      .certification {
+               .rc-button{
+          width: 100%;
+          padding-top: 33px;
+          display: flex;
+          align-items: center;
+          span{
+            width: 160px;
+height: 48px;
+background: #E2001A;
+border-radius: 30px;
+font-size: 16px;
+color:#FFFFFF;
+display: block;
+display: flex;
+align-items: center;
+justify-content: center;
+          }
+          span:last-child{
+              margin-left: 40px;
+          }
+        }
+        margin-top: 16px;
+        ul {
+          display: flex;
+          flex-direction: column;
+          line-height: 30px;
+          li {
+            float: left;
+            width: 100%;
+            text-align: left;
+            span {
+              font-size: 14px;
+              color: #333333;
+            }
+            i{
+              font-style: normal;
+              font-size: 14px;
+              color: #666666;
+              margin-left: 8px;
+            }
+          }
+        }
+      }
+  }
+}
+//    /* 最小768px最大1920 *pc端/
+@media screen and (min-width: 768px) and (max-width: 1920px) {
+  .rc-headera{
+    
+ display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    h3{
+      color:#333333;
+      font-size: 26px;
+    }
+  .rc-title{
+     img{
+       width: 96px;
+       height: 96px;
+
+     }
+  }
+  .userer{
+    span{
+  width: 130px;
+height: 40px;
+border: 2px solid #E2001A;
+border-radius: 30px;
+display: block;
+color: #E2001A;
+line-height: 40px;
+margin-top: 42px;
+font-size: 14px;
+    }
+    i{
+        font-size: 18px;
+          font-style: normal;
+           display: block;
+           margin-top: 32px;
+color: #E1001A;
+    }
+  }
+}
+  .rc-header{
+ display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    h3{
+      color:#333333;
+      font-size: 26px;
+    }
+  .rc-title{
+     img{
+       width: 96px;
+       height: 96px;
+
+     }
+  }
+  .userer{
+    img{
+      width: 210px;
+      height: 210px;
+      display: flex;
+    justify-content: center;
+    flex-direction: column;
+
+    } 
+
+    span{
+        font-size: 16px;
+
+color: #333333;
+    }
+    i{
+        font-size: 18px;
+          font-style: normal;
+           display: block;
+           margin-top: 32px;
+color: #E1001A;
+    }
+  }
+}
+      /deep/.el-dialog {
+ width: 440px;
+ height: 432px;
+ position: relative;
+}
+
+  .rc-discount {
+    position: relative;
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .rc-contair {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .rc-left {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #e1001a;
+      padding-right: 21px;
+      width: 30%;
+      float: left;
+      height: 100%;
+      i {
+        font-style: normal;
+        font-size: 12px;
+      }
+      span {
+        font-size: 26px;
+      }
+      strong {
+        font-style: normal;
+        font-size: 12px;
+        display: block;
+        margin-top: 8px;
+      }
+    }
+    .rc-right {
+      display: flex;
+      flex-direction: column;
+      margin-left: 36px;
+      justify-content: center;
+      height: 100%;
+      i {
+        font-style: normal;
+        font-size: 16px;
+        color: #e1001a;
+      }
+      .rc-main {
+        color: #999999;
+        font-size: 12px;
+      }
+      span {
+        display: block;
+        margin-top: 8px;
+      }
+      em {
+        font-style: normal;  
+      }
+    }
+    .rc-footer {
+      display: flex;
+      justify-content: flex-end;
+      margin-right: 10px;
+      span {
+        width: 72px;
+        height: 25px;
+        background: #e2001a;
+        text-align: center;
+        line-height: 25px;
+        font-size: 12px;
+        color: #ffffff;
+        margin-bottom: 8px;
+        border-radius: 100px;
+            margin-right: 8px;
+            cursor: pointer;
+      }
+    }
+    }
+  .rc-usermain{
+        display: flex;
+        align-items: center;
+  }
+  .active{
+     border: 2px solid #E2001A;
+    color:#666666;
+      cursor: pointer;
+      font-size: 16px;
+    }
+    .unactive{
+      border: 2px solid #808285;
+      color:#666666;
+      cursor: pointer;
+           font-size: 16px;
+     }
+  .rc-header {
+    width: 100%;
+       margin-left: 80px;
+          .rc-footimage{
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        img{
+          width: 100%;
+        }
+      }
+      .rc-title {
+        height: 85px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #d8d8d8;
+        h2 {
+          
+font-size: 30px;
+          color: #e1001a;
+        }
+      }
+      .productdetails {
+               .rc-button{
+          width: 100%;
+          padding-top: 33px;
+          display: flex;
+          align-items: center;
+          span{
+            width: 160px;
+height: 48px;
+background: #E2001A;
+border-radius: 30px;
+font-size: 16px;
+color:#FFFFFF;
+display: block;
+display: flex;
+align-items: center;
+justify-content: center;
+cursor: pointer;
+          }
+          span:last-child{
+              margin-left: 40px;
+          }
+        }
+        margin-top: 19px;
+        .rc-productdetail {
+          display: flex;
+          align-items: center;
+          i {
+            font-style: normal;
+            font-size: 18px;
+
+            color: #333333;
+          }
+
+          span {
+            font-size: 18px;
+            margin-left: 8px;
+            color: #e1001a;
+          }
+        }
+        .rc-productdetai {
+         display: flex;
+    align-items: center;
+    margin-top: 10px;
+    border-bottom: 1px solid #d7d7d7;
+    padding-bottom: 17px;
+          i {
+            font-style: normal;
+          
+
+font-size: 18px;
+            color: #333333;
+          }
+          span {
+            
+font-size: 20px;
+            color: #666666;
+            margin-left: 8px;
+          }
+          em {
+            font-size: 16px;
+            font-style: normal;
+             width: 40%;
+             text-align: right;
+             display: block;            
+color: #E2001A;
+            cursor: pointer;
+          }
+        }
+      }
+
+      .rc-productdeta {
+        margin-top: 16px;
+        .rc-prodtop {
+          display: flex;
+          align-items: center;
+          span {
+            
+font-size: 18px;
+            color: #333333;
+          }
+          em {
+            font-style: normal;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 59px;
+            font-size: 16px;
+            margin-left: 10px;
+            height: 39px;
+            border-radius: 3px;
+            color:#666666;
+          }
+        }
+      }
+      .rc-produnnum {
+        display: flex;
+        align-items: center;
+        padding-bottom: 20px;
+        margin-top: 16px;
+        border-bottom: 1px solid #d7d7d7;
+        span {
+          font-size: 18px;
+          color: #333333;
+        }
+        img {
+          width: 29px;
+          height: 29px;
+          display: block;
+        }
+        .rc-message {
+          width: 29px;
+          margin-left: 8px;
+          height: 29px;
+          display: block;
+        }
+
+        strong {
+          font-style: normal;
+          list-style: none;
+          width: 30px;
+          height: 30px;
+          border: 1px solid #d7d7d7;
+          opacity: 1;
+          border-radius: 3px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          margin: 0 5px 0 5px;
+          color: #666666;
+        }
+      }
+      .certification {
+        .rc-button{
+          width: 100%;
+          padding-top: 33px;
+          display: flex;
+          align-items: center;
+          span{
+            width: 160px;
+height: 48px;
+background: #E2001A;
+border-radius: 30px;
+font-size: 16px;
+color:#FFFFFF;
+display: block;
+display: flex;
+align-items: center;
+justify-content: center;
+          }
+          span:last-child{
+              margin-left: 40px;
+          }
+        }
+        margin-top: 16px;
+        ul {
+          display: flex;
+          flex-direction: column;
+          line-height:40px;
+          text-align: left;
+          li {
+            width: 100%;
+            float: left;
+            span {
+              font-size: 18px;
+              color: #333333;
+            }
+            i{
+              font-style: normal;
+              font-size: 16px;
+              color: #666666;
+              margin-left: 8px;
+            }
+          }
+        }
+      }
+  }
+
+}

rc-busness/assets/css/search.less

@@ -0,0 +1,593 @@
+.rc-top{
+    position: relative;
+  }
+  
+  /deep/ .el-drawer{
+    height: 60%;
+  }
+  ul li ol li em strong i {
+    list-style: none;
+    font-style: normal;
+    
+  }
+  .rc-main {
+    .usersearch {
+      width: 100%;
+      margin: 0 auto;
+      overflow: hidden;
+    }
+  }
+  //手机端
+@media screen and (max-width: 768px) {
+    .usercontentshow{
+        position: relative;
+    }
+  .rc-bottom{
+	position: relative;
+	background: white;
+	z-index: 9;
+	.rc-bottoma{
+		margin-bottom:2rem;
+	}
+    .rc-footer{
+		display: flex;
+		align-items: center;
+		justify-content: space-evenly;
+		width: 100%;
+		padding: 0 0.5rem;
+		box-sizing: border-box;
+       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;
+      
+       }
+  
+        .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%;
+        overflow-x: auto;
+    white-space: nowrap;
+          }
+          li{
+            display: inline-block;
+            text-align: center;
+            display: flex;
+            align-items: center;
+height: 26px;
+background: #FFFFFF;
+border: 1px solid #D7D7D7;
+padding: 0 5px 0 5px;
+border-radius: 100px;
+            
+          }
+    }
+    .rc-contair{
+        margin-top: 24px;
+        .rc-rccontair{
+  height:1.6rem;display:flex;align-items: center;
+  width: 100%
+
+        }
+        ul{
+            text-align: center;
+            align-items: center;
+            flex-wrap: nowrap;
+            li{
+                
+                width: 43%;
+                margin-top: 16px;
+  background: #FFFFFF;
+  border: 1px solid #D7D7D7;
+  margin-left: 15px;
+   display: inline-flex;
+   flex-direction: column;
+  border-radius: 3px;
+
+            }
+  
+            img{
+                width: 100%;
+      display: flex;
+      margin: 0 auto;
+      height: 100%
+  ;
+            }
+            i{
+  font-style: normal;
+                font-size: 18px;
+                margin-top: 8px;
+  color: #666666;
+  display: block;
+                
+            }
+        }
+        span{
+            font-size: 0.16rem;
+            color: #666666;
+            text-overflow: -o-ellipsis-lastline;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            line-clamp: 2;
+            -webkit-box-orient: vertical;
+            word-break: break-all;
+            white-space: normal;
+            margin-top: 0.15rem;
+            height: 0.25rem;
+        }
+        strong{
+            width: 130px;
+           height: 40px;
+  border: 2px solid #E2001A;
+  display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 30px;
+      margin: 0 auto;
+      font-size: 14px;
+      margin-bottom: 0.32rem;
+      margin-top: 20px;
+  color: #E2001A;
+margin-top: 20px;
+        }
+        .rc-click{
+            max-height: 1.9rem;
+            min-height: 1.9rem;
+        }
+    }
+  }
+  //pc端
+@media screen and (min-width: 768px) and (max-width: 1920px) {
+    /deep/.el-dialog {
+    width: 920px;
+    height: 570px;
+    background: #FFFFFF;
+    }
+      .rc-button{
+        display: flex;
+        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;
+       }
+          .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-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
+          }
+      }
+    }