diff --git a/src/components/picker/datepicker.css.ts b/src/components/picker/datepicker.css.ts
index 035d644..1dfa8aa 100644
--- a/src/components/picker/datepicker.css.ts
+++ b/src/components/picker/datepicker.css.ts
@@ -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;
+  }
 
-`
\ No newline at end of file
+  /**图标样式 */
+  .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;
+  }
+`
diff --git a/src/components/picker/datepicker.ts b/src/components/picker/datepicker.ts
index c6dd075..dfb2081 100644
--- a/src/components/picker/datepicker.ts
+++ b/src/components/picker/datepicker.ts
@@ -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) {