From b3f6941cc0360c7208e7b04e615e5138d00880a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=99=93=E9=B8=BD?= <lixg@dongwu-inc.com>
Date: Fri, 14 Oct 2022 09:18:11 +0800
Subject: [PATCH] =?UTF-8?q?style:=E6=8A=BD=E5=B1=89=E5=8D=95=E7=8B=AC?=
 =?UTF-8?q?=E5=86=99=E5=9C=A8vue=E6=96=87=E4=BB=B6=E9=87=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/drawers/AddVote.vue | 246 +++++++++++++++++++++++++++++
 src/views/system/SystemManage.vue  | 187 ++--------------------
 2 files changed, 261 insertions(+), 172 deletions(-)
 create mode 100644 src/components/drawers/AddVote.vue

diff --git a/src/components/drawers/AddVote.vue b/src/components/drawers/AddVote.vue
new file mode 100644
index 00000000..c9061de7
--- /dev/null
+++ b/src/components/drawers/AddVote.vue
@@ -0,0 +1,246 @@
+<template>
+  <a-drawer
+    :visible="addvoteVisible"
+    class="drawerStyle"
+    style="color: red"
+    width="80%"
+    title="添加投票"
+    placement="right"
+    @after-visible-change="afterVisibleChange"
+  >
+    <div class="drawerMain">
+      <div class="header">
+        <div class="headerTitle">添加投票</div>
+        <img
+          style="width: 29px; height: 29px; cursor: pointer"
+          src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer"
+        />
+      </div>
+      <div class="contentMain">
+        <!-- 投票名称 -->
+        <div class="vote">
+          <div class="votebox">
+            <img
+              class="voteimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="votename">投票名称：</div>
+          </div>
+          <div style="width: 424px">
+            <a-input v-model:value="value" placeholder="请输入投票名称" />
+          </div>
+        </div>
+        <!-- 投票名称 -->
+        <!-- 创建投票 -->
+        <div class="vote">
+          <div class="votebox">
+            <img
+              class="voteimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="votename">创建投票：</div>
+          </div>
+          <div class="votebtn">创建投票</div>
+        </div>
+        <!-- 创建投票 -->
+        <!-- 起止时间 -->
+        <div class="vote">
+          <div class="votebox">
+            <div class="voteimg"></div>
+            <div class="votename">起止时间：</div>
+          </div>
+          <div class="votedate">
+            <a-range-picker />
+          </div>
+        </div>
+        <!-- 起止时间 -->
+        <!-- 基础投票数 -->
+        <div class="vote" style="align-items: flex-start">
+          <div class="votebox" style="margin-top: 10px">
+            <div class="voteimg"></div>
+            <div class="votename">基础投票数：</div>
+          </div>
+          <div>
+            <div class="votebtn">点击上传</div>
+            <div class="voteclassify">支持：xls.xlsx</div>
+          </div>
+        </div>
+        <!-- 基础投票数 -->
+        <!-- 投票说明 -->
+        <div class="vote" style="align-items: flex-start">
+          <div class="votebox" style="margin-top: 10px">
+            <div class="voteimg"></div>
+            <div class="votename">投票说明：</div>
+          </div>
+          <div style="width: 500px">
+            <a-textarea :rows="4" placeholder="请输入投票说明" :maxlength="6" />
+          </div>
+        </div>
+        <!-- 投票说明 -->
+        <!-- 投票说明 -->
+        <div class="vote" style="align-items: flex-start">
+          <div class="votebox" style="margin-top: 10px">
+            <div class="voteimg"></div>
+            <div class="votename">投票说明：</div>
+          </div>
+          <div style="width: 500px">
+            <a-textarea :rows="4" placeholder="请输入投票说明" :maxlength="6" />
+          </div>
+        </div>
+        <!-- 投票说明 -->
+        <!-- 投票说明 -->
+        <div class="vote" style="align-items: flex-start">
+          <div class="votebox" style="margin-top: 10px">
+            <div class="voteimg"></div>
+            <div class="votename">投票说明：</div>
+          </div>
+          <div style="width: 500px">
+            <a-textarea :rows="4" placeholder="请输入投票说明" :maxlength="6" />
+          </div>
+        </div>
+        <!-- 投票说明 -->
+        <!-- 投票说明 -->
+        <div class="vote" style="align-items: flex-start">
+          <div class="votebox" style="margin-top: 10px">
+            <div class="voteimg"></div>
+            <div class="votename">投票说明：</div>
+          </div>
+          <div style="width: 500px">
+            <a-textarea :rows="4" placeholder="请输入投票说明" :maxlength="6" />
+          </div>
+        </div>
+        <!-- 投票说明 -->
+        <!-- 投票说明 -->
+        <div class="vote" style="align-items: flex-start">
+          <div class="votebox" style="margin-top: 10px">
+            <div class="voteimg"></div>
+            <div class="votename">投票说明：</div>
+          </div>
+          <div style="width: 500px">
+            <a-textarea :rows="4" placeholder="请输入投票说明" :maxlength="6" />
+          </div>
+        </div>
+        <!-- 投票说明 -->
+        <!-- 投票说明 -->
+        <div class="vote" style="align-items: flex-start">
+          <div class="votebox" style="margin-top: 10px">
+            <div class="voteimg"></div>
+            <div class="votename">投票说明：</div>
+          </div>
+          <div style="width: 500px">
+            <a-textarea :rows="4" placeholder="请输入投票说明" :maxlength="6" />
+          </div>
+        </div>
+        <!-- 投票说明 -->
+      </div>
+    </div>
+  </a-drawer>
+</template>
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "AddVote",
+  props: {
+    addvoteVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, ctx) {
+    const state = reactive({});
+    const closeDrawer = () => {
+      ctx.emit("update:addvoteVisible", false);
+    };
+
+    const afterVisibleChange = (bool) => {
+      console.log("state", bool);
+    };
+
+    const showDrawer = () => {
+      state.visible = true;
+    };
+
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      showDrawer,
+      closeDrawer,
+      // change,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.addvote {
+}
+.drawerStyle {
+  .drawerMain {
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        margin-left: 24px;
+      }
+    }
+    .contentMain {
+      .vote {
+        display: flex;
+        align-items: center;
+        margin-top: 32px;
+        margin-left: 20px;
+        .votebox {
+          width: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          // background-color: pink;
+          .voteimg {
+            width: 10px;
+            height: 10px;
+            margin-right: 5px;
+          }
+          .votename {
+            font-size: 14px;
+            font-weight: 400;
+            color: #333333;
+            line-height: 20px;
+          }
+        }
+
+        .votebtn {
+          width: 130px;
+          height: 40px;
+          background: #388be1;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 20px;
+        }
+        .voteclassify {
+          font-size: 14px;
+          font-weight: 400;
+          color: #999999;
+          line-height: 20px;
+          margin-top: 16px;
+        }
+        .ant-picker {
+          width: 424px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/system/SystemManage.vue b/src/views/system/SystemManage.vue
index ac3d9cfe..af79859e 100644
--- a/src/views/system/SystemManage.vue
+++ b/src/views/system/SystemManage.vue
@@ -21,195 +21,30 @@
       添加投票
     </div>
     <div>
-      <a-drawer
-        v-model:visible="visible"
-        class="drawerStyle"
-        style="color: red"
-        width="80%"
-        title="添加投票"
-        placement="right"
-        @after-visible-change="afterVisibleChange"
-      >
-        <div class="drawerMain">
-          <div class="header">
-            <div class="headerTitle">添加投票</div>
-            <img
-              style="width: 29px; height: 29px; cursor: pointer"
-              src="../../assets/images/basicinfo/close.png"
-              @click="closeDrawer"
-            />
-          </div>
-          <div class="contentMain">
-            <!-- 投票名称 -->
-            <div class="vote">
-              <div class="votebox">
-                <img
-                  class="voteimg"
-                  src="../../assets/images/basicinfo/asterisk.png"
-                />
-                <div class="votename">投票名称：</div>
-              </div>
-              <div style="width: 424px">
-                <a-input v-model:value="value" placeholder="请输入投票名称" />
-              </div>
-            </div>
-            <!-- 投票名称 -->
-            <!-- 创建投票 -->
-            <div class="vote">
-              <div class="votebox">
-                <img
-                  class="voteimg"
-                  src="../../assets/images/basicinfo/asterisk.png"
-                />
-                <div class="votename">创建投票：</div>
-              </div>
-              <div class="votebtn">创建投票</div>
-            </div>
-            <!-- 创建投票 -->
-            <!-- 起止时间 -->
-            <div class="vote">
-              <div class="votebox">
-                <div class="voteimg"></div>
-                <div class="votename">起止时间：</div>
-              </div>
-              <div class="votedate">
-                <a-range-picker />
-              </div>
-            </div>
-            <!-- 起止时间 -->
-            <!-- 基础投票数 -->
-            <div class="vote" style="align-items: flex-start">
-              <div class="votebox" style="margin-top: 10px">
-                <div class="voteimg"></div>
-                <div class="votename">基础投票数：</div>
-              </div>
-              <div>
-                <div class="votebtn">点击上传</div>
-                <div class="voteclassify">支持：xls.xlsx</div>
-              </div>
-            </div>
-            <!-- 基础投票数 -->
-            <!-- 投票说明 -->
-            <div class="vote" style="align-items: flex-start">
-              <div class="votebox" style="margin-top: 10px">
-                <div class="voteimg"></div>
-                <div class="votename">投票说明：</div>
-              </div>
-              <div style="width: 500px">
-                <a-textarea
-                  :rows="4"
-                  placeholder="请输入投票说明"
-                  :maxlength="6"
-                />
-              </div>
-            </div>
-            <!-- 投票说明 -->
-            <!-- 投票说明 -->
-            <div class="vote" style="align-items: flex-start">
-              <div class="votebox" style="margin-top: 10px">
-                <div class="voteimg"></div>
-                <div class="votename">投票说明：</div>
-              </div>
-              <div style="width: 500px">
-                <a-textarea
-                  :rows="4"
-                  placeholder="请输入投票说明"
-                  :maxlength="6"
-                />
-              </div>
-            </div>
-            <!-- 投票说明 -->
-            <!-- 投票说明 -->
-            <div class="vote" style="align-items: flex-start">
-              <div class="votebox" style="margin-top: 10px">
-                <div class="voteimg"></div>
-                <div class="votename">投票说明：</div>
-              </div>
-              <div style="width: 500px">
-                <a-textarea
-                  :rows="4"
-                  placeholder="请输入投票说明"
-                  :maxlength="6"
-                />
-              </div>
-            </div>
-            <!-- 投票说明 -->
-            <!-- 投票说明 -->
-            <div class="vote" style="align-items: flex-start">
-              <div class="votebox" style="margin-top: 10px">
-                <div class="voteimg"></div>
-                <div class="votename">投票说明：</div>
-              </div>
-              <div style="width: 500px">
-                <a-textarea
-                  :rows="4"
-                  placeholder="请输入投票说明"
-                  :maxlength="6"
-                />
-              </div>
-            </div>
-            <!-- 投票说明 -->
-            <!-- 投票说明 -->
-            <div class="vote" style="align-items: flex-start">
-              <div class="votebox" style="margin-top: 10px">
-                <div class="voteimg"></div>
-                <div class="votename">投票说明：</div>
-              </div>
-              <div style="width: 500px">
-                <a-textarea
-                  :rows="4"
-                  placeholder="请输入投票说明"
-                  :maxlength="6"
-                />
-              </div>
-            </div>
-            <!-- 投票说明 -->
-            <!-- 投票说明 -->
-            <div class="vote" style="align-items: flex-start">
-              <div class="votebox" style="margin-top: 10px">
-                <div class="voteimg"></div>
-                <div class="votename">投票说明：</div>
-              </div>
-              <div style="width: 500px">
-                <a-textarea
-                  :rows="4"
-                  placeholder="请输入投票说明"
-                  :maxlength="6"
-                />
-              </div>
-            </div>
-            <!-- 投票说明 -->
-          </div>
-        </div>
-      </a-drawer>
+      <add-vote v-model:addvoteVisible="visible" />
     </div>
   </div>
 </template>
 <script>
 import { reactive, toRefs } from "vue";
-
+import AddVote from "../../components/drawers/AddVote";
 export default {
   name: "SystemManage",
+  components: {
+    AddVote,
+  },
   setup() {
     const state = reactive({
-      visible: true,
+      visible: false,
     });
 
-    const afterVisibleChange = (bool) => {
-      console.log("visible", bool);
-    };
-
     const showDrawer = () => {
       state.visible = true;
     };
-    const closeDrawer = () => {
-      state.visible = false;
-    };
+
     return {
       ...toRefs(state),
-      afterVisibleChange,
       showDrawer,
-      closeDrawer,
     };
   },
 };
@@ -217,6 +52,14 @@ export default {
 <style lang="scss">
 .systemManage {
   width: 100%;
+  .ant-input-textarea-show-count {
+    position: relative;
+  }
+  .ant-input-textarea-show-count::after {
+    position: absolute;
+    right: 0px;
+    bottom: 0px;
+  }
 }
 .drawerStyle {
   .drawerMain {