Merge remote-tracking branch 'origin/dev-dataBoard'

zhengyiming

8 天以前 92921431668181fb6d3387368c751ccc40aba8cf

 src/views/DataBoard/components/DataBoardCenterMapMark.vue

New file
@@ -0,0 +1,102 @@
<template>
  <div class="data-board-center-map-mark">
    <div class="data-board-center-map-mark-item init" v-if="!innerChoose">
      <img :src="DataBoardMapInit" alt="" />
    </div>
    <div class="data-board-center-map-mark-item choose" v-else>
      <div class="data-board-center-map-mark-item-park">
        <div class="data-board-center-map-mark-item-park-name">{{ parkName }}</div>
      </div>
      <img class="data-board-center-map-mark-item-img" :src="DataBoardMapChoose" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
import DataBoardMapInit from '@/assets/dataBoard/data-board-map-init.png';
import DataBoardMapChoose from '@/assets/dataBoard/data-board-map-choose.png';

defineOptions({
  name: 'DataBoardCenterMapMark',
});

type Props = {
  choose: boolean;
  parkName: string;
};

const props = withDefaults(defineProps<Props>(), {
  choose: false,
});

const emit = defineEmits<{
  (e: 'update:choose', value: Props['choose']): void;
}>();

const innerChoose = computed({
  get() {
    return props.choose;
  },
  set(val) {
    emit('update:choose', val);
  },
});
</script>

<style lang="scss" scoped>
@use '@/style/common.scss' as *;

.data-board-center-map-mark {
  .data-board-center-map-mark-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 154px;
    height: 104px;

    &.init {
      img {
        width: 88px;
        height: 72px;
      }
    }

    &.choose {
      position: relative;
      display: flex;
      flex-direction: column;

      .data-board-center-map-mark-item-park {
        padding: 2px;
        border-radius: 8px;
        background-image: linear-gradient(
          to bottom,
          rgba(248, 255, 156, 0.5),
          rgba(193, 245, 6, 0.5)
        );

        .data-board-center-map-mark-item-park-name {
          padding: 12px 26px;
          font-size: 24px;
          font-family: YouSheBiaoTiHei Regular;
          border-radius: 8px;
          text-align: center;
          color: #ffffff;
          background: linear-gradient(
            180deg,
            rgba(255, 176, 29, 0.8) 0%,
            rgba(255, 210, 92, 0.8) 100%
          );
          line-height: 1;
          word-break: keep-all;
        }
      }

      .data-board-center-map-mark-item-img {
        width: 96px;
        height: 54px;
      }
    }
  }
}
</style>