Anchor-x/WebDemo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Anchor-x:68a8fc52e506df9ae97dd4d3bef9c5a5d0b1b9af
Branches Tags
Anchor-x:main
..
compare: Anchor-x:64bbec16d91a7db18ed088434011d647b53df6c4
Branches Tags
Anchor-x:main

No commits in common. "68a8fc52e506df9ae97dd4d3bef9c5a5d0b1b9af" and "64bbec16d91a7db18ed088434011d647b53df6c4" have entirely different histories.
68a8fc52e5 ... 64bbec16d9

28 changed files with 71 additions and 1337 deletions
Show Stats Expand all files Collapse all files

32
README.md
View File

@ -1,32 +1,2 @@
# WebDemo
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/)
Web技术开发应用

BIN
img/anyuse0.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 MiB

BIN
img/anyuse1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 70 KiB

BIN
img/anyuse2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 163 KiB

BIN
img/anyuse3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 129 KiB

BIN
img/anyuse4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 175 KiB

BIN
img/anyuse5.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 885 KiB

BIN
img/anyuse6.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 MiB

BIN
img/anyuse7.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 MiB

BIN
img/anyuse8.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 MiB

BIN
img/anyuse9.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 430 KiB

BIN
img/background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 137 KiB

BIN
img/bg-foot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 431 KiB

BIN
img/bg-top-combine.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 488 KiB

BIN
img/bg-top.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 455 KiB

BIN
img/footer.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
img/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 131 KiB

BIN
img/picture.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 397 KiB

868
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -9,10 +9,7 @@
"preview": "vite preview"
},
"devDependencies": {
"autoprefixer": "^10.4.16",
"postcss": "^8.4.31",
"sass": "^1.69.0",
"tailwindcss": "^3.3.5",
"vite": "^4.4.5"
},
"dependencies": {

6
postcss.config.js
View File

@ -1,6 +0,0 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

4
src/html/baidu.html
View File

@ -2,8 +2,8 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Baidu</title>
<link href="../scss/styleBaidu.scss" rel="stylesheet">
<title>BaiDu</title>
<link href="../scss/style_baidu.scss" rel="stylesheet">
</head>
<body>

174
src/html/ynu.html
View File

@ -1,174 +0,0 @@
<!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
View File

@ -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;
}

95
src/scss/styleYnu.scss
View File

@ -1,95 +0,0 @@
@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;
}

68
src/scss/style_baidu.scss Normal file
View 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;
}

78
src/ts/slider.ts
View File

@ -1,78 +0,0 @@
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
View File

@ -1,12 +0,0 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{html,js}",
],
theme: {
extend: {},
},
plugins: [],
}