2020-06-05

king

2020-06-05 24f0ce147c8daef39ec437d5def9d089ea5b1839

 src/views/mobile/index.jsx

@@ -1,19 +1,16 @@
import React, {Component} from 'react'
import {connect} from 'react-redux'
// import { message, Modal } from 'antd'
import { Flex, WhiteSpace } from 'antd-mobile'

// import Api from '@/api'
import zhCN from '@/locales/zh-CN/login.js'
import enUS from '@/locales/en-US/login.js'
// import asyncComponent from '@/utils/asyncComponent'
// import asyncLoadComponent from '@/utils/asyncLoadComponent'
import asyncComponent from '@/utils/asyncComponent'

import './index.scss'


const PlaceHolder = ({ className = '', ...restProps }) => (
  <div className={`${className} placeholder`} {...restProps}>Block</div>
)
const Header = asyncComponent(() => import('@/mob/header'))
const Home = asyncComponent(() => import('@/mob/home'))

class Mobile extends Component {
  state = {
@@ -30,80 +27,18 @@
  }

  render () {
    // const {  } = this.state

    return (
      <div className="mobile-container">
        <div className="flex-container">
          <div className="sub-title">Basic</div>
          <Flex>
            <Flex.Item><PlaceHolder /></Flex.Item>
            <Flex.Item><PlaceHolder /></Flex.Item>
          </Flex>
          <WhiteSpace size="lg" />
          <Flex>
            <Flex.Item><PlaceHolder /></Flex.Item>
            <Flex.Item><PlaceHolder /></Flex.Item>
            <Flex.Item><PlaceHolder /></Flex.Item>
          </Flex>
          <WhiteSpace size="lg" />
          <Flex>
            <Flex.Item><PlaceHolder /></Flex.Item>
            <Flex.Item><PlaceHolder /></Flex.Item>
            <Flex.Item><PlaceHolder /></Flex.Item>
            <Flex.Item><PlaceHolder /></Flex.Item>
          </Flex>
          <WhiteSpace size="lg" />
      <div className="mobile-view">
        <Header />
        <div className="mob-body">
          <div className="mob-tool">

          <div className="sub-title">Wrap</div>
          <Flex wrap="wrap">
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
          </Flex>
          <WhiteSpace size="lg" />

          <div className="sub-title">Align</div>
          <Flex justify="center">
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
          </Flex>
          <WhiteSpace />
          <Flex justify="end">
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
          </Flex>
          <WhiteSpace />
          <Flex justify="between">
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
          </Flex>

          <WhiteSpace />
          <Flex align="start">
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline small" />
            <PlaceHolder className="inline" />
          </Flex>
          <WhiteSpace />
          <Flex align="end">
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline small" />
            <PlaceHolder className="inline" />
          </Flex>
          <WhiteSpace />
          <Flex align="baseline">
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline small" />
            <PlaceHolder className="inline" />
          </Flex>
          </div>
          <div className="mob-shell">
            <div className="mob-shell-inner">
              <Home />
            </div>
          </div>
        </div>
      </div>
    )