页面

2022-04-11 18:37:36 +08:00
parent ec682e2aea
commit dc0129402c
43 changed files with 1244 additions and 128 deletions
@@ -0,0 +1,79 @@
+
+.products_list{
+    padding: 0 20px 20px 20px;
+    box-sizing: border-box;
+    height: 100%;
+}
+.products_item{
+    width: 100%;
+    background-color: #fff;
+    border-radius: 20px;
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    &:nth-child(n+2){
+        margin-top: 16px;
+    }
+    .item_img{
+        width: 198px;
+        height: 198px;
+        position: relative;
+        image{
+            width: 100%;
+            height: 100%;
+            border-radius: 10px;
+        }
+        .num{
+            width: 100px;
+            height: 36px;
+            font-size: $font_size_min;
+            position: absolute;
+            right:0;
+            bottom: 0;
+            background: rgba($color: #fff, $alpha: 0.3);
+            border-radius: 36px 0px 10px 0px;
+            color: #fff;
+            text-align: center;
+            line-height: 36px;
+        }
+    }
+    .item_con{
+        padding-left: 15px;
+        font-size: $font_size;
+        flex:1;
+        .title{
+            font-size: $font_size;
+            color: #707070;
+            text{
+                color: $color_font_one;
+                font-weight: bold;
+            }
+        }
+        .tag_list{
+            display: flex;
+            margin-top: 16px;
+            .tag{
+                padding: 3px 10px;
+                background-color: #CDE5FF;
+                font-size: $font_size_min;
+                border-radius: 5px;
+                color: $color_main;
+                &:nth-child(2) {
+                    margin-left: 10px;
+                }
+            }
+        }
+        .introduce{
+            font-size: $font_size_medium;
+            color: $color_font_two;
+            margin-top: 16px;
+        }
+        .des{
+            font-size:$font_size_medium;
+            color: #707070;
+            margin-top: 16px;
+            @include common_ellipsis($params:2);
+        }
+    }
+}
@@ -0,0 +1,30 @@
+import { Image, View } from "@tarojs/components"
+import styles  from './index.module.scss'
+
+type params = {
+    desStatus?: true|false
+}
+export default ({desStatus = true}: params) => {
+
+    return (
+        <View className={styles.products_list}>
+            {new Array(10).fill('').map(item => {
+                return <View className={styles.products_item}>
+                    <View className={styles.item_img}>
+                        <Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651827249&t=b2fc2a3672dc8ced9e0f37ce7e2ff901"/>
+                        <View className={styles.num}>230色</View>
+                    </View>
+                    <View className={styles.item_con}>
+                    <View className={styles.title}><text>0770#</text>21S单面平纹(食毛)</View>
+                    <View className={styles.tag_list}>
+                        <View className={styles.tag}>160cm</View>
+                        <View className={styles.tag}>110g</View>
+                    </View>
+                    <View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
+                    {desStatus&&<View className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>}
+                    </View>
+                </View>
+            })}
+        </View>
+    )
+}