From e2d227a529e3397d33dd590fb50281c528834c87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8D=A3=E9=A1=B6?= <wangrongding@qq.com>
Date: Thu, 21 Mar 2024 02:04:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/main.css     |  7 +++----
 src/views/page-main.vue | 40 +++++++++++++++++++++++++++++++++-------
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 20fd222..0656cd4 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -7,10 +7,9 @@
   height: 100vh;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
+a {
+  color: #32c5ff;
+  text-decoration: underline;
   transition: 0.4s;
   padding: 3px;
 }
diff --git a/src/views/page-main.vue b/src/views/page-main.vue
index ba92440..2966d94 100644
--- a/src/views/page-main.vue
+++ b/src/views/page-main.vue
@@ -6,9 +6,8 @@
     <header class="flex h-[50px] items-center justify-between bg-[#282c34] px-6">
       <!-- logo -->
       <div class="flex items-center gap-2">
-        <img src="../assets/logo.svg" alt="" class="h-[20px]" />
-        <h1 class="text-xl font-bold">Video Studio</h1>
-        <span>( 开发中... )</span>
+        <span class="logo">👀</span>
+        <h1 class="title text-xl font-bold">Video Studio</h1>
       </div>
 
       <div class="flex items-center">
@@ -21,20 +20,47 @@
 
     <div class="flex flex-1 gap-1">
       <!-- 左边栏 -->
-      <div class="left-box w-[400px] bg-[#282c34] p-8">left-box</div>
+      <div class="left-box w-[400px] bg-[#282c34] p-8">
+        left-box
+        <span>( 开发中... )</span>
+      </div>
 
       <!-- 内容区域 -->
       <div class="flex flex-1 flex-col gap-1">
         <div class="flex flex-1 gap-1">
           <!-- 视频画布 -->
-          <div class="flex-1 bg-[#282c34] p-8">player</div>
+          <div class="flex-1 bg-[#282c34] p-8">
+            player
+            <span>( 开发中... )</span>
+          </div>
           <!-- 右边属性设置栏 -->
-          <div class="right-panel w-[300px] bg-[#282c34] p-8">right-panel</div>
+          <div class="right-panel w-[300px] bg-[#282c34] p-8">
+            right-panel
+            <span>( 开发中... )</span>
+          </div>
         </div>
 
         <!-- 底部轨道栏 -->
-        <div class="bottom-panel h-[300px] bg-[#282c34] p-8">bottom-panel</div>
+        <div class="bottom-panel h-[300px] bg-[#282c34] p-8">
+          bottom-panel
+          <span>( 开发中... )</span>
+        </div>
       </div>
     </div>
   </div>
 </template>
+
+<style>
+.logo,
+.title {
+  width: fit-content;
+  user-select: none;
+  background: -webkit-linear-gradient(0deg, #ee2788 0%, #00a7ea 100%);
+  background-size: 100%;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-text-fill-color: transparent;
+}
+</style>