Skip to content

S
sts网站
Commit 93adc7cc authored by liyang's avatar liyang
Browse files
Options

fix：优化若干

parent b86b7619
Hide whitespace changes
Inline Side-by-side
Showing with 325 additions and 1156 deletions
portal-ui/src/assets/styles/index.scss
View file @ 93adc7cc
...@@ -4,6 +4,9 @@ ...@@ -4,6 +4,9 @@
@import './element-ui.scss'; @import './element-ui.scss';
@import './sidebar.scss'; @import './sidebar.scss';
@import './btn.scss'; @import './btn.scss';
@import './portal.scss';
body { body {
height: 100%; height: 100%;
......
portal-ui/src/assets/styles/portal.scss
View file @ 93adc7cc
...@@ -149,3 +149,71 @@ section { ...@@ -149,3 +149,71 @@ section {
font-size: 24px; font-size: 24px;
} }
} }
// 富文本渲染样式
.rich-text-rendering {
padding: 30px;
line-height: 1.8;
color: #333333;
overflow: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
h1,
h2,
h3,
h4,
h5,
h6 {
color: #1e3c72;
margin-top: 24px;
margin-bottom: 16px;
}
p {
margin-bottom: 16px;
max-width: 100%;
overflow: hidden;
}
img {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
border-radius: 4px;
margin: 16px 0;
display: block;
box-sizing: border-box;
}
a {
color: #1e3c72;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
ul,
ol {
margin-left: 24px;
margin-bottom: 16px;
}
li {
margin-bottom: 8px;
}
}
// 内容标题样式
.content-header {
padding: 30px 30px 0;
.title {
font-size: 20px;
font-weight: 600;
color: #1e3c72;
margin: 0;
}
}
\ No newline at end of file
portal-ui/src/views/portal/AboutSTS.vue
View file @ 93adc7cc
...@@ -7,25 +7,52 @@ ...@@ -7,25 +7,52 @@
<span class="title">关于STS</span> <span class="title">关于STS</span>
</div> </div>
<div class="sidebar-decorator"> <div class="sidebar-decorator">
<div class="decorator-segment" style="background-color: #4B9F37"></div> <div
<div class="decorator-segment" style="background-color: #C51A2D"></div> class="decorator-segment"
<div class="decorator-segment" style="background-color: #E37221"></div> style="background-color: #4b9f37"
<div class="decorator-segment" style="background-color: #0298DB"></div> ></div>
<div class="decorator-segment" style="background-color: #F8C72E"></div> <div
<div class="decorator-segment" style="background-color: #D0103A"></div> class="decorator-segment"
<div class="decorator-segment" style="background-color: #028542"></div> style="background-color: #c51a2d"
<div class="decorator-segment" style="background-color: #BF8B2E"></div> ></div>
<div class="decorator-segment" style="background-color: #0B97D9"></div> <div
class="decorator-segment"
style="background-color: #e37221"
></div>
<div
class="decorator-segment"
style="background-color: #0298db"
></div>
<div
class="decorator-segment"
style="background-color: #f8c72e"
></div>
<div
class="decorator-segment"
style="background-color: #d0103a"
></div>
<div
class="decorator-segment"
style="background-color: #028542"
></div>
<div
class="decorator-segment"
style="background-color: #bf8b2e"
></div>
<div
class="decorator-segment"
style="background-color: #0b97d9"
></div>
</div> </div>
<div class="sidebar-menu"> <div class="sidebar-menu">
<div <div
v-for="(item, index) in titleList" v-for="(item, index) in titleList"
:key="item.id" :key="item.id"
class="menu-item" class="menu-item"
:class="{ active: activeIndex === index }" :class="{ active: activeIndex === index }"
@click="switchContent(index)" @click="switchContent(index)"
> >
{{ item.title || '未设置' }} {{ item.title || "未设置" }}
</div> </div>
</div> </div>
</div> </div>
...@@ -36,7 +63,10 @@ ...@@ -36,7 +63,10 @@
<div class="content-header"> <div class="content-header">
<span class="title">{{ activeTitle }}</span> <span class="title">{{ activeTitle }}</span>
</div> </div>
<div class="content-body" v-html="activeContent || '<p>暂无内容</p>'"></div> <div
class="rich-text-rendering"
v-html="activeContent || '<p>暂无内容</p>'"
></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -44,50 +74,54 @@ ...@@ -44,50 +74,54 @@
</template> </template>
<script> <script>
import { getAboutSts } from '@/api/portal/about' import { getAboutSts } from "@/api/portal/about";
export default { export default {
name: 'AboutSTS', name: "AboutSTS",
data() { data() {
return { return {
loading: true, loading: true,
aboutStsList: [], aboutStsList: [],
activeIndex: 0, activeIndex: 0,
titleList: [] titleList: [],
} };
}, },
computed: { computed: {
activeTitle() { activeTitle() {
return this.titleList[this.activeIndex]?.title || '未设置' return this.titleList[this.activeIndex]?.title || "未设置";
}, },
activeContent() { activeContent() {
return this.titleList[this.activeIndex]?.content || '' return this.titleList[this.activeIndex]?.content || "";
} },
}, },
created() { created() {
this.getAboutStsData() this.getAboutStsData();
}, },
methods: { methods: {
getAboutStsData() { getAboutStsData() {
this.loading = true this.loading = true;
getAboutSts().then(response => { getAboutSts()
if (response.data && Array.isArray(response.data)) { .then((response) => {
this.aboutStsList = response.data if (response.data && Array.isArray(response.data)) {
this.initTitleList() this.aboutStsList = response.data;
} this.initTitleList();
this.loading = false }
}).catch(() => { this.loading = false;
this.loading = false })
}) .catch(() => {
this.loading = false;
});
}, },
initTitleList() { initTitleList() {
this.titleList = this.aboutStsList.filter(item => item.title || item.content) this.titleList = this.aboutStsList.filter(
(item) => item.title || item.content
);
}, },
switchContent(index) { switchContent(index) {
this.activeIndex = index this.activeIndex = index;
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -117,21 +151,21 @@ export default { ...@@ -117,21 +151,21 @@ export default {
} }
.sidebar-header { .sidebar-header {
background: #1EA8C5; background: #1ea8c5;
height: 58px; height: 58px;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 19px; padding-left: 19px;
.title { .title {
font-family: Microsoft YaHei, Microsoft YaHei; font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
color: #FFFFFF; color: #ffffff;
line-height: 18px; line-height: 18px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
} }
} }
...@@ -159,14 +193,14 @@ text-transform: none; ...@@ -159,14 +193,14 @@ text-transform: none;
padding: 16px 0; padding: 16px 0;
.menu-item { .menu-item {
font-family: Microsoft YaHei, Microsoft YaHei; font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
color: #090909; color: #090909;
line-height: 51px; // line-height: 51px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
padding: 16px 24px; padding: 16px 24px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
...@@ -181,7 +215,7 @@ text-transform: none; ...@@ -181,7 +215,7 @@ text-transform: none;
&.active { &.active {
background-color: #f0f2f5; background-color: #f0f2f5;
color: #0080A5; color: #0080a5;
font-weight: 600; font-weight: 600;
border-left-color: #1e3c72; border-left-color: #1e3c72;
} }
...@@ -197,155 +231,5 @@ text-transform: none; ...@@ -197,155 +231,5 @@ text-transform: none;
overflow: hidden; overflow: hidden;
min-height: 600px; min-height: 600px;
} }
.content-header {
height: 100px;
padding: 30px 30px 0;
.title {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 24px;
color: #090909;
line-height: 34px;
text-align: left;
font-style: normal;
text-transform: none;
}
}
.content-body {
padding: 30px;
padding-top: 0;
line-height: 1.8;
color: #333333;
overflow: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
:deep(h1),
:deep(h2),
:deep(h3),
:deep(h4),
:deep(h5),
:deep(h6) {
color: #1e3c72;
margin-top: 24px;
margin-bottom: 16px;
}
::v-deep p{
margin-bottom: 16px;
max-width: 100%;
overflow: hidden;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #090909;
line-height: 30px;
text-align: left;
font-style: normal;
text-transform: none;
}
::v-deep img {
margin: 0 auto ;
width: 606px !important;
height: auto !important;
border-radius: 4px;
display: block;
box-sizing: border-box;
}
:deep(a) {
color: #1e3c72;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
:deep(ul),
:deep(ol) {
margin-left: 24px;
margin-bottom: 16px;
}
:deep(li) {
margin-bottom: 8px;
}
}
}
@media (max-width: 992px) {
.about-sts-content {
grid-template-columns: 1fr;
gap: 20px;
}
.left-sidebar {
order: 2;
.sidebar-menu {
display: flex;
overflow-x: auto;
white-space: nowrap;
.menu-item {
border-left: none;
border-bottom: 3px solid transparent;
display: inline-block;
margin-right: 8px;
border-radius: 4px 4px 0 0;
&.active {
border-left: none;
border-bottom-color: #1e3c72;
}
}
}
}
.right-content {
order: 1;
}
}
@media (max-width: 768px) {
.about-sts-content {
padding: 0 20px;
}
.right-content {
.content-card {
min-height: 500px;
}
.content-header {
padding: 20px 20px 0;
}
.content-body {
padding: 20px;
}
}
.left-sidebar {
.sidebar-header {
padding: 20px 20px;
h2 {
font-size: 20px;
}
}
.sidebar-menu {
.menu-item {
padding: 12px 20px;
font-size: 14px;
}
}
}
} }
</style> </style>
portal-ui/src/views/portal/Achievement.vue
View file @ 93adc7cc
...@@ -74,10 +74,10 @@ ...@@ -74,10 +74,10 @@
<!-- 右侧内容区域 --> <!-- 右侧内容区域 -->
<div class="right-content"> <div class="right-content">
<div class="content-card" v-loading="loading"> <div class="content-card" v-loading="loading">
<div class="content-header"> <div class="content-header" v-if="currentMenu == 'overview'">
<span class="title">{{ currentTitle }}</span> <span class="title">{{ currentTitle }}</span>
</div> </div>
<div class="content-body"> <div class="rich-text-rendering">
<!-- 成果总体描述内容 --> <!-- 成果总体描述内容 -->
<div v-if="currentMenu === 'overview'" class="overview-content"> <div v-if="currentMenu === 'overview'" class="overview-content">
<div <div
...@@ -457,72 +457,6 @@ export default { ...@@ -457,72 +457,6 @@ export default {
overflow: hidden; overflow: hidden;
min-height: 600px; min-height: 600px;
} }
.content-header {
padding: 30px 30px 0;
.title {
font-size: 20px;
font-weight: 600;
color: #1e3c72;
margin: 0;
}
}
.content-body {
padding: 30px;
line-height: 1.8;
color: #333333;
overflow: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
:deep(h1),
:deep(h2),
:deep(h3),
:deep(h4),
:deep(h5),
:deep(h6) {
color: #1e3c72;
margin-top: 24px;
margin-bottom: 16px;
}
:deep(p) {
margin-bottom: 16px;
max-width: 100%;
overflow: hidden;
}
:deep(img) {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
border-radius: 4px;
margin: 16px 0;
display: block;
box-sizing: border-box;
}
:deep(a) {
color: #1e3c72;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
:deep(ul),
:deep(ol) {
margin-left: 24px;
margin-bottom: 16px;
}
:deep(li) {
margin-bottom: 8px;
}
}
} }
/* SDGSAT-1 科学成果样式 */ /* SDGSAT-1 科学成果样式 */
...@@ -761,121 +695,4 @@ export default { ...@@ -761,121 +695,4 @@ export default {
padding: 20px 0; padding: 20px 0;
} }
} }
/* 响应式设计 */
@media (max-width: 992px) {
.achievement-content {
grid-template-columns: 1fr;
gap: 20px;
}
.left-sidebar {
order: 2;
.sidebar-menu {
display: flex;
overflow-x: auto;
white-space: nowrap;
.menu-item {
border-left: none;
border-bottom: 3px solid transparent;
display: inline-block;
margin-right: 8px;
border-radius: 4px 4px 0 0;
&.active {
border-left: none;
border-bottom-color: #1e3c72;
}
}
}
}
.right-content {
order: 1;
}
.achievement-body {
flex-direction: column;
}
.achievement-right {
width: 100%;
}
.achievement-thumbnail {
height: 200px;
}
}
@media (max-width: 768px) {
.achievement-content {
padding: 0 20px;
}
.right-content {
.content-card {
min-height: 500px;
}
.content-header {
padding: 20px 20px 0;
}
.content-body {
padding: 20px;
}
}
.left-sidebar {
.sidebar-header {
padding: 20px 20px;
h2 {
font-size: 20px;
}
}
.sidebar-menu {
.menu-item {
padding: 12px 20px;
font-size: 14px;
}
}
}
.achievement-header {
padding: 16px 20px;
}
.achievement-body {
padding: 20px;
gap: 20px;
}
.achievement-thumbnail {
height: 160px;
}
}
</style>
<style scoped>
/* 确保图片宽度自适应 */
.content-body >>> img {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
border-radius: 4px;
margin: 16px 0;
display: block;
box-sizing: border-box;
}
/* 确保富文本编辑器生成的其他元素也不会溢出 */
.content-body >>> .ql-video {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
</style> </style>
portal-ui/src/views/portal/Notice.vue
View file @ 93adc7cc
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<!-- <div class="content-header"> <!-- <div class="content-header">
<span class="title">{{ currentTitle }}</span> <span class="title">{{ currentTitle }}</span>
</div> --> </div> -->
<div class="content-body"> <div class="rich-text-rendering">
<!-- 通知公告列表 --> <!-- 通知公告列表 -->
...@@ -267,72 +267,6 @@ text-transform: none; ...@@ -267,72 +267,6 @@ text-transform: none;
overflow: hidden; overflow: hidden;
min-height: 600px; min-height: 600px;
} }
.content-header {
padding: 30px 30px 0;
.title {
font-size: 20px;
font-weight: 600;
color: #1e3c72;
margin: 0;
}
}
.content-body {
padding: 30px;
line-height: 1.8;
color: #333333;
overflow: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
:deep(h1),
:deep(h2),
:deep(h3),
:deep(h4),
:deep(h5),
:deep(h6) {
color: #1e3c72;
margin-top: 24px;
margin-bottom: 16px;
}
:deep(p) {
margin-bottom: 16px;
max-width: 100%;
overflow: hidden;
}
:deep(img) {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
border-radius: 4px;
margin: 16px 0;
display: block;
box-sizing: border-box;
}
:deep(a) {
color: #1e3c72;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
:deep(ul),
:deep(ol) {
margin-left: 24px;
margin-bottom: 16px;
}
:deep(li) {
margin-bottom: 8px;
}
}
} }
/* 通知公告列表 */ /* 通知公告列表 */
...@@ -473,126 +407,4 @@ text-transform: none; ...@@ -473,126 +407,4 @@ text-transform: none;
} }
} }
} }
</style>
/* 响应式设计 */ \ No newline at end of file
@media (max-width: 992px) {
.notice-content {
grid-template-columns: 1fr;
gap: 20px;
}
.left-sidebar {
order: 2;
.sidebar-menu {
display: flex;
overflow-x: auto;
white-space: nowrap;
.menu-item {
border-left: none;
border-bottom: 3px solid transparent;
display: inline-block;
margin-right: 8px;
border-radius: 4px 4px 0 0;
&.active {
border-left: none;
border-bottom-color: #1e3c72;
}
}
}
}
.right-content {
order: 1;
}
.notice-item {
flex-direction: column;
}
.notice-actions {
width: 100%;
justify-content: flex-end;
}
}
@media (max-width: 768px) {
.notice-content {
padding: 0 20px;
}
.right-content {
.content-card {
min-height: 500px;
}
.content-header {
padding: 20px 20px 0;
}
.content-body {
padding: 20px;
}
}
.left-sidebar {
.sidebar-header {
padding: 20px 20px;
h2 {
font-size: 20px;
}
}
.sidebar-menu {
.menu-item {
padding: 12px 20px;
font-size: 14px;
}
}
}
.search-section {
padding: 20px;
.filter-bar {
flex-direction: column;
align-items: flex-start;
}
}
.notice-item {
padding: 20px;
}
.empty-state {
text-align: center;
padding: 60px 0;
}
}
</style>
<style scoped>
/* 确保图片宽度自适应 */
.content-body >>> img {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
border-radius: 4px;
margin: 16px 0;
display: block;
box-sizing: border-box;
}
/* 确保富文本编辑器生成的其他元素也不会溢出 */
.content-body >>> .ql-video {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
</style>
portal-ui/src/views/portal/Progress.vue
View file @ 93adc7cc
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<div class="content-header"> <div class="content-header">
<span class="title">{{ currentTitle }}</span> <span class="title">{{ currentTitle }}</span>
</div> </div>
<div class="content-body"> <div class="rich-text-rendering">
<!-- 项目实施进展内容 --> <!-- 项目实施进展内容 -->
<div v-if="currentMenu === 'project'" class="project-progress"> <div v-if="currentMenu === 'project'" class="project-progress">
<div class="rich-text" v-html="implementationProgress.content || '<p>暂无内容</p>'"></div> <div class="rich-text" v-html="implementationProgress.content || '<p>暂无内容</p>'"></div>
...@@ -244,72 +244,6 @@ text-transform: none; ...@@ -244,72 +244,6 @@ text-transform: none;
overflow: hidden; overflow: hidden;
min-height: 600px; min-height: 600px;
} }
.content-header {
padding: 30px 30px 0;
.title {
font-size: 20px;
font-weight: 600;
color: #1e3c72;
margin: 0;
}
}
.content-body {
padding: 30px;
line-height: 1.8;
color: #333333;
overflow: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
:deep(h1),
:deep(h2),
:deep(h3),
:deep(h4),
:deep(h5),
:deep(h6) {
color: #1e3c72;
margin-top: 24px;
margin-bottom: 16px;
}
:deep(p) {
margin-bottom: 16px;
max-width: 100%;
overflow: hidden;
}
:deep(img) {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
border-radius: 4px;
margin: 16px 0;
display: block;
box-sizing: border-box;
}
:deep(a) {
color: #1e3c72;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
:deep(ul),
:deep(ol) {
margin-left: 24px;
margin-bottom: 16px;
}
:deep(li) {
margin-bottom: 8px;
}
}
} }
/* 里程碑时间轴样式 */ /* 里程碑时间轴样式 */
...@@ -399,96 +333,4 @@ text-transform: none; ...@@ -399,96 +333,4 @@ text-transform: none;
} }
} }
} }
</style>
/* 响应式设计 */ \ No newline at end of file
@media (max-width: 992px) {
.progress-content {
grid-template-columns: 1fr;
gap: 20px;
}
.left-sidebar {
order: 2;
.sidebar-menu {
display: flex;
overflow-x: auto;
white-space: nowrap;
.menu-item {
border-left: none;
border-bottom: 3px solid transparent;
display: inline-block;
margin-right: 8px;
border-radius: 4px 4px 0 0;
&.active {
border-left: none;
border-bottom-color: #1e3c72;
}
}
}
}
.right-content {
order: 1;
}
}
@media (max-width: 768px) {
.progress-content {
padding: 0 20px;
}
.right-content {
.content-card {
min-height: 500px;
}
.content-header {
padding: 20px 20px 0;
}
.content-body {
padding: 20px;
}
}
.left-sidebar {
.sidebar-header {
padding: 20px 20px;
h2 {
font-size: 20px;
}
}
.sidebar-menu {
.menu-item {
padding: 12px 20px;
font-size: 14px;
}
}
}
}
</style>
<style scoped>
/* 确保图片宽度自适应 */
.content-body >>> img {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
border-radius: 4px;
margin: 16px 0;
display: block;
box-sizing: border-box;
}
/* 确保富文本编辑器生成的其他元素也不会溢出 */
.content-body >>> .ql-video {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
</style>
portal-ui/src/views/portal/SDGSAT1.vue
View file @ 93adc7cc
...@@ -39,15 +39,15 @@ ...@@ -39,15 +39,15 @@
<div class="content-header"> <div class="content-header">
<span class="title">{{ currentTitle }}</span> <span class="title">{{ currentTitle }}</span>
</div> </div>
<div class="content-body" v-html="introductionData.content || '<p>暂无内容</p>'"></div> <div class="rich-text-rendering" v-html="introductionData.content || '<p>暂无内容</p>'"></div>
</div> </div>
<!-- 数据开发与应用 --> <!-- 数据开发与应用 -->
<div v-if="activeMenu === 'cases'" class="content-card" v-loading="loading"> <div v-if="activeMenu === 'cases'" class="content-card" v-loading="loading">
<div class="content-header"> <!-- <div class="content-header">
<span class="title">{{ currentTitle }}</span> <span class="title">{{ currentTitle }}</span>
</div> </div> -->
<div class="content-body"> <div class="rich-text-rendering">
<div class="case-list"> <div class="case-list">
<div class="case-item" v-for="(item, index) in caseList" :key="index"> <div class="case-item" v-for="(item, index) in caseList" :key="index">
<div class="case-left"> <div class="case-left">
...@@ -301,72 +301,6 @@ text-transform: none; ...@@ -301,72 +301,6 @@ text-transform: none;
overflow: hidden; overflow: hidden;
min-height: 600px; min-height: 600px;
} }
.content-header {
padding: 30px 30px 0;
.title {
font-size: 20px;
font-weight: 600;
color: #1e3c72;
margin: 0;
}
}
.content-body {
padding: 30px;
line-height: 1.8;
color: #333333;
overflow: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
:deep(h1),
:deep(h2),
:deep(h3),
:deep(h4),
:deep(h5),
:deep(h6) {
color: #1e3c72;
margin-top: 24px;
margin-bottom: 16px;
}
:deep(p) {
margin-bottom: 16px;
max-width: 100%;
overflow: hidden;
}
:deep(img) {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
border-radius: 4px;
margin: 16px 0;
display: block;
box-sizing: border-box;
}
:deep(a) {
color: #1e3c72;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
:deep(ul),
:deep(ol) {
margin-left: 24px;
margin-bottom: 16px;
}
:deep(li) {
margin-bottom: 8px;
}
}
} }
/* 应用案例列表样式 */ /* 应用案例列表样式 */
...@@ -457,109 +391,4 @@ text-transform: none; ...@@ -457,109 +391,4 @@ text-transform: none;
.case-action { .case-action {
padding-top: 8px; padding-top: 8px;
} }
</style>
/* 响应式设计 */ \ No newline at end of file
@media (max-width: 992px) {
.sdgsat1-content {
grid-template-columns: 1fr;
gap: 20px;
}
.left-sidebar {
order: 2;
.sidebar-menu {
display: flex;
overflow-x: auto;
white-space: nowrap;
.menu-item {
border-left: none;
border-bottom: 3px solid transparent;
display: inline-block;
margin-right: 8px;
border-radius: 4px 4px 0 0;
&.active {
border-left: none;
border-bottom-color: #1e3c72;
}
}
}
}
.right-content {
order: 1;
}
.case-item {
flex-direction: column;
}
.case-cover {
width: 100%;
height: 200px;
}
}
@media (max-width: 768px) {
.sdgsat1-content {
padding: 0 20px;
}
.right-content {
.content-card {
min-height: 500px;
}
.content-header {
padding: 20px 20px 0;
}
.content-body {
padding: 20px;
}
}
.left-sidebar {
.sidebar-header {
padding: 20px 20px;
h2 {
font-size: 20px;
}
}
.sidebar-menu {
.menu-item {
padding: 12px 20px;
font-size: 14px;
}
}
}
.case-item {
padding: 20px;
}
}
</style>
<style scoped>
/* 确保图片宽度自适应 */
.content-body >>> img {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
border-radius: 4px;
margin: 16px 0;
display: block;
box-sizing: border-box;
}
/* 确保富文本编辑器生成的其他元素也不会溢出 */
.content-body >>> .ql-video {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
</style>
portal-ui/src/views/portal/SciencePlan.vue
View file @ 93adc7cc
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<div class="content-header"> <div class="content-header">
<span class="title">{{ currentTitle }}</span> <span class="title">{{ currentTitle }}</span>
</div> </div>
<div class="content-body" v-html="currentContent || '<p>暂无内容</p>'"></div> <div class="rich-text-rendering" v-html="currentContent || '<p>暂无内容</p>'"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -184,150 +184,5 @@ export default { ...@@ -184,150 +184,5 @@ export default {
overflow: hidden; overflow: hidden;
min-height: 600px; min-height: 600px;
} }
.content-header {
padding: 30px 30px 0;
.title {
font-size: 20px;
font-weight: 600;
color: #1e3c72;
margin: 0;
}
}
.content-body {
padding: 30px;
padding-top: 0;
line-height: 1.8;
color: #333333;
overflow: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
:deep(h1),
:deep(h2),
:deep(h3),
:deep(h4),
:deep(h5),
:deep(h6) {
color: #1e3c72;
margin-top: 24px;
margin-bottom: 16px;
}
::v-deep p{
margin-bottom: 16px;
max-width: 100%;
overflow: hidden;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #090909;
line-height: 30px;
text-align: left;
font-style: normal;
text-transform: none;
}
::v-deep img {
margin: 0 auto ;
width: 606px !important;
height: auto !important;
border-radius: 4px;
display: block;
box-sizing: border-box;
}
:deep(a) {
color: #1e3c72;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
:deep(ul),
:deep(ol) {
margin-left: 24px;
margin-bottom: 16px;
}
:deep(li) {
margin-bottom: 8px;
}
}
}
@media (max-width: 992px) {
.science-plan-content {
grid-template-columns: 1fr;
gap: 20px;
}
.left-sidebar {
order: 2;
.sidebar-menu {
display: flex;
overflow-x: auto;
white-space: nowrap;
.menu-item {
border-left: none;
border-bottom: 3px solid transparent;
display: inline-block;
margin-right: 8px;
border-radius: 4px 4px 0 0;
&.active {
border-left: none;
border-bottom-color: #1e3c72;
}
}
}
}
.right-content {
order: 1;
}
}
@media (max-width: 768px) {
.science-plan-content {
padding: 0 20px;
}
.right-content {
.content-card {
min-height: 500px;
}
.content-header {
padding: 20px 20px 0;
}
.content-body {
padding: 20px;
}
}
.left-sidebar {
.sidebar-header {
padding: 20px 20px;
h2 {
font-size: 20px;
}
}
.sidebar-menu {
.menu-item {
padding: 12px 20px;
font-size: 14px;
}
}
}
} }
</style> </style>
portal-ui/src/views/portal/ValueDetail.vue
View file @ 93adc7cc
<template> <template>
<div class="value-detail"> <div class="value-detail-page">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="breadcrumb"> <div class="breadcrumb-container">
<el-breadcrumb separator="/"> <div class="breadcrumb-wrapper">
<el-breadcrumb-item><a href="/portal">首页</a></el-breadcrumb-item> <el-breadcrumb separator="/">
<el-breadcrumb-item>核心价值与作用</el-breadcrumb-item> <el-breadcrumb-item><a href="/portal">首页</a></el-breadcrumb-item>
<el-breadcrumb-item>详情</el-breadcrumb-item> <el-breadcrumb-item>核心价值与作用</el-breadcrumb-item>
</el-breadcrumb> <el-breadcrumb-item>详情</el-breadcrumb-item>
</el-breadcrumb>
<el-button class="back-btn" icon="el-icon-arrow-left" size="small" @click="goBack">返回</el-button>
</div>
</div> </div>
<!-- 白色背景内容区域 --> <div class="page-container">
<div class="content-container" v-loading="loading"> <div class="detail-card" v-loading="loading">
<!-- 标题 --> <!-- 标题 -->
<div class="value-title"> <div class="detail-header">
<h1>{{ valueDetail.title }}</h1> <h1 class="detail-title">{{ valueDetail.title }}</h1>
</div> </div>
<!-- 摘要 --> <!-- 详情内容 -->
<div class="value-summary" v-if="valueDetail.summary"> <div class="detail-body">
<p>{{ valueDetail.summary }}</p> <!-- 摘要 -->
</div> <div class="content-section" v-if="valueDetail.summary">
<h3>摘要</h3>
<div class="summary-box">
<p>{{ valueDetail.summary }}</p>
</div>
</div>
<!-- 详情内容 --> <!-- 内容 -->
<div class="value-content" v-html="valueDetail.content"></div> <div class="content-section" v-if="valueDetail.content">
<h3>详情</h3>
<div class="content-text" v-html="valueDetail.content"></div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -46,6 +59,9 @@ export default { ...@@ -46,6 +59,9 @@ export default {
this.getDetail() this.getDetail()
}, },
methods: { methods: {
goBack() {
this.$router.back()
},
async getDetail() { async getDetail() {
this.loading = true this.loading = true
try { try {
...@@ -80,129 +96,172 @@ export default { ...@@ -80,129 +96,172 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.value-detail { .value-detail-page {
width: 100%; width: 100%;
min-height: 100vh; min-height: calc(100vh - 200px);
background-color: #f5f7fa; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 40px 0; padding-bottom: 20px;
} }
/* 面包屑导航 */ /* 面包屑导航 */
.breadcrumb { .breadcrumb-container {
max-width: 1390px; padding: 20px 0;
margin: 0 auto 30px; }
.breadcrumb-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px; padding: 0 30px;
display: flex;
justify-content: space-between;
align-items: center;
.back-btn {
margin-left: 20px;
}
} }
/* 内容容器 */ .page-container {
.content-container { max-width: 1200px;
max-width: 1390px;
margin: 0 auto; margin: 0 auto;
padding: 40px 60px; padding: 30px;
}
.detail-card {
background: #ffffff; background: #ffffff;
border-radius: 8px; border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
} }
/* 标题样式 */ .detail-header {
.value-title { padding: 40px 40px 30px;
margin-bottom: 30px; border-bottom: 1px solid #f0f0f0;
padding-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
h1 { .detail-title {
font-size: 28px; font-size: 32px;
font-weight: 700; font-weight: 700;
color: #1e3c72; color: #1e3c72;
line-height: 1.4;
margin: 0; margin: 0;
line-height: 1.4;
}
}
.detail-body {
padding: 40px;
}
.content-section {
margin-bottom: 40px;
&:last-child {
margin-bottom: 0;
}
h3 {
font-size: 20px;
font-weight: 600;
color: #1e3c72;
margin: 0 0 20px 0;
padding-bottom: 10px;
border-bottom: 2px solid #2a5298;
} }
} }
/* 摘要样式 */ .summary-box {
.value-summary {
margin-bottom: 30px;
padding: 20px; padding: 20px;
background: #f5f7fa; background: #f5f7fa;
border-left: 4px solid #1e3c72; border-left: 4px solid #2a5298;
border-radius: 4px; border-radius: 4px;
p { p {
font-size: 16px; font-size: 15px;
color: #666; color: #666666;
line-height: 1.8; line-height: 1.8;
margin: 0; margin: 0;
} }
} }
/* 内容样式 */ .content-text {
.value-content { font-size: 15px;
color: #333333;
line-height: 1.8; line-height: 1.8;
color: #333; text-align: justify;
font-size: 16px;
:deep(h1),
:deep(h2),
:deep(h3),
:deep(h4),
:deep(h5),
:deep(h6) {
color: #1e3c72;
margin-top: 24px;
margin-bottom: 16px;
}
:deep(p) { ::v-deep {
margin-bottom: 16px; h1,
line-height: 1.8; h2,
} h3,
h4,
h5,
h6 {
color: #1e3c72;
margin-top: 24px;
margin-bottom: 16px;
}
:deep(img) { p {
max-width: 100%; margin-bottom: 15px;
height: auto;
border-radius: 4px;
margin: 20px 0;
}
:deep(a) { &:last-child {
color: #1e3c72; margin-bottom: 0;
text-decoration: none; }
}
&:hover { img {
text-decoration: underline; max-width: 100%;
height: auto;
border-radius: 8px;
margin: 20px 0;
} }
}
:deep(ul), a {
:deep(ol) { color: #2a5298;
margin-left: 24px; text-decoration: none;
margin-bottom: 16px;
} &:hover {
text-decoration: underline;
}
}
ul,
ol {
margin-left: 24px;
margin-bottom: 16px;
}
:deep(li) { li {
margin-bottom: 8px; margin-bottom: 8px;
}
} }
} }
/* 响应式适配 */
@media (max-width: 768px) { @media (max-width: 768px) {
.value-detail { .breadcrumb-wrapper {
padding: 20px 0; padding: 0 20px;
} }
.breadcrumb { .page-container {
padding: 0 20px; padding: 20px;
margin-bottom: 20px; }
.detail-header {
padding: 30px 20px;
.detail-title {
font-size: 24px;
}
} }
.content-container { .detail-body {
padding: 20px; padding: 20px;
margin: 0 20px;
} }
.value-title { .content-section {
h1 { margin-bottom: 30px;
font-size: 22px;
h3 {
font-size: 18px;
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment