mirror of
https://gitee.com/XiaoLFeng/JSL_OrganizeInternalOA_Web.git
synced 2025-06-08 11:43:04 +08:00
适配浏览器test
This commit is contained in:
parent
b0bdacaf53
commit
8248f7b969
@ -1,14 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="ml-64 container mx-auto flex flex-wrap mt-40 w-full">
|
<div class="mt-40 w-full">
|
||||||
<h2 class="text-3xl font-bold mb-16 dark:text-white">新闻</h2>
|
<div class="md:container mx-auto">
|
||||||
<button class="transition duration-300 ease-in-out transform hover:scale-105 ml-[1138px] border-gray-200 border-2 h-8 w-14 rounded-full flex justify-center items-center">
|
<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">
|
<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"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<div class="flex space-x-16 w-full">
|
</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"
|
<div @mouseover="showMoreButton1=true" @mouseleave="showMoreButton1=false"
|
||||||
class="transition-transform transform-gpu hover:scale-105 relative w-full sm:w-1/2 md:w-1/3 lg:w-1/3 xl:w-1/4 h-[460px] bg-white border border-gray-200 shadow dark:bg-gray-800 dark:border-gray-700"
|
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 dark:bg-gray-800 dark:border-gray-700"
|
||||||
:class="{'hover:bg-green-400':showMoreButton1}"
|
:class="{'hover:bg-green-400':showMoreButton1}"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@ -24,7 +30,7 @@
|
|||||||
2024
|
2024
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-10 ml-52">
|
<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 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
<a href="#" v-if="showMoreButton1" class="inline-flex items-center text-sm font-medium text-center text-white bg-green-400 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||||
<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">
|
<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"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
@ -35,7 +41,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div @mouseover="showMoreButton2=true" @mouseleave="showMoreButton2=false"
|
<div @mouseover="showMoreButton2=true" @mouseleave="showMoreButton2=false"
|
||||||
class="transition-transform transform-gpu hover:scale-105 relative w-full sm:w-1/2 md:w-1/3 lg:w-1/3 xl:w-1/4 h-[460px] bg-white border border-gray-200 shadow dark:bg-gray-800 dark:border-gray-700"
|
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 dark:bg-gray-800 dark:border-gray-700"
|
||||||
:class="{'hover:bg-green-400':showMoreButton2}"
|
:class="{'hover:bg-green-400':showMoreButton2}"
|
||||||
>
|
>
|
||||||
<div class="">
|
<div class="">
|
||||||
@ -51,7 +57,7 @@
|
|||||||
2024
|
2024
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-10 ml-52">
|
<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 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
<a href="#" v-if="showMoreButton2" class="inline-flex items-center text-sm font-medium text-center text-white bg-green-400 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||||
<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">
|
<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"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
@ -62,7 +68,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div @mouseover="showMoreButton3=true" @mouseleave="showMoreButton3=false"
|
<div @mouseover="showMoreButton3=true" @mouseleave="showMoreButton3=false"
|
||||||
class="transition-transform transform-gpu hover:scale-105 hover:bg-green-400 relative w-full sm:w-1/2 md:w-1/3 lg:w-1/3 xl:w-1/4 h-[460px] bg-white border border-gray-200 shadow dark:bg-gray-800 dark:border-gray-700"
|
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 dark:bg-gray-800 dark:border-gray-700"
|
||||||
:class="{'hover:bg-green-400':showMoreButton3}"
|
:class="{'hover:bg-green-400':showMoreButton3}"
|
||||||
>
|
>
|
||||||
<div class="">
|
<div class="">
|
||||||
@ -78,7 +84,7 @@
|
|||||||
2024
|
2024
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-10 ml-52">
|
<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 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
<a href="#" v-if="showMoreButton3" class="inline-flex items-center text-sm font-medium text-center text-white bg-green-400 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||||
<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">
|
<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"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
@ -90,6 +96,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -99,6 +107,7 @@ export default {
|
|||||||
showMoreButton1:false,
|
showMoreButton1:false,
|
||||||
showMoreButton2:false,
|
showMoreButton2:false,
|
||||||
showMoreButton3:false,
|
showMoreButton3:false,
|
||||||
|
LearnMore8:false,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,20 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="md:container w-full mt-40 ml-64">
|
<div class="mt-40 w-full">
|
||||||
<div class="flex">
|
<div class="md:container mx-auto">
|
||||||
|
<div class="flex items-center">
|
||||||
<h2 class="text-3xl font-bold">项目展示</h2>
|
<h2 class="text-3xl font-bold">项目展示</h2>
|
||||||
<button :class="{'text-white':LearnMore0}" class="transition duration-300 ease-in-out transform hover:scale-105 ml-[1050px] border-gray-200 border-2 h-8 w-14 rounded-full flex justify-center items-center">
|
<div @mouseover="LearnMore0=true" @mouseleave="LearnMore0=false" class="ml-auto">
|
||||||
|
<button :class="{'bg-green-400':LearnMore0}" 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">
|
<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"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-24 flex flex-col space-y-8">
|
</div>
|
||||||
|
<div class="mx-auto mt-24 flex flex-col space-y-8">
|
||||||
<div class="flex space-x-12">
|
<div class="flex space-x-12">
|
||||||
<div @mouseover="LearnMore1=true" @mouseleave="LearnMore1=false" class="relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img21.jpg')]">
|
<div @mouseover="LearnMore1=true" @mouseleave="LearnMore1=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assets/images/img21.jpg')]">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="flex absolute bottom-0 h-[30%] w-full" :class="{'bg-white':LearnMore1}">
|
<div class="flex absolute bottom-0 h-[30%] w-full" :class="{'bg-white':LearnMore1}">
|
||||||
<h5 class="ml-5 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore1">项目标题</h5>
|
<h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore1">项目标题</h5>
|
||||||
<button v-if="LearnMore1" class="mt-8 w-6 h-6 ml-52 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
<div class="ml-auto mr-10">
|
||||||
|
<button v-if="LearnMore1" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||||
<svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
<svg class="rtl:rotate-180 w-4 h-4 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"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
</svg>
|
</svg>
|
||||||
@ -22,10 +26,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div @mouseover="LearnMore2=true" @mouseleave="LearnMore2=false" class="relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img22.jpg')]">
|
</div>
|
||||||
|
<div @mouseover="LearnMore2=true" @mouseleave="LearnMore2=false" class=" flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assets/images/img22.jpg')]">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="flex absolute bottom-0 h-[30%] w-full" :class="{'bg-white':LearnMore2}">
|
<div class="flex absolute bottom-0 h-[30%] w-full" :class="{'bg-white':LearnMore2}">
|
||||||
<h5 class="ml-5 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore2">项目标题</h5>
|
<h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore2">项目标题</h5>
|
||||||
|
<div class="ml-auto mr-10">
|
||||||
<button v-if="LearnMore2" class="mt-8 w-6 h-6 ml-52 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
<button v-if="LearnMore2" class="mt-8 w-6 h-6 ml-52 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||||
<svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
<svg class="rtl:rotate-180 w-4 h-4 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"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
@ -34,10 +40,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div @mouseover="LearnMore3=true" @mouseleave="LearnMore3=false" class="relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img23.jpg')]">
|
</div>
|
||||||
|
<div @mouseover="LearnMore3=true" @mouseleave="LearnMore3=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assets/images/img23.jpg')]">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="flex absolute bottom-0 h-[30%] w-full" :class="{'bg-white':LearnMore3}">
|
<div class="flex absolute bottom-0 h-[30%] w-full" :class="{'bg-white':LearnMore3}">
|
||||||
<h5 class="ml-5 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore3">项目标题</h5>
|
<h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore3">项目标题</h5>
|
||||||
|
<div class="ml-auto mr-10">
|
||||||
<button v-if="LearnMore3" class="mt-8 w-6 h-6 ml-52 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
<button v-if="LearnMore3" class="mt-8 w-6 h-6 ml-52 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||||
<svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
<svg class="rtl:rotate-180 w-4 h-4 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"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
@ -47,11 +55,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="flex space-x-12">
|
<div class="flex space-x-12">
|
||||||
<div @mouseover="LearnMore4=true" @mouseleave="LearnMore4=false" class="relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img24.jpg')]">
|
<div @mouseover="LearnMore4=true" @mouseleave="LearnMore4=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assets/images/img24.jpg')]">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="flex absolute bottom-0 h-[30%] w-full" :class="{'bg-white':LearnMore4}">
|
<div class="flex absolute bottom-0 h-[30%] w-full" :class="{'bg-white':LearnMore4}">
|
||||||
<h5 class="ml-5 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore4">项目标题</h5>
|
<h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore4">项目标题</h5>
|
||||||
|
<div class="ml-auto mr-10">
|
||||||
<button v-if="LearnMore4" class="mt-8 w-6 h-6 ml-52 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
<button v-if="LearnMore4" class="mt-8 w-6 h-6 ml-52 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||||
<svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
<svg class="rtl:rotate-180 w-4 h-4 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"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
@ -60,10 +70,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div @mouseover="LearnMore5=true" @mouseleave="LearnMore5=false" class="relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img25.jpg')]">
|
</div>
|
||||||
|
<div @mouseover="LearnMore5=true" @mouseleave="LearnMore5=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-center bg-[url('@/assets/images/img25.jpg')]">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="flex absolute bottom-0 h-[30%] w-full" :class="{'bg-white':LearnMore5}">
|
<div class="flex absolute bottom-0 h-[30%] w-full" :class="{'bg-white':LearnMore5}">
|
||||||
<h5 class="ml-5 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore5">项目标题</h5>
|
<h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore5">项目标题</h5>
|
||||||
|
<div class="ml-auto mr-10">
|
||||||
<button v-if="LearnMore5" class="mt-8 w-6 h-6 ml-52 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
<button v-if="LearnMore5" class="mt-8 w-6 h-6 ml-52 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||||
<svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
<svg class="rtl:rotate-180 w-4 h-4 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"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
@ -72,10 +84,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div @mouseover="LearnMore6=true" @mouseleave="LearnMore6=false" class="relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img26.jpg')]">
|
</div>
|
||||||
|
<div @mouseover="LearnMore6=true" @mouseleave="LearnMore6=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 bg-cover bg-center bg-[url('@/assets/images/img26.jpg')]">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="flex absolute bottom-0 h-[30%] w-full" :class="{'bg-white':LearnMore6}">
|
<div class="flex absolute bottom-0 h-[30%] w-full" :class="{'bg-white':LearnMore6}">
|
||||||
<h5 class="ml-5 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore6"> 项目标题</h5>
|
<h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore6"> 项目标题</h5>
|
||||||
|
<div class="ml-auto mr-10">
|
||||||
<button v-if="LearnMore6" class="mt-8 w-6 h-6 ml-52 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
<button v-if="LearnMore6" class="mt-8 w-6 h-6 ml-52 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||||
<svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
<svg class="rtl:rotate-180 w-4 h-4 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"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
@ -85,10 +99,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -1,24 +1,35 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="ml-64 md:container w-full mt-40">
|
<div class="w-full mt-40">
|
||||||
|
<div class="container mx-auto">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<h2 class="text-3xl font-bold mb-6">
|
<h2 class="text-3xl font-bold mb-6">
|
||||||
关于
|
关于
|
||||||
</h2>
|
</h2>
|
||||||
<button class="transition duration-300 ease-in-out transform hover:scale-105 ml-[1115px] border-gray-200 border-2 h-8 w-14 rounded-full flex justify-center items-center">
|
<div @mouseover="LearnMore7=true" @mouseleave="LearnMore7=false" class="ml-auto">
|
||||||
|
<button :class="{'bg-green-400':LearnMore7}" 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">
|
<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"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="mt-16 h-96 w-[600px] border-2 border-gray-400">
|
<div class="flex-1 mt-16 h-96 w-[600px] border-2 border-gray-400">
|
||||||
团队介绍
|
团队介绍
|
||||||
</div>
|
</div>
|
||||||
<div role="status" class="ml-10 mt-16 mb-40 h-96 w-2/5 bg-white shadow-lg">
|
<div role="status" class="flex-1 ml-10 mt-16 mb-40 h-96 w-2/5 bg-white shadow-lg">
|
||||||
<img src="@/assets/images/img15.jpg" alt="">
|
<img src="@/assets/images/img15.jpg" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script>
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
LearnMore7:false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -1,15 +1,14 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted } from 'vue'
|
import { onMounted } from 'vue'
|
||||||
import { initFlowbite } from 'flowbite'
|
import { initFlowbite } from 'flowbite'
|
||||||
import More from "@/components/MainPage/More.vue";
|
|
||||||
// initialize components based on data attribute selectors
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initFlowbite();
|
initFlowbite();
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class=" w-screen h-auto">
|
<div class="w-[100%] h-auto">
|
||||||
<div>
|
<div class="flex flex-col">
|
||||||
<NavBar/>
|
<NavBar/>
|
||||||
<Carousel/>
|
<Carousel/>
|
||||||
<ProjectList/>
|
<ProjectList/>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user