|
|
@@ -1,6 +1,52 @@
|
|
|
<template>
|
|
|
- <div class="dynamic">
|
|
|
- <h1>动态</h1>
|
|
|
+ <div class="usremei-container">
|
|
|
+ <div class="invite-header">
|
|
|
+ 邀请好友获得红旗资产
|
|
|
+ </div>
|
|
|
+ <div class="invite-list">
|
|
|
+ <div class="invite-item">
|
|
|
+ <div class="invite-info">
|
|
|
+ <div class="invite-title">邀请5人实名认证</div>
|
|
|
+ <div class="invite-reward">奖励60000元红旗资产</div>
|
|
|
+ </div>
|
|
|
+ <button class="btn received">已领取</button>
|
|
|
+ </div>
|
|
|
+ <div class="invite-item">
|
|
|
+ <div class="invite-info">
|
|
|
+ <div class="invite-title">邀请10人实名认证</div>
|
|
|
+ <div class="invite-reward">奖励150000元红旗资产</div>
|
|
|
+ </div>
|
|
|
+ <button class="btn not-reached">未达标</button>
|
|
|
+ </div>
|
|
|
+ <div class="invite-item">
|
|
|
+ <div class="invite-info">
|
|
|
+ <div class="invite-title">邀请20人实名认证</div>
|
|
|
+ <div class="invite-reward">奖励300000元红旗资产</div>
|
|
|
+ </div>
|
|
|
+ <button class="btn not-reached">未达标</button>
|
|
|
+ </div>
|
|
|
+ <div class="invite-item">
|
|
|
+ <div class="invite-info">
|
|
|
+ <div class="invite-title">邀请50人实名认证</div>
|
|
|
+ <div class="invite-reward">奖励800000元红旗资产</div>
|
|
|
+ </div>
|
|
|
+ <button class="btn not-reached">未达标</button>
|
|
|
+ </div>
|
|
|
+ <div class="invite-item">
|
|
|
+ <div class="invite-info">
|
|
|
+ <div class="invite-title">邀请100人实名认证</div>
|
|
|
+ <div class="invite-reward">奖励1800000元红旗资产</div>
|
|
|
+ </div>
|
|
|
+ <button class="btn not-reached">未达标</button>
|
|
|
+ </div>
|
|
|
+ <div class="invite-item">
|
|
|
+ <div class="invite-info">
|
|
|
+ <div class="invite-title">邀请150人实名认证</div>
|
|
|
+ <div class="invite-reward">获得国家神秘奖励</div>
|
|
|
+ </div>
|
|
|
+ <button class="btn not-reached">未达标</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -11,7 +57,83 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.dynamic {
|
|
|
- padding: 20px;
|
|
|
+.usremei-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-image: url('../assets/dabag.png');
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ padding-top: 60px;
|
|
|
+ padding-bottom: 80px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-y: auto;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.invite-header {
|
|
|
+ background: #ffeddf;
|
|
|
+ color: #f11859;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto 30px auto;
|
|
|
+ padding: 20px 0 10px 0;
|
|
|
+ width: 90%;
|
|
|
+ box-shadow: 0 4px 16px rgba(208,2,27,0.08);
|
|
|
+ letter-spacing: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.invite-list {
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.invite-item {
|
|
|
+ background: #ffeddf;
|
|
|
+ margin-bottom: 22px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 4px 20px;
|
|
|
+ box-shadow: 0 2px 8px rgba(208,2,27,0.06);
|
|
|
+}
|
|
|
+
|
|
|
+.invite-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width:70%;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.invite-title {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.invite-reward {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000;
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ min-width: 70px;
|
|
|
+ height: 32px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 16px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ padding: 0 18px;
|
|
|
+ cursor: default;
|
|
|
+}
|
|
|
+
|
|
|
+.btn.received {
|
|
|
+ background: #bdbdbd;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.btn.not-reached {
|
|
|
+ background: #d0021b;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
</style>
|
