From 24f0ce147c8daef39ec437d5def9d089ea5b1839 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 05 六月 2020 17:23:53 +0800
Subject: [PATCH] 2020-06-05
---
public/options.txt | 2
src/assets/mobimg/mobile.png | 0
src/index.js | 4
src/tabviews/treepage/index.jsx | 6
src/mob/header/index.jsx | 79 ++++++++
src/views/mobile/index.jsx | 95 +--------
src/locales/zh-CN/mob.js | 6
src/components/header/index.jsx | 2
src/templates/sharecomponent/tabscomponent/tabform/index.jsx | 4
src/templates/comtableconfig/index.jsx | 9 +
src/templates/subtableconfig/index.jsx | 9 +
src/mob/home/index.scss | 45 +++++
src/views/mobile/index.scss | 88 +++++++++
src/mob/header/index.scss | 45 +++++
src/tabviews/subtable/index.jsx | 5
src/locales/en-US/mob.js | 6
src/mob/home/index.jsx | 127 ++++++++++++++
17 files changed, 442 insertions(+), 90 deletions(-)
diff --git a/public/options.txt b/public/options.txt
index c3248c7..38bc713 100644
--- a/public/options.txt
+++ b/public/options.txt
@@ -1,6 +1,6 @@
appId -- 浜戠鐢熸垚鐨勫簲鐢↖D
appkey -- 浜戠鐢熸垚鐨勫簲鐢ㄥ瘑閽�
mainSystemApi -- sso绯荤粺鐨勬帴鍙ｈ矾寰勶紝娉細涓氬姟绯荤粺闇�瑕佸～鍐欙紝涓斿�间负閫氱敤鎺ュ彛鐨勫畬鏁磋矾寰�
-systemType -- 涓氬姟绯荤粺浣跨敤姝ゅ弬鏁帮紝鍒ゆ柇绯荤粺涓烘祴璇曟垨姝ｅ紡锛坥fficial锛夛紝姝ｅ紡绯荤粺寮�鍙戞潈闄愬彧鍚湁绯荤粺鍗囩骇绛夐檺瀹氬姛鑳�
+systemType -- 鍒ゆ柇涓氬姟绯荤粺涓烘祴璇曪紙绌猴級鎴栨寮忥紙 official 锛夛紝姝ｅ紡绯荤粺寮�鍙戞潈闄愬彧鍚湁绯荤粺鍗囩骇绛夐檺瀹氬姛鑳�
lineColor -- 鍒嗗壊绾块鑹�
filter -- 椤甸潰婊ら暅锛屽�间负'true'鏃讹紝椤甸潰鏄剧ず涓洪粦鐧借壊
\ No newline at end of file
diff --git a/src/assets/mobimg/mobile.png b/src/assets/mobimg/mobile.png
new file mode 100644
index 0000000..c17bc0b
--- /dev/null
+++ b/src/assets/mobimg/mobile.png
Binary files differ
diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx
index 1654fe2..5c8e6ac 100644
--- a/src/components/header/index.jsx
+++ b/src/components/header/index.jsx
@@ -678,7 +678,7 @@
{this.props.editLevel === 'level4' ? <Button className="level4-close" type="primary" onClick={this.exitManage}>閫�鍑�</Button> : null}
{/* 杩涘叆缂栬緫鎸夐挳 */}
{this.props.editState && !this.props.editLevel ? <Icon onClick={this.enterEdit} className="edit-check" type="edit" /> : null}
- {/* {this.props.editState && !this.props.editLevel ? <a href="#/mobile" target="blank" className="mobile" type="edit"> 绉诲姩绔�</a> : null} */}
+ {this.props.editState && !this.props.editLevel ? <a href="#/mobile" target="blank" className="mobile" type="edit"> 绉诲姩绔� <Icon type="arrow-right" /></a> : null}
{/* 缂栬緫鑿滃崟 */}
{this.props.editLevel === 'level1' ? <EditMenu menulist={this.state.menulist} reload={this.reload} exitEdit={this.exitEdit}/> : null}
{/* 澶村儚銆佺敤鎴峰悕 */}
diff --git a/src/index.js b/src/index.js
index 9b58aac..e8e335e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -26,7 +26,7 @@
window.GLOB = window.GLOB || {}
if (!(options.systemType === 'local' && window.GLOB.systemType === 'official')) { // 鍙湁涓氬姟绯荤粺鎵嶅彲浠ヨ缃负姝ｅ紡绯荤粺
- window.GLOB.systemType = 'test'
+ window.GLOB.systemType = ''
}
if (options.systemType !== 'local') { // sso,cloud涓嶅彲璁剧疆鍗曠偣鏈嶅姟鍣ㄥ湴鍧�
window.GLOB.mainSystemApi = ''
@@ -94,7 +94,7 @@
}
if (process.env.NODE_ENV === 'production') { // 鐢ㄤ簬鏍￠獙鏄惁瀛樺湪寮�鍙戞潈闄�
- let _service = window.location.href.split('/index.html')[0].replace(new RegExp(document.location.origin + '/?', 'ig'), '')
+ let _service = window.location.href.replace(/\/index.html(.*)/ig, '').replace(new RegExp(document.location.origin + '/?', 'ig'), '')
window.GLOB.linkurl = window.location.href.split('#')[0]
window.GLOB.service = _service ? _service + '/' : ''
} else {
diff --git a/src/locales/en-US/mob.js b/src/locales/en-US/mob.js
new file mode 100644
index 0000000..15f67ba
--- /dev/null
+++ b/src/locales/en-US/mob.js
@@ -0,0 +1,6 @@
+export default {
+ 'mob.confirm': '纭畾',
+ 'mob.cancel': '鍙栨秷',
+ 'mob.header.logout': '閫�鍑�',
+ 'mob.header.logout.hint': '鎮ㄧ‘瀹氳閫�鍑哄悧?',
+}
\ No newline at end of file
diff --git a/src/locales/zh-CN/mob.js b/src/locales/zh-CN/mob.js
new file mode 100644
index 0000000..15f67ba
--- /dev/null
+++ b/src/locales/zh-CN/mob.js
@@ -0,0 +1,6 @@
+export default {
+ 'mob.confirm': '纭畾',
+ 'mob.cancel': '鍙栨秷',
+ 'mob.header.logout': '閫�鍑�',
+ 'mob.header.logout.hint': '鎮ㄧ‘瀹氳閫�鍑哄悧?',
+}
\ No newline at end of file
diff --git a/src/mob/header/index.jsx b/src/mob/header/index.jsx
new file mode 100644
index 0000000..da88082
--- /dev/null
+++ b/src/mob/header/index.jsx
@@ -0,0 +1,79 @@
+import React, {Component} from 'react'
+// import PropTypes from 'prop-types'
+import { is, fromJS } from 'immutable'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import {Dropdown, Menu, Icon, Modal } from 'antd'
+
+import { logout } from '@/store/action'
+import zhCN from '@/locales/zh-CN/mob.js'
+import enUS from '@/locales/en-US/mob.js'
+import avatar from '@/assets/img/avatar.jpg'
+import './index.scss'
+
+const { confirm } = Modal
+
+class MobHeader extends Component {
+ // static propTpyes = {
+ // collapse: PropTypes.bool,
+ // }
+ state = {
+ dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
+ logourl: window.GLOB.mainlogo,
+ avatar: sessionStorage.getItem('CloudAvatar') || avatar,
+ userName: sessionStorage.getItem('CloudUserName')
+ }
+
+ logout = () => {
+ // 閫�鍑虹櫥褰�
+ let _this = this
+ confirm({
+ title: this.state.dict['mob.header.logout.hint'],
+ content: '',
+ okText: this.state.dict['mob.confirm'],
+ cancelText: this.state.dict['mob.cancel'],
+ onOk() {
+ sessionStorage.clear()
+ _this.props.logout()
+ _this.props.history.replace('/login')
+ },
+ onCancel() {}
+ })
+ }
+
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+ }
+
+ render () {
+ return (
+ <header className="mob-header-container">
+ <div className="header-logo"><img src={this.state.logourl} alt=""/></div>
+ <Dropdown className="header-setting" overlay={
+ <Menu>
+ <Menu.Item key="2" onClick={this.logout}>{this.state.dict['mob.header.logout']}</Menu.Item>
+ </Menu>
+ }>
+ <div>
+ <img src={this.state.avatar} alt=""/>
+ <span>
+ <span className="username">{this.state.userName}</span> <Icon type="down" />
+ </span>
+ </div>
+ </Dropdown>
+ </header>
+ )
+ }
+}
+
+const mapStateToProps = () => {
+ return {}
+}
+
+const mapDispatchToProps = (dispatch) => {
+ return {
+ logout: () => dispatch(logout())
+ }
+}
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MobHeader))
\ No newline at end of file
diff --git a/src/mob/header/index.scss b/src/mob/header/index.scss
new file mode 100644
index 0000000..b6b01d7
--- /dev/null
+++ b/src/mob/header/index.scss
@@ -0,0 +1,45 @@
+.mob-header-container {
+ width: 100%;
+ height: 48px;
+ color: rgba(255, 255, 255, 0.65);
+
+ background: #001529;
+ border-bottom: 1px solid #000;
+
+ .header-logo {
+ float: left;
+ width: 180px;
+ line-height: 48px;
+ text-align: center;
+ padding-left: 5px;
+ box-sizing: border-box;
+ opacity: 1;
+ img {
+ max-width: 100%;
+ max-height: 40px;
+ }
+ }
+ .header-setting {
+ float: right;
+ line-height: 48px;
+ margin-right: 10px;
+ img {
+ width: 29px;
+ height: 29px;
+ border-radius: 30px;
+ margin-right: 7px;
+ }
+ span {
+ color: #ffffff;
+ font-size: 0.95rem;
+ .username {
+ display: inline-block;
+ height: 30px;
+ max-width: 95px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/mob/home/index.jsx b/src/mob/home/index.jsx
new file mode 100644
index 0000000..b09bc15
--- /dev/null
+++ b/src/mob/home/index.jsx
@@ -0,0 +1,127 @@
+import React, {Component} from 'react'
+// import PropTypes from 'prop-types'
+import { is, fromJS } from 'immutable'
+import { Flex, WhiteSpace, Tabs } from 'antd-mobile'
+
+import zhCN from '@/locales/zh-CN/mob.js'
+import enUS from '@/locales/en-US/mob.js'
+import './index.scss'
+
+const PlaceHolder = ({ className = '', children = ''}) => (
+ <div className={`${className} placeholder`}>{children ? children : 'Block'}</div>
+)
+
+const tabs2 = [
+ { title: '绠�浠�', sub: '1' },
+ { title: '宸ヤ綔鍙�', sub: '2' },
+ { title: '涓汉涓績', sub: '3' },
+]
+
+class MobHome extends Component {
+ // static propTpyes = {
+ // collapse: PropTypes.bool,
+ // }
+ state = {
+ dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
+ }
+
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+ }
+
+ render () {
+
+ return (
+ <div className="mob-home">
+ <Tabs tabs={tabs2}
+ initialPage={1}
+ className="home"
+ tabBarPosition="bottom"
+ renderTab={tab => <span>{tab.title}</span>}
+ >
+ <div className="home-tab">
+ <div className="flex-container">
+ <div className="sub-title">Basic</div>
+ <Flex>
+ <Flex.Item><PlaceHolder ><span> test</span></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="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>
+ <div className="home-tab">
+ Content of second tab
+ </div>
+ <div className="home-tab">
+ Content of third tab
+ </div>
+ </Tabs>
+ </div>
+ )
+ }
+}
+
+export default MobHome
\ No newline at end of file
diff --git a/src/mob/home/index.scss b/src/mob/home/index.scss
new file mode 100644
index 0000000..b6b01d7
--- /dev/null
+++ b/src/mob/home/index.scss
@@ -0,0 +1,45 @@
+.mob-header-container {
+ width: 100%;
+ height: 48px;
+ color: rgba(255, 255, 255, 0.65);
+
+ background: #001529;
+ border-bottom: 1px solid #000;
+
+ .header-logo {
+ float: left;
+ width: 180px;
+ line-height: 48px;
+ text-align: center;
+ padding-left: 5px;
+ box-sizing: border-box;
+ opacity: 1;
+ img {
+ max-width: 100%;
+ max-height: 40px;
+ }
+ }
+ .header-setting {
+ float: right;
+ line-height: 48px;
+ margin-right: 10px;
+ img {
+ width: 29px;
+ height: 29px;
+ border-radius: 30px;
+ margin-right: 7px;
+ }
+ span {
+ color: #ffffff;
+ font-size: 0.95rem;
+ .username {
+ display: inline-block;
+ height: 30px;
+ max-width: 95px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/tabviews/subtable/index.jsx b/src/tabviews/subtable/index.jsx
index d15bd1c..a5c0f11 100644
--- a/src/tabviews/subtable/index.jsx
+++ b/src/tabviews/subtable/index.jsx
@@ -777,6 +777,8 @@
* @description 鎸夐挳鎿嶄綔瀹屾垚鍚庯紙鎴愬姛鎴栧け璐ワ級锛岄〉闈㈠埛鏂帮紝閲嶇疆椤电爜鍙婇�夋嫨椤�
*/
refreshbyaction = (btn, type) => {
+ const { Tab } = this.props
+
if (btn.execSuccess === 'grid' && type === 'success') {
this.reloadtable()
} else if (btn.execError === 'grid' && type === 'error') {
@@ -795,6 +797,9 @@
this.reloadtable()
this.props.handleMainTable('equaltab')
} else if (btn.execSuccess === 'maingrid' && type === 'success') {
+ if (Tab.isTreeNode) {
+ this.reloadtable()
+ }
this.props.handleMainTable('maingrid')
} else if (btn.execSuccess === 'equaltab' && type === 'success') {
this.reloadtable()
diff --git a/src/tabviews/treepage/index.jsx b/src/tabviews/treepage/index.jsx
index b25f051..243fe32 100644
--- a/src/tabviews/treepage/index.jsx
+++ b/src/tabviews/treepage/index.jsx
@@ -113,7 +113,7 @@
// 鏉冮檺杩囨护
config.tabgroups.forEach(group => {
group.sublist = group.sublist.filter(tab => {
- if (tab.supMenu === 'mainTable') {
+ if (tab.supMenu === 'mainTable' || (!tab.supMenu && tab.level === 0)) {
tab.isTreeNode = true
}
return permAction[tab.linkTab]}
@@ -554,9 +554,9 @@
* @description 瀛愯〃鎿嶄綔瀹屾垚鍚庡埛鏂颁富琛�
*/
handleMainTable = (type, tab) => {
- if (type === 'maingrid' && tab.supMenu === 'mainTable') {
+ if (type === 'maingrid' && (tab.supMenu === 'mainTable' || (!tab.supMenu && tab.level === 0))) {
this.loadmaindata()
- } else if (type === 'mainline' && tab.supMenu === 'mainTable') {
+ } else if (type === 'mainline' && (tab.supMenu === 'mainTable' || (!tab.supMenu && tab.level === 0))) {
this.loadmaindata()
} else if ((type === 'maingrid' || type === 'mainline') && tab.supMenu) {
this.setState({
diff --git a/src/templates/comtableconfig/index.jsx b/src/templates/comtableconfig/index.jsx
index a9f7bb8..34481c6 100644
--- a/src/templates/comtableconfig/index.jsx
+++ b/src/templates/comtableconfig/index.jsx
@@ -1125,10 +1125,19 @@
}
})
+ let hasKey = false
+ config.columns.forEach(col => {
+ if (config.setting.primaryKey === col.field) {
+ hasKey = true
+ }
+ })
+
if (config.setting.interType === 'inner' && !config.setting.innerFunc && config.setting.default !== 'false' && !config.setting.dataresource) {
return '鑿滃崟灏氭湭璁剧疆鏁版嵁婧愶紝涓嶅彲鍚敤锛�'
} else if (!config.setting.primaryKey) {
return '鑿滃崟灏氭湭璁剧疆涓婚敭锛屼笉鍙惎鐢紒'
+ } else if (!hasKey) {
+ return '鏄剧ず鍒椾腑涓嶅瓨鍦ㄤ富閿瓧娈碉紝涓嶅彲鍚敤锛�'
} else if (!tabinvalid) {
return '鑿滃崟鏍囩椤佃缃敊璇紙瀛樺湪澶氳鏍囩鏃讹紝琛屾爣绛句笉鍙负绌猴級锛�'
} else if (charterr) {
diff --git a/src/templates/sharecomponent/tabscomponent/tabform/index.jsx b/src/templates/sharecomponent/tabscomponent/tabform/index.jsx
index cb93c5b..a3e9a01 100644
--- a/src/templates/sharecomponent/tabscomponent/tabform/index.jsx
+++ b/src/templates/sharecomponent/tabscomponent/tabform/index.jsx
@@ -272,10 +272,10 @@
}
if (values.level === undefined) {
values.level = ''
- } else if (values.supMenu && values.level === 0) {
+ } else if (values.supMenu && values.supMenu === 'mainTable' && values.level === 0) {
notification.warning({
top: 92,
- message: '瀛樺湪涓婄骇鏍囩锛屼笖璁剧疆鏄剧ず绾у埆涓�0鏃讹紝浼氶�犳垚瀛愯〃涓寜閽笉鍙敤锛�',
+ message: '涓婄骇鏍囩涓轰富琛紝涓旇缃樉绀虹骇鍒负0鏃讹紝浼氶�犳垚瀛愯〃涓寜閽笉鍙敤锛�',
duration: 5
})
}
diff --git a/src/templates/subtableconfig/index.jsx b/src/templates/subtableconfig/index.jsx
index 217740f..76e676f 100644
--- a/src/templates/subtableconfig/index.jsx
+++ b/src/templates/subtableconfig/index.jsx
@@ -922,10 +922,19 @@
}
})
+ let hasKey = false
+ config.columns.forEach(col => {
+ if (config.setting.primaryKey === col.field) {
+ hasKey = true
+ }
+ })
+
if (config.setting.interType === 'inner' && !config.setting.innerFunc && config.setting.default !== 'false' && !config.setting.dataresource) {
return '鑿滃崟灏氭湭璁剧疆鏁版嵁婧愶紝涓嶅彲鍚敤锛�'
} else if (!config.setting.primaryKey) {
return '鑿滃崟灏氭湭璁剧疆涓婚敭锛屼笉鍙惎鐢紒'
+ } else if (!hasKey) {
+ return '鏄剧ず鍒椾腑涓嶅瓨鍦ㄤ富閿瓧娈碉紝涓嶅彲鍚敤锛�'
} else if (charterr) {
return charterr
} else {
diff --git a/src/views/mobile/index.jsx b/src/views/mobile/index.jsx
index db6243f..22534e3 100644
--- a/src/views/mobile/index.jsx
+++ b/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="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 className="mobile-view">
+ <Header />
+ <div className="mob-body">
+ <div className="mob-tool">
+
+ </div>
+ <div className="mob-shell">
+ <div className="mob-shell-inner">
+ <Home />
+ </div>
+ </div>
</div>
</div>
)
diff --git a/src/views/mobile/index.scss b/src/views/mobile/index.scss
index 10d6527..2e28ef6 100644
--- a/src/views/mobile/index.scss
+++ b/src/views/mobile/index.scss
@@ -1,4 +1,90 @@
-.mobile-container {
+.mobile-view {
+ background: #000;
+ .mob-body {
+ width: 100vw;
+ height: calc(100vh - 50px);
+ overflow: hidden;
+ position: relative;
+ background: #262626;
+
+ .mob-tool {
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 100%;
+ width: 40px;
+ background: #262626;
+ box-shadow: 2px 0px 2px #000;
+ }
+
+ .mob-shell {
+ width: 375px;
+ height: calc(100vh - 70px);
+ margin: 0 auto;
+ background: #ffffff url('../../assets/mobimg/mobile.png');
+ background-size: 100% 100%;
+ padding: 5vh 13px 6vh;
+ border-radius: 30px;
+
+ .mob-shell-inner {
+ width: 100%;
+ height: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #f5f5f9;
+ }
+ .mob-shell-inner::-webkit-scrollbar {
+ width: 4px;
+ }
+ .mob-shell-inner::-webkit-scrollbar-thumb {
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
+ background: rgba(0, 0, 0, 0.23);
+ border-radius: 5px;
+ }
+ .mob-shell-inner::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
+ border: 1px solid rgba(0, 0, 0, 0.07);
+ background: rgba(0, 0, 0, 0);
+ border-radius: 3px;
+ }
+ }
+ }
+
+ .mob-home {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ > .am-tabs {
+ > .am-tabs-tab-bar-wrap {
+ .am-tabs-default-bar-underline {
+ display: none;
+ }
+ }
+ > .am-tabs-content-wrap {
+ > .am-tabs-pane-wrap {
+ .home-tab {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ > .am-tabs-pane-wrap::-webkit-scrollbar {
+ width: 4px;
+ }
+ > .am-tabs-pane-wrap::-webkit-scrollbar-thumb {
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
+ background: rgba(0, 0, 0, 0.13);
+ border-radius: 5px;
+ }
+ > .am-tabs-pane-wrap::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
+ border: 1px solid rgba(0, 0, 0, 0.07);
+ background: rgba(0, 0, 0, 0);
+ border-radius: 3px;
+ }
+ }
+ }
+ }
.flex-container {
margin: 0 15px;
}
--
Gitblit v1.8.0