site/resources/js/Pages/Settings/SettingsNotify.vue

<template>
<meta-head title="Оповещения"></meta-head>

<div class="xl:container xl:mx-auto px-2 md:px-3">
    <div class="mt-16 shadow-classic rounded-md bg-indigo-200">
        <div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">

            <settings-menu />

            <div class="col-span-4">
                <div data-simplebar  class="max-h-[500px] overflow-auto my-4 lg:my-8">
                    <div class="divide-y divide-indigo-300">
                        <div class="py-4 px-4 2xl:px-28 lg:items-center flex flex-col lg:grid gap-2 lg:gap-5 grid-cols-12 md:space-x-4">
                            <div class="col-span-4 flex items-center">
                                <div class="flex-shrink-0 mr-5">
                                    <div class="w-14 h-14 md:w-20 md:h-20 rounded-full bg-cover bg-center" style="background-image: url('/image/card1.jpg');"></div>
                                </div>
                                <div class="flex flex-col">
                                    <p class="truncate text-base lg:text-lg font-semibold text-orange">Сергей Сергеев</p>
                                    <p class="truncate lg:mt-1 text-base text-gray-light">10 сен в 17:20</p>
                                </div>
                            </div>
                            <div class="col-span-6 text-white xl:text-xl">
                                оценил(а) вашу фотографию
                            </div>
                            <div class="col-span-2 flex lg:justify-end">
                                <img class="object-cover w-20 h-20" src="/image/user_card2.png" alt="">
                            </div>
                        </div>

                        <div class="py-4 px-4 2xl:px-28 lg:items-center flex flex-col lg:grid gap-2 lg:gap-5 grid-cols-12 md:space-x-4">
                            <div class="col-span-4 flex items-center">
                                <div class="flex-shrink-0 mr-5">
                                    <div class="w-14 h-14 md:w-20 md:h-20 rounded-full bg-cover bg-center" style="background-image: url('/image/card1.jpg');"></div>
                                </div>
                                <div class="flex flex-col">
                                    <p class="truncate text-base lg:text-lg font-semibold text-orange">Сергей Сергеев</p>
                                    <p class="truncate lg:mt-1 text-base text-gray-light">10 сен в 17:20</p>
                                </div>
                            </div>
                            <div class="col-span-6 flex flex-col text-white xl:text-xl">
                                <span>оставил(а) комментарий:</span>
                                <span class="truncate text-base text-gray-light">“Очень красиво”</span>
                            </div>
                            <div class="col-span-2 flex lg:justify-end">
                                <a href="#" class="text-pink text-lg">Перейти</a>
                            </div>
                        </div>

                        <div class="py-4 px-4 2xl:px-28 lg:items-center flex flex-col lg:grid gap-2 lg:gap-5 grid-cols-12 md:space-x-4">
                            <div class="col-span-4 flex items-center">
                                <div class="flex-shrink-0 mr-5">
                                    <div class="w-14 h-14 md:w-20 md:h-20 rounded-full bg-cover bg-center" style="background-image: url('/image/card1.jpg');"></div>
                                </div>
                                <div class="flex flex-col">
                                    <p class="truncate text-base lg:text-lg font-semibold text-orange">Сергей Сергеев</p>
                                    <p class="truncate lg:mt-1 text-base text-gray-light">10 сен в 17:20</p>
                                </div>
                            </div>
                            <div class="col-span-6 flex flex-col text-white xl:text-xl">
                                <span>оставил(а) комментарий:</span>
                                <span class="truncate text-base text-gray-light">“Очень красиво”</span>
                            </div>
                            <div class="col-span-2 flex lg:justify-end">
                                <a href="#" class="text-pink text-lg">Перейти</a>
                            </div>
                        </div>

                        <div class="py-4 px-4 2xl:px-28 lg:items-center flex flex-col lg:grid gap-2 lg:gap-5 grid-cols-12 md:space-x-4">
                            <div class="col-span-4 flex items-center">
                                <div class="flex-shrink-0 mr-5">
                                    <div class="w-14 h-14 md:w-20 md:h-20 rounded-full bg-cover bg-center" style="background-image: url('/image/card1.jpg');"></div>
                                </div>
                                <div class="flex flex-col">
                                    <p class="truncate text-base lg:text-lg font-semibold text-orange">Сергей Сергеев</p>
                                    <p class="truncate lg:mt-1 text-base text-gray-light">10 сен в 17:20</p>
                                </div>
                            </div>
                            <div class="col-span-6 flex flex-col text-white xl:text-xl">
                                <span>оставил(а) комментарий:</span>
                                <span class="truncate text-base text-gray-light">“Очень красиво”</span>
                            </div>
                            <div class="col-span-2 flex lg:justify-end">
                                <a href="#" class="text-pink text-lg">Перейти</a>
                            </div>
                        </div>


                        <div class="py-4 px-4 2xl:px-28 lg:items-center flex flex-col lg:grid gap-2 lg:gap-5 grid-cols-12 md:space-x-4">
                            <div class="col-span-4 flex items-center">
                                <div class="flex-shrink-0 mr-5">
                                    <div class="w-14 h-14 md:w-20 md:h-20 rounded-full bg-cover bg-center" style="background-image: url('/image/card1.jpg');"></div>
                                </div>
                                <div class="flex flex-col">
                                    <p class="truncate text-base lg:text-lg font-semibold text-orange">Сергей Сергеев</p>
                                    <p class="truncate lg:mt-1 text-base text-gray-light">10 сен в 17:20</p>
                                </div>
                            </div>
                            <div class="col-span-6 flex flex-col text-white xl:text-xl">
                                <span>оставил(а) комментарий:</span>
                                <span class="truncate text-base text-gray-light">“Очень красиво”</span>
                            </div>
                            <div class="col-span-2 flex lg:justify-end">
                                <a href="#" class="text-pink text-lg">Перейти</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import Layout from '@/Shared/Layout'
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu'
import MetaHead from '@/Shared/MetaHead'
export default {
  layout: Layout,
  components: {
      MetaHead,
      SettingsMenu,
  },
  methods: {
  },
}
</script>