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

Compare commits

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

11 Commits
64bbec16d9 ... 68a8fc52e5

Author SHA1 Message Date
myh
68a8fc52e5 format code 2023-12-26 20:21:01 +08:00
myh
26691ce656 Image carousel effect 2023-12-06 00:04:34 +08:00
myh
9c07cb69f0 Unified image formatting 2023-12-06 00:03:19 +08:00
myh
ac52909ac3 云大官网页面完善 2023-12-02 17:40:49 +08:00
myh
b444bff543 百度页面完善 2023-12-02 17:40:30 +08:00
myh
44e76459fc 增加所需资源图片 2023-11-27 00:12:54 +08:00
myh
b0f893ab40 增加tailwindcss相关配置 2023-11-27 00:09:00 +08:00
myh
25dc0a92cf 增加tailwindcss相关配置 2023-11-26 23:59:35 +08:00
myh
a1ee32377d Merge remote-tracking branch 'gitlab/main' 2023-11-26 22:36:52 +08:00
myh
3f4604a9ac 云大官网初步完成 2023-11-26 22:34:45 +08:00
myh
97da533b9d 增加NestjsDemo项目地址 2023-11-19 18:25:15 +08:00
28 changed files with 1337 additions and 71 deletions
Show Stats Expand all files Collapse all files

32
README.md
View File

@ -1,2 +1,32 @@
# 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
img/anyuse1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
img/anyuse2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 KiB

BIN
img/anyuse3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 KiB

BIN
img/anyuse4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 175 KiB

BIN
img/anyuse5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 885 KiB

BIN
img/anyuse6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
img/anyuse7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
img/anyuse8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
img/anyuse9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 430 KiB

BIN
img/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

BIN
img/bg-foot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 431 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 488 KiB

BIN
img/bg-top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 455 KiB

BIN
img/footer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 131 KiB

BIN
img/picture.png Normal file
View File

Binary file not shown.
Side by Side

After

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,7 +9,10 @@
"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 Normal file
View File

@ -0,0 +1,6 @@
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/style_baidu.scss" rel="stylesheet">
<title>Baidu</title>
<link href="../scss/styleBaidu.scss" rel="stylesheet">
</head>
<body>

174
src/html/ynu.html Normal file
View 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
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;
}

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

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

78
src/ts/slider.ts Normal file
View 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
View File

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