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.
1683 lines
40 KiB
1683 lines
40 KiB
<template>
|
|
|
|
<view class="body" :class="isScrollShow?'body_pad':''">
|
|
<!-- 进入页面部分 -->
|
|
|
|
<!-- 头部导航栏 -->
|
|
<view class="navigation " >
|
|
<view class="status_bar"></view>
|
|
<view style="background-color:black">
|
|
<view class="page_margin uni-bg-black">
|
|
<view class="navigation_title" :class="isScrollShow?'isScrollShow':'' ">
|
|
<template v-if="!isScrollShow ">
|
|
<navigator url="/pages/account/message" class="order_info_item">
|
|
<uni-badge :text="mesNum" type="error" absolute="rightTop">
|
|
<image src="../../static/img/msg_white.png" mode=""></image>
|
|
</uni-badge>
|
|
</navigator>
|
|
|
|
<image src="/static/img/dope plus_white.png" mode="" class="index_logo"></image>
|
|
</template>
|
|
|
|
|
|
<view class="navigation_title_right" :class="isScrollShow?'navigation_title_padding':'' ">
|
|
<navigator>
|
|
<image src="../../static/img/like_white.png" mode="" @click="Iswish()"></image>
|
|
</navigator>
|
|
<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>
|
|
</view>
|
|
|
|
<navigator >
|
|
<view v-if="isScrollShow " :class="isScrollShow?'isScrollShow3':'' ">
|
|
<image src="/static/icon/home_white.png" mode=""></image>
|
|
</view>
|
|
<view class="navigation_seach" :class="isScrollShow?'isScrollShow1':'' " @click="gotoSearch()">
|
|
|
|
<image src="../../static/img/seach.png" mode=""></image>
|
|
<text>search</text>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="navigation_scroll " :class="isScrollShow?'isScrollShow2':'' ">
|
|
<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false">
|
|
<view :class="scroll_active==index?'scroll_active':''" v-for="(item,index) in scrollList" @click="scrollChange(item,index)" :key="item.zone_name">{{item.zone_name}}</view>
|
|
</scroll-view>
|
|
</view> -->
|
|
</view>
|
|
<view class="navigation_scroll " :class="isScrollShow?'isScrollShow2':'' ">
|
|
<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false">
|
|
<view :class="scroll_active==index?'scroll_active':''" v-for="(item,index) in scrollList" @click="scrollChange(item,index)" :key="item.zone_name">{{item.zone_name}}</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view v-for="(item,index) in indexDate.zones" :key="item.zone_id">
|
|
|
|
<!-- 轮播图 -->
|
|
<view class="uni-margin-wrap page_padding_left1" v-if="item.zone_code=='BANNER' && item.zone_status=='NORMAL'">
|
|
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :style="{ height:Swiper_H +'rpx'}">
|
|
<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_colum+'rpx':'',heigth:'auto'}">
|
|
<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"
|
|
v-if="item.zone_code=='ICON' && item.zone_status=='NORMAL' && item.zone_code!=indexDate.zones[index-1].zone_code">
|
|
<swiper class="grid_swiper " :style="{height:(len > 4?380+'rpx':190+'rpx')}"@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="imgTo(item2)"></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="#FFF" background-color="rgb(178 34 52)" />
|
|
<image src="../../static/icon/right_white.png" mode="" ></image>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
|
|
|
|
<!-- SPIKE 1 -->
|
|
<scroll-view class="spike1 page_padding" 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/icon/right_white.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" 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')?350+'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" 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:350+'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>
|
|
<!-- 瀑布流标题 -->
|
|
<!-- <view class="index_title1" v-if="bestlist.length>0">PRODUCTS FRO YOU</view> -->
|
|
|
|
<!-- <view class="waterfall" v-if="bestlist.length>0" >
|
|
<custom-waterfalls-flow :value="bestlist" imageKey="block_pic"@imageClick="imgTo(bestlist)">
|
|
<template v-slot:default="item2">
|
|
<view class="item" @click="imgTo(item2)">
|
|
<view class="title">{{item2.block_title}}</view>
|
|
<view >{{item2.block_title2}}</view>
|
|
<view class="desc">{{item2.block_title3}}</view>
|
|
</view>
|
|
</template>
|
|
</custom-waterfalls-flow>
|
|
</view>
|
|
-->
|
|
<view class="container" v-if="bestlist.length>0">
|
|
<view class="left">
|
|
<view v-for="(item,index) in leftList" :key="index" >
|
|
<image :src="item.block_pic" alt="" mode="widthFix" @click="imgTo(item)"></image>
|
|
<view class="item" @click="imgTo(item)">
|
|
<view class="title" v-if="item.block_title!=0">{{item.block_title}}</view>
|
|
<view class="title">{{item.block_title2}}</view>
|
|
<view class="desc">{{item.block_title3}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view v-for="(item1,index1) in rightList" :key="index1" >
|
|
<image :src="item1.block_pic" alt="" mode="widthFix" @click="imgTo(item1)"></image>
|
|
<view class="item" @click="imgTo(item1)">
|
|
<view class="title" v-if="item1.block_title!=0">{{item1.block_title}}</view>
|
|
<view class="title" >{{item1.block_title2}}</view>
|
|
<!-- <view class="title" >{{item1.block_name}}</view> -->
|
|
<view class="desc">{{item1.block_title3}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- //弹窗广告 -->
|
|
<view style="bottom:0" v-if="popImg">
|
|
<!-- <button @click="open">打开弹窗</button> -->
|
|
<uni-popup ref="popup" :mask-click="false">
|
|
|
|
<view class="Popup">
|
|
<view class="popup_close">
|
|
<image mode=" " @click="close" src="../../static/img/close2.png"></image>
|
|
</view>
|
|
<view class="popup_img" >
|
|
<!-- <view class="popup_text"><text>{{countdownTime }}s跳过</text></view> -->
|
|
<image :src="popImg" mode=" " @click="popImgto"></image>
|
|
</view>
|
|
</view>
|
|
<!-- <button @click="close">关闭</button> -->
|
|
</uni-popup>
|
|
</view>
|
|
|
|
|
|
<!-- 启动页广告 -->
|
|
<!-- <view class="open_bg" :style="{display:countdownTime2==0?'none':''}" >
|
|
<view class="open_text"><text @click="countdownTime2 =0">{{ countdownTime2 }}s skip</text></view>
|
|
<swiper class ="open_bgimg" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
|
|
:duration="duration">
|
|
<swiper-item v-for="(item,index) in open_img" :key="item.block_pic">
|
|
<view class="open_text"><text>{{ countdownTime2 }}s跳过</text></view>
|
|
<image :src="item.block_pic" mode="" @click="imgTo(item)"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
</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'
|
|
},
|
|
bestlist:[],
|
|
// 初始化左右盒子
|
|
leftList: [],
|
|
rightList: [],
|
|
// 初始化左右盒子高度
|
|
leftH: 0,
|
|
rightH: 0,
|
|
isbest:0,
|
|
popImg:'',
|
|
countdownTime: 10,
|
|
countdownTime2:5,
|
|
popUrl:'',
|
|
myMes:{
|
|
_action:'getmessagelist',
|
|
type:0,
|
|
// importance:'',
|
|
// label:'',
|
|
page_index:1,
|
|
page_size:10
|
|
},
|
|
Swiper_H:150
|
|
// open_img:[],
|
|
// indicatorDots: true,
|
|
// autoplay: true,
|
|
// interval: 2000,
|
|
// duration: 500
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
setTimeout(()=>{
|
|
this.getList()
|
|
uni.stopPullDownRefresh()
|
|
|
|
},800)
|
|
},
|
|
|
|
onLoad() {
|
|
// #ifdef APP-PLUS
|
|
plus.navigator.setFullscreen(false);
|
|
// #endif
|
|
|
|
this.getIndex()
|
|
// ////console.info(this.curEndTime)
|
|
this.getList()
|
|
this.getMes()
|
|
this.getPullMes()
|
|
this.getInfo()
|
|
|
|
|
|
setTimeout( () =>{
|
|
this.open()
|
|
// this.getCountdownTime()
|
|
},5000)
|
|
},
|
|
|
|
mounted() {
|
|
this.getimgheight()
|
|
},
|
|
|
|
created() {
|
|
this.getPullMes()
|
|
|
|
if(this.open_img){
|
|
setTimeout( () =>{
|
|
this.getCountdownTime()
|
|
uni.hideTabBar()
|
|
},2000)
|
|
}
|
|
|
|
},
|
|
onShow() {
|
|
|
|
this.getList()
|
|
this.getMes()
|
|
this.sum=0
|
|
},
|
|
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: {
|
|
|
|
open() {
|
|
this.$refs.popup.open('center')
|
|
},
|
|
close() {
|
|
this.$refs.popup.close()
|
|
uni.setTabBarStyle({
|
|
backgroundColor: "#fff",
|
|
borderStyle: "black",
|
|
// selectedColor: "#999",
|
|
// color: "#999",
|
|
});
|
|
|
|
},
|
|
//获取广告
|
|
getPullMes(){
|
|
let data={_action:'getpagedata',pagecode:'001-STARTPAGE'}
|
|
defaultRequest(data).then( res =>{
|
|
//console.log('1',res)
|
|
let img
|
|
let url
|
|
if(res.error == 0){
|
|
res.data.zones.map( item =>{
|
|
if(item.zone_code == "KAIPIN"){
|
|
img = item.blocks
|
|
url = item.blocks[0].block_link
|
|
}
|
|
})
|
|
this.open_img = img
|
|
// this.popUrl = url
|
|
}
|
|
})
|
|
let data2={_action:'getpagedata',pagecode:'HOMEPOPUPADS'}
|
|
defaultRequest(data2).then( res =>{
|
|
//console.log('2',res)
|
|
if(res.error == 0){
|
|
res.data.zones.map( item =>{
|
|
if(item.zone_code == 'HOMEPOPUP'){
|
|
this.popImg = item.zone_icon
|
|
this.popUrl = item.zone_more_link
|
|
//console.log(this.popUrl)
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
})
|
|
let data3 ={
|
|
_action:'get_splash_ad',appcode:'DOPE+',VERS:'1.0.0'
|
|
}
|
|
defaultRequest(data3).then(res =>{
|
|
//console.log(res)
|
|
})
|
|
},
|
|
//5秒倒计时
|
|
getCountdownTime() {
|
|
uni.hideTabBar();
|
|
uni.setTabBarStyle({
|
|
backgroundColor: "#ccc",
|
|
borderStyle: "black",
|
|
// selectedColor: "#999",
|
|
// color: "#999",
|
|
});
|
|
// this.countdownTime = 10
|
|
// let timer = setInterval(() => {
|
|
// this.countdownTime--;
|
|
// if (this.countdownTime < 1) {
|
|
// clearInterval(timer)
|
|
// this.countdownTime = 0
|
|
|
|
// }
|
|
|
|
// }, 1000)
|
|
|
|
let timer2 = setInterval(() => {
|
|
// uni.hideTabBar();
|
|
this.countdownTime2--;
|
|
if (this.countdownTime2 < 1) {
|
|
clearInterval(timer2)
|
|
this.countdownTime2 = 0
|
|
}
|
|
if(this.countdownTime2 ==0){
|
|
uni.showTabBar()
|
|
}
|
|
}, 1000)
|
|
|
|
|
|
},
|
|
//gaogaoye 跳转
|
|
popImgto(){
|
|
const i = this.popUrl.indexOf('?')
|
|
const url = this.popUrl.substring(i)
|
|
//console.log(url)
|
|
if(this.popUrl.includes('dope.dope://?goodslist=1')){
|
|
|
|
//console.log(url)
|
|
uni.navigateTo({
|
|
url:'/pages/category/productList'+url+'&tag=1'
|
|
})
|
|
}
|
|
else{
|
|
uni.navigateTo({
|
|
url:'../productDetails/index'+url+'&img=1'
|
|
})
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 获取首页数据配置
|
|
getIndex(){
|
|
let data={_action:'getpagedata',pagecode:'HOME'}
|
|
defaultRequest(data).then(res=>{
|
|
|
|
if(res.error==0){
|
|
this.indexDate=res.data
|
|
////console.log(this.indexDate,'首页配置')
|
|
this.len = 0
|
|
res.data.zones.map(item=>{
|
|
if(item.zone_code=='ICON'){
|
|
item.content=''
|
|
this.info.push(item)
|
|
|
|
// this.len+= this.info.blocks.length
|
|
console.log(this.info,'info')
|
|
}
|
|
if(item.zone_code=='BANNER'){
|
|
item.blocks.map( item1 =>{
|
|
this.getimgheight(item1.block_pic)
|
|
})
|
|
}
|
|
if(this.info.length>1){
|
|
for(let i =0; i < this.info.length; i++){
|
|
if(this.info[i].blocks.length > this.len){
|
|
this.len = this.info[i].blocks.length
|
|
}
|
|
}
|
|
}
|
|
if(item.zone_code=='LIST1'){
|
|
|
|
// this.bestlist.push(item.blocks)
|
|
// ////console.log(this.bestlist,'精品')
|
|
this.isbest = 1
|
|
this.getCatList()
|
|
item.blocks.map( item =>{
|
|
this.bestlist.push(item)
|
|
})
|
|
////console.log(item,'精品')
|
|
}
|
|
|
|
})
|
|
}
|
|
})
|
|
defaultRequest({
|
|
_action:'getpagedata',pagecode:'HOMECLASS'
|
|
}).then(res =>{
|
|
// ////console.log(res)
|
|
if(res.error ==0){
|
|
this.scrollList = res.data.zones
|
|
}
|
|
})
|
|
},
|
|
Iswish(){
|
|
const i = uni.getStorageSync('isLogin')
|
|
if(i==1){
|
|
uni.navigateTo({
|
|
url:'../account/wishlist'
|
|
})
|
|
}else{
|
|
uni.navigateTo({
|
|
url:'../login/index'
|
|
})
|
|
}
|
|
},
|
|
getMes(){
|
|
let data ={ _action:'getpagedata',pagecode:'006-PERSONALCENTERPAGE'
|
|
|
|
}
|
|
let a=0, b =0
|
|
defaultRequest(data).then(res =>{
|
|
|
|
let list = res.data.zones
|
|
|
|
list.map(item =>{
|
|
if(item.zone_code =='XIAOXI'){
|
|
this.list = item
|
|
|
|
}
|
|
})
|
|
//console.log(this.list.blocks.length)
|
|
a = this.list.blocks.length
|
|
let str = this.list.blocks[0].block_avaiable_from
|
|
|
|
})
|
|
defaultRequest(this.myMes).then(res =>{
|
|
//console.log(res)
|
|
if(res.error ==0){
|
|
this.app_Mes = res.data.message_list
|
|
b = this.app_Mes.length
|
|
//console.log(this.app_Mes.length)
|
|
}
|
|
let sum = parseInt(a) + parseInt(b)
|
|
// //console.log(sum)
|
|
this.mesNum= sum
|
|
|
|
})
|
|
},
|
|
gotoSearch(){
|
|
uni.navigateTo({
|
|
url:'./search'
|
|
})
|
|
},
|
|
goDetails(id){
|
|
uni.navigateTo({
|
|
url:'/pages/productDetails/index?goodid='+id
|
|
})
|
|
},
|
|
|
|
getList(){
|
|
|
|
|
|
let data={_action:'getcartgoods'}
|
|
defaultRequest(data).then(res=>{
|
|
// ////console.info(res.data.goods_list.length,'//////')
|
|
if(res.error==0){
|
|
this.sum = res.data.goods_list.length
|
|
}
|
|
})
|
|
|
|
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)
|
|
}
|
|
})
|
|
},
|
|
|
|
getimgheight(item){
|
|
const that = this
|
|
|
|
// 获取图片宽高
|
|
uni.getImageInfo({
|
|
src: item,
|
|
success: (image) => {
|
|
// console.log(image)
|
|
// this.Swiper_H = 0
|
|
this.Swiper_H = image.height
|
|
// 计算图片渲染高度
|
|
let showH = (50 * image.height) / image.width
|
|
// console.log(showH)
|
|
}
|
|
})
|
|
|
|
},
|
|
// 获取的推荐商品数据
|
|
getCatList(type){
|
|
if(this.isbest ==1){
|
|
defaultRequest4(this.catQuery).then(res=>{
|
|
////console.info(res,'最好的')
|
|
if(res.error==0){
|
|
if(res.data){
|
|
|
|
res.data.map( item =>{
|
|
console.log(item)
|
|
this.bestlist.push({
|
|
block_pic:item.goods_img,
|
|
block_title3:'US$'+item.shop_price,
|
|
block_name:item.short_name,
|
|
goodid:item.id
|
|
})
|
|
})
|
|
////console.log(this.bestlist,'合并')
|
|
const that = this
|
|
this.bestlist.forEach(res => {
|
|
// 获取图片宽高
|
|
uni.getImageInfo({
|
|
src: res.block_pic,
|
|
success: (image) => {
|
|
// ////console.log(res.block_pic)
|
|
// 计算图片渲染高度
|
|
let showH = (50 * image.height) / image.width
|
|
// 判断左右盒子高度
|
|
if(that.leftH <= that.rightH) {
|
|
that.leftList.push(res)
|
|
that.leftH += showH
|
|
} else {
|
|
that.rightList.push(res)
|
|
that.rightH += showH
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
|
|
gotoSkillpage(e){
|
|
uni.navigateTo({
|
|
// url:"../productDetails/index?goods_id="+e.id
|
|
url:'./flashSale'
|
|
})
|
|
},
|
|
|
|
scrollChange(item,index){
|
|
this.info = []
|
|
this.isbest = 0
|
|
|
|
this.bestlist =[]
|
|
//console.log(this.bestlist)
|
|
this.scroll_active=index
|
|
let data = {
|
|
_action:'getpagedata',
|
|
pagecode:item.zone_code
|
|
}
|
|
|
|
defaultRequest(data).then( res =>{
|
|
|
|
if(res.error == 0){
|
|
this.len = 0
|
|
// this.getIndex()
|
|
this.indexDate = res.data
|
|
res.data.zones.map(item=>{
|
|
if(item.zone_code=='ICON'){
|
|
item.content=''
|
|
this.info.push(item)
|
|
|
|
this.len = item.blocks.length
|
|
|
|
//console.log(item,'info')
|
|
}
|
|
if(item.zone_code=='BANNER'){
|
|
item.blocks.map( item1 =>{
|
|
this.getimgheight(item1.block_pic)
|
|
})
|
|
}
|
|
if(this.info.length>1){
|
|
for(let i =0; i < this.info.length; i++){
|
|
if(this.info[i].blocks.length > this.len){
|
|
this.len = this.info[i].blocks.length
|
|
}
|
|
}
|
|
}
|
|
if(item.zone_code=='LIST1'){
|
|
|
|
// this.bestlist.push(item.blocks)
|
|
// ////console.log(this.bestlist,'精品')
|
|
this.isbest = 1
|
|
// this.getCatList()
|
|
item.blocks.map( item =>{
|
|
this.bestlist.push(item)
|
|
})
|
|
if(index>0){
|
|
this.getCatList()
|
|
}
|
|
////console.log(item,'精品')
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
})
|
|
|
|
},
|
|
gridSwiper(e){
|
|
this.current = e.detail.current
|
|
},
|
|
//轮播图跳转 // 热卖跳转
|
|
imgTo(item){
|
|
console.log(item,'item')
|
|
//console.log(item.block_link.includes('dope.youhui'))
|
|
let goodid
|
|
|
|
if(item.goodid){
|
|
|
|
uni.navigateTo({
|
|
url:'../productDetails/index?goodid='+item.goodid
|
|
})
|
|
}
|
|
else if(item.block_link){
|
|
const i = item.block_link.indexOf('?')
|
|
goodid = item.block_link.substring(i);
|
|
////console.log(item.block_link)
|
|
if(item.block_link.includes('goodslist')){
|
|
uni.navigateTo({
|
|
url:'../category/productList'+ goodid+'&tag=1'
|
|
})
|
|
}
|
|
else if(item.block_link.includes('goodid')){
|
|
uni.navigateTo({
|
|
url:'../productDetails/index'+goodid+'&img=1'
|
|
})
|
|
}
|
|
else if(item.block_link.includes('dope.youhui')){
|
|
uni.navigateTo({
|
|
url:'./pickUpCentre'
|
|
})
|
|
}
|
|
}
|
|
|
|
},
|
|
Hotgoto(item1){
|
|
const i = item1[0].block_link.indexOf('?')
|
|
//console.log(item1)
|
|
const url = item1[0].block_link.substring(i)
|
|
if(url.includes('goodslist')){
|
|
uni.navigateTo({
|
|
url:'../category/productList'+ url +'&tag=1'
|
|
})
|
|
}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;
|
|
}
|
|
@keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
|
|
|
|
0%{
|
|
|
|
transform: scale(1); /*开始为原始大小*/
|
|
|
|
}
|
|
|
|
25%{
|
|
|
|
transform: scale(1.1); /*放大1.1倍*/
|
|
|
|
}
|
|
|
|
50%{
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
|
|
|
75%{
|
|
|
|
transform: scale(1.1);
|
|
|
|
}
|
|
|
|
}
|
|
.ONEPIC{
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: -12rpx 0;
|
|
image{
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
&:nth-last-child(){
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
.TWOPIC{
|
|
width: 100%;
|
|
display: flex;
|
|
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.THREEPIC{
|
|
width: 100%;
|
|
display: flex;
|
|
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: 198.33rpx;
|
|
background-color: #000000;
|
|
|
|
}
|
|
.body_pad{
|
|
padding-top: 147.33rpx;
|
|
background-color: #000000;
|
|
}
|
|
.status_bar{
|
|
background-color: #000000;
|
|
}
|
|
.flex{
|
|
display: flex;
|
|
}
|
|
.index_logo{
|
|
width: 270.33rpx !important;
|
|
height: 50rpx !important;
|
|
margin-left: 50rpx;
|
|
}
|
|
|
|
.isScrollShow{
|
|
float: right;
|
|
|
|
|
|
|
|
}
|
|
.isScrollShow1{
|
|
float: left;
|
|
margin-top: 30rpx;
|
|
|
|
width: 65% !important;
|
|
}
|
|
.isScrollShow2{
|
|
float: left;
|
|
// margin-top: -150rpx;
|
|
|
|
}
|
|
.isScrollShow3{
|
|
float: left;
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
margin-top: 30rpx;
|
|
|
|
margin-right: 25rpx;
|
|
image{
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.page_padding{
|
|
padding-left: 26.37rpx;
|
|
padding-right: 26.67rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 10rpx;
|
|
}
|
|
.page_margin{
|
|
margin-left: 26.37rpx;
|
|
margin-right: 26.67rpx;
|
|
margin-bottom: 10rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 10rpx;
|
|
background-color: #000000;
|
|
}
|
|
.page_padding_left{
|
|
padding-left: 10.67rpx;
|
|
padding-right: 10.67rpx;
|
|
}
|
|
.page_padding_left1{
|
|
padding-left: 5.67rpx;
|
|
padding-right: 5.67rpx;
|
|
padding-top: 90rpx;
|
|
}
|
|
|
|
.navigation{
|
|
/* display: flex; */
|
|
background-color:#000000;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 99;
|
|
// opacity: 0.8;
|
|
// height: 260rpx;
|
|
width: 100%;
|
|
.navigation_title{
|
|
display: flex;
|
|
padding: 16rpx 0;
|
|
align-items: center;
|
|
// background-color:#000000;
|
|
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_padding{
|
|
margin-top: 25rpx !important;
|
|
padding: 0 !important;
|
|
|
|
}
|
|
.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: 35rpx;
|
|
height: 66.67rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #8F9094;
|
|
// color:#fff;
|
|
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: -80rpx;
|
|
// padding-top: 10rpx;
|
|
margin: 20rpx 0 !important;
|
|
position: fixed;
|
|
// padding-bottom: 10rpx;
|
|
background-color: #000;
|
|
z-index: 99;
|
|
background: rgba(0,0,0,0.7) !important;
|
|
// padding-right: 13rpx;
|
|
padding-left: 24rpx;
|
|
padding-right: 24rpx;
|
|
.scroll-view_H{
|
|
white-space: nowrap;
|
|
font-size: 26.67rpx;
|
|
// color: #484848;
|
|
color:#fff;
|
|
width: 100%;
|
|
// display: flex;
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
background-color: #000;
|
|
}
|
|
|
|
view{
|
|
margin-left: 46.67rpx;
|
|
display: inline-block;
|
|
font-weight: 600;
|
|
padding: 12.67rpx 0;
|
|
}
|
|
view:first-child{
|
|
margin-left: 0;
|
|
}
|
|
.scroll_active{
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
border-bottom: 2.67rpx solid #000000;
|
|
}
|
|
}
|
|
}
|
|
.uni-margin-wrap{
|
|
width: 100%;
|
|
height: 100%;
|
|
// margin-top: 45.33rpx;
|
|
// margin-top: 10rpx;
|
|
margin-bottom: 45.33rpx;
|
|
.swiper {
|
|
// height: 650.33rpx;
|
|
// width: 720rpx;
|
|
// height: 100%;
|
|
/deep/ .uni-swiper{
|
|
height: auto;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
.grid_swiper {
|
|
// height: 380rpx;
|
|
// margin: 0 10rpx 0 10rpx;
|
|
|
|
.grid_content{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.grid_item{
|
|
// width: 97.33rpx;
|
|
display: flex;
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
// color: #1B1B1B;
|
|
color:#fff;
|
|
font-size: 24rpx;
|
|
// margin-right: 6rpx;
|
|
margin-bottom: 13.33rpx;
|
|
font-weight: 500;
|
|
background-color: #000000;
|
|
padding-right: 10rpx;
|
|
margin-left: 25.37rpx;
|
|
&:last-child(){
|
|
margin-left: 0;
|
|
}
|
|
.grid_item_img{
|
|
width: 97.33rpx;
|
|
height: 97.33rpx;
|
|
margin-bottom: 6.67rpx;
|
|
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;
|
|
color:#fff;
|
|
font-weight: bold;
|
|
margin-bottom: 23rpx;
|
|
margin-top: 37.37rpx;
|
|
|
|
.title_right{
|
|
display: flex;
|
|
align-items: center;
|
|
color:white;
|
|
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%;
|
|
padding-right:16rpx ;
|
|
padding-left: 16rpx;
|
|
margin-bottom: 47.67rpx;
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.spike1_item{
|
|
// color: #191919;
|
|
color:#fff;
|
|
font-size: 26.67rpx;
|
|
// margin-right: 16.67rpx;
|
|
// width: 200rpx;
|
|
// margin-left: 16rpx;
|
|
padding-right:16rpx ;
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
&:last-child{
|
|
margin-right: 37rpx;
|
|
}
|
|
|
|
.spike1_item_img{
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
background-color: #999999;
|
|
padding-right:16rpx ;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
}
|
|
// .padding_honlist2{
|
|
// margin-right: 280rpx !important;
|
|
// }
|
|
.spike1_item_bottom{
|
|
padding-left: 9.33rpx;
|
|
margin-top: 7.67rpx;
|
|
|
|
.spike1_item_text{
|
|
// color: #9D9D9D;
|
|
color:#fff;
|
|
font-size: 21.33rpx;
|
|
text-decoration: line-through;
|
|
}
|
|
.spike1_item_text1{
|
|
// color: #9D9D9D;
|
|
color:#fff;
|
|
font-size: 21.33rpx;
|
|
}
|
|
}
|
|
.spike1_item_bottom1{
|
|
padding-left: 9.33rpx;
|
|
margin-top: 19.33rpx;
|
|
font-weight: bold;
|
|
|
|
.spike1_item_text{
|
|
// color: #000000;
|
|
color:#fff;
|
|
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;
|
|
color:#fff;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
// margin-bottom: 149.33rpx;
|
|
margin-bottom: 44rpx;
|
|
|
|
.hotSells1_item{
|
|
width: 340rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.hotSells1_item_img{
|
|
width: 100%;
|
|
// // height: 266.67rpx;
|
|
// background-color: #999999;
|
|
margin-bottom: 5.33rpx;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.hotSells2_item{
|
|
width: 224rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// margin-top: 49.33rpx;
|
|
margin-top: 18.33rpx;
|
|
.hotSells2_item_img{
|
|
// width: 100%;
|
|
// height: 224rpx;
|
|
// background-color: #999999;
|
|
margin-bottom: 5.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: 25.33rpx;
|
|
font-weight: 400;
|
|
// margin-top: 24.67rpx;
|
|
margin-top: 14.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;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
.container {
|
|
padding: 0 30rpx;
|
|
font-size: 14rpx;
|
|
line-height: 24rpx;
|
|
color:white;
|
|
padding-bottom: 50rpx;
|
|
|
|
}
|
|
.title{
|
|
font-size: 25.33rpx;
|
|
font-weight: 200;
|
|
// margin-top: 24.67rpx;
|
|
margin-top: 4.67rpx;
|
|
margin-bottom: 10.67rpx;
|
|
|
|
}
|
|
.desc{
|
|
font-size: 28rpx;
|
|
font-weight: 200;
|
|
margin-bottom: 10.67rpx;
|
|
}
|
|
.right,
|
|
.left{display: inline-block; width: 49%;vertical-align: top;}
|
|
.left{margin-right: 2%;}
|
|
.left image,
|
|
.right image{width: 100%;margin-bottom: 10rpx;margin-top: 20rpx;}
|
|
.Popup{
|
|
height: 700rpx;
|
|
width: 400rpx;
|
|
|
|
|
|
.popup_close{
|
|
height: 50rpx;
|
|
width: 50rpx;
|
|
|
|
margin-left: 400rpx;
|
|
// background-color: #000000;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.popup_img{
|
|
height: 600rpx;
|
|
width: 400rpx;
|
|
// margin-top: 10rpx;
|
|
// margin-left: 20rpx;
|
|
background-size: 100%;
|
|
padding: 0 !important;
|
|
|
|
background-repeat: no-repeat;
|
|
border-radius:25rpx;
|
|
position: relative;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 25rpx;
|
|
|
|
}
|
|
.popup_text{
|
|
right:0;
|
|
height: 30rpx;
|
|
width: 60rpx;
|
|
font-size: 20rpx;
|
|
margin-right: 10rpx;
|
|
margin-top: 10rpx;
|
|
background-color:#ccc;
|
|
background-color:rgba(0,0,0,0.4);
|
|
line-height: 30rpx;
|
|
opacity: 0.5;
|
|
color:white;
|
|
text-align: center;
|
|
position: absolute;
|
|
z-index:99;
|
|
border-radius: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
.open_bg{
|
|
height: 100%;
|
|
width: 100%;
|
|
top:0;
|
|
color: white;
|
|
z-index: 999;
|
|
position: fixed;
|
|
// padding-top: 50rpx;
|
|
|
|
overflow: hidden;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-attachment:fixed;
|
|
.open_text{
|
|
right:0;
|
|
top:50rpx;
|
|
height: 50rpx;
|
|
width: 120rpx;
|
|
font-size: 28rpx;
|
|
margin-right: 10rpx;
|
|
margin-top: 10rpx;
|
|
background-color:#ececec;
|
|
background-color:rgba(0,0,0,0.5);
|
|
line-height: 50rpx;
|
|
opacity: 0.5;
|
|
text-align: center;
|
|
position: absolute;
|
|
z-index:99;
|
|
border-radius: 5rpx;
|
|
}
|
|
|
|
.open_bgimg{
|
|
top:0;
|
|
height: 100vh;
|
|
width: 100%;
|
|
position: relative;
|
|
color:white;
|
|
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|