首页完成

This commit is contained in:
pplokijuhyg 2019-12-13 11:43:02 +08:00
parent e47bb87558
commit 1fee501560
20 changed files with 162 additions and 18 deletions

View File

@ -9,7 +9,7 @@
*/
html {
line-height: 1.15; /* 1 */
line-height: 1; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
@ -164,7 +164,7 @@ select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
line-height: 1; /* 1 */
margin: 0; /* 2 */
}

View File

@ -0,0 +1,8 @@
Component({
properties: {
},
data: {
},
methods: {
}
})

View File

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

View File

@ -0,0 +1,49 @@
.commodity {
width: 623rpx;
height: 143rpx;
margin-top: 32rpx;
display: flex;
align-items: center;
.content {
width: 614rpx;
height: 100%;
display: flex;
align-items: center;
box-shadow: 0 0 24rpx 0 rgba(227, 227, 227, 0.4);
.imgthumb {
width: 105rpx;
height: 105rpx;
margin-left: 40rpx;
background-color: #333;
}
.introduce {
width: 410rpx;
margin-left: 40rpx;
display: flex;
flex-direction: column;
> text {
font-size: 26rpx;
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;
}
}
}
}
.decorate {
width: 9rpx;
height: 102rpx;
background-color: #3fb66e;
}
}

View File

@ -0,0 +1,13 @@
<view class="commodity">
<view class="content">
<image class="imgthumb "></image>
<view class="introduce">
<text>产品名称产品名称产品名称产品名称产品名称产品名称产品名称</text>
<view>
<text>¥657</text>
<text>加入购物车</text>
</view>
</view>
</view>
<view class="decorate"></view>
</view>

View File

@ -0,0 +1 @@
.commodity{width:623rpx;height:143rpx;margin-top:32rpx;display:flex;align-items:center}.commodity .content{width:614rpx;height:100%;display:flex;align-items:center;box-shadow:0 0 24rpx 0 rgba(227,227,227,0.4)}.commodity .content .imgthumb{width:105rpx;height:105rpx;margin-left:40rpx;background-color:#333}.commodity .content .introduce{width:410rpx;margin-left:40rpx;display:flex;flex-direction:column}.commodity .content .introduce>text{font-size:26rpx;color:#333;margin-bottom:22rpx}.commodity .content .introduce>view{display:flex;align-items:center;justify-content:space-between}.commodity .content .introduce>view>text:first-child{font-size:30rpx;color:#dec499}.commodity .content .introduce>view>text:last-child{font-size:22rpx;color:#999}.commodity .decorate{width:9rpx;height:102rpx;background-color:#3fb66e}

View File

@ -0,0 +1,8 @@
Component({
properties: {
},
data: {
},
methods: {
}
})

View File

@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"commodity":"./commodity/index"
}
}

View File

@ -0,0 +1,12 @@
.list {
width: 623rpx;
margin-top: 36rpx;
.title {
font-size: 30rpx;
color: #333;
font-weight: bold;
margin-left: 32rpx;
// margin-bottom: 32rpx;
}
}

View File

@ -0,0 +1,4 @@
<view class="list">
<text class="title">热门商品</text>
<commodity></commodity>
</view>

View File

@ -0,0 +1 @@
.list{width:623rpx;margin-top:36rpx}.list .title{font-size:30rpx;color:#333;font-weight:bold;margin-left:32rpx}

View File

@ -0,0 +1,8 @@
Component({
properties: {
},
data: {
},
methods: {
}
})

View File

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

View File

@ -0,0 +1,23 @@
.search{
width: 613rpx;
height: 76rpx;
margin-top: 30rpx;
box-sizing: border-box;
border-radius: 15rpx;
display: flex;
border:1rpx solid rgba(198,198,198,1);
>image{
width: 42rpx;
height: 42rpx;
background-color: #000;
margin-left: 40rpx;
margin-top: 17rpx;
}
>input{
height: 30rpx;
width: 480rpx;
margin-top: 25rpx;
margin-left: 17rpx;
font-size: 30rpx;
}
}

View File

@ -0,0 +1,4 @@
<view class="search">
<image></image>
<input type="text" placeholder="输入您要搜索的产品" />
</view>

View File

@ -0,0 +1 @@
.search{width:613rpx;height:76rpx;margin-top:30rpx;box-sizing:border-box;border-radius:15rpx;display:flex;border:1rpx solid #c6c6c6}.search>image{width:42rpx;height:42rpx;background-color:#000;margin-left:40rpx;margin-top:17rpx}.search>input{height:30rpx;width:480rpx;margin-top:25rpx;margin-left:17rpx;font-size:30rpx}

View File

@ -1,3 +1,6 @@
{
"usingComponents": {}
"usingComponents": {
"search":"../components/index/search/index",
"list":"../components/index/list/index"
}
}

View File

@ -1,11 +1,9 @@
.box{
.box {
border-top: #eaeaea solid 1rpx;
width: 750rpx;
overflow: hidden;
// overflow: hidden;
display: flex;
align-items: center;
flex-direction: column;
.search{
width: 613px;
height: 76px;
}
}

View File

@ -1,5 +1,4 @@
<view class="box">
<view class="search">
</view>
<search></search>
<list></list>
</view>

View File

@ -1 +1 @@
.box{border-top:#eaeaea solid 1rpx;width:750rpx;overflow:hidden;display:flex;flex-direction:column}.box .search{width:613px;height:76px}
.box{border-top:#eaeaea solid 1rpx;width:750rpx;display:flex;align-items:center;flex-direction:column}