GoforStudio/GoforNetwork-Web-Beta
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

20241018-0000

Browse Source
This commit is contained in:
YOUKNOWWHO
2024-10-18 00:23:27 +08:00
parent 336967ee71
commit 25034b1a0c
9 changed files with 112 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/gofor-logo-white-brand.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

public/头图.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

src/components/Aboutmini.vue
+10 -11
View File
@@ -1,5 +1,5 @@
<template>
<div class="company-intro">
<div class="company-intro" id="about">
<div class="img-box" data-aos="zoom-in" data-aos-duration="1500">
<img class="company-pic" src="/gofor_logo.png" alt="companypic">
</div>
@@ -8,12 +8,11 @@
<br>
<h2 data-aos="fade-down" data-aos-duration="1300">共风同雨网络科技有限公司</h2>
<br>
<p data-aos="zoom-in" data-aos-duration="1200">网络工程 | 软硬件开发 | PCB电路设计 | 非标自动化工控 | 多领域生态合作</p>
<p data-aos="zoom-in" data-aos-duration="1200">网络工程 | 软硬件开发 | PCB电路 | 非标自动化工控 | 多领域生态合作</p>
<p data-aos="zoom-in" data-aos-duration="500">
您独一份的生态服务商。专注于为企业共同提供网络与软硬件等领域的解决方案，以定制化服务，助力企业共同发展成长，构建开放协作共赢生态。
您独一份的生态服务商。专注于为企业提供网络与软硬件等领域的解决方案，以定制化服务，助力企业共同发展成长，构建开放协作共赢生态。
</p>
</div>
<div class="show-text" data-aos="flip-down" data-aos-duration="1500">
<div class="text-effect">
<div class="main-text">网络工程<small>√</small></div>
@@ -47,9 +46,9 @@
</div>
<br><br>
</div>
<input type="button" value="了解更多生态服务解决方案" class="btn btn-outline-primary" @click="navigateToAbout">
<br><br>
<input type="button" value="了解更多生态服务" class="btn btn-outline-primary" @click="navigateToAbout">
</div>
<br>
</template>
<script>
@@ -109,7 +108,7 @@ export default {
h2 {
font-size: 28px;
/* Adjusted font size */
color: #FF931E;
color: #FF9900;
margin-bottom: 20px;
position: relative;
}
@@ -119,7 +118,7 @@ h2::after {
display: block;
width: 50px;
height: 4px;
background-color: #FF931E;
background-color: #FF9900;
position: absolute;
bottom: -10px;
left: 0;
@@ -140,9 +139,9 @@ h2::after {
padding: 10px 20px;
font-size: 14px;
/* Adjusted font size */
color: #FF931E;
color: #FF9900;
background-color: transparent;
border: 2px solid #FF931E;
border: 2px solid #FF9900;
border-radius: 25px;
cursor: pointer;
text-align: center;
@@ -150,7 +149,7 @@ h2::after {
}
.btn-outline-primary:hover {
background-color: #FF931E;
background-color: #FF9900;
color: #fff;
}
src/components/AppFooter.vue
+1 -1
View File
@@ -111,7 +111,7 @@
font-size: 1.3em;
/* 调整为稍小的字体大小 */
color: #000000;
border-bottom: 2px solid #f57c00;
border-bottom: 2px solid #FF9900;
padding-bottom: 10px;
margin-bottom: 15px;
}
src/components/Card.vue
+3 -3
View File
@@ -89,11 +89,11 @@ export default {
/* 按钮宽度占卡片宽度的20% */
padding: 5px 0;
/* 按钮内边距 */
border: 2px solid #FF931E;
border: 2px solid #FF9900;
/* 边框颜色 */
border-radius: 15px;
/* 圆角 */
color: #FF931E;
color: #FF9900;
/* 字体颜色 */
text-align: center;
text-decoration: none;
@@ -107,7 +107,7 @@ export default {
}
.custom-btn:hover {
background-color: #FF931E;
background-color: #FF9900;
/* 鼠标悬停时背景颜色 */
color: white;
/* 鼠标悬停时字体颜色 */
src/components/Carousel.vue
+74 -19
View File
@@ -1,35 +1,90 @@
<template>
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x400.png?text=Image+1" class="d-block w-100" alt="First slide">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400.png?text=Image+2" class="d-block w-100" alt="Second slide">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400.png?text=Image+3" class="d-block w-100" alt="Third slide">
<div class="overlay"></div>
<img src="/头图.png" class="d-block w-100" alt="First slide">
<h1 class="carousel-title" @click="scrollToSection">您独一份的生态服务商</h1>
<h5 class="carousel-subtitle" @click="scrollToSection">网络工程 | 软硬件开发 | PCB电路 | 非标自动化工控 | 多领域生态合作</h5>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</template>
<script>
export default {
methods: {
scrollToSection() {
const element = document.getElementById('about'); // 替换为目标标签的 ID
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}
}
}
</script>
<style scoped>
.carousel-item {
height: 100%; /* 让每个项占满父容器的高度 */
position: relative; /* 为了使渐变层定位 */
height: 100%;
}
.carousel-item img {
height: auto; /* 图片高度自适应 */
max-height: 100vh; /* 图片最大高度为视口高度 */
height: 110vh; /* 默认情况下，图片高度自适应为视口高度 */
max-height: 110vh; /* 图片最大高度为视口高度 */
object-fit: cover; /* 使图片覆盖整个区域 */
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3); /* 半透明黑色渐变 */
pointer-events: none; /* 确保点击事件穿透 */
}
.carousel-title {
position: absolute;
top: 40%; /* 调整标题位置 */
left: 50%;
transform: translate(-50%, -50%); /* 中心对齐 */
color: white; /* 标题颜色 */
font-size: 5rem; /* 根据需要调整字体大小 */
text-align: center; /* 文本居中 */
cursor: pointer; /* 显示为可点击的手势 */
}
.carousel-subtitle {
position: absolute;
top: 55%; /* 调整子标题位置 */
left: 50%;
transform: translate(-50%, -50%); /* 中心对齐 */
color: white; /* 子标题颜色 */
font-size: 1.5rem; /* 调整子标题字体大小 */
text-align: center; /* 文本居中 */
cursor: pointer; /* 显示为可点击的手势 */
}
/* 媒体查询：当屏幕宽度小于768px时，将图片高度改为auto */
@media (max-width: 768px) {
.carousel-item img {
height: auto; /* 高度自适应 */
max-height: none; /* 取消最大高度限制 */
}
.carousel-title {
margin-top: 5%;
font-size: 2rem; /* 手机页面字体调整 */
}
.carousel-subtitle {
font-size: 1.5rem; /* 手机页面子标题字体调整 */
display: none; /* 隐藏手机页面上的子标题 */
}
}
</style>
src/components/Topbar.vue
+22 -15
View File
@@ -10,7 +10,7 @@
}">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/gofor-logo-orange-brand.png" alt="logo" style="height: 40px;">
<img :src="logoSrc" alt="logo" style="height: 40px;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -44,6 +44,11 @@ export default {
isAtTop: true,
};
},
computed: {
logoSrc() {
return this.isAtTop ? '/gofor-logo-white-brand.png' : '/gofor-logo-orange-brand.png';
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
@@ -53,16 +58,14 @@ export default {
methods: {
handleScroll() {
const st = window.pageYOffset || document.documentElement.scrollTop;
const windowHeight = window.innerHeight; // 获取当前视口的高度
const windowHeight = window.innerHeight;
// 当页面滚动超过100vh时，允许收起top bar
if (st > windowHeight) {
this.isHidden = st > this.lastScrollTop; // 向下滚动时隐藏
this.isHidden = st > this.lastScrollTop;
} else {
this.isHidden = false; // 在100vh内不隐藏
this.isHidden = false;
}
// 当页面滚动到顶部时，设置isAtTop为true
this.isAtTop = st === 0;
this.lastScrollTop = st <= 0 ? 0 : st;
@@ -83,29 +86,33 @@ export default {
}
.navbar-brand {
margin: 0 7%;
/* Add space around the logo */
margin: 0 15%;
}
.navbar-nav .nav-link {
padding: 0.5rem 1rem;
/* Adjust padding for better touch targets */
color: inherit;
}
.navbar-nav .nav-link:hover {
color: #f57c00;
/* Change color on hover */
color: #FF9900;
}
.bg-transparent {
background: rgba(255, 255, 255, 0.1);
/* 半透明背景 */
/* backdrop-filter: blur(10px); 磨砂质感 */
background: rgba(255, 255, 255, 0);
backdrop-filter: blur(10px); /* 添加磨砂质感 */
-webkit-backdrop-filter: blur(10px); /* 为Safari浏览器添加支持 */
}
/* 媒体查询：在手机端时将磨砂效果改为纯透明 */
@media (max-width: 768px) {
.bg-transparent {
backdrop-filter: none; /* 取消磨砂效果 */
background: rgba(255, 255, 255, 0); /* 纯透明 */
}
}
.content {
margin-top: 40px;
/* Leave space for the top bar */
}
</style>
src/main.ts
+1
View File
@@ -14,6 +14,7 @@ import AOS from "aos";
import "aos/dist/aos.css"; // You can also use <link> for styles
// ..
AOS.init();
const app = createApp(App);
registerPlugins(app);
vite.config.mts
+1
View File
@@ -69,6 +69,7 @@ export default defineConfig({
],
},
server: {
host:'0.0.0.0',
port: 3000,
},
})