问题页面半成品

src/pages/DoubleRecord.components/Question.module.scss

+@import '../DoubleRecord.module.scss';
+
+.stepQuestionItem{
+  position: relative;
+  margin-bottom: 0.32rem;
+  display: flex;
+  .leftIcon{
+    width: 0.4rem;
+    height: 0.4rem;
+  }
+  .itemText{
+    background-color: #E1DEE6;
+    font-weight: bold;
+    width: 8.2rem;
+    min-height: 0.6rem;
+    padding: 0.1rem;
+    margin-left: 0.1rem;
+    border-radius: 5px;
+    font-size: 16px;
+  }
+  .rightIcon{
+    width: 0.3rem;
+    height: 0.3rem;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.hide{
+  width: 0.4rem;
+  height: 0.4rem;
+  visibility: hidden;
+}
\ No newline at end of file

src/pages/DoubleRecord.components/QuestionItem.jsx

+import React, { useState } from 'react';
+import styles from './Question.module.scss';
+
+import TouchOpacity from 'components/TouchOpacity';
+
+import IconPlay from 'assets/img/play.png';
+import IconPlayDefault from 'assets/img/play_default.png';
+import IconPause from 'assets/img/pause.png';
+import IconCheckBlue from 'assets/img/check-square-blue.png';
+import IconCheckDefaultBlue from 'assets/img/check_default-square-blue.png';
+import IconCheckRed from 'assets/img/check-square-red.png';
+import IconCheckDefaultRed from 'assets/img/check_default-square-red.png';
+
+// question不一定都是问题，也可能是答案，其实分为需要读/不需要读 和 需要操作/不需要操作
+export default function(props) {
+  const { question, setPlayStatus, setChecked, voiceStart, voicePause, voiceContinue } = props;
+  const { questionId, needPlay, needCheck, text, voice, playStatus, checked } = question;
+
+  // 0 未开始-无图标；1 播放中-显示暂停图标；2 暂停中-显示播放图标； 3 已结束-显示灰色播放图标
+  // const [playStatus, setPlayStatus] = useState('0');
+  // const [checked, setChecked] = useState(false);
+
+  const getPlayIcon = () => {
+    if (playStatus === '3') {
+      return IconPlayDefault;
+    } else if (playStatus === '2') {
+      return IconPlay;
+    } else if (playStatus === '1') {
+      return IconPause;
+    }
+    return null;
+  };
+
+  const getCheckIcon = () => {
+    if (needCheck && checked) {
+      return IconCheckRed;
+    } else if (needCheck && !checked) {
+      return IconCheckDefaultRed;
+    } else if (!needCheck && checked) {
+      return IconCheckBlue;
+    } else if (!needCheck && !checked) {
+      return IconCheckDefaultBlue;
+    }
+    return IconCheckBlue;
+  };
+
+  const playOrPause = () => {
+    console.log({ question });
+    if (playStatus === '2') {
+      setPlayStatus(questionId, '1');
+      // voiceStart(voice);
+      voiceContinue();
+    } else if (playStatus === '1') {
+      setPlayStatus(questionId, '2');
+      voicePause();
+    }
+  };
+
+  const clickChecked = () => {
+    if (!needCheck) {
+      return;
+    }
+    setChecked(questionId, !checked);
+  };
+
+  return (
+    <div className={styles.stepQuestionItem}>
+      <TouchOpacity onClick={playOrPause}>
+        <img
+          src={getPlayIcon()}
+          alt="play"
+          className={needPlay && playStatus !== '0' ? styles.leftIcon : styles.hide}
+        ></img>
+      </TouchOpacity>
+      <div className={styles.itemText}>{text}</div>
+      <TouchOpacity onClick={clickChecked}>
+        <img src={getCheckIcon()} alt="check" className={styles.rightIcon}></img>
+      </TouchOpacity>
+    </div>
+  );
+}

src/pages/DoubleRecord.module.scss

-@import '../assets/css/common.scss';
+@import 'assets/css/common.scss';
 
 .page{
   width: 100vw;
@@ -6,27 +6,30 @@
   background-color: #E2E1E6;
   display: flex;
   flex-direction: column;
+  font-size: 0.14rem;
 }
 
 .header{
-  height: 60px;
+  padding-top: 0.2rem;
+  height: 0.7rem;
   background-color: $primaryColor;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: white;
-  font-size: 22px;
+  font-size: 0.24rem;
+  font-weight: 300;
 
   .aiaLogo{
-    width: 120px;
+    width: 1.2rem;
   }
 
   .homeIcon{
-    width: 120px;
-    margin-right: 20px;
+    width: 1.2rem;
+    margin-right: 0.2rem;
     img{
-      width: 20px;
-      height: 20px;
+      width: 0.2rem;
+      height: 0.2rem;
       float: right;
     }
   }
@@ -35,21 +38,70 @@
 
 .main{
   height: 80%;
-  padding: 10px 20px;
+  padding: 0.24rem 0.2rem;
   .stepArea{
     height: 10%;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-left: 5%;
+    padding-right: 5%;
+    .stepIndex{
+      user-select:none;
+      background-color: #ECE9EC;
+      font-size: 0.16rem;
+      color: #999999;
+      padding: 0.1rem 0.2rem;
+      border-top: 3px solid #bcbcbc;
+      border-radius: 3px;
+      img{
+        width:0.24rem;
+        height:0.24rem;
+        margin-right: 0.05rem;
+      }
+    }
+    .stepIndexSelected{
+      @extend .stepIndex;
+      color: $primaryColor;
+      border-top: 3px solid $primaryColor;
+    }
   }
   .questionArea {
     height: 90%;
-    border: 1px solid #333333;
-    border-radius: 5px;
+    border: 1px solid #999999;
+    border-radius: 10px;
+    padding: 0.15rem 0.3rem;
+    background-color: #ECE9EC;
+    .stepTitle{
+      font-size: 0.25rem;
+      font-weight: bold;
+    }
+    .stepQuestions{
+      margin-top: 0.3rem;
+      overflow-x: hidden;
+      overflow-y: scroll;
+      height: 88%;
     }
+  }
+}
+
+.seller{
+  color: #4A45C4;
+}
+
+.buyer{
+  color: $primaryColor;
+}
+
+.extlink{
+  color: #D37841;
 }
 
 
 .btn{
   user-select:none;
-  background: #CE1F57;
+  background: $primaryColor;
   min-width:10vw;
   height:5vh;
   line-height: 3.5vh;
@@ -62,13 +114,14 @@
 }
 
 .footer{
-  height: 50px;
-  padding: 10px 20px;
+  height: 0.5rem;
+  padding: 0.1rem 0.2rem;
   display: flex;
   justify-content: space-between;
   .footerBtn{
+    user-select:none;
     width: 49%;
-    height: 40px;
+    height: 0.4rem;
     background-color: $primaryColor;
     color: white;
     display: flex;