Skip to content

Commit

Permalink
feat: 初步完善页面基本样式
Browse files Browse the repository at this point in the history
  • Loading branch information
@wangrongding
wangrongding committed Mar 24, 2024
1 parent 2754541 commit e411498
Show file tree
Hide file tree
Showing 10 changed files with 346 additions and 23 deletions.
31 changes: 31 additions & 0 deletions src/components/ThemeSwitch.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<script setup lang="ts"></script>
<template>
<div class="">
<label class="swap swap-rotate">
<!-- this hidden checkbox controls the state -->
<input type="checkbox" class="theme-controller" value="synthwave" />

<!-- sun icon -->
<svg
class="swap-off fill-current w-10 h-10"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
/>
</svg>

<!-- moon icon -->
<svg
class="swap-on fill-current w-10 h-10"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
/>
</svg>
</label>
</div>
</template>
195 changes: 195 additions & 0 deletions src/components/bottom-panel/BottomPanel.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
<script setup lang="ts"></script>
<template>
<div class="bottom-panel h-[300px] bg-[#17171e] pb-2 px-4 text-white flex flex-col">
<!-- 刻度尺 -->
<div class="flex border-y justify-between border-[#272836] h-[40px] items-center gap-2">
<div class="flex gap-2">
<button>
<svg
fill="currentColor"
class="___12fm75w f1w7gpdv fez10in fg4l7m0"
aria-hidden="true"
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 15.5c0 .28.22.5.5.5H11c1.64 0 2.9-.62 3.75-1.57A5.16 5.16 0 0 0 16 11c0-1.23-.41-2.48-1.25-3.43A4.85 4.85 0 0 0 11 6H5.7l2.65-2.65a.5.5 0 1 0-.7-.7l-3.5 3.5a.5.5 0 0 0 0 .7l3.5 3.5a.5.5 0 0 0 .7-.7L5.71 7H11c1.36 0 2.35.5 3 1.24.66.74 1 1.74 1 2.76 0 1.02-.34 2.02-1 2.76A3.86 3.86 0 0 1 11 15H6.5a.5.5 0 0 0-.5.5Z"
fill="currentColor"
></path>
</svg>
</button>
<button>
<svg
fill="currentColor"
class="___12fm75w f1w7gpdv fez10in fg4l7m0"
aria-hidden="true"
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 11a5 5 0 0 0 5 5h4.5a.5.5 0 0 0 0-1H9a4 4 0 0 1 0-8h5.3l-2.7 2.7a.5.5 0 1 0 .7.7l3.54-3.53a.5.5 0 0 0 .13-.5.5.5 0 0 0-.14-.25L12.3 2.6a.5.5 0 1 0-.71.7L14.29 6H9a5 5 0 0 0-5 5Z"
fill="currentColor"
></path>
</svg>
</button>
<button>
<svg
fill="currentColor"
class="___12fm75w f1w7gpdv fez10in fg4l7m0"
aria-hidden="true"
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.92 2.23a.5.5 0 0 0-.84.54L9.4 9.43l-1.92 2.96a3 3 0 1 0 .78.64L10 10.35l1.74 2.68a3 3 0 1 0 .78-.64L5.92 2.23ZM14 17a2 2 0 1 1 0-4 2 2 0 0 1 0 4ZM4 15a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7.2-6.49-.6-.92 3.48-5.36a.5.5 0 0 1 .84.54l-3.73 5.74Z"
fill="currentColor"
></path>
</svg>
</button>
<button>
<svg
fill="currentColor"
class="___12fm75w f1w7gpdv fez10in fg4l7m0"
aria-hidden="true"
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.5 4h3a1.5 1.5 0 0 0-3 0Zm-1 0a2.5 2.5 0 0 1 5 0h5a.5.5 0 0 1 0 1h-1.05l-1.2 10.34A3 3 0 0 1 12.27 18H7.73a3 3 0 0 1-2.98-2.66L3.55 5H2.5a.5.5 0 0 1 0-1h5ZM5.74 15.23A2 2 0 0 0 7.73 17h4.54a2 2 0 0 0 1.99-1.77L15.44 5H4.56l1.18 10.23ZM8.5 7.5c.28 0 .5.22.5.5v6a.5.5 0 0 1-1 0V8c0-.28.22-.5.5-.5ZM12 8a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V8Z"
fill="currentColor"
></path>
</svg>
</button>
<button>
<svg
fill="currentColor"
class="___12fm75w f1w7gpdv fez10in fg4l7m0"
aria-hidden="true"
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 2a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h1.2c-.08-.32-.15-.66-.18-1H8a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v5.02c.34.03.68.1 1 .19V4a2 2 0 0 0-2-2H8Zm-.5 15h2.1c.18.36.4.7.66 1H7.5A3.5 3.5 0 0 1 4 14.5V6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17ZM19 14.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-4-2a.5.5 0 0 0-1 0V14h-1.5a.5.5 0 0 0 0 1H14v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H15v-1.5Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
<div class="flex items-center gap-2">
<button>
<svg
aria-hidden="true"
fill="currentColor"
class="___12fm75w f1w7gpdv fez10in fg4l7m0"
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 3.5a.5.5 0 0 1 1 0v13a.5.5 0 0 1-1 0v-13Zm14 .75c0-1-1.12-1.6-1.95-1.04l-8.5 5.71c-.73.5-.73 1.57 0 2.07l8.5 5.8c.83.56 1.95-.03 1.95-1.04V4.25Zm-1.39-.2c.17-.12.39 0 .39.2v11.5c0 .2-.22.32-.4.2l-8.49-5.78a.25.25 0 0 1 0-.42l8.5-5.7Z"
fill="currentColor"
></path>
</svg>
</button>
<button>
<svg
aria-hidden="true"
fill="currentColor"
class="___12fm75w f1w7gpdv fez10in fg4l7m0"
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.75 3C4.78 3 4 3.78 4 4.75v14.5c0 .97.78 1.75 1.75 1.75h3.5c.96 0 1.75-.78 1.75-1.75V4.75C11 3.78 10.2 3 9.25 3h-3.5Zm9 0C13.78 3 13 3.78 13 4.75v14.5c0 .97.78 1.75 1.75 1.75h3.5c.96 0 1.75-.78 1.75-1.75V4.75C20 3.78 19.2 3 18.25 3h-3.5Z"
fill="currentColor"
></path>
</svg>
</button>
<button>
<svg
aria-hidden="true"
fill="currentColor"
class="___12fm75w f1w7gpdv fez10in fg4l7m0"
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17 3.5a.5.5 0 0 0-1 0v13a.5.5 0 1 0 1 0v-13ZM3 4.25c0-1 1.12-1.6 1.95-1.04l8.5 5.71c.73.5.73 1.57 0 2.07l-8.5 5.8A1.25 1.25 0 0 1 3 15.75V4.25Zm1.39-.2a.25.25 0 0 0-.39.2v11.5c0 .2.23.32.4.2l8.49-5.78a.25.25 0 0 0 0-.42l-8.5-5.7Z"
fill="currentColor"
></path>
</svg>
</button>
<span>00:00:00 / 00:00:00</span>
</div>
<div class="flex gap-4">
<button>
<svg
fill="currentColor"
class="___12fm75w f1w7gpdv fez10in fg4l7m0"
aria-hidden="true"
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 8a.5.5 0 0 1 0 1H6a.5.5 0 0 1 0-1h5Zm3 .5a5.5 5.5 0 1 0-1.98 4.23l4.13 4.12.07.06a.5.5 0 0 0 .63-.76l-4.12-4.13A5.48 5.48 0 0 0 14 8.5Zm-10 0a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"
fill="currentColor"
></path>
</svg>
</button>
<button>
<svg
fill="currentColor"
class="___12fm75w f1w7gpdv fez10in fg4l7m0"
aria-hidden="true"
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 8a.5.5 0 0 1 0 1H6a.5.5 0 0 1 0-1h5Zm3 .5a5.5 5.5 0 1 0-1.98 4.23l4.13 4.12.07.06a.5.5 0 0 0 .63-.76l-4.12-4.13A5.48 5.48 0 0 0 14 8.5Zm-10 0a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"
fill="currentColor"
></path>
</svg>
</button>
<button>
<svg
fill="currentColor"
class="___12fm75w f1w7gpdv fez10in fg4l7m0"
aria-hidden="true"
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 8a.5.5 0 0 1 0 1H6a.5.5 0 0 1 0-1h5Zm3 .5a5.5 5.5 0 1 0-1.98 4.23l4.13 4.12.07.06a.5.5 0 0 0 .63-.76l-4.12-4.13A5.48 5.48 0 0 0 14 8.5Zm-10 0a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"
fill="currentColor"
></path>
</svg>
</button>
<button>预览</button>
</div>
</div>

<div class="grid content-center flex-1 text-center">bottom-panel ( 开发中... )</div>
</div>
</template>
<style lang="scss" scoped></style>
Empty file added src/components/bottom-panel/comp/AudioTrack.vue
View file
Empty file.
10 changes: 10 additions & 0 deletions src/components/bottom-panel/comp/ElementTrack.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<script setup lang="ts"></script>
<template>
<div class="track-list">
<div></div>
<div>

</div>
</div>
</template>
<style lang="scss" scoped></style>
Empty file added src/components/bottom-panel/comp/VideoTrack.vue
View file
Empty file.
6 changes: 6 additions & 0 deletions src/components/bottom-panel/imgs/pause.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/components/bottom-panel/imgs/play.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions src/components/left-panel/LeftPanel.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<script setup lang="ts"></script>
<template>
<div class="left-box min-w-[400px] flex bg-[#272836]">
<div class="w-[60px] bg-[#1c1c26] flex flex-col gap-2 items-center">
<div
v-for="item in 7"
:key="item"
class="w-[50px] h-[50px] rounded-lg bg-[#17171e] text-[#ababc0] hover:text-[white] select-none flex flex-col items-center leading-[50px]"
>
type {{ item }}
</div>
</div>
<div class="text-white p-8">
left-panel
<span>( 开发中... )</span>
</div>
</div>
</template>
<style lang="scss" scoped></style>
43 changes: 43 additions & 0 deletions src/components/right-panel/RightPanel.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<script setup lang="ts"></script>
<template>
<div class="right-panel w-[400px] bg-[#272836] flex justify-between">
<div class="p-8">
<div role="tablist" class="tabs tabs-boxed mb-4">
<a role="tab" class="tab">Tab 1</a>
<a role="tab" class="tab tab-active overflow-hidden">Tab 2</a>
<a role="tab" class="tab">Tab 3</a>
<a role="tab" class="tab">Tab 4</a>
</div>
<div class="tooltip mb-4" data-tip="开发中...">
<button class="btn">
<span class="loading loading-spinner"></span>
loading
</button>
</div>

<div>
<input type="checkbox" class="toggle toggle-success" checked />
<input type="checkbox" class="toggle toggle-warning" checked />
<input type="checkbox" class="toggle toggle-info" checked />
<input type="checkbox" class="toggle toggle-error" checked />
</div>

<!-- Open the modal using ID.showModal() method -->
<button class="btn btn-sm" onclick="my_modal_1.showModal()">open modal</button>
<dialog id="my_modal_1" class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Hello!</h3>
<p class="py-4">Press ESC key or click the button below to close</p>
<div class="modal-action">
<form method="dialog">
<!-- if there is a button in form, it will close the modal -->
<button class="btn">Close</button>
</form>
</div>
</div>
</dialog>
</div>
<div class="w-[60px] bg-[#1c1c26] p-8"></div>
</div>
</template>
<style lang="scss" scoped></style>
Loading

0 comments on commit e411498

Please sign in to comment.