|
@@ -1,98 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="track-list">
|
|
|
- <template v-if="isActive">
|
|
|
- <div class="track-list-block">
|
|
|
- <template v-for="item in trackList">
|
|
|
- <div>{{item.id}}</div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <div class="track-list-icon __hover" @click="isActive = true">
|
|
|
- <SvgIcon name="tools-ship" color="#ffffff" size="24"/>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script lang="ts">
|
|
|
-import {
|
|
|
- defineComponent,
|
|
|
- computed,
|
|
|
- onMounted,
|
|
|
- ref,
|
|
|
- reactive,
|
|
|
- watch,
|
|
|
- getCurrentInstance,
|
|
|
- ComponentInternalInstance,
|
|
|
- toRefs,
|
|
|
- nextTick
|
|
|
-} from 'vue'
|
|
|
-import {useStore} from 'vuex'
|
|
|
-import {useRouter, useRoute} from 'vue-router'
|
|
|
-import {ElMessage, ElMessageBox} from "element-plus";
|
|
|
-
|
|
|
-export default defineComponent({
|
|
|
- name: '',
|
|
|
- components: {},
|
|
|
- props: {
|
|
|
- trackMap: <any>{}
|
|
|
- },
|
|
|
- setup(props, {emit}) {
|
|
|
- const store = useStore();
|
|
|
- const router = useRouter();
|
|
|
- const route = useRoute();
|
|
|
- const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
|
|
|
- const state = reactive({
|
|
|
- isActive: false,
|
|
|
- trackList: <any>[]
|
|
|
- })
|
|
|
- const trackListCpt = computed(() => {
|
|
|
- const arr: any = []
|
|
|
- console.log(props.trackMap)
|
|
|
- props.trackMap.forEach((v, k) => {
|
|
|
- console.log(v)
|
|
|
- console.log(k)
|
|
|
- })
|
|
|
- return arr
|
|
|
- })
|
|
|
- watch(() => props.trackMap, (n) => {
|
|
|
- state.trackList = []
|
|
|
- n.forEach((v, k) => {
|
|
|
- state.trackList.push({
|
|
|
- id: k,
|
|
|
- value: v
|
|
|
- })
|
|
|
- })
|
|
|
- }, {deep: true})
|
|
|
- onMounted(() => {
|
|
|
- })
|
|
|
- return {
|
|
|
- ...toRefs(state),
|
|
|
- trackListCpt
|
|
|
- }
|
|
|
- },
|
|
|
-})
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-.track-list {
|
|
|
- .track-list-block{
|
|
|
- }
|
|
|
- .track-list-icon {
|
|
|
- width: 44px;
|
|
|
- height: 44px;
|
|
|
- border-radius: 16px;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 8px;
|
|
|
- background: linear-gradient(180deg, #783fd4 0%, #5634e0 100%);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- &.shadow {
|
|
|
- background: rgba(255,255,255,.2);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|