|
|
@@ -1,9 +1,244 @@
|
|
|
<template>
|
|
|
- <div class="">
|
|
|
-
|
|
|
- </div>
|
|
|
+ <div class="practice_answer">
|
|
|
+ <el-container style="height: 100%">
|
|
|
+ <el-aside width="260px" class="hide_scrollbar">
|
|
|
+ <div class="side_list">
|
|
|
+ <div class="side_title">待练习知识点</div>
|
|
|
+ <div class="side_item" v-for="(item, index) in 20" :key="index">
|
|
|
+ <div class="item_name">
|
|
|
+ 一元二次不等式与二次函式与一元二次函数的关系
|
|
|
+ </div>
|
|
|
+ <div class="item_content">
|
|
|
+ <div class="content_left">
|
|
|
+ <div class="content_type">指定练习</div>
|
|
|
+ <div class="content_num">题量：8</div>
|
|
|
+ </div>
|
|
|
+ <div class="ai_explain">
|
|
|
+ <img class="ai_icon" src="@/assets/icon_ai.png" />
|
|
|
+ <span>AI讲解</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-aside>
|
|
|
+ <el-main class="main_body">
|
|
|
+ <div class="content_main">
|
|
|
+ <div class="content_title">
|
|
|
+ <div class="title_name">实用类文本</div>
|
|
|
+ <div class="button">
|
|
|
+ <el-button plain class="download_btn">下载试卷</el-button>
|
|
|
+ <el-button type="primary">提交作答</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="question_list">
|
|
|
+ <div
|
|
|
+ class="question_item"
|
|
|
+ v-for="(item, index) in questionList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <QuestionItem :question="item"></QuestionItem>
|
|
|
+ <div class="question_footer">
|
|
|
+ <span class="footer_title">我的作答：</span>
|
|
|
+ <div class="upload_answer">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ action="#"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ >
|
|
|
+ <el-button size="small" plain>拍照/上传答案</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
-
|
|
|
+<script>
|
|
|
+import QuestionItem from "@/views/targetImprove/components/QuestionItem.vue"; //题目公共组件
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ QuestionItem,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ questionList: [{}, {}, {}, {}],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ mounted() {},
|
|
|
+ methods: {},
|
|
|
+};
|
|
|
+</script>
|
|
|
<style scoped lang="scss">
|
|
|
+.practice_answer {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .side_list {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 16px 10px 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .side_title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .side_item {
|
|
|
+ margin-top: 16px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .item_name {
|
|
|
+ width: 100%;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item_content {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .content_left {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+
|
|
|
+ .content_type {
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content_num {
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai_explain {
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .ai_icon {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #4f3eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-</style>
|
|
|
+ .main_body {
|
|
|
+ padding: 0 0 0 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ .content_main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 10px;
|
|
|
+ .content_title {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 20px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .title_name {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ flex: 1;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .button {
|
|
|
+ display: flex;
|
|
|
+ :deep(.el-button) {
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+ .download_btn {
|
|
|
+ color: #666666;
|
|
|
+ &:hover {
|
|
|
+ border-color: #dcdfe6;
|
|
|
+ }
|
|
|
+ &:focus {
|
|
|
+ border-color: #dcdfe6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .question_list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 20px;
|
|
|
+ overflow: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ flex: 1;
|
|
|
+ .question_item {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ :deep(.question_preview){
|
|
|
+ padding: 16px;
|
|
|
+ }
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ margin-top: 20px;
|
|
|
+ .question_footer {
|
|
|
+ padding: 16px;
|
|
|
+ background-color: #f8f8f9;
|
|
|
+ border-top: 1px solid #dcdfe6;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .footer_title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .upload_answer {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
