提交 6126e34f 编写于 作者: guangjun.yang's avatar guangjun.yang

代码优化等

上级 a5206af4
...@@ -71,11 +71,11 @@ export default { ...@@ -71,11 +71,11 @@ export default {
margin: 60px 10px 20px 30px; margin: 60px 10px 20px 30px;
.title { .title {
line-height: 1; line-height: 1;
font-size: 20px;
font-weight: 700;
color: #3f3f3f; color: #3f3f3f;
span { span {
display: inline-block; display: inline-block;
font-size: 20px;
font-weight: 700;
margin: 0 7px; margin: 0 7px;
padding: 1px 25px; padding: 1px 25px;
border-bottom: 2px solid #3b3b3b; border-bottom: 2px solid #3b3b3b;
......
...@@ -91,10 +91,10 @@ export default { ...@@ -91,10 +91,10 @@ export default {
margin: 20px 30px; margin: 20px 30px;
.title { .title {
line-height: 1; line-height: 1;
font-size: 20px;
font-weight: 700;
color: #3f3f3f; color: #3f3f3f;
span { span {
font-size: 20px;
font-weight: 700;
display: inline-block; display: inline-block;
margin: 0 7px; margin: 0 7px;
padding: 1px 25px; padding: 1px 25px;
......
<template>
<div class="card-6-wrapper">
<Logo imgType="2"></Logo>
<div class="bgi-wrapper">
<img class="bg ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="1.5s"
swiper-animate-delay="0"
src="~@/images/annual/share-back.png" alt />
<!-- <img class="" src="~@/images/annual/qr-code.png" alt="" /> -->
</div>
<section
class="ani detail"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="1.5s"
swiper-animate-delay="1.5s"
>
<p class="title">2020年度学习报告</p>
<p v-if="anualData.doctorName">
尊敬的
<span class="cg2 b">{{anualData.doctorName}}</span> 医生
</p>
<p v-if="!anualData.doctorName">尊敬的医生</p>
<p>
{{anualData.yearType}}年您学习了
<span class="cg2 b">{{anualData.learnCourseNum}}</span> 门课程,时长
<span class="cg2 b">{{anualData.loginTotalTimeH}}</span> 小时
</p>
<p>
获得了
<span class="cg2 b">{{anualData.creditNum | yLocalString}}</span> 个云鹊豆
</p>
<p v-if="anualData.learnMoreCourseLabelName">
最关注的知识类型是:
<span class="cg2 b">{{anualData.learnMoreCourseLabelName}}</span>
</p>
<p class="mt-20">{{anualData.yearType}}年极不平凡,回顾这一年也极为难得,这一年感谢有您。</p>
<p>希望您的2021年也有云鹊医的陪伴,因为云鹊医的参与,生活变得平凡也珍贵。</p>
<p class="mt-20">
——已陪伴您
<span class="cg2 b">{{anualData.registerDays}}</span> 天的云鹊医
</p>
</section>
<div class="qr-wrapper">
<img class="ani"
swiper-animate-effect="bounceIn"
swiper-animate-duration="1s"
swiper-animate-delay="3s"
:src="anualData.qrCodeUrl" alt />
</div>
<section v-if="isHide && type == 1" class="bottom">
<img @click="save" src="~@/images/annual/save-btn.png" alt />
<img @click="share" src="~@/images/annual/share-btn.png" alt />
</section>
</div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
import { getWebPageUrl } from "@/utils";
import { Progress, Toast } from "vant";
export default {
components: {
Logo
},
props: {
type: {
type: Number | String,
default: 1 // 1: 站内; 2: 站外
},
anualData: {
type: Object,
default: () => {
return {};
}
},
isHide: {
type: Boolean,
default: true
},
appVersion: {
type: Number | String,
default: 300 // 1: 站内; 2: 站外
}
},
data() {
return {
// isHide: true,
};
},
created() {
},
methods: {
// 保存图片
save() {
if(this.appVersion < 359) {
Toast('请下载新版本APP保存页面截图');
} else {
this.$emit("save");
}
},
// 分享按钮
share() {
this.$emit("share");
}
}
};
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-6-wrapper {
position: relative;
top: 0;
left: 0;
height: 100vh;
font-size: 16px;
color: #3b3b3b;
background: #88cb9d;
.bgi-wrapper {
position: absolute;
top: 83px;
left: 0;
z-index: 1;
img {
display: block;
width: 100%;
height: 495px;
}
}
.detail {
position: relative;
top: 0;
left: 0;
z-index: 2;
color: #333;
margin: 20px 30px;
.title {
font-size: 18px;
font-weight: 700;
text-align: center;
margin: 25px 0 20px;
color: #121212;
}
p {
line-height: 1.45;
}
}
.qr-wrapper {
width: 100%;
position: absolute;
top: 420px;
left: 0;
z-index: 10;
text-align: center;
img {
margin-top: 70px;
width: 70px;
height: 70px;
}
}
.bottom {
width: 100%;
position: absolute;
bottom: 25px;
left: 0;
z-index: 3;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
img {
display: inline-block;
margin: 10px;
width: 143px;
height: 39px;
}
.btn-l {
margin: 5px 0;
width: 340px;
height: 50px;
}
}
}
</style>
\ No newline at end of file
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
swiper-animate-duration="1.5s" swiper-animate-duration="1.5s"
swiper-animate-delay="0" swiper-animate-delay="0"
src="~@/images/annual/env-back.png" alt /> src="~@/images/annual/env-back.png" alt />
<!-- <img class="" src="~@/images/annual/qr-code.png" alt="" /> -->
</div> </div>
<section <section
class="ani detail" class="ani detail"
......
...@@ -119,7 +119,7 @@ export default { ...@@ -119,7 +119,7 @@ export default {
}" style="display: block; width: 340px; height: 50px;" > }" style="display: block; width: 340px; height: 50px;" >
${script.outerHTML} ${script.outerHTML}
</wx-open-launch-app>`; </wx-open-launch-app>`;
console.log("insertHtml", insertHtml); // console.log("insertHtml", insertHtml);
insertId.innerHTML = insertHtml; insertId.innerHTML = insertHtml;
this.$forceUpdate(); this.$forceUpdate();
// 注册监听事件 // 注册监听事件
......
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<!-- <Logo imgType="2"></Logo> --> <!-- <Logo imgType="2"></Logo> -->
<div class="bgi-wrapper"> <div class="bgi-wrapper">
<img class="bg" src="~@/images/annual/share-back.png" alt /> <img class="bg" src="~@/images/annual/share-back.png" alt />
<!-- <img class="" src="~@/images/annual/qr-code.png" alt="" /> -->
</div> </div>
<section class="detail"> <section class="detail">
<p class="title">2020年度学习报告</p> <p class="title">2020年度学习报告</p>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册