JSL_OrganizeInternalOAWeb_Archive/src/components/MainPage/NewProfile.vue

<template>
  <div class="mt-40 w-full">
    <div class="md:container mx-auto md:w-3/4">
      <div class="flex items-center">
        <h2 class="text-3xl font-bold dark:text-white">新闻</h2>
        <div @mouseover="LearnMore8=true" @mouseleave="LearnMore8=false" class="ml-auto">
          <button :class="{'bg-green-400':LearnMore8}" class="transition duration-300 ease-in-out transform hover:scale-105 border-gray-200 border-2 h-8 w-14 rounded-full flex justify-center items-center">
            <svg class="w-4 h-4 text-gray-400 dark:text-white" 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>
          </button>
        </div>
      </div>
      <div class="mx-auto mt-24 flex flex-col space-y-8">
        <div class="flex space-x-12">
          <div @mouseover="showMoreButton1=true" @mouseleave="showMoreButton1=false"
               class="flex-1 transition-transform transform-gpu hover:scale-105 relative sm:w-1/2 md:w-1/4 lg:w-1/3 xl:w-1/4 h-[500px] bg-white border border-gray-200 shadow"
               :class="{'hover:bg-green-400':showMoreButton1}"
          >
            <div>
              <p class="pl-5 mt-6 truncate text-xl sm:text-base md:text-lg lg:text-xl font-bold tracking-tight text-gray-700 dark:text-white" :class="{'text-white':showMoreButton1}">张三老师发布了：</p>
              <p class="flex justify-center mt-10 mb-3 font-normal text-lg text-gray-700 dark:text-gray-400" :class="{'text-white':showMoreButton1}">梁溪区纪委大数据管理平台项目</p>
              <p class="ml-4 mr-4">主要针对大量数据进行处理，需要大量数据，前后端配合需要的技术有：springboot,vue,mysql等</p>
              <div class="absolute bottom-0 w-full h-[20%] bg-gray-100 mt-[200px] flex sm:text-base md:text-lg lg:text-xl" :class="{'bg-white':showMoreButton1}">
                <div class="flex flex-col">
                  <div class="ml-6 mt-4 font-semibold text-3xl" :class="{'text-green-400':showMoreButton1}">
                    01-17
                  </div>
                  <div class="ml-6 text-lg" :class="{'text-green-400':showMoreButton1}">
                    2024
                  </div>
                </div>
                <div class="mt-10 ml-auto mr-10">
                  <a href="#" v-if="showMoreButton1" class="inline-flex items-center text-sm font-medium text-center text-white bg-green-400 rounded-full">
                    <svg class="rtl:rotate-180 w-4 h-4 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>
          <div @mouseover="showMoreButton2=true" @mouseleave="showMoreButton2=false"
               class="flex-1 transition-transform transform-gpu hover:scale-105 relative sm:w-1/2 md:w-1/4 lg:w-1/3 xl:w-1/4 h-[500px] bg-white border border-gray-200 shadow"
               :class="{'hover:bg-green-400':showMoreButton2}"
          >
            <div class="">
              <p class="pl-5 mt-6 truncate text-xl sm:text-base md:text-lg lg:text-xl font-bold tracking-tight text-gray-700 dark:text-white" :class="{'text-white':showMoreButton2}">张三老师发布了：</p>
              <p class="flex justify-center mt-10 mb-3 font-normal text-lg text-gray-700 dark:text-gray-400" :class="{'text-white':showMoreButton2}">梁溪区纪委大数据管理平台项目</p>
              <p class="ml-4 mr-4">主要针对大量数据进行处理，需要大量数据，前后端配合需要的技术有：springboot,vue,mysql等</p>
              <div class="absolute bottom-0 w-full h-[20%] bg-gray-100 mt-[200px] flex" :class="{'bg-white':showMoreButton2}">
                <div class="flex flex-col">
                  <div class="ml-6 mt-4 font-semibold text-3xl" :class="{'text-green-400':showMoreButton2}">
                    01-17
                  </div>
                  <div class="ml-6 text-lg" :class="{'text-green-400':showMoreButton2}">
                    2024
                  </div>
                </div>
                <div class="mt-10 ml-auto mr-10">
                  <a href="#" v-if="showMoreButton2" class="inline-flex items-center text-sm font-medium text-center text-white bg-green-400 rounded-full">
                    <svg class="rtl:rotate-180 w-4 h-4 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>
          <div @mouseover="showMoreButton3=true" @mouseleave="showMoreButton3=false"
               class="flex-1 transition-transform transform-gpu hover:scale-105 hover:bg-green-400 relative sm:w-1/2 md:w-1/4 lg:w-1/3 xl:w-1/4 h-[500px] bg-white border border-gray-200 shadow"
               :class="{'hover:bg-green-400':showMoreButton3}"
          >
            <div class="">
              <p class="pl-5 mt-6 truncate text-xl sm:text-base md:text-lg lg:text-xl font-bold tracking-tight text-gray-700 dark:text-white" :class="{'text-white':showMoreButton3}">张三老师发布了：</p>
              <p class="flex justify-center mt-10 mb-3 font-normal text-lg text-gray-700 dark:text-gray-400" :class="{'text-white':showMoreButton3}">梁溪区纪委大数据管理平台项目</p>
              <p class="ml-4 mr-4">主要针对大量数据进行处理，需要大量数据，前后端配合需要的技术有：springboot,vue,mysql等</p>
              <div class="absolute bottom-0 w-full h-[20%] bg-gray-100 mt-[200px] flex" :class="{'bg-white':showMoreButton3}">
                <div class="flex flex-col">
                  <div class="ml-6 mt-4 font-semibold text-3xl" :class="{'text-green-400':showMoreButton3}">
                    01-17
                  </div>
                  <div class="ml-6 text-lg" :class="{'text-green-400':showMoreButton3}">
                    2024
                  </div>
                </div>
                <div class="mt-10 ml-auto mr-10">
                  <a href="#" v-if="showMoreButton3" class="inline-flex items-center text-sm font-medium text-center text-white bg-green-400 rounded-full">
                    <svg class="rtl:rotate-180 w-4 h-4 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>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      showMoreButton1:false,
      showMoreButton2:false,
      showMoreButton3:false,
      LearnMore8:false,
    }
  }
}
</script>