修改查看详情样式及新增文件上传显示进度功能

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

@@ -136,11 +136,23 @@
                     </div>
                     <div v-if="sa.data.proVisible" class="mask">
                       <div class="progressBox">
+                        <!-- <div :id="'closePro' + saIndex" class="closeCss">
+                          <img
+                            src="../../../../assets/icon/proClose.png"
+                            alt=""
+                          />
+                        </div> -->
                         <div class="lbox">
                           <img
                             src="../../../../assets/loading.gif"
                           />上传中，请稍后
                         </div>
+                        <div>
+                          <div>
+                            {{ sa.data.isFinishSize }}M /
+                            {{ sa.data.isAllSize ? sa.data.isAllSize : 0 }}M
+                          </div>
+                        </div>
                         <el-progress
                           :text-inside="true"
                           :stroke-width="20"
@@ -332,6 +344,18 @@ export default {
           this.$message.error("添加的上传文件大于5M，请重新选择文件！");
           return;
         }
+      } else if (
+        file.name
+          .split(".")
+          [file.name.split(".").length - 1].toLocaleUpperCase() == "MP4" ||
+        file.name
+          .split(".")
+          [file.name.split(".").length - 1].toLocaleUpperCase() == "M4V"
+      ) {
+        if (file.size / 1024 / 1024 > 760) {
+          this.$message.error("添加的上传文件大于760M，请重新选择文件！");
+          return;
+        }
       }
 
       if (
@@ -356,6 +380,10 @@ export default {
 
       _this.raceAct.stageBox[sindex].data.progress = 0;
       _this.raceAct.stageBox[sindex].data.proVisible = true;
+      _this.raceAct.stageBox[sindex].data.isFinishSize = 0;
+      _this.raceAct.stageBox[sindex].data.isAllSize = 0;
+      var a = (file.size / 1024 / 1024).toFixed(2);
+      _this.raceAct.stageBox[sindex].data.isAllSize = a - 0;
       _this.$forceUpdate();
       if (file) {
         var params = {
@@ -379,12 +407,20 @@ export default {
           .on("httpUploadProgress", function (evt) {
             //这里可以写进度条
             // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+            _this.raceAct.stageBox[sindex].data.isFinishSize = (
+              evt.loaded /
+              1024 /
+              1024
+            ).toFixed(2);
             _this.raceAct.stageBox[sindex].data.progress = parseInt(
-              (evt.loaded * 80) / evt.total
+              (evt.loaded / evt.total) * 100
             );
+            _this.$forceUpdate();
           })
           .send(function (err, data) {
             _this.raceAct.stageBox[sindex].data.progress = 100;
+            _this.raceAct.stageBox[sindex].data.isFinishSize = _this.raceAct.stageBox[sindex].data.isAllSize;
+            _this.$forceUpdate();
             setTimeout(() => {
               _this.raceAct.stageBox[sindex].data.proVisible = false;
               _this.$forceUpdate();
@@ -801,18 +837,7 @@ export default {
   align-items: center;
   justify-content: center;
   flex-direction: column;
-}
-
-.progressBox .lbox {
-  height: 100px;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-}
-
-.progressBox .lbox img {
-  width: 40px;
-  margin-right: 20px;
+  position: relative;
 }
 
 .progressBox >>> .el-progress-bar__outer {
@@ -820,16 +845,29 @@ export default {
 }
 
 .progressBox .lbox {
-  height: 100px;
+  height: 60px;
   font-size: 19px;
   display: flex;
   align-items: center;
+  color: #747474;
 }
 
 .progressBox .lbox img {
   width: 40px;
   margin-right: 20px;
 }
+.closeCss {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+}
+.closeCss > img {
+  width: 100%;
+  height: 100%;
+}
 .saBox {
   width: 96%;
   margin: 0 auto;

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

@@ -122,11 +122,27 @@
                     </div>
                     <div v-if="raceEff.data.proVisible" class="mask">
                       <div class="progressBox">
+                        <!-- <div id="closePro" class="closeCss">
+                          <img
+                            src="../../../../assets/icon/proClose.png"
+                            alt=""
+                          />
+                        </div> -->
                         <div class="lbox">
                           <img
                             src="../../../../assets/loading.gif"
                           />上传中，请稍后
                         </div>
+                        <div>
+                          <div>
+                            {{ raceEff.data.isFinishSize }}M /
+                            {{
+                              raceEff.data.isAllSize
+                                ? raceEff.data.isAllSize
+                                : 0
+                            }}M
+                          </div>
+                        </div>
                         <el-progress
                           :text-inside="true"
                           :stroke-width="20"
@@ -299,6 +315,18 @@ export default {
           this.$message.error("添加的上传文件大于5M，请重新选择文件！");
           return;
         }
+      } else if (
+        file.name
+          .split(".")
+          [file.name.split(".").length - 1].toLocaleUpperCase() == "MP4" ||
+        file.name
+          .split(".")
+          [file.name.split(".").length - 1].toLocaleUpperCase() == "M4V"
+      ) {
+        if (file.size / 1024 / 1024 > 760) {
+          this.$message.error("添加的上传文件大于760M，请重新选择文件！");
+          return;
+        }
       }
 
       if (
@@ -323,6 +351,10 @@ export default {
 
       _this.raceEff.data.progress = 0;
       _this.raceEff.data.proVisible = true;
+      _this.raceEff.data.isFinishSize = 0;
+      _this.raceEff.data.isAllSize = 0;
+      var a = (file.size / 1024 / 1024).toFixed(2);
+      _this.raceEff.data.isAllSize = a - 0;
       _this.$forceUpdate();
       if (file) {
         var params = {
@@ -346,12 +378,20 @@ export default {
           .on("httpUploadProgress", function (evt) {
             //这里可以写进度条
             // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+            _this.raceEff.data.isFinishSize = (
+              evt.loaded /
+              1024 /
+              1024
+            ).toFixed(2);
             _this.raceEff.data.progress = parseInt(
-              (evt.loaded * 80) / evt.total
+              (evt.loaded / evt.total) * 100
             );
+            _this.$forceUpdate();
           })
           .send(function (err, data) {
             _this.raceEff.data.progress = 100;
+            _this.raceEff.data.isFinishSize = _this.raceEff.data.isAllSize;
+            _this.$forceUpdate();
             setTimeout(() => {
               _this.raceEff.data.proVisible = false;
               _this.$forceUpdate();
@@ -809,18 +849,7 @@ export default {
   align-items: center;
   justify-content: center;
   flex-direction: column;
-}
-
-.progressBox .lbox {
-  height: 100px;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-}
-
-.progressBox .lbox img {
-  width: 40px;
-  margin-right: 20px;
+  position: relative;
 }
 
 .progressBox >>> .el-progress-bar__outer {
@@ -828,16 +857,31 @@ export default {
 }
 
 .progressBox .lbox {
-  height: 100px;
+  height: 60px;
   font-size: 19px;
   display: flex;
   align-items: center;
+  color: #747474;
 }
 
 .progressBox .lbox img {
   width: 40px;
   margin-right: 20px;
 }
+
+.closeCss {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+}
+.closeCss > img {
+  width: 100%;
+  height: 100%;
+}
+
 .saBox {
   width: 96%;
   margin: 0 auto;

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

@@ -122,11 +122,27 @@
                     </div>
                     <div v-if="raceExc.data.proVisible" class="mask">
                       <div class="progressBox">
+                        <!-- <div id="closePro" class="closeCss">
+                          <img
+                            src="../../../../assets/icon/proClose.png"
+                            alt=""
+                          />
+                        </div> -->
                         <div class="lbox">
                           <img
                             src="../../../../assets/loading.gif"
                           />上传中，请稍后
                         </div>
+                        <div>
+                          <div>
+                            {{ raceExc.data.isFinishSize }}M /
+                            {{
+                              raceExc.data.isAllSize
+                                ? raceExc.data.isAllSize
+                                : 0
+                            }}M
+                          </div>
+                        </div>
                         <el-progress
                           :text-inside="true"
                           :stroke-width="20"
@@ -299,6 +315,18 @@ export default {
           this.$message.error("添加的上传文件大于5M，请重新选择文件！");
           return;
         }
+      } else if (
+        file.name
+          .split(".")
+          [file.name.split(".").length - 1].toLocaleUpperCase() == "MP4" ||
+        file.name
+          .split(".")
+          [file.name.split(".").length - 1].toLocaleUpperCase() == "M4V"
+      ) {
+        if (file.size / 1024 / 1024 > 760) {
+          this.$message.error("添加的上传文件大于760M，请重新选择文件！");
+          return;
+        }
       }
 
       if (
@@ -323,6 +351,10 @@ export default {
 
       _this.raceExc.data.progress = 0;
       _this.raceExc.data.proVisible = true;
+      _this.raceExc.data.isFinishSize = 0;
+      _this.raceExc.data.isAllSize = 0;
+      var a = (file.size / 1024 / 1024).toFixed(2);
+      _this.raceExc.data.isAllSize = a - 0;
       _this.$forceUpdate();
       if (file) {
         var params = {
@@ -346,12 +378,20 @@ export default {
           .on("httpUploadProgress", function (evt) {
             //这里可以写进度条
             // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+            _this.raceExc.data.isFinishSize = (
+              evt.loaded /
+              1024 /
+              1024
+            ).toFixed(2);
             _this.raceExc.data.progress = parseInt(
-              (evt.loaded * 80) / evt.total
+              (evt.loaded / evt.total) * 100
             );
+            _this.$forceUpdate();
           })
           .send(function (err, data) {
             _this.raceExc.data.progress = 100;
+            _this.raceExc.data.isFinishSize = _this.raceExc.data.isAllSize;
+            _this.$forceUpdate();
             setTimeout(() => {
               _this.raceExc.data.proVisible = false;
               _this.$forceUpdate();
@@ -809,18 +849,7 @@ export default {
   align-items: center;
   justify-content: center;
   flex-direction: column;
-}
-
-.progressBox .lbox {
-  height: 100px;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-}
-
-.progressBox .lbox img {
-  width: 40px;
-  margin-right: 20px;
+  position: relative;
 }
 
 .progressBox >>> .el-progress-bar__outer {
@@ -828,16 +857,29 @@ export default {
 }
 
 .progressBox .lbox {
-  height: 100px;
+  height: 60px;
   font-size: 19px;
   display: flex;
   align-items: center;
+  color: #747474;
 }
 
 .progressBox .lbox img {
   width: 40px;
   margin-right: 20px;
 }
+.closeCss {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+}
+.closeCss > img {
+  width: 100%;
+  height: 100%;
+}
 .saBox {
   width: 96%;
   margin: 0 auto;

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

@@ -536,6 +536,7 @@
                           class="info_btn"
                           @click="addImg($event)"
                           style="min-width: 108px"
+                          id="forUp"
                         >
                           上传附件
                           <input
@@ -552,11 +553,27 @@
                     </div>
                     <div v-if="raceDetail.data.proVisible" class="mask">
                       <div class="progressBox">
+                        <!-- <div id="closePro" class="closeCss">
+                          <img
+                            src="../../../../assets/icon/proClose.png"
+                            alt=""
+                          />
+                        </div> -->
                         <div class="lbox">
                           <img
                             src="../../../../assets/loading.gif"
                           />上传中，请稍后
                         </div>
+                        <div>
+                          <div>
+                            {{ raceDetail.data.isFinishSize }}M /
+                            {{
+                              raceDetail.data.isAllSize
+                                ? raceDetail.data.isAllSize
+                                : 0
+                            }}M
+                          </div>
+                        </div>
                         <el-progress
                           :text-inside="true"
                           :stroke-width="20"
@@ -1001,7 +1018,7 @@ export default {
       window.AWS.config.update(credentials);
       window.AWS.config.region = "cn-northwest-1"; //设置区域
       var type1 = type;
-      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+      let bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
       var _this = this;
       var b = [
         "DOC",
@@ -1087,6 +1104,17 @@ export default {
       }
       _this.raceDetail.data.progress = 0;
       _this.raceDetail.data.proVisible = true;
+      _this.raceDetail.data.isFinishSize = 0;
+      _this.raceDetail.data.isAllSize = 0;
+      _this.$nextTick(() => {
+        setTimeout(() => {
+          document.getElementById("closePro").onclick = () => {
+            bucket.abort.bind(bucket);
+          };
+        }, 500);
+      });
+      var a = (file.size / 1024 / 1024).toFixed(2);
+      _this.raceDetail.data.isAllSize = a - 0;
       _this.$forceUpdate();
       if (file) {
         var params = {
@@ -1110,13 +1138,25 @@ export default {
           .on("httpUploadProgress", function (evt) {
             //这里可以写进度条
             // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+            _this.raceDetail.data.isFinishSize = (
+              evt.loaded /
+              1024 /
+              1024
+            ).toFixed(2);
             _this.raceDetail.data.progress = parseInt(
-              (evt.loaded * 80) / evt.total
+              (evt.loaded / evt.total) * 100
             );
+            _this.$forceUpdate();
+            // _this.raceDetail.data.progress =
+            //   Math.floor(
+            //     (evt.loaded / 1024 / 1024 / (evt.total / 1024 / 1024)) * 100
+            //   ) + "%";
           })
           .send(function (err, data) {
             // loading.close();
             _this.raceDetail.data.progress = 100;
+            _this.raceDetail.data.isFinishSize = _this.raceDetail.data.isAllSize;
+            _this.$forceUpdate();
             setTimeout(() => {
               _this.raceDetail.data.proVisible = false;
               _this.$forceUpdate();
@@ -2186,18 +2226,7 @@ export default {
   align-items: center;
   justify-content: center;
   flex-direction: column;
-}
-
-.progressBox .lbox {
-  height: 100px;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-}
-
-.progressBox .lbox img {
-  width: 40px;
-  margin-right: 20px;
+  position: relative;
 }
 
 .progressBox >>> .el-progress-bar__outer {
@@ -2205,17 +2234,29 @@ export default {
 }
 
 .progressBox .lbox {
-  height: 100px;
+  height: 60px;
   font-size: 19px;
   display: flex;
   align-items: center;
+  color: #747474;
 }
 
 .progressBox .lbox img {
   width: 40px;
   margin-right: 20px;
 }
-
+.closeCss {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+}
+.closeCss > img {
+  width: 100%;
+  height: 100%;
+}
 .upTips {
   display: flex;
   flex-direction: row;

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

@@ -211,11 +211,27 @@
                   </div>
                   <div v-if="raceOver.driQuestion.data.proVisible" class="mask">
                     <div class="progressBox">
+                      <!-- <div id="closePro" class="closeCss">
+                        <img
+                          src="../../../../assets/icon/proClose.png"
+                          alt=""
+                        />
+                      </div> -->
                       <div class="lbox">
                         <img
                           src="../../../../assets/loading.gif"
                         />上传中，请稍后
                       </div>
+                      <div>
+                        <div>
+                          {{ raceOver.driQuestion.data.isFinishSize }}M /
+                          {{
+                            raceOver.driQuestion.data.isAllSize
+                              ? raceOver.driQuestion.data.isAllSize
+                              : 0
+                          }}M
+                        </div>
+                      </div>
                       <el-progress
                         :text-inside="true"
                         :stroke-width="20"
@@ -369,11 +385,27 @@
                   </div>
                   <div v-if="raceOver.tarDesign.data.proVisible" class="mask">
                     <div class="progressBox">
+                      <!-- <div id="closePro1" class="closeCss">
+                        <img
+                          src="../../../../assets/icon/proClose.png"
+                          alt=""
+                        />
+                      </div> -->
                       <div class="lbox">
                         <img
                           src="../../../../assets/loading.gif"
                         />上传中，请稍后
                       </div>
+                      <div>
+                        <div>
+                          {{ raceOver.tarDesign.data.isFinishSize }}M /
+                          {{
+                            raceOver.tarDesign.data.isAllSize
+                              ? raceOver.tarDesign.data.isAllSize
+                              : 0
+                          }}M
+                        </div>
+                      </div>
                       <el-progress
                         :text-inside="true"
                         :stroke-width="20"
@@ -526,11 +558,27 @@
                   </div>
                   <div v-if="raceOver.actiDesign.data.proVisible" class="mask">
                     <div class="progressBox">
+                      <!-- <div id="closePro2" class="closeCss">
+                        <img
+                          src="../../../../assets/icon/proClose.png"
+                          alt=""
+                        />
+                      </div> -->
                       <div class="lbox">
                         <img
                           src="../../../../assets/loading.gif"
                         />上传中，请稍后
                       </div>
+                      <div>
+                        <div>
+                          {{ raceOver.actiDesign.data.isFinishSize }}M /
+                          {{
+                            raceOver.actiDesign.data.isAllSize
+                              ? raceOver.actiDesign.data.isAllSize
+                              : 0
+                          }}M
+                        </div>
+                      </div>
                       <el-progress
                         :text-inside="true"
                         :stroke-width="20"
@@ -800,6 +848,18 @@ export default {
           this.$message.error("添加的上传文件大于5M，请重新选择文件！");
           return;
         }
+      } else if (
+        file.name
+          .split(".")
+          [file.name.split(".").length - 1].toLocaleUpperCase() == "MP4" ||
+        file.name
+          .split(".")
+          [file.name.split(".").length - 1].toLocaleUpperCase() == "M4V"
+      ) {
+        if (file.size / 1024 / 1024 > 760) {
+          this.$message.error("添加的上传文件大于760M，请重新选择文件！");
+          return;
+        }
       }
 
       if (
@@ -825,12 +885,24 @@ export default {
       if (jsonType == 0) {
         _this.raceOver.driQuestion.data.progress = 0;
         _this.raceOver.driQuestion.data.proVisible = true;
+        _this.raceOver.driQuestion.data.isFinishSize = 0;
+        _this.raceOver.driQuestion.data.isAllSize = 0;
+        var a = (file.size / 1024 / 1024).toFixed(2);
+        _this.raceOver.driQuestion.data.isAllSize = a - 0;
       } else if (jsonType == 1) {
         _this.raceOver.tarDesign.data.progress = 0;
         _this.raceOver.tarDesign.data.proVisible = true;
+        _this.raceOver.tarDesign.data.isFinishSize = 0;
+        _this.raceOver.tarDesign.data.isAllSize = 0;
+        var a = (file.size / 1024 / 1024).toFixed(2);
+        _this.raceOver.tarDesign.data.isAllSize = a - 0;
       } else {
         _this.raceOver.actiDesign.data.progress = 0;
         _this.raceOver.actiDesign.data.proVisible = true;
+        _this.raceOver.actiDesign.data.isFinishSize = 0;
+        _this.raceOver.actiDesign.data.isAllSize = 0;
+        var a = (file.size / 1024 / 1024).toFixed(2);
+        _this.raceOver.actiDesign.data.isAllSize = a - 0;
       }
       _this.$forceUpdate();
       if (file) {
@@ -856,18 +928,34 @@ export default {
             //这里可以写进度条
             // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
             if (jsonType == 0) {
+              _this.raceOver.driQuestion.data.isFinishSize = (
+                evt.loaded /
+                1024 /
+                1024
+              ).toFixed(2);
               _this.raceOver.driQuestion.data.progress = parseInt(
-                (evt.loaded * 80) / evt.total
+                (evt.loaded / evt.total) * 100
               );
             } else if (jsonType == 1) {
+              _this.raceOver.tarDesign.data.isFinishSize = (
+                evt.loaded /
+                1024 /
+                1024
+              ).toFixed(2);
               _this.raceOver.tarDesign.data.progress = parseInt(
-                (evt.loaded * 80) / evt.total
+                (evt.loaded / evt.total) * 100
               );
             } else {
+              _this.raceOver.actiDesign.data.isFinishSize = (
+                evt.loaded /
+                1024 /
+                1024
+              ).toFixed(2);
               _this.raceOver.actiDesign.data.progress = parseInt(
-                (evt.loaded * 80) / evt.total
+                (evt.loaded / evt.total) * 100
               );
             }
+            _this.$forceUpdate();
           })
           .send(function (err, data) {
             if (jsonType == 0) {
@@ -877,6 +965,8 @@ export default {
             } else {
               _this.raceOver.actiDesign.data.progress = 100;
             }
+            _this.raceOver.actiDesign.data.isFinishSize = _this.raceOver.actiDesign.data.isAllSize;
+            _this.$forceUpdate();
             setTimeout(() => {
               if (jsonType == 0) {
                 _this.raceOver.driQuestion.data.proVisible = false;
@@ -1565,18 +1655,7 @@ export default {
   align-items: center;
   justify-content: center;
   flex-direction: column;
-}
-
-.progressBox .lbox {
-  height: 100px;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-}
-
-.progressBox .lbox img {
-  width: 40px;
-  margin-right: 20px;
+  position: relative;
 }
 
 .progressBox >>> .el-progress-bar__outer {
@@ -1584,10 +1663,11 @@ export default {
 }
 
 .progressBox .lbox {
-  height: 100px;
+  height: 60px;
   font-size: 19px;
   display: flex;
   align-items: center;
+  color: #747474;
 }
 
 .progressBox .lbox img {
@@ -1667,4 +1747,16 @@ export default {
   color: #999;
   font-size: 14px;
 }
+.closeCss {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+}
+.closeCss > img {
+  width: 100%;
+  height: 100%;
+}
 </style>

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

@@ -222,7 +222,7 @@
                 anliBox[0].info.data.length)
             "
           >
-            <div class="whiteBg whiteLeft" style="min-height: 200px">
+            <div class="whiteBg whiteLeft">
               <div class="navBgTop">
                 <div class="jdLeftNav">
                   <div class="jdImg">
@@ -248,6 +248,7 @@
                   anliBox[0].info.imgBox.length > 0
                 "
                 class="imgAndNav"
+                style="padding: 0 0 20px 0;"
               >
                 <!-- <div
                 class="leftBox"
@@ -278,105 +279,131 @@
                   style="padding: 10px"
                   id="poDetail"
                 ></div>
-                <div
+              </div>
+              <div class="noFile" v-else>
+                <img
+                  src="../../../../assets/icon/anliDetail/noFile.jpg"
+                  alt=""
+                />
+              </div>
+            </div>
+            <div class="whiteBg whiteLeft" style="min-height: 200px;margin-top: 5px;">
+              <div
+                class="jdLeftNav"
+                style="margin: 0 0px 0px 15px; color: rgb(112, 112, 120)"
+              >
+                <div class="jdImg">
+                  <img
+                    src="../../../../assets/icon/anliDetail/jdTitle.png"
+                    alt=""
+                  />
+                </div>
+                <div class="jdLeftTitle">
+                  <div>项目方案与活动案例</div>
+                </div>
+              </div>
+              <!-- <div
                   style="margin: 33px 0px 0px 15px; color: rgb(112, 112, 120)"
                 >
                   项目方案与活动案例：
-                </div>
-                <div class="fileBox" style="width: 97.5%; margin: 10px auto">
+                </div> -->
+              <div class="fileBox" style="width: 97.5%; margin: 10px auto">
+                <div
+                  class="fileList"
+                  :class="{
+                    isVfileList: pptImgUrl2.infoData.showType == 3,
+                  }"
+                  v-if="
+                    anliBox &&
+                    anliBox[0].info &&
+                    anliBox[0].info.data &&
+                    anliBox[0].info.data.length
+                  "
+                  style="max-height: 150px; height: auto"
+                >
                   <div
-                    class="fileList"
-                    :class="{
-                      isVfileList: pptImgUrl2.infoData.showType == 3,
-                    }"
-                    v-if="
-                      anliBox &&
-                      anliBox[0].info &&
-                      anliBox[0].info.data &&
-                      anliBox[0].info.data.length
-                    "
-                    style="max-height: 150px; height: auto"
+                    class="file"
+                    v-for="(f, fIndex) in anliBox[0].info.data"
+                    :key="fIndex"
                   >
-                    <div
-                      class="file"
-                      v-for="(f, fIndex) in anliBox[0].info.data"
-                      :key="fIndex"
-                    >
-                      <div class="fileCss">
-                        <div>
-                          {{ fIndex + 1 }}.{{
-                            f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
-                          }}
-                        </div>
-                        <div>
-                          <el-tooltip
-                            effect="light"
-                            :content="f.name"
-                            placement="top"
+                    <div class="fileCss">
+                      <div>
+                        {{ fIndex + 1 }}.{{
+                          f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
+                        }}
+                      </div>
+                      <div>
+                        <el-tooltip
+                          effect="light"
+                          :content="f.name"
+                          placement="top"
+                        >
+                          <div
+                            :class="{
+                              openTaskActive:
+                                pptImgUrl1.fileType.infoType ==
+                                pptImgUrl1.infoData[fIndex].id,
+                            }"
+                            @click="lookFile2(f.url, f.type, 0, '', fIndex)"
                           >
-                            <div
-                              :class="{
-                                openTaskActive:
-                                  pptImgUrl1.fileType.infoType ==
-                                  pptImgUrl1.infoData[fIndex].id,
-                              }"
-                              @click="lookFile2(f.url, f.type, 0, '', fIndex)"
-                            >
-                              {{ f.name }}
-                            </div>
-                          </el-tooltip>
-                          <!-- <div class="downFile" @click="downloadFile(f.url)">
+                            {{ f.name }}
+                          </div>
+                        </el-tooltip>
+                        <!-- <div class="downFile" @click="downloadFile(f.url)">
                         <img
                           src="../../../../assets/icon/anliDetail/down.png"
                           alt=""
                         />
                       </div> -->
-                        </div>
                       </div>
                     </div>
                   </div>
-                  <div class="noFile" v-else>
-                    <img
-                      src="../../../../assets/icon/anliDetail/noFile.jpg"
-                      alt=""
-                    />
-                  </div>
                 </div>
-                <div
-                  class="fileLook"
-                  style="width: 96%"
-                  v-if="
-                    pptImgUrl2.infoData != undefined &&
-                    Object.keys(pptImgUrl2.infoData).length
-                  "
-                >
-                  <div class="whiteRight">
-                    <div class="fileTopAll">
-                      <div class="fileTop">
-                        <div class="fileListImg">
-                          <img
-                            src="../../../../assets/icon/anliDetail/onePic.png"
-                            alt=""
-                          />
-                        </div>
-                        <div>{{ pptImgUrl1.infoData[nameIndex].name }}</div>
+                <div class="noFile" v-else>
+                  <img
+                    src="../../../../assets/icon/anliDetail/noFile.jpg"
+                    alt=""
+                  />
+                </div>
+              </div>
+              <div style="margin: 5px 0 5px 25px; color: rgb(112, 112, 120)">
+                预览模式：
+              </div>
+              <div
+                class="fileLook"
+                style="width: 96%"
+                v-if="
+                  pptImgUrl2.infoData != undefined &&
+                  Object.keys(pptImgUrl2.infoData).length
+                "
+              >
+                <div class="whiteRight">
+                  <div class="fileTopAll">
+                    <div class="fileTop">
+                      <div class="fileListImg">
+                        <img
+                          src="../../../../assets/icon/anliDetail/onePic.png"
+                          alt=""
+                        />
                       </div>
-                      <el-button @click="lookFile1(pptImgUrl2.infoData.url)"
-                        >全屏查看</el-button
-                      >
+                      <div>{{ pptImgUrl1.infoData[nameIndex].name }}</div>
                     </div>
-                    <div class="upCss">
-                      <div
-                        class="look_file"
-                        style="width: 100%; margin: 10px 5px"
-                      >
-                        <pdf
-                          v-if="pptImgUrl2.infoData.showType == 1"
-                          :pdfUrl="pptImgUrl2.infoData.url"
-                          style="width: 100%; height: 800px; overflow: auto"
-                          :class="{ fullStyle: full }"
-                        ></pdf>
-                        <!-- <vword
+                    <el-button @click="lookFile1(pptImgUrl2.infoData.url)"
+                      >全屏查看</el-button
+                    >
+                  </div>
+                  <div class="upCss">
+                    <div
+                      class="look_file"
+                      style="width: 100%; margin: 10px 5px"
+                    >
+                      <pdf
+                        v-if="pptImgUrl2.infoData.showType == 1"
+                        :pdfUrl="pptImgUrl2.infoData.url"
+                        style="width: 100%; height: 800px; overflow: auto"
+                        :class="{ fullStyle: full }"
+                      ></pdf>
+                      <!-- <vword
                           v-else-if="pptImgUrl2.infoData.showType == 2"
                           :pdfUrl="pptImgUrl2.infoData.url"
                           frameborder="0"
@@ -404,17 +431,10 @@
                         >
                           <img :src="pptImgUrl2.infoData.url" alt="" />
                         </div> -->
-                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-              <div class="noFile" v-else>
-                <img
-                  src="../../../../assets/icon/anliDetail/noFile.jpg"
-                  alt=""
-                />
-              </div>
             </div>
           </div>
         </div>
@@ -649,7 +669,7 @@
               anliBox[0].overview.tarDesign.imgBox.length > 0 ||
               anliBox[0].overview.tarDesign.data.length
             "
-            style="margin-top: 5px;"
+            style="margin-top: 5px"
           >
             <div class="whiteBg whiteLeft">
               <div class="navBgTop">
@@ -853,7 +873,7 @@
               anliBox[0].overview.actiDesign.imgBox.length > 0 ||
               anliBox[0].overview.actiDesign.data.length
             "
-            style="margin-top: 5px;"
+            style="margin-top: 5px"
           >
             <div class="whiteBg whiteLeft">
               <div class="navBgTop">
@@ -2236,7 +2256,7 @@ export default {
       playerO: {},
       isNavTop: 0,
       isShow: 0,
-      nameIndex:0,
+      nameIndex: 0,
     };
   },
   methods: {
@@ -3379,11 +3399,11 @@ body {
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   background: #fff;
   width: 60%;
   margin: 0 auto;
-  height: 70px;
+  height: 50px;
   border-radius: 5px;
 }
 .isNavBox {
@@ -3396,6 +3416,7 @@ body {
   width: 100%;
   border-radius: 0 !important;
   z-index: 999;
+  justify-content: center;
 }
 .isNavBox > div > div:nth-child(2):hover,
 .navBox > div > div:nth-child(2):hover {
@@ -3419,12 +3440,10 @@ body {
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  margin: 0 30px;
+  margin: 0 20px;
   cursor: pointer;
 }
-.navTop > div:nth-child(2) {
-  font-size: 18px;
-}
+
 .navImg {
   width: 30px;
   height: 30px;
@@ -3436,7 +3455,7 @@ body {
 }
 .messageBox {
   width: 60%;
-  margin: 1% auto;
+  margin: 15px auto;
 }
 .whiteBg {
   width: 100%;