From df5dc33f96a2ef1f553b51296ef41d38249fc8d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B2=B3=E4=BD=B3=E9=91=AB?= <yuejx@dongwu-inc.com>
Date: Thu, 13 Oct 2022 09:23:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9=E8=B0=83=E7=A0=94?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=BC=B9=E5=87=BA=E6=A1=86,=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E8=BE=93=E5=85=A5=E6=A1=86=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/research/ResearchManage.vue | 256 ++++++++++++++------------
 1 file changed, 135 insertions(+), 121 deletions(-)

diff --git a/src/views/research/ResearchManage.vue b/src/views/research/ResearchManage.vue
index 2f6b43e1..8fc3f43c 100644
--- a/src/views/research/ResearchManage.vue
+++ b/src/views/research/ResearchManage.vue
@@ -83,36 +83,42 @@
         />
     </div>
     <!-- 表格 -->
-    <div :class="out ? 'out' : 'unout'">
-      <div class="top">
-        <img class="topimg" src="../../assets/images/courseManage/add1.png" />
-        <div class="topc">创建调研</div>
-        <div @click="handleOut" style="margin-left: 440px; cursor: pointer">
-          <img
-            style="width: 20px; height: 20px"
-            src="../../assets/images/basicinfo/close.png"
-          />
-        </div>
-      </div>
-      <div class="mid clearfix">
-        <div class="name">
-          <div class="d" style="margin-top: -4px">
+    <a-modal v-model:visible="out" :footer="null" :closable="false" style="margin-top: 250px">
+      <div class="out">
+        <div class="top">
+          <img class="topimg" src="../../assets/images/courseManage/add1.png" />
+          <div class="topc">创建调研</div>
+          <div @click="handleOut" style="margin-left: 500px; cursor: pointer">
             <img
-              style="width: 10px; height: 10px"
-              src="../../assets/images/basicinfo/asterisk.png"
+              style="width: 20px; height: 20px"
+              src="../../assets/images/basicinfo/close.png"
             />
           </div>
-          <div class="inname">调研名称</div>
-          <div class="in">
-            <a-input v-model:value="valueE" show-count :maxlength="15" style="border-radius: 8px"/>
+        </div>
+        <div class="mid clearfix">
+          <div class="name">
+            <div class="d" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">调研名称</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                show-count :maxlength="15"
+                style="border-radius: 8px"
+              />
+            </div>
+          </div>
+          <div class="btn">
+            <button class="samtn btn1" @click="handleOut">取消</button>
+            <button class="samtn btn2" @click="handleOut">确定</button>
           </div>
         </div>
-        <div class="btn">
-          <button class="samtn btn1" @click="handleOut">取消</button>
-          <button class="samtn btn2" @click="handleOut">确定</button>
-        </div>
-      </div>
-    </div>
+      </div></a-modal
+    >
   </div>
 </template>
 <script>
@@ -350,6 +356,109 @@ export default {
   display: block;
   clear: both;
 }
+.out {
+    //display: flex;
+    display: block;
+    position: absolute;
+    top: 120px;
+    width: 680px;
+    // height: 525px;
+    background-color: #fff;
+
+    box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
+    left: 50%;
+    top: 20%;
+    transform: translate(-50%, -50%);
+    .top {
+      width: 100%;
+      height: 68px;
+
+      background: linear-gradient(
+        rgba(78, 166, 255, 0.2) 0%,
+        rgba(78, 166, 255, 0) 100%
+      );
+      display: flex;
+      align-items: center;
+      .topimg {
+        width: 18px;
+        height: 18px;
+        margin-left: 27px;
+      }
+      .topc {
+        color: #000000;
+        font-size: 16px;
+        margin-left: 8px;
+      }
+    }
+    .mid {
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .d {
+        // margin-top: 8px;
+        // color: #ff4e4e;
+        margin-left: -5px;
+      }
+      .name {
+        width: 78%;
+        // background-color: lightcoral;
+        display: flex;
+        margin-top: 20px;
+        align-items: center;
+        height: 40px;
+        // border: 1px solid black;
+
+        .inname {
+          color: #6f6f6f;
+          font-size: 14px;
+          margin-left: 7px;
+        }
+        .in {
+          margin-left: 14px;
+          width: 81%;
+          .ant-input {
+            border-radius: 5px;
+            // height: 120%;
+            width: 100%;
+            height: 30px;
+          }
+          .showcount {
+          position: absolute;
+          right: 10px;
+          color: #c7cbd2;
+          bottom: 5px;
+        }
+        }
+      }
+      .btn {
+        width: 33%;
+        margin-top: 30px;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 30px;
+        .samtn {
+          width: 100px;
+          height: 40px;
+          font-size: 14px;
+          border: 1px solid #409EFF;
+          border-radius: 8px;
+          cursor: pointer;
+        }
+        .btn1 {
+          background-color: #fff;
+          color: #4ea6ff;
+        }
+        .btn2 {
+          margin-left: 10px;
+          background-color: #409EFF;
+          color: #fff;
+        }
+      }
+    }
+  }
 .researchmanage {
   width: 100%;
   height: 100%;
@@ -480,102 +589,7 @@ export default {
         margin-bottom: 20px;
       }
     }
-  .out {
-    display: block;
-    position: absolute;
-    top: 120px;
-    width: 600px;
-    // height: 525px;
-    background-color: #fff;
-
-    box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    .top {
-      width: 100%;
-      height: 68px;
-
-      background: linear-gradient(
-        rgba(78, 166, 255, 0.2) 0%,
-        rgba(78, 166, 255, 0) 100%
-      );
-      display: flex;
-      align-items: center;
-      .topimg {
-        width: 18px;
-        height: 18px;
-        margin-left: 27px;
-      }
-      .topc {
-        color: #000000;
-        font-size: 16px;
-        margin-left: 8px;
-      }
-    }
-    .mid {
-      width: 100%;
-      height: 100%;
-      background-color: #fff;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      .d {
-        // margin-top: 8px;
-        // color: #ff4e4e;
-        margin-left: -5px;
-      }
-      .name {
-        width: 78%;
-        // background-color: lightcoral;
-        display: flex;
-        margin-top: 20px;
-        align-items: center;
-        height: 40px;
-        // border: 1px solid black;
-
-        .inname {
-          color: #6f6f6f;
-          font-size: 14px;
-          margin-left: 7px;
-        }
-        .in {
-          margin-left: 14px;
-          width: 81%;
-          .ant-input {
-            border-radius: 5px;
-            // height: 120%;
-            width: 100%;
-            height: 30px;
-          }
-        }
-      }
-      .btn {
-        width: 33%;
-        margin-top: 30px;
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 30px;
-        .samtn {
-          width: 100px;
-          height: 40px;
-          font-size: 14px;
-          border: 1px solid #409EFF;
-          border-radius: 8px;
-          cursor: pointer;
-        }
-        .btn1 {
-          background-color: #fff;
-          color: #4ea6ff;
-        }
-        .btn2 {
-          margin-left: 10px;
-          background-color: #409EFF;
-          color: #fff;
-        }
-      }
-    }
-  }
+  
   .unout {
     display: none;
   }