|
@@ -0,0 +1,112 @@
|
|
|
+<template>
|
|
|
+ <div class="ttyf-conatainer">
|
|
|
+ <!--邀请记录-头像区-->
|
|
|
+ <div>
|
|
|
+ <div class="invite-list">
|
|
|
+ <ul>
|
|
|
+ <!--头像-->
|
|
|
+ <li v-for="i in 2" :key="'a' + i">
|
|
|
+ <div class="avatar">
|
|
|
+ <img src="" alt="">
|
|
|
+ </div>
|
|
|
+ <p class="name">爱神的箭</p>
|
|
|
+ </li>
|
|
|
+ <!--占位-->
|
|
|
+ <li v-for="i in 3" :key="'b' + i">
|
|
|
+ <div class="avatar">
|
|
|
+ <img src="" alt="">
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <a class="btn"
|
|
|
+ href="javascript:;">去推荐</a>
|
|
|
+ </div>
|
|
|
+ <!--奖励说明-->
|
|
|
+ <!--邀请记录-列表-->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'index',
|
|
|
+ async mounted () {
|
|
|
+ await this.$nextTick()
|
|
|
+ this.$refreshTitle('推荐有礼')
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.invite-list {
|
|
|
+ width: 330px;
|
|
|
+ height: 236px;
|
|
|
+ padding-top: 34px;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: rgba(56, 22, 54, 0.1);
|
|
|
+ border-radius: 16px;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: row wrap;
|
|
|
+ justify-content: center;
|
|
|
+ width: 238px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ li {
|
|
|
+ margin-left: 35px;
|
|
|
+ margin-top: 15px;
|
|
|
+
|
|
|
+ &:nth-of-type(1),
|
|
|
+ &:nth-of-type(2),
|
|
|
+ &:nth-of-type(3) {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-of-type(1),
|
|
|
+ &:nth-of-type(4) {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid #FFFFFF;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 18px;
|
|
|
+ text-align: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ display: block;
|
|
|
+ width: 326px;
|
|
|
+ height: 45px;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #FE9400;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 45px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|