答题样式

src/components/button/MyButton.tsx

@@ -6,6 +6,7 @@ import {ButtonProps} from "@tarojs/components/types/Button";
 interface Props extends ButtonProps {
   fillet?: boolean
   loading?: boolean
+  width?: number
 }
 
 const MyButton: FC<Props> = (props) => {
@@ -24,6 +25,9 @@ const MyButton: FC<Props> = (props) => {
     if (props.fillet) {
       style.borderRadius = '100px'
     }
+    if (props.width) {
+      style.width = props.width + "px"
+    }
 
     return style
   }

src/components/button/myButton.module.scss

@@ -7,4 +7,7 @@
   border: none !important;
   outline: none !important;
   position: sticky;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }

src/components/custom-page-container/custom-page-container.module.scss

@@ -1,5 +1,6 @@
 .customPageContainer {
   position: fixed;
+  z-index: 99999;
   top: 0;
   right: 0;
   left: 0;
@@ -24,4 +25,5 @@
   position: absolute;
   padding: 0 30px env(safe-area-inset-bottom);
   box-sizing: border-box;
+  overflow: hidden;
 }

src/components/topic/judge.tsx

@@ -1,6 +1,7 @@
 import {FC, useEffect, useState} from "react";
-import {Button, Radio, RadioGroup, Text, View} from "@tarojs/components";
+import { Radio, RadioGroup, Text, View} from "@tarojs/components";
 import './topic.scss'
+import MyButton from "@/components/button/MyButton";
 
 interface Props {
   data: ShareSubject
@@ -35,17 +36,7 @@ const Judge: FC<Props> = ({data, onAnswer, onUpAndDown, index, validate, frequen
     <View className='topic'>
 
       <View className='mb-3'>
-        <Text style={{
-          display: 'inline-block',
-          verticalAlign: 'middle',
-          fontSize: '20rpx',
-          height: '34rpx',
-          background: '#45D4A8',
-          borderRadius: '8rpx',
-          color: '#fff',
-          padding: '0 2px',
-          marginRight: '8px'
-        }}>判断题</Text>
+        <Text className='topicType'>判断题</Text>
         <Text>{data.question}</Text>
       </View>
 
@@ -68,8 +59,8 @@ const Judge: FC<Props> = ({data, onAnswer, onUpAndDown, index, validate, frequen
       </RadioGroup>
 
       {onUpAndDown && <View className='upAndDown'>
-        {index > 0 && <Button className='button' onClick={() => onUpAndDown(index - 1)}>上一题</Button>}
-        {!end && <Button className='button' onClick={() => onUpAndDown(index + 1)}>下一题</Button>}
+        {index > 0 && <MyButton size='mini' width={150} onClick={() => onUpAndDown(index - 1)}>上一题</MyButton>}
+        {!end && <MyButton size='mini' width={150} onClick={() => onUpAndDown(index + 1)}>下一题</MyButton>}
       </View>}
 
 

src/components/topic/multi.tsx

@@ -1,6 +1,7 @@
 import {FC, useEffect, useState} from "react";
-import {Button, Checkbox, CheckboxGroup, Radio, RadioGroup, Text, View} from "@tarojs/components";
+import {Checkbox, CheckboxGroup, Radio, RadioGroup, Text, View} from "@tarojs/components";
 import './topic.scss'
+import MyButton from "@/components/button/MyButton";
 
 interface Props {
   data: Multi
@@ -45,46 +46,38 @@ const Multi: FC<Props> = ({data, onAnswer, onUpAndDown, index, validate, frequen
   return (
     <View className='topic'>
       <View className='mb-3'>
-        <Text style={{
-          display: 'inline-block',
-          verticalAlign: 'middle',
-          fontSize: '20rpx',
-          height: '34rpx',
-          background: '#45D4A8',
-          borderRadius: '8rpx',
-          color: '#fff',
-          padding: '0 2px',
-          marginRight: '8px'
-        }}>{data.type ? "多选题" : '单选题'}</Text>
+        <Text className={'topicType'}>{data.type ? "多选题" : '单选题'}</Text>
         <Text>{data.question}</Text>
       </View>
 
       <View>
         {data.type ? <CheckboxGroup onChange={onChange}>
             {answers.map(d => <Checkbox
+              key={d.value}
               value={d.value}
               className='option'
               disabled={validate}
             >
-              {d.title}
+              <Text className='title'>{d.value}：{d.title}</Text>
             </Checkbox>)}
           </CheckboxGroup>
           : <RadioGroup onChange={onChange}>
             {answers.map(d => <Radio
+              key={d.value}
               value={d.value}
               className='option'
               color={validate ? rightKey.includes(d.value) ? '#45d4a8' : 'red' : '#45d4a8'}
               disabled={validate ? !rightAnswer.includes(d.value) : false}
             >
-              {d.title}
+              <Text className='title'>{d.value}：{d.title}</Text>
             </Radio>)}
           </RadioGroup>
         }
       </View>
 
       {onUpAndDown && <View className='upAndDown'>
-        {index > 0 && <Button className='button' onClick={() => onUpAndDown?.(index - 1)}>上一题</Button>}
-        {!end && <Button onClick={() => onUpAndDown?.(index + 1)} className='button'>下一题{end}</Button>}
+        {index > 0 && <MyButton size='mini' width={150} onClick={() => onUpAndDown?.(index - 1)}>上一题</MyButton>}
+        {!end && <MyButton size='mini' width={150} onClick={() => onUpAndDown?.(index + 1)}>下一题</MyButton>}
       </View>}
 
 

src/components/topic/shortAnswer.tsx

@@ -35,26 +35,18 @@ const ShortAnswer: FC<Props> = ({data, onAnswer, onUpAndDown, index, validate, f
   return (
     <View className='topic'>
       <View className='mb-3'>
-        <Text style={{
-          display: 'inline-block',
-          verticalAlign: 'middle',
-          fontSize: '20rpx',
-          height: '34rpx',
-          background: '#45D4A8',
-          borderRadius: '8rpx',
-          color: '#fff',
-          padding: '0 2px',
-          marginRight: '8px'
-        }}>简答题</Text>
+        <Text className='topicType'>简答题</Text>
         <Text>{data.question}</Text>
       </View>
       <Textarea
         placeholder='请输入答案'
         adjustPosition
+        autoHeight
         className='Textarea'
         onBlur={onBlur}
+        maxlength={255}
         onInput={(e) => setValue((e.target as HTMLTextAreaElement).value)}/>
-      <View>最少3个字</View>
+      <View className='text-muted mt-2'>最少3个字</View>
 
       {onUpAndDown && <View className='upAndDown'>
         {index > 0 && <Button className='button' onClick={() => onUpAndDown?.(index - 1)}>上一题</Button>}

src/components/topic/topic.scss

@@ -1,40 +1,45 @@
 .topic {
-  padding: 40rpx;
+  padding: 30rpx 0;
   box-sizing: border-box;
   background: #FFF;
+  box-sizing: border-box;
+
+  .topicType {
+    display: inline-block;
+    background: #45D4A8;
+    border-radius: 5rpx;
+    color: #fff;
+    padding: 0 10rpx;
+    font-size: 30rpx;
+    margin-right: 20rpx;
+  }
 
-  .option {
+  .option,
+  .weui-cells_checkbox {
     display: block;
     margin-bottom: 10px;
     line-height: 2;
+
+    .title {
+      margin-left: 15rpx;
+    }
   }
 }
 
 .statistics {
   border-top: 1px solid #F5F8F7;
-  padding: 30px;
+  padding: 30rpx 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: env(safe-area-inset-bottom);
-
-  .button {
-    border-radius: 100px;
-    height: 76px;
-    width: 304rpx;
-    margin:  0;
-  }
 }
 
 .upAndDown {
   display: flex;
   justify-content: space-between;
-  margin-top: 30px;
-
-  button {
-    width: 40%;
-    border-radius: 100px;
-  }
+  position: absolute;
+  bottom: 20rpx;
+  width: 100%;
 }
 
 

src/pages/business/videoInfo/components/course.tsx

@@ -1,4 +1,4 @@
-import {Button, ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
+import {ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
 import {FC, useEffect, useState} from "react";
 import HVideo from "@/components/video/video";
 import {CurEndParam, curriculum, HourPlayData} from "@/api";
@@ -9,6 +9,7 @@ import Judge from "@/components/topic/judge";
 import ShortAnswer from "@/components/topic/shortAnswer";
 import unique_ident from "@/hooks/unique_ident";
 import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
+import MyButton from "@/components/button/MyButton";
 
 interface Props {
   id: number,
@@ -158,7 +159,7 @@ const Course: FC<Props> = ({id, courseId, preview, curEnd}: Props) => {
       seek(time)
       init()
     } else {
-      Taro.showToast({title: '错误', icon: 'error'})
+      Taro.showToast({title: '答案错误', icon: 'error', duration: 3000})
     }
   }, [newRecord])
 
@@ -187,14 +188,16 @@ const Course: FC<Props> = ({id, courseId, preview, curEnd}: Props) => {
           onAfterLeave={again}
         >
           <Swiper
-            style={{height: "70vh"}}
+            style={{height: "60vh"}}
             snapToEdge
             current={index}
             onChange={(e) => {
-              setIndex((e.target as any).current)
+              if ((e.target as any)?.current) {
+                setIndex((e.target as any).current)
+              }
             }}>
             {examAll?.[time]?.map((d, index) =>
-              <SwiperItem>
+              <SwiperItem key={d.id}>
                 <ScrollView style='height:70vh' scrollY>
                   {d.question_type === 1 &&
                     <Multi
@@ -231,12 +234,12 @@ const Course: FC<Props> = ({id, courseId, preview, curEnd}: Props) => {
             )}
           </Swiper>
           <View className='statistics'>
-            <View>考试次数{frequency}</View>
+            <View>{frequency}次机会</View>
             <View>{index + 1}/{examAll?.[time]?.length}</View>
 
-            {!validate && <Button className='button' onClick={() => setValidate(true)}>提交</Button>}
-            {frequency > 0 && validate && <Button className='button' onClick={onceMore}>再来一次</Button>}
-            {frequency === 0 && validate && <Button className='button' onClick={again}>重新学习</Button>}
+            {!validate && <MyButton width={150} fillet onClick={() => setValidate(true)}>提交</MyButton>}
+            {frequency > 0 && validate && <MyButton width={150} fillet onClick={onceMore}>再来一次</MyButton>}
+            {frequency === 0 && validate && <MyButton width={150} fillet onClick={again}>重新学习</MyButton>}
           </View>
         </CustomPageContainer>
       </View>

src/static/css/module.scss

@@ -66,6 +66,7 @@ body {
   padding: 10px;
   box-sizing: border-box;
   border: 1px solid #ddd;
+  height: 200px;
 }
 
 .button {