|
|
@@ -31,6 +31,17 @@
|
|
|
<van-button type="default">立即领券</van-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!--底部按钮-->
|
|
|
+ <div class="footer">
|
|
|
+ <a href="javascript:;">
|
|
|
+ <span>分享赚</span>
|
|
|
+ <span>￥99999.79</span>
|
|
|
+ </a>
|
|
|
+ <a href="javascript:;">
|
|
|
+ <span>自购省</span>
|
|
|
+ <span>券￥99999.79 + ￥99999999.79</span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -50,6 +61,7 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.main {
|
|
|
width: 365px;
|
|
|
+ padding-bottom: 120px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
@@ -184,4 +196,52 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.footer {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 10;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 13px 0 30px;
|
|
|
+ border-top: 1px solid #F1F1F1;
|
|
|
+ background: #FFFFFF;
|
|
|
+
|
|
|
+ a {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ width: 168px;
|
|
|
+ height: 50px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 25px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ color: #fff;
|
|
|
+ background: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ margin-left: 14px;
|
|
|
+ color: #333333;
|
|
|
+ background: #f8d548;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
panyong