新闻列表以及详情页面梳理
新闻列表页面：news.html
<!DOCTYPE html>
<html lang="en">
<!--引入-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大连韩通物流</title>
<link rel="shortcut icon" href="static/image/logo/icon.ico">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/icofont.min.css">
<link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="static/css/animate.min.css">
<link rel="stylesheet" href="static/css/banner.css"></link>
</head>
<body>
<!-- 响应式导航栏 -->
<header>
<!-- logo -->
<div class="item logo">
<img class="image" src="./static/picture/logo_top.png" alt="大连堆场">
</div>
<nav>
<div class="nav-responsive"><a id="nav-toggle" href="/"><span></span></a></div>
<ul class="navlist">
<li><a href="index.html">首 页 </a></li>
<li><a href="intro.html">公司简介</a></li>
<li><a href="business.html">业务领域</a></li>
<li class="active"><a href="news.html">新闻中心</a></li>
<li><a href="newsroom.html">查询预约</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
<!-- 按钮菜单 -->
<div class="item menu">
<!-- 搜索 -->
<div>
<svg width="19" height="18" viewBox="0 0 19 18" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8C3 5.23858 5.23858 3 8 3C10.7614 3 13 5.23858 13 8ZM12.9056 14.3199C11.551 15.3729 9.84871 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 9.48362 15.5961 10.8729 14.8924 12.0639L18.0104 15.182C18.5962 15.7678 18.5962 16.7175 18.0104 17.3033C17.4246 17.8891 16.4749 17.8891 15.8891 17.3033L12.9056 14.3199Z"
fill="black"></path>
</svg>
</div>
<!-- 语言 -->
<div>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2 12C2 6.48 6.47 2 11.99 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 11.99 22C6.47 22 2 17.52 2 12ZM15.9703 8.00043H18.9203C17.9603 6.35043 16.4303 5.07043 14.5903 4.44043C15.1903 5.55043 15.6503 6.75043 15.9703 8.00043ZM12.0003 4.04053C12.8303 5.24053 13.4803 6.57053 13.9103 8.00053H10.0903C10.5203 6.57053 11.1703 5.24053 12.0003 4.04053ZM3.99951 12.0002C3.99951 12.6902 4.09951 13.3602 4.25951 14.0002H7.63951C7.55951 13.3402 7.49951 12.6802 7.49951 12.0002C7.49951 11.3202 7.55951 10.6602 7.63951 10.0002H4.25951C4.09951 10.6402 3.99951 11.3102 3.99951 12.0002ZM5.08057 16.0002H8.03057C8.35057 17.2502 8.81057 18.4502 9.41057 19.5602C7.57057 18.9302 6.04057 17.6602 5.08057 16.0002ZM5.08057 8.00043H8.03057C8.35057 6.75043 8.81057 5.55043 9.41057 4.44043C7.57057 5.07043 6.04057 6.34043 5.08057 8.00043ZM12.0003 19.9602C11.1703 18.7602 10.5203 17.4302 10.0903 16.0002H13.9103C13.4803 17.4302 12.8303 18.7602 12.0003 19.9602ZM9.66 14.0002H14.34C14.43 13.3402 14.5 12.6802 14.5 12.0002C14.5 11.3202 14.43 10.6502 14.34 10.0002H9.66C9.57 10.6502 9.5 11.3202 9.5 12.0002C9.5 12.6802 9.57 13.3402 9.66 14.0002ZM14.5903 19.5602C15.1903 18.4502 15.6503 17.2502 15.9703 16.0002H18.9203C17.9603 17.6502 16.4303 18.9302 14.5903 19.5602ZM16.4999 12.0002C16.4999 12.6802 16.4399 13.3402 16.3599 14.0002H19.7399C19.8999 13.3602 19.9999 12.6902 19.9999 12.0002C19.9999 11.3102 19.8999 10.6402 19.7399 10.0002H16.3599C16.4399 10.6602 16.4999 11.3202 16.4999 12.0002Z"
fill="black"></path>
</svg>
</div>
<!-- 我的 -->
<div>
<svg width="14" height="18" viewBox="0 0 14 18" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0 17C0 13.134 3.13401 10 7 10V10V10C10.866 10 14 13.134 14 17V17.1111C14 17.602 13.602 18 13.1111 18H0.88889C0.39797 18 0 17.602 0 17.1111V17Z"
fill="black"></path>
<path
d="M7 8C7.79113 8 8.56448 7.76541 9.22228 7.32588C9.88008 6.88635 10.3928 6.26164 10.6955 5.53074C10.9983 4.79983 11.0775 3.99556 10.9231 3.21964C10.7688 2.44372 10.3878 1.73098 9.82843 1.17157C9.26902 0.612164 8.55629 0.231202 7.78036 0.0768607C7.00444 -0.0774802 6.20017 0.00173312 5.46927 0.304484C4.73836 0.607234 4.11365 1.11992 3.67412 1.77772C3.2346 2.43552 3 3.20888 3 4C3 5.06087 3.42143 6.07828 4.17157 6.82843C4.92172 7.57857 5.93913 8 7 8Z"
fill="black"></path>
</svg>
</div>
</div>
</nav>
</header>
<!-- 带有动画效果的页面区域 -->
<!-- 使用<section>定义一个区块，类名breadcum_area和动画相关的类名配置动画效果data-wow-duration="2s"设置动画持续时间为2秒。。-->
<section class="breadcum_area wow animate__animated animate__fadeInUp " data-wow-duration="2s"
style="background-image: url(static/image/Tr_breadkum_bg.jpg);">
<div class="container">
<div class="row">
<!--内容居中显示，包含标题About和导航列表。 -->
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="inner_breadcum_area text-center wow animate__animated animate__fadeInUp "
data-wow-duration="3s">
<!-- 导航列表展示了用户当前位置，由多个<li>元素组成，其中<a>标签链接到主页。-->
<h1>新闻中心</h1>
<ul>
<li>您的位置<i class="icofont-thin-right"></i></li>
<li><a href="index.html">首页<i class="icofont-thin-right"></i></a></li>
<li>新闻中心</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<div class="container" id="data">
<ul class="news-list" id="newsList"></ul>
<div class="pagination" id="pagination"></div>
</div>
<div id="newsDetails" class="news-details">
<h2 id="newsTitle"></h2>
<p id="newsContent"></p>
<div id="newsImages"></div>
</div>
<!-- 底部-->
<!-- 在线联系？ -->
<!-- 底部开始 -->
<section class="footer_area" style=" background:#f2f1f1;">
<div class="container footer_top">
<div class="row">
<div class="col-lg-5 col-md-6 col-sm-12">
<div class="footer_top_img">
<img src="static/image/logo/img.png" alt="flogo">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="footer_top_cont text-left">
<h2>有疑问吗？</h2>
<p> 与我们的专家联系，我们随时准备好为您服务并为您提供解决方案。</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-6 col-sm-12">
<div class="footer_widget">
<h2>联系我们</h2>
<div class="footer_address">
<ul>
<li>
<i class="icofont-location-pin"></i><span>办公地址：中国辽宁省大连保税区大窑湾创业路16号</span>
</li>
<li><i class="icofont-ui-call"></i>联系我们：0411-87598589;87598455</li>
<li><i class="icofont-envelope-open"></i>电子邮箱：shijinghua@sitc.com</li>
<li><i class="icofont-code"></i>邮政编码：116601</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="footer_widget">
<h2>关于我们</h2>
<p>大连韩通物流有限公司
系海丰物流有限公司控股的合资堆场</p>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="footer_widget">
<h2>了解我们</h2>
<div class="row footer_wid_sub_img">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="inner_footer_widget_img">
<img src="static/image/equipment/CFS仓库.png" alt="CFS仓库">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="inner_footer_widget_img">
<img src="static/image/equipment/装拆箱作业区.png" alt="fimg">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="inner_footer_widget_img">
<img src="static/image/equipment/集装箱拖车.png" alt="fimg">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="inner_footer_widget_img">
<img src="static/image/equipment/进箱作业叉车5台.png" alt="fimg">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="inner_footer_widget_img">
<img src="static/image/equipment/仓库内部.png" alt="fimg">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="inner_footer_widget_img">
<img src="static/image/firm/img.jpg" alt="fimg">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚底部 -->
<div id="footer">
<div class="content">
<p class="copyright">版权所有 © 大连韩通物流有限公司 Copyright © 2024 <span> ICP备案：辽ICP备2024035319号-1</span>
</p>
</div>
</div>
<script src="static/js/jquery-3.7.1.min.js"></script>
<script src="static/js/theme.js"></script>
<script src="static/js/meanmenu.min.js"></script>
<script type="text/javaScript" src="static/js/banner.js"></script>
<script type="text/javaScript" src="static/js/news.js"></script>
</body>
</html>
样式：
/* 新闻 */
.container {
width: 1200px;
margin: 0 auto;
padding: 20px;
}
.news-list {
list-style: none;
}
.news-item {
display: flex;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
.news-img {
width: 250px;
height: 200px;
background: #f5f5f5;
margin-right: 20px;
flex-shrink: 0;
}
.news-content {
flex: 1;
}
.news-title {
font-size: 18px;
color: #333;
margin-bottom: 10px;
display: block;
text-decoration: none;
margin-left: 100px;
}
.news-title:hover {
color: #1890ff;
}
.news-time {
color: #999;
font-size: 14px;
margin-left: 100px;
}
.pagination {
margin-left: 500px;
text-align: center;
}
.page-btn {
display: inline-block;
padding: 0 12px;
height: 32px;
line-height: 32px;
border: 1px solid #d9d9d9;
border-radius: 2px;
cursor: pointer;
background: #fff;
margin: 0 4px;
user-select: none;
}
.page-btn:hover {
border-color: #1890ff;
color: #1890ff;
}
.page-btn.disabled {
color: #d9d9d9;
cursor: not-allowed;
}
.page-btn.disabled:hover {
border-color: #d9d9d9;
color: #d9d9d9;
}
.page-list {
display: inline-block;
}
.page-item {
display: inline-block;
min-width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
border: 1px solid #d9d9d9;
border-radius: 2px;
cursor: pointer;
margin: 0 4px;
user-select: none;
}
.page-item:hover {
border-color: var(--titlecolor);
background: var(--titlecolor);
color: #fff;
}
.page-item.active {
background: var(--titlecolor);
color: #fff;
border-color: var(--titlecolor);
}
/*新闻结束*/ 新闻详情（样式+内容）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻详情</title>
<style>
:root {
--brcolor: #ff6600; /* 你可以根据需要调整这个颜色 */
}
body {
margin: 0;
padding: 20px;
font-family: "Microsoft YaHei", sans-serif;
background-color: #f3f6f9; /* 浅蓝色背景 */
}
.container {
max-width: 1200px;
margin: 0 auto;
position: relative;
background-color: #fff; /* 白色内容背景 */
padding: 50px;
box-shadow: 0 2px 10px rgba(55,99,170,.06);
}
.news-header {
margin-bottom: 20px;
border-bottom: 1px solid #ccc; /* 标题下划线 */
padding-bottom: 10px;
}
.news-title {
font-size: 2em;
color: #333;
margin-bottom: 20px;
}
.news-date {
font-size: 0.9em;
color: #666;
}
.news-content {
font-size: 1.1em;
line-height: 1.8;
color: #333;
}
.news-content p {
text-indent: 2em;
margin: 1em 0;
line-height:31px;
}
.news-content img {
display: block;
margin: 20px auto;
width: 100%;
max-width: 400px;
height: auto;
}
.back-button {
position: fixed;
top: 10px;
right: 10px;
padding: 0.5em 5em;
font-size: 1em;
color: #333;
background: none;
border: none;
cursor: pointer;
transition: color 0.3s;
}
.back-button:hover {
color: var(--brcolor);
}
</style>
</head>
<body>
<div id="newsDetails" class="container">
<button onclick="goBack()" id="backButton" class="back-button">← 返回</button>
<div class="news-header">
<h2 id="newsTitle" class="news-title"></h2>
<div id="newsDate" class="news-date"></div>
</div>
<div id="newsContent" class="news-content"></div>
</div>
<script type="text/javascript" src="static/js/news.js"></script>
</body>
</html>
相关js:
let mockResponseData = null; // 定义一个全局变量
let mockData = null;
//请求数据
async function fetchData() {
const response = await fetch('http://10.196.1.62:8081/service/BasicData/newsInfo/externalQuery', {
method: 'POST', // 设置请求方法为POST
headers: {
'Content-Type': 'application/json' // 设置请求头，告诉服务器我们发送的是JSON格式的数据
},
body: JSON.stringify({ // 将请求体转换为JSON字符串
// 在这里添加你的请求参数
})
});
if (!response.ok) {
const message = `请求错误： ${response.status}`;
throw new Error(message);
}
mockResponseData = await response.json();
console.log(mockResponseData); // 打印后端返回的数据
// 在fetchData函数完成后，处理和使用数据
mockData = formatResponseData(mockResponseData.data);
init();
}
window.onload = fetchData; // 当页面加载完成时，执行fetchData函数
// 分页配置
const config = {
pageSize: 5,
currentPage: 1
};
function formatResponseData(data) {
return data.map(item => ({
id: item.id,
title: item.title,
time: new Date(item.createTime),
content: item.content,
image: item.photoUrl || 'placeholder.jpg' // 使用photoUrl作为图片URL，如果没有photoUrl则使用placeholder.jpg
}));
}
function formatDate(date) {
const d = new Date(date);
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
const hour = String(d.getHours()).padStart(2, '0');
const minute = String(d.getMinutes()).padStart(2, '0');
return `${year}-${month}-${day} ${hour}:${minute}`;
}
function renderNewsList(data) {
const newsListEl = document.getElementById('newsList');
newsListEl.innerHTML = data.map(item => `
<li class="news-item" onclick="viewNewsDetails('${item.id}')">
<div class="news-img"><img src="${item.image}" alt="news image" style="width:300px;height:200px;"></div>
<div class="news-content">
<a href="javascript:void(0);" class="news-title">${item.title}</a>
<div class="news-time">${formatDate(item.time)}</div>
</div>
</li>
`).join('');
}
function renderPagination(total) {
const totalPages = Math.ceil(total / config.pageSize);
const paginationEl = document.getElementById('pagination');
let html = `
<span class="page-btn ${config.currentPage === 1 ? 'disabled' : ''}"
onclick="changePage(${config.currentPage - 1})">上一页</span>
<div class="page-list">
`;
for (let i = 1; i <= totalPages; i++) {
if (
i === 1 ||
i === totalPages ||
(i >= config.currentPage - 2 && i <= config.currentPage + 2)
) {
html += `
<span class="page-item ${i === config.currentPage ? 'active' : ''}"
onclick="changePage(${i})">${i}</span>
`;
} else if (
i === config.currentPage - 3 ||
i === config.currentPage + 3
) {
html += `<span class="page-item">...</span>`;
}
}
html += `
</div>
<span class="page-btn ${config.currentPage === totalPages ? 'disabled' : ''}"
onclick="changePage(${config.currentPage + 1})">下一页</span>
`;
paginationEl.innerHTML = html;
}
function changePage(page) {
const totalPages = Math.ceil(mockData.length / config.pageSize);
if (page < 1 || page > totalPages) return;
config.currentPage = page;
const start = (page - 1) * config.pageSize;
const end = start + config.pageSize;
const pageData = mockData.slice(start, end);
renderNewsList(pageData);
renderPagination(mockData.length);
}
function viewNewsDetails(newsId) {
window.location.href = `news-details.html?id=${newsId}`;
}
function init() {
changePage(1);
}
document.addEventListener('DOMContentLoaded', init);
//新闻详情
async function fetchNewsDetail(newsId) {
const response = await fetch('http://10.196.1.62:8081/service/BasicData/newsInfo/externalQueryDetail', {
method: 'POST', // 设置请求方法为POST
headers: {
'Content-Type': 'application/json' // 设置请求头，告诉服务器我们发送的是JSON格式的数据
},
body: JSON.stringify({ id: newsId }) // 将请求体转换为JSON字符串
});
if (!response.ok) {
const message = `An error has occured: ${response.status}`;
throw new Error(message);
}
const newsDetail = await response.json();
console.log(newsDetail); // 打印后端返回的数据
return newsDetail.data; // 只返回新闻详情
}
function getQueryParam(param) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(param);
}
// 提取图片url
function extractImageUrl(imgTag) {
const srcMatch = imgTag.match(/src="([^"]*)"/);
return srcMatch ? srcMatch[1] : '';
}
async function showNewsDetails() {
const newsId = getQueryParam('id') ;
if (!newsId) return; // 如果newsId不存在，直接返回
const newsItem = await fetchNewsDetail(newsId);
if (!newsItem) return;
document.getElementById('newsTitle').textContent = newsItem.title;
let contentHtml = newsItem.content;
newsItem.newsPictureVos.forEach(img => {
const imageUrl = extractImageUrl(img.url); // 提取出图片URL
console.log(imageUrl);
const imgTag = `<img src="${imageUrl}" alt="${img.name}" style="max-width:50%;height:auto;">`;
contentHtml = contentHtml.replace(`[${img.name}]`, imgTag);
});
document.getElementById('newsContent').innerHTML = contentHtml;
}
function goBack() {
window.location.href = 'news.html';
}
document.addEventListener('DOMContentLoaded', showNewsDetails);
假数据：
function generateMockData(count) {
return Array.from({ length: count }, (_, index) => ({
id: index + 1,
title: 这是第${index + 1}条新闻标题 - ${new Date().toLocaleDateString()},
time: new Date(Date.now() - Math.random() * 10000000000),
image: 'placeholder.jpg'
}));
}，怎么换成从后端响应的数据const mockResponseData = {
code: 0,
msg: "success",
data: [
{
id: "1001",
title: "2024年春季校园招聘会圆满结束",
content: "昨日,我校2024年春季校园招聘会在体育馆顺利举行。[image1]本次招聘会吸引了来自全国各地的200多家企业参加,提供岗位超过1000个。现场人头攒动,同学们积极投递简历。[image2]招聘会现场还特别设置了面试专区,许多学生当场获得了面试机会。[image3]",
createTime: "2024-01-15 14:30:00",
type: 1,
photoUrl: "",
newsPictureVos: [
{
pictureId: "pic001",
name: "image1",
url: "https://example.com/images/job-fair-entrance.jpg"
},
{
pictureId: "pic002",
name: "image2",
url: "https://example.com/images/students-resume.jpg"
},
{
pictureId: "pic003",
name: "image3",
url: "https://example.com/images/interview-area.jpg"
}
]
},
{
id: "1002",
title: "我校在全国大学生创新竞赛中获得佳绩",
content: "在刚刚结束的全国大学生创新创业大赛中,我校学子表现优异。[image1]由计算机学院王同学带队的项目《智能垃圾分类系统》获得特等奖。[image2]该系统采用AI技术,能够精确识别并分类各类垃圾,具有广阔的应用前景。",
createTime: "2024-01-14 09:15:00",
type: 1,
photoUrl: "",
newsPictureVos: [
{
pictureId: "pic004",
name: "image1",
url: "https://example.com/images/competition-scene.jpg"
},
{
pictureId: "pic005",
name: "image2",
url: "https://example.com/images/award-ceremony.jpg"
}
]
},
{
id: "1003",
title: "校园文化节开幕式精彩纷呈",
content: "今天,为期一周的校园文化节拉开帷幕。[image1]开幕式上,学生们带来了精彩的文艺表演。[image2]随后的社团展示环节,各个社团以独特的方式展现了自己的风采。[image3]文化节期间还将举办书法比赛、演讲比赛等多项活动。",
createTime: "2024-01-13 16:45:00",
type: 2,
photoUrl: "",
newsPictureVos: [
{
pictureId: "pic006",
name: "image1",
url: "https://example.com/images/opening-ceremony.jpg"
},
{
pictureId: "pic007",
name: "image2",
url: "https://example.com/images/student-performance.jpg"
},
{
pictureId: "pic008",
name: "image3",
url: "https://example.com/images/club-exhibition.jpg"
}
]
}
]
};废弃样式：
<!DOCTYPE html>
<html>
<head>
<title>详情</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<!-- //for-mobile-apps -->
<link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="static/css/details.css" rel="stylesheet" type="text/css" media="all" />
<!-- <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />-->
</head>
<body>
<!-- 返回 -->
<div class="header-nav">
<a href="news.html" class="modern-back">
<svg class="back-arrow" viewBox="0 0 24 24">
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
</svg>
<span>返回</span>
</a>
</div>
<!-- about -->
<div class="about" id="about">
<div class="container">
<div class="about-grids">
<div class="col-md-5 w3_about_grid_left">
<h3>探索永庆坊之美 <span>--</span> <i>尽在指尖之间</i></h3>
</div>
<div class="col-md-7 about_grid_right_w3agile">
<p>永庆坊是广州著名的文化与商业融合区域，这里保存了众多传统建筑，展示了独特的岭南文化。漫步于古色古香的街道，您可以欣赏到古老的民居、精致的手工艺品以及丰富的美食。</br>在这里，历史与现代交融，您不仅能感受到广州的文化底蕴，还能体验到活力四射的时尚氛围。我们的平台为您提供最新的活动信息，确保您不错过每一个精彩瞬间。</span></p>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="about-bottom">
<div class="container">
<div class="about-grids-bottom">
<div class="col-md-6 about-grids-bottom-left">
</div>
<div class="col-md-6 agileinfo_about_grids_b+ottom_right">
<img src="static/image/equipment/冷藏箱验箱区.png" alt=" " class="img-responsive" />
<div class="agileinfo_about_grids_bottom_right-pos">
<h3>关于“永庆坊”</h3>
<p>永庆坊是一个充满历史魅力的地方，这里不仅有着丰富的传统文化，还有着现代艺术的表达。<span>
在这个坊里，您可以品尝到地道的广州美食，欣赏到各类文化展览，甚至参加手工艺制作体验，感受岭南文化的独特魅力。每一步都是一段历史，每一次停留都是一次心灵的洗礼。</span></p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="portfolio-video">
<div class="container">
<h3>去感受永庆坊的文化气息</h3>
<p>在永庆坊，您可以探索到广州的传统与现代交织的魅力。这里不仅有丰富的文化活动，还有别具一格的艺术展览，让每一次的参观都成为难忘的体验。
在古老的街道上漫步，感受历史的脉搏
品尝地道的美食，体会舌尖的艺术
参与传统手工艺，感受匠人的热情
让每一次的探索都成为心灵的充实
在这里，您不仅是游客，更是文化的传承者。</p>
</div>
</div>
</body>
</html>
对应css
.header-nav {
padding: 12px 20px;
float: right;
}
.modern-back {
display: inline-flex;
align-items: center;
color: #333;
text-decoration: none;
font-size: 15px;
padding: 8px 12px;
transition: all 0.2s;
}
.back-arrow {
width: 20px;
height: 20px;
margin-right: 4px;
fill: currentColor;
}
.modern-back:hover {
color: #ff9318;
background: rgba(241, 243, 250, 0.34);
border-radius: 4px;
}
/*-- about --*/
.about,.about-bottom,.team,.portfolio,.services,.contact{
padding:5em 0;
}
.w3_about_grid_left h3{
font-size:3em;
color:#212121;
margin: 1em 0 0;
float: left;
}
.w3_about_grid_left h3 span{
display: block;
color: #FFB445;
margin: .2em 0;
/*-- agileits --*/
padding-left: 3em;
}
.w3_about_grid_left h3 i{
padding-left: 2em;
font-style: normal;
color: #999;
}
.about_grid_right_w3agile{
padding-left:3em;
border-left:1px solid #999;
float: right;
}
.about_grid_right_w3agile p{
color:#999;
line-height:1.8em;
}
.about_grid_right_w3agile p span{
display:block;
margin:3em 0 0;
}
.agileinfo_about_grids_bottom_right{
position:relative;
text-align:left;
}
.agileinfo_about_grids_bottom_right-pos{
position: absolute;
top: 50%;
left: 32%;
padding: 3em;
box-shadow: 0px 0px 5px #DBDBDB;
background: #fff;
width: 60%;
}
.agileinfo_about_grids_bottom_right-pos h3{
font-size: 2em;
color: #212121;
position: relative;
padding-bottom:.5em;
}
.agileinfo_about_grids_bottom_right-pos h3:after{
content: '';
background: #DD1B1B;
width: 50%;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
}
.agileinfo_about_grids_bottom_right-pos p{
color:#999;
line-height:1.8em;
margin:2em 0 0;
}
.agileinfo_about_grids_bottom_right-pos p span{
display:block;
margin:1em 0 0;
}
.agileinfo_about_grids_bottom_right img {
margin: 0 auto;
height: 500px;
}
/*-- //about --*/
/*-- team --*/
/*-- portfolio-video --*/
.portfolio-video{
/*background:url(../images/11.jpg) no-repeat 0px 0px;*/
background: #6c757d;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
min-height:500px;
text-align:center;
padding:6em 0 0;
}
.portfolio-video h3{
font-size: 2.5em;
color: #fff;
padding-bottom: .5em;
position: relative;
text-transform: capitalize;
}
.portfolio-video h3:after{
content: '';
background: #FFB445;
width: 20%;
height: 1px;
position: absolute;
bottom: 0%;
left: 39%;
}
.portfolio-video p{
width:70%;
margin:2em auto 4em;
color:#fff;
line-height:1.8em;
}
.portfolio-video h4{
font-size:1.5em;
color:#fff;
}
a.play-icon{
outline:none;
}
a.play-icon span {
font-size: 3em;
color: #fff;
top: 0.5em;
}
/*-- //portfolio-video --*/
@media (max-width:1366px){
.portfolio-video {
min-height: 410px;
padding: 3em 0 0;
}
}
@media (max-width: 1280px){
.banner-info {
margin: 10em auto 0;
}
.more {
margin-bottom:9em;
}
.banner {
min-height: 655px;
}
.about, .about-bottom, .team, .portfolio, .services, .contact {
padding: 4em 0;
}
}
@media (max-width:800px){
.about, .about-bottom, .team, .portfolio, .services, .contact {
padding: 3em 0;
}
.agileinfo_about_grids_bottom_right-pos {
top: 10%;
left: 10%;
width: 100%;
}
.portfolio-video h3 {
font-size: 2.3em;
}
.portfolio-video {
min-height: 360px;
padding: 2em 0 0;
}
}
@media (max-width:640px){
.about, .about-bottom, .team, .portfolio, .services, .contact {
padding: 2em 0;
}
.portfolio_grid_w3ls:nth-child(3) {
margin: 1em 0 0;
}
.portfolio_grid_w3ls:nth-child(4), .portfolio_grid_w3ls:nth-child(5), .portfolio_grid_w3ls:nth-child(6) {
margin: 1em 0;
}
.portfolio_grid_w3ls:nth-child(5), .portfolio_grid_w3ls:nth-child(6) {
margin: 0 0 1em;
}
.portfolio_grid_w3ls:nth-child(9) {
margin: 1em 0 0;
}
.portfolio-video h3 {
font-size: 2em;
}
.portfolio-video h4 {
font-size: 1.3em;
}
.team h3, .portfolio h3, .services h3, .contact h3 {
font-size: 2em;
}
.wthree_services_grid-right h4 {
font-size: 1.3em;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻详情</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: "Microsoft YaHei", sans-serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.news-header {
margin-bottom: 40px;
position: relative; /* 添加相对定位 */
}
.news-title {
font-size: 2em;
color: #333;
margin-bottom: 10px;
position: relative;
display: inline-block;
padding-bottom: 30px; /* 为日期留出空间 */
}
.news-title::after {
content: '';
position: absolute;
bottom: 20px; /* 调整下划线位置 */
left: 0;
width: 100%;
height: 2px;
background-color: #000;
}
.news-date {
position: absolute;
bottom: 0;
right: 0;
font-size: 0.9em;
color: #666;
}
.content-wrapper {
display: flex;
gap: 30px;
margin-top: 30px;
}
.news-image {
width: 40%;
height: auto;
object-fit: cover;
position: relative;
}
.text-content {
flex: 1;
}
.news-content {
font-size: 1.1em;
line-height: 1.8;
color: #333;
margin-bottom: 30px;
box-shadow:0px 0px 5px #DBDBDB;
padding:30px;
}
.culture-section {
margin-top: 80px;
text-align: center;
background-color: rgba(245, 245, 245, 0.45);
padding: 50px 20px;
}
.culture-title {
font-size: 2em;
color: #333;
margin-bottom: 30px;
}
.culture-content {
font-size: 1.1em;
line-height: 1.8;
color: #666;
max-width: 800px;
margin: 0 auto;
}
.back-button {
position: absolute;
top: 10px;
right: 10px;
padding: 0.5em 1em;
font-size: 1em;
color: #000;
background-color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<button id="backButton" class="back-button">← 返回</button>
<div class="news-header">
<h1 id="newsTitle" class="news-title"></h1>
<div id="newsDate" class="news-date"></div>
</div>
<div class="content-wrapper">
<img id="newsImage" class="news-image" src="" alt="永庆坊图片">
<div class="text-content">
<p id="newsContent" class="news-content"></p>
</div>
</div>
</div>
<script>
var newsData = {
title: "关于韩通",
date: "2024-01-15", // 添加日期
image: "static/image/equipment/img.png",
content: "永庆坊是一个充满历史魅力的地方，这里不仅有着丰富的传统文化，还有着现代艺术的表达。在这个坊里，您可以品尝到地道的广州美食，欣赏到各类文化展览，甚至参加手工艺制作体验，感受岭南文化的独特魅力。每一步都是一段历史，每一次停留都是一次心灵的洗礼。",
cultureTitle: "去感受永庆坊的文化气息",
cultureContent: "在永庆坊，您可以探索广州的传统与现代交织的魅力，这里不仅有丰富的文化活动，还有别具一格的艺术展览，让每一次的参观都成为难忘的体验。在古老的街道上漫步，感受历史的脉搏 品尝地道的美食，体会古朴的艺术 参与传统手工艺，感受匠人的热情 让每一次的探索都成为心灵的充实 在这里，您不仅是游客，更是文化的传承者。"
};
function formatDate(dateString) {
const date = new Date(dateString);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `发布日期：${year}-${month}-${day}`;
}
function updateContent() {
document.getElementById('newsTitle').textContent = newsData.title;
document.getElementById('newsDate').textContent = formatDate(newsData.date);
document.getElementById('newsImage').src = newsData.image;
document.getElementById('newsContent').textContent = newsData.content;
document.getElementById('cultureTitle').textContent = newsData.cultureTitle;
document.getElementById('cultureContent').textContent = newsData.cultureContent;
}
window.onload = function() {
updateContent();
document.getElementById('backButton').onclick = function() {
window.history.back();
}
};
</script>
</body>
</html>