blackteay/ThinkAdmin
1
0
Fork 0
mirror of https://gitee.com/zoujingli/ThinkAdmin.git synced 2025-04-05 19:41:44 +08:00
Code Issues Projects Releases Wiki Activity

增加字体支持

Browse Source
This commit is contained in:
Anyon 2021-11-26 13:16:52 +08:00
parent 4419fb36fe
commit 68f4d6bdc8
5 changed files with 91 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -24,11 +24,7 @@
</head>
<body>
<div id="app">
<layout></layout>
</div>
<layout></layout>
</body>
</html>

21
static/app.js
View File

@ -6,8 +6,8 @@
},
getFile(url) {
return fetch(url).then(res => {
if (!res.ok) throw Object.assign(new Error(url + ' ' + res.statusText), {res});
return res.text();
if (res.ok) return res.text();
throw Object.assign(new Error(url + ' ' + res.statusText), {res});
});
},
addStyle(textContent) {
@ -21,10 +21,6 @@
const loadVue = (vuePath) => loadModule(vuePath, options);
const loadVueFile = (vuePath) => () => loadVue(vuePath);
const app = Vue.createApp({
name: 'app',
components: {layout: await loadVue('./static/template/layout.vue')}
});
const router = VueRouter.createRouter({
routes: [],
@ -54,8 +50,19 @@
}
});
app.use(ElementPlus).use(router).mount("#app");
window.app = Vue.createApp({
name: 'app',
components: {
layout: await loadVue('./static/template/layout.vue'),
}
});
// 全局字体文件
const icons = await loadVue("https://unpkg.com/@element-plus/icons@0.0.11/lib/index.js");
for (let i in icons) app.component(i, icons[i]);
app.use(router).use(ElementPlus).mount(document.body);
})().catch(function (ex) {
console.error(ex);
});

37
static/app.less
View File

@ -1,37 +0,0 @@
html, body, #app {
height: 100%;
display: block;
margin: 0;
padding: 0;
}
#app > .el-container {
height: 100%;
> .el-header {
color: #fff;
background: #0d84ff;
line-height: 60px;
}
> .el-container {
> .el-aside {
background: #53a8ff;
}
> .el-container {
> .el-main {
background: gray;
}
> .el-footer {
color: #fff;
background: #333;
line-height: 60px;
}
}
}
}

4
static/template/index.vue
View File

@ -1,12 +1,14 @@
<template>
<div>
<el-icon :size="16">
<edit></edit>
</el-icon>
{{ userName }}: 你好 vue3
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
userName: "张三"

79
static/template/layout.vue
View File

@ -1,8 +1,73 @@
<template>
<el-container>
<el-header>Header</el-header>
<el-header style="padding:0">
<el-menu
mode="horizontal"
text-color="#fff"
:default-active="1"
background-color="rgba(54,25,88,.9)"
active-text-color="rgba(54,25,88,1)"
>
<el-menu-item route="/" index="1">ThinkAdmin For HTML</el-menu-item>
<el-sub-menu index="2">
<template #title>Workspace</template>
<el-menu-item index="2-1">item one</el-menu-item>
<el-menu-item index="2-2">item two</el-menu-item>
<el-menu-item index="2-3">item three</el-menu-item>
</el-sub-menu>
<el-menu-item index="3" disabled>Info</el-menu-item>
<el-menu-item index="4">Orders</el-menu-item>
</el-menu>
</el-header>
<el-container>
<el-aside width="280px"></el-aside>
<el-aside width="280px">
<el-container style="height:100%">
<el-aside width="80px" style="background:rgba(54,25,88,.9);height:100%">
</el-aside>
<el-container style="background:#8c939d">
<el-menu default-active="1" style="width:100%">
<el-sub-menu index="1">
<template #title>
<el-icon>
<location/>
</el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item one</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<el-icon>
<icon-menu/>
</el-icon>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-icon>
<document/>
</el-icon>
<span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<el-icon>
<setting/>
</el-icon>
<span>Navigator Four</span>
</el-menu-item>
</el-menu>
</el-container>
</el-container>
</el-aside>
<el-container>
<el-main>
<router-view></router-view>
@ -14,14 +79,14 @@
</template>
<style lang="less">
html, body, #app {
html, body {
height: 100%;
display: block;
margin: 0;
padding: 0;
}
#app > .el-container {
body > .el-container {
height: 100%;
> .el-header {
@ -39,7 +104,7 @@ html, body, #app {
> .el-container {
> .el-main {
background: gray;
background: #efefef;
}
> .el-footer {
@ -58,7 +123,9 @@ export default {
name: "layout",
components: {},
data() {
return {}
return {
menus: []
}
},
created() {
},