rsgl/VueProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更改 HomeView.vue写法

Browse Source
This commit is contained in:
LingandRX 2024-12-15 21:24:15 +08:00
parent 8d8937e2ff
commit 3706d4bd7a
1 changed files with 12 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/views/HomeView.vue
View File

@ -1,8 +1,4 @@
<script setup> <script setup>
const cardStyle = {
width: '200px'
}
class moduleCard { class moduleCard {
title title
content content
@ -13,23 +9,14 @@ class moduleCard {
this.content = content this.content = content
this.url = url this.url = url
} }
introduceSelf() {
console.log(`title:${this.title}\ncontent:${this.content}\nurl:${this.url}`)
}
} }
const modules = [ const modules = [
{ {
title: 'zero tier', title: '',
content: [ content: [
new moduleCard('gitea', '', 'http://10.120.20.137:3000/'), new moduleCard('gitea', '', 'http://10.120.20.137:3000/'),
new moduleCard('pve', '', 'http://10.120.20.15:8006/') new moduleCard('pve', '', 'http://10.120.20.15:8006/'),
]
},
{
title: '腾讯云服务',
content: [
new moduleCard('zero tier', '', 'https://zerotier.yulinling.asia/'), new moduleCard('zero tier', '', 'https://zerotier.yulinling.asia/'),
new moduleCard('gitea', '', 'https://gitea.yulinling.asia/') new moduleCard('gitea', '', 'https://gitea.yulinling.asia/')
] ]
@ -38,47 +25,23 @@ const modules = [
</script> </script>
<template> <template>
<div v-for="(item, index) in modules" :key="index"> <div v-for="(item, index) in modules" :key="index" :style="{ width: 100 + '%' }">
<h2>{{ item.title }}</h2> <a-typography-title>{{ item.title }}</a-typography-title>
<ul> <ul :style="{ display: 'flex', flexWrap: 'wrap', margin: 'auto', justifyContent: 'center' }">
<a-card <a-card
v-for="(item, index) in item.content" v-for="(item, index) in item.content"
:key="index" :key="index"
:style="cardStyle" :style="{ width: 18 + '%', margin: '10px' }"
:body-style="{ padding: 0, overflow: 'hidden' }"
hoverable hoverable
> >
<a-flex justify="space-between"> <a-card-meta :title="item.title">
<a-flex <template #description>
vertical <a-typography-link :href="item.url" target="_blank">{{ item.url }}</a-typography-link>
align="flex-end" </template>
justify="space-between" </a-card-meta>
:style="{ padding: '32px', margin: 'auto', alignItems: 'center' }"
>
<a-typography :style="{ margin: 'auto' }">
<a-typography-title :level="3"> “{{ item.title }}”</a-typography-title>
</a-typography>
<a-button type="primary" :href="item.url" target="_blank">Get Start</a-button>
</a-flex>
</a-flex>
</a-card> </a-card>
</ul> </ul>
</div> </div>
</template> </template>
<style scoped> <style scoped></style>
h2 {
margin: 10px;
}
ul {
display: flex;
flex-direction: row;
list-style: none;
padding: 0;
}
ul > div {
margin: 0 10px;
}
</style>