Skip to content

W
walk_daka_h5
Commit 0b905995 by Caiyijun
Options

做了一些东西

parent 97409d89
Showing with 531 additions and 456 deletions
src/views/ChallengeDetail.vue
...@@ -34,155 +34,246 @@ ...@@ -34,155 +34,246 @@
</div> </div>
</div> </div>
</div> </div>
<div class="share-btn">邀请好友来参赛</div> <div class="share-btn" @click="inviteFriend">邀请好友来参赛</div>
<ShareModal
v-on:close="closeShareModal"
v-if="showShareModal"
></ShareModal>
</div> </div>
</template> </template>
<script> <script>
import Title from "@/components/Title.vue"; import Title from "@/components/Title.vue";
export default { import ShareModal from "@/components/ShareModal.vue";
name: "ChallengeDetail", import {dakaPay, shareContent, track, liinShare} from "@/components/axios/api";
components: { export default {
Title name: "ChallengeDetail",
}, components: {
data() { Title,
return { ShareModal
},
data() {
return {
showShareModal: false,
userData: null
};
},
created() {},
mounted() {
console.log("this.pageType", this.page_type);
if (window["userData"]) {
this.userData = window["userData"];
} else {
let localUserData = localStorage.getItem("bs_userData");
if (localUserData) {
window["userData"] = JSON.parse(localUserData);
this.userData = window["userData"];
} }
}
console.log("userData", this.userData);
},
methods: {
goback() {
history.go(-1);
}, },
created() { inviteFriend() {
console.log("inviteFriend");
this.showShareModal = true;
// let id = this.userData.id;
let id = 'yijun';
track("free_contract_share");
let links = `${
location.href.split("#")[0].split("?")[0]}?inviter=${id}&from_type=free_contract&`;
shareContent("free_contract").then(res => {
let result = res.data;
console.log("分享内容", result, links);
let option1 = {
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接
imgUrl: result.img_url, // 分享图标
success: function(res) {
track("free_contract_share_act");
console.log("option1Success", res);
}
};
wx.updateAppMessageShareData(option1);
//微信分享菜单测试
let option2 = {
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接
imgUrl: result.img_url, // 分享图标
success: function(res) {
console.log("option2Success", res);
}
};
let option3 = {
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: result.img_url, // 分享图标
success: function(res) {
// 用户点击了分享后执行的回调函数
track("free_contract_share_act");
console.log("option3Success", res);
},
fail: err => {
console.log("option3error", err);
}
};
wx.onMenuShareAppMessage(option3);
let option4 = {
title: result.title, // 分享标题
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: result.img_url, // 分享图标
success: function(res) {
console.log("option4Success", res);
},
fail: err => {
console.log("option4error", err);
}
};
// wx.onMenuShareTimeline(option4);
console.log("option", option1, option2, option3, option4);
});
}, },
methods: { closeShareModal() {
goback() { this.showShareModal = false;
history.go(-1);
},
} }
} }
};
</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;
flex-direction: column;
align-items: center;
overflow: hidden;
position: relative;
.page-title {
position: fixed;
left: 0;
top: 0;
}
.game-rule-container {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
overflow: hidden; position: absolute;
position: relative; top: 0.3rem;
.page-title { right: 0.22rem;
position: fixed; font-size: 0.26rem;
left: 0; line-height: 1;
top: 0; color: #465895;
} img {
.game-rule-container { width: 0.3rem;
display: flex; height: 0.3rem;
align-items: center; margin-right: 0.1rem;
position: absolute;
top: .3rem;
right: .22rem;
font-size: .26rem;
line-height: 1;
color: #465895;
img {
width: .3rem;
height: .3rem;
margin-right: .1rem;
}
} }
.game-bonus-container { }
width: 6.4rem; .game-bonus-container {
padding: .3rem 0; width: 6.4rem;
box-sizing: border-box; padding: 0.3rem 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), #1A285A, rgba(255, 255, 255, 0)); box-sizing: border-box;
margin-top: 2.38rem; background: linear-gradient(
.bonus-title { 90deg,
font-size: .3rem; rgba(255, 255, 255, 0),
line-height: 1; #1a285a,
color: #fff; rgba(255, 255, 255, 0)
text-align: center; );
} margin-top: 2.38rem;
.bonus-amount { .bonus-title {
font-size: .64rem; font-size: 0.3rem;
line-height: .8;
color: #FFE253;
text-align: center;
margin-top: .26rem;
}
}
.game-title {
font-size: .36rem;
line-height: 1; line-height: 1;
color: #fff; color: #fff;
font-weight: bold; text-align: center;
margin-top: .4rem;
}
.game-time {
font-size: .24rem;
line-height: 1;
color: #D6DFFF;
padding: .12rem .38rem;
border-radius: .48rem;
background: #556CB6;
margin-top: .14rem;
} }
.hr { .bonus-amount {
width: 3rem; font-size: 0.64rem;
height: .01rem; line-height: 0.8;
background: #6F82C3; color: #ffe253;
margin-top: .5rem; text-align: center;
margin-top: 0.26rem;
} }
.game-info-container { }
width: 6rem; .game-title {
background: #3D4F8F; font-size: 0.36rem;
margin-top: .5rem; line-height: 1;
.game-info-section { color: #fff;
width: 100%; font-weight: bold;
height: 1.34rem; margin-top: 0.4rem;
display: flex; }
align-items: center; .game-time {
.section-item { font-size: 0.24rem;
flex: 1; line-height: 1;
position: relative; color: #d6dfff;
&:last-child:after { padding: 0.12rem 0.38rem;
content: ''; border-radius: 0.48rem;
width: .02rem; background: #556cb6;
height: .4rem; margin-top: 0.14rem;
background: #A2B4EE; }
position: absolute; .hr {
left: 0; width: 3rem;
top: 50%; height: 0.01rem;
transform: translateY(-50%); background: #6f82c3;
} margin-top: 0.5rem;
.item-value { }
font-size: .4rem; .game-info-container {
line-height: .8; width: 6rem;
color: #fff; background: #3d4f8f;
text-align: center; margin-top: 0.5rem;
} .game-info-section {
.item-key { width: 100%;
font-size: .26rem; height: 1.34rem;
line-height: 1; display: flex;
color: #fff; align-items: center;
text-align: center; .section-item {
margin-top: .18rem; 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;
} }
} }
} }
.share-btn {
width: 5.6rem;
border-radius: .92rem;
background: #1FDBB1;
font-size: .4rem;
line-height: .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
...@@ -14,25 +14,6 @@ ...@@ -14,25 +14,6 @@
<div class="target-people-text">已有2468人参赛</div> <div class="target-people-text">已有2468人参赛</div>
</div> </div>
<div class="hr"></div> <div class="hr"></div>
<!--<div class="game-scroll-container">-->
<!--<div class="game-scroll-item">-->
<!--<div class="item-title-status">-->
<!--<div class="item-title">第一天</div>-->
<!--<div class="item-status2">已淘汰</div>-->
<!--</div>-->
<!--<div class="item-income" style="visibility: hidden;">-->
<!--<div class="item-amount">2.56</div>-->
<!--<div class="item-text">(元) 预计收益</div>-->
<!--</div>-->
<!--<div class="item-progress-num">-->
<!--<div class="item-num" v-if="false">还有01天03小时56秒开始</div>-->
<!--<template v-else>-->
<!--<div class="item-progress" :style="'width: '+rate/100*2.46+'rem;'"></div>-->
<!--<div class="item-num">2635/5000步</div>-->
<!--</template>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<swiper :options="swiperOption" class="game-scroll-container"> <swiper :options="swiperOption" class="game-scroll-container">
<swiper-slide> <swiper-slide>
<div class="game-scroll-item"> <div class="game-scroll-item">
...@@ -153,17 +134,6 @@ ...@@ -153,17 +134,6 @@
data () { data () {
return { return {
rate: 50, rate: 50,
banner_list: [
{
// image: "http://localhost:8080/img/img_card.440e4585.png"
},
{
// image: "http://localhost:8080/img/img_card.440e4585.png"
},
{
// image: "http://localhost:8080/img/img_card.440e4585.png"
}
],
swiperOption: { swiperOption: {
slidesPerView: "auto", slidesPerView: "auto",
centeredSlides: true, centeredSlides: true,
...@@ -203,7 +173,7 @@ ...@@ -203,7 +173,7 @@
} }
.have-joined-game-page { .have-joined-game-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);
......
src/views/Rule.vue
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
<div class="rule-page"> <div class="rule-page">
<Title class="page-title" title="活动规则与协议" titleColor="#000" @goback="goback" show_back="true" arrowColor="black"></Title> <Title class="page-title" title="活动规则与协议" titleColor="#000" @goback="goback" show_back="true" arrowColor="black"></Title>
<div class="section-title">挑战玩法：</div> <div class="section-title">挑战玩法：</div>
<img class="game-way-img" src="../images/Rule/img_rule.png"> <img class="game-way-img" v-if="bushuType == 0" src="../images/Rule/img_rule_0.png">
<img class="game-way-img" v-if="bushuType == 1" src="../images/Rule/img_rule_1.png">
<img class="game-way-img" v-if="bushuType == 2" src="../images/Rule/img_rule_2.png">
<div class="section-title">参赛须知：</div> <div class="section-title">参赛须知：</div>
<div class="content1-container"> <div class="content1-container">
<div class="content1-item">• 为督促大家运动，每位用户报名均需提供契约金</div> <div class="content1-item">• 为督促大家运动，每位用户报名均需提供契约金</div>
...@@ -35,8 +37,15 @@ ...@@ -35,8 +37,15 @@
}, },
data() { data() {
return { return {
bushuType: 0
}; };
}, },
mounted(){
let LastLevel = Number(sessionStorage.getItem('bushuType'))
if(LastLevel){
this.bushuType = LastLevel
}
},
methods: { methods: {
goback() { goback() {
history.go(-1); history.go(-1);
......
src/views/SignUp.vue
...@@ -57,331 +57,336 @@ ...@@ -57,331 +57,336 @@
</template> </template>
<script> <script>
import NoticeBonus from "@/components/NoticeBonus.vue"; import NoticeBonus from "@/components/NoticeBonus.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 PayFailModal from "@/components/PayFailModal.vue"; import PayFailModal from "@/components/PayFailModal.vue";
import { import { dakaPay, track, userCards, daka_index } from "@/components/axios/api";
dakaPay,
track,
userCards,
daka_index
} from "@/components/axios/api";
export default { export default {
name: "SignUp", name: "SignUp",
components: { components: {
NoticeBonus, NoticeBonus,
Modal, Modal,
Free, Free,
PayFailModal PayFailModal
}, },
data() { data() {
return { return {
contract_data: {}, contract_data: {},
showFreeModal: false, showFreeModal: false,
modalTitle: "", modalTitle: "",
modalDesc: "", modalDesc: "",
modalShown: false, modalShown: false,
current_date: {}, current_date: {},
isShowPayFail: false, isShowPayFail: false,
isFollow: false, isFollow: false,
gameList: [], gameList: [],
choosedLevel: 0 choosedLevel: 0
} };
},
created() {
this.getPageData();
},
mounted() {
//获取步数tab缓存
let LastLevel = Number(sessionStorage.getItem("bushuType"));
if (LastLevel) {
this.choosedLevel = LastLevel;
}else{
sessionStorage.setItem("bushuType", this.choosedLevel);
}
},
methods: {
chooseGameLevel(level) {
sessionStorage.setItem("bushuType", level);
this.choosedLevel = level;
}, },
created() { goOtherPage(pageName) {
this.getPageData(); this.$router.push({ name: pageName });
}, },
methods: { getPageData(grade = 1) {
chooseGameLevel(level) { daka_index(grade).then(res => {
this.choosedLevel = level; if (res.code === 0) {
}, this.gameList = res.data;
goOtherPage(pageName) { console.log(this.gameList);
this.$router.push({name: pageName}); }
}, });
getPageData(grade = 1) { },
daka_index(grade).then(res => { togglePayFail() {
if (res.code === 0) { this.isShowPayFail = !this.isShowPayFail;
this.gameList = res.data; },
console.log(this.gameList) showSuccess() {
} this.showModal("温馨提示", "报名成功", {
}) scb: () => {
}, if (this.isFollow == 1) {
togglePayFail() { this.$router.push({ name: "Read" });
this.isShowPayFail = !this.isShowPayFail } else {
}, this.$router.push({ name: "Success" });
showSuccess() {
this.showModal("温馨提示", "报名成功", {
scb: () => {
if (this.isFollow == 1) {
this.$router.push({name: "Read"})
} else {
this.$router.push({name: "Success"})
}
} }
});
},
confirmModal(scb) {
scb && scb()
this.modalShown = false;
},
showFree(e) {
e.stopPropagation();
track("free_contract_show");
if (localStorage.getItem("first_show_free") == 1) {
localStorage.setItem("first_show_free", 2);
this.canShowFree = false;
} else {
this.canCheckShowFree = false;
this.canShowFree = false;
} }
});
},
confirmModal(scb) {
scb && scb();
this.modalShown = false;
},
showFree(e) {
e.stopPropagation();
track("free_contract_show");
if (localStorage.getItem("first_show_free") == 1) {
localStorage.setItem("first_show_free", 2);
this.canShowFree = false;
} else {
this.canCheckShowFree = false;
this.canShowFree = false;
}
userCards().then(res => { userCards().then(res => {
console.log("获取免契约金数据", res); console.log("获取免契约金数据", res);
let data = { let data = {
card: res.data.contract_card, card: res.data.contract_card,
cnt: res.data.contract_cnt cnt: res.data.contract_cnt
}; };
this.current_date = new Date(res.date); this.current_date = new Date(res.date);
// if ( // if (
// // 如果明天没报名，而且还有免契约金卡，则可以使用 // // 如果明天没报名，而且还有免契约金卡，则可以使用
// !this.date_status[1].user_status.daka_signup && // !this.date_status[1].user_status.daka_signup &&
// res.data.contract_card > 0 // res.data.contract_card > 0
// ) { // ) {
// data.can_get = true; // data.can_get = true;
// // 其他情况，显示报名下期比赛 // // 其他情况，显示报名下期比赛
// } else { // } else {
// data.can_get = false; // data.can_get = false;
// } // }
this.contract_data = JSON.parse(JSON.stringify(data)); this.contract_data = JSON.parse(JSON.stringify(data));
this.showFreeModal = true; this.showFreeModal = true;
}); });
}, },
closeFree() { closeFree() {
this.showFreeModal = false; this.showFreeModal = false;
}, },
showModal(title, desc, option) { showModal(title, desc, option) {
this.modalTitle = title || ""; this.modalTitle = title || "";
this.modalDesc = desc || ""; this.modalDesc = desc || "";
this.modalOption = option || {} this.modalOption = option || {};
this.modalShown = true; this.modalShown = true;
}, },
closeModal() { closeModal() {
this.modalShown = false; this.modalShown = false;
}, },
payToSign() { payToSign() {
dakaPay().then(response => { dakaPay().then(response => {
this.current_date = new Date(response.date); this.current_date = new Date(response.date);
if (response.code == 1) { if (response.code == 1) {
this.showModal("温馨提示", response.msg); this.showModal("温馨提示", response.msg);
return; return;
} }
let result = response.data; let result = response.data;
console.log("请求打卡支付数据", result); console.log("请求打卡支付数据", result);
if (result) { if (result) {
WeixinJSBridge.invoke( WeixinJSBridge.invoke(
"getBrandWCPayRequest", "getBrandWCPayRequest",
{ {
appId: result.appId, //公众号名称，由商户传入 appId: result.appId, //公众号名称，由商户传入
timeStamp: `${result.timeStamp}`, //时间戳，自1970年以来的秒数 timeStamp: `${result.timeStamp}`, //时间戳，自1970年以来的秒数
nonceStr: result.nonceStr, //随机串 nonceStr: result.nonceStr, //随机串
package: result.package, package: result.package,
signType: result.signType, //微信签名方式： signType: result.signType, //微信签名方式：
paySign: result.paySign //微信签名 paySign: result.paySign //微信签名
}, },
// result, // result,
res => { res => {
console.log("支付调用结果", res); console.log("支付调用结果", res);
if (res.err_msg == "get_brand_wcpay_request:ok") { if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示： // 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
// 支付成功后的回调函数 // 支付成功后的回调函数
console.log("支付成功"); console.log("支付成功");
this.showModal("温馨提示", "报名成功", { this.showModal("温馨提示", "报名成功", {
scb: () => { scb: () => {
if (this.isFollow == 1) { if (this.isFollow == 1) {
this.$router.push({name: "Read"}) this.$router.push({ name: "Read" });
} else { } else {
this.$router.push({name: "Success"}) this.$router.push({ name: "Success" });
}
} }
}); }
// this.dateSelect(2); });
// localStorage.setItem("is_every", 0) // this.dateSelect(2);
// location.replace("#/Success"); // 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()
}
} }
); 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();
}
}
);
}
});
} }
} }
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.sign-up-page { .sign-up-page {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
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-attachment: scroll; background-attachment: scroll;
position: relative; position: relative;
display: flex;
flex-direction: column;
align-items: center;
.top-nav-level {
flex-shrink: 0;
margin-top: 0.3rem;
border: 0.02rem solid #fff;
border-radius: 0.1rem;
overflow: hidden;
background: #fff;
box-sizing: border-box;
display: flex;
.level-item {
width: 1.76rem;
font-size: 0.3rem;
line-height: 0.54rem;
color: #465895;
text-align: center;
position: relative;
&:after {
content: "";
height: 0.26rem;
width: 0.02rem;
background: #465895;
position: absolute;
left: -0.02rem;
top: 50%;
transform: translateY(-50%);
}
&:first-child:after {
display: none;
}
&.active {
background: #465895;
color: #fff;
border-radius: 0.1rem;
font-weight: bold;
}
&.active:after {
display: none;
}
}
}
.view-steps-btn {
flex-shrink: 0;
width: 1.11rem;
height: 0.84rem;
display: block;
position: absolute;
left: 0;
top: 1.22rem;
}
.notice-broadcast {
flex-shrink: 0;
margin: 3.68rem 0 0.18rem;
}
.challenge-card {
flex-shrink: 0;
width: 6.9rem;
height: 4.4rem;
background-image: url(../images/SignUp/sy_dikuang.png);
background-size: 100% 100%;
margin-bottom: 0.4rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.top-nav-level { position: relative;
flex-shrink: 0; .corner-marker {
margin-top: .3rem; width: 1.39rem;
border: .02rem solid #fff; height: 1.39rem;
border-radius: .1rem; position: absolute;
overflow: hidden; top: -0.02rem;
background: #fff; right: -0.02rem;
box-sizing: border-box; }
.card-title {
font-size: 0.36rem;
line-height: 1;
color: #fff;
margin-top: 0.28rem;
}
.card-time {
font-size: 0.22rem;
line-height: 1;
color: #fff;
margin-top: 0.16rem;
}
.card-info {
width: 100%;
margin-top: 0.56rem;
display: flex; display: flex;
.level-item { align-items: center;
width: 1.76rem; justify-content: space-between;
font-size: .3rem; .info-item {
line-height: .54rem; flex: 1;
color: #465895; border-left: 0.02rem solid #fff;
text-align: center; display: flex;
position: relative; flex-direction: column;
&:after { align-items: center;
content: ''; &:first-child {
height: .26rem; border-left: none;
width: .02rem;
background: #465895;
position: absolute;
left: -.02rem;
top: 50%;
transform: translateY(-50%);
} }
&:first-child:after { .item-title {
display: none; font-size: 0.28rem;
line-height: 0.8;
color: #fff;
} }
&.active { .item-content {
background: #465895; font-size: 0.48rem;
line-height: 0.8;
color: #fff; color: #fff;
border-radius: .1rem; margin-top: 0.12rem;
font-weight: bold;
} }
&.active:after { .item-money {
display: none; font-size: 0.48rem;
line-height: 0.8;
color: #fcf776;
margin-top: 0.12rem;
} }
} }
} }
.view-steps-btn { .card-btn {
flex-shrink: 0; width: 4rem;
width: 1.11rem; height: 0.8rem;
height: .84rem; background: #fabd21;
display: block; border-radius: 0.74rem;
position: absolute; box-shadow: 0 0.02rem 0.04rem 0 rgba(0, 0, 0, 0.2);
left: 0;
top: 1.22rem;
}
.notice-broadcast {
flex-shrink: 0;
margin: 3.68rem 0 .18rem;
}
.challenge-card {
flex-shrink: 0;
width: 6.9rem;
height: 4.4rem;
background-image: url(../images/SignUp/sy_dikuang.png);
background-size: 100% 100%;
margin-bottom: .4rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative; justify-content: center;
.corner-marker { font-size: 0.3rem;
width: 1.39rem; line-height: 1;
height: 1.39rem; color: #fff;
position: absolute; position: absolute;
top: -.02rem; bottom: 0.38rem;
right: -.02rem; left: 50%;
} transform: translateX(-50%);
.card-title { .card-btn-tip {
font-size: .36rem; font-size: 0.22rem;
line-height: 1; margin-top: 0.06rem;
color: #fff;
margin-top: .28rem;
}
.card-time {
font-size: .22rem;
line-height: 1;
color: #fff;
margin-top: .16rem;
}
.card-info {
width: 100%;
margin-top: .56rem;
display: flex;
align-items: center;
justify-content: space-between;
.info-item {
flex: 1;
border-left: .02rem solid #fff;
display: flex;
flex-direction: column;
align-items: center;
&:first-child {
border-left: none;
}
.item-title {
font-size: .28rem;
line-height: .8;
color: #fff;
}
.item-content {
font-size: .48rem;
line-height: .8;
color: #fff;
margin-top: .12rem;
}
.item-money {
font-size: .48rem;
line-height: .8;
color: #fcf776;
margin-top: .12rem;
}
}
}
.card-btn {
width: 4rem;
height: .8rem;
background: #fabd21;
border-radius: .74rem;
box-shadow: 0 .02rem .04rem 0 rgba(0, 0, 0, .2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: .3rem;
line-height: 1;
color: #fff;
position: absolute;
bottom: .38rem;
left: 50%;
transform: translateX(-50%);
.card-btn-tip {
font-size: .22rem;
margin-top: .06rem;
}
} }
} }
} }
}
</style> </style>
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