Merge branch 'main' of github.com:MarleneJiang/ByteDream-JueJin

IdeaLeap · Jan 31, 2023 · f24d08c · f24d08c
2 parents cdf1992 + 01c2c6a
commit f24d08c
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 41 deletions.
diff --git a/frontend/app.vue b/frontend/app.vue
@@ -60,7 +60,7 @@ body,
 }
 
 html.dark {
-  background: #222;
+  background: #18181c;
   color: white;
 }
 html.light {

diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css
@@ -18,14 +18,7 @@
   --jjext-color-thirdly-bg: #f4f5f5;
   --jjext-color-hover-bg: #e8f3ff;
   --jjext-color-comment-bg: rgba(244, 245, 245, 0.5);
-  --jjext-hover-bg: linear-gradient(
-    90deg,
-    rgba(232, 243, 255, 0) 0%,
-    rgba(232, 243, 255, 0.8) 25.09%,
-    #e8f3ff 50.16%,
-    rgba(232, 243, 255, 0.8) 75.47%,
-    rgba(232, 243, 255, 0) 100%
-  );
+  --jjext-hover-bg: linear-gradient( 90deg, rgba(232, 243, 255, 0) 0%, rgba(232, 243, 255, 0.8) 25.09%, #e8f3ff 50.16%, rgba(232, 243, 255, 0.8) 75.47%, rgba(232, 243, 255, 0) 100% );
   --jjext-color-mask: rgba(0, 0, 0, 0.4);
   --jjext-color-quick-nav-text: #ffffff;
   --jjext-color-nav-bg: rgba(255, 255, 255, 0.13);

diff --git a/frontend/components/ArticlesContent/End.vue b/frontend/components/ArticlesContent/End.vue
@@ -36,7 +36,7 @@ const props = defineProps({
   border-radius: 0 0 4px 4px;
   padding-bottom: 3.33rem;
 }
-.main-area > {
+.main-area {
   border-radius: 4px;
   background-color: #fff;
   padding-left: 2.67rem;

diff --git a/frontend/components/Aside/Advertisements.vue b/frontend/components/Aside/Advertisements.vue
@@ -20,10 +20,10 @@ const turn_off = (i: number) => {
         <div class="ad_container group">
           <nuxt-img class="ad" :src="i.img" />
           <div i-carbon-close class="ad_close group-hover:opacity-100" @click="turn_off(parseInt(index))" />
-        </div>
-        <div class="txt_container">
-          <div class="txt">
-            广告
+          <div class="txt_container">
+            <div class="txt">
+              广告
+            </div>
           </div>
         </div>
       </div>
@@ -41,18 +41,17 @@ const turn_off = (i: number) => {
 }
 
 .ad_close {
-  @apply my-2 mx-1 absolute text-[#909090]
-  @apply opacity-50 text-[1.5rem] font-[1500]
-  @apply opacity-0
+  @apply my-2 mx-1 absolute
+  @apply text-jj_thirdly opacity-50 text-[1.5rem]
+  @apply font-[1500] opacity-0
 }
 
 .txt_container {
-  @apply font-[20px]
+  @apply absolute translate-y-[14.3rem] translate-x-[-0.7rem]
 }
 
 .txt {
-  @apply absolute translate-y-[-3.5rem] translate-x-[16.5rem]
-  @apply text-light-50 px-1.5 bg-[rgba(0,0,0,.2)]
+  @apply text-jj_font_white px-1.5 bg-[rgba(0,0,0,.2)]
   @apply rounded-md border-white border-1
 }
 </style>
diff --git a/frontend/components/Aside/Gadgets.vue b/frontend/components/Aside/Gadgets.vue
@@ -35,6 +35,7 @@ defineProps({
   @apply block
   @apply bg-light-50 p-4 rounded-sm
   @apply shadow-[0_2px_2px_0_rgba(0,0,0,0.05)]
+  @apply dark:bg-dark_bg
 }
 
 .gadgets_qrcode_container {
@@ -46,10 +47,11 @@ defineProps({
 }
 
 .gadgets_txt {
-  @apply text-black text-lg
+  @apply text-jj_font_dark text-lg
+  @apply dark:text-jj_font_white
 }
 
 .gadgets_subtitle {
-  @apply text-[#8a919f] text-m
+  @apply text-jj_thirdly text-m
 }
 </style>
diff --git a/frontend/components/Aside/LinkList.vue b/frontend/components/Aside/LinkList.vue
@@ -30,7 +30,8 @@ defineProps({
 
 <style scoped>
 .linklist_container {
-  @apply bg-[#ffffff] rounded-sm shadow-[0_2px_2px_0_rgba(0,0,0,0.05)]
+  @apply bg-jj_font_white rounded-sm shadow-[0_2px_2px_0_rgba(0,0,0,0.05)]
+  @apply dark:bg-dark_bg
 }
 
 .linklist_ul {
@@ -40,10 +41,12 @@ defineProps({
 .linklist_link {
   @apply flex flex-row justify-start
   @apply items-center gap-3 hover:bg-[#fbfbfb] p-3
+  @apply dark:hover:bg-[#1a1c1e]
 }
 
 .linklist_txt {
-  @apply text-lg text-[#333333]
+  @apply text-lg text-jj_font_black
+  @apply dark:text-jj_font_white
 }
 
 .linklist_icon {

diff --git a/frontend/components/Aside/Sign.vue b/frontend/components/Aside/Sign.vue
@@ -28,7 +28,8 @@ if (process.server)
 
 <style scoped>
 .sign_container {
-  @apply bg-light-50 p-5 py-6
+  @apply bg-jj_font_white p-5 py-6
+  @apply dark:bg-dark_bg
 }
 
 .sign_container_container {
@@ -41,6 +42,7 @@ if (process.server)
 
 .sign_dayparts{
   @apply text-black font-bold text-2xl
+  @apply dark:text-jj_font_white
 }
 
 .sign_txt {
@@ -49,9 +51,11 @@ if (process.server)
 
 .sign_btn {
   @apply bg-[#f4f9ff] border-[#8dbfff] hover:bg-[#e8f2ff] border-solid border-1 rounded-2 h-13
+  @apply dark:bg-[#171d23] dark:border-[#102a4c] dark:hover:bg-[#161f2b]
 }
 
 .sign_btn_txt {
   @apply text-lg text-[#1e80ff] px-5 py-1
+  @apply dark:text-[#357bba]
 }
 </style>
diff --git a/frontend/components/Aside/SuspensionPanel.vue b/frontend/components/Aside/SuspensionPanel.vue
@@ -11,7 +11,7 @@ const to_top = () => {
 <template>
   <div class="suspension_panel_container">
     <div
-      v-if="y > 900"
+      v-if="y > 300"
       class="to_top_btn hover:shadow-md"
       @click="to_top"
     >
@@ -60,6 +60,7 @@ const to_top = () => {
 }
 
 .to_top_btn {
-  @apply my-2 bg-light-50 p-4 rounded-full shadow
+  @apply my-2 bg-jj_font_white p-4 rounded-full shadow
+  @apply dark:bg-dark_bg dark:shadow-light-50
 }
 </style>
diff --git a/frontend/components/Main/index.vue b/frontend/components/Main/index.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <div class="container">
+  <div class="container main_container">
     <div class="mt-5.17rem ">
       <Types class="left-0" />
       <div class="timeline-container mt-0 relative 0.33rem">
@@ -15,12 +15,9 @@
 </template>
 
 <style scoped>
-.container {
-  display: block;
-  /* background-color: red; */
-  position: relative;
-  margin: 0 auto;
-  width: 100%;
-  max-width: 960px;
+.main_container {
+  @apply my-0 mx-auto
+  @apply block relative w-[100%] max-w-[960px]
+  @apply dark:bg-dark_bg
 }
 </style>
diff --git a/frontend/components/Navs/index.vue b/frontend/components/Navs/index.vue
@@ -105,12 +105,13 @@ const onClick = () => {
 .nav-list span {
   display: block;
   position: absolute;
-  width: 50px;
-  left: 845px;
-  top: 4px;
+  width: 55px;
+  left: 843px;
+  top: 6px;
   font-size: 12px;
   background: #ee502f;
-  border-radius: 4px;
+  border-radius: 10px;
+  transform: scale(.65);
   color: #ffffff;
   text-align: center;
 }

diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="root_class">
     <Suspense>
       <Main />
       <template #fallback>
@@ -11,3 +11,9 @@
   </div>
 </template>
 
+<style scoped>
+.root_class {
+  @apply bg-[#f4f5f5]
+  @apply dark:bg-dark_bg
+}
+</style>
diff --git a/frontend/unocss.config.ts b/frontend/unocss.config.ts
@@ -31,7 +31,7 @@ export default defineConfig({
 
   ],
   transformers: [
-    transformerDirectives(),
+    transformerDirectives({ enforce: 'pre' }),
     transformerVariantGroup(),
   ],
   theme: {
@@ -44,6 +44,9 @@ export default defineConfig({
       jj_thirdly: 'var(--jjext-color-thirdly)', // #86909c
       jj_primary: 'var(--jjext-color-primary)', // #1d2129
       jj_hover_bg: 'var(--jjext-color-hover-bg)', // #e8f3ff
+      jj_bg: 'var(--jjext-color-background)', // #f2f3f5
+      jj_font_white: 'var(--jjext-color-font-white)', // #ffffff
+      jj_font_black: 'var(--jjext-color-font-1)', // #252933
     },
   },
 })