126 lines
2.5 KiB
Vue
126 lines
2.5 KiB
Vue
<template>
|
|
<dx-scroll-view height="100%" width="40%" class="with-footer single-card">
|
|
<div class="logo-img">
|
|
<img src="images/logo_pln.png"/>
|
|
</div>
|
|
<div class="dx-card content">
|
|
<div class="header">
|
|
<div class="title">{{title}}</div>
|
|
<div class="description">{{description}}</div>
|
|
</div>
|
|
<slot />
|
|
</div>
|
|
</dx-scroll-view>
|
|
<dx-scroll-view height="100%" width="60%" class="single-card full-img">
|
|
<div class="center-card">
|
|
<h1 class="title-app">SMARTPROC</h1>
|
|
<p class="subtitle">Manajemen kontrak Pengadaan yang termonitoring dan Efisien</p>
|
|
</div>
|
|
</dx-scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
import DxScrollView from "devextreme-vue/scroll-view";
|
|
|
|
import { useRoute } from 'vue-router';
|
|
import { watch, ref } from 'vue';
|
|
|
|
export default {
|
|
components: {
|
|
DxScrollView
|
|
},
|
|
setup() {
|
|
const route = useRoute();
|
|
|
|
const title = ref(route.meta.title);
|
|
const description = ref("");
|
|
|
|
watch(() => route.path,
|
|
() => {
|
|
title.value = route.meta.title;
|
|
description.value = route.meta.description;
|
|
}
|
|
)
|
|
return {
|
|
title,
|
|
description
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "../themes/generated/variables.base.scss";
|
|
|
|
/* SMARTPROC */
|
|
.title-app {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 48px;
|
|
font-weight: bolder;
|
|
color: #FFFFFF;
|
|
}
|
|
.subtitle {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 24px;
|
|
color: #FFFFFF;
|
|
}
|
|
.logo-img {
|
|
width: 80%;
|
|
padding: 40px;
|
|
flex-grow: 0;
|
|
}
|
|
.full-img {
|
|
background: url("http://localhost:8080/images/bg-login.jpg");
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
.center-card {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 35%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 10px;
|
|
}
|
|
.single-card {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #FFFFFF;
|
|
|
|
.dx-card {
|
|
width: 65%;
|
|
margin: auto auto;
|
|
padding: 40px;
|
|
flex-grow: 0;
|
|
|
|
.screen-x-small & {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
margin: 0;
|
|
border: 0;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.header {
|
|
margin-bottom: 30px;
|
|
|
|
.title {
|
|
color: $base-text-color;
|
|
line-height: 28px;
|
|
font-weight: 500;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.description {
|
|
color: rgba($base-text-color, alpha($base-text-color) * 0.7);
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|