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({ |
|||
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