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.
1555 lines
35 KiB
1555 lines
35 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>
|
|
|
|
<!-- HONLIST1 -->
|
|
<scroll-view class="spike1 page_padding" scroll-x="true" @change="handlechange" :show-scrollbar="false"
|
|
:indicator-dots="true" :circular="true" :interval="3000" :duration="1000"
|
|
v-if="item.zone_code=='HONLIST1' && item.zone_status=='NORMAL'" :current="mycurrent">
|
|
<swiper style="height: 600rpx;" previous-margin="140rpx" next-margin="140rpx" @change="handlechange" :current="mycurrent"
|
|
:indicator-dots="false" :circular="true" :interval="3000" :duration="1000">
|
|
<swiper-item v-for="item1,index1 in item.blocks" :key="item1.block_id">
|
|
<view :class="['swiper-items',index1==mycurrent ? 'active' : '']">
|
|
<image :src="item1.block_pic" mode=""
|
|
:style="{width:(item.zone_code=='HONLIST1')?420+'rpx':'',height:item.zone_column+'rpx'}"
|
|
@click="imgTo(item1)"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</scroll-view>
|
|
<!-- HONLIST2 -->
|
|
<scroll-view class="spike1 page_padding" scroll-x="true" @change="handlechange" :show-scrollbar="false"
|
|
:indicator-dots="true" :circular="true" :interval="3000" :duration="1000"
|
|
v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'" :current="mycurrent">
|
|
<view class="spike1_item padding_honlist2" v-for="(item1,index1) in item.blocks"
|
|
:key="item1.block_id">
|
|
<view :class="['swiper-item',index==mycurrent ? 'active' : '']">
|
|
<image :src="item1.block_pic" mode=""
|
|
:style="{width:(item.zone_code=='HONLIST2')?160+'px':'',height:item.zone_column+'rpx'}"
|
|
@click="imgTo(item1)"></image>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- HONLIST3 -->
|
|
<scroll-view class="spike1 page_padding" scroll-x="true" :show-scrollbar="false"
|
|
v-if="item.zone_code=='HONLIST3' && item.zone_status=='NORMAL'" @scroll="scrollhot">
|
|
<view class="spike1_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id">
|
|
<view class="item_img "
|
|
:style="{width:(item.zone_code=='HONLIST3')?+'rpx':'',height:item.zone_column +'rpx'}">
|
|
<image :src="item1.block_pic" mode="" @click="imgTo(item1)"></image>
|
|
<a :href="item1.block_link"></a>
|
|
</view>
|
|
<view class="spike1_item_bottom">
|
|
<text>{{item1.block_title}}</text>
|
|
<view class="spike1_item_text1">{{item1.block_title2}}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-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 {
|
|
mycurrent: 0,
|
|
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() {
|
|
let that = this;
|
|
let s = 0;
|
|
let time = setInterval(() => {
|
|
uni.getNetworkType({
|
|
success: (res) => {
|
|
console.log(res.networkType, s);
|
|
if (res.networkType == 'none') {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: 'Please connect to the network',
|
|
duration: 3000,
|
|
})
|
|
} else if (res.networkType !== 'none') {
|
|
that.typee = 2;
|
|
clearInterval(time);
|
|
|
|
}
|
|
}
|
|
})
|
|
s++;
|
|
}, 1000);
|
|
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: {
|
|
handlechange(e) {
|
|
this.mycurrent = e.detail.current
|
|
},
|
|
scrollhot(e) {
|
|
// console.log(e)
|
|
// let i = e.scrollLeft/200
|
|
// this.hot_index = i
|
|
// console.log('滚动了',this.hot_index)
|
|
// this.start(this.hot_index)
|
|
// this.end(this.hot_index)
|
|
},
|
|
// 获取页数据配置
|
|
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 => {
|
|
console.log(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')
|
|
}
|
|
if (item.zone_code == 'HONLIST1') {
|
|
item.blocks.map(item1 => {
|
|
// console.log('HONLIST2',item1)
|
|
})
|
|
}
|
|
if (item.zone_code == 'HONLIST2') {
|
|
item.blocks.map(item1 => {
|
|
// console.log('HONLIST2',item1)
|
|
})
|
|
}
|
|
if (item.zone_code == 'HONLIST3') {
|
|
item.blocks.map(item1 => {
|
|
// console.log('HONLIST3',item1)
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
},
|
|
gridSwiper(e) {
|
|
this.current = e.detail.current
|
|
},
|
|
//轮播图跳转 // 热卖跳转
|
|
imgTo(item) {
|
|
console.log(item, 'item')
|
|
// let goodid = item.block_link;
|
|
// let goodid = item.block_link.split('?')[1];
|
|
const i = item.block_link.indexOf('?')
|
|
let goodid = item.block_link.substring(i);
|
|
if (goodid.includes('goodslist')) {
|
|
uni.navigateTo({
|
|
url: '../category/productList'+goodid
|
|
})
|
|
console.log(gooid);
|
|
console.log(11111)
|
|
} else if (goodid.includes('?id=0')) {
|
|
uni.navigateTo({
|
|
url: '../index/pickUpCentre'
|
|
})
|
|
console.log(goodid);
|
|
console.log(33333);
|
|
} else if (goodid.includes('goodid')) {
|
|
uni.navigateTo({
|
|
url: '../productDetails/index' + goodid + '&img=1'
|
|
})
|
|
console.log(goodid);
|
|
console.log(item.block_link);
|
|
console.log(44444444)
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '../productDetails/index'+goodid+'&img=1'
|
|
})
|
|
console.log(goodid);
|
|
console.log(item.block_link);
|
|
console.log(22222)
|
|
}
|
|
|
|
},
|
|
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;
|
|
}
|
|
.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_left1 {
|
|
padding-left: 5.67rpx;
|
|
padding-right: 5.67rpx;
|
|
// padding-top: 90rpx;
|
|
}
|
|
|
|
// .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%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: 20rpx;
|
|
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;
|
|
}
|
|
}
|
|
.swiper-items {
|
|
border-radius: 30rpx;
|
|
overflow: hidden;
|
|
// 像这种多张轮播图同时出现在一屏的情况下就不要指定width了，不然你会发现previous-margin和 next-margin会出现想不到的效果
|
|
// 如果想要设置宽每一张轮播图的宽度，只需要设置previous-margin和next-margin就可以了，想要设置高度直接改下面的height就可以了
|
|
// width: 450rpx;
|
|
height: 100%;
|
|
transform: scale(0.8);
|
|
transition: all 0.5s ease;
|
|
text-align: center;
|
|
transition: all 0.5s ease-in-out;
|
|
|
|
&.active {
|
|
transform: scale(1);
|
|
}
|
|
|
|
/deep/ .uni-swiper-dots {
|
|
display: none !important;
|
|
}
|
|
uni-swiper .uni-swiper-dots {
|
|
display: none !important;
|
|
z-index: -1 !important;
|
|
}
|
|
/deep/ .uni-swiper .uni-swiper-dots-horizontal {
|
|
display: none !important;
|
|
}
|
|
uni-swiper .uni-swiper-dot {
|
|
z-index: -1 !important;
|
|
display: none !important;
|
|
}
|
|
|
|
}
|
|
@keyframes scaleDraw {
|
|
/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
|
|
|
|
0% {
|
|
|
|
transform: scale(1);
|
|
/*开始为原始大小*/
|
|
|
|
}
|
|
|
|
25% {
|
|
|
|
transform: scale(1.1);
|
|
/*放大1.1倍*/
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
|
|
|
75% {
|
|
|
|
transform: scale(1.1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|