Skip to content

S
sass-admin
Commit 57206161 by chengming
Options

header跑马灯消息提示

parent 82defef6
Showing with 115 additions and 59 deletions
dist.zip deleted 100644 → 0
File deleted
src/common/Layout/Header/Header.less
@import "~themes/vars.less"; @import "~themes/vars.less";
@header-hover-bg: rgba(0, 0, 0, 0.075); @header-hover-bg: rgba(0, 0, 0, 0.075);
.action { .action {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
padding: 0 24px; padding: 0 24px;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
> i {
>i {
color: @text-color; color: @text-color;
vertical-align: middle; vertical-align: middle;
} }
&:hover { &:hover {
background: @header-hover-bg; background: @header-hover-bg;
} }
&:global(.opened) { &:global(.opened) {
background: @header-hover-bg; background: @header-hover-bg;
} }
} }
.header { .header {
padding: 0; padding: 0;
box-shadow: @shadow-2; box-shadow: @shadow-2;
...@@ -28,8 +33,9 @@ ...@@ -28,8 +33,9 @@
z-index: 9; z-index: 9;
align-items: center; align-items: center;
background-color: #fff; 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; border-bottom: 1px solid #F0F0F0;
&.fixed { &.fixed {
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -51,7 +57,7 @@ ...@@ -51,7 +57,7 @@
.ant-menu-horizontal { .ant-menu-horizontal {
line-height: 72px; line-height: 72px;
& > .ant-menu-submenu:hover { &>.ant-menu-submenu:hover {
color: @primary-color; color: @primary-color;
background-color: @hover-color; background-color: @hover-color;
} }
...@@ -62,24 +68,24 @@ ...@@ -62,24 +68,24 @@
height: 72px; height: 72px;
} }
.ant-menu-horizontal > .ant-menu-submenu { .ant-menu-horizontal>.ant-menu-submenu {
top: 0; top: 0;
margin-top: 0; margin-top: 0;
} }
.ant-menu-horizontal > .ant-menu-item, .ant-menu-horizontal>.ant-menu-item,
.ant-menu-horizontal > .ant-menu-submenu { .ant-menu-horizontal>.ant-menu-submenu {
border-bottom: none; border-bottom: none;
} }
.ant-menu-horizontal > .ant-menu-item-active, .ant-menu-horizontal>.ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-item-open, .ant-menu-horizontal>.ant-menu-item-open,
.ant-menu-horizontal > .ant-menu-item-selected, .ant-menu-horizontal>.ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-item:hover, .ant-menu-horizontal>.ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu-active, .ant-menu-horizontal>.ant-menu-submenu-active,
.ant-menu-horizontal > .ant-menu-submenu-open, .ant-menu-horizontal>.ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-submenu-selected, .ant-menu-horizontal>.ant-menu-submenu-selected,
.ant-menu-horizontal > .ant-menu-submenu:hover { .ant-menu-horizontal>.ant-menu-submenu:hover {
border-bottom: none; border-bottom: none;
} }
} }
...@@ -135,7 +141,7 @@ ...@@ -135,7 +141,7 @@
} }
} }
& + .iconButton { &+.iconButton {
margin-left: 8px; margin-left: 8px;
} }
...@@ -148,14 +154,17 @@ ...@@ -148,14 +154,17 @@
.notification { .notification {
padding: 24px 0; padding: 24px 0;
width: 320px; width: 320px;
.notificationItem { .notificationItem {
transition: all 0.3s; transition: all 0.3s;
padding: 12px 24px; padding: 12px 24px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: @hover-color; background-color: @hover-color;
} }
} }
.clearButton { .clearButton {
text-align: center; text-align: center;
height: 48px; height: 48px;
...@@ -164,11 +173,13 @@ ...@@ -164,11 +173,13 @@
.background-hover(); .background-hover();
} }
} }
.selectDiv { .selectDiv {
position: absolute; position: absolute;
width: 200px; width: 200px;
margin-left: 150px; margin-left: 150px;
} }
.switchDiv { .switchDiv {
position: absolute; position: absolute;
width: 100px; width: 100px;
...@@ -177,14 +188,17 @@ ...@@ -177,14 +188,17 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.notificationPopover { .notificationPopover {
:global { :global {
.ant-popover-inner-content { .ant-popover-inner-content {
padding: 0; padding: 0;
} }
.ant-popover-arrow { .ant-popover-arrow {
display: none; display: none;
} }
.ant-list-item-content { .ant-list-item-content {
flex: 0; flex: 0;
margin-left: 16px; margin-left: 16px;
...@@ -198,25 +212,31 @@ ...@@ -198,25 +212,31 @@
} }
} }
// ... existing code ...
.assDiv { .assDiv {
padding: 0 32px; padding: 0 32px;
display: flex; display: flex;
background: #FB8893; background: #FB8893;
align-items: center; align-items: center;
.iconDiv { .iconDiv {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.assText { .assText {
margin-left: 10px; margin-left: 10px;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
} }
&:hover { &:hover {
background: #FBB9BC; background: #FBB9BC;
} }
} }
// 跑马灯样式
// 跑马灯样式 - 优化版
.marqueeContainer { .marqueeContainer {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -224,9 +244,9 @@ ...@@ -224,9 +244,9 @@
margin: 0 20px; margin: 0 20px;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
padding: 0 12px; padding: 0 12px;
border: 1px solid #dee2e6;
.marqueeIcon { .marqueeIcon {
color: #ff6b6b; color: #ff6b6b;
...@@ -297,9 +317,7 @@ ...@@ -297,9 +317,7 @@
max-width: 180px; max-width: 180px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
background: linear-gradient(90deg, #212529 0%, #495057 100%); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.marqueeCreator { .marqueeCreator {
...@@ -310,14 +328,13 @@ ...@@ -310,14 +328,13 @@
padding: 1px 6px; padding: 1px 6px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #e9ecef; border: 1px solid #e9ecef;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
} }
.marqueeTime { .marqueeTime {
color: #868e96; color: #868e96;
font-weight: 500; font-weight: 500;
background: linear-gradient(90deg, #868e96 0%, #adb5bd 100%); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
} }
} }
...@@ -325,12 +342,16 @@ ...@@ -325,12 +342,16 @@
// 铃铛动画 // 铃铛动画
@keyframes bellRing { @keyframes bellRing {
0%, 100% {
0%,
100% {
transform: rotate(0deg); transform: rotate(0deg);
} }
25% { 25% {
transform: rotate(-10deg); transform: rotate(-10deg);
} }
75% { 75% {
transform: rotate(10deg); transform: rotate(10deg);
} }
...@@ -338,6 +359,12 @@ ...@@ -338,6 +359,12 @@
// 跑马灯悬停效果 // 跑马灯悬停效果
.marqueeContainer:hover { .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 { .marqueeIcon {
color: #ff5252; color: #ff5252;
animation-duration: 1s; animation-duration: 1s;
......
src/common/Layout/Header/index.js
...@@ -5,14 +5,8 @@ import PropTypes from "prop-types"; ...@@ -5,14 +5,8 @@ import PropTypes from "prop-types";
import { Tooltip, Dropdown, Menu, Icon, Layout, Avatar, Carousel } from "antd"; import { Tooltip, Dropdown, Menu, Icon, Layout, Avatar, Carousel } from "antd";
import classnames from "classnames"; import classnames from "classnames";
import styles from "./Header.less"; import styles from "./Header.less";
import SelectLang from "./SelectLang";
import { getPromptScrollData } from "./redux/actions"; import { getPromptScrollData } from "./redux/actions";
{
/* bug-11961-cwj暂时注释 2期上 */
}
import HeaderDropdown from "./HeaderDropdown"; import HeaderDropdown from "./HeaderDropdown";
// import cookie from "react-cookies";bug-12952-cwj
import headerLogo from "../../../static/imgs/1logo.png";
class Header extends PureComponent { class Header extends PureComponent {
constructor(props) { constructor(props) {
...@@ -25,32 +19,72 @@ class Header extends PureComponent { ...@@ -25,32 +19,72 @@ class Header extends PureComponent {
activityManagement: [], activityManagement: [],
submissionManagement: [], submissionManagement: [],
messageManagement: [] messageManagement: []
} },
isLoading: true, // 新增加载状态
hasData: false, // 新增数据状态
dataLoaded: false,
carouselKey: 0 // 新增：用于强制重新渲染Carousel
}; };
} }
componentDidMount() { componentDidMount() {
// 修复：直接调用数据获取，不依赖初始状态检查
this.fetchScrollData(); this.fetchScrollData();
} }
fetchScrollData = () => { fetchScrollData = () => {
const { getPromptScrollData } = this.props; const { getPromptScrollData } = this.props;
this.setState({ isLoading: true });
getPromptScrollData({}, (res) => { getPromptScrollData({}, (res) => {
if (res && res.data) { if (res && res.data) {
console.log('跑马灯数据加载成功:', res.data);
// 检查是否有数据
const hasData = Object.values(res.data).some(array => array.length > 0);
this.setState({ 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 = () => { 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 = [ const allItems = [
...scrollData.examList.map(item => ({ ...item, type: '考试' })), ...scrollData.examList.map(item => ({ ...item, type: '考试' })),
...scrollData.voteManagement.map(item => ({ ...item, type: '投票' })), ...scrollData.voteManagement.map(item => ({ ...item, type: '投票' })),
...@@ -60,6 +94,9 @@ class Header extends PureComponent { ...@@ -60,6 +94,9 @@ class Header extends PureComponent {
...scrollData.messageManagement.map(item => ({ ...item, type: '留言' })) ...scrollData.messageManagement.map(item => ({ ...item, type: '留言' }))
]; ];
console.log('合并后的跑马灯数据项数量:', allItems.length);
// 确保有数据时才渲染Carousel内容
if (allItems.length === 0) { if (allItems.length === 0) {
return ( return (
<div className={styles.marqueeItem}> <div className={styles.marqueeItem}>
...@@ -89,15 +126,15 @@ class Header extends PureComponent { ...@@ -89,15 +126,15 @@ class Header extends PureComponent {
const { const {
fixed, fixed,
collapsed, collapsed,
onCollapseChange,
siteDataJson, siteDataJson,
nav, nav,
onHandleMenuClick, onHandleMenuClick,
onMenuClick, onMenuClick,
menus, menus,
onToAss,
} = this.props; } = this.props;
const { isLoading, hasData, carouselKey } = this.state;
// 站点选择 // 站点选择
const siteMenu = ( const siteMenu = (
<Menu onClick={onHandleMenuClick}> <Menu onClick={onHandleMenuClick}>
...@@ -137,14 +174,20 @@ class Header extends PureComponent { ...@@ -137,14 +174,20 @@ class Header extends PureComponent {
})} })}
id="layoutHeader" id="layoutHeader"
> >
{/* 跑马灯容器 */}
<div className={styles.marqueeContainer}> <div className={styles.marqueeContainer}>
<Icon type="sound" className={styles.marqueeIcon} /> <Icon type="sound" className={styles.marqueeIcon} />
<div className={styles.marqueeContent}> <div className={styles.marqueeContent}>
{/* 修复：使用key强制重新渲染Carousel，确保autoplay生效 */}
<Carousel <Carousel
autoplay key={carouselKey} // 关键修复：强制重新渲染
autoplay={true} // 直接设置为true，通过key控制重新启动
vertical vertical
dots={false} dots={false}
className={styles.marqueeCarousel} className={styles.marqueeCarousel}
autoplaySpeed={3000} // 设置自动播放速度
pauseOnHover={false} // 鼠标悬停时不暂停
easing="linear" // 线性动画
> >
{this.renderMarqueeContent()} {this.renderMarqueeContent()}
</Carousel> </Carousel>
...@@ -179,7 +222,10 @@ class Header extends PureComponent { ...@@ -179,7 +222,10 @@ class Header extends PureComponent {
</div> </div>
</Layout.Header> </Layout.Header>
); );
} };
handleClickMenu = e => {
e.key === "SignOut" && this.props.onSignOut();
};
} }
Header.propTypes = { Header.propTypes = {
......
src/pages/Login/index.jsx
...@@ -171,7 +171,6 @@ class Login extends React.Component { ...@@ -171,7 +171,6 @@ class Login extends React.Component {
captchaKey: this.state.captchaKey, captchaKey: this.state.captchaKey,
languageCode: sessionStorage.getItem("lang") || null, //用户选择的语种，否则为null languageCode: sessionStorage.getItem("lang") || null, //用户选择的语种，否则为null
}; };
console.log(parms, 1111);
// let data = { // let data = {
// account: String(values.account).trim(), // account: String(values.account).trim(),
......
src/pages/OnLine/Case/CaseManage/editcase.js
...@@ -126,7 +126,6 @@ class Lookcase extends Component { ...@@ -126,7 +126,6 @@ class Lookcase extends Component {
// 在编辑器获得焦点时按下ctrl+s会执行此方法 // 在编辑器获得焦点时按下ctrl+s会执行此方法
// 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容 // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
const htmlContent = this.state.editorState.toHTML(); const htmlContent = this.state.editorState.toHTML();
console.log(1111, htmlContent);
const result = await saveEditorContent(htmlContent); const result = await saveEditorContent(htmlContent);
}; };
...@@ -351,7 +350,6 @@ class Lookcase extends Component { ...@@ -351,7 +350,6 @@ class Lookcase extends Component {
if (!param.file) { if (!param.file) {
return false; return false;
} }
console.log(1111, param);
this.setState({ this.setState({
editorState: ContentUtils.insertMedias(this.state.editorState, [ editorState: ContentUtils.insertMedias(this.state.editorState, [
{ {
......
src/pages/OnLine/Case/CaseReport/reportlook.jsx
...@@ -61,7 +61,6 @@ class Lookreport extends Component { ...@@ -61,7 +61,6 @@ class Lookreport extends Component {
const { info } = this.state; const { info } = this.state;
const { getFieldDecorator } = this.props.form; const { getFieldDecorator } = this.props.form;
const { type } = this.props.location.state; const { type } = this.props.location.state;
console.log(1111, info);
return ( return (
<div className={styles.report_look_body}> <div className={styles.report_look_body}>
<CaseCommon info={info} move={this.info.bind(this)} /> <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 { ...@@ -397,8 +397,6 @@ class CourseDetail extends Component {
offset: 4, offset: 4,
}, },
}; };
console.log(111111, testValue);
console.log(222222, this.state.showRender);
const uploadProps = { const uploadProps = {
name: "课程LOGO", name: "课程LOGO",
layout: formItemLayout, layout: formItemLayout,
......
src/pages/OnLine/CourseBank/CourseManagement/CourseDetail/Plugins/coursePublish/coursepublish.jsx
...@@ -45,9 +45,7 @@ class CoursePublish extends Component { ...@@ -45,9 +45,7 @@ class CoursePublish extends Component {
courseId: this.props.courseId, courseId: this.props.courseId,
}; };
this.props.getCourseInfo(this.props.courseId, res => { this.props.getCourseInfo(this.props.courseId, res => {
console.log("哈哈哈哈哈1111");
const { courseInfo } = this.props; const { courseInfo } = this.props;
console.log(courseInfo);
this.setState({ this.setState({
publishingTerminal: courseInfo.courseVo.publishingTerminal, publishingTerminal: courseInfo.courseVo.publishingTerminal,
}); });
......
src/pages/OnLine/CourseBank/CourseManagement/CourseDetail/Plugins/courseStrategy/CourseStrategy.jsx
...@@ -304,7 +304,6 @@ class CourseStrategy extends Component { ...@@ -304,7 +304,6 @@ class CourseStrategy extends Component {
? [] ? []
: this.state.baseInfo.certificates, : this.state.baseInfo.certificates,
}; };
console.log(111111, data);
_this.props.courseStrategy(data, () => { _this.props.courseStrategy(data, () => {
message.success("保存成功"); message.success("保存成功");
_this.props.step(3); _this.props.step(3);
......
src/pages/OnLine/OfflineCourse/OfflineManagement/offlineDetail.jsx
...@@ -114,7 +114,6 @@ class CourseDetail extends Component { ...@@ -114,7 +114,6 @@ class CourseDetail extends Component {
logourl: courseInfo.image, logourl: courseInfo.image,
// showRender : info, // showRender : info,
}); });
console.log("1111111111111111");
console.log(baseInfo); console.log(baseInfo);
}); });
} }
......
src/pages/SystemManagement/Article/addEditForm.jsx
...@@ -50,7 +50,6 @@ class addEdit extends React.Component { ...@@ -50,7 +50,6 @@ class addEdit extends React.Component {
return; return;
} }
const { param } = this.props; const { param } = this.props;
console.log(param, 1111111);
if (param !== null) { if (param !== null) {
this.setState({ this.setState({
uploadParams: { uploadParams: {
......
src/pages/SystemManagement/Article/index.jsx
...@@ -333,7 +333,6 @@ class Atricle extends React.Component { ...@@ -333,7 +333,6 @@ class Atricle extends React.Component {
return; return;
} }
if (!values.type[1]) { if (!values.type[1]) {
console.log(values,'111111111111111');
return message.error("请完整选择所属栏位"); return message.error("请完整选择所属栏位");
} }
const jsonEdit = { const jsonEdit = {
......
src/pages/SystemManagement/Information/index.jsx
...@@ -367,12 +367,10 @@ class Information extends React.Component { ...@@ -367,12 +367,10 @@ class Information extends React.Component {
} }
onDragEnter = info => { onDragEnter = info => {
console.log(11111111111);
console.log(info); console.log(info);
}; };
onDrop = info => { onDrop = info => {
console.log(22222222222);
console.log(info); console.log(info);
}; };
...@@ -680,8 +678,6 @@ class Information extends React.Component { ...@@ -680,8 +678,6 @@ class Information extends React.Component {
return; return;
} }
values.fileName = values.fileName.trim(); values.fileName = values.fileName.trim();
console.log(values);
console.log(lists, 1111);
if (type == "look") { if (type == "look") {
this.setState({ visible: false }); this.setState({ visible: false });
} else if (type == "edit") { } else if (type == "edit") {
......
src/pages/SystemManagement/Site/Door/indexPage/mobilePlugin/Live/editCopy.js
...@@ -188,7 +188,6 @@ class EditModule extends Component { ...@@ -188,7 +188,6 @@ class EditModule extends Component {
render() { render() {
const { list, current } = this.state; const { list, current } = this.state;
console.log('ccccccccc111111111111111111', list)
const { moduleName, plateList = [] } = this.props.editVo || {}; const { moduleName, plateList = [] } = this.props.editVo || {};
let { trainingData } = this.props.data; let { trainingData } = this.props.data;
console.log("this.props.data", this.props.data); console.log("this.props.data", this.props.data);
......
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