overseas 2.0.7

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;
+    }
+  }
+}

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

@@ -0,0 +1,369 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 1924942 */
+  src: url('//at.alicdn.com/t/font_1924942_l9jdvry059.eot?t=1637736214198'); /* IE9 */
+  src: url('//at.alicdn.com/t/font_1924942_l9jdvry059.eot?t=1637736214198#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('//at.alicdn.com/t/font_1924942_l9jdvry059.woff2?t=1637736214198') format('woff2'),
+       url('//at.alicdn.com/t/font_1924942_l9jdvry059.woff?t=1637736214198') format('woff'),
+       url('//at.alicdn.com/t/font_1924942_l9jdvry059.ttf?t=1637736214198') format('truetype'),
+       url('//at.alicdn.com/t/font_1924942_l9jdvry059.svg?t=1637736214198#iconfont') format('svg');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-pdf:before {
+  content: "\e654";
+}
+
+.icon-close1:before {
+  content: "\e653";
+}
+
+.icon-alert-e656:before {
+  content: "\e656";
+}
+
+.icon-left-arrpw:before {
+  content: "\e657";
+}
+
+.icon-close-new-e658:before {
+  content: "\e658";
+}
+
+.icon-unselect:before {
+  content: "\e651";
+}
+
+.icon-selected:before {
+  content: "\e652";
+}
+
+.icon-telephone:before {
+  content: "\e650";
+}
+
+.icon-youtube-new:before {
+  content: "\e64c";
+}
+
+.icon-whatsapp:before {
+  content: "\e64d";
+}
+
+.iconicon-location:before {
+  content: "\e64b";
+}
+
+.iconwechat-qr-code-icon:before {
+  content: "\e64a";
+}
+
+.icon-alert:before {
+  content: "\e649";
+}
+
+.icon-star:before {
+  content: "\e648";
+}
+
+.icon-passed:before {
+  content: "\e647";
+}
+
+.icon-more-right:before {
+  content: "\e646";
+}
+
+.icon-more-left:before {
+  content: "\e645";
+}
+
+.icon-arrow-right:before {
+  content: "\e64f";
+}
+
+.icon-failed:before {
+  content: "\e644";
+}
+
+.icon-difficulty:before {
+  content: "\e643";
+}
+
+.icon-higher-department:before {
+  content: "\e642";
+}
+
+.icon-junior-department:before {
+  content: "\e641";
+}
+
+.icon-primary-department:before {
+  content: "\e640";
+}
+
+.icon-preschool-department:before {
+  content: "\e63f";
+}
+
+.icon-transfer1:before {
+  content: "\e63e";
+}
+
+.icon-reschedule:before {
+  content: "\e63d";
+}
+
+.icon-transfer:before {
+  content: "\e63c";
+}
+
+.icon-next:before {
+  content: "\e63b";
+}
+
+.icon-close-new:before {
+  content: "\e639";
+}
+
+.icon-arrow-left:before {
+  content: "\e63a";
+}
+
+.icon-upaid-courses:before {
+  content: "\e638";
+}
+
+.icon-top-dark:before {
+  content: "\e636";
+}
+
+.icon-bottom-dark:before {
+  content: "\e637";
+}
+
+.icon-switch:before {
+  content: "\e635";
+}
+
+.icon-info-circle:before {
+  content: "\e634";
+}
+
+.icon-success-circle:before {
+  content: "\e632";
+}
+
+.icon-user-switch:before {
+  content: "\e630";
+}
+
+.icon-download:before {
+  content: "\e631";
+}
+
+.icon-wish-list:before {
+  content: "\e62e";
+}
+
+.icon-edit:before {
+  content: "\e62f";
+}
+
+.icon-order:before {
+  content: "\e62c";
+}
+
+.icon-test:before {
+  content: "\e62d";
+}
+
+.icon-course:before {
+  content: "\e62b";
+}
+
+.icon-coupon:before {
+  content: "\e62a";
+}
+
+.icon-take-class-time:before {
+  content: "\e629";
+}
+
+.icon-wish:before {
+  content: "\e628";
+}
+
+.icon-success:before {
+  content: "\e61c";
+}
+
+.icon-mail:before {
+  content: "\e606";
+}
+
+.icon-asc-sort:before {
+  content: "\e604";
+}
+
+.icon-desc-sort:before {
+  content: "\e603";
+}
+
+.icon-show-more:before {
+  content: "\e602";
+}
+
+.icon-access-course-details:before {
+  content: "\e601";
+}
+
+.icon-attend-the-class:before {
+  content: "\e600";
+}
+
+.icon-camera-outline:before {
+  content: "\e616";
+}
+
+.icon-setting-outline:before {
+  content: "\e615";
+}
+
+.icon-home-outline:before {
+  content: "\e610";
+}
+
+.icon-file-outline:before {
+  content: "\e60f";
+}
+
+.icon-warning-outline:before {
+  content: "\e609";
+}
+
+.icon-success-outline:before {
+  content: "\e60a";
+}
+
+.icon-quote-left:before {
+  content: "\e627";
+}
+
+.icon-quote-right:before {
+  content: "\e626";
+}
+
+.icon-asc:before {
+  content: "\e625";
+}
+
+.icon-desc:before {
+  content: "\e624";
+}
+
+.icon-calendar-date-outline:before {
+  content: "\e623";
+}
+
+.icon-tel:before {
+  content: "\e622";
+}
+
+.icon-faq:before {
+  content: "\e621";
+}
+
+.icon-arrow-top:before {
+  content: "\e620";
+}
+
+.icon-arrow-bottom:before {
+  content: "\e61f";
+}
+
+.icon-arrow-top-outline:before {
+  content: "\e61e";
+}
+
+.icon-arrow-bottom-outline:before {
+  content: "\e61d";
+}
+
+.icon-arrow-right-outline:before {
+  content: "\e61b";
+}
+
+.icon-arrow-left-outline:before {
+  content: "\e61a";
+}
+
+.icon-logo:before {
+  content: "\e619";
+}
+
+.icon-linkedin:before {
+  content: "\e618";
+}
+
+.icon-quote:before {
+  content: "\e617";
+}
+
+.icon-close:before {
+  content: "\e614";
+}
+
+.icon-play:before {
+  content: "\e613";
+}
+
+.icon-menu-outline:before {
+  content: "\e612";
+}
+
+.icon-clock-outline:before {
+  content: "\e611";
+}
+
+.icon-ins:before {
+  content: "\e633";
+}
+
+.icon-download-outline:before {
+  content: "\e60e";
+}
+
+.icon-projector-outline:before {
+  content: "\e60d";
+}
+
+.icon-calendar-outline:before {
+  content: "\e60c";
+}
+
+.icon-desktop-outline:before {
+  content: "\e60b";
+}
+
+.icon-wechat:before {
+  content: "\e64e";
+}
+
+.icon-facebook:before {
+  content: "\e608";
+}
+
+.icon-backtop:before {
+  content: "\e607";
+}
+
+.icon-youtube:before {
+  content: "\e605";
+}

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

@@ -0,0 +1,8 @@
+.image-section-wrapper {
+  width: 100%;
+  max-width: 375px;
+  img {
+    display: block;
+    width: 100%;
+  }
+}