Compare commits
11 Commits
64bbec16d9
...
68a8fc52e5
| Author | SHA1 | Date | |
|---|---|---|---|
| 68a8fc52e5 | |||
| 26691ce656 | |||
| 9c07cb69f0 | |||
| ac52909ac3 | |||
| b444bff543 | |||
| 44e76459fc | |||
| b0f893ab40 | |||
| 25dc0a92cf | |||
| a1ee32377d | |||
| 3f4604a9ac | |||
| 97da533b9d |
32
README.md
32
README.md
@ -1,2 +1,32 @@
|
|||||||
# WebDemo
|
# WebDemo
|
||||||
Web技术开发应用
|
Web技术开发应用作业
|
||||||
|
|
||||||
|
## 项目地址
|
||||||
|
|
||||||
|
### 前端
|
||||||
|
使用 `tailwindcss`框架 和 `Vite` 打包工具
|
||||||
|
|
||||||
|
`Gitee`[地址](https://gitee.com/devas/web-application-technology)
|
||||||
|
|
||||||
|
使用以下命令将项目克隆到本地
|
||||||
|
```bash
|
||||||
|
git clone --branch 20172 --single-branch https://gitee.com/devas/web-application-technology.git
|
||||||
|
```
|
||||||
|
|
||||||
|
`Gitlab`[地址](https://intpointer.com/Anchor-x/webdemo)
|
||||||
|
|
||||||
|
使用以下命令将项目克隆到本地
|
||||||
|
```bash
|
||||||
|
git clone --branch main --single-branch https://intpointer.com/Anchor-x/webdemo.git
|
||||||
|
```
|
||||||
|
|
||||||
|
### 后端
|
||||||
|
使用`NestJS`和`TypeORM`框架
|
||||||
|
|
||||||
|
`Gitlab`[地址](https://intpointer.com/Anchor-x/nestjsdemo)
|
||||||
|
|
||||||
|
使用以下命令将项目克隆到本地
|
||||||
|
```bash
|
||||||
|
git clone --branch main --single-branch https://intpointer.com/Anchor-x/nestjsdemo.git
|
||||||
|
```
|
||||||
|
`Serverless`访问[地址](https://service-93zb06of-1315775011.sh.apigw.tencentcs.com/release/)
|
||||||
BIN
img/anyuse0.png
Normal file
BIN
img/anyuse0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
img/anyuse1.png
Normal file
BIN
img/anyuse1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
img/anyuse2.png
Normal file
BIN
img/anyuse2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
BIN
img/anyuse3.png
Normal file
BIN
img/anyuse3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
BIN
img/anyuse4.png
Normal file
BIN
img/anyuse4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
BIN
img/anyuse5.png
Normal file
BIN
img/anyuse5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 885 KiB |
BIN
img/anyuse6.png
Normal file
BIN
img/anyuse6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
img/anyuse7.png
Normal file
BIN
img/anyuse7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
img/anyuse8.png
Normal file
BIN
img/anyuse8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
img/anyuse9.png
Normal file
BIN
img/anyuse9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 430 KiB |
BIN
img/background.png
Normal file
BIN
img/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
img/bg-foot.png
Normal file
BIN
img/bg-foot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 431 KiB |
BIN
img/bg-top-combine.png
Normal file
BIN
img/bg-top-combine.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 488 KiB |
BIN
img/bg-top.png
Normal file
BIN
img/bg-top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 455 KiB |
BIN
img/footer.png
Normal file
BIN
img/footer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
img/logo.png
Normal file
BIN
img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
img/picture.png
Normal file
BIN
img/picture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 397 KiB |
868
package-lock.json
generated
868
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,7 +9,10 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"autoprefixer": "^10.4.16",
|
||||||
|
"postcss": "^8.4.31",
|
||||||
"sass": "^1.69.0",
|
"sass": "^1.69.0",
|
||||||
|
"tailwindcss": "^3.3.5",
|
||||||
"vite": "^4.4.5"
|
"vite": "^4.4.5"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
@ -2,8 +2,8 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>BaiDu</title>
|
<title>Baidu</title>
|
||||||
<link href="../scss/style_baidu.scss" rel="stylesheet">
|
<link href="../scss/styleBaidu.scss" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
174
src/html/ynu.html
Normal file
174
src/html/ynu.html
Normal file
@ -0,0 +1,174 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh" xmlns="">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
|
<link href="../scss/styleYnu.scss" rel="stylesheet"/>
|
||||||
|
<title>ynu of software</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<div class="w-full h-fit">
|
||||||
|
<img src="../../img/bg-top-combine.png" class="w-full" alt="top-blank-logo"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex bg-blue-600 text-white flex-row font-bold justify-around text-center items-center h-16 text-lg leading-16 overflow-hidden">
|
||||||
|
<div class="hover:text-red-300">首页</div>
|
||||||
|
<div class="hover:text-red-300">新闻公告</div>
|
||||||
|
<div class="hover:text-red-300">学校概况</div>
|
||||||
|
<div class="hover:text-red-300">师资队伍</div>
|
||||||
|
<div class="hover:text-red-300">人才培养</div>
|
||||||
|
<div class="hover:text-red-300">科学研究</div>
|
||||||
|
<div class="hover:text-red-300">合作交流</div>
|
||||||
|
<div class="hover:text-red-300">党群工作</div>
|
||||||
|
<div class="hover:text-red-300">学生工作</div>
|
||||||
|
<div class="hover:text-red-300">English</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div>-->
|
||||||
|
<!-- <div class="w-full h-fit mt-1 relative">-->
|
||||||
|
<!-- <div class="w-full h-screen relative flex z-0" id="slider-wrapper">-->
|
||||||
|
<!-- <img class="z-0 object-cover w-full" id="img1" src="../../img/anyuse0.png" alt="">-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
|
||||||
|
<!--图片轮播实现-->
|
||||||
|
<script src="../ts/slider.ts" defer></script>
|
||||||
|
<!-- 轮播图容器 -->
|
||||||
|
<div id="carousel">
|
||||||
|
<img src="../../img/anyuse0.png" alt="anyuse6">
|
||||||
|
<img src="../../img/anyuse7.png" alt="anyuse7">
|
||||||
|
<img src="../../img/anyuse9.png" alt="anyuse9">
|
||||||
|
<img src="../../img/anyuse8.png" alt="anyuse8">
|
||||||
|
<!-- 按钮组 -->
|
||||||
|
<div id="leftArrow" class="iconfont icon-arrow-lift"></div> <!-- 左箭头切换按钮 -->
|
||||||
|
<div id="rightArrow" class="iconfont icon-arrow-right"></div> <!-- 右箭头切换按钮 -->
|
||||||
|
<div id="sliderBtn"></div> <!-- 切换按钮组 -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full flex">
|
||||||
|
<div class="flex w-3/5 flex-wrap">
|
||||||
|
<div class="m-4 shadow-lg w-full h-auto rounded-lg border-2">
|
||||||
|
<h1 class="px-6 pt-4 pb-0 text-2xl text-orange-600 font-bold">
|
||||||
|
学院新闻
|
||||||
|
<span class="float-right text-lg text-gray-400 hover:text-red-400">
|
||||||
|
更多>>
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<ul class="mx-4 px-6 pb-2 pt-2 text-sm leading-8 list-disc">
|
||||||
|
<li class="hover:text-blue-400">很久以前，那还是我用win98的时候有次我系统崩溃了</li>
|
||||||
|
<li class="hover:text-blue-400">因为我是电脑白痴</li>
|
||||||
|
<li class="hover:text-blue-400">我朋友给我介绍了一个高手来帮我修电脑</li>
|
||||||
|
<li class="hover:text-blue-400">他看了一下电脑，问我有没有98的盘</li>
|
||||||
|
<li class="hover:text-blue-400">我说没有</li>
|
||||||
|
<li class="hover:text-blue-400">他想了一下，叫我把固定电话拿给他</li>
|
||||||
|
<li class="hover:text-blue-400">我想修电脑要电话干什么</li>
|
||||||
|
<li class="hover:text-blue-400">但人家是高手，我也不好说什么</li>
|
||||||
|
<li class="hover:text-blue-400">就把电话拔下来给他了</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-nowrap">
|
||||||
|
<div class="ml-4 mr-1 shadow-lg w-1/2 h-auto rounded-lg border-2">
|
||||||
|
<h1 class="px-3 pt-2 pb-0 text-2xl text-orange-600 font-bold">
|
||||||
|
学术动态
|
||||||
|
<span class="float-right text-lg text-gray-400 hover:text-red-400">
|
||||||
|
更多>>
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<ul class="mx-3 pl-4 pr-0 pb-2 pt-2 text-sm leading-8 list-disc">
|
||||||
|
<li class="hover:text-blue-400">他把电话线空着的一头接在电脑的一个插孔内</li>
|
||||||
|
<li class="hover:text-blue-400">然后进入了dos</li>
|
||||||
|
<li class="hover:text-blue-400">然后就开始在电话上不停的按着键</li>
|
||||||
|
<li class="hover:text-blue-400">他按键的速度非常快，但是只按0，1两个键</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mr-4 shadow-lg w-1/2 h-auto rounded-lg border-2">
|
||||||
|
<div class="h-auto">
|
||||||
|
<h1 class="px-3 pt-2 pb-0 text-2xl text-orange-600 font-bold flex-nowrap">
|
||||||
|
历史学习
|
||||||
|
<span class="float-right text-lg text-gray-400 hover:text-red-400">
|
||||||
|
更多>>
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">
|
||||||
|
<div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">
|
||||||
|
我渐渐的有些困，我问他这东西要搞多久
|
||||||
|
</div>
|
||||||
|
<div class="w-1/3 border-2">
|
||||||
|
<img class="h-16 w-32" src="../../img/picture.png" alt=""/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">
|
||||||
|
<div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">
|
||||||
|
他说要几个小时
|
||||||
|
</div>
|
||||||
|
<div class="w-1/3 border-2">
|
||||||
|
<img class="h-16 w-32" src="../../img/picture.png" alt=""/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">
|
||||||
|
<div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">
|
||||||
|
我给他倒了杯茶，就一个人去隔壁睡觉了
|
||||||
|
</div>
|
||||||
|
<div class="w-1/3 border-2">
|
||||||
|
<img class="h-16 w-32" src="../../img/picture.png" alt=""/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-2/5 flex-grow mb-4">
|
||||||
|
<div class="h-full my-4 mr-4 shadow-lg rounded-lg border-2">
|
||||||
|
<h1 class="px-6 pt-4 pb-0 text-2xl text-orange-600 font-bold">
|
||||||
|
信息公告
|
||||||
|
<span class="float-right text-lg text-gray-400 hover:text-red-400">
|
||||||
|
更多>>
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<ul class="mx-4 px-6 pb-2 pt-2 text-sm leading-8 list-disc">
|
||||||
|
<li class="hover:text-blue-400">醒来的时候，一看已经过了4个多小时</li>
|
||||||
|
<li class="hover:text-blue-400">我起身到隔壁，看见他正在98里面调试</li>
|
||||||
|
<li class="hover:text-blue-400">过了一会儿，他说，你试试，我坐上椅子用了一下，真的好了</li>
|
||||||
|
<li class="hover:text-blue-400">我当时也不懂电脑</li>
|
||||||
|
<li class="hover:text-blue-400">谢过人家就走了</li>
|
||||||
|
<li class="hover:text-blue-400">后来我慢慢对电脑有了了解</li>
|
||||||
|
<li class="hover:text-blue-400">终于了解</li>
|
||||||
|
<li class="hover:text-blue-400">原来当时那位高手是用机器语言编了一个98系统</li>
|
||||||
|
<li class="hover:text-blue-400">我后来问我朋友那位高手的下落</li>
|
||||||
|
<li class="hover:text-blue-400">朋友说前几年去了美国之后</li>
|
||||||
|
<li class="hover:text-blue-400">杳无音讯……</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-fit flex flex-wrap m-4 border-2 justify-around rounded-lg shadow-lg bg-gradient-to-r from-cyan-300 to to-violet-300">
|
||||||
|
<ul class="li-img clearfix">
|
||||||
|
<li><img src="../../img/anyuse2.png" alt=""/></li>
|
||||||
|
<li><img src="../../img/anyuse3.png" alt=""/></li>
|
||||||
|
<li><img src="../../img/anyuse4.png" alt=""/></li>
|
||||||
|
<li><img src="../../img/anyuse5.png" alt=""/></li>
|
||||||
|
<li><img src="../../img/anyuse6.png" alt=""/></li>
|
||||||
|
<li><img src="../../img/anyuse7.png" alt=""/></li>
|
||||||
|
<li><img src="../../img/anyuse8.png" alt=""/></li>
|
||||||
|
<li><img src="../../img/anyuse9.png" alt=""/></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="mt-4 bg-gradient-to-r from-sky-500 to to-indigo-500 text-center p-4 text-white">
|
||||||
|
<p>云南大学软件学院 版权所有</p>
|
||||||
|
<p>地址：昆明市呈贡区大学城东外环南路云南大学呈贡校区软件学院楼</p>
|
||||||
|
<p>邮编：650504</p>
|
||||||
|
<p>Copyright@ 2002-2018 School of Software</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
68
src/scss/styleBaidu.scss
Normal file
68
src/scss/styleBaidu.scss
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
/* styles.css */
|
||||||
|
|
||||||
|
/* 设置页面背景色 */
|
||||||
|
body {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 设置页面内容区域的宽度和居中 */
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 设置百度Logo的样式 */
|
||||||
|
.logo {
|
||||||
|
width: 320px;
|
||||||
|
height: 120px;
|
||||||
|
background-image: url("../../img/baidu.png");
|
||||||
|
background-size: cover;
|
||||||
|
margin: auto auto auto auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 设置搜索框的样式 */
|
||||||
|
.search-box {
|
||||||
|
width: 450px;
|
||||||
|
height: 45px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 设置搜索按钮的样式 */
|
||||||
|
.search-button {
|
||||||
|
background-color: #3385ff;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 24px;
|
||||||
|
font-size: 20px;
|
||||||
|
border-radius: 25px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
display: block;
|
||||||
|
color: #000000;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover {
|
||||||
|
background-color: #555;
|
||||||
|
}
|
||||||
95
src/scss/styleYnu.scss
Normal file
95
src/scss/styleYnu.scss
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
.li-img li {
|
||||||
|
list-style: none;
|
||||||
|
float: left;
|
||||||
|
width: 25%; /*四列图片排列*/
|
||||||
|
height: 175px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.li-img li img {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
top: 50%; /*li高度的一半*/
|
||||||
|
transform: translateY(-50%); /*再向上移动自身的50%*/
|
||||||
|
}
|
||||||
|
|
||||||
|
/*清除浮动*/
|
||||||
|
.clearfix:after {
|
||||||
|
position: relative;
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
#carousel {
|
||||||
|
@apply w-auto h-auto relative overflow-hidden justify-center rounded-2xl flex mx-2 mt-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#carousel img {
|
||||||
|
position: absolute; /* 绝对定位 使图片堆叠 */
|
||||||
|
width: auto; /* 设定大小 按比例缩放 */
|
||||||
|
height: auto; /* 设定大小 按比例缩放 */
|
||||||
|
transition: all .6s; /* 动画 */
|
||||||
|
opacity: 0; /* 隐藏 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgActive {
|
||||||
|
opacity: 1 !important; /* 显示图片 最高优先级 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 控制按钮的样式 */
|
||||||
|
#leftArrow,
|
||||||
|
#rightArrow {
|
||||||
|
//position: absolute;
|
||||||
|
//left: 5px;
|
||||||
|
//top: 50%;
|
||||||
|
//width: 25px;
|
||||||
|
//height: 30px;
|
||||||
|
//background-color: #eee;
|
||||||
|
//display: flex;
|
||||||
|
//justify-content: center;
|
||||||
|
//align-items: center;
|
||||||
|
//opacity: 0.7;
|
||||||
|
//font-size: 20px;
|
||||||
|
//cursor: pointer;
|
||||||
|
//z-index: 1000;
|
||||||
|
@apply absolute left-5 top-1/2 w-7 h-11 bg-gray-300 flex justify-center items-center opacity-70 text-2xl cursor-pointer z-10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rightArrow {
|
||||||
|
//left: auto;
|
||||||
|
//right: 5px;
|
||||||
|
@apply left-auto right-5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sliderBtn {
|
||||||
|
//position: absolute;
|
||||||
|
//width: 100%;
|
||||||
|
//bottom: 0;
|
||||||
|
//display: flex;
|
||||||
|
//justify-content: flex-end;
|
||||||
|
//z-index: 1000;
|
||||||
|
@apply absolute w-full bottom-0 flex justify-end z-10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unitBtn {
|
||||||
|
//width: 10px;
|
||||||
|
//height: 10px;
|
||||||
|
//background-color: #eee;
|
||||||
|
//border-radius: 10px;
|
||||||
|
//margin: 10px;
|
||||||
|
//cursor: pointer;
|
||||||
|
@apply w-4 h-4 bg-gray-300 rounded-full m-2 cursor-pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnActive {
|
||||||
|
background-color: #4C98F7;
|
||||||
|
}
|
||||||
@ -1,68 +0,0 @@
|
|||||||
/* styles.css */
|
|
||||||
|
|
||||||
/* 设置页面背景色 */
|
|
||||||
body {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 设置页面内容区域的宽度和居中 */
|
|
||||||
.container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 设置百度Logo的样式 */
|
|
||||||
.logo {
|
|
||||||
width: 320px;
|
|
||||||
height: 120px;
|
|
||||||
background-image: url("../../img/baidu.png");
|
|
||||||
background-size: cover;
|
|
||||||
margin: auto auto auto auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 设置搜索框的样式 */
|
|
||||||
.search-box {
|
|
||||||
width: 450px;
|
|
||||||
height: 45px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 设置搜索按钮的样式 */
|
|
||||||
.search-button {
|
|
||||||
background-color: #3385ff;
|
|
||||||
color: #fff;
|
|
||||||
border: none;
|
|
||||||
padding: 12px 24px;
|
|
||||||
font-size: 20px;
|
|
||||||
border-radius: 25px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul {
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav li {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
display: block;
|
|
||||||
color: #000000;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:hover {
|
|
||||||
background-color: #555;
|
|
||||||
}
|
|
||||||
78
src/ts/slider.ts
Normal file
78
src/ts/slider.ts
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
const imgArr = []; // 图片数组
|
||||||
|
let curIndex = 0; // 当前显示图片
|
||||||
|
let timer = null; // 定时器
|
||||||
|
const btnList = []; // 右下角切换按钮组
|
||||||
|
|
||||||
|
function slide(targetIndex = curIndex + 1) {
|
||||||
|
curIndex = targetIndex % imgArr.length; // 获取当前index
|
||||||
|
imgArr.forEach((v) => v.className = ""); // 设置其他图片隐藏
|
||||||
|
imgArr[curIndex].className = "imgActive"; // 设置当前index图片显示
|
||||||
|
btnList.forEach(v => v.className = "unitBtn") // 设置其他按钮为灰色
|
||||||
|
btnList[curIndex].className = "unitBtn btnActive"; // 设置当前按钮为蓝色
|
||||||
|
}
|
||||||
|
|
||||||
|
function createBtnGroup(carousel: HTMLElement, config: { height?: string; interval: any; }) {
|
||||||
|
document.getElementById("leftArrow").addEventListener('click', (e) => {
|
||||||
|
clearInterval(timer); // 清除定时器，避免手动切换时干扰
|
||||||
|
slide(curIndex - 1); // 允许点击则切换上一张
|
||||||
|
timer = setInterval(() => {
|
||||||
|
slide()
|
||||||
|
}, config.interval); // 重设定时器
|
||||||
|
})
|
||||||
|
document.getElementById("rightArrow").addEventListener('click', (e) => {
|
||||||
|
clearInterval(timer); // 清除定时器，避免手动切换时干扰
|
||||||
|
slide(curIndex + 1); // 允许点击则切换下一张
|
||||||
|
timer = setInterval(() => {
|
||||||
|
slide()
|
||||||
|
}, config.interval); // 重设定时器
|
||||||
|
})
|
||||||
|
const sliderBtn = document.getElementById("sliderBtn"); // 获取按钮容器的引用
|
||||||
|
imgArr.forEach((v, i) => {
|
||||||
|
let btn = document.createElement("div"); // 制作按钮
|
||||||
|
btn.className = i === 0 ? "unitBtn btnActive" : "unitBtn"; // 初设蓝色与灰色按钮样式
|
||||||
|
btn.addEventListener('click', (e) => {
|
||||||
|
clearInterval(timer); // 清除定时器，避免手动切换时干扰
|
||||||
|
slide(i); // // 允许点击则切换
|
||||||
|
timer = setInterval(() => {
|
||||||
|
slide()
|
||||||
|
}, config.interval); // 重设定时器
|
||||||
|
})
|
||||||
|
btnList.push(btn); // 添加按钮到按钮组
|
||||||
|
sliderBtn.appendChild(btn); // 追加按钮到按钮容器
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function eventDispose(carousel: HTMLElement, config: { height?: string; interval: any; }) {
|
||||||
|
document.addEventListener('visibilitychange', function () { // 浏览器切换页面会导致动画出现问题，监听页面切换
|
||||||
|
if (document.visibilityState == 'hidden') clearInterval(timer); // 页面隐藏清除定时器
|
||||||
|
else timer = setInterval(() => {
|
||||||
|
slide()
|
||||||
|
}, config.interval); // 重设定时器
|
||||||
|
});
|
||||||
|
carousel.addEventListener('mouseover', function () { // 鼠标移动到容器则不切换动画，停止计时器
|
||||||
|
clearInterval(timer); // 页面隐藏清除定时器
|
||||||
|
});
|
||||||
|
carousel.addEventListener('mouseleave', function () { // 鼠标移出容器则开始动画
|
||||||
|
timer = setInterval(() => {
|
||||||
|
slide()
|
||||||
|
}, config.interval); // 重设定时器
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
(function start() {
|
||||||
|
const config = {
|
||||||
|
height: "640px", // 配置高度
|
||||||
|
interval: 5000 // 配置轮播时间间隔
|
||||||
|
};
|
||||||
|
const carousel = document.getElementById("carousel"); //获取容器对象的引用
|
||||||
|
carousel.style.height = config.height; // 将轮播容器高度设定
|
||||||
|
document.querySelectorAll("#carousel img").forEach((v, i) => {
|
||||||
|
imgArr.push(v); // 获取所有图片组成数组
|
||||||
|
v.className = i === 0 ? "imgActive" : "";
|
||||||
|
});
|
||||||
|
eventDispose(carousel, config); // 对一些浏览器事件处理
|
||||||
|
createBtnGroup(carousel, config); // 按钮组的处理
|
||||||
|
timer = setInterval(() => {
|
||||||
|
slide()
|
||||||
|
}, config.interval); // 设置定时器定时切换
|
||||||
|
})();
|
||||||
12
tailwind.config.js
Normal file
12
tailwind.config.js
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{html,js}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user