页面

2022-04-11 18:37:36 +08:00
parent ec682e2aea
commit dc0129402c
43 changed files with 1244 additions and 128 deletions
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '搜索'
+}
@@ -0,0 +1,72 @@
+.main{
+    .search{
+        display: flex;
+        justify-content: space-between;
+        padding: 20px;
+        padding-bottom: 50px;
+    }
+    
+    .hot {
+        padding: 0 20px;
+        .hot_header {
+            width:100%;
+            display: flex;
+            justify-content: space-between;
+            font-size: $font_size_medium;
+            .hot_header_title {
+                font-size: $font_size;
+                color: $color_font_one;
+                font-weight: 700;
+            }
+            .hot_header_up{
+                color: $color_main;
+            }
+        }
+        .list{
+            display: flex;
+            font-size:  $font_size_medium;
+            flex-wrap: wrap;
+            padding: 20px 0;
+            .item{
+                margin-right: 20px;
+                margin-bottom: 20px;
+                padding: 10px 20px;
+                background-color: #F0F0F0;
+                color: $color_font_three;
+                border-radius: 50px;
+            }
+        }
+    }
+    .history {
+        padding: 0 20px;
+        .history_header {
+            width:100%;
+            display: flex;
+            justify-content: space-between;
+            font-size: $font_size_medium;
+            .history_header_title {
+                font-size: $font_size;
+                color: $color_font_one;
+                font-weight: 700;
+            }
+            .miconfont{
+                font-size: 30px;
+                color: $color_font_three;
+            }
+        }
+        .list{
+            display: flex;
+            font-size:  $font_size_medium;
+            flex-wrap: wrap;
+            padding: 20px 0;
+            .item{
+                margin-right: 20px;
+                margin-bottom: 20px;
+                padding: 10px 20px;
+                background-color: #F0F0F0;
+                color: $color_font_three;
+                border-radius: 50px;
+            }
+        }
+    }
+}
@@ -0,0 +1,43 @@
+
+import { View } from '@tarojs/components'
+import Search from '@/components/search'
+import classnames from "classnames";
+import styles  from './index.module.scss'
+
+export default () => {
+  return (
+    <View className={styles.main}>
+      <View className={styles.search}>
+        <Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true}/>
+      </View>
+      <View className={styles.hot}>
+        <View className={styles.hot_header}>
+          <View className={styles.hot_header_title}>热门面料</View>
+          <View className={styles.hot_header_up}>高级搜索</View>
+        </View>
+        <View className={styles.list}>
+          <View className={styles.item}>9265</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>26s</View>
+        </View>
+      </View>
+      <View className={styles.history}>
+        <View className={styles.history_header}>
+          <View className={styles.history_header_title}>历史搜索</View>
+          <View className={classnames('iconfont icon-lajixiang', styles.miconfont)}></View>
+        </View>
+        <View className={styles.list}>
+          <View className={styles.item}>9265</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>26s</View>
+        </View>
+      </View>
+    </View>
+  )
+}