|
|
<template>
|
|
|
<view class="shopIntroduce">
|
|
|
<view class="part1">
|
|
|
<image src="https://files.hecrab.com/crab-net/yxs-cloud-store-vrCenterLogo.png"></image>
|
|
|
</view>
|
|
|
<view class="part2">
|
|
|
<view class="item">
|
|
|
<text class="firstC">2000m²</text><br>
|
|
|
<text class="secondC">仓库面积</text>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<text class="firstC">900m²</text><br>
|
|
|
<text class="secondC">暂养池</text>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<text class="firstC">21</text><br>
|
|
|
<text class="secondC">员工数</text>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<text class="firstC">12121</text><br>
|
|
|
<text class="secondC">日均发货量（斤）</text>
|
|
|
</view>
|
|
|
<view class="bottom">
|
|
|
<view class="bottom-box">
|
|
|
<image class="left-icon" src="https://files.hecrab.com/crab-net/yxs-cloudStore-body-icon.png"></image>
|
|
|
<text>南京良庄农产品有限公司</text>
|
|
|
<u-icon name="arrow-right" size="14" color="#000000" ></u-icon>
|
|
|
</view>
|
|
|
<view class="bottom-box">
|
|
|
<image class="left-icon" src="https://files.hecrab.com/crab-net/yxs-cloudStore-map-icon.png"></image>
|
|
|
<text>江苏省南京市高淳区淳溪路22号</text>
|
|
|
<u-icon name="arrow-right" size="14" color="#000000" ></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="part3">
|
|
|
<view class="left">
|
|
|
<view class="top3">
|
|
|
<image class="top3-icon" src="https://files.hecrab.com/crab-net/yxs-cloudStore-checkman-icon-left.png"></image>
|
|
|
<view class="top3-text">验蟹师品质保障</view>
|
|
|
<image class="top3-icon" src="https://files.hecrab.com/crab-net/yxs-cloudStore-checkman-icon-right.png"></image>
|
|
|
</view>
|
|
|
<view class="bottom3">
|
|
|
验蟹师承诺螃蟹绝无缺斤少两，如遇消费者投诉云拣仓将进行双倍赔付。
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
<image class="medal" src="https://files.hecrab.com/crab-net/yxs-cloudStore-checkman-icon-medal.png"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="part4">
|
|
|
<view class="top4">
|
|
|
<text class="left-text">云拣仓展示</text>
|
|
|
<text class="more">更多</text>
|
|
|
</view>
|
|
|
<view class="bottom4">
|
|
|
<view class="bottom-box4">
|
|
|
<image src="https://wx3.sinaimg.cn/large/008eGzyTly1hs8atswuhtj31be1bewop.jpg"></image>
|
|
|
<view class="image-bottom">入口</view>
|
|
|
</view>
|
|
|
<view class="bottom-box4">
|
|
|
<image src="https://wx3.sinaimg.cn/large/008eGzyTly1hs8atswuhtj31be1bewop.jpg"></image>
|
|
|
<view class="image-bottom">入口</view>
|
|
|
</view>
|
|
|
<view class="bottom-box4">
|
|
|
<image src="https://wx3.sinaimg.cn/large/008eGzyTly1hs8atswuhtj31be1bewop.jpg"></image>
|
|
|
<view class="image-bottom">入口</view>
|
|
|
</view>
|
|
|
<view class="bottom-box4">
|
|
|
<image src="https://wx3.sinaimg.cn/large/008eGzyTly1hs8atswuhtj31be1bewop.jpg"></image>
|
|
|
<view class="image-bottom">入口</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="part5">
|
|
|
<view class="top5">经营表现</view>
|
|
|
<view class="bottom5">
|
|
|
<view class="bottom-box5">
|
|
|
<text class="firstC">1212</text><br>
|
|
|
<text class="secondC">近30日订单</text>
|
|
|
</view>
|
|
|
<view class="bottom-box5">
|
|
|
<text class="firstC">99%</text><br>
|
|
|
<text class="secondC">发货准时率</text>
|
|
|
</view>
|
|
|
<view class="bottom-box5">
|
|
|
<text class="firstC">3</text><br>
|
|
|
<text class="secondC">近30日理赔</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="blank"></view>
|
|
|
<view class="inputBtnCon">
|
|
|
<view class="inputBtn">申请成为代理</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.shopIntroduce{
|
|
|
padding: 48rpx 36rpx 0 36rpx;
|
|
|
min-height: 100vh;
|
|
|
background: #FFFFFF;
|
|
|
width: 750rpx;
|
|
|
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
.part1{
|
|
|
width: 678rpx;
|
|
|
height: 300rpx;
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 20rpx;
|
|
|
margin-bottom: 16rpx;
|
|
|
background-image: url("https://wx4.sinaimg.cn/large/a6949f40ly1hmwuc3yktyj20wt0wt47z.jpg");
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
>image{
|
|
|
width: 140rpx;
|
|
|
height: 140rpx;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
}
|
|
|
.part2{
|
|
|
width: 678rpx;
|
|
|
height: 420rpx;
|
|
|
background: #F5F5F6;
|
|
|
border-radius: 20rpx;
|
|
|
margin-bottom: 16rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
flex-wrap: wrap;
|
|
|
padding: 24rpx;
|
|
|
box-sizing: border-box;
|
|
|
.item{
|
|
|
width: 310rpx;
|
|
|
height: 120rpx;
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 12rpx;
|
|
|
text-align: center;
|
|
|
padding-top: 16rpx ;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
}
|
|
|
.bottom{
|
|
|
width: 632rpx;
|
|
|
|
|
|
.bottom-box{
|
|
|
height: 40rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-top: 20rpx;
|
|
|
.left-icon{
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
}
|
|
|
>text{
|
|
|
font-weight: 400;
|
|
|
font-size: 28rpx;
|
|
|
color: #000000;
|
|
|
flex: 1;
|
|
|
margin-left: 12rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.part3{
|
|
|
width: 678rpx;
|
|
|
height: 204rpx;
|
|
|
background: linear-gradient( 180deg, #FFF5E9 0%, #FFFFFF 100%);
|
|
|
border-radius: 20rpx;
|
|
|
border: 2rpx solid #F3E8DE;
|
|
|
margin-bottom: 16rpx;
|
|
|
padding: 24rpx;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
.left{
|
|
|
.top3{
|
|
|
display: flex;
|
|
|
.top3-icon{
|
|
|
width: 36rpx;
|
|
|
height: 36rpx;
|
|
|
}
|
|
|
.top3-text{
|
|
|
font-weight: 500;
|
|
|
font-size: 32rpx;
|
|
|
color: #8B511E;
|
|
|
line-height: 38rpx;
|
|
|
text-align: left;
|
|
|
}
|
|
|
}
|
|
|
.bottom3{
|
|
|
width: 510rpx;
|
|
|
height: 80rpx;
|
|
|
font-weight: 400;
|
|
|
font-size: 28rpx;
|
|
|
color: #666666;
|
|
|
line-height: 33rpx;
|
|
|
text-align: left;
|
|
|
margin-top: 32rpx;
|
|
|
}
|
|
|
}
|
|
|
.medal{
|
|
|
width: 88rpx;
|
|
|
height: 88rpx;
|
|
|
background: #FBEFE3;
|
|
|
margin-left: 22rpx;
|
|
|
}
|
|
|
}
|
|
|
.part4{
|
|
|
width: 678rpx;
|
|
|
height: 272rpx;
|
|
|
background: #F5F5F6;
|
|
|
border-radius: 20rpx;
|
|
|
margin-bottom: 16rpx;
|
|
|
padding: 24rpx;
|
|
|
box-sizing: border-box;
|
|
|
.top4{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
.left-text{
|
|
|
font-weight: 600;
|
|
|
font-size: 32rpx;
|
|
|
color: #000000;
|
|
|
line-height: 45rpx;
|
|
|
text-align: left;
|
|
|
}
|
|
|
.more{
|
|
|
font-weight: 400;
|
|
|
font-size: 24rpx;
|
|
|
color: #000000;
|
|
|
line-height: 34rpx;
|
|
|
}
|
|
|
}
|
|
|
.bottom4{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
box-sizing: border-box;
|
|
|
margin-top: 32rpx;
|
|
|
.bottom-box4{
|
|
|
width: 148rpx;
|
|
|
height: 148rpx;
|
|
|
background: #E2E2E2;
|
|
|
border-radius: 12rpx;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
>image{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
}
|
|
|
.image-bottom{
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
width: 148rpx;
|
|
|
height: 44rpx;
|
|
|
background: rgba(0,0,0,0.4);
|
|
|
border-radius: 0rpx;
|
|
|
font-weight: 400;
|
|
|
font-size: 20rpx;
|
|
|
color: #FFFFFF;
|
|
|
text-align: center;
|
|
|
line-height: 44rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.part5{
|
|
|
width: 678rpx;
|
|
|
height: 244rpx;
|
|
|
background: #F5F5F6;
|
|
|
border-radius: 20rpx;
|
|
|
margin-bottom: 16rpx;
|
|
|
padding: 24rpx;
|
|
|
box-sizing: border-box;
|
|
|
.top5{
|
|
|
font-weight: 600;
|
|
|
font-size: 32rpx;
|
|
|
color: #000000;
|
|
|
}
|
|
|
.bottom5{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
.bottom-box5{
|
|
|
margin-top: 32rpx;
|
|
|
width: 202rpx;
|
|
|
height: 120rpx;
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 12rpx;
|
|
|
text-align: center;
|
|
|
padding-top: 16rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.firstC{
|
|
|
font-weight: 500;
|
|
|
font-size: 40rpx;
|
|
|
color: #000000;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.secondC{
|
|
|
font-weight: 400;
|
|
|
font-size: 24rpx;
|
|
|
color: #999999;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.blank{
|
|
|
height: 200rpx;
|
|
|
}
|
|
|
.inputBtnCon{
|
|
|
height: 180rpx;
|
|
|
background: #FFFFFF;
|
|
|
bottom: 0;
|
|
|
position: fixed;
|
|
|
padding-top: 20rpx;
|
|
|
.inputBtn{
|
|
|
width: 678rpx;
|
|
|
height: 92rpx;
|
|
|
background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%);
|
|
|
border-radius: 24rpx;
|
|
|
font-weight: 500;
|
|
|
font-size: 28rpx;
|
|
|
color: #FFFFFF;
|
|
|
line-height: 39rpx;
|
|
|
text-align: center;
|
|
|
padding-top: 26rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
</style> |