商城首页
This commit is contained in:
parent
92deb50c1a
commit
72a29af788
GPG Key ID:
A7972FD973317FF3
101
components/shop/recommend/index.vue
Normal file
101
components/shop/recommend/index.vue
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
<template>
|
||||||
|
<view class="recommend">
|
||||||
|
<view class="top">
|
||||||
|
<text>今日秒杀推荐</text>
|
||||||
|
<text>点击查看更多></text>
|
||||||
|
</view>
|
||||||
|
<view class="connect">
|
||||||
|
<view class="time">
|
||||||
|
<image></image>
|
||||||
|
<text>12:00</text>
|
||||||
|
</view>
|
||||||
|
<view class="info">
|
||||||
|
<text>修身套头上衣</text>
|
||||||
|
<text class="u-line-2">珂莱蒂尔雪纺衫2020春装新简约百搭V领蕾丝九分... </text>
|
||||||
|
<view>
|
||||||
|
<text>￥99</text>
|
||||||
|
<text>￥299</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<image class="img"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"recommend"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.recommend{
|
||||||
|
.top{
|
||||||
|
height: 90rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
>text:first-child{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
>text:last-child{
|
||||||
|
font-size: 18rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.connect{
|
||||||
|
display: flex;
|
||||||
|
.time{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 18rpx;
|
||||||
|
justify-content: center;
|
||||||
|
>image{
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
}
|
||||||
|
>text{
|
||||||
|
font-size: 36rpx;
|
||||||
|
margin-top: 25rpx;
|
||||||
|
color: #FDD360;
|
||||||
|
}
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
>text:nth-child(1){
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
>text:nth-child(2){
|
||||||
|
margin-top: 17rpx;
|
||||||
|
line-height: 36rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
>view{
|
||||||
|
margin-top: 24rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
>text:first-child{
|
||||||
|
font-size: 27rpx;
|
||||||
|
color: #FF3131;
|
||||||
|
}
|
||||||
|
>text:last-child{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-left: 33rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.img{
|
||||||
|
width: 213rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: 13rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
71
components/shop/seckill/index.vue
Normal file
71
components/shop/seckill/index.vue
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<template>
|
||||||
|
<view class="seckill">
|
||||||
|
<view class="top">
|
||||||
|
<view class="title">
|
||||||
|
<view class="name">全部秒杀</view>
|
||||||
|
<view class="time">
|
||||||
|
<text class="num">12</text>
|
||||||
|
<text class="mah">:</text>
|
||||||
|
<text class="num">12</text>
|
||||||
|
<text class="mah">:</text>
|
||||||
|
<text class="num">12</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="next">
|
||||||
|
查看更多>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<sitem></sitem>
|
||||||
|
<sitem></sitem>
|
||||||
|
<sitem></sitem>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import sitem from "./item"
|
||||||
|
export default {
|
||||||
|
name:"seckill",
|
||||||
|
components:{
|
||||||
|
sitem
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.seckill{
|
||||||
|
.top{
|
||||||
|
height: 60rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.title{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.name{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.time{
|
||||||
|
margin-left: 39rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 20rpx;
|
||||||
|
.num{
|
||||||
|
width: 25rpx;
|
||||||
|
height: 25rpx;
|
||||||
|
background-color: #bfbfbf;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.next{
|
||||||
|
font-size: 18rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
63
components/shop/seckill/item.vue
Normal file
63
components/shop/seckill/item.vue
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<view class="item">
|
||||||
|
<image class="head"></image>
|
||||||
|
<text class="title">商品名</text>
|
||||||
|
<view class="price">
|
||||||
|
<text>￥99</text>
|
||||||
|
<text>￥299</text>
|
||||||
|
</view>
|
||||||
|
<view class="info">
|
||||||
|
<text>剩余21件</text>
|
||||||
|
<text>立即购买</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"item"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.item{
|
||||||
|
width: 210rpx;
|
||||||
|
.head{
|
||||||
|
width: 210rpx;
|
||||||
|
height: 131rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
.price{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 19rpx;
|
||||||
|
>text:first-child{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #FF3131;
|
||||||
|
}
|
||||||
|
>text:last-child{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 22rpx;
|
||||||
|
margin-top: 19rpx;
|
||||||
|
>text:first-child{
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
>text:last-child{
|
||||||
|
color: #FDD360;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
29
components/shop/shop-item/index.vue
Normal file
29
components/shop/shop-item/index.vue
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<view class="shop-item">
|
||||||
|
<image></image>
|
||||||
|
<text>名字哦</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"shopItem"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.shop-item{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
>image{
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
}
|
||||||
|
>text{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-top: 14rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -545,6 +545,13 @@
|
|||||||
"navigationBarTitleText": "首页",
|
"navigationBarTitleText": "首页",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/shop/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "首页",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
|
|||||||
146
pages/shop/index.vue
Normal file
146
pages/shop/index.vue
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
<template>
|
||||||
|
<view class="shop">
|
||||||
|
<view class="top">
|
||||||
|
<image class="local"></image>
|
||||||
|
<view class="add">
|
||||||
|
<text></text>
|
||||||
|
<image></image>
|
||||||
|
</view>
|
||||||
|
<u-search placeholder="日照香炉生紫烟" v-model="keyword" :show-action="false" bg-color="#fff" border-color="#999999"></u-search>
|
||||||
|
<image class="mnue"></image>
|
||||||
|
</view>
|
||||||
|
<u-swiper :list="list"></u-swiper>
|
||||||
|
<view class="chengnuo">
|
||||||
|
<view>
|
||||||
|
<image></image>
|
||||||
|
<text>免费洗衣</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<image></image>
|
||||||
|
<text>全国包邮</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<image></image>
|
||||||
|
<text>延误必赔</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<image></image>
|
||||||
|
<text>上门取件</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="fenlei">
|
||||||
|
<shopitem v-for="item in 5" class="item"></shopitem>
|
||||||
|
</view>
|
||||||
|
<view class="fenlei">
|
||||||
|
<shopitem v-for="item in 5" class="item"></shopitem>
|
||||||
|
</view>
|
||||||
|
<view class="hr" style="margin-top:80rpx"></view>
|
||||||
|
<recommend></recommend>
|
||||||
|
<view class="hr" style="margin-top:40rpx"></view>
|
||||||
|
<seckill></seckill>
|
||||||
|
<view class="hr" style="margin-top:40rpx"></view>
|
||||||
|
<recommend></recommend>
|
||||||
|
<view class="hr" style="margin-top:40rpx"></view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import shopitem from "@/components/shop/shop-item/index"
|
||||||
|
import recommend from "@/components/shop/recommend/index"
|
||||||
|
import seckill from "@/components/shop/seckill/index"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name:"shop",
|
||||||
|
components:{
|
||||||
|
shopitem,
|
||||||
|
recommend,
|
||||||
|
seckill
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
keyword:"",
|
||||||
|
list:[{
|
||||||
|
image: '/static/uView/swiper/swiper1.jpg',
|
||||||
|
title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image: '/static/uView/swiper/swiper2.jpg',
|
||||||
|
title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image: '/static/uView/swiper/swiper3.jpg',
|
||||||
|
title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/deep/image{
|
||||||
|
background-color: #0f0;
|
||||||
|
}
|
||||||
|
.shop{
|
||||||
|
padding: 0 33rpx;
|
||||||
|
.top{
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.local{
|
||||||
|
width: 31rpx;
|
||||||
|
height: 37rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.add{
|
||||||
|
width: 115rpx;
|
||||||
|
height: 25rpx;
|
||||||
|
display: flex;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 14rpx;
|
||||||
|
margin-right: 37rpx;
|
||||||
|
>image{
|
||||||
|
width: 24rpx;
|
||||||
|
height: 15rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mnue{
|
||||||
|
width: 35rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
margin-left: 36rpx;
|
||||||
|
}
|
||||||
|
.chengnuo{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 24rpx;
|
||||||
|
>view{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
>image{
|
||||||
|
width: 23rpx;
|
||||||
|
height: 23rpx;
|
||||||
|
}
|
||||||
|
>text{
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-left: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fenlei{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
.hr{
|
||||||
|
width: 750rpx;
|
||||||
|
margin-left: -33rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
background-color: #ececec;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user