From 46fa548514ba2a438908586e2b54ed742777e9b0 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 08 六月 2020 18:09:11 +0800
Subject: [PATCH] 2020-06-08
---
src/templates/sharecomponent/settingcomponent/index.jsx | 6
src/assets/mobimg/mklogo.png | 0
package-lock.json | 28 +++
src/views/mobile/index.jsx | 26 +++
src/assets/img/normaltable.jpg | 0
src/components/header/index.jsx | 2
src/assets/img/mainsubtable.jpg | 0
src/assets/img/treepage.jpg | 0
src/templates/sharecomponent/searchcomponent/index.jsx | 4
src/templates/sharecomponent/chartcomponent/index.jsx | 6
src/views/mobile/index.scss | 51 +++++-
src/templates/sharecomponent/fieldscomponent/index.jsx | 6
src/templates/sharecomponent/columncomponent/index.jsx | 4
src/templates/sharecomponent/actioncomponent/index.jsx | 4
src/templates/menuconfig/editthdmenu/index.jsx | 6
src/templates/sharecomponent/settingcomponent/settingform/index.jsx | 31 ++++
package.json | 1
src/mob/login/index.scss | 119 ++++++++++++++++
src/mob/login/index.jsx | 79 ++++++++++
src/templates/sharecomponent/cardcomponent/index.jsx | 4
src/templates/sharecomponent/tabscomponent/index.jsx | 4
src/templates/sharecomponent/chartgroupcomponent/index.jsx | 4
22 files changed, 350 insertions(+), 35 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 2ef3c1c..e4d96e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2282,7 +2282,7 @@
"rc-drawer": "2.0.9",
"rc-dropdown": "2.4.1",
"rc-editor-mention": "1.1.13",
- "rc-form": "2.4.8",
+ "rc-form": "2.4.11",
"rc-input-number": "4.5.0",
"rc-mentions": "0.4.0",
"rc-menu": "7.4.28",
@@ -13500,9 +13500,9 @@
}
},
"rc-form": {
- "version": "2.4.8",
- "resolved": "https://registry.npmjs.org/rc-form/-/rc-form-2.4.8.tgz",
- "integrity": "sha512-hlHajcYg51pFQf+B6neAbhy2ZA+8DmxnDxiOYZRAXCLhPN788ZnrtZq5/iADDWcZqjHFnXiThoZE/Fu8syciDQ==",
+ "version": "2.4.11",
+ "resolved": "https://registry.npmjs.org/rc-form/-/rc-form-2.4.11.tgz",
+ "integrity": "sha512-8BL+FNlFLTOY/A5X6tU35GQJLSIpsmqpwn/tFAYQTczXc4dMJ33ggtH248Cum8+LS0jLTsJKG2L4Qp+1CkY+sA==",
"requires": {
"async-validator": "1.11.5",
"babel-runtime": "6.26.0",
@@ -13510,7 +13510,27 @@
"dom-scroll-into-view": "1.2.1",
"hoist-non-react-statics": "3.3.0",
"lodash": "4.17.15",
+ "rc-util": "4.21.1",
"warning": "4.0.3"
+ },
+ "dependencies": {
+ "rc-util": {
+ "version": "4.21.1",
+ "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.21.1.tgz",
+ "integrity": "sha512-Z+vlkSQVc1l8O2UjR3WQ+XdWlhj5q9BMQNLk2iOBch75CqPfrJyGtcWMcnhRlNuDu0Ndtt4kLVO8JI8BrABobg==",
+ "requires": {
+ "add-dom-event-listener": "1.1.0",
+ "prop-types": "15.7.2",
+ "react-is": "16.13.1",
+ "react-lifecycles-compat": "3.0.4",
+ "shallowequal": "1.1.0"
+ }
+ },
+ "react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ }
}
},
"rc-gesture": {
diff --git a/package.json b/package.json
index 5b0c255..8353143 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"prop-types": "^15.7.2",
+ "rc-form": "^2.4.11",
"react": "^16.9.0",
"react-app-polyfill": "^1.0.2",
"react-codemirror2": "^7.1.0",
diff --git a/src/assets/img/mainsubtable.jpg b/src/assets/img/mainsubtable.jpg
index 1361abe..1103841 100644
--- a/src/assets/img/mainsubtable.jpg
+++ b/src/assets/img/mainsubtable.jpg
Binary files differ
diff --git a/src/assets/img/normaltable.jpg b/src/assets/img/normaltable.jpg
index b602e6d..8809081 100644
--- a/src/assets/img/normaltable.jpg
+++ b/src/assets/img/normaltable.jpg
Binary files differ
diff --git a/src/assets/img/treepage.jpg b/src/assets/img/treepage.jpg
index 13bfae3..ce6562a 100644
--- a/src/assets/img/treepage.jpg
+++ b/src/assets/img/treepage.jpg
Binary files differ
diff --git a/src/assets/mobimg/mklogo.png b/src/assets/mobimg/mklogo.png
new file mode 100644
index 0000000..befca9c
--- /dev/null
+++ b/src/assets/mobimg/mklogo.png
Binary files differ
diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx
index e76ed05..447c585 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"> 绉诲姩绔� <Icon type="arrow-right" /></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/mob/login/index.jsx b/src/mob/login/index.jsx
index 3e74467..7be0c40 100644
--- a/src/mob/login/index.jsx
+++ b/src/mob/login/index.jsx
@@ -1,11 +1,25 @@
import React, {Component} from 'react'
// import PropTypes from 'prop-types'
-import { is, fromJS } from 'immutable'
-// import { Flex, WhiteSpace, Tabs } from 'antd-mobile'
+// import { is, fromJS } from 'immutable'
+import { InputItem, Icon, Checkbox, Picker, List, Button } from 'antd-mobile'
+import { createForm } from 'rc-form'
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
+import mklogo from '@/assets/mobimg/mklogo.png'
import './index.scss'
+
+const CheckboxItem = Checkbox.CheckboxItem
+const langs = [
+ {
+ label: 'zh-CN',
+ value: '涓枃绠�浣�',
+ },
+ {
+ label: 'en-US',
+ value: 'English',
+ }
+]
class MobLogin extends Component {
// static propTpyes = {
@@ -13,20 +27,73 @@
// }
state = {
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
+ lang: ['zh-CN'],
+ rember: true,
+ param: {
+ background: {color: '#000000', image: ''},
+ logo: {width: ''}
+ }
}
- shouldComponentUpdate (nextProps, nextState) {
- return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+ onChange = () => {
+ const { rember } = this.state
+
+ this.setState({
+ rember: !rember
+ })
+ }
+
+ onChangeLang = (value) => {
+ this.setState({
+ lang: value
+ })
}
render () {
+ const { getFieldProps } = this.props.form
+ const { lang, rember } = this.state
return (
<div className="mob-login">
-
+ <div className="logo" style={{marginTop: `calc(17vh - 10px)`}}>
+ <img src={mklogo} alt=""/>
+ </div>
+ <div className="plat-name">鏄庣鍟嗕笟鏅鸿兘寮�鏀惧钩鍙�</div>
+ <InputItem
+ placeholder="UserName"
+ prefixListCls="mk-login-item am-list"
+ {...getFieldProps('userName', {
+ initialValue: '8888',
+ })}
+ >
+ <Icon type="check-circle-o" />
+ </InputItem>
+ <InputItem
+ placeholder="Password"
+ prefixListCls="mk-login-item am-list"
+ {...getFieldProps('password', {
+ initialValue: '8888',
+ })}
+ type={'password'}
+ >
+ <Icon type="check-circle-o" />
+ </InputItem>
+ <div className="other-setting">
+ <CheckboxItem checked={rember} onChange={this.onChange}>
+ <span onClick={this.onChange}>璁颁綇瀵嗙爜</span>
+ </CheckboxItem>
+ <Picker data={langs} value={lang} cols={1} onChange={this.onChangeLang} className="forss">
+ <List.Item>{lang}</List.Item>
+ </Picker>
+ <div className="clear-both"></div>
+ </div>
+ <Button type="primary">鐧诲綍</Button>
+ <div className="company-msg">
+ <p>Copyright漏2017 鎵�鏈夌浉鍏崇増鏉冨綊 鍖椾含鏄庣鏅崕淇℃伅鎶�鏈湁闄愬叕鍙�</p>
+ </div>
</div>
)
}
}
-export default MobLogin
\ No newline at end of file
+export default createForm()(MobLogin)
\ No newline at end of file
diff --git a/src/mob/login/index.scss b/src/mob/login/index.scss
index 7b8c609..6ff2843 100644
--- a/src/mob/login/index.scss
+++ b/src/mob/login/index.scss
@@ -1,6 +1,123 @@
.mob-login {
+ position: relative;
width: 100%;
height: 100%;
overflow: hidden;
-
+ background: linear-gradient(#378DBE, #46C29E, #48A9D6);
+
+ .logo {
+ max-width: 280px;
+ margin: 0 auto;
+ margin-top: calc(15vh);
+ text-align: center;
+
+ img {
+ max-width: 100%;
+ }
+ }
+ .plat-name {
+ max-width: 280px;
+ margin: 0 auto;
+ margin-top: 15px;
+ margin-bottom: 30px;
+ text-align: center;
+ font-size: 20px;
+ color: #ffffff;
+ font-weight: bold;
+ }
+ .mk-login-item.am-list-item {
+ width: 245px;
+ max-width: 270px;
+ margin: 0 auto;
+ margin-bottom: 10px;
+ border-radius: 30px;
+ background-color: rgba(255, 255, 255, 0.3);
+ .am-input-label {
+ width: 30px;
+ color: #ffffff;
+ padding-top: 10px;
+ }
+ input {
+ color: #fafafa;
+ }
+ input::-webkit-input-placeholder {
+ color: #ffffff;
+ }
+ input:-moz-placeholder {
+ color: #ffffff;
+ }
+ input::-moz-placeholder {
+ color: #ffffff;
+ }
+ input:-ms-input-placeholder {
+ color: #ffffff;
+ }
+ }
+ .am-list-item:not(:last-child) .am-list-line {
+ border: none;
+ }
+ .other-setting {
+ width: 245px;
+ max-width: 270px;
+ margin: 0 auto;
+ margin-bottom: 10px;
+ .am-list-item {
+ float: left;
+ background: transparent;
+ width: 50%;
+ padding: 0;
+ .am-list-thumb:first-child {
+ margin-right: 5px;
+
+ .am-checkbox-inner {
+ width: 18px;
+ height: 18px;
+ }
+ .am-checkbox-inner:after {
+ width: 5px;
+ height: 9px;
+ }
+ }
+ .am-list-line .am-list-content {
+ font-size: 14px;
+ color: #fafafa;
+ }
+ .am-list-extra {
+ display: none;
+ }
+ }
+ > div:not(.am-list-item) {
+ float: right;
+ background: transparent;
+ padding: 0;
+ .am-list-item {
+ width: 100%;
+ }
+ }
+ }
+ >.am-button {
+ width: 245px;
+ max-width: 270px;
+ margin: 0 auto;
+ border-radius: 30px;
+ }
+ .company-msg {
+ position: absolute;
+ width: 100%;
+ bottom: 20px;
+ padding: 0 20px;
+ font-size: 12px;
+ color: #fafafa;
+ text-align: center;
+ }
+}
+.am-picker-popup-wrap {
+ left: calc(50vw - 305px);
+ right: calc(50vw - 45px);
+ bottom: 54px;
+ overflow: hidden;
+}
+.clear-both {
+ float: none!important;
+ clear: both;
}
\ No newline at end of file
diff --git a/src/templates/menuconfig/editthdmenu/index.jsx b/src/templates/menuconfig/editthdmenu/index.jsx
index 7c6e60a..bed19c9 100644
--- a/src/templates/menuconfig/editthdmenu/index.jsx
+++ b/src/templates/menuconfig/editthdmenu/index.jsx
@@ -10,7 +10,8 @@
import { sysTemps } from '@/utils/option.js'
import zhCN from '@/locales/zh-CN/header.js'
import enUS from '@/locales/en-US/header.js'
-import nortable from '@/assets/img/normaltable.jpg'
+import mainsubtable from '@/assets/img/mainsubtable.jpg'
+import treepage from '@/assets/img/treepage.jpg'
import Preview from './preview'
import MenuForm from './menuform'
@@ -37,7 +38,8 @@
const { Search } = Input
const illust = { // 妯℃澘鍥剧墖锛岀敤浜庡凡浣跨敤妯℃澘
- CommonTable: nortable
+ CommonTable: mainsubtable,
+ TreePage: treepage
}
class EditMenu extends Component {
diff --git a/src/templates/sharecomponent/actioncomponent/index.jsx b/src/templates/sharecomponent/actioncomponent/index.jsx
index 45f5777..ca28bf8 100644
--- a/src/templates/sharecomponent/actioncomponent/index.jsx
+++ b/src/templates/sharecomponent/actioncomponent/index.jsx
@@ -843,6 +843,10 @@
}
}
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+ }
+
/**
* @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊
*/
diff --git a/src/templates/sharecomponent/cardcomponent/index.jsx b/src/templates/sharecomponent/cardcomponent/index.jsx
index bacd6f8..a55ddf4 100644
--- a/src/templates/sharecomponent/cardcomponent/index.jsx
+++ b/src/templates/sharecomponent/cardcomponent/index.jsx
@@ -29,8 +29,8 @@
cardcell: null // 鍗＄墖鍏冪礌
}
- componentDidMount () {
-
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
}
UNSAFE_componentWillReceiveProps (nextProps) {
diff --git a/src/templates/sharecomponent/chartcomponent/index.jsx b/src/templates/sharecomponent/chartcomponent/index.jsx
index f35533c..6b2faac 100644
--- a/src/templates/sharecomponent/chartcomponent/index.jsx
+++ b/src/templates/sharecomponent/chartcomponent/index.jsx
@@ -601,9 +601,13 @@
this.props.plotchange({...config, charts: _charts})
}
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+ }
+
render() {
const { plot } = this.props
-
+ console.log(plot)
return (
<div className="line-chart-edit-box" style={{minHeight: plot.height ? plot.height + 50 : 450}}>
{plot.title ? <p className="chart-title">{plot.title}</p> : null}
diff --git a/src/templates/sharecomponent/chartgroupcomponent/index.jsx b/src/templates/sharecomponent/chartgroupcomponent/index.jsx
index f420254..f01c6b8 100644
--- a/src/templates/sharecomponent/chartgroupcomponent/index.jsx
+++ b/src/templates/sharecomponent/chartgroupcomponent/index.jsx
@@ -228,6 +228,10 @@
this.props.updatechartgroup(config, id)
}
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+ }
+
/**
* @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊
*/
diff --git a/src/templates/sharecomponent/columncomponent/index.jsx b/src/templates/sharecomponent/columncomponent/index.jsx
index 0c00f78..d544ad4 100644
--- a/src/templates/sharecomponent/columncomponent/index.jsx
+++ b/src/templates/sharecomponent/columncomponent/index.jsx
@@ -429,6 +429,10 @@
})
}
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+ }
+
/**
* @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊
*/
diff --git a/src/templates/sharecomponent/fieldscomponent/index.jsx b/src/templates/sharecomponent/fieldscomponent/index.jsx
index d83aafc..31deef6 100644
--- a/src/templates/sharecomponent/fieldscomponent/index.jsx
+++ b/src/templates/sharecomponent/fieldscomponent/index.jsx
@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { fromJS } from 'immutable'
+import { is, fromJS } from 'immutable'
import { Button, Modal, Empty, notification } from 'antd'
import Utils from '@/utils/utils.js'
@@ -204,6 +204,10 @@
}
}
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+ }
+
/**
* @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊
*/
diff --git a/src/templates/sharecomponent/searchcomponent/index.jsx b/src/templates/sharecomponent/searchcomponent/index.jsx
index 9068bf8..4be47a0 100644
--- a/src/templates/sharecomponent/searchcomponent/index.jsx
+++ b/src/templates/sharecomponent/searchcomponent/index.jsx
@@ -271,6 +271,10 @@
}
}
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.state), fromJS(nextState))
+ }
+
render() {
const { dict, searchlist, visible, sqlVerifing, card } = this.state
diff --git a/src/templates/sharecomponent/settingcomponent/index.jsx b/src/templates/sharecomponent/settingcomponent/index.jsx
index 04c04dc..f20ae5e 100644
--- a/src/templates/sharecomponent/settingcomponent/index.jsx
+++ b/src/templates/sharecomponent/settingcomponent/index.jsx
@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { fromJS } from 'immutable'
+import { is, fromJS } from 'immutable'
import { Icon, Modal, Button, notification } from 'antd'
import Utils from '@/utils/utils.js'
@@ -160,6 +160,10 @@
})
}
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.state), fromJS(nextState))
+ }
+
/**
* @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊
*/
diff --git a/src/templates/sharecomponent/settingcomponent/settingform/index.jsx b/src/templates/sharecomponent/settingcomponent/settingform/index.jsx
index 8c3361a..15cb953 100644
--- a/src/templates/sharecomponent/settingcomponent/settingform/index.jsx
+++ b/src/templates/sharecomponent/settingcomponent/settingform/index.jsx
@@ -210,6 +210,37 @@
reject()
return
} else if (values.interType === 'inner' && !values.innerFunc && values.default !== 'false' && values.dataresource) {
+ let _quot = values.dataresource.match(/'{1}/g)
+ let _lparen = values.dataresource.match(/\({1}/g)
+ let _rparen = values.dataresource.match(/\){1}/g)
+
+ _quot = _quot ? _quot.length : 0
+ _lparen = _lparen ? _lparen.length : 0
+ _rparen = _rparen ? _rparen.length : 0
+
+ if (_quot % 2 !== 0) {
+ notification.warning({
+ top: 92,
+ message: '鏁版嵁婧愪腑\'蹇呴』鎴愬鍑虹幇',
+ duration: 5
+ })
+ return
+ } else if (_lparen !== _rparen) {
+ notification.warning({
+ top: 92,
+ message: '鏁版嵁婧愪腑()蹇呴』鎴愬鍑虹幇',
+ duration: 5
+ })
+ return
+ } else if (/--/ig.test(values.dataresource)) {
+ notification.warning({
+ top: 92,
+ message: '鏁版嵁婧愪腑锛屼笉鍙嚭鐜板瓧绗� -- 锛屾敞閲婅鐢� /*鍐呭*/',
+ duration: 5
+ })
+ return
+ }
+
let error = Utils.verifySql(values.dataresource)
if (error) {
diff --git a/src/templates/sharecomponent/tabscomponent/index.jsx b/src/templates/sharecomponent/tabscomponent/index.jsx
index 1773a6b..628dcba 100644
--- a/src/templates/sharecomponent/tabscomponent/index.jsx
+++ b/src/templates/sharecomponent/tabscomponent/index.jsx
@@ -376,6 +376,10 @@
}
}
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.state), fromJS(nextState))
+ }
+
/**
* @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊
*/
diff --git a/src/views/mobile/index.jsx b/src/views/mobile/index.jsx
index 4a6b13c..3c9eaba 100644
--- a/src/views/mobile/index.jsx
+++ b/src/views/mobile/index.jsx
@@ -11,11 +11,18 @@
const Header = asyncComponent(() => import('@/mob/header'))
const Home = asyncComponent(() => import('@/mob/home'))
-// const Login = asyncComponent(() => import('@/mob/login'))
+const Login = asyncComponent(() => import('@/mob/login'))
class Mobile extends Component {
state = {
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
+ view: null
+ }
+
+ UNSAFE_componentWillMount() {
+ this.setState({
+ view: {uuid: 'login', type: 'login', parentId: null, parentType: null}
+ })
}
/**
@@ -28,17 +35,26 @@
}
render () {
+ const { view } = this.state
+
return (
<div className="mobile-view">
<Header />
<div className="mob-body">
<div className="mob-tool">
- <div className="mob-tool-item"><Icon type="plus-circle" />娣� 鍔� 鍐� 瀹�</div>
+ <div className="mob-tool-content">
+ <div className="plus-content">
+ <Icon type="plus-circle" />娣� 鍔� 鍐� 瀹�
+ </div>
+ <div className="useable-component"></div>
+ </div>
+ <div className="mob-tool-other"></div>
</div>
<div className="mob-shell">
- <div className="mob-shell-inner">
- <Home />
- </div>
+ {view ? <div className="mob-shell-inner">
+ {view.type === 'login' ? <Login /> : null}
+ {view.type === 'home' ? <Home /> : null}
+ </div> : null}
</div>
<div className="mob-setting">
</div>
diff --git a/src/views/mobile/index.scss b/src/views/mobile/index.scss
index 75adead..a9bd527 100644
--- a/src/views/mobile/index.scss
+++ b/src/views/mobile/index.scss
@@ -16,19 +16,48 @@
width: 40px;
background: #262626;
box-shadow: 2px 0px 2px #000;
- .mob-tool-item {
- color: #ffffff;
+ .mob-tool-content {
width: 100%;
- display: flex;
- align-items: center;
- writing-mode: tb-rl;
- padding: 16px 0;
- border-bottom: 1px solid #000;
- cursor: pointer;
- i {
- margin-bottom: 5px;
- margin-left: 2px;
+ .plus-content {
+ position: relative;
+ color: #ffffff;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ writing-mode: tb-rl;
+ padding: 16px 0;
+ border-bottom: 1px solid #000;
+ cursor: pointer;
+ z-index: 10;
+ background: #262626;
+ i {
+ margin-bottom: 5px;
+ margin-left: 2px;
+ }
}
+
+ .useable-component {
+ position: absolute;
+ width: 300px;
+ top: 0;
+ bottom: 0;
+ left: -340px;
+ background: #fff;
+ opacity: 0;
+ transition: left 0.3s, opacity 0.3s;
+ }
+ }
+ .mob-tool-content:hover {
+ .useable-component {
+ opacity: 1;
+ left: 40px;
+ }
+ }
+ .mob-tool-other {
+ position: relative;
+ z-index: 10;
+ height: 1000px;
+ background: #262626;
}
}
--
Gitblit v1.8.0