From 8266b2e273a93e0efd19d3e190a3ffbb16b36ec2 Mon Sep 17 00:00:00 2001
From: shenhai <5213606@qq.com>
Date: Thu, 15 Nov 2018 14:51:09 +0800
Subject: [PATCH] =?UTF-8?q?prodcut=20list=20=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/hello-uniapp/common/uni.css          | 64 ++++++++++++++-
 .../template/product-list/product-list.vue    | 79 +++----------------
 2 files changed, 73 insertions(+), 70 deletions(-)

diff --git a/examples/hello-uniapp/common/uni.css b/examples/hello-uniapp/common/uni.css
index 1dacc182a..c397944e5 100644
--- a/examples/hello-uniapp/common/uni.css
+++ b/examples/hello-uniapp/common/uni.css
@@ -905,4 +905,66 @@ radio-group label, checkbox-group label{
 .uni-swiper-msg-icon{width:50upx; margin-right:20upx;}
 .uni-swiper-msg-icon image{width:100%; flex-shrink:0;}
 .uni-swiper-msg swiper{width:100%; height:50upx;}
-.uni-swiper-msg swiper-item{line-height:50upx;}
\ No newline at end of file
+.uni-swiper-msg swiper-item{line-height:50upx;}
+
+/* product */
+.uni-product-list {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+
+.uni-product {
+    padding: 20upx;
+    display: flex;
+    flex-direction: column;
+}
+
+.image-view {
+    height: 330upx;
+    width: 330upx;
+	margin:12upx 0;
+}
+
+.uni-product-image {
+    height: 330upx;
+    width: 330upx;
+}
+
+.uni-product-title {
+    width: 300upx;
+    word-break: break-all;
+    display: -webkit-box;
+    overflow: hidden;
+	line-height:1.5;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.uni-product-price {
+	margin-top:10upx;
+    font-size: 28upx;
+	line-height:1.5;
+    position: relative;
+}
+
+.uni-product-price-original {
+    color: #e80080;
+}
+
+.uni-product-price-favour {
+    color: #888888;
+    text-decoration: line-through;
+    margin-left: 10upx;
+}
+
+.uni-product-tip {
+    position: absolute;
+    right: 10upx;
+    background-color: #ff3333;
+    color: #ffffff;
+    padding: 0 10upx;
+    border-radius: 5upx;
+}
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/template/product-list/product-list.vue b/examples/hello-uniapp/pages/template/product-list/product-list.vue
index 8fd39ee78..270a93485 100644
--- a/examples/hello-uniapp/pages/template/product-list/product-list.vue
+++ b/examples/hello-uniapp/pages/template/product-list/product-list.vue
@@ -1,16 +1,16 @@
 <template>
 	<view class="page">
 		<page-head :title="title"></page-head>
-		<view class="product-list">
-			<view class="product" v-for="(product,index) in productList" :key="index">
+		<view class="uni-product-list">
+			<view class="uni-product" v-for="(product,index) in productList" :key="index">
 				<view class="image-view">
-					<image v-if="renderImage" class="product-image" :src="product.image"></image>
+					<image v-if="renderImage" class="uni-product-image" :src="product.image"></image>
 				</view>
-				<view class="product-title">{{product.title}}</view>
-				<view class="product-price">
-					<text class="product-price-favour">￥{{product.originalPrice}}</text>
-					<text class="product-price-original">￥{{product.favourPrice}}</text>
-					<text class="product-tip">{{product.tip}}</text>
+				<view class="uni-product-title">{{product.title}}</view>
+				<view class="uni-product-price">
+					<text class="uni-product-price-favour">￥{{product.originalPrice}}</text>
+					<text class="uni-product-price-original">￥{{product.favourPrice}}</text>
+					<text class="uni-product-tip">{{product.tip}}</text>
 				</view>
 			</view>
 		</view>
@@ -22,7 +22,7 @@ export default {
     data() {
         return {
             title: 'product-list',
-            productList: [],
+			productList: [],
             renderImage: false
         };
     },
@@ -102,64 +102,5 @@ export default {
 </script>
 
 <style>
-.product-list {
-    display: flex;
-    width: 100%;
-    flex-wrap: wrap;
-    flex-direction: row;
-}
-
-.product {
-    padding: 10upx 20upx;
-    display: flex;
-    flex-direction: column;
-}
-
-.image-view {
-    height: 330upx;
-    width: 330upx;
-	margin:12upx 0;
-}
-
-.product-image {
-    height: 330upx;
-    width: 330upx;
-}
-
-.product-title {
-    width: 300upx;
-    word-break: break-all;
-    display: -webkit-box;
-    overflow: hidden;
-	line-height:1.5;
-    text-overflow: ellipsis;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-}
-
-.product-price {
-	margin-top:10upx;
-    font-size: 28upx;
-	line-height:1.5;
-    position: relative;
-}
-
-.product-price-original {
-    color: #e80080;
-}
-
-.product-price-favour {
-    color: #888888;
-    text-decoration: line-through;
-    margin-left: 10upx;
-}
-
-.product-tip {
-    position: absolute;
-    right: 10upx;
-    background-color: #ff3333;
-    color: #ffffff;
-    padding: 0 10upx;
-    border-radius: 5upx;
-}
+	
 </style>
-- 
GitLab