Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
J
jinfa-admin
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
project
jinfa-admin
Commits
35d23bc8
Commit
35d23bc8
authored
Dec 14, 2020
by
GuanHua
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 移动吨模板装修
parent
ad8248f5
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
284 additions
and
222 deletions
+284
-222
MobileDesignPanel.tsx
src/pages/pageCustomized/components/MobileDesignPanel.tsx
+2
-2
adaptive-icon.png
.../pageCustomized/components/mobileUIDemo/adaptive-icon.png
+0
-0
edit.svg
src/pages/pageCustomized/components/mobileUIDemo/edit.svg
+27
-0
index.less
src/pages/pageCustomized/components/mobileUIDemo/index.less
+141
-2
index.tsx
src/pages/pageCustomized/components/mobileUIDemo/index.tsx
+4
-34
MobileHeaderNav.ts
...ized/configs/componentConfigs/LingXiUI/MobileHeaderNav.ts
+12
-0
index.ts
...pageCustomized/configs/componentConfigs/LingXiUI/index.ts
+3
-1
defaultData.ts
src/pages/pageCustomized/mobileEdit/defaultData.ts
+13
-1
index.tsx
src/pages/pageCustomized/mobileEdit/index.tsx
+5
-182
index.less
src/pages/pageCustomized/mobileSettingPanel/index.less
+34
-0
index.tsx
src/pages/pageCustomized/mobileSettingPanel/index.tsx
+43
-0
No files found.
src/pages/pageCustomized/components/MobileDesignPanel.tsx
View file @
35d23bc8
...
...
@@ -9,8 +9,8 @@ const MobileDesignPanel = (props) => {
return
(
<
div
className=
{
styles
.
mobileDesignWrap
}
>
{
/* <BrickDesign theme={theme} /> */
}
<
MobileUIDemo
/>
<
BrickDesign
theme=
{
theme
}
mobile
/>
{
/* <MobileUIDemo /> */
}
<
div
className=
{
styles
.
appBottom
}
>
<
div
className=
{
styles
.
appBottomStrip
}
></
div
>
</
div
>
...
...
src/pages/pageCustomized/components/mobileUIDemo/adaptive-icon.png
0 → 100644
View file @
35d23bc8
17.1 KB
src/pages/pageCustomized/components/mobileUIDemo/edit.svg
0 → 100644
View file @
35d23bc8
<?xml version="1.0" encoding="UTF-8"?>
<svg
width=
"16px"
height=
"16px"
viewBox=
"0 0 16 16"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
>
<title>
2-Edit/edit
</title>
<defs>
<polygon
id=
"path-1"
points=
"0 20 20 20 20 0 0 0"
></polygon>
<path
d=
"M16.162,5.0843 L14.904,3.8263 L15.522,3.2093 L16.816,4.4283 L16.162,5.0843 L16.162,5.0843 Z M10.329,10.9353 L8.62,11.3633 L9.024,9.7063 L14.055,4.6753 L15.315,5.9343 L10.329,10.9353 L10.329,10.9353 Z M10.1077,3.5642 C10.4377,3.5642 10.7077,3.8342 10.7077,4.1642 C10.7077,4.4942 10.4377,4.7642 10.1077,4.7642 L10.1077,4.7642 L3.9997,4.7642 C3.5667,4.7642 3.1997,5.1302 3.1997,5.5642 L3.1997,5.5642 L3.1997,16.0002 C3.1997,16.4332 3.5667,16.8002 3.9997,16.8002 L3.9997,16.8002 L14.4357,16.8002 C14.8697,16.8002 15.2357,16.4332 15.2357,16.0002 L15.2357,16.0002 L15.2357,9.5922 C15.2357,9.2622 15.5057,8.9922 15.8357,8.9922 C16.1657,8.9922 16.4357,9.2622 16.4357,9.5922 L16.4357,9.5922 L16.4357,16.0002 C16.4357,17.1002 15.5357,18.0002 14.4357,18.0002 L14.4357,18.0002 L3.9997,18.0002 C2.8997,18.0002 1.9997,17.1002 1.9997,16.0002 L1.9997,16.0002 L1.9997,5.5642 C1.9997,4.4642 2.8997,3.5642 3.9997,3.5642 L3.9997,3.5642 Z M14.711,2.3223 C15.143,1.8893 15.898,1.8903 16.33,2.3223 L16.33,2.3223 L17.665,3.6573 C18.11,4.1033 18.111,4.8293 17.665,5.2763 L17.665,5.2763 L11.129,11.8113 C10.988,11.9533 10.811,12.0523 10.618,12.1003 L10.618,12.1003 L7.947,12.7683 C7.899,12.7803 7.85,12.7863 7.801,12.7863 C7.644,12.7863 7.491,12.7243 7.377,12.6103 C7.228,12.4613 7.168,12.2453 7.219,12.0403 L7.219,12.0403 L7.887,9.3673 C7.936,9.1753 8.035,9.0003 8.174,8.8593 L8.174,8.8593 Z"
id=
"path-3"
></path>
</defs>
<g
id=
"R.-平台页面模板"
stroke=
"none"
stroke-width=
"1"
fill=
"none"
fill-rule=
"evenodd"
>
<g
id=
"R.1.2-编辑商城模板-1"
transform=
"translate(-912.000000, -820.000000)"
>
<g
id=
"编辑"
transform=
"translate(666.000000, 796.000000)"
>
<g
id=
"Button/Icon/Secondary/Small/01-Normal"
transform=
"translate(238.000000, 16.000000)"
>
<g
id=
"icon-edit"
transform=
"translate(6.000000, 6.000000)"
>
<mask
id=
"mask-2"
fill=
"white"
>
<use
xlink:href=
"#path-1"
></use>
</mask>
<g></g>
<mask
id=
"mask-4"
fill=
"white"
>
<use
xlink:href=
"#path-3"
></use>
</mask>
<use
fill=
"#A6A6A6"
xlink:href=
"#path-3"
></use>
<rect
id=
"Color"
fill=
"#ffffff"
mask=
"url(#mask-4)"
x=
"0"
y=
"0"
width=
"20"
height=
"20"
></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
src/pages/pageCustomized/components/mobileUIDemo/index.less
View file @
35d23bc8
...
...
@@ -5,6 +5,7 @@
.mall_latyout {
width: 100%;
min-height: 100%;
overflow: hidden;
}
.@{prefixCls}-header-nav {
...
...
@@ -13,19 +14,42 @@
// 默认样式
&.default {
background-color: @headerNavDefaultColor;
color: #303133;
.@{prefixCls}-status-bar {
background-color: @headerNavDefaultColor;
}
.@{prefixCls}-header-search {
&-body {
background-color: #F7F8FA;
}
}
.@{prefixCls}-header-category {
&-item {
color: #606266;
&.active {
color: #D32F2F;
}
}
}
}
// 科技类样式
&.science {
background-color: @headerNavScienceColor;
color: #FFF;
.@{prefixCls}-status-bar {
// background-color: @headerNavScienceColor;
color: #FFF;
background-color: @headerNavScienceColor;
}
.@{prefixCls}-header-bg {
&::after {
background-color: @headerNavScienceColor;
}
}
}
...
...
@@ -51,4 +75,119 @@
}
}
}
.@{prefixCls}-header {
display: flex;
padding: 0 12px;
&-logoWrap {
padding-top: 6px;
&-logo {
width: 23px;
height: 23px;
margin-right: 4px;
}
&-shopName {
font-weight: bold;
font-size: 12px;
}
}
&-actions {
margin-left: auto;
display: flex;
&-item {
margin-left: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&-icon {
width: 20px;
height: 20px;
border: none;
outline: none;
}
&-text {
font-size: 8px;
margin-top: 2px;
}
}
}
}
.@{prefixCls}-header-search {
padding: 4px 12px;
&-body {
background-color: #FFF;
border-radius: 18px;
height: 28px;
padding: 0 10px;
display: flex;
align-items: center;
}
&-icon {
font-size: 20px;
color: #909399;
margin-right: 10px;
}
&-keyword {
font-size: 14px;
color: #909399;
margin-right: 8px;
}
}
.@{prefixCls}-header-category {
display: flex;
padding-right: 12px;
align-items: center;
height: 40px;
&-main {
display: flex;
flex: 1;
align-items: center;
}
&-item {
font-size: 14px;
padding: 0 12px;
color: rgba(255, 255, 255, 0.6);
font-weight: bold;
&.active {
color: #FFF;
}
}
&-icon {
font-size: 20px;
}
}
.@{prefixCls}-header-bg {
position: relative;
width: 100%;
height: 40px;
background: #FFF;
&::after {
content: "";
position: absolute;
width: 120%;
height: 40px;
left: -10%; //椭圆左边隐藏10%,右边隐藏10%
top: 0;
border-radius: 0 0 50% 50%; //左上角,右上角,右下角,左下角
}
}
}
src/pages/pageCustomized/components/mobileUIDemo/index.tsx
View file @
35d23bc8
import
React
from
'react'
import
{
MobileHeaderNav
}
from
'lingxi-design-ui'
import
{
createFromIconfontCN
}
from
'@ant-design/icons'
import
{
createFromIconfontCN
,
SearchOutlined
}
from
'@ant-design/icons'
import
cx
from
'classnames'
import
LogoIcon
from
'./icon.png'
import
LogoIcon
from
'./
adaptive-
icon.png'
import
styles
from
'./index.less'
const
MIcon
=
createFromIconfontCN
({
scriptUrl
:
'//at.alicdn.com/t/font_2245831_
4qatg126x18
.js'
,
// 在 iconfont.cn 上生成
scriptUrl
:
'//at.alicdn.com/t/font_2245831_
5lnj0j4qk5
.js'
,
// 在 iconfont.cn 上生成
});
const
MobileUIDemo
:
React
.
FC
=
()
=>
{
return
(
<
div
className=
{
styles
.
mall_latyout
}
>
{
/* <MobileHeaderNav /> */
}
<
div
className=
{
cx
(
styles
[
"lingxi-header-nav"
],
styles
.
science
)
}
>
<
div
className=
{
styles
[
"lingxi-status-bar"
]
}
>
<
span
className=
{
styles
[
"lingxi-status-bar-time"
]
}
>
9:41
</
span
>
<
div
className=
{
styles
[
"lingxi-status-bar-right"
]
}
>
<
MIcon
className=
{
styles
[
"lingxi-status-bar-right-icon"
]
}
type=
"icon-xinhao-full"
/>
<
MIcon
className=
{
styles
[
"lingxi-status-bar-right-icon"
]
}
type=
"icon-xinhao"
/>
<
MIcon
className=
{
styles
[
"lingxi-status-bar-right-icon"
]
}
type=
"icon-dianliang"
/>
</
div
>
</
div
>
<
div
className=
{
styles
[
"lingxi-header"
]
}
>
<
div
className=
{
styles
[
"lingxi-header-logoWrap"
]
}
>
<
img
className=
{
styles
[
"lingxi-header-logoWrap-logo"
]
}
src=
{
LogoIcon
}
/>
<
span
className=
{
styles
[
"lingxi-header--shopName"
]
}
>
瓴犀商城
</
span
>
</
div
>
<
div
className=
{
styles
[
"lingxi-header-actions"
]
}
>
<
div
className=
{
styles
[
"lingxi-header-actions-item"
]
}
>
<
img
className=
{
styles
[
"lingxi-header-actions-item-icon"
]
}
/>
<
span
className=
{
styles
.
actionText
}
>
我的
</
span
>
</
div
>
<
div
className=
{
styles
.
actionsItem
}
>
<
img
className=
{
styles
[
"lingxi-header-actions-item-icon"
]
}
/>
<
span
className=
{
styles
.
actionText
}
>
进货单
</
span
>
</
div
>
<
div
className=
{
styles
.
actionsItem
}
>
<
img
className=
{
styles
[
"lingxi-header-actions-item-icon"
]
}
/>
<
span
className=
{
styles
.
actionText
}
>
消息
</
span
>
</
div
>
</
div
>
</
div
>
</
div
>
<
MobileHeaderNav
/>
</
div
>
)
}
...
...
src/pages/pageCustomized/configs/componentConfigs/LingXiUI/MobileHeaderNav.ts
0 → 100644
View file @
35d23bc8
import
{
ComponentConfigTypes
,
PROPS_TYPES
}
from
'lingxi-editor-core'
;
const
MobileHeaderNav
:
ComponentConfigTypes
=
{
propsConfig
:
{
componentType
:
{
label
:
'编辑'
,
type
:
PROPS_TYPES
.
advert
},
},
};
export
default
MobileHeaderNav
;
src/pages/pageCustomized/configs/componentConfigs/LingXiUI/index.ts
View file @
35d23bc8
...
...
@@ -16,6 +16,7 @@ import ShopHeader from './ShopHeader'
import
FindMore
from
'./FindMore'
import
Information
from
'./Information'
import
Footer
from
'./Footer'
import
MobileHeaderNav
from
'./MobileHeaderNav'
export
default
{
TopBar
,
...
...
@@ -35,5 +36,6 @@ export default {
ShopHeader
,
...
FloorLine
,
...
ShopFloorLine
,
...
ShowCase
...
ShowCase
,
MobileHeaderNav
,
}
src/pages/pageCustomized/mobileEdit/defaultData.ts
View file @
35d23bc8
...
...
@@ -10,10 +10,22 @@ export const mallLayoutConfig = {
"background"
:
"#FFF"
}
},
"childNodes"
:
[
"1"
,
"3"
,
"4"
,
"5"
,
"17"
,
"18"
,
"6"
]
"childNodes"
:
[
"1"
]
},
}
export
const
mobileHeaderNav
=
{
key
:
"1"
,
"1"
:
{
"componentName"
:
"MobileHeaderNav"
,
"title"
:
"顶部导航"
,
"canEdit"
:
true
,
"props"
:
{
styleTheme
:
"default"
},
}
}
export
const
topBarConfig
=
{
key
:
"1"
,
"1"
:
{
...
...
src/pages/pageCustomized/mobileEdit/index.tsx
View file @
35d23bc8
...
...
@@ -6,10 +6,11 @@ import AllComponents from '../components/ComponentsPreview'
import
config
from
'../configs'
import
SettingPanel
from
'../settingsPanel'
import
{
LAYOUT_TYPE
}
from
'@/constants'
import
{
topBarConfig
,
topAdvertConfig
,
headerConfig
,
mainNavConfig
,
bannerAdvertConfig
,
CommonTitle1Config
,
mallLayoutConfig
,
serviceAdvertConfig
,
CommonTitle2Config
,
AboutUsConfig
,
InformationConfig
,
FooterConfig
}
from
'./defaultData'
import
{
mallLayoutConfig
,
mobileHeaderNav
}
from
'./defaultData'
import
{
menuData
}
from
'./defaultMenu'
import
Loading
from
'../components/Loading'
import
{
GlobalConfig
}
from
'@/global/config'
import
MobileSettingPanel
from
'../mobileSettingPanel'
import
styles
from
'./index.less'
interface
ShopPreviewPropsType
{
...
...
@@ -45,187 +46,9 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
},
[])
const
getComponentsConfig
=
async
()
=>
{
// 导航栏
mainNavConfig
[
mainNavConfig
.
key
].
props
.
menuData
=
menuData
mainNavConfig
[
mainNavConfig
.
key
].
props
.
type
=
LAYOUT_TYPE
.
shop
mainNavConfig
[
mainNavConfig
.
key
].
props
.
categoryList
=
[]
const
shopList
=
GlobalConfig
.
web
.
shopInfo
const
webMallInfo
=
shopList
.
filter
(
item
=>
item
.
environment
===
1
&&
item
.
type
===
1
)[
0
]
headerConfig
[
headerConfig
.
key
].
props
.
logoUrl
=
webMallInfo
.
logoUrl
topBarConfig
[
topBarConfig
.
key
].
props
.
shopname
=
webMallInfo
.
name
let
initIndex
=
100
let
floorLineConfig
:
any
=
{}
const
floorLineKeys
:
any
=
[]
const
firstCategory
:
any
=
[
{
"id"
:
23
,
"name"
:
"电子电器"
},
{
"id"
:
14
,
"name"
:
"机械设备"
}
]
const
detailData
=
{
23
:
{
"categoryAdvertPicUrl"
:
"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/e7d718165e5945e0a27aa668f121479e1601286205635.jpg"
,
"categoryBOList"
:
[
{
"categoryId"
:
24
,
"categoryName"
:
"工业自动化"
,
"selectStatus"
:
1
}
],
"goodsBOList"
:
[
{
"goodsId"
:
24
,
"goodsName"
:
"15/19/22/27/32寸嵌入式十指电容触摸工业触摸显示器"
,
"goodsPicUrl"
:
"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/53caa906bde04a8c8d042de721a6f8e71601283425278.jpg"
,
"goodsPrice"
:
"1000.0"
,
"categoryName"
:
"工控设备"
,
"brandName"
:
"友飞翔"
,
"priceType"
:
1
},
{
"goodsId"
:
21
,
"goodsName"
:
"10/15/19寸工控一体机触摸屏嵌入式全封闭防尘PLC平板电脑"
,
"goodsPicUrl"
:
"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/2aa8143601ef4b0fbe736db6339e552a1601379088893.png"
,
"goodsPrice"
:
"1300.0"
,
"categoryName"
:
"工控设备"
,
"brandName"
:
"火狐热控"
,
"priceType"
:
1
},
{
"goodsId"
:
22
,
"goodsName"
:
"15/17/19寸新零售触摸显示器电容触摸工业触控显示器嵌入式"
,
"goodsPicUrl"
:
"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/57dd9e8027b04e24a40a26af4f5a97f01601282964802.jpg"
,
"goodsPrice"
:
"987.0"
,
"categoryName"
:
"工控设备"
,
"brandName"
:
"友飞翔"
,
"priceType"
:
1
},
{
"goodsId"
:
28
,
"goodsName"
:
"穿孔式交流电流变送器霍尔直流0-5A隔离转电压4-20mA 电流变送器"
,
"goodsPicUrl"
:
"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/80a5abfdae394da5ab1dc62893e1f1821601284763925.jpg"
,
"goodsPrice"
:
"4.6"
,
"categoryName"
:
"变送器"
,
"brandName"
:
"友昌振兴"
,
"priceType"
:
1
}
]
},
14
:
{
"categoryAdvertPicUrl"
:
"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/00b31368eacd4f24869ca40e88450bf91601281268329.jpg"
,
"categoryBOList"
:
[
{
"categoryId"
:
15
,
"categoryName"
:
"工程机械"
,
"selectStatus"
:
1
}
],
"goodsBOList"
:
[
{
"goodsId"
:
19
,
"goodsName"
:
"厂家直销挖掘装载机多功能两头忙挖掘装载机小型挖掘装载机"
,
"goodsPicUrl"
:
"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/a0561fc936364f969d9216027138737b1601278766489.jpg"
,
"goodsPrice"
:
"10000.0"
,
"categoryName"
:
"挖掘机"
,
"brandName"
:
"数商云"
,
"priceType"
:
1
},
{
"goodsId"
:
31
,
"goodsName"
:
"新款30型小挖掘机配驾驶室带空调市政工程水利建设小型液压挖掘机"
,
"goodsPicUrl"
:
"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/9c535ba9c3374307ae6afbbf535a311e1601364018708.jpeg"
,
"goodsPrice"
:
"20000.0"
,
"categoryName"
:
"立式包装机"
,
"brandName"
:
"合能为"
,
"priceType"
:
1
},
{
"goodsId"
:
30
,
"goodsName"
:
"犀牛XN18挖掘机洋马发动机 农用果园"
,
"goodsPicUrl"
:
"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/a748f76ebffc4912a104ad5a1e2727851601364061691.jpeg"
,
"goodsPrice"
:
"30000.0"
,
"categoryName"
:
"挖掘机"
,
"brandName"
:
"友飞翔"
,
"priceType"
:
1
},
{
"goodsId"
:
26
,
"goodsName"
:
"全新微型挖掘机 犀牛XN18挖掘机洋马发动机 农用果园"
,
"goodsPicUrl"
:
"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/03f5168b495b428baea67c7ad87f82361601364173457.jpeg"
,
"goodsPrice"
:
"20000.0"
,
"categoryName"
:
"挖掘机"
,
"brandName"
:
"鹏飞宏"
,
"priceType"
:
1
}
]
}
}
for
(
const
item
of
firstCategory
)
{
const
categoryDetail
:
any
=
detailData
[
item
.
id
]
let
floorLineConfigItem
=
{}
floorLineKeys
.
push
(
String
(
initIndex
+
1
))
const
FloorLine
=
{
[
String
(
initIndex
+
1
)]:
{
"componentName"
:
"ShopFloorLine"
,
"props"
:
{
title
:
item
.
name
},
"childNodes"
:
[
String
(
initIndex
+
2
),
String
(
initIndex
+
3
)]
}
}
const
Category
=
{
[
String
(
initIndex
+
2
)]:
{
"componentName"
:
"ShopFloorLine.Category"
,
"props"
:
{
categoryAdvertPicUrl
:
categoryDetail
.
categoryAdvertPicUrl
,
categoryid
:
item
.
id
,
categoryList
:
categoryDetail
.
categoryBOList
},
},
}
const
Goods
=
{
[
String
(
initIndex
+
3
)]:
{
"componentName"
:
"ShopFloorLine.Goods"
,
"props"
:
{
linkdisable
:
true
,
categoryid
:
item
.
id
,
goodsList
:
categoryDetail
.
goodsBOList
},
},
}
floorLineConfigItem
=
{
...
FloorLine
,
...
Category
,
...
Goods
}
floorLineConfig
=
{
...
floorLineConfig
,
...
floorLineConfigItem
}
initIndex
+=
100
}
mallLayoutConfig
[
"0"
].
childNodes
=
[...
mallLayoutConfig
[
"0"
].
childNodes
,
...
floorLineKeys
,
serviceAdvertConfig
.
key
,
FooterConfig
.
key
]
const
config
=
{
...
mallLayoutConfig
,
...
topBarConfig
,
...
topAdvertConfig
,
...
headerConfig
,
...
mainNavConfig
,
...
bannerAdvertConfig
,
...
CommonTitle2Config
,
...
AboutUsConfig
,
...
CommonTitle1Config
,
...
floorLineConfig
,
...
serviceAdvertConfig
,
...
FooterConfig
...
mobileHeaderNav
,
}
setComponentConfigs
(
config
)
setLoading
(
false
)
...
...
@@ -242,10 +65,10 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
<
MobileDesignPanel
theme=
{
theme
}
/>
</
div
>
</
div
>
<
div
style=
{
{
width
:
440
,
backgroundColor
:
'#FFF'
}
}
></
div
>
<
MobileSettingPanel
/
>
</
div
>
</
div
>
<
SettingPanel
templateId=
{
id
}
/>
{
/* <SettingPanel templateId={id} /> */
}
</
LegoProvider
>
)
:
<
Loading
/>
}
...
...
src/pages/pageCustomized/mobileSettingPanel/index.less
0 → 100644
View file @
35d23bc8
.mobileSettingPanel {
background-color: #FFF;
transition: width .25s;
&.hide {
width: 0;
}
&.show {
width: 440px;
}
.settingTabs {
:global {
.ant-tabs-tab {
margin: 0 32px;
.ant-tabs-tab-btn {
color: #909399;
font-weight: bold;
font-size: 14px;
}
&.ant-tabs-tab-active {
.ant-tabs-tab-btn {
color: #303133;
}
}
}
}
}
}
src/pages/pageCustomized/mobileSettingPanel/index.tsx
0 → 100644
View file @
35d23bc8
import
React
,
{
useEffect
}
from
'react'
import
{
ComponentConfigsType
,
SelectedInfoType
,
STATE_PROPS
,
useSelector
}
from
'lingxi-editor-core'
;
import
get
from
'lodash/get'
;
import
cx
from
'classnames'
import
{
Tabs
}
from
'antd'
import
styles
from
'./index.less'
type
SettingPanelType
=
{
selectedInfo
:
SelectedInfoType
,
componentConfigs
:
ComponentConfigsType
,
templateId
:
number
,
}
const
{
TabPane
}
=
Tabs
const
MobileSettingPanel
:
React
.
FC
=
()
=>
{
const
{
selectedInfo
,
componentConfigs
}
=
useSelector
<
SettingPanelType
,
STATE_PROPS
>
([
'selectedInfo'
,
'componentConfigs'
])
// const [activeKey, setActiveKey] = useState('2');
const
{
props
:
selectProps
,
selectedKey
}
=
selectedInfo
||
{}
const
style
=
get
(
componentConfigs
,
[
selectedKey
,
'props'
,
'style'
])
useEffect
(()
=>
{
console
.
log
(
selectedInfo
,
"selectedInfo"
)
},
[
selectedInfo
])
return
(
<
div
className=
{
cx
(
styles
.
mobileSettingPanel
,
selectedInfo
?
styles
.
show
:
styles
.
hide
)
}
>
<
Tabs
defaultActiveKey=
"1"
className=
{
styles
.
settingTabs
}
>
<
TabPane
tab=
"编辑"
key=
"1"
>
Content of Tab Pane 1
</
TabPane
>
<
TabPane
tab=
"样式"
key=
"2"
>
Content of Tab Pane 2
</
TabPane
>
</
Tabs
>
</
div
>
)
}
export
default
MobileSettingPanel
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment