page linktree MAT27

resources/assets/js/components/demo/voter/home/mat.vue

@@ -0,0 +1,92 @@
+<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="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: 'https://imagetolink.com/ib/0zxQzuS6tl.png'
+        }
+
+    }
+
+
+
+};
+</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>