Skip to content

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

我的排名页面编辑

上级 3bce84d1
隐藏空白字符变更
内嵌 并排
正在显示 包含 411 行增加 和 51 行删除
pages/index.vue
浏览文件 @ a388269d
<template> <template>
<div class="container"> <div class="container">
<Header <Header
v-if="userMobile" v-if="!userMobile"
:token="token" :token="token"
:is-scroll="isScroll" :is-scroll="isScroll"
:share-title1="shareTitle1" :share-title1="shareTitle1"
:share-title2="shareTitle2" :share-title2="shareTitle2"
:share-icon-url="shareIconUrl" :share-icon-url="shareIconUrl"
:isShowRightIcon="isShowRightIcon"
/> />
<!-- 勤奋分进度 --> <!-- 顶部 -->
<div class="progress-container"> <div class="top-container">
<div class="score-info"> <img class="rule" @click="ruleDetail" src="../static/images/rule.png" />
<div v-if="!userMobile" class="text"> <img class="rank" @click="gotoRank" src="../static/images/rank.png" />
<img src="../static/images/task-four.png" /> <!-- 勤奋分进度 -->
<span class="tc">我的勤奋分<span>{{12345}}</span></span> <div class="progress-container">
<span class="bt" @click="selfInfo">个人明细 ></span> <div class="score-info">
</div> <div v-if="!userMobile" class="text">
<div v-if="userMobile" class="text"> <img src="../static/images/task-four.png" />
<span class="tc">登录可参加活动</span> <span class="tc">我的勤奋分<span>{{12345}}</span></span>
<span class="bt" @click="goToLogin">去登录 ></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> </div>
<status-bar
class="progress-bar"
:isLogin="isLogin"/>
</div> </div>
<status-bar
class="progress-bar"
:isLogin="isLogin"/>
</div> </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="activity-step">
<div class="step bt"> <div class="step bt">
<step <step
...@@ -76,6 +83,7 @@ export default { ...@@ -76,6 +83,7 @@ export default {
}, },
data() { data() {
return { return {
isShowRightIcon: true, // 是否显示分享按钮
isLogin: false, isLogin: false,
userMobile: '', userMobile: '',
stepFlag: true, stepFlag: true,
...@@ -115,6 +123,14 @@ export default { ...@@ -115,6 +123,14 @@ export default {
} }
}); });
}, },
// 查看活动规则
ruleDetail() {
this.$router.push({path: "/login-point/point-result",query: {}});
},
// 查看排名
gotoRank() {
this.$router.push({path: "/ranks",query: {}});
},
// 去登录 // 去登录
goToLogin() { goToLogin() {
...@@ -139,46 +155,70 @@ export default { ...@@ -139,46 +155,70 @@ export default {
margin: 0 auto; margin: 0 auto;
min-height: 100vh; min-height: 100vh;
background: #B72541; background: #B72541;
.title-text { .top-container {
position: relative;
width: 100%; width: 100%;
} height: 430px;
.progress-container { background-image:url('../static/images/head_bg.png');
margin: 0 10px 15px; background-size: 100% 100%;
.score-info { .rule {
padding: 0 17px; position: absolute;
height: 48px; top: 75px;
background:linear-gradient(180deg,rgba(214,86,53,1) 0%,rgba(189,38,65,1) 100%); right: 0px;
border-radius:10px 10px 0px 0px; }
.text { .rank {
line-height: 48px; position: absolute;
img { top: 115px;
float: left; right: 15px;
width: 30px; }
height: 30px; .progress-container {
padding: 10px 10px 0px 0px; position: absolute;
} left: 0;
span.tc { top: 330px;
font-size: 14px; width: 94%;
font-weight: 700; margin: 0px 10px 15px;
color: #fff; .score-info {
span { padding: 0 17px;
padding-left: 10px; height: 48px;
font-size: 18px; background:linear-gradient(180deg,rgba(214,86,53,1) 0%,rgba(189,38,65,1) 100%);
color: #FFE8A5; 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; .title-text {
height: 87px; width: 100%;
border-radius: 0px 0px 10px 10px; }
} .title-text.st {
margin-top: 65px;
} }
.activity-step { .activity-step {
margin: 0 10px 15px; 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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或