|
@@ -1,12 +1,48 @@
|
|
|
<template>
|
|
|
<div class="my">
|
|
|
- My
|
|
|
+ <i class="detail_ico"/>
|
|
|
+ <div class="my_content">
|
|
|
+ <p class="gold_numb">金币总数:{{ goldNumber }}</p>
|
|
|
+ <p class="share_introduce">分享可额外获得金币</p>
|
|
|
+ <p class="presenter_number">今日剩余赠送次数:{{ presenterNumber }}</p>
|
|
|
+ <i class="exchange_record" @click="exchangeRecord"/>
|
|
|
+ <i class="share_btn" @click="shareBtn"/>
|
|
|
+ <i class="bet_btn" @click="betBtn"/>
|
|
|
+ </div>
|
|
|
+ <i class="back_btn" @click="backBtn"/>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: 'my'
|
|
|
+ name: 'my',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ goldNumber: 22222,
|
|
|
+ presenterNumber: 3
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ backBtn () {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ exchangeRecord () {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/exchangeRecord'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ betBtn () {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/betBtn'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 分享 判断如果是浏览器打开的页面,就不显示分享,APP和微信打开的都要显示 分享
|
|
|
+ shareBtn () {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
@@ -14,6 +50,79 @@ export default {
|
|
|
.my {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- background-color: green;
|
|
|
+ background: url(../assets/home/my_bg.png) no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.my .detail_ico {
|
|
|
+ background: url(../assets/home/detail_ico.png) no-repeat center center;
|
|
|
+ background-size: cover;
|
|
|
+ width: 1.23148148rem;
|
|
|
+ height: 1.25rem;
|
|
|
+ position: absolute;
|
|
|
+ top: 0.35703704rem;
|
|
|
+ right: 1rem;
|
|
|
+}
|
|
|
+.my .my_content {
|
|
|
+ margin: auto;
|
|
|
+ padding-top: 3.09259259rem;
|
|
|
+}
|
|
|
+.my .my_content .gold_numb {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 0.75925926rem;
|
|
|
+ line-height: 0.75925926rem;
|
|
|
+ color: #FFDF00;
|
|
|
+ letter-spacing: 0.055555556rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.my .my_content .share_introduce {
|
|
|
+ margin-top: 0.25rem;
|
|
|
+ font-size: 0.59259259rem;
|
|
|
+ line-height: 0.59259259rem;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFDF00;
|
|
|
+ letter-spacing: 0.045555556rem;
|
|
|
+}
|
|
|
+.my .my_content .presenter_number {
|
|
|
+ margin-top: 0.8rem;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 0.41666666rem;
|
|
|
+ font-size: 0.41666666rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.my .my_content .exchange_record {
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ margin-top: 1rem;
|
|
|
+ width: 4.03703703rem;
|
|
|
+ height: 1.25925925rem;
|
|
|
+ background: url(../assets/home/exchange_record.png) no-repeat center center;
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+.my .my_content .share_btn {
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ margin-top: 0.3rem;
|
|
|
+ width: 4.03703703rem;
|
|
|
+ height: 1.25925925rem;
|
|
|
+ background: url(../assets/home/share_btn.png) no-repeat center center;
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+.my .my_content .bet_btn {
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ margin-top: 0.3rem;
|
|
|
+ width: 4.03703703rem;
|
|
|
+ height: 1.25925925rem;
|
|
|
+ background: url(../assets/home/bet_btn.png) no-repeat center center;
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+.my .back_btn {
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ margin-top: 2.2rem;
|
|
|
+ width: 3.07407407rem;
|
|
|
+ height: 1.222222222rem;
|
|
|
+ background: url(../assets/home/back_btn.png) no-repeat center center;
|
|
|
+ background-size: cover;
|
|
|
}
|
|
|
</style>
|