go-pkg/wireguard-dashboard-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

mod: 使用unocss重写首页样式

Browse Source
This commit is contained in:
张传龙 2022-06-19 15:02:58 +08:00
parent 8ae4046285
commit ac9ccbadf0
3 changed files with 41 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/styles/index.scss
View File

@ -30,12 +30,12 @@ body {
/* 自定义滚动条样式 */ /* 自定义滚动条样式 */
.cur-scroll { .cur-scroll {
&::-webkit-scrollbar{ &::-webkit-scrollbar{
width:8px; width: 6px;
height:6px; height: 6px;
} }
&::-webkit-scrollbar-thumb{ &::-webkit-scrollbar-thumb{
background-color: transparent; background-color: transparent;
border-radius:4px; border-radius: 3px;
} }
&::-webkit-scrollbar-corner{ &::-webkit-scrollbar-corner{

82
src/views/dashboard/index.vue
View File

@ -1,42 +1,51 @@
<template> <template>
<div> <div p-15>
<n-card> <n-card rounded-10>
<div flex items-center> <div flex items-center>
<img width="60" style="border-radius: 50%" :src="userStore.avatar" /> <img rounded-full width="60" :src="userStore.avatar" />
<div ml20> <div ml-20>
<p text-16>Hello, {{ userStore.name }}</p> <p text-16>Hello, {{ userStore.name }}</p>
<p op80 text-12 mt5>今天又是元气满满的一天</p> <p mt-5 text-12 op-60>今天又是元气满满的一天</p>
</div> </div>
<div flex ml-auto> <div ml-auto flex items-center>
<n-statistic label="待办" :value="4"> <n-statistic label="待办" :value="4">
<template #suffix> / 10 </template> <template #suffix> / 10 </template>
</n-statistic> </n-statistic>
<n-statistic ml80 label="Stars"> <n-statistic label="Stars" w-100 ml-80>
<n-number-animation ref="starsNumberRef" show-separator :from="0" :to="999" /> <a href="https://github.com/zclzone/vue-naive-admin">
<img allt="stars" src="https://badgen.net/github/stars/zclzone/vue-naive-admin" />
</a>
</n-statistic> </n-statistic>
<n-statistic ml80 label="Forks"> <n-statistic label="Forks" w-100 ml-80>
<n-number-animation ref="starsNumberRef" show-separator :from="0" :to="299" /> <a href="https://github.com/zclzone/vue-naive-admin">
<img allt="forks" src="https://badgen.net/github/forks/zclzone/vue-naive-admin" />
</a>
</n-statistic> </n-statistic>
</div> </div>
</div> </div>
</n-card> </n-card>
<div p15 flex> <n-card title="项目" size="small" :segmented="true" mt-15 rounded-10>
<n-card title="项目" size="small" :segmented="true"> <template #header-extra>
<template #header-extra> <n-button text type="primary">更多</n-button>
<n-button text type="primary">更多</n-button> </template>
</template> <div flex flex-wrap justify-between>
<div class="card-list"> <n-card
<n-card v-for="i in 10" :key="i" title="Vue Naive Admin" size="small"> v-for="i in 10"
<p op60>一个基于 Vue3.0、Vite、Naive UI 的轻量级后台管理模板</p> :key="i"
</n-card> class="w-300 flex-shrink-0 mt-10 mb-10 cursor-pointer"
<div class="blank"></div> hover:card-shadow
<div class="blank"></div> title="Vue Naive Admin"
<div class="blank"></div> size="small"
<div class="blank"></div> >
</div> <p op-60>一个基于 Vue3.0、Vite、Naive UI 的轻量级后台管理模板</p>
</n-card> </n-card>
</div> <div w-300 h-0></div>
<div w-300 h-0></div>
<div w-300 h-0></div>
<div w-300 h-0></div>
</div>
</n-card>
</div> </div>
</template> </template>
@ -45,24 +54,3 @@ import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore() const userStore = useUserStore()
</script> </script>
<style lang="scss" scoped>
.card-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.n-card {
width: 300px;
flex-shrink: 0;
margin: 10px 0;
cursor: pointer;
&:hover {
box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017;
}
}
.blank {
width: 300px;
height: 0;
}
}
</style>

4
unocss.config.js
View File

@ -3,11 +3,13 @@ import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'
export default defineConfig({ export default defineConfig({
shortcuts: [ shortcuts: [
['f-c-c', 'flex justify-center items-center'], ['f-c-c', 'flex justify-center items-center'],
['ellipsis', 'truncate'], ['text-ellipsis', 'truncate'],
['wh-full', 'w-full h-full'],
], ],
rules: [ rules: [
['color-primary', { color: 'var(--primaryColor)' }], ['color-primary', { color: 'var(--primaryColor)' }],
['bgc-primary', { backgroundColor: 'var(--primaryColor)' }], ['bgc-primary', { backgroundColor: 'var(--primaryColor)' }],
['card-shadow', { 'box-shadow': '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017' }],
], ],
presets: [presetUno(), presetAttributify()], presets: [presetUno(), presetAttributify()],
}) })