c-hongqw1/zhgh_ypi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

主页整改

Browse Source
This commit is contained in:
hongqiwei
2026-05-06 11:06:12 +08:00
parent 6331b736b1
commit e9e7974c4c
7 changed files with 214 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/views/layouts/v4/home/jcdt.js
+41 -37
View File
@@ -2,25 +2,22 @@ const jcdt = {
template: /*language=HTML*/ `
<div class="jcdt-wrapper">
<div class="jcdt-container">
<div class="jcdt-title">
<span>综合新闻</span>
</div>
<div class="jcdt-content">
<div class="jcdt-list">
<div class="jcdt-item" v-for="item in list" :key="item.title" @click="onLink(item)">
<div class="date" v-if="item.date">{{item.date}}</div>
<div style="display: flex; align-items: center">
<div >
<el-image style="width: 30px" src="/assets/platform/img/v4/xw.png" ></el-image>
<div class="jcdt-section" v-for="item,index in list" :key="index">
<div class="jcdt-title">
<span>{{ item.label }}</span>
</div>
<div class="jcdt-content">
<div class="jcdt-list">
<div class="jcdt-item" v-for="o,i in item.value" :key="i" @click="onLink(o)">
<div class="date" v-if="o.time">
<i class="el-icon-alarm-clock"></i>
<span>{{o.time}}</span>
</div>
<div style="display: flex; align-items: center">
<div></div>
<div class="title">{{o.text}}</div>
</div>
<div class="title">{{item.title}}</div>
</div>
<!--<div class="image">
<img v-if="item.image" :src="item.image" alt="">
<img v-else src="/assets/platform/img/v4/not-image.png" alt="">
</div>-->
<!-- <div class="summary">{{item.summary}}</div>-->
</div>
</div>
</div>
@@ -38,9 +35,12 @@ const jcdt = {
},
methods: {
onLink(item) {
if(!item.url) return
window.open(item.url)
const url = this.isHttpOrHttps(item.href) ? item.href : "https://xgh.cug.edu.cn/" + item.href
window.open(url)
},
isHttpOrHttps(url) {
return /^(http:\/\/|https:\/\/)/i.test(url)
}
},
style: /*language=CSS*/ `
.jcdt-wrapper {
@@ -53,16 +53,14 @@ const jcdt = {
.jcdt-container {
width: 80%;
max-width: 80%;
margin: 0 auto;
margin: 0 auto 10px;
background-color: #FFFFFF;
border-radius: 12px;
padding: 20px;
margin-bottom: 10px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.jcdt-title{
/deep/ .jcdt-title{
font-size: 30px;
color: #000000;
display: block;
@@ -72,6 +70,10 @@ const jcdt = {
padding: 20px 0;
}
.jcdt-section + .jcdt-section {
margin-top: 20px;
}
/deep/ .jcdt-container .jcdt-title span::before {
content: '';
width: 24px;
@@ -94,13 +96,13 @@ const jcdt = {
vertical-align: middle;
}
.jcdt-list {
/deep/ .jcdt-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.jcdt-item {
/deep/ .jcdt-item {
display: flex;
flex-direction: column;
padding: 16px;
@@ -109,18 +111,17 @@ const jcdt = {
transition: all 0.3s ease;
cursor: pointer;
height: auto;
border-radius: 12px;
}
.jcdt-item:hover{
background: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-bottom-color: var(--color-primary);
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
background: #ffffff;
}
.jcdt-item .date {
/deep/ .jcdt-item:hover{
transform: translateY(-4px);
}
/deep/ .jcdt-item .date {
font-size: 20px;
font-weight: bold;
white-space: nowrap;
@@ -129,7 +130,7 @@ const jcdt = {
transition: opacity 0.3s ease;
}
.jcdt-item .title {
/deep/ .jcdt-item .title {
font-size: 16px;
font-weight: 600;
/*margin-bottom: 12px;*/
@@ -141,7 +142,7 @@ const jcdt = {
/*height: 45px;*/
}
.jcdt-item .image {
/deep/ .jcdt-item .image {
width: 100%;
height: 180px;
margin: 0 0 16px 0;
@@ -155,14 +156,14 @@ const jcdt = {
transition: transform 0.3s ease;
}
.jcdt-item .image img {
/deep/ .jcdt-item .image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.jcdt-item .summary {
/deep/ .jcdt-item .summary {
font-size: 14px;
color: #666;
line-height: 1.6;
@@ -174,5 +175,8 @@ const jcdt = {
margin-bottom: 12px;
}
/deep/ .jcdt-item i {
color: #007aff;
}
`
};