feat: 添加ElementPlus样式

GuoJikun · Nov 22, 2024 · 389a22d · 389a22d
1 parent ac5949f
commit 389a22d
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 19 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -11,6 +11,7 @@ const naive = create({
 })
 
 import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
 const app = createApp(App)

diff --git a/src/stores/counter.ts b/src/stores/counter.ts
diff --git a/src/stores/index.ts b/src/stores/index.ts
@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+
+interface MainState {
+    audio: Array<string>
+    audioChecked: Array<string>
+    video: Array<string>
+}
+
+export const useMainStore = defineStore('main', {
+    state: (): MainState => {
+        return {
+            audio: [],
+            audioChecked: [],
+            video: [],
+        }
+    },
+})
diff --git a/src/views/settings.vue b/src/views/settings.vue
@@ -1,15 +1,67 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const imageList = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'apng']
+const imageChecked = ref([])
+</script>
+
 <template>
-    <div class="about">
+    <div class="setting">
         <h1>This is an settings page</h1>
+        <div class="setting-item support">
+            <h2>支持的格式</h2>
+            <div class="support-item">
+                <div class="support-item-header">
+                    <span>Image-图像</span>
+                </div>
+                <div class="support-item-body">
+                    <el-checkbox-group class="support-item-body-wrap" v-model="imageChecked">
+                        <template v-for="item in imageList" :key="item">
+                            <div class="support-item-body-item">
+                                <el-checkbox :value="item" :label="item" />
+                            </div>
+                        </template>
+                    </el-checkbox-group>
+                </div>
+                <div></div>
+                <div></div>
+            </div>
+        </div>
+        <div class="setting-item">
+            <h2>更新</h2>
+            <div></div>
+        </div>
     </div>
 </template>
 
-<style>
-@media (min-width: 1024px) {
-    .about {
-        min-height: 100vh;
-        display: flex;
-        align-items: center;
+<style lang="scss" scoped>
+.setting {
+    padding: 20px;
+}
+.support {
+    &-item {
+        & + & {
+            margin-bottom: 24px;
+        }
+
+        &-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid #ebeef5;
+            padding: 10px 0;
+        }
+
+        &-body {
+            padding: 10px 24px;
+            .support-item-body-wrap {
+                display: flex;
+                flex-wrap: wrap;
+                .support-item-body-item {
+                    flex: 0 0 100px;
+                }
+            }
+        }
     }
 }
 </style>