zengyicheng 2 年 前
コミット
1dc52717af
1 ファイル変更287 行追加248 行削除
  1. 287 248
      src/components/pages/race/eventCenter/anliDetail.vue

+ 287 - 248
src/components/pages/race/eventCenter/anliDetail.vue

@@ -261,7 +261,7 @@
               <div
                 class="proOverNav"
                 v-html="anliBox[0].info ? anliBox[0].info.courseText : ''"
-                style="padding: 0 10px 10px 10px;"
+                style="padding: 10px"
               ></div>
               <div
                 class="fileLook"
@@ -469,7 +469,7 @@
                       ? anliBox[0].overview.driQuestion.brief
                       : ''
                   "
-                  style="padding: 0 10px 10px 10px;"
+                  style="padding: 10px"
                 ></div>
                 <div
                   class="fileLook"
@@ -657,7 +657,7 @@
                       ? anliBox[0].overview.tarDesign.brief
                       : ''
                   "
-                  style="padding: 0 10px 10px 10px;"
+                  style="padding: 10px"
                 ></div>
                 <div
                   class="fileLook"
@@ -846,7 +846,7 @@
                       ? anliBox[0].overview.actiDesign.brief
                       : ''
                   "
-                  style="padding: 0 10px 10px 10px;"
+                  style="padding: 10px"
                 ></div>
                 <div
                   class="fileLook"
@@ -978,130 +978,133 @@
             :key="jdIndex"
             style="margin: 20px 0 20px 0"
           >
-            <div
-              class="jdTopBox"
-              v-if="jd.staTitle != ''"
-              :id="'jd' + jdIndex"
-              style="padding: 20px 20px 20px 10px"
-            >
-              <div class="jdTopNav">
-                <div class="jdLeftNav">
-                  <div
-                    class="jdImg"
-                    style="width: 25px; height: 25px; padding-left: 3px"
-                  >
-                    <img
-                      src="../../../../assets/icon/anliDetail/jdNewTitle.png"
-                      alt=""
-                    />
-                  </div>
-                  <div class="jdLeftTitle">
-                    <div>阶段{{ jdIndex + 1 }}</div>
-                    <div>{{ jd.staTitle }}</div>
-                  </div>
-                </div>
-                <div class="jdRightNav" v-if="jd.allTime">
-                  {{ jd.allTime }}课时
-                </div>
-                <div class="funBlock" style="padding: 0">
-                  <div
-                    class="fold"
-                    @click="fold1(jdIndex, $event, 1)"
-                    v-if="jd.isFold == 0"
-                  >
-                    <!-- <div>折叠</div> -->
-                    <el-button>折叠</el-button>
-                  </div>
-                  <div
-                    class="fold"
-                    @click="fold1(jdIndex, $event, 0)"
-                    v-if="jd.isFold == 1"
-                  >
-                    <!-- <div>展开</div> -->
-                    <el-button>展开</el-button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              v-for="(hd, hdIndex) in jd.actBox"
-              :key="hdIndex"
-              style="margin-top: 20px"
-            >
+            <div class="jdBox">
               <div
                 class="jdTopBox"
-                style="padding: 10px 20px 10px 10px"
-                v-if="hd.actName != ''"
+                v-if="jd.staTitle != ''"
+                :id="'jd' + jdIndex"
+                style="padding: 0 11px 10px 10px;margin:0"
               >
                 <div class="jdTopNav">
                   <div class="jdLeftNav">
-                    <div class="jdImg">
+                    <div
+                      class="jdImg"
+                      style="width: 25px; height: 25px; padding-left: 3px"
+                    >
                       <img
-                        src="../../../../assets/icon/anliDetail/rwTitle.png"
+                        src="../../../../assets/icon/anliDetail/jdNewTitle.png"
                         alt=""
                       />
                     </div>
                     <div class="jdLeftTitle">
-                      <div>任务{{ hdIndex + 1 }}</div>
-                      <div>{{ hd.actName }}</div>
+                      <div>阶段{{ jdIndex + 1 }}</div>
+                      <div>{{ jd.staTitle }}</div>
                     </div>
                   </div>
-                  <div class="jdRightNav" v-if="hd.actTime">
-                    {{ hd.actTime }}课时
+                  <div class="jdRightNav" v-if="jd.allTime">
+                    {{ jd.allTime }}课时
                   </div>
-                  <!-- <div class="funBlock" style="padding: 0">
+                  <div class="funBlock" style="padding: 0">
                     <div
                       class="fold"
-                      @click="fold(hdIndex, jdIndex, $event, 1)"
-                      v-if="hd.isFold == 0"
+                      @click="fold1(jdIndex, $event, 1)"
+                      v-if="jd.isFold == 0"
                     >
-                      <div>折叠</div>
+                      <!-- <div>折叠</div> -->
+                      <el-button>折叠</el-button>
                     </div>
                     <div
                       class="fold"
-                      @click="fold(hdIndex, jdIndex, $event, 0)"
-                      v-if="hd.isFold == 1"
+                      @click="fold1(jdIndex, $event, 0)"
+                      v-if="jd.isFold == 1"
                     >
-                      <div>展开</div>
+                      <!-- <div>展开</div> -->
+                      <el-button>展开</el-button>
                     </div>
-                  </div> -->
+                  </div>
                 </div>
               </div>
-              <div
-                class="proOverCss"
-                v-if="
-                  (hd.driQuestion.imgBox.length > 0 &&
-                    hd.driQuestion.imgBox[0].type == 3) ||
-                  hd.driQuestion.data.length
-                "
-              >
-                <div class="whiteBg whiteLeft">
-                  <div class="navBgTop">
+              <div v-for="(hd, hdIndex) in jd.actBox" :key="hdIndex">
+                <div
+                  class="jdTopBox"
+                  style="
+                    padding: 10px 0px 20px 0;
+                    border-bottom: 1px solid #e5e5e5;
+                    border-radius: 0px;
+                    margin: 0px auto;
+                    width: 98%;
+                  "
+                  v-if="hd.actName != ''"
+                >
+                  <div class="jdTopNav">
                     <div class="jdLeftNav">
                       <div class="jdImg">
                         <img
-                          src="../../../../assets/icon/anliDetail/jdTitle.png"
+                          src="../../../../assets/icon/anliDetail/rwTitle.png"
                           alt=""
                         />
                       </div>
                       <div class="jdLeftTitle">
-                        <div>活动目标</div>
+                        <div>任务{{ hdIndex + 1 }}</div>
+                        <div>{{ hd.actName }}</div>
                       </div>
                     </div>
-                    <el-button
-                      v-if="hd.driQuestion.brief != ''"
-                      @click="selectNav(hd.driQuestion.brief)"
-                      >查看更多</el-button
+                    <div class="jdRightNav" v-if="hd.actTime">
+                      {{ hd.actTime }}课时
+                    </div>
+                    <!-- <div class="funBlock" style="padding: 0">
+                    <div
+                      class="fold"
+                      @click="fold(hdIndex, jdIndex, $event, 1)"
+                      v-if="hd.isFold == 0"
+                    >
+                      <div>折叠</div>
+                    </div>
+                    <div
+                      class="fold"
+                      @click="fold(hdIndex, jdIndex, $event, 0)"
+                      v-if="hd.isFold == 1"
                     >
+                      <div>展开</div>
+                    </div>
+                  </div> -->
                   </div>
-                  <div
-                    v-if="
-                      hd.driQuestion.brief != '' ||
-                      hd.driQuestion.imgBox.length > 0
-                    "
-                    class="imgAndNav"
-                  >
-                    <!-- <div
+                </div>
+                <div
+                  class="proOverCss"
+                  v-if="
+                    (hd.driQuestion.imgBox.length > 0 &&
+                      hd.driQuestion.imgBox[0].type == 3) ||
+                    hd.driQuestion.data.length
+                  "
+                >
+                  <div class="whiteBg whiteLeft">
+                    <div class="navBgTop">
+                      <div class="jdLeftNav">
+                        <div class="jdImg">
+                          <img
+                            src="../../../../assets/icon/anliDetail/jdTitle.png"
+                            alt=""
+                          />
+                        </div>
+                        <div class="jdLeftTitle">
+                          <div>活动目标</div>
+                        </div>
+                      </div>
+                      <el-button
+                        v-if="hd.driQuestion.brief != ''"
+                        @click="selectNav(hd.driQuestion.brief)"
+                        >查看更多</el-button
+                      >
+                    </div>
+                    <div
+                      v-if="
+                        hd.driQuestion.brief != '' ||
+                        hd.driQuestion.imgBox.length > 0
+                      "
+                      class="imgAndNav"
+                    >
+                      <!-- <div
                       class="leftBox"
                       style="padding: 10px 0 0 35px"
                       v-if="
@@ -1123,55 +1126,60 @@
                       </div>
                     </div> -->
 
-                    <div
-                      class="proOverNav"
-                      v-html="hd.driQuestion ? hd.driQuestion.brief : ''"
-                      style="margin: 10px 0 0 20px"
-                    ></div>
-                  </div>
-                  <div class="noFile" v-else>
-                    <img
-                      src="../../../../assets/icon/anliDetail/noFile.jpg"
-                      alt=""
-                    />
+                      <div
+                        class="proOverNav"
+                        v-html="hd.driQuestion ? hd.driQuestion.brief : ''"
+                        style="
+                          margin: 10px auto 0;
+                          padding: 10px;
+                          background: #f3f3f3;
+                        "
+                      ></div>
+                    </div>
+                    <div class="noFile" v-else>
+                      <img
+                        src="../../../../assets/icon/anliDetail/noFile.jpg"
+                        alt=""
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <div
-                class="proOverCss"
-                v-if="
-                  hd.tarDesign.brief != '' ||
-                  hd.tarDesign.imgBox.length > 0 ||
-                  hd.tarDesign.data.length
-                "
-              >
-                <div class="whiteBg whiteLeft">
-                  <div class="navBgTop">
-                    <div class="jdLeftNav">
-                      <div class="jdImg">
-                        <img
-                          src="../../../../assets/icon/anliDetail/jdTitle.png"
-                          alt=""
-                        />
-                      </div>
-                      <div class="jdLeftTitle">
-                        <div>活动内容</div>
+                <div
+                  class="proOverCss"
+                  v-if="
+                    hd.tarDesign.brief != '' ||
+                    hd.tarDesign.imgBox.length > 0 ||
+                    hd.tarDesign.data.length
+                  "
+                >
+                  <div class="whiteBg whiteLeft">
+                    <div class="navBgTop">
+                      <div class="jdLeftNav">
+                        <div class="jdImg">
+                          <img
+                            src="../../../../assets/icon/anliDetail/jdTitle.png"
+                            alt=""
+                          />
+                        </div>
+                        <div class="jdLeftTitle">
+                          <div>活动内容</div>
+                        </div>
                       </div>
+                      <el-button
+                        v-if="hd.tarDesign.brief != ''"
+                        @click="selectNav(hd.tarDesign.brief)"
+                        >查看更多</el-button
+                      >
                     </div>
-                    <el-button
-                      v-if="hd.tarDesign.brief != ''"
-                      @click="selectNav(hd.tarDesign.brief)"
-                      >查看更多</el-button
+                    <div
+                      v-if="
+                        hd.tarDesign.brief != '' ||
+                        hd.tarDesign.imgBox.length > 0
+                      "
+                      class="imgAndNav"
                     >
-                  </div>
-                  <div
-                    v-if="
-                      hd.tarDesign.brief != '' || hd.tarDesign.imgBox.length > 0
-                    "
-                    class="imgAndNav"
-                  >
-                    <!-- <div
+                      <!-- <div
                       class="leftBox"
                       style="padding: 10px 0 0 35px"
                       v-if="
@@ -1193,56 +1201,60 @@
                       </div>
                     </div> -->
 
-                    <div
-                      class="proOverNav"
-                      v-html="hd.tarDesign ? hd.tarDesign.brief : ''"
-                      style="margin: 0px 0px 0px 20px;"
-                    ></div>
-                  </div>
-                  <div class="noFile" v-else>
-                    <img
-                      src="../../../../assets/icon/anliDetail/noFile.jpg"
-                      alt=""
-                    />
+                      <div
+                        class="proOverNav"
+                        v-html="hd.tarDesign ? hd.tarDesign.brief : ''"
+                        style="
+                          margin: 10px auto 0;
+                          padding: 10px;
+                          background: #f3f3f3;
+                        "
+                      ></div>
+                    </div>
+                    <div class="noFile" v-else>
+                      <img
+                        src="../../../../assets/icon/anliDetail/noFile.jpg"
+                        alt=""
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <div
-                class="proOverCss"
-                v-if="
-                  hd.actiDesign.brief != '' ||
-                  hd.actiDesign.imgBox.length > 0 ||
-                  hd.actiDesign.data.length
-                "
-              >
-                <div class="whiteBg whiteLeft">
-                  <div class="navBgTop">
-                    <div class="jdLeftNav">
-                      <div class="jdImg">
-                        <img
-                          src="../../../../assets/icon/anliDetail/jdTitle.png"
-                          alt=""
-                        />
-                      </div>
-                      <div class="jdLeftTitle">
-                        <div>预期成果</div>
+                <div
+                  class="proOverCss"
+                  v-if="
+                    hd.actiDesign.brief != '' ||
+                    hd.actiDesign.imgBox.length > 0 ||
+                    hd.actiDesign.data.length
+                  "
+                >
+                  <div class="whiteBg whiteLeft">
+                    <div class="navBgTop">
+                      <div class="jdLeftNav">
+                        <div class="jdImg">
+                          <img
+                            src="../../../../assets/icon/anliDetail/jdTitle.png"
+                            alt=""
+                          />
+                        </div>
+                        <div class="jdLeftTitle">
+                          <div>预期成果</div>
+                        </div>
                       </div>
+                      <el-button
+                        v-if="hd.actiDesign.brief != ''"
+                        @click="selectNav(hd.actiDesign.brief)"
+                        >查看更多</el-button
+                      >
                     </div>
-                    <el-button
-                      v-if="hd.actiDesign.brief != ''"
-                      @click="selectNav(hd.actiDesign.brief)"
-                      >查看更多</el-button
+                    <div
+                      v-if="
+                        hd.actiDesign.brief != '' ||
+                        hd.actiDesign.imgBox.length > 0
+                      "
+                      class="imgAndNav"
                     >
-                  </div>
-                  <div
-                    v-if="
-                      hd.actiDesign.brief != '' ||
-                      hd.actiDesign.imgBox.length > 0
-                    "
-                    class="imgAndNav"
-                  >
-                    <!-- <div
+                      <!-- <div
                       class="leftBox"
                       style="padding: 10px 0 0 35px"
                       v-if="
@@ -1264,55 +1276,61 @@
                       </div>
                     </div> -->
 
-                    <div
-                      class="proOverNav"
-                      v-html="hd.actiDesign ? hd.actiDesign.brief : ''"
-                      style="margin: 0px 0px 0px 20px;"
-                    ></div>
-                  </div>
-                  <div class="noFile" v-else>
-                    <img
-                      src="../../../../assets/icon/anliDetail/noFile.jpg"
-                      alt=""
-                    />
+                      <div
+                        class="proOverNav"
+                        v-html="hd.actiDesign ? hd.actiDesign.brief : ''"
+                        style="
+                          margin: 10px auto 0;
+                          padding: 10px;
+                          background: #f3f3f3;
+                        "
+                      ></div>
+                    </div>
+                    <div class="noFile" v-else>
+                      <img
+                        src="../../../../assets/icon/anliDetail/noFile.jpg"
+                        alt=""
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <div
-                class="proOverCss"
-                v-if="
-                  hd.evaDesign.brief != '' ||
-                  hd.evaDesign.imgBox.length > 0 ||
-                  hd.evaDesign.data.length
-                "
-              >
-                <div class="whiteBg whiteLeft">
-                  <div class="navBgTop">
-                    <div class="jdLeftNav">
-                      <div class="jdImg">
-                        <img
-                          src="../../../../assets/icon/anliDetail/jdTitle.png"
-                          alt=""
-                        />
-                      </div>
-                      <div class="jdLeftTitle">
-                        <div>活动评价</div>
+                <div
+                  class="proOverCss"
+                  v-if="
+                    hd.evaDesign.brief != '' ||
+                    hd.evaDesign.imgBox.length > 0 ||
+                    hd.evaDesign.data.length
+                  "
+                  style="margin: 0"
+                >
+                  <div class="whiteBg whiteLeft">
+                    <div class="navBgTop">
+                      <div class="jdLeftNav">
+                        <div class="jdImg">
+                          <img
+                            src="../../../../assets/icon/anliDetail/jdTitle.png"
+                            alt=""
+                          />
+                        </div>
+                        <div class="jdLeftTitle">
+                          <div>活动评价</div>
+                        </div>
                       </div>
+                      <el-button
+                        v-if="hd.evaDesign.brief != ''"
+                        @click="selectNav(hd.evaDesign.brief)"
+                        >查看更多</el-button
+                      >
                     </div>
-                    <el-button
-                      v-if="hd.evaDesign.brief != ''"
-                      @click="selectNav(hd.evaDesign.brief)"
-                      >查看更多</el-button
+                    <div
+                      v-if="
+                        hd.evaDesign.brief != '' ||
+                        hd.evaDesign.imgBox.length > 0
+                      "
+                      class="imgAndNav"
                     >
-                  </div>
-                  <div
-                    v-if="
-                      hd.evaDesign.brief != '' || hd.evaDesign.imgBox.length > 0
-                    "
-                    class="imgAndNav"
-                  >
-                    <!-- <div
+                      <!-- <div
                       class="leftBox"
                       style="padding: 10px 0 0 35px"
                       v-if="
@@ -1334,17 +1352,22 @@
                       </div>
                     </div> -->
 
-                    <div
-                      class="proOverNav"
-                      v-html="hd.evaDesign ? hd.evaDesign.brief : ''"
-                      style="margin: 0px 0px 0px 20px;"
-                    ></div>
-                  </div>
-                  <div class="noFile" v-else>
-                    <img
-                      src="../../../../assets/icon/anliDetail/noFile.jpg"
-                      alt=""
-                    />
+                      <div
+                        class="proOverNav"
+                        v-html="hd.evaDesign ? hd.evaDesign.brief : ''"
+                        style="
+                          margin: 10px auto 0;
+                          padding: 10px;
+                          background: rgb(243, 243, 243);
+                        "
+                      ></div>
+                    </div>
+                    <div class="noFile" v-else>
+                      <img
+                        src="../../../../assets/icon/anliDetail/noFile.jpg"
+                        alt=""
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
@@ -1358,7 +1381,7 @@
             style="padding: 20px 20px 20px 0px"
           >
             <div class="jdTopNav">
-              <div class="bigNavBg" style="width: 155px;">项目活动过程</div>
+              <div class="bigNavBg" style="width: 155px">项目活动过程</div>
             </div>
           </div>
           <div
@@ -1406,7 +1429,11 @@
                   <div
                     class="proOverNav"
                     v-html="jd ? jd.brief : ''"
-                    style="padding: 0 10px 10px 10px"
+                    style="
+                      margin: 10px 0px 0px 20px;
+                      padding: 10px;
+                      background: rgb(243, 243, 243);
+                    "
                   ></div>
                   <div class="fileLook" v-if="pptImgUrl2.proData[jdIndex]">
                     <div class="whiteRight">
@@ -1544,7 +1571,9 @@
             style="padding: 20px 20px 20px 0px"
           >
             <div class="jdTopNav">
-              <div class="bigNavBg" style="width: 212px;">项目成果交流与评价</div>
+              <div class="bigNavBg" style="width: 212px">
+                项目成果交流与评价
+              </div>
             </div>
           </div>
           <div
@@ -1605,7 +1634,7 @@
                 <div
                   class="proOverNav"
                   v-html="anliBox[0].proexc ? anliBox[0].proexc.brief : ''"
-                  style="padding: 0 10px 10px 10px"
+                  style="padding: 10px"
                 ></div>
                 <div
                   class="fileLook"
@@ -1799,7 +1828,7 @@
                 <div
                   class="proOverNav"
                   v-html="anliBox[0].results ? anliBox[0].results.brief : ''"
-                  style="padding: 0 10px 10px 10px"
+                  style="padding: 10px"
                 ></div>
                 <div
                   class="fileLook"
@@ -2959,7 +2988,7 @@ export default {
         b.className += " funBlockTop";
       } else {
         this.anliBox[0].process.stageBox[j].actBox[i].isFold = 0;
-        a.className = "taskBorder";
+        a.className = "jdBox";
         b.className = "funBlock";
       }
       this.$forceUpdate();
@@ -2974,7 +3003,7 @@ export default {
         b.className += " funBlockTop";
       } else {
         this.anliBox[0].process.stageBox[i].isFold = 0;
-        a.className = "taskBorder";
+        a.className = "jdBox";
         b.className = "funBlock";
       }
       this.$forceUpdate();
@@ -3217,7 +3246,8 @@ body {
   border-radius: 0 !important;
   z-index: 999;
 }
-.isNavBox > div > div:nth-child(2):hover,.navBox > div > div:nth-child(2):hover {
+.isNavBox > div > div:nth-child(2):hover,
+.navBox > div > div:nth-child(2):hover {
   color: #5e5e5e;
 }
 /* .isMessageBox {
@@ -3301,10 +3331,10 @@ body {
 .proOverCss {
   width: 100%;
   display: flex;
-  margin: 20px 0;
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: flex-start;
+  margin: 10px 0 0 0;
 }
 .fileLook {
   display: flex;
@@ -3333,7 +3363,7 @@ body {
   width: 95%;
   /* background: #f6f9fe; */
   padding: 0 10px 10px 0;
-  border-radius: 10px;
+  border-radius: 5px;
   height: auto;
   max-height: 500px;
   line-height: 30px;
@@ -3524,12 +3554,15 @@ body {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
   width: 97%;
   margin-left: 15px;
   height: 35px;
 }
+.navBgTop >>> .el-button {
+  height: 35px;
+}
 .header-title {
   display: flex;
 }
@@ -3634,7 +3667,8 @@ body {
 .jdTopBox {
   background: #fff;
   border-radius: 10px;
-  padding: 20px;
+  /* padding: 20px; */
+  margin: 20px 0;
 }
 .jdTopNav {
   display: flex;
@@ -3847,7 +3881,7 @@ ol {
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   box-sizing: border-box;
-  height: 460px;
+  height: 560px;
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -3925,4 +3959,9 @@ ol {
   -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
   background-color: #595a5a;
 }
+.jdBox {
+  background: #ffff;
+  border-radius: 10px;
+  padding: 20px 0;
+}
 </style>