+
+
+
+
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
new file mode 100644
index 0000000..ddca7f8
--- /dev/null
+++ b/src/components/SvgIcon/index.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
diff --git a/src/components/Table/index.vue b/src/components/Table/index.vue
new file mode 100644
index 0000000..7665c8b
--- /dev/null
+++ b/src/components/Table/index.vue
@@ -0,0 +1,146 @@
+
+
+
+ {{ msg }}
+ +
+
+
+
+
+ Edit
+ components/HelloWorld.vue to test HMR
+
+ Check out + create-vue, the official Vue + Vite starter +
++ Install + Volar + in your IDE for a better DX +
+Click on the Vite and Vue logos to learn more
+
+ {{ action.name }}
+
+
+
+
+ 暂无图片
+
+
+
+
+
+
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..e2a29da
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,5 @@
+/**
+ *title: 自动导出组件
+ */
+export { default as Header } from './Header/index.vue';
+export { default as Footer } from './Footer/index.vue';
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
new file mode 100644
index 0000000..35af8bc
--- /dev/null
+++ b/src/hooks/useTheme.ts
@@ -0,0 +1,19 @@
+import { useStorage } from '@vueuse/core';
+import { ref } from 'vue';
+export const useTheme = (theme?: string) => {
+ const StorageTheme = useStorage('data-theme', theme) || ref('default');
+ const setTheme = (theme: string) => {
+ StorageTheme.value = theme;
+ const body = document.getElementsByTagName('body')[0];
+ if (body) {
+ body.setAttribute('data-theme', StorageTheme.value);
+ }
+ };
+ if (theme) {
+ setTheme(theme);
+ } else {
+ setTheme(StorageTheme.value as string);
+ }
+
+ return { StorageTheme, setTheme };
+};
diff --git a/src/icons/close.svg b/src/icons/close.svg
new file mode 100644
index 0000000..93972f8
--- /dev/null
+++ b/src/icons/close.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/icons/github.svg b/src/icons/github.svg
new file mode 100644
index 0000000..03f9b59
--- /dev/null
+++ b/src/icons/github.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/icons/menu.svg b/src/icons/menu.svg
new file mode 100644
index 0000000..bf19dd5
--- /dev/null
+++ b/src/icons/menu.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/icons/open.svg b/src/icons/open.svg
new file mode 100644
index 0000000..0e89e99
--- /dev/null
+++ b/src/icons/open.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/layout/Footer/config.ts b/src/layout/Footer/config.ts
new file mode 100644
index 0000000..e2a4890
--- /dev/null
+++ b/src/layout/Footer/config.ts
@@ -0,0 +1,10 @@
+export const footerList = {
+ data: [
+ {
+ id: 0,
+ name: 'Github',
+ url: 'https://github.com/LOG1997',
+ icon: 'github',
+ },
+ ],
+};
diff --git a/src/layout/Footer/index.vue b/src/layout/Footer/index.vue
new file mode 100644
index 0000000..31fc0db
--- /dev/null
+++ b/src/layout/Footer/index.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
diff --git a/src/layout/Header/config.ts b/src/layout/Header/config.ts
new file mode 100644
index 0000000..82f3595
--- /dev/null
+++ b/src/layout/Header/config.ts
@@ -0,0 +1,17 @@
+export const navList = [
+ {
+ id: 0,
+ name: '首页',
+ url: 'home',
+ },
+ {
+ id: 1,
+ name: '项目',
+ url: 'project',
+ },
+ {
+ id: 2,
+ name: '关于',
+ url: 'about',
+ },
+]
diff --git a/src/layout/Header/index.vue b/src/layout/Header/index.vue
new file mode 100644
index 0000000..f41cd85
--- /dev/null
+++ b/src/layout/Header/index.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
diff --git a/src/layout/index.vue b/src/layout/index.vue
new file mode 100644
index 0000000..98ba261
--- /dev/null
+++ b/src/layout/index.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..8c7d383
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,19 @@
+import { createApp } from 'vue';
+import './style.css';
+
+import App from './App.vue';
+
+const app = createApp(App);
+// 全局svg组件
+import 'virtual:svg-icons-register';
+import svgIcon from '@/components/SvgIcon/index.vue';
+// svg全局组件// 路由
+import router from '@/router';
+// pinia
+import { createPinia } from 'pinia';
+// pinia持久化
+import piniaPluginPersist from 'pinia-plugin-persist';
+const pinia = createPinia();
+pinia.use(piniaPluginPersist);
+app.component('svg-icon', svgIcon);
+app.use(router).use(pinia).mount('#app');
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..7392174
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,39 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import Layout from '@/layout/index.vue';
+import Home from '@/views/Home/index.vue';
+const routes = [
+ {
+ path: '/',
+ component: Layout,
+ redirect: '/home',
+ children: [
+ {
+ path: '/home',
+ name: 'Home',
+ component: Home,
+ },
+ {
+ path: '/guide',
+ name: 'Guide',
+ component: () => import('@/views/Guide/index.vue'),
+ },
+ {
+ path: '/doc',
+ name: 'Doc',
+ component: () => import('@/views/Doc/index.vue'),
+ },
+ {
+ path: '/about',
+ name: 'About',
+ component: () => import('@/views/About/index.vue'),
+ },
+ ],
+ },
+];
+
+const router = createRouter({
+ history: createWebHistory(),
+ routes,
+});
+
+export default router;
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..52b6357
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,7 @@
+import { useUserStore } from './user';
+
+export default function useStore() {
+ return {
+ user: useUserStore(),
+ };
+}
diff --git a/src/store/user.ts b/src/store/user.ts
new file mode 100644
index 0000000..fb9e461
--- /dev/null
+++ b/src/store/user.ts
@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia';
+import { IUser } from '@/types/user';
+
+export const useUserStore = defineStore('user', {
+ state() {
+ return {
+ userList: [] as IUser[],
+ };
+ },
+ getters: {
+ getUserList(state) {
+ return state.userList;
+ },
+ },
+ actions: {
+ setUserList() {
+ const resList: IUser[] = [
+ { name: '张三', age: 18 },
+ { name: '李四', age: 19 },
+ ];
+ this.userList = resList;
+ },
+ },
+ persist: {
+ enabled: true,
+ strategies: [
+ {
+ // 如果要存储在localStorage中
+ // storage: localStorage,
+ paths: ['userList'],
+ },
+ ],
+ },
+});
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..83542fd
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,55 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body,
+html {
+ margin: 0;
+ padding: 0;
+ overflow-y: overlay;
+ overflow: hidden;
+}
+
+ul {
+ list-style: none;
+}
+
+/* 优化滚动条 */
+::-webkit-scrollbar {
+ /*滚动条整体样式*/
+ height: 10px;
+ width: 10px;
+ background: rgba(12, 9, 9, 0.1);
+ float: right;
+}
+
+::-webkit-scrollbar:hover {
+ background: rgba(0, 0, 0, 0.2);
+}
+
+/* .tables::-webkit-scrollbar-track {
+ background: rgb(239, 239, 239);
+ border-radius: 2px;
+ } */
+::-webkit-scrollbar-thumb {
+ /* 滚动条 */
+ background: #909399;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ -ms-border-radius: 6px;
+ -o-border-radius: 6px;
+ border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+ /* Webkit browsers */
+ -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+ /* Firefox */
+ -ms-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+ /* IE9 */
+ -o-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+ /* Opera(Old) */
+ box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+ /* IE9+, News */
+}
\ No newline at end of file
diff --git a/src/style/_blue_theme.scss b/src/style/_blue_theme.scss
new file mode 100644
index 0000000..937f8cd
--- /dev/null
+++ b/src/style/_blue_theme.scss
@@ -0,0 +1,22 @@
+$theme-color: #2e1f78;
+$important-color: #02e5f6;
+$font-color: #fbfbfb;
+$light-color: #fd5913;
+$normal-color: #15115d;
+$dark-card-color: #fbfbfb;
+
+$blue_theme: (
+ theme-bg-color: $theme-color,
+ font-color: $font-color,
+ font-color-second: darken($font-color, 20%),
+ light-bg-color: $light-color,
+ normal-color: $normal-color,
+ header-bg-color: lighten($theme-color, 10%),
+ header-bg-color-hover: lighten($theme-color, 20%),
+ shawdow-color: darken($theme-color, 5%),
+ shawdow-color-hover: darken($theme-color, 15%),
+ border-color: lighten($theme-color, 20%),
+ important-color: lighten($important-color, 20%),
+ important-bg-color: transparentize($important-color, 0.9),
+ dark-card-color: $dark-card-color,
+);
diff --git a/src/style/_dark_theme.scss b/src/style/_dark_theme.scss
new file mode 100644
index 0000000..90c7eef
--- /dev/null
+++ b/src/style/_dark_theme.scss
@@ -0,0 +1,22 @@
+$theme-color: #1e1f25;
+$important-color: #ff864d;
+$font-color: #fbfbfb;
+$light-color: #00e6f6;
+$normal-color: #183561;
+$dark-card-color: #fbfbfb;
+
+$dark_theme: (
+ theme-bg-color: $theme-color,
+ font-color: $font-color,
+ font-color-second: darken($font-color, 20%),
+ light-bg-color: $light-color,
+ normal-color: $normal-color,
+ header-bg-color: lighten($theme-color, 10%),
+ header-bg-color-hover: lighten($theme-color, 20%),
+ shawdow-color: darken($theme-color, 5%),
+ shawdow-color-hover: darken($theme-color, 15%),
+ border-color: lighten($theme-color, 20%),
+ important-color: lighten($important-color, 20%),
+ important-bg-color: transparentize($important-color, 0.9),
+ dark-card-color: $dark-card-color,
+);
diff --git a/src/style/_default.scss b/src/style/_default.scss
new file mode 100644
index 0000000..6c4a61f
--- /dev/null
+++ b/src/style/_default.scss
@@ -0,0 +1,22 @@
+$theme-color: #fbfbfb;
+$important-color: #6a47bb;
+$font-color: #030303;
+$light-color: #409eff;
+$normal-color: #fbfbfb;
+$dark-card-color: #fbfbfb;
+
+$default: (
+ theme-bg-color: $theme-color,
+ font-color: $font-color,
+ font-color-second: darken($font-color, 20%),
+ light-bg-color: $light-color,
+ normal-color: $normal-color,
+ header-bg-color: lighten($theme-color, 10%),
+ header-bg-color-hover: lighten($theme-color, 20%),
+ shawdow-color: darken($theme-color, 5%),
+ shawdow-color-hover: darken($theme-color, 15%),
+ border-color: lighten($theme-color, 20%),
+ important-color: lighten($important-color, 20%),
+ important-bg-color: transparentize($important-color, 0.9),
+ dark-card-color: $dark-card-color,
+);
diff --git a/src/style/_purple_theme.scss b/src/style/_purple_theme.scss
new file mode 100644
index 0000000..5d88564
--- /dev/null
+++ b/src/style/_purple_theme.scss
@@ -0,0 +1,22 @@
+$theme-color: #0a142e;
+$important-color: #8c5ff6;
+$font-color: #fbfbfb;
+$light-color: #c678fd;
+$normal-color: #0a142e;
+$dark-card-color: #fbfbfb;
+
+$purple_theme: (
+ theme-bg-color: $theme-color,
+ font-color: $font-color,
+ font-color-second: darken($font-color, 20%),
+ light-bg-color: $light-color,
+ normal-color: $normal-color,
+ header-bg-color: lighten($theme-color, 10%),
+ header-bg-color-hover: lighten($theme-color, 20%),
+ shawdow-color: darken($theme-color, 5%),
+ shawdow-color-hover: darken($theme-color, 15%),
+ border-color: lighten($theme-color, 20%),
+ important-color: lighten($important-color, 20%),
+ important-bg-color: transparentize($important-color, 0.9),
+ dark-card-color: $dark-card-color,
+);
diff --git a/src/style/changeTheme.ts b/src/style/changeTheme.ts
new file mode 100644
index 0000000..80b6755
--- /dev/null
+++ b/src/style/changeTheme.ts
@@ -0,0 +1 @@
+import './global.scss';
diff --git a/src/style/global.module.scss b/src/style/global.module.scss
new file mode 100644
index 0000000..68aed3a
--- /dev/null
+++ b/src/style/global.module.scss
@@ -0,0 +1,14 @@
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+body {
+ // background: $theme-bg-color;
+}
diff --git a/src/style/global.scss b/src/style/global.scss
new file mode 100644
index 0000000..ce86650
--- /dev/null
+++ b/src/style/global.scss
@@ -0,0 +1,11 @@
+// global.scss
+@import "./theme/index.scss";
+// variables.scss
+$primary-color: #fe4e5e;
+$background-color: #fefefe;
+$padding: 124px;
+// :export {
+// primaryColor: $primary-color;
+// backgroundColor: $background-color;
+// padding: $padding;
+// }
diff --git a/src/style/index.scss b/src/style/index.scss
new file mode 100644
index 0000000..cdf3869
--- /dev/null
+++ b/src/style/index.scss
@@ -0,0 +1,50 @@
+@import "./default.scss"; //默认主题颜色
+@import "./dark_theme.scss"; // 红色主题颜色
+@import "./blue_theme.scss"; // 灰色主题颜色
+@import "./purple_theme.scss"; // 灰色主题颜色
+//生成对应元素的主题样式代码
+//主题参数
+$themes: (
+ default: $default,
+ blue_theme: $blue_theme,
+ dark_theme: $dark_theme,
+ purple_theme: $purple_theme,
+);
+// 生成body的主题样式
+@mixin themeify {
+ @each $themes-key, $themes-map in $themes {
+ $themes-map: $themes-map !global;
+ &[data-theme="#{$themes-key}"] {
+ @content;
+ }
+ }
+}
+// 生成子元素样式
+@mixin themeChildify {
+ @each $themes-key, $themes-map in $themes {
+ $themes-map: $themes-map !global;
+ [data-theme="#{$themes-key}"] & {
+ @content;
+ }
+ }
+}
+// 获取主题对应的theme-color
+@function getThemeColor($key) {
+ $currentTheme: map-get($themes, $key);
+ @return map-get($currentTheme, "theme-bg-color");
+}
+@function themed($key) {
+ @if map-get($themes-map, $key) {
+ @return map-get($themes-map, $key);
+ } @else {
+ @return $key;
+ }
+}
+// 随机数颜色
+@function themedRandom($key) {
+ @if map-get($themes-map, $key) {
+ @return map-get($themes-map, $key);
+ } @else {
+ @return $key;
+ }
+} ;
diff --git a/src/style/theme/_blue_theme.scss b/src/style/theme/_blue_theme.scss
new file mode 100644
index 0000000..937f8cd
--- /dev/null
+++ b/src/style/theme/_blue_theme.scss
@@ -0,0 +1,22 @@
+$theme-color: #2e1f78;
+$important-color: #02e5f6;
+$font-color: #fbfbfb;
+$light-color: #fd5913;
+$normal-color: #15115d;
+$dark-card-color: #fbfbfb;
+
+$blue_theme: (
+ theme-bg-color: $theme-color,
+ font-color: $font-color,
+ font-color-second: darken($font-color, 20%),
+ light-bg-color: $light-color,
+ normal-color: $normal-color,
+ header-bg-color: lighten($theme-color, 10%),
+ header-bg-color-hover: lighten($theme-color, 20%),
+ shawdow-color: darken($theme-color, 5%),
+ shawdow-color-hover: darken($theme-color, 15%),
+ border-color: lighten($theme-color, 20%),
+ important-color: lighten($important-color, 20%),
+ important-bg-color: transparentize($important-color, 0.9),
+ dark-card-color: $dark-card-color,
+);
diff --git a/src/style/theme/_dark_theme.scss b/src/style/theme/_dark_theme.scss
new file mode 100644
index 0000000..90c7eef
--- /dev/null
+++ b/src/style/theme/_dark_theme.scss
@@ -0,0 +1,22 @@
+$theme-color: #1e1f25;
+$important-color: #ff864d;
+$font-color: #fbfbfb;
+$light-color: #00e6f6;
+$normal-color: #183561;
+$dark-card-color: #fbfbfb;
+
+$dark_theme: (
+ theme-bg-color: $theme-color,
+ font-color: $font-color,
+ font-color-second: darken($font-color, 20%),
+ light-bg-color: $light-color,
+ normal-color: $normal-color,
+ header-bg-color: lighten($theme-color, 10%),
+ header-bg-color-hover: lighten($theme-color, 20%),
+ shawdow-color: darken($theme-color, 5%),
+ shawdow-color-hover: darken($theme-color, 15%),
+ border-color: lighten($theme-color, 20%),
+ important-color: lighten($important-color, 20%),
+ important-bg-color: transparentize($important-color, 0.9),
+ dark-card-color: $dark-card-color,
+);
diff --git a/src/style/theme/_default.scss b/src/style/theme/_default.scss
new file mode 100644
index 0000000..6c4a61f
--- /dev/null
+++ b/src/style/theme/_default.scss
@@ -0,0 +1,22 @@
+$theme-color: #fbfbfb;
+$important-color: #6a47bb;
+$font-color: #030303;
+$light-color: #409eff;
+$normal-color: #fbfbfb;
+$dark-card-color: #fbfbfb;
+
+$default: (
+ theme-bg-color: $theme-color,
+ font-color: $font-color,
+ font-color-second: darken($font-color, 20%),
+ light-bg-color: $light-color,
+ normal-color: $normal-color,
+ header-bg-color: lighten($theme-color, 10%),
+ header-bg-color-hover: lighten($theme-color, 20%),
+ shawdow-color: darken($theme-color, 5%),
+ shawdow-color-hover: darken($theme-color, 15%),
+ border-color: lighten($theme-color, 20%),
+ important-color: lighten($important-color, 20%),
+ important-bg-color: transparentize($important-color, 0.9),
+ dark-card-color: $dark-card-color,
+);
diff --git a/src/style/theme/_purple_theme.scss b/src/style/theme/_purple_theme.scss
new file mode 100644
index 0000000..5d88564
--- /dev/null
+++ b/src/style/theme/_purple_theme.scss
@@ -0,0 +1,22 @@
+$theme-color: #0a142e;
+$important-color: #8c5ff6;
+$font-color: #fbfbfb;
+$light-color: #c678fd;
+$normal-color: #0a142e;
+$dark-card-color: #fbfbfb;
+
+$purple_theme: (
+ theme-bg-color: $theme-color,
+ font-color: $font-color,
+ font-color-second: darken($font-color, 20%),
+ light-bg-color: $light-color,
+ normal-color: $normal-color,
+ header-bg-color: lighten($theme-color, 10%),
+ header-bg-color-hover: lighten($theme-color, 20%),
+ shawdow-color: darken($theme-color, 5%),
+ shawdow-color-hover: darken($theme-color, 15%),
+ border-color: lighten($theme-color, 20%),
+ important-color: lighten($important-color, 20%),
+ important-bg-color: transparentize($important-color, 0.9),
+ dark-card-color: $dark-card-color,
+);
diff --git a/src/style/theme/index.scss b/src/style/theme/index.scss
new file mode 100644
index 0000000..cdf3869
--- /dev/null
+++ b/src/style/theme/index.scss
@@ -0,0 +1,50 @@
+@import "./default.scss"; //默认主题颜色
+@import "./dark_theme.scss"; // 红色主题颜色
+@import "./blue_theme.scss"; // 灰色主题颜色
+@import "./purple_theme.scss"; // 灰色主题颜色
+//生成对应元素的主题样式代码
+//主题参数
+$themes: (
+ default: $default,
+ blue_theme: $blue_theme,
+ dark_theme: $dark_theme,
+ purple_theme: $purple_theme,
+);
+// 生成body的主题样式
+@mixin themeify {
+ @each $themes-key, $themes-map in $themes {
+ $themes-map: $themes-map !global;
+ &[data-theme="#{$themes-key}"] {
+ @content;
+ }
+ }
+}
+// 生成子元素样式
+@mixin themeChildify {
+ @each $themes-key, $themes-map in $themes {
+ $themes-map: $themes-map !global;
+ [data-theme="#{$themes-key}"] & {
+ @content;
+ }
+ }
+}
+// 获取主题对应的theme-color
+@function getThemeColor($key) {
+ $currentTheme: map-get($themes, $key);
+ @return map-get($currentTheme, "theme-bg-color");
+}
+@function themed($key) {
+ @if map-get($themes-map, $key) {
+ @return map-get($themes-map, $key);
+ } @else {
+ @return $key;
+ }
+}
+// 随机数颜色
+@function themedRandom($key) {
+ @if map-get($themes-map, $key) {
+ @return map-get($themes-map, $key);
+ } @else {
+ @return $key;
+ }
+} ;
diff --git a/src/types/table.ts b/src/types/table.ts
new file mode 100644
index 0000000..6ef4b1e
--- /dev/null
+++ b/src/types/table.ts
@@ -0,0 +1,18 @@
+export interface TableItemType {
+ prop: string;
+ label: string;
+ width: number;
+ image?: boolean;
+ actions?: actionsItemType[];
+ aligen?: string;
+ formatter?: ItemFuncType;
+ getType?: ItemFuncType;
+}
+interface ItemFuncType {
+ (row: any): any;
+}
+interface actionsItemType {
+ name: string;
+ func: any;
+ type?: any;
+}
diff --git a/src/types/user.ts b/src/types/user.ts
new file mode 100644
index 0000000..097b7d5
--- /dev/null
+++ b/src/types/user.ts
@@ -0,0 +1,6 @@
+// 用户的类型声明文件
+export interface IUser {
+ name: string;
+ age: number;
+}
+// ...
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
new file mode 100644
index 0000000..4162234
--- /dev/null
+++ b/src/utils/auth.ts
@@ -0,0 +1,3 @@
+export function getToken() {
+ return window.localStorage.getItem('userToken');
+}
diff --git a/src/views/About/index.vue b/src/views/About/index.vue
new file mode 100644
index 0000000..9d9b649
--- /dev/null
+++ b/src/views/About/index.vue
@@ -0,0 +1,42 @@
+
+
+
+ About
+ +
+
+
+
+
+
+
+