Browse Source

add code bottom

KaysonCui 5 years ago
parent
commit
0bc8aacaa7

+ 0 - 8
front/project/www/components/Tabs/index.less

@@ -4,14 +4,6 @@
   height: 44px;
   line-height: 44px;
   overflow: hidden;
-
-  .tab.active:hover::after {
-    opacity: 1;
-  }
-
-  .tab:hover::after {
-    opacity: 0.5;
-  }
 }
 
 .tabs.small {

+ 9 - 0
front/project/www/routes/exercise/main/index.less

@@ -73,6 +73,15 @@
       margin: 3px;
     }
   }
+  .bottom-info {
+    background: #fafafa;
+    padding: 50px 0;
+    .content {
+      .other-answer-carousel {
+        background: none;
+      }
+    }
+  }
 }
 
 .code-module-modal {

+ 12 - 1
front/project/www/routes/exercise/main/page.js

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import Page from '@src/containers/Page';
 import { asyncConfirm } from '@src/services/AsyncTools';
 import { formatTreeData, formatSeconds, formatDate, formatPercent, getMap } from '@src/services/Tools';
+import { AnswerCarousel, Comment } from '../../../components/Other';
 import Continue from '../../../components/Continue';
 import Step from '../../../components/Step';
 import Panel from '../../../components/Panel';
@@ -273,6 +274,7 @@ export default class extends Page {
     return {
       tab1: SENTENCE,
       tab2: '',
+      tab3: '1',
       previewType: PREVIEW_COURSE,
       tabs: [],
       allCourse: [],
@@ -668,7 +670,7 @@ export default class extends Page {
   }
 
   renderView() {
-    const { tab1, tab2, tabs, latest, sentenceModel, previewType, courseTabs = [] } = this.state;
+    const { tab1, tab2, tab3, tabs, latest, sentenceModel, previewType, courseTabs = [] } = this.state;
     const [subject] = tabs.filter(row => row.key === tab1);
     const children = (subject && subject.children) ? subject.children : (tab1 === 'preview' && previewType === PREVIEW_COURSE ? courseTabs : []);
     return (
@@ -711,6 +713,15 @@ export default class extends Page {
 
           {this.state.faqs && <QAList data={this.state.faqs} active={'faq'} tabs={[{ key: 'faq', name: 'FAQs' }]} />}
         </div>
+        <div className='bottom-info'>
+          <div className='content'>
+            <Tabs active={tab3} space={7.5} type='tag' theme='white' tabs={[{ key: '1', title: '千行长难句' }, { key: '2', title: '关于CODE' }, { key: '3', title: '考生评价' }]} onChange={(key) => this.setState({ tab3: key })} />
+            {tab3 === '1' && <AnswerCarousel hideBtn />}
+            {tab3 === '3' && [{}].map((item) => {
+              return <Comment data={item} />;
+            })}
+          </div>
+        </div>
         {sentenceModel && this.renderInputCodeModel()}
       </div>
     );

+ 21 - 1
front/project/www/routes/my/main/index.less

@@ -231,13 +231,33 @@
       .info {
         margin-bottom: 15px;
 
-        .assets {
+        .avatar {
           vertical-align: top;
           width: 50px;
           height: 50px;
           border-radius: 50%;
           display: inline-block;
           margin-right: 15px;
+          position: relative;
+          overflow: hidden;
+          .avatar-hover {
+            display: none;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:rgba(0,0,0,0.2);
+            color: #fff;
+            line-height: 50px;
+            text-align: center;
+            font-size: 12px;
+          }
+        }
+        .avatar:hover {
+          .avatar-hover{
+            display: block;
+          }
         }
 
         .detail {

+ 11 - 8
front/project/www/routes/my/main/page.js

@@ -521,14 +521,17 @@ export default class extends Page {
       <div className="info-layout">
         <div className="body">
           <div className="info c-p">
-            <Assets
-              className="avatar"
-              name="sun_blue"
-              src={info.avatar}
-              onClick={() => {
-                this.setState({ showEdit: true });
-              }}
-            />
+            <div className='avatar'>
+              <Assets
+                src={info.avatar}
+              />
+              <div className='avatar-hover'
+                onClick={() => {
+                  this.setState({ showEdit: true });
+                }}>
+                <Icon type="edit" theme="filled" />编辑
+              </div>
+            </div>
             <div className="detail">
               <div
                 className="name c-p"