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 @@
@import './element-ui.scss';
@import './sidebar.scss';
@import './btn.scss';
@import './portal.scss';
body {
height: 100%;
......
portal-ui/src/assets/styles/portal.scss
View file @ 93adc7cc
......@@ -149,3 +149,71 @@ section {
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 @@
<span class="title">关于STS</span>
</div>
<div class="sidebar-decorator">
<div class="decorator-segment" style="background-color: #4B9F37"></div>
<div class="decorator-segment" style="background-color: #C51A2D"></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
class="decorator-segment"
style="background-color: #4b9f37"
></div>
<div
class="decorator-segment"
style="background-color: #c51a2d"
></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 class="sidebar-menu">
<div
v-for="(item, index) in titleList"
<div
v-for="(item, index) in titleList"
:key="item.id"
class="menu-item"
:class="{ active: activeIndex === index }"
@click="switchContent(index)"
>
{{ item.title || '未设置' }}
{{ item.title || "未设置" }}
</div>
</div>
</div>
......@@ -36,7 +63,10 @@
<div class="content-header">
<span class="title">{{ activeTitle }}</span>
</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>
......@@ -44,50 +74,54 @@
</template>
<script>
import { getAboutSts } from '@/api/portal/about'
import { getAboutSts } from "@/api/portal/about";
export default {
name: 'AboutSTS',
name: "AboutSTS",
data() {
return {
loading: true,
aboutStsList: [],
activeIndex: 0,
titleList: []
}
titleList: [],
};
},
computed: {
activeTitle() {
return this.titleList[this.activeIndex]?.title || '未设置'
return this.titleList[this.activeIndex]?.title || "未设置";
},
activeContent() {
return this.titleList[this.activeIndex]?.content || ''
}
return this.titleList[this.activeIndex]?.content || "";
},
},
created() {
this.getAboutStsData()
this.getAboutStsData();
},
methods: {
getAboutStsData() {
this.loading = true
getAboutSts().then(response => {
if (response.data && Array.isArray(response.data)) {
this.aboutStsList = response.data
this.initTitleList()
}
this.loading = false
}).catch(() => {
this.loading = false
})
this.loading = true;
getAboutSts()
.then((response) => {
if (response.data && Array.isArray(response.data)) {
this.aboutStsList = response.data;
this.initTitleList();
}
this.loading = false;
})
.catch(() => {
this.loading = false;
});
},
initTitleList() {
this.titleList = this.aboutStsList.filter(item => item.title || item.content)
this.titleList = this.aboutStsList.filter(
(item) => item.title || item.content
);
},
switchContent(index) {
this.activeIndex = index
}
}
}
this.activeIndex = index;
},
},
};
</script>
<style lang="scss" scoped>
......@@ -117,21 +151,21 @@ export default {
}
.sidebar-header {
background: #1EA8C5;
background: #1ea8c5;
height: 58px;
display: flex;
align-items: center;
padding-left: 19px;
.title {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 18px;
color: #FFFFFF;
line-height: 18px;
text-align: left;
font-style: normal;
text-transform: none;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 18px;
color: #ffffff;
line-height: 18px;
text-align: left;
font-style: normal;
text-transform: none;
}
}
......@@ -159,14 +193,14 @@ text-transform: none;
padding: 16px 0;
.menu-item {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 600;
font-size: 18px;
color: #090909;
line-height: 51px;
text-align: left;
font-style: normal;
text-transform: none;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 600;
font-size: 18px;
color: #090909;
// line-height: 51px;
text-align: left;
font-style: normal;
text-transform: none;
padding: 16px 24px;
cursor: pointer;
transition: all 0.3s ease;
......@@ -181,7 +215,7 @@ text-transform: none;
&.active {
background-color: #f0f2f5;
color: #0080A5;
color: #0080a5;
font-weight: 600;
border-left-color: #1e3c72;
}
......@@ -197,155 +231,5 @@ text-transform: none;
overflow: hidden;
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>
portal-ui/src/views/portal/Achievement.vue
View file @ 93adc7cc
......@@ -74,10 +74,10 @@
<!-- 右侧内容区域 -->
<div class="right-content">
<div class="content-card" v-loading="loading">
<div class="content-header">
<div class="content-header" v-if="currentMenu == 'overview'">
<span class="title">{{ currentTitle }}</span>
</div>
<div class="content-body">
<div class="rich-text-rendering">
<!-- 成果总体描述内容 -->
<div v-if="currentMenu === 'overview'" class="overview-content">
<div
......@@ -457,72 +457,6 @@ export default {
overflow: hidden;
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 科学成果样式 */
......@@ -761,121 +695,4 @@ export default {
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>
portal-ui/src/views/portal/Notice.vue
View file @ 93adc7cc
......@@ -43,7 +43,7 @@
<!-- <div class="content-header">
<span class="title">{{ currentTitle }}</span>
</div> -->
<div class="content-body">
<div class="rich-text-rendering">
<!-- 通知公告列表 -->
......@@ -267,72 +267,6 @@ text-transform: none;
overflow: hidden;
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;
}
}
}
/* 响应式设计 */
@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>
</style>
\ No newline at end of file
portal-ui/src/views/portal/Progress.vue
View file @ 93adc7cc
......@@ -43,7 +43,7 @@
<div class="content-header">
<span class="title">{{ currentTitle }}</span>
</div>
<div class="content-body">
<div class="rich-text-rendering">
<!-- 项目实施进展内容 -->
<div v-if="currentMenu === 'project'" class="project-progress">
<div class="rich-text" v-html="implementationProgress.content || '<p>暂无内容</p>'"></div>
......@@ -244,72 +244,6 @@ text-transform: none;
overflow: hidden;
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;
}
}
}
/* 响应式设计 */
@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>
</style>
\ No newline at end of file
portal-ui/src/views/portal/SDGSAT1.vue
View file @ 93adc7cc
......@@ -39,15 +39,15 @@
<div class="content-header">
<span class="title">{{ currentTitle }}</span>
</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 v-if="activeMenu === 'cases'" class="content-card" v-loading="loading">
<div class="content-header">
<!-- <div class="content-header">
<span class="title">{{ currentTitle }}</span>
</div>
<div class="content-body">
</div> -->
<div class="rich-text-rendering">
<div class="case-list">
<div class="case-item" v-for="(item, index) in caseList" :key="index">
<div class="case-left">
......@@ -301,72 +301,6 @@ text-transform: none;
overflow: hidden;
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;
.case-action {
padding-top: 8px;
}
/* 响应式设计 */
@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>
</style>
\ No newline at end of file
portal-ui/src/views/portal/SciencePlan.vue
View file @ 93adc7cc
......@@ -36,7 +36,7 @@
<div class="content-header">
<span class="title">{{ currentTitle }}</span>
</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>
......@@ -184,150 +184,5 @@ export default {
overflow: hidden;
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>
portal-ui/src/views/portal/ValueDetail.vue
View file @ 93adc7cc
<template>
<div class="value-detail">
<div class="value-detail-page">
<!-- 面包屑导航 -->
<div class="breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item><a href="/portal">首页</a></el-breadcrumb-item>
<el-breadcrumb-item>核心价值与作用</el-breadcrumb-item>
<el-breadcrumb-item>详情</el-breadcrumb-item>
</el-breadcrumb>
<div class="breadcrumb-container">
<div class="breadcrumb-wrapper">
<el-breadcrumb separator="/">
<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-button class="back-btn" icon="el-icon-arrow-left" size="small" @click="goBack">返回</el-button>
</div>
</div>
<!-- 白色背景内容区域 -->
<div class="content-container" v-loading="loading">
<!-- 标题 -->
<div class="value-title">
<h1>{{ valueDetail.title }}</h1>
</div>
<div class="page-container">
<div class="detail-card" v-loading="loading">
<!-- 标题 -->
<div class="detail-header">
<h1 class="detail-title">{{ valueDetail.title }}</h1>
</div>
<!-- 摘要 -->
<div class="value-summary" v-if="valueDetail.summary">
<p>{{ valueDetail.summary }}</p>
</div>
<!-- 详情内容 -->
<div class="detail-body">
<!-- 摘要 -->
<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>
</template>
......@@ -46,6 +59,9 @@ export default {
this.getDetail()
},
methods: {
goBack() {
this.$router.back()
},
async getDetail() {
this.loading = true
try {
......@@ -80,129 +96,172 @@ export default {
</script>
<style lang="scss" scoped>
.value-detail {
.value-detail-page {
width: 100%;
min-height: 100vh;
background-color: #f5f7fa;
padding: 40px 0;
min-height: calc(100vh - 200px);
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding-bottom: 20px;
}
/* 面包屑导航 */
.breadcrumb {
max-width: 1390px;
margin: 0 auto 30px;
.breadcrumb-container {
padding: 20px 0;
}
.breadcrumb-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
display: flex;
justify-content: space-between;
align-items: center;
.back-btn {
margin-left: 20px;
}
}
/* 内容容器 */
.content-container {
max-width: 1390px;
.page-container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 60px;
padding: 30px;
}
.detail-card {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
/* 标题样式 */
.value-title {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
.detail-header {
padding: 40px 40px 30px;
border-bottom: 1px solid #f0f0f0;
h1 {
font-size: 28px;
.detail-title {
font-size: 32px;
font-weight: 700;
color: #1e3c72;
line-height: 1.4;
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;
}
}
/* 摘要样式 */
.value-summary {
margin-bottom: 30px;
.summary-box {
padding: 20px;
background: #f5f7fa;
border-left: 4px solid #1e3c72;
border-left: 4px solid #2a5298;
border-radius: 4px;
p {
font-size: 16px;
color: #666;
font-size: 15px;
color: #666666;
line-height: 1.8;
margin: 0;
}
}
/* 内容样式 */
.value-content {
.content-text {
font-size: 15px;
color: #333333;
line-height: 1.8;
color: #333;
font-size: 16px;
:deep(h1),
:deep(h2),
:deep(h3),
:deep(h4),
:deep(h5),
:deep(h6) {
color: #1e3c72;
margin-top: 24px;
margin-bottom: 16px;
}
text-align: justify;
:deep(p) {
margin-bottom: 16px;
line-height: 1.8;
}
::v-deep {
h1,
h2,
h3,
h4,
h5,
h6 {
color: #1e3c72;
margin-top: 24px;
margin-bottom: 16px;
}
:deep(img) {
max-width: 100%;
height: auto;
border-radius: 4px;
margin: 20px 0;
}
p {
margin-bottom: 15px;
:deep(a) {
color: #1e3c72;
text-decoration: none;
&:last-child {
margin-bottom: 0;
}
}
&:hover {
text-decoration: underline;
img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 20px 0;
}
}
:deep(ul),
:deep(ol) {
margin-left: 24px;
margin-bottom: 16px;
}
a {
color: #2a5298;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
ul,
ol {
margin-left: 24px;
margin-bottom: 16px;
}
:deep(li) {
margin-bottom: 8px;
li {
margin-bottom: 8px;
}
}
}
/* 响应式适配 */
@media (max-width: 768px) {
.value-detail {
padding: 20px 0;
.breadcrumb-wrapper {
padding: 0 20px;
}
.breadcrumb {
padding: 0 20px;
margin-bottom: 20px;
.page-container {
padding: 20px;
}
.detail-header {
padding: 30px 20px;
.detail-title {
font-size: 24px;
}
}
.content-container {
.detail-body {
padding: 20px;
margin: 0 20px;
}
.value-title {
h1 {
font-size: 22px;
.content-section {
margin-bottom: 30px;
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