From d9e4c01cc4cd55b178859dd2631d253be64e58c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=20=E5=85=83=E5=B1=B1?= <piercezzs@outlook.com>
Date: Wed, 31 Jan 2024 17:04:35 +0800
Subject: [PATCH] f

---
 src/App.vue                   |    6 +-
 src/assets/css/color.scss     |   16 +
 src/assets/css/common.scss    |   46 ++
 src/assets/css/coverantdv.css |  122 ++++
 src/assets/css/icon.css       |   23 +
 src/assets/css/main.css       |   40 ++
 src/assets/css/modal.scss     |   20 +
 src/assets/css/sfanimate.css  |  116 ++++
 src/assets/css/sfcard.css     |    7 +
 src/assets/css/sfcommon.css   |  504 ++++++++++++++
 src/assets/css/sffont.css     |   39 ++
 src/assets/css/sfform.css     | 1218 +++++++++++++++++++++++++++++++++
 src/assets/css/sfstatic.css   |   11 +
 src/assets/css/sfstatus.css   |   64 ++
 src/assets/css/sftable.css    |   63 ++
 src/router/index.js           |   13 +-
 src/views/about/index.vue     |    2 +
 src/views/home/index.vue      |   14 +-
 src/views/layout.vue          |   20 +
 19 files changed, 2327 insertions(+), 17 deletions(-)
 create mode 100644 src/assets/css/color.scss
 create mode 100644 src/assets/css/common.scss
 create mode 100644 src/assets/css/coverantdv.css
 create mode 100644 src/assets/css/icon.css
 create mode 100644 src/assets/css/main.css
 create mode 100644 src/assets/css/modal.scss
 create mode 100644 src/assets/css/sfanimate.css
 create mode 100644 src/assets/css/sfcard.css
 create mode 100644 src/assets/css/sfcommon.css
 create mode 100644 src/assets/css/sffont.css
 create mode 100644 src/assets/css/sfform.css
 create mode 100644 src/assets/css/sfstatic.css
 create mode 100644 src/assets/css/sfstatus.css
 create mode 100644 src/assets/css/sftable.css
 create mode 100644 src/views/about/index.vue
 create mode 100644 src/views/layout.vue

diff --git a/src/App.vue b/src/App.vue
index f0be851..cba71f2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,14 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
-  <div >
-    <router-view/>
+  <div>
+    <router-view />
   </div>
 </template>
 
 <style scoped>
+@import "./assets/css/main.css";
 .logo {
   height: 6em;
   padding: 1.5em;
diff --git a/src/assets/css/color.scss b/src/assets/css/color.scss
new file mode 100644
index 0000000..d14a1ce
--- /dev/null
+++ b/src/assets/css/color.scss
@@ -0,0 +1,16 @@
+$theme-primary: #764CF6;
+$theme-darker: #C1B2E5;
+$theme-dark: #DFD7F2;
+$basic-white: #FFFFFF;
+$basic-black: #000000;
+
+$text-disabled: #C3C3C3;
+$text-basic: #939393;
+$text-theme: #6D5C9C;
+
+$border-theme: #C1B2E5;
+
+$input-bg: #777777;
+
+$btn-primary: #774FF6;
+$btn-basic: #EEEAF7;
\ No newline at end of file
diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
new file mode 100644
index 0000000..29d6974
--- /dev/null
+++ b/src/assets/css/common.scss
@@ -0,0 +1,46 @@
+@import "color.scss";
+
+.ant-btn:active,
+.ant-btn:hover,
+.ant-btn:focus {
+  border-color: $theme-primary;
+}
+
+.btnt {
+  text-align: center;
+  line-height: 30px;
+  padding: 0;
+  margin: 0 10px;
+  border-radius: 20px;
+}
+.basic-btn {
+  background: $btn-basic;
+  color: $btn-primary;
+  @extend .btnt;
+}
+.primary-btn {
+  background: $btn-primary;
+  color: $basic-white;
+  @extend .btnt;
+}
+
+.border-btm {
+  border-bottom: 1px solid #707070;
+}
+.border-707070 {
+  border: 1px solid #707070;
+}
+.border-btm-dark {
+  border-bottom: 1px solid #dfd7f2;
+}
+
+.theme-color {
+  color: $theme-primary;
+}
+.border-btm-darker {
+  border-bottom: 1px solid $theme-darker;
+}
+
+.theme-color {
+  color: $theme-primary;
+}
diff --git a/src/assets/css/coverantdv.css b/src/assets/css/coverantdv.css
new file mode 100644
index 0000000..7fd3c54
--- /dev/null
+++ b/src/assets/css/coverantdv.css
@@ -0,0 +1,122 @@
+/* 重写antdv组件样式 */
+/* 尽量在自定义class下覆盖原组件样式，避免影响其他人定义的样式 */
+.bg-grey .ant-input {
+    background: #777777 !important;
+    color: #fff
+}
+
+.ant-btn-primary {
+    /* background: #5665D8 !important; */
+    background: #764CF6 !important;
+    border: none !important;
+}
+
+.ant-btn-origin {
+    color: #fff !important;
+    background: #f0933c !important;
+}
+
+.ant-btn-grey {
+    background: #777777 !important;
+    color: #fff !important;
+}
+
+/* 自动 */
+.ant-btn-370D9B {
+    background: #370D9B !important;
+    color: #fff !important;
+}
+
+/* 上架 */
+.ant-btn-764CF6 {
+    background: #764CF6 !important;
+    color: #fff !important;
+}
+
+/* 下架 */
+.ant-btn-FF5C62 {
+    background: #FF5C62 !important;
+    color: #fff !important;
+}
+
+/* 已下架 */
+.ant-btn-646364 {
+    background: #646364 !important;
+    color: #fff !important;
+}
+
+/* 取消 */
+.ant-btn-C1B2E5 {
+    background: #C1B2E5 !important;
+    color: #fff !important;
+}
+
+.fl-table .ant-table-thead .ant-table-cell {
+    background-color: #DFD7F2 !important;
+}
+
+.fl-table {
+    box-shadow: 3px 3px 3px #DFD7F2;
+    border-radius: 20px;
+    overflow: hidden;
+    color: #000000;
+}
+
+/* .fl-table td,
+.fl-table th {
+    border-right: none !important
+} */
+
+/* .ant-layout {
+    min-width: 800px
+} */
+
+/* .ant-layout-content {
+    margin: 0px 0px 0px 20px !important;
+} */
+.ant-layout-content {
+    min-width: 1366px !important;
+}
+
+.fl-modal-artwork .ant-modal-content {
+    background: none !important;
+    box-shadow: none !important
+}
+
+.fl-sf-modal .ant-modal-content {
+    border-radius: 20px;
+}
+
+.fl-sf-modal .ant-modal-body {
+    padding: 0;
+}
+
+.resize-textarea textarea {
+    resize: none
+}
+
+.resize-textarea {
+    resize: none
+}
+
+.sf-full-modal .ant-modal {
+    max-width: 100%;
+    top: 0;
+    padding-bottom: 0;
+    margin: 0;
+    width: 100% !important
+}
+
+.sf-full-modal .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+.sf-full-modal .ant-modal-body {
+    flex: 1;
+}
+
+.ant-input-disabled {
+    color: rgba(0, 0, 0) !important;
+}
\ No newline at end of file
diff --git a/src/assets/css/icon.css b/src/assets/css/icon.css
new file mode 100644
index 0000000..3877b2e
--- /dev/null
+++ b/src/assets/css/icon.css
@@ -0,0 +1,23 @@
+/* fallback */
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialicons/v135/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+}
+
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
\ No newline at end of file
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
new file mode 100644
index 0000000..093dadd
--- /dev/null
+++ b/src/assets/css/main.css
@@ -0,0 +1,40 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    overflow: inherit;
+}
+
+#app {
+    font-family: '苹方-简';
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    /* text-align: center; */
+    color: #2c3e50;
+    font-size: 14px;
+    font-weight: Regular;
+}
+
+.content {
+    width: auto;
+    height: 100%;
+    padding: 10px;
+    overflow-y: scroll;
+    box-sizing: border-box;
+}
+
+@import "./sfcommon.css";
+@import "./sfform.css";
+@import "./sftable.css";
+@import "./sfstatus.css";
+@import "./sffont.css";
+@import "./sfstatic.css";
+@import "./coverantdv.css";
+@import "./sfanimate.css";
+@import "./icon.css";
+@import "./sfcard.css";
diff --git a/src/assets/css/modal.scss b/src/assets/css/modal.scss
new file mode 100644
index 0000000..8553f3a
--- /dev/null
+++ b/src/assets/css/modal.scss
@@ -0,0 +1,20 @@
+.my-modal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.6);
+  padding: 10px 105px 32px 67px;
+  .modal-dialog {
+    height: 908px;
+  }
+}
+.artwork-modal-content {
+  max-height: 650px;
+  min-height: 600px;
+  overflow: auto;
+}
diff --git a/src/assets/css/sfanimate.css b/src/assets/css/sfanimate.css
new file mode 100644
index 0000000..b5d6bb9
--- /dev/null
+++ b/src/assets/css/sfanimate.css
@@ -0,0 +1,116 @@
+.stack--slamet .stack__item--reject {
+    -webkit-animation: slametReject 0.5s forwards;
+    animation: slametReject 0.5s forwards;
+}
+
+@-webkit-keyframes slametReject {
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 200px, 0);
+        transform: translate3d(0, 200px, 0);
+    }
+}
+
+@keyframes slametReject {
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 200px, 0);
+        transform: translate3d(0, 200px, 0);
+    }
+}
+
+.stack--slamet .stack__item--accept {
+    -webkit-animation: slametAccept 0.6s forwards;
+    animation: slametAccept 0.6s forwards;
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+}
+
+@-webkit-keyframes slametAccept {
+    40% {
+        -webkit-animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
+        animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
+        -webkit-transform: translate3d(0, 20%, 0) scale3d(1.1, 1.1, 1);
+        transform: translate3d(0, 20%, 0) scale3d(1.1, 1.1, 1);
+    }
+    80% {
+        opacity: 1;
+        -webkit-transform: translate3d(0, -280px, 0) scale3d(0.1, 0.1, 1);
+        transform: translate3d(0, -280px, 0) scale3d(0.1, 0.1, 1);
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -250px, 0) scale3d(0.05, 0.05, 1);
+        transform: translate3d(0, -250px, 0) scale3d(0.05, 0.05, 1);
+    }
+}
+
+@keyframes slametAccept {
+    40% {
+        -webkit-animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
+        animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
+        -webkit-transform: translate3d(0, 20%, 0) scale3d(1.1, 1.1, 1);
+        transform: translate3d(0, 20%, 0) scale3d(1.1, 1.1, 1);
+    }
+    80% {
+        opacity: 1;
+        -webkit-transform: translate3d(0, -280px, 0) scale3d(0.1, 0.1, 1);
+        transform: translate3d(0, -280px, 0) scale3d(0.1, 0.1, 1);
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -250px, 0) scale3d(0.05, 0.05, 1);
+        transform: translate3d(0, -250px, 0) scale3d(0.05, 0.05, 1);
+    }
+}
+
+.stack--slamet .stack__item--last {
+    -webkit-animation: slametLast 0.5s forwards;
+    animation: slametLast 0.5s forwards;
+    -webkit-transform-origin: 0% 100%;
+    transform-origin: 0% 100%;
+}
+
+@-webkit-keyframes slametLast {
+    to {
+        -webkit-transform: translate3d(-150px, 0, 0) scale3d(0.7, 0.7, 1)
+            rotate3d(0, 1, 1, -90deg);
+        transform: translate3d(-150px, 0, 0) scale3d(1, 0.7, 0.7)
+            rotate3d(0, 1, 0, -90deg);
+    }
+}
+
+@keyframes slametLast {
+    to {
+        -webkit-transform: translate3d(-150px, 0, 0) scale3d(0.7, 0.7, 1)
+            rotate3d(0, 1, 1, -90deg);
+        transform: translate3d(-150px, 0, 0) scale3d(0.8, 0.8, 0.8)
+            rotate3d(0, 1, 0, -90deg);
+    }
+}
+.stack--slamet .stack__item--next {
+    -webkit-animation: slametNext 0.5s forwards;
+    animation: slametNext 0.5s forwards;
+    -webkit-transform-origin: 100% 50%;
+    transform-origin: 100% 50%;
+}
+
+@-webkit-keyframes slametNext {
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(150px, 0, 0) scale3d(0.7, 0.7, 1)
+            rotate3d(0, 1, 0, 90deg);
+        transform: translate3d(150px, 0, 0) scale3d(0.7, 0.7, 1)
+            rotate3d(0, 1, 0, 90deg);
+    }
+}
+
+@keyframes slametNext {
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(150px, 0, 0) scale3d(0.7, 0.7, 1)
+            rotate3d(0, 1, 0, 90deg);
+        transform: translate3d(150px, 0, 0) scale3d(0.7, 0.7, 1)
+            rotate3d(0, 1, 0, 90deg);
+    }
+}
diff --git a/src/assets/css/sfcard.css b/src/assets/css/sfcard.css
new file mode 100644
index 0000000..a56d8d3
--- /dev/null
+++ b/src/assets/css/sfcard.css
@@ -0,0 +1,7 @@
+.fl-card {
+    border-radius: 16px;
+    background-color: #fff;
+    padding: 16px;
+    box-shadow: 0 1px 2px -2px rgb(0 0 0 / 20%),
+        0 2px 2px 0px rgb(0 0 0 / 14%), 0 1px 0px 1px rgb(0 0 0 / 12%);
+}
\ No newline at end of file
diff --git a/src/assets/css/sfcommon.css b/src/assets/css/sfcommon.css
new file mode 100644
index 0000000..46721af
--- /dev/null
+++ b/src/assets/css/sfcommon.css
@@ -0,0 +1,504 @@
+.cursor {
+    cursor: pointer;
+}
+
+.fl-page-width {
+    max-width: 1200px;
+    margin: auto;
+}
+
+.flex {
+    display: flex;
+}
+
+.align-center {
+    align-items: center;
+}
+
+.flex-wrap {
+    flex-wrap: wrap;
+}
+
+.column {
+    flex-direction: column;
+}
+
+.items-start {
+    align-items: flex-start !important;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.content-start {
+    align-content: flex-start !important;
+}
+
+.content-center {
+    align-items: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.justify-around {
+    justify-content: space-around;
+}
+
+.justify-end {
+    justify-content: flex-end;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.relative {
+    position: relative;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.text-center {
+    text-align: center !important;
+}
+
+.text-right {
+    text-align: right !important;
+}
+
+.text-left {
+    text-align: left !important;
+}
+
+.no-link {
+    text-decoration: none;
+}
+
+.sf-link {
+    color: #409eff;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.title {
+    font-size: 16px;
+    /* font-weight: bold; */
+    color: #b8bac9;
+    margin: 10px 0;
+}
+
+.sf-text-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.overflow-auto {
+    overflow: auto;
+}
+
+.overflow-hidden {
+    overflow: hidden;
+}
+
+.width-100 {
+    width: 100%;
+}
+
+.height-100 {
+    height: 100%;
+}
+
+.maxH-100 {
+    max-height: 100%;
+}
+
+.display-none {
+    display: none;
+}
+
+.fl-pa-sm {
+    padding: 8px !important;
+}
+
+.fl-pb-xs {
+    padding-bottom: 4px !important;
+}
+
+.fl-pa-xs {
+    padding: 4px !important;
+}
+
+.fl-py-xs {
+    padding-top: 4px !important;
+    padding-bottom: 4px !important;
+}
+
+.m-auto {
+    margin: auto
+}
+
+.fl-mx-xs {
+    margin-left: 4px !important;
+    margin-right: 4px !important;
+}
+
+.fl-my-xs {
+    margin-top: 4px !important;
+    margin-bottom: 4px !important;
+}
+
+.fl-ml-xs {
+    margin-left: 4px !important;
+}
+
+.fl-mt-xs {
+    margin-top: 4px !important;
+}
+
+.fl-pt-xs {
+    padding-top: 4px !important;
+}
+
+.fl-pl-xs {
+    padding-left: 4px !important;
+}
+
+.fl-pl-sm {
+    padding-left: 8px !important;
+}
+
+.fl-pr-sm {
+    padding-right: 8px !important;
+}
+
+.fl-pt-sm {
+    padding-top: 8px !important;
+}
+
+.fl-pb-sm {
+    padding-bottom: 8px !important;
+}
+
+.fl-px-sm {
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+}
+
+.fl-px-xs {
+    padding-left: 4px !important;
+    padding-right: 4px !important;
+}
+
+.fl-py-sm {
+    padding-top: 8px !important;
+    padding-bottom: 8px !important;
+}
+
+.fl-pa-md {
+    padding: 16px !important;
+}
+
+.fl-pl-md {
+    padding-left: 16px !important;
+}
+
+.fl-pr-md {
+    padding-right: 16px !important;
+}
+
+.fl-pt-md {
+    padding-top: 16px !important;
+}
+
+.fl-pb-md {
+    padding-bottom: 16px !important;
+}
+
+.fl-px-md {
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+}
+
+.fl-py-md {
+    padding-top: 16px !important;
+    padding-bottom: 16px !important;
+}
+
+.fl-pa-lg {
+    padding: 24px !important;
+}
+
+.fl-pl-lg {
+    padding-left: 24px !important;
+}
+
+.fl-pr-lg {
+    padding-right: 24px !important;
+}
+
+.fl-pt-lg {
+    padding-top: 24px !important;
+}
+
+.fl-pb-lg {
+    padding-bottom: 24px !important;
+}
+
+.fl-px-lg {
+    padding-left: 24px !important;
+    padding-right: 24px !important;
+}
+
+.fl-py-lg {
+    padding-top: 24px !important;
+    padding-bottom: 24px !important;
+}
+
+.fl-ma-sm {
+    margin: 8px !important;
+}
+
+.fl-ma-xs {
+    margin: 4px !important;
+}
+
+.fl-ml-sm {
+    margin-left: 8px !important;
+}
+
+.fl-mr-sm {
+    margin-right: 8px !important;
+}
+
+.fl-mt-sm {
+    margin-top: 8px !important;
+}
+
+.fl-mb-xs {
+    margin-bottom: 4px !important;
+}
+
+.fl-mb-sm {
+    margin-bottom: 8px !important;
+}
+
+.fl-mx-sm {
+    margin-left: 8px !important;
+    margin-right: 8px !important;
+}
+
+.fl-my-sm {
+    margin-top: 8px !important;
+    margin-bottom: 8px !important;
+}
+
+.fl-ma-md {
+    margin: 16px !important;
+}
+
+.fl-ml-md {
+    margin-left: 16px !important;
+}
+
+.fl-mr-md {
+    margin-right: 16px !important;
+}
+
+.fl-mt-md {
+    margin-top: 16px !important;
+}
+
+
+.fl-mb-md {
+    margin-bottom: 16px !important;
+}
+
+.fl-mx-md {
+    margin-left: 16px !important;
+    margin-right: 16px !important;
+}
+
+.fl-my-md {
+    margin-top: 16px !important;
+    margin-bottom: 16px !important;
+}
+
+.fl-ma-lg {
+    margin: 24px !important;
+}
+
+.fl-ml-lg {
+    margin-left: 24px !important;
+}
+
+.fl-mr-lg {
+    margin-right: 24px !important;
+}
+
+.fl-mt-lg {
+    margin-top: 24px !important;
+}
+
+.fl-mb-lg {
+    margin-bottom: 24px !important;
+}
+
+.fl-mx-lg {
+    margin-left: 24px !important;
+    margin-right: 24px !important;
+}
+
+.fl-my-lg {
+    margin-top: 24px !important;
+    margin-bottom: 24px !important;
+}
+
+.border-box {
+    box-sizing: border-box;
+}
+
+.border-dashed {
+    border: 2px dashed rgba(145, 148, 99, 0.6);
+    border-radius: 5px
+}
+
+.box-content {
+    box-sizing: content-box;
+}
+
+.box-border {
+    box-sizing: border-box;
+}
+
+* ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+* ::-webkit-scrollbar-track {
+    border-radius: 3px;
+    background: rgba(0, 0, 0, 0.06);
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
+}
+
+* ::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.link-area {
+    display: flex;
+    align-items: center;
+    color: #409eff;
+}
+
+.bg-white {
+    background: #ffffff !important;
+}
+
+.bg-grey {
+    background: #777777 !important;
+}
+
+.bg-grey-1 {
+    background: #b4b0b0 !important;
+}
+
+.bg-black {
+    background: #000 !important;
+}
+
+.bg-764CF6 {
+    background: #764CF6 !important;
+}
+
+.bg-370D9B {
+    background: #370D9B !important;
+}
+
+.bg-b2b2c6 {
+    background: #b2b2c6
+}
+
+.bg-fff {
+    background-color: #fff !important;
+}
+
+.bg-primary {
+    /* background-color: #3aace8 !important; */
+    background-color: #764CF6 !important;
+}
+
+.bg-danger {
+    background-color: #ef136e
+}
+
+.color-white {
+    color: #fff !important;
+}
+
+.color-danger {
+    color: #ef136e !important;
+}
+
+.color-primary {
+    color: #3aace8 !important;
+}
+
+.color-764CF6 {
+    color: #764CF6 !important;
+}
+
+.color-info {
+    color: #4ed80e !important;
+}
+
+.color-draft {
+    color: #b0bce0 !important;
+}
+
+.color-yellow {
+    color: orange !important;
+}
+
+.color-black {
+    color: #000 !important;
+}
+
+.color-grey {
+    color: rgb(163, 156, 156) !important;
+}
+
+.index-container {
+    padding: 20px 30px 0 30px;
+    background: #fff;
+    border-radius: 5px;
+}
+
+.no-radius {
+    border-radius: none;
+}
+
+.no-shadow {
+    box-shadow: none;
+}
+
+.no-margin {
+    margin: none;
+}
+
+.no-padding {
+    padding: none;
+}
+
+.border-1 {
+    /* border: 1px solid rgb(65, 62, 62) */
+    border: 1px solid #E3DFEA;
+}
\ No newline at end of file
diff --git a/src/assets/css/sffont.css b/src/assets/css/sffont.css
new file mode 100644
index 0000000..6f25686
--- /dev/null
+++ b/src/assets/css/sffont.css
@@ -0,0 +1,39 @@
+.title-h1 {
+    font-size: 20px;
+    font-weight: bolder;
+    line-height: 1.19;
+    letter-spacing: 0.02em;
+}
+
+.subtitle-14 {
+    font-size: 14px;
+    line-height: 20px;
+    color: #999;
+    letter-spacing: 0.02em;
+}
+
+.line-height-20 {
+    line-height: 20px;
+}
+
+.font-14 {
+    font-size: 14px;
+}
+
+.font-12 {
+    font-size: 12px;
+}
+
+.font-16 {
+    font-size: 16px;
+}
+
+.font-18 {
+    font-size: 18px;
+}
+
+.fl-text-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
\ No newline at end of file
diff --git a/src/assets/css/sfform.css b/src/assets/css/sfform.css
new file mode 100644
index 0000000..2e9286f
--- /dev/null
+++ b/src/assets/css/sfform.css
@@ -0,0 +1,1218 @@
+.container {
+    padding: 30px;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.border-radius-4 {
+    border-radius: 4px !important
+}
+
+.border-radius-8 {
+    border-radius: 8px !important
+}
+
+.border-radius-16 {
+    border-radius: 16px !important
+}
+
+.flex,
+.row {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+@media (min-width: 0) {
+
+    .flex>.col,
+    .flex>.col-0,
+    .flex>.col-1,
+    .flex>.col-2,
+    .flex>.col-3,
+    .flex>.col-4,
+    .flex>.col-5,
+    .flex>.col-6,
+    .flex>.col-7,
+    .flex>.col-8,
+    .flex>.col-9,
+    .flex>.col-10,
+    .flex>.col-11,
+    .flex>.col-12,
+    .flex>.col-auto,
+    .flex>.col-grow,
+    .flex>.col-shrink,
+    .flex>.col-xs,
+    .flex>.col-xs-0,
+    .flex>.col-xs-1,
+    .flex>.col-xs-2,
+    .flex>.col-xs-3,
+    .flex>.col-xs-4,
+    .flex>.col-xs-5,
+    .flex>.col-xs-6,
+    .flex>.col-xs-7,
+    .flex>.col-xs-8,
+    .flex>.col-xs-9,
+    .flex>.col-xs-10,
+    .flex>.col-xs-11,
+    .flex>.col-xs-12,
+    .flex>.col-xs-auto,
+    .flex>.col-xs-grow,
+    .flex>.col-xs-shrink,
+    .row>.col,
+    .row>.col-0,
+    .row>.col-1,
+    .row>.col-2,
+    .row>.col-3,
+    .row>.col-4,
+    .row>.col-5,
+    .row>.col-6,
+    .row>.col-7,
+    .row>.col-8,
+    .row>.col-9,
+    .row>.col-10,
+    .row>.col-11,
+    .row>.col-12,
+    .row>.col-auto,
+    .row>.col-grow,
+    .row>.col-shrink,
+    .row>.col-xs,
+    .row>.col-xs-0,
+    .row>.col-xs-1,
+    .row>.col-xs-2,
+    .row>.col-xs-3,
+    .row>.col-xs-4,
+    .row>.col-xs-5,
+    .row>.col-xs-6,
+    .row>.col-xs-7,
+    .row>.col-xs-8,
+    .row>.col-xs-9,
+    .row>.col-xs-10,
+    .row>.col-xs-11,
+    .row>.col-xs-12,
+    .row>.col-xs-auto,
+    .row>.col-xs-grow,
+    .row>.col-xs-shrink {
+        width: auto;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .flex>.col,
+    .flex>.col-0,
+    .flex>.col-1,
+    .flex>.col-2,
+    .flex>.col-3,
+    .flex>.col-4,
+    .flex>.col-5,
+    .flex>.col-6,
+    .flex>.col-7,
+    .flex>.col-8,
+    .flex>.col-9,
+    .flex>.col-10,
+    .flex>.col-11,
+    .flex>.col-12,
+    .flex>.col-auto,
+    .flex>.col-grow,
+    .flex>.col-shrink,
+    .flex>.col-xs,
+    .flex>.col-xs-0,
+    .flex>.col-xs-1,
+    .flex>.col-xs-2,
+    .flex>.col-xs-3,
+    .flex>.col-xs-4,
+    .flex>.col-xs-5,
+    .flex>.col-xs-6,
+    .flex>.col-xs-7,
+    .flex>.col-xs-8,
+    .flex>.col-xs-9,
+    .flex>.col-xs-10,
+    .flex>.col-xs-11,
+    .flex>.col-xs-12,
+    .flex>.col-xs-auto,
+    .flex>.col-xs-grow,
+    .flex>.col-xs-shrink {
+        height: auto;
+        min-height: 0;
+        max-height: 100%;
+    }
+
+    .col,
+    .col-xs {
+        flex: 10000 1 0%;
+    }
+
+    .col-0,
+    .col-1,
+    .col-2,
+    .col-3,
+    .col-4,
+    .col-5,
+    .col-6,
+    .col-7,
+    .col-8,
+    .col-9,
+    .col-10,
+    .col-11,
+    .col-12,
+    .col-auto,
+    .col-xs-0,
+    .col-xs-1,
+    .col-xs-2,
+    .col-xs-3,
+    .col-xs-4,
+    .col-xs-5,
+    .col-xs-6,
+    .col-xs-7,
+    .col-xs-8,
+    .col-xs-9,
+    .col-xs-10,
+    .col-xs-11,
+    .col-xs-12,
+    .col-xs-auto {
+        flex: 0 0 auto;
+    }
+
+    .col-grow,
+    .col-xs-grow {
+        flex: 1 0 auto;
+    }
+
+    .col-shrink,
+    .col-xs-shrink {
+        flex: 0 1 auto;
+    }
+
+    .row>.col-0,
+    .row>.col-xs-0 {
+        height: auto;
+        width: 0%;
+    }
+
+    .row>.offset-0,
+    .row>.offset-xs-0 {
+        margin-left: 0%;
+    }
+
+    .row>.col-1,
+    .row>.col-xs-1 {
+        height: auto;
+        width: 8.3333%;
+    }
+
+    .row>.offset-1,
+    .row>.offset-xs-1 {
+        margin-left: 8.3333%;
+    }
+
+    .row>.col-2,
+    .row>.col-xs-2 {
+        height: auto;
+        width: 16.6667%;
+    }
+
+    .row>.offset-2,
+    .row>.offset-xs-2 {
+        margin-left: 16.6667%;
+    }
+
+    .row>.col-3,
+    .row>.col-xs-3 {
+        height: auto;
+        width: 25% !important;
+    }
+
+    .row>.offset-3,
+    .row>.offset-xs-3 {
+        margin-left: 25%;
+    }
+
+    .row>.col-4,
+    .row>.col-xs-4 {
+        height: auto;
+        width: 33.3333%;
+    }
+
+    .row>.offset-4,
+    .row>.offset-xs-4 {
+        margin-left: 33.3333%;
+    }
+
+    .row>.col-5,
+    .row>.col-xs-5 {
+        height: auto;
+        width: 41.6667%;
+    }
+
+    .row>.offset-5,
+    .row>.offset-xs-5 {
+        margin-left: 41.6667%;
+    }
+
+    .row>.col-6,
+    .row>.col-xs-6 {
+        height: auto;
+        width: 50%;
+    }
+
+    .row>.offset-6,
+    .row>.offset-xs-6 {
+        margin-left: 50%;
+    }
+
+    .row>.col-7,
+    .row>.col-xs-7 {
+        height: auto;
+        width: 58.3333%;
+    }
+
+    .row>.offset-7,
+    .row>.offset-xs-7 {
+        margin-left: 58.3333%;
+    }
+
+    .row>.col-8,
+    .row>.col-xs-8 {
+        height: auto;
+        width: 66.6667%;
+    }
+
+    .row>.offset-8,
+    .row>.offset-xs-8 {
+        margin-left: 66.6667%;
+    }
+
+    .row>.col-9,
+    .row>.col-xs-9 {
+        height: auto;
+        width: 75%;
+    }
+
+    .row>.offset-9,
+    .row>.offset-xs-9 {
+        margin-left: 75%;
+    }
+
+    .row>.col-10,
+    .row>.col-xs-10 {
+        height: auto;
+        width: 83.3333%;
+    }
+
+    .row>.offset-10,
+    .row>.offset-xs-10 {
+        margin-left: 83.3333%;
+    }
+
+    .row>.col-11,
+    .row>.col-xs-11 {
+        height: auto;
+        width: 91.6667%;
+    }
+
+    .row>.offset-11,
+    .row>.offset-xs-11 {
+        margin-left: 91.6667%;
+    }
+
+    .row>.col-12,
+    .row>.col-xs-12 {
+        height: auto;
+        width: 100%;
+    }
+
+    .row>.offset-12,
+    .row>.offset-xs-12 {
+        margin-left: 100%;
+    }
+
+    .row>.col-all {
+        height: auto;
+        flex: 0 0 100%;
+    }
+}
+
+@media (min-width: 600px) {
+
+    .flex>.col-sm,
+    .flex>.col-sm-0,
+    .flex>.col-sm-1,
+    .flex>.col-sm-2,
+    .flex>.col-sm-3,
+    .flex>.col-sm-4,
+    .flex>.col-sm-5,
+    .flex>.col-sm-6,
+    .flex>.col-sm-7,
+    .flex>.col-sm-8,
+    .flex>.col-sm-9,
+    .flex>.col-sm-10,
+    .flex>.col-sm-11,
+    .flex>.col-sm-12,
+    .flex>.col-sm-auto,
+    .flex>.col-sm-grow,
+    .flex>.col-sm-shrink,
+    .row>.col-sm,
+    .row>.col-sm-0,
+    .row>.col-sm-1,
+    .row>.col-sm-2,
+    .row>.col-sm-3,
+    .row>.col-sm-4,
+    .row>.col-sm-5,
+    .row>.col-sm-6,
+    .row>.col-sm-7,
+    .row>.col-sm-8,
+    .row>.col-sm-9,
+    .row>.col-sm-10,
+    .row>.col-sm-11,
+    .row>.col-sm-12,
+    .row>.col-sm-auto,
+    .row>.col-sm-grow,
+    .row>.col-sm-shrink {
+        width: auto;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .flex>.col-sm,
+    .flex>.col-sm-0,
+    .flex>.col-sm-1,
+    .flex>.col-sm-2,
+    .flex>.col-sm-3,
+    .flex>.col-sm-4,
+    .flex>.col-sm-5,
+    .flex>.col-sm-6,
+    .flex>.col-sm-7,
+    .flex>.col-sm-8,
+    .flex>.col-sm-9,
+    .flex>.col-sm-10,
+    .flex>.col-sm-11,
+    .flex>.col-sm-12,
+    .flex>.col-sm-auto,
+    .flex>.col-sm-grow,
+    .flex>.col-sm-shrink {
+        height: auto;
+        min-height: 0;
+        max-height: 100%;
+    }
+
+    .col-sm {
+        flex: 10000 1 0%;
+    }
+
+    .col-sm-0,
+    .col-sm-1,
+    .col-sm-2,
+    .col-sm-3,
+    .col-sm-4,
+    .col-sm-5,
+    .col-sm-6,
+    .col-sm-7,
+    .col-sm-8,
+    .col-sm-9,
+    .col-sm-10,
+    .col-sm-11,
+    .col-sm-12,
+    .col-sm-auto {
+        flex: 0 0 auto;
+    }
+
+    .col-sm-grow {
+        flex: 1 0 auto;
+    }
+
+    .col-sm-shrink {
+        flex: 0 1 auto;
+    }
+
+    .row>.col-sm-0 {
+        height: auto;
+        width: 0%;
+    }
+
+    .row>.offset-sm-0 {
+        margin-left: 0%;
+    }
+
+    .row>.col-sm-1 {
+        height: auto;
+        width: 8.3333%;
+    }
+
+    .row>.offset-sm-1 {
+        margin-left: 8.3333%;
+    }
+
+    .row>.col-sm-2 {
+        height: auto;
+        width: 16.6667%;
+    }
+
+    .row>.offset-sm-2 {
+        margin-left: 16.6667%;
+    }
+
+    .row>.col-sm-3 {
+        height: auto;
+        width: 25%;
+    }
+
+    .row>.offset-sm-3 {
+        margin-left: 25%;
+    }
+
+    .row>.col-sm-4 {
+        height: auto;
+        width: 33.3333%;
+    }
+
+    .row>.offset-sm-4 {
+        margin-left: 33.3333%;
+    }
+
+    .row>.col-sm-5 {
+        height: auto;
+        width: 41.6667%;
+    }
+
+    .row>.offset-sm-5 {
+        margin-left: 41.6667%;
+    }
+
+    .row>.col-sm-6 {
+        height: auto;
+        width: 50%;
+    }
+
+    .row>.offset-sm-6 {
+        margin-left: 50%;
+    }
+
+    .row>.col-sm-7 {
+        height: auto;
+        width: 58.3333%;
+    }
+
+    .row>.offset-sm-7 {
+        margin-left: 58.3333%;
+    }
+
+    .row>.col-sm-8 {
+        height: auto;
+        width: 66.6667% !important;
+    }
+
+    .row>.offset-sm-8 {
+        margin-left: 66.6667%;
+    }
+
+    .row>.col-sm-9 {
+        height: auto;
+        width: 75%;
+    }
+
+    .row>.offset-sm-9 {
+        margin-left: 75%;
+    }
+
+    .row>.col-sm-10 {
+        height: auto;
+        width: 83.3333%;
+    }
+
+    .row>.offset-sm-10 {
+        margin-left: 83.3333%;
+    }
+
+    .row>.col-sm-11 {
+        height: auto;
+        width: 91.6667%;
+    }
+
+    .row>.offset-sm-11 {
+        margin-left: 91.6667%;
+    }
+
+    .row>.col-sm-12 {
+        height: auto;
+        width: 100%;
+    }
+
+    .row>.offset-sm-12 {
+        margin-left: 100%;
+    }
+}
+
+@media (min-width: 1024px) {
+
+    .flex>.col-md,
+    .flex>.col-md-0,
+    .flex>.col-md-1,
+    .flex>.col-md-2,
+    .flex>.col-md-3,
+    .flex>.col-md-4,
+    .flex>.col-md-5,
+    .flex>.col-md-6,
+    .flex>.col-md-7,
+    .flex>.col-md-8,
+    .flex>.col-md-9,
+    .flex>.col-md-10,
+    .flex>.col-md-11,
+    .flex>.col-md-12,
+    .flex>.col-md-auto,
+    .flex>.col-md-grow,
+    .flex>.col-md-shrink,
+    .row>.col-md,
+    .row>.col-md-0,
+    .row>.col-md-1,
+    .row>.col-md-2,
+    .row>.col-md-3,
+    .row>.col-md-4,
+    .row>.col-md-5,
+    .row>.col-md-6,
+    .row>.col-md-7,
+    .row>.col-md-8,
+    .row>.col-md-9,
+    .row>.col-md-10,
+    .row>.col-md-11,
+    .row>.col-md-12,
+    .row>.col-md-auto,
+    .row>.col-md-grow,
+    .row>.col-md-shrink {
+        width: auto;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .flex>.col-md,
+    .flex>.col-md-0,
+    .flex>.col-md-1,
+    .flex>.col-md-2,
+    .flex>.col-md-3,
+    .flex>.col-md-4,
+    .flex>.col-md-5,
+    .flex>.col-md-6,
+    .flex>.col-md-7,
+    .flex>.col-md-8,
+    .flex>.col-md-9,
+    .flex>.col-md-10,
+    .flex>.col-md-11,
+    .flex>.col-md-12,
+    .flex>.col-md-auto,
+    .flex>.col-md-grow,
+    .flex>.col-md-shrink {
+        height: auto;
+        min-height: 0;
+        max-height: 100%;
+    }
+
+    .col-md {
+        flex: 10000 1 0%;
+    }
+
+    .col-md-0,
+    .col-md-1,
+    .col-md-2,
+    .col-md-3,
+    .col-md-4,
+    .col-md-5,
+    .col-md-6,
+    .col-md-7,
+    .col-md-8,
+    .col-md-9,
+    .col-md-10,
+    .col-md-11,
+    .col-md-12,
+    .col-md-auto {
+        flex: 0 0 auto;
+    }
+
+    .col-md-grow {
+        flex: 1 0 auto;
+    }
+
+    .col-md-shrink {
+        flex: 0 1 auto;
+    }
+
+    .row>.col-md-0 {
+        height: auto;
+        width: 0%;
+    }
+
+    .row>.offset-md-0 {
+        margin-left: 0%;
+    }
+
+    .row>.col-md-1 {
+        height: auto;
+        width: 8.3333%;
+    }
+
+    .row>.offset-md-1 {
+        margin-left: 8.3333%;
+    }
+
+    .row>.col-md-2 {
+        height: auto;
+        width: 16.6667%;
+    }
+
+    .row>.offset-md-2 {
+        margin-left: 16.6667%;
+    }
+
+    .row>.col-md-3 {
+        height: auto;
+        width: 25%;
+    }
+
+    .row>.offset-md-3 {
+        margin-left: 25%;
+    }
+
+    .row>.col-md-4 {
+        height: auto;
+        width: 33.3333%;
+    }
+
+    .row>.offset-md-4 {
+        margin-left: 33.3333%;
+    }
+
+    .row>.col-md-5 {
+        height: auto;
+        width: 41.6667%;
+    }
+
+    .row>.offset-md-5 {
+        margin-left: 41.6667%;
+    }
+
+    .row>.col-md-6 {
+        height: auto;
+        width: 50%;
+    }
+
+    .row>.offset-md-6 {
+        margin-left: 50%;
+    }
+
+    .row>.col-md-7 {
+        height: auto;
+        width: 58.3333%;
+    }
+
+    .row>.offset-md-7 {
+        margin-left: 58.3333%;
+    }
+
+    .row>.col-md-8 {
+        height: auto;
+        width: 66.6667%;
+    }
+
+    .row>.offset-md-8 {
+        margin-left: 66.6667%;
+    }
+
+    .row>.col-md-9 {
+        height: auto;
+        width: 75%;
+    }
+
+    .row>.offset-md-9 {
+        margin-left: 75%;
+    }
+
+    .row>.col-md-10 {
+        height: auto;
+        width: 83.3333%;
+    }
+
+    .row>.offset-md-10 {
+        margin-left: 83.3333%;
+    }
+
+    .row>.col-md-11 {
+        height: auto;
+        width: 91.6667%;
+    }
+
+    .row>.offset-md-11 {
+        margin-left: 91.6667%;
+    }
+
+    .row>.col-md-12 {
+        height: auto;
+        width: 100%;
+    }
+
+    .row>.offset-md-12 {
+        margin-left: 100%;
+    }
+}
+
+@media (min-width: 1440px) {
+
+    .flex>.col-lg,
+    .flex>.col-lg-0,
+    .flex>.col-lg-1,
+    .flex>.col-lg-2,
+    .flex>.col-lg-3,
+    .flex>.col-lg-4,
+    .flex>.col-lg-5,
+    .flex>.col-lg-6,
+    .flex>.col-lg-7,
+    .flex>.col-lg-8,
+    .flex>.col-lg-9,
+    .flex>.col-lg-10,
+    .flex>.col-lg-11,
+    .flex>.col-lg-12,
+    .flex>.col-lg-auto,
+    .flex>.col-lg-grow,
+    .flex>.col-lg-shrink,
+    .row>.col-lg,
+    .row>.col-lg-0,
+    .row>.col-lg-1,
+    .row>.col-lg-2,
+    .row>.col-lg-3,
+    .row>.col-lg-4,
+    .row>.col-lg-5,
+    .row>.col-lg-6,
+    .row>.col-lg-7,
+    .row>.col-lg-8,
+    .row>.col-lg-9,
+    .row>.col-lg-10,
+    .row>.col-lg-11,
+    .row>.col-lg-12,
+    .row>.col-lg-auto,
+    .row>.col-lg-grow,
+    .row>.col-lg-shrink {
+        width: auto;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .flex>.col-lg,
+    .flex>.col-lg-0,
+    .flex>.col-lg-1,
+    .flex>.col-lg-2,
+    .flex>.col-lg-3,
+    .flex>.col-lg-4,
+    .flex>.col-lg-5,
+    .flex>.col-lg-6,
+    .flex>.col-lg-7,
+    .flex>.col-lg-8,
+    .flex>.col-lg-9,
+    .flex>.col-lg-10,
+    .flex>.col-lg-11,
+    .flex>.col-lg-12,
+    .flex>.col-lg-auto,
+    .flex>.col-lg-grow,
+    .flex>.col-lg-shrink {
+        height: auto;
+        min-height: 0;
+        max-height: 100%;
+    }
+
+    .col-lg {
+        flex: 10000 1 0%;
+    }
+
+    .col-lg-0,
+    .col-lg-1,
+    .col-lg-2,
+    .col-lg-3,
+    .col-lg-4,
+    .col-lg-5,
+    .col-lg-6,
+    .col-lg-7,
+    .col-lg-8,
+    .col-lg-9,
+    .col-lg-10,
+    .col-lg-11,
+    .col-lg-12,
+    .col-lg-auto {
+        flex: 0 0 auto;
+    }
+
+    .col-lg-grow {
+        flex: 1 0 auto;
+    }
+
+    .col-lg-shrink {
+        flex: 0 1 auto;
+    }
+
+    .row>.col-lg-0 {
+        height: auto;
+        width: 0%;
+    }
+
+    .row>.offset-lg-0 {
+        margin-left: 0%;
+    }
+
+    .row>.col-lg-1 {
+        height: auto;
+        width: 8.3333%;
+    }
+
+    .row>.offset-lg-1 {
+        margin-left: 8.3333%;
+    }
+
+    .row>.col-lg-2 {
+        height: auto;
+        width: 16.6667%;
+    }
+
+    .row>.offset-lg-2 {
+        margin-left: 16.6667%;
+    }
+
+    .row>.col-lg-3 {
+        height: auto;
+        width: 25%;
+    }
+
+    .row>.offset-lg-3 {
+        margin-left: 25%;
+    }
+
+    .row>.col-lg-4 {
+        height: auto;
+        width: 33.3333%;
+    }
+
+    .row>.offset-lg-4 {
+        margin-left: 33.3333%;
+    }
+
+    .row>.col-lg-5 {
+        height: auto;
+        width: 41.6667%;
+    }
+
+    .row>.offset-lg-5 {
+        margin-left: 41.6667%;
+    }
+
+    .row>.col-lg-6 {
+        height: auto;
+        width: 50%;
+    }
+
+    .row>.offset-lg-6 {
+        margin-left: 50%;
+    }
+
+    .row>.col-lg-7 {
+        height: auto;
+        width: 58.3333%;
+    }
+
+    .row>.offset-lg-7 {
+        margin-left: 58.3333%;
+    }
+
+    .row>.col-lg-8 {
+        height: auto;
+        width: 66.6667%;
+    }
+
+    .row>.offset-lg-8 {
+        margin-left: 66.6667%;
+    }
+
+    .row>.col-lg-9 {
+        height: auto;
+        width: 75%;
+    }
+
+    .row>.offset-lg-9 {
+        margin-left: 75%;
+    }
+
+    .row>.col-lg-10 {
+        height: auto;
+        width: 83.3333%;
+    }
+
+    .row>.offset-lg-10 {
+        margin-left: 83.3333%;
+    }
+
+    .row>.col-lg-11 {
+        height: auto;
+        width: 91.6667%;
+    }
+
+    .row>.offset-lg-11 {
+        margin-left: 91.6667%;
+    }
+
+    .row>.col-lg-12 {
+        height: auto;
+        width: 100%;
+    }
+
+    .row>.offset-lg-12 {
+        margin-left: 100%;
+    }
+}
+
+@media (min-width: 1920px) {
+
+    .flex>.col-xl,
+    .flex>.col-xl-0,
+    .flex>.col-xl-1,
+    .flex>.col-xl-2,
+    .flex>.col-xl-3,
+    .flex>.col-xl-4,
+    .flex>.col-xl-5,
+    .flex>.col-xl-6,
+    .flex>.col-xl-7,
+    .flex>.col-xl-8,
+    .flex>.col-xl-9,
+    .flex>.col-xl-10,
+    .flex>.col-xl-11,
+    .flex>.col-xl-12,
+    .flex>.col-xl-auto,
+    .flex>.col-xl-grow,
+    .flex>.col-xl-shrink,
+    .row>.col-xl,
+    .row>.col-xl-0,
+    .row>.col-xl-1,
+    .row>.col-xl-2,
+    .row>.col-xl-3,
+    .row>.col-xl-4,
+    .row>.col-xl-5,
+    .row>.col-xl-6,
+    .row>.col-xl-7,
+    .row>.col-xl-8,
+    .row>.col-xl-9,
+    .row>.col-xl-10,
+    .row>.col-xl-11,
+    .row>.col-xl-12,
+    .row>.col-xl-auto,
+    .row>.col-xl-grow,
+    .row>.col-xl-shrink {
+        width: auto;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .flex>.col-xl,
+    .flex>.col-xl-0,
+    .flex>.col-xl-1,
+    .flex>.col-xl-2,
+    .flex>.col-xl-3,
+    .flex>.col-xl-4,
+    .flex>.col-xl-5,
+    .flex>.col-xl-6,
+    .flex>.col-xl-7,
+    .flex>.col-xl-8,
+    .flex>.col-xl-9,
+    .flex>.col-xl-10,
+    .flex>.col-xl-11,
+    .flex>.col-xl-12,
+    .flex>.col-xl-auto,
+    .flex>.col-xl-grow,
+    .flex>.col-xl-shrink {
+        height: auto;
+        min-height: 0;
+        max-height: 100%;
+    }
+
+    .col-xl {
+        flex: 10000 1 0%;
+    }
+
+    .col-xl-0,
+    .col-xl-1,
+    .col-xl-2,
+    .col-xl-3,
+    .col-xl-4,
+    .col-xl-5,
+    .col-xl-6,
+    .col-xl-7,
+    .col-xl-8,
+    .col-xl-9,
+    .col-xl-10,
+    .col-xl-11,
+    .col-xl-12,
+    .col-xl-auto {
+        flex: 0 0 auto;
+    }
+
+    .col-xl-grow {
+        flex: 1 0 auto;
+    }
+
+    .col-xl-shrink {
+        flex: 0 1 auto;
+    }
+
+    .row>.col-xl-0 {
+        height: auto;
+        width: 0%;
+    }
+
+    .row>.offset-xl-0 {
+        margin-left: 0%;
+    }
+
+    .row>.col-xl-1 {
+        height: auto;
+        width: 8.3333%;
+    }
+
+    .row>.offset-xl-1 {
+        margin-left: 8.3333%;
+    }
+
+    .row>.col-xl-2 {
+        height: auto;
+        width: 16.6667%;
+    }
+
+    .row>.offset-xl-2 {
+        margin-left: 16.6667%;
+    }
+
+    .row>.col-xl-3 {
+        height: auto;
+        width: 25%;
+    }
+
+    .row>.offset-xl-3 {
+        margin-left: 25%;
+    }
+
+    .row>.col-xl-4 {
+        height: auto;
+        width: 33.3333%;
+    }
+
+    .row>.offset-xl-4 {
+        margin-left: 33.3333%;
+    }
+
+    .row>.col-xl-5 {
+        height: auto;
+        width: 41.6667%;
+    }
+
+    .row>.offset-xl-5 {
+        margin-left: 41.6667%;
+    }
+
+    .row>.col-xl-6 {
+        height: auto;
+        width: 50%;
+    }
+
+    .row>.offset-xl-6 {
+        margin-left: 50%;
+    }
+
+    .row>.col-xl-7 {
+        height: auto;
+        width: 58.3333%;
+    }
+
+    .row>.offset-xl-7 {
+        margin-left: 58.3333%;
+    }
+
+    .row>.col-xl-8 {
+        height: auto;
+        width: 66.6667%;
+    }
+
+    .row>.offset-xl-8 {
+        margin-left: 66.6667%;
+    }
+
+    .row>.col-xl-9 {
+        height: auto;
+        width: 75%;
+    }
+
+    .row>.offset-xl-9 {
+        margin-left: 75%;
+    }
+
+    .row>.col-xl-10 {
+        height: auto;
+        width: 83.3333%;
+    }
+
+    .row>.offset-xl-10 {
+        margin-left: 83.3333%;
+    }
+
+    .row>.col-xl-11 {
+        height: auto;
+        width: 91.6667%;
+    }
+
+    .row>.offset-xl-11 {
+        margin-left: 91.6667%;
+    }
+
+    .row>.col-xl-12 {
+        height: auto;
+        width: 100%;
+    }
+
+    .row>.offset-xl-12 {
+        margin-left: 100%;
+    }
+}
+
+.form-label {
+    font-size: 12px;
+    padding: 0 4px;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+.label-required::before {
+    content: "*";
+    color: red;
+    margin-right: 4px;
+}
+
+.fl-title {
+    font-size: 18px;
+    font-weight: bolder;
+    display: flex;
+    align-items: center;
+}
+
+.form-title {
+    font-size: 18px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    color: #6D5C9C;
+    margin: 10px 0;
+}
+
+.form-title::before {
+    content: '|';
+    width: 10px;
+    height: 31px;
+}
+
+.htmleditor>p {
+    margin: 0.63em 0 1.8em 0;
+    font-size: 16px;
+    line-height: 30px;
+}
+
+.htmleditor img {
+    max-width: 100%;
+}
\ No newline at end of file
diff --git a/src/assets/css/sfstatic.css b/src/assets/css/sfstatic.css
new file mode 100644
index 0000000..d81bc0f
--- /dev/null
+++ b/src/assets/css/sfstatic.css
@@ -0,0 +1,11 @@
+
+.fonchain-logo {
+    background-image: url(../image/fonchain.png);
+    cursor: pointer;
+    background-size: cover;
+}
+.clear-icon {
+    background-image: url(../image/clear-icon.jpg);
+    cursor: pointer;
+    background-size:cover;
+}
diff --git a/src/assets/css/sfstatus.css b/src/assets/css/sfstatus.css
new file mode 100644
index 0000000..57dfc35
--- /dev/null
+++ b/src/assets/css/sfstatus.css
@@ -0,0 +1,64 @@
+.status-info {
+    color: #fff !important;
+    background-color: #4ed80e !important;
+}
+
+.status-primary {
+    color: #fff !important;
+    background-color: #3b82c9 !important;
+}
+
+.status-draft {
+    color: #fff !important;
+    background-color: #b0bce0 !important;
+}
+
+.status-danger {
+    color: #fff !important;
+    background-color: #d44545 !important;
+}
+
+.border-yell {
+    border: 1px #e992bd solid;
+    color: #409eff;
+    border-radius: 10px;
+    padding: 1px 4px;
+    margin: 1px 4px;
+}
+
+.border-draft {
+    border: 1px #9c989a solid;
+    color: #9c989a;
+    border-radius: 10%;
+    padding: 1px 4px;
+    margin: 1px 4px;
+}
+
+.border-info {
+    border: 1px #69dd9d solid;
+    color: #69dd9d;
+    border-radius: 10%;
+    padding: 1px 4px;
+    margin: 1px 4px;
+}
+
+.border-primary {
+    border: 1px #027be3 solid;
+    color: #027be3;
+    border-radius: 10%;
+    padding: 1px 4px;
+    margin: 1px 4px;
+}
+
+.border-danger {
+    border: 1px #ef136e solid;
+    color: #ef136e;
+    border-radius: 10%;
+    padding: 1px 4px;
+    margin: 1px 4px;
+}
+
+.sf-status-label {
+    padding: 3px 6px;
+    border-radius: 4px;
+}
\ No newline at end of file
diff --git a/src/assets/css/sftable.css b/src/assets/css/sftable.css
new file mode 100644
index 0000000..cfbddd1
--- /dev/null
+++ b/src/assets/css/sftable.css
@@ -0,0 +1,63 @@
+.commontable {
+    padding-left: 10px;
+    padding-right: 10px;
+    background: #fff;
+    border-radius: 5px;
+}
+
+.commontable .table-td-thumb {
+    display: block;
+    margin: auto;
+    width: 40px;
+    height: 40px;
+}
+
+.commontable-border {
+    position: relative;
+    margin: auto;
+    border-radius: 10px;
+    transition: all 0.3s;
+    cursor: pointer;
+}
+
+.commontable-border:hover {
+    filter: contrast(1.1);
+}
+
+.commontable-border:active {
+    filter: contrast(0.9);
+}
+
+.commontable-border::before,
+.commontable-border::after {
+    content: "";
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    border: 2px solid gold;
+    transition: all 0.5s;
+    animation: clippath 3s infinite linear;
+    border-radius: 10px;
+}
+
+.commontable-border::after {
+    animation: clippath 3s infinite -1.5s linear;
+}
+
+@keyframes clippath {
+    0%,
+    100% {
+        clip-path: inset(0 0 98% 0);
+    }
+    25% {
+        clip-path: inset(0 98% 0 0);
+    }
+    50% {
+        clip-path: inset(98% 0 0 0);
+    }
+    75% {
+        clip-path: inset(0 0 0 98%);
+    }
+}
diff --git a/src/router/index.js b/src/router/index.js
index 681be59..a2b8690 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,15 +3,20 @@ import { createRouter, createWebHistory } from 'vue-router';
 const routes = [
     {
         path: '/',
-        name: 'helloWorld',
-        redirect:'/home',
-        component: () => import('@/views/home/index.vue'),
-        children:[
+        name: 'commonpage',
+        redirect: '/home',
+        component: () => import('@/views/layout.vue'),
+        children: [
             {
                 path: '/home',
                 name: 'home',
                 component: () => import('@/views/home/index.vue')
             },
+            {
+                path: '/about1',
+                name: 'about1',
+                component: () => import('@/views/about/index.vue')
+            },
         ]
     }
     // 添加其他路由配置...
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
new file mode 100644
index 0000000..da2a9fc
--- /dev/null
+++ b/src/views/about/index.vue
@@ -0,0 +1,2 @@
+
+<template>222</template>
\ No newline at end of file
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index ec88ec3..6b24445 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -3,19 +3,13 @@
 </script>
 
 <template>
-<div>
   <div>
-    头部
+    <div>
+      home
+    </div>
+
   </div>
-  <div>
-    <router-view></router-view>
-  </div>
-  <div>
-    底部
-  </div>
-</div>
 </template>
 
 <style scoped>
-
 </style>
diff --git a/src/views/layout.vue b/src/views/layout.vue
new file mode 100644
index 0000000..d679dd9
--- /dev/null
+++ b/src/views/layout.vue
@@ -0,0 +1,20 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <div>
+      头部
+    </div>
+    <div>
+      <router-view></router-view>
+    </div>
+    <div>
+      底部
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>