<template>
  <div >
    <button class="show-btn" @click="show = !show">
      {{ show ? '隐藏关键字' : '显示关键字' }}
    </button>
    <div v-if="show" class="show-content">{{ text }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  text: {
    type: String,
    required: true
  }
})
const show = ref(false)
</script>

<style scoped>
.show-btn {
  padding: 8px 20px;
  margin-top: 10px;
  margin-bottom: -10px;
  background: linear-gradient(90deg, #4f8cff 0%, #38c8ff 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(79,140,255,0.15);
  transition: background 0.3s, box-shadow 0.3s;
}
.show-btn:hover {
  background: linear-gradient(90deg, #38c8ff 0%, #4f8cff 100%);
  box-shadow: 0 4px 16px rgba(56,200,255,0.18);
}
.show-content {
  margin-top: 16px;
  padding: 12px 18px;
  background: #f6faff;
  border-radius: 6px;
  color: #333;
  font-size: 15px;
  box-shadow: 0 1px 4px rgba(79,140,255,0.08);
}
</style>