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 {
&::-webkit-scrollbar{
width:8px;
height:6px;
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-thumb{
background-color: transparent;
border-radius:4px;
border-radius: 3px;
}
&::-webkit-scrollbar-corner{

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

@ -1,42 +1,51 @@
<template>
<div>
<n-card>
<div p-15>
<n-card rounded-10>
<div flex items-center>
<img width="60" style="border-radius: 50%" :src="userStore.avatar" />
<div ml20>
<img rounded-full width="60" :src="userStore.avatar" />
<div ml-20>
<p text-16>Hello, {{ userStore.name }}</p>
<p op80 text-12 mt5>今天又是元气满满的一天</p>
<p mt-5 text-12 op-60>今天又是元气满满的一天</p>
</div>
<div flex ml-auto>
<div ml-auto flex items-center>
<n-statistic label="待办" :value="4">
<template #suffix> / 10 </template>
</n-statistic>
<n-statistic ml80 label="Stars">
<n-number-animation ref="starsNumberRef" show-separator :from="0" :to="999" />
<n-statistic label="Stars" w-100 ml-80>
<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 ml80 label="Forks">
<n-number-animation ref="starsNumberRef" show-separator :from="0" :to="299" />
<n-statistic label="Forks" w-100 ml-80>
<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>
</div>
</div>
</n-card>
<div p15 flex>
<n-card title="项目" size="small" :segmented="true">
<template #header-extra>
<n-button text type="primary">更多</n-button>
</template>
<div class="card-list">
<n-card v-for="i in 10" :key="i" title="Vue Naive Admin" size="small">
<p op60>一个基于 Vue3.0、Vite、Naive UI 的轻量级后台管理模板</p>
</n-card>
<div class="blank"></div>
<div class="blank"></div>
<div class="blank"></div>
<div class="blank"></div>
</div>
</n-card>
</div>
<n-card title="项目" size="small" :segmented="true" mt-15 rounded-10>
<template #header-extra>
<n-button text type="primary">更多</n-button>
</template>
<div flex flex-wrap justify-between>
<n-card
v-for="i in 10"
:key="i"
class="w-300 flex-shrink-0 mt-10 mb-10 cursor-pointer"
hover:card-shadow
title="Vue Naive Admin"
size="small"
>
<p op-60>一个基于 Vue3.0、Vite、Naive UI 的轻量级后台管理模板</p>
</n-card>
<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>
</template>
@ -45,24 +54,3 @@ import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
</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({
shortcuts: [
['f-c-c', 'flex justify-center items-center'],
['ellipsis', 'truncate'],
['text-ellipsis', 'truncate'],
['wh-full', 'w-full h-full'],
],
rules: [
['color-primary', { color: '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()],
})