style: 优化样式

This commit is contained in:
xiaoxian521 2021-10-30 18:56:37 +08:00
parent 8ffd341443
commit c418ab03a2
7 changed files with 23 additions and 6 deletions

View File

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.9 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2.88 18.054a35.897 35.897 0 0 1 8.531-16.32.8.8 0 0 1 1.178 0c.166.18.304.332.413.455a35.897 35.897 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44.019 44.019 0 0 1-6.584-.874zm6.698-1.123l1.157.066L12 19.527l1.265-2.53 1.157-.066a42.137 42.137 0 0 0 4.227-.454A33.913 33.913 0 0 0 12 4.09a33.913 33.913 0 0 0-6.649 12.387c1.395.222 2.805.374 4.227.454zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>

After

Width:  |  Height:  |  Size: 608 B

View File

@ -3,7 +3,7 @@ import AMapLoader from "@amap/amap-jsapi-loader";
import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from "vue"; import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from "vue";
import { mapJson } from "/@/api/mock"; import { mapJson } from "/@/api/mock";
import { deviceDetection } from "/@/utils/deviceDetection"; import { deviceDetection } from "/@/utils/deviceDetection";
import greenCar from "/@/assets/green.png"; import car from "/@/assets/car.png";
export interface MapConfigureInter { export interface MapConfigureInter {
on: Fn; on: Fn;
@ -15,6 +15,10 @@ export interface MapConfigureInter {
plugin?: Fn; plugin?: Fn;
} }
type resultType = {
info: Array<undefined>;
};
export interface mapInter { export interface mapInter {
loading: boolean; loading: boolean;
} }
@ -72,7 +76,7 @@ onBeforeMount(() => {
var { driver, plateNumber, orientation } = data[0]; var { driver, plateNumber, orientation } = data[0];
var content = `<img style="transform: scale(1) rotate(${ var content = `<img style="transform: scale(1) rotate(${
360 - Number(orientation) 360 - Number(orientation)
}deg);" src='${greenCar}' />`; }deg);" src='${car}' />`;
marker.setContent(content); marker.setContent(content);
marker.setLabel({ marker.setLabel({
direction: "bottom", direction: "bottom",
@ -92,7 +96,7 @@ onBeforeMount(() => {
// //
mapJson() mapJson()
.then(res => { .then((res: resultType) => {
let points: object = res.info.map((v: any) => { let points: object = res.info.map((v: any) => {
return { return {
lnglat: [v.lng, v.lat], lnglat: [v.lng, v.lat],

View File

@ -8,6 +8,7 @@ import {
getCurrentInstance getCurrentInstance
} from "vue"; } from "vue";
import { RouterView } from "vue-router"; import { RouterView } from "vue-router";
import backTop from "/@/assets/svg/back_top.svg";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import { usePermissionStoreHook } from "/@/store/modules/permission";
const props = defineProps({ const props = defineProps({
@ -65,7 +66,9 @@ const transitionMain = defineComponent({
<router-view> <router-view>
<template #default="{ Component, route }"> <template #default="{ Component, route }">
<el-scrollbar v-if="props.fixedHeader"> <el-scrollbar v-if="props.fixedHeader">
<el-backtop target=".app-main .el-scrollbar__wrap"></el-backtop> <el-backtop title="回到顶部" target=".app-main .el-scrollbar__wrap">
<backTop />
</el-backtop>
<transitionMain :route="route"> <transitionMain :route="route">
<keep-alive <keep-alive
v-if="keepAlive" v-if="keepAlive"

View File

@ -17,7 +17,11 @@ const toggleClick = () => {
</script> </script>
<template> <template>
<div :class="classes.container" @click="toggleClick"> <div
:class="classes.container"
:title="props.isActive ? '点击折叠' : '点击展开'"
@click="toggleClick"
>
<svg <svg
:class="['hamburger', props.isActive ? 'is-active' : '']" :class="['hamburger', props.isActive ? 'is-active' : '']"
viewBox="0 0 1024 1024" viewBox="0 0 1024 1024"

View File

@ -17,6 +17,7 @@ import { routerArrays } from "./types";
import { emitter } from "/@/utils/mitt"; import { emitter } from "/@/utils/mitt";
import { useEventListener } from "@vueuse/core"; import { useEventListener } from "@vueuse/core";
import { storageLocal } from "/@/utils/storage"; import { storageLocal } from "/@/utils/storage";
import backTop from "/@/assets/svg/back_top.svg";
import { useAppStoreHook } from "/@/store/modules/app"; import { useAppStoreHook } from "/@/store/modules/app";
import fullScreen from "/@/assets/svg/full_screen.svg"; import fullScreen from "/@/assets/svg/full_screen.svg";
import exitScreen from "/@/assets/svg/exit_screen.svg"; import exitScreen from "/@/assets/svg/exit_screen.svg";
@ -191,7 +192,11 @@ const layoutHeader = defineComponent({
<app-main :fixed-header="set.fixedHeader" /> <app-main :fixed-header="set.fixedHeader" />
</div> </div>
<el-scrollbar v-else> <el-scrollbar v-else>
<el-backtop target=".main-container .el-scrollbar__wrap"></el-backtop> <el-backtop
title="回到顶部"
target=".main-container .el-scrollbar__wrap"
><backTop />
</el-backtop>
<layout-header /> <layout-header />
<!-- 主体内容 --> <!-- 主体内容 -->
<app-main :fixed-header="set.fixedHeader" /> <app-main :fixed-header="set.fixedHeader" />