|
|
@@ -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>
|
zengyicheng
