static home almost done

fore-end/app.json

@@ -1,6 +1,9 @@
 {
    "usingComponents": {
-    "van-button": "@vant/weapp/button/index"
+    "van-button": "@vant/weapp/button/index",
+    "van-image": "@vant/weapp/image/index",
+    "van-icon": "@vant/weapp/icon/index",
+    "van-search": "@vant/weapp/search/index"
    },
   "pages":[
     "pages/home/home",
@@ -12,7 +15,7 @@
   "window":{
     "backgroundTextStyle":"light",
     "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "Weixin",
+    "navigationBarTitleText": "WeChatTrading",
     "navigationBarTextStyle":"black"
   },
   "tabBar": {

fore-end/app.wxss

@@ -8,3 +8,30 @@
   padding: 200rpx 0;
   box-sizing: border-box;
 } 
+
+page {
+    padding: 20rpx;
+    /* padding右边不起效果解决办法 */
+    box-sizing:border-box;
+    background-color: #f5f5f5;
+}
+
+/* text样式 */
+.text {
+    font-size: 40rpx;
+    font-weight: 600;
+}
+
+.text_small {
+    font-size: 30rpx;
+    font-weight: 400;
+}
+
+/* 文字下方黄色横线 */
+.color_block {
+    width: 215rpx;
+    height: 20rpx;
+    background-color: #FFC300;
+    opacity: 0.8;
+    z-index: -1;
+}

fore-end/components/categories_card/categories_card.js

@@ -0,0 +1,24 @@
+// components/categories_card/categories_card.js
+Component({
+
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

fore-end/components/categories_card/categories_card.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

fore-end/components/categories_card/categories_card.wxml

@@ -0,0 +1,4 @@
+<!--components/categories_card/categories_card.wxml-->
+<view class="categories_card">
+    <view class="name_show">衣物</view>
+</view>

fore-end/components/categories_card/categories_card.wxss

@@ -0,0 +1,20 @@
+/* components/categories_card/categories_card.wxss */
+.categories_card {
+    width: 150rpx;
+    height: 150rpx;
+    display: inline-block;
+    background-color: pink;
+    margin-right: 10rpx;
+    border-radius: 20rpx;
+}
+
+.name_show {
+    position: absolute;
+    top: 93rpx;
+    width: 150rpx;
+    height: 60rpx;
+    background-color: #eeeeee;
+    opacity: 0.7;
+    text-align: center;
+    line-height: 60rpx;
+}

fore-end/pages/classify/classify.wxml

@@ -1,2 +1 @@
 <!--pages/classify/classify.wxml-->
-<text>pages/classify/classify.wxml</text>

fore-end/pages/home/home.js

@@ -5,7 +5,7 @@ Page({
      * 页面初始数据
      */
     data: {
-
+        
     },
 
     /**
@@ -63,4 +63,6 @@ Page({
     onShareAppMessage() {
 
     }
-})
+})
+
+

fore-end/pages/home/home.json

@@ -1,3 +1,5 @@
 {
-    "usingComponents": {}
+    "usingComponents": {
+        "categories_card": "/components/categories_card/categories_card"
+    }
 }

fore-end/pages/home/home.wxml

@@ -1 +1,54 @@
 <!--pages/home/home.wxml-->
+<!-- 头部 -->
+<view class="head">
+    <!-- 头像 -->
+    <view class="head-portrait-bg">
+        <van-image width="100rpx" height="100rpx" fit="cover" src="/assets/home_img/head_portrait.jpg" radius="20rpx"></van-image>
+    </view>
+    <!-- 昵称 -->
+    <view class="username">deter</view>
+    <!-- 消息提示 -->
+    <view>
+        <van-icon name="bell" custom-style="margin" class="head_bell" size="50rpx" info="9" color="#FFC300"/>
+    </view>
+</view>
+<!-- 搜索框 -->
+<view class="search_box">
+    <input type="search" name="" placeholder="搜索..." class="search_text"/>
+    <button class="search_button" plain="true">
+        <van-icon class="search_icon" name="search" size="50rpx"/>
+    </button>
+</view>
+
+<!-- 分类展示 -->
+<view class="categories">
+    <!-- categories -->
+    <view style="position: relative;">
+        <view class="text">categories</view>
+        <view class="color_block categories_block "></view>
+    </view>
+    <!-- 点击前往分类页面 -->
+    <view class="text_small">Browser more</view>
+</view>
+
+ <!-- 分类推荐 -->
+<scroll-view scroll-x style='display: flex;white-space:nowrap; margin-top: 80rpx;'>
+    <categories_card></categories_card>
+    <categories_card></categories_card>
+    <categories_card></categories_card>
+    <categories_card></categories_card>
+    <categories_card></categories_card>
+</scroll-view>
+
+<!-- 商品展示 -->
+<view style="position: relative;">
+    <view class="display_text text">Recommend</view>
+    <view class="color_block recommend_block"></view>
+</view>
+
+<!-- 商品卡片 -->
+<view class="commodity">
+    <view class="commodity_show"></view>
+    <view class="commodity_show"></view>
+    <view class="commodity_show"></view>
+</view>

fore-end/pages/home/home.wxss

@@ -1 +1,109 @@
-/* pages/home/home.wxss */
+/* pages/home/home.wxss */
+/* 头部区域 */
+.head {
+    height: 130rpx;
+}
+
+.head-portrait-bg {
+    float: left;
+    width: 104rpx;
+    height: 104rpx;
+    background-color: #DDDEDF;
+    border-radius: 20rpx;
+}
+
+.head-portrait-img {
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 20rpx;
+}
+
+.username {
+    float: left;
+    width: 100rpx;
+    margin-top: 30rpx;
+    margin-left: 20rpx;
+    font-size: 18px;
+}
+
+.head_bell {
+    float: left;
+    margin-top: -75rpx;
+    margin-left: 650rpx;
+}
+/* ------------------------------ */
+
+/* 搜索栏 */
+.search_box {
+    width: 100%;
+    height: 80rpx;
+    background-color: #E8E7E7;
+    border-radius: 20rpx;
+}
+
+.search_text {
+    float: left;
+    padding-left: 15rpx;
+    padding-top: 15rpx;
+}
+
+.search_icon {
+    margin-bottom: 1rpx;
+}
+.search_button {
+    float: right;
+    width: 80rpx;
+    height: 80rpx;
+    margin-right: 10rpx;
+}
+/* 去除button边框 */
+button[plain]{ border:0 }
+/* ------------------------------ */
+
+/* 分类栏 */
+.categories {
+    margin-top: 18rpx;
+}
+
+.categories view:nth-child(1) {
+    float: left;
+    margin-right: 75rpx;
+}
+
+.categories view:nth-child(2) {
+    float: left;
+    margin-left: 150rpx;
+    margin-top: 12rpx;
+}
+
+.categories_block {
+    position: absolute;
+    top: 18rpx;
+    left: -153rpx;
+}
+/* ------------------------------ */
+
+/* 商品 */
+.recommend_block {
+    position: absolute;
+    width: 255rpx;
+    top: 32rpx
+}
+
+.commodity {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 10rpx;
+    width: 100%;
+    height: 1400rpx;
+    background-color: pink;
+    justify-content: flex-start;
+}
+
+.commodity_show {
+    flex: 1;
+    width: 320rpx;
+    height: 400rpx;
+    background-color: skyblue;
+}
+/* ------------------------------ */

fore-end/project.config.json

@@ -43,7 +43,7 @@
             "packNpmRelationList": [
                 {
                     "packageJsonPath": "./package.json",
-                    "miniprogramNpmDistDir": "./"
+                    "miniprogramNpmDistDir": "./miniprogram_npm"
                 }
             ]
         }