From 6ff3cd691d7d19ea7f0681bffdb7a79f85a092f4 Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Sat, 24 Oct 2020 14:22:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E6=A1=A3=C3=A7=C2=AE=E9=97=AE?=
 =?UTF-8?q?=E7=AD=94=E4=B8=AD=E5=BF=83=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/imgs/jszc_btn_huifu.png            | Bin 0 -> 1255 bytes
 src/assets/imgs/jszc_ic_fabu.png              | Bin 0 -> 1076 bytes
 src/assets/imgs/jszc_ic_huida.png             | Bin 0 -> 1097 bytes
 src/assets/imgs/jszc_ic_liulan.png            | Bin 0 -> 1230 bytes
 src/components/wangE.vue                      |  12 +-
 src/components/wangEBd.vue                    | 156 ++++++
 .../answer-center/detail.vue                  | 514 ++++++++++++++++--
 7 files changed, 646 insertions(+), 36 deletions(-)
 create mode 100644 src/assets/imgs/jszc_btn_huifu.png
 create mode 100644 src/assets/imgs/jszc_ic_fabu.png
 create mode 100644 src/assets/imgs/jszc_ic_huida.png
 create mode 100644 src/assets/imgs/jszc_ic_liulan.png
 create mode 100644 src/components/wangEBd.vue

diff --git a/src/assets/imgs/jszc_btn_huifu.png b/src/assets/imgs/jszc_btn_huifu.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2ff2177f45e67f59a84f60e5ec724d89022d84a
GIT binary patch
literal 1255
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`k|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+n3Xd_B1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxOgGuk#6rQ`QqR!L
z#K720N5ROz&{E&PLf_C>*TB%qz|6|jTmcG{fVLH-q*(>IxIyg#@@$ndN=gc>^!3Zj
z%k|2Q_413-^$jg8fo2%#8yV>WRp=I1=9MH?=;jqG!%T2VElw`VEGWs$&r<-In3$Ab
zT4JjNbScCOxdm`z^NOLt1Pn0!io^naLp=kKmtYEgeeo;J&4sHjE(uCSxEHIz#UYgi
zsro^w#rdU0$-sz9QwCX8VC7ttnpl!w6q28x0}I7~jQo=P;*9(P1tXx76g0v!^HTE5
zi#5R-e0{Av^NLFn^O93NU2K(rM(AZ`rdU}Rnz~v#8Ce<{TNoM|x;i<Unwq-0m|M8I
zT3DDFm^s1py5uL9=BDPA!1Sgd^g80y3rY*Q1wfl!Qj0RnQd8WD@^clyezwZQ?G|&K
z=0WwQ;C71zPQCg-$LND%7AdA-Lcrt$V#3ockONQosd>QUUIa|niC_NdGB7YkdAc};
zRNR_!`MkDEqR6q2*6)2xPVz;k9#+x0a>niEnU<+Kt~Y(^ma15vIw$1Hd(!VGvy0A}
z4N}~aZL&*qbVRr(o%nvG_;qg98H=wk_sy-o_r2`At@$PE9l}#w#E)I*7km1ykVkvp
z*Y3I7`;^<g&nPxVd1{0oV9WC2-*Cik*@xEBB?0Q1Pxl!%H-DJ$p+R)X#}<{eiN|+8
znd-ett@-MQhBDiq!pu9kPPN~C9sG95+pWx-I+D1rJ3iG|b?sZq++DdF#Y5y1bB|Td
zU$x?^vDg&r<1?>y?@Bi{KV`bx$iE{b;{OY&-b{~MSA1TVP2Rrnc(i`E>-Kg1e!^*n
zpZeumwyOI*&SW-f?9(zcPl#H-@$Hp8zP)cI{%hU;h;_ZxYbT$Rm0uOt+TCc}z2oxt
zyrTxM3Oj;%78*YK+gsTCWrta)@Zx{ze=h7UP4e~MKC$+4%QKS_?;RJiZT@f>Fm$}}
VxyN2{^De09@pScbS?83{1OT#G$2|Z5

literal 0
HcmV?d00001

diff --git a/src/assets/imgs/jszc_ic_fabu.png b/src/assets/imgs/jszc_ic_fabu.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9b236457f8dbae2457f8f55b9000ff8a1c9d9e3
GIT binary patch
literal 1076
zcmaJ=OK1~87~VE*DWxer*h78LaqGcClif|4Hd!0fB%3yYZi#8IIe2ihJ8715ch=pB
z*_NV3FD-%;1Rp2qK?OzWNf7aYEd>wi%|k&C1@Y)XkWxH2n>MKj<HGDb_`dJ|{(t^i
zNl#6<JC1fx6y;7Og$$WHozdP#{^!dVzLTjJCvtci6>vo|Ar)0n9)gr6&B6?nl=(~V
z;V4D9`qgX>=fp`~Mw(Z0FkV|T2%DltBeo&QC5S;D&Z>Ht{_*k+4OAse&jdtPG~%$R
zCKpUNy)c!P7fNzSp(AI(sLc}r4Ppt{+MI6jc9^c}@?`BCGc>3|a4Agho63o45Jx5i
z0q?L!=7xe`B;@6WhgkpcAn>tVh+%^a=l8H2&kpl}5peL)B$}xd_>3@q5R2@>bP;2N
zXP8Q*;;s0-$ed-kP>5*w7@yBW5FTq@$CB;Qt^S&V04>>64Xh#^IEqppm2sFRPWMyL
zjJm9D9h8X_jIkwy;k>MqQVl4I|A%T?9c|$ZJoNidVJkatKqdn%R5oRDafN;-l)=YM
zC}Ct~5t^%2F<nF$Sw&<3AF%{Z&#1bBD%L=iAc}lSx3HwkFeQX(BH>k4h4=gXQGtzd
zoIl8MTp||qbFoA;E`)?wARzeI8dpGaS%W&Rag{@^uOZjz1<fFl1!$_5p)zhF4ODaH
z)rMZ8;|=u=xJqL$Y(p+X%rMT){&mx}Bho(3vfj63Q}2AJlXf>rU;j+M-Xm|~QA&tr
z?d|;Huf4uLmuo`-U2S>2t>tdh=Dp-%6kPe#eCpv?&-I~K6Pfj6D_`0-TY(7NU&lt9
zmY?*lyH<BPz|EGOtCM4~_T~HCYxarc(n{0F+jM91VDQL{d~U9Db7jz;Yj52VlZ$@v
zaqGca&z*tY-%HaQXTa@~F;DWt$m*@<vHow7?#R2fT-W1*CmHX`u6HlLFp9fv?x)9>
ZC>ND2fvwNmH_FaCP9>&<XR(Xd{s0hAQ}F-*

literal 0
HcmV?d00001

diff --git a/src/assets/imgs/jszc_ic_huida.png b/src/assets/imgs/jszc_ic_huida.png
new file mode 100644
index 0000000000000000000000000000000000000000..b553c91bd27386cc36ccb6c2b09ad4f0d8775a26
GIT binary patch
literal 1097
zcmaJ=TSyd97#?>^OQ{CRpn^D!SqbjW%<j6E!Bux1tqn(I-O`61nw>f7pfhKjIX0s`
z6w$>(2%@JhU=n2yMbVoD8T1m^Qxp^xV$e%LNj+6mXUw%8+6K;?3*Yzs-~XTgobGJj
zy{3F~IYm)xGJC`<nQ1cCt|}$}9qgquWZHyVdT<x&#g1%2Dy5=41Q}iKgIOr6BSVj2
zJw^Gev|JDFk=g_W=|S1U1YO-EY>KLHbWK?qfEeUqpJpVPkM|xhKvR=Ucb&vZW;5*9
z_KaGvYqUM5j1DLXm1%4M^{zk!bcki(>Vt+YxJhPFS0HQem}S5s1P>&c-==z`PSA`j
z2<n2-fWk-OAeIR7(Fhlg)`AenCs;1d^5Fo-3tUvFi-Dz&A<-<gSICO3OR>l<$@F7v
z3M}h5PS6Plk=4iYi3HIIv7u0aAOiM?fn_&f*i{7u5!#BSnOH*x@D$}d8pcV6IQ^Z1
zZZ69j_EMQh!B|%|Sw6^lDHVW{^na+XFQaXog@641Q`pXpn2^mv8x30uxwzgcFO(@X
zTTsTx${{pZsA6Y7!pQDNCI}HrU{|+hsK~Kv773ChWDFb2h5|EUk|7d7O;d$PG#rZY
z@i-rj^E}^@PN&1MmQ*AaOSN**SiH5s6_GNmLjxDM>K|^RDA(%+-6WAkXlaL_+G-&k
zEaog|#l1v}>Me2A;$C7!xhyfmdN=#mO&5+x`*_Rcz9pOG&W8qRcZ>A3b27D$yovi6
zF_m*)=3m*LeE#aAtM_*M798-SV|(e1n?6lFK0Q}P-}Nt4gCEjNc0YLTpGQrzPkfat
zv<Cm9YvT0x2z?P8E_qj;f4J@oHxZ}HPL-saX4|fA-G=>de0Mg|M^?-`P4z3sUL1AT
zpFca^n0j{X3pX>#mydnEa$#`7t)##C7HXz;sGlmvb~0OTSDZ=BZKK~eFB|~vC$2S|
x^A9EH>u;ZqfAFbh#aM@LsFwa&y<w6nDWxVqgucGMTsq}F?o3O&cq@JI*e`$aUxfew

literal 0
HcmV?d00001

diff --git a/src/assets/imgs/jszc_ic_liulan.png b/src/assets/imgs/jszc_ic_liulan.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef9c0925e62f41e1c5d01208c5b2e74e8b6b0c57
GIT binary patch
literal 1230
zcmeAS@N?(olHy`uVBq!ia0vp^0zk~i!3HGN^yhQ|DajJoh?3y^w370~qErUQl>DSr
z1<%~X^wgl##FWaylc_cg49v=zArU1JzCKpT`MG+DAT@dwxdlMo3=B5*6$OdO*{LN8
zNvY|XdA3ULckfqH$V{<S3ODsN@GWpo&B*kqDoPEm@(W3>%1*XSQL?vFu&J;D8jzb>
zlBiITo0C^;Rbi_HHrEQs1_|pcDS(xfWZNo192Makpx~Tel&WB=XQrEMXkwvYZmDNz
zW@2D$rlVkFU}&jtV4-hltZQIsWngAyYOVkUN<iC+Qqrt~T-=~`0eQAc86_nJR{Hwo
z<>h+i#(Mch>H3D2mOwL%^o@*kfhu&1EAvVcD|GXUm0>2hq!uR^WfqiV=I1GZOiWD5
zFD<cE0=g99h1>$Tv3bSNU;+l1ennz|zM-B0$V)JVzP|XC=H|jx7ncO3BHWAB;Np<V
zf>iyW)Z+ZoqGVvir744~DzI`cN=+=uFAB-e&w+(vKt_H^esM;Afr1gxNeUX_nRzMs
z<;9v{4Zglso_WP3iFwJXo-VdZKqK@rGgGWg49s1eoLrm?jV%lf4PBj_%$?mVP0XFm
zER7vaj18S(dR_99OLJ56N?>|Z5PF?)>IJ2R+ybD@E~!PCWvMA{Mftf3U_V=B;&zKA
zPV=C8Q*gV*5vN{#pkwqwF^d$_Fd<;_0Wsm}7RZ68{M0;PaxVg=>m8xDqZt?&9X(wf
zLn>}9xx82VXrRpTLjS;^e@xAbd~||}*x6RMd$f3*)L}D<a0%k!Iw{M;rZ#)h?X$8z
zK|vZuGjqy6tXcPcxt+c2t|jlb$NfF`{!aD2=MSsve$Mn!)1R*4wd7o}SHOg&>xH~`
z99X<^Z_ldzLMv>Wy?q|B?!IwY`dDFWrAS@w!ShLP7D%T{9Ddn<^3}%9%qt7RI~R-Q
zRDMuQl8bpZHRD;(_m|t5OO)i+Ca^T`aOIyj*W_KftMRRmEq3bC4o0`OC-J>ZIJtKJ
zmdkblN2dto{7yBokx>%d(%)3JbNkYWi(+CI+tjA#Gwq6XwkRw$vsrMYJ+`;@tM)-{
ztAaOYMC<Nlw<SEY3SW4T{pR}4MMkgA_ePYPmYmYOQ^C4b?nfi*nMbyJ*t^(E7P21J
ui#&6C=V7gD1%Ka0pD3C-`P=#*A_)u(=3e!8_*<MoC5)%5pUXO@geCxy&9G4b

literal 0
HcmV?d00001

diff --git a/src/components/wangE.vue b/src/components/wangE.vue
index d25e04b..f73c9ed 100644
--- a/src/components/wangE.vue
+++ b/src/components/wangE.vue
@@ -30,6 +30,10 @@ export default {
     isDisabled: {
       type: Boolean,
       default: false
+    },
+    menu:{
+      type: Array,
+      default: []
     }
   },
   watch: {
@@ -101,6 +105,9 @@ export default {
           // }
         }
       };
+      if(this.menu.length){
+        this.editor.config.menus = this.menu
+      }
       this.editor.config.onchange = html => {
         this.info_ = html; // 绑定当前逐渐地值
         this.$emit("change", this.info_); // 将内容同步到父组件中
@@ -138,9 +145,4 @@ export default {
   border: none!important;
   height: calc(100% - 80px)!important;
 }
-.text {
-  width: 100%;
-  border: 1px solid #ccc;
-  overflow-y: auto;
-}
 </style>
diff --git a/src/components/wangEBd.vue b/src/components/wangEBd.vue
new file mode 100644
index 0000000..2200251
--- /dev/null
+++ b/src/components/wangEBd.vue
@@ -0,0 +1,156 @@
+<template>
+  <section class="wangeditor_class">
+    <div ref="toolbar" class="toolbar1"></div>
+  </section>
+</template>
+<script>
+import E from "wangeditor";
+export default {
+  name: "editoritem",
+  data() {
+    return {
+      // uploadPath,
+      editor: null,
+      info_: null
+    };
+  },
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    isClear: {
+      type: Boolean,
+      default: false
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    full: {
+      type: Boolean,
+      default: true
+    },
+    menu:{
+      type: Array,
+      default: []
+    }
+  },
+  watch: {
+    isClear(val) {
+      // 触发清除文本域内容
+      if (val) {
+        this.editor.txt.clear();
+        this.info_ = null;
+      }
+    },
+    value: function(value) {
+      if (value !== this.editor.txt.html()) {
+        this.editor.txt.html(this.value);
+      }
+    },
+    isDisabled(value){
+      console.log(value)
+      this.editor.$textElem.attr("contenteditable", !value);
+    },
+    info_(val){
+      console.log(val);
+      this.$emit("change", val)
+    },
+    
+    //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
+  },
+  mounted() {
+    this.seteditor();
+    this.editor.txt.html(this.value);
+  },
+  methods: {
+    seteditor() {
+      // http://192.168.2.125:8080/admin/storage/create
+      this.editor = new E(this.$refs.toolbar);
+      this.editor.config.uploadImgShowBase64 = false; // base 64 存储图片
+      this.editor.config.uploadImgServer =
+        "/tp-jiwei-pcsvc/display/cigApi/common/uploadFile"; // 配置服务器端地址
+      this.editor.config.uploadImgHeaders = {}; // 自定义 header
+      this.editor.config.uploadFileName = "file"; // 后端接受上传文件的参数名
+      //   this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
+      this.editor.config.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
+      this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
+      this.editor.config.uploadImgParams = { category: "图片" };
+
+      this.editor.config.uploadImgHooks = {
+        fail: (xhr, editor, result) => {
+          // 插入图片失败回调
+        },
+        success: (xhr, editor, result) => {
+          // 图片上传成功回调
+        },
+        timeout: (xhr, editor) => {
+          // 网络超时的回调
+        },
+        error: (xhr, editor) => {
+          // 图片上传错误的回调
+        },
+        customInsert: (insertImg, result, editor) => {
+          // 图片上传成功，插入图片的回调
+          //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
+          // console.log(result.data[0].url)
+          //insertImg()为插入图片的函数
+          //循环插入图片
+          // for (let i = 0; i < 1; i++) {
+          console.log(result);
+          let imgUrl = "/tp-jiwei-pcsvc/display" + result.data.visitPath;
+          console.log(imgUrl);
+          insertImg(imgUrl);
+          // }
+        }
+      };
+      if(this.menu.length){
+        this.editor.config.menus = this.menu
+      }
+      this.editor.config.showFullScreen = this.full
+      this.editor.config.onchange = html => {
+        this.info_ = html; // 绑定当前逐渐地值
+        this.$emit("change", this.info_); // 将内容同步到父组件中
+      };
+      // 创建富文本编辑器
+      this.editor.create();
+    }
+  }
+};
+</script>
+<style>
+.wangeditor_class{
+  width: 100%;
+}
+.editor {
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+  z-index: 0;
+}
+.toolbar1{
+  height: 100%;
+}
+.toolbar1 .w-e-toolbar {
+  border-radius: 6px 6px 0 0;
+  border: solid 1px #edeef4!important;
+  padding: 0;
+}
+.toolbar1 .w-e-toolbar .w-e-menu{
+  width: 48px;
+  height: 48px;
+  font-size: 16px;
+}
+.toolbar1 .w-e-text-container {
+  border: solid 1px #edeef4!important;
+  background-color: #fbfbfc!important;
+  border-top:0!important;
+  height: calc(100% - 80px)!important;
+  border-radius: 0 0 6px 6px;
+}
+</style>
diff --git a/src/pages/technical-support/answer-center/detail.vue b/src/pages/technical-support/answer-center/detail.vue
index f3a1c1b..f8a9622 100644
--- a/src/pages/technical-support/answer-center/detail.vue
+++ b/src/pages/technical-support/answer-center/detail.vue
@@ -1,45 +1,295 @@
 <template>
-    <div class="detail_box">
-        <p class="now_page_title">
-            技术支持  /  问答中心  /  问答列表  /  
-        <span>详情</span>
+  <div class="detail_box">
+    <p class="now_page_title">
+      技术支持 / 问答中心 / 问答列表 /
+      <span>详情</span>
+    </p>
+    <div class="detail_content">
+      <div class="question">
+        <p>{{ question.title }}</p>
+        <p>
+          <span class="left">
+            <span>{{ question.asker }}</span
+            >发布于 <span>{{ question.time }}</span>
+          </span>
+          <span class="right">
+            <img src="../../../assets/imgs/jszc_ic_huida.png" alt="" />
+            <span>{{ question.info_count }}</span>
+            <img src="../../../assets/imgs/jszc_ic_liulan.png" alt="" />
+            <span>{{ question.watcher }}</span>
+          </span>
         </p>
-        <div class="detail_content">
-
+        <div class="ques_content" v-html="question.content"></div>
+      </div>
+      <div class="answer">
+        <p>{{question.info_count}}条回答</p>
+        <div class="answer_list">
+            <div class="answer_box" v-for="(item,index) in answer" :key="'answer'+index+200">
+                <div class="picture">
+                    <img src="../../../assets/imgs/img_head.png" alt="" style="width:100%">
+                </div>
+                <div class="text" :style="index == answer.length-1||item.children?{border:'0'}:''">
+                    <p>
+                        <span class="left">{{item.username}}</span> 
+                        <span class="right"> 
+                            <span v-if="index==0||index==1||index==2">{{index==0?'沙发':index==1?'板凳':'地板'}}</span> 
+                            <span v-else>{{index}}楼</span> | <span>{{deal_time(item.created)}}</span> 
+                        </span> 
+                    </p>
+                    <div v-html="item.content" class="hf_content"></div>
+                    <div @click="showinput(index)" class="back" :style="item.children?{marginBottom:'10px'}:''"><img src="../../../assets/imgs/jszc_btn_huifu.png" alt=""> 回复</div>
+                    <div class="back_input" v-if="answer_index === index">
+                      <el-input
+                          :placeholder="'回复'+back_person"
+                          @blur="clear_index"
+                          :ref="'input'+index"
+                          v-model="back_info">
+                          <div slot="prefix" style="height:48px;line-height:48px;">
+                            <img src="../../../assets/imgs/img_head.png" alt="" style="width:24px;margin:0 10px 0 10px;vertical-align:-6px;"></div>
+                          <div slot="suffix" class="back_solt">回复</div>
+                      </el-input>
+                    </div>
+                    <div class="back_fllow answer_box" v-for="(it,idx) in item.children" :key="'ans_child'+idx+5000" v-if="idx<=4||answer_child_index===index">
+                        <div class="picture">
+                            <img src="../../../assets/imgs/img_head.png" alt="" style="width:100%">
+                        </div>
+                        <div class="text" :style="idx == item.children.length-1?{border:'0'}:''">
+                            <p>
+                                <span class="left">{{it.username}} <span><span style="color:#bcc1d0;margin:0 9px;">回复</span>{{it.answered_user}}</span> </span> 
+                                <span class="right"> 
+                                    <span></span><span>{{deal_time(it.created)}}</span> 
+                                </span> 
+                            </p>
+                            <div v-html="it.content" class="hf_content"></div>
+                            <div @click="showinput(index,idx)" class="back"><img src="../../../assets/imgs/jszc_btn_huifu.png" alt=""> 回复</div>
+                        </div>
+                        <div class="back_input" style="padding:0;height:auto;margin-bottom:0;" v-if="answer_count[0]==index&&answer_count[1]==idx">
+                          <el-input
+                              :placeholder="'回复'+back_person"
+                              @blur="clear_index"
+                              :ref="'input'+index+idx"
+                              v-model="back_info">
+                              <div slot="prefix" style="height:48px;line-height:48px;">
+                                <img src="../../../assets/imgs/img_head.png" alt="" style="width:24px;margin:0 10px 0 10px;vertical-align:-6px;"></div>
+                              <div slot="suffix" class="back_solt">回复</div>
+                          </el-input>
+                        </div>
+                    </div>
+                    <div class="under_count" v-if="item.children&&item.children.length>5&&answer_child_index!==index">
+                      还有{{item.children.length-5}}条回复，<span @click="answer_child_index=index">点击查看</span> 
+                    </div>
+                </div>
+            </div>
         </div>
+      </div>
+
+      <div class="ans_self">
+        <p><img src="../../../assets/imgs/img_head.png" alt=""> <span>用户</span> </p>
+        <wang-e-bd class="editbox" v-model="editstr" :menu="menu" :full="false"></wang-e-bd>
+        <div class="pubilc"><img src="../../../assets/imgs/jszc_ic_fabu.png" alt="">发表</div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
+import wangEBd from '@/components/wangEBd'
 export default {
-    props: [],
-    components: {
-
-    },
-    data() {
-        return {
-
-        };
-    },
-    watch: {
-
-    },
-    computed: {
-
-    },
-    created() {
-
-    },
-    mounted() {
-
-    },
-    methods: {
-
-    },
+  props: [],
+  components: {
+      wangEBd
+  },
+  data() {
+    return {
+      question: {
+        title: "为什么感知服务提示无法注册",
+        asker: "林有有",
+        time: "2020-10-11 18:23:52",
+        info_count: 12,
+        watcher: "1,024",
+        content: "<h1>hahahahha</h1><p>13123123123123</p>",
+      },
+      answer_count:[],
+      answer_index:'',
+      answer_child_index:'',
+      back_person:'lll',
+      back_info:'',
+      menu:[
+          'bold',
+          'foreColor',
+          'code',
+          'link',
+          'image',
+          'video'
+      ],
+      editstr:'',
+      answer: [
+        {
+          id: 4,
+          username: "普通neo",
+          created: "2020-10-21T15:30:13+08:00",
+          content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+          answered_user: "",
+          children: [
+            {
+              id: 5,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 6,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 7,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 5,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 6,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 7,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+          ],
+        },
+        {
+          id: 4,
+          username: "普通neo",
+          created: "2020-10-21T15:30:13+08:00",
+          content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+          answered_user: "",
+          children: [
+            {
+              id: 5,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 6,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 7,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 5,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 6,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 7,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+          ],
+        },
+        {
+          id: 4,
+          username: "普通neo",
+          created: "2020-10-21T15:30:13+08:00",
+          content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+          answered_user: "",
+          children: null,
+        },
+      ],
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {
+     
+  },
+  mounted() {},
+  methods: {
+      deal_time(time){
+        return  time.split('+')[0].replace("T"," ")
+        
+      },
+      showinput(...arg){
+        console.log(arg);
+        this.answer_count=[]
+        this.answer_index=''
+        if(!arg[1]&&arg[1]!==0){
+          this.answer_index = arg[0]
+          setTimeout(()=>{
+            var temp = 'input'+arg[0]
+            this.$refs[temp][0].$refs.input.focus()
+          },200)
+        }else{
+          this.answer_count=arg
+          setTimeout(()=>{
+            this.$refs['input'+arg[0]+arg[1]][0].$refs.input.focus();
+          },200)
+          
+        }
+      },
+      clear_index(){
+        this.answer_count=[]
+        this.answer_index=''
+      }
+  },
 };
 </script>
 
 <style scoped>
+.detail_box {
+  /* min-height: calc(100% - 15px); */
+}
 .now_page_title {
   margin: 15px 0;
   color: #898d9e;
@@ -47,7 +297,209 @@ export default {
 .now_page_title span {
   color: #242c43;
 }
-.detail_content{
+.detail_content {
+  width: 100%;
+  /* min-height: calc(100% - 35px); */
+}
+.question,
+.answer {
+  width: 856px;
+  background-color: #fff;
+  box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.04);
+  border-radius: 12px;
+  padding: 24px 16px;
+  margin-bottom: 20px;
+}
+.question p {
+  font-size: 14px;
+  color: #a9aec0;
+  padding: 0 10px;
+  overflow: hidden;
+}
+.question p:nth-of-type(1) {
+  font-size: 24px;
+  color: #242c43;
+  line-height: 32px;
+}
+.question p:nth-of-type(2) {
+  margin-top: 14px;
+  padding-bottom: 14px;
+  border-bottom: 2px solid #f4f7fc;
+}
+.question p:nth-of-type(2) .left {
+  float: left;
+}
+.question p:nth-of-type(2) .left span {
+  color: #58617a;
+  margin: 0 8px;
+}
+.question p:nth-of-type(2) .left span:nth-of-type(1) {
+  margin-left: 0;
+}
+.question p:nth-of-type(2) .right {
+  float: right;
+}
+.question p:nth-of-type(2) .right span {
+  color: #242c43;
+  margin-right: 31px;
+}
+.question p:nth-of-type(2) .right img {
+  vertical-align: -2px;
+}
+.ques_content {
+  padding: 18px 8px 0 8px;
+}
+.answer{
+    padding: 25px 16px 25px 25px;
+}
+.answer p:nth-of-type(1){
+    font-size: 20px;
+	color: #242c43;
+}
+.answer_list{
+    margin-top: 9px;
+}
+.answer_box{
+    width: 100%;
+    overflow: hidden;
+    padding-top: 16px;
+}
+.answer_box .picture{
+    float: left;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+}
+.answer_box .text{
+    float: right;
+    width: calc(100% - 55px);
+    border-bottom: 2px solid #f4f7fc;
+    overflow: hidden;
+}
+/* .answer_list .answer_box:nth-last-of-type(1) .text{
+    border:0;
+} */
+.answer_box .text p{
+    font-size: 14px;
+	color: #e3e5ef;
+    overflow: hidden;
+}
+.answer_box .text p .left{
+    float: left;
+    color: #58617a;
+}
+.answer_box .text p .right{
+    float: right;
+}
+.answer_box .text p .right span{
+    color: #a9aec0;
+}
+.answer_box .text p .right span:nth-of-type(1){
+    margin-right: 17px;
+}
+.answer_box .text p .right span:nth-of-type(2){
+    margin-left: 17px;
+}
+.hf_content{
+    padding: 16px 0;
+    color: #242c43;
+}
+.text .back{
+    float: right;
+    color: #58617a;
+    font-size: 14px;
+    cursor: pointer;
+    margin-bottom: 16px;
+}
+.text .back img{
+    vertical-align: -3px;
+    margin-right: 4px;
+}
+.back_fllow{
+    background-color: #fbfbfc;
+    width: 100%;
+    padding: 16px;
+}
+.ans_self{
     width: 100%;
+    padding: 24px;
+    height: 354px;
+    background-color: #ffffff;
+	box-shadow: 0px 3px 6px 0px 
+		rgba(15, 19, 65, 0.04);
+	border-radius: 12px;
+    margin-bottom: 20px;
+}
+.ans_self p img{
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    vertical-align: -6px;
+    margin-right: 5px;
+}
+.ans_self p{
+    color: #58617a;
+}
+.editbox{
+    margin-top: 15px;
+    height: calc(100% - 65px);
+}
+.pubilc{
+    float: right;
+    width: 88px;
+	height: 40px;
+	background-color: #515fe7;
+	border-radius: 8px;
+    text-align: center;
+    line-height: 40px;
+    font-size: 16px;
+	color: #e6ebfe;
+    margin-top: -14px;
+    cursor: pointer;
 }
+.pubilc img{
+    margin-right: 8px;
+}
+.back_input{
+  width: 100%;
+  height: 80px;
+	background-color: #fbfbfc;
+  padding: 16px;
+  float: left;
+  margin-bottom: 24px;
+}
+.back_solt{
+  width: 60px;
+	height: 32px;
+  line-height: 32px;
+  text-align: center;
+	background-color: #515fe7;
+	border-radius: 4px;
+  font-size: 14px;
+	color: #e6ebfe;
+  margin-top: 7px;
+  margin-right: 7px;
+  cursor: pointer;
+}
+.under_count{
+  height: 46px;
+  line-height: 46px;
+  color: #58617a;
+  font-size: 14px;
+  background-color: #fbfbfc;
+  padding-left: 24px;
+}
+.under_count span{
+  color: #515fe7;
+  cursor: pointer;
+}
+</style>
+<style>
+  .back_input .el-input__inner{
+    height: 48px;
+    line-height: 48px;
+    padding-left: 50px;
+    padding-right: 80px;
+  }
 </style>
-- 
2.26.0