|
|
@@ -1,142 +1,142 @@
|
|
|
-<template>
|
|
|
- <div class="LearnInfo">
|
|
|
- <div class="ban">
|
|
|
- <img src="@/assets/img/bannerLI.png" alt="" />
|
|
|
- <h3 @click="$router.push('/Layout/Learn/Students')">Learn & Engage</h3>
|
|
|
- </div>
|
|
|
- <div class="main">
|
|
|
- <h3>{{ data.title }}</h3>
|
|
|
- <div class="info">
|
|
|
- <span class="info_1">{{ data.time }}</span>
|
|
|
- <span class="info_2">{{ data.loc }}</span>
|
|
|
- <span class="info_3">{{ data.ren }}</span>
|
|
|
- </div>
|
|
|
- <div class="txt">
|
|
|
- <p v-html="data.top" v-if="data.top"></p>
|
|
|
- <img
|
|
|
- :src="`/data/LearnEngage/in/${$route.query.id}.jpg`"
|
|
|
- alt=""
|
|
|
- v-if="data.imgShow !== 0"
|
|
|
- />
|
|
|
- <div v-html="data.txt"></div>
|
|
|
- <div
|
|
|
- class="baoMingSta"
|
|
|
- v-if="data.baoming"
|
|
|
- v-html="data.baoming"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { LearnEngage } from "./data";
|
|
|
-export default {
|
|
|
- name: "LearnInfo",
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- //这里存放数据
|
|
|
- return {
|
|
|
- data: {},
|
|
|
- };
|
|
|
- },
|
|
|
- //监听属性 类似于data概念
|
|
|
- computed: {},
|
|
|
- //监控data中的数据变化
|
|
|
- watch: {},
|
|
|
- //方法集合
|
|
|
- methods: {},
|
|
|
- //生命周期 - 创建完成(可以访问当前this实例)
|
|
|
- created() {},
|
|
|
- //生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
- mounted() {
|
|
|
- let { id, k } = this.$route.query;
|
|
|
- id = Number(id);
|
|
|
- let temp = LearnEngage[k];
|
|
|
- temp.forEach((v) => {
|
|
|
- if (v.id === id) this.data = v.info;
|
|
|
- });
|
|
|
- setTimeout(() => {
|
|
|
- window.document.title = this.data.title;
|
|
|
- }, 100);
|
|
|
- },
|
|
|
- beforeCreate() {}, //生命周期 - 创建之前
|
|
|
- beforeMount() {}, //生命周期 - 挂载之前
|
|
|
- beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
- updated() {}, //生命周期 - 更新之后
|
|
|
- beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
- destroyed() {}, //生命周期 - 销毁完成
|
|
|
- activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang='less' scoped>
|
|
|
-.LearnInfo {
|
|
|
- width: 100%;
|
|
|
- .ban {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- & > img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- & > h3 {
|
|
|
- position: absolute;
|
|
|
- font-size: 24px;
|
|
|
- color: #fff;
|
|
|
- left: 30px;
|
|
|
- bottom: 30px;
|
|
|
- border-bottom: 1px solid #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- .main {
|
|
|
- padding: 20px;
|
|
|
- background: url("../../assets/img/bgLI.png");
|
|
|
- background-size: 100% 100%;
|
|
|
- & > h3 {
|
|
|
- font-size: 18px;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
- .info {
|
|
|
- font-size: 14px;
|
|
|
- line-height: 36px;
|
|
|
- color: #666;
|
|
|
- overflow: hidden;
|
|
|
- zoom: 1;
|
|
|
- margin-bottom: 20px;
|
|
|
- border-bottom: 1px solid #ccc;
|
|
|
- padding-bottom: 20px;
|
|
|
- & > span {
|
|
|
- padding: 0 0px 0 30px;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .info_1 {
|
|
|
- background: url("../../assets/img/bg_6.png") left 8px no-repeat;
|
|
|
- }
|
|
|
- .info_2 {
|
|
|
- background: url("../../assets/img/bg_7.png") 3px 8px no-repeat;
|
|
|
- }
|
|
|
- .info_3 {
|
|
|
- background: url("../../assets/img/bg_8.png") left 8px no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- .txt {
|
|
|
- /deep/ p {
|
|
|
- font-size: 14px;
|
|
|
- color: #6a6a6a;
|
|
|
- margin-bottom: 15px;
|
|
|
- line-height: 18px;
|
|
|
- }
|
|
|
- /deep/ img {
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
- /deep/ i {
|
|
|
- font-weight: 700;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
- /deep/ .xx {
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+<template>
|
|
|
+ <div class="LearnInfo">
|
|
|
+ <div class="ban">
|
|
|
+ <img src="@/assets/img/bannerLI.png" alt="" />
|
|
|
+ <h3 @click="$router.push('/Layout/Learn/Students')">Learn & Engage</h3>
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <h3>{{ data.title }}</h3>
|
|
|
+ <div class="info">
|
|
|
+ <span class="info_1">{{ data.time }}</span>
|
|
|
+ <span class="info_2">{{ data.loc }}</span>
|
|
|
+ <span class="info_3">{{ data.ren }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="txt">
|
|
|
+ <p v-html="data.top" v-if="data.top"></p>
|
|
|
+ <img
|
|
|
+ :src="`/data/LearnEngage/sm/${$route.query.id}.png`"
|
|
|
+ alt=""
|
|
|
+ v-if="data.imgShow !== 0"
|
|
|
+ />
|
|
|
+ <div v-html="data.txt"></div>
|
|
|
+ <div
|
|
|
+ class="baoMingSta"
|
|
|
+ v-if="data.baoming"
|
|
|
+ v-html="data.baoming"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { LearnEngage } from "./data";
|
|
|
+export default {
|
|
|
+ name: "LearnInfo",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ data: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {},
|
|
|
+ //生命周期 - 创建完成(可以访问当前this实例)
|
|
|
+ created() {},
|
|
|
+ //生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
+ mounted() {
|
|
|
+ let { id, k } = this.$route.query;
|
|
|
+ id = Number(id);
|
|
|
+ let temp = LearnEngage[k];
|
|
|
+ temp.forEach((v) => {
|
|
|
+ if (v.id === id) this.data = v.info;
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ window.document.title = this.data.title;
|
|
|
+ }, 100);
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.LearnInfo {
|
|
|
+ width: 100%;
|
|
|
+ .ban {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ & > img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ & > h3 {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #fff;
|
|
|
+ left: 30px;
|
|
|
+ bottom: 30px;
|
|
|
+ border-bottom: 1px solid #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ padding: 20px;
|
|
|
+ background: url("../../assets/img/bgLI.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ & > h3 {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 36px;
|
|
|
+ color: #666;
|
|
|
+ overflow: hidden;
|
|
|
+ zoom: 1;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ & > span {
|
|
|
+ padding: 0 0px 0 30px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .info_1 {
|
|
|
+ background: url("../../assets/img/bg_6.png") left 8px no-repeat;
|
|
|
+ }
|
|
|
+ .info_2 {
|
|
|
+ background: url("../../assets/img/bg_7.png") 3px 8px no-repeat;
|
|
|
+ }
|
|
|
+ .info_3 {
|
|
|
+ background: url("../../assets/img/bg_8.png") left 8px no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ /deep/ p {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6a6a6a;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ /deep/ img {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ /deep/ i {
|
|
|
+ font-weight: 700;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+ /deep/ .xx {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|