129 lines
2.4 KiB
Vue
129 lines
2.4 KiB
Vue
<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> |