Skip to content

M
mr-julyedu
Commit 641df1d2 by zhanghaozhe
Options

答题页布局

parent 68e66bf0
Showing with 275 additions and 8 deletions
src/components/activity/2020-717/index.scss → src/components/activity/2020-717/activity/index.scss
......@@ -259,7 +259,7 @@
transform: translateX(-50%);
width: 280px;
height: 6px;
background: url("./images/h-bar.png");
background: url("../images/h-bar.png");
background-size: contain;
& + .h-bar {
......@@ -274,7 +274,7 @@
left: 0;
width: 6px;
height: 198px;
background: url("./images/v-bar.png");
background: url("../images/v-bar.png");
background-size: contain;
& + .v-bar {
......@@ -304,11 +304,11 @@
background-size: contain;
&.available {
background: url("./images/lottery-button-available.png") no-repeat;
background: url("../images/lottery-button-available.png") no-repeat;
}
&.unavailable {
background: url("./images/draw.png") no-repeat !important;
background: url("../images/draw.png") no-repeat !important;
}
}
}
......@@ -380,7 +380,7 @@
width: 14px;
height: 16px;
margin-right: 9px;
background: url("./images/lottery-icon.png") no-repeat;
background: url("../images/lottery-icon.png") no-repeat;
background-size: contain;
}
}
......@@ -478,7 +478,7 @@
display: inline-block;
width: 84px;
height: 25px;
background: url("./images/my-team.png");
background: url("../images/my-team.png");
background-size: contain;
}
......@@ -570,7 +570,7 @@
width: 14px;
height: 14px;
margin-right: 8px;
background: url("./images/start-exercise.png");
background: url("../images/start-exercise.png");
background-size: contain;
}
}
......@@ -597,7 +597,7 @@
transform: translateY(-50%);
width: 25px;
height: 11px;
background: url("./images/rank-title-decorator.png");
background: url("../images/rank-title-decorator.png");
}
&::before {
......
src/components/activity/2020-717/question/index.js 0 → 100644
import React, { Component } from 'react';
import './index.scss'
import { Toast } from "antd-mobile";
import classnames from 'classnames'
import { http } from "@/utils"
class Question extends Component {
state = {
question: {},
selectedIndex: 0,
correctIndex: 2,
wrongIndex: 3,
}
componentDidMount() {
this.getQuestion()
}
getQuestion = () => {
const assistId = this.props.match.params.assistId
http.get(`${API.home}/activity/anniversary/get_question/${assistId ? 2 : 1}/${assistId ? assistId : 0}`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
question: data,
});
} else {
Toast.info(msg)
}
})
}
render() {
const {question, selectedIndex, correctIndex, wrongIndex} = this.state
return (
<div id={'question'}>
<div className="banner"></div>
<div className={'question'}>
{question.ques && <div className="topic" dangerouslySetInnerHTML={{__html: question.ques}}></div>}
<ul>
{
question.options && !!question.options.length && question.options.map((item, index) => {
return <li key={item.id} className={classnames({
selected: selectedIndex === index,
correct: correctIndex === index,
wrong: wrongIndex === index,
})}>
<span>{String.fromCharCode(65 + index)}</span>
{item.des}
</li>
})
}
</ul>
</div>
<div className="answered">
<div className="analysis">
<div className="estimate">
您选择的是C，正确答案是D 回答错误
</div>
<div className="analysis-content">
<div className="title">
<i className={'icon'}></i>
解析
</div>
<div className="content">
解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容
</div>
</div>
</div>
<div className="recommends">
<div className="title">相关课程</div>
<ul>
<li>
</li>
</ul>
</div>
</div>
<div className="submit-bar">
<button className={'submit'}>提交</button>
{/*<button className={'lottery-related'}>去抽奖</button>*/}
</div>
</div>
);
}
}
export default Question;
\ No newline at end of file
src/components/activity/2020-717/question/index.scss 0 → 100644
html, body {
min-height: 100%;
}
#root {
min-height: 100%;
}
#question {
background: #F5F5F5;
min-height: 100%;
padding-bottom: 55px;
.banner {
height: 94px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/question-banner.png");
background-size: contain;
}
.question {
padding: 15px 16px;
background: #fff;
margin-bottom: 8px;
.topic {
margin-bottom: 20px;
font-size: 16px;
color: #222;
}
li {
display: flex;
align-items: center;
width: 375px;
height: 49px;
margin-left: -16px;
margin-right: -16px;
padding: 0 16px;
font-size: 16px;
&.selected {
background-color: rgba(0, 153, 255, .05);
color: #09f;
span {
color: #fff;
background: #09f;
border: 1px solid #09f;
}
}
&.correct {
background-color: rgba(44, 219, 175, .05);
color: #2CDBAF;
span {
color: #fff;
background: rgba(44, 219, 175, 1);
border: rgba(44, 219, 175, .05);
}
}
&.wrong {
color: #FC3540;
span {
color: #FC3540;
border: 1px solid #FC3540;
}
}
span {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 15px;
border: 1px solid rgba(153, 153, 153, 1);
border-radius: 50%;
text-align: center;
}
}
}
.answered {
padding: 15px 16px;
background-color: #fff;
.estimate {
margin-bottom: 20px;
font-size: 14px;
color: #333;
}
.analysis-content {
margin-bottom: 22px;
.title {
display: flex;
align-items: center;
margin-bottom: 15px;
color: #09f;
.icon {
display: inline-block;
width: 14px;
height: 16px;
margin-right: 6px;
background: url("../images/analysis-icon.png");
background-size: contain;
}
}
.content {
font-size: 14px;
color: #666;
}
}
.recommends {
.title {
color: #09f;
}
ul {
display: flex;
justify-content: space-between;
}
li {
width: 160px;
height: 115px;
}
img {
width: 100%;
height: 100%;
}
}
}
.submit-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 55px;
line-height: 55px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
text-align: center;
background: #fff;
button {
-webkit-appearance: none;
outline: 0;
border: 0;
font-size: 16px;
}
.submit {
width: 92px;
height: 34px;
background: #09f;
border-radius: 17px;
color: #fff;
}
.lottery-related {
height: 34px;
padding: 0 20px;
background: #FEE333;
border-radius: 3em;
color: #2636FB;
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment