937 lines
26 KiB
Vue
937 lines
26 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 导航栏 -->
|
|
<view class="navbar" :class="{active:opacity}">
|
|
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
|
|
<view class="status-bar"></view>
|
|
<view class="navbar_tow flex-between"
|
|
:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="navbar_tow flex-between" :style="{'marginTop':HeighT.heightBar /2+'px'}">
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="navbar_tow flex-between"
|
|
:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
|
<!-- #endif -->
|
|
<!-- 标题搜索框 -->
|
|
<view class="flex-between">
|
|
<view class="navbar_tow_one flex-start" @click="uindexlist">
|
|
<text class="textnth-childone">美味抢先点</text>
|
|
<text class="textnth-childtow">西安</text>
|
|
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
|
|
size="16"></u-icon>
|
|
</view>
|
|
<view class="navbar_tow_tow flex-start">
|
|
<input type="text" class="navbar_tow_towinput" v-model="keyword" placeholder="请输入关键字" />
|
|
<view class="navbar_tow_towview">搜索</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 吸顶 -->
|
|
<view v-if="isFixedTop" class="fourcontent flex-between">
|
|
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu" :key="index"
|
|
@click="viewHistory(item,index)"
|
|
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
|
|
<text>{{item.name}}</text>
|
|
<u-icon v-if="item.isChild" style="margin-left: 8rpx;" name="arrow-down-fill"
|
|
color="#333333" size="16"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 以上都是导航栏处理 -->
|
|
<!-- 轮播图 -->
|
|
<swipers :carousel='hometoplist.carousel'></swipers>
|
|
<!-- 广告 -->
|
|
<advertisement :bannervo='hometoplist.bannerVO' :itemStyle='itemStyle'
|
|
:timersetnteritem='timersetInterval' @changeValue="changeParentValue"></advertisement>
|
|
<!-- 金刚区 -->
|
|
<diamond :district='hometoplist.district'></diamond>
|
|
<!-- 今日上线 -->
|
|
<todaylist :todayList='hometoplist.todayList' :salesList='hometoplist.salesList'></todaylist>
|
|
<!-- 类目 -->
|
|
<view class="fourcontent flex-between">
|
|
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu" :key="index"
|
|
@click="viewHistory(item,index)"
|
|
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
|
|
<text>{{item.name}}</text>
|
|
<u-icon v-if="item.isChild" style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
|
|
size="16"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fivecontent" :style="{'height':seighT + 'px'}">
|
|
<!-- <scroll-view :style="{'height':seighT + 'px'}" scroll-y @scrolltolower="loadMore"
|
|
scroll-with-animation> -->
|
|
<view class="fivecontent_item" v-for="(item,index) in homelist" :key="index"
|
|
@click="fivecontentclick(item)">
|
|
<view class="fivecontent_item_nav flex-start">
|
|
<image :src="item.shopImage" mode="aspectFill"></image>
|
|
<view class="fivecontent_item_nav_left">
|
|
<view class="fivecontent_item_nav_lefttop flex-between">
|
|
<view>
|
|
{{item.shopName}}
|
|
</view>
|
|
<view>
|
|
龙首.{{item.distances}}km
|
|
</view>
|
|
</view>
|
|
<view class="fivecontent_item_nav_lefttopstart flex-start">
|
|
<view class="fivecontent_item_nav_leftlang flex-start"
|
|
v-for="(s,index1) in item.shopTag" :key="index1"
|
|
:style="{'background':s.backColor,'color':s.backColor}">
|
|
<image class="fivecontent_item_nav_leftlangimage" v-if="s.shareImg"
|
|
:src="s.shareImg" mode="aspectFill"></image>
|
|
<text class="fivecontent_item_nav_leftlangtext">{{s.name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fivecontent_item_box">
|
|
<view class="fivecontent_item_boxitem flex-between">
|
|
<image :src="item.image" mode=""></image>
|
|
<view class="fivecontent_item_boxitemleft flex-colum-start">
|
|
<view class="fivecontent_item_boxitemleftone flex-between">
|
|
<view>{{item.productName}}</view>
|
|
<text>已抢{{item.realSalesNumber}}份</text>
|
|
</view>
|
|
<view class="flex-start flexstartboxfttow">
|
|
<view class="fivecontent_item_boxitemlefttow flex-start"
|
|
v-for="(c,index2) in item.proTag" :key="index2"
|
|
:style="{'background':c.backColor,'color':c.backColor}">
|
|
<image class="fivecontent_item_boxitemlefttowimage" v-if="c.shareImg"
|
|
:src="c.shareImg" mode="aspectFill"></image>
|
|
<text class="fivecontent_item_boxitemlefttowtext">{{c.name}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="indexboxitemleftthere flex-colum-start">
|
|
<view class="indexboxitemleftthereabsolute">
|
|
马上抢
|
|
</view>
|
|
<view class="indexboxitemlefttheretext flex-start">
|
|
<view class="fivecontent_item_boxitemlefthere_one flex-start">
|
|
<text class="flex_startone">到手</text>
|
|
<text class="flex_starttow">¥{{item.salePrice}}</text>
|
|
</view>
|
|
<view class="fivecontent_item_boxitemlefthere_tow">
|
|
{{item.discount || ''}}折
|
|
</view>
|
|
<view class="fivecontent_item_boxitemlefthere_there">
|
|
¥{{item.originPrice}}
|
|
</view>
|
|
</view>
|
|
<view class="indexboxitemleftthere_countdown flex-between">
|
|
<text class="indexboxitemleftthere_countdowntext">共省{{item.save}}元</text>
|
|
<view class="indexboxitemleftthere_countdowntexts">
|
|
<uni-countdown @timeup="updateCity" :show-day="false"
|
|
:day="item.end_times.d" :hour="item.end_times.h"
|
|
:minute="item.end_times.m" :second="item.end_times.s"
|
|
:indexs='index' color="#FFFFFF" border-color="#00B26A"
|
|
splitorColor="#FFFFFF" :font-size="7"></uni-countdown>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
|
|
<!-- </scroll-view> -->
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 弹出层 -->
|
|
<u-popup mode="top" :show="showproductlist" @close="closeproductlist" @open="openproductlist">
|
|
<!-- 导航栏 -->
|
|
<view class="navbar" :class="{active:opacity}">
|
|
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
|
|
<view class="status-bar"></view>
|
|
<view class="navbar_tow flex-between"
|
|
:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="status-bar"></view>
|
|
<view class="navbar_tow flex-between">
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="navbar_tow flex-between"
|
|
:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
|
<!-- #endif -->
|
|
<!-- 标题搜索框 -->
|
|
<view class="flex-between">
|
|
<view class="navbar_tow_one flex-start" @click="uindexlist">
|
|
<text class="textnth-childone">八点八零</text>
|
|
<text class="textnth-childtow">西安</text>
|
|
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
|
|
size="16"></u-icon>
|
|
</view>
|
|
<view class="navbar_tow_tow flex-start">
|
|
<input type="text" class="navbar_tow_towinput" v-model="keyword"
|
|
placeholder="请输入关键字" />
|
|
<view class="navbar_tow_towview">搜索</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 吸顶 -->
|
|
<view class="fourcontent flex-between">
|
|
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu"
|
|
:key="index" @click="viewHistory(item,index)"
|
|
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
|
|
<text>{{item.name}}</text>
|
|
<u-icon v-if="item.isChild" style="margin-left: 8rpx;" name="arrow-down-fill"
|
|
color="#333333" size="16"></u-icon>
|
|
</view>
|
|
</view>
|
|
<!-- 显示下拉字段 -->
|
|
<view class="sixcontent" v-if="clickhometoplistmenulist.detail">
|
|
<view class="sixcontentitemP flex-colum-start">
|
|
<view class="sixcontentitemP_item"
|
|
:class="index == clickdetailindex ?'sixcontentitemP_itemactive':''"
|
|
v-for="(item,index) in clickhometoplistmenulist.detail" :key="index"
|
|
@click="clickdetail(item,index)">
|
|
{{item.label}}
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="sixcontent" v-if="clickhometoplistmenulist.districts">
|
|
<view class="sixcontentitemP flex-start" style="padding-bottom:0 ;">
|
|
<category style="width: 100%;"
|
|
:categoryList="clickhometoplistmenulist.districts"
|
|
:subCategoryList="subCategoryList" @categoryMainClick="categoryMainClick"
|
|
@categorySubClick="categorySubClick">
|
|
</category>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import swipers from './components/swiper.vue'
|
|
import diamond from './components/diamond.vue'
|
|
import todaylist from './components/todaylist.vue'
|
|
import productlist from './components/productlist.vue'
|
|
import advertisement from './components/advertisement.vue'
|
|
import customSwiper from '@/components/blackmonth-swiper/index'
|
|
import category from '@/components/qiyue-category/qiyue-category.vue';
|
|
export default {
|
|
components: {
|
|
swipers,
|
|
diamond,
|
|
todaylist,
|
|
productlist,
|
|
advertisement,
|
|
category,
|
|
customSwiper
|
|
},
|
|
data() {
|
|
return {
|
|
timersetInterval: '0', //定时器
|
|
isFixedTop: false, //吸顶是否显示
|
|
Topdistance: 3000, //吸顶初始距离
|
|
keyword: '',
|
|
current: 0,
|
|
opacity: false,
|
|
showproductlist: false, //弹成
|
|
seighT: null, //高度
|
|
hometoplist: { //上面数据
|
|
carousel: [],
|
|
district: [],
|
|
|
|
},
|
|
itemStyle: [ //样式
|
|
],
|
|
homelist: [], //下面数据
|
|
clickhometoplistmenulist: {}, //下拉点击的数据
|
|
form: {
|
|
address: '西安市', //地址
|
|
type: '', //品类
|
|
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
|
other: '', //附近1KM 1选中 0不选中
|
|
page: 1, //页数
|
|
size: 10, //页容量
|
|
status: 'loadmore'
|
|
},
|
|
viewHistoryindex: '', //吸顶元素值
|
|
clickdetailindex: 0, //默认下拉选项第一个
|
|
clickdetailtowindex: 0, //默认二级菜单数据选项第一个
|
|
clickdetailtowlist: [],
|
|
// 二级菜单
|
|
categoryList: [],
|
|
subCategoryList: [] //二级菜单数据
|
|
};
|
|
},
|
|
|
|
onPageScroll(e) {
|
|
if (e.scrollTop <= 44) { //搜索导航栏
|
|
this.opacity = false
|
|
this.showproductlist = false
|
|
} else {
|
|
this.opacity = true
|
|
}
|
|
if (e.scrollTop >= this.Topdistance) { //类别导航栏
|
|
this.isFixedTop = true
|
|
} else {
|
|
this.isFixedTop = false
|
|
}
|
|
},
|
|
onHide() {
|
|
this.timersetInterval = '1'
|
|
|
|
},
|
|
computed: {
|
|
HeighT() { //手机类型的尺寸
|
|
return this.$store.getters.is_BarHeight
|
|
},
|
|
},
|
|
async onLoad() {
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: (res) => {
|
|
// console.log(res, '获取距离')
|
|
// this.lng = res.longitude
|
|
// this.lat = res.latitude
|
|
// // 测试
|
|
let datastorage = {
|
|
address: '西安市', //地址
|
|
lng: res.longitude,
|
|
lat: res.latitude,
|
|
}
|
|
uni.cache.set('getLocationstorage', datastorage);
|
|
},
|
|
fail: (err) => {
|
|
// this.positionindex()
|
|
console.log(err, '获取错误')
|
|
}
|
|
});
|
|
|
|
setTimeout(() => {
|
|
this.GetTop()
|
|
}, 1000)
|
|
},
|
|
onReachBottom() {
|
|
this.onLoadhome()
|
|
},
|
|
onShow() {
|
|
this.hometop()
|
|
this.init_fn()
|
|
this.timersetInterval = '0'
|
|
},
|
|
methods: {
|
|
closeproductlist() {
|
|
this.showproductlist = false
|
|
// console.log('close');
|
|
},
|
|
openproductlist() {
|
|
// console.log('open');
|
|
},
|
|
uindexlist() {
|
|
uni.pro.navigateTo('index/uindexlist')
|
|
},
|
|
fivecontentclick(item) {
|
|
uni.pro.navigateTo('product/index',{
|
|
id:item.id
|
|
})
|
|
},
|
|
updateCity(data) {
|
|
thiss.list[data].end_times = 0;
|
|
this.$forceUpdate();
|
|
},
|
|
//获取元素距离顶部的距离
|
|
GetTop() {
|
|
uni.getSystemInfo({
|
|
success: (data) => {
|
|
this.seighT = data.windowHeight;
|
|
this.$u.getRect('.fourcontent').then(res => {
|
|
this.Topdistance = res.top - this.HeighT.heightBar //滚动距离
|
|
this.seighT = this.seighT - res.height //高度
|
|
})
|
|
this.$u.getRect('.navbar').then(res => {
|
|
this.seighT = this.seighT - res.height //高度
|
|
})
|
|
}
|
|
})
|
|
},
|
|
changeParentValue(newValue) {
|
|
this.itemStyle = newValue
|
|
},
|
|
getStyle(e) {
|
|
if (e > this.hometoplist.bannerVO.counponsInfo.length / 2) {
|
|
var right = this.hometoplist.bannerVO.counponsInfo.length - e
|
|
return {
|
|
transform: 'scale(' + (1) + ') translate(-' + (right * 20) + '%,0px)',
|
|
zIndex: 9999 - right,
|
|
opacity: 1
|
|
}
|
|
} else {
|
|
return {
|
|
transform: 'scale(' + (1) + ') translate(' + (e * 20) + '%,0px)',
|
|
zIndex: 9999 - e,
|
|
opacity: 1
|
|
}
|
|
}
|
|
},
|
|
// 首页上面数据
|
|
async hometop() {
|
|
try {
|
|
let res = await this.api.homehomePageUp()
|
|
this.hometoplist = res.data
|
|
if (this.hometoplist.bannerVO.counponsInfo) {
|
|
this.itemStyle = []
|
|
this.hometoplist.bannerVO.counponsInfo.forEach((item,
|
|
index) => {
|
|
this.itemStyle.push(this.getStyle(index))
|
|
})
|
|
}
|
|
// 计算swiper样式
|
|
|
|
} catch (e) {}
|
|
},
|
|
// 下面初始数据
|
|
init_fn() {
|
|
this.homelist = []
|
|
this.form = {
|
|
address: uni.cache.get('getLocationstorage').address, //地址
|
|
lng: uni.cache.get('getLocationstorage').lng,
|
|
lat: uni.cache.get('getLocationstorage').lat,
|
|
type: '', //品类
|
|
orderBy: 0, //1.理我最近 2.销量优先 3.价格优先
|
|
other: '', //附近1KM 1选中 0不选中
|
|
page: 1, //页数
|
|
size: 10, //页容量
|
|
status: 'loadmore'
|
|
},
|
|
this.onLoadhome()
|
|
},
|
|
async onLoadhome() {
|
|
try {
|
|
let res = await this.api.home(this.form)
|
|
var dates = new Date().getTime();
|
|
res.data.list.forEach((item, index) => {
|
|
var leftTime = item.endTime - dates; //计算两日期之间相差的毫秒数
|
|
if (leftTime >= 0) {
|
|
let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
|
|
let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
|
|
let m = Math.floor(leftTime / 1000 / 60 % 60);
|
|
let s = Math.floor(leftTime / 1000 % 60);
|
|
item.end_times = {
|
|
d: d,
|
|
h: h,
|
|
m: m,
|
|
s: s
|
|
}
|
|
} else {
|
|
item.end_times = 0
|
|
}
|
|
})
|
|
if (res.data.pages < this.form.page) {
|
|
this.form.status = 'nomore'
|
|
return false;
|
|
} else {
|
|
this.form.status = 'loading';
|
|
this.form.page = ++this.form.page;
|
|
setTimeout(() => {
|
|
this.homelist = [...this.homelist, ...res.data.list];
|
|
this.form.status = 'loading';
|
|
if (res.data.pageNum == res.data.pages) {
|
|
this.form.status = 'nomore';
|
|
} else {
|
|
this.form.status = 'loading';
|
|
}
|
|
}, 500)
|
|
}
|
|
} catch (e) {}
|
|
},
|
|
// 点击元素到指定位置
|
|
async viewHistory(item, index) {
|
|
this.viewHistoryindex = index
|
|
if (item.dictName == 'allCity') {
|
|
let res = await this.api.locationdistrict({
|
|
keywords: '西安市'
|
|
})
|
|
this.clickhometoplistmenulist = res.data[0]
|
|
} else {
|
|
this.clickhometoplistmenulist = item
|
|
}
|
|
uni.pageScrollTo({
|
|
scrollTop: this.Topdistance,
|
|
duration: 300
|
|
});
|
|
if (item.isChild) {
|
|
this.showproductlist = true
|
|
} else {
|
|
this.form.other = item.description //附近1KM 1选中 0不选中
|
|
this.form.page = 1
|
|
this.form.size = 10
|
|
this.form.status = 'loadmore'
|
|
this.homelist = []
|
|
this.onLoadhome()
|
|
}
|
|
|
|
},
|
|
// 选择元素的指定选项
|
|
clickdetail(item, index) {
|
|
console.log(category);
|
|
this.clickdetailindex = index
|
|
this.showproductlist = false
|
|
this.hometoplist.menu[this.viewHistoryindex].name = item.label
|
|
switch (item.dictName) {
|
|
case 'category':
|
|
// 品类
|
|
this.form.type = item.value
|
|
break;
|
|
case 'sort':
|
|
// 智能排序
|
|
this.form.orderBy = item.value
|
|
break;
|
|
}
|
|
this.form.page = 1
|
|
this.form.size = 10
|
|
this.form.status = 'loadmore'
|
|
this.homelist = []
|
|
this.onLoadhome()
|
|
},
|
|
//城市二级菜单
|
|
categoryMainClick(category) {
|
|
console.log(category);
|
|
this.subCategoryList = category.category.districts;
|
|
},
|
|
//确定街道菜单赋值
|
|
categorySubClick(category) {
|
|
console.log(category);
|
|
this.hometoplist.menu[this.viewHistoryindex].name = category.name
|
|
this.showproductlist = false
|
|
console.log(category.center.split(','))
|
|
let res = category.center.split(',')
|
|
this.form.lng = res[0]
|
|
this.form.lat = res[1]
|
|
this.form.page = 1
|
|
this.form.size = 10
|
|
this.form.status = 'loadmore'
|
|
this.homelist = []
|
|
this.onLoadhome()
|
|
},
|
|
}
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #F9F9F9;
|
|
}
|
|
|
|
.content {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 0;
|
|
|
|
.active {
|
|
background: rgba(249, 249, 249, 1);
|
|
}
|
|
|
|
.status-bar {
|
|
// #ifdef APP-PLUS
|
|
height: calc(var(--status-bar-height) / 2);
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
height: var(--status-bar-height);
|
|
// #endif
|
|
}
|
|
|
|
// #ifdef APP-PLUS
|
|
.statusbarmargin {
|
|
margin-top: var(--status-bar-height);
|
|
}
|
|
|
|
// #endif
|
|
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 99;
|
|
|
|
.navbar_tow {
|
|
width: 100%;
|
|
position: relative;
|
|
font-size: 36rpx;
|
|
|
|
.flex-between {
|
|
// #ifdef APP-PLUS || H5
|
|
margin: 28rpx;
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
margin-left: 28rpx;
|
|
// #endif
|
|
width: 100%;
|
|
flex-wrap: nowrap;
|
|
height: 100%;
|
|
line-height: 100%;
|
|
|
|
.navbar_tow_one {
|
|
height: 100%;
|
|
line-height: 100%;
|
|
|
|
.textnth-childone {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.textnth-childtow {
|
|
margin-left: 16rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.navbar_tow_tow {
|
|
position: relative;
|
|
height: 100%;
|
|
line-height: 100%;
|
|
flex: 1;
|
|
margin-left: 10rpx;
|
|
|
|
.navbar_tow_towview {
|
|
position: absolute;
|
|
right: 4rpx;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
text-align: center;
|
|
background: #FEE06A;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
width: 116rpx;
|
|
height: 56rpx;
|
|
line-height: 56rpx;
|
|
border-radius: 34rpx 34rpx 34rpx 34rpx;
|
|
}
|
|
|
|
.navbar_tow_towinput {
|
|
padding-left: 32rpx;
|
|
padding: 12rpx 120rpx 12rpx 32rpx;
|
|
height: 100%;
|
|
flex: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 34rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
overflow: hidden; //超出的文本隐藏
|
|
text-overflow: ellipsis; //溢出用省略号显示
|
|
white-space: nowrap; //溢出不换行
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.fourcontent {
|
|
padding: 32rpx 28rpx 32rpx 28rpx;
|
|
overflow-x: auto;
|
|
flex-wrap: nowrap;
|
|
|
|
.fourcontent_item {
|
|
flex-wrap: nowrap;
|
|
margin-left: 22rpx;
|
|
padding: 4rpx 14rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
|
text {
|
|
width: max-content;
|
|
}
|
|
}
|
|
|
|
.fourcontent_itemactev {
|
|
background: #fee06a;
|
|
}
|
|
|
|
.fourcontent_item:nth-child(1) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.sixcontent {
|
|
.sixcontentitemP {
|
|
width: 100%;
|
|
padding: 0 32rpx 28rpx 32rpx;
|
|
max-height: 600rpx;
|
|
overflow: auto;
|
|
|
|
.sixcontentitemP_itembox {
|
|
.sixcontentitemP_itemone {
|
|
margin-top: 16rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.sixcontentitemP_itemone:nth-child(1) {
|
|
margin-top: 0rpx;
|
|
}
|
|
}
|
|
|
|
.sixcontentitemP_item:nth-child(1) {
|
|
margin-top: 0rpx;
|
|
}
|
|
|
|
.sixcontentitemP_item {
|
|
margin-top: 16rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.sixcontentitemP_itemactive {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fivecontent {
|
|
padding: 0 28rpx;
|
|
overflow: auto;
|
|
|
|
.fivecontent_item:nth-child(1) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.fivecontent_item {
|
|
margin-top: 32rpx;
|
|
padding: 24rpx 32rpx;
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
|
|
.fivecontent_item_nav {
|
|
image {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.fivecontent_item_nav_left {
|
|
flex: auto;
|
|
margin-left: 12rpx;
|
|
|
|
.fivecontent_item_nav_lefttop {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.fivecontent_item_nav_lefttopstart {
|
|
margin-top: 8rpx;
|
|
|
|
.fivecontent_item_nav_leftlang {
|
|
margin-left: 12rpx;
|
|
width: max-content;
|
|
padding: 4rpx 10rpx;
|
|
background: #FFF9E1;
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
|
|
.fivecontent_item_nav_leftlangtext {
|
|
margin-left: 6rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 16rpx;
|
|
color: #F9A511;
|
|
}
|
|
|
|
.fivecontent_item_nav_leftlangimage {
|
|
width: 10.82rpx;
|
|
height: 14.06rpx;
|
|
}
|
|
}
|
|
|
|
.fivecontent_item_nav_leftlang:nth-child(1) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.fivecontent_item_box {
|
|
margin-top: 20rpx;
|
|
border-top: 2rpx solid #E5E5E5;
|
|
padding-top: 14rpx;
|
|
|
|
.fivecontent_item_boxitem {
|
|
image {
|
|
width: 192rpx;
|
|
height: 192rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.fivecontent_item_boxitemleft {
|
|
margin-left: 24rpx;
|
|
flex: 1;
|
|
|
|
.fivecontent_item_boxitemleftone {
|
|
width: 100%;
|
|
|
|
text {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
view {
|
|
width: 300rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space:nowrap; //溢出不换行white-space:nowrap; //溢出不换行
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.flexstartboxfttow {
|
|
.fivecontent_item_boxitemlefttow {
|
|
margin-left: 16rpx;
|
|
margin-top: 8rpx;
|
|
width: max-content;
|
|
padding: 4rpx 10rpx;
|
|
background: #FFF9E1;
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
|
|
.fivecontent_item_boxitemlefttowtext {
|
|
margin-left: 6rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 16rpx;
|
|
color: #F9A511;
|
|
}
|
|
|
|
.fivecontent_item_boxitemlefttowimage {
|
|
width: 10.82rpx;
|
|
height: 14.06rpx;
|
|
}
|
|
}
|
|
|
|
.fivecontent_item_boxitemlefttow:nth-child(1) {
|
|
margin-left: 0;
|
|
background: #FFD6D7;
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.indexboxitemleftthere {
|
|
position: relative;
|
|
margin-top: 30rpx;
|
|
padding-left: 16rpx;
|
|
width: 100%;
|
|
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.indexboxitemleftthereabsolute {
|
|
position: absolute;
|
|
top: 14rpx;
|
|
right: 12rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.indexboxitemlefttheretext {
|
|
// width: 100%;
|
|
margin-top: 12rpx;
|
|
align-items: flex-end;
|
|
|
|
.fivecontent_item_boxitemlefthere_one {
|
|
align-items: flex-end;
|
|
|
|
.flex_startone {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 16rpx;
|
|
color: #FF7127;
|
|
}
|
|
|
|
.flex_starttow {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FF7127;
|
|
}
|
|
}
|
|
|
|
.fivecontent_item_boxitemlefthere_tow {
|
|
margin-left: 4rpx;
|
|
padding: 2rpx 10rpx;
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
border: 2rpx solid #FF7127;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 16rpx;
|
|
color: #FF7127;
|
|
}
|
|
|
|
.fivecontent_item_boxitemlefthere_there {
|
|
margin-left: 6rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 16rpx;
|
|
color: #999999;
|
|
text-decoration-line: line-through;
|
|
}
|
|
}
|
|
|
|
.indexboxitemleftthere_countdown {
|
|
width: 100%;
|
|
padding-right: 7rpx;
|
|
margin-top: 2rpx;
|
|
.indexboxitemleftthere_countdowntext {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
padding-bottom: 8rpx;
|
|
}
|
|
|
|
.indexboxitemleftthere_countdowntexts {
|
|
font-family: Roboto, Roboto;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 16rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |