|
@@ -1,23 +1,38 @@
|
|
|
<template>
|
|
|
<div class="usremei-container">
|
|
|
- <div class="invite-header">
|
|
|
- 红旗资本原始股
|
|
|
+ <div class="header-section">
|
|
|
+ <div class="invite-header">红旗资本原始股
|
|
|
+ <!-- <div class="sub-header">(每份收益三年)</div> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="desc-text">
|
|
|
+ 国务院国资委帮扶完成指标:国有企业各大领导决定发行资本原始股。资本原始股每一股价值20元,推动后可兑换现金人民币,兑换当天立即可打款到银行卡,每份收益一年。
|
|
|
+ </div>
|
|
|
+ <div class="commission-card">
|
|
|
+ <span class="commission-title">团队返佣:</span>
|
|
|
+ <div class="commission-list">
|
|
|
+ <span class="commission-item">一级5%</span>
|
|
|
+ <span class="commission-item">二级2%</span>
|
|
|
+ <span class="commission-item">三级1%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="invite-list">
|
|
|
- <div class="invite-item" v-for="(item,index) in rewards" :key="item.id">
|
|
|
+ <div class="invite-item" v-for="(item,i) in rewards" :key="item.id">
|
|
|
<div class="item_header">
|
|
|
<div class="title">{{ item.title }}</div>
|
|
|
- <div class="titletwo">获得{{index +1}}万原始股</div>
|
|
|
+ <div class="titletwo">获得{{i + 1}}万原始股</div>
|
|
|
</div>
|
|
|
<div class="item_body">
|
|
|
<div class="body_left">
|
|
|
- <div class="bodt_one">{{item.power}}%</div>
|
|
|
- <div class="bodt_two">每日收益</div>
|
|
|
+ <div style="font-weight: 700;" class="bodt_one">{{item.power}}%</div>
|
|
|
+ <div style="font-weight: 700;" class="bodt_two">每日收益</div>
|
|
|
</div>
|
|
|
<div class="body_right">
|
|
|
- <div class="bodt_one">{{item.money}}元</div>
|
|
|
+ <div style="font-weight: 700; font-size: 17px; font-family: system-ui;" class="bodt_one">{{item.money}}元</div>
|
|
|
+ <!-- <div style="color: #8e8989; font-weight: 700;" class="bodt_two">10000份</div> -->
|
|
|
</div>
|
|
|
- <div class="body_btn" @click="toPayment(item)">立即抢购</div>
|
|
|
+ <div class="body_btn" @click="toPayment(item)">立即参与</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -31,7 +46,7 @@ export default {
|
|
|
name: 'Dynamic',
|
|
|
data() {
|
|
|
return {
|
|
|
- rewards: [{},{},{},{}]
|
|
|
+ rewards: [{},{},{},{}]
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -47,7 +62,7 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- toPayment(item){
|
|
|
+ toPayment(item){
|
|
|
this.$router.push({path:'/Payment',query:{item:item}});
|
|
|
}
|
|
|
},
|
|
@@ -63,24 +78,89 @@ export default {
|
|
|
background-image: url('../assets/dabag.png');
|
|
|
background-size: cover;
|
|
|
background-position: center;
|
|
|
- padding-top: 60px;
|
|
|
+ padding-top: 30px;
|
|
|
padding-bottom: 80px;
|
|
|
box-sizing: border-box;
|
|
|
overflow-y: auto;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
+.header-section {
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto 20px;
|
|
|
+}
|
|
|
+
|
|
|
.invite-header {
|
|
|
background: #ffeddf;
|
|
|
color: #f11859;
|
|
|
- font-size: 24px;
|
|
|
+ font-size: 20px;
|
|
|
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;
|
|
|
+ position: relative;
|
|
|
+ clip-path: polygon(60px 0, calc(100% - 60px) 0, 100% 100%, 0 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.sub-header {
|
|
|
+ color: #f11859;
|
|
|
+ background: #ffeddf;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.desc-text {
|
|
|
+ background: #ffeddf;
|
|
|
+ color: #f11859;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.6;
|
|
|
+ padding: 15px;
|
|
|
+ text-align: justify;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.commission-card {
|
|
|
+ background: #ffeddf;
|
|
|
+ margin-top: 2px;
|
|
|
+ padding: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.commission-title {
|
|
|
+ color: #9c1492;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.commission-list {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #9c1492;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.commission-item {
|
|
|
+ /* margin: 0 15px; */
|
|
|
+ font-size: 16px;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.commission-item:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.level {
|
|
|
+ color: #f11859;
|
|
|
+ margin-right: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.rate {
|
|
|
+ color: #f11859;
|
|
|
}
|
|
|
|
|
|
.invite-list {
|
|
@@ -119,15 +199,16 @@ export default {
|
|
|
margin-top:4px;
|
|
|
}
|
|
|
.body_btn{
|
|
|
- width:60px;
|
|
|
- height:20px;
|
|
|
- background:#a30100;
|
|
|
- color:#fff;
|
|
|
- font-size:12px;
|
|
|
- text-align:center;
|
|
|
- line-height:20px;
|
|
|
- border-radius:12px;
|
|
|
- padding:2px 4px;
|
|
|
+ width: 84px;
|
|
|
+ height: 28px;
|
|
|
+ background: #a30100;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 17px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 27px;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 2px 4px;
|
|
|
+ font-weight: 600;
|
|
|
|
|
|
}
|
|
|
</style>
|