|
|
@@ -0,0 +1,79 @@
|
|
|
+<template>
|
|
|
+ <div class="tools_container">
|
|
|
+ <div v-for="item in tools" :key="item.name" @click="selectTool(item.name)" :class="{ active: activeTool === item.name }" class="tools_item">
|
|
|
+ <img :src="getToolImg(item.name)" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
+
|
|
|
+// 公共路径
|
|
|
+const basePath = '../../../../../assets/img/'
|
|
|
+
|
|
|
+// 工具配置数据
|
|
|
+const tools = ref([
|
|
|
+ {
|
|
|
+ name: '风险列表',
|
|
|
+ img: '风险列表1.png',
|
|
|
+ activeImg: '风险列表2.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '图例',
|
|
|
+ img: '图例1.png',
|
|
|
+ activeImg: '图例2.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '色阶图',
|
|
|
+ img: '色阶图1.png',
|
|
|
+ activeImg: '色阶图2.png'
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+// 当前激活的工具
|
|
|
+const activeTool = ref('')
|
|
|
+
|
|
|
+// 预处理图片路径
|
|
|
+const imgMap = ref({})
|
|
|
+
|
|
|
+// 选择工具
|
|
|
+const selectTool = name => {
|
|
|
+ activeTool.value = name
|
|
|
+}
|
|
|
+
|
|
|
+// 预加载图片路径
|
|
|
+onMounted(() => {
|
|
|
+ tools.value.forEach(item => {
|
|
|
+ imgMap.value[item.name] = {
|
|
|
+ default: new URL(`${basePath}${item.img}`, import.meta.url).href,
|
|
|
+ active: new URL(`${basePath}${item.activeImg}`, import.meta.url).href
|
|
|
+ }
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+// 获取工具图片
|
|
|
+const getToolImg = name => {
|
|
|
+ return activeTool.value === name ? imgMap.value[name]?.active : imgMap.value[name]?.default
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.tools_container {
|
|
|
+ width: 51px;
|
|
|
+ height: 191px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: absolute;
|
|
|
+ top: 70px;
|
|
|
+ right: -61px;
|
|
|
+}
|
|
|
+.tools_item {
|
|
|
+ width: 51px;
|
|
|
+ height: 51px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|
