搜索

src/views/page/RefSearch.vue

@@ -1,7 +1,7 @@
 <template>
-    <NLayout class="h-full">
-        <NLayoutHeader class="flex items-center px-8" style="height: 64px">
-            <span class="text-lg flex-1">参考文献助手</span>
+    <NLayout class="h-full bg" :style="{ backgroundImage: `url(${bg1})` }">
+        <NLayoutHeader class="flex items-center px-12 !bg-black/20" style="height: 64px; backdrop-filter: blur(5px)">
+            <span class="text-lg flex-1 text-white alimamaShuHeiTi">参考文献助手</span>
             <template v-if="isLogin">
                 <n-popover placement="bottom" trigger="click">
                     <template #trigger>
@@ -9,34 +9,56 @@
                             <user-avatar avatarType="medium" onlyAvatar />
                         </n-button>
                     </template>
-                    <n-button size="small" @click="logout" text>退出登录</n-button>
+                    <n-button class="alimamaShuHeiTi" size="small" @click="logout" text>退出登录</n-button>
                 </n-popover>
             </template>
 
             <template v-else>
-                <n-button round @click="showLogin = true" type="primary" size="small">登录</n-button>
+                <n-button class="alimamaShuHeiTi" round @click="showLogin = true" type="primary" size="small"
+                    >登录</n-button
+                >
             </template>
         </NLayoutHeader>
         <NLayoutContent
             position="absolute"
-            style="top: 64px; bottom: 0"
-            class="px-8 py-4"
-            content-style="display:flex;flex-direction:column"
+            :style="`top: 64px; bottom: 0; ;backgroundSize:cover`"
+            class="px-12 py-4 !bg-transparent"
+            content-class="bg-white"
+            content-style="display:flex;flex-direction:column;border-radius:30px; background-color:rgba(0,0,0,0.8); backdrop-filter: blur(5px)"
         >
-            <div class="flex p-2" @keyup.enter="searchReference">
-                <n-input class="flex-1 mr-4" clearable v-model:value="title" placeholder="输入论文标题" />
-                <n-button type="primary" ghost @click="searchReference" :loading="searchingReference">
-                    搜索参考文献
-                </n-button>
-                <NButton class="!ml-4" type="primary" ghost @click="copyReference">复制</NButton>
-            </div>
-            <div class="flex-1 overflow-auto p-4">
-                <div v-for="(item, i) in referenceData.zh" :key="i">[{{ i + 1 }}]{{ item.ref[0] }}</div>
-                <div v-for="(item, i) in referenceData.en" :key="i">
-                    [{{ referenceData.zh.length + i + 1 }}]{{ item.ref[0] }}
+            <NConfigProvider :theme="darkTheme">
+                <div class="flex p-6 max-w-[546px] m-auto" @keyup.enter="searchReference">
+                    <n-input
+                        size="large"
+                        class="flex-1 !rounded-none !rounded-l-lg"
+                        clearable
+                        v-model:value="title"
+                        placeholder="输入论文标题"
+                    >
+                        <template #suffix>
+                            <!-- <Copy /> -->
+                            <n-icon size="18" color="white" :component="Copy" @click="copyReference" />
+                        </template>
+                    </n-input>
+                    <n-button
+                        size="large"
+                        class="!rounded-none !rounded-r-lg alimamaShuHeiTi"
+                        type="primary"
+                        @click="searchReference"
+                        :loading="searchingReference"
+                    >
+                        搜索一下
+                    </n-button>
+                    <!-- <NButton class="!ml-4" type="primary" ghost @click="copyReference">复制</NButton> -->
                 </div>
-            </div>
-            <div class="absolute right-16 bottom-4"></div>
+                <div class="flex-1 overflow-auto py-4 px-8">
+                    <div v-for="(item, i) in referenceData.zh" :key="i">[{{ i + 1 }}]{{ item.ref[0] }}</div>
+                    <div v-for="(item, i) in referenceData.en" :key="i">
+                        [{{ referenceData.zh.length + i + 1 }}]{{ item.ref[0] }}
+                    </div>
+                </div>
+                <div class="absolute right-16 bottom-4"></div>
+            </NConfigProvider>
         </NLayoutContent>
     </NLayout>
     <NConfigProvider
@@ -107,7 +129,9 @@ import { storeToRefs } from 'pinia'
 import 'vditor/src/assets/less/index.less'
 import { useRouter } from 'vue-router'
 import { useClipboard } from '@vueuse/core'
-import { ChevronRight } from '@vicons/tabler'
+import { ChevronRight, Copy } from '@vicons/tabler'
+import bg1 from '@/assets/searchBg1.jpg'
+
 const router = useRouter()
 const message = useMessage()
 const showLogin = ref(false)
@@ -201,4 +225,7 @@ function goGpt() {
         width: calc(33.33% - 18px);
     }
 }
+.bg {
+    background-size: contain;
+}
 </style>