Csqqqqq
/
1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '3cdee4581f'
${ noResults }
1/pages/cloudStore/components/shopIntroduce.vue

333 lines
7.7 KiB
Vue
Raw Normal View History Unescape Escape

11
2 months ago
<template>
2
2 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">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>
11
2 months ago
</template>
<script>
</script>
2
2 months ago
<style lang="scss">
.shopIntroduce{
padding: 48rpx 36rpx 0 36rpx;
min-height: 100vh;
完成
2 months ago
background: #FFFFFF;
width: 750rpx;
border-radius: 20rpx 20rpx 0rpx 0rpx;
box-sizing: border-box;
2
2 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;
}
}
11
2 months ago
</style>