202 lines
4.3 KiB
Vue
202 lines
4.3 KiB
Vue
<template>
|
|
<div class="homepage-overflow-x-hidden white" v-if="landingPageContent && data">
|
|
|
|
<div class="h3 my-5 py-5 body-font1">{{ data.contentHeading }}</div>
|
|
<div v-html="data.content"></div>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "LandingComponent",
|
|
components: {},
|
|
data: () => ({
|
|
data: null
|
|
|
|
}),
|
|
computed: {
|
|
isMobileDevice: function() {
|
|
return this.$vuetify.breakpoint.xsOnly ? true : false;
|
|
},
|
|
landingPageContent: function() {
|
|
return this.$store.state.layout.pageContent;
|
|
},
|
|
pageId: function(){
|
|
return this.$route.meta.pid
|
|
}
|
|
},
|
|
watch: {
|
|
landingPageContent(){
|
|
this.getPageContent();
|
|
}
|
|
},
|
|
/* eslint-disable no-alert, no-console , no-debugger */
|
|
|
|
methods: {
|
|
imageBasePathUrl() {
|
|
return process.env.VUE_APP_IMAGE_CATEGORY_PATH_URL;
|
|
},
|
|
getPageContent() {
|
|
if (this.landingPageContent.length) {
|
|
this.data = this.landingPageContent.filter(element=>{
|
|
return element.id === this.pageId})[0];
|
|
|
|
|
|
/* if(data.length > 0){
|
|
let path = data[0].content;
|
|
var div = document.createElement("div");
|
|
div.innerHTML = path;
|
|
let imgSrcUrls = div.getElementsByTagName("img");
|
|
for (let i = 0; i < imgSrcUrls.length; i++) {
|
|
let urlValue = imgSrcUrls[i].getAttribute("src");
|
|
if (urlValue) {
|
|
imgSrcUrls[i].setAttribute(
|
|
"src",
|
|
|
|
this.imageBasePathUrl() +
|
|
"/media/" +
|
|
imgSrcUrls[i].src
|
|
.replace(window.location.href, "")
|
|
.replace(window.location.origin, "")
|
|
.replace(/%22%7D%7D/g, "")
|
|
.replace(/%7B%7B/g, "")
|
|
.replace(/%20url=%22/g, "")
|
|
.replace("media", "")
|
|
|
|
);
|
|
}
|
|
}
|
|
return div.innerHTML
|
|
}*/
|
|
}
|
|
},
|
|
pushRoute() {
|
|
this.$router
|
|
.push({
|
|
name: "LandingPage",
|
|
}) .catch(error => {
|
|
error;
|
|
});
|
|
},
|
|
},
|
|
|
|
created() {
|
|
// this.$store.dispatch("block/fetchLandingPage", this.pageUrlKey);
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
.arrow-top-margin-130 {
|
|
margin-top: 130px;
|
|
}
|
|
.arrow {
|
|
border: solid white;
|
|
border-width: 0 3px 3px 0;
|
|
display: inline-block;
|
|
padding: 18px;
|
|
}
|
|
.down {
|
|
transform: rotate(45deg);
|
|
-webkit-transform: rotate(45deg);
|
|
}
|
|
.hero-image {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
position: relative;
|
|
}
|
|
.landing-page-hero-text {
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: white;
|
|
}
|
|
.landing-page-hero-image{
|
|
height:62.5%;
|
|
width:100%;
|
|
}
|
|
.landing-page-image{
|
|
height:auto;
|
|
width:100%;
|
|
}
|
|
.landing-page-top-row{
|
|
display:flex;
|
|
}
|
|
.landing-page-row{
|
|
display:flex;
|
|
}
|
|
.landing-page-col-6{
|
|
width: 50%;
|
|
display: block;
|
|
margin-top:auto;
|
|
margin-bottom:auto;
|
|
}
|
|
.landing-page-content-maxwidth-750{
|
|
max-width:750px;
|
|
}
|
|
/*.landing-page-link{
|
|
color: #2E5D86 !important;
|
|
& .landing-page-icon{
|
|
background-image: url('../../../assets/landing-page-arrow.png');
|
|
max-width:22px;
|
|
height:16px;
|
|
background-position: right center;
|
|
background-size:contain;
|
|
}
|
|
}
|
|
.landing-page-link:hover{
|
|
color: #CCB7FF !important;
|
|
& .landing-page-icon{
|
|
background-image: url('../../../assets/landing-page-hover-arrow.png');
|
|
max-width:22px;
|
|
height:16px;
|
|
background-position: right center;
|
|
background-size:contain;
|
|
}
|
|
}*/
|
|
@media screen and (min-width: 601px) {
|
|
.landing-page-bottom-margin-150 {
|
|
margin-bottom: 150px;
|
|
}
|
|
.landing-page-top-margin-150 {
|
|
margin-top: 150px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 601px) {
|
|
.arrow{
|
|
display: none;
|
|
}
|
|
.landing-page-hero-text {
|
|
display: none;
|
|
}
|
|
.landing-page-hero-image{
|
|
height:62.5%;
|
|
width:100%;
|
|
}
|
|
.landing-page-row{
|
|
display:block;
|
|
text-align: center;
|
|
}
|
|
.landing-page-top-row{
|
|
display:flex;
|
|
flex-direction:column-reverse;
|
|
text-align: center;
|
|
}
|
|
.landing-page-col-6{
|
|
width: 100%;
|
|
display: block;
|
|
margin-top:auto;
|
|
margin-bottom:auto;
|
|
}
|
|
.landing-page-link{
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
<style src="./LandingComponent.scss" lang="scss" scoped /> |