|
@@ -1,19 +1,198 @@
|
|
|
<template>
|
|
|
- <div class="exchange_record">{{ aa }}</div>
|
|
|
+ <div class="exchange_record">
|
|
|
+ <div class="record_hd">
|
|
|
+ <i class="record_hd_ico"/>
|
|
|
+ </div>
|
|
|
+ <div class="record_ct">
|
|
|
+ <div class="record_list_hd">
|
|
|
+ <span class="left">奖品名称</span>
|
|
|
+ <span class="right">消耗金币</span>
|
|
|
+ </div>
|
|
|
+ <ul class="record_list_ul">
|
|
|
+ <li v-for="(item,index) in list" :key="index" class="record_list_ct">
|
|
|
+ <div class="record_list_ct_box clearfix">
|
|
|
+ <span class="left">{{ item.name }}</span>
|
|
|
+ <span class="right">{{ item.number}}</span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <i class="back_btn" @click="backBtn"/>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
name: 'exchangeRecord',
|
|
|
data () {
|
|
|
return {
|
|
|
- aa: '1222222222'
|
|
|
+ record_hd: '1222222222',
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ name: 'hooli',
|
|
|
+ number: '2222'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'hooli',
|
|
|
+ number: '333'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'hooli',
|
|
|
+ number: '4444'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'hooli',
|
|
|
+ number: '5555'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'hooli',
|
|
|
+ number: '666'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'hooli',
|
|
|
+ number: '333'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'hooli',
|
|
|
+ number: '4444'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'hooli',
|
|
|
+ number: '5555'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'hooli',
|
|
|
+ number: '666'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ backBtn () {
|
|
|
+ this.$router.push({path: '/My'})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
+li {
|
|
|
+ list-style-type:none;
|
|
|
+}
|
|
|
.exchange_record {
|
|
|
- background-color: red;
|
|
|
- color: #ffffff;
|
|
|
+ background: url(../assets/exchange_record/exchange_record_bg.png) no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.record_hd {
|
|
|
+ padding-top: 1.71111111rem;
|
|
|
+}
|
|
|
+.record_hd_ico {
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ background: url(../assets/exchange_record/exchange_record_hd.png) no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 9.033333333rem;
|
|
|
+ height: 1.1111111111111rem;
|
|
|
+}
|
|
|
+.record_ct {
|
|
|
+ width: 75%;
|
|
|
+ height: 49%;
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ top: 21.4%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+}
|
|
|
+.record_list_hd {
|
|
|
+ width: 80%;
|
|
|
+ margin: auto;
|
|
|
+ margin-top: 0.44074074rem;
|
|
|
+ height: 1.2rem;
|
|
|
+ line-height: 1.2rem;
|
|
|
+ color: #FFDF00;
|
|
|
+ font-size: 0.55555555555rem;
|
|
|
+}
|
|
|
+.record_ct li {
|
|
|
+ height: 1.2rem;
|
|
|
+}
|
|
|
+.record_ct li .record_list_ct_box {
|
|
|
+ width: 80%;
|
|
|
+ margin: auto;
|
|
|
+ height: 1.2rem;
|
|
|
+ line-height: 1.2rem;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 0.46296296rem;
|
|
|
+}
|
|
|
+.left {
|
|
|
+ /* float: left; */
|
|
|
+ width:50%;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.right {
|
|
|
+ display: inline-block;
|
|
|
+ width:50%;
|
|
|
+ /* float:right; */
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.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;
|
|
|
+ bottom: 2rem;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+}
|
|
|
+.record_list_ul {
|
|
|
+ overflow-y: auto;
|
|
|
+ height: 84%;
|
|
|
+}
|
|
|
+/* .record_list_ul {
|
|
|
+ height:80%;
|
|
|
+}
|
|
|
+.record_list_hd {
|
|
|
+ height: 20%;
|
|
|
+ top: .4333rem;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.record_list_hd span {
|
|
|
+ color: #FFDF00;
|
|
|
+ font-size: 0.55555555555rem;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+}
|
|
|
+.record_list_ct{
|
|
|
+ height: 20%;
|
|
|
+ position: relative;
|
|
|
+ border-top: 3px solid #0C1D32;
|
|
|
+}
|
|
|
+.record_list_ct span {
|
|
|
+ color: #FFDF00;
|
|
|
+ font-size: 0.55555555555rem;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.record_list_ct_box {
|
|
|
+ top: .333333rem;
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+}
|
|
|
+.left {
|
|
|
+ float: left;
|
|
|
+ width:50%;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
+.right {
|
|
|
+ display: inline-block;
|
|
|
+ width:50%;
|
|
|
+ float: right;
|
|
|
+} */
|
|
|
</style>
|