<template>
<div class="entry">
<div class="home_top">
<div class="home_tab">
<div class="back" @click="back">
<img src="../../assets/go_back.png" alt />
</div>
<div class="text">条码管理列表</div>
</div>
</div>
<div class="h_40"></div>
<div class="pd_con_wp">
<div class="serchicon">
<van-search placeholder="请输入搜索关键词" v-model="searval" @focus="jump()" />
</div>
<div class="mainpast" ref="heightwindow1">
<!-- 已完成 -->
<div class="pd_one">
<van-list v-model="loading2" :finished="finished2" finished-text="没有更多数据了" @load="onLoadtwo">
<div class="h_10"></div>
<div class="p_list" v-for="item in yesInfo" :key="item.id" @click="datedetail(item.id, item.good_name, item.bar_code,item)">
<div class="item">
<div class="no_figure">
<img :src="item.logo" alt="">
</div>
<div class="no_dl">
<div class="name">{{item.good_name}}</div>
<div class="scan">条码:{{item.bar_code}}</div>
</div>
</div>
</div>
</van-list>
</div>
</div>
</div>
<van-overlay :show="show" />
<!-- 加载中 -->
<div class="loading" v-if="show2">
<van-loading type="spinner" color="#1989fa" />
</div>
<!--加载中~-->
<div class='show_loading' v-if="isshowloading">
<div class="load1">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
<p>加载中...</p>
</div>
</div>
<!-- 底部弹层 -->
<div class="popup_wp" v-if="ispop">
<div class="pop_close" @click="closepop"></div>
<div class="pop_list_wp">
<div class="pop_list">
<div class="item">
<div class="t_con">
<div class="dl">
<div class="dd"><span>{{productName}}</span></div>
<div class="dt">
<div class="lab">条码:</div>
<div class="inp codeinput">
<input type="text" maxlength="13" @focus="scollhy" @blur="scollhy" v-model="buildcode" @input="buildcode = Number($event.target.value.replace(/\D+/, ''))">
</div>
</div>
</div>
<div class="btn_r" @click="confirmpd()">扫码</div>
</div>
</div>
</div>
<div class="h_50"></div>
<div class="add_date_btn">
<div class="item active" @click="stoptdata">取消</div>
<div class="item" @click="preservedata">确定</div>
</div>
</div>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import Vue from "vue";
import { API } from "../../common/api";
import wx from 'weixin-js-sdk';
import Qs from "qs";
import {
Toast,
Loading,
Overlay,
Search,
Icon,
Sidebar,
SidebarItem,
List,
Field,
DatetimePicker,
NumberKeyboard,
Dialog
} from "vant";
Vue.use(Toast)
.use(Loading)
.use(Overlay)
.use(Icon)
.use(Sidebar)
.use(SidebarItem)
.use(List)
.use(Dialog)
.use(Field)
.use(Search)
.use(NumberKeyboard)
.use(DatetimePicker);
export default {
name: "login",
data() {
return {
isshowloading: false,
buildID:null,
buildcode:null,
searval: "",
countno: 0,
countok: 0,
show2: false,
orderId: null,
inventoryProductId: null,
ispop: false,
show: false,
datelist: [],
noInfo: [],
loading1: false,
finished1: false,
showLoad1: false,
pageNumone: 1,
activeKey: 0,
current: 1,
yesInfo: [],
loading2: false,
finished2: false,
showLoad2: false,
pageNumtwo: 1,
isdown: false,
typeId: null,
chooseDate: '',
productName: "",
pbarcode: null
};
},
methods: {
jump() {
this.$router.push({
path: "/sweep/codesearch",
query: {
orderId: this.$route.query.orderId
}
});
},
scollhy() {
window.scroll(0, 0);
},
// 扫一扫
scanfun() {
let that = this;
this.axios({
method: 'POST',
url: 'https://ha.tongchengxianggou.com/sku/wxscan/getScanList',
data: Qs.stringify({
url: location.href.split("#")[0],
}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
wx.config({
debug: false,
appId: "wxbf65b7f4c706892c", // 必填,公众号的唯一标识
timestamp: res.data.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.data.signature, // 必填,签名
jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表
});
wx.ready(function() {
// config信息验证成功后会执行ready方法,所有接口调用都必须在config接口获得结果之后
// config 是一个客户端的异步操作,所以如果需要在页面加载时调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行.对于用户触发是才调用的接口,则可以直接调用,不需要放在ready函数中
wx.scanQRCode({ // 微信扫一扫接口
desc: 'scanQRCode desc',
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
// scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
success: function(res) {
const getCode = res.resultStr.split(",")[1]; // 当needResult 为 1 时,扫码返回的结果
if(getCode) {
that.show = true;
that.show2 = true;
that.axios({
method: 'POST',
url: `${API}/sku/inventory/type/stock/list`,
data: Qs.stringify({
uuid: localStorage.getItem("uuid"),
barCode: getCode,
inventoryId: that.orderId
}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
if(res.data.code === 200) {
that.show2 = false;
that.show = false;
that.datelist = res.data.data.list;
that.ispop = true;
that.productName = res.data.data.productName;
that.inventoryProductId = res.data.data.ipId;
that.pbarcode = res.data.data.barCode;
for(let i = 0; i < that.datelist.length; i++) {
if(that.datelist[i].psId == 0) {
if(that.datelist[i].inventoryCount == 0) {
that.datelist[i].inventoryCount = null;
}
}
}
} else if(res.data.code === 401) {
that.show2 = false;
that.show = false;
that.$router.push({
path: "/loginpd"
});
} else {
that.show2 = false;
that.show = false;
Toast(res.data.msg)
}
})
} else {
Toast.fail("扫码失败,请重新扫码!")
}
}
})
});
/* 处理失败验证 */
wx.error(function(res) {
// config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
alert('配置验证失败: ' + res.errMsg)
});
});
},
oninputblur() {
},
//扫码
confirmpd() {
//数据储存处理
localStorage.setItem('openstyle',this.ispop);
localStorage.setItem('hodedata',JSON.stringify(this.datelist));
localStorage.setItem('hodename',this.productName);
let that = this;
this.axios({
method: 'POST',
url:'http://ha.tongchengxianggou.com/sku/wxscan/getScanList',
data: Qs.stringify({
url: location.href.split("#")[0],
}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res=>{
wx.config({
debug: false,
appId: "wxbf65b7f4c706892c", // 必填,公众号的唯一标识
timestamp: res.data.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.data.signature, // 必填,签名
jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表
});
wx.ready(function () {
// config信息验证成功后会执行ready方法,所有接口调用都必须在config接口获得结果之后
// config 是一个客户端的异步操作,所以如果需要在页面加载时调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行.对于用户触发是才调用的接口,则可以直接调用,不需要放在ready函数中
wx.scanQRCode({ // 微信扫一扫接口
desc: 'scanQRCode desc',
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
// scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
const getCode = res.resultStr.split(",")[1]; // 当needResult 为 1 时,扫码返回的结果
if (getCode) {
this.buildcode = getCode;
/*
if (getCode == barCode) {
let stlist = JSON.stringify(stList);
let products = JSON.stringify(that.products);
} else {
let stlist = JSON.stringify(stList);
let products = JSON.stringify(that.products);
}
*/
} else {
Toast.fail("扫码失败,请重新扫码!")
}
}
})
});
/* 处理失败验证 */
wx.error(function (res) {
// config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
alert('配置验证失败: ' + res.errMsg)
});
});
},
datapop() {
},
datedetail(inventoryProductId, name, barcode,viewitem) {
this.buildID = inventoryProductId;
this.buildcode = barcode;
this.productName = name;
this.ispop = true;
//this.detailrq();
},
bodyScroll(event) {
event.preventDefault();
},
// 禁止滚动
forbidBodyScroll() {
let that = this;
document.getElementsByTagName('body')[0].addEventListener('touchmove', that.bodyScroll, false);
},
// 允许滚动
allowBodyScroll() {
document.getElementsByTagName('body')[0].removeEventListener('touchmove', that.bodyScroll, false);
},
closepop() {
localStorage.removeItem("openstyle");
localStorage.removeItem("hodedata");
localStorage.removeItem("hodename");
this.ispop = false;
//this.allowBodyScroll();
},
stoptdata(){
localStorage.removeItem("openstyle");
localStorage.removeItem("hodedata");
localStorage.removeItem("hodename");
this.ispop = false;
},
preservedata() {
this.isshowloading = true;
let myData = {
barCode: this.buildcode,
poolId: this.buildID,
};
this.axios({
method: 'POST',
url: `${API}/sku/product/list/barCode/update/do`,
data: Qs.stringify(
myData
),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
if(res.data.code === 200) {
this.isshowloading = false;
this.yesInfo = [];
this.pageNumtwo = 1;
this.finished2 = false;
this.loading2 = true;
this.showLoad2 = true;
this.onLoadtwo();
//保存成功后的事件
localStorage.removeItem("openstyle");
localStorage.removeItem("hodedata");
localStorage.removeItem("hodename");
this.ispop = false;
Toast({
message:res.data.msg,
icon: 'like-o',
duration:1500
});
}else{
this.isshowloading = false;
Toast.fail(res.data.msg)
}
})
},
isshowdow() {
this.isdown = true;
},
hidedown() {
this.isdown = false;
},
back() {
path: "/index",
this.$router.push({
path: "/index",
});
},
onLoadone() {
},
onLoadtwo() {
this.show = true;
let orderId = parseInt(this.$route.query.orderId);
if(this.loading2 === true && this.finished2 === false) {
if(this.pageNumtwo == 1) {
this.yesInfo = [];
}
let myData = {
page: this.pageNumtwo,
productName: "",
max: 10,
};
this.axios({
method: 'POST',
url: `${API}/sku/product/list/barCode`,
data: Qs.stringify(
myData
),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
if(res.data.code === 200) {
this.show = false;
this.countno = res.data.data.no;
this.countok = res.data.data.ok;
if(res.data.data.list.length != 0) {
//新增数据拼接在后面
this.yesInfo = this.yesInfo.concat(res.data.data.list);
}
this.loading2 = false;
this.showLoad2 = false;
this.pageNumtwo++;
if(res.data.data.list.length == 0) {
this.loading2 = false;
this.finished2 = true;
this.loadText = "加载完成";
}
} else if(res.data.code === 401) {
this.show = false;
this.$router.push({
path: "/loginpd"
});
} else {
this.show = false;
this.finished2 = true;
this.loading2 = false;
this.showLoad2 = false;
Toast(res.data.msg);
}
})
}
}
},
mounted() {
//扫码保存的数据
this.ispop =localStorage.openstyle;
this.productName = localStorage.hodename;
if(localStorage.hodedata){
this.datelist =JSON.parse(localStorage.hodedata);
}
let height = window.innerHeight - 40;
this.$refs.heightwindow1.style.height = height + "px";
},
beforeRouteEnter(to, from, next) {
next(vm=>{ // 这里的vm指的就是vue实例,可以用来当做this使用
if(from.name == "verifycodesearch"){
if(vm.$route.query.Returnid){
vm.datedetail(vm.$route.query.Returnid,vm.$route.query.Returnname,vm.$route.query.ReturnbarCode)
}
}
})
},
created() {
let orderId = parseInt(this.$route.query.orderId);
this.orderId = orderId;
}
};
</script>
<style scoped>
.addmore{
width: 100%;
height: 38px;
line-height: 38px;
text-align: center;
color: white;
font-size: 14px;
background:
position: fixed;
bottom: 0px;
}
.serchicon {
width: 100%;
background: salmon;
}
.login_btn:active {
opacity: 0.9;
}
.loading {
position: absolute;
left: 50%;
top: 50%;
}
.pd_con_wp {
height: auto;
min-height: 100%;
}
.pd_con_wp::after {
display: block;
content: " ";
visibility: hidden;
height: 0;
clear: both;
}
.van-overlay {
background-color: rgba(0, 0, 0, 0)
}
.add_date_p {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
-webkit-overflow-scrolling: touch;
}
.add_date_con {
width: 285px;
height: 260px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -142px;
margin-top: -125px;
background:
border-radius: 3px;
-webkit-overflow-scrolling: touch;
}
.add_date_con .title_d {
text-align: center;
line-height: 25px;
padding: 12px 0;
border-bottom: 1px solid
font-size: 18px;
color:
font-weight: bold;
}
.add_date_con .pname_d {
padding: 10px 15px;
font-size: 12px;
color:
line-height: 16px;
overflow: hidden;
}
.add_date_con .pname_d::after {
display: block;
content: "";
visibility: hidden;
height: 0;
clear: both;
}
.add_date_con .pname_d .lab {
float: left;
}
.add_date_con .pname_d .n_val {
float: left;
width: 190px;
font-weight: bold;
}
.add_date_con .pname_d span {
font-weight: bold;
font-size: 14px;
}
.add_date_con .date_s {
height: 40px;
line-height: 40px;
padding: 0 15px;
}
.add_date_con .date_s .lab {
float: left;
font-size: 12px;
color:
line-height: 40px;
}
.codeinput{
width: 180px!important;
}
.add_date_con .date_s .inp {
float: left;
width: 190px;
height: 36px;
border: 1px solid
font-size: 14px;
color:
text-indent: 5px;
}
.add_date_con .date_s .inp .val {
width: 140px;
float: left;
display: block;
height: 36px;
}
.add_date_con .d_num {
height: 40px;
line-height: 40px;
padding: 15px 15px;
}
.add_date_con .d_num .lab {
float: left;
font-size: 12px;
color:
line-height: 40px;
}
.add_date_con .d_num .inp {
float: left;
width: 190px;
height: 36px;
border: 1px solid
font-size: 14px;
color:
text-indent: 5px;
overflow: hidden;
}
.add_date_con .d_num .inp input {
display: block;
width: 190px;
height: 36px;
border: 0;
outline: 0;
text-indent: 5px;
font-size: 14px;
}
.add_date_con .p_btn_w {
height: 50px;
display: flex;
width: 100%;
}
.add_date_con .p_btn_w .item {
flex: 1;
line-height: 50px;
font-size: 18px;
color:
text-align: center;
font-weight: bold;
}
.choose_date_con {
position: absolute;
width: 190px;
height: 170px;
overflow: hidden;
box-shadow: 0px 0px 20px 0px rgba(201, 201, 201, 0.48);
right: 15px;
border-radius: 2px;
-webkit-overflow-scrolling: touch;
}
.h_50 {
height: 50px;
}
.popup_wp {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
-webkit-overflow-scrolling: touch;
}
.pop_close {
height: 30%;
width: 100%;
}
.pop_list_wp {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 70%;
background:
-webkit-overflow-scrolling: touch;
/* overflow-x: hidden; */
/* overflow: auto; */
}
.pop_list {
background:
height: 330px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.pop_list .item {
background:
margin-bottom: 5px;
}
.pop_list .item::after {
display: block;
height: 0;
content: " ";
visibility: hidden;
clear: both;
}
.pop_list .item .t_name {
height: 40px;
line-height: 40px;
overflow: hidden;
border-bottom: 1px solid
font-size: 12px;
color:
}
.pop_list .item .t_name .pname {
float: left;
margin-left: 15px;
}
.pop_list .item .t_name .pno {
float: right;
margin-right: 15px;
}
.pop_list .item .t_con {
padding: 10px 0;
}
.pop_list .item .t_con::after {
display: block;
content: " ";
height: 0;
visibility: hidden;
clear: both;
}
.pop_list .item .t_con .dl {
float: left;
margin-left: 15px;
}
.pop_list .item .t_con .dl .dd {
line-height: 20px;
height: 20px;
overflow: hidden;
font-size: 14px;
color:
}
.pop_list .item .t_con .dl .dd span {
font-weight: bold;
}
.pop_list .item .t_con .dl .dt {
overflow: hidden;
margin-top: 8px;
padding: 3px 0;
}
.pop_list .item .t_con .dl .dt::after {
display: block;
clear: both;
visibility: hidden;
height: 0;
content: " ";
}
.pop_list .item .t_con .dl .dt .lab {
float: left;
line-height: 30px;
font-size: 12px;
color:
}
.pop_list .item .t_con .dl .dt .inp {
float: left;
width: 90px;
border: 1px solid
border-radius: 1px;
overflow: hidden;
}
.pop_list .item .t_con .dl .dt .inp input {
display: block;
border: 0;
outline: 0;
width: 100%;
height: 26px;
font-size: 14px;
text-indent: 5px;
}
.pop_list .item .t_con .btn_r {
float: right;
margin-right: 15px;
width: 90px;
height: 30px;
background:
line-height: 30px;
text-align: center;
margin-top: 28px;
border-radius: 3px;
font-size: 14px;
color:
}
.pop_list .item .t_con .btn_r:active {
opacity: 0.3;
}
.pop_list_wp .add_date_btn {
width: 100%;
position: absolute;
height: 50px;
top: 100%;
margin-top: -50px;
left: 0;
background:
font-size: 16px;
color:
text-align: center;
line-height: 50px;
box-shadow: 0px -5px 18px 0px rgba(161, 161, 161, 0.5);
display: flex;
}
.pop_list_wp .add_date_btn .item {
flex: 1;
}
.pop_list_wp .add_date_btn .item.active {
background:
}
.pd_left_bar {
float: left;
height: 530px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background:
padding-bottom: 40px;
}
.pd_left_bar.active {
position: absolute;
}
.mainpast {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
background:
}
.mainpast.active {
height: 200px;
overflow: hidden;
}
.entry {
position: relative;
height: 100%;
/* background:
}
.h_40 {
height: 40px;
}
.home_top {
width: 100%;
height: 40px;
background:
text-align: center;
line-height: 40px;
text-indent: -10px;
color: rgba(255, 255, 255, 1);
position: absolute;
top: 0;
left: 0;
}
.home_tab {
width: 100%;
height: 40px;
text-align: center;
color: rgba(255, 255, 255, 1);
line-height: 40px;
font-size: 17px;
position: relative;
overflow: hidden;
}
.home_top.active {
position: absolute;
}
.home_top .xla_s {
right: 10px;
z-index: 2;
top: 35px;
position: absolute;
width: 111px;
height: 85px;
background:
font-size: 14px;
color:
border-radius: 2px;
box-shadow: 0px 0px 10px 0px rgba(201, 201, 201, 0.48);
}
.home_top .alt {
position: absolute;
top: -17px;
right: 3px;
margin-left: -10px;
width: 20px;
height: 20px;
z-index: 3;
}
.home_top .alt::before {
position: absolute;
bottom: 0px;
left: 0px;
content: '';
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(0, 0, 0, .1);
}
.home_top .alt::after {
content: '';
position: absolute;
bottom: 0px;
left: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid
}
.home_top .xla_s .item {
color:
}
.home_top .xla_s .item .icon {
width: 20px;
height: 20px;
float: left;
margin-top: 10px;
margin-left: 10px;
}
.home_top .xla_s .item .icon img {
display: block;
width: 20px;
height: 20px;
}
.home_tab .back {
float: left;
padding: 10px 10px 0;
width: 8px;
height: 20px;
}
.home_tab .back img {
display: block;
width: 10px;
height: 20px;
}
.home_tab .text {
float: left;
margin-left: 35%;
}
.home_tab .switch_q {
display: block;
float: right;
text-align: right;
font-size: 20px;
padding-right: 15px;
padding-top: 10px;
font-size: 12px;
line-height: 22px;
}
.home_tab .switch_q img {
display: block;
width: 20px;
height: 20px;
float: left;
margin-right: 12px;
}
.home_tab .submit {
width: 40px;
text-align: center;
font-size: 14px;
display: block;
float: right;
line-height: 45px;
overflow: hidden;
}
.van-sidebar-item {
padding: 15px 10px;
font-size: 14px;
}
.van-sidebar-item--select {
border-color:
color:
}
.tab_bar_item {
width: 265px;
margin: 10px auto;
overflow: hidden;
display: flex;
border-radius: 3px;
background: seagreen;
}
.tab_bar_item .item {
flex: 1;
width: 263px;
height: 34px;
border: 1px solid
background:
font-size: 14px;
color:
text-align: center;
line-height: 34px;
}
.tab_bar_item .item.active {
border: 1px solid
background:
color:
}
.van-list {
background:
}
.p_list {
width: 100%;
overflow: hidden;
background:
margin-bottom: 10px;
}
.p_list .item {
padding: 10px 0;
margin: 0 10px;
border-bottom: 1px solid
}
.p_list::after {
display: block;
content: " ";
height: 0;
visibility: hidden;
clear: both;
}
.p_list .item::after {
display: block;
content: " ";
height: 0;
visibility: hidden;
clear: both;
}
.p_list .no_figure {
float: left;
width: 40px;
height: 40px;
background:
}
.p_list .no_figure img {
display: block;
width: 40px;
height: 40px;
}
.p_list .no_dl {
float: left;
max-width: 210px;
margin-left: 10px;
}
.p_list .no_dl .name {
line-height: 20px;
color:
font-size: 14px;
}
.p_list .no_dl .scan {
margin-top: 5px;
line-height: 15px;
color:
font-size: 11px;
}
.p_list .yes_num {
float: right;
line-height: 40px;
font-size: 12px;
color:
}
.van-dialog__message--has-title {
color:
}
/* 加载动画效果 */
.show_loading{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
}
.moreloading{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
}
.load1 {
margin: 100px auto;
width: 50px;
height: 60px;
text-align: center;
font-size: 10px;
}
.load1 > div {
background-color:
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.load1 .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.load1 .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.load1 .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.load1 .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
/* load6 */
.load6 {
position: absolute;
bottom: 70px;
width: 150px;
text-align: center;
}
.load6 > div {
width: 30px;
height: 30px;
background-color:
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.load6 .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.load6 .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>