levis/ebook
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

chore: update #3

Merged
levis merged 1 commits from develop into production 2025-06-12 17:30:48 +00:00
Conversation 0 Commits 1 Files Changed 15 +192 -39
15 changed files with 192 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@ -1,10 +1,17 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/src/style.css" rel="stylesheet" /> <link href="/src/style.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet" />
<title>e-book</title> <title>e-book</title>
</head> </head>
<body> <body>

33
src/App.vue
View File

@ -1,30 +1,9 @@
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>
<template> <template>
<div class="bg-red-700"> <UiLayout>
<a href="https://vite.dev" target="_blank"> <RouterView />
<img src="/vite.svg" class="logo" alt="Vite logo" /> </UiLayout>
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</template> </template>
<style scoped> <script setup lang="ts">
.logo { import UiLayout from './layout/UiLayout.vue'
height: 6em; </script>
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

BIN
src/assets/img/png/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
src/assets/img/webp/footer-flowers.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 206 KiB

4
src/components/Typography/UiParagraph.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<component <component
:is="as" :is="as"
class="text-gray-900" class="text-primary"
:class="[ :class="[
{ {
'text-2xl lg:text-3xl 2xl:text-4xl': size === '600', 'text-2xl lg:text-3xl 2xl:text-4xl': size === '600',
@ -13,7 +13,7 @@
'text-lg lg:text-xl 2xl:text-2xl': size === '400', 'text-lg lg:text-xl 2xl:text-2xl': size === '400',
}, // 18px }, // 18px
{ {
'text-base lg:text-lg': size === '300', 'text-lg lg:text-[20px]': size === '300',
}, // 16px }, // 16px
{ {
'text-sm': size === '200', 'text-sm': size === '200',

25
src/components/UiNav/UiNav.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<UiParagraph
class="cursor-pointer"
tag="span"
size="300"
v-for="({ path, name, target }, index) in navContent"
:key="index"
>
<component :is="target ? 'a' : 'RouterLink'" :to="path" :href="path" :target="target">{{
name
}}</component>
</UiParagraph>
</template>
<script setup lang="ts">
import UiParagraph from '../Typography/UiParagraph.vue'
interface NavContent {
name: string
path: string
target?: string
}
const { navContent = undefined } = defineProps<{
navContent: NavContent[] | undefined
}>()
</script>

32
src/layout/UiFooter/UiFooter.vue
View File

@ -1,5 +1,33 @@
<template> <template>
<footer>tesst</footer> <footer class="mx-auto container">
<div class="relative z-10">
<div class="flex space-x-[51px] mb-5">
<UiNav :nav-content="footerNavigation" />
</div>
<div class="xl:max-w-[1225px] pb-7 flex justify-between">
<div>
<UiParagraph tag="span" size="300"
>По всем вопросам:<br />
<a href="mailto:vinogalante@yandex.ru" target="_blank">
vinogalante@yandex.ru
</a></UiParagraph
>
</div>
<div>
<UiParagraph tag="span" size="300" class="[&]:text-secondary"
><a href="https://www.litres.ru/" target="_blank">
Реферальная ссылка на ЛитРес
</a></UiParagraph
>
</div>
</div>
</div>
<!-- <img class="absolute top-6" src="/src/assets/img/webp/footer-flowers.webp" /> -->
</footer>
</template> </template>
<script setup lang="ts"></script> <script setup lang="ts">
import UiParagraph from '@/components/Typography/UiParagraph.vue'
import UiNav from '@/components/UiNav/UiNav.vue'
import { footerNavigation } from '@/layout/UiFooter/_data'
</script>

0
src/layout/_data/footer-navigation.data.ts → src/layout/UiFooter/_data/footer-navigation.data.ts
View File

1
src/layout/UiFooter/_data/index.ts Normal file
View File

@ -0,0 +1 @@
export { default as footerNavigation } from '@/layout/UiFooter/_data/footer-navigation.data'

17
src/layout/UiHeader/UiHeader.vue
View File

@ -1,11 +1,22 @@
<template> <template>
<header class="[&]:bg-accent text-white py-4 px-2 border-b border-b-white"> <header class="[&]:bg-accent text-white py-4 container mx-auto">
<div class="flex flex-row-reverse justify-end gap-4 items-center"> <div class="flex flex-row-reverse justify-end gap-4 items-center">
<slot name="content" /> <slot name="content" />
<div class="flex"></div> <div class="flex items-center gap-32">
<div class="russo-one-regular">
<UiParagraph tag="span" class="[&]:text-5xl">Vino Galante</UiParagraph>
</div>
<div class="flex space-x-10">
<UiNav :nav-content="headerNavigation" />
</div>
</div>
</div> </div>
<slot name="right-icons" /> <slot name="right-icons" />
</header> </header>
</template> </template>
<script setup lang="ts"></script> <script setup lang="ts">
import UiNav from '@/components/UiNav/UiNav.vue'
import { headerNavigation } from './_data'
import UiParagraph from '@/components/Typography/UiParagraph.vue'
</script>

24
src/layout/UiHeader/_data/header-navigation.data.ts Normal file
View File

@ -0,0 +1,24 @@
const headerNavigation = [
{
name: 'Главная',
path: '/',
},
{
name: 'Книга I',
path: '/books/1',
},
{
name: 'Книга II',
path: '/books/2',
},
{
name: 'Купить',
path: '/buy',
},
{
name: 'Отзывы',
path: '/feedback',
},
]
export default headerNavigation

1
src/layout/UiHeader/_data/index.ts Normal file
View File

@ -0,0 +1 @@
export { default as headerNavigation } from '@/layout/UiHeader/_data/header-navigation.data'

4
src/layout/UiLayout.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<div class="min-h-screen"> <div
class="min-h-svh bg-black-50 lato-regular relative overflow-visible before:content-[''] before:absolute before:bottom-0 before:h-[520px] before:w-full before:bg-[url(/src/assets/img/webp/footer-flowers.webp)] before:bg-no-repeat before:bg-bottom before:bg-cover before:z-0"
>
<UiHeader /> <UiHeader />
<UiMain /> <UiMain />
<UiFooter /> <UiFooter />

9
src/main.ts
View File

@ -1,5 +1,12 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './style.css' import './style.css'
import App from './App.vue' import App from './App.vue'
import router from '@/config/router/index'
createApp(App).mount('#app') const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

72
src/style.css
View File

@ -1,14 +1,16 @@
@import 'tailwindcss'; @import 'tailwindcss';
@theme { @theme {
--color-primary: #ffffff; --color-primary: rgba(255, 255, 255, 1);
--color-secondary: #f54b7e; --color-secondary: rgba(229, 30, 125, 1);
--color-three: #e20c66; --color-three: #e20c66;
--color-accent-50: #f54378; --color-accent-50: #f54378;
--color-accent-100: #e51e7d; --color-accent-100: #e51e7d;
--color-accent-150: #c4035f; --color-accent-150: #c4035f;
--color-black-50: #0c1018;
/*system colors*/ /*system colors*/
--color-error: oklch(57.7% 0.245 27.325); --color-error: oklch(57.7% 0.245 27.325);
--color-warning: oklch(76.9% 0.188 70.08); --color-warning: oklch(76.9% 0.188 70.08);
@ -17,3 +19,69 @@
--color-text-disabled: oklch(55.1% 0.027 264.364); --color-text-disabled: oklch(55.1% 0.027 264.364);
--color-bg-disabled: oklch(92.8% 0.006 264.531); --color-bg-disabled: oklch(92.8% 0.006 264.531);
} }
.lato-thin {
font-family: 'Lato', sans-serif;
font-weight: 100;
font-style: normal;
}
.lato-light {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-style: normal;
}
.lato-regular {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-style: normal;
}
.lato-bold {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-style: normal;
}
.lato-black {
font-family: 'Lato', sans-serif;
font-weight: 900;
font-style: normal;
}
.lato-thin-italic {
font-family: 'Lato', sans-serif;
font-weight: 100;
font-style: italic;
}
.lato-light-italic {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-style: italic;
}
.lato-regular-italic {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-style: italic;
}
.lato-bold-italic {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-style: italic;
}
.lato-black-italic {
font-family: 'Lato', sans-serif;
font-weight: 900;
font-style: italic;
}
.russo-one-regular {
font-family: 'Russo One', sans-serif;
font-weight: 700;
font-style: normal;
}