JSL_OrganizeInternalOAWeb_Archive/src/components/NewPage/NewCard.vue

<template>
  <div class="w-full min-h-screen mt-2">
    <div class="container mx-auto w-3/4">
      <nav class="bg-white border-gray-200">
        <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
          <div class="flex md:order-2">
            <div class="relative md:block">
              <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                <svg class="w-4 h-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
                </svg>
              </div>
              <input type="text" id="search-navbar" class="block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500" placeholder="请输入关键字">
            </div>
          </div>
          <div class="items-center justify-between w-full md:flex md:w-auto md:order-1" id="navbar-search">
            <ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800">
              <li>
                <a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0" aria-current="page">全部</a>
              </li>
            </ul>
            <div date-rangepicker class="flex items-center ml-8">
              <div class="relative">
                <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                  <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
                  </svg>
                </div>
                <input name="start" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5" placeholder="Select date start">
              </div>
              <span class="mx-4 text-gray-500">to</span>
              <div class="relative">
                <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                  <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
                  </svg>
                </div>
                <input name="end" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5" placeholder="Select date end">
              </div>
            </div>

          </div>
        </div>
      </nav>
      <div class="flex flex-col space-y-6">
        <div class="flex space-x-28 transition-transform transform-gpu hover:scale-105 h-[200px] bg-gray-50 border border-gray-200 shadow">
          <div class="w-[300px]">
            <img class="h-[200px]" src="@/assets/images/img40.jpg" alt="">
          </div>
          <div class="flex flex-col">
            <div class="mt-8 text-lg text-black">
              千呼万唤始出来，千树万树梨花开。
            </div>
            <div class="text-sm mt-6 text-gray-600">
              等了这么久，勤劳的技术哥不停蹄地敲着代码，终于JSMO的后台今日完成，已经进入了测试阶段
            </div>
          </div>
          <div class="flex flex-col">
            <div class="mt-8 font-semibold text-3xl">
              01-23
            </div>
            <div class="text-lg">
              2024
            </div>
            <div class="mt-10 ml-auto mr-10">
              <a href="#" class="inline-flex items-center text-sm font-medium text-center text-gray-400 hover:text-white hover:bg-green-400 border border-gray-300 rounded-full">
                <svg class="rtl:rotate-180 w-6 h-6 m-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="flex space-x-28 transition-transform transform-gpu hover:scale-105 h-[200px] bg-gray-50 border border-gray-200 shadow">
          <div class="w-[300px]">
            <img class="h-[200px]" src="@/assets/images/img41.jpg" alt="">
          </div>
          <div class="flex flex-col">
            <div class="mt-8 text-lg text-black">
              千呼万唤始出来，千树万树梨花开。
            </div>
            <div class="text-sm mt-6 text-gray-600">
              等了这么久，勤劳的技术哥不停蹄地敲着代码，终于JSMO的后台今日完成，已经进入了测试阶段
            </div>
          </div>
          <div class="flex flex-col">
            <div class="mt-8 font-semibold text-3xl">
              01-23
            </div>
            <div class="text-lg">
              2024
            </div>
            <div class="mt-10 ml-auto mr-10">
              <a href="#"  class="inline-flex items-center text-sm font-medium text-center text-gray-400 hover:text-white hover:bg-green-400 border border-gray-300 rounded-full">
                <svg class="rtl:rotate-180 w-6 h-6 m-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="flex space-x-28 transition-transform transform-gpu hover:scale-105 h-[200px] bg-gray-50 border border-gray-200 shadow">
          <div class="w-[300px]">
            <img class="h-[200px]" src="@/assets/images/img42.jpg" alt="">
          </div>
          <div class="flex flex-col">
            <div class="mt-8 text-lg text-black">
              千呼万唤始出来，千树万树梨花开。
            </div>
            <div class="text-sm mt-6 text-gray-600">
              等了这么久，勤劳的技术哥不停蹄地敲着代码，终于JSMO的后台今日完成，已经进入了测试阶段
            </div>
          </div>
          <div class="flex flex-col">
            <div class="mt-8 font-semibold text-3xl">
              01-23
            </div>
            <div class="text-lg">
              2024
            </div>
            <div class="mt-10 ml-auto mr-10">
              <a href="#"  class="inline-flex items-center text-sm font-medium text-center text-gray-400 hover:text-white hover:bg-green-400 border border-gray-300 rounded-full">
                <svg class="rtl:rotate-180 w-6 h-6 m-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <nav aria-label="Page navigation example" class="mt-10">
        <ul class="flex items-center -space-x-px h-10 text-base">
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700">
              <span class="sr-only">Previous</span>
              <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
              </svg>
            </a>
          </li>
          <li>
            <a href="#" aria-current="page" class="flex items-center justify-center px-4 h-10 leading-tight text-blue-600 bg-blue-50 border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
              1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
              2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-blue-300  hover:bg-blue-100 hover:text-blue-700">
              3
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
              4
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
              5
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700">
              <span class="sr-only">Next</span>
              <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
              </svg>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>


<script>

</script>