Update core smartproc
This commit is contained in:
Titan Hadiyan
125
src/layouts/single-card copy 2.vue
Normal file
125
src/layouts/single-card copy 2.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<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>
|
||||
83
src/layouts/single-card copy.vue
Normal file
83
src/layouts/single-card copy.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<dx-scroll-view height="100%" width="100%" class="with-footer single-card">
|
||||
<div class="dx-card content">
|
||||
<div class="header">
|
||||
<div class="title">{{title}}</div>
|
||||
<div class="description">{{description}}</div>
|
||||
</div>
|
||||
<slot />
|
||||
</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";
|
||||
|
||||
.single-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dx-card {
|
||||
width: 330px;
|
||||
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>
|
||||
@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<dx-scroll-view height="100%" width="100%" class="with-footer single-card">
|
||||
<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>
|
||||
@ -8,6 +11,12 @@
|
||||
<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>
|
||||
@ -43,12 +52,45 @@ export default {
|
||||
<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: 330px;
|
||||
width: 65%;
|
||||
margin: auto auto;
|
||||
padding: 40px;
|
||||
flex-grow: 0;
|
||||
|
||||
Reference in New Issue
Block a user