Browse Source

fix style

KaysonCui 5 years ago
parent
commit
cd023e54bf

BIN
front/project/www/assets/information2_gray.png


BIN
front/project/www/assets/invite_gray.png


BIN
front/project/www/assets/realname2_gray.png


+ 13 - 0
front/project/www/components/Icon/index.less

@@ -235,6 +235,19 @@
   background-image: url('/assets/down_hover.png');
   background-image: url('/assets/down_hover.png');
 }
 }
 
 
+.icon.time-block,
+.icon.time-block.no:hover {
+  width: 40px;
+  height: 40px;
+  background: url('/assets/keshi_block.png') no-repeat center;
+}
+
+.icon.time-block.active,
+.icon.time-block.no.active,
+.icon.time-block:hover {
+  background-image: url('/assets/keshi_normal.png');
+}
+
 .icon.note,
 .icon.note,
 .icon.note.no:hover {
 .icon.note.no:hover {
   width: 20px;
   width: 20px;

+ 1 - 1
front/project/www/components/Item/index.js

@@ -238,7 +238,7 @@ export class DataItem extends Component {
     const { data = {} } = this.props;
     const { data = {} } = this.props;
     const { add } = this.state;
     const { add } = this.state;
     return (
     return (
-      <div className="data-item">
+      <div className="data-single-item">
         <Assets
         <Assets
           width={264}
           width={264}
           height={309}
           height={309}

+ 1 - 1
front/project/www/components/Item/index.less

@@ -144,7 +144,7 @@
   }
   }
 }
 }
 
 
-.data-item {
+.data-single-item {
   display: inline-block;
   display: inline-block;
   width: 290px;
   width: 290px;
   background: rgba(251, 251, 251, 1);
   background: rgba(251, 251, 251, 1);

+ 3 - 2
front/project/www/components/Other/index.less

@@ -49,8 +49,8 @@
 }
 }
 
 
 .other-contact {
 .other-contact {
-  .body {
-    width: 1200px;
+  >.body {
+    width: 1200px!important;
     margin: 0 auto;
     margin: 0 auto;
 
 
     .m-title {
     .m-title {
@@ -180,6 +180,7 @@
       .assets {
       .assets {
         position: absolute;
         position: absolute;
         left: -40px;
         left: -40px;
+        top: -5px;
       }
       }
     }
     }
   }
   }

+ 2 - 2
front/project/www/components/QAList/index.js

@@ -50,14 +50,14 @@ function QAList(props) {
   const { style, data = [], tabs = [], active } = props;
   const { style, data = [], tabs = [], active } = props;
   return (
   return (
     <Module style={style} className="qa-list">
     <Module style={style} className="qa-list">
-      <Tabs
+      {tabs.length > 0 && <Tabs
         type="division"
         type="division"
         theme="theme"
         theme="theme"
         active={active}
         active={active}
         space={2.5}
         space={2.5}
         width={100}
         width={100}
         tabs={tabs}
         tabs={tabs}
-      />
+      />}
       {data.map(item => {
       {data.map(item => {
         return <QAItem data={item} />;
         return <QAItem data={item} />;
       })}
       })}

+ 4 - 4
front/project/www/components/VipRenew/index.js

@@ -192,7 +192,7 @@ export default class extends Component {
               onChange={key => this.changePay(key)}
               onChange={key => this.changePay(key)}
             />
             />
             <div className="qrcode">
             <div className="qrcode">
-              <Assets src={payInfo.qr} />
+              <Assets width={140} height={140} src={payInfo.qr} />
             </div>
             </div>
             <div className="t">请使用手机微信或支付宝扫码付款</div>
             <div className="t">请使用手机微信或支付宝扫码付款</div>
             {order && <div className="t">支付金额: ¥ {order.money}</div>}
             {order && <div className="t">支付金额: ¥ {order.money}</div>}
@@ -217,7 +217,7 @@ export default class extends Component {
         <div className="list">
         <div className="list">
           <div className="item">
           <div className="item">
             {data.bindReal && <span className="over">已完成</span>}
             {data.bindReal && <span className="over">已完成</span>}
-            <Assets className="icon" name="realname2" />
+            <Assets className="icon" name={`realname2${data.bindReal ? '' : '_gray'}`} />
             <div className="t">
             <div className="t">
               <Assets name="gift" />
               <Assets name="gift" />
               6个月
               6个月
@@ -229,7 +229,7 @@ export default class extends Component {
             </Button>
             </Button>
           </div>
           </div>
           <div className="item">
           <div className="item">
-            <Assets className="icon" name="invite" />
+            <Assets className="icon" name={`invite${data.inviteNumber > 0 ? '' : '_gray'}`} />
             <div className="t">
             <div className="t">
               <Assets name="gift" />
               <Assets name="gift" />
               {data.inviteNumber > 0 ? `7天 X ${data.inviteNumber}位好友` : '7天/每位好友'}
               {data.inviteNumber > 0 ? `7天 X ${data.inviteNumber}位好友` : '7天/每位好友'}
@@ -242,7 +242,7 @@ export default class extends Component {
           </div>
           </div>
           <div className="item">
           <div className="item">
             {data.bindPrepare && <span className="over">已完成</span>}
             {data.bindPrepare && <span className="over">已完成</span>}
-            <Assets className="icon" name="information2" />
+            <Assets className="icon" name={`information2${data.bindPrepare ? '' : '_gray'}`} />
             <div className="t">
             <div className="t">
               <Assets name="gift" />
               <Assets name="gift" />
               1个月
               1个月

+ 5 - 3
front/project/www/components/VipRenew/index.less

@@ -14,6 +14,7 @@
       .select-layout {
       .select-layout {
         width: 375px;
         width: 375px;
         padding-top: 14px;
         padding-top: 14px;
+        padding-bottom: 30px;
 
 
         .g-special-radio-wrapper {
         .g-special-radio-wrapper {
           margin-bottom: 15px;
           margin-bottom: 15px;
@@ -72,8 +73,6 @@
       padding-top: 20px;
       padding-top: 20px;
 
 
       .list {
       .list {
-        border-bottom: 1px solid #ECEDEE;
-        margin-bottom: 20px;
         padding-bottom: 30px;
         padding-bottom: 30px;
 
 
         .item {
         .item {
@@ -109,7 +108,10 @@
           }
           }
         }
         }
       }
       }
-
+      .invite-block {
+        padding-top: 20px;
+        border-top: 1px solid #eee;
+      }
     }
     }
   }
   }
 }
 }

+ 6 - 0
front/project/www/routes/page/ready/index.less

@@ -23,6 +23,7 @@
           position: absolute;
           position: absolute;
           left: 5px;
           left: 5px;
           top: 4px;
           top: 4px;
+          cursor: pointer;
         }
         }
 
 
         .page-item-title {
         .page-item-title {
@@ -103,6 +104,11 @@
         }
         }
 
 
       }
       }
+      .faq-layout {
+        .module {
+          box-shadow: none;
+        }
+      }
 
 
       .data-list {
       .data-list {
         margin: 0 10px;
         margin: 0 10px;

+ 45 - 8
front/project/www/routes/page/ready/page.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import React from 'react';
 import './index.less';
 import './index.less';
+import { Link } from 'react-router-dom';
 import { Anchor, Icon } from 'antd';
 import { Anchor, Icon } from 'antd';
 import Assets from '@src/components/Assets';
 import Assets from '@src/components/Assets';
 import Page from '@src/containers/Page';
 import Page from '@src/containers/Page';
 import Select from '../../../components/Select';
 import Select from '../../../components/Select';
 import Button from '../../../components/Button';
 import Button from '../../../components/Button';
+import QAList from '../../../components/QAList';
+import Tabs from '../../../components/Tabs';
 import { SuppleModal, SuppleFinishModal } from '../../../components/OtherModal';
 import { SuppleModal, SuppleFinishModal } from '../../../components/OtherModal';
 import { Main } from '../../../stores/main';
 import { Main } from '../../../stores/main';
 import { User } from '../../../stores/user';
 import { User } from '../../../stores/user';
@@ -17,6 +20,7 @@ export default class extends Page {
     this.loadArticleMap = {};
     this.loadArticleMap = {};
     this.dataList = null;
     this.dataList = null;
     return {
     return {
+      readTab: '1',
       // load: false,
       // load: false,
       // list: [
       // list: [
       //   {
       //   {
@@ -177,11 +181,11 @@ export default class extends Page {
           });
           });
           this.dataList = result;
           this.dataList = result;
           this.setState({ datas: item.children });
           this.setState({ datas: item.children });
-          this.initScroll(item.children);
+          this.readyScroll(item.children);
         });
         });
     } else {
     } else {
       this.setState({ datas: item.children });
       this.setState({ datas: item.children });
-      this.initScroll(item.children);
+      this.readyScroll(item.children);
     }
     }
   }
   }
 
 
@@ -192,18 +196,18 @@ export default class extends Page {
         .then(result => {
         .then(result => {
           this.loadArticleMap[key] = result;
           this.loadArticleMap[key] = result;
           this.setState({ articles: result });
           this.setState({ articles: result });
-          this.initScroll(item.children);
+          this.readyScroll(item.children);
         });
         });
     } else {
     } else {
       const list = this.loadArticleMap[key];
       const list = this.loadArticleMap[key];
       this.setState({ articles: list });
       this.setState({ articles: list });
-      this.initScroll(item.children);
+      this.readyScroll(item.children);
     }
     }
   }
   }
 
 
   refreshRead() {
   refreshRead() {
     if (!this.readList) {
     if (!this.readList) {
-      Main.listRead()
+      Main.listRead({ page: 1, size: 1000, plate: 'getready' })
         .then(result => {
         .then(result => {
           this.readList = result.list;
           this.readList = result.list;
           this.setState({ reads: this.readList });
           this.setState({ reads: this.readList });
@@ -225,6 +229,11 @@ export default class extends Page {
     }
     }
   }
   }
 
 
+  readyScroll(list) {
+    if (this.scrollTimeKey) clearTimeout(this.scrollTimeKey);
+    this.initScroll(list);
+  }
+
   initScroll(list) {
   initScroll(list) {
     this.load = false;
     this.load = false;
     try {
     try {
@@ -234,7 +243,7 @@ export default class extends Page {
       });
       });
       this.load = true;
       this.load = true;
     } catch (e) {
     } catch (e) {
-      setTimeout(() => {
+      this.scrollTimeKey = setTimeout(() => {
         this.initScroll(list);
         this.initScroll(list);
       }, 500);
       }, 500);
     }
     }
@@ -288,6 +297,10 @@ export default class extends Page {
     this.setState({ current: key });
     this.setState({ current: key });
   }
   }
 
 
+  onChangeReadTab(key) {
+    this.setState({ readTab: key });
+  }
+
   renderView() {
   renderView() {
     const { list, current, scrollCurrent } = this.state;
     const { list, current, scrollCurrent } = this.state;
     let detail = {};
     let detail = {};
@@ -402,10 +415,34 @@ export default class extends Page {
   }
   }
 
 
   renderRead() {
   renderRead() {
-    return <div />;
+    const { readTab, reads = [] } = this.state;
+    return <div className='read-layout'>
+      <Tabs
+        className='m-b-2'
+        type="division"
+        theme="gray"
+        space={2.5}
+        active={readTab}
+        tabs={[{ title: '单项攻略', key: '1' }, { title: '模考&PACE', key: '2' }, { title: '换库&机经', key: '3' }, { title: '经验分享', key: '4' }, { title: '申请相关', key: '5' }]}
+        onChange={key => this.onChangeReadTab(key)}
+      />
+      <div className='m-b-2'>
+        <Button className='m-r-1'>CAT模考 ></Button>
+        <Button>非CAT模考 ></Button>
+      </div>
+      {reads.map((item) => {
+        return <div className='m-b-5'>
+          <Link to={item.path}>{item.title}</Link>
+        </div>;
+      })}
+    </div>;
   }
   }
 
 
   renderFaq() {
   renderFaq() {
-    return <div />;
+    const { faqs = [] } = this.state;
+    return <div className='faq-layout'>
+      <Button>我要提问 ></Button>
+      <QAList data={faqs} />
+    </div>;
   }
   }
 }
 }