-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
zhangshigui
committed
May 24, 2024
1 parent
7c3907a
commit 80ae4a0
Showing
7 changed files
with
113 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -78,6 +78,7 @@ pnpm run build | |
|
||
- 主题切换 | ||
- 国际化 | ||
- 大屏 | ||
|
||
## 功能及 UI 参考 | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,10 @@ | ||
export const CenterPanel = () => { | ||
return <div>中间面板</div>; | ||
return ( | ||
<div className="grow-[5]"> | ||
<div className="chart-box">上面的内容</div> | ||
<div>下面的内容</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default CenterPanel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,23 @@ | ||
const LeftPanel = () => { | ||
return <div>左侧面板</div>; | ||
return ( | ||
<div className="grow-[3]"> | ||
<div className="chart-box"> | ||
<div className="chart-box-title">标题</div> | ||
<div className="chart-box-content">内容</div> | ||
<div className="chart-box-suffix" /> | ||
</div> | ||
<div className="chart-box"> | ||
<div className="chart-box-title">标题</div> | ||
<div className="chart-box-content">内容</div> | ||
<div className="chart-box-suffix" /> | ||
</div> | ||
<div className="chart-box"> | ||
<div className="chart-box-title">标题</div> | ||
<div className="chart-box-content">内容</div> | ||
<div className="chart-box-suffix" /> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default LeftPanel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,23 @@ | ||
const RightPanel = () => { | ||
return <div>右侧面板</div>; | ||
return ( | ||
<div className="grow-[3]"> | ||
<div className="chart-box"> | ||
<div className="chart-box-title">标题</div> | ||
<div className="chart-box-content">内容</div> | ||
<div className="chart-box-suffix" /> | ||
</div> | ||
<div className="chart-box"> | ||
<div className="chart-box-title">标题</div> | ||
<div className="chart-box-content">内容</div> | ||
<div className="chart-box-suffix" /> | ||
</div> | ||
<div className="chart-box"> | ||
<div className="chart-box-title">标题</div> | ||
<div className="chart-box-content">内容</div> | ||
<div className="chart-box-suffix" /> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default RightPanel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,65 @@ | ||
.screen-city { | ||
background-image: url('@/assets/img/screen/city_bg.jpg'); | ||
background-repeat: no-repeat; | ||
@apply w-full h-full text-white; | ||
background: url('@/assets/img/screen/city_bg.jpg') no-repeat; | ||
min-height: 100%; | ||
.screen-city-header { | ||
background-image: url('@/assets/img/screen/city_header_bg.png'); | ||
background-repeat: no-repeat; | ||
background-size: 100% 100%; | ||
background: url('@/assets/img/screen/city_header_bg.png') no-repeat 100% | ||
100%; | ||
height: 100px; | ||
text-align: center; | ||
@apply text-white; | ||
} | ||
.screen-city-content { | ||
min-width: 1024px; | ||
max-width: 1920px; | ||
display: flex; | ||
column-gap: 10px; | ||
color: #fff; | ||
padding: 10px; | ||
} | ||
|
||
// 公共class | ||
.chart-box { | ||
height: 305px; | ||
border: 1px solid rgba(25, 186, 139, 0.17); | ||
background: rgba(255, 255, 255, 0.04); | ||
position: relative; | ||
margin-bottom: 15px; | ||
padding: 10px; | ||
// 上左、上右 | ||
&::before, | ||
&::after { | ||
width: 20px; | ||
height: 20px; | ||
content: ''; | ||
border-top: 2px solid #02a6b5; | ||
position: absolute; | ||
top: 0; | ||
} | ||
&::before { | ||
left: 0; | ||
border-left: 2px solid #02a6b5; | ||
} | ||
&::after { | ||
right: 0; | ||
border-right: 2px solid #02a6b5; | ||
} | ||
|
||
// 下左、下右 | ||
& .chart-box-suffix::before, | ||
& .chart-box-suffix::after { | ||
width: 20px; | ||
height: 20px; | ||
content: ''; | ||
border-bottom: 2px solid #02a6b5; | ||
position: absolute; | ||
bottom: 0; | ||
} | ||
& .chart-box-suffix::before { | ||
left: 0; | ||
border-left: 2px solid #02a6b5; | ||
} | ||
& .chart-box-suffix::after { | ||
right: 0; | ||
border-right: 2px solid #02a6b5; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters