liudan
1 week ago
@ -0,0 +1,37 @@ |
|||||||
|
body,html{ |
||||||
|
margin:0; |
||||||
|
padding:0; |
||||||
|
} |
||||||
|
.main{ |
||||||
|
height: calc(100vh); |
||||||
|
background-image: url("../images/mainBg.png"); |
||||||
|
background-size: cover; |
||||||
|
background-repeat: no-repeat; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.btnGroup{ |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.btnGroup .item{ |
||||||
|
flex: 1; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.btnGroup .item .text{ |
||||||
|
display: flex; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
} |
||||||
|
.btnGroup .item .text span{ |
||||||
|
margin-left:15px; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 36px; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
@ -0,0 +1,67 @@ |
|||||||
|
body,html{ |
||||||
|
margin:0; |
||||||
|
padding:0; |
||||||
|
} |
||||||
|
.task{ |
||||||
|
border:1px solid red; |
||||||
|
height: calc(100vh - 2px); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
overflow: hidden; |
||||||
|
background-color: #F2F2F2; |
||||||
|
} |
||||||
|
/* 左边 */ |
||||||
|
.left{ |
||||||
|
width:20%; |
||||||
|
height:calc(100% - 40px); |
||||||
|
overflow: auto; |
||||||
|
border:1px solid orange; |
||||||
|
background: #FFFFFF; |
||||||
|
box-shadow: 3px 0px 10px 0px rgba(6,13,23,0.06); |
||||||
|
border-radius: 1px; |
||||||
|
padding:20px; |
||||||
|
} |
||||||
|
.left .addBtn{ |
||||||
|
background: #6271FE; |
||||||
|
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2); |
||||||
|
border-radius: 10px; |
||||||
|
padding:16px 0; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.left .addBtn span{ |
||||||
|
margin-left:12px; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 24px; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
.left .taskItem{ |
||||||
|
background: #EDEDEF; |
||||||
|
border-radius: 10px; |
||||||
|
padding:16px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
margin:20px 0; |
||||||
|
} |
||||||
|
.left .taskItem span{ |
||||||
|
font-weight: bold; |
||||||
|
font-size: 22px; |
||||||
|
color: #222222; |
||||||
|
} |
||||||
|
/* 右边 */ |
||||||
|
.right{ |
||||||
|
width:20%; |
||||||
|
height:100%; |
||||||
|
overflow: auto; |
||||||
|
border:1px solid orange; |
||||||
|
} |
||||||
|
.right |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.center{ |
||||||
|
flex:1; |
||||||
|
height:100%; |
||||||
|
border:1px solid orange; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 622 B |
|
After Width: | Height: | Size: 225 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 267 KiB |
|
After Width: | Height: | Size: 376 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 859 B |
|
After Width: | Height: | Size: 493 B |
|
After Width: | Height: | Size: 496 B |
|
After Width: | Height: | Size: 230 B |
|
After Width: | Height: | Size: 789 B |
@ -0,0 +1,31 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>入口文件</title> |
||||||
|
<link rel="stylesheet" href="./css/index.css"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="main"> |
||||||
|
<div class="btnGroup"> |
||||||
|
<div class="item"> |
||||||
|
<img src="./images/main.png" alt=""> |
||||||
|
<div class="text"> |
||||||
|
<img src="./images/jiankong.png" alt=""> |
||||||
|
<span>任务管理</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="item" style="margin-left:62px;"> |
||||||
|
<img src="./images/main1.png" alt=""> |
||||||
|
<div class="text"> |
||||||
|
<img src="./images/renwu.png" alt=""> |
||||||
|
<span>实时监控</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
$(function(){ |
||||||
|
console.log("111") |
||||||
|
for(let i = 0 ; i < 6 ; i++){ |
||||||
|
$('.left').append(`<div class="taskItem">
|
||||||
|
<span>任务${i+1}</span> |
||||||
|
<img src="./images/shanchu.png" alt=""> |
||||||
|
</div>`) |
||||||
|
} |
||||||
|
}) |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>任务管理</title> |
||||||
|
<link rel="stylesheet" href="./css/taskManagement.css"> |
||||||
|
<script src="./js/jquery-3.7.1.min.js"></script> |
||||||
|
<script src="./js/taskManagement.js"></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="task"> |
||||||
|
<div class="left"> |
||||||
|
<div class="addBtn"> |
||||||
|
<img src="./images/jia.png" alt=""> |
||||||
|
<span>新增任务</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="center"></div> |
||||||
|
<div class="right"> |
||||||
|
<div class="pointItem"> |
||||||
|
<div class="point"> |
||||||
|
<div class="pointName"> |
||||||
|
<img src="./images/point.png" alt=""> |
||||||
|
<span>点1</span> |
||||||
|
</div> |
||||||
|
<div class="edit">修改</div> |
||||||
|
</div> |
||||||
|
<div class="lat">经度：116.3913447°</div> |
||||||
|
<div class="lat">纬度度：116.3913447°</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -1,28 +1,71 @@ |
|||||||
<template> |
<template> |
||||||
<div id="app"> |
<div id="app"> |
||||||
<img alt="Vue logo" src="./assets/logo.png"> |
<router-view></router-view> |
||||||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
|
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import HelloWorld from './components/HelloWorld.vue' |
import debounce from 'lodash.debounce' |
||||||
|
|
||||||
export default { |
export default { |
||||||
name: 'App', |
name: 'App', |
||||||
components: { |
components: {}, |
||||||
HelloWorld |
data(){ |
||||||
|
return{ |
||||||
|
scale: this.getScale(), |
||||||
|
width:1920, |
||||||
|
height:1080 |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
this.getScale() |
||||||
|
window.addEventListener('resize', this.setScale) |
||||||
|
}, |
||||||
|
beforeDestroy() { |
||||||
|
window.removeEventListener('resize', this.setScale) |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
styleObject() { |
||||||
|
const obj = { |
||||||
|
transform: `scaleY(${this.scale.y}) scaleX( ${this.scale.x}) translate(-50%, -50%)`, |
||||||
|
WebkitTransform: `scale(${this.scale}) translate(-50%, -50%)`, |
||||||
|
width: this.width + 'px', |
||||||
|
height: this.height + 'px' |
||||||
|
} |
||||||
|
return obj |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getScale() { |
||||||
|
// 字体开始 |
||||||
|
const baseSize = 10; // 基准大小 |
||||||
|
const scale = document.documentElement.clientWidth / 1920; // 当前页面宽度相对于设计稿宽度的缩放比例 |
||||||
|
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'; // 设置页面根节点字体大小 |
||||||
|
// 字体结束 |
||||||
|
// 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改 |
||||||
|
// console.log(window.innerWidth, window.innerHeight,'window.innerWidth') |
||||||
|
const ww = window.innerWidth / this.width |
||||||
|
const wh = window.innerHeight / this.height |
||||||
|
// return ww < wh ? ww : wh |
||||||
|
return { x: ww, y: wh } |
||||||
|
}, |
||||||
|
setScale: debounce(function() { |
||||||
|
// 获取到缩放比，设置它 |
||||||
|
const scale = this.getScale() |
||||||
|
this.scale = scale |
||||||
|
}, 300) |
||||||
} |
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style> |
<style> |
||||||
|
body,html{ |
||||||
|
padding:0; |
||||||
|
margin:0; |
||||||
|
font-size: 62.5%; |
||||||
|
} |
||||||
#app { |
#app { |
||||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
height:calc(100vh); |
||||||
-webkit-font-smoothing: antialiased; |
overflow: hidden; |
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
text-align: center; |
|
||||||
color: #2c3e50; |
|
||||||
margin-top: 60px; |
|
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
|||||||
|
After Width: | Height: | Size: 174 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 363 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 476 B |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 40 KiB |
@ -1,58 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="hello"> |
|
||||||
<h1>{{ msg }}</h1> |
|
||||||
<p> |
|
||||||
For a guide and recipes on how to configure / customize this project,<br> |
|
||||||
check out the |
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. |
|
||||||
</p> |
|
||||||
<h3>Installed CLI Plugins</h3> |
|
||||||
<ul> |
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> |
|
||||||
</ul> |
|
||||||
<h3>Essential Links</h3> |
|
||||||
<ul> |
|
||||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
|
||||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
|
||||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> |
|
||||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> |
|
||||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
|
||||||
</ul> |
|
||||||
<h3>Ecosystem</h3> |
|
||||||
<ul> |
|
||||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
|
||||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
|
||||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> |
|
||||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> |
|
||||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: 'HelloWorld', |
|
||||||
props: { |
|
||||||
msg: String |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|
||||||
<style scoped> |
|
||||||
h3 { |
|
||||||
margin: 40px 0 0; |
|
||||||
} |
|
||||||
ul { |
|
||||||
list-style-type: none; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
li { |
|
||||||
display: inline-block; |
|
||||||
margin: 0 10px; |
|
||||||
} |
|
||||||
a { |
|
||||||
color: #42b983; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,8 +1,10 @@ |
|||||||
import Vue from 'vue' |
import Vue from 'vue' |
||||||
import App from './App.vue' |
import App from './App.vue' |
||||||
|
import VueRouter from 'vue-router' |
||||||
|
import router from './router' |
||||||
Vue.config.productionTip = false |
Vue.config.productionTip = false |
||||||
|
Vue.use(VueRouter) |
||||||
new Vue({ |
new Vue({ |
||||||
render: h => h(App), |
render: h => h(App), |
||||||
|
router |
||||||
}).$mount('#app') |
}).$mount('#app') |
||||||
@ -0,0 +1,113 @@ |
|||||||
|
<template> |
||||||
|
<div class="index"> |
||||||
|
<img src="@/assets/back.png" class="bgPic" alt=""> |
||||||
|
<div class="contentContainer"> |
||||||
|
<div class="header"> |
||||||
|
<img src="@/assets/headerBg.png" alt=""> |
||||||
|
<div class="headerText"> |
||||||
|
<div class="title">垃圾转运站大数据管理中心</div> |
||||||
|
<!-- <div class="time"> |
||||||
|
<img src="@/assets/shijian.png" alt=""> |
||||||
|
<span>2024-09-09 13:24:13</span> |
||||||
|
</div> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data(){ |
||||||
|
return{ |
||||||
|
timeText:'', |
||||||
|
timer:null, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
updateClock() { |
||||||
|
let now = new Date(); |
||||||
|
let year = now.getFullYear(); |
||||||
|
let month = now.getMonth() + 1; |
||||||
|
let day = now.getDate(); |
||||||
|
let hours = now.getHours(); |
||||||
|
let minutes = now.getMinutes(); |
||||||
|
let seconds = now.getSeconds(); |
||||||
|
month = month < 10 ? '0' + month : month; |
||||||
|
day = day < 10 ? '0' + day : day; |
||||||
|
hours = hours < 10 ? '0' + hours : hours; |
||||||
|
minutes = minutes < 10 ? '0' + minutes : minutes; |
||||||
|
seconds = seconds < 10 ? '0' + seconds : seconds; |
||||||
|
let timeString = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds; |
||||||
|
this.timeText = timeString |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
// this.timer = setInterval(this.updateClock, 1000); |
||||||
|
}, |
||||||
|
destroyed(){ |
||||||
|
// clearInterval(this.timer) |
||||||
|
// this.timer = null; |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.index{ |
||||||
|
background: #010E25; |
||||||
|
border:1px solid blue; |
||||||
|
height:calc(100% - 2px); |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
.bgPic{ |
||||||
|
position: absolute; |
||||||
|
left:0; |
||||||
|
top:0; |
||||||
|
width:100%; |
||||||
|
height:100%; |
||||||
|
z-index:0; |
||||||
|
} |
||||||
|
.contentContainer{ |
||||||
|
position: relative; |
||||||
|
z-index:1; |
||||||
|
.header{ |
||||||
|
border:1px solid red; |
||||||
|
position: relative; |
||||||
|
&>img{ |
||||||
|
width:100%; |
||||||
|
height:auto; |
||||||
|
position:relative; |
||||||
|
z-index:1; |
||||||
|
} |
||||||
|
.headerText{ |
||||||
|
position: absolute; |
||||||
|
border:2px solid pink; |
||||||
|
.title{ |
||||||
|
font-family: Source Han Sans CN; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 3.6rem; |
||||||
|
color: #FFFFFF; |
||||||
|
text-shadow: 0px 4px 7px rgba(0,0,1,0.86); |
||||||
|
} |
||||||
|
// .time{ |
||||||
|
// display: flex; |
||||||
|
// align-items: center; |
||||||
|
// border:1px solid #fff; |
||||||
|
// &>img{ |
||||||
|
// width: 20px; |
||||||
|
// height: 20px; |
||||||
|
// } |
||||||
|
// &>span{ |
||||||
|
// font-weight: bold; |
||||||
|
// font-size: 20px; |
||||||
|
// color: #FFFFFF; |
||||||
|
// margin-left:16px; |
||||||
|
// } |
||||||
|
// } |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
import VueRouter from "vue-router"; |
||||||
|
const router = new VueRouter({ |
||||||
|
mode: "hash", |
||||||
|
// mode: "history",
|
||||||
|
routes: [ |
||||||
|
{ |
||||||
|
path: '/', |
||||||
|
redirect:'/index', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'index', |
||||||
|
path: '/index', |
||||||
|
component: () => import('../pages/index.vue'), |
||||||
|
children: [], |
||||||
|
}, |
||||||
|
] |
||||||
|
}) |
||||||
|
export default router |
||||||
@ -1,4 +1,11 @@ |
|||||||
const { defineConfig } = require('@vue/cli-service') |
const { defineConfig } = require('@vue/cli-service') |
||||||
module.exports = defineConfig({ |
module.exports = defineConfig({ |
||||||
transpileDependencies: true |
transpileDependencies: true, |
||||||
|
configureWebpack: { |
||||||
|
resolve: { |
||||||
|
alias: { |
||||||
|
'@': require('path').resolve(__dirname, './src') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
}) |
}) |
||||||
|
|||||||