first commit
This commit is contained in:
commit
f6c8141d88
|
|
@ -0,0 +1,24 @@
|
|||
.DS_Store
|
||||
node_modules/
|
||||
unpackage/
|
||||
dist/
|
||||
unpackage/
|
||||
unpackage
|
||||
/unpackage
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.project
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"version" : "1.0",
|
||||
"configurations" : [
|
||||
{
|
||||
"customPlaygroundType" : "local",
|
||||
"playground" : "custom",
|
||||
"type" : "uni-app:app-android"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<script>
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
setTimeout(()=>{
|
||||
plus.navigator.setFullscreen(true)
|
||||
},500)
|
||||
// #endif
|
||||
|
||||
|
||||
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
view{
|
||||
|
||||
box-sizing: border-box;
|
||||
color: #667085;
|
||||
font-size: 14rpx;
|
||||
}
|
||||
/* :root{
|
||||
|
||||
font-size: calc(100vw / 960px * 32px) !important;
|
||||
} */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<template>
|
||||
<!-- 日期弹窗 -->
|
||||
<view class="popUpNotification" v-if="Props.modelValue" @click.stop="close">
|
||||
<view class="box" @click.stop="Props.modelValue=true">
|
||||
<view class="top">
|
||||
<view class="l" @click="dayindex=dayindex+1" ><uni-icons v-if="dayindex<daydata.monthGroups.length-1" type="left" size="18rpx"></uni-icons>
|
||||
</view>
|
||||
<view class="c">{{daydata.monthGroups[dayindex].year}}年 {{daydata.monthGroups[dayindex].month}}月 </view>
|
||||
<view class="r" @click="dayindex=dayindex-1" ><uni-icons v-if="dayindex>0" type="right" size="18rpx"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="day">
|
||||
<view>一</view>
|
||||
<view>二</view>
|
||||
<view>三</view>
|
||||
<view>四</view>
|
||||
<view>五</view>
|
||||
<view>六</view>
|
||||
<view>日</view>
|
||||
</view>
|
||||
<view class="form">
|
||||
<view v-for="item in daydata.monthGroups[dayindex].days" @click.stop="settime(`${daydata.monthGroups[dayindex].year}-${daydata.monthGroups[dayindex].month}-${item}`)" :class="{del:!daydata.day.includes(`${daydata.monthGroups[dayindex].year}-${daydata.monthGroups[dayindex].month}-${item}`),on:chooseday==`${daydata.monthGroups[dayindex].year}-${daydata.monthGroups[dayindex].month}-${item}`}">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
const daydata=ref({});
|
||||
const chooseday=ref("");
|
||||
const dayindex=ref(0)
|
||||
const adssEmits = defineEmits(["update:modelValue","change"])
|
||||
const Props= defineProps({
|
||||
style:{
|
||||
type:Object,
|
||||
default:{}
|
||||
},
|
||||
modelValue:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
})
|
||||
|
||||
function getCompleteMonthData() {
|
||||
const today = new Date();
|
||||
const day = [];
|
||||
// 1. 获取过去30天的日期并按月分组
|
||||
const monthGroups = {};
|
||||
for (let i = 0; i <= 30; i++) {
|
||||
const date = new Date(today);
|
||||
date.setDate(today.getDate() - i);
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth() + 1;
|
||||
const monthKey = `${year}-${month.toString().padStart(2, '0')}`;
|
||||
day.push(`${year}-${month}-${date.getDate()}`)
|
||||
if (!monthGroups[monthKey]) {
|
||||
monthGroups[monthKey] = {
|
||||
year,
|
||||
month,
|
||||
days: getDays(new Date(year, month, 0).getDate()) // 获取该月完整天数
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function getDays(l) {
|
||||
let _data = [];
|
||||
for (let m = 1; m <= l; m++) {
|
||||
_data.push(m)
|
||||
}
|
||||
return _data;
|
||||
}
|
||||
return {
|
||||
day,
|
||||
monthGroups:Object.values(monthGroups)
|
||||
}
|
||||
}
|
||||
daydata.value = getCompleteMonthData()
|
||||
// chooseday.value=daydata.value.day[0]
|
||||
|
||||
function close(){
|
||||
Props.modelValue=false;
|
||||
adssEmits("update:modelValue",false)
|
||||
}
|
||||
function settime(time){
|
||||
chooseday.value=time;
|
||||
adssEmits("change",time)
|
||||
Props.modelValue=false;
|
||||
adssEmits("update:modelValue",false)
|
||||
}
|
||||
function reset(){
|
||||
// chooseday.value=daydata.value.day[0];
|
||||
dayindex.value=0;
|
||||
}
|
||||
defineExpose({
|
||||
reset
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.popUpNotification {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 22;
|
||||
|
||||
&>.box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
width: 300rpx;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #F6F6F6;
|
||||
padding: 10rpx 15rpx;
|
||||
|
||||
.c {
|
||||
font-size: 13rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.day {
|
||||
margin: 0rpx 15rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10rpx 10rpx;
|
||||
|
||||
view {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 10rpx;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
flex-wrap: wrap;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 5rpx;
|
||||
padding: 0rpx 10rpx;
|
||||
padding-bottom: 10rpx;
|
||||
|
||||
view {
|
||||
text-align: center;
|
||||
flex: 1 1 1 1 1 1 1;
|
||||
background: #F4F7FF;
|
||||
color: #4D7BFF;
|
||||
font-size: 11rpx;
|
||||
border-radius: 3rpx;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.on {
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
.del {
|
||||
background: transparent;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<scroll-view :scroll-y="true" :scroll-top='scrolltop' class="pageanimation" :class="{showon:showis,hideon:!Props.modelValue}">
|
||||
<slot></slot>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onBackPress
|
||||
} from "@dcloudio/uni-app"
|
||||
import {
|
||||
nextTick,
|
||||
ref,
|
||||
watch
|
||||
} from "vue"
|
||||
const scrolltop=ref(0)
|
||||
const showis=ref(false)
|
||||
const Emits = defineEmits(["update:modelValue","close"])
|
||||
const Props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
watch(() => Props.modelValue, () => {
|
||||
|
||||
|
||||
if(Props.modelValue){
|
||||
showis.value=true;
|
||||
}else{
|
||||
Emits("close")
|
||||
setTimeout(()=>{
|
||||
showis.value=false;
|
||||
scrolltop.value=100;
|
||||
nextTick(()=>{
|
||||
scrolltop.value=0;
|
||||
})
|
||||
},500)
|
||||
}
|
||||
})
|
||||
onBackPress(() => {
|
||||
if (Props.modelValue) {
|
||||
Props.modelValue=false;
|
||||
|
||||
Emits("update:modelValue",false)
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pageanimation{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
top: 0px;
|
||||
left: 100%;
|
||||
background: #E7E7ED;
|
||||
transition:0.3s;
|
||||
&.showon{
|
||||
left: 0%;
|
||||
}
|
||||
&.hideon{
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div>设备001</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 5px;
|
||||
background: #4D7BFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 5px;
|
||||
background: #4D7BFF;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 50px;
|
||||
background: #4D7BFF;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 50px;
|
||||
background: #4D7BFF;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 50px;
|
||||
background: #4D7BFF;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
<img src="/map.png"/>
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 50px;
|
||||
background: #4D7BFF;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
<img src="/map.png" crossorigin="anonymous" />
|
||||
</div>
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 50px;
|
||||
background: #4D7BFF;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
<img src="/map.png" crossorigin="anonymous" />
|
||||
</div>
|
||||
<img src="" id="img" />
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
document.getElementById('img').src=dataUrl
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="./dom-to-image.min.js"></script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0px;
|
||||
}
|
||||
#imgs{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
#imgs div{
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#imgs span{
|
||||
width: 2px;
|
||||
height: 50px;
|
||||
background: #4D7BFF;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page" id="imgs">
|
||||
<div >设备001</div>
|
||||
<span></span>
|
||||
<img src="./map.png" crossorigin="anonymous" />
|
||||
</div>
|
||||
<img src="" id="img" />
|
||||
<script>
|
||||
domtoimage.toPng(document.getElementById('imgs'))
|
||||
.then(dataUrl => {
|
||||
console.log(dataUrl)
|
||||
document.getElementById('img').src=dataUrl
|
||||
})
|
||||
.catch(error => console.error('转换失败', error));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import App from './App'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
{
|
||||
"name" : "区间测速",
|
||||
"appid" : "__UNI__E207F22",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"screenOrientation" : [
|
||||
"landscape-primary", //可选，字符串类型，支持横屏
|
||||
"landscape-secondary"
|
||||
],
|
||||
"runmode" : "liberate",
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {
|
||||
"Maps" : {},
|
||||
"Geolocation" : {},
|
||||
"LivePusher" : {},
|
||||
"VideoPlayer" : {},
|
||||
"Camera" : {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {
|
||||
"dSYMs" : false
|
||||
},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {
|
||||
"maps" : {
|
||||
"baidu" : {
|
||||
"appkey_ios" : "nWnzss8CKEBKcBLoYUdVybkrKl4o2izT",
|
||||
"appkey_android" : "nWnzss8CKEBKcBLoYUdVybkrKl4o2izT"
|
||||
}
|
||||
},
|
||||
"geolocation" : {
|
||||
"baidu" : {
|
||||
"__platform__" : [ "android" ],
|
||||
"appkey_ios" : "nWnzss8CKEBKcBLoYUdVybkrKl4o2izT",
|
||||
"appkey_android" : "nWnzss8CKEBKcBLoYUdVybkrKl4o2izT"
|
||||
}
|
||||
},
|
||||
"statics" : {}
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "3",
|
||||
"h5" : {
|
||||
"sdkConfigs" : {
|
||||
"maps" : {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/go",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/signIn",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "区间测速",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"pageOrientation": "portrait",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
},
|
||||
"uniIdRouter": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<navigator url="/pages/index">进入</navigator>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onShow,onLoad} from "@dcloudio/uni-app"
|
||||
onShow(()=>{
|
||||
// setTimeout(()=>{
|
||||
// uni.reLaunch({
|
||||
// url:"/pages/index"
|
||||
// })
|
||||
// },5000)
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,312 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<view class="left">
|
||||
<view class="top">
|
||||
<view class="logo">
|
||||
<image src="/static/logo.png"></image>
|
||||
区间测速
|
||||
</view>
|
||||
<view class="tabnav">
|
||||
<view class="li" :class="{on:selectindex==0}" @click="settab(0)">
|
||||
<view class="l">
|
||||
<image src="/static/tab/1.png"></image>
|
||||
</view>
|
||||
<view class="text">预警信息</view>
|
||||
</view>
|
||||
<view class="li" :class="{on:selectindex==1}" @click="settab(1)">
|
||||
<view class="l">
|
||||
<image src="/static/tab/2.png"></image>
|
||||
</view>
|
||||
<view class="text">过车信息</view>
|
||||
</view>
|
||||
<view class="li" :class="{on:selectindex==2}" @click="settab(2)">
|
||||
<view class="l">
|
||||
<image src="/static/tab/3.png"></image>
|
||||
</view>
|
||||
<view class="text">历史记录</view>
|
||||
</view>
|
||||
<view class="li" :class="{on:selectindex==3}" @click="settab(3)">
|
||||
<view class="l">
|
||||
<image src="/static/tab/4.png"></image>
|
||||
</view>
|
||||
<view class="text">统计数据</view>
|
||||
</view>
|
||||
<view class="li" :class="{on:selectindex==4}" @click="settab(4)">
|
||||
<view class="l">
|
||||
<image src="/static/tab/5.png"></image>
|
||||
</view>
|
||||
<view class="text">预警设置</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="title">设备：</view>
|
||||
<view class="item on" :class="{on1:selectindex==5}" @click="settab(5)">
|
||||
<view class="l">
|
||||
<image src="/static/equipmenton.png"></image>
|
||||
<view class="name">设备001</view>
|
||||
</view>
|
||||
<view class="r"></view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="l">
|
||||
<image src="/static/equipmentno.png"></image>
|
||||
<view class="name">设备001</view>
|
||||
</view>
|
||||
<view class="r"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="subpage" v-show="state[0]==1">
|
||||
<warningInformation ref="refwarningInformation" />
|
||||
</view>
|
||||
<view class="subpage" v-show="state[1]==1">
|
||||
<passingTheCar ref="refpassingTheCar" />
|
||||
</view>
|
||||
<view class="subpage" v-show="state[2]==1">
|
||||
<history ref="refhistory" />
|
||||
</view>
|
||||
<view class="subpage" v-show="state[3]==1">
|
||||
<statistics ref="refstatistics" />
|
||||
</view>
|
||||
<view class="subpage" v-show="state[4]==1">
|
||||
<setUp ref="refsetUp" />
|
||||
</view>
|
||||
|
||||
<view class="subpage" v-show="state[5]==1">
|
||||
<qjcamera ref="refcamera" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import setmapidimg from "/utils/base64ToFile.js"
|
||||
import history from "./pages/history.vue"
|
||||
import setUp from "./pages/setUp.vue"
|
||||
import statistics from "./pages/statistics.vue"
|
||||
import passingTheCar from "./pages/passingTheCar.vue"
|
||||
import warningInformation from "./pages/warningInformation.vue"
|
||||
import qjcamera from "./pages/camera.vue"
|
||||
|
||||
import {
|
||||
nextTick,
|
||||
ref,
|
||||
watch
|
||||
} from "vue"
|
||||
const refhistory = ref()
|
||||
const refsetUp = ref()
|
||||
const refcamera = ref()
|
||||
const refstatistics = ref()
|
||||
const refpassingTheCar = ref()
|
||||
const refwarningInformation = ref()
|
||||
const selectindex = ref("")
|
||||
// 子页面状态管理
|
||||
const state = ref([0, 0, 0, 0, 0, 0]) //0表示页面为加载 1 表示页面已加载并显示 2页面隐藏
|
||||
nextTick(() => {
|
||||
settab(0)
|
||||
|
||||
})
|
||||
|
||||
|
||||
function settab(index) {
|
||||
if (index === selectindex.value) {
|
||||
return
|
||||
}
|
||||
selectindex.value = index;
|
||||
|
||||
state.value = state.value.map((r, subindex) => {
|
||||
if (r == 1) {
|
||||
r = 2;
|
||||
// 掉用页面隐藏
|
||||
switchfn(subindex, 'hide')
|
||||
}
|
||||
if (r == 0 && subindex == index) {
|
||||
r = 1;
|
||||
// 掉用页面load；
|
||||
switchfn(subindex, 'load')
|
||||
switchfn(subindex, 'show')
|
||||
|
||||
}
|
||||
if (r == 2 && subindex == index) {
|
||||
r = 1;
|
||||
// 掉用页面show；
|
||||
switchfn(subindex, 'show')
|
||||
}
|
||||
return r;
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function switchfn(index, fn) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
refwarningInformation.value[fn]()
|
||||
break;
|
||||
case 1:
|
||||
refpassingTheCar.value[fn]()
|
||||
break;
|
||||
case 2:
|
||||
|
||||
refhistory.value[fn]()
|
||||
break;
|
||||
case 3:
|
||||
refstatistics.value[fn]()
|
||||
break;
|
||||
case 4:
|
||||
refsetUp.value[fn]()
|
||||
break;
|
||||
case 5:
|
||||
refcamera.value[fn]()
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.subpage {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 100vw;
|
||||
|
||||
.left {
|
||||
width: 150rpx;
|
||||
background: #222653;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 15rpx;
|
||||
|
||||
.tabnav {
|
||||
margin-top: 35rpx;
|
||||
|
||||
.li {
|
||||
margin-bottom: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.on {
|
||||
.l {
|
||||
background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #fff;
|
||||
font-size: 11rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
|
||||
font-size: 11rpx;
|
||||
}
|
||||
|
||||
.l {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
width: 27rpx;
|
||||
height: 27rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 15rpx;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
width: 13rpx;
|
||||
height: 13rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
image {
|
||||
width: 25rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: camera;
|
||||
color: #fff;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
.title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-top: 8rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8rpx;
|
||||
padding: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.15);
|
||||
|
||||
.l {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 9rpx;
|
||||
margin: 0rpx 4rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.r {
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.34);
|
||||
border-radius: 50rpx;
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
}
|
||||
|
||||
&.on {
|
||||
border: 1rpx solid #4D7BFF;
|
||||
|
||||
.name {
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
.r {
|
||||
background: #37FFAC;
|
||||
}
|
||||
}
|
||||
&.on1{
|
||||
background: linear-gradient( 45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 600rpx;
|
||||
margin-left: 150rpx;
|
||||
background: #E7E7ED;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
<template>
|
||||
<view class="camerapage">
|
||||
<view class="title">摄像头设置</view>
|
||||
<view class="box">
|
||||
<video class="video"></video>
|
||||
<view class="workbench">
|
||||
<view class="direction">
|
||||
<view class="item" v-for="(item,index) in 4" :class="{on:keyindex==index+1}" @touchstart="press(index+1)" @touchend="release()">
|
||||
<view class="icon">
|
||||
<uv-icon name="arrow-up-fill" :color="keyindex==index+1?'#fff':'#4D7BFF'" size="20rpx"></uv-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="key">
|
||||
<view class="item" :class="{on:keyindex==5}" @touchstart="press(5)" @touchend="release()">
|
||||
<image :src="`/static/camera/${keyindex==5?11:1}.png`"></image>
|
||||
调焦 -
|
||||
</view>
|
||||
<view class="item" :class="{on:keyindex==6}" @touchstart="press(6)" @touchend="release()">
|
||||
<image :src="`/static/camera/${keyindex==6?22:2}.png`"></image>
|
||||
调焦 +
|
||||
</view>
|
||||
<view class="item" :class="{on:keyindex==7}" @touchstart="press(7)" @touchend="release()">
|
||||
<image :src="`/static/camera/${keyindex==7?33:3}.png`"></image>
|
||||
聚焦 -
|
||||
</view>
|
||||
<view class="item" :class="{on:keyindex==8}" @touchstart="press(8)" @touchend="release()">
|
||||
<image :src="`/static/camera/${keyindex==8?44:4}.png`"></image>
|
||||
聚焦 +
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const keyindex=ref("")
|
||||
function load() {
|
||||
console.log('预警信息load')
|
||||
}
|
||||
|
||||
function hide() {
|
||||
console.log('预警信息hide')
|
||||
}
|
||||
|
||||
function show() {
|
||||
console.log('预警信息show')
|
||||
}
|
||||
|
||||
function press(index){
|
||||
keyindex.value=index;
|
||||
}
|
||||
function release(){
|
||||
keyindex.value="";
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
load,
|
||||
hide,
|
||||
show
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.camerapage {
|
||||
padding: 15rpx;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 11rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.workbench {
|
||||
padding: 15rpx 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.key{
|
||||
|
||||
display: flex;
|
||||
gap:20rpx 15rpx;
|
||||
width: 265rpx;
|
||||
flex-wrap: wrap;
|
||||
.item{
|
||||
|
||||
|
||||
background: linear-gradient( 180deg, #F4F4F4 0%, #E3E7EE 78%, #DCE0EA 100%);
|
||||
box-shadow: 0rpx 0rpx 2rpx 0rpx rgba(0,0,0,0.21), inset 0rpx 1rpx 1rpx 0rpx #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 125rpx;
|
||||
padding:10rpx 15rpx;
|
||||
justify-content: center;
|
||||
border-radius: 100rpx;
|
||||
font-weight: 500;
|
||||
font-size: 11rpx;
|
||||
color: #223457;
|
||||
&.on{
|
||||
background: linear-gradient( 45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
box-shadow: inset 0rpx 0rpx 4rpx 0rpx rgba(0,0,0,0.33);
|
||||
color: #fff;
|
||||
}
|
||||
image{
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
margin-right: 15rpx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.direction {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
|
||||
|
||||
background: linear-gradient(180deg, #F4F4F4 0%, #E3E7EE 78%, #DCE0EA 100%);
|
||||
border: 1rpx solid #d2d2d2;
|
||||
border-radius: 139rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transform: rotate(45deg);
|
||||
position: relative;
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
border-radius: 54rpx;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
box-shadow: 0rpx 0rpx 2rpx 0rpx rgba(0,0,0,0.21), inset 0rpx 1rpx 15rpx 0rpx rgba(0,0,0,0.21);
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
position: absolute;
|
||||
transform-origin: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&.on{
|
||||
background: linear-gradient( 45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
box-shadow: inset 0rpx 0rpx 4rpx 0rpx rgba(0,0,0,0.33);
|
||||
}
|
||||
.icon{
|
||||
transform: rotate(-45deg);
|
||||
// margin-left: 10rpx;
|
||||
// margin-top: 10rpx;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
background: #fff;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
margin-top: 15rpx;
|
||||
|
||||
.video {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,461 @@
|
|||
<template>
|
||||
<view class="detailstop">
|
||||
<view class="back" @click="back()">
|
||||
<image src="/static/back.png"></image>
|
||||
返回
|
||||
</view>
|
||||
<view class="title">
|
||||
超速车辆详情
|
||||
</view>
|
||||
<view class="fn" @click="showupimg=true">暂扣</view>
|
||||
</view>
|
||||
<view class="detailspage">
|
||||
|
||||
<view class="time">
|
||||
<view class="l">超速信息</view>
|
||||
<view class="r">放行时间：2025-08-13 18:0</view>
|
||||
</view>
|
||||
<view class="form">
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
车牌号码
|
||||
</view>
|
||||
<view class="txt">
|
||||
<view class="number">晋MP6400</view>
|
||||
</view>
|
||||
<view class="title">超速等级</view>
|
||||
<view class="txt">
|
||||
超速10%-20%
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
设备001位置
|
||||
</view>
|
||||
<view class="txt">
|
||||
中国内蒙古自治区锡林郭勒盟西乌珠穆沁旗巴
|
||||
<view>108.000000 / 109.293</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
设备002位置
|
||||
</view>
|
||||
<view class="txt">
|
||||
中国内蒙古自治区锡林郭勒盟西乌珠穆沁旗巴
|
||||
<view>108.000000 / 109.293</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
通过设备001时间
|
||||
</view>
|
||||
<view class="txt">
|
||||
2025-08-13 12:00:00
|
||||
</view>
|
||||
<view class="title">区间距离</view>
|
||||
<view class="txt">
|
||||
438公里
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
通过设备001时间
|
||||
</view>
|
||||
<view class="txt">
|
||||
2025-08-13 12:00:00
|
||||
</view>
|
||||
<view class="title">区间限速</view>
|
||||
<view class="txt">
|
||||
80km/h
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
最短行驶时长
|
||||
</view>
|
||||
<view class="txt">
|
||||
4小时02分钟
|
||||
</view>
|
||||
<view class="title">实际行驶时长</view>
|
||||
<view class="txt">
|
||||
3小时48分钟
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
平均车速
|
||||
</view>
|
||||
<view class="txt">
|
||||
100km/h
|
||||
</view>
|
||||
<view class="title">待休息时长</view>
|
||||
<view class="txt">
|
||||
15分钟
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="imgs">
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
设备001 抓取照片
|
||||
</view>
|
||||
<view class="img">
|
||||
<image src="/static/tjbj.png"></image>
|
||||
<view class="time">2025-08-13 12:00:00</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
设备001 抓取照片
|
||||
</view>
|
||||
<view class="img">
|
||||
<image src="/static/tjbj.png"></image>
|
||||
<view class="time">2025-08-13 12:00:00</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="title">
|
||||
暂扣信息
|
||||
</view>
|
||||
<view class="tbody">
|
||||
<view class="ul">
|
||||
<view class="title">暂扣时间</view>
|
||||
<view class="txt">2025-08-13 12:00:00</view>
|
||||
<view class="title">放行时间</view>
|
||||
<view class="txt">/</view>
|
||||
</view>
|
||||
<view class="ul">
|
||||
<view class="title">暂扣照片</view>
|
||||
<view class="txt img" >
|
||||
<image src="/static/tjbj.png"></image>
|
||||
</view>
|
||||
<view class="title">放行照片</view>
|
||||
<view class="txt img">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="okfication" v-if="showupimg" @click.stop="showupimg=false">
|
||||
<view class="box" @click.stop="showupimg=true">
|
||||
<view class="close" @click.stop="showupimg=false"> <uni-icons type="closeempty" color="#585757" size="20rpx"></uni-icons>
|
||||
</view>
|
||||
<view class="title">
|
||||
<image src="/static/f.png" mode=""></image>
|
||||
<view class="txt">
|
||||
<view class="typename">车辆放行</view>
|
||||
<view class="time">放行时间：2025-08-13 15:0</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="upimg" @click="getimg">
|
||||
<view class="icon">
|
||||
<uni-icons color="#4D7BFF" type="plusempty" size="30rpx"></uni-icons>
|
||||
<view class="h3">上传照片</view>
|
||||
<view class="desc">请上传车辆的行驶证或现场车辆照片</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fn">
|
||||
<view @click.stop="showupimg=false">取消</view>
|
||||
<view>确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import {
|
||||
ref
|
||||
} from "vue";
|
||||
const showupimg=ref(false)
|
||||
|
||||
function load() {
|
||||
console.log('预警信息load')
|
||||
}
|
||||
|
||||
function hide() {
|
||||
|
||||
showupimg.value=false;
|
||||
}
|
||||
|
||||
function show() {
|
||||
console.log('预警信息show')
|
||||
}
|
||||
|
||||
function back() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
function getimg(){
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: function (res) {
|
||||
console.log(JSON.stringify(res.tempFilePaths));
|
||||
}
|
||||
});
|
||||
}
|
||||
defineExpose({
|
||||
load,
|
||||
hide,
|
||||
show
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.okfication{
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
.box{
|
||||
position: absolute;
|
||||
width:340rpx;
|
||||
background: #fff;
|
||||
border-radius: 3rpx;
|
||||
padding: 15rpx 30rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
.close{
|
||||
position: absolute;
|
||||
top: 15rpx;
|
||||
right: 15rpx;
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
.typename{
|
||||
font-weight: 800;
|
||||
font-size: 13rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.time{
|
||||
font-size: 11rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
.upimg{
|
||||
border: 1px dashed #4D7BFF;
|
||||
border-radius: 5rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 15rpx 0;
|
||||
text-align: center;
|
||||
height: 140rpx;
|
||||
.icon{
|
||||
.h3{
|
||||
font-weight: 800;
|
||||
color: #4D7BFF;
|
||||
font-size: 11rpx;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 7rpx;
|
||||
}
|
||||
.desc{
|
||||
font-size: 11rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.fn{
|
||||
display: flex;
|
||||
gap:15rpx;
|
||||
view{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
border-radius: 100rpx;
|
||||
line-height: 32rpx;
|
||||
font-size: 11rpx;
|
||||
font-weight: 800;
|
||||
background: #E8EEF5;
|
||||
&:nth-of-type(2){
|
||||
background: linear-gradient( 45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.detailstop{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15rpx;
|
||||
background: #E7E7ED;
|
||||
position: sticky;
|
||||
top: 0rpx;
|
||||
.back{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
width: 14rpx;
|
||||
height: 10rpx;
|
||||
margin-right: 7rpx;
|
||||
}
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
color: #4D7BFF;
|
||||
}
|
||||
.title{
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.fn{
|
||||
font-weight: 800;
|
||||
background: #FE5F13;
|
||||
color: #fff;
|
||||
padding: 7rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 11rpx;
|
||||
}
|
||||
}
|
||||
.detailspage{
|
||||
background: #fff;
|
||||
border-radius: 8rpx;
|
||||
margin:0 15rpx;
|
||||
padding: 15rpx;
|
||||
.time{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.l{
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.r{
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
color: #4D7BFF;
|
||||
}
|
||||
}
|
||||
.form{
|
||||
margin: 15rpx 0;
|
||||
border-radius: 3rpx;
|
||||
overflow: hidden;
|
||||
border: 1px solid #979797;
|
||||
.item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #979797;
|
||||
&>view{
|
||||
&:nth-last-of-type(1){
|
||||
border: none;
|
||||
}
|
||||
border-right: 1px solid #979797;
|
||||
}
|
||||
&:nth-last-of-type(1){
|
||||
border: none;
|
||||
}
|
||||
.title{
|
||||
|
||||
background:#F3F5F8;
|
||||
font-size: 9rpx;
|
||||
padding:7rpx;
|
||||
width: 90rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.txt{
|
||||
flex: 1;
|
||||
font-size: 9rpx;
|
||||
text-align: left;
|
||||
padding: 7rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
view{
|
||||
font-size: 9rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.imgs{
|
||||
display: flex;
|
||||
gap: 15rpx;
|
||||
.item{
|
||||
flex: 1;
|
||||
.title{
|
||||
margin: 7rpx 0;
|
||||
font-size: 11rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
.img{
|
||||
width: 100%;
|
||||
height: 135rpx;
|
||||
position: relative;
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.time{
|
||||
position: absolute;
|
||||
padding: 10rpx;
|
||||
color: #fff;
|
||||
font-size: 11rpx;
|
||||
bottom: 0rpx;
|
||||
left: 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.info{
|
||||
&>.title{
|
||||
margin: 7rpx 0;
|
||||
font-size: 11rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
.tbody{
|
||||
border: 1px solid #979797;
|
||||
border-radius: 3rpx;
|
||||
overflow: hidden;
|
||||
.ul{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
&:nth-last-of-type(1){
|
||||
border: none;
|
||||
}
|
||||
border-bottom: 1px solid #979797;
|
||||
.title{
|
||||
font-size: 9rpx;
|
||||
width: 55rpx;
|
||||
text-align: center;
|
||||
background: #F3F5F8;
|
||||
padding: 7rpx;
|
||||
border-left: 1px solid #979797;
|
||||
border-right: 1px solid #979797;
|
||||
&:nth-of-type(1){
|
||||
border-left:none;
|
||||
}
|
||||
}
|
||||
.txt{
|
||||
font-size: 9rpx;
|
||||
padding: 7rpx;
|
||||
width: calc((100% - 110rpx) / 2);
|
||||
image{
|
||||
width: 100%;
|
||||
height: 94rpx;
|
||||
margin: 0rpx;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,244 @@
|
|||
<template>
|
||||
<!-- 日期弹窗 -->
|
||||
<dateSelection ref="Selectiondate" v-model="showdate" @change="change"></dateSelection>
|
||||
|
||||
|
||||
<view class="tabs">
|
||||
<view class="left" @click="showdate=true">
|
||||
<view class="time" >{{chooseday || '选择日期'}}</view>
|
||||
<image src="/static/time.png"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<input placeholder="搜索超速车辆" />
|
||||
<uni-icons type="search" size="16rpx"></uni-icons>
|
||||
</view>
|
||||
<view class="reset" @click="reset()">重置</view>
|
||||
</view>
|
||||
<scroll-view :scroll-y="true" class="scroll-view">
|
||||
<view v-for="item in 10" class="item">
|
||||
<view class="left">
|
||||
<view class="t">
|
||||
<image src="/static/err.png"></image>
|
||||
车牌号码
|
||||
</view>
|
||||
<view class="num">晋MP6400</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="thead">
|
||||
<view>平均车速</view>
|
||||
<view>超速比例</view>
|
||||
<view>实际行驶时长</view>
|
||||
<view>待休息时长</view>
|
||||
</view>
|
||||
<view class="tbody">
|
||||
<view>100km/h</view>
|
||||
<view>10%-20%</view>
|
||||
<view>4小时02分钟</view>
|
||||
<view>15分钟</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right ">已放行</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
|
||||
|
||||
const showdate=ref(false)
|
||||
const chooseday=ref("")
|
||||
const Selectiondate=ref()
|
||||
function load() {
|
||||
console.log('预警信息load')
|
||||
}
|
||||
|
||||
function hide() {
|
||||
console.log('预警信息hide')
|
||||
}
|
||||
|
||||
function show() {
|
||||
console.log('预警信息show')
|
||||
}
|
||||
function change(e){
|
||||
chooseday.value=e;
|
||||
}
|
||||
|
||||
function reset(){
|
||||
Selectiondate.value.reset();
|
||||
chooseday.value="";
|
||||
}
|
||||
defineExpose({
|
||||
load,
|
||||
hide,
|
||||
show
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
.scroll-view {
|
||||
height: calc(100vh - 70rpx);
|
||||
padding: 1rpx 15rpx;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
background: #fff;
|
||||
border-radius: 3rpx;
|
||||
margin-bottom: 10rpx;
|
||||
overflow: hidden;
|
||||
padding: 10rpx 15rpx;
|
||||
|
||||
.left {
|
||||
.t {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 9rpx;
|
||||
color: #333333;
|
||||
|
||||
image {
|
||||
width: 13rpx;
|
||||
height: 13rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 81rpx;
|
||||
line-height: 20rpx;
|
||||
margin-top: 8rpx;
|
||||
text-align: center;
|
||||
background: #FF9521;
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
border-radius: 5rpx;
|
||||
overflow: hidden;
|
||||
border: 1rpx solid rgba(162, 181, 207, 0.67);
|
||||
|
||||
.thead {
|
||||
background: rgba(162, 181, 207, 0.13);
|
||||
padding: 7rpx 0;
|
||||
display: flex;
|
||||
|
||||
view {
|
||||
width: 90rpx;
|
||||
text-align: center;
|
||||
font-size: 9rpx;
|
||||
color: #76849D;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1rpx;
|
||||
height: 13rpx;
|
||||
background: #C0CDDE;
|
||||
left: 0rpx;
|
||||
top: 50%;
|
||||
transform: translate(-0, -50%);
|
||||
}
|
||||
|
||||
&:nth-of-type(1) {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tbody {
|
||||
display: flex;
|
||||
|
||||
view {
|
||||
text-align: center;
|
||||
padding: 7rpx 0;
|
||||
flex: 1;
|
||||
font-size: 11rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
color: #D10B0B;
|
||||
font-size: 11rpx;
|
||||
width: 60rpx;
|
||||
text-align: center;
|
||||
padding: 5rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15rpx;
|
||||
gap: 15rpx;
|
||||
|
||||
.reset {
|
||||
width: 69rpx;
|
||||
line-height: 31rpx;
|
||||
background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
border-radius: 3rpx;
|
||||
color: #fff;
|
||||
font-size: 11rpx;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 3rpx;
|
||||
line-height: 31rpx;
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
padding: 0rpx 15rpx;
|
||||
flex: 1;
|
||||
|
||||
image {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
background: #FFFFFF;
|
||||
border-radius: 3rpx;
|
||||
width: 282rpx;
|
||||
align-items: center;
|
||||
height: 31rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
input {
|
||||
font-size: 11rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<view class="subpage">
|
||||
<view class="top">
|
||||
<view class="left">
|
||||
<view class="on">设备001</view>
|
||||
<view>设备002</view>
|
||||
</view>
|
||||
<view class="r">
|
||||
2025年08月13日 14:34:00
|
||||
<view>区间测速实时监测中</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="item">
|
||||
<view class="num">333421</view>
|
||||
<view class="title">当天过车数量</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="num">5分17秒</view>
|
||||
<view class="title">距离最后一次监测，已过去：</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view :scroll-y="true">
|
||||
<view class="li" v-for="item in 10">
|
||||
<view class="l">
|
||||
车牌号码
|
||||
<view class="color1">
|
||||
晋MP6400
|
||||
</view>
|
||||
</view>
|
||||
<view class="r">2025-08-13 15:56:00</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
function load(){
|
||||
console.log('过车信息load')
|
||||
}
|
||||
function hide(){
|
||||
console.log('过车信息hide')
|
||||
}
|
||||
function show(){
|
||||
console.log('过车信息show')
|
||||
}
|
||||
defineExpose({
|
||||
load,
|
||||
hide,
|
||||
show
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.subpage{
|
||||
padding: 15rpx;
|
||||
.top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
border-radius:3rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
view{
|
||||
width: 90rpx;
|
||||
text-align: center;
|
||||
line-height: 33rpx;
|
||||
color: #4D7BFF;
|
||||
font-size: 11rpx;
|
||||
&.on{
|
||||
background: linear-gradient( 45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.r{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
view{
|
||||
font-size: 11rpx;
|
||||
color: #06765A;
|
||||
background: linear-gradient( 173deg, #FFFFFF 0%, #C6FDDE 100%);
|
||||
border-radius: 50rpx;
|
||||
padding: 3rpx 10rpx;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.center{
|
||||
display: flex;
|
||||
gap: 15rpx;
|
||||
justify-content: space-between;
|
||||
.item{
|
||||
border-radius: 3rpx;
|
||||
text-align: center;
|
||||
margin: 15rpx 0;
|
||||
flex: 1;
|
||||
padding: 18rpx 0;
|
||||
.num{
|
||||
font-size: 22rpx;
|
||||
color: #4D7BFF;
|
||||
font-weight: 800;
|
||||
}
|
||||
.title{
|
||||
margin-top: 5rpx;
|
||||
font-size: 11rpx;
|
||||
}
|
||||
&:nth-of-type(1){
|
||||
background: linear-gradient( 177deg, #D6E4FA 0%, #FFFFFF 100%);
|
||||
}
|
||||
&:nth-of-type(2){
|
||||
background: linear-gradient( 178deg, #D6FAE4 0%, #FFFFFF 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
scroll-view{
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 175rpx);
|
||||
.li{
|
||||
display: flex;
|
||||
padding: 15rpx;
|
||||
background: #fff;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 3rpx;
|
||||
margin-bottom: 15rpx;
|
||||
.l{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
font-size: 11rpx;
|
||||
view{
|
||||
background:#FF9521 ;
|
||||
text-align: center;
|
||||
padding: 3rpx 10rpx;
|
||||
border-radius: 3rpx;
|
||||
margin-left: 15rpx;
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
}
|
||||
}
|
||||
.r{
|
||||
font-size: 11rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,251 @@
|
|||
<template>
|
||||
<!-- 日期弹窗 -->
|
||||
<dateSelection ref="Selectiondate" v-model="showdate" @change="change"></dateSelection>
|
||||
|
||||
<view class="tabs">
|
||||
<view class="left" @click="showdate=true">
|
||||
<view class="time" :class="{on:chooseday}">
|
||||
|
||||
<block v-if="chooseday">{{chooseday}}{{getDateDescription(chooseday)}}</block>
|
||||
<block v-if="!chooseday">选择日期</block>
|
||||
</view>
|
||||
<image src="/static/time.png"></image>
|
||||
</view>
|
||||
<view class="reset" @click="reset()">重置</view>
|
||||
</view>
|
||||
<view class="totalTime">
|
||||
<view class="name">281 - 内蒙古锡盟交管支队二连浩特市</view>
|
||||
<view class="time">16小时19分35秒</view>
|
||||
</view>
|
||||
<view class="ul">
|
||||
<view class="li">
|
||||
<view class="num">295</view>
|
||||
<view class="title">过车数量</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="num">295</view>
|
||||
<view class="title">预警数量</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="num">295</view>
|
||||
<view class="title">预警比例</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="num">295</view>
|
||||
<view class="title">查扣比例</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="statistics">
|
||||
<view class="title">各超速类型数量对比</view>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="bar" :opts="opts" :chartData="chartData" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script module="mapbaidu" lang="renderjs">
|
||||
</script>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
const showdate = ref(false)
|
||||
const Selectiondate = ref();
|
||||
const chooseday = ref("")
|
||||
const opts = {
|
||||
color: ["#4D7BFF"],
|
||||
padding: [15, 30, 0, 5],
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
showBox: false,
|
||||
xAxis: {
|
||||
boundaryGap: "justify",
|
||||
disableGrid: false,
|
||||
min: 0,
|
||||
axisLine: false,
|
||||
max: 40
|
||||
},
|
||||
yAxis: {},
|
||||
extra: {
|
||||
bar: {
|
||||
type: "group",
|
||||
width: 20,
|
||||
meterBorde: 1,
|
||||
meterFillColor: "#FFFFFF",
|
||||
activeBgColor: "#000000",
|
||||
activeBgOpacity: 0.08,
|
||||
barBorderRadius: [6, 6, 0, 0],
|
||||
seriesGap: 2,
|
||||
categoryGap: 2,
|
||||
labelPosition: "center"
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
const chartData =ref({})
|
||||
|
||||
function change(e) {
|
||||
chooseday.value = e;
|
||||
}
|
||||
|
||||
function reset() {
|
||||
Selectiondate.value.reset();
|
||||
chooseday.value = "";
|
||||
}
|
||||
|
||||
function getDateDescription(dateString) {
|
||||
// 将日期字符串转换为 Date 对象
|
||||
const date = new Date(dateString);
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
// 计算两个日期之间的天数差
|
||||
const diffTime = Math.abs(today - date);
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffDays === 0) {
|
||||
return "(今天)";
|
||||
} else if (diffDays === 1) {
|
||||
return "(昨天)";
|
||||
} else if (diffDays === 2) {
|
||||
return "(前天)";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 示例使用
|
||||
|
||||
function load() {
|
||||
console.log('统计load')
|
||||
}
|
||||
|
||||
function hide() {
|
||||
console.log('统计hide')
|
||||
}
|
||||
|
||||
function show() {
|
||||
chartData.value={
|
||||
categories: ["超速50%以上", "超速20%-50%", "超速10%-20%", "超速10%以下"],
|
||||
series: [{
|
||||
name: "",
|
||||
data: [35, 36, 31, 33]
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
}
|
||||
defineExpose({
|
||||
load,
|
||||
hide,
|
||||
show
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.charts-box {
|
||||
height: 150rpx;
|
||||
}
|
||||
.totalTime{
|
||||
background:url("/static/tjbj.png");
|
||||
background-size: 100% 100%;
|
||||
margin:0 15rpx;
|
||||
padding: 15rpx;
|
||||
.name{
|
||||
font-weight: 500;
|
||||
font-size: 13rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.time{
|
||||
font-weight: 700;
|
||||
font-size: 17rpx;
|
||||
color: #4D7BFF;
|
||||
margin-top: 11rpx;
|
||||
}
|
||||
|
||||
}
|
||||
.ul{
|
||||
display: flex;
|
||||
gap: 15rpx;
|
||||
margin: 15rpx;
|
||||
.li{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 3rpx;
|
||||
padding: 17rpx 0;
|
||||
.num{
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #4D7BFF;
|
||||
}
|
||||
.title{
|
||||
font-size: 11rpx;
|
||||
margin-top: 9rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.statistics{
|
||||
background: #fff;
|
||||
margin: 15rpx;
|
||||
border-radius: 3rpx;
|
||||
padding: 15rpx;
|
||||
.title{
|
||||
font-size: 11rpx;
|
||||
}
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15rpx;
|
||||
gap: 15rpx;
|
||||
|
||||
.reset {
|
||||
width: 69rpx;
|
||||
line-height: 31rpx;
|
||||
background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
border-radius: 3rpx;
|
||||
color: #fff;
|
||||
font-size: 11rpx;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 3rpx;
|
||||
line-height: 31rpx;
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
padding: 0rpx 15rpx;
|
||||
width: 150rpx;
|
||||
|
||||
image {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
color: #000000;
|
||||
|
||||
&.on {
|
||||
color: #4D7BFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,284 @@
|
|||
<template>
|
||||
<view class="topstatistics">
|
||||
<view class="li">
|
||||
<view class="num">超速20%以上</view>
|
||||
<view class="title">预警级别</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="num">438公里</view>
|
||||
<view class="title">区间距离</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="num">80km/h</view>
|
||||
<view class="title">区间限速</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="num">4小时38分钟</view>
|
||||
<view class="title">最短行驶时长</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabs">
|
||||
<view class="left">
|
||||
<view class="nav on">
|
||||
超速车辆
|
||||
</view>
|
||||
<view class="nav">
|
||||
暂扣车辆
|
||||
</view>
|
||||
<view class="nav">
|
||||
放行车辆
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<input placeholder="搜索超速车辆" />
|
||||
<uni-icons type="search" size="16rpx"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view :scroll-y="true" class="scroll-view">
|
||||
<view v-for="item in 10" class="item">
|
||||
<view class="left">
|
||||
<view class="t">
|
||||
<image src="/static/err.png"></image>
|
||||
车牌号码
|
||||
</view>
|
||||
<view class="num">晋MP6400</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="thead">
|
||||
<view>平均车速</view>
|
||||
<view>超速比例</view>
|
||||
<view>实际行驶时长</view>
|
||||
<view>待休息时长</view>
|
||||
</view>
|
||||
<view class="tbody">
|
||||
<view>100km/h</view>
|
||||
<view>10%-20%</view>
|
||||
<view>4小时02分钟</view>
|
||||
<view>15分钟</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right" @click="showdetails=true">暂扣</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<pageanimation v-model="showdetails" @close="refdetails.hide()">
|
||||
<pagedetails ref="refdetails" />
|
||||
</pageanimation>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from "vue";
|
||||
import pagedetails from "./details.vue";
|
||||
const refdetails = ref()
|
||||
const showdetails=ref(false)
|
||||
|
||||
function load() {
|
||||
console.log('预警信息load')
|
||||
}
|
||||
|
||||
function hide() {
|
||||
console.log('预警信息hide')
|
||||
|
||||
}
|
||||
|
||||
function show() {
|
||||
console.log('预警信息show')
|
||||
}
|
||||
defineExpose({
|
||||
load,
|
||||
hide,
|
||||
show
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.scroll-view {
|
||||
height: calc(100vh - 140rpx);
|
||||
padding: 1rpx 15rpx;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
background: #fff;
|
||||
border-radius: 3rpx;
|
||||
margin-bottom: 10rpx;
|
||||
overflow: hidden;
|
||||
padding: 10rpx 15rpx;
|
||||
|
||||
.left {
|
||||
.t {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 9rpx;
|
||||
color: #333333;
|
||||
|
||||
image {
|
||||
width: 13rpx;
|
||||
height: 13rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 81rpx;
|
||||
line-height: 20rpx;
|
||||
margin-top: 8rpx;
|
||||
text-align: center;
|
||||
background: #FF9521;
|
||||
font-weight: 800;
|
||||
font-size: 11rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
border-radius: 5rpx;
|
||||
overflow: hidden;
|
||||
border: 1rpx solid rgba(162, 181, 207, 0.67);
|
||||
|
||||
.thead {
|
||||
background: rgba(162, 181, 207, 0.13);
|
||||
padding: 7rpx 0;
|
||||
display: flex;
|
||||
|
||||
view {
|
||||
width: 90rpx;
|
||||
text-align: center;
|
||||
font-size: 9rpx;
|
||||
color: #76849D;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1rpx;
|
||||
height: 13rpx;
|
||||
background: #C0CDDE;
|
||||
left: 0rpx;
|
||||
top: 50%;
|
||||
transform: translate(-0, -50%);
|
||||
}
|
||||
|
||||
&:nth-of-type(1) {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tbody {
|
||||
display: flex;
|
||||
|
||||
view {
|
||||
text-align: center;
|
||||
padding: 7rpx 0;
|
||||
flex: 1;
|
||||
font-size: 11rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
border-radius: 15rpx;
|
||||
border: 1rpx solid #D10B0B;
|
||||
color: #D10B0B;
|
||||
font-weight: 600;
|
||||
font-size: 11rpx;
|
||||
width: 60rpx;
|
||||
text-align: center;
|
||||
padding: 5rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 15rpx;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 3rpx;
|
||||
line-height: 31rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.nav {
|
||||
width: 91rpx;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 11rpx;
|
||||
color: #4D7BFF;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
border-left: 1px solid #eee;
|
||||
|
||||
&.on {
|
||||
background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
background: #FFFFFF;
|
||||
border-radius: 3rpx;
|
||||
width: 282rpx;
|
||||
align-items: center;
|
||||
height: 31rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
input {
|
||||
font-size: 11rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topstatistics {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
padding: 15rpx 0;
|
||||
|
||||
.li {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
border-left: 2rpx solid #eee;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-weight: 800;
|
||||
font-size: 13rpx;
|
||||
color: #4D7BFF;
|
||||
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 9rpx;
|
||||
color: #333333;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<image class="bj" src="/static/signIn/signInbj.png" mode="aspectFill"></image>
|
||||
<view class="box">
|
||||
<image class="title" src="/static/signIn/title.png" mode="aspectFit"></image>
|
||||
<view class="desc">欢迎登录！很高兴再次见到你</view>
|
||||
<view class="from">
|
||||
<view class="input" :class="{on:isname}">
|
||||
<image src="/static/signIn/2.png"></image>
|
||||
<input cursor-spacing='15' @focus="isname=true" @blur="isname=false" placeholder="请填写账号"/>
|
||||
</view>
|
||||
<view class="input" :class="{on:ispassword}">
|
||||
<image src="/static/signIn/1.png"></image>
|
||||
<input cursor-spacing='15' v-model="password" @focus="ispassword=true" @blur="ispassword=false" :type="!showpassword?'password':'text'" placeholder="请填密码"/>
|
||||
<view @click="showpassword=!showpassword" v-if="password.length">
|
||||
<uni-icons type="eye-slash-filled" v-if="!showpassword" size="16rpx"></uni-icons>
|
||||
<uni-icons type="eye-filled" v-else size="16rpx"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="checkbox">
|
||||
<checkbox value="cb" activeBackgroundColor='#4D7BFF' :checked="true" color="#ffffff" style="transform:scale(0.7)" />
|
||||
记住密码
|
||||
</view>
|
||||
<view class="submit">登录</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const isname=ref(false);
|
||||
const ispassword=ref(false);
|
||||
const showpassword=ref(false)
|
||||
const name=ref("");
|
||||
const password=ref("")
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
.bj{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.box{
|
||||
position: fixed;
|
||||
|
||||
top: 50%;
|
||||
right: 110rpx;
|
||||
transform: translate(0%,-50%);
|
||||
.title{
|
||||
height: 40rpx;
|
||||
width: 230rpx;
|
||||
}
|
||||
.desc{
|
||||
text-align: center;
|
||||
color: #667085;
|
||||
font-size: 15rpx;
|
||||
margin: 0rpx 0 20rpx 0;
|
||||
}
|
||||
.from{
|
||||
margin-top: 34rpx;
|
||||
.input{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #D0D5DD;
|
||||
padding:7rpx 10rpx;
|
||||
border-radius: 5rpx;
|
||||
margin-bottom: 9rpx;
|
||||
background: #fff;
|
||||
&.on{
|
||||
border: 1px solid #4D7BFF;
|
||||
}
|
||||
input{
|
||||
font-size: 12rpx;
|
||||
margin-right: 7rpx;
|
||||
}
|
||||
image{
|
||||
width: 10rpx;
|
||||
height: 13rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.checkbox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #667085;
|
||||
margin: 15rpx 0;
|
||||
font-size: 11rpx;
|
||||
}
|
||||
.submit{
|
||||
text-align: center;
|
||||
background: #4D7BFF;
|
||||
color: #fff;
|
||||
line-height: 33rpx;
|
||||
font-size: 13rpx;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 896 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 666 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 666 B |
Binary file not shown.
|
After Width: | Height: | Size: 588 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 772 B |
Binary file not shown.
|
After Width: | Height: | Size: 713 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue