Работа над журналом для ст. мед сестер

resources/js/Components/AppRadio.vue

@@ -0,0 +1,60 @@
+<script setup>
+import {NRadio} from 'naive-ui'
+const props = defineProps({
+    title: { type: String },
+    description: { type: String, default: null }
+})
+</script>
+
+<template>
+    <NRadio value="pro" class="radio-card">
+        <div class="card-content">
+            <strong class="card-title">{{ title }}</strong>
+            <span v-if="description">{{ description }}</span>
+        </div>
+    </NRadio>
+</template>
+
+<style scoped>
+/* Убираем стандартные отступы Naive UI */
+.radio-card {
+    margin-right: 0 !important;
+    margin-bottom: 0 !important;
+}
+
+/* Скрываем стандартный радио-кружок */
+.radio-card :deep(.n-radio__action) {
+    display: none;
+}
+
+/* Превращаем сам n-radio в карточку */
+.radio-card {
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--n-text-color-disabled);
+    border-radius: 8px;
+    padding: 16px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    min-width: 200px;
+    flex: 1;
+}
+
+.radio-card:hover {
+    border-color: var(--n-dot-color-active);
+}
+
+/* Состояние "выбрано" */
+.radio-card.n-radio--checked {
+    border-color: var(--n-dot-color-active);
+}
+
+/* Отключаем выделение текста внутри карточки */
+.card-content {
+    pointer-events: none;
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+    padding-left: 8px;
+}
+</style>