|
|
|
@ -1,6 +1,8 @@ |
|
|
|
|
<template> |
|
|
|
|
<view :style="{ 'background-image': `linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 100%),url(${store.mer_banner})` }" |
|
|
|
|
<!-- :style="{ 'background-image': `linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 100%),url(${store.mer_banner})` }" --> |
|
|
|
|
<view |
|
|
|
|
class="store-home"> |
|
|
|
|
<image src="/static/images/green.png" mode="widthFix" class="homePic"></image> |
|
|
|
|
<!-- 搜索 --> |
|
|
|
|
<!-- #ifdef MP || APP-PLUS --> |
|
|
|
|
<view :style="{ height: statusBarHeight }"></view> |
|
|
|
@ -21,7 +23,7 @@ |
|
|
|
|
<navigator :url="'/pages/store/list/index?mer_id='+id" hover-class="none" class="search"><text class="iconfont icon-xiazai5"></text>搜索商品</navigator> |
|
|
|
|
</view> |
|
|
|
|
<!-- #endif --> |
|
|
|
|
<view v-show="navShow && tabActive === 3" class="nav" :style="viewColor"> |
|
|
|
|
<!-- <view v-show="navShow && tabActive === 3" class="nav" :style="viewColor"> |
|
|
|
|
<view class="nav-cont"> |
|
|
|
|
<view :class="{ active: navActive === 0 }" class="item" @click="navActive = 0;select.show = !select.show"> |
|
|
|
|
<view class="cont"> |
|
|
|
@ -51,9 +53,9 @@ |
|
|
|
|
<text v-if="item.id === select.selected" class="iconfont icon-gou"></text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> --> |
|
|
|
|
<!--diy页面的导航--> |
|
|
|
|
<view v-show="navShow && tabActive == 1" class="nav" :style="viewColor"> |
|
|
|
|
<!-- <view v-show="navShow && tabActive == 1" class="nav" :style="viewColor"> |
|
|
|
|
<view class="nav-cont"> |
|
|
|
|
<view :class="{ active: diyActive == 0 }" class="item" @click="setDiy"> |
|
|
|
|
<view class="cont">精选</view> |
|
|
|
@ -68,7 +70,7 @@ |
|
|
|
|
<view class="cont">领券</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> --> |
|
|
|
|
<scroll-view class="main" scroll-y="true" @scroll="scrollHome" catchtouchmove :style="viewColor"> |
|
|
|
|
<!-- 店铺信息 --> |
|
|
|
|
<view id="store" class="store"> |
|
|
|
@ -86,7 +88,7 @@ |
|
|
|
|
<view |
|
|
|
|
:style="{width: `${score.star.toFixed(2)}%`, backgroundImage: `url(${domain}/static/diy/score1${keyColor}.png)`}"></view> |
|
|
|
|
</view> |
|
|
|
|
<view>{{ score.number.toFixed(1) }}</view> |
|
|
|
|
<view style="margin-left: 13rpx;color:#E53623;font-size:28rpx;">{{ score.number.toFixed(1) }}</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<!-- #ifdef H5 --> |
|
|
|
@ -102,16 +104,16 @@ |
|
|
|
|
<view v-else class="kefu" @click="goService"> |
|
|
|
|
<text class="iconfont icon-kefu3"></text> |
|
|
|
|
</view> |
|
|
|
|
<button hover-class="none" :class="store.care ? 'care' : ''" v-if="!isLogin" @click="authOpen"> |
|
|
|
|
<!-- <button hover-class="none" :class="store.care ? 'care' : ''" v-if="!isLogin" @click="authOpen"> |
|
|
|
|
<text v-show="!store.care" class="iconfont icon-guanzhu"></text> |
|
|
|
|
{{ store.care ? '已关注' : '关注' }} |
|
|
|
|
</button> |
|
|
|
|
<button v-else hover-class="none" :class="store.care ? 'care' : ''" @click="followToggle"> |
|
|
|
|
<text v-show="!store.care" class="iconfont icon-guanzhu"></text> |
|
|
|
|
{{ store.care ? '已关注' : '关注' }} |
|
|
|
|
</button> |
|
|
|
|
</button> --> |
|
|
|
|
</view> |
|
|
|
|
<view v-show="!navShow && tabActive === 3" class="nav"> |
|
|
|
|
<!-- <view v-show="!navShow && tabActive === 3" class="nav"> |
|
|
|
|
<view class="nav-cont"> |
|
|
|
|
<view :class="{ active: navActive === 0 }" class="item" @click="navActive = 0;select.show = !select.show"> |
|
|
|
|
<view class="cont"> |
|
|
|
@ -143,9 +145,9 @@ |
|
|
|
|
<text v-if="item.id === select.selected" class="iconfont icon-gou"></text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> --> |
|
|
|
|
<!--diy导航--> |
|
|
|
|
<view v-show="!navShow && tabActive === 1" class="nav"> |
|
|
|
|
<!-- <view v-show="!navShow && tabActive === 1" class="nav"> |
|
|
|
|
<view class="nav-cont"> |
|
|
|
|
<view :class="{ active: diyActive == 0 }" class="item" @click="setDiy"> |
|
|
|
|
<view class="cont">精选</view> |
|
|
|
@ -166,7 +168,7 @@ |
|
|
|
|
<text v-if="item.id === select.selected" class="iconfont icon-gou"></text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> --> |
|
|
|
|
<view class="tab-cont" :style="viewColor"> |
|
|
|
|
<!-- diy组件 --> |
|
|
|
|
<view v-show="diyActive == 0 && tabActive == 1"> |
|
|
|
@ -390,12 +392,12 @@ |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
<view class="footer" :style="viewColor"> |
|
|
|
|
<!-- <view class="footer" :style="viewColor"> |
|
|
|
|
<view v-for="(item, index) in tabs" :key="index" :class="{ active: tabActive === item.value }" class="item" @click="tab(item.value)"> |
|
|
|
|
<view :class="['iconfont', item.icon]"></view> |
|
|
|
|
<view>{{ item.name }}</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> --> |
|
|
|
|
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
@ -1109,9 +1111,18 @@ |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.homePic{ |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0px; |
|
|
|
|
left: 0px; |
|
|
|
|
z-index: -1; |
|
|
|
|
height: 140.8px; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
.tab-cont{ |
|
|
|
|
background: #f5f5f5; |
|
|
|
|
min-height: 500rpx; |
|
|
|
|
margin-top: 70rpx; |
|
|
|
|
} |
|
|
|
|
/deep/.care { |
|
|
|
|
background-image: none !important; |
|
|
|
@ -1126,9 +1137,9 @@ |
|
|
|
|
left: 0; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
padding-bottom: 100rpx; |
|
|
|
|
padding-bottom: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/ |
|
|
|
|
padding-bottom: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/ |
|
|
|
|
// padding-bottom: 100rpx; |
|
|
|
|
// padding-bottom: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/ |
|
|
|
|
// padding-bottom: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/ |
|
|
|
|
background: left top/750rpx 390rpx no-repeat fixed; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
@ -1217,8 +1228,8 @@ |
|
|
|
|
align-items: center; |
|
|
|
|
padding-right: 20rpx; |
|
|
|
|
padding-left: 20rpx; |
|
|
|
|
padding-top: 20rpx; |
|
|
|
|
padding-bottom: 22rpx; |
|
|
|
|
padding-top: 40rpx; |
|
|
|
|
// padding-bottom: 22rpx; |
|
|
|
|
image { |
|
|
|
|
width: 74rpx; |
|
|
|
|
height: 74rpx; |
|
|
|
@ -1252,13 +1263,14 @@ |
|
|
|
|
overflow: hidden; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
font-weight: bold; |
|
|
|
|
// font-weight: bold; |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
line-height: 1; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
margin: 0 20rpx; |
|
|
|
|
} |
|
|
|
|
.iconfont { |
|
|
|
|
margin-left: 10rpx; |
|
|
|
|
// margin-left: 10rpx; |
|
|
|
|
font-size: 17rpx; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
} |
|
|
|
@ -1266,7 +1278,7 @@ |
|
|
|
|
.score { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-top: 17rpx; |
|
|
|
|
margin-top: 20rpx; |
|
|
|
|
font-weight: 500; |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
line-height: 1; |
|
|
|
|