分段轨迹

riku

2024-07-03 f57633ef165ae24ae858894e3b9583a00d3ef7f6

 src/components/core/CoreMenu.vue

@@ -1,9 +1,12 @@
<template>
  <div class="map-mode-change flexbox flex-space-between fy-container">
    <template v-for="(item, index) in menu" :key="index">
  <div v-show="status == 0" class="map-mode-change p-events-auto">
    <template v-for="(item, index) in menu" :key="item.path">
      <a :class="btnClz(item.selected)" @click="navTo(index)">
        <div>{{ item.name }}</div>
      </a>
      <!-- <a class="btn-selected mode-btn m-r-8" @click="navTo(index)">
        <div>{{ item.name }}</div>
      </a> -->
    </template>
    <!-- <a class="mode-btn btn-selected">
      <div>污染溯源</div>
@@ -38,6 +41,9 @@
</template>

<script>
import { mapState } from 'pinia';
import { useMapAnimationStore } from '@/stores/map-animation';

export default {
  data() {
    return {
@@ -52,9 +58,13 @@
          path: 'rmode'
        },
        {
          name: '网格化监测',
          path: 'gridmonitor'
          name: '污染溯源2',
          path: 'hmode2'
        }
        // {
        //   name: '网格化监测',
        //   path: 'gridmonitor'
        // }
        // {
        //   name: '用电量监测',
        //   path: 'emode'
@@ -66,10 +76,14 @@
      ]
    };
  },
  computed: {},
  computed: {
    ...mapState(useMapAnimationStore, ['status'])
  },
  methods: {
    btnClz(selected) {
      return 'mode-btn ' + (selected ? 'btn-selected ' : 'btn-unselected ') + 'm-r-8';
      return (
        'mode-btn ' + (selected ? 'btn-selected ' : 'btn-unselected ') + 'm-r-8'
      );
    },
    navTo(index) {
      const m = this.menu;
@@ -82,4 +96,56 @@
  }
};
</script>
<style scoped></style>
<style scoped>
.map-mode-change {
  display: inline-flex;
  position: relative;
  /* left: 10px; */
  /* top: 104px; */
  padding: 0 10px;
  font-size: 1rem;
  font-weight: 900;
  /* background-color: #ffffffad; */
}

.map-mode-change a:hover {
  color: antiquewhite;
}

.mode-btn {
  white-space: nowrap;
  background-color: green;
}

.map-mode-change .btn-selected {
  color: #ffffff;
  padding: 4px 16px;
  cursor: pointer;
  border: 2px solid var(--border-color);
  background-color: #23dad1;
  transform: skew(-30deg);
  text-decoration: none;
  /* -moz-border-radius: 6px; Old Firefox */
  /* box-shadow: 5px 0px 2.5px #888888; */
}

.map-mode-change .btn-selected div {
  transform: skew(30deg);
}

.map-mode-change .btn-unselected {
  color: #5555557e;
  padding: 4px 16px;
  cursor: pointer;
  background-color: #ffffff;
  border: 2px solid #00000015;
  transform: skew(-30deg);
  text-decoration: none;
  /* -moz-border-radius: 6px; Old Firefox */
  /* box-shadow: 5px 0px 2.5px #888888; */
}

.map-mode-change .btn-unselected div {
  transform: skew(30deg);
}
</style>