cps：新增页面邀请好友

htmldev/cps/src/views/recommend/index.vue

@@ -1,13 +1,97 @@
 <template>
-  <div>邀请海报</div>
+  <div class="recommend-container">
+    <div class="poster">
+      <img src="" alt="">
+    </div>
+    <div class="footer">
+      <van-button
+        class="save"
+        type="default">保存到手机
+      </van-button>
+      <van-button
+        class="share"
+        type="default">邀请微信好友
+      </van-button>
+    </div>
+  </div>
 </template>
 
 <script>
+import { Button } from 'vant'
+
 export default {
-  name: 'index'
+  name: 'index',
+  components: {
+    'van-button': Button
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.recommend-container {
+  padding-bottom: 116px;
+}
+
+.poster {
+  width: 344px;
+  height: 586px;
+  margin: 22px auto 0;
+  box-shadow: 0 2px 4px 0 rgba(209, 219, 236, 0.72);
+  border-radius: 8px;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+
+  img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+}
+
+.footer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 32px 0 36px;
+}
+
+.save,
+.share {
+  width: 156px;
+  height: 48px;
+  border-radius: 24px;
 
+}
+
+.save {
+  background: transparent;
+  border: 1px solid #FA4A4A;
+
+  .van-button__text {
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FA4A4A;
+    line-height: 20px;
+  }
+}
+
+.share {
+  margin-left: 15px;
+  border: none;
+  background: #FA4A4A;
+
+  .van-button__text {
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 20px;
+  }
+}
 </style>