add other components for assets

This commit is contained in:
2023-11-15 13:54:30 +01:00
parent 14b111ac79
commit 5ca5bbbc13
6 changed files with 726 additions and 0 deletions

View File

@ -0,0 +1,121 @@
<template>
<section class="software-information">
<div class="label" id="software">Software specifications:
<div class="asset-data">
<table class="data-table" id="asset-table-no-client">
<tr class="table-row" id="table-head">
<th class="Software">Software</th>
<th class="Version">Version</th>
<th class="License">License</th>
</tr>
<tr class="table-row" id="row-1">
<td class="Software">...</td>
<td class="Version">...</td>
<td class="License">...</td>
</tr>
</table>
</div>
</div>
</section>
</template>
<script>
export default {
name: "SoftwareSpecifications",
}
</script>
<style scoped>
.software-information {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
padding: 1.25rem 1.875rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2c2c2c;
}
.label {
color: #fff;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.label#software {
padding-top: 1rem;
padding-bottom: 1rem;
}
.asset-data {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
align-self: stretch;
padding-left: 0.625rem;
padding-top: 1rem;
}
.data-table {
width: 100%;
padding: 0 0.625rem;
table-layout: fixed;
border-collapse: collapse;
}
.table-row {
display: flex;
flex-direction: row;
align-items: center;
height: 3.125rem;
padding: 0.625rem;
gap: 0.625rem;
border-top: 0.0625rem solid #000000;
}
#table-head {
border-top: none;
border-bottom: 0.0625rem solid #000000;
}
th,
td {
height: 1.875rem;
text-align: left;
padding: 0;
color: #ffffff;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
th {
font: 700 0.875rem/1.875rem Overpass, sans-serif;
}
.Software {
width: 50%;
border-right: 0.0625rem solid #000000;
}
.Version {
width: 25%;
border-right: 0.0625rem solid #000000;
}
.License {
width: 25%;
}
</style>