From 260650fce77cd4a8bca752ef64e27196baf49f4f Mon Sep 17 00:00:00 2001
From: songwc <songwc@dongwu-inc.com>
Date: Fri, 23 Sep 2022 16:45:05 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E8=B0=83?=
 =?UTF-8?q?=E7=A0=94=E9=A1=B5=E9=9D=A2=20style=EF=BC=9A=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=9A=E9=A1=B5=E9=9D=A2input=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/image/homeworkpage/rar.png     | Bin 0 -> 590 bytes
 src/assets/image/investigat/checkbox.png  | Bin 0 -> 734 bytes
 src/assets/image/investigat/checkbox2.png | Bin 0 -> 620 bytes
 src/views/ballotpage/BallotPage.vue       |  27 --
 src/views/homeworkpage/HomeworkPage.vue   | 292 ++++++++++++++++++-
 src/views/investigat/InvestigatPage.vue   | 334 ++++++++++++++++++++++
 6 files changed, 611 insertions(+), 42 deletions(-)
 create mode 100644 src/assets/image/homeworkpage/rar.png
 create mode 100644 src/assets/image/investigat/checkbox.png
 create mode 100644 src/assets/image/investigat/checkbox2.png
 create mode 100644 src/views/investigat/InvestigatPage.vue

diff --git a/src/assets/image/homeworkpage/rar.png b/src/assets/image/homeworkpage/rar.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b7bc337b39d55bbb0c5a8f186eba07678495c95
GIT binary patch
literal 590
zcmV-U0<ryxP)<h;3K|Lk000e1NJLTq000&M000^Y1^@s6vv#aN00001b5ch_0Itp)
z=>Px%2uVaiR7gwhmd|SwK^TUgFB@&z#B?<&)|OIgE0t<`Nb5}x9t8gYJw$Cwp@L8$
zc<>?~q6aVbV7=<alb2pRdnv?=AQeP};;)GIpi*gV18cI`k?FV^N}DDd5CrG)u{$%*
zy!(DT-;AjI#5kzy2)n4Kc@?l)z)n47X!V>(&f995sQlOpNP9iZjWNmtu^^cSH+ff5
z=d;^@$5q|X-{24=N1$~8qJ^AvOyAhd5S0%IPNX3|06)s$I9KIJW~Lh69C%MZXwQ`k
zm9;C<KY7Q82L~rdA=U?886;$4dG(?kn!2yy!N4d;jDS4^Zc$@QLcNlUvz(E`m*yG=
zYdKyC!ZviBgx$7Ls~0nH2j|P#U|<dLT(H_86g7(VyA2O4sFVr;!M{?Zm3#WX*5K+E
z`qUhF`wj5=KiD_tpSB{>4dIyi6n7n*C5R20=k-Ms?KC)_A+jG<7HSp6Dl2*~K+h>N
z_~T<}*Cp`)SP}UC9$w_&_=7*NCld{TyH3FKn`T1q8E}>%k%G2Pcy<j&Z^73ESe&f|
z)qR^3Yn57AI1a~do5|l^K}Q;1&ce~GiM4I00oGn>NZ}Fe8-{pa6X4F%5bc4t_l(lP
zEVS%};u1u=;oU<xm@&~$=3n2^iZ@lYLd+547j3@`?v$pj`#&^({MWOPVn!Oiu<Qs{
c^Ax%K6A(!6UeTFAV*mgE07*qoM6N<$g3G82AOHXW

literal 0
HcmV?d00001

diff --git a/src/assets/image/investigat/checkbox.png b/src/assets/image/investigat/checkbox.png
new file mode 100644
index 0000000000000000000000000000000000000000..808036e301d26aa3dc9c220837bcaf5495d43193
GIT binary patch
literal 734
zcmV<40wMj0P)<h;3K|Lk000e1NJLTq000vJ000sQ1^@s6xeVoL00001b5ch_0Itp)
z=>Px%m`OxIR5(walubxfQ547j=g#=vlhSZefwd@W6+sk8L{=t5>7vqjGm-N|DNBi<
zT|!X?L9L=sf=FuSjcM~Xt|}^vf`Wu-RVYM@bRo7d!jGBz=G_zXYKC!|3F$7+$B%RG
z|NJkZ$m#86@p+wW25<<#b^z4?Tqb-aMNc_^0jE{_P}oX^0W<2>kx+LSJWV8Q;d;*}
z*BBGazoQJUyMYupfze68JLS2josOlGS;hjG8I$cqd>KG@!qSI|O`VCE2`;CUJO_rw
z#0`#Re96Rfuuv?y7bKz#wac-Lu~MM?c-WT57<@*iwc4Q$`r*SGZ?IljCC5N~{87Ys
zmfv97$@PM1GX&2ENPqjVm8SFap}4#Ss6ZlObo;PSEP0Xz?QtUd!EE9FKCUn{c`uXB
zYo1~71;;Y3W@AVCxhk#PQIYnx`Y_W@z6lUt9E_9?XNycb^_YOhV%KHR3CGgzW^<vq
zybh>u)PA3hxuBe8U0ddaNcxlZyE~!O>(cK=Q>>R&J0bEiHQ{LL01I@I8Jk~AB!&}~
zUXz<Do;pj6OaBrf;9=uHyZ*_C*>aNt$H<J%ts)V4pRn}R{|$@FT4ugY^{+U%VnWWa
zu2uf`HDjq3CD8U;O*=Khta_Zb@|U?swNp<3>|2ZgVOw5f@RSb=$CIa+sUczM89(~R
zUkzRMfnnwWXBm9H*lMJO+UCPDip~e+XsM+o&=w+|E4H*@Ti#@-vV>)H71)U$Ft~oP
zb~0n~C=vH8uv1P&-{`mkaMz-Y4zw|N_g_ZO0uS5n4u<Me;7PEE20U-rTVjm6v#8L6
zZVfXxfzZi>k8s_tl3!33m|2&V<Fc6vEdc8Ne2zZ>j05z71qPi~ZKP1?U%zTk*iz7<
Q?f?J)07*qoM6N<$g5;)N=>Px#

literal 0
HcmV?d00001

diff --git a/src/assets/image/investigat/checkbox2.png b/src/assets/image/investigat/checkbox2.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9f6cf815aebeca54b99ab34557bb640151be72e
GIT binary patch
literal 620
zcmV-y0+aoTP)<h;3K|Lk000e1NJLTq000vJ000sQ1^@s6xeVoL00001b5ch_0Itp)
z=>Px%CP_p=R5(walut+$aTLeD@3-sDNM(4apgNS@x^$9=j7*5gOKHq*<c=t1C=ztb
zLkBz6vA=YR+L?`P=Hf9b3pxY|(Jd6BL+e56U_|NeZ+3s*n6-`E6m;M5%X=T*<Gt?_
ztP<nnR3G>09sp+m90srxKt#c3G4hNFJPG?!@9RsYUT|_zhbVKO;DU(qRaAK~zsH{2
z_6<#lqWxmn4Pr=ux26(Z4hJ{S*BC2cj;9Aicpbn<;98TbbscL?z-B4ws~}toyF%Cg
z6zhLsX|H$!qH=^e8oKuETA+XRjIS>cyrRpg_Q^r{UWJ{!O{=9<&q8?dY1V$e9#AbO
zo!55(lL)f*NEMd$ilbC=Jj`0BHv)=t&pl>q*+es{Tsc^UIezg?LU?T=+dQ>VShbnF
zz6F>sGVqZ0Vp1>AN^K3(q8ou_a-~yL7!t=@+AE@_0@rG51Qgd~e0{)xo;bP1U7`~2
z0@vEzFf6azN#2vr*Gz7o(?4mYS{feHEA<+M{^f1@rD@WPh5gO18tE?M>zf3>R$-ZZ
z@e(OrfosKn+)&g`qpZxKDlFdUQc}+}a<my=-yuv>;M&7=c9KT~JJ)L`$J6IUIJUx0
zwYip!jvD}n*JX5|pWw0oj9vqt^`j$%d0@bKP~{Sp%2Z{OU5I{Ri<OMpNOnUoM8O9{
z(eRots0NJBWk*5xP|ypY<Ii*a0iXcLODar+eW~gCP5lNPWC7Uc54aTo0000<MNUMn
GLSTYA2q8!S

literal 0
HcmV?d00001

diff --git a/src/views/ballotpage/BallotPage.vue b/src/views/ballotpage/BallotPage.vue
index 55eafe7..e0c8148 100644
--- a/src/views/ballotpage/BallotPage.vue
+++ b/src/views/ballotpage/BallotPage.vue
@@ -1,33 +1,6 @@
 <template>
   <div class="ballotpage">
     <TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead>
-    <!-- <div class="main">
-      <div class="title">
-        <div class="inner">
-          <div class="titlemain clearfix">
-            <div class="imgTime clearfix">
-              <div class="img"></div>
-              <div class="time">2022-07-20 20:00-21:00</div>
-            </div>
-            <div class="preNext clearfix">
-              <div class="sameone pre" style="margin-right: 5px"></div>
-              <div class="sametwo">上一个</div>
-              <div class="sametwo" style="margin-left: 15.5px">下一个</div>
-              <div class="sameone next" style="margin-left: 5px"></div>
-            </div>
-          </div>
-          <div class="allbtn">
-            <button class="samebtn btnone">观看</button>
-            <button class="samebtn btntwo" style="margin-left: 9px">
-              签到
-            </button>
-            <button class="samebtn btnthr" style="margin-left: 9px">
-              评估
-            </button>
-          </div>
-        </div>
-      </div>
-    </div> -->
 
     <div class="notice">
       <div class="noticebox">
diff --git a/src/views/homeworkpage/HomeworkPage.vue b/src/views/homeworkpage/HomeworkPage.vue
index 971569a..0ffb8ac 100644
--- a/src/views/homeworkpage/HomeworkPage.vue
+++ b/src/views/homeworkpage/HomeworkPage.vue
@@ -72,11 +72,74 @@
           </div>
 
           <div class="contentfor clearfix">
-            <textarea type="text" class="inputbox" />
+            <el-input
+              v-model="textarea1"
+              :autosize="{ minRows: 12.5, maxRows: 12.5 }"
+              resize="none"
+              type="textarea"
+              @input="textareaInput"
+              class="input"
+            />
+
+            <div
+              class="uploadDetail"
+              :style="{ display: uploadfile ? 'block' : 'none' }"
+            >
+              <div class="square clearfix">
+                <div class="squarecontent1">
+                  <div class="rar"></div>
+                  <div class="rarDetail">
+                    <span class="detail1" style="margin-right: 42px">
+                      文件名称1.rar
+                    </span>
+                    <span class="detail2" style="margin-right: 10px">48%</span>
+                    <span class="detail1">正在上传</span>
+                    <div class="progress">
+                      <div class="progressinner"></div>
+                    </div>
+                  </div>
+                  <button class="btn btndetail">暂停</button>
+                  <button class="btn">取消</button>
+                </div>
+
+                <div class="squarecontent2">
+                  <div class="rar"></div>
+                  <div class="rarDetail">
+                    <span class="detail1" style="margin-right: 42px">
+                      文件名称2.rar
+                    </span>
+                    <span class="detail2" style="margin-right: 10px">80%</span>
+                    <span class="detail1">上传失败</span>
+                    <div class="progress">
+                      <div class="progressinner"></div>
+                    </div>
+                  </div>
+                  <button class="btn btndetail">重传</button>
+                  <button class="btn">取消</button>
+                </div>
+
+                <div class="squarecontent3">
+                  <div class="rar"></div>
+                  <div class="rarDetail">
+                    <span class="detail1" style="margin-right: 34px">
+                      文件名称3.rar
+                    </span>
+                    <span class="detail2" style="margin-right: 10px">100%</span>
+                    <span class="detail1">上传成功</span>
+                    <div class="progress">
+                      <div class="progressinner"></div>
+                    </div>
+                  </div>
+                  <button class="btn btndetail">删除</button>
+                </div>
+              </div>
+              <div class="triangle"></div>
+            </div>
           </div>
+
           <div class="btnbox">
             <div class="btnn">
-              <button class="btns btno">上传</button>
+              <button class="btns btno" @click="uploadFile">上传</button>
               <button class="btns btnt">提交</button>
             </div>
           </div>
@@ -112,14 +175,31 @@
 </template>
 
 <script>
-// import { reactive, toRefs } from "vue";
+import { reactive, toRefs } from "vue";
 import TitleHead from "@/components/TitleHead.vue";
 export default {
   name: "HomeworkPage",
   components: {
     TitleHead,
   },
-  setup() {},
+  setup() {
+    const state = reactive({
+      uploadfile: false,
+      textarea1: " ",
+    });
+    const uploadFile = () => {
+      state.uploadfile = !state.uploadfile;
+    };
+    const textareaInput = (e) => {
+      // console.log("eee", e);
+      state.textarea1 = e;
+    };
+    return {
+      ...toRefs(state),
+      uploadFile,
+      textareaInput,
+    };
+  },
 };
 </script>
 
@@ -320,34 +400,216 @@ export default {
           margin-bottom: 34px;
           height: 200px;
           // background-color: red;
-          .inputbox {
-            width: 100%;
+          position: relative;
+          // .input {
+          //   background-color: #f5f6f7;
+          // }
+          .el-textarea__inner {
             background-color: #f5f6f7;
-            border: 0;
-            height: 256px;
-            border-radius: 4px;
-            // border-color: blue;
           }
-          .inputbox:focus {
-            outline: none !important;
-            border-color: #719ece;
-            box-shadow: 0 0 10px #719ece;
+          .uploadDetail {
+            position: absolute;
+            // top: 110px;
+            top: 120px;
+            right: 0px;
+            z-index: 999;
+            .triangle {
+              top: 156px;
+              left: 110px;
+              width: 0;
+              height: 0;
+              position: absolute;
+              border-right: 5px solid transparent;
+              border-left: 5px solid transparent;
+              border-top: 5px solid #fff;
+              // box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
+            }
+
+            .square {
+              // width: 475px;
+              width: 100%;
+              height: 156px;
+              background: #ffffff;
+              box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
+              border-radius: 8px;
+              .squarecontent1 {
+                // padding-top: 18px;
+                margin-top: 10px;
+                display: flex;
+                .rar {
+                  margin: 12px 15px 0 27px;
+                  width: 19px;
+                  height: 22px;
+                  background-size: 100% 100%;
+                  background-image: url("../../assets/image/homeworkpage/rar.png");
+                }
+                .rarDetail {
+                  .detail1 {
+                    // height: 14px;
+                    font-size: 12px;
+                    line-height: 30px;
+                    font-weight: 500;
+                    color: #677d86;
+                  }
+                  .detail2 {
+                    // height: 11px;
+                    font-size: 12px;
+                    font-weight: 500;
+                    color: #277aff;
+                  }
+                  .progress {
+                    width: 202px;
+                    height: 8px;
+                    background: #e8f1fe;
+                    border-radius: 4px;
+                    .progressinner {
+                      width: 48%;
+                      height: 8px;
+                      background: linear-gradient(
+                        0deg,
+                        #2478ff 0%,
+                        #5093ff 100%
+                      );
+                      border-radius: 4px;
+                    }
+                  }
+                }
+                .btn {
+                  border: 0;
+                  background-color: #fff;
+                  color: #277aff;
+                  margin-top: 8px;
+                  cursor: pointer;
+                  width: 40px;
+                }
+              }
+
+              .squarecontent2 {
+                margin-top: 5px;
+                display: flex;
+                .rar {
+                  margin: 12px 15px 0 27px;
+                  width: 19px;
+                  height: 22px;
+                  background-size: 100% 100%;
+                  background-image: url("../../assets/image/homeworkpage/rar.png");
+                }
+                .rarDetail {
+                  .detail1 {
+                    // height: 14px;
+                    font-size: 12px;
+                    line-height: 30px;
+                    font-weight: 500;
+                    color: #677d86;
+                  }
+                  .detail2 {
+                    // height: 11px;
+                    font-size: 12px;
+                    font-weight: 500;
+                    color: #277aff;
+                  }
+                  .progress {
+                    width: 202px;
+                    height: 8px;
+                    background: #e8f1fe;
+                    border-radius: 4px;
+                    .progressinner {
+                      width: 80%;
+                      height: 8px;
+                      background: linear-gradient(
+                        0deg,
+                        #ee625e 0%,
+                        #eea4a1 100%
+                      );
+                      border-radius: 4px;
+                    }
+                  }
+                }
+                .btn {
+                  border: 0;
+                  background-color: #fff;
+                  color: #277aff;
+                  margin-top: 8px;
+                  cursor: pointer;
+                  width: 40px;
+                }
+                .btndetail {
+                  // margin-left: 25px;
+                }
+              }
+
+              .squarecontent3 {
+                margin-top: 5px;
+                display: flex;
+                .rar {
+                  margin: 12px 15px 0 27px;
+                  width: 19px;
+                  height: 22px;
+                  background-size: 100% 100%;
+                  background-image: url("../../assets/image/homeworkpage/rar.png");
+                }
+                .rarDetail {
+                  .detail1 {
+                    // height: 14px;
+                    font-size: 12px;
+                    line-height: 30px;
+                    font-weight: 500;
+                    color: #677d86;
+                  }
+                  .detail2 {
+                    // height: 11px;
+                    font-size: 12px;
+                    font-weight: 500;
+                    color: #277aff;
+                  }
+                  .progress {
+                    width: 202px;
+                    height: 8px;
+                    background: #e8f1fe;
+                    border-radius: 4px;
+                    .progressinner {
+                      width: 100%;
+                      height: 8px;
+                      background: linear-gradient(
+                        0deg,
+                        #36d1ae 0%,
+                        #3be5bf 100%
+                      );
+                      border-radius: 4px;
+                    }
+                  }
+                }
+                .btn {
+                  border: 0;
+                  background-color: #fff;
+                  color: #277aff;
+                  margin-top: 8px;
+                  cursor: pointer;
+                }
+                .btndetail {
+                  margin-left: 25px;
+                }
+              }
+            }
           }
         }
+
         .btnbox {
-          margin-top: 80px;
+          margin-top: 90px;
           // height: 20px;
           width: 100%;
           // background-color: red;
           display: flex;
           justify-content: center;
           margin-bottom: 20px;
+
           .btnn {
             color: #fff;
             width: 60%;
             font-size: 14px;
             display: flex;
             justify-content: space-between;
+
             .btns {
               color: #fff;
               width: 83px;
diff --git a/src/views/investigat/InvestigatPage.vue b/src/views/investigat/InvestigatPage.vue
new file mode 100644
index 0000000..ec8c6e3
--- /dev/null
+++ b/src/views/investigat/InvestigatPage.vue
@@ -0,0 +1,334 @@
+<template>
+  <div class="Investigat">
+    <TitleHead text="【调研】管理者进阶腾飞班 - 培训阶段性调研"></TitleHead>
+
+    <div class="notice">
+      <div class="noticebox">
+        <div class="mani">
+          <div class="dir">
+            <div class="samegt pre"></div>
+            <div class="sameg">上一个</div>
+            <div class="sameg" style="margin-left: 15.5px">下一个</div>
+            <div class="samegt next"></div>
+          </div>
+          <div
+            class="question"
+            v-for="(value, index) in question"
+            :key="index"
+            :style="{ 'margin-top': '20px' }"
+          >
+            <div class="text">{{ value.text }}</div>
+            <div class="answerL">
+              <div>完全没用</div>
+              <div>非常好</div>
+            </div>
+            <div class="answer">
+              <div class="answerC">
+                <div class="itemwrap">
+                  <div
+                    class="answerCitem"
+                    v-for="(item, key) in select"
+                    :key="key"
+                    :style="{
+                      background:
+                        value.selectAnswer === item
+                          ? 'rgba(86, 163, 249, 1)'
+                          : 'rgba(86, 163, 249, 0)',
+                      color:
+                        value.selectAnswer === item
+                          ? '#fff'
+                          : 'rgba(86, 163, 249, 1)',
+                    }"
+                    @click="score(value, item)"
+                  >
+                    <div>{{ item }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="question" style="margin-top: 20px">
+            <div class="text">4.类似相应的课程，您认为适合哪些人观看？</div>
+            <div
+              v-for="(value, index) in viewpeople"
+              :key="index"
+              style="display: flex; align-items: center"
+              :style="{ 'margin-top': '22px' }"
+              @click="selectPeople(value)"
+            >
+              <img
+                style="width: 14px; height: 13px; cursor: pointer"
+                :src="
+                  value.select
+                    ? require('../../assets/image/investigat/checkbox.png')
+                    : require('../../assets/image/investigat/checkbox2.png')
+                "
+              />
+              <div class="people" style="font-size: 13px; margin-left: 7px">
+                {{ value.text }}
+              </div>
+            </div>
+          </div>
+          <div class="question" style="margin-top: 21px">
+            <div class="text">5.您的其他意见</div>
+            <div style="margin-top: 21px; position: relative">
+              <el-input
+                style="width: 100%"
+                v-model="textarea1"
+                :autosize="{ minRows: 5, maxRows: 5 }"
+                resize="none"
+                maxlength="200"
+                type="textarea"
+                @input="textareaInput"
+              />
+              <div class="words">{{ textarealength }}/200</div>
+            </div>
+          </div>
+          <div style="display: flex; justify-content: center">
+            <div class="submit">提交</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs } from "vue";
+import TitleHead from "@/components/TitleHead.vue";
+export default {
+  name: "InvestigatPage",
+  components: {
+    TitleHead,
+  },
+  setup() {
+    const state = reactive({
+      question: [
+        {
+          id: 1,
+          text: "1.您觉得课程对您是否有用？",
+          selectAnswer: 0,
+        },
+        {
+          id: 2,
+          text: "2.您是否会推荐课程给其他同事？",
+          selectAnswer: 0,
+        },
+        {
+          id: 3,
+          text: "3.后续该讲师有其他课程是否会参与？",
+          selectAnswer: 0,
+        },
+      ],
+      select: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      viewpeople: [
+        {
+          id: 1,
+          text: "基础员工",
+          select: false,
+        },
+        {
+          id: 2,
+          text: "中层管理",
+          select: false,
+        },
+        {
+          id: 3,
+          text: "专业人员",
+          select: false,
+        },
+        {
+          id: 4,
+          text: "高级管理",
+          select: false,
+        },
+      ],
+      textarea1: "",
+      textarealength: 0,
+    });
+    const score = (value, item) => {
+      let arr = state.question;
+      arr.map((i) => {
+        if (i.id === value.id) {
+          i.selectAnswer = item;
+        }
+      });
+      state.question = arr;
+    };
+    const selectPeople = (value) => {
+      let arr = state.viewpeople;
+      arr.map((i) => {
+        if (i.id === value.id) {
+          i.select = !i.select;
+        }
+      });
+      state.viewpeople = arr;
+    };
+    const textareaInput = (e) => {
+      // console.log("eee", e);
+      state.textarea1 = e;
+      state.textarealength = e.length;
+    };
+    return {
+      ...toRefs(state),
+      score,
+      selectPeople,
+      textareaInput,
+    };
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss">
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: table;
+  clear: both;
+}
+.Investigat {
+  width: 100%;
+
+  .notice {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    .noticebox {
+      width: 90%;
+      background: #fff;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      .mani {
+        width: 90%;
+        margin-top: 20px;
+
+        .dir {
+          width: 100%;
+          height: 20px;
+          // background-color: red;
+          margin-bottom: 20px;
+          display: flex;
+          justify-content: right;
+          font-size: 12px;
+          color: #2478ff;
+          .samegt {
+            margin-top: 3px;
+            height: 12px;
+            width: 12px;
+          }
+          .samege {
+            line-height: 12px;
+          }
+          .pre {
+            margin-right: 5px;
+            // background-size: 100%;
+            background-image: url(../../assets/image/ballotpage/pre.png);
+          }
+          .next {
+            margin-left: 5px;
+            // background-size: 100%;
+            background-image: url(../../assets/image/ballotpage/next.png);
+          }
+        }
+
+        .question {
+          .text {
+            font-size: 14px;
+            font-weight: 500;
+            color: #333330;
+          }
+          .answerL {
+            margin-bottom: -20px;
+            margin-top: 12px;
+            font-size: 13px;
+            width: 100%;
+            color: #56a3f9;
+            display: flex;
+            justify-content: space-between;
+          }
+          .answer {
+            margin-top: 30px;
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            font-weight: 500;
+            color: #56a3f9;
+            .answerC {
+              // width: 540px;
+              width: 100%;
+              height: 43px;
+              border: 1px solid #d7e5fd;
+              border-radius: 8px;
+              display: flex;
+              align-items: center;
+              // margin-left: 11px;
+              // margin-right: 11px;
+              justify-content: center;
+              .itemwrap {
+                width: 92%;
+                display: flex;
+                justify-content: space-between;
+                .answerCitem {
+                  width: 24px;
+                  height: 24px;
+                  border: 1px solid #56a3f9;
+                  border-radius: 4px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  // margin-left: 10px;
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+        }
+
+        .question .answer .question .people {
+          font-size: 13px;
+          font-weight: 500;
+          color: #333330;
+          margin-left: 6px;
+        }
+        .question .words {
+          position: absolute;
+          right: 15px;
+          bottom: 5px;
+          font-size: 14px;
+          font-weight: 500;
+          color: #333330;
+        }
+        .question .el-textarea__inner {
+          border-radius: 8px;
+          background-color: rgba(245, 246, 247, 1);
+        }
+        .submit {
+          // width: 126px;
+          width: 100%;
+          height: 31.5px;
+          background: #2478ff;
+          box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+          border-radius: 4px;
+          font-size: 14px;
+          font-weight: 800;
+          color: #ffffff;
+          line-height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          margin-top: 10.5px;
+          margin-bottom: 30px;
+        }
+      }
+    }
+  }
+}
+</style>