移植成js版本
This commit is contained in:
@@ -1,85 +1,20 @@
|
||||
<script setup>
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
import HeardMain from './components/HeardMain.vue';
|
||||
import FooterMain from './components/FooterMain.vue';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
|
||||
|
||||
<div class="wrapper">
|
||||
<HelloWorld msg="You did it!" />
|
||||
<div class="page">
|
||||
|
||||
<nav>
|
||||
<RouterLink to="/">Home</RouterLink>
|
||||
<RouterLink to="/about">About</RouterLink>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<HeardMain />
|
||||
|
||||
<RouterView />
|
||||
|
||||
<FooterMain />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
line-height: 1.5;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
padding: 0 1rem;
|
||||
border-left: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
nav a:first-of-type {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-right: calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
display: flex;
|
||||
place-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: left;
|
||||
margin-left: -1rem;
|
||||
font-size: 1rem;
|
||||
|
||||
padding: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@@ -1,35 +1,3 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
html, body, #app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
<template>
|
||||
<footer class="footer footer-transparent d-print-none">
|
||||
<div class="container-xl">
|
||||
<div class="row text-center align-items-center flex-row-reverse">
|
||||
<div class="col-lg-auto ms-lg-auto">
|
||||
<ul class="list-inline list-inline-dots mb-0">
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="https://git.lmve.net/kevin/ops2/-/blob/main/readme.md?ref_type=heads"
|
||||
target="_blank"
|
||||
class="link-secondary"
|
||||
rel="noopener"
|
||||
>{{t('footer.doc')}}</a
|
||||
>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="https://git.lmve.net/kevin/ops2/-/blob/main/LICENSE?ref_type=heads"
|
||||
target="_blank"
|
||||
class="link-secondary"
|
||||
>{{t('footer.license')}}</a
|
||||
>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="https://git.lmve.net/kevin/ops2"
|
||||
target="_blank"
|
||||
class="link-secondary"
|
||||
rel="noopener"
|
||||
>{{t('footer.source_code')}}</a
|
||||
>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="https://github.com/wuwenfengmi1998"
|
||||
target="_blank"
|
||||
class="link-secondary"
|
||||
rel="noopener"
|
||||
>
|
||||
|
||||
kevin
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
|
||||
<ul class="list-inline list-inline-dots mb-0">
|
||||
<li class="list-inline-item">
|
||||
{{ t('footer.copy')}}
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="https://git.lmve.net/kevin/ops2/-/commits/main"
|
||||
target="_blank"
|
||||
class="link-secondary"
|
||||
rel="noopener"
|
||||
>
|
||||
v0.0.1
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
@@ -0,0 +1,237 @@
|
||||
<script setup>
|
||||
|
||||
import { RouterLink} from 'vue-router'
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { myfuncs } from '@/myfunc.js'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
// 使用 vue-i18n 的 Composition API
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
const theTeme = ref('light')
|
||||
const lang_sele = ref(null)
|
||||
|
||||
const isLogin = false
|
||||
|
||||
function set_them(temp) {
|
||||
theTeme.value = temp
|
||||
myfuncs.setTheme(temp, true)
|
||||
}
|
||||
|
||||
function changeLanguage(lang) {
|
||||
// 切换语言
|
||||
const selectElement = lang.target
|
||||
const selectedLang = selectElement.value
|
||||
locale.value = selectedLang
|
||||
myfuncs.save('userLanguage', selectedLang)
|
||||
//console.log("selectedLang:",selectedLang);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const savedTheme = myfuncs.getThemefromStorge()
|
||||
theTeme.value = savedTheme
|
||||
myfuncs.setTheme(savedTheme, false)
|
||||
const userLang = myfuncs.load('userLanguage')
|
||||
if (userLang) {
|
||||
locale.value = userLang
|
||||
if (lang_sele.value) {
|
||||
;(lang_sele.value).value = userLang
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="navbar navbar-expand-md d-print-none">
|
||||
<div class="container-xl">
|
||||
<!-- BEGIN NAVBAR TOGGLER -->
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbar-menu"
|
||||
aria-controls="navbar-menu"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<!-- END NAVBAR TOGGLER -->
|
||||
<!-- BEGIN NAVBAR LOGO -->
|
||||
<div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
|
||||
<router-link to="/" aria-label="Tabler">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="110"
|
||||
height="32"
|
||||
viewBox="0 0 232 68"
|
||||
class="navbar-brand-image"
|
||||
>
|
||||
<path
|
||||
d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z"
|
||||
fill="#066fd1"
|
||||
style="fill: var(--tblr-primary, #066fd1)"
|
||||
/>
|
||||
<path
|
||||
d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fill="#4a4a4a"
|
||||
/>
|
||||
</svg>
|
||||
</router-link>
|
||||
</div>
|
||||
<!-- END NAVBAR LOGO -->
|
||||
<div class="navbar-nav flex-row order-md-last">
|
||||
<div class="nav-item">
|
||||
<a
|
||||
@click="set_them('dark')"
|
||||
class="nav-link px-0"
|
||||
:class="{ 'd-none': theTeme === 'dark' }"
|
||||
:title="t('message.dark_mode')"
|
||||
>
|
||||
<!-- Download SVG icon from http://tabler.io/icons/icon/moon -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-1"
|
||||
>
|
||||
<path
|
||||
d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
@click="set_them('light')"
|
||||
class="nav-link px-0"
|
||||
:class="{ 'd-none': theTeme === 'light' }"
|
||||
:title="t('message.light_mode')"
|
||||
>
|
||||
<!-- Download SVG icon from http://tabler.io/icons/icon/sun -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-1"
|
||||
>
|
||||
<path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
|
||||
<path
|
||||
d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<!-- 这里判断是否已经登陆 是则显示用户信息 否则显示登陆按钮 -->
|
||||
<div v-if="!isLogin" class="nav-item">
|
||||
<router-link to="login" class="btn btn-outline-primary" >
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
|
||||
<path d="M6 21v-2a4 4 0 0 1 4 -4h4"></path>
|
||||
<path d="M19 22v-6"></path>
|
||||
<path d="M22 19l-3 -3l-3 3"></path>
|
||||
</svg>
|
||||
{{ t('message.login_or_register') }}
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div v-if="isLogin" class="nav-item dropdown">
|
||||
<a
|
||||
href="#"
|
||||
class="nav-link d-flex lh-1 p-0 px-2"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Open user menu"
|
||||
>
|
||||
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)">
|
||||
</span>
|
||||
<div class="d-none d-xl-block ps-2">
|
||||
<div>Paweł Kuna</div>
|
||||
<div class="mt-1 small text-secondary">UI Designer</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
|
||||
<a href="#" class="dropdown-item">Status</a>
|
||||
<a href="./profile.html" class="dropdown-item">Profile</a>
|
||||
<a href="#" class="dropdown-item">Feedback</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="./settings.html" class="dropdown-item">Settings</a>
|
||||
<a href="./sign-in.html" class="dropdown-item">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<header class="navbar-expand-md">
|
||||
<div class="collapse navbar-collapse" id="navbar-menu">
|
||||
<div class="navbar">
|
||||
<div class="container-xl">
|
||||
<div class="row flex-column flex-md-row flex-fill align-items-center">
|
||||
<div class="col d-flex">
|
||||
<!-- BEGIN NAVBAR MENU -->
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<router-link to="/" class="nav-link">
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"
|
||||
><!-- Download SVG icon from http://tabler.io/icons/icon/home -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-1"
|
||||
>
|
||||
<path d="M5 12l-2 0l9 -9l9 9l-2 0" />
|
||||
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
|
||||
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg
|
||||
></span>
|
||||
<span class="nav-link-title"> {{ t('appname.home') }} </span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="ms-auto">
|
||||
<select class="form-select" @change="changeLanguage" ref="lang_sele">
|
||||
<option value="en">English</option>
|
||||
<option value="zh-CN">中文</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,44 +1,11 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
msg: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="greetings">
|
||||
<h1 class="green">{{ msg }}</h1>
|
||||
<h3>
|
||||
You’ve successfully created a project with
|
||||
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
|
||||
</h3>
|
||||
111
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 2.6rem;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { Offcanvas } from 'bootstrap'
|
||||
|
||||
const offcanvasTop = ref(null)
|
||||
let ov
|
||||
const alertType=ref() // 可选值：'success', 'warning', 'danger', 'info'
|
||||
const alertText=ref()
|
||||
let autoCloseTimeout
|
||||
onMounted(() => {
|
||||
// 确保在组件挂载后初始化
|
||||
if (offcanvasTop.value) {
|
||||
ov = new Offcanvas(offcanvasTop.value,{
|
||||
backdrop: false,
|
||||
})
|
||||
//ov.show();
|
||||
//console.log('Offcanvas initialized:', ov)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function showAlert(type, text,timeout=5000) {
|
||||
alertText.value = text;
|
||||
|
||||
alertType.value = type;
|
||||
//console.log(ov);
|
||||
if (ov) {
|
||||
ov.hide();
|
||||
ov.show();
|
||||
if(autoCloseTimeout)
|
||||
{
|
||||
clearTimeout(autoCloseTimeout);
|
||||
}
|
||||
autoCloseTimeout=setTimeout(() => {
|
||||
//console.log("timeout");
|
||||
ov.hide();
|
||||
}, timeout);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
showAlert
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my_offcanvas_top {
|
||||
position: fixed;
|
||||
|
||||
height: 45px;
|
||||
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
|
||||
max-height: 100%;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="offcanvas alert alert-important alert-dismissible my_offcanvas_top"
|
||||
:class="{
|
||||
'alert-success': alertType === 'success',
|
||||
'alert-warning': alertType === 'warning',
|
||||
'alert-danger': alertType === 'danger',
|
||||
'alert-info': alertType === 'info',
|
||||
}"
|
||||
role="alert"
|
||||
tabindex="-1"
|
||||
ref="offcanvasTop"
|
||||
>
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
<!-- Download SVG icon from http://tabler-icons.io/i/check -->
|
||||
<svg
|
||||
v-if="alertType === 'success'"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon alert-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M5 12l5 5l10 -10"></path>
|
||||
</svg>
|
||||
<svg
|
||||
v-if="alertType === 'warning'"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon alert-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path
|
||||
d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z"
|
||||
></path>
|
||||
<path d="M12 9v4"></path>
|
||||
<path d="M12 17h.01"></path>
|
||||
</svg>
|
||||
<svg
|
||||
v-if="alertType === 'danger'"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon alert-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
|
||||
<path d="M12 8v4"></path>
|
||||
<path d="M12 16h.01"></path>
|
||||
</svg>
|
||||
<svg
|
||||
v-if="alertType === 'info'"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-tabler icons-tabler-outline icon-tabler-brand-hipchat"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M17.802 17.292s.077 -.055 .2 -.149c1.843 -1.425 3 -3.49 3 -5.789c0 -4.286 -4.03 -7.764 -9 -7.764c-4.97 0 -9 3.478 -9 7.764c0 4.288 4.03 7.646 9 7.646c.424 0 1.12 -.028 2.088 -.084c1.262 .82 3.104 1.493 4.716 1.493c.499 0 .734 -.41 .414 -.828c-.486 -.596 -1.156 -1.551 -1.416 -2.29z"
|
||||
/>
|
||||
<path d="M7.5 13.5c2.5 2.5 6.5 2.5 9 0" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
{{ alertText }}
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn-close" data-bs-dismiss="offcanvas" aria-label="close"></a>
|
||||
</div>
|
||||
|
||||
<!-- <div>
|
||||
<button @click="showAlert('success','success')">success</button>
|
||||
<button @click="showAlert('warning','warning')">warning</button>
|
||||
<button @click="showAlert('danger','danger')">danger</button>
|
||||
<button @click="showAlert('info','info')">info</button>
|
||||
</div> -->
|
||||
</template>
|
||||
@@ -0,0 +1,48 @@
|
||||
{
|
||||
"appname": {
|
||||
"home": "Home",
|
||||
"login": "Login",
|
||||
"forgot_password":"Forgot Password",
|
||||
"register":"Register"
|
||||
},
|
||||
"message": {
|
||||
"hello": "Hello",
|
||||
"welcome": "Welcome",
|
||||
"dark_mode":"Enable dark mode",
|
||||
"light_mode":"Enable light mode",
|
||||
"login_or_register":"Login/Register",
|
||||
"login_to_your_account":"Login to your account",
|
||||
"your_email_address":"Your email address",
|
||||
"email_address":"Email address",
|
||||
"user_name":"User name",
|
||||
"your_user_name":"Your user name",
|
||||
"password":"Password",
|
||||
"your_password":"Your password",
|
||||
"i_forgot_password":"I forgot my password",
|
||||
"remember_me_on_this_device":"Remember me on this device",
|
||||
"dont_have_account_yet":"Don't have an account yet?",
|
||||
"register_now":"Register now",
|
||||
"show_password":"Show password",
|
||||
"hidden_Password":"Hidden Password",
|
||||
"please_enter_username_and_password":"Please enter username and password",
|
||||
"forgot_password":"Forgot Password",
|
||||
"enter_your_email_to_reset_password":"Enter your email address and your password will be reset and emailed to you.",
|
||||
"back_to_login":"Back to login",
|
||||
"please_enter_your_email":"Please enter your email",
|
||||
"this_not_email":"This is not an email address.",
|
||||
"create_new_account":"Create new account",
|
||||
"already_have_an_account":"Already have an account?"
|
||||
},
|
||||
"button": {
|
||||
"submit": "Submit",
|
||||
"cancel": "Cancel",
|
||||
"sign_in":"Sign In",
|
||||
"send_me_new_password":"Send me new password"
|
||||
},
|
||||
"footer":{
|
||||
"doc":"Documentation",
|
||||
"license":"License",
|
||||
"source_code":"Source Code",
|
||||
"copy":"Copyright © 2025 Operations. All rights reserved."
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
{
|
||||
"appname": {
|
||||
"home": "主页",
|
||||
"login": "登录",
|
||||
"forgot_password": "忘记密码",
|
||||
"register": "注册"
|
||||
},
|
||||
"message": {
|
||||
"hello": "你好",
|
||||
"welcome": "欢迎",
|
||||
"dark_mode": "深色模式",
|
||||
"light_mode": "亮色模式",
|
||||
"login_or_register": "登录/注册",
|
||||
"login_to_your_account": "登录到您的账户",
|
||||
"your_email_address": "您的邮箱地址",
|
||||
"email_address": "邮箱地址",
|
||||
"user_name": "用户名",
|
||||
"your_user_name": "您的用户名",
|
||||
"password": "密码",
|
||||
"your_password": "您的密码",
|
||||
"i_forgot_password": "我忘记了密码",
|
||||
"remember_me_on_this_device": "记住我在这台设备上",
|
||||
"dont_have_account_yet": "还没有账户？",
|
||||
"register_now": "立即注册",
|
||||
"show_password": "显示密码",
|
||||
"hidden_Password": "隐藏密码",
|
||||
"please_enter_username_and_password": "请输入用户名和密码",
|
||||
"forgot_password": "忘记密码",
|
||||
"enter_your_email_to_reset_password": "输入您的邮箱地址，您的密码将被重置并通过邮件发送给您。",
|
||||
"back_to_login": "返回登录",
|
||||
"please_enter_your_email": "请输入您的邮箱",
|
||||
"this_not_email": "这不是一个有效的邮箱地址。",
|
||||
"create_new_account":"创建新账户",
|
||||
"already_have_an_account":"已经有账户了？"
|
||||
},
|
||||
"button": {
|
||||
"submit": "提交",
|
||||
"cancel": "取消",
|
||||
"sign_in": "登录",
|
||||
"send_me_new_password": "发送新密码"
|
||||
},
|
||||
"footer": {
|
||||
"doc": "文档",
|
||||
"license": "协议",
|
||||
"source_code": "源码",
|
||||
"copy": "版权 © 2025 Operations. 保留所有权利。"
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,29 @@
|
||||
import './assets/main.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
import '@tabler/core/dist/css/tabler.min.css'
|
||||
import '@tabler/core/dist/css/tabler-vendors.min.css'
|
||||
import '@tabler/core/dist/js/tabler.min.js'
|
||||
|
||||
import en from './i18n/en.json'
|
||||
import zhCN from './i18n/zh-CN.json'
|
||||
|
||||
const i18n = createI18n({
|
||||
legacy: false, // 使用 Composition API 模式
|
||||
locale: 'en',
|
||||
fallbackLocale: 'en',
|
||||
messages: {
|
||||
en,
|
||||
'zh-CN': zhCN
|
||||
}
|
||||
})
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(router)
|
||||
|
||||
app.use(i18n)
|
||||
app.mount('#app')
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
|
||||
export const myfuncs = {
|
||||
|
||||
themeStorageKey:"tablerTheme",
|
||||
defaultTheme:"light",
|
||||
|
||||
test(){
|
||||
console.log("myfuncs test ok");
|
||||
},
|
||||
|
||||
save(key,data){
|
||||
localStorage.setItem(key, data)
|
||||
},
|
||||
load(key){
|
||||
return localStorage.getItem(key)
|
||||
},
|
||||
dele(key){
|
||||
localStorage.removeItem(key)
|
||||
},
|
||||
|
||||
save_json(key,data){
|
||||
this.save(key,JSON.stringify(data))
|
||||
},
|
||||
|
||||
load_json(key){
|
||||
const js_data=this.load(key)
|
||||
if(js_data){
|
||||
return JSON.parse(js_data)
|
||||
}else{
|
||||
return null
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
getThemefromStorge() {
|
||||
const storedTheme = this.load(this.themeStorageKey);
|
||||
return storedTheme ? storedTheme : this.defaultTheme;
|
||||
},
|
||||
|
||||
setTheme(selectedTheme,save) {
|
||||
if(save){
|
||||
this.save(this.themeStorageKey, selectedTheme); // 保存到本地存储
|
||||
}
|
||||
if (selectedTheme === 'dark') {
|
||||
document.body.setAttribute("data-bs-theme", selectedTheme); // 暗色模式
|
||||
} else {
|
||||
document.body.removeAttribute("data-bs-theme"); // 亮色模式（移除属性）
|
||||
}
|
||||
},
|
||||
|
||||
isValidEmail(email) {
|
||||
// 定义邮箱的正则表达式
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
// 使用正则表达式测试邮箱
|
||||
return emailRegex.test(email);
|
||||
}
|
||||
}
|
||||
@@ -1,23 +1,38 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import HomeView from "../views/HomeView.vue";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
path: "/",
|
||||
name: "home",
|
||||
component: HomeView,
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
path: "/about",
|
||||
name: "about",
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (About.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/AboutView.vue'),
|
||||
component: () => import("../views/AboutView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
name: "login",
|
||||
component: () => import("../views/loginView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/forgot_password",
|
||||
name: "forgot password",
|
||||
component: () => import("../views/forgotPassword.vue"),
|
||||
},
|
||||
{
|
||||
path: "/register",
|
||||
name: "Register",
|
||||
component: () => import("../views/registerView.vue"),
|
||||
},
|
||||
],
|
||||
})
|
||||
});
|
||||
|
||||
export default router
|
||||
export default router;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<script setup>
|
||||
import TheWelcome from '../components/TheWelcome.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<TheWelcome />
|
||||
111
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
<template>
|
||||
|
||||
|
||||
</template>
|
||||
@@ -0,0 +1,195 @@
|
||||
<script setup>
|
||||
import { onMounted, watch, ref } from "vue";
|
||||
import MyOffcanvas from "@/components/MyOffcanvas.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
// 使用 vue-i18n 的 Composition API
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const mos = ref();
|
||||
|
||||
const username = ref();
|
||||
const password = ref();
|
||||
const isRemember = ref();
|
||||
|
||||
const isShowPassword = ref(false);
|
||||
function togglePasswordVisibility() {
|
||||
isShowPassword.value = !isShowPassword.value;
|
||||
}
|
||||
|
||||
function login() {
|
||||
// 在这里处理登录逻辑
|
||||
|
||||
const user = username.value?.value;
|
||||
const pass = password.value?.value;
|
||||
const remember = isRemember.value?.checked;
|
||||
|
||||
username.value?.classList.remove("is-invalid");
|
||||
password.value?.classList.remove("is-invalid");
|
||||
|
||||
if (!user || !pass) {
|
||||
if (!user) {
|
||||
username.value?.classList.add("is-invalid");
|
||||
}
|
||||
if (!pass) {
|
||||
password.value?.classList.add("is-invalid");
|
||||
}
|
||||
|
||||
mos.value?.showAlert(
|
||||
"info",
|
||||
t("message.please_enter_username_and_password"),
|
||||
5000
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("登录信息:", { user, pass, remember });
|
||||
}
|
||||
|
||||
function functionupdataTitle() {
|
||||
document.title = "Operations." + t("appname.login");
|
||||
}
|
||||
onMounted(() => {
|
||||
functionupdataTitle();
|
||||
});
|
||||
// 监听语言变化，更新标题
|
||||
watch(locale, () => {
|
||||
functionupdataTitle();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page page-center">
|
||||
<div class="container container-normal py-6">
|
||||
<div class="row align-items-center g-4">
|
||||
<div class="col-lg">
|
||||
<div class="container-tight">
|
||||
<div class="card card-md">
|
||||
<div class="card-body">
|
||||
<h2 class="h2 text-center mb-4">
|
||||
{{ t("message.login_to_your_account") }}
|
||||
</h2>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">{{ t("message.user_name") }}</label>
|
||||
<input
|
||||
ref="username"
|
||||
type="text"
|
||||
class="form-control"
|
||||
:placeholder="t('message.your_user_name')"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">
|
||||
{{ t("message.password") }}
|
||||
<span class="form-label-description">
|
||||
<router-link to="/forgot_password">{{
|
||||
t("message.i_forgot_password")
|
||||
}}</router-link>
|
||||
</span>
|
||||
</label>
|
||||
<div class="input-group input-group-flat">
|
||||
<input
|
||||
ref="password"
|
||||
:type="isShowPassword ? 'text' : 'password'"
|
||||
class="form-control"
|
||||
:placeholder="t('message.your_password')"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<span class="input-group-text">
|
||||
<div
|
||||
class="link-secondary"
|
||||
:title="
|
||||
isShowPassword
|
||||
? t('message.hidden_Password')
|
||||
: t('message.show_password')
|
||||
"
|
||||
data-bs-toggle="tooltip"
|
||||
>
|
||||
<!-- Download SVG icon from http://tabler-icons.io/i/eye -->
|
||||
<svg
|
||||
v-if="!isShowPassword"
|
||||
@click="togglePasswordVisibility"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
|
||||
<path
|
||||
d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
v-if="isShowPassword"
|
||||
@click="togglePasswordVisibility"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
|
||||
<path
|
||||
d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"
|
||||
/>
|
||||
<path d="M3 3l18 18" />
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-check">
|
||||
<input
|
||||
ref="isRemember"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
/>
|
||||
<span class="form-check-label">{{
|
||||
t("message.remember_me_on_this_device")
|
||||
}}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-footer">
|
||||
<button @click="login" class="btn btn-primary w-100">
|
||||
{{ t("button.sign_in") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center text-secondary mt-3">
|
||||
{{ t("message.dont_have_account_yet") }}
|
||||
<router-link to="/register">{{
|
||||
t("message.register_now")
|
||||
}}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg d-none d-lg-block">
|
||||
<img
|
||||
src="/static/illustrations/undraw_secure_login_pdn4.svg"
|
||||
height="300"
|
||||
class="d-block mx-auto"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MyOffcanvas ref="mos" />
|
||||
</template>
|
||||
@@ -0,0 +1,4 @@
|
||||
<template>
|
||||
|
||||
|
||||
</template>
|
||||
Reference in New Issue
Block a user