From 7023bbbdc5c7957865cac6b3d461e0b110f87aac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Malin=20Haugland=20H=C3=B8li?= <malin.holi@gmail.com>
Date: Thu, 18 Apr 2024 14:46:35 +0200
Subject: [PATCH] refactor: :lipstick: Made changes to the startview displaying
the background image properly
---
src/App.vue | 10 ++++++----
src/views/StartView.vue | 37 +++++++++++++++++++------------------
2 files changed, 25 insertions(+), 22 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 33172e8..9a441b6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,13 @@
<script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
import { RouterLink, RouterView, useRoute} from 'vue-router'
const route = useRoute()
-const showRouterView =
- computed(() => route.path !== '/')
+const showRouterView = computed(() =>
+route.path !== '/'
+)
+
</script>
<template>
@@ -23,7 +25,7 @@ const showRouterView =
</main>
</template>
-<style scoped>
+<style>
nav {
display: flex;
justify-content: center;
diff --git a/src/views/StartView.vue b/src/views/StartView.vue
index 4498f59..b31414b 100644
--- a/src/views/StartView.vue
+++ b/src/views/StartView.vue
@@ -1,21 +1,22 @@
-<script setup lang="ts">
-import startPageFirst from '@/assets/background/startpage_first.png';
-import startPageSecond from '@/assets/background/startpage_second.png';
-import startPageThird from '@/assets/background/startpage_third.png';
-</script>
-
<template>
- <div class="h-screen w-full bg-cover bg-center m-0 p-0" :style="{ backgroundImage: `url(${startPageFirst})` }"></div>
- <div class="h-screen w-full bg-cover bg-center m-0 p-0" :style="{ backgroundImage: `url(${startPageSecond})` }"></div>
- <div class="h-screen w-full bg-cover bg-center m-0 p-0" :style="{ backgroundImage: `url(${startPageThird})` }"></div>
-</template>
+ <div class="background-container">
-<style scoped>
-html, body {
- @apply m-0;
-}
-.h-screen {
- @apply p-0;
-}
-</style>
+ <div>
+ <img src="@/assets/start_page/sti.png" alt="Background" class="w-full">
+ <div class="absolute bottom-0 left-0 ml-2 w-60 pl-10">
+ <h2>Kom igang med målene dine! 🚀</h2>
+ <p>Sett deg et sparemål og utfordre deg selv til å spare mer.</p>
+ </div>
+ <div class="absolute bottom-0 0 right-0 mr-4 pr-10">
+ <h2>Sparetips 💡 Visste du at...</h2>
+ <p>...du kan spare penger på å lage matpakke til jobb?</p>
+ <p>...du kan spare penger på å bruke kollektivtransport?</p>
+ <p>...du kan spare penger på å kjøpe brukt?</p>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+</script>
--
GitLab