出入校详情页UI

frontend/wechat-web/src/configs/router.config.js

@@ -63,6 +63,7 @@ import ScoreNotification from '../modules/hiPages/scorenotification/ScoreNotific
 import AccessNoticeDetail from '../modules/hiPages/accessnoticedetail/AccessNoticeDetail';
 import ChartDemo from "../modules/chart/ChartDemo";
 import {connect} from "react-redux";
+import AccessNoticeDetail1 from "../modules/hiPages/accessnoticedetail/AccessNoticeDetail1";
 
 class RouteConfig extends Component {
 
@@ -137,7 +138,7 @@ class RouteConfig extends Component {
                         <Route path='/leavedetail/:role/:lvId' component={LeaveDetail}/> {/*学生请假详情*/}
                         <Route path="/changephonenumber" component={ChangePhoneNumber}/> {/*更换手机号码*/}
                         <Route path="/scorenotification/:stuId?" component={ScoreNotification}/> {/*成绩通知*/}
-                        <Route path="/accessnoticedetail/:stuId/:anId?" component={AccessNoticeDetail}/> {/*出入校通知详情*/}
+                        <Route path="/accessnoticedetail/:stuId/:anId?" component={AccessNoticeDetail1}/> {/*出入校通知详情*/}
                         {/*<Route path="/accessnoticedetail" component={AccessNoticeDetail}/> /!*出入校通知详情*!/*/}
                         <Route path='/leaveAddC' component={LeaveAddCPage}/>{/*老师请假*/}
                         <Route path='/leaveAdd' component={LeaveAddPage}/> {/*学生请假*/}

frontend/wechat-web/src/modules/hiPages/accessnoticedetail/AccessNoticeDetail.css

@@ -1,17 +1,90 @@
-.an_student_name{
+.an_student_name {
     font-family: PingFangSC-Regular;
     color: #222222;
-    margin:20px 40px 10px 40px;text-align: left;
+    margin: 20px 40px 10px 40px;
+    text-align: left;
 }
-.an_student_photo{
-    height: 199px;border-radius: 10px;width: 300px;
+
+.an_student_photo {
+    height: 199px;
+    border-radius: 10px;
+    width: 300px;
 }
-.an_student_type{
+
+.an_student_type {
     font-family: PingFangSC-Regular;
     font-size: 15px;
     color: #666666;
-    letter-spacing: 1.25px;text-align: left;margin: 30px;
+    letter-spacing: 1.25px;
+    text-align: left;
+    margin: 30px;
 }
-.an_student_foot_time{
-    background-color: #F7F7F7;text-align: left;padding-left: 25px;
+
+.an_student_foot_time {
+    background-color: #F7F7F7;
+    text-align: left;
+    padding-left: 25px;
+}
+
+.access-notice-top-layout {
+    display: flex;
+    flex-direction: row;
+    padding: 15px;
+    background: white;
+    align-items: center;
+}
+
+.access-notice-icon-in, .access-notice-icon-out {
+    color: white;
+    font-size: 14px;
+    width: 36px;
+    height: 36px;
+    display: inline-block;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 34px;
+    padding-bottom: 2px;
+}
+
+.access-notice-icon-in {
+    background: #43CEAF;
+}
+
+.access-notice-icon-out {
+    background: #589CFE;
+}
+
+.access-notice-name {
+    font-family: MicrosoftYaHei;
+    font-size: 18px;
+    color: #333333;
+    letter-spacing: 2.25px;
+    padding-left: 10px;
+}
+
+.access-notice-time {
+    font-family: MicrosoftYaHei;
+    font-size: 22px;
+    color: #222222;
+    letter-spacing: 2px;
+}
+
+.access-notice-date {
+    font-family: MicrosoftYaHei;
+    font-size: 12px;
+    color: #999999;
+    letter-spacing: 1px;
+    padding-left: 10px;
+}
+
+.access-notice-img-layout {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 15px;
+}
+
+.access-notice-img {
+    max-width: 100%;
+    max-height: 200px;
 }

frontend/wechat-web/src/modules/hiPages/accessnoticedetail/AccessNoticeDetail.js

@@ -28,15 +28,12 @@ class AccessNoticeDetail extends Component {
 
     componentDidMount() {
         let stuId = this.props.match.params.stuId
-        let role = this.props.match.params.role
         let anId = this.props.match.params.anId
 
-        console.log("stuId", stuId)
         if (!isObjEmpty(stuId)) {
             this.getANDetail(stuId, anId)
         }
 
-
         let curDay = new Date().getDay()
         if (curDay == 1) {
             curDay = '星期一'

frontend/wechat-web/src/modules/hiPages/accessnoticedetail/AccessNoticeDetail1.jsx

@@ -0,0 +1,55 @@
+/**
+ * Created by RaoMeng on 2019/3/13
+ * Desc:出入校通知详情
+ */
+
+import React, {Component} from 'react'
+import {connect} from 'react-redux';
+
+class AccessNoticeDetail1 extends Component {
+
+    constructor() {
+        super()
+
+        this.state = {}
+    }
+
+    componentDidMount() {
+        document.title = '出入校通知'
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+        return (
+            <div className='common-flex-column' style={{background: 'white'}}>
+                <div className='access-notice-top-layout'>
+                    <div className='access-notice-icon-in'>进</div>
+                    <span className='access-notice-name'>陈小龙</span>
+                </div>
+
+                <div style={{padding: '6px 15px', background: '#f7f7f7'}}>
+                    <span className='access-notice-time'>12:07:06</span>
+                    <span className='access-notice-date'>2019-1-30</span>
+                    <span className='access-notice-date'>星期天</span>
+                </div>
+
+                <div className='access-notice-img-layout'>
+                    <img className='access-notice-img'
+                         src='http://pic.vjshi.com/2018-08-28/8b163ad1a98e567f26cea40f34d56a27/00001.jpg?x-oss-process=style/watermark'/>
+                </div>
+            </div>
+        )
+    }
+}
+
+
+let mapStateToProps = (state) => ({
+    userInfo: {...state.redUserInfo}
+})
+
+let mapDispatchToProps = (dispatch) => ({})
+
+export default connect(mapStateToProps, mapDispatchToProps)(AccessNoticeDetail1)