[更新页面修改部分代码-商城首页企业工具我的资产]
This commit is contained in:
zhangmanman
@@ -16,9 +16,25 @@
|
||||
class="item-cover"
|
||||
:src="item.cover"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="item-title nowrap">{{item.name || '-'}}</view>
|
||||
<view class="item-btn" @click="onOpenWechat(item)">进店</view>
|
||||
/>
|
||||
<view class="item-vip">
|
||||
<view class="item-vip-text">{{item.level.name}}</view>
|
||||
<view class="item-vip-tips">企业</view>
|
||||
</view>
|
||||
<view class="item-title nowrap">{{item.name || '-'}}</view>
|
||||
<view class="item-trade nowrap">行业：{{item.industry.title}}</view>
|
||||
<view class="item-bar">
|
||||
<view class="item-bar-color">
|
||||
<view class="item-bar-strip" :style="{width: item.process + '%'}">
|
||||
<text class="item-bar-per">{{item.process}}%</text>
|
||||
</view>
|
||||
</view>
|
||||
<image class="item-bar-strip-img" src="../../static/icons/equity_arrow_up.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="item-url">
|
||||
<view class="item-credit"><image class="item-credit-img" src="../../static/icons/equity_arrow_icon.png" mode="aspectFill"></image>信用值 {{item.integrity}}</view>
|
||||
<view class="item-btn" @click="onOpenWechat(item)">进店<image src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
@@ -30,15 +46,29 @@
|
||||
</view>
|
||||
<swiper class="hot-swiper">
|
||||
<swiper-item v-for="(item, index) in hotBus" :key="index">
|
||||
<view class="hot-box">
|
||||
<view class="hot-box" @click="onOpenWechat(item)">
|
||||
<image
|
||||
class="cover"
|
||||
:src="item.cover"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
/>
|
||||
<view class="hot-vip">{{item.level.name}}</view>
|
||||
<view class="hot-content">
|
||||
<view class="hot-title nowrap">{{item.name || '-'}}</view>
|
||||
<view class="credibility">
|
||||
<view class="hot-title nowrap">{{item.name || '-'}}</view>
|
||||
<view class="hot-credit">信誉值 {{item.integrity}}</view>
|
||||
<view class="hot-trade nowrap">所属行业：{{item.industry.title}}</view>
|
||||
<view class="hot-warrant">
|
||||
<view class="hot-warrant-text nowrap">
|
||||
权证数量：{{item.goodsCount}}
|
||||
</view>
|
||||
<view class="hot-bar">
|
||||
<view class="hot-bar-color">
|
||||
<view class="hot-bar-strip" :style="{width: item.process + '%'}"></view>
|
||||
</view>
|
||||
<view class="hot-bar-per">{{item.process}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="credibility">
|
||||
<uni-rate
|
||||
:readonly="true"
|
||||
color="#ddd"
|
||||
@@ -47,9 +77,13 @@
|
||||
:size="14"
|
||||
/>
|
||||
</view>
|
||||
<view class="trading nowrap">累计交易{{item.orders || 0}}次</view>
|
||||
</view>
|
||||
<view class="btn" @click="onOpenWechat(item)">进店</view>
|
||||
<view class="trading nowrap">累计交易次</view> -->
|
||||
</view>
|
||||
<view class="hot-tool">
|
||||
<view class="hot-deal">
|
||||
交易量<text class="hot-deal-number">{{item.saleCount || 0}}次</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
@@ -76,7 +110,11 @@
|
||||
<view class="classify-item" v-for="(item, index) in classify" :key="index" @click="onClassify">
|
||||
<image class="cover" :src="item.cover" mode="aspectFill"></image>
|
||||
<view class="title">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="classify-item">
|
||||
<image class="cover" src="../../static/icons/equity_nav.png" mode="aspectFill"></image>
|
||||
<view class="title">查看全部</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 每日推荐 -->
|
||||
@@ -109,11 +147,23 @@
|
||||
<view class="coupons" v-if="coupons.length > 0">
|
||||
<view class="coupons-item" v-for="(item, index) in coupons" :key="index">
|
||||
<view class="content">
|
||||
<view class="coupons-title">{{item.title}}</view>
|
||||
<view class="coupons-title">
|
||||
<view class="coupons-title-tips" v-if="item.type">
|
||||
<!-- value == 1服务券 value == 2代金券 value == 3提货券 -->
|
||||
<image v-if="item.type.value == '1'" class="coupons-title-icon" src="../../static/icons/equity_coupons_01.png" mode="aspectFill"></image>
|
||||
<image v-else-if="item.type.value == '2'" class="coupons-title-icon" src="../../static/icons/equity_coupons_02.png" mode="aspectFill"></image>
|
||||
<image v-else-if="item.type.value == '3'" class="coupons-title-icon" src="../../static/icons/equity_coupons_03.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="coupons-title-name">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="sun-text">{{item.title}}</view>
|
||||
<view class="btn">立即领取</view>
|
||||
</view>
|
||||
<image class="logo" :src="item.cover" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="logo">
|
||||
<image class="logo-img" :src="item.cover" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="btn">立即领取</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 优选商品 -->
|
||||
@@ -189,10 +239,10 @@
|
||||
},
|
||||
// 企业广场
|
||||
getCompanies(){
|
||||
companies().then(res=>{
|
||||
companies().then(res=>{
|
||||
this.recommendBus = res.positions
|
||||
this.hotBus = res.hot
|
||||
this.industryBus = [{title: '全部', industry_id: ''}, ...res.industries]
|
||||
this.industryBus = [{title: '全部', industry_id: ''}, ...res.industries]
|
||||
this.getCompaniesList()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
@@ -217,8 +267,9 @@
|
||||
},
|
||||
// 易货首页
|
||||
getMall(){
|
||||
mall().then(res => {
|
||||
this.classify = res.categories
|
||||
mall().then(res => {
|
||||
console.log(res.coupons)
|
||||
this.classify = res.categories.slice(0, 9)
|
||||
this.banners = res.banners
|
||||
this.coupons = res.coupons
|
||||
this.position = res.positions
|
||||
@@ -404,19 +455,37 @@
|
||||
border-radius: $radius/2;
|
||||
padding: $padding - 10;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
// display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.content{
|
||||
width: calc(100% - 118rpx);
|
||||
width: 100%;
|
||||
.coupons-title{
|
||||
font-size: $title-size-lg;
|
||||
@extend .nowrap;
|
||||
font-size: $title-size-lg;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 54rpx;
|
||||
display: flex;
|
||||
@extend .nowrap;
|
||||
.coupons-title-tips {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background-color: #f5f5f5;
|
||||
text-align: center;
|
||||
margin-right: 10rpx;
|
||||
.coupons-title-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin: 11rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sun-text{
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
margin-bottom: $margin/2;
|
||||
line-height: 54rpx;
|
||||
@extend .nowrap;
|
||||
}
|
||||
.btn{
|
||||
@@ -431,11 +500,29 @@
|
||||
}
|
||||
}
|
||||
.logo{
|
||||
width: 98rpx;
|
||||
height: 98rpx;
|
||||
border-radius: 50%;
|
||||
border:solid 1rpx $border-color;
|
||||
}
|
||||
width: 100%;
|
||||
padding-top: 70%;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.logo-img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
background-color: #faf2dd;
|
||||
border-radius: 8rpx;
|
||||
margin-top: 20rpx;
|
||||
color: #fd5f3c;
|
||||
text-align: center;
|
||||
line-height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 行业分类
|
||||
@@ -460,7 +547,7 @@
|
||||
// 热易商家
|
||||
.hot-swiper{
|
||||
margin: 0 $margin $margin $margin;
|
||||
height: 198rpx;
|
||||
height: 240rpx;
|
||||
.hot-box{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
@@ -468,7 +555,41 @@
|
||||
border-radius: ($radius/2);
|
||||
background: white;
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
.hot-vip {
|
||||
position: absolute;
|
||||
top: $padding;
|
||||
left: $padding;
|
||||
background-color: #191919;
|
||||
color: #f3c8a8;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
padding: 0 8rpx;
|
||||
border-radius: 6rpx 6rpx 6rpx 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.hot-tool {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
right: $padding;;
|
||||
.hot-deal {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 0 14rpx rgba(260, 60, 80, .9);
|
||||
background: linear-gradient(to bottom, #e1293f, #f85d31);
|
||||
color: #FFFFFF;
|
||||
font-size: 26rpx;
|
||||
border-radius: 50%;
|
||||
padding-top: 25rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 24rpx;
|
||||
.hot-deal-number {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cover{
|
||||
position: absolute;
|
||||
@@ -478,14 +599,81 @@
|
||||
height: calc(198rpx - #{$padding * 2});
|
||||
}
|
||||
.hot-content{
|
||||
padding-right: calc(100rpx + #{$padding});
|
||||
padding-left: calc(198rpx - #{$padding});
|
||||
.hot-title{
|
||||
font-weight: bold;
|
||||
font-size: $title-size-lg;
|
||||
height: 40rpx;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
line-height: 40rpx;
|
||||
height: 40rpx;
|
||||
width: 60%;
|
||||
}
|
||||
.hot-credit {
|
||||
font-size: 24rpx;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
color: #ec652f;
|
||||
border: 2rpx solid #ec652f;
|
||||
line-height: 36rpx;
|
||||
border-radius: 6rpx;
|
||||
padding: 0 6rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.hot-trade,
|
||||
.hot-warrant{
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
.hot-trade {
|
||||
width: 60%;
|
||||
}
|
||||
.hot-warrant {
|
||||
display: flex;
|
||||
.hot-warrant-text {
|
||||
width: 50%;
|
||||
}
|
||||
.hot-bar {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
margin-top: 4rpx;
|
||||
.hot-bar-color{
|
||||
background: #ebebeb;
|
||||
border-left: 2rpx solid transparent;
|
||||
border-right: 2rpx solid transparent;
|
||||
width: calc(100% - 50rpx);
|
||||
border-radius: 60rpx;
|
||||
margin: 6rpx 10rpx 0 0;
|
||||
height: 18rpx;
|
||||
.hot-bar-strip {
|
||||
background-color: #ff8562;
|
||||
border: 1px solid #ff8562;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1vw 3vh 10vh rgba(168, 7, 7, 0.8);
|
||||
background-size: 3em 3em;
|
||||
background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #ec3950 0.9em, #ec3950 2.1em, transparent 2.1em, transparent 2.9em, #ec3950 3.1em);
|
||||
height: 14rpx;
|
||||
border-radius: 60rpx;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to bottom, #db152e, rgba(168, 7, 7, 0.6) 15%, transparent 60%, #db152e);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hot-bar-per {
|
||||
font-size: 20rpx;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
transform: scale(.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
.credibility{
|
||||
height: calc(108rpx - #{$padding * 2});
|
||||
@@ -514,13 +702,14 @@
|
||||
}
|
||||
// 推荐商家
|
||||
.recommended{
|
||||
.item-box{
|
||||
white-space:nowrap;
|
||||
.item-box{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 240rpx;
|
||||
background: white;
|
||||
width: 370rpx;
|
||||
margin-left: $margin;
|
||||
padding: ($padding + $padding/2) $padding;
|
||||
border-radius: ($radius/2);
|
||||
padding: ($padding + $padding/2) $padding - 10;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
@@ -528,24 +717,137 @@
|
||||
margin-right: $margin;
|
||||
}
|
||||
.item-cover{
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
background: #eee;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
vertical-align: top;
|
||||
}
|
||||
border-radius: $radius / 2;
|
||||
}
|
||||
.item-vip {
|
||||
position: absolute;
|
||||
left: 0;;
|
||||
top: 20rpx;
|
||||
background-color: #f3ceb3;
|
||||
font-size: 24rpx;
|
||||
line-height: 38rpx;
|
||||
border-radius: 0 6rpx 6rpx 0;
|
||||
display: flex;
|
||||
.item-vip-text {
|
||||
background-color: #191919;
|
||||
color: #f3c8a8;
|
||||
padding: 0 6rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.item-vip-tips {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
}
|
||||
font-weight: bold;
|
||||
font-size: $title-size-lg;
|
||||
padding: ($padding/2) 0;
|
||||
}
|
||||
.item-btn{
|
||||
font-size: $title-size-m;
|
||||
background-color: $text-price;
|
||||
color: white;
|
||||
line-height: 50rpx;
|
||||
display: inline-block;
|
||||
width: 100rpx;
|
||||
}
|
||||
.item-title{
|
||||
margin: 20rpx 0 10rpx;
|
||||
}
|
||||
.item-trade {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.item-bar {
|
||||
display: flex;
|
||||
margin: 10rpx 0 20rpx;
|
||||
.item-bar-color {
|
||||
background: #ebebeb;
|
||||
border-left: 2rpx solid transparent;
|
||||
border-right: 2rpx solid transparent;
|
||||
width: calc(100% - 50rpx);
|
||||
border-radius: 60rpx;
|
||||
margin: 4rpx 10rpx 0 0;
|
||||
.item-bar-strip {
|
||||
background-color: #f3c8a8;
|
||||
border: 2rpx solid #f3c8a8;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 1vw 3vh 10vh rgba(168, 7, 7, 0.8);
|
||||
background-size: 3em 3em;
|
||||
background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #ee883d 0.9em, #ee883d 2.1em, transparent 2.1em, transparent 2.9em, #ee883d 3.1em);
|
||||
animation: warning-animation 1.4s infinite linear;
|
||||
height: 14rpx;
|
||||
border-radius: 60rpx;
|
||||
position: relative;
|
||||
.item-bar-per {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -6rpx;
|
||||
height: 100%;
|
||||
font-size: 20rpx;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.4);
|
||||
transform: scale(.8);
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to bottom, #ee883d, rgba(168, 7, 7, 0.6) 15%, transparent 60%, #ee883d);
|
||||
border-radius: 10px;
|
||||
}
|
||||
@keyframes warning-animation {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 3em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-bar-strip-img {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
animation: bounce-up 1.5s linear infinite;
|
||||
}
|
||||
@keyframes bounce-up {
|
||||
25% {transform: translateY(2rpx);}
|
||||
50%, 100% {transform: translateY(0);}
|
||||
75% {transform: translateY(-2rpx);}
|
||||
}
|
||||
}
|
||||
.item-url {
|
||||
background: linear-gradient(to right, #e1293f, #f85d31);
|
||||
color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
line-height: 52rpx;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
.item-credit {
|
||||
font-size: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
background-color: #FFFFFF;
|
||||
color: #e1293f;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
padding: 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
.item-credit-img {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin: 12rpx 8rpx 0 0;
|
||||
}
|
||||
}
|
||||
.item-btn{
|
||||
padding-left: 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,27 +13,48 @@
|
||||
<!-- 产品详情 -->
|
||||
<view class="goods-content">
|
||||
<view class="header">
|
||||
<view class="title">{{goodsObj.name}}</view>
|
||||
<view class="sub-title">{{goodsObj.description}}</view>
|
||||
<view class="flex-box">
|
||||
<view class="price"><text>￥</text>{{goodsObj.price.show}}</view>
|
||||
<view class="sales">累计易货{{goodsObj.sales}}次</view>
|
||||
</view>
|
||||
<view class="flex-box">
|
||||
<view class="price"><text>￥</text>{{goodsObj.price.show}}</view>
|
||||
<view class="sales">累计易货{{goodsObj.sales}}次</view>
|
||||
</view>
|
||||
<view class="coupon">
|
||||
<view class="coupon-list" v-for="(item, index) in couponSee" :key="index">
|
||||
<view class="coupon-label">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon-btn">领券<image class="coupon-btn-img" src="../../static/icons/goods_row.png" mode="aspectFill"></image></view>
|
||||
</view>
|
||||
<view class="title"><view class="title-hot">热卖</view>{{goodsObj.name}}</view>
|
||||
<!-- <view class="sub-title">{{goodsObj.description}}</view> -->
|
||||
</view>
|
||||
<!-- 商家信息 -->
|
||||
<view class="store">
|
||||
<view class="title">{{goodsObj.shop.name}}</view>
|
||||
<image class="logo" :src="goodsObj.shop.cover" mode="aspectFill"></image>
|
||||
<view class="rate">
|
||||
<uni-rate
|
||||
:readonly="true"
|
||||
color="#ddd"
|
||||
active-color="#c82626"
|
||||
:value="2.5"
|
||||
:size="14"
|
||||
/>
|
||||
<image class="logo" :src="goodsObj.shop.cover" mode="aspectFill"></image>
|
||||
<view class="store-cont">
|
||||
<view class="title">{{goodsObj.shop.name}}</view>
|
||||
<view class="rate">
|
||||
<uni-rate
|
||||
:readonly="true"
|
||||
color="#ddd"
|
||||
active-color="#c82626"
|
||||
:value="2.5"
|
||||
:size="14"
|
||||
/>
|
||||
</view>
|
||||
<view class="openbtn" @click="onOpenWechat">进店</view>
|
||||
</view>
|
||||
<view class="openbtn" @click="onOpenWechat">进店</view>
|
||||
<view class="tooSee">
|
||||
<view class="tooSee-label">
|
||||
区块链证书
|
||||
</view>
|
||||
<view class="tooSee-label">
|
||||
商品认证
|
||||
</view>
|
||||
<view class="tooSee-label">
|
||||
商品溯源
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 产品规格 -->
|
||||
<view class="size">
|
||||
@@ -70,18 +91,23 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loding : true,
|
||||
goodsObj: {},
|
||||
identity: '',
|
||||
company : {}
|
||||
loding : true,
|
||||
goodsObj : {},
|
||||
identity : '',
|
||||
company : {},
|
||||
coupons : {},
|
||||
couponSee : ""
|
||||
};
|
||||
},
|
||||
created() {
|
||||
goods(this.$Route.query.id || 16).then(res=>{
|
||||
console.log(res.coupons)
|
||||
this.loding = false
|
||||
this.goodsObj = res
|
||||
this.identity = res.identity.id || ''
|
||||
this.company = res.company
|
||||
this.couponSee= res.coupons.slice(0, 3)
|
||||
this.coupons = res.coupons
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
@@ -158,17 +184,26 @@
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background-color: white;
|
||||
margin-top: -$margin;
|
||||
border-radius: $radius $radius 0 0;
|
||||
padding-bottom: calc((#{$padding} * 2) + (env(safe-area-inset-bottom) / 2) + 90rpx);
|
||||
padding-bottom: calc((#{$padding} * 2) + (constant(safe-area-inset-bottom) / 2) + 90rpx);
|
||||
// 详情
|
||||
.header{
|
||||
padding: ($padding*2) $padding $padding;
|
||||
padding: 0 $padding $padding;
|
||||
.title{
|
||||
font-size: $title-size;
|
||||
font-weight: bold;
|
||||
line-height: 50rpx;
|
||||
display: flex;
|
||||
.title-hot {
|
||||
background-color: #fee195;
|
||||
font-size: 24rpx;
|
||||
border-radius: 50rpx;
|
||||
padding: 0 10rpx;
|
||||
height: 38rpx;
|
||||
line-height: 38rpx;
|
||||
margin: 6rpx 10rpx 0 0;
|
||||
}
|
||||
}
|
||||
.sub-title{
|
||||
line-height: 40rpx;
|
||||
@@ -196,15 +231,52 @@
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// 新增优惠券
|
||||
.coupon {
|
||||
background-color: #fef2f2;
|
||||
color: #e1293f;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #e7e2df;
|
||||
padding: $padding - 10;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-bottom: $margin - 10;
|
||||
.coupon-list {
|
||||
font-size: 24rpx;
|
||||
.coupon-label {
|
||||
display: inline-block;
|
||||
border: 2rpx solid #e1293f;
|
||||
border-radius: 50rpx;
|
||||
padding: 4rpx 15rpx;
|
||||
margin-right: $margin - 10;
|
||||
}
|
||||
}
|
||||
.coupon-btn {
|
||||
position: absolute;
|
||||
right: $padding - 10;
|
||||
top: $padding - 10;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
font-weight: 700;
|
||||
.coupon-btn-img {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 店铺
|
||||
.store{
|
||||
position: relative;
|
||||
margin: 0 $margin;
|
||||
background: #F8F8F8;
|
||||
// background: #F8F8F8;
|
||||
background: #999;
|
||||
border-radius: $radius/2;
|
||||
padding: $padding 200rpx $padding (118rpx + $padding);
|
||||
min-height: 98rpx;
|
||||
padding: $padding;
|
||||
min-height: 160rpx;
|
||||
.logo{
|
||||
position: absolute;
|
||||
left: $margin;
|
||||
@@ -213,6 +285,69 @@
|
||||
height: 98rpx;
|
||||
border-radius: $radius/2;
|
||||
}
|
||||
.store-cont {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding-left: 150rpx;
|
||||
padding-top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
height: 140rpx;
|
||||
}
|
||||
.tooSee {
|
||||
position: absolute;
|
||||
top: 150rpx;
|
||||
left: 0;
|
||||
font-size: 24rpx;
|
||||
padding-left: $padding;
|
||||
box-sizing: border-box;
|
||||
.tooSee-label {
|
||||
background-color: #fd683e;
|
||||
border-radius: 8rpx 4rpx 4rpx 6rpx;
|
||||
color: #FFFFFF;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
padding: 0 $padding - 15;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin-right: $margin * 2;
|
||||
position: relative;
|
||||
&::after, &::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
right: -40rpx;
|
||||
top: 0;
|
||||
background-color: #f64c37;
|
||||
width: 40rpx;
|
||||
height: 100%;
|
||||
border-radius: 4rpx 8rpx 8rpx 4rpx;
|
||||
}
|
||||
&::before {
|
||||
right: -1rpx;
|
||||
top: 5%;
|
||||
border: 1rpx dashed #fb745a;
|
||||
height: 90%;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
&:first-child {
|
||||
background-color: #f2d7aa;
|
||||
color: #362507;
|
||||
}
|
||||
&:first-child::after {
|
||||
background-color: #f1d599;
|
||||
}
|
||||
&:first-child::before {
|
||||
border-color: #fae2b9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-size: $title-size-lg;
|
||||
font-weight: bold;
|
||||
@@ -221,12 +356,10 @@
|
||||
}
|
||||
// rate
|
||||
.openbtn{
|
||||
width: 140rpx;
|
||||
position: absolute;
|
||||
right: $margin;
|
||||
top: 50%;
|
||||
background: $text-price;
|
||||
color: white;
|
||||
top: $margin * 3;
|
||||
color: #848484;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
<image class="item-cover" src="@/static/icons/user_icon_03.png" mode="aspectFill"></image>
|
||||
<view class="item-title">我的优惠券</view>
|
||||
</view>
|
||||
<view class="item" @click="outLogin">
|
||||
<view class="item">
|
||||
<image class="item-cover" src="@/static/icons/user_icon_04.png" mode="aspectFill"></image>
|
||||
<view class="item-title">地址管理</view>
|
||||
</view>
|
||||
@@ -119,31 +119,30 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 排名信息 -->
|
||||
<view class="user-group">
|
||||
<view class="title">
|
||||
<view class="title-text">全站推广人数排名</view>
|
||||
</view>
|
||||
<view class="ranking-item">
|
||||
<view class="ranking-number">1</view>
|
||||
<image class="ranking-cover" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
|
||||
<view class="ranking-nickname nowrap">唐明明唐明明唐明明唐明明唐明明唐明明唐明明</view>
|
||||
<view class="ranking-count">100人</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 排名信息 -->
|
||||
<view class="user-group">
|
||||
<view class="title">
|
||||
<view class="title-text">全站推广企业排名</view>
|
||||
</view>
|
||||
<view class="ranking-item">
|
||||
<view class="ranking-number">1</view>
|
||||
<image class="ranking-cover" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
|
||||
<view class="ranking-nickname nowrap">唐明明唐明明唐明明唐明明唐明明唐明明唐明明</view>
|
||||
<view class="ranking-count">100家</view>
|
||||
<view class="title">
|
||||
<view class="title-text">推广排名</view>
|
||||
</view>
|
||||
<view class="ranking ranking-after">
|
||||
<view class="ranking-title">
|
||||
<view class="ranking-text">全站推广人数</view>
|
||||
<view class="ranking-number">5</view>
|
||||
</view>
|
||||
<image class="tips" src="../../static/icons/property_icon_00.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="ranking">
|
||||
<view class="ranking-title">
|
||||
<view class="ranking-text">推广企业</view>
|
||||
<view class="ranking-number">5</view>
|
||||
</view>
|
||||
<image class="tips" src="../../static/icons/property_icon_01.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 推广海报 -->
|
||||
<view class="poster-text">推广海报</view>
|
||||
<carousel :img-list="imgList" url-key="url" @selected="selectedBanner"/>
|
||||
</block>
|
||||
<!-- 版权信息 -->
|
||||
@@ -173,9 +172,9 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
outLogin(){
|
||||
this.$store.commit('setToken', '')
|
||||
},
|
||||
// outLogin(){
|
||||
// this.$store.commit('setToken', '')
|
||||
// }
|
||||
selectedBanner(item, index) {
|
||||
console.log('🥒', item, index)
|
||||
}
|
||||
@@ -340,6 +339,39 @@
|
||||
margin: $margin;
|
||||
background: white;
|
||||
border-radius: $radius;
|
||||
.ranking {
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: $padding $padding - 10 $padding - 10 $padding;
|
||||
box-sizing: border-box;
|
||||
.ranking-title {
|
||||
font-size: 28rpx;
|
||||
.ranking-text {
|
||||
margin-bottom: $margin - 10;
|
||||
}
|
||||
.ranking-number {
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 25rpx;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
}
|
||||
.ranking-after::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 2rpx;
|
||||
height: 100%;
|
||||
background-color: $border-color;
|
||||
}
|
||||
.title{
|
||||
padding: $padding $padding ($padding - 10);
|
||||
display: flex;
|
||||
@@ -370,6 +402,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.poster-text {
|
||||
margin: $margin + 10 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
// 易货订单
|
||||
.order-flex{
|
||||
.item{
|
||||
@@ -418,40 +454,4 @@
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
|
||||
// 排行榜
|
||||
.ranking-item{
|
||||
position: relative;
|
||||
padding: ($padding - 10) $padding ($padding - 10) ($padding + 158);
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
min-height: 88rpx;
|
||||
.ranking-cover{
|
||||
position: absolute;
|
||||
left: $padding + 30;
|
||||
height: 88rpx;
|
||||
width: 88rpx;
|
||||
border-radius: 50%;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.ranking-number{
|
||||
position: absolute;
|
||||
left: $padding;
|
||||
width: 30rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.ranking-nickname{
|
||||
width: calc(100% - 200rpx);
|
||||
padding-right: 20rpx;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
.ranking-count{
|
||||
width: 200rpx;
|
||||
text-align: right;
|
||||
color: $text-gray;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -29,10 +29,12 @@
|
||||
<view class="statusBar-box">
|
||||
<image class="logo" :src="company.logo" mode="aspectFill"></image>
|
||||
<view class="company">
|
||||
<view class="name">{{company.name}}</view>
|
||||
<view class="faith">诚信{{company.faith}}</view>
|
||||
<view class="name">{{company.name}}<image @click="$Router.push({name: 'Basics'})" class="name-img" src="../../static/icons/store_icon_pen.png" mode="aspectFill"></image></view>
|
||||
<view class="tool">
|
||||
<view class="faith"><image class="faith-img" src="../../static/icons/store_icon_row.png" mode="aspectFill"></image>诚信{{company.faith}}</view>
|
||||
<view class="btn"><image class="btn-img" src="../../static/icons/store_icon_icon.png" mode="aspectFill"></image>{{company.identity}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn" @click="$Router.push({name: 'Vip'})">{{company.identity}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 老板 -->
|
||||
@@ -199,36 +201,70 @@
|
||||
background: $text-price;
|
||||
@extend .ios-top;
|
||||
.statusBar-box{
|
||||
min-height: 68rpx;
|
||||
min-height: 90rpx;
|
||||
position: relative;
|
||||
padding: $padding ($padding + 200) $padding ($padding + 88);
|
||||
color: white;
|
||||
.logo{
|
||||
position: absolute;
|
||||
left: $padding;
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
width: 94rpx;
|
||||
height: 94rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #ed8483;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 4rpx 15rpx rgba(109,1,0,.8);
|
||||
}
|
||||
.company{
|
||||
margin-left: 30rpx;
|
||||
.name{
|
||||
line-height: 40rpx;
|
||||
@extend .nowrap;
|
||||
font-size: $title-size;
|
||||
display: flex;
|
||||
.name-img {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin: 7rpx 0 0 15rpx;
|
||||
}
|
||||
}
|
||||
.faith{
|
||||
line-height: 28rpx;
|
||||
@extend .nowrap;
|
||||
font-size: $title-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
position: absolute;
|
||||
right: $padding;
|
||||
top: $padding;
|
||||
line-height: 68rpx;
|
||||
font-size: $title-size-m;
|
||||
.tool {
|
||||
display: flex;
|
||||
margin-top: 13rpx;
|
||||
.faith{
|
||||
line-height: 40rpx;
|
||||
height: 38rpx;
|
||||
@extend .nowrap;
|
||||
font-size: 24rpx;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
padding: 0 15rpx;
|
||||
border-radius: 60rpx;
|
||||
margin-right: 30rpx;
|
||||
display: flex;
|
||||
.faith-img {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin: 5rpx 4rpx 0 0;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
line-height: 40rpx;
|
||||
height: 38rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 0 15rpx 0 30rpx;
|
||||
background-color: #913335;
|
||||
display: inline-block;
|
||||
border-radius: 0 60rpx 60rpx 0;
|
||||
position: relative;
|
||||
.btn-img {
|
||||
position: absolute;
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
left: -20rpx;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.statusBar-title{
|
||||
|
||||
Reference in New Issue
Block a user