update

src/components/pages/addCourse.vue

@@ -902,6 +902,34 @@
                         添加链接
                       </button>
                     </div>
+                    <div
+                      v-if="
+                        unitJson[unitIndex].chapterInfo[0].taskJson[
+                          itemTaskIndex
+                        ].proVisible
+                      "
+                      class="mask"
+                    >
+                      <div class="progressBox">
+                        <div class="lbox">
+                          <img src="../../assets/loading.gif" />上传中，请稍后
+                        </div>
+                        <el-progress
+                          :text-inside="true"
+                          :stroke-width="20"
+                          :percentage="
+                            unitJson[unitIndex].chapterInfo[0].taskJson[
+                              itemTaskIndex
+                            ].progress
+                              ? unitJson[unitIndex].chapterInfo[0].taskJson[
+                                  itemTaskIndex
+                                ].progress
+                              : 0
+                          "
+                          style="width: 80%"
+                        ></el-progress>
+                      </div>
+                    </div>
                   </div>
                   <div
                     style="
@@ -3941,7 +3969,7 @@ export default {
       this.$message.error("项目封面仅支持上传一张，请删除后再进行上传");
     },
     beforeUpload2(event, unitIndex, type, itemTaskIndex) {
-      const loading = this.openLoading();
+      // const loading = this.openLoading();
       var file = event.target.files[0];
       this.inputShow = false;
       var credentials = {
@@ -3981,7 +4009,7 @@ export default {
             this.$message.error("上传文件大于10兆,请重新选择文件！");
             var a = _this.$refs.upload1.uploadFiles;
             a.splice(a.length - 1, a.length);
-            loading.close();
+            // loading.close();
             return;
           }
         } else if (
@@ -3993,12 +4021,18 @@ export default {
             this.$message.error("添加成上传文件大于5兆,请重新选择文件！");
             var a = _this.$refs.upload1.uploadFiles;
             a.splice(a.length - 1, a.length);
-            loading.close();
+            // loading.close();
             return;
           }
         }
       }
 
+      _this.unitJson[unitIndex].chapterInfo[0].taskJson[
+        itemTaskIndex
+      ].progress = 0;
+      _this.unitJson[unitIndex].chapterInfo[0].taskJson[
+        itemTaskIndex
+      ].proVisible = true;
       if (file) {
         var params = {
           Key:
@@ -4021,9 +4055,20 @@ export default {
           .on("httpUploadProgress", function (evt) {
             //这里可以写进度条
             // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+            _this.unitJson[unitIndex].chapterInfo[0].taskJson[
+              itemTaskIndex
+            ].progress = parseInt((evt.loaded * 80) / evt.total);
           })
           .send(function (err, data) {
-            loading.close();
+            // loading.close();
+            _this.unitJson[unitIndex].chapterInfo[0].taskJson[
+              itemTaskIndex
+            ].progress = 100;
+            setTimeout(() => {
+              _this.unitJson[unitIndex].chapterInfo[0].taskJson[
+                itemTaskIndex
+              ].proVisible = false;
+            }, 1000);
             _this.inputShow = true;
             if (err) {
               var a = _this.$refs.upload1.uploadFiles;
@@ -5257,7 +5302,10 @@ export default {
               this.$message.error("填写了的题目，选项至少要有两项！");
               return;
             }
-            if ((aj[i].type == '2' && !aj[i].answer.length) || (aj[i].type == '1' &&  aj[i].answer !== 0 && !aj[i].answer)) {
+            if (
+              (aj[i].type == "2" && !aj[i].answer.length) ||
+              (aj[i].type == "1" && aj[i].answer !== 0 && !aj[i].answer)
+            ) {
               this.$message.error("有题目未选择答案请选择答案");
               return;
             }
@@ -8033,4 +8081,58 @@ ol {
   font-size: 18px;
   color: #8e8e8e;
 }
+
+.mask {
+  background-color: rgb(0 0 0 / 30%);
+  /* position: fixed; */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 20000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progressBox {
+  width: 300px;
+  height: 150px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 6px 1px #bfbfbf;
+  display: flex;
+  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;
+}
+
+.progressBox >>> .el-progress-bar__outer {
+  background-color: #d1dfff !important;
+}
+
+.progressBox .lbox {
+  height: 100px;
+  font-size: 19px;
+  display: flex;
+  align-items: center;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
 </style>

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

@@ -1,9 +1,159 @@
 <template>
-  <div class="center_content">赛事信息</div>
+  <div class="center_content">
+    <div class="center_nav">
+      <div>
+        <img
+          :style="{ top: top }"
+          src="../../../../assets/icon/race/progress2.png"
+          alt=""
+        />
+        <span @click="checkType(1)" :class="{ active: atype == 1 }"
+          >活动目标</span
+        >
+        <span @click="checkType(2)" :class="{ active: atype == 2 }"
+          >征集与报送要求</span
+        >
+        <span @click="checkType(3)" :class="{ active: atype == 3 }"
+          >报送材料清单及要求</span
+        >
+        <span @click="checkType(4)" :class="{ active: atype == 4 }"
+          >组织作品推荐参考指标</span
+        >
+        <span @click="checkType(5)" :class="{ active: atype == 5 }"
+          >联系我们</span
+        >
+      </div>
+    </div>
+    <div class="center_body" ref="box" @scroll.passive="allScrollTop($event)">
+      <div class="center_box" ref="box1">
+        <div class="center_title">
+          <img src="../../../../assets/icon/race/infoBook.png" alt="" />
+          <span>活动目标</span>
+        </div>
+        <div class="center_detail">
+          <div>
+            <span
+              >（一）倡导以学为中心,转变教与学关系,引导开展项目式学习、大单元教学,促进深度学习、高效能学习,推动新课程的落地,落实学生核心素养,提高课堂教育教学质量;</span
+            >
+          </div>
+          <div>
+            <span
+              >（二）关注技术的育人功能和教育价值,积极探索新技术、新应用的多种可能,提高教师的信息素养,支持学科教学个性化、有效性实施,促进技术与学科的深度融合、创新应用;</span
+            >
+          </div>
+          <div>
+            <span
+              >（三）搭建教师专业成长与交流活动平台,汇聚中小学信息化教学创新应用的典型优秀案例和经验成果,扩大教学成果的辐射影响,促进学校均衡可持续发展,推动基础教育高质量发展。</span
+            >
+          </div>
+        </div>
+      </div>
+      <div class="center_box" ref="box2">
+        <div class="center_title">
+          <img src="../../../../assets/icon/race/infoBook.png" alt="" />
+          <span>征集与报送要求</span>
+        </div>
+        <div class="center_detail">
+          <div>
+            <span> (一)征集时间 </span>
+          </div>
+          <div>
+            <span
+              >各地市面向学校征集作品时间为2022年6月至8月中句,其间5月中下旬将开放平台支持地级市教育局为单位征集作品;9月10日前各地市向省完成优秀作品的推送。
+            </span>
+          </div>
+          <div>
+            <span>(二)征集要求 </span>
+          </div>
+          <div>
+            <span
+              >每位教师一个子项目限报1个作品,参加子项目不超过2个。各组织单位须严格按照项目要求、数量(见表1)报送作品,并对报送信息和作品的准确性、完整性负责,逾期提交的作品不纳入评审范围。</span
+            >
+          </div>
+        </div>
+      </div>
+      <div class="center_box" ref="box3">
+        <div class="center_title">
+          <img src="../../../../assets/icon/race/infoBook.png" alt="" />
+          <span>报送材料清单及要求</span>
+        </div>
+        <div class="center_detail"></div>
+      </div>
+      <div class="center_box" ref="box4">
+        <div class="center_title">
+          <img src="../../../../assets/icon/race/infoBook.png" alt="" />
+          <span>组织作品推荐参考指标</span>
+        </div>
+        <div class="center_detail"></div>
+      </div>
+      <div class="center_box" ref="box5">
+        <div class="center_title">
+          <img src="../../../../assets/icon/race/infoBook.png" alt="" />
+          <span>联系我们</span>
+        </div>
+        <div class="center_detail"></div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      atype: 1,
+    };
+  },
+  computed: {
+    top() {
+      return 12 + (this.atype - 1) * 28 + "px";
+    },
+  },
+  methods: {
+    checkType(type) {
+      this.atype = type;
+      let _top = 0;
+
+      for (var i = 1; i < type; i++) {
+        _top += this.$refs["box" + i].offsetHeight;
+      }
+      this.$refs.box.scrollTop = type === 1 ? 0 : _top;
+      console.log("1-------1", this.$refs["box" + 1].offsetHeight);
+      console.log("2-------2", this.$refs["box" + 2].offsetHeight);
+      console.log("3-------3", this.$refs["box" + 3].offsetHeight);
+      console.log("4-------4", this.$refs["box" + 4].offsetHeight);
+      console.log("5-------5", this.$refs["box" + 5].offsetHeight);
+      console.log(_top);
+    },
+    allScrollTop(ev) {
+      console.log(ev.target.scrollTop);
+      const scrollTop = this.$refs["box"].scrollTop;
+      const clientHeight = this.$refs["box"].clientHeight;
+      const scrollHeight = this.$refs["box"].scrollHeight;
+
+      for (var i = 5; i > 0; i--) {
+        let _top = 0;
+
+        for (var k = 1; k < i; k++) {
+          _top += this.$refs["box" + k].offsetHeight;
+        }
+        if (
+          i > 1 &&
+          (Math.round(ev.target.scrollTop) >= _top ||
+          Math.round(ev.target.scrollTop) + clientHeight >= scrollHeight)
+        ) {
+          this.atype = i;
+          break;
+        } else if (
+          i == 1 &&
+          Math.round(ev.target.scrollTop) < this.$refs["box" + i].offsetHeight
+        ) {
+          this.atype = 1;
+        }
+      }
+    },
+  },
+};
 </script>
 
 <style scoped>
@@ -11,4 +161,85 @@ export default {};
   width: 100%;
   height: 100%;
 }
+
+.center_body {
+  width: 70%;
+  margin: 0 auto 20px;
+  height: 100%;
+  overflow: auto;
+  max-width: calc(100% - (200px * 2));
+}
+.center_box {
+  margin-top: 25px;
+}
+.center_title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.center_title img {
+  margin-right: 5px;
+}
+.center_title span {
+  font-size: 19px;
+  position: relative;
+  height: 38px;
+}
+.center_title span::before {
+  content: "";
+  background-image: url("../../../../assets/icon/race/ttitle.png");
+  position: absolute;
+  width: 75px;
+  height: 13px;
+  background-size: 100% 100%;
+  bottom: 0px;
+  right: -2px;
+}
+.center_detail {
+  display: flex;
+  background: #fff;
+  border-radius: 5px;
+  padding: 20px;
+  box-sizing: border-box;
+  flex-direction: column;
+  margin-top: 20px;
+  color: rgb(28, 28, 28);
+  min-height: 200px;
+}
+.center_detail div {
+  line-height: 1.5;
+}
+.center_detail div + div {
+  margin-top: 15px;
+}
+
+.center_nav {
+  position: absolute;
+  left: 20px;
+}
+
+.center_nav div {
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid #c5c5c5;
+  padding: 10px 0px 10px 20px;
+}
+.center_nav div img {
+  width: 15px;
+  position: absolute;
+  left: -6px;
+  transition: all 0.5s;
+}
+.center_nav div span {
+  font-size: 14px;
+  cursor: pointer;
+  color: rgb(28, 28, 28);
+}
+
+.center_nav div .active {
+  color: #e7b95a;
+}
+.center_nav div span + span {
+  margin-top: 10px;
+}
 </style>