Initial version
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
# Vue 3 + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="drak">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>营房数据</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"name": "demo",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"echarts": "^5.4.2",
|
||||
"element-plus": "^2.3.4",
|
||||
"js-base64": "^3.7.5",
|
||||
"three": "^0.152.2",
|
||||
"three-css2drender": "^1.0.0",
|
||||
"three-obj-loader": "^1.1.3",
|
||||
"three-obj-mtl-loader": "^1.0.3",
|
||||
"three-orbit-controls": "^82.1.0",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.2.1",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^11.1.0",
|
||||
"vite": "^4.3.5"
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
|
@ -0,0 +1,47 @@
|
|||
# 3ds Max Wavefront OBJ Exporter v0.99 - (c)2007 guruware
|
||||
# File Created: 12.05.2023 09:50:30
|
||||
|
||||
newmtl Tech_Stripe_0a
|
||||
Kd 0.5000 0.5000 0.5000
|
||||
Ks 1.0000 1.0000 1.0000
|
||||
Tr 0.0000
|
||||
d 1.0000
|
||||
Tf 1.0000 1.0000 1.0000
|
||||
Pr 0.0000
|
||||
Pm 0.0000
|
||||
Pc 0.0000
|
||||
Pcr 0.0000
|
||||
Ni 1.5200
|
||||
Ke 0.0000 0.0000 0.0000
|
||||
illum 2
|
||||
map_Kd Tech_Stripe_0a_gray.jpg
|
||||
|
||||
newmtl wire_214229166
|
||||
Ns 32
|
||||
d 1
|
||||
Tr 0
|
||||
Tf 1 1 1
|
||||
illum 2
|
||||
Ka 0.8392 0.8980 0.6510
|
||||
Kd 0.8392 0.8980 0.6510
|
||||
Ks 0.3500 0.3500 0.3500
|
||||
|
||||
newmtl wire_006135058
|
||||
Ns 32
|
||||
d 1
|
||||
Tr 0
|
||||
Tf 1 1 1
|
||||
illum 2
|
||||
Ka 0.0235 0.5294 0.2275
|
||||
Kd 0.0235 0.5294 0.2275
|
||||
Ks 0.3500 0.3500 0.3500
|
||||
|
||||
newmtl wire_138008110
|
||||
Ns 32
|
||||
d 1
|
||||
Tr 0
|
||||
Tf 1 1 1
|
||||
illum 2
|
||||
Ka 0.5412 0.0314 0.4314
|
||||
Kd 0.5412 0.0314 0.4314
|
||||
Ks 0.3500 0.3500 0.3500
|
||||
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,111 @@
|
|||
<script setup>
|
||||
import { ref, reactive ,onMounted} from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import * as THREE from 'three'
|
||||
// 创建场景、相机和渲染器
|
||||
|
||||
onMounted(()=>{
|
||||
// animate()
|
||||
})
|
||||
|
||||
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const leftPageButtons = reactive(['首页', '温湿度记录'])
|
||||
const rightPageButtons = reactive(['枪支离位预警', '视频监控', '运维状况'])
|
||||
const isShow = ref(false)
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
// console.log(token);
|
||||
let token = sessionStorage.getItem('token')
|
||||
if (token == 'true' ) {
|
||||
console.log(to);
|
||||
if (to.path == '/index') {
|
||||
isShow.value = true
|
||||
}else{
|
||||
isShow.value = false
|
||||
}
|
||||
next()
|
||||
} else {
|
||||
if(to.path === '/login'){
|
||||
console.log(1);
|
||||
next()
|
||||
}else{
|
||||
next(`/login?redirect=${to.path}`)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<template >
|
||||
<nav>
|
||||
<template v-if="isShow">
|
||||
<div class="left-button">
|
||||
<div :class="'button' + index" v-for="(item, index) in leftPageButtons" :key="index">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-button">
|
||||
<div :class="'btn' + index" v-for="(val, index) in rightPageButtons" :key="index">
|
||||
{{ val }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</nav>
|
||||
|
||||
<!-- <router-link to="/index">aa</router-link> -->
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
height: 8.3%;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
// background-color: pink;
|
||||
background-image: url('../src/assets/images/header.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
.left-button {
|
||||
float: left;
|
||||
|
||||
&>div {
|
||||
float: left;
|
||||
margin: 0 .6rem;
|
||||
background-image: url('./assets/images/header-btn.png');
|
||||
background-size: 100% 100%;
|
||||
padding: .6rem 1.2rem;
|
||||
color: #17dae5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.button0 {
|
||||
padding: .8rem 2rem;
|
||||
background-image: url('./assets/images/index-btn.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right-button {
|
||||
float: right;
|
||||
|
||||
&>div {
|
||||
float: left;
|
||||
margin: 0 .6rem;
|
||||
background-image: url('./assets/images/header-btn.png');
|
||||
background-size: 100% 100%;
|
||||
padding: .6rem 1.2rem;
|
||||
color: #17dae5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 517 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 910 B |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 7.4 MiB |
|
After Width: | Height: | Size: 389 B |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 341 B |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 191 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 424 B |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 266 B |
|
After Width: | Height: | Size: 637 B |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 197 B |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 549 B |
|
After Width: | Height: | Size: 550 B |
|
After Width: | Height: | Size: 557 B |
|
After Width: | Height: | Size: 964 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
|
|
@ -0,0 +1,200 @@
|
|||
<template></template>
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
|
||||
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
|
||||
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
|
||||
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
|
||||
import { CSS3DRenderer, CSS3DObject } from "three/examples/jsm/renderers/CSS3DRenderer";
|
||||
import * as THREE from 'three';
|
||||
onMounted(() => {
|
||||
init()
|
||||
createCamera()
|
||||
createRender()
|
||||
createLight()
|
||||
// console.log(requestAnimationFrame);
|
||||
|
||||
animate()
|
||||
initIcon()
|
||||
})
|
||||
//加入事件监听器,窗口自适应
|
||||
window.addEventListener('resize', function () {
|
||||
var width = window.innerWidth;
|
||||
var height = window.innerHeight;
|
||||
renderer.setSize(width, height);
|
||||
camera.aspect = width / height;
|
||||
camera.updateProjectionMatrix();
|
||||
labelRenderer.setSize(window.innerWidth, window.innerHeight);
|
||||
// initIcon()
|
||||
})
|
||||
|
||||
let scene
|
||||
let camera
|
||||
let renderer
|
||||
let mesh //材质
|
||||
let labelRenderer //3d图片
|
||||
let controls
|
||||
scene = new THREE.Scene()
|
||||
camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, .6, 10000)
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
|
||||
// 增加控制器
|
||||
controls = new OrbitControls(camera, renderer.domElement)
|
||||
// controls.maxPolarAngle = 20*Math.PI
|
||||
controls.maxDistance = 1000
|
||||
controls.minDistance = 400
|
||||
// controls.minAzimuthAngle = 100 * Math.PI;
|
||||
// controls.maxAzimuthAngle = 100 * Math.PI;
|
||||
controls.minPolarAngle = 0;
|
||||
controls.maxPolarAngle = (Math.PI / 4) *2
|
||||
|
||||
const emissiveColor = new THREE.Color(0xff0000)
|
||||
const material = new THREE.MeshStandardMaterial({
|
||||
color: 0xffffff, // 模型的基本颜色
|
||||
emissive: emissiveColor,
|
||||
emissiveIntensity: 1, // 自发光强度（可选）
|
||||
});
|
||||
// function init() {
|
||||
// const mtLoader = new MTLLoader()
|
||||
// const loader = new OBJLoader()
|
||||
// mtLoader.load('/model/YinFangShuJu_01.mtl', function (material) {
|
||||
|
||||
// console.log(material);
|
||||
// material.preload()
|
||||
// loader.setMaterials(material)
|
||||
// // 设置当前纹理
|
||||
|
||||
// loader.load('/model/YinFangShuJu_01.obj', (loadMesh) => {
|
||||
// mesh = loadMesh
|
||||
// console.log(mesh);
|
||||
// // 添加到场景
|
||||
// scene.add(mesh)
|
||||
// }, (xhr) => {
|
||||
// if (xhr.lengthComputable) {
|
||||
// const percentComplete = xhr.loaded / xhr.total * 100
|
||||
// console.log(Math.round(percentComplete, 2) + '%')
|
||||
// }
|
||||
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
function init() {
|
||||
const loader = new FBXLoader()
|
||||
loader.load("/model/" + "YFSJ_Model.fbx", (fbx) => {
|
||||
fbx.traverse(function (child) {
|
||||
if (child.isMesh && child.name =='路牙') {
|
||||
child.material = new THREE.MeshPhongMaterial({
|
||||
color: new THREE.Color('#b4babd'),
|
||||
// 设置发光强度
|
||||
// map: texture, // 纹理贴图
|
||||
// emissive: 0x00ff00, // 设置发光颜色
|
||||
emissiveIntensity: 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
console.log(fbx,'模型');
|
||||
// fbx.children[21].material.emissiveIntensity = 1
|
||||
// fbx.material = fbx.children[21].material
|
||||
// console.log(fbx.children[21]);
|
||||
fbx.scale.set(1, 1, 1);
|
||||
// fbx.rotation.set(180,20,0)
|
||||
fbx.position.set(0, 0, 0);
|
||||
scene.add(fbx);
|
||||
})
|
||||
}
|
||||
function createLight() {
|
||||
// 环境光
|
||||
const ambientLight = new THREE.AmbientLight(0xffffff, 1.5) // 创建环境光
|
||||
scene.add(ambientLight) // 将环境光添加到场景
|
||||
|
||||
const spotLight = new THREE.SpotLight('#ffffff', 0.7) // 创建聚光灯
|
||||
spotLight.position.set(1600, 1660, 100)
|
||||
spotLight.castShadow = true
|
||||
scene.add(spotLight)
|
||||
}
|
||||
function createCamera() {
|
||||
|
||||
camera.position.set(-106, 300, 300)
|
||||
console.log(camera);
|
||||
camera.lookAt(scene.position)
|
||||
scene.add(camera)
|
||||
}
|
||||
function createRender() {
|
||||
renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
renderer.shadowMap.enabled = true // 显示阴影
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap
|
||||
renderer.setClearColor('#000000') // 设置背景颜色
|
||||
console.log(renderer);
|
||||
document.querySelector('#three3D').appendChild(renderer.domElement)
|
||||
labelRenderer = new CSS3DRenderer();
|
||||
labelRenderer.setSize(window.innerWidth, window.innerHeight);
|
||||
labelRenderer.domElement.style.position = "absolute";
|
||||
labelRenderer.domElement.style.top = 0;
|
||||
// labelRenderer.domElement.style.left = 0;
|
||||
labelRenderer.domElement.style.pointerEvents = "none";
|
||||
labelRenderer.domElement.className = "allLabel";
|
||||
document.querySelector('#three3D').appendChild(labelRenderer.domElement);
|
||||
initIcon()
|
||||
}
|
||||
async function initIcon() {
|
||||
let pointList = [
|
||||
{
|
||||
name: "警报",
|
||||
point: {
|
||||
x: 40.91436767578125,
|
||||
y: 0.9466018676757812,
|
||||
z: 0
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "馍馍加辣条",
|
||||
point: {
|
||||
x:15.29782094726788,
|
||||
y: 2.00017999999690800907,
|
||||
z: -75.36294510575863,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "xxx",
|
||||
point: {
|
||||
x: 50.91436767578125,
|
||||
y: 0.9466018676757812,
|
||||
z: 200
|
||||
},
|
||||
},
|
||||
];
|
||||
pointList.forEach((item, index) => {
|
||||
console.log(item, 'item');
|
||||
let initIconAble
|
||||
if (item.name == '警报') {
|
||||
initIconAble = createLableObj(item.name, item.point, 'area-alert.png');
|
||||
} else {
|
||||
initIconAble = createLableObj(item.name, item.point, `store.png`);
|
||||
}
|
||||
scene.add(initIconAble);
|
||||
});
|
||||
}
|
||||
// 创建标签的方法
|
||||
function createLableObj(text, vector, url) {
|
||||
let laberDiv = document.createElement("div"); //创建div容器
|
||||
laberDiv.className = "laber_name";
|
||||
// laberDiv.textContent = text;
|
||||
laberDiv.innerHTML = `
|
||||
<div class='label_count'>
|
||||
<img src="/${url}" class="label_img"/>
|
||||
<span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
let pointLabel = new CSS3DObject(laberDiv);
|
||||
pointLabel.scale.set(0.1, 0.1, 0.1);
|
||||
pointLabel.position.set(vector.x, vector.y + 15, vector.z);
|
||||
return pointLabel;
|
||||
}
|
||||
function animate() {
|
||||
controls.update()
|
||||
requestAnimationFrame(animate);
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import router from "./router/router.js"
|
||||
import App from './App.vue'
|
||||
const app = createApp(App)
|
||||
app.use(ElementPlus)
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import Login from '../view/Login.vue'
|
||||
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/login'
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: Login
|
||||
|
||||
},
|
||||
{
|
||||
path: '/index',
|
||||
name: 'index',
|
||||
component: () => import('../view/Index.vue')
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
// history: createWebHistory(),
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
export default router;
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
html.dark {
|
||||
/* 自定义深色背景颜色 */
|
||||
--el-bg-color: #626aef;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app,
|
||||
body,
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #0e1420;
|
||||
width: 100%;
|
||||
font-size: 36px;
|
||||
height: 100%;
|
||||
background-image: url('./assets/images/bg.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
@media screen and (max-width:1920px){
|
||||
#app,html{
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
<template>
|
||||
<div class="login">
|
||||
<div class="form">
|
||||
<el-form :model="userMsg" :rules="rules" ref="form">
|
||||
<el-form-item prop="user">
|
||||
<el-input type="text" v-model="userMsg.user" class="w-50 m-2" placeholder="请输入账号">
|
||||
<template #prefix>
|
||||
<i class="icon-1"></i>
|
||||
</template>
|
||||
</el-input></el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input type="password" v-model="userMsg.password" class="w-50 m-2" placeholder="请输入密码">
|
||||
<template #prefix>
|
||||
<i class="icon-2"></i>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="function-btn">
|
||||
<el-checkbox v-model="passwordCheck" label="保存密码" />
|
||||
<!-- <span class="fun-font">保存密码</span> -->
|
||||
<div class="submit" @click="submit()"><span>登</span>录</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-bg">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, reactive, } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Base64 } from 'js-base64'
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
setup(props, context) {
|
||||
const token = 'true'
|
||||
const router = useRouter()
|
||||
const userMsg = reactive({
|
||||
user: 'admin',
|
||||
password: '123'
|
||||
})
|
||||
const rules = reactive({ //用户名密码验证规则
|
||||
user: [{ required: true, message: "请输入用户名", trigger: 'blur' }],
|
||||
password: [{ required: true, message: "请输入密码", trigger: 'blur' }]
|
||||
})
|
||||
const passwordCheck = ref(false)
|
||||
const methods = {
|
||||
submit() {
|
||||
if (passwordCheck.value) {
|
||||
localStorage.setItem('userCode', userMsg.user)
|
||||
localStorage.setItem('userPassword', Base64.encode(userMsg.password))
|
||||
} else {
|
||||
localStorage.removeItem('userCode')
|
||||
localStorage.removeItem('userPassword')
|
||||
}
|
||||
if (userMsg.user != '' && userMsg.password != '') {
|
||||
// console.log(1);
|
||||
sessionStorage.setItem('token', 'true')
|
||||
router.push('/index')
|
||||
|
||||
} else {
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
},
|
||||
hasUser() {
|
||||
if (localStorage.getItem('userCode') && localStorage.getItem('userPassword')) {
|
||||
userMsg.user = localStorage.getItem('userCode')
|
||||
userMsg.password = Base64.decode(localStorage.getItem('userPassword'))//解密
|
||||
passwordCheck.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// console.log(submit(),'方法');
|
||||
methods.hasUser()
|
||||
return {
|
||||
...methods,
|
||||
userMsg,
|
||||
token,
|
||||
passwordCheck,
|
||||
rules
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.login {
|
||||
width: 34.4%;
|
||||
height: 44.4%;
|
||||
// background-color: aqua;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background-image: url('../assets/images/login-bg.png');
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 5%;
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: 28%;
|
||||
height: 29%;
|
||||
box-sizing: border-box;
|
||||
|
||||
:deep(.el-form) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
display: inline-block;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.icon-1 {
|
||||
|
||||
background-image: url('../assets/images/user-icon.png');
|
||||
|
||||
}
|
||||
|
||||
.icon-2 {
|
||||
background-image: url('../assets/images/password-icon.png');
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
:deep(.el-input__prefix-inner>:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
:deep(.el-input__prefix-inner) {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
:deep(.el-input) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-input__prefix) {
|
||||
width: 4%;
|
||||
margin-right: 7%;
|
||||
margin-left: 4.2%;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
font-size: 1rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background: none;
|
||||
background-image: url('../assets/images/el-input-bg.png') !important;
|
||||
box-shadow: none;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.function-btn {
|
||||
width: 100%;
|
||||
height: 40.6%;
|
||||
position: relative;
|
||||
top: 30%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 2%;
|
||||
}
|
||||
|
||||
.function-btn {
|
||||
:deep(.el-checkbox) {
|
||||
height: 2.08rem;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__inner::after) {
|
||||
width: .3rem;
|
||||
height: .4rem;
|
||||
left: .2rem;
|
||||
border-width: .1rem;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__label) {
|
||||
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__inner) {
|
||||
width: .8rem;
|
||||
height: .8rem;
|
||||
}
|
||||
|
||||
.fun-font {
|
||||
color: #fff;
|
||||
margin-left: 1rem;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.submit {
|
||||
top: 25%;
|
||||
color: #17dae5;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 50%;
|
||||
height: 20%;
|
||||
background-image: url('../assets/images/login-btn.png');
|
||||
background-size: 100% 100%;
|
||||
// text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 48.7
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
// css: {
|
||||
// preprocessorOptions: {
|
||||
// less: {
|
||||
// modifyVars: {
|
||||
// hack: `true; @import (reference) "${path.resolve("src/assets/css/base.less")}";`,
|
||||
// },
|
||||
// javascriptEnabled: true,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
})
|
||||