overseas 0.0.1

package/packages/theme-style/src/button.scss

@@ -0,0 +1,110 @@
+// 按钮样式文件
+
+// 清除按钮默认样式
+button {
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+
+.ts-button {
+  padding: 0 8px;
+  text-align: center;
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 600;
+  border-radius: 10px;
+  color: #ffaa0a;
+  background: #fff;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  &.ts-button--default {
+    color: #ffaa0a;
+    background: #fff;
+
+    &.is-outline {
+      color: #fff;
+      border-color: #fff;
+    }
+  }
+
+  &.ts-button--primary {
+    color: #fff;
+    background: linear-gradient(56deg, rgba(255, 213, 24, 1) 0%, rgba(255, 170, 10, 1) 100%) #ffd518;
+
+    &.is-outline {
+      color: #fff3dc;
+      border-color: #fff3dc;
+    }
+  }
+
+  &.ts-button--assist {
+    color: #ffaa0a;
+    background: #fff3dc;
+
+    &.is-outline {
+      color: #fff3dc;
+      border-color: #fff3dc;
+    }
+  }
+
+  &.ts-button--small {
+    height: 32px;
+    font-size: 16px;
+    line-height: 19px;
+    font-weight: 600;
+
+    &.is-outline {
+      border-width: 2px;
+    }
+  }
+
+  &.ts-button--normal {
+    height: 48px;
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 600;
+  }
+
+  &.ts-button--large {
+    height: 60px;
+    font-size: 24px;
+    line-height: 30px;
+    font-weight: bold;
+  }
+
+  &.is-round {
+    border-radius: 100px;
+  }
+
+  &.is-outline {
+    border-width: 3px;
+    border-style: solid;
+    background: transparent;
+
+    &:not([disabled]):hover,
+    &.is-disabled {
+      color: #fff;
+      border-color: transparent;
+    }
+
+    &[disabled],
+    &[disabled]:hover {
+      border-color: transparent;
+    }
+  }
+
+  &:not([disabled]):hover {
+    color: #fff;
+    background: #ffd518;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+
+  &.is-disabled,
+  &[disabled],
+  &[disabled]:hover {
+    color: #fff;
+    background: rgba(162, 170, 184, 0.3);
+    cursor: not-allowed;
+  }
+}

package/packages/theme-style/src/class-choose.scss

@@ -0,0 +1,251 @@
+@import './bottom-popup.scss';
+.choose-course-wrapper {
+  .goods-list {
+    padding-bottom: 80px;
+  }
+  .voucher-show-wrapper {
+    width: 100%;
+    padding: 0 16px;
+    // height: 70px;
+
+    margin-bottom: 10px;
+    position: fixed;
+    bottom: 64px;
+    left: 50%;
+    transform: translateX(-50%);
+    .voucher-show {
+      border-radius: 8px;
+      color: #ffffff;
+      background: rgba(15, 25, 42, 0.95);
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      height: 46px;
+
+      .voucher-text {
+        width: 264px;
+        height: 28px;
+        line-height: 14px;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .btn-bottom-class-choose {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 64px;
+    background: #ffffff;
+    display: flex;
+    justify-content: center;
+    padding: 0 16px;
+
+    .price {
+      width: 50%;
+      background: #fff;
+      text-align: left;
+      color: #ffaa0a;
+      font-size: 24px;
+      font-weight: 600;
+      line-height: 64px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .price-top {
+        height: 29px;
+        line-height: 29px;
+        s {
+          font-size: 12px;
+          font-weight: 600;
+          color: #a2aab8;
+          line-height: 14px;
+        }
+      }
+
+      .price-bottom {
+        height: 19px;
+        font-size: 16px;
+        font-family: SFProRounded-Medium, SFProRounded;
+        font-weight: 500;
+        color: #000;
+        line-height: 16px;
+      }
+    }
+    .btn-wrapper {
+      width: 50%;
+      position: relative;
+
+      .btn {
+        display: block;
+        width: 120px;
+        height: 40px;
+        background: linear-gradient(45deg, #ffd518 0%, #ffaa0a 100%);
+        border-radius: 28px;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        text-align: center;
+        color: #fff;
+        font-weight: 600;
+        font-size: 16px;
+      }
+    }
+  }
+  .showBackground {
+    // background: red;
+    background: linear-gradient(45deg, #ffd518 0%, #ffaa0a 100%);
+    .price {
+      background: transparent;
+      color: #ffffff;
+
+      .price-top {
+        color: #ffffff;
+        s {
+          color: #ffffff;
+        }
+      }
+      .price-bottom {
+        color: #ffffff;
+      }
+    }
+    .btn-wrapper .btn {
+      background: #ffffff;
+      color: #ffaa0a;
+    }
+  }
+
+  .bottom-sub-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .left-class {
+    font-size: 16px;
+    font-weight: 500;
+    color: #a2aab8;
+    line-height: 22px;
+    width: 50%;
+    text-align: left;
+  }
+  .right-price {
+    font-weight: 600;
+    color: #ffaa0a;
+    width: 50%;
+    text-align: right;
+
+    &-top {
+      font-size: 20px;
+      color: #ffaa0a;
+      line-height: 24px;
+      width: 100%;
+      display: block;
+      text-align: right;
+    }
+
+    &-bottom {
+      font-size: 12px;
+      color: #a2aab8;
+      line-height: 14px;
+    }
+  }
+  .course-card {
+    position: relative;
+    border-radius: 10px;
+    padding: 20px 16px 0;
+    margin-bottom: 20px;
+    background: #fff;
+    padding-bottom: 15px;
+    &.active {
+      box-shadow: 0 0 0 1px #ffaa0a;
+    }
+  }
+  .course-name {
+    // line-height: 40px;
+    font-weight: 600;
+  }
+
+  .date-info {
+    display: flex;
+
+    .icon {
+      margin-top: 16px;
+      width: 16px;
+      height: 16px;
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .info {
+      margin-top: 14px;
+      margin-bottom: 12px;
+      margin-left: 10px;
+      flex: 1;
+
+      :first-child {
+        margin-bottom: 8px;
+      }
+    }
+  }
+
+  .difficulty {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    font-size: 12px;
+    font-family: SFProRounded-Medium, SFProRounded;
+    font-weight: 500;
+    color: #172b4d;
+    // margin: 0 8px;
+    .text {
+      padding-right: 10px;
+      color: #a2aab8;
+    }
+    .icon-wrapper {
+      display: flex;
+      .icon {
+        width: 20px;
+        height: 22px;
+        margin-right: 10px;
+        img {
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .diff-text {
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+  .active-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 32px;
+    height: 20px;
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .course-full {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 120px;
+    height: 104px;
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/packages/theme-style/src/common/popup.scss

@@ -0,0 +1,39 @@
+@import './var.scss';
+
+.v-modal-enter {
+  animation: v-modal-in 0.2s ease;
+}
+
+.v-modal-leave {
+  animation: v-modal-out 0.2s ease forwards;
+}
+
+@keyframes v-modal-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes v-modal-out {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.v-modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: $--popup-modal-opacity;
+  background: $--popup-modal-background-color;
+}

package/packages/theme-style/src/common/var.scss

@@ -0,0 +1,6 @@
+/* Popup
+-------------------------- */
+/// color||Color|0
+$--popup-modal-background-color: #000 !default;
+/// opacity||Other|1
+$--popup-modal-opacity: 0.5 !default;

package/packages/theme-style/src/common.scss

@@ -0,0 +1,97 @@
+html {
+  font-family: 'SF Pro Rounded', 'SF Pro', 'Helvetica', 'Roboto', ' Arial', sans-serif;
+  font-size: 16px;
+  word-spacing: 1px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  scroll-behavior: smooth;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+*:focus-visible {
+  outline: 0;
+}
+
+a {
+  color: #000;
+  text-decoration: none;
+}
+
+img {
+  border: none;
+}
+
+img[src=""],
+img:not([src]) {
+  opacity: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+  word-spacing: 0;
+}
+
+p {
+  word-spacing: 0;
+  letter-spacing: 0;
+}
+
+// 字体同样类名
+// 使用方法，在需要设置字重的文本上，直接应用对应类名即可
+.font-bold {
+  font-weight: bold;
+  font-family: 'SFProRounded-Bold', 'SF Pro Rounded', 'SFPro-Bold', 'Helvetica', 'Roboto', 'Arial', sans-serif;
+}
+
+.font-semibold {
+  font-weight: 600;
+  font-family: 'SFProRounded-Semibold,', 'SF Pro Rounded', 'SFPro-Semibold', 'Helvetica', 'Roboto', 'Arial', sans-serif;
+}
+
+.font-medium {
+  font-weight: 500;
+  font-family: 'SFProRounded-Medium', 'SF Pro Rounded', 'SFPro-Medium', 'Helvetica', 'Roboto', 'Arial', sans-serif;
+}
+
+.font-regular {
+  font-weight: 400;
+  font-family: 'SFProRounded-Regular', 'SF Pro Rounded', 'SFPro-Regular', 'Helvetica', 'Roboto', 'Arial', sans-serif;
+}
+
+// hover 过渡
+.hover-transition {
+  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+a.link-text {
+  text-decoration: underline;
+  color: #3370ff;
+
+  &:hover {
+    color: #3370ff;
+  }
+}
+
+.blur-overlay {
+  backdrop-filter: blur(5px);
+  background: rgba(0, 0, 0, 0.2);
+}

package/packages/theme-style/src/dialog.scss

@@ -0,0 +1,130 @@
+@import './common/popup.scss';
+
+.ts-dialog-wrapper {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.ts-dialog {
+  margin: 0 auto;
+  max-width: 100%;
+  max-height: 100vh;
+  background: #fff;
+
+  &.is-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &.is-round {
+    border-radius: 16px;
+    overflow: hidden;
+  }
+
+  .ts-dialog__header {
+    padding: 0 16px;
+    height: 60px;
+    background: #fff;
+
+    .ts-normal-header-container {
+      position: absolute;
+      left: 14px;
+      right: 14px;
+      height: inherit;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+    }
+
+    .ts-normal-header-container .ts-header-left-container,
+    .ts-normal-header-container .ts-header-right-container {
+      position: absolute;
+      top: 14px;
+
+      .ts-header-icon-btn-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 32px;
+        height: 32px;
+        text-align: center;
+        border-radius: 50%;
+        color: #a2aab8;
+        background: #f4f6fa;
+
+        &.success-icon-container {
+          color: #ffaa0a;
+          background: rgba(255, 170, 10, 0.08);
+        }
+
+        .iconfont {
+          font-size: 20px;
+        }
+      }
+    }
+
+    .ts-normal-header-container .ts-header-left-container {
+      left: 0;
+    }
+
+    .ts-normal-header-container .ts-header-right-container {
+      right: 0;
+    }
+
+    .ts-title-container {
+      h1,
+      .title {
+        text-align: center;
+        font-size: 18px;
+        line-height: 21px;
+        color: #172b4d;
+      }
+    }
+  }
+
+  &.is-round .ts-dialog__header {
+    border-radius: 16px 16px 0 0;
+  }
+
+  &.is-round .ts-dialog__footer {
+    border-radius: 0 0 16px 16px;
+  }
+}
+
+.dialog-fade-enter-active {
+  animation: dialog-fade-in 0.3s;
+}
+
+.dialog-fade-leave-active {
+  animation: dialog-fade-out 0.3s;
+}
+
+@keyframes dialog-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}

package/packages/theme-style/src/grade-panel.scss

@@ -0,0 +1,76 @@
+.grade-selection-list-wrapper {
+  margin: 10px auto 0;
+  width: 343px;
+  // height: 200px;
+  box-sizing: border-box;
+  background: #ffffff;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .grade-selection-list-title{
+    font-size: 18px;
+    font-family: 'SFProRounded-Medium', 'SFProRounded','SFPro-Medium','Helvetica','Roboto','Arial','sans-serif';
+    color: #172B4D;
+    line-height: 27px;
+    margin-top: 16px;
+  }
+  .grade-selection-list-container {
+    width: 100%;
+    padding-top: 16px;
+    padding-left: 16px;
+    padding-right: 6px;
+    padding-bottom: 6px;
+    // display: flex;
+    // justify-content: center;
+    // align-items: center;
+
+    ul,li{
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: inline;
+    }
+    .grade-selection-item-wrapper{
+      display: flex;
+      // align-items: center;
+      // justify-content: flex-start;
+      flex-wrap: wrap;
+    }
+
+    .grade-selection-item{
+      margin-right: 10px;
+      margin-bottom: 10px;
+      padding: 10px;
+      min-width: 97px;
+      height: 36px;
+      background: #F8F9FA;
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .item-text{
+        color: #A2AAB8;
+        // height: 16px;
+        // line-height: 16px;
+        font-size: 14px;
+      }
+    }
+
+    .active{
+      background: #FFAA0A linear-gradient(45deg, #FFD518 0%, #FFAA0A 100%);
+
+      .item-text{
+        color: #ffffff;
+      }
+    }
+
+    .btn{
+      margin-top: 6px;
+      margin-bottom: 16px;
+    }
+  }
+}