picker显示行数切换为3行，样式修改
This commit is contained in:
yajun
parent
f6f3d8e750
commit
5732906583
|
|
@ -1,416 +1,486 @@
|
|||
import { css } from "lit";
|
||||
import {css} from 'lit'
|
||||
|
||||
export default css`
|
||||
.p-scroll{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: -apple-system,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
font-size: 14px;
|
||||
z-index: 9;
|
||||
}
|
||||
.p-select-mask{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
background: rgba(0,0,0,.7);
|
||||
-webkit-animation: p-scroll-fade-in .3s ease both;
|
||||
}
|
||||
.p-scroll.hide .p-select-mask{
|
||||
-webkit-animation: p-scroll-fade-out .3s ease both;
|
||||
}
|
||||
.p-select-wrap{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
}
|
||||
.p-select-main{
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-direction: column;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
box-shadow: 0 -5px 10px rgba(0,0,0,.1);
|
||||
-webkit-animation: p-scroll-in .3s ease both;
|
||||
}
|
||||
.p-scroll.hide .p-select-main{
|
||||
-webkit-animation: p-scroll-out .3s ease both;
|
||||
}
|
||||
@-webkit-keyframes p-scroll-in {
|
||||
0%{ -webkit-transform: translate3d(0,100%,0);}
|
||||
100%{ -webkit-transform: translate3d(0,0,0);}
|
||||
}
|
||||
@-webkit-keyframes p-scroll-out {
|
||||
0%{ -webkit-transform: translate3d(0,0,0);}
|
||||
100%{ -webkit-transform: translate3d(0,100%,0);}
|
||||
}
|
||||
@-webkit-keyframes p-scroll-fade-in {
|
||||
0%{ opacity: 0;}
|
||||
100%{ opacity: 1;}
|
||||
}
|
||||
@-webkit-keyframes p-scroll-fade-out {
|
||||
0%{ opacity: 1;}
|
||||
100%{ opacity: 0;}
|
||||
}
|
||||
.p-select-head{
|
||||
position: relative;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-justify-content: space-between;
|
||||
background: #f2f2f2;
|
||||
z-index: 5;
|
||||
}
|
||||
.p-select-head:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
-webkit-transform: scaleY(.5);
|
||||
background-color: #d5d5d6;
|
||||
}
|
||||
.p-select-title{
|
||||
-webkit-flex: 1;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
.p-select-head a{
|
||||
display: block;
|
||||
padding: 0 15px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
color: #007aff;
|
||||
}
|
||||
.p-select-foot{
|
||||
position: relative;
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: center;
|
||||
background-color: #fff;
|
||||
}
|
||||
.p-select-foot:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #d5d5d6;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
}
|
||||
.p-select-foot a{
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
color: #007aff;
|
||||
-webkit-flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.p-select-foot a:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: #d5d5d6;
|
||||
-webkit-transform: scaleX(0.5);
|
||||
}
|
||||
.p-select-foot a:last-child:before{
|
||||
display: none;
|
||||
}
|
||||
.p-select-body{
|
||||
position: relative;
|
||||
margin: 20px auto;
|
||||
width: 100%;
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.p-select-body ul{
|
||||
list-style-type: none;
|
||||
}
|
||||
.p-select-item {
|
||||
position: relative;
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: center;
|
||||
height: 170px;
|
||||
text-align: center;
|
||||
/* overflow: hidden; */
|
||||
}
|
||||
.p-select-col{
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.p-select-ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
.p-select-list,
|
||||
.p-select-wheel,
|
||||
.p-select-line{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 34px;
|
||||
margin-top: -17px;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: all .3s;
|
||||
}
|
||||
.p-select-wheel {
|
||||
padding: 0;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
height: 34px;
|
||||
z-index: 1;
|
||||
/* 滚轮被选项透明化，防止遮挡 */
|
||||
.hasSelected {
|
||||
opacity: 0;
|
||||
}
|
||||
.p-scroll {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
font-size: 14px;
|
||||
z-index: 9;
|
||||
}
|
||||
.p-select-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
-webkit-animation: p-scroll-fade-in 0.3s ease both;
|
||||
}
|
||||
.p-scroll.hide .p-select-mask {
|
||||
-webkit-animation: p-scroll-fade-out 0.3s ease both;
|
||||
}
|
||||
.p-select-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
}
|
||||
.p-select-main {
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-direction: column;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
/*background: #fff;*/
|
||||
box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
|
||||
-webkit-animation: p-scroll-in 0.3s ease both;
|
||||
/**样式修改 */
|
||||
background: linear-gradient(
|
||||
134.78deg,
|
||||
#f7f5f7 2.34%,
|
||||
#fafafa 34.11%,
|
||||
#e1e4f2 100%
|
||||
);
|
||||
}
|
||||
.p-scroll.hide .p-select-main {
|
||||
-webkit-animation: p-scroll-out 0.3s ease both;
|
||||
}
|
||||
@-webkit-keyframes p-scroll-in {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes p-scroll-out {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes p-scroll-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes p-scroll-fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.p-select-head {
|
||||
position: relative;
|
||||
/**height: 45px;*/
|
||||
line-height: 45px;
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-justify-content: space-between;
|
||||
/*background: #f2f2f2;*/
|
||||
z-index: 5;
|
||||
/**修改 */
|
||||
height: 106px;
|
||||
top: 22px;
|
||||
}
|
||||
.p-select-head:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
|
||||
}
|
||||
.p-select-list{
|
||||
position: relative;
|
||||
top: 68px;
|
||||
margin-top: 0;
|
||||
z-index: 45;
|
||||
}
|
||||
.p-select-line {
|
||||
height: 34px;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.p-select-line:before,
|
||||
.p-select-line:after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
-webkit-transform: scaleY(.5);
|
||||
background: #a5a5a5;
|
||||
}
|
||||
.p-select-line:after{
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
.p-select-label{
|
||||
margin: 0 -5px;
|
||||
min-width: 10px;
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
z-index: 100;
|
||||
color: #666;
|
||||
}
|
||||
.p-select-label span{
|
||||
display: block;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
font-size: 22px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
z-index: 50;
|
||||
}
|
||||
}
|
||||
.p-select-title {
|
||||
-webkit-flex: 1;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
.p-select-head a {
|
||||
display: block;
|
||||
padding: 0 15px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
color: #007aff;
|
||||
}
|
||||
.p-select-foot {
|
||||
position: relative;
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: center;
|
||||
background-color: #fff;
|
||||
}
|
||||
.p-select-foot:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #d5d5d6;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
}
|
||||
.p-select-foot a {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
color: #007aff;
|
||||
-webkit-flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.p-select-foot a:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: #d5d5d6;
|
||||
-webkit-transform: scaleX(0.5);
|
||||
}
|
||||
.p-select-foot a:last-child:before {
|
||||
display: none;
|
||||
}
|
||||
.p-select-body {
|
||||
position: relative;
|
||||
margin: 20px auto;
|
||||
width: 100%;
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.p-select-body ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
.p-select-item {
|
||||
position: relative;
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: center;
|
||||
height: 372px;
|
||||
text-align: center;
|
||||
/* overflow: hidden; */
|
||||
-webkit-flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
.p-select-col {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.p-select-ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
.p-select-list,
|
||||
.p-select-wheel,
|
||||
.p-select-line {
|
||||
position: absolute;
|
||||
/* top: 50%; */
|
||||
top: 124px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 124px;
|
||||
/* margin-top: -17px; */
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
.p-select-wheel {
|
||||
padding: 0;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
height: 124px;
|
||||
z-index: 1;
|
||||
margin: 0px;
|
||||
}
|
||||
.p-select-list {
|
||||
position: relative;
|
||||
top: 124px;
|
||||
margin-top: 0;
|
||||
z-index: 45;
|
||||
}
|
||||
.p-select-line {
|
||||
height: 124px;
|
||||
/* z-index: 100; */
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient( 134.78deg, #f7f5f7 2.34%, #fafafa 34.11%, #e1e4f2 100% );
|
||||
}
|
||||
.p-select-line:before,
|
||||
.p-select-line:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
background: #a5a5a5;
|
||||
}
|
||||
.p-select-line:after {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
.p-select-label {
|
||||
margin: 0 -5px;
|
||||
min-width: 10px;
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
z-index: 100;
|
||||
color: #666;
|
||||
}
|
||||
.p-select-label span {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
font-size: 22px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.p-select-ul>li,
|
||||
.p-select-wheel>li{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
line-height: 34px;
|
||||
font-size: 21px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
.p-select-ul>li{
|
||||
color: #666;
|
||||
font-size: 22px;
|
||||
}
|
||||
.p-select-wheel>li {
|
||||
-webkit-backface-visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
color: #999;
|
||||
}
|
||||
.p-select-wheel>li:active{
|
||||
/* opacity: .7;*/
|
||||
}
|
||||
.p-select-wheel>li.visible{
|
||||
display: list-item;
|
||||
}
|
||||
.p-select-time-split-1{
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 15px;
|
||||
margin: 0 15px;
|
||||
width: 1px;
|
||||
height: 160px;
|
||||
-webkit-transform: scaleX(.7) translateZ(200px);
|
||||
background: -webkit-linear-gradient(90deg,#fff,#ccc 15%,#ccc 85%,#fff);
|
||||
}
|
||||
/* 选项字体大小及选项栏高度 */
|
||||
.p-select-ul > li,
|
||||
.p-select-wheel > li {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
line-height: 124px;
|
||||
font-size: 28px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
.p-select-ul > li {
|
||||
color: #666;
|
||||
font-size: 36px;
|
||||
}
|
||||
.p-select-wheel > li {
|
||||
-webkit-backface-visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
color: rgba(38, 38, 38, 0.45);
|
||||
}
|
||||
.p-select-wheel > li:active {
|
||||
/* opacity: .7;*/
|
||||
}
|
||||
.p-select-wheel > li.visible {
|
||||
display: list-item;
|
||||
}
|
||||
.p-select-time-split-1 {
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 15px;
|
||||
margin: 0 15px;
|
||||
width: 1px;
|
||||
height: 160px;
|
||||
-webkit-transform: scaleX(0.7) translateZ(200px);
|
||||
background: -webkit-linear-gradient(90deg, #fff, #ccc 15%, #ccc 85%, #fff);
|
||||
}
|
||||
|
||||
/*is3d*/
|
||||
.p-select-wrap.p-3d .p-select-body{
|
||||
-webkit-perspective: 1200;
|
||||
}
|
||||
.p-select-wrap.p-3d .p-select-list{
|
||||
height: 34px;
|
||||
overflow:hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
.p-select-wrap.p-3d .p-select-ul>li,
|
||||
.p-select-wrap.p-3d .p-select-label{
|
||||
color: #2a2b2c;
|
||||
}
|
||||
.p-select-wrap.p-3d .p-select-body:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
bottom: -15px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: -webkit-linear-gradient(#fff,rgba(255,255,255,0) 52%,rgba(2555,255,255,0) 48%,#fff);
|
||||
pointer-events: none;
|
||||
-webkit-transform: translate3d(0,0,120px);
|
||||
z-index: 5;
|
||||
}
|
||||
.p-select-wrap.p-3d .p-select-line:before{
|
||||
top: 1px;
|
||||
}
|
||||
.p-select-wrap.p-3d .p-select-line:after{
|
||||
bottom: 1px;
|
||||
}
|
||||
/*is3d*/
|
||||
.p-select-wrap.p-3d .p-select-body {
|
||||
-webkit-perspective: 1200;
|
||||
}
|
||||
.p-select-wrap.p-3d .p-select-list {
|
||||
height: 124px;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
}
|
||||
/* 选项栏颜色 */
|
||||
.p-select-wrap.p-3d .p-select-ul > li,
|
||||
.p-select-wrap.p-3d .p-select-label {
|
||||
color: #1d98f0;
|
||||
}
|
||||
.p-select-wrap.p-3d .p-select-body:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
bottom: -15px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
pointer-events: none;
|
||||
-webkit-transform: translate3d(0, 0, 120px);
|
||||
z-index: 5;
|
||||
}
|
||||
.p-select-wrap.p-3d .p-select-line:before {
|
||||
top: 1px;
|
||||
}
|
||||
.p-select-wrap.p-3d .p-select-line:after {
|
||||
bottom: 1px;
|
||||
}
|
||||
|
||||
.p-select-wrap.dark .p-select-main,
|
||||
.p-select-wrap.dark .p-select-body{
|
||||
background-color: #080808;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-body:before{
|
||||
background: -webkit-linear-gradient(#080808,rgba(8,8,8,0) 52%,rgba(8,8,8,0) 48%,#080808);
|
||||
}
|
||||
.p-select-wrap.dark .p-select-head{
|
||||
background-color: #1c1c1c;
|
||||
border-bottom: none;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-head:before{
|
||||
background-color: transparent;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-head a{
|
||||
color: #ff8400;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-list,
|
||||
.p-select-wrap.dark .p-select-ul>li,
|
||||
.p-select-wrap.dark .p-select-wheel>li{
|
||||
background-color: #080808;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-line:before,
|
||||
.p-select-wrap.dark .p-select-line:after{
|
||||
background-color: #444;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-time-split-1{
|
||||
background: -webkit-linear-gradient(90deg,transparent,#333 15%,#333 85%,transparent);
|
||||
}
|
||||
.p-select-wrap.dark .p-select-title,
|
||||
.p-select-wrap.dark .p-select-label,
|
||||
.p-select-wrap.dark .p-select-ul>li{
|
||||
color: #fff;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-foot{
|
||||
border-top: none;
|
||||
background-color: #444;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-foot a{
|
||||
color: #ff8400;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-foot:before,
|
||||
.p-select-wrap.dark .p-select-foot a:before{
|
||||
background-color: #444;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-main,
|
||||
.p-select-wrap.dark .p-select-body {
|
||||
background-color: #080808;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-body:before {
|
||||
background: -webkit-linear-gradient(
|
||||
#080808,
|
||||
rgba(8, 8, 8, 0) 52%,
|
||||
rgba(8, 8, 8, 0) 48%,
|
||||
#080808
|
||||
);
|
||||
}
|
||||
.p-select-wrap.dark .p-select-head {
|
||||
background-color: #1c1c1c;
|
||||
border-bottom: none;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-head:before {
|
||||
background-color: transparent;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-head a {
|
||||
color: #ff8400;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-list,
|
||||
.p-select-wrap.dark .p-select-ul > li,
|
||||
.p-select-wrap.dark .p-select-wheel > li {
|
||||
background-color: #080808;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-line:before,
|
||||
.p-select-wrap.dark .p-select-line:after {
|
||||
background-color: #444;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-time-split-1 {
|
||||
background: -webkit-linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
#333 15%,
|
||||
#333 85%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.p-select-wrap.dark .p-select-title,
|
||||
.p-select-wrap.dark .p-select-label,
|
||||
.p-select-wrap.dark .p-select-ul > li {
|
||||
color: #fff;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-foot {
|
||||
border-top: none;
|
||||
background-color: #444;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-foot a {
|
||||
color: #ff8400;
|
||||
}
|
||||
.p-select-wrap.dark .p-select-foot:before,
|
||||
.p-select-wrap.dark .p-select-foot a:before {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
/*center*/
|
||||
.p-center{
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
-webkit-transform: none;
|
||||
width: auto;
|
||||
}
|
||||
.p-center .p-select-head{
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.p-center .p-select-body{
|
||||
min-width: 300px;
|
||||
padding: 0 25px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
.p-center .p-select-body:before{
|
||||
background: -webkit-linear-gradient(#f7f7f7,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#f7f7f7);
|
||||
}
|
||||
.p-center .p-select-main{
|
||||
position: relative;
|
||||
margin: auto;
|
||||
bottom: auto;
|
||||
max-width: 400px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
-webkit-animation: p-scroll-fade-in .3s ease both;
|
||||
}
|
||||
.p-scroll.hide .p-center .p-select-main{
|
||||
-webkit-animation: p-scroll-fade-out .3s ease both;
|
||||
}
|
||||
.p-center .p-select-line{
|
||||
border-color: #ccc;
|
||||
}
|
||||
.p-center .p-select-list{
|
||||
background-color: #fff;
|
||||
}
|
||||
/*center*/
|
||||
.p-center {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
-webkit-transform: none;
|
||||
width: auto;
|
||||
}
|
||||
.p-center .p-select-body {
|
||||
min-width: 300px;
|
||||
padding: 0 25px;
|
||||
box-sizing: border-box;
|
||||
/* 样式修改 */
|
||||
top: 22px;
|
||||
height: 394px;
|
||||
}
|
||||
|
||||
.p-center .p-select-main {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
bottom: auto;
|
||||
/**max-width: 400px;*/
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
-webkit-animation: p-scroll-fade-in 0.3s ease both;
|
||||
/* 样式修改 */
|
||||
width: 620px;
|
||||
height: 522px;
|
||||
}
|
||||
.p-scroll.hide .p-center .p-select-main {
|
||||
-webkit-animation: p-scroll-fade-out 0.3s ease both;
|
||||
}
|
||||
.p-center .p-select-line {
|
||||
border-color: #ccc;
|
||||
}
|
||||
/*
|
||||
.p-center .p-select-list {
|
||||
background-color: #fff;
|
||||
}
|
||||
*/
|
||||
|
||||
/*center dark*/
|
||||
.p-center.dark .p-select-wrap.dark{
|
||||
border: none;
|
||||
}
|
||||
.p-center.dark .p-select-head{
|
||||
background-color: #000;
|
||||
}
|
||||
.p-center.dark .p-select-head:before{
|
||||
background-color: #444;
|
||||
}
|
||||
.p-center.dark .p-select-foot{
|
||||
background-color: #000;
|
||||
}
|
||||
/*center dark*/
|
||||
.p-center.dark .p-select-wrap.dark {
|
||||
border: none;
|
||||
}
|
||||
.p-center.dark .p-select-head {
|
||||
background-color: #000;
|
||||
}
|
||||
.p-center.dark .p-select-head:before {
|
||||
background-color: #444;
|
||||
}
|
||||
.p-center.dark .p-select-foot {
|
||||
background-color: #000;
|
||||
}
|
||||
span {
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 1px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
`
|
||||
/**图标样式 */
|
||||
.p-select-cancel-btn {
|
||||
border-radius: 0px;
|
||||
position: absolute;
|
||||
top: 29px;
|
||||
left: 40px;
|
||||
}
|
||||
.p-select-submit-btn {
|
||||
border-radius: 0px;
|
||||
position: absolute;
|
||||
top: 29px;
|
||||
left: 532px;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import {
|
|||
} from 'lit'
|
||||
import {customElement, property, query} from 'lit/decorators.js'
|
||||
import datepickerCss from './datepicker.css.js'
|
||||
import check from './svg/check.svg'
|
||||
import close_lm from './svg/close_lm.svg'
|
||||
|
||||
function extend(..._args: any[]) {
|
||||
let name, options, /* src, */ copy
|
||||
|
|
@ -145,7 +147,7 @@ export class PickerBase extends LitElement {
|
|||
}
|
||||
// 行数、选项栏高度、选项大小？
|
||||
public rows = 5
|
||||
public itemHeight: number = 34
|
||||
public itemHeight: number = 124
|
||||
public itemSize2d: number = 9
|
||||
public itemSize3d: number = 9
|
||||
public scrolltest: any
|
||||
|
|
@ -202,7 +204,6 @@ export class PickerBase extends LitElement {
|
|||
let idx = (i < 0 ? len + (i % len) : i) % len
|
||||
value = data[idx].value
|
||||
display = data[idx].display
|
||||
|
||||
if (is3d) {
|
||||
let deg = 0
|
||||
let show = 'list-item'
|
||||
|
|
@ -215,7 +216,25 @@ export class PickerBase extends LitElement {
|
|||
show = 'list-item'
|
||||
}
|
||||
}
|
||||
html +=
|
||||
// 通过translateZ控制显示层级
|
||||
// 对被选中项添加类名hasSelected用于控制透明度
|
||||
if(i == selectedIdx){
|
||||
html +=
|
||||
'<li data-index="' +
|
||||
i +
|
||||
'" data-val="' +
|
||||
value +
|
||||
'" style="transform:rotateX(' +
|
||||
deg +
|
||||
'deg) translateZ(' +
|
||||
(_this.itemHeight * _this.rows) / 2 +
|
||||
'px); display: ' +
|
||||
show +
|
||||
'" class="hasSelected">' +
|
||||
display +
|
||||
'</li>'
|
||||
}else {
|
||||
html +=
|
||||
'<li data-index="' +
|
||||
i +
|
||||
'" data-val="' +
|
||||
|
|
@ -229,6 +248,7 @@ export class PickerBase extends LitElement {
|
|||
'">' +
|
||||
display +
|
||||
'</li>'
|
||||
}
|
||||
} else {
|
||||
let opacity = 1
|
||||
if (!infinite) {
|
||||
|
|
@ -262,25 +282,21 @@ export class PickerBase extends LitElement {
|
|||
'">'
|
||||
html += '<div class="p-select-main">'
|
||||
html += '<div class="p-select-head">'
|
||||
if (_this.option.display != 'center') {
|
||||
html +=
|
||||
'<a href="javascript:void(0)" class="p-select-cancel-btn">取消</a>'
|
||||
}
|
||||
'<img src="'+close_lm+'" class="p-select-cancel-btn"></img>'
|
||||
if (_this.option.headTitle != '') {
|
||||
html +=
|
||||
'<div class="p-select-title">' + _this.option.headTitle + '</div>'
|
||||
}
|
||||
if (_this.option.display != 'center') {
|
||||
html +=
|
||||
'<a href="javascript:void(0)" class="p-select-submit-btn">确认</a>'
|
||||
}
|
||||
'<img src="'+check+'" class="p-select-submit-btn"></img>'
|
||||
html += '</div>'
|
||||
html += '<div class="p-select-body">'
|
||||
html +=
|
||||
'<div class="p-select-line" ' +
|
||||
(_this.option.scrollType == '3d'
|
||||
? 'style="transform: translateZ(' +
|
||||
((_this.itemHeight * _this.rows) / 2 + 4) +
|
||||
((_this.itemHeight * _this.rows) / 2 + 2) +
|
||||
'px)"'
|
||||
: '') +
|
||||
'></div>'
|
||||
|
|
@ -331,14 +347,6 @@ export class PickerBase extends LitElement {
|
|||
html += '</div>'
|
||||
}
|
||||
html += '</div>'
|
||||
if (_this.option.display == 'center') {
|
||||
html += '<div class="p-select-foot">'
|
||||
html +=
|
||||
'<a href="javascript:void(0)" class="p-select-cancel-btn">取消</a>'
|
||||
html +=
|
||||
'<a href="javascript:void(0)" class="p-select-submit-btn">确认</a>'
|
||||
html += '</div>'
|
||||
}
|
||||
html += '</div>'
|
||||
html += '<div class="p-select-mask"></div>'
|
||||
html += '</div>'
|
||||
|
|
@ -362,7 +370,7 @@ export class PickerBase extends LitElement {
|
|||
function getVal(
|
||||
pos: number,
|
||||
data: itemdate[],
|
||||
// infinite: boolean,
|
||||
infinite: boolean,
|
||||
selectedIdx: number
|
||||
) {
|
||||
let len = data.length,
|
||||
|
|
@ -382,7 +390,7 @@ export class PickerBase extends LitElement {
|
|||
return result
|
||||
}
|
||||
// item定位
|
||||
function getPosition(el:any) {
|
||||
function getPosition(el: any) {
|
||||
let style = getComputedStyle(el),
|
||||
matrix = style.transform,
|
||||
px
|
||||
|
|
@ -483,12 +491,12 @@ export class PickerBase extends LitElement {
|
|||
this.itemClick(this.opt.item2d)
|
||||
}
|
||||
}
|
||||
itemClick(itemObj:any) {
|
||||
itemClick(itemObj: any) {
|
||||
let self = this
|
||||
for (let i = 0; i < itemObj.length; i++) {
|
||||
itemObj[i].addEventListener(
|
||||
'click',
|
||||
function (e:any) {
|
||||
function (e: any) {
|
||||
self.opt.inertia = false
|
||||
let curIdx = Number(e.target.dataset.index)
|
||||
let lastIdx = _this.rs.result[self.index].dataIndex as number
|
||||
|
|
@ -499,7 +507,7 @@ export class PickerBase extends LitElement {
|
|||
)
|
||||
}
|
||||
}
|
||||
Run(interval:any, pos:any) {
|
||||
Run(interval: any, pos: any) {
|
||||
if (interval == 0) {
|
||||
this.opt.scrollEl2d.style.webkitTransition = 'none'
|
||||
if (_this.option.scrollType == '3d') {
|
||||
|
|
@ -596,7 +604,7 @@ export class PickerBase extends LitElement {
|
|||
this.opt.scrollEl2d.style.marginTop = this.opt.marginTop + 'px'
|
||||
}
|
||||
}
|
||||
touchStart(e:any) {
|
||||
touchStart(e: any) {
|
||||
if (e.type == 'touchstart') {
|
||||
this.opt.startY = e.targetTouches['0'].clientY
|
||||
} else {
|
||||
|
|
@ -605,7 +613,7 @@ export class PickerBase extends LitElement {
|
|||
}
|
||||
this.opt.startTime = new Date()
|
||||
}
|
||||
touchMove(e:any) {
|
||||
touchMove(e: any) {
|
||||
if (e.type == 'touchmove') {
|
||||
e.preventDefault()
|
||||
for (let i = 0; i < e.targetTouches.length; i++) {
|
||||
|
|
@ -636,7 +644,7 @@ export class PickerBase extends LitElement {
|
|||
this.Run(0, this.opt.distance)
|
||||
}
|
||||
}
|
||||
touchEnd(e:any) {
|
||||
touchEnd(e: any) {
|
||||
if (e.type == 'touchend') {
|
||||
this.opt.lastY = e.changedTouches['0'].clientY
|
||||
} else {
|
||||
|
|
@ -700,14 +708,14 @@ export class PickerBase extends LitElement {
|
|||
let res = getVal(
|
||||
this.opt.scrollY,
|
||||
this.opt.data,
|
||||
// this.opt.infinite,
|
||||
this.opt.infinite,
|
||||
this.opt.selectedIdx
|
||||
)
|
||||
_this.rs.result[this.index] = res
|
||||
_this.rs.scrollIdx = this.index
|
||||
_this.option.getResult(_this.rs)
|
||||
}
|
||||
cusTouch(diff:any) {
|
||||
cusTouch(diff: any) {
|
||||
let e1 = {
|
||||
clientY: 0,
|
||||
targetTouches: [{clientY: 0}],
|
||||
|
|
@ -727,7 +735,7 @@ export class PickerBase extends LitElement {
|
|||
this.touchMove(e2)
|
||||
this.touchEnd(e3)
|
||||
}
|
||||
scrollTo(val:any, interval:any) {
|
||||
scrollTo(val: any, interval: any) {
|
||||
this.wheel.selected = val
|
||||
let selectedIdx = _this.getselectedIdx(this.wheel)
|
||||
let diff = this.opt.selectedIdx - selectedIdx
|
||||
|
|
@ -735,7 +743,7 @@ export class PickerBase extends LitElement {
|
|||
this.Run(interval, this.opt.scrollY)
|
||||
this.onMove(this.opt.scrollY, true)
|
||||
}
|
||||
removeItem(valArr:any) {
|
||||
removeItem(valArr: any) {
|
||||
let data = this.opt.data,
|
||||
resultVal = _this.rs.result[this.index].value,
|
||||
// removeLen = 0,
|
||||
|
|
@ -764,7 +772,7 @@ export class PickerBase extends LitElement {
|
|||
this.opt.dataLen = data.length
|
||||
this.scrollTo(_this.rs.result[this.index].value, 0)
|
||||
}
|
||||
appendItem(valArr:any) {
|
||||
appendItem(valArr: any) {
|
||||
let data = this.opt.data
|
||||
|
||||
//去重
|
||||
|
|
@ -790,14 +798,14 @@ export class PickerBase extends LitElement {
|
|||
createEL(wheels)
|
||||
let el = _this.shadowRoot!.querySelectorAll('.p-select-item')
|
||||
for (let i = 0; i < el.length; i++) {
|
||||
//滚动事件
|
||||
//滚动栏
|
||||
let scroll = new Scroll(el[i], wheels[i], i)
|
||||
|
||||
//初始结果
|
||||
let res = getVal(
|
||||
scroll.opt.scrollY,
|
||||
scroll.opt.data,
|
||||
// scroll.opt.infinite,
|
||||
scroll.opt.infinite,
|
||||
scroll.opt.selectedIdx
|
||||
)
|
||||
_this.rs.result.push(res)
|
||||
|
|
@ -808,8 +816,8 @@ export class PickerBase extends LitElement {
|
|||
_this.option.init(_this.rs)
|
||||
|
||||
let submitBtn = _this.shadowRoot!.querySelector('.p-select-submit-btn'),
|
||||
cancelBtn = _this.shadowRoot!.querySelector('.p-select-cancel-btn'),
|
||||
mask = _this.shadowRoot!.querySelector('.p-select-mask')
|
||||
cancelBtn = _this.shadowRoot!.querySelector('.p-select-cancel-btn')
|
||||
// mask = _this.shadowRoot!.querySelector('.p-select-mask')
|
||||
submitBtn!.addEventListener(
|
||||
'click',
|
||||
function () {
|
||||
|
|
@ -842,14 +850,14 @@ export class PickerBase extends LitElement {
|
|||
},
|
||||
false
|
||||
)
|
||||
mask!.addEventListener(
|
||||
'click',
|
||||
function () {
|
||||
_this.option.cancel()
|
||||
destroy()
|
||||
},
|
||||
false
|
||||
)
|
||||
// mask!.addEventListener(
|
||||
// 'click',
|
||||
// function () {
|
||||
// _this.option.cancel()
|
||||
// destroy()
|
||||
// },
|
||||
// false
|
||||
// )
|
||||
_this.shadowRoot!.querySelector('.p-scroll')!.addEventListener(
|
||||
'touchmove',
|
||||
function (e) {
|
||||
|
|
@ -914,7 +922,7 @@ export class PickerBase extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
public addZero(num: number){
|
||||
public addZero(num: number) {
|
||||
return num < 10 ? '0' + num : String(num)
|
||||
}
|
||||
|
||||
|
|
@ -922,11 +930,11 @@ export class PickerBase extends LitElement {
|
|||
container: 'body',
|
||||
scrollType: '3d',
|
||||
background: 'light',
|
||||
showLabel: true, //显示label
|
||||
labelType: 'symbol', //symbol符号 text文字 split分割(需date和time同时存在)
|
||||
display: 'bottom',
|
||||
headResult: false,
|
||||
date: true,
|
||||
showLabel: true, //是否显示label
|
||||
labelType: 'symbol', //label样式：symbol符号 text文字 split分割(需date和time同时存在)
|
||||
display: 'center', //显示位置
|
||||
headResult: false, //头部显示结果信息
|
||||
date: false,
|
||||
time: true,
|
||||
beginYear: new Date().getFullYear() - 100,
|
||||
endYear: new Date().getFullYear() + 100,
|
||||
|
|
@ -972,13 +980,13 @@ export class PickerBase extends LitElement {
|
|||
{
|
||||
infinite: true,
|
||||
selected: this.hour,
|
||||
label: '<span>:</span>',
|
||||
label: '时',
|
||||
data: this.hourData,
|
||||
},
|
||||
{
|
||||
infinite: true,
|
||||
selected: this.minute,
|
||||
label: '',
|
||||
label: '分',
|
||||
data: this.minuteData,
|
||||
},
|
||||
]
|
||||
|
|
@ -1019,9 +1027,21 @@ export class PickerBase extends LitElement {
|
|||
}
|
||||
} else {
|
||||
if (this.opt.labelType == 'text') {
|
||||
let text = ['年', '月', '日', '时', '分', '秒']
|
||||
for (let i = 0; i < this.wheels.length; i++) {
|
||||
this.wheels[i].label = text[i]
|
||||
if (this.wheels.length == 5) {
|
||||
var text = ['年', '月', '日', '时', '分', '秒']
|
||||
for (var i = 0; i < this.wheels.length; i++) {
|
||||
this.wheels[i].label = text[i]
|
||||
}
|
||||
} else if (this.wheels.length == 3) {
|
||||
var text = ['年', '月', '日']
|
||||
for (var i = 0; i < this.wheels.length; i++) {
|
||||
this.wheels[i].label = text[i]
|
||||
}
|
||||
} else {
|
||||
var text = ['时', '分']
|
||||
for (var i = 0; i < this.wheels.length; i++) {
|
||||
this.wheels[i].label = text[i]
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.opt.labelType == 'split' && this.opt.date && this.opt.time) {
|
||||
|
|
@ -1043,9 +1063,8 @@ export class PickerBase extends LitElement {
|
|||
}
|
||||
|
||||
// 判断大小月
|
||||
public bigSmallMonth(dayObj:any, year: number, month: number) {
|
||||
let smallMonth =
|
||||
month == 4 || month == 6 || month == 9 || month == 11
|
||||
public bigSmallMonth(dayObj: any, year: number, month: number) {
|
||||
let smallMonth = month == 4 || month == 6 || month == 9 || month == 11
|
||||
dayObj.appendItem([
|
||||
{value: '29', display: '29'},
|
||||
{value: '30', display: '30'},
|
||||
|
|
@ -1063,7 +1082,7 @@ export class PickerBase extends LitElement {
|
|||
}
|
||||
|
||||
//获取结果
|
||||
public getLastVal(result:any) {
|
||||
public getLastVal(result: any) {
|
||||
if (result.length == 5) {
|
||||
this.lastValue =
|
||||
result[0].display +
|
||||
|
|
@ -1175,9 +1194,10 @@ export class PickerBase extends LitElement {
|
|||
scrollType: this.opt.scrollType,
|
||||
background: this.opt.background,
|
||||
display: this.opt.display,
|
||||
headTitle: this.opt.headResult ? 1 : '',
|
||||
// headTitle: this.opt.headResult ? 1 : '',
|
||||
headTitle: '<span>新建闹钟</span>',
|
||||
container: '.screen',
|
||||
init: (rs:any) => {
|
||||
init: (rs: any) => {
|
||||
if (this.opt.date) {
|
||||
var year = rs.result[0].value
|
||||
var month = rs.result[1].value
|
||||
|
|
@ -1185,7 +1205,7 @@ export class PickerBase extends LitElement {
|
|||
}
|
||||
this.getLastVal(rs.result)
|
||||
},
|
||||
getResult: (rs:any) => {
|
||||
getResult: (rs: any) => {
|
||||
var n1 = this.opt.date && (rs.scrollIdx == 0 || rs.scrollIdx == 1)
|
||||
;(this.year = rs.result[0].value), (this.month = rs.result[1].value)
|
||||
if (n1) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue