Skip to content

P
pica-new-compaign
提交 a388269d 编写于 作者: huangwensu's avatar huangwensu
浏览文件
操作

我的排名页面编辑

上级 3bce84d1
隐藏空白字符变更
内嵌 并排
正在显示 包含 411 行增加 和 51 行删除
pages/index.vue
浏览文件 @ a388269d
<template>
<div class="container">
<Header
v-if="userMobile"
v-if="!userMobile"
:token="token"
:is-scroll="isScroll"
:share-title1="shareTitle1"
:share-title2="shareTitle2"
:share-icon-url="shareIconUrl"
:isShowRightIcon="isShowRightIcon"
/>
<!-- 勤奋分进度 -->
<div class="progress-container">
<div class="score-info">
<div v-if="!userMobile" class="text">
<img src="../static/images/task-four.png" />
<span class="tc">我的勤奋分<span>{{12345}}</span></span>
<span class="bt" @click="selfInfo">个人明细 ></span>
</div>
<div v-if="userMobile" class="text">
<span class="tc">登录可参加活动</span>
<span class="bt" @click="goToLogin">去登录 ></span>
<!-- 顶部 -->
<div class="top-container">
<img class="rule" @click="ruleDetail" src="../static/images/rule.png" />
<img class="rank" @click="gotoRank" src="../static/images/rank.png" />
<!-- 勤奋分进度 -->
<div class="progress-container">
<div class="score-info">
<div v-if="!userMobile" class="text">
<img src="../static/images/task-four.png" />
<span class="tc">我的勤奋分<span>{{12345}}</span></span>
<span class="bt" @click="selfInfo">个人明细 ></span>
</div>
<div v-if="userMobile" class="text">
<span class="tc">登录可参加活动</span>
<span class="bt" @click="goToLogin">去登录 ></span>
</div>
</div>
<status-bar
class="progress-bar"
:isLogin="isLogin"/>
</div>
<status-bar
class="progress-bar"
:isLogin="isLogin"/>
</div>
<!-- 活动阶段 -->
<img class="title-text" src="../static/images/step-title.png"/>
<img class="title-text st" src="../static/images/step-title.png"/>
<div class="activity-step">
<div class="step bt">
<step
......@@ -76,6 +83,7 @@ export default {
},
data() {
return {
isShowRightIcon: true, // 是否显示分享按钮
isLogin: false,
userMobile: '',
stepFlag: true,
......@@ -115,6 +123,14 @@ export default {
}
});
},
// 查看活动规则
ruleDetail() {
this.$router.push({path: "/login-point/point-result",query: {}});
},
// 查看排名
gotoRank() {
this.$router.push({path: "/ranks",query: {}});
},
// 去登录
goToLogin() {
......@@ -139,46 +155,70 @@ export default {
margin: 0 auto;
min-height: 100vh;
background: #B72541;
.title-text {
.top-container {
position: relative;
width: 100%;
}
.progress-container {
margin: 0 10px 15px;
.score-info {
padding: 0 17px;
height: 48px;
background:linear-gradient(180deg,rgba(214,86,53,1) 0%,rgba(189,38,65,1) 100%);
border-radius:10px 10px 0px 0px;
.text {
line-height: 48px;
img {
float: left;
width: 30px;
height: 30px;
padding: 10px 10px 0px 0px;
}
span.tc {
font-size: 14px;
font-weight: 700;
color: #fff;
span {
padding-left: 10px;
font-size: 18px;
color: #FFE8A5;
height: 430px;
background-image:url('../static/images/head_bg.png');
background-size: 100% 100%;
.rule {
position: absolute;
top: 75px;
right: 0px;
}
.rank {
position: absolute;
top: 115px;
right: 15px;
}
.progress-container {
position: absolute;
left: 0;
top: 330px;
width: 94%;
margin: 0px 10px 15px;
.score-info {
padding: 0 17px;
height: 48px;
background:linear-gradient(180deg,rgba(214,86,53,1) 0%,rgba(189,38,65,1) 100%);
border-radius:10px 10px 0px 0px;
.text {
line-height: 48px;
img {
float: left;
width: 30px;
height: 30px;
padding: 10px 10px 0px 0px;
}
span.tc {
font-size: 14px;
font-weight: 700;
color: #fff;
span {
padding-left: 10px;
font-size: 18px;
color: #FFE8A5;
}
}
span.bt {
font-size: 12px;
float: right;
color:#FFE8A5;
}
}
span.bt {
font-size: 12px;
float: right;
color:#FFE8A5;
}
}
.progress-bar {
padding: 5px 17px;
height: 87px;
border-radius: 0px 0px 10px 10px;
}
}
.progress-bar {
padding: 5px 17px;
height: 87px;
border-radius: 0px 0px 10px 10px;
}
}
.title-text {
width: 100%;
}
.title-text.st {
margin-top: 65px;
}
.activity-step {
margin: 0 10px 15px;
......
pages/login-point/point-result.vue 0 → 100644
浏览文件 @ a388269d
<template>
<section class="point-container">
<div class="point-status">
<img src="../../static/images/point-success.png" />
</div>
<div class="status-text">
<p>点赞成功，感谢您为TA拿下5勤奋分</p>
<p>登陆云鹊医APP，您也可获得75勤奋分</p>
</div>
<div class="btn">
<button>打开APP</button>
<button>下载APP</button>
</div>
</section>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.point-container {
.point-status {
padding: 45px 0 25px;
text-align: center;
img {
width: 50px;
height: 50px;
}
}
.status-text {
padding: 0px 0px 30px;
text-align: center;
p {
font-size: 18px;
font-weight: 700;
color:#373839
}
}
.btn {
text-align: center;
button {
display: inline-block;
width: 335px;
height: 40px;
border-radius: 23px;
background: #fff;
color: gba(255,255,255,1);
font-size: 16px;
}
button:first-child {
background: #449284;
color: #fff;
margin-bottom: 12px;
}
button:last-child {
border: 1PX solid rgba(151,152,153,1);
}
}
}
</style>
\ No newline at end of file
pages/ranks/index.vue 0 → 100644
浏览文件 @ a388269d
<template>
<section class="rank-container">
<Header
:is-scroll="isScroll"
:share-title1="shareTitle1"
:share-title2="shareTitle2"
/>
<!-- 我的排名 -->
<div class="rank-info">
<div class="info-text">
<div class="info-detail">
<img src="../../static/images/task-four.png" />
<div class="info-name">
<span class="ft">用户昵称</span>
<span><span class="cl">22451</span>勤奋分</span>
</div>
</div>
<div class="info-score">
<p>45</p>
<span>我的排名</span>
</div>
</div>
<div class="rank-detail">
<div class="rank-num">
<span class="dlot"></span>
<span class="num">前一名：<span class="score">21956</span>勤奋分</span>
</div>
<span class="line"></span>
<div class="rank-num">
<span class="dlot"></span>
<span class="num">后一名：<span class="score">21956</span>勤奋分</span>
</div>
</div>
</div>
<!-- 排行榜 -->
<div class="main-content">
<div class="description"><span>排行榜</span>排名每5分钟更新1次 最后更新时间 7-15 12:05</div>
<div class="ranking-title">
<span>TOP10</span>
<span class="marginL">用户名称</span>
<span class="marginAuto">勤奋分</span>
</div>
<div class="ranking-list">
<div class="item" v-for="(item,index) in topRankList" :key="index">
<img v-if="index<=2" :src="dealRankIcon(index)" alt="" class="ranking-icon">
<p v-else class="icon-num" >{{index+1}}</p>
<p class="doctor-name">{{item.name}}</p>
<p class="num">{{item.score}}</p>
</div>
</div>
</div>
</section>
</template>
<script>
import Header from '../../components/header';
export default {
components: {
Header
},
data() {
return {
shareTitle1: '我的排名',
shareTitle2: '',
isScroll: true,
topRankList: [
{
name: '张**生',
score: 23455
},
{
name: '张**生',
score: 23455
},
{
name: '张**生',
score: 23455
},
{
name: '张**生',
score: 23455
}
]
}
},
methods: {
dealRankIcon(index) {
if(index == 0) {
return require('../../static/images/icon-gold.png')
} else if(index == 1) {
return require('../../static/images/icon-silver.png')
} else if(index == 2) {
return require('../../static/images/icon-copper.png')
}
},
}
}
</script>
<style lang="less" scoped>
.rank-container {
.rank-info {
padding-top: 70px;
height: 150px;
background-image:url('../../static/images/rank_head.png');
background-size: 100% 100%;
.info-text {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 15px 30px 13px 15px;
.info-detail {
img {
float: left;
width: 50px;
height: 50px;
}
.info-name {
display: inline-block;
padding: 9px;
font-size: 14px;
color: #fff;
span {
display: block;
}
span.ft {
font-weight: 700;
padding-bottom: 3px;
}
span.cl {
display: inline-block;
color: #FFE8A5;
}
}
}
.info-score {
color: #FFE8A5;
p {
font-size: 26px;
text-align: center;
}
span {
display: inline-block;
width: 68px;
height: 18px;
text-align: center;
border-radius: 9px;
border:1PX solid rgba(255,232,165,1);
}
}
}
.rank-detail {
margin: 0 15px 15px;
height: 30px;
background: rgba(153,31,51,1);
border-radius: 15px;
.rank-num{
float: left;
padding: 0px 16px;
line-height: 30px;
font-size: 13px;
color: #fff;
span.num {
padding-left: 5px;
}
span.dlot {
float: left;
width: 4px;
height: 4px;
margin-top: 14px;
border-radius: 50%;
background: #fff;
}
span.score {
color: #FFE8A5;
}
}
span.line {
float: left;
margin-top: 8px;
background: #fff;
width: 1PX;
height: 15px;
margin-top: 5px;
}
}
}
.main-content {
margin: -20px 10px 30px;
border-radius: 12px;
background: #fff;
box-shadow:0px 2px 20px 0px rgba(0,0,0,0.15);
.description {
border-radius: 12px 12px 0px 0px;
padding-left: 15px;
height: 48px;
line-height: 48px;
color: #979899;
font-size: 12px;
background: #FFF7F2;
span {
font-size: 16px;
color: #373839;
padding-right: 6px;
font-weight: 700;
}
}
.ranking-title {
display: flex;
align-items: center;
color: #373839;
font-size: 12px;
padding: 10px 40px 8px 30px;
border-bottom: 1px solid #F8F9FA;
.marginL {
margin-left: 40px;
}
.marginAuto {
margin-left: auto;
}
}
.ranking-list {
padding: 0 40px;
.item {
display: flex;
font-size: 12px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #F8F9FA;
.ranking-icon {
width: 15px;
height: 15px;
}
.icon-num {
width: 25px;
color: #373839;
}
.doctor-photo {
width: 35px;
height: 35px;
border-radius: 100%;
margin-left: 25px;
}
.doctor-name {
color: #333333;
font-size: 16px;
font-weight: 700;
margin-left: 10px;
width: 130px;
}
.num {
color: #373839;
font-weight: 700;
font-size: 18px;
margin-left: auto;
}
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或