Skip to content

Y
year-end-activitiy
提交 1e62b6f0 编写于 作者: Yuanzhao.dai's avatar Yuanzhao.dai
浏览文件
操作

邀请明细静态页面

上级 874f8d25
隐藏空白字符变更
内嵌 并排
正在显示 包含 341 行增加 和 0 行删除
pages/invite-details/index.less 0 → 100644
浏览文件 @ 1e62b6f0
.invite-details-wrap {
.main-container {
overflow: hidden;
.invite-explain {
padding: 0 15px;
margin: 20px 0 30px 0;
.title {
color: #333333;
font-size: 18px;
font-weight: 700;
}
.picture-explain {
display: flex;
justify-content: space-between;
margin-top: 18px;
.left {
width: 18px;
display: flex;
flex-flow: column;
align-items: center;
margin-top: 13px;
.step-num {
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
border-radius: 100%;
background: #F36F55;
color: #fff;
font-size: 12px;
}
.dotted-line {
border-left: 1px dashed #F36F55;
height:38px;
width: 1px;
}
.height50 {
height: 50px!important;
}
}
.right {
.bubble_diailog{
width: 275px;
padding: 12px 15px;
position: relative;
background: #FFF4F2;
border-radius: 6px;
color: #373839;
font-size: 14px;
font-weight: 700;
i,.bubble_diailog b{
position: absolute;
width: 0;
height: 0;
overflow: hidden;
border-width:5px;
display:block;
}
i.l,.bubble_diailog b.l{
border-style:dashed solid dashed dashed;
}
i.l{
top:0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
left:-10px;
border-color:transparent #FFF4F2 transparent transparent;
}
b.l{
top:0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
left:-9px;
border-color:transparent #FFF4F2 transparent transparent;
}
p {
line-height: 14px;
}
.text {
color: #373839;
font-size: 14px;
font-weight: 700;
}
.awards {
color: #979899;
font-size: 12px;
font-weight: 400;
margin-top: 6px;
}
};
.marginTop16 {
margin-top: 8px;
}
.marginTop20 {
margin-top: 10px;
}
}
}
}
.gray-line {
width: 100%;
height: 5px;
background: #F8F9FA;
}
.record-details {
.tab-nav {
height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #E7E8E9;
.item {
height: 52px;
line-height: 52px;
position: relative;
font-size: 16px;
color: #676869;
.active-line {
width: 20px;
height: 3px;
background: #F36F55;
border-radius: 1.5px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
}
.left-item {
margin-left: 82.5px;
}
.right-item {
margin-right: 82.5px;
}
}
.record-list {
padding: 15px;
.sum {
color: #676869;
font-size: 14px;
}
.record-item {
padding: 20px 0;
display: flex;
align-items: center;
.person-photo {
width: 35px;
height: 35px;
border-radius: 100%;
}
.person-info {
margin-left: 15px;
.phone {
color: #373839;
font-size: 16px;
line-height: 16px;
}
.time {
color: #979899;
font-size: 13px;
line-height: 13px;
margin-top: 8px;
}
}
.awards {
margin-left: auto;
.item {
font-size: 13px;
font-weight: 700;
height: 13px;
margin-bottom: 9px;
.num {
color: #FD5A2F;
}
.award-name {
color: #373839;
}
}
.item:last-child {
margin-bottom: 0;
}
}
}
}
}
.no-data {
img {
width: 150px;
height: 150px;
display: block;
margin: 5px auto;
}
p {
width: 180px;
height: 42px;
font-size: 15px;
color: #999999;
line-height: 21px;
margin: 0 auto;
text-align: center;
}
.text-get {
width: 300px;
}
}
.footer-btn {
width: 100%;
height: 40px;
padding: 5px 0;
box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
position: fixed;
bottom: 0;
.btn {
width: 345px;
height: 40px;
margin: 0 auto;
line-height: 40px;
text-align: center;
background: linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
border-radius: 20px;
color: #FFFFFF;
font-weight: 700;
font-size: 15px;
}
}
}
}
\ No newline at end of file
pages/invite-details/index.vue 0 → 100644
浏览文件 @ 1e62b6f0
<template>
<section class="invite-details-wrap">
<normal-header
:title="title"
:barHeight="barHeight"
:barColor="barColor"
:backType="1">
</normal-header>
<div class="main-container" :style="{ marginTop: `${44+barHeight}Px`}">
<div class="invite-explain">
<p class="title">邀请形式</p>
<div class="picture-explain">
<div class="left">
<div class="step-num">1</div>
<div class="dotted-line" />
<div class="step-num">2</div>
<div class="dotted-line height50" />
<div class="step-num">3</div>
</div>
<div class="right">
<div class="bubble_diailog">
<i class="l"></i>
<b class="l"></b>
邀请医生好友
</div>
<div class="bubble_diailog marginTop16">
<i class="l"></i>
<b class="l"></b>
<p class="text">输入手机号领取课程</p>
<p class="awards">+20勤奋分 +20云鹊豆</p>
</div>
<div class="bubble_diailog marginTop20">
<i class="l"></i>
<b class="l"></b>
<p class="text">使用手机号登录云鹊APP</p>
<p class="awards">+80勤奋分 +80云鹊豆</p>
</div>
</div>
</div>
</div>
<div class="gray-line"></div>
<div class="record-details">
<div class="tab-nav">
<div class="item left-item">
领取记录
<p class="active-line"></p>
</div>
<div class="item right-item">
登录记录
<p class="active-line"></p>
</div>
</div>
<!-- <div class="record-list">
<p class="sum">共10人</p>
<div class="record-item">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="person-photo">
<div class="person-info">
<p class="phone">135****3456</p>
<p class="time">2019.12.16</p>
</div>
<div class="awards">
<p class="item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</p>
<p class="item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</p>
</div>
</div>
</div>-->
<div class="no-data">
<img src="~/assets/img/invite-details/icon-nodata.png" alt="">
<!-- <p>提醒您的医生好友领取课程您将获得奖励哦！</p>-->
<p class="text-get">提醒您的医生好友领取课程后登录云鹊医APP您将再获得奖励哦！</p>
</div>
<div class="footer-btn">
<div class="btn">去邀请</div>
</div>
</div>
</div>
</section>
</template>
<script>
import NormalHeader from '@/components/normal-header'
export default {
name: "index",
components: {
NormalHeader
},
data() {
return {
showPop: false,
title: '邀请明细',
barHeight: 0,
barColor: '#fff',
};
},
mounted() {
},
methods: {},
}
</script>
<style scoped lang="less">
@import 'index.less';
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或