From 77e5c96577bfe426e4a341361e5c196dd5c5b7c9 Mon Sep 17 00:00:00 2001
From: zhangnuoyan <9354631+zhangnuoyan@user.noreply.gitee.com>
Date: 星期日, 25 八月 2024 16:28:28 +0800
Subject: [PATCH] feat: 增加一些组件
---
src/styles/theme.scss | 10
src/views/oneThree/member/index.vue | 89 +------
src/views/oneThree/member/pages/source.vue | 79 +++++++
src/views/components/the-member-info/index.vue | 54 ++++
src/views/oneThree/member/pages/travel.vue | 85 +++++++
src/views/oneThree/member/pages/track.vue | 140 ++++++++++++
src/views/oneThree/member/pages/basic.vue | 142 ++++++++++++
src/views/components/the-a-table/index.vue | 20
src/views/components/the-a-tabs/index.vue | 11
9 files changed, 549 insertions(+), 81 deletions(-)
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 4232e07..8d846f0 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -2,7 +2,7 @@
--color-black: #000000;
--color-border: #333335;
--color-bg-1: #17171a;
- --color-bg-2: #0f2a58;
+ --color-bg-2: #123269;
--color-bg-popup: #0f2a58;
--color-bg-3: rgba(255, 255, 255, 0.1);
--color-bg-4: #313132;
@@ -50,6 +50,7 @@
--color-menu-light-bg: #0f2a58;
--color-menu-dark-hover: var(--color-fill-2);
--color-mask-bg: rgba(23, 23, 26, 0.6);
+ --color-neutral-3: #929293;
--red-1: 77, 0, 10;
--red-2: 119, 6, 17;
--red-3: 161, 22, 31;
@@ -240,6 +241,13 @@
--warning-8: var(--orange-8);
--warning-9: var(--orange-9);
--warning-10: var(--orange-10);
+
+ .table-select .select-box .box-scrollbar {
+ background-color: #2f5494 !important;
+ }
+ thead th {
+ background-color: #2f5494;
+ }
.arco-card {
border: none;
}
diff --git a/src/views/components/the-a-table/index.vue b/src/views/components/the-a-table/index.vue
index f30be7a..d8276e4 100644
--- a/src/views/components/the-a-table/index.vue
+++ b/src/views/components/the-a-table/index.vue
@@ -1,26 +1,26 @@
<template>
<!-- 琛ㄦ牸 -->
<div class="the-a-table" :class="currentThemeMode === 'dark' ? 'a-table-dark' : ''">
- <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
- <div class="table-select" v-if="colOpenShow">
+ <!-- <div v-show="iscolopen" class="overSpread1" @click="onMaskClick"></div> -->
+ <!-- <div v-if="colOpenShow" class="table-select">
<div class="select-box">
- <icon-list class="box-icon" @click="checkcol" :size="24" />
+ <icon-list class="box-icon" :size="24" @click="checkcol" />
<a-scrollbar
+ v-show="iscolopen"
class="box-scrollbar"
type="track"
style="height: 200px; overflow: auto"
- v-show="iscolopen"
>
<a-space class="box-post" direction="vertical" size="large">
- <a-checkbox-group direction="vertical" @change="selCeckBoxList" v-model="checkedValue">
- <a-checkbox v-for="(item, index) in columns" :value="item.title" :key="index">
+ <a-checkbox-group v-model="checkedValue" direction="vertical" @change="selCeckBoxList">
+ <a-checkbox v-for="(item, index) in columns" :key="index" :value="item.title">
{{ item.title }}
</a-checkbox>
</a-checkbox-group>
</a-space>
</a-scrollbar>
</div>
- </div>
+ </div> -->
<a-space direction="vertical" size="large" fill>
<a-table
row-key="id"
@@ -30,10 +30,10 @@
:columns="tableColumns"
:bordered="bordered"
:size="size"
- @page-change="onPageChange"
:max-height="documentHeight"
:scroll="{ x: 1000 }"
:row-selection="rowSelection"
+ @page-change="onPageChange"
@select-all="selectTabAll"
@selection-change="selectTabChange"
>
@@ -46,7 +46,7 @@
>
</a-table-column>
</template> -->
- <template v-for="(item, key, i) in slots" :key="i" v-slot:[key]="{ record, rowIndex, column }">
+ <template v-for="(item, key, i) in slots" :key="i" #[key]="{ record, rowIndex, column }">
<slot :name="key" v-bind="{ rowIndex: rowIndex, record: record, column: column }"></slot>
</template>
</a-table>
@@ -78,7 +78,7 @@
{
columns: () => [], //琛ㄥご
data: () => [], //鏁版嵁
- colOpenShow: true, // 閰嶇疆鍒楄〃 琛ㄥご
+ colOpenShow: false, // 閰嶇疆鍒楄〃 琛ㄥご
loading: false,
pagination: false,
checkedValue: () => [],
diff --git a/src/views/components/the-a-tabs/index.vue b/src/views/components/the-a-tabs/index.vue
index 8e501b0..438a88b 100644
--- a/src/views/components/the-a-tabs/index.vue
+++ b/src/views/components/the-a-tabs/index.vue
@@ -1,6 +1,8 @@
<template>
<div>
- <p v-for="(item, key) in data" :key="key" :class="index === key ? 'active' : ''">{{ item }}</p>
+ <p v-for="(item, key) in data" :key="key" :class="index === key ? 'active' : ''" @click="handleChange(key)">
+ {{ item }}
+ </p>
</div>
</template>
<script lang="ts" setup name="TheATabs">
@@ -14,6 +16,13 @@
data: () => []
}
);
+const emits = defineEmits<{
+ (e: "handleChange", index: number): void;
+}>();
+const handleChange = (index: number) => {
+ if (props.index === index) return;
+ emits("handleChange", index);
+};
</script>
<style lang="scss" scoped>
div {
diff --git a/src/views/components/the-member-info/index.vue b/src/views/components/the-member-info/index.vue
new file mode 100644
index 0000000..c851c3f
--- /dev/null
+++ b/src/views/components/the-member-info/index.vue
@@ -0,0 +1,54 @@
+<template>
+ <div>
+ <header>
+ <p>{{ title }}</p>
+ <span></span>
+ </header>
+ <section>
+ <p v-for="(item, key) in data" :key="key">
+ {{ item }}
+ </p>
+ </section>
+ </div>
+</template>
+<script lang="ts" setup name="TheMemberInfo">
+const props = withDefaults(
+ defineProps<{
+ title?: string;
+ data?: Array<any>;
+ }>(),
+ {
+ title: "",
+ data: () => []
+ }
+);
+</script>
+<style lang="scss" scoped>
+div {
+ padding-bottom: 20px;
+ header {
+ font-size: 16px;
+ padding-left: 10px;
+ border-left: 4px solid #3b93ff;
+ position: relative;
+ display: flex;
+ align-items: center;
+ span {
+ margin-left: 8px;
+ display: block;
+ flex: 1;
+ height: 2px;
+ background: var(--color-bg-3);
+ }
+ }
+ section {
+ overflow: hidden;
+ padding: 12px 0;
+ > p {
+ width: 25%;
+ float: left;
+ margin: 12px 0;
+ }
+ }
+}
+</style>
diff --git a/src/views/oneThree/member/index.vue b/src/views/oneThree/member/index.vue
index 0b0f8b3..5c1119f 100644
--- a/src/views/oneThree/member/index.vue
+++ b/src/views/oneThree/member/index.vue
@@ -46,48 +46,28 @@
</div>
</div>
<div class="right">
- <the-a-tabs style="margin: 8px 0" :data="['鍩烘湰淇℃伅', '浜哄憳杞ㄨ抗', '鍑鸿淇℃伅', '璧勬簮淇℃伅']" :index="0" />
+ <the-a-tabs
+ style="margin: 8px 0"
+ :data="['鍩烘湰淇℃伅', '浜哄憳杞ㄨ抗', '鍑鸿淇℃伅', '璧勬簮淇℃伅']"
+ :index="index"
+ @handleChange="handleChange"
+ />
<section>
- <div class="menus">
- <div><the-a-change :data="changeData" default-value="custom"></the-a-change></div>
- <div><a-time-picker type="time-range" style="width: 250px" /></div>
- <div>
- <the-a-select :data="['姝ｅ簭', '鍊掑簭']" placeholder="璇烽�夋嫨" title="鎺掑簭"></the-a-select>
- </div>
- <div>
- <the-a-select :data="['1鍙锋ゼ', '2鍙锋ゼ']" placeholder="璇烽�夋嫨" title="鍑虹幇鍦扮偣"></the-a-select>
- </div>
- <div>
- <a-button type="primary">
- <template #icon>
- <icon-search />
- </template>
- <template #default>鎼滅储</template>
- </a-button>
- </div>
- <div>
- <a-button>
- <template #icon>
- <icon-refresh />
- </template>
- <template #default>閲嶇疆</template>
- </a-button>
- </div>
- <div class="buttons">
- <div>
- <icon-list size="20" />
- </div>
- <div class="button active">
- <icon-apps size="20" />
- </div>
- </div>
- </div>
+ <member-basic v-if="index === 0" />
+ <member-track v-if="index === 1" />
+ <member-travel v-if="index === 2" />
+ <member-source v-if="index === 3" />
</section>
</div>
</div>
</template>
<script lang="ts" setup name="member">
+import memberBasic from "./pages/basic.vue";
+import memberSource from "./pages/source.vue";
+import memberTrack from "./pages/track.vue";
+import memberTravel from "./pages/travel.vue";
+const index = ref(0);
const changeData = reactive([
{
name: "1澶�",
@@ -103,16 +83,7 @@
}
]);
const data = reactive({
- desc: [
- "鎵�灞炲皬鍖猴細鍖椾含",
- "鎵�灞炴淳鍑烘墍锛氭潵骞胯惀娲惧嚭鎵�",
- "棣栨鎶撴媿鏃堕棿锛�2023-12-12 12:23",
- "棣栨鎶撴媿鍦扮偣锛氫簩鍙锋ゼ",
- "鎶撴媿娆℃暟锛�23",
- "鍑虹幇澶╂暟锛�12",
- "鏈�鍚庡嚭鐜版椂闂达細2024-01-12 12:23",
- "甯镐綇鍦板潃锛欰灏忓尯1鏍�2鍗曞厓201"
- ],
+ desc: ["鎵�灞炲皬鍖猴細鍖椾含", "鎵�灞炴淳鍑烘墍锛氭潵骞胯惀娲惧嚭鎵�", "棣栨鎶撴媿鏃堕棿锛�2023-12-12 12:23"],
tags: [
{
title: "浜哄憳鏍囩",
@@ -142,6 +113,9 @@
}
]
});
+const handleChange = (value: number) => {
+ index.value = value;
+};
</script>
<style lang="scss" scoped>
@@ -230,7 +204,7 @@
}
}
.icons {
- margin: 75px 0;
+ margin: 25px 0 50px;
display: flex;
> div {
margin-right: 10px;
@@ -246,29 +220,6 @@
background: var(--color-bg-2);
padding-top: 20px;
margin-top: 10px;
- .menus {
- display: flex;
- padding: 0 5px 20px 20px;
- > div {
- margin-right: 10px;
- &.buttons {
- display: flex;
- background: var(--color-fill-2);
- > div {
- width: 34px;
- height: 34px;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- &.active {
- background: #1057fd;
- color: #fff;
- }
- }
- }
- }
- }
}
}
}
diff --git a/src/views/oneThree/member/pages/basic.vue b/src/views/oneThree/member/pages/basic.vue
new file mode 100644
index 0000000..cdafdac
--- /dev/null
+++ b/src/views/oneThree/member/pages/basic.vue
@@ -0,0 +1,142 @@
+<template>
+ <section>
+ <the-member-info
+ title="瀹炲悕淇℃伅"
+ :data="[
+ '鐪熷疄濮撳悕锛氬紶涓�',
+ '鑱旂郴鐢佃瘽锛�19821231233',
+ '璇佷欢绫诲瀷锛氬眳姘戣韩浠借瘉',
+ '璇佷欢鐮侊細566635477547575777773',
+ '鎬у埆锛氱敺',
+ '姘戞棌锛氭眽',
+ '鍑虹敓鏃ユ湡锛�2003-12-12',
+ '鎴峰彛鎬ц川锛氬啘',
+ '鎴风睄鍦帮細A灏忓尯1鏍�2鍗曞厓201',
+ '鎵�鍦ㄥ崟浣嶏細xx璐ｄ换鏈夐檺鍏徃',
+ '瀛﹀巻锛氭湰绉�',
+ '濠氬Щ鐘舵�侊細鏈'
+ ]"
+ />
+ <the-member-info
+ title="閲嶇偣浜哄憳淇℃伅"
+ :data="[
+ '鏇剧敤鍚嶏細寮犱笁',
+ '缁板彿锛氬皬寮�',
+ '浣撹〃鏍囪瘑锛氬乏鐪夋瘺鏈変激鐤�',
+ '绀句繚鍙风爜锛�--',
+ '韬珮锛�189cm ',
+ '姘戞棌锛氭眽',
+ '鍑虹敓鏃ユ湡锛�2003-12-12',
+ '浣撻噸锛�50KG',
+ '鎴风睄鍦帮細A灏忓尯1鏍�2鍗曞厓201',
+ '鎵�鍦ㄥ崟浣嶏細xx璐ｄ换鏈夐檺鍏徃',
+ '瀛﹀巻锛氭湰绉�',
+ '濠氬Щ鐘舵�侊細鏈'
+ ]"
+ />
+ <the-a-table
+ :columns="columns"
+ :data="data"
+ :pagination="false"
+ :checked-value="checkedValue"
+ :col-open-show="true"
+ :show-selection="false"
+ @selTableCol="selTableCol"
+ >
+ <template #index="{ record, rowIndex, column }">
+ {{ rowIndex + 1 }}
+ </template>
+ <template #action="{ record, rowIndex, column }">
+ <a-button type="text" size="small">鏌ョ湅</a-button>
+ <a-button type="text" size="small">绠＄悊</a-button>
+ <a-button type="text" size="small">鍏抽棴</a-button>
+ </template>
+ </the-a-table>
+ <div>
+ <a-pagination :total="50" show-total show-jumper show-page-size style="margin-top: 8px" />
+ </div>
+ </section>
+</template>
+
+<script lang="ts" setup name="member-basic">
+const columns = [
+ {
+ title: "搴忓彿",
+ key: "1",
+ dataIndex: "index",
+ width: 80
+ },
+ {
+ title: "灞呬綇鍦板潃",
+ dataIndex: "name",
+ key: "2",
+ width: 280
+ },
+ {
+ title: "鍏ヤ綇鏃堕棿",
+ dataIndex: "inTime",
+ key: "3"
+ },
+ {
+ title: "鎾ょ鏃堕棿",
+ dataIndex: "outTime",
+ key: "4"
+ },
+ {
+ title: "鎾ょ淇℃伅",
+ dataIndex: "outInfo",
+ key: "4"
+ },
+ {
+ title: "灞呬綇鐘舵��",
+ dataIndex: "status",
+ key: "4"
+ }
+];
+
+const checkedValue = ref<string[]>(["搴忓彿", "灞呬綇鍦板潃", "鍏ヤ綇鏃堕棿", "鎾ょ鏃堕棿", "鎾ょ淇℃伅", "灞呬綇鐘舵��"]);
+const data = [
+ {
+ index: "1",
+ name: "@娲惧嚭鎵�@@灏忓尯3鏍嬩竴鍗曞厓",
+ inTime: "2024.10.12 12:12",
+ outTime: "-",
+ outInfo: "--",
+ status: "鍦ㄤ綇"
+ },
+ {
+ index: "2",
+ name: "@娲惧嚭鎵�@@灏忓尯3鏍嬩竴鍗曞厓",
+ inTime: "2024.10.12 12:12",
+ outTime: "-",
+ outInfo: "--",
+ status: "鎾ょ"
+ },
+ {
+ index: "3",
+ name: "@娲惧嚭鎵�@@灏忓尯3鏍嬩竴鍗曞厓",
+ inTime: "2024.10.12 12:12",
+ outTime: "-",
+ outInfo: "--",
+ status: "鎾ょ"
+ },
+ {
+ index: "4",
+ name: "@娲惧嚭鎵�@@灏忓尯3鏍嬩竴鍗曞厓",
+ inTime: "2024.10.12 12:12",
+ outTime: "-",
+ outInfo: "--",
+ status: "鎾ょ"
+ }
+];
+const selTableCol = (val: any) => {
+ checkedValue.value = val;
+ console.log(val);
+};
+</script>
+
+<style lang="scss" scoped>
+section {
+ padding: 10px;
+}
+</style>
diff --git a/src/views/oneThree/member/pages/source.vue b/src/views/oneThree/member/pages/source.vue
new file mode 100644
index 0000000..eac1422
--- /dev/null
+++ b/src/views/oneThree/member/pages/source.vue
@@ -0,0 +1,79 @@
+<template>
+ <div class="menus">
+ <div><the-a-change :data="changeData" default-value="custom"></the-a-change></div>
+ <div><a-time-picker type="time-range" style="width: 250px" /></div>
+ <div>
+ <the-a-select :data="['姝ｅ簭', '鍊掑簭']" placeholder="璇烽�夋嫨" title="鎺掑簭"></the-a-select>
+ </div>
+ <div>
+ <the-a-select :data="['1鍙锋ゼ', '2鍙锋ゼ']" placeholder="璇烽�夋嫨" title="鍑虹幇鍦扮偣"></the-a-select>
+ </div>
+ <div>
+ <a-button type="primary">
+ <template #icon>
+ <icon-search />
+ </template>
+ <template #default>鎼滅储</template>
+ </a-button>
+ </div>
+ <div>
+ <a-button>
+ <template #icon>
+ <icon-refresh />
+ </template>
+ <template #default>閲嶇疆</template>
+ </a-button>
+ </div>
+ <div class="buttons">
+ <div>
+ <icon-list size="20" />
+ </div>
+ <div class="button active">
+ <icon-apps size="20" />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup name="member-source">
+const changeData = reactive([
+ {
+ name: "1澶�",
+ value: "1"
+ },
+ {
+ name: "2澶�",
+ value: "2"
+ },
+ {
+ name: "鑷畾涔�",
+ value: "custom"
+ }
+]);
+</script>
+
+<style lang="scss" scoped>
+.menus {
+ display: flex;
+ padding: 0 5px 20px 20px;
+ > div {
+ margin-right: 10px;
+ &.buttons {
+ display: flex;
+ background: var(--color-fill-2);
+ > div {
+ width: 34px;
+ height: 34px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ &.active {
+ background: #1057fd;
+ color: #fff;
+ }
+ }
+ }
+ }
+}
+</style>
diff --git a/src/views/oneThree/member/pages/track.vue b/src/views/oneThree/member/pages/track.vue
new file mode 100644
index 0000000..aa79aa1
--- /dev/null
+++ b/src/views/oneThree/member/pages/track.vue
@@ -0,0 +1,140 @@
+<template>
+ <div class="menus">
+ <div><the-a-change :data="changeData" default-value="custom"></the-a-change></div>
+ <div><a-time-picker type="time-range" style="width: 250px" /></div>
+ <div>
+ <the-a-select :data="['姝ｅ簭', '鍊掑簭']" placeholder="璇烽�夋嫨" title="鎺掑簭"></the-a-select>
+ </div>
+ <div>
+ <the-a-select :data="['1鍙锋ゼ', '2鍙锋ゼ']" placeholder="璇烽�夋嫨" title="鍑虹幇鍦扮偣"></the-a-select>
+ </div>
+ <div>
+ <a-button type="primary">
+ <template #icon>
+ <icon-search />
+ </template>
+ <template #default>鎼滅储</template>
+ </a-button>
+ </div>
+ <div>
+ <a-button>
+ <template #icon>
+ <icon-refresh />
+ </template>
+ <template #default>閲嶇疆</template>
+ </a-button>
+ </div>
+ <div class="buttons">
+ <div>
+ <icon-list size="20" />
+ </div>
+ <div class="button active">
+ <icon-apps size="20" />
+ </div>
+ </div>
+ </div>
+ <div class="cards">
+ <a-card v-for="(item, key) in list" :key="key" class="card-box card-bg-custom">
+ <the-img-card :title="item.title" :icon="item.icon" :contents="item.contents"></the-img-card>
+ <div class="card-box-right">
+ <div>
+ <a-space>
+ <a-button type="primary" size="mini">{{ item.tags[0] }}</a-button>
+ <a-button type="primary" status="danger" size="mini">{{ item.tags[1] }}</a-button>
+ </a-space>
+ </div>
+ <div>
+ <a-space>
+ <icon-book />
+ <icon-bar-chart />
+ </a-space>
+ </div>
+ </div>
+ </a-card>
+ </div>
+</template>
+
+<script lang="ts" setup name="member-track">
+const changeData = reactive([
+ {
+ name: "1澶�",
+ value: "1"
+ },
+ {
+ name: "2澶�",
+ value: "2"
+ },
+ {
+ name: "鑷畾涔�",
+ value: "custom"
+ }
+]);
+const list = reactive(
+ new Array(5).fill({
+ icon: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
+ title: "寮犱笁",
+ tags: ["涓婅", "娑夋瘨"],
+ contents: [
+ {
+ key: "浜哄憳缂栧彿",
+ value: "H324343"
+ },
+ {
+ key: "鍑虹幇澶╂暟",
+ value: "2澶�"
+ },
+ {
+ key: "灞呬綇鍦板潃",
+ value: "缁忔祹蹇�熺瓑绾ц�冭瘯"
+ },
+ {
+ key: "韬唤璇佸彿",
+ value: "3673672627722"
+ }
+ ]
+ })
+);
+</script>
+
+<style lang="scss" scoped>
+.cards {
+ overflow: hidden;
+ > div {
+ float: left;
+ margin: 0 20px 20px 0;
+ }
+}
+.card-box {
+ width: 391px;
+ height: 202px;
+ border-radius: 5px;
+}
+.card-box-right {
+ margin-top: 10px;
+ display: flex;
+ justify-content: space-between;
+}
+.menus {
+ display: flex;
+ padding: 0 5px 20px 20px;
+ > div {
+ margin-right: 10px;
+ &.buttons {
+ display: flex;
+ background: var(--color-fill-2);
+ > div {
+ width: 34px;
+ height: 34px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ &.active {
+ background: #1057fd;
+ color: #fff;
+ }
+ }
+ }
+ }
+}
+</style>
diff --git a/src/views/oneThree/member/pages/travel.vue b/src/views/oneThree/member/pages/travel.vue
new file mode 100644
index 0000000..1e3a132
--- /dev/null
+++ b/src/views/oneThree/member/pages/travel.vue
@@ -0,0 +1,85 @@
+<template>
+ <div class="menus">
+ <div><the-a-change :data="changeData" default-value="custom"></the-a-change></div>
+ <div><a-time-picker type="time-range" style="width: 250px" /></div>
+ <div>
+ <the-a-select :data="['姝ｅ簭', '鍊掑簭']" placeholder="璇烽�夋嫨" title="鎺掑簭"></the-a-select>
+ </div>
+ <div>
+ <the-a-select :data="['1鍙锋ゼ', '2鍙锋ゼ']" placeholder="璇烽�夋嫨" title="鍑虹幇鍦扮偣"></the-a-select>
+ </div>
+ <div>
+ <a-button type="primary">
+ <template #icon>
+ <icon-search />
+ </template>
+ <template #default>鎼滅储</template>
+ </a-button>
+ </div>
+ <div>
+ <a-button>
+ <template #icon>
+ <icon-refresh />
+ </template>
+ <template #default>閲嶇疆</template>
+ </a-button>
+ </div>
+ <div class="buttons">
+ <div>
+ <icon-list size="20" />
+ </div>
+ <div class="button active">
+ <icon-apps size="20" />
+ </div>
+ </div>
+ </div>
+ <div class="pagination">
+ <a-pagination :total="50" show-total show-jumper show-page-size style="margin-top: 8px" />
+ </div>
+</template>
+
+<script lang="ts" setup name="member-travel">
+const changeData = reactive([
+ {
+ name: "1澶�",
+ value: "1"
+ },
+ {
+ name: "2澶�",
+ value: "2"
+ },
+ {
+ name: "鑷畾涔�",
+ value: "custom"
+ }
+]);
+</script>
+
+<style lang="scss" scoped>
+.menus {
+ display: flex;
+ padding: 0 5px 20px 20px;
+ > div {
+ margin-right: 10px;
+ &.buttons {
+ display: flex;
+ background: var(--color-fill-2);
+ > div {
+ width: 34px;
+ height: 34px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ &.active {
+ background: #1057fd;
+ color: #fff;
+ }
+ }
+ }
+ }
+}
+.pagination {
+ padding: 20px;
+}
+</style>
--
Gitblit v1.8.0