mirror of
https://github.com/WGDashboard/WGDashboard.git
synced 2026-08-04 15:03:02 +00:00
Update
This commit is contained in:
@@ -12,36 +12,45 @@ const showQRCode = ref(false)
|
||||
<template>
|
||||
<div class="card rounded-3 border-0">
|
||||
<div class="card-body p-3">
|
||||
<div class="row g-2">
|
||||
<div class="d-flex gap-2 col-12">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-tag me-1"></i> Name
|
||||
</small>
|
||||
<small class="fw-bold flex-grow-1 text-end">
|
||||
<div class="row gy-3">
|
||||
<div class="col-sm-6 d-flex flex-column gap-3">
|
||||
<h6 class="fw-bold mb-0">
|
||||
{{ props.config.name }}
|
||||
</small>
|
||||
</h6>
|
||||
<div class="mt-auto">
|
||||
<button class="btn btn-outline-body rounded-3 flex-grow-1 fw-bold w-100" @click="showQRCode = true">
|
||||
<i class="bi bi-link-45deg me-2"></i><small>Connect</small>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 col-12">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-bar-chart-fill me-1"></i> Data Usage
|
||||
</small>
|
||||
<small class="fw-bold flex-grow-1 text-end">
|
||||
3.42 / 4.00 GB
|
||||
</small>
|
||||
<div class="col-sm-6 d-flex flex-column gap-3">
|
||||
<div class="d-flex gap-2">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-bar-chart-fill me-1"></i> Protocol
|
||||
</small>
|
||||
<span class="badge rounded-3 shadow ms-auto"
|
||||
:class="[props.config.protocol === 'wg' ? 'wireguardBg' : 'amneziawgBg' ]"
|
||||
v-if="props.config.protocol === 'wg'">
|
||||
{{ props.config.protocol === 'wg' ? 'WireGuard': 'AmneziaWG' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-bar-chart-fill me-1"></i> Data Usage
|
||||
</small>
|
||||
<small class="fw-bold flex-grow-1 text-end">
|
||||
3.42 / 4.00 GB
|
||||
</small>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-calendar me-1"></i> Valid Until
|
||||
</small>
|
||||
<small class="fw-bold flex-grow-1 text-end">
|
||||
2025-08-31 00:00:00
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 col-12">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-calendar me-1"></i> Valid Until
|
||||
</small>
|
||||
<small class="fw-bold flex-grow-1 text-end">
|
||||
2025-08-31 00:00:00
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 d-flex">
|
||||
<button class="btn btn-body rounded-3 flex-grow-1 fw-bold" @click="showQRCode = true">
|
||||
<i class="bi bi-link-45deg me-2"></i><small>Connect</small>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Transition name="app">
|
||||
|
||||
Reference in New Issue
Block a user