add

src/app/basicVersion/caseShow/CaseShow.jsx

@@ -137,81 +137,68 @@ class BaiduShow extends Component {
         super(props);
         console.log(props);
         this.state = {
-            showCaseID: props.examples[0].id
+            showCaseID: props.examples[0].id,
+            index: 0
         }
     }
 
     render() {
         let {examples} = this.props;
-        let {showCaseID} = this.state;
+        let {showCaseID, index} = this.state;
+        let thisCase = examples[index];
         return (
-            <Query query={gql(SHOW_CASE)} variables={{id: showCaseID}}>
-                {
-                    ({loading, error, data}) => {
-                        if (loading) {
-                            return <Spin/>
-                        }
-                        if (error) {
-                            return 'error!';
-                        }
-                        let thisCase = data.case_by_id;
-
-                        return (
-                            <Row>
-                                <Col span={12}>
-                                    <Row>
-                                        <div>
-                                            <div className={'case-detail-title'}>{thisCase.title}</div>
-                                            <div
-                                                className={'case-detail-description'}>{thisCase.detailDescription ? thisCase.detailDescription : '暂无简介'}</div>
-                                            <div className='cover-div'>
-                                                <img
-                                                    className='cover-img'
-                                                    src={thisCase.img}
-                                                    alt={thisCase.title + '' + thisCase.description}
-                                                />
-                                                <div style={{marginTop: 5}}>—— 打开微信扫码体验 ——</div>
-                                            </div>
+            <Row>
+                <Col span={12}>
+                    <Row>
+                        <div>
+                            <div className={'case-detail-title'}>{thisCase.title}</div>
+                            <div
+                                className={'case-detail-description'}>{thisCase.detailDescription ? thisCase.detailDescription : '暂无简介'}</div>
+                            <div className='cover-div'>
+                                <img
+                                    className='cover-img'
+                                    src={thisCase.img}
+                                    alt={thisCase.title + '' + thisCase.description}
+                                />
+                                <div style={{marginTop: 5}}>—— 打开微信扫码体验 ——</div>
+                            </div>
 
-                                        </div>
-                                    </Row>
-                                    <Row>
-                                        {
-                                            examples.map((item, index) => (
-                                                <div
-                                                    className='logo-cover-div'
-                                                    onMouseEnter={() => {
-                                                        this.setState({
-                                                            showCaseID: item.id
-                                                        })
-                                                    }}
-                                                    key={index}
-                                                >
-                                                    <img
-                                                        className='logo-cover-img'
-                                                        src={item.img}
-                                                        alt={item.title + '' + item.description}
-                                                    />
-                                                    <div>{item.description}</div>
-                                                </div>
-                                            ))
-                                        }
-                                    </Row>
-                                </Col>
-                                <Col span={6}>
-                                    <div className={'detail-images'}>
-                                        <img
-                                            key={thisCase.detailImages[0]}
-                                            src={thisCase.detailImages[0]}
-                                            alt=""
-                                            height="500"/>
-                                    </div>
-                                </Col>
-                            </Row>
-                        )
-                    }
-                }
-            </Query>
+                        </div>
+                    </Row>
+                    <Row>
+                        {
+                            examples.map((item, index) => (
+                                <div
+                                    className={showCaseID === item.id ? 'logo-cover-div logo-cover-div-on' : 'logo-cover-div'}
+                                    onMouseEnter={() => {
+                                        this.setState({
+                                            showCaseID: item.id,
+                                            index
+                                        })
+                                    }}
+                                    key={index}
+                                >
+                                    <img
+                                        className='logo-cover-img'
+                                        src={item.img}
+                                        alt={item.title + '' + item.description}
+                                    />
+                                    <div>{item.description}</div>
+                                </div>
+                            ))
+                        }
+                    </Row>
+                </Col>
+                <Col span={6}>
+                    <div className={'detail-images'}>
+                        <img
+                            key={thisCase.detailImages[0]}
+                            src={thisCase.detailImages[0]}
+                            alt=""
+                            height="500"/>
+                    </div>
+                </Col>
+            </Row>
         )
     }
 }

src/app/basicVersion/caseShow/index.css

@@ -24,6 +24,11 @@
     display: inline-block;
     margin: 50px 50px 20px 0;
     text-align: center;
+    opacity: 0.25
+}
+
+.logo-cover-div-on {
+    opacity: 1
 }
 
 .logo-cover-img {

src/gql.js

@@ -1080,6 +1080,10 @@ const SHOW_ALL_CASE = `
                     img
                     deployedNum
                     title
+                    detailDescription
+                    detailImages
+                    detailAttention
+                    codeAddress
                     description
                     user_id {
                         id