style(styles): 修改了示例页的样式

This commit is contained in:
Coffee-crocodile 2022-08-10 14:47:31 +08:00
parent b6894a8e6e
commit a3a137df5e
2 changed files with 27 additions and 22 deletions

View File

@ -11,7 +11,7 @@
>
<n-menu :collapsed="collapsed" :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
</n-layout-sider>
<n-layout h-full bg-hex-f3-f4-f6 :native-scrollbar="false">
<n-layout h-full bg-hex-f3f4f6 :native-scrollbar="false">
<n-layout-header bordered text-2xl h-60px flex-y-center>layout-page</n-layout-header>
<div p-16px>
<n-layout-content>
@ -46,7 +46,7 @@ const menuOptions: MenuOption[] = [
{ default: () => 'test1' },
),
key: 'test1',
icon: renderIcon('icon-park:ad-product'),
icon: renderIcon('icon-park-outline:alarm'),
},
{
label: () =>
@ -60,7 +60,7 @@ const menuOptions: MenuOption[] = [
{ default: () => 'test2' },
),
key: 'test2',
icon: renderIcon('icon-park:ad-product'),
icon: renderIcon('icon-park-outline:alarm'),
},
{
label: () =>
@ -74,7 +74,7 @@ const menuOptions: MenuOption[] = [
{ default: () => 'test3' },
),
key: 'test3',
icon: renderIcon('icon-park:ad-product'),
icon: renderIcon('icon-park-outline:alarm'),
},
{
label: () =>
@ -88,12 +88,12 @@ const menuOptions: MenuOption[] = [
{ default: () => '登录页' },
),
key: '登录页',
icon: renderIcon('icon-park:ad-product'),
icon: renderIcon('icon-park-outline:alarm'),
},
{
label: '舞,舞,舞',
key: 'dance-dance-dance',
icon: renderIcon('icon-park:arithmetic'),
icon: renderIcon('icon-park-outline:alarm'),
children: [
{
label: '饮品',

View File

@ -1,30 +1,35 @@
<template>
<div text-center c-blue>I prove that you have made the jump test1.</div>
<div text-center cursor-pointer>
<div hover:c-blue @click="pinter">click check env</div>
<div hover:c-blue @click="get">click to get</div>
<div hover:c-blue @click="post">click to post</div>
<div hover:c-blue @click="delete2">click to delete</div>
<div hover:c-blue @click="put">click to put</div>
<div hover:c-blue @click="patch">click to patch</div>
<div hover:c-blue @click="mock">click to use mock</div>
<div>
<n-space>
<n-button strong secondary type="success" @click="pinter">check env</n-button>
<n-button strong secondary type="success" @click="get">to get</n-button>
<n-button strong secondary type="success" @click="post">to post</n-button>
<n-button strong secondary type="success" @click="delete2">to delete</n-button>
<n-button strong secondary type="success" @click="put">to put</n-button>
<n-button strong secondary type="success" @click="patch">to patch</n-button>
<n-button strong secondary type="success" @click="mock">to use mock</n-button>
</n-space>
{{ msg }}
</div>
</template>
<script setup lang="ts">
import { fetachGet, fetachPost, fetachDelete, fetachPut, fetachPatch, fetchMock } from '@/service/api';
import { ref } from 'vue';
const msg = ref();
const pinter = () => {
msg.value = import.meta.env;
console.log('打印环境配置', import.meta.env);
};
const get = () => {
fetachGet().then((res) => {
console.log(res);
msg.value = res;
});
};
const delete2 = () => {
fetachDelete().then((res) => {
console.log(res);
msg.value = res;
});
};
const post = () => {
@ -32,7 +37,7 @@ const post = () => {
data: '2022-2-2',
};
fetachPost(params).then((res) => {
console.log(res);
msg.value = res;
});
};
const put = () => {
@ -40,7 +45,7 @@ const put = () => {
data: '2022-2-2',
};
fetachPut(params).then((res) => {
console.log(res);
msg.value = res;
});
};
const patch = () => {
@ -48,12 +53,12 @@ const patch = () => {
data: '2022-2-2',
};
fetachPatch(params).then((res) => {
console.log(res);
msg.value = res;
});
};
const mock = () => {
fetchMock().then((res) => {
console.log(res);
msg.value = res;
});
};
</script>