124 lines
3.4 KiB
Vue
124 lines
3.4 KiB
Vue
<template>
|
|
<div class="fullpage-container">
|
|
<section-view :css-style="{'background-color':'#000'}" v-lazy:background-image="assetsUri('images/innovation/innovation.png')" class="innovation-section-view">
|
|
<div class="innovation-div">
|
|
<h2 class="innovation-div-t">Innovation Insights</h2>
|
|
</div>
|
|
</section-view>
|
|
<section-view :css-style="{'background-color':'#fff'}">
|
|
<p v-if="$fetchState.pending">Fetching mountains...</p>
|
|
<p v-else-if="$fetchState.error">An error occurred :</p>
|
|
<innovation-block v-else :static-data="staticData"></innovation-block>
|
|
<my-pagination @change="handleLists" v-if="staticData.length" :page.sync="page" :total="total" :pager-count="9"></my-pagination>
|
|
<email-footer></email-footer>
|
|
</section-view>
|
|
<div class="windows">
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import animateMixin from '../../utils/animateMixin'
|
|
import {
|
|
assetsUri
|
|
} from "../../utils";
|
|
import SectionView from "../../components/SectionView/index";
|
|
import EmailFooter from "../../components/EmailFooter/index";
|
|
import InnovationBlock from "../../components/InnovationBlock/index";
|
|
import MyPagination from "../../components/MyPagination/index";
|
|
export default {
|
|
name: "innovation",
|
|
components: {MyPagination, InnovationBlock, EmailFooter, SectionView},
|
|
layout:'index',
|
|
watch: {
|
|
'$route.query': '$fetch'
|
|
},
|
|
mixins:[animateMixin],
|
|
async fetch() {
|
|
const {query:{page,size}}=this.$route;
|
|
if(page){
|
|
this.page=page
|
|
}
|
|
if(size){
|
|
this.size=size
|
|
}
|
|
await this.handleLists(this.page)
|
|
},
|
|
fetchOnServer: false,
|
|
methods:{
|
|
async handleLists(val){
|
|
this.page=val;
|
|
const {baseURL}=this.$config;
|
|
const res= await this.$axios(baseURL+'/innovation/index?page='+this.page+'&size='+this.size)
|
|
if(res.status!==200){
|
|
return this.$toast(res.data.msg)
|
|
}
|
|
const {content,totalElements}=res.data
|
|
this.total=totalElements;
|
|
this.staticData=content;
|
|
}
|
|
},
|
|
head() {
|
|
return {
|
|
title: this.title,
|
|
meta: [
|
|
{
|
|
hid: 'description',
|
|
name: 'description',
|
|
content: 'My custom description'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
title:'LightLimX-Innovation Insights',
|
|
assetsUri,
|
|
page:1,
|
|
size:9,
|
|
total:0,
|
|
staticData:[]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.innovation{
|
|
&-section-view{
|
|
background-position: center bottom;
|
|
background-size: 100% 2.92rem;
|
|
background-repeat: no-repeat;
|
|
/*background-size: ;*/
|
|
padding-top: .95rem;
|
|
min-height:3.87rem !important;
|
|
}
|
|
&-div{
|
|
padding-top: 1.14rem;
|
|
text-align: center;
|
|
&-t{
|
|
font-size: .48rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
line-height: .32rem;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width: 768px){
|
|
.innovation{
|
|
&-section-view{
|
|
background-size: auto 6.24rem;
|
|
padding-top: .88rem;
|
|
min-height: 6.24rem !important;
|
|
}
|
|
&-div{
|
|
padding-top: 1.99rem;
|
|
&-t{
|
|
font-size: .6rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|