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.
1130 lines
27 KiB
1130 lines
27 KiB
<template>
|
|
|
|
<view class="body" >
|
|
|
|
<!-- 头部导航栏 -->
|
|
<uni-nav-bar :statusBar="true" :title="Pet" color="#fff" backgroundColor="#000000" :border="false" :fixed="true">
|
|
<block slot="left">
|
|
<view class="nav_left">
|
|
<image src="../../static/img/left_white.png" mode="" @click="back()"></image>
|
|
<image src="../../static/img/seach.png" mode="" @click="goPage()"></image>
|
|
|
|
</view>
|
|
</block>
|
|
<block slot="right">
|
|
<view class="nav_right">
|
|
<navigator url="/pages/shippingCart/index" open-type="switchTab">
|
|
<uni-badge :text="sum" type="error" absolute="rightTop">
|
|
<image src="../../static/img/shop_cart1.png" mode=""></image>
|
|
</uni-badge>
|
|
</navigator>
|
|
</view>
|
|
</block>
|
|
</uni-nav-bar>
|
|
<view v-for="(item,index) in indexDate.zones" :key="item.zone_id">
|
|
|
|
<!-- 轮播图 -->
|
|
<view class="uni-margin-wrap page_padding" v-if="item.zone_code=='BANNER' && item.zone_status=='NORMAL'">
|
|
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" >
|
|
<swiper-item v-for="(item1,index1) in item.blocks" :key="item1.block_id">
|
|
<view class="swiper-item " v-if="item1.block_status=='NORMAL'" :style="{width:(item.zone_code=='BANNER')?item.zone_column+'rpx':'700rpx'}">
|
|
<image :src="item1.block_pic" mode="" @click="imgTo(item1)"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<!-- 宫格 -->
|
|
<uni-swiper-dot :info="info" :current="current" field="content" mode="default" class="page_padding"
|
|
v-if="item.zone_code=='ICON' && item.zone_status=='NORMAL' && item.zone_code!=indexDate.zones[index-1].zone_code">
|
|
<swiper class="grid_swiper" @change="gridSwiper">
|
|
<swiper-item v-for="(item1,index1) in info" :key="item1.zone_id">
|
|
<view class="grid_content">
|
|
<view class="grid_item" v-for="(item2, index2) in item1.blocks" :key="item2.block_id">
|
|
<template v-if="item2.block_status=='NORMAL'">
|
|
<view class="grid_item_img">
|
|
<image :src="item2.block_pic" mode="" @click="gotoProductlist(item2,item2.block_link)"></image>
|
|
</view>
|
|
<text>{{item2.block_title}}</text>
|
|
</template>
|
|
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</uni-swiper-dot>
|
|
|
|
<!-- ONEPIC -->
|
|
<view class="ONEPIC" v-if="item.zone_code=='ONEPIC' && item.zone_status=='NORMAL'" >
|
|
<!-- class="discount page_padding" -->
|
|
<image :src="item.blocks[0].block_pic" :style="{height:(item.zone_code=='ONEPIC')?item.zone_column+'rpx':''}" mode="" @click="imgTo(item.blocks[0])" ></image>
|
|
</view>
|
|
<!-- TWOPIC -->
|
|
<view class="TWOPIC" v-if="item.zone_code=='TWOPIC' && item.zone_status=='NORMAL'">
|
|
<image :src="item1.block_pic" :style="{height:(item.zone_code=='TWOPIC')?item.zone_column+'rpx':''}" @click="imgTo(item1)"mode="" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
|
|
</view>
|
|
<!-- THREEPIC -->
|
|
<view class="THREEPIC" v-if="item.zone_code=='THREEPIC' && item.zone_status=='NORMAL'">
|
|
<image :src="item1.block_pic" :style="{height:(item.zone_code=='THREEPIC')?item.zone_column+'rpx':''}" @click="imgTo(item1)" mode="" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
|
|
</view>
|
|
<!-- FOURPIC -->
|
|
<view class="FOURPIC" v-if="item.zone_code=='FOURPIC' && item.zone_status=='NORMAL'">
|
|
<image :src="item1.block_pic" :style="{height:(item.zone_code=='FOURPIC')?item.zone_column+'rpx':''}" mode="" @click="imgTo(item1)" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
|
|
</view>
|
|
<!-- FIVEPIC -->
|
|
<view class="FIVEPIC" v-if="item.zone_code=='FIVEPIC' && item.zone_status=='NORMAL'">
|
|
<image :src="item1.block_pic" :style="{height:(item.zone_code=='FIVEPIC')?item.zone_column+'rpx':''}" mode="" @click="imgTo(item1)" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
|
|
</view>
|
|
<!-- SIXPIC -->
|
|
<view class="SIXPIC" v-if="item.zone_code=='SIXPIC' && item.zone_status=='NORMAL'">
|
|
<image :src="item1.block_pic" :style="{height:(item.zone_code=='SIXPIC')?item.zone_column+'rpx':''}"mode="" @click="imgTo(item1)" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 标题 -->
|
|
<navigator url="/pages/index/flashSale" v-if="item.zone_code=='SPIKE1' && item.zone_status=='NORMAL'">
|
|
<view class="index_title page_padding">
|
|
<text>Flash Sale</text>
|
|
<view class="title_right">
|
|
<uni-countdown :showDay="false" :hour="curEndTime |hours" :minute="curEndTime|minutes" :second="curEndTime|seconds" color="#FFFFFF" background-color="#1B1B1B" />
|
|
<image src="../../static/img/right.png" mode="" ></image>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
|
|
|
|
<!-- SPIKE 1 -->
|
|
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false" v-if="item.zone_code=='SPIKE1' && item.zone_status=='NORMAL'">
|
|
<view class="spike1_item" v-for="(item1,index1) in skillList" :key="item1.goods_id" >
|
|
<view class="item_img" @click="gotoSkillpage(item1)">
|
|
<image :src="item1.goods_img" mode="" :style="{height:(item.zone_code=='SPIKE1')?item.zone_column+'rpx':'',width:200+'rpx'}" ></image>
|
|
</view>
|
|
<view class="spike1_item_bottom padding_left">
|
|
<text>US${{item1.promote_price}}</text>
|
|
<view class="spike1_item_text">US${{item1.shop_price}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 标题 -->
|
|
<view class="index_title page_padding" v-if="item.zone_code=='TITLE' && item.zone_status=='NORMAL'">
|
|
<text>{{item.blocks[0].block_title}}</text>
|
|
<view class="title_right">
|
|
<image src="../../static/img/right.png" mode="" @click="Hotgoto(item.blocks)"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- HOT SELLS 1 -->
|
|
|
|
<view class="hotSells1 page_padding" v-if="item.zone_code=='GOODSTWO1' || item.zone_code=='GOODSTHREE1'">
|
|
<template v-if="item.zone_code=='GOODSTWO1' && item.zone_status=='NORMAL'">
|
|
<view class="hotSells1_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id" >
|
|
<view class="hotSells1_item_img" >
|
|
<image :src="item1.block_pic" :style="{height:(item.zone_code=='GOODSTWO1')?item.zone_column+'rpx':''}" mode="" @click="imgTo(item1)"></image>
|
|
</view>
|
|
<text>{{item1.block_title}}</text>
|
|
</view>
|
|
</template>
|
|
<template v-if="item.zone_code=='GOODSTHREE1' && item.zone_status=='NORMAL'">
|
|
<view class="hotSells2_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id">
|
|
<view class="hotSells2_item_img" >
|
|
<image :src="item1.block_pic":style="{height:(item.zone_code=='GOODSTHREE1')?item.zone_column+'rpx':''}" mode="" @click="imgTo(item1)"></image>
|
|
</view>
|
|
<text>{{item1.block_title}}</text>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
|
|
<!-- 标题 -->
|
|
<!-- <view class="index_title page_padding">
|
|
<text>Hot Selle</text>
|
|
<view class="title_right">
|
|
<image src="../../static/img/right.png" mode=""></image>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- HOT SELLS 2 -->
|
|
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false" v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'">
|
|
<view class="spike1_item padding_honlist2" v-for="(item1,index1) in item.blocks" :key="item1.block_id">
|
|
<view class="item_img":style="{width:(item.zone_code=='HONLIST2')?400+'rpx':''}" >
|
|
<image :src="item1.block_pic" mode="" :style="{height:(item.zone_code=='HONLIST2')?item.zone_column+'rpx':''}"@click="imgTo(item1)"></image>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 标题 -->
|
|
<!-- <view class="index_title page_padding">
|
|
<text>Hot Selle</text>
|
|
<view class="title_right">
|
|
<image src="../../static/img/right.png" mode=""></image>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- HOT SELLS 3 -->
|
|
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false" v-if="item.zone_code=='HONLIST3' && item.zone_status=='NORMAL'">
|
|
<view class="spike1_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id">
|
|
<view class="item_img">
|
|
<image :src="item1.block_pic" :style="{height:(item.zone_code=='HONLIST3')?item.zone_column+'rpx':'',width:400+'rpx'}" mode="" @click="imgTo(item1)"></image>
|
|
</view>
|
|
<view class="spike1_item_bottom">
|
|
<text>{{item1.block_title}}</text>
|
|
<view class="spike1_item_text1">{{item1.block_title2}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- GOODSTHREE 2 -->
|
|
<!-- <view class="goodsthree2">
|
|
<view class="goodsthree2_item" v-for="(item,index) in 3" :key="index"></view>
|
|
</view> -->
|
|
|
|
<!-- 轮播图 -->
|
|
<!-- <view class="uni-margin-wrap">
|
|
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" >
|
|
<swiper-item>
|
|
<view class="swiper-item uni-bg-red">A</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="swiper-item uni-bg-green">B</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="swiper-item uni-bg-blue">C</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view> -->
|
|
|
|
<!-- SPIKE 1 -->
|
|
<!-- <scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false">
|
|
<view class="spike1_item" v-for="(item,index) in 8" :key="index">
|
|
<view class="spike1_item_img"></view>
|
|
<view class="spike1_item_bottom1">
|
|
<view class="spike1_item_text">Adidas Yeezy Boost 350 DazzlingBlue Black</view>
|
|
<text>US$314.00</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view> -->
|
|
|
|
<!-- 瀑布流标题 -->
|
|
<view class="index_title1" v-if="item.zone_code=='LIST1' && item.zone_status=='NORMAL'">PRODUCTS FRO YOU</view>
|
|
|
|
<view class="waterfall" v-if="item.zone_code=='LIST1' && item.zone_status=='NORMAL'" >
|
|
<custom-waterfalls-flow :value="item.blocks" imageKey="block_pic"@click="imgTo(item1)">
|
|
<template v-slot:default="item1">
|
|
<view class="item" @click="imgTo(item1)">
|
|
<view class="title">{{item1.block_title}} {{item1.block_title3}}</view>
|
|
<view class="desc">{{item1.block_title2}}</view>
|
|
<!-- <view class="desc">{{item1.block_title3}}</view> -->
|
|
</view>
|
|
</template>
|
|
</custom-waterfalls-flow>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
<!-- <view class="index_title1" v-if="catList.length>0">BEST</view>
|
|
<view class="best_item">
|
|
<view class="best_one" v-for="(item,index) in catList" :key="index">
|
|
<view class="best_img" @click="goDetails(item.id)">
|
|
<image :src="item.goods_img" mode=""></image>
|
|
</view>
|
|
<view class="best_text">
|
|
<view class="desc">US${{item.is_promote==0? item.shop_price :item.promote_price}}</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {defaultRequest,defaultRequest4} from '../../api/index.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
isScrollShow:false,
|
|
scroll_active:0,
|
|
scrollList:[
|
|
// {text:'DOPE'},{text:'VIDEO'},{text:'MEN'},{text:'KIDS'},{text:'PETS'},{text:'MEN'},{text:'PETS'},{text:'MEN'},
|
|
],
|
|
current:0,
|
|
list: [
|
|
{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: 'Adidas Yeezy Boost 350 DazzlingBlue Black', desc: 'US$314.00' },
|
|
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: 'Adidas Yeezy Boost 350 DazzlingBlue Black', desc: 'US$314.00' }
|
|
],
|
|
indexDate:{},
|
|
info:[],
|
|
banner:{},
|
|
cat_list:[],
|
|
sum:0,
|
|
mesNum:0,
|
|
skillList:[],
|
|
backButtonPress:0,
|
|
catQuery:{
|
|
_action:'getgoods',
|
|
page_index:1,
|
|
page_size:30,
|
|
type:'best'
|
|
},
|
|
catList:[],
|
|
Pet:''
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
|
|
setTimeout(()=>{
|
|
// this.getIndex()
|
|
this.getList()
|
|
uni.stopPullDownRefresh()
|
|
|
|
},800)
|
|
},
|
|
|
|
onLoad() {
|
|
this.getIndex()
|
|
// console.info(this.curEndTime)
|
|
this.getList()
|
|
this.getMes()
|
|
this.getInfo()
|
|
this.getCatList()
|
|
uni.showTabBar()
|
|
|
|
|
|
},
|
|
computed:{
|
|
//当天结束时间
|
|
curEndTime(){
|
|
const endtime = new Date(new Date().setHours(23,59,59,999)).getTime()
|
|
// 获取当前时间
|
|
const nowtime=(new Date()).getTime();
|
|
var date3 = nowtime - endtime; //时间差的毫秒数
|
|
date3 = Math.abs(date3)
|
|
return date3;
|
|
}
|
|
},
|
|
filters:{
|
|
hours (timestamp){
|
|
var leave1=timestamp%(24*3600*1000) //计算天数后剩余的毫秒数
|
|
var hours=Math.floor(leave1/(3600*1000))
|
|
return hours
|
|
},
|
|
minutes(timestamp){
|
|
var leave2=(timestamp%(24*3600*1000))%(3600*1000) //计算小时数后剩余的毫秒数
|
|
var minutes=Math.floor(leave2/(60*1000))
|
|
return minutes
|
|
},
|
|
seconds(timestamp){
|
|
var leave3=((timestamp%(24*3600*1000))%(3600*1000))%(60*1000) //计算分钟数后剩余的毫秒数
|
|
var seconds=Math.round(leave3/1000)
|
|
return seconds
|
|
}
|
|
|
|
},
|
|
onBackPress(options) {
|
|
this.backButtonPress++;
|
|
if (this.backButtonPress > 1) {
|
|
plus.runtime.quit();
|
|
} else {
|
|
plus.nativeUI.toast('Click again to exit');
|
|
}
|
|
setTimeout(function() {
|
|
this.backButtonPress = 0;
|
|
}, 1000);
|
|
return true;
|
|
},
|
|
|
|
|
|
methods: {
|
|
// 获取页数据配置
|
|
getIndex(){
|
|
let data={_action:'getpagedata',pagecode:'HOME-SALE'}
|
|
defaultRequest(data).then(res=>{
|
|
this.Pet = res.data.page_name
|
|
if(res.error==0){
|
|
this.indexDate=res.data
|
|
console.log(this.indexDate)
|
|
res.data.zones.map(item=>{
|
|
if(item.zone_code=='ICON'){
|
|
item.content=''
|
|
this.info.push(item)
|
|
// console.log(item,'info')
|
|
}
|
|
|
|
})
|
|
}
|
|
})
|
|
defaultRequest({
|
|
_action:'getpagedata',pagecode:'HOME-SALE'
|
|
}).then(res =>{
|
|
// console.log(res)
|
|
if(res.error ==0){
|
|
this.scrollList = res.data.zones
|
|
}
|
|
})
|
|
},
|
|
back(){
|
|
uni.switchTab({
|
|
url:'./index'
|
|
})
|
|
},
|
|
goDetails(id){
|
|
uni.navigateTo({
|
|
url:'/pages/productDetails/index?goodid='+id
|
|
})
|
|
},
|
|
getMes(){
|
|
let data ={ _action:'getpagedata',pagecode:'006-PERSONALCENTERPAGE'
|
|
|
|
}
|
|
// let data2 ={ _action:'getpagedata',pagecode:'HOME-SALE'}
|
|
// defaultRequest(data2).then(res =>{
|
|
// console.log(res,'中间按钮')
|
|
// if(res.error ==0){
|
|
// this.indexDate = res.data
|
|
// }
|
|
// })
|
|
defaultRequest(data).then(res =>{
|
|
// console.log(res,'个人页面配置信息')
|
|
res.data.zones.map(item =>{
|
|
if(item.zone_code =='XIAOXI'){
|
|
let list = item
|
|
this.mesNum = list.blocks.length
|
|
|
|
}
|
|
})
|
|
})
|
|
},
|
|
getList(){
|
|
// this.sum = uni.getStorageSync('cartSum')
|
|
|
|
let data={_action:'getcartgoods'}
|
|
defaultRequest4(data).then(res=>{
|
|
console.info(res)
|
|
if(res.error==0){
|
|
this.sum = res.data.goods_list.length
|
|
uni.setStorageSync('cartSum',this.sum)
|
|
}
|
|
})
|
|
|
|
let query={
|
|
_action:'getgoods',type:'promote',order_type:0,page_size:50,page_index:0
|
|
}
|
|
|
|
defaultRequest(query).then(res=>{
|
|
if(res.error==0){
|
|
let skillList = []
|
|
this.skillList = res.data
|
|
// for(let i =0;i<3;i++){
|
|
// var _num = Math.floor(Math.random()*res.data.length)
|
|
// var mm = res.data[_num]
|
|
// skillList.push(mm)
|
|
// this.skillList = skillList
|
|
|
|
|
|
// }
|
|
|
|
}
|
|
})
|
|
},
|
|
|
|
// 指定范围内，指定个数，无重复的随机整数
|
|
getRandomNumber(n,min,max){
|
|
let arr=[];
|
|
for(let i = 0; i < n; i ++){
|
|
arr[i] = parseInt(Math.random() * (max - min + 1) + min);
|
|
}
|
|
for(let i = 0; i < n; i++){
|
|
for(let j = i + 1; j < n; j ++){
|
|
if(arr[i] === arr[j]){
|
|
this.getRandomNumber(n,min,max);
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return arr
|
|
},
|
|
|
|
//获取用户是否登录
|
|
getInfo(){
|
|
let data = {
|
|
_action:'getinfo'
|
|
}
|
|
defaultRequest(data).then(res =>{
|
|
console.log(res,'用户信息')
|
|
if(res.error == -1){
|
|
uni.setStorageSync('isLogin',0)
|
|
}else if(res.error==0){
|
|
uni.setStorageSync('isLogin',1)
|
|
}
|
|
})
|
|
},
|
|
// 获取的推荐商品数据
|
|
getCatList(type){
|
|
defaultRequest4(this.catQuery).then(res=>{
|
|
// console.info(res,'最好的')
|
|
if(res.error==0){
|
|
if(res.data){
|
|
this.catList=res.data
|
|
}
|
|
}
|
|
})
|
|
},
|
|
goPage(){
|
|
uni.navigateTo({
|
|
url: './search',
|
|
});
|
|
},
|
|
gotoSkillpage(e){
|
|
uni.navigateTo({
|
|
// url:"../productDetails/index?goods_id="+e.id
|
|
url:'./flashSale'
|
|
})
|
|
},
|
|
gotoProductlist(item,url){
|
|
console.log(item,'///')
|
|
const a = url.substring(12);
|
|
const b = url.substring(url.length - 3)
|
|
console.log(a)
|
|
uni.navigateTo({
|
|
url:"../category/productList?typethree="+b+'&type=0'+'&title='+item.block_title
|
|
// url:"../category/productList"+ a +'&title='+item.block_title
|
|
})
|
|
},
|
|
scrollChange(item,index){
|
|
this.scroll_active=index
|
|
this.info =[]
|
|
let data = {
|
|
_action:'getpagedata',
|
|
pagecode:item.zone_code
|
|
}
|
|
|
|
defaultRequest(data).then( res =>{
|
|
|
|
if(res.error == 0){
|
|
this.indexDate = res.data
|
|
res.data.zones.map(item=>{
|
|
if(item.zone_code=='ICON'){
|
|
item.content=''
|
|
this.info.push(item)
|
|
console.log(item,'info')
|
|
}
|
|
|
|
})
|
|
}
|
|
})
|
|
|
|
},
|
|
gridSwiper(e){
|
|
this.current = e.detail.current
|
|
},
|
|
//轮播图跳转 // 热卖跳转
|
|
imgTo(item){
|
|
console.log(item,'item')
|
|
let goodid = item.block_link.substring(12);
|
|
console.log(item.block_link)
|
|
if(goodid.includes('goodslist')){
|
|
uni.navigateTo({
|
|
url:'../category/productList'+ goodid
|
|
})
|
|
}else{
|
|
uni.navigateTo({
|
|
url:'../productDetails/index'+goodid+'&img=1'
|
|
})
|
|
}
|
|
|
|
},
|
|
Hotgoto(item1){
|
|
console.log(item1[0].block_title + item1[0].block_link)
|
|
const url = item1[0].block_link.substring(12)
|
|
if(url.includes('goodslist')){
|
|
uni.navigateTo({
|
|
url:'../category/productList'+ url
|
|
})
|
|
}else{
|
|
uni.navigateTo({
|
|
url:'../productDetails/index'+url+'&img=1'
|
|
})
|
|
}
|
|
}
|
|
},
|
|
onPageScroll(res) {
|
|
if(res.scrollTop>40){
|
|
this.isScrollShow=true
|
|
}else if(res.scrollTop<40){
|
|
this.isScrollShow=false
|
|
}
|
|
},
|
|
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page{
|
|
background-color: white;
|
|
// position: relative;
|
|
}
|
|
.ONEPIC{
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: -12rpx 0;
|
|
image{
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.TWOPIC{
|
|
width: 100%;
|
|
display: flex;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.THREEPIC{
|
|
width: 100%;
|
|
display: flex;
|
|
margin: 0;
|
|
justify-content: space-between;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.FOURPIC{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.FIVEPIC{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.SIXPIC{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.body{
|
|
// padding-top: 30.33rpx;
|
|
}
|
|
.uni-navbar{
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
.nav_left{
|
|
image{
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
&:last-child{
|
|
margin-left: 36.67rpx;
|
|
}
|
|
}
|
|
}
|
|
.nav_right{
|
|
padding-right: 30rpx;
|
|
image{
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
}
|
|
.flex{
|
|
display: flex;
|
|
}
|
|
.index_logo{
|
|
width: 270.33rpx !important;
|
|
height: 50rpx !important;
|
|
margin-left: 50rpx;
|
|
}
|
|
|
|
.isScrollShow{
|
|
float: right;
|
|
}
|
|
.isScrollShow1{
|
|
float: left;
|
|
margin-top: 20rpx;
|
|
width: 60% !important;
|
|
}
|
|
.isScrollShow2{
|
|
float: left;
|
|
}
|
|
.isScrollShow3{
|
|
float: left;
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
margin-top: 21rpx;
|
|
margin-left: 20rpx;
|
|
margin-right: 25rpx;
|
|
image{
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.page_padding{
|
|
padding: 0 26.67rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.page_padding_left{
|
|
padding-left: 24.67rpx;
|
|
}
|
|
// .navigation1{
|
|
|
|
// position: fixed;
|
|
// background-color: white;
|
|
// z-index: 99;
|
|
// margin-top: -100rpx;
|
|
// width: 100%;
|
|
|
|
// .navigation_scroll{
|
|
// // padding-top: 10rpx;
|
|
// padding-bottom: 14rpx;
|
|
|
|
// padding-left: 14rpx;
|
|
// .scroll-view_H{
|
|
// white-space: nowrap;
|
|
// font-size: 26.67rpx;
|
|
// color: #484848;
|
|
// width: 100%;
|
|
// // display: flex;
|
|
|
|
// ::-webkit-scrollbar {
|
|
// width: 0;
|
|
// height: 0;
|
|
// background-color: transparent;
|
|
// }
|
|
|
|
// view{
|
|
// margin-left: 46.67rpx;
|
|
// display: inline-block;
|
|
// font-weight: 600;
|
|
// padding: 28.67rpx 0;
|
|
// }
|
|
// view:first-child{
|
|
// margin-left: 0;
|
|
// }
|
|
// .scroll_active{
|
|
// font-size: 32rpx;
|
|
// border-bottom: 2.67rpx solid #000000;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// }
|
|
.navigation{
|
|
/* display: flex; */
|
|
background-color:#000000;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 99;
|
|
// background: white;
|
|
// height: 210rpx;
|
|
width: 100%;
|
|
.navigation_title{
|
|
display: flex;
|
|
background-color: #000000;
|
|
padding: 30rpx 0;
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
image{
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
text{
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 800;
|
|
font-style: italic;
|
|
font-size: 42.67rpx;
|
|
}
|
|
.navigation_title_right{
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
>uni-navigator:first-child{
|
|
margin-right: 32.67rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
.navigation_seach{
|
|
width: 100%;
|
|
background-color: #F5F6FA;
|
|
border-radius: 6.67rpx;
|
|
height: 66.67rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #8F9094;
|
|
font-size: 26.67rpx;
|
|
padding-left: 22rpx;
|
|
box-sizing: border-box;
|
|
|
|
image{
|
|
width: 29.33rpx;
|
|
height: 29.33rpx;
|
|
margin-right: 22rpx;
|
|
}
|
|
}
|
|
.navigation_scroll{
|
|
margin-top: 20rpx;
|
|
padding-top: 6rpx;
|
|
padding-bottom: 14rpx;
|
|
background-color: white;
|
|
padding-left: 20rpx;
|
|
.scroll-view_H{
|
|
white-space: nowrap;
|
|
font-size: 26.67rpx;
|
|
color: #484848;
|
|
width: 100%;
|
|
// display: flex;
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
view{
|
|
margin-left: 46.67rpx;
|
|
display: inline-block;
|
|
font-weight: 600;
|
|
padding: 28.67rpx 0;
|
|
}
|
|
view:first-child{
|
|
margin-left: 0;
|
|
}
|
|
.scroll_active{
|
|
font-size: 32rpx;
|
|
border-bottom: 2.67rpx solid #000000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.uni-margin-wrap{
|
|
width: 100%;
|
|
margin-bottom: 35.33rpx;
|
|
|
|
.swiper {
|
|
// height: 320.33rpx;
|
|
// width: 720rpx;
|
|
.swiper-item {
|
|
display: block;
|
|
// width: 720rpx;
|
|
height: 100%;
|
|
line-height: 373.33rpx;
|
|
text-align: center;
|
|
color: white;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.uni-bg-red{
|
|
background-color: red;
|
|
}
|
|
.uni-bg-green{
|
|
background-color: green;
|
|
}
|
|
.uni-bg-blue{
|
|
background-color: blue;
|
|
}
|
|
.uni-bg-black{
|
|
background-color: #000000;
|
|
}
|
|
}
|
|
}
|
|
.grid_swiper {
|
|
height: 380rpx;
|
|
|
|
|
|
.grid_content{
|
|
display: flex;
|
|
// justify-content:space-around;
|
|
flex-wrap: wrap;
|
|
// padding: 0 2rpx;
|
|
// width: 80vw;
|
|
|
|
|
|
.grid_item{
|
|
// width: 97.33rpx;
|
|
display: flex;
|
|
width: 15vw;
|
|
padding: 0 7vw 0 1vw;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
// flex-direction: flex-start;
|
|
color: #1B1B1B;
|
|
font-size: 24rpx;
|
|
margin-bottom: 53.33rpx;
|
|
// margin-right: 84rpx;
|
|
font-weight: 500;
|
|
|
|
.grid_item_img{
|
|
width: 100%;
|
|
height: 97.33rpx;
|
|
margin-bottom: 6.67rpx;
|
|
// background-color: #8F9094;
|
|
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.grid_item:nth-child(n+4){
|
|
margin-right: 0;
|
|
}
|
|
|
|
}
|
|
}
|
|
.discount{
|
|
width: 100%;
|
|
height: 239.33rpx;
|
|
margin-bottom: 72.67rpx;
|
|
}
|
|
|
|
.index_title{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
color: #161616;
|
|
font-weight: bold;
|
|
margin-bottom: 40rpx;
|
|
|
|
.title_right{
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
image{
|
|
width: 22rpx;
|
|
height: 22rpx;
|
|
margin-left: 11.33rpx;
|
|
}
|
|
}
|
|
}
|
|
.item_img{
|
|
width: 100%;
|
|
margin-left: 4rpx;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
}
|
|
.spike1{
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
margin-bottom: 47.67rpx;
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.spike1_item{
|
|
color: #191919;
|
|
font-size: 26.67rpx;
|
|
margin-right: 16.67rpx;
|
|
// width: 200rpx;
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
|
|
.spike1_item_img{
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background-color: #999999;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.padding_honlist2{
|
|
margin-right: 280rpx !important;
|
|
}
|
|
.spike1_item_bottom{
|
|
padding-left: 9.33rpx;
|
|
margin-top: 22.67rpx;
|
|
|
|
.spike1_item_text{
|
|
color: #9D9D9D;
|
|
font-size: 21.33rpx;
|
|
text-decoration: line-through;
|
|
}
|
|
.spike1_item_text1{
|
|
color: #9D9D9D;
|
|
font-size: 21.33rpx;
|
|
}
|
|
}
|
|
.spike1_item_bottom1{
|
|
padding-left: 9.33rpx;
|
|
margin-top: 19.33rpx;
|
|
font-weight: bold;
|
|
|
|
.spike1_item_text{
|
|
color: #000000;
|
|
font-size: 16rpx;
|
|
font-weight: 400;
|
|
margin-bottom: 20.67rpx;
|
|
white-space: break-spaces;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
.spike1_item:last-child{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.hotSells1{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
color: #000000;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
margin-bottom: 149.33rpx;
|
|
|
|
.hotSells1_item{
|
|
width: 340rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.hotSells1_item_img{
|
|
width: 100%;
|
|
// // height: 266.67rpx;
|
|
// background-color: #999999;
|
|
margin-bottom: 23.33rpx;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.hotSells2_item{
|
|
width: 224rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 49.33rpx;
|
|
.hotSells2_item_img{
|
|
// width: 100%;
|
|
// height: 224rpx;
|
|
// background-color: #999999;
|
|
margin-bottom: 25.33rpx;
|
|
|
|
image{
|
|
width: 100%;
|
|
// height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.goodsthree2{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 29.33rpx;
|
|
|
|
.goodsthree2_item{
|
|
width: 242.67rpx;
|
|
height: 204.67rpx;
|
|
background-color: #999999;
|
|
}
|
|
}
|
|
.index_title1{
|
|
text-align: center;
|
|
position: relative;
|
|
font-size: 29.33rpx;
|
|
font-weight: bold;
|
|
margin-top: 116rpx;
|
|
padding-bottom: 52rpx;
|
|
&:before{
|
|
content: '';
|
|
background-color: #000000;
|
|
height: 4rpx;
|
|
width: 53.33rpx;
|
|
position: absolute;
|
|
bottom: 13.33rpx;
|
|
left: 50%;
|
|
margin-left: -26.67rpx;
|
|
}
|
|
}
|
|
.waterfall{
|
|
background-color: #F8F7FB;
|
|
padding:0 25.33rpx;
|
|
box-sizing: border-box;
|
|
padding-top: 52.67rpx;
|
|
|
|
.item{
|
|
padding: 0 16.67rpx;
|
|
padding-bottom: 36.67rpx;
|
|
.title{
|
|
font-size: 29.33rpx;
|
|
font-weight: 400;
|
|
margin-top: 24.67rpx;
|
|
margin-bottom: 32.67rpx;
|
|
|
|
}
|
|
.desc{
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
}
|
|
.padding_left{
|
|
margin-left: 17rpx;
|
|
}
|
|
.best_item{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin: 0 10rpx 0 10rpx;
|
|
// width: 80vw;
|
|
// height:400rpx ;
|
|
|
|
.best_one{
|
|
width: 45vw;
|
|
height: 400rpx;
|
|
margin: 10rpx;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
.best_img{
|
|
height: 360rpx;
|
|
width: 360rpx;
|
|
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.best_text{
|
|
line-height:40rpx ;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style>
|
|
|