app.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <div :class="['demo-wrapper',{'in-iframe':inIframe}]">
  3. <router-view class="demo-nav" name="demonav" v-if="!inIframe" v-transition></router-view>
  4. <keep-alive include="index">
  5. <router-view class="demo" name="main" v-transition></router-view>
  6. </keep-alive>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. name: "App",
  12. data() {
  13. return {
  14. inIframe: false
  15. };
  16. },
  17. mounted() {
  18. if (window.self != window.top) {
  19. this.inIframe = true;
  20. }
  21. }
  22. };
  23. </script>
  24. <style lang="scss">
  25. * {
  26. -webkit-tap-highlight-color: transparent;
  27. }
  28. [v-cloak] {
  29. display: none;
  30. }
  31. body {
  32. font-size: 16px;
  33. margin: 0;
  34. color: #2e2d2d;
  35. font-family: PingHei, "Microsoft YaHei", "Lucida Grande",
  36. "Lucida Sans Unicode", STHeiti, Helvetica, Arial, Verdana, "sans-serif",
  37. "PingHei-light", SimHei, "Droid Sans";
  38. }
  39. .demo-wrapper {
  40. width: 100%;
  41. min-height: 100vh;
  42. padding-top: 40px;
  43. box-sizing: border-box;
  44. background: #f6f6f6;
  45. &.in-iframe {
  46. padding-top: 0;
  47. }
  48. }
  49. h4 {
  50. padding: 0 8px;
  51. box-sizing: border-box;
  52. }
  53. .demo {
  54. padding:0 8px 20px 8px;
  55. }
  56. </style>