nurafrinaalimi16
98 lines
1.9 KiB
Vue
98 lines
1.9 KiB
Vue
<template>
|
|
<div class="row col-md-10 col-md-offset-1">
|
|
<div class="col-md-12">
|
|
|
|
<!-- <h6 class="text-center">Pautan Zoom</h6> -->
|
|
<div>
|
|
<img :src="imageUrl" alt="background-img" class="background-img" @click="navigateToURL" />
|
|
|
|
</div>
|
|
<hr>
|
|
<div class="mt-2 text-muted text-center" style="font-weight: bold;">
|
|
Tekan pada gambar untuk ke <span style="color: #007bff;">Linktree</span>
|
|
</div>
|
|
|
|
<!-- <div class="right-button">
|
|
<button class="btn btn-info right-button">Lampiran Dokumen MAT ke-27/2023 >></button>
|
|
</div> -->
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
|
methods: {
|
|
navigateToURL() {
|
|
// Navigate to the desired URL
|
|
window.open('https://linktr.ee/kopkb', '_blank');
|
|
}
|
|
},
|
|
|
|
created: function () {
|
|
//console.log(this)
|
|
},
|
|
|
|
data: function () {
|
|
return {
|
|
x: {}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
header: function () {
|
|
return this.x.name + ' for ' + this.getPosition(this.x.position_id);
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
imageUrl: '/images/linktree-kopkb.jpg'
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
</script>
|
|
<style>
|
|
.background-img {
|
|
/* Styles for the image */
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
|
|
/* Ensure the image does not exceed container dimensions */
|
|
max-width: 100%;
|
|
max-height: 80vh;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
/* transform: translate(-50%, -50%); */
|
|
|
|
|
|
|
|
.right-button {
|
|
|
|
border-color: rgb(14, 14, 15);
|
|
text-align: left;
|
|
/* Align button content to the left */
|
|
color: #fff;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
/* padding: 15px ; */
|
|
}
|
|
|
|
|
|
|
|
.right-button :hover {
|
|
/* Button styles on hover */
|
|
outline-color: #045415;
|
|
|
|
}
|
|
</style> |