skip.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <template>
  2. <div>
  3. <div class="skip-wrap">
  4. <div class="skip-theme">
  5. <div class="skip-theme-iamge">logo</div>
  6. <div class="skip-theme-txt">小程序</div>
  7. </div>
  8. <div class="skip-btn">
  9. <p id="launch-btn" @click="showWechat()">打开微信</p>
  10. </div>
  11. </div>
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {};
  18. },
  19. created() {
  20. init(); //实例初始化
  21. },
  22. methods: {
  23. showWechat() {
  24. },
  25. },
  26. components: {},
  27. destroyed() {},
  28. };
  29. </script>
  30. <style lang="scss">
  31. .skip-wrap {
  32. height: 100vh;
  33. width: 100%;
  34. position: relative;
  35. }
  36. .skip-theme {
  37. display: flex;
  38. align-items: center;
  39. flex-direction: column;
  40. padding: 200px 0 0;
  41. }
  42. .skip-theme-iamge {
  43. width: 60px;
  44. height: 60px;
  45. line-height: 60px;
  46. text-align: center;
  47. color: #fff;
  48. background-color: #e96737;
  49. border-radius: 50%;
  50. margin-bottom: 10px;
  51. }
  52. .skip-theme-txt {
  53. color: rgb(194, 184, 184);
  54. text-align: center;
  55. }
  56. .skip-btn {
  57. position: absolute;
  58. bottom: 50px;
  59. width: 100%;
  60. display: flex;
  61. align-items: center;
  62. justify-content: center;
  63. }
  64. .skip-btn p {
  65. height: 30px;
  66. width: 200px;
  67. background-color: rgb(7, 192, 88);
  68. border-radius: 8px;
  69. line-height: 30px;
  70. color: #fff;
  71. text-align: center;
  72. }
  73. </style>