新增查看更多功能及修改样式

src/components/pages/race/addRace/raceDetail.vue

@@ -127,14 +127,24 @@
                           v-for="(item, index) in CourseType[0]"
                           :key="index"
                         >
-                          <span
-                            style="
-                              color: red;
-                              width: 10px;
-                            "
+                          <div
                             v-if="item.name == '案例组别'"
-                            >*</span
-                          ><span :class="item.name == '案例组别' ? 'isAnli' : ''">{{ item.name }}</span>
+                            style="position: relative; width: 120px"
+                          >
+                            <span
+                              style="
+                                color: red;
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                              "
+                              v-if="item.name == '案例组别'"
+                              >*</span
+                            ><span style="width: 100px px; margin-left: 10px">{{
+                              item.name
+                            }}</span>
+                          </div>
+                          <span v-else>{{ item.name }}</span>
                           <el-checkbox-group
                             :class="item.name == '案例组别' ? 'radiusCss' : ''"
                             v-model="raceDetail.type"
@@ -1512,20 +1522,18 @@ export default {
 
 .choose > .all_choose:nth-child(2) > span,
 .choose > .all_choose:nth-child(3) > span {
-  letter-spacing: 42px;
+  letter-spacing: 31px;
+  margin-left: 10px;
 }
 
 .all_choose > span {
-  width: 130px;
+  width: 120px;
   /* display: block;
   letter-spacing: 33px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis; */
 }
-.isAnli{
-  width: 120px !important;
-}
 
 .all_choose >>> .el-checkbox-group {
   display: flex;
@@ -2225,4 +2233,7 @@ export default {
 .radiusCss >>> .el-checkbox__inner {
   border-radius: 50% !important;
 }
+.radiusCss{
+  margin-left: 10px !important;
+}
 </style>

src/components/pages/race/eventCenter/anliDetail.vue

@@ -223,8 +223,8 @@
               </div>
 
               <el-button
-                v-if="anliBox[0].info.courseText != ''"
                 @click="selectNav(anliBox[0].info.courseText)"
+                v-if="selectHeight('poDetail')"
                 >查看更多</el-button
               >
             </div>
@@ -262,6 +262,7 @@
                 class="proOverNav"
                 v-html="anliBox[0].info ? anliBox[0].info.courseText : ''"
                 style="padding: 10px"
+                id="poDetail"
               ></div>
               <div
                 class="fileLook"
@@ -426,7 +427,7 @@
                   </div>
                 </div>
                 <el-button
-                  v-if="anliBox[0].overview.driQuestion.brief != ''"
+                  v-if="selectHeight('poFirst')"
                   @click="selectNav(anliBox[0].overview.driQuestion.brief)"
                   >查看更多</el-button
                 >
@@ -470,6 +471,7 @@
                       : ''
                   "
                   style="padding: 10px"
+                  id="poFirst"
                 ></div>
                 <div
                   class="fileLook"
@@ -614,7 +616,7 @@
                   </div>
                 </div>
                 <el-button
-                  v-if="anliBox[0].overview.tarDesign.brief != ''"
+                  v-if="selectHeight('poStudy')"
                   @click="selectNav(anliBox[0].overview.tarDesign.brief)"
                   >查看更多</el-button
                 >
@@ -658,6 +660,7 @@
                       : ''
                   "
                   style="padding: 10px"
+                  id="poStudy"
                 ></div>
                 <div
                   class="fileLook"
@@ -803,7 +806,7 @@
                   </div>
                 </div>
                 <el-button
-                  v-if="anliBox[0].overview.actiDesign.brief != ''"
+                  v-if="selectHeight('proEva')"
                   @click="selectNav(anliBox[0].overview.actiDesign.brief)"
                   >查看更多</el-button
                 >
@@ -847,6 +850,7 @@
                       : ''
                   "
                   style="padding: 10px"
+                  id="proEva"
                 ></div>
                 <div
                   class="fileLook"
@@ -1092,7 +1096,7 @@
                         </div>
                       </div>
                       <el-button
-                        v-if="hd.driQuestion.brief != ''"
+                        v-if="selectHeight('poAObj'+ hdIndex)"
                         @click="selectNav(hd.driQuestion.brief)"
                         >查看更多</el-button
                       >
@@ -1129,6 +1133,7 @@
                       <div
                         class="proOverNav"
                         v-html="hd.driQuestion ? hd.driQuestion.brief : ''"
+                        :id="'poAObj' + hdIndex"
                       ></div>
                     </div>
                     <div class="noFile" v-else>
@@ -1162,7 +1167,7 @@
                         </div>
                       </div>
                       <el-button
-                        v-if="hd.tarDesign.brief != ''"
+                        v-if="selectHeight('poACon'+ hdIndex)"
                         @click="selectNav(hd.tarDesign.brief)"
                         >查看更多</el-button
                       >
@@ -1199,6 +1204,7 @@
                       <div
                         class="proOverNav"
                         v-html="hd.tarDesign ? hd.tarDesign.brief : ''"
+                        :id="'poACon' + hdIndex"
                       ></div>
                     </div>
                     <div class="noFile" v-else>
@@ -1232,7 +1238,7 @@
                         </div>
                       </div>
                       <el-button
-                        v-if="hd.actiDesign.brief != ''"
+                        v-if="selectHeight('poExp'+ hdIndex)"
                         @click="selectNav(hd.actiDesign.brief)"
                         >查看更多</el-button
                       >
@@ -1269,6 +1275,7 @@
                       <div
                         class="proOverNav"
                         v-html="hd.actiDesign ? hd.actiDesign.brief : ''"
+                        :id="'poExp' + hdIndex"
                       ></div>
                     </div>
                     <div class="noFile" v-else>
@@ -1303,7 +1310,7 @@
                         </div>
                       </div>
                       <el-button
-                        v-if="hd.evaDesign.brief != ''"
+                        v-if="selectHeight('poAEva'+ hdIndex)"
                         @click="selectNav(hd.evaDesign.brief)"
                         >查看更多</el-button
                       >
@@ -1340,6 +1347,7 @@
                       <div
                         class="proOverNav"
                         v-html="hd.evaDesign ? hd.evaDesign.brief : ''"
+                        :id="'poAEva' + hdIndex"
                       ></div>
                     </div>
                     <div class="noFile" v-else>
@@ -1385,7 +1393,7 @@
                       <div>阶段{{ jdIndex + 1 }}</div>
                     </div>
                   </div>
-                  <el-button v-if="jd.brief != ''" @click="selectNav(jd.brief)"
+                  <el-button v-if="selectHeight('poAct'+ jdIndex)" @click="selectNav(jd.brief)"
                     >查看更多</el-button
                   >
                 </div>
@@ -1406,7 +1414,7 @@
                     </div>
                   </div> -->
 
-                  <div class="proOverNav" v-html="jd ? jd.brief : ''"></div>
+                  <div class="proOverNav" v-html="jd ? jd.brief : ''" :id="'poAct' + jdIndex"></div>
                   <div class="fileLook" v-if="pptImgUrl2.proData[jdIndex]">
                     <div class="whiteRight">
                       <div class="fileTopAll">
@@ -1570,7 +1578,7 @@
                   </div>
                 </div>
                 <el-button
-                  v-if="anliBox[0].proexc.brief != ''"
+                  v-if="selectHeight('poAch')"
                   @click="selectNav(anliBox[0].proexc.brief)"
                   >查看更多</el-button
                 >
@@ -1607,6 +1615,7 @@
                   class="proOverNav"
                   v-html="anliBox[0].proexc ? anliBox[0].proexc.brief : ''"
                   style="padding: 10px"
+                  id="poAch"
                 ></div>
                 <div
                   class="fileLook"
@@ -1764,7 +1773,7 @@
                   </div>
                 </div>
                 <el-button
-                  v-if="anliBox[0].results.brief != ''"
+                  v-if="selectHeight('poRes')"
                   @click="selectNav(anliBox[0].results.brief)"
                   >查看更多</el-button
                 >
@@ -1801,6 +1810,7 @@
                   class="proOverNav"
                   v-html="anliBox[0].results ? anliBox[0].results.brief : ''"
                   style="padding: 10px"
+                  id="poRes"
                 ></div>
                 <div
                   class="fileLook"
@@ -3041,6 +3051,18 @@ export default {
       }
     },
   },
+  computed: {
+    selectHeight() {
+      //此处不需要携带参数
+      return function (i) {
+        /** do something */
+        //  a = a + 'testforplaceholider'
+        var a = document.getElementById(i);
+        var b = a && a.clientHeight;
+        return b > 500;
+      };
+    },
+  },
   created() {
     this.selectAnLi();
   },
@@ -3344,6 +3366,7 @@ body {
   padding: 10px;
   background: #f7f7f7;
   margin: 10px auto 0;
+  overflow: auto;
 }
 .noImg {
   max-height: 300px;
@@ -3428,7 +3451,7 @@ body {
 .file > div > div:nth-child(2) {
   background: #fff;
   height: 45px;
-  width: 100%;
+  width: calc(100% - 95px);
   line-height: 45px;
   padding-left: 10px;
   border-top-right-radius: 10px;
@@ -3863,7 +3886,7 @@ ol {
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   box-sizing: border-box;
-  height: 560px;
+  height: 460px;
   overflow-y: auto;
   overflow-x: hidden;
 }