feat: readme

lebornjose · Dec 8, 2024 · a700269 · a700269
1 parent 506da1f
commit a700269
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 34 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -7,27 +7,20 @@
   </div>
 </template>
 
-<style scoped>
+<style>
 
 *{
   margin: 0;
   padding: 0;
 }
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
 .container{
   padding: 20px;
   width: 800px;
   margin: 20px auto;
+  .flex{
+    display: flex;
+    gap: 10px;
+    margin-left: 0;
+  }
 }
 </style>
diff --git a/src/view/hue.vue b/src/view/hue.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 import { onMounted, reactive } from 'vue';
-import { initShaders } from '../utils/utils'
+import { initShaders } from '../utils/utils';
 
 const state = reactive({
   hue: 0
@@ -189,7 +189,6 @@ h3 {
   margin: 20px auto;
 }
 .flex{
-  margin-left: 30px;
   width: 400px;
 }
 .item{

diff --git a/src/view/videoEffect/filter.vue b/src/view/videoEffect/filter.vue
@@ -1,15 +1,17 @@
 <template>
-    <div>使用webgl 实现视频的滤镜功能</div>
-    <canvas id="webgl"></canvas>
-    <div class="flex">
-      <button @click="play">播放</button>
-      <button @click="pause">暂停</button>
+    <div class="container">
+        <div>使用webgl 实现视频的滤镜功能</div>
+        <canvas id="webgl"></canvas>
+        <div class="flex">
+            <a-button @click="play" type="primary">播放</a-button>
+            <a-button @click="pause">暂停</a-button>
+        </div>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import { initShaders } from '../../utils/utils'
+import { initShaders } from '../../utils/utils';
 
 const vertexShaderSource = `
     attribute vec2 a_Position;

diff --git a/src/view/videoEffect/flip.vue b/src/view/videoEffect/flip.vue
@@ -1,15 +1,17 @@
 <template>
-    <div>使用webgl 实现视频的镜像翻转功能</div>
-    <canvas id="webgl"></canvas>
-    <div class="flex">
-      <button @click="play">播放</button>
-      <button @click="pause">播放</button>
+    <div class="container">
+      <div>使用webgl 实现视频的镜像翻转功能</div>
+      <canvas id="webgl"></canvas>
+      <div class="flex">
+        <button @click="play">播放</button>
+        <button @click="pause">播放</button>
+      </div>
     </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted } from 'vue';
-import { initShaders } from '../../utils/utils'
+import { initShaders } from '../../utils/utils';
 
 
 const vertexShaderSource = `

diff --git a/src/view/videoEffect/in_animation.vue b/src/view/videoEffect/in_animation.vue
@@ -1,16 +1,18 @@
 
 <template>
+  <div class="container">
     <div>使用webgl 实现入场动画</div>
     <canvas id="webgl"></canvas>
     <div class="flex">
         <button @click="play">播放</button>
         <button @click="pause">暂停</button>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { initShaders } from '../../utils/utils'
+import { initShaders } from '../../utils/utils';
 
 
 let gl:any = null  

diff --git a/src/view/videoEffect/mask.vue b/src/view/videoEffect/mask.vue
@@ -1,16 +1,18 @@
 
 <template>
-  <div>使用webgl 实现画面的蒙版功能</div>
-  <canvas id="webgl"></canvas>
-  <div class="flex">
-    <button @click="play">播放</button>
-    <button @click="pause">播放</button>
+  <div class="container">
+    <div>使用webgl 实现画面的蒙版功能</div>
+    <canvas id="webgl"></canvas>
+    <div class="flex">
+      <button @click="play">播放</button>
+      <button @click="pause">播放</button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted } from 'vue';
-import { initShaders } from '../../utils/utils'
+import { initShaders } from '../../utils/utils';
 
 
 const vertexShaderSource = `