邀请百姓

src/views/Dynamic.vue

@@ -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>