You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.6 KiB
61 lines
1.6 KiB
|
|
|
|
<script setup>
|
|
defineProps({
|
|
servers: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="server-grid">
|
|
<div v-for="server in servers" :key="server.name" class="server-card">
|
|
<h3>{{ server.name }}</h3>
|
|
<div><strong>IP:</strong> {{ server.ip }}</div>
|
|
<div>
|
|
<strong>域名:</strong>
|
|
<a :href="server.domain" target="_blank">{{ server.domain }}</a>
|
|
</div>
|
|
<div><strong>账号:</strong> {{ server.userpass }}</div>
|
|
<div><strong>配置:</strong> {{ server.config }}</div>
|
|
<div><strong>App:</strong> {{ server.app || "—" }}</div>
|
|
<div><strong>容器化:</strong> {{ server.containerized }}</div>
|
|
<div><strong>服务器:</strong> {{ server.server }}</div>
|
|
<div><strong>同步:</strong> {{ server.sync }}</div>
|
|
<div><strong>部署时间:</strong> {{ server.deployTime }}</div>
|
|
<div><strong>服务:</strong> {{ server.services }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.server-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
.server-card {
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
background-color: var(--vp-c-bg-soft);
|
|
color: var(--vp-c-text-1);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
.server-card h3 {
|
|
margin: 0 0 0.5rem;
|
|
font-size: 1.1rem;
|
|
color: var(--vp-c-brand-1);
|
|
}
|
|
.server-card a {
|
|
color: var(--vp-c-brand-2);
|
|
text-decoration: none;
|
|
}
|
|
.server-card a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
|