|
|
@@ -1,136 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-card class="notice-card" shadow="never">
|
|
|
- <div slot="header" class="notice-header">
|
|
|
- <div class="header-left">
|
|
|
- <img src="@/assets/img/speaker.png" alt="icon" class="notice-icon">
|
|
|
- <span class="notice-title">站点公告</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="notice-body">
|
|
|
- <el-skeleton :loading="loading" :rows="5" animated>
|
|
|
- <template>
|
|
|
- <el-scrollbar class="custom-scrollbar" ref="scrollbar">
|
|
|
- <div class="html-container" v-html="content || '暂无公告'" />
|
|
|
- </el-scrollbar>
|
|
|
- </template>
|
|
|
- </el-skeleton>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { getSiteNotice } from '@/api/content'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'SiteNotice',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- content: '',
|
|
|
- loading: true
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.fetchNotice()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async fetchNotice() {
|
|
|
- this.loading = true
|
|
|
- try {
|
|
|
- const resp = await getSiteNotice()
|
|
|
- if (resp.code === 0) {
|
|
|
- this.content = resp.data
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- this.$message.error('获取公告失败')
|
|
|
- } finally {
|
|
|
- this.loading = false
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.notice-card {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- border-radius: 12px;
|
|
|
- border: none;
|
|
|
- overflow: hidden; // 防止内容溢出卡片圆角
|
|
|
-
|
|
|
- ::v-deep .el-card__header {
|
|
|
- padding: 12px 16px;
|
|
|
- flex-shrink: 0; // 头部高度固定,不参与压缩
|
|
|
- border-bottom: 1px solid #f0f2f5;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .el-card__body {
|
|
|
- flex: 1; // 占据剩余所有空间
|
|
|
- display: flex; // 开启 flex 模式
|
|
|
- flex-direction: column;
|
|
|
- overflow: hidden; // 关键:body 不能溢出,才能让里面的 scrollbar 滚动
|
|
|
- padding: 15px !important;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.notice-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .header-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
- .notice-icon { width: 22px; height: 22px; }
|
|
|
- .notice-title { font-size: 16px; font-weight: 600; color: #303133; }
|
|
|
-}
|
|
|
-
|
|
|
-.notice-body {
|
|
|
- flex: 1; // 填满卡片 body
|
|
|
- height: 100%;
|
|
|
- position: relative; // 为 scrollbar 提供参考高度
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .custom-scrollbar {
|
|
|
- height: 100%; // 强制充满容器
|
|
|
-
|
|
|
- ::v-deep .el-scrollbar__wrap {
|
|
|
- overflow-x: hidden; // 彻底禁用横向滚动
|
|
|
- margin-bottom: 0 !important; // 修复 Element UI 可能出现的原生滚动条间隙
|
|
|
- }
|
|
|
-
|
|
|
- // 让内容区平滑滚动
|
|
|
- ::v-deep .el-scrollbar__view {
|
|
|
- padding-right: 10px; // 为右侧滚动条留出一点呼吸感
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.html-container {
|
|
|
- font-size: 14px;
|
|
|
- line-height: 1.8;
|
|
|
- color: #606266;
|
|
|
- word-break: break-all;
|
|
|
-
|
|
|
- ::v-deep img {
|
|
|
- max-width: 100%;
|
|
|
- height: auto;
|
|
|
- border-radius: 4px;
|
|
|
- margin: 8px 0;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep p { margin-bottom: 12px; }
|
|
|
- ::v-deep a { color: #409EFF; text-decoration: none; &:hover { text-underline: underline; } }
|
|
|
-}
|
|
|
-
|
|
|
-/* 响应式:在 PC 端跟随轮播图高度,在移动端固定高度 */
|
|
|
-@media screen and (max-width: 991px) {
|
|
|
- .notice-card {
|
|
|
- height: 250px; // 轮播图下方显示的公告高度
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|