style(projects): unify card border radius, 16px to 8px

This commit is contained in:
Soybean
2023-06-20 00:17:18 +08:00
parent 3318041b92
commit cbda4a38a3
32 changed files with 68 additions and 65 deletions

View File

@@ -1,14 +1,14 @@
<template>
<n-grid :x-gap="16" :y-gap="16" :item-responsive="true">
<n-grid-item span="0:24 640:24 1024:8">
<n-card title="时间线" :bordered="false" class="h-full rounded-16px shadow-sm">
<n-card title="时间线" :bordered="false" class="h-full rounded-8px shadow-sm">
<n-timeline>
<n-timeline-item v-for="item in timelines" :key="item.type" v-bind="item" />
</n-timeline>
</n-card>
</n-grid-item>
<n-grid-item span="0:24 640:24 1024:16">
<n-card title="表格" :bordered="false" class="h-full rounded-16px shadow-sm">
<n-card title="表格" :bordered="false" class="h-full rounded-8px shadow-sm">
<n-data-table size="small" :columns="columns" :data="tableData" />
</n-card>
</n-grid-item>

View File

@@ -1,5 +1,5 @@
<template>
<div class="p-16px rounded-16px text-white" :style="{ backgroundImage: gradientStyle }">
<div class="p-16px rounded-8px text-white" :style="{ backgroundImage: gradientStyle }">
<slot></slot>
</div>
</template>

View File

@@ -1,20 +1,22 @@
<template>
<n-grid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
<n-grid-item v-for="item in cardData" :key="item.id">
<gradient-bg class="h-100px" :start-color="item.colors[0]" :end-color="item.colors[1]">
<h3 class="text-16px">{{ item.title }}</h3>
<div class="flex justify-between pt-12px">
<svg-icon :icon="item.icon" class="text-32px" />
<count-to
:prefix="item.unit"
:start-value="1"
:end-value="item.value"
class="text-30px text-white dark:text-dark"
/>
</div>
</gradient-bg>
</n-grid-item>
</n-grid>
<n-card :bordered="false" class="h-full rounded-8px shadow-sm">
<n-grid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
<n-grid-item v-for="item in cardData" :key="item.id">
<gradient-bg class="h-100px" :start-color="item.colors[0]" :end-color="item.colors[1]">
<h3 class="text-16px">{{ item.title }}</h3>
<div class="flex justify-between pt-12px">
<svg-icon :icon="item.icon" class="text-32px" />
<count-to
:prefix="item.unit"
:start-value="1"
:end-value="item.value"
class="text-30px text-white dark:text-dark"
/>
</div>
</gradient-bg>
</n-grid-item>
</n-grid>
</n-card>
</template>
<script setup lang="ts">

View File

@@ -1,7 +1,7 @@
<template>
<n-grid :x-gap="16" :y-gap="16" :item-responsive="true">
<n-grid-item span="0:24 640:24 1024:6">
<n-card :bordered="false" class="rounded-16px shadow-sm">
<n-card :bordered="false" class="rounded-8px shadow-sm">
<div class="w-full h-360px py-12px">
<h3 class="text-16px font-bold">Dashboard</h3>
<p class="text-#aaa">Overview Of Lasted Month</p>
@@ -18,12 +18,12 @@
</n-card>
</n-grid-item>
<n-grid-item span="0:24 640:24 1024:10">
<n-card :bordered="false" class="rounded-16px shadow-sm">
<n-card :bordered="false" class="rounded-8px shadow-sm">
<div ref="lineRef" class="w-full h-360px"></div>
</n-card>
</n-grid-item>
<n-grid-item span="0:24 640:24 1024:8">
<n-card :bordered="false" class="rounded-16px shadow-sm">
<n-card :bordered="false" class="rounded-8px shadow-sm">
<div ref="pieRef" class="w-full h-360px"></div>
</n-card>
</n-grid-item>

View File

@@ -1,5 +1,5 @@
<template>
<n-card :bordered="false" class="rounded-16px shadow-sm">
<n-card :bordered="false" class="rounded-8px shadow-sm">
<div class="flex-y-center justify-between">
<div class="flex-y-center">
<icon-local-avatar class="text-70px" />

View File

@@ -2,7 +2,7 @@
<n-grid :item-responsive="true" :x-gap="16" :y-gap="16">
<n-grid-item span="0:24 640:24 1024:16">
<n-space :vertical="true" :size="16">
<n-card title="项目主要技术栈" :bordered="false" size="small" class="shadow-sm rounded-16px">
<n-card title="项目主要技术栈" :bordered="false" size="small" class="rounded-8px shadow-sm">
<template #header-extra>
<a class="text-primary" href="javascript:;">更多技术栈</a>
</template>
@@ -12,7 +12,7 @@
</n-grid-item>
</n-grid>
</n-card>
<n-card title="动态" :bordered="false" size="small" class="shadow-sm rounded-16px">
<n-card title="动态" :bordered="false" size="small" class="rounded-8px shadow-sm">
<template #header-extra>
<a class="text-primary" href="javascript:;">更多动态</a>
</template>
@@ -29,14 +29,14 @@
</n-grid-item>
<n-grid-item span="0:24 640:24 1024:8">
<n-space :vertical="true" :size="16">
<n-card title="快捷操作" :bordered="false" size="small" class="shadow-sm rounded-16px">
<n-card title="快捷操作" :bordered="false" size="small" class="rounded-8px shadow-sm">
<n-grid :item-responsive="true" responsive="screen" cols="m:2 l:3" :x-gap="8" :y-gap="8">
<n-grid-item v-for="item in shortcuts" :key="item.id">
<shortcuts-card v-bind="item" />
</n-grid-item>
</n-grid>
</n-card>
<n-card title="创意" :bordered="false" size="small" class="shadow-sm rounded-16px">
<n-card title="创意" :bordered="false" size="small" class="rounded-8px shadow-sm">
<div class="flex-center h-380px">
<icon-local-banner class="text-400px sm:text-320px text-primary" />
</div>