Merge branch 'master' into star-animation

2022-11-03 15:42:03 +08:00 · 2022-11-03 15:42:03 +08:00 · 71237c1bbf
parent 55fe9599e5 8860833c0d
commit 71237c1bbf
22 changed files with 1182 additions and 300 deletions
--- a/src/components/clock/clock-style.ts
+++ b/src/components/clock/clock-style.ts
@ -1,5 +1,56 @@
 import {css, CSSResult} from 'lit'
 export const sharedStyles: CSSResult = css`
+   @media (prefers-color-scheme: light) {
+    :host{
+       /* 商务/组件浅/ 表盘渐变-毛玻璃 */
+       --back-clock-border: radial-gradient(
+        rgba(230, 225, 225, 0.85),
+        rgba(232, 246, 255, 1),
+        rgba(204, 211, 219, 0.85)
+      );
+      --back-clock-case: linear-gradient(
+        145.7deg,
+        rgba(179, 193, 242, 0.8) 16.24%,
+        rgba(122, 130, 161, 0.8) 94.91%
+      );
+     --back-clock-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
+     --back-clock-backdrop-filter:blur(20px);
+    }
+    .star-clock-hour-hand {
+      background: url('./src/components/clock/svg/light_hour.svg') no-repeat;
+    }
+    .star-clock-minute-hand {
+      background: url('./src/components/clock/svg/light_minute.svg') no-repeat;
+    }
+    .star-clock-second-hand {
+      background: url('./src/components/clock/svg/second.svg') no-repeat;
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    :host{
+      /* 商务/组件深/ 表盘渐变-毛玻璃 */
+      --back-clock-border: linear-gradient(
+        rgba(217, 195, 147, 1),
+        rgba(217, 201, 165, 0.45)
+      );
+      --back-clock-case: radial-gradient(
+        46.11% 46.11% at 29.45% 23.09%,
+        rgba(64, 70, 89, 0.8) 0%,
+        rgba(36, 40, 56, 0.8) 100%
+      );
+      --back-clock-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
+      --back-clock-backdrop-filter:blur(20.3871px);
+    }
+    .star-clock-hour-hand {
+      background: url('./src/components/clock/svg/dark_hour.svg') no-repeat;
+    }
+    .star-clock-minute-hand {
+      background: url('./src/components/clock/svg/dark_minute.svg') no-repeat;
+    }
+    .star-clock-second-hand {
+      background: url('./src/components/clock/svg/second.svg') no-repeat;
+    }
+  }
  * {
    margin: 0;
    padding: 0;
@ -24,10 +75,7 @@ export const sharedStyles: CSSResult = css`
    align-items: center;
    border-radius: 50%;
    flex-direction: column;
-    background: linear-gradient(
-      rgba(217, 195, 147, 1),
-      rgba(217, 201, 165, 0.45)
-    );
+    background: var(--back-clock-border);
  }
  .star-clock-case {
    position: relative;
@ -38,13 +86,9 @@ export const sharedStyles: CSSResult = css`
    display: flex;
    justify-content: center;
    align-items: center;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
-    backdrop-filter: blur(20.3871px);
-    background: radial-gradient(
-      46.11% 46.11% at 29.45% 23.09%,
-      rgba(64, 70, 89, 0.8) 0%,
-      rgba(36, 40, 56, 0.8) 100%
-    );
+    box-shadow: var(--back-clock-box-shadow);
+    backdrop-filter: var(--back-clock-backdrop-filter);
+    background: var(--back-clock-case);
  }
  .star-clock-shaft {
    position: absolute;
@ -87,7 +131,8 @@ export const sharedStyles: CSSResult = css`
    position: absolute;
    bottom: 50%;
    left: 50%;
-    height: 25%;
+    width: 12px;
+    height: 90px;
    transform-origin: 0 100%;
    display: inline-block;
    transform: rotate(var(--rotateHour)) translate(-50%, 0);
@ -96,7 +141,8 @@ export const sharedStyles: CSSResult = css`
    position: absolute;
    bottom: 50%;
    left: 50%;
-    height: 35%;
+    width: 12px;
+    height: 132px;
    transform-origin: 0 100%;
    display: inline-block;
    transform: rotate(var(--rotateMinute)) translate(-50%, 0);
@ -106,39 +152,14 @@ export const sharedStyles: CSSResult = css`
    bottom: calc(50% - 17px);
    left: 50%;
    display: inline-block;
-    height: 43%;
+    width: 4px;
+    height: 160px;
    transform-origin: 0 calc(100% - 17px);
    transform: rotate(var(--rotateSecond)) translate(-50%, 0);
  }
-  /*有表盘浅色模式*/
-  .star-clock-main.light {
-    background: radial-gradient(
-      rgba(230, 225, 225, 0.85),
-      rgba(232, 246, 255, 1),
-      rgba(204, 211, 219, 0.85)
-    );
-  }
-  .light .star-clock-case {
-    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
-    backdrop-filter: blur(20px);
-    background: linear-gradient(
-      145.7deg,
-      rgba(179, 193, 242, 0.8) 16.24%,
-      rgba(122, 130, 161, 0.8) 94.91%
-    );
-  }
-  .light .star-clock-case .star-clock-point {
-    background: linear-gradient(
-      90deg,
-      rgba(245, 245, 245, 0.95) 0%,
-      rgba(245, 245, 245, 0.01) 100%
-    );
-  }
  /*无表盘深色模式*/
  .star-clock-case-transparent {
    display: inline-block;
-    /* width: var(--autoHeight);
-    height: var(--autoHeight); */
    width: var(--autoWidth);
    min-width: var(--autoWidth);
    height: var(--autoWidth);
@ -210,7 +231,4 @@ export const sharedStyles: CSSResult = css`
  .star-clock-case-transparent.light .star-clock-minute-hand-transparent {
    background: #ffffff;
  }
-  .star-clock-case-transparent.light .star-clock-second-hand-transparent {
-    background: #f43737;
-  }
 `
--- a/src/components/clock/clock.ts
+++ b/src/components/clock/clock.ts
@ -1,11 +1,6 @@
 import {html, LitElement, CSSResultArray, nothing} from 'lit'
 import {customElement, property, query, state} from 'lit/decorators.js'
 import {sharedStyles} from './clock-style'
-import darkHour from './svg/dark_hour.svg'
-import darkMinute from './svg/dark_minute.svg'
-import lightHour from './svg/light_hour.svg'
-import lightMinute from './svg/light_minute.svg'
-import second from './svg/second.svg'

 export enum ClockType {
  Transparent = 'transparent',
@ -17,7 +12,7 @@ export class StarClock extends LitElement {
    return [sharedStyles]
  }
  @property({type: String}) type = '' //时钟样式类型
-  @property({type: String}) mode = 'dark' //支持深色模式和浅色模式,默认背景是深色模式
+  @property({type: String}) mode = '' //支持深色模式和浅色模式,默认背景是深色模式
  @state() rotateHour = 0
  @state() rotateMinute = 0
  @state() rotateSecond = 0
@ -57,7 +52,7 @@ export class StarClock extends LitElement {
  getDialeClock() {
    return html`
      <div class="star-clock">
-        <div class="star-clock-main  ${this.mode}">
+        <div class="star-clock-main">
          <div class="star-clock-case">
            <div class="star-clock-shaft"></div>
            ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
@ -74,15 +69,9 @@ export class StarClock extends LitElement {
                </span>
              `
            )}
-            <img
-              class="star-clock-hour-hand"
-              src=${this.modeChange(this.mode).hour}
-            />
-            <img
-              class="star-clock-minute-hand"
-              src=${this.modeChange(this.mode).minute}
-            />
-            <img class="star-clock-second-hand" src=${second} />
+            <span class="star-clock-hour-hand"></span>
+            <span class="star-clock-minute-hand"></span>
+            <span class="star-clock-second-hand"></span>
          </div>
        </div>
      </div>
@ -100,19 +89,6 @@ export class StarClock extends LitElement {
        return nothing
    }
  }
-  modeChange(mode: any) {
-    if (mode === 'light') {
-      return {
-        hour: lightHour,
-        minute: lightMinute,
-      }
-    } else {
-      return {
-        hour: darkHour,
-        minute: darkMinute,
-      }
-    }
-  }
  dateUpdated(date: any) {
    let timeMy = new Date(date)
    let hour = timeMy.getHours()
@ -122,14 +98,15 @@ export class StarClock extends LitElement {
    let minuteTime = Number(minute || 0) + secondTime / 60 //获取分针时间
    let hourTime = Number(hour || 0) + minuteTime / 60 //获取时针时间
    hourTime >= 12 ? (hourTime -= 12) : '' //24小时转换为12小时
-    this.rotateSecond = (secondTime / 60) * 360
-    this.rotateMinute = (minuteTime / 60) * 360
-    this.rotateHour = (hourTime / 12) * 360
-    this.style.setProperty('--rotateSecond', this.rotateSecond + 'deg')
-    this.style.setProperty('--rotateMinute', this.rotateMinute + 'deg')
-    this.style.setProperty('--rotateHour', this.rotateHour + 'deg')
+    let rotateSecond = ((secondTime / 60) * 360).toFixed(1)
+    let rotateMinute = ((minuteTime / 60) * 360).toFixed(1)
+    let rotateHour = ((hourTime / 12) * 360).toFixed(1)
+    this.style.setProperty('--rotateSecond', rotateSecond + 'deg')
+    this.style.setProperty('--rotateMinute', rotateMinute + 'deg')
+    this.style.setProperty('--rotateHour', rotateHour + 'deg')
  }
  protected firstUpdated() {
+    this.resize()
    this.dateUpdated('00:00:00')
    setInterval(() => {
      this.dateUpdated(new Date())
--- a/src/components/dock/dock.ts
+++ b/src/components/dock/dock.ts
@ -149,9 +149,6 @@ export default class StarDock extends StarBaseElement {
    target.master.remove()
    return target
  }
-  realRemoveChild = (element: HTMLElement) => {
-    element
-  }

  realInsertBefore = (element: HTMLElement, reference: HTMLElement) => {
    element.style.order = reference.style.order
@ -187,7 +184,7 @@ export default class StarDock extends StarBaseElement {

    this.recorderChild()
    if (this._children.length) {
-      this._gridSize = this._children[0].master.offsetWidth
+      this._gridSize = this._children[0].master.offsetWidth || this._gridSize
    }
  }

@ -220,6 +217,8 @@ export default class StarDock extends StarBaseElement {
    for (const child of children) {
      if (
        child.master === element ||
+        child.container === element ||
+        child.element === element ||
        child.master.compareDocumentPosition(element) & 16
      ) {
        return child
@ -280,9 +279,7 @@ export default class StarDock extends StarBaseElement {
        break

      case 'holdstart':
-        if (this._dnd.delay > 0) {
-          this.startDrag()
-        }
+        this.startDrag()
        break

      case 'holdmove':
@ -388,17 +385,21 @@ export default class StarDock extends StarBaseElement {

  set sortMode(value) {
    if (value) {
-      this._dnd.delay = 0
      this.gestureDetector.setOption('holdThreshold', 100)
      this.setAttribute('sort-mode', '')
    } else {
-      this._dnd.delay = DEFAULT_DND_TIMEOUT
      this.gestureDetector.setOption('holdThreshold', DEFAULT_DND_TIMEOUT)
      this.removeAttribute('sort-mode')
    }
    this._sortMode = value
  }

+  get elements() {
+    return this._children.map((child) => {
+      return child.element
+    })
+  }
+
  /**
   * 处理拖拽节点进入 dock 或者在 dock 上悬浮移动时的方法
   * @param info 拖拽节点和其中心点坐标
--- a/src/components/grid-container/container.ts
+++ b/src/components/grid-container/container.ts
@ -570,6 +570,7 @@ export class GaiaContainer extends StarBaseElement {
        column: child.column,
        anchorCoordinate: child.anchorCoordinate,
        folderName: child.folderName,
+        createTime: child.createTime,
      }
    } else {
      return null
--- a/src/components/grid-container/gaia-container-child.ts
+++ b/src/components/grid-container/gaia-container-child.ts
@ -55,6 +55,8 @@ export default class GaiaContainerChild {
  center: {x: number; y: number} = {x: 0, y: 0}
  // 影子容器，用于判断旋转屏幕后能否容纳该组件
  _shadowContainer!: HTMLElement
+  // 建立时间, 用于区分不同小组件
+  createTime: number = new Date().getTime()

  constructor(
    element: HTMLElement | undefined,
--- a/src/components/grid-container/gaia-container-folder.ts
+++ b/src/components/grid-container/gaia-container-folder.ts
@ -34,7 +34,7 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
  constructor(manager: GaiaContainer, name?: string) {
    super(undefined, 1, 1, undefined, manager)
    this.name = this.checkAndGetFolderName(name)
-    this._id = `folder-${new Date().getTime()}`
+    this._id = `folder-${this.createTime}`
    this.init()
  }

--- a/src/components/picker/datepicker.css.ts
+++ b/src/components/picker/datepicker.css.ts
@ -113,7 +113,7 @@ export default css`
  }
  .p-select-title {
    -webkit-flex: 1;
-    font-size: 18px;
+    font-size: 28px;
    color: #333;
    text-align: center;
  }
@ -168,7 +168,6 @@ export default css`
  }
  .p-select-body {
    position: relative;
-    margin: 20px auto;
    width: 100%;
    display: -webkit-flex;
    -webkit-align-items: center;
@ -463,6 +462,13 @@ export default css`
    line-height: 30px;
    letter-spacing: 1px;
    color: #262626;
+    /* 字符间距 */
+    letter-spacing: 1px;
+  }
+
+  /* 选项栏flex布局 */
+  .p-select-btn {
+    -webkit-flex: 1;
  }

  /**图标样式 */
@ -476,7 +482,13 @@ export default css`
    border-radius: 0px;
    position: absolute;
    top: 29px;
-    left: 532px;
+    right: 40px;
+  }
+  .p-select-back-btn {
+    border-radius: 0px;
+    position: absolute;
+    top: 29px;
+    left: 40px;
  }
  /* 滚轮不选项透明化 */
  .hasSelected {
@ -484,4 +496,14 @@ export default css`
    font-size: 36px !important;
    color: #1d98f0 !important;
  }
+
+  /* 日期选择器相关 */
+  .p-select-date {
+    display: none;
+    -webkit-flex: 1;
+  }
+  .p-select-time {
+    display: flex;
+    -webkit-flex: 1;
+  }
 `
--- a/src/components/picker/datepicker.ts
+++ b/src/components/picker/datepicker.ts
--- a/src/components/slider/README.md
+++ b/src/components/slider/README.md
@ -4,6 +4,7 @@

 - 滑块空间
 - 滑块拖动后返回 value 值
+- `showZero()` 方法可以实现点击图标，进程条动效归零以及动效恢复点击前的状态

 ## 类型包括：

@ -24,7 +25,7 @@
 <star-slider cover="50"></star-slider>
 ```

-1. `disabled` --- 禁用滑块
+3. `disabled` --- 禁用滑块

 ```
 <star-slider disabled></star-slider>
@ -81,7 +82,7 @@
 </star-slider>
 ```

-1. 列滑块 - 下侧图标
+9. 列滑块 - 下侧图标
   - `slot="icon"` 表示图标在 slider 下部

 ```
@ -89,7 +90,3 @@
   <div slot="icon" data-icon="alarm"></div>
 </star-slider>
 ```
-
-## 后续需解决的问题：
-
- 后续用 flex 布局重新调整图标位置
--- a/src/components/slider/slider-styles.ts
+++ b/src/components/slider/slider-styles.ts
@ -75,6 +75,11 @@ export const sharedStyles: CSSResult = css`
    border-radius: 50%;
    z-index: 1;
  }
+  /*动效：进度条变为0 */
+  .showZero {
+    height: 0px;
+    transition: height 0.2s;
+  }
  p {
    position: absolute;
    right: 5px;
--- a/src/components/slider/slider.ts
+++ b/src/components/slider/slider.ts
@ -30,6 +30,7 @@ export class StarSlider extends LitElement {
  @property({type: Boolean}) disabled = false
  @property({type: Boolean}) tick = false
  @property({type: Boolean}) vertical = false
+  @property({type: Boolean}) mute = false
  @property({type: Number}) startX = 0
  @property({type: Number}) startY = 0
  @property({type: Number}) touchX = 0
@ -107,11 +108,6 @@ export class StarSlider extends LitElement {
  protected firstUpdated(
    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
  ): void {
-    // if (this.vertical) {
-    //   this.touchStart = this.touchStartVertical
-    //   this.touchEnd = this.touchEndVertical
-    //   this.touchMove = this.touchMoveVertical
-    // }
    if (this.tick) {
      var tickStep = 100 / parseInt(this.step)
      for (let i = 0; i <= tickStep; i++) {
@ -124,9 +120,12 @@ export class StarSlider extends LitElement {
  }

  private touchStart(evt: TouchEvent) {
-    if (!this.disabled) {
+    if (
+      !this.disabled &&
+      (evt.target as Element).slot !== 'l-icon' &&
+      (evt.target as Element).slot !== 'r-icon'
+    ) {
      this.touchX = evt.touches[0].clientX //手指触摸的 x 坐标
-
      // 黑色覆盖部分
      this.barX =
        this.touchX -
@ -170,7 +169,11 @@ export class StarSlider extends LitElement {
    }
  }
  private touchMove(evt: TouchEvent) {
-    if (!this.disabled) {
+    if (
+      !this.disabled &&
+      (evt.target as Element).slot !== 'l-icon' &&
+      (evt.target as Element).slot !== 'r-icon'
+    ) {
      //阻止默认行为
      evt.preventDefault()
      this.touchX = evt.touches[0].clientX //整个屏幕实时触摸的 X 坐标
@ -242,9 +245,13 @@ export class StarSlider extends LitElement {
  }

  private touchStartVertical(evt: TouchEvent) {
-    if (!this.disabled) {
+    // if ((evt.target as Element).slot === 'icon') {
+    //   this.showZero()
+    // }
+    if (!this.disabled && (evt.target as Element).slot !== 'icon') {
+      //去除点击静音键而添加的  .showZero
+      this.vProgress.classList.remove('showZero')
      this.startY = evt.touches[0].clientY //手指点下的初始 Y 坐标
-
      this.barWidth = this.vSliderBar.offsetHeight //总长度
      this.dotL = this.vSliderBar.getBoundingClientRect().bottom - this.startY //点击后的黑条长度

@ -261,7 +268,8 @@ export class StarSlider extends LitElement {
    }
  }
  private touchMoveVertical(evt: TouchEvent) {
-    if (!this.disabled) {
+    if (!this.disabled && (evt.target as Element).slot !== 'icon') {
+      this.vProgress.removeAttribute('style')
      //阻止默认行为
      evt.preventDefault()
      this.touchY = evt.touches[0].clientY //整个屏幕实时触摸的 Y 坐标
@ -283,8 +291,8 @@ export class StarSlider extends LitElement {
      this.style.setProperty('--cover-width', this.newY + 'px')
    }
  }
-  private touchEndVertical(_: TouchEvent): string | void {
-    if (!this.disabled) {
+  private touchEndVertical(evt: TouchEvent): string | void {
+    if (!this.disabled && (evt.target as Element).slot !== 'icon') {
      this.vProgress.style.setProperty('--vWidth', '8px')
      this.vSliderBar.style.setProperty('--vWidth', '8px')
      this.dispatchEvent(
@ -298,6 +306,10 @@ export class StarSlider extends LitElement {
      )
    }
  }
+  showZero() {
+    this.vProgress.classList.toggle('showZero')
+    this.vProgress.style.setProperty('transition', 'height .2s')
+  }
 }
 declare global {
  interface HTMLElementTagNameMap {
--- a/src/components/swiper/README.md
+++ b/src/components/swiper/README.md
@ -0,0 +1,6 @@
+## star-switch
+
+星光 Web 组件 --- Swiper 组件（10 月 17 日）
+
+
+
--- a/src/components/swiper/index.ts
+++ b/src/components/swiper/index.ts
@ -0,0 +1 @@
+export * from './swiper.js'
--- a/src/components/swiper/package.json
+++ b/src/components/swiper/package.json
@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/swiper",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./switch.js": {
+      "default": "./switch.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}
--- a/src/components/swiper/swiper-styles.ts
+++ b/src/components/swiper/swiper-styles.ts
@ -0,0 +1,128 @@
+import {css, CSSResult} from 'lit'
+export const sharedStyles: CSSResult = css`
+  .swiperfigure {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    margin: 0 auto;
+    /* background-color: gray; */
+    overflow: hidden;
+  }
+  .swiperborder {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -60%);
+    width: calc(100% * 13 / 30);
+    height: calc(100% * 13 / 30);
+    border-radius: 12px;
+    border: 3px solid #fafafa;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  ul {
+    position: absolute;
+    display: flex;
+    width: 100vw;
+    /* background-color: skyblue; */
+    padding: 0;
+    left: 0;
+    top: -8.8%;
+    right: 0;
+    bottom: 0;
+    scale: 1;
+    margin: auto;
+    list-style: none;
+    cursor: pointer;
+    overflow-x: auto;
+    overflow: hidden;
+    transform-origin: center;
+    height: 43.333333vh;
+    /* scroll-snap-type: x mandatory; */
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    // will-change: scale;
+  }
+  .previewTransition {
+    transition: scale 0.3s, transform 0.3s !important;
+  }
+  .previewEnlarge {
+    /*
+    height: 116vh;
+    transform: translateY(7%);
+    transition: height 0.3s;
+    */
+    transform: translateY(4.5%);
+    scale: 2.31;
+    z-index: 2;
+  }
+
+  /* 色块 */
+  #testimg {
+    background-color: pink;
+    height: 43.333333vh;
+    width: 43.333333vw;
+    border-radius: 10px;
+    /* */
+    font-size: 180px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  li {
+    float: left;
+    width: 43.333333vw;
+    height: 100%;
+    margin-right: 10.3vw;
+    /* scroll-snap-align: center; */
+  }
+  img {
+    border-radius: 10px;
+    height: 100%;
+    transition: border-radius 0.3s;
+  }
+  .imgBorder {
+    border-radius: 0px;
+    transition: border-radius 0.3s;
+  }
+
+  .bottom {
+    width: 100%;
+    position: absolute;
+    bottom: 2.8%;
+    z-index: 100;
+  }
+
+  #submit {
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    width: 43.333333vw;
+    height: 97%;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 2;
+  }
+  p {
+    position: relative;
+    font-family: 'OPPOSans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 18px;
+    z-index: 3;
+  }
+
+  #button {
+    letter-spacing: 6px;
+    color: #f0f0f0;
+    font-size: 17px;
+    line-height: 17px;
+    top: -2px;
+  }
+  .flex {
+    display: flex;
+    justify-content: space-around;
+  }
+`
--- a/src/components/swiper/swiper.ts
+++ b/src/components/swiper/swiper.ts
@ -0,0 +1,270 @@
+import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
+import {customElement, property, query, queryAll} from 'lit/decorators.js'
+import {sharedStyles} from './swiper-styles.js'
+@customElement('star-swiper')
+export class StarLockNumber extends LitElement {
+  public static override get styles(): CSSResultArray {
+    return [sharedStyles]
+  }
+  @query('#cancel') cancelButton!: HTMLParagraphElement
+  @query('#preview') previewButton!: HTMLParagraphElement
+  @query('#button') button!: HTMLParagraphElement
+  @query('.swiperfigure') swiperfigure!: HTMLDivElement
+  @query('ul')
+  cur_ul!: HTMLUListElement
+  @queryAll('li') cur_lis!: NodeListOf<HTMLLIElement>
+  @query('li') cur_li!: HTMLLIElement
+  // @queryAll('img') imgs!: NodeListOf<HTMLImageElement>
+  @queryAll('#testimg') testimgs!: NodeListOf<HTMLDivElement>
+  @query('#testimg') img!: HTMLDivElement
+  @query('.swiperborder') swiperborder!: HTMLDivElement
+  @property({type: Boolean}) enlarge = false
+  @property({type: Array}) figure_arr: any[] = []
+  @property({type: String}) cancelText = '取消'
+  @property({type: String}) previewText = '预览'
+  @property({type: String}) applicationText = '应用'
+  @property({type: Number}) index = 1 //初始化图片
+  @property({type: Number}) carouselX = 0 //轮播图到左边框的距离
+  @property({type: Number}) distanceX = 0 //轮播图移动的距离
+  @property({type: Number}) touchX = 0 //手指第一次按下的位置
+  @property({type: Number}) cur_li_margin_right =
+    0.103 * document.documentElement.offsetWidth
+  @property({type: Number}) cur_li_width =
+    0.43333333 * document.documentElement.offsetWidth
+  @property({type: Number}) initial_position = 28.4 - 53.6 * this.index //初始位置
+  @property({type: Number}) cur_ul_width = 0 //初始 ul 宽度
+
+  constructor() {
+    super()
+    console.log('constructor')
+  }
+
+  render() {
+    return html`
+      <div class="content">
+        <div class="swiperfigure">
+          <div class="swiperborder"></div>
+          <ul
+            class="list"
+            @touchstart=${this.touchStartImg}
+            @touchmove=${this.touchMoveImg}
+            @touchend=${this.touchEndImg}
+          ></ul>
+        </div>
+        <div class="bottom" @touchstart=${this.touchStartBottom}>
+          <star-button
+            class="chamfer confirm"
+            id="submit"
+            label=""
+          ></star-button>
+          <div class="flex">
+            <p id="cancel" style="left:-3.5%">${this.cancelText}</p>
+            <p id="button">${this.applicationText}</p>
+            <p id="preview" style="right:-3.5%">${this.previewText}</p>
+          </div>
+        </div>
+      </div>
+    `
+  }
+  protected firstUpdated(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    //全面阻止移动端事件的默认行为
+    document.addEventListener('touchstart', function (ev: TouchEvent) {
+      ev.preventDefault()
+    })
+    console.log('firstUpdated')
+    //图片数组(模拟从后台获取到的图片路径)
+    var cur_img = [
+      'src/components/swiper/figure/1.png',
+      'src/components/swiper/figure/2.png',
+      'src/components/swiper/figure/3.png',
+      'src/components/swiper/figure/4.png',
+      'src/components/swiper/figure/5.png',
+    ]
+    //轮播图函数
+    this.carousel(cur_img)
+    this.figure_arr = cur_img
+    this.cur_ul.addEventListener('transitionend', () => {
+      this.enlarge
+        ? this.swiperborder.style.setProperty('visibility', 'hidden')
+        : this.swiperborder.style.setProperty('visibility', 'visible')
+    })
+    /* 确定刚开始的位置 */
+    this.cur_ul.style.setProperty('left', 28.4 - 53.6 * this.index + 'vw')
+    this.ulWidth(this.enlarge)
+  }
+  carousel(arr: any) {
+    if (this.swiperfigure) {
+      for (var i = 0; i < arr.length; i++) {
+        this.cur_ul.innerHTML += '<li><div id="testimg">' + i + '</div></li>'
+      }
+    }
+  }
+  ulWidth(enlarge: Boolean) {
+    if (enlarge) {
+      console.log('预览')
+      this.cur_ul_width =
+        (this.figure_arr.length + 1) *
+        (this.cur_li_width + this.cur_li_margin_right) *
+        2.31
+      this.cur_ul.style.setProperty('width', this.cur_ul_width + 'px')
+      this.cur_ul.style.setProperty('left', 487 - 124 * this.index + 'vw')
+    } else {
+      console.log('非预览')
+      this.cur_ul_width =
+        (this.figure_arr.length + 1) *
+        (this.cur_li_width + this.cur_li_margin_right)
+      this.cur_ul.style.setProperty('width', this.cur_ul_width + 'px')
+      this.cur_ul.style.setProperty('left', 28.4 - 53.6 * this.index + 'vw')
+      console.log('this.cur_li_width', this.cur_li_width)
+      console.log('this.cur_li_margin_right', this.cur_li_margin_right)
+      console.log('this.figure_arr.length + 1', this.figure_arr.length + 1)
+      console.log('this.cur_ul_width', this.cur_ul_width)
+    }
+  }
+
+  touchStartImg(e: TouchEvent) {
+    //去除对于left的transition效果
+    this.cur_ul.classList.remove('previewTransition')
+    this.cur_ul.style.removeProperty('transition')
+    this.touchX = e.changedTouches[0].clientX
+    this.carouselX = this.cur_ul.offsetLeft //ul到左边框的距离
+  }
+  touchMoveImg(e: TouchEvent) {
+    let nowX = e.changedTouches[0].clientX
+    this.distanceX = nowX - this.touchX //移动的距离
+    this.cur_ul.style.setProperty(
+      'left',
+      this.carouselX + this.distanceX + 'px'
+    )
+  }
+  touchEndImg(_e: TouchEvent) {
+    if (!this.enlarge) {
+      //滑动的阈值为Math.abs(25vw),小于阈值回到原位置
+      let x = 0.25 * document.documentElement.clientWidth
+      if (Math.abs(this.distanceX) > x) {
+        //index 为 0 | this.figure_arr.length-1 时的特殊处理
+        if (this.index == 0 && this.distanceX > x) {
+          this.index = 0
+        } else if (
+          this.index == this.figure_arr.length - 1 &&
+          this.distanceX < -x
+        ) {
+          this.index = this.figure_arr.length - 1
+        } else {
+          if (this.distanceX < -x) {
+            //往右滑一张图片
+            ++this.index
+          } else if (this.distanceX > x) {
+            //往左滑一张图片
+            --this.index
+          }
+        }
+      }
+      this.cur_ul.style.setProperty('left', 28.4 - 53.6 * this.index + 'vw')
+      this.cur_ul.style.setProperty(
+        'transition',
+        'left .3s cubic-bezier(.05,.62,.42,.9)'
+      )
+      console.log('index', this.index)
+      //清零移动距离
+      this.distanceX = 0
+    } else {
+      //滑动的阈值为Math.abs(25*2.31vw),小于阈值回到原位置
+      let x = 0.25 * 2.31 * document.documentElement.clientWidth
+      if (Math.abs(this.distanceX) > x) {
+        //index 为 0 | this.figure_arr.length-1 时的特殊处理
+        if (this.index == 0 && this.distanceX > x) {
+          this.index = 0
+        } else if (
+          this.index == this.figure_arr.length - 1 &&
+          this.distanceX < -x
+        ) {
+          this.index = this.figure_arr.length - 1
+        } else {
+          if (this.distanceX < -x) {
+            //往右滑一张图片
+            ++this.index
+          } else if (this.distanceX > x) {
+            //往左滑一张图片
+            --this.index
+          }
+        }
+      }
+      this.cur_ul.style.setProperty('left', 487 - 124 * this.index + 'vw')
+      this.cur_ul.style.setProperty(
+        'transition',
+        'left .3s cubic-bezier(.05,.62,.42,.9)'
+      )
+      console.log('index', this.index)
+      //清零移动距离
+      this.distanceX = 0
+    }
+  }
+
+  touchStartBottom(e: TouchEvent) {
+    if ((e.target as Element).id === 'cancel') {
+      //点击取消
+      console.log('cancel')
+      this.dispatchEvent(
+        new CustomEvent('star-swiper-cancel', {
+          detail: {
+            value: true,
+          },
+          bubbles: true,
+          composed: true,
+        })
+      )
+    } else if ((e.target as Element).id === 'preview') {
+      //点击预览
+      this.dispatchEvent(
+        new CustomEvent('star-swiper-preview', {
+          detail: {
+            value: this.index,
+          },
+          bubbles: true,
+          composed: true,
+        })
+      )
+      this.preview()
+    } else if (
+      (e.target as Element).id === 'button' ||
+      (e.target as Element).tagName === 'STAR-BUTTON'
+    ) {
+      //点击应用
+      console.log('submit')
+      this.dispatchEvent(
+        new CustomEvent('star-swiper-submit', {
+          detail: {
+            value: this.index,
+          },
+          bubbles: true,
+          composed: true,
+        })
+      )
+      //预览时点击应用会保存预览变大的状态
+      this.enlarge ? this.preview() : ''
+    }
+  }
+  preview() {
+    this.enlarge = !this.enlarge
+    //隐藏取消按钮，更换预览为退出
+    if (this.enlarge) {
+      this.cancelButton.style.setProperty('visibility', 'hidden')
+      this.previewText = '退出'
+    } else {
+      this.cancelButton.style.setProperty('visibility', 'visible')
+      this.previewText = '预览'
+    }
+    this.ulWidth(this.enlarge)
+    for (let i = 0; i < this.cur_lis.length; i++) {
+      this.enlarge
+        ? this.testimgs[i].setAttribute('style', 'border-radius:0px')
+        : this.testimgs[i].setAttribute('style', 'border-radius:10px')
+    }
+    this.cur_ul.classList.add('previewTransition')
+    this.cur_ul.classList.toggle('previewEnlarge')
+    this.cur_ul.style.setProperty('transition', 'height .3s')
+  }
+}
--- a/src/components/swiper/tsconfig.json
+++ b/src/components/swiper/tsconfig.json
@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "../../"
+  },
+  "include": ["*.ts"]
+}
--- a/src/index.ts
+++ b/src/index.ts
@ -26,8 +26,8 @@ import './components/pattern-view/pattern-view'
 import './components/overlay/active-overlay'
 import './components/battery/battery'
 import './components/battery-square/battery-square'
-// import './components/picker/timepicker'
-import './components/animation/animaiton'
+import './components/picker/datepicker'
+import './components/swiper/swiper'
@customElement('settings-app')
 export class SettingsApp extends LitElement {
  @query('star-animate-section#root') private rootSection!: StarAnimateSection
--- a/src/test/panels/clock/clock.ts
+++ b/src/test/panels/clock/clock.ts
@ -25,7 +25,7 @@ export class PanelClock extends LitElement {
          <star-clock id="test1" type="diale"></star-clock>
        </div>
        <div style="width: 380px; height: 380px;overflow: hidden">
-          <star-clock id="test2" type="diale" mode="light"></star-clock>
+          <star-clock id="test2" type="diale"></star-clock>
        </div>
      </div>
      <h3
--- a/src/test/panels/picker/picker.ts
+++ b/src/test/panels/picker/picker.ts
@ -75,9 +75,15 @@ export class PanelPicker extends LitElement {
          <star-pickerbase></star-pickerbase>
        </label>

+        <label>
+          <star-pickerbase type="timepicker"></star-pickerbase>
+        </label>
+
        <label>
          <star-pickerbase type="datepicker"></star-pickerbase>
        </label>
+        
+        <div></div>
      </div>
    `
  }
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@ -37,6 +37,7 @@ import './slider/slider'
 import './switch/switch'
 import './toast/toast'
 import './weather/weather'
+import './swiper/swiper'

 import './animation/animation'
 type SEID = string
@ -145,7 +146,7 @@ export class PanelRoot extends LitElement {
      <hr />
      <star-li
        type=${LiType.ICON_LABEL}
-        label="数字密码"
+        label="锁屏-数字密码"
        icon="lock"
        iconcolor="#EB7347"
        href="#digicipher"
@ -153,7 +154,15 @@ export class PanelRoot extends LitElement {
      <hr />
      <star-li
        type=${LiType.ICON_LABEL}
-        label="已锁定"
+        label="锁屏-图案密码"
+        icon="lock"
+        iconcolor="#EB7347"
+        href="#pattern-view"
+      ></star-li>
+      <hr />
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="锁屏-已锁定"
        icon="lock"
        iconcolor="#EB7347"
        href="#locked"
@ -161,10 +170,10 @@ export class PanelRoot extends LitElement {
      <hr />
      <star-li
        type=${LiType.ICON_LABEL}
-        label="图案密码"
+        label="锁屏-轮播图"
        icon="lock"
        iconcolor="#EB7347"
-        href="#pattern-view"
+        href="#swiper"
      ></star-li>
      <hr />
      <star-li
--- a/src/test/panels/swiper/swiper.ts
+++ b/src/test/panels/swiper/swiper.ts
@ -0,0 +1,29 @@
+import {html, LitElement, css} from 'lit'
+import {customElement} from 'lit/decorators.js'
+import '../icon/icon'
+
+@customElement('panel-swiper')
+export class PanelSwiper extends LitElement {
+  static styles = css`
+    .screen {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      background-color: rgb(183, 211, 227);
+      overflow: hidden;
+    }
+  `
+  render() {
+    return html`
+      <div class="screen">
+        <star-swiper></star-swiper>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-swiper': PanelSwiper
+  }
+}