Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,16 @@
},
"dependencies": {
"@element-plus/icons-vue": "^2.0.10",
"@iconify/json": "^2.2.130",
"@unocss/reset": "^0.56.5",
"@vueuse/core": "^9.3.1",
"animate.css": "^4.1.1",
"axios": "^1.1.3",
"element-plus": "^2.2.18",
"less": "^4.1.3",
"moment": "^2.29.4",
"pinia": "^2.0.21",
"sass": "^1.58.3",
"unocss": "^0.45.29",
"vue": "^3.2.38",
"vue-router": "^4.1.5"
Expand Down
1,998 changes: 1,029 additions & 969 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

25 changes: 25 additions & 0 deletions src/assets/css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
:root {
--primary-color: #316c72;
--dark-bg: #18181c;
}

html {
font-size: 4px; /* 方便unocss计算:1单位 = 0.25rem = 1px*/
}

body {
font-size: 16px;
}

html,
body,
#app {
height: 100%;
margin: 0;
padding: 0;
}

html.dark {
background: var(--dark-bg);
}

Binary file added src/assets/images/logo/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 31 additions & 2 deletions src/layout/content/index.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,38 @@
<template>
<div>内容</div>
<el-main>
<el-timeline>
<el-timeline-item center timestamp="2018/4/12" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/12 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/3 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item center timestamp="2018/4/2" placement="top">
Event start
</el-timeline-item>
<el-timeline-item timestamp="2018/4/2" placement="top">
Event end
</el-timeline-item>
</el-timeline>
</el-main>
</template>

<script setup lang='ts'>
import {ref,reactive} from 'vue'
import { ref, reactive } from "vue";
import {
Check,
Delete,
Edit,
Message,
Search,
Star,
} from "@element-plus/icons-vue";
</script>

<style scoped lang='less'>
Expand Down
18 changes: 18 additions & 0 deletions src/layout/header/components/logo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@

<template #content>
<div class="flex items-center" m-0>
<el-avatar
:size="32"
class="mr-3"
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
/>
<el-tag>Default</el-tag>
</div>
</template>
<script setup lang='ts'>

</script>

<style scoped>

</style>
70 changes: 70 additions & 0 deletions src/layout/header/components/navBar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<template>
<div aria-label="A complete example of page header">
<el-page-header @back="onBack">
<template #breadcrumb>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: './page-header.html' }">
homepage
</el-breadcrumb-item>
<el-breadcrumb-item
><a href="./page-header.html">route 1</a></el-breadcrumb-item
>
<el-breadcrumb-item>route 2</el-breadcrumb-item>
</el-breadcrumb>
</template>
<template #content>
<div class="flex items-center">
<el-avatar
class="mr-3"
:size="32"
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
/>
<span class="text-large font-600 mr-3"> Title </span>
<span
class="text-sm mr-2"
style="color: var(--el-text-color-regular)"
>
Sub title
</span>
<el-tag>Default</el-tag>
</div>
</template>
<template #extra>
<div class="flex items-center">
<el-button>Print</el-button>
<el-button type="primary" class="ml-2">Edit</el-button>
</div>
</template>

<el-descriptions :column="3" size="small" class="mt-4">
<el-descriptions-item label="Username"
>kooriookami</el-descriptions-item
>
<el-descriptions-item label="Telephone"
>18100000000</el-descriptions-item
>
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
<el-descriptions-item label="Remarks">
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item label="Address"
>No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
</el-descriptions-item>
</el-descriptions>
<p class="mt-4 text-sm">
Element Plus team uses <b>weekly</b> release strategy under normal
circumstance, but critical bug fixes would require hotfix so the actual
release number <b>could be</b> more than 1 per week.
</p>
</el-page-header>
</div>
</template>

<script setup lang="ts">
import { ElNotification as notify } from 'element-plus'

const onBack = () => {
notify('Back')
}
</script>

26 changes: 26 additions & 0 deletions src/layout/header/components/setting.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template #extra>
<div class="flex items-center">
<i i-logos-unocss text-5 inline-block />
<p text-xs inline-flex gap-1>
<i @click="toggleDark()" icon-btn dark:i-carbon-moon i-carbon-sun />
<a
icon-btn
i-carbon-logo-github
href="https://github.com/zclzone"
target="_blank"
title="GitHub"
/>
</p>
</div>
</template>
<script setup lang='ts'>
import { ref, reactive } from "vue";
import { useDark, useToggle } from "@vueuse/core";

const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>

<style scoped>

</style>
22 changes: 18 additions & 4 deletions src/layout/header/index.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,25 @@
<template>
<div>头部</div>
<el-header p-0>
<el-page-header :icon="null" rounded bg-indigo>
<logo></logo>
<nav-bar></nav-bar>
<setting></setting>
</el-page-header>
</el-header>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { defineAsyncComponent } from "vue";

const Logo = defineAsyncComponent(()=>import("@/layout/header/components/logo.vue"))
const NavBar = defineAsyncComponent(()=>import("@/layout/header/components/navBar.vue"))
const Setting = defineAsyncComponent(()=>import("@/layout/header/components/setting.vue"))

</script>

<style scoped lang='less'>

<style scoped>
i,
a {
font-size: 2rem;
}
</style>
19 changes: 11 additions & 8 deletions src/layout/index.vue
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
<template>
<div>
<Header></Header>
<Content></Content>
</div>
<el-container direction="vertical" dark:text-white dark:bg-hex-121212 h-screen>
<LayoutHeader />
<LayoutMain />
</el-container>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import Header from './header/index.vue'
import Content from './content/index.vue'
import { ref, reactive, defineAsyncComponent } from "vue";
const LayoutHeader = defineAsyncComponent(
() => import("@/layout/header/index.vue")
);
const LayoutMain = defineAsyncComponent(
() => import("@/layout/content/index.vue")
);
</script>

<style scoped lang='less'>

</style>
9 changes: 7 additions & 2 deletions src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,16 @@ import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import '@/assets/css/reset.css'

import 'element-plus/dist/index.css'
import '@/theme/element.scss'
import 'uno.css'
// import axios from 'axios'
const app = createApp(App)

app.use(createPinia())
app.use(router)

app.use(ElementPlus)
// app.use(axios)
app.mount('#app')
Loading