app.vue 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  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', 'Lucida Sans Unicode', STHeiti, Helvetica, Arial, Verdana, 'sans-serif', 'PingHei-light',
  36. SimHei, 'Droid Sans';
  37. }
  38. .demo-wrapper {
  39. width: 100%;
  40. min-height: 100vh;
  41. padding-top: 40px;
  42. box-sizing: border-box;
  43. background: #f6f6f6;
  44. &.in-iframe {
  45. padding-top: 0;
  46. }
  47. }
  48. h4 {
  49. padding: 0 8px;
  50. box-sizing: border-box;
  51. }
  52. .demo {
  53. padding: 0 8px 20px 8px;
  54. }
  55. </style>