开始nanoda！ #9
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
@ -1,3 +1,8 @@
|
|||||||
# 2024onlinefontedteach
|
# 前端大作业
|
||||||
|
看看各位实力。
|
||||||
|
每个人的作业放置在以自己名字拼音命名的branch内。
|
||||||
|
seas分支是参考答案。
|
||||||
|
main分支是主分支，不要动他。
|
||||||
|
可能会考虑建一个分支，帮你们把css给完成了。你们就只需完成vue和js的部分。
|
||||||
|
|
||||||
2024前端正式期教学，霍霍git
|
重点在怎么使用vue，搭建路由和各种组件，实现响应式
|
||||||
35
index.html
35
index.html
@ -1,21 +1,18 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>鼬鼬轮播图</title>
|
<title>......</title>
|
||||||
<link rel="stylesheet" href="./support.css">
|
<style>
|
||||||
</head>
|
*{
|
||||||
<body>
|
padding: 0;
|
||||||
<div id="youyou_container">
|
margin: 0;
|
||||||
<div id="youyou_move"></div>
|
}
|
||||||
|
</style>
|
||||||
<div id="button_container">
|
</head>
|
||||||
<div id="left_button" onclick="youyou_before()"></div>
|
<body>
|
||||||
<div id="right_button" onclick="youyou_next()"></div>
|
<div id="app"></div>
|
||||||
</div>
|
<script type="module" src="/src/main.js"></script>
|
||||||
</div>
|
</body>
|
||||||
|
|
||||||
<script src="./main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
137
main.js
137
main.js
@ -1,137 +0,0 @@
|
|||||||
const youyou_move_ele = document.getElementById('youyou_move');
|
|
||||||
|
|
||||||
let n = 6,current_youyou = 0,current_onload_youyou = 0;
|
|
||||||
let youyou_pic_src = new Array;
|
|
||||||
let youyou_onload_ele = new Array,youyou_onload_inner_ele = new Array;
|
|
||||||
let changing = false,changing_next = false,changing_before = false;
|
|
||||||
|
|
||||||
//初始化鼬鼬图片链接
|
|
||||||
for(var i = 0;i < n;i++)
|
|
||||||
{
|
|
||||||
youyou_pic_src[i] = 'url(./pic/' + (i + 1) + '.jpg';
|
|
||||||
}
|
|
||||||
// document.getElementById().append()
|
|
||||||
//新建好加载列表
|
|
||||||
for(var i = 0;i < 3;i++)
|
|
||||||
{
|
|
||||||
youyou_onload_ele[i] = document.createElement('div');
|
|
||||||
youyou_onload_inner_ele[i] = document.createElement('div');
|
|
||||||
|
|
||||||
youyou_onload_ele[i].append(youyou_onload_inner_ele[i]);
|
|
||||||
}
|
|
||||||
//加载youyou_num号鼬鼬到onload_num加载栏目，where记录加载到前面还是后面
|
|
||||||
function onload_youyou(youyou_num,onload_num,where)
|
|
||||||
{
|
|
||||||
youyou_onload_ele[onload_num].style.backgroundImage = youyou_pic_src[youyou_num];
|
|
||||||
youyou_onload_inner_ele[onload_num].style.backgroundImage = youyou_pic_src[youyou_num];
|
|
||||||
if(where)
|
|
||||||
{
|
|
||||||
youyou_move_ele.append(youyou_onload_ele[onload_num])
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
youyou_move_ele.insertBefore(youyou_onload_ele[onload_num],youyou_onload_ele[current_onload_youyou])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function change_width(num)
|
|
||||||
{
|
|
||||||
youyou_move_ele.style.width = (Number(youyou_move_ele.style.width.replace('px','')) + num) + 'px';
|
|
||||||
}
|
|
||||||
|
|
||||||
onload_youyou(current_youyou,current_onload_youyou,true);
|
|
||||||
youyou_move_ele.style.width = '600px';
|
|
||||||
|
|
||||||
function change_youyou()
|
|
||||||
{
|
|
||||||
if(changing || changing_next || changing_before)
|
|
||||||
{
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
changing = true;
|
|
||||||
change_width(600);
|
|
||||||
onload_youyou((current_youyou + 1) % n,(current_onload_youyou + 1) % 3,true);
|
|
||||||
youyou_move_ele.style.transition = 'transform 1s ease';
|
|
||||||
youyou_move_ele.style.transform = 'translateX(-600px)';
|
|
||||||
setTimeout(() => {
|
|
||||||
if(!changing_next && !changing_before)
|
|
||||||
{
|
|
||||||
youyou_move_ele.removeChild(youyou_onload_ele[current_onload_youyou]);
|
|
||||||
change_width(-600);
|
|
||||||
youyou_move_ele.style.transition = 'none';
|
|
||||||
youyou_move_ele.style.transform = 'none';
|
|
||||||
current_youyou++;
|
|
||||||
current_youyou %= n;
|
|
||||||
current_onload_youyou++;
|
|
||||||
current_onload_youyou %= 3;
|
|
||||||
}
|
|
||||||
changing = false;
|
|
||||||
}, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
setInterval(change_youyou,2000);
|
|
||||||
|
|
||||||
function youyou_next()
|
|
||||||
{
|
|
||||||
if(!changing)
|
|
||||||
{
|
|
||||||
change_youyou();
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
changing_next = true;
|
|
||||||
change_width(600);
|
|
||||||
onload_youyou((current_youyou + 2) % n,(current_onload_youyou + 2) % 3,true);
|
|
||||||
youyou_move_ele.style.transition = 'transform 1s ease';
|
|
||||||
youyou_move_ele.style.transform = 'translateX(-1200px)';
|
|
||||||
setTimeout(() => {
|
|
||||||
youyou_move_ele.removeChild(youyou_onload_ele[current_onload_youyou]);
|
|
||||||
youyou_move_ele.removeChild(youyou_onload_ele[(current_onload_youyou + 1) % 3]);
|
|
||||||
change_width(-1200);
|
|
||||||
youyou_move_ele.style.transition = 'none';
|
|
||||||
youyou_move_ele.style.transform = 'none';
|
|
||||||
current_youyou += 2;
|
|
||||||
current_youyou %= n;
|
|
||||||
current_onload_youyou += 2;
|
|
||||||
current_onload_youyou %= 3;
|
|
||||||
changing_next = false;
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function youyou_before()
|
|
||||||
{
|
|
||||||
if(changing)
|
|
||||||
{
|
|
||||||
changing_before = true;
|
|
||||||
youyou_move_ele.style.transform = 'translateX(0px)';
|
|
||||||
setTimeout(() => {
|
|
||||||
youyou_move_ele.removeChild(youyou_onload_ele[(current_onload_youyou + 1) % 3]);
|
|
||||||
changing_before = false;
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
changing_before = true;
|
|
||||||
change_width(600);
|
|
||||||
onload_youyou((current_youyou - 1) % n,(current_onload_youyou - 1) % 3,false);
|
|
||||||
youyou_move_ele.style.transition = 'none';
|
|
||||||
youyou_move_ele.style.transform = 'translateX(-600px)';
|
|
||||||
youyou_move_ele.style.transition = 'transform 1s ease';
|
|
||||||
youyou_move_ele.style.transform = 'translateX(0px)';
|
|
||||||
setTimeout(() => {
|
|
||||||
if(!changing_next)
|
|
||||||
{
|
|
||||||
youyou_move_ele.removeChild(youyou_onload_ele[current_onload_youyou]);
|
|
||||||
change_width(-600);
|
|
||||||
youyou_move_ele.style.transition = 'none';
|
|
||||||
youyou_move_ele.style.transform = 'none';
|
|
||||||
current_youyou--;
|
|
||||||
current_youyou %= n;
|
|
||||||
current_onload_youyou--;
|
|
||||||
current_onload_youyou %= 3;
|
|
||||||
}
|
|
||||||
changing_before = false;
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
1124
package-lock.json
generated
Normal file
1124
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
19
package.json
Normal file
19
package.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"name": "big-homework-text",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.5.12",
|
||||||
|
"vue-router": "^4.4.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.1.4",
|
||||||
|
"vite": "^5.4.10"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M27 33L18 24L27 15" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 439 B |
@ -1 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M21 33L30 24L21 15" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 439 B |
BIN
public/acc_pic.jpg
Normal file
BIN
public/acc_pic.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
22
public/acc_pic.svg
Normal file
22
public/acc_pic.svg
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<svg width="166" height="166" viewBox="0 0 166 166" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<g filter="url(#filter0_d_1_102)">
|
||||||
|
<circle cx="83" cy="83" r="75" fill="url(#pattern0)" shape-rendering="crispEdges"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_1_102" x="0" y="0" width="166" height="166" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_1_102"/>
|
||||||
|
<feOffset/>
|
||||||
|
<feGaussianBlur stdDeviation="2"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="out"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_102"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_102" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||||
|
<use xlink:href="#image0_1_102" transform="scale(0.015625)"/>
|
||||||
|
</pattern>
|
||||||
|
<image id="image0_1_102" width="64" height="64" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAABGUUKwAAAA6ElEQVR4Ae2aQQqEMADEWvH/X672C+YgxizsMZSZiYLrzjHGur+PP2shfMw5H5+9QXr+gU4XwBUgGBFFyABUnwDOAMGIKEIGoPoEcAYIRkQRMgDVJ4AzQDAiinDS5+m3n+fp+V0CyB8BnAGCEVGEDED1CeAMEIyIImQAqk8AZ4BgRBQhA1B9Avj3BuyX8+gF/9d/T/i9ARUguI+hCBmA6hPAGSAYEUXIAFSfAM4AwYgoQgag+gRwBghGRBH6fwCqTwB3DxCMiCJkAKpPAGeAYEQUIQNQfQI4AwQjoggZgOoTwBkgGBFFuABVqhp7E00EWgAAAABJRU5ErkJggg=="/>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
4
public/add.svg
Normal file
4
public/add.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M25 10.9375V39.0625" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M10.9375 25H39.0625" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 325 B |
BIN
public/bac.png
Normal file
BIN
public/bac.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
11
public/back.svg
Normal file
11
public/back.svg
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_3_31)">
|
||||||
|
<path d="M17.4688 8.0625C17.6456 8.06147 17.8209 8.09537 17.9846 8.16224C18.1484 8.22911 18.2973 8.32764 18.4228 8.45218C18.5488 8.5771 18.6487 8.72572 18.717 8.88947C18.7852 9.05322 18.8203 9.22886 18.8203 9.40625C18.8203 9.58364 18.7852 9.75927 18.717 9.92302C18.6487 10.0868 18.5488 10.2354 18.4228 10.3603L7.26971 21.5L18.4228 32.6397C18.6759 32.8927 18.818 33.2359 18.818 33.5937C18.818 33.9516 18.6759 34.2948 18.4228 34.5478C18.1698 34.8008 17.8266 34.943 17.4688 34.943C17.1109 34.943 16.7677 34.8008 16.5147 34.5478L4.42096 22.4541C4.29501 22.3291 4.19504 22.1805 4.12682 22.0168C4.0586 21.853 4.02348 21.6774 4.02348 21.5C4.02348 21.3226 4.0586 21.147 4.12682 20.9832C4.19504 20.8195 4.29501 20.6709 4.42096 20.5459L16.5147 8.45218C16.6403 8.32764 16.7892 8.22911 16.9529 8.16224C17.1166 8.09537 17.2919 8.06147 17.4688 8.0625Z" fill="black"/>
|
||||||
|
<path d="M5.375 20.1563L37.625 20.1562C37.9814 20.1562 38.3232 20.2978 38.5752 20.5498C38.8272 20.8018 38.9688 21.1436 38.9688 21.5C38.9688 21.8564 38.8272 22.1982 38.5752 22.4502C38.3232 22.7022 37.9814 22.8438 37.625 22.8438L5.375 22.8438C5.01862 22.8438 4.67683 22.7022 4.42482 22.4502C4.17282 22.1982 4.03125 21.8564 4.03125 21.5C4.03125 21.1436 4.17282 20.8018 4.42482 20.5498C4.67683 20.2978 5.01862 20.1563 5.375 20.1563Z" fill="black"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_3_31">
|
||||||
|
<rect width="43" height="43" fill="white" transform="matrix(-1 0 0 -1 43 43)"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
20
public/he_left_1.svg
Normal file
20
public/he_left_1.svg
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_1_5)" filter="url(#filter0_d_1_5)">
|
||||||
|
<path d="M27.5002 0.642578C27.4939 0.642578 27.4876 0.642578 27.4806 0.642578C27.478 0.642578 27.475 0.642578 27.4716 0.642578C27.4626 0.642578 27.4537 0.644414 27.4447 0.644414C14.8454 0.672963 4.64258 10.8945 4.64258 23.5C4.64258 36.102 14.8454 46.3253 27.4447 46.3556C27.4537 46.3556 27.4626 46.3574 27.4716 46.3574C27.475 46.3574 27.4779 46.3574 27.4806 46.3574C27.4876 46.3574 27.4939 46.3574 27.5002 46.3574C40.1215 46.3574 50.3574 36.1215 50.3574 23.5C50.3574 10.8766 40.1215 0.642578 27.5002 0.642578ZM28.414 14.3213C30.8373 14.2552 33.1963 13.9356 35.4659 13.3821C36.1517 16.0768 36.5749 19.1821 36.6427 22.5857H28.4139V14.3213H28.414ZM28.414 12.4927V2.61584C30.8801 3.29799 33.3767 6.58376 34.9679 11.6231C32.857 12.132 30.6659 12.4285 28.414 12.4927ZM26.5859 2.59436V12.4927C24.3163 12.4285 22.1072 12.1266 19.9795 11.6088C21.584 6.53906 24.1046 3.2408 26.5859 2.59436ZM26.5859 14.3195V22.5856H18.3009C18.3679 19.1766 18.7938 16.0677 19.4786 13.3712C21.767 13.9302 24.143 14.2552 26.5859 14.3195ZM16.4607 22.5857H6.4944C6.69617 17.8857 8.4471 13.5785 11.2507 10.1677C13.2864 11.2892 15.4463 12.2071 17.7089 12.8928C16.9705 15.8088 16.5276 19.0963 16.4607 22.5857ZM16.4607 24.4143C16.5276 27.9018 16.9705 31.1894 17.709 34.1055C15.4473 34.7929 13.2865 35.7108 11.2508 36.8322C8.44719 33.4215 6.69626 29.1144 6.49449 24.4143H16.4607ZM18.3009 24.4143H26.5859V32.6698C24.1431 32.734 21.7662 33.0609 19.4778 33.6215C18.7929 30.9269 18.3679 27.8198 18.3009 24.4143ZM26.5859 34.4965V44.4056C24.1029 43.7574 21.5805 40.4555 19.9769 35.3804C22.1054 34.8626 24.3153 34.5609 26.5859 34.4965ZM28.414 44.3842V34.4965C30.6659 34.5609 32.857 34.859 34.9696 35.368C33.3784 40.4109 30.8801 43.702 28.414 44.3842ZM28.414 32.6698V24.4143H36.6428C36.575 27.8143 36.1517 30.9161 35.4695 33.609C33.1963 33.0554 30.8391 32.734 28.414 32.6698ZM38.4821 24.4143H48.5055C48.3038 29.1144 46.5537 33.4198 43.7502 36.8306C41.6981 35.7019 39.5196 34.777 37.2374 34.0877C37.9748 31.175 38.4159 27.8947 38.4821 24.4143ZM38.4821 22.5857C38.4159 19.1 37.9731 15.8178 37.2357 12.9034C39.5161 12.2141 41.6948 11.2909 43.7448 10.1624C46.552 13.5731 48.3038 17.8821 48.5055 22.5857H38.4821ZM42.4858 8.76587C40.6662 9.73368 38.7464 10.5337 36.741 11.1409C35.6714 7.70157 34.1712 4.89443 32.3963 3.05151C36.2892 3.98554 39.766 5.99975 42.4858 8.76587ZM22.5314 3.06941C20.7661 4.90875 19.2724 7.70341 18.2072 11.1249C16.2214 10.5195 14.3178 9.72661 12.5152 8.76587C15.2168 6.01765 18.667 4.00868 22.5314 3.06941ZM12.5088 38.227C14.3133 37.2645 16.2178 36.4716 18.2054 35.8662C19.2706 39.2913 20.7643 42.0895 22.5313 43.9306C18.6644 42.9896 15.2124 40.9788 12.5088 38.227ZM32.3963 43.9467C34.1732 42.1037 35.6731 39.2948 36.7428 35.8501C38.75 36.4591 40.6715 37.2573 42.4913 38.2287C39.7714 40.9967 36.2928 43.0145 32.3963 43.9467Z" fill="#425661"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_1_5" x="0" y="0" width="55" height="55" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="4"/>
|
||||||
|
<feGaussianBlur stdDeviation="2"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="out"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_5"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_5" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
<clipPath id="clip0_1_5">
|
||||||
|
<rect width="47" height="47" fill="white" transform="translate(4)"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.7 KiB |
11
public/he_ri_1.svg
Normal file
11
public/he_ri_1.svg
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_1_33)">
|
||||||
|
<path d="M14.5 18.125C18.5041 18.125 21.75 14.8791 21.75 10.875C21.75 6.87094 18.5041 3.625 14.5 3.625C10.4959 3.625 7.25 6.87094 7.25 10.875C7.25 14.8791 10.4959 18.125 14.5 18.125Z" stroke="black" stroke-width="4" stroke-miterlimit="10"/>
|
||||||
|
<path d="M3.51172 24.4688C4.6252 22.5397 6.22688 20.9378 8.15574 19.8241C10.0846 18.7103 12.2727 18.124 14.5 18.124C16.7273 18.124 18.9154 18.7103 20.8443 19.8241C22.7731 20.9378 24.3748 22.5397 25.4883 24.4688" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_1_33">
|
||||||
|
<rect width="29" height="29" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 773 B |
10
public/like.svg
Normal file
10
public/like.svg
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_1_131)">
|
||||||
|
<path d="M2 42H10V18H2V42ZM46 20C46 17.79 44.21 16 42 16H29.37L31.28 6.86C31.32 6.66 31.35 6.45 31.35 6.23C31.35 5.4 31.01 4.65 30.47 4.11L28.34 2L15.17 15.17C14.45 15.9 14 16.9 14 18V38C14 40.21 15.79 42 18 42H36C37.66 42 39.08 40.99 39.68 39.56L45.71 25.46C45.89 25 46 24.51 46 24V20.17L45.98 20.15L46 20Z" fill="black"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_1_131">
|
||||||
|
<rect width="48" height="48" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 565 B |
11
public/post_ba.svg
Normal file
11
public/post_ba.svg
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_3_31)">
|
||||||
|
<path d="M17.4688 8.0625C17.6456 8.06147 17.8209 8.09537 17.9846 8.16224C18.1484 8.22911 18.2973 8.32764 18.4228 8.45218C18.5488 8.5771 18.6487 8.72572 18.717 8.88947C18.7852 9.05322 18.8203 9.22886 18.8203 9.40625C18.8203 9.58364 18.7852 9.75927 18.717 9.92302C18.6487 10.0868 18.5488 10.2354 18.4228 10.3603L7.26971 21.5L18.4228 32.6397C18.6759 32.8927 18.818 33.2359 18.818 33.5937C18.818 33.9516 18.6759 34.2948 18.4228 34.5478C18.1698 34.8008 17.8266 34.943 17.4688 34.943C17.1109 34.943 16.7677 34.8008 16.5147 34.5478L4.42096 22.4541C4.29501 22.3291 4.19504 22.1805 4.12682 22.0168C4.0586 21.853 4.02348 21.6774 4.02348 21.5C4.02348 21.3226 4.0586 21.147 4.12682 20.9832C4.19504 20.8195 4.29501 20.6709 4.42096 20.5459L16.5147 8.45218C16.6403 8.32764 16.7892 8.22911 16.9529 8.16224C17.1166 8.09537 17.2919 8.06147 17.4688 8.0625Z" fill="black"/>
|
||||||
|
<path d="M5.375 20.1563L37.625 20.1562C37.9814 20.1562 38.3232 20.2978 38.5752 20.5498C38.8272 20.8018 38.9688 21.1436 38.9688 21.5C38.9688 21.8564 38.8272 22.1982 38.5752 22.4502C38.3232 22.7022 37.9814 22.8438 37.625 22.8438L5.375 22.8438C5.01862 22.8438 4.67683 22.7022 4.42482 22.4502C4.17282 22.1982 4.03125 21.8564 4.03125 21.5C4.03125 21.1436 4.17282 20.8018 4.42482 20.5498C4.67683 20.2978 5.01862 20.1563 5.375 20.1563Z" fill="black"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_3_31">
|
||||||
|
<rect width="43" height="43" fill="white" transform="matrix(-1 0 0 -1 43 43)"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
3
public/post_down.svg
Normal file
3
public/post_down.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M30.2098 12.1875L31.6875 13.7643L19.5 26.8125L7.3125 13.7643L8.78262 12.1875L19.5 23.6514L30.2098 12.1875Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 235 B |
11
public/post_goin.svg
Normal file
11
public/post_goin.svg
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_1_54)">
|
||||||
|
<path d="M21.9687 30.0625C21.8166 30.0634 21.6657 30.0342 21.5248 29.9767C21.384 29.9191 21.2558 29.8343 21.1478 29.7272C21.0394 29.6197 20.9534 29.4918 20.8947 29.3509C20.836 29.21 20.8058 29.0589 20.8058 28.9062C20.8058 28.7536 20.836 28.6025 20.8947 28.4616C20.9534 28.3207 21.0394 28.1928 21.1478 28.0853L30.7447 18.5L21.1478 8.91469C20.9301 8.69696 20.8078 8.40166 20.8078 8.09375C20.8078 7.78584 20.9301 7.49054 21.1478 7.27281C21.3655 7.05509 21.6608 6.93277 21.9687 6.93277C22.2767 6.93277 22.572 7.05509 22.7897 7.27281L33.1959 17.6791C33.3043 17.7866 33.3903 17.9144 33.449 18.0553C33.5077 18.1962 33.5379 18.3474 33.5379 18.5C33.5379 18.6526 33.5077 18.8038 33.449 18.9447C33.3903 19.0856 33.3043 19.2134 33.1959 19.3209L22.7897 29.7272C22.6816 29.8343 22.5535 29.9191 22.4126 29.9767C22.2718 30.0342 22.1209 30.0634 21.9687 30.0625Z" fill="black"/>
|
||||||
|
<path d="M32.375 19.6562H4.625C4.31834 19.6562 4.02425 19.5344 3.80741 19.3176C3.59057 19.1008 3.46875 18.8067 3.46875 18.5C3.46875 18.1933 3.59057 17.8992 3.80741 17.6824C4.02425 17.4656 4.31834 17.3438 4.625 17.3438H32.375C32.6817 17.3438 32.9758 17.4656 33.1926 17.6824C33.4094 17.8992 33.5312 18.1933 33.5312 18.5C33.5312 18.8067 33.4094 19.1008 33.1926 19.3176C32.9758 19.5344 32.6817 19.6562 32.375 19.6562Z" fill="black"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_1_54">
|
||||||
|
<rect width="37" height="37" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
3
public/post_p.svg
Normal file
3
public/post_p.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.89452 25.582L5.93701 4.87939L48.1782 26L5.93701 47.1206L8.89452 26.418L10.5667 26L8.89452 25.582ZM11.3964 12.4539L12.7722 22.0847L28.4334 26L12.7722 29.9153L11.3964 39.5461L38.4886 26L11.3964 12.4539Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 372 B |
3
public/remark.svg
Normal file
3
public/remark.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12.0938 17.4688C10.6073 17.4688 9.40627 18.6614 9.40627 20.0807C9.40627 21.6428 10.6073 22.8438 12.0938 22.8438C13.5803 22.8438 14.7057 21.647 14.7057 20.1563C14.7057 18.6656 13.5887 17.4688 12.0938 17.4688ZM21.5 17.3932C20.0093 17.3932 18.8881 18.59 18.8881 20.0807C18.8881 21.5714 20.0849 22.6926 21.5 22.6926C22.9152 22.6926 24.1119 21.4958 24.1119 20.0807C24.1119 18.6656 22.9949 17.3932 21.5 17.3932ZM30.9063 17.4688C29.4156 17.4688 28.2944 18.6656 28.2944 20.1563C28.2944 21.647 29.4911 22.8438 30.9063 22.8438C32.397 22.8438 33.5929 21.647 33.5929 20.1563C33.5938 18.6614 32.4012 17.4688 30.9063 17.4688ZM21.5 2.61194C9.62463 2.61194 0.0756086 10.4326 0.0756086 20.0807C0.0756086 24.08 1.74774 27.7443 4.51922 30.6879C3.27037 34.0053 0.666859 36.8087 0.624866 36.8398C0.0685539 37.4277 -0.0783348 38.2885 0.236523 39.0234C0.488644 39.8254 1.20772 40.3125 2.01565 40.3125C7.17985 40.3125 11.1783 38.1499 13.6979 36.4282C16.1225 37.1841 18.7504 37.625 21.5 37.625C33.3754 37.625 42.9244 29.8036 42.9244 20.2319C42.9244 10.6602 33.3754 2.61194 21.5 2.61194ZM21.5 33.5938C19.2534 33.5938 17.0388 33.2473 14.919 32.5759L13.0084 31.9775L11.3715 33.1319C10.1747 33.9818 8.52696 34.9274 6.54325 35.5674C7.16255 34.5495 7.7501 33.4048 8.21202 32.187L9.10393 29.8355L7.37217 27.9987C5.86297 26.3795 4.03631 23.7004 4.03631 20.1563C4.03631 12.7447 11.867 6.71877 21.4295 6.71877C30.9919 6.71877 38.8226 12.7447 38.8226 20.1563C38.8226 27.5679 31.1414 33.5938 21.5 33.5938Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
11
src/App.vue
Normal file
11
src/App.vue
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
13
src/main.js
Normal file
13
src/main.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
|
|
||||||
|
// import { createApp } from 'vue'
|
||||||
|
// import App from './App.vue'
|
||||||
|
// import router from '../router/router.js';
|
||||||
|
// const app = createApp(App)
|
||||||
|
|
||||||
|
// app.use(router)
|
||||||
|
// app.mount("#app")
|
||||||
79
support.css
79
support.css
@ -1,79 +0,0 @@
|
|||||||
*{
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body{
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#youyou_container{
|
|
||||||
width: 600px;
|
|
||||||
height: 400px;
|
|
||||||
background-color: white;
|
|
||||||
border: 5px solid #000000;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#youyou_move{
|
|
||||||
display: flex;
|
|
||||||
height: 400px;
|
|
||||||
transition: transform 1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#youyou_move>*{
|
|
||||||
width: 600px;
|
|
||||||
height: 400px;
|
|
||||||
background-color: #ffffff;
|
|
||||||
background-position: center center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
|
|
||||||
/* transition: all 1s; */
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#youyou_move>*>*{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(255,255,255,0.5);
|
|
||||||
background-position: center center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#button_container{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
#button_container>*{
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background-position: center center;
|
|
||||||
background-size: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
#left_button{
|
|
||||||
background-image: url('./pic/left_button.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
#right_button{
|
|
||||||
background-image: url('./pic/right_button.svg');
|
|
||||||
}
|
|
||||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user