From df705f0ea7ec2cfa807d5fc64013a9a837e4435a Mon Sep 17 00:00:00 2001 From: pplokijuhyg <1162963624@qq.com> Date: Fri, 13 Dec 2019 15:39:55 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=86=E7=B1=BB=E9=A1=B5=E9=9D=A2=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- app.json | 1 + components/classify/list/index.js | 8 +++ components/classify/list/index.json | 6 +++ components/classify/list/index.scss | 52 ++++++++++++++++++ components/classify/list/index.wxml | 38 +++++++++++++ components/classify/list/index.wxss | 1 + components/classify/navigation/index.js | 8 +++ components/classify/navigation/index.json | 6 +++ components/classify/navigation/index.scss | 20 +++++++ components/classify/navigation/index.wxml | 10 ++++ components/classify/navigation/index.wxss | 1 + pages/classify/classify.js | 66 +++++++++++++++++++++++ pages/classify/classify.json | 6 +++ pages/classify/classify.scss | 7 +++ pages/classify/classify.wxml | 4 ++ pages/classify/classify.wxss | 1 + 17 files changed, 236 insertions(+), 1 deletion(-) create mode 100644 components/classify/list/index.js create mode 100644 components/classify/list/index.json create mode 100644 components/classify/list/index.scss create mode 100644 components/classify/list/index.wxml create mode 100644 components/classify/list/index.wxss create mode 100644 components/classify/navigation/index.js create mode 100644 components/classify/navigation/index.json create mode 100644 components/classify/navigation/index.scss create mode 100644 components/classify/navigation/index.wxml create mode 100644 components/classify/navigation/index.wxss create mode 100644 pages/classify/classify.js create mode 100644 pages/classify/classify.json create mode 100644 pages/classify/classify.scss create mode 100644 pages/classify/classify.wxml create mode 100644 pages/classify/classify.wxss diff --git a/README.md b/README.md index 71cce07..06d196f 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ - index/search 顶部搜索框 - index/list 商品列表 - index/lsit/commodity 商品单条 -- pages/search/search 搜索页 +- pages/search/search 搜索页
组件 - index/search 顶部搜索框 - search/hot 热门上搜索列表 \ No newline at end of file diff --git a/app.json b/app.json index b5407e6..9b630be 100644 --- a/app.json +++ b/app.json @@ -1,5 +1,6 @@ { "pages": [ + "pages/classify/classify", "pages/shopping/shopping", "pages/search/search", "pages/index/index" diff --git a/components/classify/list/index.js b/components/classify/list/index.js new file mode 100644 index 0000000..035c745 --- /dev/null +++ b/components/classify/list/index.js @@ -0,0 +1,8 @@ +Component({ + properties: { + }, + data: { + }, + methods: { + } + }) \ No newline at end of file diff --git a/components/classify/list/index.json b/components/classify/list/index.json new file mode 100644 index 0000000..8a8e987 --- /dev/null +++ b/components/classify/list/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + + } +} \ No newline at end of file diff --git a/components/classify/list/index.scss b/components/classify/list/index.scss new file mode 100644 index 0000000..8b6dac9 --- /dev/null +++ b/components/classify/list/index.scss @@ -0,0 +1,52 @@ +.list{ + padding-left: 20rpx; + width: 572rpx; + box-sizing: border-box; + height: 100vh; + .commodity { + width: 552rpx; + // height: 143rpx; + // margin-top: 32rpx; + display: flex; + align-items: center; + .content { + width: 552rpx; + height: 100%; + display: flex; + align-items: center; + // box-shadow: 0 0 24rpx 0 rgba(227, 227, 227, 0.4); + border-bottom: 2rpx solid #eaeaea; + padding: 30rpx 0; + .imgthumb { + width: 105rpx; + height: 105rpx; + margin-left: 40rpx; + background-color: #333; + } + .introduce { + width: 336rpx; + margin-left: 40rpx; + display: flex; + flex-direction: column; + > text { + font-size: 22rpx; + color: #333; + margin-bottom: 22rpx; + } + > view { + display: flex; + align-items: center; + justify-content: space-between; + > text:first-child { + font-size: 30rpx; + color: #dec499; + } + > text:last-child { + font-size: 22rpx; + color: #999; + } + } + } + } + } +} \ No newline at end of file diff --git a/components/classify/list/index.wxml b/components/classify/list/index.wxml new file mode 100644 index 0000000..2e5e664 --- /dev/null +++ b/components/classify/list/index.wxml @@ -0,0 +1,38 @@ + + + + + + 产品名称产品名称产品名称产品名称产品名称产品 + + ￥657 + 加入购物车 + + + + + + + + + 产品名称产品名称产品名称产品名称产品名称产品 + + ￥657 + 加入购物车 + + + + + + + + + 产品名称产品名称产品名称产品名称产品名称产品 + + ￥657 + 加入购物车 + + + + + \ No newline at end of file diff --git a/components/classify/list/index.wxss b/components/classify/list/index.wxss new file mode 100644 index 0000000..9546d04 --- /dev/null +++ b/components/classify/list/index.wxss @@ -0,0 +1 @@ +.list{padding-left:20rpx;width:572rpx;box-sizing:border-box;height:100vh}.list .commodity{width:552rpx;display:flex;align-items:center}.list .commodity .content{width:552rpx;height:100%;display:flex;align-items:center;border-bottom:2rpx solid #eaeaea;padding:30rpx 0}.list .commodity .content .imgthumb{width:105rpx;height:105rpx;margin-left:40rpx;background-color:#333}.list .commodity .content .introduce{width:336rpx;margin-left:40rpx;display:flex;flex-direction:column}.list .commodity .content .introduce>text{font-size:22rpx;color:#333;margin-bottom:22rpx}.list .commodity .content .introduce>view{display:flex;align-items:center;justify-content:space-between}.list .commodity .content .introduce>view>text:first-child{font-size:30rpx;color:#dec499}.list .commodity .content .introduce>view>text:last-child{font-size:22rpx;color:#999} diff --git a/components/classify/navigation/index.js b/components/classify/navigation/index.js new file mode 100644 index 0000000..035c745 --- /dev/null +++ b/components/classify/navigation/index.js @@ -0,0 +1,8 @@ +Component({ + properties: { + }, + data: { + }, + methods: { + } + }) \ No newline at end of file diff --git a/components/classify/navigation/index.json b/components/classify/navigation/index.json new file mode 100644 index 0000000..8a8e987 --- /dev/null +++ b/components/classify/navigation/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + + } +} \ No newline at end of file diff --git a/components/classify/navigation/index.scss b/components/classify/navigation/index.scss new file mode 100644 index 0000000..10fbd9d --- /dev/null +++ b/components/classify/navigation/index.scss @@ -0,0 +1,20 @@ +.navigation { + width: 188rpx; + // margin-right: 2rpx; + border-right: 2rpx solid #eaeaea; + max-height: 100vh; + view{ + height: 97rpx; + font-size: 28rpx; + color: #333; + border-bottom: 2rpx solid #eaeaea; + line-height: 97rpx; + font-weight: bold; + text-align: center; + box-sizing: border-box; + } + .on{ + border-left: 5rpx solid #56CC84; + color:#56CC84; + } +} \ No newline at end of file diff --git a/components/classify/navigation/index.wxml b/components/classify/navigation/index.wxml new file mode 100644 index 0000000..c03b550 --- /dev/null +++ b/components/classify/navigation/index.wxml @@ -0,0 +1,10 @@ + + 热门商品 + 美容健身 + 美容健身 + 美容健身 + 美容健身 + 美容健身 + 美容健身 + 美容健身 + \ No newline at end of file diff --git a/components/classify/navigation/index.wxss b/components/classify/navigation/index.wxss new file mode 100644 index 0000000..9f520e4 --- /dev/null +++ b/components/classify/navigation/index.wxss @@ -0,0 +1 @@ +.navigation{width:188rpx;border-right:2rpx solid #eaeaea;max-height:100vh}.navigation view{height:97rpx;font-size:28rpx;color:#333;border-bottom:2rpx solid #eaeaea;line-height:97rpx;font-weight:bold;text-align:center;box-sizing:border-box}.navigation .on{border-left:5rpx solid #56CC84;color:#56CC84} diff --git a/pages/classify/classify.js b/pages/classify/classify.js new file mode 100644 index 0000000..5b6fcb8 --- /dev/null +++ b/pages/classify/classify.js @@ -0,0 +1,66 @@ +// pages/classify/classify.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function (options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady: function () { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow: function () { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide: function () { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload: function () { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh: function () { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom: function () { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage: function () { + + } +}) \ No newline at end of file diff --git a/pages/classify/classify.json b/pages/classify/classify.json new file mode 100644 index 0000000..0fa3766 --- /dev/null +++ b/pages/classify/classify.json @@ -0,0 +1,6 @@ +{ + "usingComponents": { + "list":"../components/classify/list/index", + "navigation":"../components/classify/navigation/index" + } +} \ No newline at end of file diff --git a/pages/classify/classify.scss b/pages/classify/classify.scss new file mode 100644 index 0000000..4b5efaf --- /dev/null +++ b/pages/classify/classify.scss @@ -0,0 +1,7 @@ +.box{ + width: 750rpx; + display: flex; + border-top: 1rpx solid #eaeaea; + + +} \ No newline at end of file diff --git a/pages/classify/classify.wxml b/pages/classify/classify.wxml new file mode 100644 index 0000000..ba6b786 --- /dev/null +++ b/pages/classify/classify.wxml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/pages/classify/classify.wxss b/pages/classify/classify.wxss new file mode 100644 index 0000000..7c22a73 --- /dev/null +++ b/pages/classify/classify.wxss @@ -0,0 +1 @@ +.box{width:750rpx;display:flex;border-top:1rpx solid #eaeaea}