待办详情页

src/router/index.js

@@ -40,6 +40,14 @@ const routes = [{
         meta: {
             isShowTarbar: true,
         }
+    }, {
+        path: '/toBeDone_details',
+        name: 'toBeDone_details',
+        component: () =>
+            import ('../views/toBeDone/toBeDone_details.vue'),
+        meta: {
+            isShowTarbar: true,
+        }
     }, {
         path: '/siteMan',
         name: 'siteMan',

src/views/toBeDone/toBeDone_details.vue

@@ -13,7 +13,22 @@
     <h2>坚持“三个思维”</h2>
   </div>
   <div class="content">
-    
+    <div class="content-top">
+        <p>问题内容：</p>
+        <p>东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。</p>
+        <p>发起部门：场所一</p>
+        <p>发起人：场所负责人李毅</p>
+        <p>交办类型：一般</p>
+        <p>问题发生区域：东台市南阳镇</p>
+        <p>问题场所：菩提寺</p>
+        <p>详细地址：东台南阳镇菩提村2号</p>
+        <p>发生时间：2022.12.04 11:26</p>
+        <p>截止时间：2022.12.11 11:26</p>
+        <p>问题附件：<span style="color:#6892ff;">活动申请书</span></p>
+    </div>
+    <div class="content-bottom">
+        
+    </div>
   </div>
 </template>
 
@@ -46,10 +61,11 @@ html {
 }
 .banner{
     background-color: #39a9ed;
-    padding: 20px 50px 40px 50px;
+    padding: 0px 50px 40px 50px;
     color: #fff;
     h2{
         &:nth-child(1){
+            margin-top:0px;
             text-align: left;
         }
         &:nth-child(2){
@@ -64,11 +80,24 @@ html {
     position: fixed;
     min-width: 90%;
     height: 600px;
-    top: 260px;
+    top: 240px;
     left: 50%;
+    padding: 20px 10px;
     transform: translateX(-50%);
     background-color: #fff;
     border-radius: 10px;
+    .content-top{
+        padding-bottom: 40px;
+        border-bottom: 2px solid #e7e7e7;
+        p{
+            margin: 0;
+            padding: 0;
+            margin-bottom: 10px;
+            &:nth-child(2){
+                margin-bottom: 50px;
+            }
+        }
+    }
 }
 
 </style>