You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

333 lines
7.7 KiB
Vue

4 months ago
<template>
4 months ago
<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">2000</text><br>
<text class="secondC">仓库面积</text>
</view>
<view class="item">
<text class="firstC">900</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>
4 months ago
</template>
<script>
</script>
4 months ago
<style lang="scss">
.shopIntroduce{
padding: 48rpx 36rpx 0 36rpx;
min-height: 100vh;
4 months ago
background: #FFFFFF;
width: 750rpx;
border-radius: 20rpx 20rpx 0rpx 0rpx;
box-sizing: border-box;
4 months ago
}
.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;
}
}
4 months ago
</style>