feat: 智慧城市大屏样式

README.md

@@ -78,6 +78,7 @@ pnpm run build
 
 - 主题切换
 - 国际化
+- 大屏
 
 ## 功能及 UI 参考
 

src/views/screen/city/components/CenterPanel.tsx

@@ -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;

src/views/screen/city/components/Header.tsx

@@ -15,10 +15,12 @@ const Header = () => {
   });
 
   return (
-    <div className="screen-city-header">
-      <h1>智慧城市</h1>
-      <div>当前时间：{time}</div>
-    </div>
+    <>
+      <h1 className="leading-[80px] text-white">智慧城市</h1>
+      <div className="absolute top-0 right-10 text-gray-100 leading-[70px]">
+        当前时间：{time}
+      </div>
+    </>
   );
 };
 

src/views/screen/city/components/LeftPanel.tsx

@@ -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;

src/views/screen/city/components/RightPanel.tsx

@@ -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;

src/views/screen/city/index.less

@@ -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;
+    }
   }
 }

src/views/screen/city/index.tsx

@@ -7,7 +7,9 @@ import './index.less';
 const ScreenCity = () => {
   return (
     <div className="screen-city">
-      <Header />
+      <div className="screen-city-header">
+        <Header />
+      </div>
       <div className="screen-city-content">
         <LeftPanel />
         <CenterPanel />