179 lines
3.9 KiB
Vue
179 lines
3.9 KiB
Vue
<template>
|
|
<section class="information">
|
|
<h2 class="client-name">Client name</h2>
|
|
<div class="data-field" id="client-id">
|
|
<pre class="label">ID:</pre>
|
|
<pre class="data">...</pre>
|
|
</div>
|
|
<div class="client-data">
|
|
<div class="contact">
|
|
<h3 class="area-title">Contact:</h3>
|
|
<div class="data-field" id="contact-person">
|
|
<pre class="label">Contact person:</pre>
|
|
<pre class="data">...</pre>
|
|
</div>
|
|
<div class="data-field" id="e-mail">
|
|
<pre class="label">E-Mail:</pre>
|
|
<pre class="data">...</pre>
|
|
</div>
|
|
<div class="data-field" id="phone">
|
|
<pre class="label">Phone number:</pre>
|
|
<pre class="data">...</pre>
|
|
</div>
|
|
</div>
|
|
<div class="address">
|
|
<h3 class="area-title">Address:</h3>
|
|
<div class="street-address">
|
|
<div class="data-field" id="street-name">
|
|
<pre class="label">Street:</pre>
|
|
<pre class="data">...</pre>
|
|
</div>
|
|
<div class="data-field" id="street-no">
|
|
<pre class="label">No.:</pre>
|
|
<pre class="data">...</pre>
|
|
</div>
|
|
</div>
|
|
<div class="data-field" id="postal-code">
|
|
<pre class="label">Postcode:</pre>
|
|
<pre class="data">...</pre>
|
|
</div>
|
|
<div class="data-field" id="city">
|
|
<pre class="label">City:</pre>
|
|
<pre class="data">...</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="notes">
|
|
<h3 class="area-title">Notes:</h3>
|
|
<pre class="data" id="notes">...</pre>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: "Client",
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
.information {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding: 20px 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
background-color: #2c2c2c;
|
|
}
|
|
|
|
|
|
.client-name {
|
|
align-self: stretch;
|
|
padding: 20px 0;
|
|
color: #fff;
|
|
letter-spacing: 0.8px;
|
|
text-decoration-line: underline;
|
|
font: italic 400 16px/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
|
sans-serif;
|
|
}
|
|
|
|
.data-field {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
padding: 0 30px;
|
|
gap: 20px;
|
|
border-radius: 10px;
|
|
}
|
|
.data-field#client-id {
|
|
padding: 10px 30px;
|
|
}
|
|
.data-field#street-name {
|
|
width: 70%;
|
|
}
|
|
.data-field#street-no {
|
|
width: 30%;
|
|
}
|
|
|
|
.label {
|
|
color: #fff;
|
|
letter-spacing: 0.7px;
|
|
font: 400 14px/30px Overpass, sans-serif;
|
|
}
|
|
.data {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
padding: 0 10px;
|
|
border-radius: 5px;
|
|
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25) inset;
|
|
background-color: #212121;
|
|
color: #fff;
|
|
letter-spacing: 0.6px;
|
|
font: 400 12px/250% Overpass, sans-serif;
|
|
}
|
|
.data#notes {
|
|
align-self: stretch;
|
|
}
|
|
|
|
.client-data {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
align-self: stretch;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.contact, .address {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
line-height: normal;
|
|
width: 50%;
|
|
padding: 20px 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.area-title {
|
|
color: #fff;
|
|
letter-spacing: 0.7px;
|
|
font: 400 14px/30px Overpass, sans-serif;
|
|
}
|
|
|
|
.street-address {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
align-self: stretch;
|
|
padding: 0 30px 0 0;
|
|
gap: 10px;
|
|
}
|
|
|
|
.notes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
align-self: stretch;
|
|
padding: 10px 30px 10px 20px;
|
|
}
|
|
|
|
|
|
</style> |