Skip to content

P
pica-annual-summary
提交 96bca775 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

添加年度活动页面

上级 533ca6dd
显示空白字符变更
内嵌 并排
正在显示 包含 783 行增加 和 0 行删除
src/components/annual-summary/card-1-no.vue 0 → 100644
浏览文件 @ 96bca775
<template>
<div class="card-1-no-wrapper">
<Logo></Logo>
<div class="bgi-wrapper"><img src="~@/images/annual/page-7-back.png" alt="" /></div>
<section class="detail">
<p class="title">尊敬的<span>齐天大圣</span>医生</p>
<div class="content">
<p>您与云鹊医刚遇见不久~</p>
<p>各类丰富课程和活动等你一一发掘</p>
<p>希望新一年有云鹊医的陪伴，生活平凡但充实</p>
<p>在学习知识的路上，我们一同成长</p>
</div>
</section>
</div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
export default {
components: {
Logo
},
}
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-1-no-wrapper {
min-height: 100vh;
font-size: 16px;
color: #3B3B3B;
background: #F4FEF8;
.bgi-wrapper {
position: absolute;
bottom: 14px;
right: 18px;
z-index: 1;
img {
display: block;
width: 323px;
height: 227px;
}
}
.detail {
margin: 60px 10px 20px 30px;
.title {
line-height: 1;
font-size: 20px;
font-weight: 700;
color: #3F3F3F;
span {
display: inline-block;
margin: 0 7px;
padding: 1px 25px;
border-bottom: 2px solid #3B3B3B;
color: #3B3B3B;
}
}
.content {
margin-top: 25px;
p {
line-height: 2.5;
}
}
}
}
</style>
\ No newline at end of file
src/components/annual-summary/card-1.vue 0 → 100644
浏览文件 @ 96bca775
<template>
<div class="card-1-wrapper">
<Logo></Logo>
<div class="bgi-wrapper"><img src="~@/images/annual/page-1-back.png" alt="" /></div>
<section class="detail">
<p class="title">尊敬的<span>齐天大圣</span>医生</p>
<p style="line-height: 2;">我们在一起已经<span class="fbig6 cg2">100</span>天啦</p>
<p class="mt-15"><span class="cg2 b">2018</span> 年 <span class="cg2 b">12</span> 月 <span class="cg2 b"> 1 </span>日</p>
<p>第一次遇见您</p>
<p class="mt-20"><span class="cg2 b">陈半仙</span> 老师的<span class="cg2 b">《我的大学》</span>课程</p>
<p>是您学习的第一门课；</p>
</section>
</div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
export default {
components: {
Logo
},
}
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-1-wrapper {
min-height: 100vh;
font-size: 16px;
color: #3B3B3B;
background: #F4FEF8;
.bgi-wrapper {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
img {
display: block;
width: 100%;
height: 321px;
}
}
.detail {
margin: 20px 30px;
.title {
line-height: 1;
font-size: 20px;
font-weight: 700;
color: #3F3F3F;
span {
display: inline-block;
margin: 0 7px;
padding: 1px 25px;
border-bottom: 2px solid #3B3B3B;
color: #3B3B3B;
}
}
p {
line-height: 1.8;
}
}
}
</style>
\ No newline at end of file
src/components/annual-summary/card-2.vue 0 → 100644
浏览文件 @ 96bca775
<template>
<div class="card-2-wrapper">
<Logo></Logo>
<div class="bgi-wrapper"><img src="~@/images/annual/page-2-back.png" alt="" /></div>
<section class="detail">
<p>2020年，您一共学习了</p>
<p class="mt-10"><span class="fbig6 cg2">100</span> 分钟</p>
<p><span class="fbig6 cg2">100</span> 课程</p>
<p><span class="fbig6 cg2">100</span> 文章</p>
<p class="mt-5">您最关注的学科</p>
<p class="cg2 b">内科内科内科</p>
</section>
</div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
export default {
components: {
Logo
},
}
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-2-wrapper {
min-height: 100vh;
font-size: 16px;
color: #3B3B3B;
background: #F4FEF8;
.bgi-wrapper {
position: absolute;
bottom: 0;
right: 10px;
z-index: 1;
img {
display: block;
width: 308px;
height: 305px;
}
}
.detail {
position: relative;
top: 0;
left: 0;
z-index: 2;
margin: 20px 30px;
p {
line-height: 1.8;
}
}
}
</style>
\ No newline at end of file
src/components/annual-summary/card-3.vue 0 → 100644
浏览文件 @ 96bca775
<template>
<div class="card-3-wrapper">
<Logo></Logo>
<div class="bgi-wrapper"><img src="~@/images/annual/page-3-back.png" alt="" /></div>
<section class="detail">
<p>2020年，您通过使用</p>
<p class="mt-10 lh-25"><span class="fbig6 cg2">找药工具</span></p>
<p class="mt-5">开了 <span class="cg2 b">2018</span> 笔订单</p>
<p class="mt-5">服务了 <span class="cg2 b">2018</span> 居民增加了</p>
<p class="mt-5">增加了 <span class="cg2 b">2018</span> 收入</p>
</section>
</div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
export default {
components: {
Logo
},
}
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-3-wrapper {
min-height: 100vh;
font-size: 16px;
color: #3B3B3B;
background: #F4FEF8;
.bgi-wrapper {
position: absolute;
bottom: 0;
right: 10px;
z-index: 1;
img {
display: block;
width: 341px;
height: 350px;
}
}
.detail {
position: relative;
top: 0;
left: 0;
z-index: 2;
margin: 20px 30px;
p {
line-height: 1.2;
}
}
}
</style>
\ No newline at end of file
src/components/annual-summary/card-4.vue 0 → 100644
浏览文件 @ 96bca775
<template>
<div class="card-4-wrapper" :class="{'ysl': type == 1, 'zqc': type == 2, 'no': type == 3}">
<Logo imgType=2></Logo>
<section class="detail">
<p v-show="title"><span class="fbig6 cw">{{title}}</span></p>
<section class="ct">
<p><span class="fw7">12</span> 月 <span class="fw7">12</span> 日 <span class="fw7">12</span> 点，您还在学习。 </p>
<p>老师，您辛苦了！</p>
<p class="tr mt-40">这一年，有 <span class="fw7">10</span> 天，</p>
<p class="tr">您都在持续不断的学习。</p>
</section>
</section>
</div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
export default {
components: {
Logo
},
props: {
type: {
type: Number | String,
default: 3,
},
title: {
type: String,
default: '' // 夜深了 早起床
}
},
}
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-4-wrapper {
min-height: 100vh;
font-size: 16px;
color: #3B3B3B;
&.ysl {
background: url('../../images/annual/page-4-back.png') no-repeat center center;
background-size: cover;
color: #FFFFFF;
}
&.zqc {
background: url('../../images/annual/page-5-back.png') no-repeat center center;
background-size: cover;
color: #134A5D;
}
&.no {
background: url('../../images/annual/page-6-back.png') no-repeat center center;
background-size: cover;
color: #FFFFFF;
}
.detail {
margin: 20px 30px;
.ct {
p {
line-height: 1.6 !important;
}
margin-top: 20px;
.tr {
text-align: right;
}
}
}
}
</style>
\ No newline at end of file
src/components/annual-summary/card-5.vue 0 → 100644
浏览文件 @ 96bca775
<template>
<div class="card-5-wrapper">
<Logo></Logo>
<div class="bgi-wrapper">
<img v-show="type == 1" src="~@/images/annual/yqd-back.png" alt="" />
<img v-show="type == 2" src="~@/images/annual/no-yqd-back.png" alt="" />
</div>
<section v-show="type == 1" class="detail">
<p>这一年</p>
<p class="mg-30">您获得了 <span class="num">100</span> 个云鹊豆</p>
<p>在勤奋学习的同时，还积极参与活动，是收获颇丰的一年</p>
</section>
<section v-show="type == 2" class="detail">
<p>这一年</p>
<p class="mg-30">您还未获得云鹊豆</p>
<p>在勤奋学习的同时，也可以参与活动获得云鹊豆哦～</p>
</section>
</div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
export default {
components: {
Logo
},
props: {
type: {
type: Number | String,
default: 2, // 1: 已经获取云鹊豆; 2: 没有获取云鹊豆
}
}
}
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-5-wrapper {
min-height: 100vh;
font-size: 16px;
color: #3B3B3B;
background: #FEF9F4;
.bgi-wrapper {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
img {
display: block;
width: 100%;
height: 342px;
}
}
.detail {
margin: 20px 30px;
p {
line-height: 2;
}
.mg-30 {
margin: 30px 0;
}
.num {
color: #FF8054;
}
}
}
</style>
\ No newline at end of file
src/components/annual-summary/card-6.vue 0 → 100644
浏览文件 @ 96bca775
<template>
<div class="card-6-wrapper">
<Logo imgType="2"></Logo>
<div class="bgi-wrapper">
<img class="bg" src="~@/images/annual/share-back.png" alt />
<!-- <img class="" src="~@/images/annual/qr-code.png" alt="" /> -->
</div>
<section class="detail">
<p class="title">2020年度学习报告</p>
<p>
尊敬的
<span class="cg2 b">齐天大圣</span> 医生
</p>
<p>
2020年您学习了
<span class="cg2 b">10</span> 门课程，时长
<span class="cg2 b">10</span> 小时
</p>
<p>
获得了
<span class="cg2 b">10</span> 个云鹊豆
</p>
<p>
最关注的知识类型是：
<span class="cg2 b">10</span>
</p>
<p class="mt-20">2020年极不平凡，回顾这一年也极为难得，这一年感谢有你。</p>
<p>希望你的2021年也有云鹊医的陪伴，因为云鹊医的参与，生活变得平凡也珍贵。</p>
<p class="mt-20">
——已陪伴你
<span class="cg2 b">10</span> 天的云鹊医
</p>
</section>
<div class="qr-wrapper">
<img src="~@/images/annual/qr-code.png" alt />
</div>
<section v-if="type == 1" class="bottom">
<img src="~@/images/annual/save-btn.png" alt />
<img src="~@/images/annual/share-btn.png" alt />
</section>
<section v-if="type == 2" class="bottom">
<img class="btn-l" src="~@/images/annual/share-btn-l.png" alt />
</section>
</div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
export default {
components: {
Logo
},
props: {
type: {
type: Number | String,
default: 2 // 1: 站内; 2: 站外
}
}
};
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-6-wrapper {
min-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 {
position: relative;
top: 0;
left: 0;
z-index: 1;
text-align: center;
img {
margin-top: 70px;
width: 70px;
height: 70px;
}
}
.bottom {
width: 100%;
position: absolute;
bottom: 25px;
left: 0;
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
src/components/annual-summary/logo.vue 0 → 100644
浏览文件 @ 96bca775
<template>
<div class="logo-wrapper">
<div class="logo">
<img v-show="imgType == 1" src="~@/images/annual/logo-1.png" alt />
<img v-show="imgType == 2" src="~@/images/annual/logo-2.png" alt />
</div>
</div>
</template>
<script>
export default {
props: {
imgType: {
type: Number | String,
default: 1
}
}
};
</script>
<style lang="less" scoped>
.logo-wrapper {
.logo {
padding-top: 20px;
padding-left: 30px;
img {
display: block;
width: 88px;
height: 56px;
}
}
}
</style>
\ No newline at end of file
src/router/router.js
浏览文件 @ 96bca775
......@@ -15,6 +15,11 @@ const questionDetail = r => require.ensure([], () => r(require('../views/questio
const couponList = r => require.ensure([], () => r(require('../views/coupon/coupon-list')), 'coupon-list')
// 年度报告（2020）
const asIndex = r => require.ensure([], () => r(require('../views/annual-summary/index')), 'annual-summary-index')
const asShare = r => require.ensure([], () => r(require('../views/annual-summary/share')), 'annual-summary-share')
const asDetail = r => require.ensure([], () => r(require('../views/annual-summary/detail')), 'annual-summary-detail')
export default [{
path: '/',
component: App,
......@@ -80,6 +85,28 @@ export default [{
meta: {
title: '优惠券'
}
},
{
path: '/as-index',
component: asIndex,
meta: {
title: '年度报告首页'
}
},
{
path: '/as-share',
component: asShare,
meta: {
title: '年度报告分享页面'
}
},
{
path: '/as-detail',
component: asDetail,
meta: {
title: '年度报告页面（详情）'
}
}
]
}]
src/style/as-common.less 0 → 100644
浏览文件 @ 96bca775
// 白色
.cw {
color: #ffffff;
}
// 黄色
.cy {
color: #FFFC00;
}
// 绿色
.cg {
color: #16602C;
}
// 绿色-2
.cg2 {
color: #287F43;
}
.cg2.b {
font-weight: 700;
}
.fw7 {
font-weight: 700;
}
.fbig {
font-size: 55px;
font-weight: 700;
}
.fbig6 {
font-size: 33px;
font-weight: 700;
}
.flarge {
font-size: 20px;
font-weight: 700;
}
.fcommon {
font-size: 16px;
font-weight: 700;
}
.mv-10 {
margin: 10px 0;
}
.mt-5 {
margin-top: 10px;
}
.mt-10 {
margin-top: 10px;
}
.mt-15 {
margin-top: 15px;
}
.mt-20 {
margin-top: 20px;
}
.mt-40 {
margin-top: 40px;
}
.lh-25 {
line-height: 2.5 !important;
}
src/views/annual-summary/detail.vue
浏览文件 @ 96bca775
<template>
<div class="as-swipper-wrapper">
<!-- <Card1></Card1> -->
<!-- <Card1No></Card1No> -->
<!-- <Card2></Card2> -->
<!-- <Card3></Card3> -->
<!-- <Card4></Card4> -->
<!-- <Card5></Card5> -->
<Card6></Card6>
</div>
</template>
<script>
import Card1 from '@/components/annual-summary/card-1'
import Card1No from '@/components/annual-summary/card-1-no'
import Card2 from '@/components/annual-summary/card-2'
import Card3 from '@/components/annual-summary/card-3'
import Card4 from '@/components/annual-summary/card-4'
import Card5 from '@/components/annual-summary/card-5'
import Card6 from '@/components/annual-summary/card-6'
export default {
components: {
Card1,
Card1No,
Card2,
Card3,
Card4,
Card5,
Card6,
}
}
</script>
<style lang="less" scoped>
.as-swipper-wrapper {
}
</style>
\ No newline at end of file
src/views/annual-summary/index.vue
浏览文件 @ 96bca775
<template>
<div class="as-index-wrapper">
<Logo imgType="2"></Logo>
<div class="bgi-wrapper">
<img src="~@/images/annual/index-back.png" alt />
</div>
<div class="text-wrapper">
<p class="fbig cw">2020年</p>
<p class="flarge cw mv-10">云鹊医生产了：</p>
<section class="detail-wrapper mt-20">
<p>
<span>496</span><span>节视频课程；</span>
</p>
<p>
<span>668</span><span>篇5分钟音频；</span>
</p>
<p>
<span>232</span><span>场业内直播；</span>
</p>
<p>
<span>400</span><span>篇资讯；</span>
</p>
<p>
<span>171</span><span>篇患教漫画；</span>
</p>
<p>
<span>86,086,618</span><span>个云鹊豆；</span>
</p>
<p>
<span></span>
<span>……</span>
</p>
</section>
</div>
<section class="bottom">
<div class="prot-wrapper" @click="selectProt">
<img v-show="!isSelect" src="~@/images/annual/rect-1.png" alt />
<img v-show="isSelect" src="~@/images/annual/rect-2.png" alt />
<span>我同意云鹊医使用我的历史数据生成《年度个人清单》数据报告</span>
</div>
<div class="b-btn">
<img src="~@/images/annual/index-btn.png" alt />
</div>
</section>
</div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
export default {
components: {
Logo
},
data() {
return {
isSelect: false
};
},
methods: {
selectProt() {
this.isSelect = !this.isSelect;
}
}
};
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.as-index-wrapper {
position: relative;
top: 0;
left: 0;
z-index: 1;
min-height: 100vh;
background: #88cb9d;
font-size: 16px;
.bgi-wrapper {
position: absolute;
top: 214px;
right: 0;
img {
width: 238px;
height: 288px;
}
}
.text-wrapper {
padding: 25px 30px;
p {
line-height: 1;
}
.detail-wrapper {
p {
line-height: 1.5;
& > span:first-child {
margin-right: 3px;
font-weight: 700;
color: #fffc00;
}
& > span:last-child {
font-weight: 700;
color: #16602c;
}
}
}
}
.bottom {
width: 100%;
position: fixed;
bottom: 30px;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
.prot-wrapper {
width: 100%;
display: flex;
padding: 10px 30px;
align-items: flex-start;
justify-content: center;
color: #ffffff;
img {
width: 15px;
height: 15px;
padding-top: 4px;
margin-right: 6px;
}
}
.b-btn {
width: 100%;
text-align: center;
img {
width: 310px;
height: 52px;
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或