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

style: simplify unocss test page

Browse Source
This commit is contained in:
张传龙 2022-07-14 16:40:25 +08:00
parent 94b46d9bf6
commit 3860cf9ebb
1 changed files with 6 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/test-page/unocss/index.vue
View File

@ -11,10 +11,10 @@
</p> </p>
<div flex mt-20> <div flex mt-20>
<div flex p-20 rounded-5 bg-white> <div flex p-20 rounded-5 bg="#fff">
<div text-20 font-600>Flex布局</div> <div text-20 font-600>Flex布局</div>
<div flex w-360 flex-wrap justify-around ml-15 p-10> <div flex w-360 flex-wrap justify-around ml-15 p-10>
<div w-50 h-50 b-1 rounded-5 flex justify-center items-center p-10 m-20> <div w-50 h-50 b-1 rounded-5 f-c-c p-10 m-20>
<span w-6 h-6 rounded-3 bg-black></span> <span w-6 h-6 rounded-3 bg-black></span>
</div> </div>
<div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20> <div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
@ -27,16 +27,16 @@
<span w-6 h-6 rounded-3 bg-black self-end></span> <span w-6 h-6 rounded-3 bg-black self-end></span>
</div> </div>
<div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20> <div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
<div flex flex-col justify-between> <div flex-col justify-between>
<span w-6 h-6 rounded-3 bg-black></span> <span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span> <span w-6 h-6 rounded-3 bg-black></span>
</div> </div>
<div flex flex-col justify-between> <div flex-col justify-between>
<span w-6 h-6 rounded-3 bg-black></span> <span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span> <span w-6 h-6 rounded-3 bg-black></span>
</div> </div>
</div> </div>
<div w-50 h-50 b-1 rounded-5 flex flex-col justify-between items-center p-10 m-20> <div w-50 h-50 b-1 rounded-5 f-c-c flex-col p-10 m-20>
<div flex w-full justify-between> <div flex w-full justify-between>
<span w-6 h-6 rounded-3 bg-black></span> <span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span> <span w-6 h-6 rounded-3 bg-black></span>
@ -47,7 +47,7 @@
<span w-6 h-6 rounded-3 bg-black></span> <span w-6 h-6 rounded-3 bg-black></span>
</div> </div>
</div> </div>
<div w-50 h-50 b-1 rounded-5 flex flex-col justify-between p-10 m-20> <div w-50 h-50 b-1 rounded-5 flex-col justify-between p-10 m-20>
<div flex w-full justify-between> <div flex w-full justify-between>
<span w-6 h-6 rounded-3 bg-black></span> <span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span> <span w-6 h-6 rounded-3 bg-black></span>
@ -63,32 +63,6 @@
</div> </div>
</div> </div>
</div> </div>
<div flex ml-35 p-20 rounded-5 bg="#fff">
<div text-20 font-600>字体：</div>
<div ml-15 p-10 pl-30 pr-30 rounded-5>
<p text-12>font-size: 12px</p>
<p text-16>font-size: 16px</p>
<p text-20>font-size: 20px</p>
<p font-300 mt-10>font-weight: 300</p>
<p font-600>font-weight: 600</p>
<p font-bold>font-weight: bold</p>
</div>
</div>
<div flex p-20 ml-35 rounded-5 bg-white>
<div text-20 font-600>颜色：</div>
<div ml-15 p-10 pl-30 pr-30 rounded-5>
<p color="#881337">color: #881337</p>
<p c-pink-500>color: #ec4899</p>
<p bg="pink" mt-10>background: pink</p>
<p bg="#2563eb" mt-10>background: #2563eb</p>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup></script>