Homepage / Product list / Product Detail / header / footer / RoyalCanin css,js added

rc-busness/pages/productdetails/productlist.vue

@@ -3,11 +3,10 @@
   <Myheader></Myheader>
   
 <div class="rc-top"></div>
-<div class="online"></div>
-	<div class="rc-main">
+	<div class="rc-max-width--xl rc-main">
 		<div class="usersearch">
 			<div class="usercontentshow" ref="usercontent">
-				<div class="rc-product">
+				<div class="rc-product ts-scrollable-container">
 					<div class="rc-productcat ts-scrollable">
 						<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" >
 							<img :src="item.catimage" alt="" />
@@ -15,8 +14,8 @@
 						</div>
 					</div>
 				</div>
-
-				<div class="rc-age">
+				<div class="online rc-md-up"></div>
+				<div class="ts-scrollable-container">
 					<h2>专区:</h2>
 					<ol class="ts-scrollable">
 						<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
@@ -24,8 +23,8 @@
 						</li>
 					</ol>
 				</div>
-
-				<div class="rc-age">
+				<div class="online rc-md-up"></div>
+				<div class="ts-scrollable-container">
 					<h2>年龄:</h2>
 					<ol class="ts-scrollable">
 						<li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
@@ -33,8 +32,8 @@
 						</li>
 					</ol>
 				</div>
-				
-				<div class="rc-age">
+				<div class="online rc-md-up"></div>
+				<div class="ts-scrollable-container">
 					<h2>功能:</h2>
 					<ol class="ts-scrollable">
 						<li v-for="(item, index) in catagea" :key="index"  @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
@@ -42,8 +41,8 @@
 						</li>
 					</ol>
 				</div>
-
-				<div class="rc-age">
+				<div class="online rc-md-up"></div>
+				<div class="ts-scrollable-container">
 					<h2>品种:</h2>
 					<ol class="ts-scrollable">
 						<li v-for="(item, index) in catageb" :key="index"  @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
@@ -57,24 +56,24 @@
 	<!-- rc-main end -->
 	<div class="online"></div>
 	<!-- rc-main start -->
-	<div class="rc-main">
+	<div class="rc-max-width--xl">
 		<div class="usersearch">
-			<div class="rc-contair">
-				<ul>
-					<li v-for="(item,index) in rccontair" :key="index">
-						<div class="rc-click" @click="selectproduce(item)">
-							<div class="rc-rccontair">
-								<img :src=item.picture alt="">   
-							</div>
-						</div>
-						<div class="rc-column">
-							<div class="rc-click" @click="selectproduce(item)">
-								<span>{{item.categoryName}}</span>
-								<i>0.001{{item.price}}</i>
-							</div>
-							<strong @click="userbuy()">立即购买</strong>
-						</div>
-					</li>
+			<div class="rc-contair">		
+				<ul class="ts-product-list">
+				    <li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
+								 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item)">
+									<div class="rc-rccontair">
+										<img :src=item.picture alt="">   
+									</div>
+								</div>
+								<div class="rc-column">
+									<div class="rc-click" @click="selectproduce(item)">
+										<span>{{item.categoryName}}</span>
+										<i>0.001{{item.price}}</i>
+									</div>
+									<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="userbuy()">立即购买</strong>
+								</div>
+				    </li>
 				</ul>
 			</div>
 			<div class="usershow" v-if="openshow">
@@ -105,7 +104,7 @@
         </ol>
       </div>
 
-        <div class="rc-age">
+        <div class="ts-scrollable-container rc-margin-y--md">
         <h2>年龄:</h2>
         <ol class="ts-scrollable">
           <li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
@@ -113,7 +112,7 @@
           </li>
         </ol>
       </div>
-       <div class="rc-age">
+       <div class="ts-scrollable-container rc-margin-y--md">
         <h2>功能:</h2>
         <ol class="ts-scrollable">
           <li v-for="(item, index) in catagea" :key="index"  @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
@@ -122,7 +121,7 @@
         </ol>
       </div>
 
-       <div class="rc-age">
+       <div class="ts-scrollable-container">
         <h2>品种:</h2>
         <ol class="ts-scrollable">
           <li v-for="(item, index) in catageb" :key="index"  @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
@@ -165,7 +164,7 @@
         </ol>
       </div>
 
-        <div class="rc-age">
+        <div class="ts-scrollable-container rc-margin-y--md">
         <h2>年龄:</h2>
         <ol>
           <li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
@@ -173,7 +172,7 @@
           </li>
         </ol>
       </div>
-       <div class="rc-age">
+       <div class="ts-scrollable-container rc-margin-y--md">
         <h2>功能:</h2>
         <ol>
           <li v-for="(item, index) in catagea" :key="index"  @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
@@ -182,7 +181,7 @@
         </ol>
       </div>
 
-       <div class="rc-age">
+       <div class="ts-scrollable-container">
         <h2>品种:</h2>
         <ol>
           <li v-for="(item, index) in catageb" :key="index"  @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">