|
@@ -1,12 +1,67 @@
|
|
|
<template>
|
|
|
<div class="awards">
|
|
|
- Awards
|
|
|
+ <p class="residue_gold">剩余金币:</p>
|
|
|
+ <div class="list">
|
|
|
+ <div class="list_hd">
|
|
|
+ <span>奖品</span>
|
|
|
+ <span>所需金币</span>
|
|
|
+ </div>
|
|
|
+ <ul class="list_ct">
|
|
|
+ <li>
|
|
|
+ <span class="list_ct_name">hooli</span>
|
|
|
+ <span class="list_ct_gold">2500</span>
|
|
|
+ <i class="awards_btn" />
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="list_ct_name">hooli</span>
|
|
|
+ <span class="list_ct_gold">2500</span>
|
|
|
+ <i class="awards_btn1" @click="awardsBtn"/>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <i class="back_btn" @click="backBtn"/>
|
|
|
+ <div v-show="popup" class="conceal_tier"/>
|
|
|
+ <div v-show="popup" class="address">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <p>姓名:</p>
|
|
|
+ <input class="user_name" type="text">
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p>电话:</p>
|
|
|
+ <input class="user_phone" type="text">
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p>详细地址:</p>
|
|
|
+ <textarea id="" class="user_address" name="" cols="30" rows="5"/>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <i class="submit" @click="submit"/>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: 'Awards'
|
|
|
+ name: 'Awards',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ popup: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submit () {
|
|
|
+
|
|
|
+ },
|
|
|
+ awardsBtn () {
|
|
|
+ this.popup = true
|
|
|
+ },
|
|
|
+ backBtn () {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/Home'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
@@ -14,6 +69,152 @@ export default {
|
|
|
.awards {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- background-color: #fff;
|
|
|
+ background: url(../assets/awards/awards_bg.png) no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.residue_gold {
|
|
|
+ padding-top: 1.1rem;
|
|
|
+ margin-left: .75rem;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 0.64814814rem;
|
|
|
+ letter-spacing: .02rem;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.list {
|
|
|
+ width: 96%;
|
|
|
+ margin: auto;
|
|
|
+ height: 50%;
|
|
|
+ background: url(../assets/awards/grafting_bg.png) repeat-y center center;
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+.list_hd {
|
|
|
+ margin-top: .46296296rem;
|
|
|
+ height: 1rem;
|
|
|
+ line-height: 1rem;
|
|
|
+ background: url(../assets/awards/awards_hd_bg.png) no-repeat center center;
|
|
|
+ background-size: cover;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.list_hd span {
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ font-size: .55555555rem;
|
|
|
+}
|
|
|
+.list_hd span:first-child {
|
|
|
+ width: 41%;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+.list_hd span:last-child {
|
|
|
+ width: 59%;
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+.list_ct {
|
|
|
+ padding-top: .3rem;
|
|
|
+ height: 84%;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+.list_ct li {
|
|
|
+ width: 94%;
|
|
|
+ margin: auto;
|
|
|
+ border-bottom: .028rem solid #1D3656;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 1.58333333rem;
|
|
|
+ line-height: 1.58333333rem;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.list_ct li span {
|
|
|
+ display:inline-block;
|
|
|
+ // width: 35%;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: .55555555555rem;
|
|
|
+}
|
|
|
+.list_ct li .list_ct_name {
|
|
|
+ width: 45%
|
|
|
+}
|
|
|
+.list_ct li .list_ct_gold {
|
|
|
+ width: 55%;
|
|
|
+}
|
|
|
+.list_ct li i {
|
|
|
+ width: 1.6666666rem;
|
|
|
+ height: .86111111rem;
|
|
|
+ position: absolute;
|
|
|
+ top: 25%;
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
+.awards_btn {
|
|
|
+ background: url(../assets/awards/gray_awards_btn.png) no-repeat center center;
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+.awards_btn1 {
|
|
|
+ background: url(../assets/awards/red_awards_btn.png) no-repeat center center;
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+.back_btn {
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ width: 3.07407407rem;
|
|
|
+ height: 1.222222222rem;
|
|
|
+ background: url(../assets/home/back_btn.png) no-repeat center center;
|
|
|
+ background-size: cover;
|
|
|
+ position: absolute;
|
|
|
+ margin-top: 1rem;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+}
|
|
|
+// 弹框
|
|
|
+.conceal_tier {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ // background-color: #000000;
|
|
|
+ background: url(../assets/ranks/rank_bg1.png) no-repeat center center;
|
|
|
+ background-size: cover;
|
|
|
+ // opacity: .7;
|
|
|
+ z-index: 10001;
|
|
|
+}
|
|
|
+.address {
|
|
|
+ position: absolute;
|
|
|
+ width: 63%;
|
|
|
+ z-index: 9999999;
|
|
|
+ top: 8%;
|
|
|
+ left: 18.5%;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: .5555555rem;
|
|
|
+}
|
|
|
+.user_address,.user_phone,.user_name {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.user_phone,.user_name {
|
|
|
+ background: url(../assets/cash_address/input.png) no-repeat center center;
|
|
|
+ background-size: 102% 115%;
|
|
|
+ padding-left: 1%;
|
|
|
+ border-radius: .09259259rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: .34259259rem;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+}
|
|
|
+.user_address {
|
|
|
+ background: url(../assets/cash_address/textarea.png) no-repeat center center;
|
|
|
+ background-size: 102% 115%;
|
|
|
+ border-radius: .09259259rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: .34259259rem;
|
|
|
+}
|
|
|
+.submit {
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ width: 3.07407407rem;
|
|
|
+ height: 1.222222222rem;
|
|
|
+ background: url(../assets/cash_address/submit.png) no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ margin-top: 1rem;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ // border-radius: .1rem;
|
|
|
}
|
|
|
</style>
|