mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-07-08 22:11:25 +08:00
first commit
This commit is contained in:
jxxghp
61
src/pages/[...all].vue
Normal file
61
src/pages/[...all].vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import misc404 from '@images/pages/404.png'
|
||||
import miscMaskDark from '@images/pages/misc-mask-dark.png'
|
||||
import miscMaskLight from '@images/pages/misc-mask-light.png'
|
||||
import tree from '@images/pages/tree.png'
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const authThemeMask = computed(() => {
|
||||
return vuetifyTheme.global.name.value === 'light'
|
||||
? miscMaskLight
|
||||
: miscMaskDark
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="misc-wrapper">
|
||||
<ErrorHeader
|
||||
error-code="404"
|
||||
error-title="Page Not Found ⚠️"
|
||||
error-description="We couldn't find the page you are looking for."
|
||||
/>
|
||||
|
||||
<!-- 👉 Image -->
|
||||
<div class="misc-avatar w-100 text-center">
|
||||
<VImg
|
||||
:src="misc404"
|
||||
alt="Coming Soon"
|
||||
:max-width="800"
|
||||
class="mx-auto"
|
||||
/>
|
||||
<VBtn
|
||||
to="/"
|
||||
class="mt-10"
|
||||
>
|
||||
Back to Home
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Footer -->
|
||||
<VImg
|
||||
:src="tree"
|
||||
class="misc-footer-tree d-none d-md-block"
|
||||
/>
|
||||
|
||||
<VImg
|
||||
:src="authThemeMask"
|
||||
class="misc-footer-img d-none d-md-block"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core/scss/pages/misc.scss";
|
||||
|
||||
.misc-footer-tree {
|
||||
inline-size: 15.625rem;
|
||||
inset-block-end: 3.5rem;
|
||||
inset-inline-start: 0.375rem;
|
||||
}
|
||||
</style>
|
||||
60
src/pages/account-settings.vue
Normal file
60
src/pages/account-settings.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRoute } from 'vue-router'
|
||||
import AccountSettingsAccount from '@/views/pages/account-settings/AccountSettingsAccount.vue'
|
||||
import AccountSettingsNotification from '@/views/pages/account-settings/AccountSettingsNotification.vue'
|
||||
import AccountSettingsSecurity from '@/views/pages/account-settings/AccountSettingsSecurity.vue'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const activeTab = ref(route.params.tab)
|
||||
|
||||
// tabs
|
||||
const tabs = [
|
||||
{ title: 'Account', icon: 'mdi-account-outline', tab: 'account' },
|
||||
{ title: 'Security', icon: 'mdi-lock-open-outline', tab: 'security' },
|
||||
{ title: 'Notifications', icon: 'mdi-bell-outline', tab: 'notification' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VTabs
|
||||
v-model="activeTab"
|
||||
show-arrows
|
||||
>
|
||||
<VTab
|
||||
v-for="item in tabs"
|
||||
:key="item.icon"
|
||||
:value="item.tab"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
start
|
||||
:icon="item.icon"
|
||||
/>
|
||||
{{ item.title }}
|
||||
</VTab>
|
||||
</VTabs>
|
||||
<VDivider />
|
||||
|
||||
<VWindow
|
||||
v-model="activeTab"
|
||||
class="mt-5 disable-tab-transition"
|
||||
>
|
||||
<!-- Account -->
|
||||
<VWindowItem value="account">
|
||||
<AccountSettingsAccount />
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Security -->
|
||||
<VWindowItem value="security">
|
||||
<AccountSettingsSecurity />
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Notification -->
|
||||
<VWindowItem value="notification">
|
||||
<AccountSettingsNotification />
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</div>
|
||||
</template>
|
||||
27
src/pages/card-basic.vue
Normal file
27
src/pages/card-basic.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import CardBasic from '@/views/pages/cards/card-basic/CardBasic.vue'
|
||||
import CardNavigation from '@/views/pages/cards/card-basic/CardNavigation.vue'
|
||||
import CardSolid from '@/views/pages/cards/card-basic/CardSolid.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p class="text-2xl mb-6">
|
||||
Basic Cards
|
||||
</p>
|
||||
|
||||
<CardBasic />
|
||||
|
||||
<p class="text-2xl mb-6 mt-14">
|
||||
Navigation Cards
|
||||
</p>
|
||||
|
||||
<CardNavigation />
|
||||
|
||||
<p class="text-2xl mt-14 mb-6 ">
|
||||
Solid Cards
|
||||
</p>
|
||||
|
||||
<CardSolid />
|
||||
</div>
|
||||
</template>
|
||||
27
src/pages/cards.vue
Normal file
27
src/pages/cards.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import CardBasic from '@/views/pages/cards/card-basic/CardBasic.vue'
|
||||
import CardNavigation from '@/views/pages/cards/card-basic/CardNavigation.vue'
|
||||
import CardSolid from '@/views/pages/cards/card-basic/CardSolid.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p class="text-2xl mb-6">
|
||||
Basic Cards
|
||||
</p>
|
||||
|
||||
<CardBasic />
|
||||
|
||||
<p class="text-2xl mb-6 mt-14">
|
||||
Navigation Cards
|
||||
</p>
|
||||
|
||||
<CardNavigation />
|
||||
|
||||
<p class="text-2xl mt-14 mb-6 ">
|
||||
Solid Cards
|
||||
</p>
|
||||
|
||||
<CardSolid />
|
||||
</div>
|
||||
</template>
|
||||
115
src/pages/dashboard.vue
Normal file
115
src/pages/dashboard.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<script setup lang="ts">
|
||||
import AnalyticsAward from '@/views/dashboard/AnalyticsAward.vue';
|
||||
import AnalyticsBarCharts from '@/views/dashboard/AnalyticsBarCharts.vue';
|
||||
import AnalyticsDepositWithdraw from '@/views/dashboard/AnalyticsDepositWithdraw.vue';
|
||||
import AnalyticsSalesByCountries from '@/views/dashboard/AnalyticsSalesByCountries.vue';
|
||||
import AnalyticsTotalEarning from '@/views/dashboard/AnalyticsTotalEarning.vue';
|
||||
import AnalyticsTotalProfitLineCharts from '@/views/dashboard/AnalyticsTotalProfitLineCharts.vue';
|
||||
import AnalyticsTransactions from '@/views/dashboard/AnalyticsTransactions.vue';
|
||||
import AnalyticsUserTable from '@/views/dashboard/AnalyticsUserTable.vue';
|
||||
import AnalyticsWeeklyOverview from '@/views/dashboard/AnalyticsWeeklyOverview.vue';
|
||||
import CardStatisticsVertical from '@core/components/cards/CardStatisticsVertical.vue';
|
||||
|
||||
const totalProfit = {
|
||||
title: 'Total Profit',
|
||||
color: 'secondary',
|
||||
icon: 'mdi-poll',
|
||||
stats: '$25.6k',
|
||||
change: 42,
|
||||
subtitle: 'Weekly Project',
|
||||
}
|
||||
|
||||
const newProject = {
|
||||
title: 'New Project',
|
||||
color: 'primary',
|
||||
icon: 'mdi-briefcase-variant-outline',
|
||||
stats: '862',
|
||||
change: -18,
|
||||
subtitle: 'Yearly Project',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow class="match-height">
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<AnalyticsAward />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<AnalyticsTransactions />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<AnalyticsWeeklyOverview />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<AnalyticsTotalEarning />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<VRow class="match-height">
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AnalyticsTotalProfitLineCharts />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<CardStatisticsVertical v-bind="totalProfit" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<CardStatisticsVertical v-bind="newProject" />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AnalyticsBarCharts />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<AnalyticsSalesByCountries />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<AnalyticsDepositWithdraw />
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AnalyticsUserTable />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
66
src/pages/form-layouts.vue
Normal file
66
src/pages/form-layouts.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
import DemoFormLayoutHorizontalForm from '@/views/pages/form-layouts/DemoFormLayoutHorizontalForm.vue'
|
||||
import DemoFormLayoutHorizontalFormWithIcons from '@/views/pages/form-layouts/DemoFormLayoutHorizontalFormWithIcons.vue'
|
||||
import DemoFormLayoutMultipleColumn from '@/views/pages/form-layouts/DemoFormLayoutMultipleColumn.vue'
|
||||
import DemoFormLayoutVerticalForm from '@/views/pages/form-layouts/DemoFormLayoutVerticalForm.vue'
|
||||
import DemoFormLayoutVerticalFormWithIcons from '@/views/pages/form-layouts/DemoFormLayoutVerticalFormWithIcons.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Horizontal Form -->
|
||||
<VCard title="Horizontal Form">
|
||||
<VCardText>
|
||||
<DemoFormLayoutHorizontalForm />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Horizontal Form with Icons -->
|
||||
<VCard title="Horizontal Form with Icons">
|
||||
<VCardText>
|
||||
<DemoFormLayoutHorizontalFormWithIcons />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Vertical Form -->
|
||||
<VCard title="Vertical Form">
|
||||
<VCardText>
|
||||
<DemoFormLayoutVerticalForm />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Vertical Form with Icons -->
|
||||
<VCard title="Vertical Form with Icons">
|
||||
<VCardText>
|
||||
<DemoFormLayoutVerticalFormWithIcons />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Multiple Column -->
|
||||
<VCard title="Multiple Column">
|
||||
<VCardText>
|
||||
<DemoFormLayoutMultipleColumn />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</template>
|
||||
93
src/pages/icons.vue
Normal file
93
src/pages/icons.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<script lang="ts" setup>
|
||||
const iconsList = [
|
||||
'mdi-ab-testing',
|
||||
'mdi-abacus',
|
||||
'mdi-abjad-arabic',
|
||||
'mdi-abjad-hebrew',
|
||||
'mdi-abugida-devanagari',
|
||||
'mdi-abugida-thai',
|
||||
'mdi-access-point',
|
||||
'mdi-access-point-check',
|
||||
'mdi-access-point-minus',
|
||||
'mdi-access-point-network',
|
||||
'mdi-access-point-network-off',
|
||||
'mdi-access-point-off',
|
||||
'mdi-access-point-plus',
|
||||
'mdi-access-point-remove',
|
||||
'mdi-account-alert-outline',
|
||||
'mdi-account-arrow-left-outline',
|
||||
'mdi-account-arrow-right-outline',
|
||||
'mdi-account-box-multiple-outline',
|
||||
'mdi-account-box-outline',
|
||||
'mdi-account-cancel-outline',
|
||||
'mdi-account-cash-outline',
|
||||
'mdi-account-check-outline',
|
||||
'mdi-account-child-outline',
|
||||
'mdi-account-circle-outline',
|
||||
'mdi-account-clock-outline',
|
||||
'mdi-account-cog-outline',
|
||||
'mdi-account-details-outline',
|
||||
'mdi-alarm-light-outline',
|
||||
'mdi-alert-box-outline',
|
||||
'mdi-alert-circle-check-outline',
|
||||
'mdi-alert-decagram-outline',
|
||||
'mdi-alert-minus-outline',
|
||||
'mdi-alert-outline',
|
||||
'mdi-alert-plus-outline',
|
||||
'mdi-check-outline',
|
||||
'mdi-clipboard-outline',
|
||||
'mdi-clipboard-play-outline',
|
||||
'mdi-close-outline',
|
||||
'mdi-cloud-check-outline',
|
||||
'mdi-cloud-download-outline',
|
||||
'mdi-cog-outline',
|
||||
'mdi-compass-off-outline',
|
||||
'mdi-contactless-payment-circle-outline',
|
||||
'mdi-crown-outline',
|
||||
'mdi-delete-outline',
|
||||
'mdi-diamond-outline',
|
||||
'mdi-email-open-outline',
|
||||
'mdi-emoticon-happy-outline',
|
||||
'mdi-file-multiple-outline',
|
||||
'mdi-flask-empty-outline',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="d-flex align-center flex-wrap">
|
||||
<VCard
|
||||
v-for="icon in iconsList"
|
||||
:key="icon"
|
||||
class="mb-6 me-6"
|
||||
>
|
||||
<VCardText class="py-3 px-4">
|
||||
<VIcon
|
||||
size="30"
|
||||
:icon="icon"
|
||||
/>
|
||||
</VCardText>
|
||||
|
||||
<!-- tooltips -->
|
||||
<VTooltip
|
||||
location="top"
|
||||
activator="parent"
|
||||
>
|
||||
{{ icon }}
|
||||
</VTooltip>
|
||||
</VCard>
|
||||
</div>
|
||||
|
||||
<!-- more icons -->
|
||||
<div class="text-center">
|
||||
<VBtn
|
||||
href="https://materialdesignicons.com/"
|
||||
rel="noopener noreferrer"
|
||||
color="primary"
|
||||
target="_blank"
|
||||
>
|
||||
View All Material Design Icons
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
122
src/pages/login.vue
Normal file
122
src/pages/login.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<script setup lang="ts">
|
||||
import { useTheme } from 'vuetify'
|
||||
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
|
||||
|
||||
import logo from '@images/logo.svg?raw'
|
||||
import authV1MaskDark from '@images/pages/auth-v1-mask-dark.png'
|
||||
import authV1MaskLight from '@images/pages/auth-v1-mask-light.png'
|
||||
import authV1Tree2 from '@images/pages/auth-v1-tree-2.png'
|
||||
import authV1Tree from '@images/pages/auth-v1-tree.png'
|
||||
|
||||
const form = ref({
|
||||
email: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
})
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const authThemeMask = computed(() => {
|
||||
return vuetifyTheme.global.name.value === 'light'
|
||||
? authV1MaskLight
|
||||
: authV1MaskDark
|
||||
})
|
||||
|
||||
const isPasswordVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
||||
<VCard
|
||||
class="auth-card pa-4 pt-7"
|
||||
max-width="448"
|
||||
min-width="448"
|
||||
>
|
||||
<VCardItem class="justify-center">
|
||||
<template #prepend>
|
||||
<div class="d-flex">
|
||||
<div v-html="logo" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<VCardTitle class="font-weight-semibold text-2xl text-uppercase">
|
||||
MoviePilot
|
||||
</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="pt-2">
|
||||
<h5 class="text-h5 font-weight-semibold mb-1">
|
||||
欢迎使用 MoviePilot! 👋🏻
|
||||
</h5>
|
||||
<p class="mb-0">
|
||||
请输入用户名密码登录
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.email"
|
||||
label="用户名"
|
||||
type="email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.password"
|
||||
label="密码"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
|
||||
<!-- remember me checkbox -->
|
||||
<div class="d-flex align-center justify-space-between flex-wrap mt-1 mb-4">
|
||||
<VCheckbox
|
||||
v-model="form.remember"
|
||||
label="保持登录"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- login button -->
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
to="/"
|
||||
>
|
||||
登录
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VImg
|
||||
class="auth-footer-start-tree d-none d-md-block"
|
||||
:src="authV1Tree"
|
||||
:width="250"
|
||||
/>
|
||||
|
||||
<VImg
|
||||
:src="authV1Tree2"
|
||||
class="auth-footer-end-tree d-none d-md-block"
|
||||
:width="350"
|
||||
/>
|
||||
|
||||
<!-- bg img -->
|
||||
<VImg
|
||||
class="auth-footer-mask d-none d-md-block"
|
||||
:src="authThemeMask"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core/scss/pages/page-auth.scss";
|
||||
</style>
|
||||
167
src/pages/register.vue
Normal file
167
src/pages/register.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<script setup lang="ts">
|
||||
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
import logo from '@images/logo.svg?raw'
|
||||
import authV1MaskDark from '@images/pages/auth-v1-mask-dark.png'
|
||||
import authV1MaskLight from '@images/pages/auth-v1-mask-light.png'
|
||||
import authV1Tree2 from '@images/pages/auth-v1-tree-2.png'
|
||||
import authV1Tree from '@images/pages/auth-v1-tree.png'
|
||||
|
||||
const form = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
privacyPolicies: false,
|
||||
})
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const authThemeMask = computed(() => {
|
||||
return vuetifyTheme.global.name.value === 'light'
|
||||
? authV1MaskLight
|
||||
: authV1MaskDark
|
||||
})
|
||||
|
||||
const isPasswordVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
||||
<VCard
|
||||
class="auth-card pa-4 pt-7"
|
||||
max-width="448"
|
||||
>
|
||||
<VCardItem class="justify-center">
|
||||
<template #prepend>
|
||||
<div class="d-flex">
|
||||
<div v-html="logo" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<VCardTitle class="font-weight-semibold text-2xl text-uppercase">
|
||||
Materio
|
||||
</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="pt-2">
|
||||
<h5 class="text-h5 font-weight-semibold mb-1">
|
||||
Adventure starts here 🚀
|
||||
</h5>
|
||||
<p class="mb-0">
|
||||
Make your app management easy and fun!
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- Username -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.username"
|
||||
label="Username"
|
||||
/>
|
||||
</VCol>
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.email"
|
||||
label="Email"
|
||||
type="email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.password"
|
||||
label="Password"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
<div class="d-flex align-center mt-1 mb-4">
|
||||
<VCheckbox
|
||||
id="privacy-policy"
|
||||
v-model="form.privacyPolicies"
|
||||
inline
|
||||
/>
|
||||
<VLabel
|
||||
for="privacy-policy"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<span class="me-1">I agree to</span>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-primary"
|
||||
>privacy policy & terms</a>
|
||||
</VLabel>
|
||||
</div>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
to="/"
|
||||
>
|
||||
Sign up
|
||||
</VBtn>
|
||||
</VCol>
|
||||
|
||||
<!-- login instead -->
|
||||
<VCol
|
||||
cols="12"
|
||||
class="text-center text-base"
|
||||
>
|
||||
<span>Already have an account?</span>
|
||||
<RouterLink
|
||||
class="text-primary ms-2"
|
||||
to="login"
|
||||
>
|
||||
Sign in instead
|
||||
</RouterLink>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex align-center"
|
||||
>
|
||||
<VDivider />
|
||||
<span class="mx-4">or</span>
|
||||
<VDivider />
|
||||
</VCol>
|
||||
|
||||
<!-- auth providers -->
|
||||
<VCol
|
||||
cols="12"
|
||||
class="text-center"
|
||||
>
|
||||
<AuthProvider />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VImg
|
||||
class="auth-footer-start-tree d-none d-md-block"
|
||||
:src="authV1Tree"
|
||||
:width="250"
|
||||
/>
|
||||
|
||||
<VImg
|
||||
:src="authV1Tree2"
|
||||
class="auth-footer-end-tree d-none d-md-block"
|
||||
:width="350"
|
||||
/>
|
||||
|
||||
<!-- bg img -->
|
||||
<VImg
|
||||
class="auth-footer-mask d-none d-md-block"
|
||||
:src="authThemeMask"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core/scss/pages/page-auth.scss";
|
||||
</style>
|
||||
53
src/pages/tables.vue
Normal file
53
src/pages/tables.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import DemoSimpleTableBasics from '@/views/pages/tables/DemoSimpleTableBasics.vue'
|
||||
import DemoSimpleTableDensity from '@/views/pages/tables/DemoSimpleTableDensity.vue'
|
||||
import DemoSimpleTableFixedHeader from '@/views/pages/tables/DemoSimpleTableFixedHeader.vue'
|
||||
import DemoSimpleTableHeight from '@/views/pages/tables/DemoSimpleTableHeight.vue'
|
||||
import DemoSimpleTableTheme from '@/views/pages/tables/DemoSimpleTableTheme.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCard title="Basic">
|
||||
<DemoSimpleTableBasics />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCard title="Theme">
|
||||
<VCardText>
|
||||
use <code>theme</code> prop to switch table to the dark theme.
|
||||
</VCardText>
|
||||
<DemoSimpleTableTheme />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCard title="Density">
|
||||
<VCardText>
|
||||
You can show a dense version of the table by using the <code>density</code> prop.
|
||||
</VCardText>
|
||||
<DemoSimpleTableDensity />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCard title="Height">
|
||||
<VCardText>
|
||||
You can set the height of the table by using the <code>height</code> prop.
|
||||
</VCardText>
|
||||
<DemoSimpleTableHeight />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCard title="Fixed Header">
|
||||
<VCardText>
|
||||
You can fix the header of table by using the <code>fixed-header</code> prop.
|
||||
</VCardText>
|
||||
<DemoSimpleTableFixedHeader />
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
178
src/pages/typography.vue
Normal file
178
src/pages/typography.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCard title="Headlines">
|
||||
<VCardText class="d-flex flex-column gap-y-8">
|
||||
<div>
|
||||
<h1 class="text-h1">
|
||||
Heading 1
|
||||
</h1>
|
||||
<span>font-size: 6rem / line-height: 6rem / font-weight: 300</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-h2">
|
||||
Heading 2
|
||||
</h2>
|
||||
<span>font-size: 3.75rem / line-height: 3.75rem / font-weight: 300</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-h3">
|
||||
Heading 3
|
||||
</h3>
|
||||
<span>font-size: 3rem / line-height: 3.125rem / font-weight: 400</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="text-h4">
|
||||
Heading 4
|
||||
</h4>
|
||||
<span>font-size: 2.125rem / line-height: 2.5rem / font-weight: 400</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 class="text-h5">
|
||||
Heading 5
|
||||
</h5>
|
||||
<span>font-size: 1.5rem / line-height: 2rem / font-weight: 400</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6 class="text-h6">
|
||||
Heading 6
|
||||
</h6>
|
||||
<span>font-size: 1.25rem / line-height: 2rem / font-weight: 500</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCard title="Texts">
|
||||
<VCardText>
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-subtitle-1 text-no-wrap">text-subtitle-1</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
class="mb-6"
|
||||
>
|
||||
<p class="text-subtitle-1 text-truncate mb-1">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<span>font-size: 1rem / line-height: 1.75rem / font-weight: 400</span>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-subtitle-2 text-no-wrap">text-subtitle-2</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
class="mb-6"
|
||||
>
|
||||
<p class="text-subtitle-2 mb-1">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<span>font-size: 0.875rem / line-height: 1.375rem / font-weight: 500</span>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-body-1 text-no-wrap">text-body-1</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
class="mb-6"
|
||||
>
|
||||
<p class="text-body-1 mb-1">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<span>font-size: 1rem / line-height: 1.5rem / font-weight: 400</span>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-body-2 text-no-wrap">text-body-2</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
class="mb-6"
|
||||
>
|
||||
<p class="text-body-2 mb-1">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<span>font-size: 0.875rem / line-height: 1.25rem / font-weight: 400</span>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-caption">text-caption</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
class="mb-6"
|
||||
>
|
||||
<p class="text-caption mb-1">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<span>font-size: 0.75rem / line-height: 1.25rem / font-weight: 400</span>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-overline text-no-wrap">text-overline</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
class="mb-6"
|
||||
>
|
||||
<p class="text-overline mb-1">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<span>font-size: 0.75rem / line-height: 2rem / font-weight: 500</span>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="2"
|
||||
>
|
||||
<span class="text-button">text-button</span>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
class="mb-6"
|
||||
>
|
||||
<p class="text-button mb-1">
|
||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
||||
</p>
|
||||
<span>font-size: 0.875rem / line-height: 2.25rem / font-weight: 500</span>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
Reference in New Issue
Block a user