mirror of
https://gitee.com/XiaoLFeng/JSL_OrganizeInternalOA_Web.git
synced 2025-06-08 11:43:04 +08:00
继续完善主页
This commit is contained in:
parent
df641a502d
commit
5af6579d56
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="controls-carousel" class="relative w-full" data-carousel="slide">
|
<div id="controls-carousel" class="w-full relative" data-carousel="slide">
|
||||||
<!-- Carousel wrapper -->
|
<!-- Carousel wrapper -->
|
||||||
<div class="relative h-56 overflow-hidden rounded-lg md:h-[600px]">
|
<div class="relative h-56 overflow-hidden md:h-[600px]">
|
||||||
<!-- Item 1 -->
|
<!-- Item 1 -->
|
||||||
<div class="hidden duration-700 ease-in-out" data-carousel-item>
|
<div class="hidden duration-700 ease-in-out" data-carousel-item>
|
||||||
<img src="@/assets/images/img1.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
|
<img src="@/assets/images/img1.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="default-carousel" class="mt-40 relative w-full" data-carousel="slide">
|
<div id="default-carousel" class="mt-40 relative w-full" data-carousel="slide">
|
||||||
<!-- Carousel wrapper -->
|
<!-- Carousel wrapper -->
|
||||||
<div class="relative overflow-hidden rounded-lg h-[600px]">
|
<div class="relative overflow-hidden h-[600px]">
|
||||||
<!-- Item 1 -->
|
<!-- Item 1 -->
|
||||||
<div class="text-white hidden duration-700 ease-in-out bg-green-400 flex flex-col justify-center items-center" data-carousel-item>
|
<div class="text-white hidden duration-700 ease-in-out bg-green-400 flex flex-col justify-center items-center" data-carousel-item>
|
||||||
<img class="w-20 h-20 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="@/assets/images/img4.jpg" alt="Bordered avatar">
|
<img class="w-20 h-20 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="@/assets/images/img4.jpg" alt="Bordered avatar">
|
||||||
|
|||||||
@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container w-auto mt-40 bg-gray-700 h-[400px]">
|
<div class="w-full mt-40 bg-gray-700 h-[400px]">
|
||||||
<div class="flex ml-52 text-white">
|
<div class="flex text-white">
|
||||||
<div>
|
<div class="">
|
||||||
<p class="pt-32 text-2xl">
|
<p class="pt-32 pl-52 text-2xl">
|
||||||
联系
|
联系
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="ml-72">
|
<div class="ml-96 pl-48">
|
||||||
<p class="mt-32 text-xl">
|
<p class="mt-32 text-xl">
|
||||||
无锡学院-职业技术学院联合
|
无锡学院-职业技术学院联合
|
||||||
</p>
|
</p>
|
||||||
@ -21,7 +21,7 @@
|
|||||||
传真
|
传真
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-32 ml-72">
|
<div class="mt-32 ml-80">
|
||||||
<p class="mt-24">
|
<p class="mt-24">
|
||||||
邮编
|
邮编
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -1,26 +1,42 @@
|
|||||||
<template>
|
<template>
|
||||||
<nav class="w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-gray-600">
|
<nav class="text-base z-50 sticky top-0 bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700">
|
||||||
<div class="container w-full flex flex-wrap items-center justify-between mx-auto p-4">
|
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
||||||
<div>
|
<a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
|
||||||
<span class="ml-6 text-2xl font-semibold dark:text-white">LOGO</span>
|
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">LOGO</span>
|
||||||
|
</a>
|
||||||
|
<button data-collapse-toggle="navbar-dropdown" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-dropdown" aria-expanded="false">
|
||||||
|
<span class="sr-only">Open main menu</span>
|
||||||
|
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="flex md:order-2 md:space-x-0 rtl:space-x-reverse">
|
||||||
|
<a href="/login" class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||||
|
登录 |
|
||||||
|
</a>
|
||||||
|
<a href="/register" class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg pl-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||||
|
注册
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex md:order-2 space-x-6 mr-10">
|
<div class="hidden w-full md:block md:w-auto" id="navbar-dropdown">
|
||||||
<a href="/login" class="text-gray-500 hover:text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">登录</a>
|
<ul class="flex flex-col font-medium p-4 md:p-0 mt-4 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 md:dark:bg-gray-900 dark:border-gray-700">
|
||||||
<a href="/register" class="ml-6 text-gray-500 hover:text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">注册</a>
|
|
||||||
</div>
|
|
||||||
<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-sticky">
|
|
||||||
<ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
|
||||||
<li>
|
<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 md:dark:text-blue-500" aria-current="page">主页</a>
|
<a href="/" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-500 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent" aria-current="page">
|
||||||
|
首页
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<button class=" flex items-center py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
|
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">项目</a>
|
||||||
|
</li>
|
||||||
|
<li class="relative">
|
||||||
|
<button @click="toggleDropdown()" id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">
|
||||||
关于
|
关于
|
||||||
<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
||||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<div id="dropdownNavbar" class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
|
<!-- Dropdown menu -->
|
||||||
|
<div v-if="isDropdownOpen" id="dropdownNavbar" class="absolute font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
|
||||||
<ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">关于我们</a>
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">关于我们</a>
|
||||||
@ -32,21 +48,30 @@
|
|||||||
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">项目合作</a>
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">项目合作</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="py-1">
|
|
||||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign out</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">服务内容</a>
|
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">团队</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">联系我们</a>
|
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">新闻</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isDropdownOpen: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleDropdown() {
|
||||||
|
this.isDropdownOpen = !this.isDropdownOpen;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
@ -1,15 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="ml-64 container mt-40 w-full">
|
<div class="ml-64 container mx-auto flex flex-wrap mt-40 w-full">
|
||||||
<h2 class="text-3xl font-bold mb-16 text-gray-900 dark:text-white">新闻</h2>
|
<h2 class="text-3xl font-bold mb-16 dark:text-white">新闻</h2>
|
||||||
<div class="flex space-x-16">
|
<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">
|
||||||
|
<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 class="flex space-x-16 w-full">
|
||||||
<div @mouseover="showMoreButton1=true" @mouseleave="showMoreButton1=false"
|
<div @mouseover="showMoreButton1=true" @mouseleave="showMoreButton1=false"
|
||||||
class="transition-transform transform-gpu hover:scale-105 relative w-[375px] h-[460px] bg-white border border-gray-200 shadow dark:bg-gray-800 dark:border-gray-700"
|
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="{'hover:bg-green-400':showMoreButton1}"
|
:class="{'hover:bg-green-400':showMoreButton1}"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<p class="pl-5 mt-6 text-xl font-bold tracking-tight text-gray-700 dark:text-white" :class="{'text-white':showMoreButton1}">张三老师发布了：</p>
|
<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="flex justify-center mt-10 mb-3 font-normal text-lg text-gray-700 dark:text-gray-400" :class="{'text-white':showMoreButton1}">梁溪区纪委大数据管理平台项目</p>
|
||||||
<div class="absolute bottom-0 w-full h-[20%] bg-gray-100 mt-[200px] flex" :class="{'bg-white':showMoreButton1}">
|
<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="flex flex-col">
|
||||||
<div class="ml-6 mt-4 font-semibold text-3xl" :class="{'text-green-400':showMoreButton1}">
|
<div class="ml-6 mt-4 font-semibold text-3xl" :class="{'text-green-400':showMoreButton1}">
|
||||||
01-17
|
01-17
|
||||||
@ -29,14 +35,14 @@
|
|||||||
</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-[375px] h-[460px] bg-white border border-gray-200 shadow dark:bg-gray-800 dark:border-gray-700"
|
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="{'hover:bg-green-400':showMoreButton2}"
|
:class="{'hover:bg-green-400':showMoreButton2}"
|
||||||
>
|
>
|
||||||
<div class="">
|
<div class="">
|
||||||
<p class="pl-5 mt-6 text-xl font-bold tracking-tight text-gray-700 dark:text-white" :class="{'text-white':showMoreButton2}">张三老师发布了：</p>
|
<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="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>
|
<p class="ml-4 mr-4">主要针对大量数据进行处理，需要大量数据，前后端配合需要的技术有：springboot,vue,mysql等</p>
|
||||||
x<div class="absolute bottom-0 w-full h-[20%] bg-gray-100 mt-[200px] flex" :class="{'bg-white':showMoreButton2}">
|
<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="flex flex-col">
|
||||||
<div class="ml-6 mt-4 font-semibold text-3xl" :class="{'text-green-400':showMoreButton2}">
|
<div class="ml-6 mt-4 font-semibold text-3xl" :class="{'text-green-400':showMoreButton2}">
|
||||||
01-17
|
01-17
|
||||||
@ -56,12 +62,13 @@
|
|||||||
</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-[375px] h-[460px] bg-white border border-gray-200 shadow dark:bg-gray-800 dark:border-gray-700"
|
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="{'hover:bg-green-400':showMoreButton3}"
|
:class="{'hover:bg-green-400':showMoreButton3}"
|
||||||
>
|
>
|
||||||
<div class="">
|
<div class="">
|
||||||
<p class="pl-5 mt-6 text-xl font-bold tracking-tight text-gray-700 dark:text-white" :class="{'text-white':showMoreButton3}">张三老师发布了：</p>
|
<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="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="absolute bottom-0 w-full h-[20%] bg-gray-100 mt-[200px] flex" :class="{'bg-white':showMoreButton3}">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div class="ml-6 mt-4 font-semibold text-3xl" :class="{'text-green-400':showMoreButton3}">
|
<div class="ml-6 mt-4 font-semibold text-3xl" :class="{'text-green-400':showMoreButton3}">
|
||||||
|
|||||||
@ -1,39 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="flex flex-col space-y-2 p-5" :class="{ 'hovered': isHovered }" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
|
|
||||||
<h5 class="mt-44 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="isHovered">{{project.title}}</h5>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400" v-if="isHovered">{{project.intro}}</p>
|
|
||||||
<button v-if="isHovered" @click="handleButtonClick" class="inline-flex items-center bg-sky-200 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
|
||||||
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" 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>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default{
|
|
||||||
props:{
|
|
||||||
project:{
|
|
||||||
type:Object,
|
|
||||||
required:true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data(){
|
|
||||||
return{
|
|
||||||
isHovered:false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
handleMouseOver(){
|
|
||||||
this.isHovered = true;
|
|
||||||
},
|
|
||||||
handleMouseLeave(){
|
|
||||||
this.isHovered = false;
|
|
||||||
},
|
|
||||||
handleButtonClick(){
|
|
||||||
console.log('Button Clicked');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,35 +1,88 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container w-full mt-40">
|
<div class="md:container w-full mt-40 ml-64">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<h2 class="text-3xl font-bold ml-64">项目展示</h2>
|
<h2 class="text-3xl font-bold">项目展示</h2>
|
||||||
<button class="ml-[1065px] border-gray-400 border-2 h-8 w-14 rounded-full flex justify-center items-center">
|
<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">
|
||||||
<svg class="w-6 h-6 text-gray-800 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="ml-64 mt-24 flex flex-col space-y-8">
|
<div class="mt-24 flex flex-col space-y-8">
|
||||||
<div class="flex space-x-12">
|
<div class="flex space-x-12">
|
||||||
<div class="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="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')]">
|
||||||
<ProjectCard :project="projects[0]" />
|
<div class="flex items-center">
|
||||||
|
<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>
|
||||||
|
<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">
|
||||||
|
<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"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img22.jpg')]">
|
<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 class="flex items-center">
|
||||||
<ProjectCard :project="projects[1]" />
|
<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>
|
||||||
|
<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">
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img23.jpg')]">
|
<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')]">
|
||||||
<ProjectCard :project="projects[2]" />
|
<div class="flex items-center">
|
||||||
|
<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>
|
||||||
|
<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">
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex space-x-12">
|
<div class="flex space-x-12">
|
||||||
<div class="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="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')]">
|
||||||
<ProjectCard :project="projects[3]" />
|
<div class="flex items-center">
|
||||||
|
<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>
|
||||||
|
<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">
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img25.jpg')]">
|
<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')]">
|
||||||
<ProjectCard :project="projects[4]" />
|
<div class="flex items-center">
|
||||||
|
<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>
|
||||||
|
<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">
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="border-gray-400 shadow-lg h-72 w-96 bg-cover bg-center bg-[url('@/assets/images/img26.jpg')]">
|
<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')]">
|
||||||
<ProjectCard :project="projects[5]" />
|
<div class="flex items-center">
|
||||||
|
<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>
|
||||||
|
<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">
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -39,40 +92,17 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ProjectCard from "@/components/MainPage/ProjectCard.vue";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
|
||||||
ProjectCard,
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
projects: [
|
LearnMore0:false,
|
||||||
{
|
LearnMore1:false,
|
||||||
title: 'Project 1',
|
LearnMore2:false,
|
||||||
intro: 'introduction for Project 1.',
|
LearnMore3:false,
|
||||||
},
|
LearnMore4:false,
|
||||||
{
|
LearnMore5:false,
|
||||||
title: 'Project 2',
|
LearnMore6:false,
|
||||||
intro: 'introduction for Project 2.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Project 3',
|
|
||||||
intro: 'introduction for Project 3.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Project 4',
|
|
||||||
intro: 'introduction for Project 3.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Project 5',
|
|
||||||
intro: 'introduction for Project 3.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Project 6',
|
|
||||||
intro: 'introduction for Project 3.',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,8 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="ml-64 container w-full mt-40">
|
<div class="ml-64 md:container w-full mt-40">
|
||||||
<h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">
|
<div class="flex">
|
||||||
关于
|
<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">
|
||||||
|
<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 class="flex">
|
<div class="flex">
|
||||||
<div class="mt-16 h-96 w-[600px] border-2 border-gray-400">
|
<div class="mt-16 h-96 w-[600px] border-2 border-gray-400">
|
||||||
团队介绍
|
团队介绍
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="w-full h-screen bg-sky-200">
|
<div class="w-full h-screen">
|
||||||
<div class="flex items-center justify-center">
|
<div class="flex items-center justify-center">
|
||||||
<div class="container mx-auto mt-20" >
|
<div class="container mx-auto mt-20" >
|
||||||
<div class="max-w-md mx-auto bg-white border border-gray-200 rounded-lg shadow p-10 dark:bg-gray-800 dark:border-gray-700">
|
<div class="max-w-md mx-auto bg-white border border-gray-200 rounded-lg shadow p-10 dark:bg-gray-800 dark:border-gray-700">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user