feat: 预览页ui效果修改

src/views/sys/preview/index.vue

@@ -18,17 +18,16 @@
                   class="p-4 rounded-md main"
                   :class="{ active: treeData[0] && treeData[0].id === activeId }"
                 >
-                  <div class="flex justify-between items-center relative">
+                  <div
+                    class="flex justify-between items-center relative cursor-pointer"
+                    @click="changeActiveId(treeData[0].id)"
+                  >
                     <span>{{ treeData[0] && treeData[0].name }}</span>
                     <span
                       class="flex items-center"
                       :class="treeData[0] && treeData[0].id === activeId ? 'fade-down' : 'fade-up'"
                     >
-                      <Icon
-                        icon="fluent:chevron-up-20-filled"
-                        :size="18"
-                        @click="changeActiveId(treeData[0].id)"
-                      />
+                      <Icon icon="fluent:chevron-up-20-filled" :size="18" />
                     </span>
                   </div>
                 </li>
@@ -45,17 +44,16 @@
                   class="p-4 rounded-md main"
                   :class="{ active: treeData[1] && treeData[1].id === activeId }"
                 >
-                  <div class="flex justify-between items-center relative">
+                  <div
+                    class="flex justify-between items-center relative cursor-pointer"
+                    @click="changeActiveId(treeData[1].id)"
+                  >
                     <span>{{ treeData[1] && treeData[1].name }}</span>
                     <span
                       class="flex items-center"
                       :class="treeData[1] && treeData[1].id === activeId ? 'fade-down' : 'fade-up'"
                     >
-                      <Icon
-                        icon="fluent:chevron-up-20-filled"
-                        :size="18"
-                        @click="changeActiveId(treeData[1].id)"
-                      />
+                      <Icon icon="fluent:chevron-up-20-filled" :size="18" />
                     </span>
                   </div>
                 </li>
@@ -72,17 +70,16 @@
                   class="p-4 rounded-md main"
                   :class="{ active: treeData[2] && treeData[2].id === activeId }"
                 >
-                  <div class="flex justify-between items-center relative">
+                  <div
+                    class="flex justify-between items-center relative cursor-pointer"
+                    @click="changeActiveId(treeData[2].id)"
+                  >
                     <span>{{ treeData[2] && treeData[2].name }}</span>
                     <span
                       class="flex items-center"
                       :class="treeData[2] && treeData[2].id === activeId ? 'fade-down' : 'fade-up'"
                     >
-                      <Icon
-                        icon="fluent:chevron-up-20-filled"
-                        :size="18"
-                        @click="changeActiveId(treeData[2].id)"
-                      />
+                      <Icon icon="fluent:chevron-up-20-filled" :size="18" />
                     </span>
                   </div>
                 </li>
@@ -127,6 +124,9 @@
                   class="h-full flex justify-center items-center text-2xl"
                   >暂未上传可供预览的pdf文件</div
                 >
+                <div v-if="!activeId" class="h-full flex justify-center items-center text-2xl">
+                  请从左边点选数量表
+                </div>
               </section>
             </div>
           </section>