Files
zhgh_whcp/target/classes/views/layouts/v4/home/index.html
T
2026-01-08 14:58:16 +08:00

136 lines
2.6 KiB
HTML

<!--#
layout("/layouts/v4/baseLayout.html"){
#-->
<style>
.section-banner {
position: relative;
overflow: hidden;
}
.section-banner .banner-img {
width: 100%;
height: 100%;
}
.section-banner .banner-img img {
width: 100%;
height: 100%;
/*object-fit: cover;*/
}
.section-wrapper {
width: 100%;
}
.home-grid {
width: 80%;
margin: 20px auto;
display: grid;
grid-template-columns: 2.2fr 0.8fr;
gap: 24px;
align-items: stretch;
row-gap: 24px;
}
.entry-card {
display: flex;
/*align-items: center;*/
min-width: 320px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
padding: 16px;
transition: transform 0.2s, box-shadow 0.2s;
}
.entry-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.act-card {
display: flex;
align-items: center;
min-width: 320px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
padding: 16px;
transition: transform 0.2s, box-shadow 0.2s;
}
</style>
<div class="v4-container" id="v4-home-app">
<!-- 首页banner -->
<div class="section-banner">
<div class="banner-img">
<img src="${config.AppHomeImg!}" alt=""/>
<stats></stats>
</div>
</div>
<div class="" style="padding-bottom: 20px">
<user></user>
<div class="home-grid">
<div class="act-card">
<act></act>
</div>
<div class="entry-card">
<entry></entry>
</div>
</div>
<jcdt :list="websiteNews.notices"></jcdt>
</div>
</div>
<script nonce="${cspNonce!}">
<!--#include("act.js"){}#-->
<!--#include("jcdt.js"){}#-->
<!--#include("entry.js"){}#-->
<!--#include("user.js"){}#-->
<!--#include("stats.js"){}#-->
new Vue({
el: '#v4-home-app',
data(){
return{
websiteNews:{
notices:[],
}
}
},
components: {
'act': act,
'jcdt': jcdt,
'entry': entry,
'user': user,
'stats': stats,
},
mounted() {
this.getWebSiteNews()
},
methods: {
getWebSiteNews(){
this.$axios.post('/platform/home/getNews').then(res => {
if (res.code === 0) {
this.websiteNews = res.data
}
})
}
}
})
</script>
<!--#
}
#-->