header跑马灯消息提示

src/common/Layout/Header/Header.less

 @import "~themes/vars.less";
 
 @header-hover-bg: rgba(0, 0, 0, 0.075);
+
 .action {
   display: inline-block;
   height: 100%;
   padding: 0 24px;
   cursor: pointer;
   transition: all 0.3s;
-  > i {
+
+  >i {
     color: @text-color;
     vertical-align: middle;
   }
+
   &:hover {
     background: @header-hover-bg;
   }
+
   &:global(.opened) {
     background: @header-hover-bg;
   }
 }
+
 .header {
   padding: 0;
   box-shadow: @shadow-2;
@@ -28,8 +33,9 @@
   z-index: 9;
   align-items: center;
   background-color: #fff;
-  box-shadow:0px 1px 4px 0px rgba(0,21,41,0.12);
+  box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, 0.12);
   border-bottom: 1px solid #F0F0F0;
+
   &.fixed {
     position: fixed;
     top: 0;
@@ -51,7 +57,7 @@
     .ant-menu-horizontal {
       line-height: 72px;
 
-      & > .ant-menu-submenu:hover {
+      &>.ant-menu-submenu:hover {
         color: @primary-color;
         background-color: @hover-color;
       }
@@ -62,24 +68,24 @@
       height: 72px;
     }
 
-    .ant-menu-horizontal > .ant-menu-submenu {
+    .ant-menu-horizontal>.ant-menu-submenu {
       top: 0;
       margin-top: 0;
     }
 
-    .ant-menu-horizontal > .ant-menu-item,
-    .ant-menu-horizontal > .ant-menu-submenu {
+    .ant-menu-horizontal>.ant-menu-item,
+    .ant-menu-horizontal>.ant-menu-submenu {
       border-bottom: none;
     }
 
-    .ant-menu-horizontal > .ant-menu-item-active,
-    .ant-menu-horizontal > .ant-menu-item-open,
-    .ant-menu-horizontal > .ant-menu-item-selected,
-    .ant-menu-horizontal > .ant-menu-item:hover,
-    .ant-menu-horizontal > .ant-menu-submenu-active,
-    .ant-menu-horizontal > .ant-menu-submenu-open,
-    .ant-menu-horizontal > .ant-menu-submenu-selected,
-    .ant-menu-horizontal > .ant-menu-submenu:hover {
+    .ant-menu-horizontal>.ant-menu-item-active,
+    .ant-menu-horizontal>.ant-menu-item-open,
+    .ant-menu-horizontal>.ant-menu-item-selected,
+    .ant-menu-horizontal>.ant-menu-item:hover,
+    .ant-menu-horizontal>.ant-menu-submenu-active,
+    .ant-menu-horizontal>.ant-menu-submenu-open,
+    .ant-menu-horizontal>.ant-menu-submenu-selected,
+    .ant-menu-horizontal>.ant-menu-submenu:hover {
       border-bottom: none;
     }
   }
@@ -135,7 +141,7 @@
     }
   }
 
-  & + .iconButton {
+  &+.iconButton {
     margin-left: 8px;
   }
 
@@ -148,14 +154,17 @@
 .notification {
   padding: 24px 0;
   width: 320px;
+
   .notificationItem {
     transition: all 0.3s;
     padding: 12px 24px;
     cursor: pointer;
+
     &:hover {
       background-color: @hover-color;
     }
   }
+
   .clearButton {
     text-align: center;
     height: 48px;
@@ -164,11 +173,13 @@
     .background-hover();
   }
 }
+
 .selectDiv {
   position: absolute;
   width: 200px;
   margin-left: 150px;
 }
+
 .switchDiv {
   position: absolute;
   width: 100px;
@@ -177,14 +188,17 @@
   align-items: center;
   justify-content: center;
 }
+
 .notificationPopover {
   :global {
     .ant-popover-inner-content {
       padding: 0;
     }
+
     .ant-popover-arrow {
       display: none;
     }
+
     .ant-list-item-content {
       flex: 0;
       margin-left: 16px;
@@ -198,25 +212,31 @@
   }
 }
 
+// ... existing code ...
+
 .assDiv {
   padding: 0 32px;
   display: flex;
   background: #FB8893;
   align-items: center;
+
   .iconDiv {
     display: flex;
     align-items: center;
   }
+
   .assText {
     margin-left: 10px;
     font-weight: 400;
     color: #FFFFFF;
   }
+
   &:hover {
     background: #FBB9BC;
   }
 }
-// 跑马灯样式
+
+// 跑马灯样式 - 优化版
 .marqueeContainer {
   display: flex;
   align-items: center;
@@ -224,9 +244,9 @@
   margin: 0 20px;
   height: 100%;
   overflow: hidden;
- 
   border-radius: 4px;
   padding: 0 12px;
+  border: 1px solid #dee2e6;
 
   .marqueeIcon {
     color: #ff6b6b;
@@ -297,9 +317,7 @@
         max-width: 180px;
         overflow: hidden;
         text-overflow: ellipsis;
-        background: linear-gradient(90deg, #212529 0%, #495057 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
       }
 
       .marqueeCreator {
@@ -310,14 +328,13 @@
         padding: 1px 6px;
         border-radius: 3px;
         border: 1px solid #e9ecef;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
       }
 
       .marqueeTime {
         color: #868e96;
         font-weight: 500;
-        background: linear-gradient(90deg, #868e96 0%, #adb5bd 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
       }
     }
   }
@@ -325,12 +342,16 @@
 
 // 铃铛动画
 @keyframes bellRing {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: rotate(0deg);
   }
+
   25% {
     transform: rotate(-10deg);
   }
+
   75% {
     transform: rotate(10deg);
   }
@@ -338,6 +359,12 @@
 
 // 跑马灯悬停效果
 .marqueeContainer:hover {
+  background: linear-gradient(90deg, #e9ecef 0%, #dee2e6 100%);
+  border-color: #ced4da;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+  transition: all 0.3s ease;
+
   .marqueeIcon {
     color: #ff5252;
     animation-duration: 1s;

src/common/Layout/Header/index.js

@@ -5,14 +5,8 @@ import PropTypes from "prop-types";
 import { Tooltip, Dropdown, Menu, Icon, Layout, Avatar, Carousel } from "antd";
 import classnames from "classnames";
 import styles from "./Header.less";
-import SelectLang from "./SelectLang";
 import { getPromptScrollData } from "./redux/actions";
-{
-  /* bug-11961-cwj暂时注释 2期上 */
-}
 import HeaderDropdown from "./HeaderDropdown";
-// import cookie from "react-cookies";bug-12952-cwj
-import headerLogo from "../../../static/imgs/1logo.png";
 
 class Header extends PureComponent {
   constructor(props) {
@@ -25,32 +19,72 @@ class Header extends PureComponent {
         activityManagement: [],
         submissionManagement: [],
         messageManagement: []
-      }
+      },
+      isLoading: true, // 新增加载状态
+      hasData: false,   // 新增数据状态
+      dataLoaded: false,
+      carouselKey: 0 // 新增：用于强制重新渲染Carousel
     };
   }
 
   componentDidMount() {
+    // 修复：直接调用数据获取，不依赖初始状态检查
     this.fetchScrollData();
   }
 
   fetchScrollData = () => {
     const { getPromptScrollData } = this.props;
+    this.setState({ isLoading: true });
+
     getPromptScrollData({}, (res) => {
       if (res && res.data) {
+        console.log('跑马灯数据加载成功:', res.data);
+        // 检查是否有数据
+        const hasData = Object.values(res.data).some(array => array.length > 0);
+
         this.setState({
-          scrollData: res.data
+          scrollData: res.data,
+          isLoading: false,
+          hasData,
+          dataLoaded: true,
+          carouselKey: this.state.carouselKey + 1 // 更新key强制重新渲染
+        });
+      } else {
+        console.log('跑马灯数据加载失败或为空');
+        this.setState({
+          isLoading: false,
+          hasData: false,
+          dataLoaded: true,
+          carouselKey: this.state.carouselKey + 1 // 更新key强制重新渲染
         });
       }
     });
   };
 
-  handleClickMenu = e => {
-    e.key === "SignOut" && this.props.onSignOut();
-  };
-
-  // 渲染跑马灯内容
+  // 跑马灯内容渲染
   renderMarqueeContent = () => {
-    const { scrollData } = this.state;
+    const { scrollData, isLoading, hasData } = this.state;
+    console.log('当前跑马灯数据状态:', { isLoading, hasData, scrollData });
+
+    // 加载中显示加载状态
+    if (isLoading) {
+      return (
+        <div className={styles.marqueeItem}>
+          <Icon type="loading" style={{ marginRight: 8 }} />
+          加载中...
+        </div>
+      );
+    }
+
+    // 无数据时显示提示
+    if (!hasData) {
+      return (
+        <div className={styles.marqueeItem}>
+          暂无最新消息
+        </div>
+      );
+    }
+
     const allItems = [
       ...scrollData.examList.map(item => ({ ...item, type: '考试' })),
       ...scrollData.voteManagement.map(item => ({ ...item, type: '投票' })),
@@ -60,6 +94,9 @@ class Header extends PureComponent {
       ...scrollData.messageManagement.map(item => ({ ...item, type: '留言' }))
     ];
 
+    console.log('合并后的跑马灯数据项数量:', allItems.length);
+
+    // 确保有数据时才渲染Carousel内容
     if (allItems.length === 0) {
       return (
         <div className={styles.marqueeItem}>
@@ -89,15 +126,15 @@ class Header extends PureComponent {
     const {
       fixed,
       collapsed,
-      onCollapseChange,
       siteDataJson,
       nav,
       onHandleMenuClick,
       onMenuClick,
       menus,
-      onToAss,
     } = this.props;
 
+    const { isLoading, hasData, carouselKey } = this.state;
+
     // 站点选择
     const siteMenu = (
       <Menu onClick={onHandleMenuClick}>
@@ -137,14 +174,20 @@ class Header extends PureComponent {
         })}
         id="layoutHeader"
       >
+        {/* 跑马灯容器 */}
         <div className={styles.marqueeContainer}>
           <Icon type="sound" className={styles.marqueeIcon} />
           <div className={styles.marqueeContent}>
+            {/* 修复：使用key强制重新渲染Carousel，确保autoplay生效 */}
             <Carousel
-              autoplay
+              key={carouselKey} // 关键修复：强制重新渲染
+              autoplay={true} // 直接设置为true，通过key控制重新启动
               vertical
               dots={false}
               className={styles.marqueeCarousel}
+              autoplaySpeed={3000} // 设置自动播放速度
+              pauseOnHover={false} // 鼠标悬停时不暂停
+              easing="linear" // 线性动画
             >
               {this.renderMarqueeContent()}
             </Carousel>
@@ -179,7 +222,10 @@ class Header extends PureComponent {
         </div>
       </Layout.Header>
     );
-  }
+  };
+  handleClickMenu = e => {
+    e.key === "SignOut" && this.props.onSignOut();
+  };
 }
 
 Header.propTypes = {

src/pages/Login/index.jsx

@@ -171,7 +171,6 @@ class Login extends React.Component {
         captchaKey: this.state.captchaKey,
         languageCode: sessionStorage.getItem("lang") || null, //用户选择的语种，否则为null
       };
-      console.log(parms, 1111);
 
       // let data = {
       //   account: String(values.account).trim(),

src/pages/OnLine/Case/CaseManage/editcase.js

@@ -126,7 +126,6 @@ class Lookcase extends Component {
     // 在编辑器获得焦点时按下ctrl+s会执行此方法
     // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
     const htmlContent = this.state.editorState.toHTML();
-    console.log(1111, htmlContent);
     const result = await saveEditorContent(htmlContent);
   };
 
@@ -351,7 +350,6 @@ class Lookcase extends Component {
     if (!param.file) {
       return false;
     }
-    console.log(1111, param);
     this.setState({
       editorState: ContentUtils.insertMedias(this.state.editorState, [
         {

src/pages/OnLine/Case/CaseReport/reportlook.jsx

@@ -61,7 +61,6 @@ class Lookreport extends Component {
     const { info } = this.state;
     const { getFieldDecorator } = this.props.form;
     const { type } = this.props.location.state;
-    console.log(1111, info);
     return (
       <div className={styles.report_look_body}>
         <CaseCommon info={info} move={this.info.bind(this)} />

src/pages/OnLine/CourseBank/CourseManagement/CourseDetail/Plugins/courseBasic/Coursebasic.jsx

@@ -397,8 +397,6 @@ class CourseDetail extends Component {
         offset: 4,
       },
     };
-    console.log(111111, testValue);
-    console.log(222222, this.state.showRender);
     const uploadProps = {
       name: "课程LOGO",
       layout: formItemLayout,

src/pages/OnLine/CourseBank/CourseManagement/CourseDetail/Plugins/coursePublish/coursepublish.jsx

@@ -45,9 +45,7 @@ class CoursePublish extends Component {
       courseId: this.props.courseId,
     };
     this.props.getCourseInfo(this.props.courseId, res => {
-      console.log("哈哈哈哈哈1111");
       const { courseInfo } = this.props;
-      console.log(courseInfo);
       this.setState({
         publishingTerminal: courseInfo.courseVo.publishingTerminal,
       });

src/pages/OnLine/CourseBank/CourseManagement/CourseDetail/Plugins/courseStrategy/CourseStrategy.jsx

@@ -304,7 +304,6 @@ class CourseStrategy extends Component {
               ? []
               : this.state.baseInfo.certificates,
         };
-        console.log(111111, data);
         _this.props.courseStrategy(data, () => {
           message.success("保存成功");
           _this.props.step(3);

src/pages/OnLine/OfflineCourse/OfflineManagement/offlineDetail.jsx

@@ -114,7 +114,6 @@ class CourseDetail extends Component {
           logourl: courseInfo.image,
           // showRender : info,
         });
-        console.log("1111111111111111");
         console.log(baseInfo);
       });
     }

src/pages/SystemManagement/Article/addEditForm.jsx

@@ -50,7 +50,6 @@ class addEdit extends React.Component {
       return;
     }
     const { param } = this.props;
-    console.log(param, 1111111);
     if (param !== null) {
       this.setState({
         uploadParams: {

src/pages/SystemManagement/Article/index.jsx

@@ -333,7 +333,6 @@ class Atricle extends React.Component {
         return;
       }
       if (!values.type[1]) {
-        console.log(values,'111111111111111');
         return message.error("请完整选择所属栏位");
       }
       const jsonEdit = {

src/pages/SystemManagement/Information/index.jsx

@@ -367,12 +367,10 @@ class Information extends React.Component {
   }
 
   onDragEnter = info => {
-    console.log(11111111111);
     console.log(info);
   };
 
   onDrop = info => {
-    console.log(22222222222);
     console.log(info);
   };
 
@@ -680,8 +678,6 @@ class Information extends React.Component {
         return;
       }
       values.fileName = values.fileName.trim();
-      console.log(values);
-      console.log(lists, 1111);
       if (type == "look") {
         this.setState({ visible: false });
       } else if (type == "edit") {

src/pages/SystemManagement/Site/Door/indexPage/mobilePlugin/Live/editCopy.js

@@ -188,7 +188,6 @@ class EditModule extends Component {
 
   render() {
     const { list, current } = this.state;
-    console.log('ccccccccc111111111111111111', list)
     const { moduleName, plateList = [] } = this.props.editVo || {};
     let { trainingData } = this.props.data;
     console.log("this.props.data", this.props.data);