diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss index 20be1a3..7965235 100644 --- a/src/assets/css/index.scss +++ b/src/assets/css/index.scss @@ -29,7 +29,7 @@ body { // 滚动条样式 ::-webkit-scrollbar { - width: 5px; + width: 0px; height: 3px; background-color: transparent; } @@ -117,108 +117,11 @@ body { height: 40px; display: flex; align-items: center; - margin-right: 40px; + margin-right: 20px; margin-top: 10px; - .menuItem { - width: 305px; - display: flex; - align-items: center; - justify-content: space-between; - margin-right: 10px; - .menuFor { - width: 41px; - height: 41px; - text-align: center; - margin: 0 auto; - .itemIcon { - width: 100%; - height: 100%; - margin-right: 10px; - cursor: pointer; - img { - width: 100%; - height: 100%; - } - } - } - } - .menuItemQuanping { - width: 10%; - margin-right: 20px; - .menuFor { - text-align: center; - margin: 0 auto; - .itemIcon { - width: 24px; - height: 24px; - cursor: pointer; - img { - width: 100%; - height: 100%; - } - } - } - } - .user { - width: 15%; - height: 100%; - margin-right: 30px; - .el-dropdown { - cursor: pointer; - height: 100%; - img { - width: 32px; - height: 32px; - margin-top: 5px; - } - } - } - .time { - width: 93px; - height: 36px; - .top { - width: 100%; - height: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 12px; - .time_date { - width: 50px; - text-align: center; - color: #fff; - } - span { - border: 0.2px solid #000; - background-color: #000; - } - .weather { - width: 50%; - display: flex; - align-items: center; - color: #fff; - border-left: 1px solid #ccc; - margin-left: 5px; - padding-left: 5px; - img { - width: 10px; - height: 10px; - } - .weather_text { - font-size: 12px; - margin-left: 2px; - } - } - } - .date { - width: 100%; - height: 50%; - text-align: center; - font-size: 20px; - color: #fff; - letter-spacing: 1px; - } - } + color: #61ff3a; + justify-content: space-between; + font-size: 1vw; } } .left-sidebar { @@ -227,7 +130,6 @@ body { position: absolute; top: 60px; left: 0; - pointer-events: auto; padding: 0; margin: 0; padding: 0 40px; @@ -266,8 +168,9 @@ body { } .drone-list { width: 100%; - height: calc(100% - 200px); + height: calc(100% - 140px); margin-top: 25px; + pointer-events: none; .title { width: 100%; height: 40px; @@ -279,9 +182,9 @@ body { margin: 0; overflow: auto; margin-top: 10px; + li { width: 95%; - border-bottom: 1px dashed #ccc; padding: 5px; color: #0144ef; margin-left: 2%; @@ -295,6 +198,7 @@ body { background-size: 100% 100%; background-repeat: no-repeat; background-position: center; + pointer-events: auto; .top { width: 98%; height: 50%; @@ -341,11 +245,11 @@ body { width: 50%; .color-ef { color: #0144ef; - font-size: 14px; + font-size: 1.09vw; } .text-fff { color: #000; - font-size: 12px; + font-size: 1.09vw; } } } @@ -358,6 +262,7 @@ body { background-size: 100% 100%; background-repeat: no-repeat; background-position: center; + pointer-events: auto; .top { width: 98%; height: 30px; @@ -537,13 +442,51 @@ body { } } .navigation-content { - width: 140px; - height: 244px; + width: 100px; + height: 200px; background: url(../img/uavBackfff-big.png); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; margin-left: 9px; + padding: 20px; + pointer-events: auto; + .navigation-content-text { + text-align: left; + margin-bottom: 5px; + font-size: 1.09vw; + .color-ef-fw { + color: #0144ef; + font-size: 1.09vw; + font-weight: 600; + } + .text-fff { + color: #000; + font-size: 1.09vw; + } + } + .navigation-content-qrcode { + width: 80px; + height: 80px; + background-color: red; + margin: 0 auto; + margin-top: 5px; + margin-bottom: 5px; + } + } + .navigation-content-btn { + width: 100%; + .btns { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: space-around; + .el-button--primary { + background-color: #0144ef; + border-color: #0144ef; + } + } } } } diff --git a/src/assets/img/icon_model.png b/src/assets/img/icon_model.png new file mode 100644 index 0000000..548dc75 Binary files /dev/null and b/src/assets/img/icon_model.png differ diff --git a/src/assets/img/icon_postions.png b/src/assets/img/icon_postions.png new file mode 100644 index 0000000..ce5fc54 Binary files /dev/null and b/src/assets/img/icon_postions.png differ diff --git a/src/assets/img/mute.png b/src/assets/img/mute.png new file mode 100644 index 0000000..9966c40 Binary files /dev/null and b/src/assets/img/mute.png differ diff --git a/src/assets/img/query.png b/src/assets/img/query.png new file mode 100644 index 0000000..1d2fca0 Binary files /dev/null and b/src/assets/img/query.png differ diff --git a/src/assets/img/refresh.png b/src/assets/img/refresh.png new file mode 100644 index 0000000..0d1780a Binary files /dev/null and b/src/assets/img/refresh.png differ diff --git a/src/assets/img/setup.png b/src/assets/img/setup.png new file mode 100644 index 0000000..d5dcfac Binary files /dev/null and b/src/assets/img/setup.png differ diff --git a/src/assets/img/sound.png b/src/assets/img/sound.png new file mode 100644 index 0000000..9c41532 Binary files /dev/null and b/src/assets/img/sound.png differ diff --git a/src/assets/img/user.png b/src/assets/img/user.png new file mode 100644 index 0000000..7cb699a Binary files /dev/null and b/src/assets/img/user.png differ diff --git a/src/views/contentData/LeftSidebar/index.vue b/src/views/contentData/LeftSidebar/index.vue index 6d93271..6db3fba 100644 --- a/src/views/contentData/LeftSidebar/index.vue +++ b/src/views/contentData/LeftSidebar/index.vue @@ -127,7 +127,30 @@ -
+ @@ -252,7 +275,9 @@ export default { showAudioPrompt: false }; }, - mounted() {}, + mounted() { + this.startTracking(); + }, watch: { homeData: { handler(newVal) { @@ -333,6 +358,38 @@ export default { } }, methods: { + startTracking() { + if (!navigator.geolocation) { + console.error("您的浏览器不支持地理位置功能"); + return; + } + + this.loading = true; + + // 使用 watchPosition 实时监听位置变化 + this.watchId = navigator.geolocation.watchPosition( + this.handleSuccess, + this.handleError, + { + enableHighAccuracy: true, // 高精度模式 + timeout: 5000, // 超时时间 5 秒 + maximumAge: 0 // 不使用缓存数据 + } + ); + this.isTracking = true; + }, // 位置获取成功 + handleSuccess(position) { + this.loading = false; + this.latitude = position.coords.latitude; + this.longitude = position.coords.longitude; + this.lastUpdated = new Date().toLocaleString(); + console.log(position, "this.watchId"); + }, + // 位置获取失败 + handleError(error) { + this.loading = false; + this.error = this.getErrorMessage(error.code); + }, enableAudio() { this.iswarning = true; const media = this.$refs.uavAudio; diff --git a/src/views/contentData/headerTop/index.vue b/src/views/contentData/headerTop/index.vue index 27d8407..f5cafc7 100644 --- a/src/views/contentData/headerTop/index.vue +++ b/src/views/contentData/headerTop/index.vue @@ -11,122 +11,18 @@ - -