新增加载更多动画
parent
a7b08fcf73
commit
3401446e65
1
App.vue
1
App.vue
|
|
@ -37,6 +37,7 @@
|
|||
/* 动画样式 start */
|
||||
@import url("./commons/animate.min.css");
|
||||
/* 动画样式 end */
|
||||
@import url("./commons/loading.css");
|
||||
|
||||
page {background-color: #f4f4f4;}
|
||||
.textc{
|
||||
|
|
|
|||
|
|
@ -329,11 +329,18 @@ button:after{content: none!important;}
|
|||
.pad-s10{padding-top: 10rpx;}
|
||||
.pad-s20{padding-top: 20rpx;}
|
||||
.pad-s25{padding-top: 25rpx;}
|
||||
.pad-s28{padding-top: 28rpx;}
|
||||
.pad-s30{padding-top: 30rpx;}
|
||||
.pad-s32{padding-top: 32rpx;}
|
||||
.pad-s36{padding-top: 36rpx;}
|
||||
.pad-s40{padding-top: 40rpx;}
|
||||
.pad-s50{padding-top: 50rpx;}
|
||||
.pad-s60{padding-top: 60rpx;}
|
||||
.pad-s70{padding-top: 70rpx;}
|
||||
.pad-s80{padding-top: 80rpx;}
|
||||
.pad-s90{padding-top: 90rpx;}
|
||||
.pad-s100{padding-top: 100rpx;}
|
||||
.pad-s110{padding-top: 110rpx;}
|
||||
.pad-s120{padding-top: 120rpx;}
|
||||
.pad-s140{padding-top: 140rpx;}
|
||||
.pad-s160{padding-top: 160rpx;}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,874 @@
|
|||
.loading-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding-top: 20px;
|
||||
font-size: 30px;
|
||||
color: rgba(253, 82, 75, 1);
|
||||
vertical-align: top;
|
||||
-webkit-transition: .3s color, .3s border;
|
||||
transition: .3s color, .3s border;
|
||||
}
|
||||
/* .loading-box:hover {
|
||||
color: #d60b52;
|
||||
font-size: 0;
|
||||
padding: 0;
|
||||
border-width: 3px;
|
||||
line-height: 200px;
|
||||
}
|
||||
.loading-box:hover [class*="loader-"] {
|
||||
font-size: 70px;
|
||||
line-height: 200px;
|
||||
} */
|
||||
[class*="loader-"] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
color: inherit;
|
||||
vertical-align: middle;
|
||||
pointer-events: none;
|
||||
}
|
||||
.loader-01 {
|
||||
border: .2em dotted currentcolor;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: 1s loader-01 linear infinite;
|
||||
animation: 1s loader-01 linear infinite;
|
||||
}
|
||||
@-webkit-keyframes loader-01 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes loader-01 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.loader-02 {
|
||||
border: .2em solid transparent;
|
||||
border-left-color: currentcolor;
|
||||
border-right-color: currentcolor;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: 1s loader-02 linear infinite;
|
||||
animation: 1s loader-02 linear infinite;
|
||||
}
|
||||
@-webkit-keyframes loader-02 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes loader-02 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.loader-03 {
|
||||
border: .2em solid currentcolor;
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: 1s loader-03 linear infinite;
|
||||
animation: 1s loader-03 linear infinite;
|
||||
position: relative;
|
||||
}
|
||||
@-webkit-keyframes loader-03 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes loader-03 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.loader-04 {
|
||||
border: 1px solid currentcolor;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: 1s loader-04 linear infinite;
|
||||
animation: 1s loader-04 linear infinite;
|
||||
position: relative;
|
||||
}
|
||||
.loader-04:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: -.2em;
|
||||
left: 50%;
|
||||
border: .2em solid currentcolor;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@-webkit-keyframes loader-04 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes loader-04 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.loader-05 {
|
||||
border: .2em solid transparent;
|
||||
border-top-color: currentcolor;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: 1s loader-05 linear infinite;
|
||||
animation: 1s loader-05 linear infinite;
|
||||
position: relative;
|
||||
}
|
||||
.loader-05:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
position: absolute;
|
||||
top: -.2em;
|
||||
left: -.2em;
|
||||
border: .2em solid currentcolor;
|
||||
border-radius: 50%;
|
||||
opacity: .5;
|
||||
}
|
||||
@-webkit-keyframes loader-05 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes loader-05 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.loader-06 {
|
||||
border: .2em solid currentcolor;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: loader-06 1s ease-out infinite;
|
||||
animation: loader-06 1s ease-out infinite;
|
||||
}
|
||||
@-webkit-keyframes loader-06 {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes loader-06 {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.loader-07 {
|
||||
border: 0 solid transparent;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
.loader-07:before,
|
||||
.loader-07:after {
|
||||
content: '';
|
||||
border: .2em solid currentcolor;
|
||||
border-radius: 50%;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-animation: loader-07 1s linear infinite;
|
||||
animation: loader-07 1s linear infinite;
|
||||
opacity: 0;
|
||||
}
|
||||
.loader-07:before {
|
||||
-webkit-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
.loader-07:after {
|
||||
-webkit-animation-delay: .5s;
|
||||
animation-delay: .5s;
|
||||
}
|
||||
@-webkit-keyframes loader-07 {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes loader-07 {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.loader-08 {
|
||||
position: relative;
|
||||
}
|
||||
.loader-08:before,
|
||||
.loader-08:after {
|
||||
content: '';
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 50%;
|
||||
background-color: currentcolor;
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-animation: loader-08 2.0s infinite ease-in-out;
|
||||
animation: loader-08 2.0s infinite ease-in-out;
|
||||
}
|
||||
.loader-08:after {
|
||||
-webkit-animation-delay: -1.0s;
|
||||
animation-delay: -1.0s;
|
||||
}
|
||||
@-webkit-keyframes loader-08 {
|
||||
0%, 100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes loader-08 {
|
||||
0%, 100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.loader-09 {
|
||||
background-color: currentcolor;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: loader-09 1.0s infinite ease-in-out;
|
||||
animation: loader-09 1.0s infinite ease-in-out;
|
||||
}
|
||||
@-webkit-keyframes loader-09 {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes loader-09 {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.loader-10 {
|
||||
position: relative;
|
||||
-webkit-animation: loader-10-1 2.0s infinite linear;
|
||||
animation: loader-10-1 2.0s infinite linear;
|
||||
}
|
||||
.loader-10:before,
|
||||
.loader-10:after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: .5em solid currentcolor;
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
-webkit-animation: loader-10-2 2s infinite ease-in-out;
|
||||
animation: loader-10-2 2s infinite ease-in-out;
|
||||
}
|
||||
.loader-10:before {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
}
|
||||
.loader-10:after {
|
||||
bottom: 0;
|
||||
right: 50%;
|
||||
-webkit-animation-delay: -1s;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
@-webkit-keyframes loader-10-1 {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes loader-10-1 {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes loader-10-2 {
|
||||
0%, 100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes loader-10-2 {
|
||||
0%, 100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.loader-11 {
|
||||
background-color: currentcolor;
|
||||
-webkit-animation: loader-11 1.2s infinite ease-in-out;
|
||||
animation: loader-11 1.2s infinite ease-in-out;
|
||||
}
|
||||
@-webkit-keyframes loader-11 {
|
||||
0% {
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
}
|
||||
}
|
||||
@keyframes loader-11 {
|
||||
0% {
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
}
|
||||
}
|
||||
.loader-12 {
|
||||
position: relative;
|
||||
}
|
||||
.loader-12:before,
|
||||
.loader-12:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: currentcolor;
|
||||
left: 50%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 50%;
|
||||
box-shadow: -.5em 0 0 currentcolor;
|
||||
-webkit-animation: loader-12 1s linear infinite;
|
||||
animation: loader-12 1s linear infinite;
|
||||
}
|
||||
.loader-12:after {
|
||||
top: 50%;
|
||||
bottom: 0;
|
||||
-webkit-animation-delay: .25s;
|
||||
animation-delay: .25s;
|
||||
}
|
||||
@-webkit-keyframes loader-12 {
|
||||
0%, 100% {
|
||||
box-shadow: -.5em 0 0 transparent;
|
||||
background-color: currentcolor;
|
||||
}
|
||||
50% {
|
||||
box-shadow: -.5em 0 0 currentcolor;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
@keyframes loader-12 {
|
||||
0%, 100% {
|
||||
box-shadow: -.5em 0 0 transparent;
|
||||
background-color: currentcolor;
|
||||
}
|
||||
50% {
|
||||
box-shadow: -.5em 0 0 currentcolor;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.loader-13:before,
|
||||
.loader-13:after,
|
||||
.loader-13 {
|
||||
border-radius: 50%;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation: loader-13 1.8s infinite ease-in-out;
|
||||
animation: loader-13 1.8s infinite ease-in-out;
|
||||
}
|
||||
.loader-13 {
|
||||
color: currentcolor;
|
||||
position: relative;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
top: -1em;
|
||||
}
|
||||
.loader-13:before {
|
||||
right: 100%;
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
.loader-13:after {
|
||||
left: 100%;
|
||||
}
|
||||
.loader-13:before,
|
||||
.loader-13:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
@-webkit-keyframes loader-13 {
|
||||
0%, 80%, 100% {
|
||||
box-shadow: 0 1em 0 -1em;
|
||||
}
|
||||
40% {
|
||||
box-shadow: 0 1em 0 -.2em;
|
||||
}
|
||||
}
|
||||
@keyframes loader-13 {
|
||||
0%, 80%, 100% {
|
||||
box-shadow: 0 1em 0 -1em;
|
||||
}
|
||||
40% {
|
||||
box-shadow: 0 1em 0 -.2em;
|
||||
}
|
||||
}
|
||||
.loader-14 {
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1em 0 -.2em currentcolor;
|
||||
position: relative;
|
||||
-webkit-animation: loader-14 0.8s ease-in-out alternate infinite;
|
||||
animation: loader-14 0.8s ease-in-out alternate infinite;
|
||||
-webkit-animation-delay: 0.32s;
|
||||
animation-delay: 0.32s;
|
||||
top: -1em;
|
||||
}
|
||||
.loader-14:after,
|
||||
.loader-14:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: inherit;
|
||||
box-shadow: inherit;
|
||||
-webkit-animation: inherit;
|
||||
animation: inherit;
|
||||
}
|
||||
.loader-14:before {
|
||||
left: -1em;
|
||||
-webkit-animation-delay: 0.48s;
|
||||
animation-delay: 0.48s;
|
||||
}
|
||||
.loader-14:after {
|
||||
right: -1em;
|
||||
-webkit-animation-delay: 0.16s;
|
||||
animation-delay: 0.16s;
|
||||
}
|
||||
@-webkit-keyframes loader-14 {
|
||||
0% {
|
||||
box-shadow: 0 2em 0 -.2em currentcolor;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 1em 0 -.2em currentcolor;
|
||||
}
|
||||
}
|
||||
@keyframes loader-14 {
|
||||
0% {
|
||||
box-shadow: 0 2em 0 -.2em currentcolor;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 1em 0 -.2em currentcolor;
|
||||
}
|
||||
}
|
||||
.loader-15 {
|
||||
background: currentcolor;
|
||||
position: relative;
|
||||
-webkit-animation: loader-15 1s ease-in-out infinite;
|
||||
animation: loader-15 1s ease-in-out infinite;
|
||||
-webkit-animation-delay: 0.4s;
|
||||
animation-delay: 0.4s;
|
||||
width: .25em;
|
||||
height: .5em;
|
||||
}
|
||||
.loader-15:after,
|
||||
.loader-15:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
background: inherit;
|
||||
-webkit-animation: inherit;
|
||||
animation: inherit;
|
||||
}
|
||||
.loader-15:before {
|
||||
right: .5em;
|
||||
-webkit-animation-delay: 0.2s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.loader-15:after {
|
||||
left: .5em;
|
||||
-webkit-animation-delay: 0.6s;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
@-webkit-keyframes loader-15 {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor;
|
||||
}
|
||||
}
|
||||
@keyframes loader-15 {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor;
|
||||
}
|
||||
}
|
||||
.loader-16 {
|
||||
-webkit-transform: rotateZ(45deg);
|
||||
transform: rotateZ(45deg);
|
||||
-webkit-perspective: 1000px;
|
||||
perspective: 1000px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.loader-16:before,
|
||||
.loader-16:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: 1s spin linear infinite;
|
||||
animation: 1s spin linear infinite;
|
||||
}
|
||||
.loader-16:before {
|
||||
-webkit-transform: rotateX(70deg);
|
||||
transform: rotateX(70deg);
|
||||
}
|
||||
.loader-16:after {
|
||||
-webkit-transform: rotateY(70deg);
|
||||
transform: rotateY(70deg);
|
||||
-webkit-animation-delay: .4s;
|
||||
animation-delay: .4s;
|
||||
}
|
||||
@-webkit-keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
|
||||
transform: translate(-50%, -50%) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate(-50%, -50%) rotateZ(360deg);
|
||||
transform: translate(-50%, -50%) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
|
||||
transform: translate(-50%, -50%) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate(-50%, -50%) rotateZ(360deg);
|
||||
transform: translate(-50%, -50%) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes rotateccw {
|
||||
0% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(0deg);
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(-360deg);
|
||||
transform: translate(-50%, -50%) rotate(-360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotateccw {
|
||||
0% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(0deg);
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(-360deg);
|
||||
transform: translate(-50%, -50%) rotate(-360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
0%, 100% {
|
||||
box-shadow: .2em 0px 0 0px currentcolor;
|
||||
}
|
||||
12% {
|
||||
box-shadow: .2em .2em 0 0 currentcolor;
|
||||
}
|
||||
25% {
|
||||
box-shadow: 0 .2em 0 0px currentcolor;
|
||||
}
|
||||
37% {
|
||||
box-shadow: -.2em .2em 0 0 currentcolor;
|
||||
}
|
||||
50% {
|
||||
box-shadow: -.2em 0 0 0 currentcolor;
|
||||
}
|
||||
62% {
|
||||
box-shadow: -.2em -.2em 0 0 currentcolor;
|
||||
}
|
||||
75% {
|
||||
box-shadow: 0px -.2em 0 0 currentcolor;
|
||||
}
|
||||
87% {
|
||||
box-shadow: .2em -.2em 0 0 currentcolor;
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0%, 100% {
|
||||
box-shadow: .2em 0px 0 0px currentcolor;
|
||||
}
|
||||
12% {
|
||||
box-shadow: .2em .2em 0 0 currentcolor;
|
||||
}
|
||||
25% {
|
||||
box-shadow: 0 .2em 0 0px currentcolor;
|
||||
}
|
||||
37% {
|
||||
box-shadow: -.2em .2em 0 0 currentcolor;
|
||||
}
|
||||
50% {
|
||||
box-shadow: -.2em 0 0 0 currentcolor;
|
||||
}
|
||||
62% {
|
||||
box-shadow: -.2em -.2em 0 0 currentcolor;
|
||||
}
|
||||
75% {
|
||||
box-shadow: 0px -.2em 0 0 currentcolor;
|
||||
}
|
||||
87% {
|
||||
box-shadow: .2em -.2em 0 0 currentcolor;
|
||||
}
|
||||
}
|
||||
.loader-17 {
|
||||
position: relative;
|
||||
background-color: currentcolor;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.loader-17:after,
|
||||
.loader-17:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: .25em;
|
||||
height: .25em;
|
||||
border-radius: 50%;
|
||||
opacity: .8;
|
||||
}
|
||||
.loader-17:after {
|
||||
left: -.5em;
|
||||
top: -.25em;
|
||||
background-color: currentcolor;
|
||||
-webkit-transform-origin: .75em 1em;
|
||||
transform-origin: .75em 1em;
|
||||
-webkit-animation: loader-17 1s linear infinite;
|
||||
animation: loader-17 1s linear infinite;
|
||||
opacity: .6;
|
||||
}
|
||||
.loader-17:before {
|
||||
left: -1.25em;
|
||||
top: -.75em;
|
||||
background-color: currentcolor;
|
||||
-webkit-transform-origin: 1.5em 1em;
|
||||
transform-origin: 1.5em 1em;
|
||||
-webkit-animation: loader-17 2s linear infinite;
|
||||
animation: loader-17 2s linear infinite;
|
||||
}
|
||||
@-webkit-keyframes loader-17 {
|
||||
0% {
|
||||
-webkit-transform: rotateZ(0deg) translate3d(0, 0, 0);
|
||||
transform: rotateZ(0deg) translate3d(0, 0, 0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotateZ(360deg) translate3d(0, 0, 0);
|
||||
transform: rotateZ(360deg) translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes loader-17 {
|
||||
0% {
|
||||
-webkit-transform: rotateZ(0deg) translate3d(0, 0, 0);
|
||||
transform: rotateZ(0deg) translate3d(0, 0, 0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotateZ(360deg) translate3d(0, 0, 0);
|
||||
transform: rotateZ(360deg) translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.loader-18 {
|
||||
position: relative;
|
||||
}
|
||||
.loader-18:before,
|
||||
.loader-18:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: .1em solid transparent;
|
||||
border-bottom-color: currentcolor;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-animation: 1s loader-18 linear infinite;
|
||||
animation: 1s loader-18 linear infinite;
|
||||
}
|
||||
.loader-18:before {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.loader-18:after {
|
||||
width: .8em;
|
||||
height: .8em;
|
||||
top: .1em;
|
||||
left: .1em;
|
||||
-webkit-animation-direction: reverse;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
@-webkit-keyframes loader-18 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes loader-18 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.loader-19 {
|
||||
border-top: .2em solid currentcolor;
|
||||
border-right: .2em solid transparent;
|
||||
-webkit-animation: loader-19 1s linear infinite;
|
||||
animation: loader-19 1s linear infinite;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
}
|
||||
@-webkit-keyframes loader-19 {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes loader-19 {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
animation: scale_name 1s linear alternate infinite;
|
||||
}
|
||||
@keyframes scale_name{
|
||||
from{transform: scale(1);}
|
||||
to{transform: scale(1.2);}
|
||||
from{transform: scale(.9);}
|
||||
to{transform: scale(1);}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,12 +15,22 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mar-s60" v-if="total==dataList.length">
|
||||
<pitera textStr="—— 到底啦 ——"></pitera>
|
||||
</view>
|
||||
<view class="loading-box mar-s60" v-show="ifLoading">
|
||||
<view class="loader-16"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pitera from '@/components/nothing/pitera';
|
||||
export default {
|
||||
name:"list-one",
|
||||
components:{
|
||||
pitera
|
||||
},
|
||||
props:{
|
||||
// 是否显示标题
|
||||
ifTitle:{
|
||||
|
|
@ -47,10 +57,21 @@
|
|||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
|
||||
]
|
||||
],
|
||||
ifLoading:false,
|
||||
total:0
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
moreEv() {
|
||||
this.ifLoading = true;
|
||||
setTimeout(()=>{
|
||||
this.total = this.dataList.length;
|
||||
this.ifLoading = false;
|
||||
console.log(this.total);
|
||||
},2000)
|
||||
console.log('触底了');
|
||||
},
|
||||
// 加入购物车
|
||||
addCartEv(id) {
|
||||
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="pad-x120">
|
||||
<view class="slide-box mar-x20 animated" v-for="(item, index) in listData" :key="index" :class="item.ifExit ? 'fadeInUp' : 'fadeOutDown'" :style="{display: item.ifShow ? 'flex' : 'none'}">
|
||||
<view class="slide-box mar-x20 animated" v-for="(item, index) in listData" :key="index" :class="item.ifExit ? 'fadeIn' : 'fadeOutDown'" :style="{display: item.ifShow ? 'flex' : 'none'}">
|
||||
<view class="slide-list"
|
||||
@touchstart="touchStart($event, index)"
|
||||
@touchend="touchEnd($event, index)"
|
||||
|
|
@ -50,7 +50,11 @@
|
|||
</view>
|
||||
</view>
|
||||
<nothing-page v-if="!ifLoading && !listData.length" content="你的购物车：这也空空，那也空空(*^▽^*)"></nothing-page>
|
||||
<pitera textStr="——到底啦——"></pitera>
|
||||
<view class="" v-if="total == listData.length"></view>
|
||||
<pitera textStr="—— 到底啦 ——"></pitera>
|
||||
<view class="loading-box" v-show="ifMore">
|
||||
<view class="loader-16"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -141,6 +145,8 @@
|
|||
maxNum:20,//最大可输入数量
|
||||
minNum:1,//最小可输入数量
|
||||
ifLoading:true,
|
||||
total:0,
|
||||
ifMore:false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -149,6 +155,13 @@
|
|||
},
|
||||
methods: {
|
||||
getList(){
|
||||
console.log('触底');
|
||||
this.total = 0;
|
||||
this.ifMore = true;
|
||||
setTimeout(()=>{
|
||||
this.ifMore = false;
|
||||
this.total = this.listData.length;
|
||||
},2000)
|
||||
// for (let i = 0; i < 10; i++) {
|
||||
// this.listData.push({id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true})
|
||||
// }
|
||||
|
|
@ -398,7 +411,7 @@
|
|||
}
|
||||
.countBtn{font-size: 36rpx;width: 40rpx;height: 40rpx;background-color: #000000;color: #FFFFFF; border-radius: 10rpx;}
|
||||
.countInput{background-color: #FFFFFF;width: 80rpx;height: 40rpx!important; border-radius: 10rpx;padding: 0rpx 0;margin: 0 10rpx;}
|
||||
.cart-foot-box{position: fixed;bottom: 0;right: 0;left: 0;background-color: #FFFFFF; padding: 20rpx 20rpx;box-shadow: -6rpx 0rpx 10rpx rgba(0, 0, 0, 0);}
|
||||
.cart-foot-box{position: fixed;bottom: 0;right: 0;left: 0;background-color: #FFFFFF;z-index: 2; padding: 20rpx 20rpx;box-shadow: -6rpx 0rpx 10rpx rgba(0, 0, 0, 0);}
|
||||
.cart-submit-btn{
|
||||
|
||||
color: #FFFFFF;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<status-container :ifReturn="false" titlet="分类">
|
||||
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
|
||||
<view class="dis">
|
||||
<view>
|
||||
<view class="cate-left-box">
|
||||
<scroll-view scroll-y :style="{height: scrollHeight +'px'}" class="bacf">
|
||||
<view class="pad-x160">
|
||||
<view class="flexs clips1 pad-z20 fon24"
|
||||
|
|
@ -16,6 +16,8 @@
|
|||
<view class="pad-sx20" :style="{width: newWidth+'px'}">
|
||||
<swiper-tab-jl :list="secendCateList" v-model="activeIndex" @changeEv="clickTab" itemColor="#FFFFFF"></swiper-tab-jl>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" @scrolltolower="scrollBottomEv" :style="{height: scrollHeight +'px'}">
|
||||
<view class=" posir" style="padding-bottom: 220rpx;">
|
||||
<view class="disac bbt-d9 pad-sx30" @tap="goDetail(index)" v-for="(item,index) in dataList" :key="index">
|
||||
<image class="radius30 flexs borbot-cc" :src="item.imgsrc" mode="aspectFill" style="width: 240rpx;height: 240rpx;"></image>
|
||||
<view class="width100 disjb fc mar-z20" style="height: 240rpx;">
|
||||
|
|
@ -29,7 +31,12 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mar-s40"><pitera textStr="——到底啦——"></pitera></view>
|
||||
<view class="mar-s40" v-if="total==dataList.length"><pitera textStr="——到底啦——"></pitera></view>
|
||||
<view class="loading-box" v-show="ifLoading" style="position: absolute;left: 50%;transform: translateX(-50%);" :style="{bottom:footHeight+10+'px'}">
|
||||
<view class="loader-16"></view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -45,6 +52,7 @@
|
|||
import swiperTabJl from '@/components/swiper-tab/swiper-tab-jl.vue';
|
||||
// 底部组件
|
||||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||
import { mapState,mapGetters,mapMutations } from 'vuex'//引入mapState
|
||||
export default {
|
||||
components:{
|
||||
'foot-tab' :footTab,
|
||||
|
|
@ -56,7 +64,7 @@
|
|||
return {
|
||||
current:0,
|
||||
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
|
||||
newWidth:uni.getSystemInfoSync().windowWidth - 100,
|
||||
newWidth:uni.getSystemInfoSync().windowWidth,
|
||||
cateList:[
|
||||
{id:1,title:'推荐套装'},
|
||||
{id:1,title:'推荐套装'},
|
||||
|
|
@ -84,34 +92,47 @@
|
|||
dataList:[
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题',price:199},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
||||
],
|
||||
ifloading:false,
|
||||
flag:true
|
||||
total:0,
|
||||
flag:true,
|
||||
ifLoading:false
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
...mapState({
|
||||
footHeight: state => state.moduleA.footHeight,
|
||||
}),
|
||||
},
|
||||
onLoad(op) {
|
||||
// 获取元素宽
|
||||
const query = wx.createSelectorQuery().in(this)
|
||||
query.select('.cate-left-box').boundingClientRect((rect) => {
|
||||
this.newWidth = this.newWidth - rect.width - 20;
|
||||
}).exec()
|
||||
console.log(this.footHeight);
|
||||
this.scrollHeight = this.scrollHeight - this.footHeight;
|
||||
if(op.index) {
|
||||
this.current = op.index;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollBottomEv(e){
|
||||
if(this.flag){
|
||||
this.flag = false;
|
||||
this.ifloading = true;
|
||||
scrollBottomEv(){
|
||||
console.log('触底了');
|
||||
this.ifLoading = true;
|
||||
setTimeout(()=>{
|
||||
for (let i = 0; i < 2; i++) {
|
||||
let obj = {
|
||||
title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99
|
||||
}
|
||||
this.dataList[e].push(obj);
|
||||
}
|
||||
this.ifloading = false;
|
||||
this.flag = true;
|
||||
},1000)
|
||||
// 重新渲染组件
|
||||
this.$forceUpdate();
|
||||
}
|
||||
this.total = this.dataList.length;
|
||||
this.ifLoading = false;
|
||||
},2000)
|
||||
},
|
||||
// 一级分类选择
|
||||
chooseCate(index) {
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@
|
|||
</view>
|
||||
</view>
|
||||
<!-- 添加微信 -->
|
||||
<view class="" v-if="ifWx" :style="{top: padt+'px'}" @tap="ifWx=false" style="position: fixed;right: 0;bottom: 0;left: 0;background-color: rgba(0, 0, 0, 0.86);z-index: 4;">
|
||||
<view class="pad-s120 pad-zy50">
|
||||
<view class="addwxpop" v-if="ifWx" :style="{top: padt+'px'}" @tap="ifWx=false">
|
||||
<view class="pad-s80 pad-zy50">
|
||||
<view class="bacf pad20 disjcac" style="width: 420rpx;height: 420rpx;margin: 0 auto;">
|
||||
<image :src="imgsrc" style="width: 380rpx;height: 380rpx;" mode="aspectFill"></image>
|
||||
</view>
|
||||
|
|
@ -119,4 +119,6 @@
|
|||
<style>
|
||||
page{background-color: #f7f7f7;}
|
||||
.navigate-to-where {height: 98rpx;line-height: 98rpx;background: linear-gradient(to right, #ff3772 0%,#fd5548 100%);box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .6);}
|
||||
.addwxpop{position: fixed;right: 0;bottom: 0;left: 0;background-color: rgba(0, 0, 0, 0.86);z-index: 4;overflow: hidden;overflow-y: scroll;padding-bottom: 180rpx;}
|
||||
.addwxpop::-webkit-scrollbar{display: none;}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,12 +16,9 @@
|
|||
<gong-ge-function itemTop="40rpx" @chooseGe="chooseGe" :list="list"></gong-ge-function>
|
||||
</view>
|
||||
<view class="pad-zy20">
|
||||
<list-one :ifTitle="true"></list-one>
|
||||
<list-one ref="listhome" :ifTitle="true"></list-one>
|
||||
</view>
|
||||
<view class="mar-s60">
|
||||
<pitera textStr="——到底啦——"></pitera>
|
||||
</view>
|
||||
<customer-one></customer-one>
|
||||
<customer-one :nbottom="150"></customer-one>
|
||||
<!-- 底部tab -->
|
||||
<foot-tab></foot-tab>
|
||||
</view>
|
||||
|
|
@ -33,7 +30,6 @@
|
|||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||
import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue';
|
||||
import listOne from '@/components/list/list-one';
|
||||
import pitera from '@/components/nothing/pitera';
|
||||
import customerOne from '@/components/customer/customer-one';
|
||||
export default {
|
||||
components:{
|
||||
|
|
@ -42,7 +38,6 @@
|
|||
statusNav,
|
||||
swiperPu,
|
||||
listOne,
|
||||
pitera,
|
||||
customerOne
|
||||
},
|
||||
data() {
|
||||
|
|
@ -63,11 +58,12 @@
|
|||
],
|
||||
keyword:'',
|
||||
isplay:false,
|
||||
playTimer:null
|
||||
playTimer:null,
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
|
||||
onReachBottom(e) {
|
||||
console.log(e);
|
||||
this.$refs.listhome.moreEv();
|
||||
},
|
||||
onHide() {
|
||||
clearTimeout(this.playTimer);
|
||||
|
|
|
|||
|
|
@ -2,8 +2,46 @@
|
|||
<view>
|
||||
<status-container titlet="订单管理" :ifCustomer='false'>
|
||||
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
|
||||
<view class="bacf">
|
||||
<swiperTabSlide @scrollBottom="scrollBottomEv" :list="dataList" :ifloading="ifloading" :tagList="tagList" :tagIndex="tagIndex"></swiperTabSlide>
|
||||
<view class="bacf posir">
|
||||
<view class="posi-sticky pad-x20 pad-zy20" :style="{top: newTop +'px'}">
|
||||
<!-- <scrollTextSlide @changeEv="tabTap" :list="tagList" :activeIndex="activeIndex"></scrollTextSlide> -->
|
||||
<swiper-tab-jl :list="tagList" v-model="activeIndex" @changeEv="tabTap" itemColor="#FFFFFF"></swiper-tab-jl>
|
||||
</view>
|
||||
<swiper :style="{height: swiperHeight + 'px'}" class="fon30" style="background-color: #f4f4f4;" :current="activeIndex" @change="swiperChange">
|
||||
<swiper-item v-for="(item,index) in dataList.length" :key="index" class="pad-s30">
|
||||
<scroll-view scroll-y @scrolltolower="scrollBottomEv" style="height: 100%;">
|
||||
<!-- 列表数据 -->
|
||||
<view class="radius20 bacf pad-zy30 mar-x25 mar-zy40" @tap="goDetail" v-for="(item1,index1) in dataList[index]" :key="index1">
|
||||
<view class="disjbac bbot pad30" style="margin: 0 -30rpx;">
|
||||
<view class="">订单号：2928392832</view>
|
||||
<view class="" :style="{color: ['#f83030','#f83030','#f83030','#a0a0a0','#a0a0a0'][0]}">{{['已下单','制作中','已发货','已完成','已取消'][0]}}</view>
|
||||
</view>
|
||||
<view class="disjb borbot pad-sx30" v-for="(item2,index2) in 2" :key="index2">
|
||||
<image class="mar-y30 flexs radius40" src="https://s6.jpg.cm/2022/05/06/Lx4T45.jpg" mode="" style="width: 210rpx;height: 210rpx;"></image>
|
||||
<view class="width100 disjb fc" style="height: 210rpx;">
|
||||
<view class="clips2 fon24">{{item1.title}}</view>
|
||||
<view class="">
|
||||
<view class="fon24 mar-x30" style="color: #8c8c9b;">单位：{{item1.title}}</view>
|
||||
<view class="disjbac ">
|
||||
<view class="textc bold">￥{{$toolAll.tools.changeNum(item1.price)}}</view>
|
||||
<view class="fon24" style="color: #8c8c9b;">x1</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="disjbac tbot pad30" style="margin: 0 -30rpx;">
|
||||
<view class="bold" style="color: #f83030;">合计：￥2390.00</view>
|
||||
<!-- <view class="btn" @tap.stop="cancleEv">取消订单</view> -->
|
||||
<view class="btn csbtn" @tap.stop="buyEv">再次购买</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pad-sx40" v-if="total==dataList.length"><pitera textStr="—— 到底啦 ——"></pitera></view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="loading-box" v-show="ifLoading" style="position: absolute;bottom: 20rpx; left: 50%;transform: translateX(-50%);">
|
||||
<view class="loader-16"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
|
|
@ -11,13 +49,15 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import swiperTabSlide from '@/components/swiper-tab/swiper-tab-slide.vue';
|
||||
// 底部组件
|
||||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||
import swiperTabJl from '@/components/swiper-tab/swiper-tab-jl.vue';
|
||||
import pitera from '@/components/nothing/pitera';
|
||||
export default {
|
||||
components:{
|
||||
'foot-tab' :footTab,
|
||||
swiperTabSlide
|
||||
swiperTabJl,
|
||||
pitera
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -29,7 +69,7 @@
|
|||
{title:'已完成'},
|
||||
{title:'已取消'},
|
||||
],
|
||||
tagIndex:0,
|
||||
activeIndex:0,
|
||||
dataList:[
|
||||
[
|
||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||
|
|
@ -62,38 +102,72 @@
|
|||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||
],
|
||||
],
|
||||
ifloading:false,
|
||||
flag:true
|
||||
flag:true,
|
||||
swiperHeight:uni.getSystemInfoSync().windowHeight,
|
||||
newTop:uni.getSystemInfoSync().statusBarHeight + 50,
|
||||
ifLoading:false,
|
||||
total:0
|
||||
}
|
||||
},
|
||||
onLoad(op) {
|
||||
const query = wx.createSelectorQuery().in(this)
|
||||
query.select('.posi-sticky').boundingClientRect((rect) => {
|
||||
this.swiperHeight = this.swiperHeight - this.newTop - rect.height;
|
||||
}).exec()
|
||||
if(op.index) {
|
||||
this.tagIndex = op.index;
|
||||
this.activeIndex = op.index;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollBottomEv(e){
|
||||
if(this.flag){
|
||||
this.flag = false;
|
||||
this.ifloading = true;
|
||||
tabTap(e) {
|
||||
this.activeIndex = e;
|
||||
},
|
||||
swiperChange(e) {
|
||||
this.activeIndex = e.detail.current;
|
||||
},
|
||||
scrollBottomEv(e) {
|
||||
this.ifLoading = true;
|
||||
this.total = 0;
|
||||
setTimeout(()=>{
|
||||
for (let i = 0; i < 2; i++) {
|
||||
let obj = {
|
||||
title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99
|
||||
}
|
||||
this.dataList[e].push(obj);
|
||||
}
|
||||
this.ifloading = false;
|
||||
this.flag = true;
|
||||
},1000)
|
||||
// 重新渲染组件
|
||||
this.$forceUpdate();
|
||||
}
|
||||
this.ifLoading = false;
|
||||
this.total = this.dataList.length;
|
||||
},2000)
|
||||
},
|
||||
// 去详情
|
||||
goDetail(){
|
||||
uni.navigateTo({
|
||||
url:'/pagesB/order-detail/order-detail'
|
||||
})
|
||||
},
|
||||
// 取消订单
|
||||
cancleEv(){
|
||||
console.log('取消订单');
|
||||
},
|
||||
// 再次购买
|
||||
buyEv(){
|
||||
uni.navigateTo({
|
||||
url:'/pagesB/settlement/settlement'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.btn{
|
||||
width: 150rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
color: #8c8c9b;
|
||||
border: 2rpx solid #d3d3d3;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.csbtn{
|
||||
border: none;
|
||||
background: linear-gradient(to right,#ff3772 0%,#fd5549 100%);
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .3);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,10 +9,7 @@
|
|||
</view>
|
||||
<view class="fon30 bold" v-if="keyword && ifResult">结果：{{keyword}}<text v-if="num" class="textc">（{{num}}）</text></view>
|
||||
</view>
|
||||
<list-one></list-one>
|
||||
<view class="mar-s60">
|
||||
<pitera textStr="——到底啦——"></pitera>
|
||||
</view>
|
||||
<list-one ref="list"></list-one>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
|
|
@ -29,11 +26,15 @@
|
|||
data() {
|
||||
return {
|
||||
padt:uni.getSystemInfoSync().statusBarHeight + 50,
|
||||
windowHeigh:uni.getSystemInfoSync().windowHeight,
|
||||
keyword:'',
|
||||
num:11,
|
||||
ifResult:true
|
||||
}
|
||||
},
|
||||
onReachBottom(e) {
|
||||
this.$refs.list.moreEv();
|
||||
},
|
||||
onLoad(op) {
|
||||
if(op.keyword) this.keyword = op.keyword;
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue