diff --git a/src/assets/style/base.css b/src/assets/style/base.css index 36d6917..592c8ae 100644 --- a/src/assets/style/base.css +++ b/src/assets/style/base.css @@ -1,40 +1,30 @@ - *, *::before, *::after { - box-sizing: border-box; - margin: 0; - padding: 0; - font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + font-weight: normal; } body { - min-height: 100vh; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; + min-height: 100vh; + font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", + "Droid Sans", "Helvetica Neue", sans-serif; + + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + user-select: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - user-select: none; + background-color: rgb(244, 244, 244); } :root { - font-size: 32px; /* 设计稿是双倍设计的 */ - --primaryColor: #1989FA; + font-size: 32px; /* 设计稿是双倍设计的 */ + --primaryColor: #1989fa; --headerHeight: 4.375rem; --footerHeight: 4.375rem; - --menuAreaWidth: 11.875rem; - --bgColor: #e9e9e9; -} \ No newline at end of file + --menuAreaWidth: 11.875rem; + --bgColor: rgb(244, 244, 244); +} diff --git a/src/assets/style/tailwind.css b/src/assets/style/tailwind.css index 5009eec..ab5aba6 100644 --- a/src/assets/style/tailwind.css +++ b/src/assets/style/tailwind.css @@ -3,11 +3,12 @@ @tailwind utilities; @layer utilities { - .btn-dark { + .btn-dark { display: flex; justify-content: center; align-items: center; - background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%); + background: var(--primaryColor); + border: solid 1px var(--primaryColor); border-radius: 4px; color: white; } @@ -15,13 +16,14 @@ display: flex; justify-content: center; align-items: center; - background: linear-gradient(180deg, #ebf1fa 0%, #f8fafd 100%); - box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.3), 0px 1px 5px 0px rgba(173, 173, 173, 0.47); + background-color: transparent; border-radius: 4px; color: var(--primaryColor); + border: solid 1px var(--primaryColor); } - .component-page { + .component-page { height: calc(100vh - var(--headerHeight) - var(--footerHeight)); - width: calc(100vw - var(--menuAreaWidth)); + width: calc(100vw - var(--menuAreaWidth)); + background-color: #fff; } -} \ No newline at end of file +} diff --git a/src/views/components/Footer.vue b/src/views/components/Footer.vue index e26aad4..1e73a02 100644 --- a/src/views/components/Footer.vue +++ b/src/views/components/Footer.vue @@ -1,3 +1,3 @@ -
+ \ No newline at end of file diff --git a/src/views/components/Header.vue b/src/views/components/Header.vue index d7c4f5b..03b723d 100644 --- a/src/views/components/Header.vue +++ b/src/views/components/Header.vue @@ -92,7 +92,7 @@ width: 100%; display: flex; align-items: center; - background: #e9e9e9; + height: var(--headerHeight); .header_logo{ padding:10px 10px; diff --git a/src/views/components/Menu.vue b/src/views/components/Menu.vue index e1a86e2..84265f5 100644 --- a/src/views/components/Menu.vue +++ b/src/views/components/Menu.vue @@ -67,7 +67,6 @@ } .menu{ width: var(--menuAreaWidth); - background: #e9e9e9; } .menn_text{ diff --git a/src/views/home/index.vue b/src/views/home/index.vue index ce825af..41162bb 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -2,9 +2,9 @@