wip: 完善侧边栏的样式

wangrongding · Apr 20, 2024 · 24a9481 · 24a9481
1 parent 720a60f
commit 24a9481
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 12 deletions.
diff --git a/src/components/left-panel/ImageList.vue b/src/components/left-panel/ImageList.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import movie from '/bird.mp4'
 import emitter from '~/utils/bus'
 
 const onFileChange = (e: Event) => {
@@ -18,6 +17,14 @@ function addElement(url: string) {
 }
 
 const imgList = [
+  'https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg',
+  'https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg',
+  'https://daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg',
+  'https://daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg',
+  'https://daisyui.com/images/stock/photo-1559181567-c3190ca9959b.jpg',
+  'https://daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.jpg',
+  'https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg',
+  'https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg',
   'https://daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg',
   'https://daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg',
   'https://daisyui.com/images/stock/photo-1559181567-c3190ca9959b.jpg',
@@ -34,7 +41,7 @@ const imgList = [
       @change="onFileChange"
     />
     <p>图片素材：（开发中）</p>
-    <div class="grid grid-cols-2 gap-2">
+    <div class="grid max-h-[calc(100vh-200px)] grid-cols-2 gap-2 overflow-y-auto">
       <img
         :src="item"
         class="image-item relative cursor-pointer rounded-md"

diff --git a/src/components/left-panel/LeftPanel.vue b/src/components/left-panel/LeftPanel.vue
@@ -10,7 +10,7 @@ const setActiveType = (id: ActiveType) => {
 }
 </script>
 <template>
-  <div class="left-box flex w-[400px] bg-[#272836]">
+  <div class="left-box flex max-h-[calc(100vh-50px)] w-[400px] overflow-y-hidden bg-[#272836]">
     <div class="flex w-[60px] flex-col items-center bg-[#1c1c26]">
       <div
         v-for="(item, index) in typeList"

diff --git a/src/components/left-panel/typeList.ts b/src/components/left-panel/typeList.ts
@@ -2,9 +2,9 @@ import { IconVideo, IconText, IconMusic, IconImage } from '~/assets/icons/index'
 
 export enum ActiveType {
   Video = 1,
-  Audio = 2,
-  Text = 3,
-  Image = 4,
+  Image = 2,
+  Audio = 3,
+  Text = 4,
   SVG = 5,
   GIF = 6
 }
@@ -15,6 +15,11 @@ export const typeList = [
     name: '视频',
     icon: IconVideo
   },
+  {
+    id: ActiveType.Image,
+    name: '图片',
+    icon: IconImage
+  },
   {
     id: ActiveType.Audio,
     name: '音频',
@@ -25,11 +30,6 @@ export const typeList = [
     name: '文字',
     icon: IconText
   },
-  {
-    id: ActiveType.Image,
-    name: '图片',
-    icon: IconImage
-  },
   {
     id: ActiveType.SVG,
     name: 'SVG',

diff --git a/src/components/right-panel/RightPanel.vue b/src/components/right-panel/RightPanel.vue
@@ -75,7 +75,7 @@ function onLayer(align: 'up' | 'down' | 'top' | 'bottom') {
         </div>
       </div>
       <p class="panel-title">元素列表:</p>
-      <div class="my-4 flex flex-col gap-4">
+      <div class="my-4 flex max-h-[400px] flex-col gap-4 overflow-y-auto">
         <div
           class="flex items-center justify-between rounded-md border border-[#3b3b4f] p-2"
           v-for="(item, index) in elementList"