新增折线图模块功能

riku

2024-05-06 1534aee0339dee8000cdd26c21797cf3ad391f7a

 src/components/core/CoreMenu.vue

@@ -1,9 +1,12 @@
<template>
  <div class="map-mode-change flexbox flex-space-between fy-container">
  <div class="map-mode-change p-events-auto">
    <template v-for="(item, index) in menu" :key="index">
      <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>
@@ -69,7 +72,9 @@
  computed: {},
  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 +87,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>