save

src/app/App.jsx

@@ -8,6 +8,7 @@ import './developVersion/index.css';
 import {request} from 'graphql-request'
 import {graphqlUrl} from "../config";
 import {SHOW_ALL_CASE} from "../gql";
+import './index.css';
 const {Header, Footer, Content} = Layout;
 const TabPane = Tabs.TabPane;
 
@@ -57,61 +58,73 @@ class App extends Component {
                             <div className='logo'/>
                         </div>
                     </Header>
-                    <Content >
-                        <div className="index" >
-                            <div className="intro" style={{ padding: '30px' }}>
-                                <Row gutter={16}>
-                                    <Col span={24}>
-                                        <h2>无年费&nbsp;&nbsp;&nbsp;&nbsp;数据完全私有</h2>
-                                        <h3>即刻拥有自己的微信公众号、小程序</h3>
-                                    </Col>
-                                </Row>
-                            </div>
-                            <div className="brief">赶紧来试一试吧！</div>
-                            <div className="home-btn">
-                                <Button type="primary" size='large'
-                                        style={{marginRight:'10px'}}
-                                        onClick={()=>{
-                                            this.props.history.push({
-                                                pathname: `/common`
-                                            })}}>立即使用
-                                </Button>
-                                <Button size='large'
-                                        style={{marginLeft:'10px'}}
-                                        onClick={()=>{
-                                            this.props.history.push({
-                                                pathname: `/developer`
-                                            })}}>开发设计
-                                </Button>
-                            </div>
-                        </div>
-
-                        <div style={{marginLeft: 200}}>
-                            <Tabs tabPosition='left' size='large' tabBarStyle={tabStyle} tabBarGutter={100}>
-                                <TabPane tab="预约" key="1">
-                                    <div style={{marginLeft: 100}}>
-                                        {
-                                            examplesFirst.length === 0 ?
-                                                <Spin/> :
-                                                <BaiduShow
-                                                    examples={examplesFirst}
-                                                />
-                                        }
+                    <Content>
+                        <Row>
+                            <div className='intro-wrapper'>
+                                <div className="index" >
+                                    <div className="intro" style={{ padding: '30px' }}>
+                                        <Row gutter={16}>
+                                            <Col span={24}>
+                                                <h2>无年费&nbsp;&nbsp;&nbsp;&nbsp;数据完全私有</h2>
+                                                <h3>即刻拥有自己的微信公众号、小程序</h3>
+                                            </Col>
+                                        </Row>
                                     </div>
-                                </TabPane>
-                                <TabPane tab="电商" key="2">
-                                    <div style={{marginLeft: 100}}>
-                                        {
-                                            examplesSecond.length === 0 ?
-                                                <Spin/> :
-                                                <BaiduShow
-                                                    examples={examplesSecond}
-                                                />
-                                        }
+                                    <div className="brief">赶紧来试一试吧！</div>
+                                    <div className="home-btn">
+                                        <Button type="primary" size='large'
+                                                style={{marginRight:'10px'}}
+                                                onClick={()=>{
+                                                    this.props.history.push({
+                                                        pathname: `/common`
+                                                    })}}>立即使用
+                                        </Button>
+                                        <Button size='large'
+                                                style={{marginLeft:'10px'}}
+                                                onClick={()=>{
+                                                    this.props.history.push({
+                                                        pathname: `/developer`
+                                                    })}}>开发设计
+                                        </Button>
                                     </div>
-                                </TabPane>
-                            </Tabs>
-                        </div>
+                                </div>
+                            </div>
+                        </Row>
+
+
+                        <Row>
+                            <Col span={14} offset={5}>
+                                <div className={'cases-show-wrapper'}>
+                                    <div className={'cases-show-title'}>行业模板案例</div>
+                                    <div className={'case-show-tabs'}>
+                                        <Tabs tabPosition='left' size='large' tabBarStyle={tabStyle} tabBarGutter={100}>
+                                            <TabPane tab="预约" key="1">
+                                                <div style={{marginLeft: 100}}>
+                                                    {
+                                                        examplesFirst.length === 0 ?
+                                                            <Spin/> :
+                                                            <CasesShow
+                                                                examples={examplesFirst}
+                                                            />
+                                                    }
+                                                </div>
+                                            </TabPane>
+                                            <TabPane tab="电商" key="2">
+                                                <div style={{marginLeft: 100}}>
+                                                    {
+                                                        examplesSecond.length === 0 ?
+                                                            <Spin/> :
+                                                            <CasesShow
+                                                                examples={examplesSecond}
+                                                            />
+                                                    }
+                                                </div>
+                                            </TabPane>
+                                        </Tabs>
+                                    </div>
+                                </div>
+                            </Col>
+                        </Row>
 
                     </Content>
                     <Footer style={{ textAlign: 'center' }}>
@@ -128,7 +141,7 @@ export default withRouter(App);
 
 
 
-class BaiduShow extends Component {
+class CasesShow extends Component {
     constructor(props) {
         super(props);
         console.log(props);

src/app/basicVersion/caseShow/index.css

@@ -9,33 +9,6 @@
     justify-content: space-around;
 }
 
-.cover-div {
-
-}
-
-.cover-img {
-    width: 170px;
-    height: 170px;
-    margin-top: 50px;
-    border: 5px solid #ebebeb;
-}
-
-.logo-cover-div {
-    display: inline-block;
-    margin: 50px 50px 20px 0;
-    text-align: center;
-    opacity: 0.25
-}
-
-.logo-cover-div-on {
-    opacity: 1
-}
-
-.logo-cover-img {
-    width: 100px;
-    height: 100px;
-}
-
 .deploy-choose-cloud {
     position: relative;
 }
@@ -77,22 +50,6 @@
     padding: 20px 40px 20px 0;
 }
 
-.case-detail-title {
-    font-weight: bold;
-    font-size: 38px;
-    line-height: 40px;
-}
-
-.case-detail-attention {
-    color: red;
-}
-
-.case-detail-description {
-    font-size: 22px;
-    line-height: 30px;
-    margin-top: 20px;
-}
-
 .column-menu span{
     font-size: 18px;
     padding-left: 10px;

src/app/index.css

@@ -0,0 +1,71 @@
+.intro-wrapper {
+    width: 100%;
+}
+
+.index {
+    background-size: contain;
+    background: url("https://workbench-1254337200.cos.ap-shanghai.myqcloud.com/%E9%A6%96%E9%A1%B5%E5%A4%B4%E9%83%A8%E8%83%8C%E6%99%AF.jpg?q-sign-algorithm=sha1&q-ak=AKIDoPe7MMT3NHbGx3recao7QyxTt4WpM2ek&q-sign-time=1550193602;1550195402&q-key-time=1550193602;1550195402&q-header-list=&q-url-param-list=&q-signature=a1633ad47980c4586dfb8dc49c4673bff2c1bec8&x-cos-security-token=07d3ba775e4a66769f7d0c7e3d4ce82f489c123f10001") no-repeat fixed;
+}
+
+
+
+/*case 相关开始*/
+
+.cases-show-wrapper {
+    margin-top: 100px;
+}
+
+.cases-show-title {
+    text-align: center;
+    font-weight: bold;
+    font-size: 38px;
+    line-height: 40px;
+}
+
+.case-show-tabs {
+    margin-top: 60px;
+}
+
+.cover-div {
+
+}
+
+.cover-img {
+    width: 170px;
+    height: 170px;
+    margin-top: 50px;
+    border: 5px solid #ebebeb;
+}
+
+.logo-cover-div {
+    display: inline-block;
+    margin: 50px 50px 20px 0;
+    text-align: center;
+    opacity: 0.25
+}
+
+.logo-cover-div-on {
+    opacity: 1
+}
+
+.logo-cover-img {
+    width: 100px;
+    height: 100px;
+}
+.case-detail-title {
+    font-weight: bold;
+    font-size: 38px;
+    line-height: 40px;
+}
+
+.case-detail-attention {
+    color: red;
+}
+
+.case-detail-description {
+    font-size: 22px;
+    line-height: 30px;
+    margin-top: 20px;
+}
+
+/*case 结束*/

src/index.css

@@ -85,10 +85,4 @@ code {
     font-weight: 800;
 }
 
-.index{
-    background: -webkit-linear-gradient(to top, #bcecf9 0%, #fee8e9 100%);; /* Safari 5.1 - 6.0 */
-    background: -o-linear-gradient(to top, #bcecf9 0%, #fee8e9 100%);; /* Opera 11.1 - 12.0 */
-    background: -moz-linear-gradient(to top, #bcecf9 0%, #fee8e9 100%);; /* Firefox 3.6 - 15 */
-    background-image: linear-gradient(to top, #bcecf9 0%, #fee8e9 100%); /* 标准的语法（必须放在最后） */
-}