cart
This commit is contained in:
129
pageC/merchant/details.vue
Normal file
129
pageC/merchant/details.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<view class="details">
|
||||
<view class="top">
|
||||
<image></image>
|
||||
<view class="name">店铺名称</view>
|
||||
<view class="info">创建时间：2020年04月10日 | 浙江金华市</view>
|
||||
<view class="num">
|
||||
<view>
|
||||
<view class="value">23435</view>
|
||||
<view class="title">粉丝数</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="value">23435</view>
|
||||
<view class="title">评价</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="value">23435</view>
|
||||
<view class="title">信用等级</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="title">
|
||||
<view>工商执照</view>
|
||||
<image></image>
|
||||
</view>
|
||||
<view class="image-list">
|
||||
<image></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.details {
|
||||
min-height: calc(100vh - var(--window-top));
|
||||
background-color: #ECECEC;
|
||||
.top {
|
||||
margin-top: 1rpx;
|
||||
padding: 40rpx 80rpx;
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
> image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 70rpx;
|
||||
margin-bottom: 29rpx;
|
||||
background-color: aqua;
|
||||
}
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(51,51,51,1);
|
||||
margin-bottom: 29rpx;
|
||||
}
|
||||
.info {
|
||||
font-size: 24rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
margin-bottom: 37rpx;
|
||||
}
|
||||
.num {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> view {
|
||||
text-align: center;
|
||||
color: rgba(51,51,51,1);
|
||||
position: relative;
|
||||
&:not(:last-child)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -77rpx;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
width: 2rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(51,51,51,1);
|
||||
}
|
||||
.value {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
.title {
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 1rpx;
|
||||
> view {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(51,51,51,1);
|
||||
}
|
||||
> image {
|
||||
width: 24rpx;
|
||||
height: 14rpx;
|
||||
background-color: aqua;
|
||||
}
|
||||
}
|
||||
.image-list {
|
||||
background-color: #ffffff;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
> image {
|
||||
width: 239rpx;
|
||||
height: 170rpx;
|
||||
flex-shrink: 0;
|
||||
background-color: aqua;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
222
pageC/merchant/index.vue
Normal file
222
pageC/merchant/index.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<view class="merchant">
|
||||
<view v-if="show">
|
||||
<view>
|
||||
<image></image>
|
||||
<view>消息</view>
|
||||
</view>
|
||||
<view>
|
||||
<image></image>
|
||||
<view>首页</view>
|
||||
</view>
|
||||
<view>
|
||||
<image></image>
|
||||
<view>我的</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="top">
|
||||
<image></image>
|
||||
<view class="info">
|
||||
<view class="name u-line-1">小米官方旗舰店</view>
|
||||
<view class="num">粉丝数：234</view>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<image></image>
|
||||
<view>{{ 0 ? "关注" : "已关注" }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="follow">
|
||||
<view class="title">关注</view>
|
||||
<scroll-view scroll-x class="list">
|
||||
<view class="list-items">
|
||||
<view v-for="(item, index) in 9" :key="index" class="item">
|
||||
<image></image>
|
||||
<view class="nickname u-line-1">用户昵称</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="main">
|
||||
<view class="classify" v-if="cur==0">
|
||||
111
|
||||
</view>
|
||||
<view class="list" v-if="cur==1">
|
||||
222
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabbar">
|
||||
<view @click="cur=0">
|
||||
<image></image>
|
||||
<view>商品分类</view>
|
||||
</view>
|
||||
<view @click="cur=1">
|
||||
<image></image>
|
||||
<view>商品列表</view>
|
||||
</view>
|
||||
<view @click="toDetailsPage">
|
||||
<image></image>
|
||||
<view>店铺信息</view>
|
||||
</view>
|
||||
<view>
|
||||
<image></image>
|
||||
<view>联系客服</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
cur: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toDetailsPage() {
|
||||
uni.navigateTo({
|
||||
url: './details'
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.merchant {
|
||||
min-height: 100vh;
|
||||
background-color: #ECECEC;
|
||||
padding-top: calc(350rpx - var(--window-top));
|
||||
.top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
width: 750rpx;
|
||||
height: 350rpx;
|
||||
background-color: #999999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 168rpx 60rpx 0 30rpx;
|
||||
> image {
|
||||
margin-right: 40rpx;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
background-color: aqua;
|
||||
}
|
||||
.info {
|
||||
width: 220rpx;
|
||||
color: rgba(255,255,255,1);
|
||||
.name {
|
||||
margin-bottom: 30rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.num {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
margin-left: auto;
|
||||
width: 162rpx;
|
||||
height: 60rpx;
|
||||
border: 2rpx solid rgba(255,255,255,1);
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
flex-shrink: 0;
|
||||
margin-right: 14rpx;
|
||||
background-color: aqua;
|
||||
}
|
||||
> view {
|
||||
white-space: nowrap;
|
||||
font-size: 26rpx;
|
||||
color: rgba(255,255,255,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.follow {
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
margin-bottom: 20rpx;
|
||||
height: 140rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
.title {
|
||||
position: relative;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(51,51,51,1);
|
||||
margin: 0 30rpx;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -14rpx;
|
||||
top: 0;
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
background: rgba(255,120,15,1);
|
||||
}
|
||||
}
|
||||
.list {
|
||||
width: 570rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.list-items {
|
||||
display: flex;
|
||||
.item {
|
||||
&:not(:last-child) {
|
||||
margin-right: 35rpx;
|
||||
}
|
||||
text-align: center;
|
||||
width: 90rpx;
|
||||
> image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: aqua;
|
||||
}
|
||||
.nickname {
|
||||
font-size: 22rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabbar {
|
||||
border-top: 1rpx #DBDADA solid;
|
||||
width: 100%;
|
||||
height: 98rpx;
|
||||
background: rgb(95, 64, 64);
|
||||
display: flex;
|
||||
padding: 10rpx 55rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
> view {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
> image {
|
||||
flex-shrink: 0;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-bottom: 15rpx;
|
||||
background-color: aqua;
|
||||
}
|
||||
> view {
|
||||
font-size: 24rpx;
|
||||
color: rgba(153,153,153,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user