page-repair

XiaoCdeGitHub · Aug 9, 2023 · c6912b5 · c6912b5
1 parent ab60921
commit c6912b5
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 47 deletions.
diff --git a/src/pages/Interview/Component/ItvStuForm/StuComment.jsx b/src/pages/Interview/Component/ItvStuForm/StuComment.jsx
@@ -2,25 +2,36 @@
  * @Author: DoubleLiHao [email protected]
  * @Date: 2023-08-06 18:34:41
  * @LastEditors: DoubleLiHao [email protected]
- * @LastEditTime: 2023-08-06 19:09:21
+ * @LastEditTime: 2023-08-09 20:07:49
  * @FilePath: \yzyy-web\src\pages\Interview\Component\ItvStuForm\StuComment.jsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
+import { useNavigate } from "react-router-dom";
 import styles from "./StuComment.module.css";
 import { Rate } from "antd";
 export const StuComment = () => {
+  const navigate = useNavigate()
+  const clickHandler = () => {
+    navigate('/interview')
+  }
   return (
     <>
       <div className={styles.bigBox}>
         <div className={styles.formBox}>
           <div className={styles.itvName}>
             <input type="text" placeholder="面试官1/面试官2" />
           </div>
-          <div className={styles.record}></div>
-          <div className={styles.comment}></div>
-          <div className={styles.score}></div>
+          <div className={styles.record}>
+            <textarea />
+          </div>
+          <div className={styles.comment}>
+            <textarea />
+          </div>
+          <div className={styles.score}>
+            <Rate></Rate>
+          </div>
         </div>
-        <div className={styles.button}>
+        <div className={styles.button} onClick={clickHandler}>
           <p>提交</p>
         </div>
       </div>

diff --git a/src/pages/Interview/Component/ItvStuForm/StuComment.module.css b/src/pages/Interview/Component/ItvStuForm/StuComment.module.css
@@ -8,6 +8,8 @@
     width: 100%;
     height: 100%;
     padding: 10% 10%;
+    border: 1px solid gray;
+    box-shadow: 0 0 .3rem .1rem gray inset;
     background-color: azure;
 }
 
@@ -28,20 +30,40 @@
 
 .record{
     width: 100%;
-    height: 50%;
-    background-color: black;
+    height: 60%;
+    padding-top: 1rem;
+}
+
+.record textarea{
+    resize: none;
+    padding: 1rem;
+    font-size: 1rem;
+    width: 100%;
+    height: 100%;
 }
 
 .comment{
     width: 100%;
-    height: 25%;
-    background-color: red;
+    height: 15%;
+    padding-top: 1rem;
+}
+
+.comment textarea{
+    width: 100%;
+    height: 100%;
+    resize: none;
+    padding: 1rem;
+    font-size: 1rem;
 }
 
 .score{
     width: 100%;
     height: 10%;
-    background-color: aqua;
+    padding-top: 1.5rem;
+}
+
+.score ul{
+    width: 100%;
 }
 
 .button{

diff --git a/src/pages/Interview/Component/ItvStuForm/StuInfoDetail.jsx b/src/pages/Interview/Component/ItvStuForm/StuInfoDetail.jsx
@@ -2,38 +2,71 @@
  * @Author: DoubleLiHao [email protected]
  * @Date: 2023-08-05 20:49:25
  * @LastEditors: DoubleLiHao [email protected]
- * @LastEditTime: 2023-08-06 19:12:28
+ * @LastEditTime: 2023-08-09 20:55:37
  * @FilePath: \yzyy-web\src\pages\Interview\Component\ItvStuForm\StuInfoDetail.jsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import { useNavigate } from "react-router-dom";
 import styles from "./StuInfoDetail.module.css";
+import { useDispatch, useSelector } from "react-redux";
+import { Backdrop } from "../../../../UI/Backdrop/Backdrop";
+import {
+  showImgBackdrop,
+  hiddenImgBackdrop,
+} from "../../../../store/interviewSlice";
+
 export const StuInfoDetail = () => {
+  const { isEnterImgBackdrop } = useSelector((state) => state.interviewSlice);
+  console.log(isEnterImgBackdrop);
   const navigate = useNavigate();
+  const dispatch = useDispatch();
   const clickHandler = () => {
     navigate("/interview");
   };
+  const showImg = () => {
+    dispatch(showImgBackdrop());
+  };
+  const hiddenImg = () => {
+    dispatch(hiddenImgBackdrop());
+  };
   return (
-    <div className={styles.box}>
-      <div className={styles.top}>
-        <div className={styles.img}>
-          <img />
+    <>
+      <div className={styles.box}>
+        <div className={styles.top}>
+          <div className={styles.img} onClick={showImg}>
+            <img />
+          </div>
+          <div className={styles.baseInfo}>
+            <div>
+              <p>姓名：{isEnterImgBackdrop}</p>
+            </div>
+            <div>
+              <p>性别：abc</p>
+            </div>
+            <div>
+              <p>学号：abc</p>
+            </div>
+          </div>
         </div>
-        <div className={styles.baseInfo}>
-          <div>姓名：abc</div>
-          <div>性别：male</div>
-          <div>学号：20226</div>
+        <div className={styles.otherInfo}>
+          <div>是否参加过宣讲会：2</div>
+          <div>专业：软件工程</div>
+          <div>手机号：110</div>
+          <div>邮箱号：[email protected]</div>
+        </div>
+        <div className={styles.back} onClick={clickHandler}>
+          <p>返回</p>
         </div>
       </div>
-      <div className={styles.otherInfo}>
-        <div>是否参加过宣讲会：2</div>
-        <div>专业：软件工程</div>
-        <div>手机号：110</div>
-        <div>邮箱号：[email protected]</div>
-      </div>
-      <div className={styles.back} onClick={clickHandler}>
-        <p>返回</p>
-      </div>
-    </div>
+      {isEnterImgBackdrop && (
+        <Backdrop>
+          <div onClick={hiddenImg}>
+            <p className={styles.imgBack}>返回</p>
+          </div>
+
+          <img className={styles.backdropImg} />
+        </Backdrop>
+      )}
+    </>
   );
 };
diff --git a/src/pages/Interview/Component/ItvStuForm/StuInfoDetail.module.css b/src/pages/Interview/Component/ItvStuForm/StuInfoDetail.module.css
@@ -9,12 +9,13 @@
     width: 100%;
     height: 30%;
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
     align-items: center;
     background-color: rgba(54, 254, 220, 0.6)
 }
 
 .img{
+    margin-right: 4rem;
     width: 30%;
     height: 80%;
     background-color: beige;
@@ -34,9 +35,9 @@
 .baseInfo div{
     width: 100%;
     height: 30%;
-    /* background-color: azure; */
-    line-height: 400%;
-    font-size: 1.5rem;
+    display:flex;
+    font-size: 1.3rem;
+    align-items: center;
 }
 
 .otherInfo{
@@ -67,4 +68,10 @@
 
 .back:hover{
     color: white;
+}
+
+.imgBack{
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
 }
diff --git a/src/store/interviewSlice.jsx b/src/store/interviewSlice.jsx
@@ -9,19 +9,26 @@ import { createSlice } from "@reduxjs/toolkit";
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 export const interviewSlice = createSlice({
-    name: 'interviewSlice',
-    initialState: {
-        isEnterBackdrop: false,
+  name: "interviewSlice",
+  initialState: {
+    isEnterBackdrop: false,
+    isEnterImgBackdrop: false,
+  },
+  reducers: {
+    showBackdrop(state, action) {
+      state.isEnterBackdrop = true;
     },
-    reducers: {
-        showBackdrop(state,action) {
-            state.isEnterBackdrop = true
-        },
-        hiddenBackdrop(state, action) {
-            state.isEnterBackdrop = false
-        }
-    }
-})
-
-export const {showBackdrop, hiddenBackdrop} = interviewSlice.actions
+    hiddenBackdrop(state, action) {
+      state.isEnterBackdrop = false;
+    },
+    showImgBackdrop(state, action) {
+      state.isEnterImgBackdrop = true;
+    },
+    hiddenImgBackdrop(state, action) {
+      state.isEnterImgBackdrop = false;
+    },
+  },
+});
 
+export const { showBackdrop, hiddenBackdrop, showImgBackdrop, hiddenImgBackdrop } =
+  interviewSlice.actions;