f

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;

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;

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

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

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

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";

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

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

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

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

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

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

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

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

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')
+            },
         ]
     }
     // 添加其他路由配置...

src/views/about/index.vue

@@ -0,0 +1,2 @@
+
+<template>222</template>

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>

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>