完善新建项目弹窗

src/view/components/projectModal.vue

@@ -105,7 +105,6 @@
 
 .contentBox {
     padding: 10px;
-    background: #ff8899;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -116,7 +115,6 @@
 .RightBox {
     flex: 1;
     height: 400px;
-    background: #ddd;
     margin: 0 5px;
     border-radius: 4px;
     overflow: auto;
@@ -151,7 +149,8 @@
 .CenterBox {
     padding: 0px 10px;
 }
-.CenterBottom{
+
+.CenterBottom {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
@@ -159,26 +158,22 @@
 
 .CenterItem {
     width: calc(33.333% - 7px);
-    height: 120px;
+    height: 90px;
-    background: #f5f5f5;
     border-radius: 4px;
-    padding: 10px;
     box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
+    background: #9e9898;
+    color: #fff;
 }
 
 .CenterItem:hover {
-    background: #e0e0e0;
+    background: #9e9898;
     transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
-.CenterItem img{
+.CenterItem img {
     width: 100%;
     height: 60px;
     object-fit: cover;
@@ -187,10 +182,51 @@
 }
 
 .CenterItem span {
+    display: block;
+    height: 30px;
     font-size: 14px;
-    color: #333;
+    color: #fff;
-    text-align: center;
+    padding-left: 10px;
-    font-weight: 500;
+    box-sizing: border-box;
+}
+
+.RightBox {
+    padding-top: 10px;
+    box-sizing: border-box;
+    color: #fff;
+}
+
+.RightBox img {
+    width: 100%;
+    height: 100px;
+}
+
+.RightBox h2 {
+    padding: 0px;
+    margin: 0px;
+    margin-top: 10px;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.RightBox p {
+    height: 110px;
+    padding: 0px;
+    margin: 0px;
+    margin-top: 10px;
+    font-size: 14px;
+}
+
+.NameBox h4 {
+    padding: 0px;
+    margin: 10px 0px;
+}
+
+.FootBtn {
+    margin-top: 10px;
+    display: flex;
+    justify-content: flex-end;
+
 }
 </style>
 
@@ -224,12 +260,21 @@
                         </el-tabs>
                     </div>
                 </div>
-                <div class="RightBox"></div>
+                <div class="RightBox">
+                    <img src="/src/assets/images/sjdp1.png" alt="">
+                    <h2>基础大屏示列</h2>
+                    <p>包含所有2D基础元素的大屏示列</p>
+                    <div class="FileInfo">文件信息：大小3MB</div>
+                    <div class="NameBox">
+                        <h4>项目名称</h4>
+                        <el-input placeholder="请输入名称" />
+                    </div>
+                    <div class="FootBtn">
+                        <el-button @click="handleClose">取消</el-button>
+                        <el-button type="primary">创建项目</el-button>
+                    </div>
+                </div>
             </div>
-            <template #footer>
-                <el-button @click="open = false">取消</el-button>
-                <el-button type="primary" @click="handleSubmit">创建项目</el-button>
-            </template>
         </el-dialog>
     </div>
 
@@ -314,4 +359,9 @@ const handleSubmit = () => {
     console.log('提交项目')
     open.value = false
 }
+
+// 关闭弹窗
+const handleClose = () => {
+    open.value = false
+}
 </script>