Skip to content

W
walk_daka_h5
Commit ff06bda9 by Caiyijun
Options

修改轮播组件

parent 9bb8419e
Showing with 381 additions and 309 deletions
package-lock.json
...@@ -3523,6 +3523,14 @@ ...@@ -3523,6 +3523,14 @@
"entities": "^1.1.1" "entities": "^1.1.1"
} }
}, },
"dom7": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.3.tgz",
"integrity": "sha512-QTxHHDox+M6ZFz1zHPAHZKI3JOHY5iY4i9BK2uctlggxKQwRhO3q3HHFq1BKsT25Bm/ySSj70K6Wk/G4bs9rMQ==",
"requires": {
"ssr-window": "^1.0.1"
}
},
"domain-browser": { "domain-browser": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "http://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz", "resolved": "http://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
...@@ -4318,8 +4326,7 @@ ...@@ -4318,8 +4326,7 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -4340,14 +4347,12 @@ ...@@ -4340,14 +4347,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -4362,20 +4367,17 @@ ...@@ -4362,20 +4367,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -4492,8 +4494,7 @@ ...@@ -4492,8 +4494,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -4505,7 +4506,6 @@ ...@@ -4505,7 +4506,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -4520,7 +4520,6 @@ ...@@ -4520,7 +4520,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
...@@ -4528,14 +4527,12 @@ ...@@ -4528,14 +4527,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -4554,7 +4551,6 @@ ...@@ -4554,7 +4551,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -4635,8 +4631,7 @@ ...@@ -4635,8 +4631,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -4648,7 +4643,6 @@ ...@@ -4648,7 +4643,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -4734,8 +4728,7 @@ ...@@ -4734,8 +4728,7 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
...@@ -4771,7 +4764,6 @@ ...@@ -4771,7 +4764,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -4791,7 +4783,6 @@ ...@@ -4791,7 +4783,6 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -4835,14 +4826,12 @@ ...@@ -4835,14 +4826,12 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
} }
} }
}, },
...@@ -6676,8 +6665,7 @@ ...@@ -6676,8 +6665,7 @@
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz", "resolved": "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
"dev": true
}, },
"object-copy": { "object-copy": {
"version": "0.1.0", "version": "0.1.0",
...@@ -8779,6 +8767,11 @@ ...@@ -8779,6 +8767,11 @@
"tweetnacl": "~0.14.0" "tweetnacl": "~0.14.0"
} }
}, },
"ssr-window": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
},
"ssri": { "ssri": {
"version": "6.0.1", "version": "6.0.1",
"resolved": "http://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz", "resolved": "http://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz",
...@@ -9068,6 +9061,15 @@ ...@@ -9068,6 +9061,15 @@
"util.promisify": "~1.0.0" "util.promisify": "~1.0.0"
} }
}, },
"swiper": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.0.tgz",
"integrity": "sha512-jRCd/CGet9kaHwthHdd/sL/YU8CI157PWLyItnIcn/o/jP4haVky3zTF6f9F3JDpmQIw7jdWihISiYx0/oTHsg==",
"requires": {
"dom7": "^2.1.3",
"ssr-window": "^1.0.1"
}
},
"tapable": { "tapable": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "http://registry.npm.taobao.org/tapable/download/tapable-1.1.1.tgz", "resolved": "http://registry.npm.taobao.org/tapable/download/tapable-1.1.1.tgz",
...@@ -9656,6 +9658,15 @@ ...@@ -9656,6 +9658,15 @@
"resolved": "http://registry.npm.taobao.org/vue/download/vue-2.6.8.tgz", "resolved": "http://registry.npm.taobao.org/vue/download/vue-2.6.8.tgz",
"integrity": "sha1-8hy8U2v8FPfR15KhN7sS9p5g6pE=" "integrity": "sha1-8hy8U2v8FPfR15KhN7sS9p5g6pE="
}, },
"vue-awesome-swiper": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
"integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
"requires": {
"object-assign": "^4.1.1",
"swiper": "^4.0.7"
}
},
"vue-calendar-component": { "vue-calendar-component": {
"version": "2.8.2", "version": "2.8.2",
"resolved": "https://registry.npmjs.org/vue-calendar-component/-/vue-calendar-component-2.8.2.tgz", "resolved": "https://registry.npmjs.org/vue-calendar-component/-/vue-calendar-component-2.8.2.tgz",
......
package.json
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"dependencies": { "dependencies": {
"axios": "^0.18.0", "axios": "^0.18.0",
"vue": "^2.6.6", "vue": "^2.6.6",
"vue-awesome-swiper": "^3.1.3",
"vue-calendar-component": "^2.8.2", "vue-calendar-component": "^2.8.2",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vuex": "^3.0.1", "vuex": "^3.0.1",
......
src/views/HaveJoinedGame.vue
<template> <template>
<div class="have-joined-game-page"> <div class="have-joined-game-page">
<Title class="page-title" @goback="goback" show_back="true" v-if="currentPage()==='HaveJoinedGame'"></Title> <Title class="page-title" @goback="goback" show_back="true" v-if="currentPage()==='HaveJoinedGame'"></Title>
<div class="game-bonus-container"> <div class="game-bonus-container">
<div class="bonus-title">本期累计奖励金（元）</div> <div class="bonus-title">本期累计奖励金（元）</div>
<div class="bonus-amount">6.86</div> <div class="bonus-amount">6.86</div>
</div>
<div class="game-title">5000步七日耐力赛</div>
<div class="game-time">开赛时间：3月11日 00:00-3月17日24:00</div>
<div class="target-people-container">
<img class="target-img" src="../images/ChallengeDetail/ic_shoes.png">
<div class="target-people-text">每日5000步达标</div>
<img class="people-img" src="../images/ChallengeDetail/ic_people.png">
<div class="target-people-text">已有2468人参赛</div>
</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-status0">未开始</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="true">还有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 class="game-scroll-item">
<div class="item-title-status">
<div class="item-title">第一天</div>
<div class="item-status1">比赛中</div>
</div>
<div class="item-income">
<div class="item-amount">2.56</div>
<div class="item-text">(元) 预计收益</div>
</div> </div>
<div class="item-progress-num"> <div class="game-title">5000步七日耐力赛</div>
<div class="item-num" v-if="false">还有01天03小时56秒开始</div> <div class="game-time">开赛时间：3月11日 00:00-3月17日24:00</div>
<template v-else> <div class="target-people-container">
<div class="item-progress" :style="'width: '+rate/100*2.46+'rem;'"></div> <img class="target-img" src="../images/ChallengeDetail/ic_shoes.png">
<div class="item-num">2635/5000步</div> <div class="target-people-text">每日5000步达标</div>
</template> <img class="people-img" src="../images/ChallengeDetail/ic_people.png">
<div class="target-people-text">已有2468人参赛</div>
</div> </div>
</div> <div class="hr"></div>
<div class="game-scroll-item"> <!--<div class="game-scroll-container">-->
<div class="item-title-status"> <!--<div class="game-scroll-item">-->
<div class="item-title">第一天</div> <!--<div class="item-title-status">-->
<div class="item-status2">已淘汰</div> <!--<div class="item-title">第一天</div>-->
</div> <!--<div class="item-status2">已淘汰</div>-->
<div class="item-income" style="visibility: hidden;"> <!--</div>-->
<div class="item-amount">2.56</div> <!--<div class="item-income" style="visibility: hidden;">-->
<div class="item-text">(元) 预计收益</div> <!--<div class="item-amount">2.56</div>-->
</div> <!--<div class="item-text">(元) 预计收益</div>-->
<div class="item-progress-num"> <!--</div>-->
<div class="item-num" v-if="false">还有01天03小时56秒开始</div> <!--<div class="item-progress-num">-->
<template v-else> <!--<div class="item-num" v-if="false">还有01天03小时56秒开始</div>-->
<div class="item-progress" :style="'width: '+rate/100*2.46+'rem;'"></div> <!--<template v-else>-->
<div class="item-num">2635/5000步</div> <!--<div class="item-progress" :style="'width: '+rate/100*2.46+'rem;'"></div>-->
</template> <!--<div class="item-num">2635/5000步</div>-->
</div> <!--</template>-->
</div> <!--</div>-->
<!--</div>-->
<!--</div>-->
<swiper :options="swiperOption" class="game-scroll-container">
<swiper-slide>
<div class="game-scroll-item">
<div class="item-title-status">
<div class="item-title">第一天</div>
<div class="item-status0">未开始</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="true">还有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>
</swiper-slide>
<swiper-slide>
<div class="game-scroll-item">
<div class="item-title-status">
<div class="item-title">第一天</div>
<div class="item-status1">比赛中</div>
</div>
<div class="item-income">
<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>
</swiper-slide>
<swiper-slide>
<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>
</swiper-slide>
</swiper>
<div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div>
</div> </div>
<div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div>
</div>
</template> </template>
<script> <script>
import Title from "@/components/Title.vue"; import Title from "@/components/Title.vue"
export default { import 'swiper/dist/css/swiper.css'
name: "HaveJoinedGame", import {swiper, swiperSlide} from 'vue-awesome-swiper'
components: {
Title export default {
}, name: "HaveJoinedGame",
data() { components: {
return { Title,
rate: 50 swiper,
} swiperSlide
}, },
created() { data () {
}, return {
methods: { rate: 50,
goback() { banner_list: [
history.go(-1); {
}, image: 'http://localhost:8080/img/img_card.440e4585.png',
goOtherPage(pageName) { },
this.$router.push({name: pageName}); {
}, image: 'http://localhost:8080/img/img_card.440e4585.png',
currentPage() { },
return this.$router.history.current.name; {
} image: 'http://localhost:8080/img/img_card.440e4585.png',
}
],
swiperOption: {
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 10
}
}
},
created () {
},
methods: {
goback () {
history.go(-1)
},
goOtherPage (pageName) {
this.$router.push({name: pageName})
},
currentPage () {
return this.$router.history.current.name
}
}
} }
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.have-joined-game-page { .swiper-container {
width: 100%; margin-left: 0 !important;
min-height: 100vh;
background-color: rgb(70, 88, 149);
background-image: url(../images/SignUp/sy_beijing.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: center top;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
position: relative;
.page-title {
width: 100%;
position: fixed;
left: 0;
top: 0;
}
.game-bonus-container {
width: 6.4rem;
padding: .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: .3rem;
line-height: 1;
color: #fff;
text-align: center;
}
.bonus-amount {
font-size: .64rem;
line-height: .8;
color: #FFE253;
text-align: center;
margin-top: .26rem;
}
}
.game-title {
font-size: .36rem;
line-height: 1;
color: #fff;
font-weight: bold;
margin-top: .4rem;
}
.game-time {
font-size: .24rem;
line-height: 1;
color: #D6DFFF;
padding: .12rem .38rem;
border-radius: .48rem;
background: #556CB6;
margin-top: .14rem;
} }
.target-people-container {
display: flex; .swiper-slide {
margin-top: .34rem; width: 5.1rem;
.target-img { height: 2.68rem;
width: .3rem;
height: .26rem;
}
.people-img {
width: .28rem;
height: .24rem;
margin-left: .5rem;
}
.target-people-text {
font-size: .26rem;
line-height: 1;
color: #fff;
margin-left: .08rem;
}
}
.hr {
width: 3rem;
height: .01rem;
background: #6F82C3;
margin-top: .5rem;
} }
.game-scroll-container {
width: 100%; .swiper-slide img {
height: 2.68rem;
margin-top: .4rem;
padding: 0 .3rem;
box-sizing: border-box;
overflow-x: scroll;
white-space: nowrap;
&::-webkit-scrollbar {
display: none;
}
.game-scroll-item {
width: 5.1rem; width: 5.1rem;
height: 2.68rem; height: 2.68rem;
background-image: url(../images/ChallengeDetail/img_card.png); }
.have-joined-game-page {
width: 100%;
min-height: 100vh;
background-color: rgb(70, 88, 149);
background-image: url(../images/SignUp/sy_beijing.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100%;
padding-top: .24rem; background-position: center top;
box-sizing: border-box; display: flex;
margin-left: .2rem; flex-direction: column;
display: inline-block; align-items: center;
vertical-align: top; overflow: hidden;
&:first-child { position: relative;
margin-left: 0; .page-title {
width: 100%;
position: fixed;
left: 0;
top: 0;
} }
.item-title-status { .game-bonus-container {
width: 100%; width: 6.4rem;
padding: 0 .24rem 0 .3rem; padding: .3rem 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
.item-title {
font-size: .3rem;
line-height: 1;
color: #fff;
}
.item-status0 {
padding: 0 .16rem;
box-sizing: border-box;
background: rgba(255, 255, 255, .4);
font-size: .26rem;
line-height: .42rem;
color: #fff;
}
.item-status1 {
padding: 0 .16rem;
box-sizing: border-box; box-sizing: border-box;
background: #FCF776; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #1A285A, rgba(255, 255, 255, 0));
font-size: .26rem; margin-top: 2.38rem;
line-height: .42rem; .bonus-title {
color: #703E0B; font-size: .3rem;
} line-height: 1;
.item-status2 { color: #fff;
padding: 0 .16rem; text-align: center;
box-sizing: border-box; }
background: #A5A5A5; .bonus-amount {
font-size: .26rem; font-size: .64rem;
line-height: .42rem; line-height: .8;
color: #FFE253;
text-align: center;
margin-top: .26rem;
}
}
.game-title {
font-size: .36rem;
line-height: 1;
color: #fff; color: #fff;
} font-weight: bold;
margin-top: .4rem;
} }
.item-income { .game-time {
width: 100%; font-size: .24rem;
padding-left: .3rem;
box-sizing: border-box;
margin-top: .4rem;
display: flex;
align-items: flex-end;
.item-amount {
font-size: .48rem;
line-height: .8;
color: #FCF776;
}
.item-text {
font-size: .26rem;
line-height: 1; line-height: 1;
color: #DBF3FF; color: #D6DFFF;
margin-left: .1rem; padding: .12rem .38rem;
} border-radius: .48rem;
background: #556CB6;
margin-top: .14rem;
} }
.item-progress-num { .target-people-container {
width: 100%; display: flex;
padding: 0 .3rem; margin-top: .34rem;
box-sizing: border-box; .target-img {
margin-top: .58rem; width: .3rem;
display: flex; height: .26rem;
align-items: center;
justify-content: space-between;
.item-progress {
height: .06rem;
background: #fff;
position: relative;
&:after {
content: '';
width: 2.46rem;
height: .06rem;
background: rgba(255, 255, 255, .5);
position: absolute;
} }
} .people-img {
.item-num { width: .28rem;
font-size: .26rem; height: .24rem;
line-height: 1; margin-left: .5rem;
}
.target-people-text {
font-size: .26rem;
line-height: 1;
color: #fff;
margin-left: .08rem;
}
}
.hr {
width: 3rem;
height: .01rem;
background: #6F82C3;
margin-top: .5rem;
}
.game-scroll-container {
width: 100%;
height: 2.68rem;
margin-top: .4rem;
padding: 0 .3rem;
box-sizing: border-box;
overflow-x: scroll;
white-space: nowrap;
&::-webkit-scrollbar {
display: none;
}
.game-scroll-item {
width: 5.1rem;
height: 2.68rem;
background-image: url(../images/ChallengeDetail/img_card.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-top: .24rem;
box-sizing: border-box;
margin-left: .2rem;
display: inline-block;
vertical-align: top;
&:first-child {
margin-left: 0;
}
.item-title-status {
width: 100%;
padding: 0 .24rem 0 .3rem;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
.item-title {
font-size: .3rem;
line-height: 1;
color: #fff;
}
.item-status0 {
padding: 0 .16rem;
box-sizing: border-box;
background: rgba(255, 255, 255, .4);
font-size: .26rem;
line-height: .42rem;
color: #fff;
}
.item-status1 {
padding: 0 .16rem;
box-sizing: border-box;
background: #FCF776;
font-size: .26rem;
line-height: .42rem;
color: #703E0B;
}
.item-status2 {
padding: 0 .16rem;
box-sizing: border-box;
background: #A5A5A5;
font-size: .26rem;
line-height: .42rem;
color: #fff;
}
}
.item-income {
width: 100%;
padding-left: .3rem;
box-sizing: border-box;
margin-top: .4rem;
display: flex;
align-items: flex-end;
.item-amount {
font-size: .48rem;
line-height: .8;
color: #FCF776;
}
.item-text {
font-size: .26rem;
line-height: 1;
color: #DBF3FF;
margin-left: .1rem;
}
}
.item-progress-num {
width: 100%;
padding: 0 .3rem;
box-sizing: border-box;
margin-top: .58rem;
display: flex;
align-items: center;
justify-content: space-between;
.item-progress {
height: .06rem;
background: #fff;
position: relative;
&:after {
content: '';
width: 2.46rem;
height: .06rem;
background: rgba(255, 255, 255, .5);
position: absolute;
}
}
.item-num {
font-size: .26rem;
line-height: 1;
color: #fff;
}
}
}
}
.func-btn {
width: 5.6rem;
border-radius: .92rem;
background: #FABD21;
font-size: .4rem;
line-height: .92rem;
color: #fff; color: #fff;
} font-weight: bold;
text-align: center;
margin-top: 1.2rem;
} }
}
}
.func-btn {
width: 5.6rem;
border-radius: .92rem;
background: #FABD21;
font-size: .4rem;
line-height: .92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 1.2rem;
} }
}
</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