feat: 代码开发中...

This commit is contained in:
2023-03-16 07:04:56 +08:00
parent 1a377c911f
commit 63147e4c08
34 changed files with 482 additions and 218 deletions

View File

@@ -20,6 +20,20 @@ tasks.register("npmBuild", NpmTask) {
args = ['run', 'build']
}
tasks.register("npmBuildOnly", NpmTask) {
dependsOn("npmInstall")
inputs.files(
'public', 'src',
'env.d.ts', 'index.html',
'package.json', 'package-lock.json',
'tsconfig.config.json', 'tsconfig.json',
'vite.config.ts'
)
outputs.files(fileTree('dist'))
args = ['run', 'build-only']
}
//调用npm run dev
tasks.register("npmDev", NpmTask) {

View File

@@ -1,12 +1,12 @@
{
"name": "vue-project",
"version": "0.0.0",
"name": "blog-frontend",
"version": "0.0.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "vue-project",
"version": "0.0.0",
"name": "blog-frontend",
"version": "0.0.1",
"dependencies": {
"axios": "^1.3.4",
"element-plus": "^2.2.32",

View File

@@ -1,9 +1,9 @@
{
"name": "vue-project",
"version": "0.0.0",
"name": "blog-frontend",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite --port 3000",
"dev": "vite --host 0.0.0.0 --port 3000",
"build": "run-p type-check build-only",
"preview": "vite preview",
"build-only": "vite build",

View File

@@ -1,45 +1,50 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { RouterLink, RouterView } from 'vue-router'
import VueIndexVuew from '@/views/VueIndexVuew.vue'
import * as api from '@/api-base/index'
// let userAPI = api.UserControllerApiFp();
api.UserControllerApiFactory().getAllUserInfo()
.then(response => {
let data = response.data;
console.log(data)
})
.catch(err => {
console.error(err);
})
let title = ref("网站标题")
onMounted(() => {
api.SiteSettingControllerApiFactory().getSiteTitle()
.then(response => {
console.log(response.data)
title.value = response.data.data || "网站标题"
})
.catch(err => {
console.error(err);
})
})
const activeIndex = ref('index')
const handleSelect = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
</script>
<template>
<el-container>
<el-header>
<el-row :gutter="20">
<el-col :span="4">
<h1>网站标题</h1>
</el-col>
<el-col :span="16">
<h1>
<RouterLink to="/" class="router-link">首页</RouterLink>
<RouterLink to="/" class="router-link">项目</RouterLink>
<RouterLink to="/" class="router-link">分类</RouterLink>
<a href="/swagger-ui/index.html">Swagger</a>
&nbsp;
<a href="https://editor.swagger.io/">Editor</a>
</h1>
</el-col>
<el-col :span="4">
<h1>头像</h1>
</el-col>
</el-row>
<el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" @select="handleSelect">
<el-menu-item index="index"> {{ title }} </el-menu-item>
<el-menu-item index="categorize"> 分类 </el-menu-item>
<el-menu-item index="tags"> 标签 </el-menu-item>
<div class="flex-grow" />
<el-menu-item index="login">登录 </el-menu-item>
<el-menu-item index="register"> 注册 </el-menu-item>
</el-menu>
</el-header>
<el-main>
<RouterView />
</el-main>
<el-footer></el-footer>
<el-footer>
<p>
<a href="/swagger-ui/index.html">Swagger</a>
|
<a href="https://editor.swagger.io/">Editor</a>
</p>
</el-footer>
</el-container>
</template>
@@ -47,24 +52,9 @@ api.UserControllerApiFactory().getAllUserInfo()
.el-container {
width: 100%;
height: 100%;
padding: 5px;
background-color: aqua;
}
.el-header {
height: 60px;
background-color: aliceblue;
}
.el-row {
margin-bottom: 20px;
}
.el-col {
background-color: aquamarine;
}
.router-link {
margin-right: 5px;
.flex-grow {
flex-grow: 1;
}
</style>

View File

@@ -10,6 +10,8 @@
* NOTE: This class is auto generated by the swagger code generator program.
* https://github.com/swagger-api/swagger-codegen.git
* Do not edit the class manually.
*/export * from './apis/blog-controller-api';
*/export * from './apis/attach-controller-api';
export * from './apis/blog-controller-api';
export * from './apis/site-setting-controller-api';
export * from './apis/user-controller-api';

View File

@@ -17,12 +17,46 @@ import { Configuration } from '../configuration';
// @ts-ignore
import { BASE_PATH, COLLECTION_FORMATS, RequestArgs, BaseAPI, RequiredError } from '../base';
import { ResponseVOListBlogEntity } from '../models';
import { ResponseVOVoid } from '../models';
/**
* BlogControllerApi - axios parameter creator
* @export
*/
export const BlogControllerApiAxiosParamCreator = function (configuration?: Configuration) {
return {
/**
*
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
createBlog: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
const localVarPath = `/api/v1/blog/`;
// use dummy base URL string because the URL constructor only accepts absolute URLs.
const localVarUrlObj = new URL(localVarPath, 'https://example.com');
let baseOptions;
if (configuration) {
baseOptions = configuration.baseOptions;
}
const localVarRequestOptions :AxiosRequestConfig = { method: 'POST', ...baseOptions, ...options};
const localVarHeaderParameter = {} as any;
const localVarQueryParameter = {} as any;
const query = new URLSearchParams(localVarUrlObj.search);
for (const key in localVarQueryParameter) {
query.set(key, localVarQueryParameter[key]);
}
for (const key in options.params) {
query.set(key, options.params[key]);
}
localVarUrlObj.search = (new URLSearchParams(query)).toString();
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
return {
url: localVarUrlObj.pathname + localVarUrlObj.search + localVarUrlObj.hash,
options: localVarRequestOptions,
};
},
/**
*
* @param {*} [options] Override http request option.
@@ -51,6 +85,45 @@ export const BlogControllerApiAxiosParamCreator = function (configuration?: Conf
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
return {
url: localVarUrlObj.pathname + localVarUrlObj.search + localVarUrlObj.hash,
options: localVarRequestOptions,
};
},
/**
*
* @param {string} blogID
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
modifyBlog: async (blogID: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
// verify required parameter 'blogID' is not null or undefined
if (blogID === null || blogID === undefined) {
throw new RequiredError('blogID','Required parameter blogID was null or undefined when calling modifyBlog.');
}
const localVarPath = `/api/v1/blog/{blogID}/`
.replace(`{${"blogID"}}`, encodeURIComponent(String(blogID)));
// use dummy base URL string because the URL constructor only accepts absolute URLs.
const localVarUrlObj = new URL(localVarPath, 'https://example.com');
let baseOptions;
if (configuration) {
baseOptions = configuration.baseOptions;
}
const localVarRequestOptions :AxiosRequestConfig = { method: 'PUT', ...baseOptions, ...options};
const localVarHeaderParameter = {} as any;
const localVarQueryParameter = {} as any;
const query = new URLSearchParams(localVarUrlObj.search);
for (const key in localVarQueryParameter) {
query.set(key, localVarQueryParameter[key]);
}
for (const key in options.params) {
query.set(key, options.params[key]);
}
localVarUrlObj.search = (new URLSearchParams(query)).toString();
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
return {
url: localVarUrlObj.pathname + localVarUrlObj.search + localVarUrlObj.hash,
options: localVarRequestOptions,
@@ -65,6 +138,18 @@ export const BlogControllerApiAxiosParamCreator = function (configuration?: Conf
*/
export const BlogControllerApiFp = function(configuration?: Configuration) {
return {
/**
*
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async createBlog(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOVoid>>> {
const localVarAxiosArgs = await BlogControllerApiAxiosParamCreator(configuration).createBlog(options);
return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
return axios.request(axiosRequestArgs);
};
},
/**
*
* @param {*} [options] Override http request option.
@@ -77,6 +162,19 @@ export const BlogControllerApiFp = function(configuration?: Configuration) {
return axios.request(axiosRequestArgs);
};
},
/**
*
* @param {string} blogID
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async modifyBlog(blogID: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOVoid>>> {
const localVarAxiosArgs = await BlogControllerApiAxiosParamCreator(configuration).modifyBlog(blogID, options);
return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
return axios.request(axiosRequestArgs);
};
},
}
};
@@ -86,6 +184,14 @@ export const BlogControllerApiFp = function(configuration?: Configuration) {
*/
export const BlogControllerApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
return {
/**
*
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async createBlog(options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOVoid>> {
return BlogControllerApiFp(configuration).createBlog(options).then((request) => request(axios, basePath));
},
/**
*
* @param {*} [options] Override http request option.
@@ -94,6 +200,15 @@ export const BlogControllerApiFactory = function (configuration?: Configuration,
async getBlogList(options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOListBlogEntity>> {
return BlogControllerApiFp(configuration).getBlogList(options).then((request) => request(axios, basePath));
},
/**
*
* @param {string} blogID
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async modifyBlog(blogID: string, options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOVoid>> {
return BlogControllerApiFp(configuration).modifyBlog(blogID, options).then((request) => request(axios, basePath));
},
};
};
@@ -104,6 +219,15 @@ export const BlogControllerApiFactory = function (configuration?: Configuration,
* @extends {BaseAPI}
*/
export class BlogControllerApi extends BaseAPI {
/**
*
* @param {*} [options] Override http request option.
* @throws {RequiredError}
* @memberof BlogControllerApi
*/
public async createBlog(options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOVoid>> {
return BlogControllerApiFp(this.configuration).createBlog(options).then((request) => request(this.axios, this.basePath));
}
/**
*
* @param {*} [options] Override http request option.
@@ -113,4 +237,14 @@ export class BlogControllerApi extends BaseAPI {
public async getBlogList(options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOListBlogEntity>> {
return BlogControllerApiFp(this.configuration).getBlogList(options).then((request) => request(this.axios, this.basePath));
}
/**
*
* @param {string} blogID
* @param {*} [options] Override http request option.
* @throws {RequiredError}
* @memberof BlogControllerApi
*/
public async modifyBlog(blogID: string, options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOVoid>> {
return BlogControllerApiFp(this.configuration).modifyBlog(blogID, options).then((request) => request(this.axios, this.basePath));
}
}

View File

@@ -16,8 +16,11 @@ import { Configuration } from '../configuration';
// Some imports not used depending on template conditions
// @ts-ignore
import { BASE_PATH, COLLECTION_FORMATS, RequestArgs, BaseAPI, RequiredError } from '../base';
import { ResponseVOListUserInfoResponseVO } from '../models';
import { ResponseVOUserInfoResponseVO } from '../models';
import { ResponseVOUserRegisterResponseVO } from '../models';
import { ResponseVOVoid } from '../models';
import { UserModifyRequireVO } from '../models';
import { UserRegisterRequireVO } from '../models';
/**
* UserControllerApi - axios parameter creator
@@ -99,10 +102,15 @@ export const UserControllerApiAxiosParamCreator = function (configuration?: Conf
},
/**
*
* @param {UserModifyRequireVO} body
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
modifyUserInfo: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
modifyUserInfo: async (body: UserModifyRequireVO, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
// verify required parameter 'body' is not null or undefined
if (body === null || body === undefined) {
throw new RequiredError('body','Required parameter body was null or undefined when calling modifyUserInfo.');
}
const localVarPath = `/api/v1/user/`;
// use dummy base URL string because the URL constructor only accepts absolute URLs.
const localVarUrlObj = new URL(localVarPath, 'https://example.com');
@@ -114,6 +122,8 @@ export const UserControllerApiAxiosParamCreator = function (configuration?: Conf
const localVarHeaderParameter = {} as any;
const localVarQueryParameter = {} as any;
localVarHeaderParameter['Content-Type'] = 'application/json';
const query = new URLSearchParams(localVarUrlObj.search);
for (const key in localVarQueryParameter) {
query.set(key, localVarQueryParameter[key]);
@@ -124,6 +134,8 @@ export const UserControllerApiAxiosParamCreator = function (configuration?: Conf
localVarUrlObj.search = (new URLSearchParams(query)).toString();
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
const needsSerialization = (typeof body !== "string") || localVarRequestOptions.headers['Content-Type'] === 'application/json';
localVarRequestOptions.data = needsSerialization ? JSON.stringify(body !== undefined ? body : {}) : (body || "");
return {
url: localVarUrlObj.pathname + localVarUrlObj.search + localVarUrlObj.hash,
@@ -186,7 +198,7 @@ export const UserControllerApiFp = function(configuration?: Configuration) {
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async getAllUserInfo(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOVoid>>> {
async getAllUserInfo(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOListUserInfoResponseVO>>> {
const localVarAxiosArgs = await UserControllerApiAxiosParamCreator(configuration).getAllUserInfo(options);
return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
@@ -199,7 +211,7 @@ export const UserControllerApiFp = function(configuration?: Configuration) {
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async getUserInfo(userID: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<any>>> {
async getUserInfo(userID: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOUserInfoResponseVO>>> {
const localVarAxiosArgs = await UserControllerApiAxiosParamCreator(configuration).getUserInfo(userID, options);
return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
@@ -208,11 +220,12 @@ export const UserControllerApiFp = function(configuration?: Configuration) {
},
/**
*
* @param {UserModifyRequireVO} body
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async modifyUserInfo(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<any>>> {
const localVarAxiosArgs = await UserControllerApiAxiosParamCreator(configuration).modifyUserInfo(options);
async modifyUserInfo(body: UserModifyRequireVO, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOVoid>>> {
const localVarAxiosArgs = await UserControllerApiAxiosParamCreator(configuration).modifyUserInfo(body, options);
return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
return axios.request(axiosRequestArgs);
@@ -245,7 +258,7 @@ export const UserControllerApiFactory = function (configuration?: Configuration,
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async getAllUserInfo(options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOVoid>> {
async getAllUserInfo(options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOListUserInfoResponseVO>> {
return UserControllerApiFp(configuration).getAllUserInfo(options).then((request) => request(axios, basePath));
},
/**
@@ -254,16 +267,17 @@ export const UserControllerApiFactory = function (configuration?: Configuration,
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async getUserInfo(userID: string, options?: AxiosRequestConfig): Promise<AxiosResponse<any>> {
async getUserInfo(userID: string, options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOUserInfoResponseVO>> {
return UserControllerApiFp(configuration).getUserInfo(userID, options).then((request) => request(axios, basePath));
},
/**
*
* @param {UserModifyRequireVO} body
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async modifyUserInfo(options?: AxiosRequestConfig): Promise<AxiosResponse<any>> {
return UserControllerApiFp(configuration).modifyUserInfo(options).then((request) => request(axios, basePath));
async modifyUserInfo(body: UserModifyRequireVO, options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOVoid>> {
return UserControllerApiFp(configuration).modifyUserInfo(body, options).then((request) => request(axios, basePath));
},
/**
*
@@ -290,7 +304,7 @@ export class UserControllerApi extends BaseAPI {
* @throws {RequiredError}
* @memberof UserControllerApi
*/
public async getAllUserInfo(options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOVoid>> {
public async getAllUserInfo(options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOListUserInfoResponseVO>> {
return UserControllerApiFp(this.configuration).getAllUserInfo(options).then((request) => request(this.axios, this.basePath));
}
/**
@@ -300,17 +314,18 @@ export class UserControllerApi extends BaseAPI {
* @throws {RequiredError}
* @memberof UserControllerApi
*/
public async getUserInfo(userID: string, options?: AxiosRequestConfig) : Promise<AxiosResponse<any>> {
public async getUserInfo(userID: string, options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOUserInfoResponseVO>> {
return UserControllerApiFp(this.configuration).getUserInfo(userID, options).then((request) => request(this.axios, this.basePath));
}
/**
*
* @param {UserModifyRequireVO} body
* @param {*} [options] Override http request option.
* @throws {RequiredError}
* @memberof UserControllerApi
*/
public async modifyUserInfo(options?: AxiosRequestConfig) : Promise<AxiosResponse<any>> {
return UserControllerApiFp(this.configuration).modifyUserInfo(options).then((request) => request(this.axios, this.basePath));
public async modifyUserInfo(body: UserModifyRequireVO, options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOVoid>> {
return UserControllerApiFp(this.configuration).modifyUserInfo(body, options).then((request) => request(this.axios, this.basePath));
}
/**
*

View File

@@ -16,7 +16,7 @@ import { Configuration } from "./configuration";
// @ts-ignore
import globalAxios, { AxiosRequestConfig, AxiosInstance } from 'axios';
export const BASE_PATH = "http://localhost:8080".replace(/\/+$/, "");
export const BASE_PATH = "http://192.168.1.100:8080".replace(/\/+$/, "");
/**
*

View File

@@ -1,9 +1,16 @@
export * from './attach-attach-idbody';
export * from './attach-entity';
export * from './blog-attach-entity';
export * from './blog-entity';
export * from './response-volist-blog-entity';
export * from './response-volist-user-info-response-vo';
export * from './response-vostring';
export * from './response-vouser-info-response-vo';
export * from './response-vouser-register-response-vo';
export * from './response-vovoid';
export * from './user-entity';
export * from './user-info-response-vo';
export * from './user-modify-require-vo';
export * from './user-register-require-vo';
export * from './user-register-response-vo';
export * from './v1-attach-body';

View File

@@ -11,7 +11,7 @@
* https://github.com/swagger-api/swagger-codegen.git
* Do not edit the class manually.
*/
import { UserRegisterResponseVO } from './user-register-response-vo';
import type { UserRegisterResponseVO } from './user-register-response-vo';
/**
*
* @export

View File

@@ -11,8 +11,8 @@
* https://github.com/swagger-api/swagger-codegen.git
* Do not edit the class manually.
*/
import { AttachEntity } from './attach-entity';
import { BlogEntity } from './blog-entity';
import type { AttachEntity } from './attach-entity';
import type { BlogEntity } from './blog-entity';
/**
*
* @export

View File

@@ -1,14 +1,13 @@
@import './base.css';
html,
body {
height: 100%;
body,
#app {
width: 100%;
height: 100%;
}
#app {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 2rem;
margin: 0;
padding: 0;
}

View File

@@ -1,21 +1,22 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
name: 'index',
component: () => import('@/views/IndexView.vue')
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue')
path: '/register',
name: 'register',
component: () => import('@/views/RegisterView.vue')
},
{
path: '/login',
name: 'login',
component: () => import('@/views/LoginView.vue')
}
]
})

View File

@@ -1,6 +1,44 @@
<script setup lang="ts">
import { ref } from 'vue';
import BlogComponent from '@/components/BlogComponent.vue';
const count = ref(3)
const load = () => {
count.value += 2
}
</script>
<template>
<el-scrollbar style="overflow: auto">
<ul class="infinite-list" v-infinite-scroll="load">
<li v-for=" i in count" :key="i" class="infinite-list-item">
<BlogComponent :i="i"></BlogComponent>
</li>
</ul>
</el-scrollbar>
</template>
<style scoped>
.infinite-list {
height: 100%;
padding: 0;
margin: 0;
list-style: none;
margin-right: 10px;
}
.infinite-list .infinite-list-item {
display: flex;
align-items: center;
justify-content: center;
/* height: 50px; */
background: var(--el-color-primary-light-9);
margin: 10px;
color: var(--el-color-primary);
}
.infinite-list .infinite-list-item+.list-item {
margin-top: 10px;
}
</style>

View File

@@ -1,82 +0,0 @@
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
</header>
</template>
<style scoped>
header {
line-height: 1.5;
max-height: 100vh;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
nav {
width: 100%;
font-size: 12px;
text-align: center;
margin-top: 2rem;
}
nav a.router-link-exact-active {
color: var(--color-text);
}
nav a.router-link-exact-active:hover {
background-color: transparent;
}
nav a {
display: inline-block;
padding: 0 1rem;
border-left: 1px solid var(--color-border);
}
nav a:first-of-type {
border: 0;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
nav {
text-align: left;
margin-left: -1rem;
font-size: 1rem;
padding: 1rem 0;
margin-top: 1rem;
}
}
</style>