fuse-code/src/views/measure/sign.vue

<template>
  <ui-group-option class="sign-measure">
    <div class="info">
      <ui-icon :type="MeasureTypeMeta[measure.type].icon" class="type" />
      <div>
        <p>{{ measure.desc }} {{ MeasureTypeMeta[measure.type].unit }}</p>
        <span>{{ MeasureTypeMeta[measure.type].unitDesc }}</span>
      </div>
    </div>
    <div class="actions" @click.stop>
      <ui-icon type="del" ctrl @click.stop="$emit('delete')" v-if="edit" />
      <ui-icon type="pin" ctrl @click.stop="fly" />
    </div>
  </ui-group-option>
</template>

<script setup lang="ts">
import { MeasureTypeMeta } from '@/store'
import { getSceneMeasure } from '@/sdk'

import type { Measure } from '@/store'

const props = withDefaults(
  defineProps<{ measure: Measure, edit?: boolean }>(),
  { edit: true }
)

defineEmits<{ (e: 'delete'): void }>()

const fly = () => {
  getSceneMeasure(props.measure)?.fly()
}

</script>

<style lang="scss" scoped>
.sign-measure {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  margin: 0;
  border-bottom: 1px solid var(--colors-border-color);
  position: relative;

  .info {
    flex: 1;

    display: flex;
    align-items: center;

    .type {
      width: 48px;
      height: 48px;
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      background: rgba(0,0,0,0.5);
      font-size: 18px;
      align-items: center;
      justify-content: center;
    }

    div {
      margin-left: 10px;

      p {
        color: #fff;
        font-size: 14px;
      }

      span {
        color: rgba(255,255,255,0.6);;
        font-size: 12px;
      }
    }
  }
  
  .actions {
    flex: none;
    > * {
      margin-left: 22px;
    }
  }  
}


</style>