常用Css样式总结

disable样式

.right-item-import--disabled {
      cursor: not-allowed;
      background-color: #b5b8c4 !important;
      border: 1px solid b5b8c4 !important;
      color: #fff !important;
    }

下拉弹窗框

UI：

<template>
  <span class="reference-button-wrapper">
    <n-icon-btn
      icon="reference"
      :iconSize="16"
      :tooltip="t('methodsCard.reference')"
      @click.stop="toggleDialogVisible"
    />
    <div :class="['dropdown-content', { show: isDialogVisible }]">
      <div class="reference-list">
        <div
          v-for="(reference, index) in references"
          :key="index"
          class="reference-item"
          @dblclick="selectReferenceText($event)"
        >
          <div class="reference-number">{{ index + 1 }}.</div>
          <div class="reference-text">
            {{ reference.text }}
            <!-- <button
                class="copy-btn"
                @click="copyToClipboard(reference.text)"
                :title="t('methodsCard.copyReference')"
              >
                复制
              </button> -->
          </div>
        </div>
      </div>
    </div>
  </span>
</template>

<script setup lang="ts" name="ReferenceButton">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n-bridge';

const { t } = useI18n();
const isDialogVisible = ref(false);
const toggleDialogVisible = () => {
  isDialogVisible.value = !isDialogVisible.value;
};

// 参考文献数据
const references = ref([
  {
    text: 'Liu et al. Hierarchical Graph Convolutional Network Built by Multiscale Atlases for Brain Disorder Diagnosis Using Functional Connectivity IEEE Trans Neural Netw Learn Syst. 2023 Jun 20;PP.',
  },
  {
    text: 'Xing et al. DS-GCNs: Connectome Classification using DynamicSpectral Graph Convolution Networks with Assistant Task Training. CerebCortex. 2021 Jan 5;31(2):1259-1269.',
  },
  {
    text: 'AAL模板/AAL Template:Tzourio-Mazoyeret al.Automated anatomical labeling of activations in SPM using a macroscopic anatomical parcellation of the MNI MRI single-subject brain. Neuroimage. 2002 Jan;15(1):273-89.',
  },
  {
    text: 'Glasser模板/Glasser Template:Glasser et al. A multi-modal parcellation of human cerebral cortex. Nature. 2016 Aug 11;536(7615):171-178.',
  },
  {
    text: 'Gordon模板/Gordon Template:Gordon et al.Generationn and Evaluation of a Cortical Area Parcellation from RestingState Correlations.Cereb Cortex. 2016 Jan; 26(1):288-303.',
  },
  {
    text: 'Subcortical模板/Subcortical Template:Tian et al.Topographic organization of the human subcortex unveiled withfunctional connectivity gradients. Nat Neurosci. 2020 Nov;23(11):1421-1432',
  },
  {
    text: 'Schaefer模板/Schaefer Template:Schaefer et al. Local-Global Parcellation of the Human Cerebral Cortex from Intrinsic Functional Connectivity MRI Cereb Cortex 2018 Sep1;28(9):3095-3114',
  },
]);

/**
 * 复制文本到剪贴板
 */
const copyToClipboard = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text);
    // 这里可以添加成功提示
    console.log('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
    // 降级方案
    const textArea = document.createElement('textarea');
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
  }
};

/**
 * 双击选中文献段落
 */
const selectReferenceText = (event: Event) => {
  const target = event.currentTarget as HTMLElement;
  const textElement = target.querySelector('.reference-text');

  if (textElement) {
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(textElement);
    selection?.removeAllRanges();
    selection?.addRange(range);
  }
};
</script>

<style scoped>
.reference-button-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.dropdown-content {
  position: absolute;
  top: 100%;
  transform: translateX(-92%);
  margin-top: 10px;
  background-color: white;
  width: 403px;
  height: 672px;
  overflow: scroll-y;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 15px;
  z-index: 1;
  display: none;
  color: black;
}
.dropdown-content.show {
  display: block;
}
/* 小三角样式 */
.dropdown-content::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 94%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid white;
}
.reference-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reference-item {
  display: flex;
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  color: #3f3f3f;
  line-height: 22px;
  font-weight: 400;
  flex-direction: row;
}
.reference-number {
  flex-shrink: 0;
  min-width: 24px;
  line-height: 22px;
}
.reference-text {
  flex: 1;
  line-height: 1.6;
  position: relative;
}
</style>