Skip to content

W
walk_daka_h5
Commit e9b1408a by Caiyijun
Options

修复一些样式问题

parent 92f53f9f
Showing with 788 additions and 685 deletions
src/components/NoticeBonus.vue
...@@ -14,8 +14,8 @@ ...@@ -14,8 +14,8 @@
<style> <style>
.notice_bonus { .notice_bonus {
width: 3.6rem; width: 3.6rem;
height: .32rem; height: .44rem;
border-radius: .06rem; border-radius: .22rem;
background: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .2);
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -33,13 +33,13 @@ ...@@ -33,13 +33,13 @@
.msg_container { .msg_container {
flex: 1; flex: 1;
height: .32rem; height: .34rem;
transform-style: preserve-3d; transform-style: preserve-3d;
overflow: hidden; overflow: hidden;
} }
.notice_msg { .notice_msg {
font-size: .2rem; font-size: .24rem;
color: #fff; color: #fff;
line-height: .32rem; line-height: .32rem;
text-align: center; text-align: center;
......
src/components/axios/api.js
...@@ -424,6 +424,17 @@ export function pop_up_windows() { ...@@ -424,6 +424,17 @@ export function pop_up_windows() {
}) })
} }
//参与挑战
export function daka_info(grade){
return fetch({
url: api.daka_info,
method: 'GET',
params: {
grade: grade
}
})
}
//有新接口的时候像上面那样再来一次 //有新接口的时候像上面那样再来一次
// //修改昵称接口 // //修改昵称接口
......
src/components/axios/fetch.js
...@@ -18,7 +18,7 @@ export function fetch(options) { ...@@ -18,7 +18,7 @@ export function fetch(options) {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
// 'Authorization': window['userData']?window['userData'].token:'' // 'Authorization': window['userData']?window['userData'].token:''
'Authorization':"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAiLCJvcGVuX2lkIjoiMTExMTExMTExMTExMTExMTExMTExMTExMTExMSIsInVuaW9uX2lkIjoiMTExMTExMTExMTExMTExMTExMTExMTExMTExMSIsImV4cCI6MTU1NDI5MjEwOX0.Qp6mudnew6XyX4xsDgV9J2wgimUBHdaSWN9zqBSeUfg" 'Authorization':"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAiLCJvcGVuX2lkIjoiMTExMTExMTExMTExMTExMTExMTExMTExMTExMSIsInVuaW9uX2lkIjoiMTExMTExMTExMTExMTExMTExMTExMTExMTExMSIsImV4cCI6MTU1NDMxMTMzMH0.4UEG6I9K0JARU5KDMW-Xwx13DMniYelsmI-qWd97e_c"
// 'token_in_header': global_.token,//token从全局变量那里传过来 // 'token_in_header': global_.token,//token从全局变量那里传过来
}, },
timeout: 30 * 1000 // 30秒超时 timeout: 30 * 1000 // 30秒超时
......
src/components/axios/url.js
//也可以像下面这样，区分环境或者区分服务器等等 //也可以像下面这样，区分环境或者区分服务器等等
let service = 'dev'; let service = 'dev'
// let service = 'prod'; // let service = 'prod';
let api = ''; let api = ''
if (service === 'dev') { if (service === 'dev') {
/**dev开发**/ /**dev开发**/
api = ''; api = ''
} else if (service === 'prod') { } else if (service === 'prod') {
/**prod部署**/ /**prod部署**/
api = 'https://miniapp-api.wxatech.com/game-bsdk'; api = 'https://miniapp-api.wxatech.com/game-bsdk'
} }
let trackApi = ''; let trackApi = ''
if (service === 'dev') { if (service === 'dev') {
/**dev开发**/ /**dev开发**/
trackApi = 'https://test-api.wxagame.com/game-track'; trackApi = 'https://test-api.wxagame.com/game-track'
} else if (service === 'prod') { } else if (service === 'prod') {
/**prod部署**/ /**prod部署**/
trackApi = 'https://minigame.api.wxagame.com/game-track'; trackApi = 'https://minigame.api.wxagame.com/game-track'
} }
export default { export default {
/**个人中心start**/ /**个人中心start**/
//1 打卡查询 GET /api/v1/daka_status //1 打卡查询 GET /api/v1/daka_status
dakaStatusPath: `${api}/api/v1/daka_status`, dakaStatusPath: `${api}/api/v1/daka_status`,
//2 打卡操作 POST /api/v1/daka //2 打卡操作 POST /api/v1/daka
dakaPath: `${api}/api/v1/daka`, dakaPath: `${api}/api/v1/daka`,
//3 打卡记录 GET /api/v1/daka_records //3 打卡记录 GET /api/v1/daka_records
dakaRecordsTotalPath: `${api}/api/v1/daka_records/total`, dakaRecordsTotalPath: `${api}/api/v1/daka_records/total`,
dakaRecordsListPath: `${api}/api/v1/daka_records/list`, dakaRecordsListPath: `${api}/api/v1/daka_records/list`,
dakaRecordsDetailPath: `${api}/api/v1/daka_records/detail`, dakaRecordsDetailPath: `${api}/api/v1/daka_records/detail`,
//4 走马灯、玩法 GET /api/v1/game_info //4 走马灯、玩法 GET /api/v1/game_info
gameInfoPath: `${api}/api/v1/game_info`, gameInfoPath: `${api}/api/v1/game_info`,
//5 余额查询 GET /api/v1/balance_query //5 余额查询 GET /api/v1/balance_query
balanceQueryPath: `${api}/api/v1/balance_query`, balanceQueryPath: `${api}/api/v1/balance_query`,
//6 余额提现 GET /api/v1/balance_withdraw //6 余额提现 GET /api/v1/balance_withdraw
balanceWithdrawPath: `${api}/api/v1/balance_withdraw`, balanceWithdrawPath: `${api}/api/v1/balance_withdraw`,
//7 常见问题 GET /api/v1/faq //7 常见问题 GET /api/v1/faq
faqPath: `${api}/api/v1/faq`, faqPath: `${api}/api/v1/faq`,
//8 客服 GET /api/v1/kefu //8 客服 GET /api/v1/kefu
kefuPath: `${api}/api/v1/kefu`, kefuPath: `${api}/api/v1/kefu`,
//9 关注公众号 GET /api/v1/oc_follow //9 关注公众号 GET /api/v1/oc_follow
ocFollowPath: `${api}/api/v1/oc_follow`, ocFollowPath: `${api}/api/v1/oc_follow`,
//10 报名支付 GET /api/v1/daka_pay //10 报名支付 GET /api/v1/daka_pay
dakaPayPath: `${api}/api/v1/daka_pay`, dakaPayPath: `${api}/api/v1/daka_pay`,
//11 jssdk注入 //11 jssdk注入
jssdkPath: `${api}/api/v1/config/jssdk`, jssdkPath: `${api}/api/v1/config/jssdk`,
// 12 提现banner GET /api/v1/config/withdraw_banner // 12 提现banner GET /api/v1/config/withdraw_banner
withdrawBannerPath: `${api}/api/v1/config/withdraw_banner`, withdrawBannerPath: `${api}/api/v1/config/withdraw_banner`,
// 13 用户复活卡，免契约金卡信息 GET /api/v1/user_cards // 13 用户复活卡，免契约金卡信息 GET /api/v1/user_cards
userCardPath: `${api}/api/v1/user_cards`, userCardPath: `${api}/api/v1/user_cards`,
// 14 分享内容 /api/v1/config/share_content // 14 分享内容 /api/v1/config/share_content
shareContentPath: `${api}/api/v1/config/share_content`, shareContentPath: `${api}/api/v1/config/share_content`,
// 15 获取规则文本 /api/v1/get_rule // 15 获取规则文本 /api/v1/get_rule
getRulePath: `${api}/api/v1/get_rule`, getRulePath: `${api}/api/v1/get_rule`,
// 16 数据埋点 /api/v1/tracking // 16 数据埋点 /api/v1/tracking
trackingPath: `${api}/api/v1/tracking`, trackingPath: `${api}/api/v1/tracking`,
// 17 关注公众号图片 /api/v1/liin_share_image // 17 关注公众号图片 /api/v1/liin_share_image
liinShareImagePath: `${api}/api/v1/liin_share_image`, liinShareImagePath: `${api}/api/v1/liin_share_image`,
// 18 每日分享图 /api/v1/daily_share_image // 18 每日分享图 /api/v1/daily_share_image
dailyShareImagePath: `${api}/api/v1/qrcode_url`, dailyShareImagePath: `${api}/api/v1/qrcode_url`,
// 19 每日排行榜 /api/v1/daka_rank // 19 每日排行榜 /api/v1/daka_rank
dakaRankPath: `${api}/api/v1/daka_rank`, dakaRankPath: `${api}/api/v1/daka_rank`,
// 20 新用户 /api/v1/first_daka // 20 新用户 /api/v1/first_daka
firstDakaPath: `${api}/api/v1/first_daka`, firstDakaPath: `${api}/api/v1/first_daka`,
// 21 个人排名 /api/v1/person_rank_info // 21 个人排名 /api/v1/person_rank_info
personRankInfoPath: `${api}/api/v1/person_rank_info`, personRankInfoPath: `${api}/api/v1/person_rank_info`,
// 22 用户当月打卡状态查询 // 22 用户当月打卡状态查询
daka_status_list: `${api}/api/v1/daka_status/list`, daka_status_list: `${api}/api/v1/daka_status/list`,
// 23 每日故事详情 // 23 每日故事详情
story_detail: `${api}/api/v1/story/detail`, story_detail: `${api}/api/v1/story/detail`,
// 24 每日故事列表 // 24 每日故事列表
story_list: `${api}/api/v1/story/list`, story_list: `${api}/api/v1/story/list`,
// 25 记录详情 // 25 记录详情
daka_records_detail: `${api}/api/v1/daka_records/detail`, daka_records_detail: `${api}/api/v1/daka_records/detail`,
// 25 规则详情 // 25 规则详情
daka_rule: `${api}/api/v1/daka_rule`, daka_rule: `${api}/api/v1/daka_rule`,
// 26 红包 /api/v1/withdraw_img // 26 红包 /api/v1/withdraw_img
withdraw_img: `${api}/api/v1/withdraw_img`, withdraw_img: `${api}/api/v1/withdraw_img`,
// 27 提现明细 /api/v1/withdraw_log // 27 提现明细 /api/v1/withdraw_log
withdraw_log: `${api}/api/v1/withdraw_log`, withdraw_log: `${api}/api/v1/withdraw_log`,
// 首页数据 // 首页数据
daka_index: `${api}/api/v1/daka_index`, daka_index: `${api}/api/v1/daka_index`,
// 判断用户是否参与比赛 // 判断用户是否参与比赛
select_user_signup: `${api}/api/v1/select_user_signup`, select_user_signup: `${api}/api/v1/select_user_signup`,
// 比赛详情 // 比赛详情
daka_status_detail: `${api}/api/v1/daka_status/detail`, daka_status_detail: `${api}/api/v1/daka_status/detail`,
// 比赛详情弹窗 // 比赛详情弹窗
pop_up_windows: `${api}/api/v1/pop_up_windows`, pop_up_windows: `${api}/api/v1/pop_up_windows`,
//首页第一项立即报名
daka_info: `${api}/api/v1/daka_info`,
} }
src/views/ChallengeDetail.vue
<template> <template>
<div class="partake-challenge-page"> <div class="partake-challenge-page">
<Title class="page-title" title="　" v-on:goback="goback" show_back="true"></Title> <Title class="page-title" title="　" v-on:goback="goback" show_back="true"></Title>
<div class="game-rule-container" @click="goOtherPage('Rule')"> <div class="game-rule-container" @click="goOtherPage('Rule')">
<img src="../images/ChallengeDetail/ic_que.png"> <img src="../images/ChallengeDetail/ic_que.png">
活动规则 活动规则
</div>
<div class="game-bonus-container">
<div class="bonus-title">本期累计奖励金（元）</div>
<div class="bonus-amount">{{pageData.bet_bonus}}</div>
</div>
<div class="game-title">{{pageData.target_step}}步三日耐力赛</div>
<div class="game-time">开赛时间：{{pageData.start_format}} — {{pageData.end_format}}</div>
<div class="hr"></div>
<div class="game-info-container">
<div class="game-info-section">
<div class="section-item">
<div class="item-value">{{pageData.total_money}}</div>
<div class="item-key">总奖励金（元）</div>
</div>
<div class="section-item">
<div class="item-value">{{pageData.bet_rate}}</div>
<div class="item-key">收益率</div>
</div> </div>
</div> <div class="game-bonus-container">
<div class="game-info-section"> <div class="bonus-title" v-if="pageData.status !== 2">预计达标奖励金（元）</div>
<div class="section-item"> <div class="bonus-title" v-else>达标奖励金（元）</div>
<div class="item-value">{{pageData.people_cnt}}</div> <div class="bonus-amount">{{pageData.bet_bonus}}</div>
<div class="item-key">达标人数</div>
</div> </div>
<div class="section-item"> <div class="game-title">{{pageData.target_step}}步三日耐力赛</div>
<div class="item-value">{{pageData.total_signup}}</div> <div class="game-time">开赛时间：{{pageData.start_format}} — {{pageData.end_format}}</div>
<div class="item-key">参赛人数</div> <div class="hr"></div>
<div class="game-info-container">
<div class="game-info-section">
<div class="section-item">
<div class="item-value">{{pageData.total_money}}</div>
<div class="item-key">总奖励金（元）</div>
</div>
<div class="section-item">
<div class="item-value">{{pageData.bet_rate}}</div>
<div class="item-key">收益率</div>
</div>
</div>
<div class="game-info-section">
<div class="section-item">
<div class="item-value">{{pageData.people_cnt}}</div>
<div class="item-key">达标人数</div>
</div>
<div class="section-item">
<div class="item-value">{{pageData.total_signup}}</div>
<div class="item-key">参赛人数</div>
</div>
</div>
</div> </div>
</div> <div class="share-btn" @click="inviteFriend">邀请好友来参赛0</div>
<ShareModal
v-on:close="closeShareModal"
v-if="showShareModal"
></ShareModal>
</div> </div>
<div class="share-btn" @click="inviteFriend">邀请好友来参赛</div>
<ShareModal
v-on:close="closeShareModal"
v-if="showShareModal"
></ShareModal>
</div>
</template> </template>
<script> <script>
import Title from "@/components/Title.vue"; import Title from "@/components/Title.vue"
import ShareModal from "@/components/ShareModal.vue"; import ShareModal from "@/components/ShareModal.vue"
import {dakaPay, shareContent, track, liinShare} from "@/components/axios/api"; import {dakaPay, shareContent, track, liinShare} from "@/components/axios/api"
export default { let grabStartTimer = null
name: "ChallengeDetail", export default {
components: { name: "ChallengeDetail",
Title, components: {
ShareModal Title,
}, ShareModal
data() { },
return { data () {
pageData: JSON.parse(sessionStorage.getItem('ChallengeDetailData')), return {
showShareModal: false, pageData: JSON.parse(sessionStorage.getItem('ChallengeDetailData')),
userData: null showShareModal: false,
} userData: null,
}, grabTimer: '--时--分--秒'
mounted() { }
console.log("this.pageType", this.page_type); },
if (window["userData"]) { mounted () {
this.userData = window["userData"]; console.log("this.pageType", this.page_type)
} else { if (window["userData"]) {
let localUserData = localStorage.getItem("bs_userData"); this.userData = window["userData"]
if (localUserData) { } else {
window["userData"] = JSON.parse(localUserData); let localUserData = localStorage.getItem("bs_userData")
this.userData = window["userData"]; if (localUserData) {
} window["userData"] = JSON.parse(localUserData)
} this.userData = window["userData"]
console.log("userData", this.userData); }
}, }
methods: { console.log("userData", this.userData)
goback() { },
history.go(-1); methods: {
}, goback () {
goOtherPage(pageName) { history.go(-1)
this.$router.push({name: pageName}); },
}, goOtherPage (pageName) {
inviteFriend() { this.$router.push({name: pageName})
console.log("inviteFriend"); },
this.showShareModal = true; inviteFriend () {
let id = this.userData.id; console.log("inviteFriend")
// let id = 'yijun'; this.showShareModal = true
track("free_contract_share"); let id = this.userData.id
let links = `${ // let id = 'yijun';
location.href.split("#")[0].split("?")[0]}?inviter=${id}&from_type=free_contract&`; track("free_contract_share")
shareContent("free_contract").then(res => { let links = `${
let result = res.data; location.href.split("#")[0].split("?")[0]}?inviter=${id}&from_type=free_contract&`
console.log("分享内容", result, links); shareContent("free_contract").then(res => {
let option1 = { let result = res.data
title: result.title, // 分享标题 console.log("分享内容", result, links)
desc: result.desc, // 分享描述 let option1 = {
link: links, // 分享链接 title: result.title, // 分享标题
imgUrl: result.img_url, // 分享图标 desc: result.desc, // 分享描述
success: function(res) { link: links, // 分享链接
track("free_contract_share_act"); imgUrl: result.img_url, // 分享图标
console.log("option1Success", res); success: function (res) {
} track("free_contract_share_act")
}; console.log("option1Success", res)
wx.updateAppMessageShareData(option1); }
//微信分享菜单测试 }
let option2 = { wx.updateAppMessageShareData(option1)
title: result.title, // 分享标题 //微信分享菜单测试
desc: result.desc, // 分享描述 let option2 = {
link: links, // 分享链接 title: result.title, // 分享标题
imgUrl: result.img_url, // 分享图标 desc: result.desc, // 分享描述
success: function(res) { link: links, // 分享链接
console.log("option2Success", res); imgUrl: result.img_url, // 分享图标
} success: function (res) {
}; console.log("option2Success", res)
let option3 = { }
title: result.title, // 分享标题 }
desc: result.desc, // 分享描述 let option3 = {
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 title: result.title, // 分享标题
imgUrl: result.img_url, // 分享图标 desc: result.desc, // 分享描述
success: function(res) { link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// 用户点击了分享后执行的回调函数 imgUrl: result.img_url, // 分享图标
track("free_contract_share_act"); success: function (res) {
console.log("option3Success", res); // 用户点击了分享后执行的回调函数
}, track("free_contract_share_act")
fail: err => { console.log("option3Success", res)
console.log("option3error", err); },
} fail: err => {
}; console.log("option3error", err)
wx.onMenuShareAppMessage(option3); }
let option4 = { }
title: result.title, // 分享标题 wx.onMenuShareAppMessage(option3)
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 let option4 = {
imgUrl: result.img_url, // 分享图标 title: result.title, // 分享标题
success: function(res) { link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
console.log("option4Success", res); imgUrl: result.img_url, // 分享图标
}, success: function (res) {
fail: err => { console.log("option4Success", res)
console.log("option4error", err); },
} fail: err => {
}; console.log("option4error", err)
// wx.onMenuShareTimeline(option4); }
console.log("option", option1, option2, option3, option4); }
}); // wx.onMenuShareTimeline(option4);
}, console.log("option", option1, option2, option3, option4)
closeShareModal() { })
this.showShareModal = false; },
closeShareModal () {
this.showShareModal = false
},
//倒计时
countDown (times) {
clearInterval(grabStartTimer)
grabStartTimer = null
grabStartTimer = setInterval(function () {
let day = 0,
hour = 0,
minute = 0,
second = 0//时间默认值
// console.log('times:' + times)
if (times > 0) {
day = Math.floor(times / (60 * 60 * 24))
hour = Math.floor(times / (60 * 60)) - (day * 24)
minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60)
second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
if (day < 1) day = ''
else day = day + '天'
if (hour <= 9) hour = '0' + hour
if (minute <= 9) minute = '0' + minute
if (second <= 9) second = '0' + second
this. grabTimer = (day + hour + '时' + minute + '分' + second + '秒')
} else {
clearInterval(grabStartTimer)
// that.setData({
// redpack: {
// ...that.data.redpack,
// redpackStatus: 2
// }
// })
}
times--
//
//console.log(day + "天:" + hour + "小时：" + minute + "分钟：" + second + "秒");
}, 1000)
}
}
} }
}
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.partake-challenge-page { .partake-challenge-page {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
background-color: rgb(70, 88, 149); background-color: rgb(70, 88, 149);
background-image: url(../images/SignUp/sy_beijing.png); background-image: url(../images/SignUp/sy_beijing.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
background-position: center top; background-position: center top;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
position: relative;
.page-title {
position: fixed;
left: 0;
top: 0;
}
.game-rule-container {
display: flex;
align-items: center;
position: absolute;
top: 0.3rem;
right: 0.22rem;
font-size: 0.26rem;
line-height: 1;
color: #465895;
img {
width: 0.3rem;
height: 0.3rem;
margin-right: 0.1rem;
}
}
.game-bonus-container {
width: 6.4rem;
padding: 0.3rem 0;
box-sizing: border-box;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
#1a285a,
rgba(255, 255, 255, 0)
);
margin-top: 2.38rem;
.bonus-title {
font-size: 0.3rem;
line-height: 1;
color: #fff;
text-align: center;
}
.bonus-amount {
font-size: 0.64rem;
line-height: 0.8;
color: #ffe253;
text-align: center;
margin-top: 0.26rem;
}
}
.game-title {
font-size: 0.36rem;
line-height: 1;
color: #fff;
font-weight: bold;
margin-top: 0.4rem;
}
.game-time {
font-size: 0.24rem;
line-height: 1;
color: #d6dfff;
padding: 0.12rem 0.38rem;
border-radius: 0.48rem;
background: #556cb6;
margin-top: 0.14rem;
}
.hr {
width: 3rem;
height: 0.01rem;
background: #6f82c3;
margin-top: 0.5rem;
}
.game-info-container {
width: 6rem;
background: #3d4f8f;
margin-top: 0.5rem;
.game-info-section {
width: 100%;
height: 1.34rem;
display: flex;
align-items: center;
.section-item {
flex: 1;
position: relative; position: relative;
&:last-child:after { .page-title {
content: ""; position: fixed;
width: 0.02rem; left: 0;
height: 0.4rem; top: 0;
background: #a2b4ee; }
position: absolute; .game-rule-container {
left: 0; display: flex;
top: 50%; align-items: center;
transform: translateY(-50%); position: absolute;
top: 0.3rem;
right: 0.22rem;
font-size: 0.26rem;
line-height: 1;
color: #465895;
img {
width: 0.3rem;
height: 0.3rem;
margin-right: 0.1rem;
}
}
.game-bonus-container {
width: 6.4rem;
padding: 0.3rem 0;
box-sizing: border-box;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
#1a285a,
rgba(255, 255, 255, 0)
);
margin-top: 2.38rem;
.bonus-title {
font-size: 0.3rem;
line-height: 1;
color: #fff;
text-align: center;
}
.bonus-amount {
font-size: 0.64rem;
line-height: 0.8;
color: #ffe253;
text-align: center;
margin-top: 0.26rem;
}
}
.game-title {
font-size: 0.36rem;
line-height: 1;
color: #fff;
font-weight: bold;
margin-top: 0.4rem;
}
.game-time {
font-size: 0.24rem;
line-height: 1;
color: #d6dfff;
padding: 0.12rem 0.38rem;
border-radius: 0.48rem;
background: #556cb6;
margin-top: 0.14rem;
}
.hr {
width: 3rem;
height: 0.01rem;
background: #6f82c3;
margin-top: 0.5rem;
} }
.item-value { .game-info-container {
font-size: 0.4rem; width: 6rem;
line-height: 0.8; background: #3d4f8f;
color: #fff; margin-top: 0.5rem;
text-align: center; .game-info-section {
width: 100%;
height: 1.34rem;
display: flex;
align-items: center;
.section-item {
flex: 1;
position: relative;
&:last-child:after {
content: "";
width: 0.02rem;
height: 0.4rem;
background: #a2b4ee;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.item-value {
font-size: 0.4rem;
line-height: 0.8;
color: #fff;
text-align: center;
}
.item-key {
font-size: 0.26rem;
line-height: 1;
color: #fff;
text-align: center;
margin-top: 0.18rem;
}
}
}
} }
.item-key { .share-btn {
font-size: 0.26rem; width: 5.6rem;
line-height: 1; border-radius: 0.92rem;
color: #fff; background: #1fdbb1;
text-align: center; font-size: 0.4rem;
margin-top: 0.18rem; line-height: 0.92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 2.24rem;
} }
}
} }
}
.share-btn {
width: 5.6rem;
border-radius: 0.92rem;
background: #1fdbb1;
font-size: 0.4rem;
line-height: 0.92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 2.24rem;
}
}
</style> </style>
src/views/HaveJoinedGame.vue
...@@ -101,9 +101,9 @@ ...@@ -101,9 +101,9 @@
data() { data() {
return { return {
swiperOption: { swiperOption: {
slidesPerView: "auto", slidesPerView: 'auto',
centeredSlides: true, centeredSlides: true,
spaceBetween: 10 spaceBetween: 10,
}, },
bet_bonus: '0.00', bet_bonus: '0.00',
next_signup: false, next_signup: false,
...@@ -171,7 +171,7 @@ ...@@ -171,7 +171,7 @@
<style lang="less" scoped> <style lang="less" scoped>
.swiper-container { .swiper-container {
margin-left: 0 !important; /*margin-left: 0 !important;*/
} }
.swiper-slide { .swiper-slide {
......
src/views/MainPage.vue
...@@ -58,6 +58,7 @@ ...@@ -58,6 +58,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 999; z-index: 999;
box-shadow: 0 -0.01rem 0 #e5e5e5;
.bottom-tab { .bottom-tab {
flex: 1; flex: 1;
height: 100%; height: 100%;
......
src/views/PartakeChallenge.vue
<template> <template>
<div class="partake-challenge-page"> <div class="partake-challenge-page">
<Title class="page-title" title="　" v-on:goback="goback" show_back="true" v-if="currentPage()==='PartakeChallenge'"></Title> <Title class="page-title" title="　" v-on:goback="goback" show_back="true"
<div class="game-title">5000步七日耐力赛</div> v-if="currentPage()==='PartakeChallenge'"></Title>
<div class="game-time">开赛时间：3月11日 00:00-3月17日24:00</div> <div class="game-title">5000步七日耐力赛</div>
<div class="game-cost">本期运动契约金：<span>21.00元/人</span></div> <div class="game-time">开赛时间：3月11日 00:00-3月17日24:00</div>
<div class="game-introduce-container"> <div class="game-cost">本期运动契约金：<span>21.00元/人</span></div>
<div class="game-introduce-title"> <div class="game-introduce-container">
<img src="../images/PartakeChallenge/ic_3.png"> <div class="game-introduce-title">
步赚取运动奖励金 <img src="../images/PartakeChallenge/ic_3.png">
</div> 步赚取运动奖励金
<div class="game-introduce-section"> </div>
<img class="section-icon" src="../images/PartakeChallenge/ic_join.png"> <div class="game-introduce-section">
<div class="section-content"> <img class="section-icon" src="../images/PartakeChallenge/ic_join.png">
<div class="content-title">报名参赛</div> <div class="section-content">
<div class="content-text">支付7.00元运动契约金，即可加入5000步日耐力赛，契约金平均分配到每个比赛日，每日结算1次。</div> <div class="content-title">报名参赛</div>
<div class="content-text">支付7.00元运动契约金，即可加入5000步日耐力赛，契约金平均分配到每个比赛日，每日结算1次。</div>
</div>
</div>
<div class="game-introduce-section">
<img class="section-icon" src="../images/PartakeChallenge/ic_suc.png">
<div class="section-content">
<div class="content-title">运动达标</div>
<div class="content-text">每日走满5000步即可达标，获得当日奖励资格；未达标用户将失去后续比赛的参赛资格，其契约金将继续作为奖励金奖励达标用户。</div>
</div>
</div>
<div class="game-introduce-section">
<img class="section-icon" src="../images/PartakeChallenge/ic_money.png">
<div class="section-content">
<div class="content-title">获得奖励</div>
<div class="content-text">次日结算前日比赛，达标者获得对应奖励金；总奖励金为用户每日达标奖金之和。</div>
</div>
</div>
<div class="game-introduce-join-container" v-if="currentPage()!=='PartakeChallenge'">
<div class="auth-container" @click="bindArgeement()">
<div style="display: flex;">
<img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="argeement">
<div class="auth-uncheck" v-else></div>
<div class="text1">我同意</div>
</div>
<div class="text2" @click="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div>
</div>
<div class="partake-btn">立即报名</div>
</div>
</div> </div>
</div> <div class="footer-container" v-if="currentPage()==='PartakeChallenge'">
<div class="game-introduce-section"> <div class="auth-container" @click="bindArgeement()">
<img class="section-icon" src="../images/PartakeChallenge/ic_suc.png"> <div style="display: flex;">
<div class="section-content"> <img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="argeement">
<div class="content-title">运动达标</div> <div class="auth-uncheck" v-else></div>
<div class="content-text">每日走满5000步即可达标，获得当日奖励资格；未达标用户将失去后续比赛的参赛资格，其契约金将继续作为奖励金奖励达标用户。</div> <div class="text1">我同意</div>
</div>
<div class="text2" @click="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div>
</div>
<div class="partake-btn" @click="payToSign()">立即报名</div>
</div> </div>
</div> <PayFailModal v-if="isShowPayFail" @close="togglePayFail()"></PayFailModal>
<div class="game-introduce-section"> <div class="modal" v-if="modalShown">
<img class="section-icon" src="../images/PartakeChallenge/ic_money.png"> <Modal v-on:close="closeModal" v-on:confirmModal="confirmModal" v-bind:title="modalTitle"
<div class="section-content"> v-bind:desc="modalDesc" :option="modalOption"></Modal>
<div class="content-title">获得奖励</div>
<div class="content-text">次日结算前日比赛，达标者获得对应奖励金；总奖励金为用户每日达标奖金之和。</div>
</div> </div>
</div> <div class="modal" v-if="showFreeModal">
<div class="game-introduce-join-container" v-if="currentPage()!=='PartakeChallenge'"> <Free
<div class="auth-container"> v-bind:page_type="1"
<img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="true"> v-on:close="closeFree"
<div class="auth-uncheck" v-else></div> v-bind:v_data="contract_data"
<div class="text1">我同意</div> @showModal="showModal"
<div class="text2" @click="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div> @success="showSuccess"
:days="0"
></Free>
</div> </div>
<div class="partake-btn">立即报名</div>
</div>
</div> </div>
<div class="footer-container" v-if="currentPage()==='PartakeChallenge'">
<div class="auth-container">
<img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="true">
<div class="auth-uncheck" v-else></div>
<div class="text1">我同意</div>
<div class="text2" @click="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div>
</div>
<div class="partake-btn" @click="payToSign()">立即报名</div>
</div>
<PayFailModal v-if="isShowPayFail" @close="togglePayFail()"></PayFailModal>
<div class="modal" v-if="modalShown">
<Modal v-on:close="closeModal" v-on:confirmModal="confirmModal" v-bind:title="modalTitle" v-bind:desc="modalDesc" :option="modalOption"></Modal>
</div>
<div class="modal" v-if="showFreeModal">
<Free
v-bind:page_type="1"
v-on:close="closeFree"
v-bind:v_data="contract_data"
@showModal="showModal"
@success="showSuccess"
:days="0"
></Free>
</div>
</div>
</template> </template>
<script> <script>
import Title from "@/components/Title.vue"; import Title from "@/components/Title.vue"
import PayFailModal from "@/components/PayFailModal.vue"; import PayFailModal from "@/components/PayFailModal.vue"
import Free from "@/components/Free.vue"; import Free from "@/components/Free.vue"
import Modal from "@/components/Modal.vue"; import Modal from "@/components/Modal.vue"
import { import {daka_info} from "@/components/axios/api";
dakaPay import {
} from "@/components/axios/api"; dakaPay
export default { } from "@/components/axios/api"
name: "PartakeChallenge",
components: { export default {
Title, name: "PartakeChallenge",
PayFailModal, components: {
Modal, Title,
Free PayFailModal,
}, Modal,
data() { Free
return { },
isShowPayFail: false, data () {
showFreeModal: false, return {
modalTitle: "", isShowPayFail: false,
modalDesc: "", showFreeModal: false,
modalShown: false, modalTitle: "",
} modalDesc: "",
}, modalShown: false,
created() { argeement: true
}, }
methods: { },
goback() { created () {
history.go(-1); this.getPageData()
}, },
goOtherPage(pageName) { methods: {
this.$router.push({name: pageName}); goback () {
}, history.go(-1)
currentPage() { },
return this.$router.history.current.name; goOtherPage (pageName) {
}, this.$router.push({name: pageName})
togglePayFail() { },
this.isShowPayFail = !this.isShowPayFail currentPage () {
}, return this.$router.history.current.name
payToSign() { },
let nextGame = 0; togglePayFail () {
if (this.$route.query.nextGame) { this.isShowPayFail = !this.isShowPayFail
nextGame = 2; },
} payToSign () {
dakaPay(sessionStorage.getItem("bushuType"), nextGame).then(response => { if(!this.argeement){
if (response.code == 1) { this.showModal("温馨提示", '请先同意协议')
this.showModal("温馨提示", response.msg); return
return;
}
let result = response.data;
console.log("请求打卡支付数据", result);
if (result) {
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: result.appId, //公众号名称，由商户传入
timeStamp: result.timeStamp, //时间戳，自1970年以来的秒数
nonceStr: result.nonceStr, //随机串
package: result.package,
signType: result.signType, //微信签名方式：
paySign: result.paySign //微信签名
},
// result,
res => {
console.log("支付调用结果", res);
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
// 支付成功后的回调函数
console.log("支付成功");
this.showSuccess();
// this.dateSelect(2);
// localStorage.setItem("is_every", 0)
// location.replace("#/Success");
} }
if (res.err_msg == "get_brand_wcpay_request:fail") { let nextGame = 0
// this.showModal("温馨提示", "支付服务繁忙，请稍后重试"); if (this.$route.query.nextGame) {
this.togglePayFail() nextGame = 2
} }
if (res.err_msg == "get_brand_wcpay_request:cancel") { dakaPay(sessionStorage.getItem("bushuType"), nextGame).then(response => {
// console.log("支付取消"); if (response.code == 1) {
this.togglePayFail() this.showModal("温馨提示", response.msg)
return
}
let result = response.data
console.log("请求打卡支付数据", result)
if (result) {
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: result.appId, //公众号名称，由商户传入
timeStamp: result.timeStamp, //时间戳，自1970年以来的秒数
nonceStr: result.nonceStr, //随机串
package: result.package,
signType: result.signType, //微信签名方式：
paySign: result.paySign //微信签名
},
// result,
res => {
console.log("支付调用结果", res)
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
// 支付成功后的回调函数
console.log("支付成功")
this.showSuccess()
// this.dateSelect(2);
// localStorage.setItem("is_every", 0)
// location.replace("#/Success");
}
if (res.err_msg == "get_brand_wcpay_request:fail") {
// this.showModal("温馨提示", "支付服务繁忙，请稍后重试");
this.togglePayFail()
}
if (res.err_msg == "get_brand_wcpay_request:cancel") {
// console.log("支付取消");
this.togglePayFail()
}
}
)
}
})
},
showModal (title, desc, option) {
this.modalTitle = title || ""
this.modalDesc = desc || ""
this.modalOption = option || {}
this.modalShown = true
},
showSuccess () {
this.showModal("温馨提示", "报名成功", {
scb: () => {
sessionStorage.setItem('userHaveJoinGame', 'true')
this.$router.push({name: "HaveJoinedGame"})
}
})
},
closeFree () {
this.showFreeModal = false
},
closeModal () {
this.modalShown = false
},
confirmModal (scb) {
scb && scb()
this.modalShown = false
},
bindArgeement () {
console.log('我同意')
this.argeement = !this.argeement
},
getPageData(){
let grade = 1
if(sessionStorage.getItem('bushuType')){
grade = sessionStorage.getItem('bushuType')
} }
} console.log(grade)
); daka_info(grade).then(res=>{
} console.log('立即参与',res)
}); })
}, }
showModal(title, desc, option) { }
this.modalTitle = title || "";
this.modalDesc = desc || "";
this.modalOption = option || {}
this.modalShown = true;
},
showSuccess() {
this.showModal("温馨提示", "报名成功", {
scb: () => {
sessionStorage.setItem('userHaveJoinGame', 'true');
this.$router.push({name: "HaveJoinedGame"});
}
});
},
closeFree() {
this.showFreeModal = false;
},
closeModal() {
this.modalShown = false;
},
confirmModal(scb) {
scb && scb()
this.modalShown = false;
},
} }
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.partake-challenge-page { .partake-challenge-page {
min-height: 100vh; min-height: 100vh;
background-color: rgb(70, 88, 149); background-color: rgb(70, 88, 149);
background-image: url(../images/SignUp/sy_beijing.png); background-image: url(../images/SignUp/sy_beijing.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
background-position: center top; background-position: center top;
display: flex;
flex-direction: column;
align-items: center;
.page-title {
position: fixed;
left: 0;
top: 0;
}
.game-title {
font-size: .36rem;
line-height: 1;
color: #fff;
font-weight: bold;
margin-top: 4.4rem;
}
.game-time {
font-size: .24rem;
line-height: 1;
color: #D6DFFF;
padding: .12rem .38rem;
border-radius: .48rem;
background: #556CB6;
margin-top: .14rem;
}
.game-cost {
font-size: .26rem;
line-height: 1;
color: #fff;
margin-top: .34rem;
span {
color: #FFE253;
}
}
.game-introduce-container {
width: 7.1rem;
border-radius: .08rem;
padding: .36rem .28rem .3rem;
box-sizing: border-box;
background: #fff;
margin-top: .34rem;
margin-bottom: 1.6rem;
display: flex;
flex-direction: column;
align-items: center;
.game-introduce-title {
display: flex; display: flex;
align-items: flex-end; flex-direction: column;
font-size: .3rem; align-items: center;
line-height: 1; /*align-content: center;*/
color: #333; .page-title {
margin-bottom: .24rem; position: fixed;
flex-shrink: 0; left: 0;
img { top: 0;
width: .26rem;
height: .35rem;
margin-right: .08rem;
} }
} .game-title {
.game-introduce-section { font-size: .36rem;
width: 100%; line-height: 1;
margin-top: .34rem; color: #fff;
display: flex; font-weight: bold;
align-items: flex-start; margin-top: 4.4rem;
flex-shrink: 0;
&:last-of-type .section-content {
border-bottom: none;
} }
.section-icon { .game-time {
width: .8rem; font-size: .24rem;
height: .8rem; line-height: 1;
flex-shrink: 0; color: #D6DFFF;
margin-right: .3rem; padding: .12rem .38rem;
border-radius: .48rem;
background: #556CB6;
margin-top: .14rem;
} }
.section-content { .game-cost {
flex: 1; font-size: .26rem;
border-bottom: .01rem solid #e5e5e5;
.content-title {
font-size: .3rem;
line-height: 1; line-height: 1;
color: #333; color: #fff;
} margin-top: .34rem;
.content-text { span {
font-size: .24rem; color: #FFE253;
line-height: .36rem; }
color: #999;
margin: .16rem 0 .14rem;
}
} }
} .game-introduce-container {
.game-introduce-join-container { width: 7.1rem;
flex-shrink: 0; border-radius: .08rem;
.auth-container { padding: .36rem .28rem .3rem;
background: transparent; box-sizing: border-box;
margin-top: .26rem; background: #fff;
margin-top: .34rem;
margin-bottom: 1.6rem;
display: flex;
flex-direction: column;
align-items: center;
.game-introduce-title {
display: flex;
align-items: flex-end;
font-size: .3rem;
line-height: 1;
color: #333;
margin-bottom: .24rem;
flex-shrink: 0;
img {
width: .26rem;
height: .35rem;
margin-right: .08rem;
}
}
.game-introduce-section {
width: 100%;
margin-top: .34rem;
display: flex;
align-items: flex-start;
flex-shrink: 0;
&:last-of-type .section-content {
border-bottom: none;
}
.section-icon {
width: .8rem;
height: .8rem;
flex-shrink: 0;
margin-right: .3rem;
}
.section-content {
flex: 1;
border-bottom: .01rem solid #e5e5e5;
.content-title {
font-size: .3rem;
line-height: 1;
color: #333;
}
.content-text {
font-size: .24rem;
line-height: .36rem;
color: #999;
margin: .16rem 0 .14rem;
}
}
}
.game-introduce-join-container {
flex-shrink: 0;
.auth-container {
background: transparent;
margin-top: .26rem;
}
.partake-btn {
width: 5.6rem;
height: .92rem;
border-radius: .92rem;
background: #FABD21;
font-size: .4rem;
line-height: .92rem;
color: #fff;
font-weight: bold;
text-align: center;
}
}
} }
.partake-btn { .footer-container {
width: 5.6rem; width: 100%;
height: .92rem; position: fixed;
border-radius: .92rem; left: 0;
background: #FABD21; bottom: 0;
font-size: .4rem; .partake-btn {
line-height: .92rem; width: 100%;
color: #fff; background: #FABD21;
font-weight: bold; font-size: .36rem;
text-align: center; line-height: .88rem;
color: #fff;
font-weight: bold;
text-align: center;
}
}
.auth-container {
width: 100%;
height: .52rem;
background: #F2F2F2;
display: flex;
align-items: center;
justify-content: center;
.auth-checked {
width: .24rem;
height: .24rem;
}
.auth-uncheck {
width: .24rem;
height: .24rem;
border: .01rem solid #BFBFBF;
box-sizing: border-box;
border-radius: 50%;
}
.text1 {
font-size: .24rem;
line-height: 1;
color: #999;
margin: 0 .1rem;
}
.text2 {
font-size: .24rem;
line-height: 1;
color: #576B95;
}
} }
}
}
.footer-container {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
.partake-btn {
width: 100%;
background: #FABD21;
font-size: .36rem;
line-height: .88rem;
color: #fff;
font-weight: bold;
text-align: center;
}
}
.auth-container {
width: 100%;
height: .52rem;
background: #F2F2F2;
display: flex;
align-items: center;
justify-content: center;
.auth-checked {
width: .24rem;
height: .24rem;
}
.auth-uncheck {
width: .24rem;
height: .24rem;
border: .01rem solid #BFBFBF;
box-sizing: border-box;
border-radius: 50%;
}
.text1 {
font-size: .24rem;
line-height: 1;
color: #999;
margin: 0 .1rem;
}
.text2 {
font-size: .24rem;
line-height: 1;
color: #576B95;
}
} }
}
</style> </style>
src/views/SignUp.vue
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<img class="corner-marker" src="../images/SignUp/home_tag_zmz.png" v-if="item.status===1"> <img class="corner-marker" src="../images/SignUp/home_tag_zmz.png" v-if="item.status===1">
<img class="corner-marker" src="../images/SignUp/home_tag_yjs.png" v-if="item.status===2"> <img class="corner-marker" src="../images/SignUp/home_tag_yjs.png" v-if="item.status===2">
<div class="card-title">3天健步挑战赛</div> <div class="card-title">3天健步挑战赛</div>
<div class="card-time"><{{item.already_join===1?'已参赛':'未参赛'}} {{item.period_start}} — {{item.period_end}}></div> <div class="card-time">{{item.already_join===1?'已参赛':'未参赛'}} {{item.period_start}} - {{item.period_end}}</div>
<div class="card-info"> <div class="card-info">
<div class="info-item" v-if="item.status===0||item.status===2"> <div class="info-item" v-if="item.status===0||item.status===2">
<div class="item-title">达标人数</div> <div class="item-title">达标人数</div>
...@@ -31,11 +31,16 @@ ...@@ -31,11 +31,16 @@
<div class="item-money">{{item.total_money || '0.00'}}</div> <div class="item-money">{{item.total_money || '0.00'}}</div>
</div> </div>
</div> </div>
<div class="card-btn" v-if="item.status===1&&item.already_join===0" @click="goOtherPage('PartakeChallenge')"> <div class="card-btn" v-if="item.status===1&&item.already_join===0" data-item="item"
<div>参与挑战</div> @click="goOtherPage('PartakeChallenge')">
<div class="btn-title">参与挑战</div>
<div class="card-btn-tip">（每日目标{{item.target_step}}步）</div> <div class="card-btn-tip">（每日目标{{item.target_step}}步）</div>
</div> </div>
<div class="card-btn" :style="item.status!==1?'background:#32A1F6;':''" v-else @click="goWhereDetail(item)">{{item.status===1?'已报名':'查看详情'}}</div> <div class="card-btn" :style="item.status!==1? item.status === 2 ? 'background:#ccc'
:'background:#32A1F6' : ''"
v-else
@click="goWhereDetail(item)">{{item.status===1?'已报名':'查看详情'}}
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -89,6 +94,7 @@ ...@@ -89,6 +94,7 @@
this.getPageData(level); this.getPageData(level);
}, },
goOtherPage(pageName) { goOtherPage(pageName) {
console.log('pageName',pageName)
this.$router.push({ name: pageName }); this.$router.push({ name: pageName });
}, },
goWhereDetail(item) { goWhereDetail(item) {
...@@ -333,14 +339,18 @@ ...@@ -333,14 +339,18 @@
margin-top: 0.28rem; margin-top: 0.28rem;
} }
.card-time { .card-time {
font-size: 0.22rem; background: rgba(0,0,0,0.1);
line-height: 1; padding:0 0.24rem;
border-radius: .24rem;
height: .46rem;
font-size: 0.26rem;
line-height: .46rem;
color: #fff; color: #fff;
margin-top: 0.16rem; margin-top: 0.16rem;
} }
.card-info { .card-info {
width: 100%; width: 100%;
margin-top: 0.56rem; margin-top: 0.7rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
...@@ -374,7 +384,7 @@ ...@@ -374,7 +384,7 @@
} }
.card-btn { .card-btn {
width: 4rem; width: 4rem;
height: 0.8rem; height: 0.88rem;
background: #fabd21; background: #fabd21;
border-radius: 0.74rem; border-radius: 0.74rem;
box-shadow: 0 0.02rem 0.04rem 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0.02rem 0.04rem 0 rgba(0, 0, 0, 0.2);
...@@ -383,6 +393,8 @@ ...@@ -383,6 +393,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 0.3rem; font-size: 0.3rem;
font-weight: bold;
letter-spacing: 0.01rem;
line-height: 1; line-height: 1;
color: #fff; color: #fff;
position: absolute; position: absolute;
...@@ -392,6 +404,11 @@ ...@@ -392,6 +404,11 @@
.card-btn-tip { .card-btn-tip {
font-size: 0.22rem; font-size: 0.22rem;
margin-top: 0.06rem; margin-top: 0.06rem;
font-weight: normal;
}
.btn-title{
font-size: .34rem;
font-weight: bold;
} }
} }
} }
......
src/views/UserCenter.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<img class="user-avatar" :src="userData.avatar"> <img class="user-avatar" :src="userData.avatar">
<div class="user_msg"> <div class="user_msg">
<div class="user_nickname">{{userData.nickname|textFormatter}}</div> <div class="user_nickname">{{userData.nickname|textFormatter}}</div>
<div class="user_number">昵称：{{userData.student_num|textFormatter}}</div> <!--<div class="user_number">昵称：{{userData.student_num|textFormatter}}</div>-->
</div> </div>
<div class="btn_container"> <div class="btn_container">
<div class="btn_item" v-for="item in btnList" @click="jumpTo(item)"> <div class="btn_item" v-for="item in btnList" @click="jumpTo(item)">
...@@ -132,6 +132,7 @@ ...@@ -132,6 +132,7 @@
position: relative; position: relative;
overflow-y: scroll; overflow-y: scroll;
background: #f8f8f8; background: #f8f8f8;
padding-bottom: 0.1rem;
.banner { .banner {
width: 100%; width: 100%;
height: 2.6rem; height: 2.6rem;
...@@ -144,7 +145,7 @@ ...@@ -144,7 +145,7 @@
width: 6.9rem; width: 6.9rem;
margin: 1.76rem auto 0; margin: 1.76rem auto 0;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
box-shadow: 0 .02rem .14rem 0 rgba(180, 197, 200, 0.5); box-shadow: 0 .05rem .14rem 0 rgba(180, 197, 200, 0.5);
position: relative; position: relative;
.user-avatar { .user-avatar {
overflow: hidden; overflow: hidden;
......
src/views/Wallet.vue
...@@ -217,13 +217,13 @@ ...@@ -217,13 +217,13 @@
.Wallet .money_input span.dollar { .Wallet .money_input span.dollar {
font-size: 0.48rem; font-size: 0.48rem;
color: #282828; color: #282828;
margin-bottom: .2rem; /*margin-bottom: .2rem;*/
} }
.Wallet .money_input input { .Wallet .money_input input {
border: 0; border: 0;
outline: 0; outline: 0;
font-size: 0.28rem; font-size: 0.48rem;
color: #282828; color: #282828;
display: inline-block; display: inline-block;
/*margin-left: 0.4rem;*/ /*margin-left: 0.4rem;*/
...@@ -232,7 +232,7 @@ ...@@ -232,7 +232,7 @@
.Wallet .money_input .get_all { .Wallet .money_input .get_all {
float: right; float: right;
color: #52526e; color: rgba(87, 107, 149, 1);
font-size: 0.3rem; font-size: 0.3rem;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment