no message

src/assets/css/talking.css

@@ -0,0 +1,40 @@
+.question-box {
+    width: 50%;
+    margin: 0 auto;
+    padding: 50px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    /* justify-content: center; */
+}
+.question-option {
+    display: flex;
+    flex-direction: column;
+}
+.question-option span {
+    padding: 15px 30px;
+    background-color: antiquewhite;
+    border-radius: 10px;
+    margin-top: 30px;
+    position: relative;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: bold;
+}
+.question-option span::before {
+    content: "";
+    background-color: blue;
+    width: 4px;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-radius: 10px;
+}
+
+.question-bar {
+    width: 50%;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-around;
+}

src/pages/measurement/Talking.jsx

@@ -1,14 +1,57 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Steps } from 'tdesign-react'
 import MeasurementStep from '../../components/Steps/MeasurementStep'
+import '../../assets/css/talking.css'
 
 const { StepItem } = Steps
 
+const problems = [
+  {
+    ques: '忙碌了一天回到家中，已经很疲惫了，你会',
+    options: ['再累也要收拾整齐了再去睡', '扔下包倒头就睡下']
+  },
+  {
+    ques: '你常会站在对方角度去思考而模糊了自己的立场',
+    options: ['是的', '不是']
+  },
+  {
+    ques: '若我有时间和金钱，我的朋友邀请我到国外或者异地度假，并且在一天前才通知，我会',
+    options: ['必须先检查我的时间表', '立即收拾行装']
+  }
+]
+
 export default function Talking() {
+  const [count, setCount] = useState(0);
+
+  const changeProblems = (type) => {
+    console.log(type);
+    if (type == 'add') {
+      setCount(count + 1)
+    } else {
+      setCount(count - 1)
+    }
+  }
+
   return (
     <>
       <div style={{ padding: '10px 20px' }}>
         <MeasurementStep current={0} />
+        <div className='question-box'>
+        <p>Count: {count}</p>
+          <h3>{problems[count] ? problems[count].ques : ''}?</h3>
+          <div className='question-option'>
+            111
+            {problems[0].options.map((tag, index) => (
+              <span key={index} onClick={changeProblems('add')}>{tag}</span>
+            ))}
+          </div>
+        </div>
+
+        <div className='question-bar'>
+          <span onClick={() => setCount(count - 1)}>上一题</span>
+          <span>1/3</span>
+          <span onClick={() => setCount(count + 1)}>下一题</span>
+        </div>
       </div>
     </>
   )