diff --git a/src/assets/css/style.css b/src/assets/css/style.css
new file mode 100644
index 0000000..cbd16c6
--- /dev/null
+++ b/src/assets/css/style.css
@@ -0,0 +1,1808 @@
+@ -1, 1810+0, 0 @@ :root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s;
+}
+
+button:hover {
+    border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+    padding: 2em;
+}
+
+#app {
+    max-width: 1280px;
+    width: 100vw;
+    margin: 0 auto;
+    text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+.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;
+}
+
+.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/image/icon-header-btn-bg.png b/src/assets/images/icon-header-btn-bg.png
similarity index 100%
rename from src/assets/image/icon-header-btn-bg.png
rename to src/assets/images/icon-header-btn-bg.png
diff --git a/src/assets/image/icon-header-btn.png b/src/assets/images/icon-header-btn.png
similarity index 100%
rename from src/assets/image/icon-header-btn.png
rename to src/assets/images/icon-header-btn.png
diff --git a/src/assets/image/icon-title.png b/src/assets/images/icon-title.png
similarity index 100%
rename from src/assets/image/icon-title.png
rename to src/assets/images/icon-title.png
diff --git a/src/main.js b/src/main.js
index c41a70e..044b634 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import './assets/css/style.css'
 import App from './App.vue'
 import 'normalize.css';
 import router from './router';
diff --git a/src/router/index.js b/src/router/index.js
index 0a45136..fde75ce 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,11 +3,11 @@ import { createRouter, createWebHistory } from 'vue-router';
 const routes = [
     {
         path: '/',
-        redirect: 'layout'
+        redirect: 'home'
     },
     {
-        path: '/layout',
-        name: 'layout',
+        path: '/home',
+        name: 'home',
         component: () => import('@/views/layout.vue'),
         children: [
             {
@@ -23,8 +23,54 @@ const routes = [
         component: () => import('@/views/layout.vue'),
         children: [
             {
-                path: '/about1',
-                name: 'about1',
+                path: 'statutes',
+                name: 'statutes',
+                meta: { title: '首页' },
+                component: () => import('@/views/about/index.vue')
+            },
+            {
+                path: 'council',
+                name: 'council',
+                component: () => import('@/views/about/index.vue')
+            },
+            {
+                path: 'seniormanagement',
+                name: 'seniormanagement',
+                component: () => import('@/views/about/index.vue')
+            },
+            {
+                path: 'academiccommittee',
+                name: 'academiccommittee',
+                component: () => import('@/views/about/index.vue')
+            },
+            {
+                path: 'supervisoryauthority',
+                name: 'supervisoryauthority',
+                component: () => import('@/views/about/index.vue')
+            },
+            {
+                path: 'developmentplanning',
+                name: 'developmentplanning',
+                component: () => import('@/views/about/index.vue')
+            },
+            {
+                path: 'annualworkplan',
+                name: 'annualworkplan',
+                component: () => import('@/views/about/index.vue')
+            },
+            {
+                path: 'statutes',
+                name: 'statutes',
+                component: () => import('@/views/about/index.vue')
+            },
+            {
+                path: 'statutes',
+                name: 'statutes',
+                component: () => import('@/views/about/index.vue')
+            },
+            {
+                path: 'statutes',
+                name: 'statutes',
                 component: () => import('@/views/about/index.vue')
             },
         ]
diff --git a/src/views/layout.vue b/src/views/layout.vue
index 2dd5647..acb65b3 100644
--- a/src/views/layout.vue
+++ b/src/views/layout.vue
@@ -4,9 +4,10 @@
        class="100vw">
     <div style="height:80px;background:#000;"
          class="color-white row items-center">
-      <div class="col-4 ">延庆博物馆</div>
+      <div class="col-4 row items-center justify-center"><img src="../assets/images/icon-title.png"
+             style="width:40px;height:40px" /><span class="fl-ml-sm">延庆博物馆</span></div>
 
-      <div class="col-6  row justify-around items-center">
+      <div class="col-6 row justify-around items-center">
 
         <div class="cursor header-title">首页</div>
         <div class="cursor header-title">导航</div>