41 lines
1015 B
Vue
41 lines
1015 B
Vue
<script setup>
|
|
import FirstVueComponent from "./components/FirstVueComponent.vue";
|
|
import SecondVueComponent from "./components/SecondVueComponent.vue";
|
|
import FetchFromApi from "./components/FetchFromApi.vue";
|
|
|
|
import pkg from "../package.json"; // Works out-of-the-box in Vite
|
|
|
|
document.title = `${pkg.name} ${pkg.version}©2026`;
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<FirstVueComponent class="component-box-fade" />
|
|
<SecondVueComponent class="component-box-fade" />
|
|
<FetchFromApi class="component-box-fade" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
display: flex;
|
|
gap: 5px; /* optional spacing between columns */
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.component-box-simple {
|
|
background-color: rgba(173, 202, 193, 0.6);
|
|
width: 30%;
|
|
}
|
|
|
|
.component-box-fade {
|
|
/* Fades from your color on the left to fully transparent on the right */
|
|
background: linear-gradient(
|
|
to bottom right,
|
|
rgba(180, 231, 207, 0.5),
|
|
rgba(28, 72, 167, 0.6)
|
|
);
|
|
width: 30%;
|
|
}
|
|
</style>
|