You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

waifu.vue 2.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <div class="project">
  3. <div class="project__content">
  4. <div class="box">
  5. <div class="box__header">
  6. <div class="left">
  7. <h1 class="title">
  8. {{ $waifu.name }}
  9. </h1>
  10. <h2 class="subtitle">
  11. {{ $waifu.description }}
  12. </h2>
  13. </div>
  14. <div class="right buttons">
  15. <button v-if="requirements.canUseWaifu" class="button" @click="$waifu.openAppFolder()">
  16. App Folder
  17. </button>
  18. <nuxt-link v-else to="/wizard/waifu" class="button button--info">
  19. Install
  20. </nuxt-link>
  21. <a v-if="$settings.preferences.advanced.device === 'GPU'"
  22. v-tooltip="'Install this to use Waifu2X on GPU.'"
  23. href="https://developer.nvidia.com/cuda-10.2-download-archive"
  24. target="_blank"
  25. class="button button--success">
  26. <span class="icon"><font-awesome-icon icon="external-link-square-alt" /></span>
  27. <span>CUDA 10.2</span>
  28. </a>
  29. </div>
  30. </div>
  31. <div class="box__content">
  32. <!-- Updater -->
  33. <AppUpdate :project="$waifu" href="/wizard/waifu" />
  34. <!-- Remote navigation -->
  35. <MenuItem
  36. v-for="(item, index) in $waifu.data.about.navigation"
  37. :key="index"
  38. :label="item.label"
  39. :description="item.description"
  40. :icon="item.icon"
  41. :href="item.href" />
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. </template>
  47. <script>
  48. import { requirements } from '~/modules/system'
  49. export default {
  50. data: () => ({
  51. requirements,
  52. }),
  53. }
  54. </script>
  55. <style lang="scss" scoped>
  56. .project {
  57. }
  58. .project__content {
  59. .title {
  60. @apply text-white text-2xl;
  61. }
  62. .subtitle {
  63. @apply text-lg;
  64. }
  65. }
  66. .box__header {
  67. @apply grid grid-cols-4 gap-3;
  68. .left {
  69. @apply col-span-2;
  70. }
  71. .right {
  72. @apply flex justify-center items-center col-span-2;
  73. }
  74. }
  75. </style>