zhangjiming
5 months ago
11 changed files with 340 additions and 31 deletions
-
185package-lock.json
-
1package.json
-
1src/App.vue
-
BINsrc/assets/bg.jpg
-
1src/assets/icon_logo.svg
-
1src/assets/icon_pwd.svg
-
1src/assets/icon_user.svg
-
3src/main.ts
-
74src/router/index.ts
-
9src/views/Index.vue
-
95src/views/Login.vue
|
After Width: 3211 | Height: 1855 | Size: 125 KiB |
1
src/assets/icon_logo.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1 @@ |
|||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="39" height="47" viewBox="0 0 39 47"><defs><linearGradient x1="0.08627337217330933" y1="1" x2="1.0173453092575073" y2="1" id="master_svg0_38_4269"><stop offset="17.200195789337158%" stop-color="#0657C0" stop-opacity="1"/><stop offset="100%" stop-color="#096AE0" stop-opacity="1"/></linearGradient></defs><g><path d="M35.5405,20.2107C35.1423,20.2107,32.9024,20.2358,32.4793,20.2358L32.4793,13.132C32.4793,5.25279,27.4269,0.025013,19.5373,0C11.6477,0,6.49585,5.50293,6.49585,13.132L6.49585,20.1607C6.22208,20.1607,3.35992,20.1857,3.11104,20.1857C1.21953,20.1857,0,21.8116,0,23.5625L0,43.5482C0,45.5242,1.04531,47,3.06126,47L35.6401,47C37.208,47,39,45.5742,39,42.9979L39,24.0128C39,22.0617,38.3529,20.2107,35.5405,20.2107ZM23.843,38.1453C23.843,40.6216,21.9017,42.6227,19.5124,42.6227C17.1232,42.6227,15.1819,40.6216,15.1819,38.1453L15.1819,38.0703C15.1819,36.4194,16.053,34.9686,17.3472,34.1932L17.3472,25.9388C17.3472,24.7632,18.268,24.6381,19.4129,24.6381C20.5578,24.6381,21.6777,24.7632,21.6777,25.9388L21.6777,34.1932C22.9719,34.9686,23.843,36.4194,23.843,38.0703L23.843,38.1453ZM28.1985,20.1607L10.8513,20.1607L10.8513,11.1559C10.8513,6.82863,15.6548,4.47738,19.2636,4.47738L20.06,4.47738C23.6688,4.47738,28.1985,6.65354,28.1985,11.1559L28.1985,20.1607Z" fill="url(#master_svg0_38_4269)" fill-opacity="1"/></g></svg> |
||||
@ -0,0 +1 @@ |
|||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="44" height="44" viewBox="0 0 44 44"><defs><linearGradient x1="0.08627337217330933" y1="1" x2="1.0173453092575073" y2="1" id="master_svg0_38_4269"><stop offset="17.200195789337158%" stop-color="#0657C0" stop-opacity="1"/><stop offset="100%" stop-color="#096AE0" stop-opacity="1"/></linearGradient></defs><g><path d="M44,42.1755C44,33.2115,37.6644,25.5962,28.9173,22.9149C32.3178,20.6779,34.5707,16.849,34.5707,12.5019C34.5707,5.60577,28.9332,0,22,0C15.0668,0,9.42933,5.60577,9.42933,12.4966C9.42933,16.8438,11.6822,20.6726,15.0827,22.9096C6.33558,25.5962,0,33.2062,0,42.1755L0,44L44,44L44,42.2019L44,42.1755Z" fill="url(#master_svg0_38_4269)" fill-opacity="1"/></g></svg> |
||||
@ -1,33 +1,47 @@ |
|||||
import { createRouter, createWebHistory } from 'vue-router' |
|
||||
import HomeView from '../views/HomeView.vue' |
|
||||
|
import { createRouter, createWebHistory } from "vue-router"; |
||||
|
import HomeView from "../views/HomeView.vue"; |
||||
|
import Login from "@/views/Login.vue"; |
||||
|
import Index from "@/views/Index.vue"; |
||||
|
import EnvironmentView from "../views/EnvironmentView.vue"; |
||||
|
import SprayView from "../views/SprayView.vue"; |
||||
|
import PrintView from "../views/PrintView.vue"; |
||||
|
|
||||
const router = createRouter({ |
const router = createRouter({ |
||||
history: createWebHistory(import.meta.env.BASE_URL), |
|
||||
routes: [ |
|
||||
{ |
|
||||
path: '/', |
|
||||
name: 'home', |
|
||||
component: HomeView, |
|
||||
}, |
|
||||
{ |
|
||||
path: '/environment', |
|
||||
name: 'environment', |
|
||||
// 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/EnvironmentView.vue'), |
|
||||
}, |
|
||||
{ |
|
||||
path: '/spray', |
|
||||
name: 'spray', |
|
||||
component: () => import('../views/SprayView.vue'), |
|
||||
}, |
|
||||
{ |
|
||||
path: '/print', |
|
||||
name: 'print', |
|
||||
component: () => import('../views/PrintView.vue'), |
|
||||
} |
|
||||
], |
|
||||
}) |
|
||||
|
history: createWebHistory(import.meta.env.BASE_URL), |
||||
|
routes: [ |
||||
|
{ |
||||
|
path: "/", |
||||
|
component: Index, |
||||
|
redirect: "/home", |
||||
|
children: [ |
||||
|
{ |
||||
|
path: "/home", |
||||
|
name: "home", |
||||
|
component: HomeView, |
||||
|
}, |
||||
|
{ |
||||
|
path: "/environment", |
||||
|
name: "environment", |
||||
|
component: EnvironmentView, |
||||
|
}, |
||||
|
{ |
||||
|
path: "/spray", |
||||
|
name: "spray", |
||||
|
component: SprayView, |
||||
|
}, |
||||
|
{ |
||||
|
path: "/print", |
||||
|
name: "print", |
||||
|
component: PrintView, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
path: "/login", |
||||
|
name: "login", |
||||
|
component: Login, |
||||
|
}, |
||||
|
], |
||||
|
}); |
||||
|
|
||||
export default router |
|
||||
|
export default router; |
||||
@ -0,0 +1,9 @@ |
|||||
|
<template> |
||||
|
<HeaderBar /> |
||||
|
<RouterView /> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { RouterLink, RouterView } from "vue-router"; |
||||
|
import HeaderBar from "@/components/HeaderBar.vue"; |
||||
|
</script> |
||||
@ -0,0 +1,95 @@ |
|||||
|
<template> |
||||
|
<div class="relative bg-[url(@/assets/bg.jpg)] bg-cover h-[100vh]"> |
||||
|
<figure |
||||
|
class="absolute w-[480px] top-1/2 -translate-y-1/2 right-12 rounded-xl" |
||||
|
style=" |
||||
|
background: linear-gradient(180deg, rgba(250, 252, 255, 0.51) 0%, rgba(255, 255, 255, 0.52) 100%); |
||||
|
backdrop-filter: blur(92px); |
||||
|
"> |
||||
|
<div class="flex flex-col justify-center items-center px-[60px] pt-10 pb-4"> |
||||
|
<img :src="logo" class="h-[30px]" alt="" /> |
||||
|
<el-form :model="form" :rules="rules" ref="formRef" style="width: 100%"> |
||||
|
<div class="text-xl text-primary mb-6 mt-[38px]">用户名</div> |
||||
|
<el-form-item prop="username"> |
||||
|
<el-input |
||||
|
v-model="form.username" |
||||
|
placeholder="请输入用户名" |
||||
|
prefix-icon="userIconSvg" |
||||
|
style="width: 100%; height: 60px; font-size: 22px" |
||||
|
size="large"> |
||||
|
<template #prefix> |
||||
|
<img :src="userIconSvg" alt="" class="w-[19px]" /> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<div class="text-xl text-primary mb-6">密码</div> |
||||
|
<el-form-item prop="password"> |
||||
|
<el-input |
||||
|
v-model="form.password" |
||||
|
placeholder="请输入密码" |
||||
|
prefix-icon="pwdIconSvg" |
||||
|
type="password" |
||||
|
style="width: 100%; height: 60px; font-size: 22px" |
||||
|
size="large"> |
||||
|
<template #prefix> |
||||
|
<img :src="pwdIconSvg" alt="" class="w-[19px]" /> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
style=" |
||||
|
width: 100%; |
||||
|
margin-top: 24px; |
||||
|
height: 60px; |
||||
|
font-size: 24px; |
||||
|
border-radius: 6px; |
||||
|
background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%); |
||||
|
" |
||||
|
type="primary" |
||||
|
@click="loginHandle" |
||||
|
:loading="loading" |
||||
|
native-type="submit" |
||||
|
>登录</el-button |
||||
|
> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<span class="text-[#8799AA] mt-6">TRYSMET(BEJING) TECHNOLOGY CO.,LTD.</span> |
||||
|
</div> |
||||
|
</figure> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import logo from "@/assets/icon_logo.svg"; |
||||
|
import userIconSvg from "@/assets/icon_user.svg"; |
||||
|
import pwdIconSvg from "@/assets/icon_pwd.svg"; |
||||
|
import { ref } from "vue"; |
||||
|
import { useRouter } from "vue-router"; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
|
||||
|
const form = ref({ |
||||
|
username: "", |
||||
|
password: "", |
||||
|
}); |
||||
|
|
||||
|
const formRef = ref(); |
||||
|
|
||||
|
const rules = { |
||||
|
username: [ |
||||
|
{ required: true, message: "请输入用户名", trigger: "blur" }, |
||||
|
{ min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }, |
||||
|
], |
||||
|
password: [ |
||||
|
{ required: true, message: "请输入密码", trigger: "blur" }, |
||||
|
{ min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }, |
||||
|
], |
||||
|
}; |
||||
|
const loading = ref(false); |
||||
|
|
||||
|
function loginHandle() { |
||||
|
router.push("/home"); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped></style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue