You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
914 lines
23 KiB
914 lines
23 KiB
<template>
|
|
<view class="pages-index" @touchstart="start" @touchend="end" @touchmove.stop="move">
|
|
<scroll-view class="pages-scroll" scroll-y="true" :enhanced="true"
|
|
:bounces="false" :show-scrollbar="false" @scroll="pageScroll($event)" @scrolltolower="reachBottom">
|
|
<!-- #ifdef MP -->
|
|
<view class="pages-hd" :style="'min-height: ' + (searchScrollTop+95) + 'px;background: url(' + event_rul + '/static/img/home/header-bg.png);background-size: 100% 100%;'">
|
|
<view class="title_box pages-hd__title" :style="'top: ' + fixTop + 'px;height: '+ menuButtonHeight+ 'px'">
|
|
<view class="title">
|
|
敬衡商城
|
|
</view>
|
|
</view>
|
|
<view class="input_box"
|
|
:style="[{'top': `${searchScrollTop}px`} ,
|
|
{'width': `${searchWidth}%`}]"
|
|
@click="goto" data-url='/pages/shop/search'>
|
|
<text class="iconfont icon-sousuo"></text>
|
|
<input :disabled='true' type="text" placeholder-style="font-size:28rpx; color: #FFF;" placeholder="餐桌盛宴 与你相食" />
|
|
<view class="btn">搜索</view>
|
|
</view>
|
|
<!-- 刷新状态view -->
|
|
<view v-if="touch" class='pull-refresh' :style="[
|
|
{'height': `${refreshHeight}px`},
|
|
{'padding-top': `${searchScrollTop+38}px`},
|
|
{'background': `url(${event_rul}/static/img/home/header-bg.png)`},
|
|
{'background-size': '100% 360rpx'},
|
|
{'background-position': 'bottom 0 left 0'}]">
|
|
<view class="pull-refresh__loading">
|
|
<view class="dot" :class="{'dot1': refreshLoading }"></view>
|
|
<view class="dot" :class="{'dot2': refreshLoading }"></view>
|
|
<view class="dot" :class="{'dot3': refreshLoading }"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef H5 || APP-PLUS -->
|
|
<view class="pages-hd pages-hdh5" :style="'background: url(' + event_rul + '/static/img/home/header-bg.png);background-size: 100% 100%;'">
|
|
<view class="title_box pages-hd__title">
|
|
<view class="title">敬衡商城</view>
|
|
</view>
|
|
<view class="input_box"
|
|
@click="goto" data-url='/pages/shop/search'>
|
|
<text class="iconfont icon-sousuo"></text>
|
|
<input :disabled='true' type="text" placeholder-style="font-size:28rpx; color: #FFF;" placeholder="" />
|
|
<view class="btn">搜索</view>
|
|
</view>
|
|
<!-- 刷新状态view -->
|
|
<view v-if="touch" class='pull-refresh' :style="[
|
|
{'height': `${refreshHeight}px`},
|
|
{'background': `url(${event_rul}/static/img/home/header-bg.png)`},
|
|
{'background-size': '100% 360rpx'},
|
|
{'background-position': 'bottom 0 left 0'},
|
|
{'background-repeat': 'no-repeat'}]">>
|
|
<view class="pull-refresh__loading">
|
|
<view class="dot" :class="{'dot1': refreshLoading }"></view>
|
|
<view class="dot" :class="{'dot2': refreshLoading }"></view>
|
|
<view class="dot" :class="{'dot3': refreshLoading }"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<scroll-view class="scroll-box" :style="touch ? 'height: ' + scrollHeight + 'px;': ''" :scroll-y="touch">
|
|
<view class="container">
|
|
<swiper
|
|
class="swiper-box"
|
|
:indicator-dots="bannerList.length > 1"
|
|
:autoplay="bannerList.length > 1"
|
|
circular="true"
|
|
indicator-active-color="#333333"
|
|
:interval="5000"
|
|
>
|
|
<swiper-item class="swiper-item" v-for="(item,index) in bannerList" :key="index">
|
|
<image class="swiper-item__img" :src="item.pic_url" mode="widthFix"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<scroll-view class="nav_box" scroll-x="true">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view style="font-size: 24rpx;" class="item" @click="ChannelsUserProfile">
|
|
<image src="https://dev.lansoft.shop/static/img/home/item-icon5.svg" mode=""></image>
|
|
<text>视频号首页</text>
|
|
</view>
|
|
<!-- #endif -->
|
|
<block v-for="(item,index) in navData" :key='index'>
|
|
<view v-if="index != 4" style="font-size: 24rpx;" class="item" @click="goto" :data-url='item.url'>
|
|
<image :src="item.icon" mode=""></image>
|
|
<text>{{item.name}}</text>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
|
|
<view class="fashion_box">
|
|
<!-- #ifdef MP -->
|
|
<view class="left">
|
|
<view class="title">
|
|
<image class="fashion_box-icon" :src="event_rul +'/static/img/home/live-icon.svg'"></image>
|
|
<text>直播精选</text>
|
|
<text class="ico">限时热卖</text>
|
|
</view>
|
|
<view class="bot">
|
|
|
|
<view class="item" @click="goto" :data-url="item.coverImg?'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id='+item.roomId:''" v-for="(item,index) in liveRec" :key='index'>
|
|
<image class="border-a-n" v-if="item.coverImg" :src="item.coverImg" mode=""></image>
|
|
|
|
<view v-else style="border-radius: 120rpx;" class="iconfont icon-shipintianchong shop_note border-a-n">
|
|
|
|
</view>
|
|
<view class="border" ></view>
|
|
|
|
<view class="border-bx"></view>
|
|
<view class="title_box" style="border-radius: 4rpx;">
|
|
<view class="live-animation" v-show="item.coverImg">
|
|
<text class="heng1"></text>
|
|
<text class="heng2"></text>
|
|
<text class="heng3"></text>
|
|
</view>
|
|
<view class="shop_title" v-if="item.coverImg" style="">
|
|
{{item.name}}
|
|
</view>
|
|
<view v-else class="shop_title" style="">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<view class="right">
|
|
<view class="title">
|
|
<image class="fashion_box-icon" :src="event_rul +'/static/img/home/recommend-icon.svg'"></image>
|
|
<text>为你推荐</text>
|
|
<text class="ico">甄选好货</text>
|
|
</view>
|
|
<view class="bot">
|
|
<view class="item" @click="goto" :data-url="item.pic?'/pages/shop/product?id='+item.proid:''" v-for="(item,index) in shopRec" :key='index'>
|
|
<block v-if="item.pic">
|
|
<image style="border-radius: 10rpx;"
|
|
:src="item.pic" mode="aspectFill"></image>
|
|
<view class="price">
|
|
<text class="symbol">￥</text>{{item.sell_price}}
|
|
</view>
|
|
</block>
|
|
<view v-else class="iconfont icon-shangpin shop_note">
|
|
<view class="item-tips">{{item.sell_price}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content" style="margin-top: 30rpx;">
|
|
<home-list @dialogChange="dialogChange" @listZanFn='listZanFn' :list='list'></home-list>
|
|
</view>
|
|
|
|
<nodata v-if="nodata" ></nodata>
|
|
<nomore v-if="nomore"></nomore>
|
|
<loading loadstyle="top:70%;" v-if="loading"></loading>
|
|
<buydialog v-if="buydialogShow" :proid="proid" @buydialogChange="buydialogChange" :menuindex="menuindex"></buydialog>
|
|
|
|
<!-- <popmsg ref="popmsg"></popmsg> -->
|
|
</view>
|
|
</scroll-view>
|
|
<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
|
|
</scroll-view>
|
|
<!-- 悬浮按钮 -->
|
|
<drag-button></drag-button>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
var app = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
anShow:false,
|
|
cartCount:0,
|
|
keyword:'',
|
|
list: [],
|
|
navData: [{
|
|
name: '敬衡日记',
|
|
url: '/diary/evernote/evernote',
|
|
icon: app.globalData.event_url +'/static/img/home/item-icon1.svg'
|
|
},
|
|
{
|
|
name: '话题广场',
|
|
url: '/diary/topic/plaza',
|
|
icon: app.globalData.event_url +'/static/img/home/item-icon2.svg'
|
|
},
|
|
{
|
|
name: '全部商品',
|
|
url: '/pages/shop/classify?homeType=true',
|
|
icon: app.globalData.event_url +'/static/img/home/item-icon3.svg'
|
|
},
|
|
{
|
|
name: '积分商城',
|
|
url: '/activity/scoreshop/prolist',
|
|
icon: app.globalData.event_url +'/static/img/home/item-icon4.svg'
|
|
},
|
|
{
|
|
name: '直播',
|
|
url: '/diary/live/live',
|
|
icon: app.globalData.event_url +'/static/img/home/item-icon5.svg'
|
|
},
|
|
],
|
|
liveRec:[{'name':'暂无直播'},{'name':'暂无直播'}],
|
|
shopRec:[{'sell_price':'暂无商品'},{'sell_price':'暂无商品'}],
|
|
opt: {},
|
|
pagenum: 1,
|
|
loading: false,
|
|
isload: false,
|
|
nomore: false,
|
|
nodata: false,
|
|
datalist: [],
|
|
proid: 0,
|
|
menuindex: -1,
|
|
buydialogShow: false,
|
|
bannerList: [],
|
|
isFixed: false, // 是否固定搜索框
|
|
fixTop: 0, // 搜索框固定后到顶部的距离
|
|
scrollTop: 0, // 内容区域距离顶部的距离
|
|
scrollHeight: 0, // 下拉刷新内容区域高度
|
|
windowHeight: 0, // 屏幕可视区域高度
|
|
clientY: '', // 手指滑动的Y坐标
|
|
touch: '', // 用户上拉还是下滑 (上划: false,下拉: true)
|
|
refreshHeight: 0, // 刷新状态view的高度
|
|
timeout1: null,
|
|
timeout2: null,
|
|
timeout3: null,
|
|
refreshLoading: false, // 刷新loading
|
|
searchWidth: 92,
|
|
searchTop: 0, // 初始搜索框到顶部的距离
|
|
searchScrollTop: 0, // 搜索框滚动的距离 = 从(fixTop+胶囊按钮高度+8)px开始 到 fixTop px结束
|
|
menuButtonHeight: 0, // 胶囊按钮高度
|
|
pagesScrollTop: 0, // 页面滚动高度
|
|
|
|
event_rul: app.globalData.event_url,
|
|
|
|
}
|
|
},
|
|
onLoad: function(opt) {
|
|
this.opt = app.getopts(opt);
|
|
|
|
this.getLists()
|
|
this.getRec()
|
|
// #ifdef MP
|
|
|
|
// 获取右上角胶囊坐标信息
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
|
let menuButtonTop = menuButtonInfo.top; // 胶囊到顶部的距离
|
|
this.menuButtonHeight = menuButtonInfo.height; // 胶囊的高度
|
|
|
|
this.fixTop = menuButtonTop - (38 - this.menuButtonHeight) / 2;
|
|
// console.log("胶囊距离顶部的距离:",menuButtonTop,"胶囊的高度:",this.menuButtonHeight,"input距离顶部的距离:",this.fixTop);
|
|
|
|
this.searchTop = this.fixTop + this.menuButtonHeight + 8;
|
|
this.searchScrollTop = this.searchTop;
|
|
|
|
// #endif
|
|
|
|
this.timeout3 = setTimeout(()=> {
|
|
// 获取内容区域距离顶部的距离
|
|
uni.createSelectorQuery().in(this).select('.scroll-box').boundingClientRect(data => {
|
|
this.scrollTop = data.top;
|
|
// 获取scrollHeight = 屏幕可视区域高度 - 内容区域scroll-view距离顶部距离 - tabbar高度
|
|
this.scrollHeight = this.windowHeight - this.scrollTop - 89;
|
|
}).exec();
|
|
},500)
|
|
},
|
|
onReady() {
|
|
uni.getSystemInfo({
|
|
success: (res) => {
|
|
// 获取屏幕可视区域高度
|
|
this.windowHeight = res.windowHeight;
|
|
}
|
|
})
|
|
},
|
|
onUnload() {
|
|
this.anShow = false;
|
|
clearTimeout(this.timeout1);
|
|
clearTimeout(this.timeout2);
|
|
clearTimeout(this.timeout3);
|
|
},
|
|
onReachBottom: function () {
|
|
if (!this.nodata && !this.nomore) {
|
|
this.pagenum = this.pagenum + 1;
|
|
this.getList()
|
|
}
|
|
},
|
|
methods: {
|
|
// #ifdef MP-WEIXIN
|
|
// 视频号首页
|
|
ChannelsUserProfile() {
|
|
wx.openChannelsUserProfile({
|
|
finderUserName: "sphWdNInL60a6XV",
|
|
success: (res) => {
|
|
console.log("视频号视频获取成功的回调",res);
|
|
},
|
|
fail: (res) => {
|
|
console.log("视频号视频获取失败的回调",res);
|
|
}
|
|
})
|
|
},
|
|
// #endif
|
|
// 页面滚动
|
|
pageScroll(e) {
|
|
let height = this.searchTop;
|
|
// 是否固定搜索框
|
|
if(e.detail.scrollTop >= height - this.fixTop) {
|
|
this.isFixed = true;
|
|
this.searchScrollTop = this.fixTop;
|
|
this.searchWidth = 68;
|
|
} else{
|
|
if(Math.ceil(e.detail.scrollTop) < 5) {
|
|
this.searchWidth = 92;
|
|
}
|
|
this.searchScrollTop = this.searchTop - e.detail.scrollTop;
|
|
this.isFixed = false;
|
|
}
|
|
// 改变搜索框宽度
|
|
if(this.pagesScrollTop < e.detail.scrollTop) {
|
|
if(this.searchWidth > 68) {
|
|
this.searchWidth -= Math.ceil((92-68)/(this.searchTop - this.fixTop));
|
|
}
|
|
} else {
|
|
if(this.searchWidth < 92) {
|
|
this.searchWidth += Math.ceil((92-68)/(this.searchTop - this.fixTop));
|
|
}
|
|
}
|
|
this.pagesScrollTop = e.detail.scrollTop;
|
|
},
|
|
// 页面触底
|
|
reachBottom() {
|
|
if (!this.nodata && !this.nomore) {
|
|
this.pagenum = this.pagenum + 1;
|
|
this.getList()
|
|
}
|
|
},
|
|
//@touchstart 触摸开始
|
|
start(e){
|
|
// console.log("打印触摸开始",e)
|
|
this.clientY = e.changedTouches[0].clientY; //手指按下时的Y坐标
|
|
this.refreshLoading = false;
|
|
this.refreshHeight = 0;
|
|
},
|
|
//@touchend触摸结束
|
|
end(e){
|
|
if(this.refreshHeight > 150) {
|
|
this.list = [];
|
|
this.pagenum = 1;
|
|
this.timeout1 = setTimeout(() => {
|
|
this.refreshHeight = 150;
|
|
this.refreshLoading = true;
|
|
this.getLists();
|
|
this.getRec();
|
|
},500);
|
|
this.timeout2 = setTimeout(() => {
|
|
this.touch = false;
|
|
},2000);
|
|
} else {
|
|
this.touch = false;
|
|
}
|
|
},
|
|
//@touchmove触摸移动
|
|
move(e) {
|
|
// 如果手指开始触摸的Y坐标 < 手指触摸移动的Y坐标,表示下拉
|
|
if(this.clientY < e.changedTouches[0].clientY) {
|
|
// console.log("this.clientY",this.clientY,e.changedTouches[0].clientY)
|
|
|
|
// 下拉: 手指开始触摸的Y坐标 > 内容区域scroll-view到顶部的距离 (就开启下拉刷新)
|
|
if(this.clientY > this.scrollTop) {
|
|
this.touch = true;
|
|
// 限制下拉刷新的高度最高为260px
|
|
if(this.refreshHeight < 260) {
|
|
let refresh = e.changedTouches[0].clientY - this.clientY;
|
|
this.refreshHeight = refresh;
|
|
}
|
|
} else {
|
|
this.touch = false;
|
|
}
|
|
}
|
|
},
|
|
listZanFn(e){
|
|
this.list[e.index].iszan = e.show;
|
|
if(this.list[e.index].binfo){
|
|
this.list[e.index].zan_num = e.num;
|
|
}else{
|
|
this.list[e.index].zan = e.num;
|
|
}
|
|
|
|
},
|
|
searchFn(){
|
|
uni.navigateTo({
|
|
url:'/pages/shop/search?keyword='+this.keyword,
|
|
|
|
})
|
|
},
|
|
getRec(){
|
|
//shop
|
|
app.post('ApiHome/recommendGoodsList', {}, res => {
|
|
this.shopRec = res.list;
|
|
// if(res.list[0]){
|
|
// this.shopRec[0] = res.list[0];
|
|
// }
|
|
// if(res.list[1]){
|
|
// this.shopRec[1] = res.list[1];
|
|
// }
|
|
})
|
|
//live
|
|
app.post('ApiHome/getLiveList', {}, res => {
|
|
// this.liveRec = res.list;
|
|
if(res.list[0]){
|
|
this.liveRec[0] = res.list[0];
|
|
}
|
|
if(res.list[1]){
|
|
this.liveRec[1] = res.list[1];
|
|
}
|
|
this.cartCount = res.cartCount;
|
|
})
|
|
},
|
|
getLists() {
|
|
this.loading = true;
|
|
app.post('ApiHome/getBanner', {}, res => {
|
|
this.bannerList = res.list;
|
|
})
|
|
//直播 笔记 视频 商品
|
|
let promise1 = new Promise((resolve, rej) => {
|
|
app.post('ApiHome/homeLiveList', {}, res => {
|
|
res.list.forEach((item, index) => {
|
|
item.listType = 'live'
|
|
item.goods = JSON.parse(item.goods)
|
|
})
|
|
resolve(res.list)
|
|
})
|
|
})
|
|
let promise2 = new Promise((resolve, rej) => {
|
|
app.post('ApiHome/homeLuntan', {}, res => {
|
|
res.list.forEach((item, index) => {
|
|
item.listType = 'note'
|
|
})
|
|
resolve(res.list)
|
|
})
|
|
})
|
|
let promise3 = new Promise((resolve, rej) => {
|
|
app.post('ApiHome/homeVideo', {}, res => {
|
|
res.list.forEach((item, index) => {
|
|
item.listType = 'video'
|
|
})
|
|
resolve(res.list)
|
|
})
|
|
})
|
|
Promise.all([promise1, promise2, promise3]).then((values) => {
|
|
this.list.push(...values[0], ...values[2], ...values[1])
|
|
this.getList()
|
|
|
|
|
|
})
|
|
},
|
|
|
|
getList() {
|
|
let that = this;
|
|
var page = that.pagenum;
|
|
that.loading = true;
|
|
that.nomore = false;
|
|
that.nodata = false;
|
|
app.post('ApiHome/homeGoodsList', {
|
|
pagenum: page,
|
|
}, function(res) {
|
|
that.loading = false;
|
|
var data = res.list;
|
|
res.list.forEach((item) => {
|
|
item.listType = 'shop'
|
|
})
|
|
if (page == 1) {
|
|
that.list.push(...data)
|
|
if (data.length == 0) {
|
|
that.nodata = true;
|
|
}
|
|
} else {
|
|
if (data.length == 0) {
|
|
that.nomore = true;
|
|
} else {
|
|
that.list.push(...data)
|
|
}
|
|
}
|
|
that.loaded();
|
|
});
|
|
|
|
return
|
|
app.post('ApiZhiwei/topicDetail', {
|
|
topic_id: this.id
|
|
}, (res) => {
|
|
this.info = res.data
|
|
})
|
|
},
|
|
dialogChange(id) {
|
|
this.proid = id;
|
|
this.buydialogChange();
|
|
},
|
|
buydialogChange: function() {
|
|
this.buydialogShow = !this.buydialogShow;
|
|
},
|
|
|
|
closegg: function() {
|
|
this.hideguanggao = 1;
|
|
},
|
|
showsubqrcode: function() {
|
|
this.$refs.qrcodeDialog.open();
|
|
},
|
|
closesubqrcode: function() {
|
|
this.$refs.qrcodeDialog.close();
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.pages-index {
|
|
position:fixed;
|
|
top:0;
|
|
left:0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
.pages-scroll {
|
|
height: 100vh;
|
|
& ::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
.pages-hd {
|
|
padding: 0 24rpx;
|
|
border-radius: 0 0 30rpx 30rpx;
|
|
&::before {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 176rpx;
|
|
z-index: 3;
|
|
background: #0A5D3B;
|
|
}
|
|
&.pages-hdh5 {
|
|
min-height: 300rpx;
|
|
padding-top: 36rpx;
|
|
box-sizing: border-box;
|
|
&::before {
|
|
height: 195rpx;
|
|
}
|
|
.input_box {
|
|
left: 30rpx;
|
|
right: 30rpx;
|
|
top: 92rpx;
|
|
// #ifdef H5
|
|
margin-top: 15rpx;
|
|
// #endif
|
|
}
|
|
}
|
|
.title_box {
|
|
position: fixed;
|
|
color: #EBE3AA;
|
|
font-size: 26rpx;
|
|
line-height: 40rpx;
|
|
padding: 0;
|
|
z-index: 4;
|
|
.title {
|
|
color: #EBE3AA;
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
.scroll-box {
|
|
margin-top: -90rpx;
|
|
}
|
|
.container {
|
|
padding: 0 24rpx;
|
|
}
|
|
.pull-refresh {
|
|
position: relative;
|
|
left: -24rpx;
|
|
right: -24rpx;
|
|
width: calc(100% + 48rpx);
|
|
box-sizing: content-box;
|
|
// #ifdef H5
|
|
padding-top: 120rpx;
|
|
// #endif
|
|
&__loading {
|
|
padding-top: 80rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
.dot {
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
border-radius: 50%;
|
|
margin: 0 10rpx;
|
|
}
|
|
.dot1 {
|
|
animation: loadings 0.6s linear infinite;
|
|
}
|
|
.dot2 {
|
|
animation: loadings 0.6s linear 0.2s infinite;
|
|
}
|
|
.dot3 {
|
|
animation: loadings 0.6s linear 0.4s infinite;
|
|
}
|
|
}
|
|
}
|
|
.swiper-box {
|
|
width: 100%;
|
|
height: 220rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
}
|
|
.swiper-item {
|
|
width: 100%;
|
|
height: 100%;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.shop_note{
|
|
font-size: 60rpx; border-radius: 10rpx; display: flex; justify-content: center; align-items: center; width: 120rpx; height: 120rpx; background-color: #faebd4; color: #fff;
|
|
}
|
|
.fashion_box {
|
|
width: 100%;
|
|
height: 260rpx;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
background: #FFFFFF;
|
|
margin-top: 24rpx;
|
|
border-radius: 12rpx;
|
|
&-icon {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.left,
|
|
.right {
|
|
padding: 18rpx 0 0 16rpx;
|
|
flex: 1;
|
|
|
|
.bot {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #0A5D3B;
|
|
line-height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
|
|
.ico {
|
|
// background-color: ;
|
|
background: linear-gradient(to right, #FF5E07, #FF9F28);
|
|
font-size: 22rpx;
|
|
line-height: 32rpx;
|
|
color: #fff;
|
|
padding: 0 16rpx;
|
|
border-radius: 32rpx 0 32rpx 32rpx;
|
|
margin-left: 14rpx;
|
|
}
|
|
}
|
|
|
|
.item {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
&-tips {
|
|
position: absolute;
|
|
bottom: -48rpx;
|
|
color: #ED5925;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.price {
|
|
color: #ED5925;
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
bottom: -64rpx;
|
|
font-weight: 500;
|
|
color: #ED5925;
|
|
font-size: 36rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
.symbol {
|
|
font-size: 22rpx;
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 120rpx;
|
|
}
|
|
}
|
|
.border-a-n {
|
|
transform: scale(1.1);
|
|
border: 2px solid #0A5D3B;
|
|
animation: border-x 1.5s linear infinite ;
|
|
}
|
|
.border-bx {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 136rpx;
|
|
height: 136rpx;
|
|
border-radius: 240rpx;
|
|
border: 2px solid #0A5D3B;
|
|
opacity: 1;
|
|
animation: border-bx 1.5s linear .2s infinite ;
|
|
}
|
|
|
|
.title_box {
|
|
background-color: #0A5D3B;
|
|
width: 120rpx;
|
|
display: flex;
|
|
color: #fff;
|
|
padding: 3rpx 7rpx;
|
|
position: absolute;
|
|
top: 110rpx;
|
|
|
|
.live-animation {
|
|
height: 24rpx;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
margin-right: 3rpx;
|
|
|
|
.heng1,
|
|
.heng2,
|
|
.heng3 {
|
|
display: block;
|
|
width: 4rpx;
|
|
border-radius: 4rpx;
|
|
margin-right: 3rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
|
|
.heng1 {
|
|
height: 24rpx;
|
|
animation: hengos .8s linear infinite;
|
|
}
|
|
|
|
.heng2 {
|
|
height: 10rpx;
|
|
animation: hengts .8s linear infinite;
|
|
}
|
|
.heng3 {
|
|
height: 24rpx;
|
|
animation: henghs .8s linear .2s infinite;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.right {
|
|
padding-left: 16rpx;
|
|
border-left: 1rpx solid #fafafa;
|
|
.title {
|
|
.ico {
|
|
// background-color: ;
|
|
background: linear-gradient(to right, #22B000, #53D71A);
|
|
font-size: 22rpx;
|
|
line-height: 32rpx;
|
|
color: #fff;
|
|
padding: 0 16rpx;
|
|
border-radius: 32rpx 0 32rpx 32rpx;
|
|
margin-left: 14rpx;
|
|
}
|
|
}
|
|
.bot {
|
|
margin-top: -18rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav_box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 24rpx 30rpx;
|
|
background: #FFF;
|
|
border-radius: 12rpx;
|
|
margin-top: 24rpx;
|
|
height: 168rpx;
|
|
white-space: nowrap;
|
|
& ::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.item {
|
|
width: calc(100% / 4);
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #333333;
|
|
line-height: 32rpx;
|
|
|
|
image {
|
|
width: 74rpx;
|
|
height: 74rpx;
|
|
margin-bottom: 14rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input_box {
|
|
position: fixed;
|
|
display: flex;
|
|
height: 76rpx;
|
|
align-items: center;
|
|
border-radius: 38rpx;
|
|
background: #538d76;
|
|
padding: 0 32rpx;
|
|
border: 1rpx solid rgba(255,255,255,.6);
|
|
z-index: 5;
|
|
.icon-sousuo {
|
|
font-size: 36rpx;
|
|
color: #FFF;
|
|
flex-shrink: 0;
|
|
}
|
|
input {
|
|
flex: 1;
|
|
margin-left: 16rpx;
|
|
}
|
|
.btn {
|
|
width: 100rpx;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
text-align: right;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
&::before {
|
|
position: absolute;
|
|
content: "";
|
|
left: 20rpx;
|
|
top: 50%;
|
|
height: 22rpx;
|
|
border-left: 1rpx solid #FFF;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.title_box {
|
|
padding: 45rpx 0;
|
|
display: flex;
|
|
color: #333;
|
|
font-size: 24rpx;
|
|
align-items: center;
|
|
letter-spacing: 2px;
|
|
|
|
.title {
|
|
color: #333;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.shop_title {
|
|
letter-spacing: 0px;
|
|
font-size: 22rpx; overflow: hidden;text-overflow: ellipsis;white-space:nowrap;
|
|
}
|
|
}
|
|
|
|
page {
|
|
background-color: #f2f2f4;
|
|
}
|
|
|
|
@keyframes hengos {
|
|
0% {height: 24rpx;}
|
|
50% {height: 10rpx;}
|
|
100% {height: 24rpx;}
|
|
}
|
|
@keyframes hengts {
|
|
0% {height: 10rpx;}
|
|
50% {height: 24rpx;}
|
|
100% {height: 10rpx;}
|
|
}
|
|
@keyframes henghs {
|
|
0% {height: 24rpx;}
|
|
50% {height: 10rpx;}
|
|
100% {height: 24rpx;}
|
|
}
|
|
|
|
@keyframes border-x {
|
|
// 35% {transform: scale(1.1);}
|
|
50% {transform: scale(1);}
|
|
// 60% {transform: scale(1);}
|
|
// 80% {transform: scale(1.1);}
|
|
100% {transform: scale(1.1);}
|
|
}
|
|
|
|
@keyframes border-bx {
|
|
0% {width: 136rpx;height: 136rpx; opacity: 1;border-width: 2rpx;}
|
|
50% {border-width: 1rpx;}
|
|
100% {width: 158rpx;height: 158rpx; opacity: 0; border-width: 0;}
|
|
}
|
|
|
|
@keyframes loadings {
|
|
0% {background: rgba(0, 0, 0, 0.6);}
|
|
100% {background: rgba(255, 255, 255, 0.6)}
|
|
}
|
|
</style>
|
|
|