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

20240610

Browse Source
This commit is contained in:
bzbk007
2024-06-10 13:14:17 +08:00
parent ff332795f0
commit 7565b88574
13 changed files with 469 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Body/AboutUs/AboutUs.vue
+83 -101
View File
@@ -1,130 +1,112 @@
<template>
<div>
<div class="headline" id="AboutUs">
<img width="50%" style="min-width: 400px;" src="@\assets\img\tt001.png"/>
<!-- <h1>关于我们</h1> -->
<div class="about-us-container">
<div>
<div class="headline" id="about-us">
<img class="title-img" src="@/assets/img/tt001.png" alt="Title Image"/>
<!-- <h1>关于我们</h1> -->
</div>
</div>
<v-responsive max-width="auto" class="content-container">
<v-card class="content-card" data-aos="fade-up" data-aos-duration="2000">
<v-tabs v-model="activeTab" color="#e3692f" background-color="light" class="tabs">
<div class="tabs-wrapper">
<v-tab value="company-intro">公司介绍</v-tab>
<v-tab value="development-history">发展历程</v-tab>
<v-tab value="software-services">软件服务</v-tab>
<v-tab value="success-cases">成功案例</v-tab>
<v-tab value="open-lab">开放实验室</v-tab>
</div>
</v-tabs>
<v-card-text>
<Inc-Info/>
<Grow />
</v-card-text>
</v-card>
</v-responsive>
</div>
<v-responsive max-width="auto">
<v-card data-aos="fade-up" data-aos-duration="2000">
<v-tabs v-model="tab" color="#e3692f" bg-color="light" class="tabs">
<v-tab value="公司介绍"> 公司介绍</v-tab>
<v-tab value="发展历程"> 发展历程</v-tab>
<v-tab value="软件服务"> 软件服务</v-tab>
<v-tab value="成功案例"> 成功案例</v-tab>
<v-tab value="开放实验室"> 开放实验室</v-tab>
</v-tabs>
<v-card-text>
<v-tabs-items v-model="tab">
<v-tab-item value="公司介绍" id="公司介绍">
<div class="company-intro" data-aos="fade-up" data-aos-duration="1500">
<div class="img">
<img height="600px" src="@/assets/img/专利图.jpg" alt="companypic">
</div>
<div class="text">
<h2>公司介绍</h2>
<p>北京图力普联科技有限公司（以下简称“图力普联”）成立于2015年12月，注册资金600万元。公司总部位于北京，西安设有子公司。</p>
<p>公司成立以来，持续强化研发投入与技术团队培养，2020年12月取得《高新技术企业》证书，后续还获得《中关 村高新技术企业》证书，2023年获评北京市创新型企业、北京市专精特新企业。</p>
<p>公司现拥有自主研发专利权4项，软件著作权11项，“在申请”专利8项。我们为客户提供从产品设计（ID/MD和整机评价）到研发过程（PCB、SI/PI、DFM和ODM），从测试（EMC、环境及可靠性）到生产（供应链管理、打样、批量）的一站式专业解决方案。公司已通过ISO9001质量管理体系认证，我们致力于加快电子产品的硬件创新进程，提升产品质量，成为一流的硬件创新服务商。作为一家专注于硬件ODM和OEM的公司，我们拥有优势合作的射频实验室、环境实验室、PCB/FPC/SMT工厂资源。我们的客户广泛分布在工业控制、自动驾驶、汽车电子、人工智能等行业，累计服务国内外客户300+。</p>
</div>
</div>
</v-tab-item>
<v-tab-item value="企业文化" id="企业文化">
<div class="company-intro2" data-aos="fade-up" data-aos-duration="1500">
<div class="img2">
<img style="max-width: 100%;" src="@/assets/img/q02.jpg" alt="companypic">
</div>
</div>
</v-tab-item>
</v-tabs-items>
</v-card-text>
</v-card>
<v-card>
<Copyright />
</v-card>
</v-responsive>
</template>
<script>
import Copyright from './Copyright.vue';
export default {
data: () => ({
tab: '公司介绍',
}),
}
data() {
return {
activeTab: 'company-intro'
};
}
};
</script>
<style scoped>
.about-us-container {
padding: 20px;
font-family: 'Roboto', sans-serif;
}
.headline {
text-align: center;
font-size: 36px;
font-weight: bold;
padding: 50px;
margin-bottom: 10px;
text-shadow: rgba(62, 66, 66, 0.24) 2px 10px 9px;
margin-bottom: 20px;
}
.title-img {
width: 50%;
max-width: 100%;
height: auto;
margin: 0 auto;
display: block;
border-radius: 8px;
transition: transform 0.3s ease;
}
.title-img:hover {
transform: scale(1.05);
}
.content-container {
padding: 20px;
background-color: #fff;
border-radius: 12px;
}
.content-card {
margin-bottom: 20px;
border-radius: 12px;
padding: 16px;
border: 1px solid #e0e0e0;
}
.tabs {
margin-bottom: 16px;
border-bottom: 1px solid #e0e0e0;
text-align: center; /* 让选项卡水平居中 */
}
.tabs-wrapper {
display: flex;
justify-content: space-between;
justify-content: center; /* 让选项卡内元素水平居中 */
}
.tabs .v-tab {
flex-grow: 1;
flex-shrink: 1;
.v-tab {
margin: 0 8px; /* 调整选项卡之间的间距 */
}
.company-intro,
.company-intro2 {
display: flex;
flex-direction: column;
align-items: center;
text-align: left;
padding: 20px;
line-height: 1.5;
text-shadow: rgba(62, 66, 66, 0.24) 2px 10px 9px;
.v-tab--active {
color: #e3692f !important;
}
.company-intro .img,
.company-intro2 .img2 {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 600px;
margin-bottom: 20px;
}
.company-intro .text,
.company-intro2 .text {
width: 100%;
max-width: 800px;
}
.company-intro h2 {
font-size: 24px;
font-weight: 600;
margin-top: 30px;
margin-bottom: 30px;
text-align: center;
}
.company-intro p {
margin-top: 20px;
margin-bottom: 20px;
.v-card-text {
line-height: 1.8;
font-size: 16px;
color: #333;
}
.v-card {
-webkit-box-shadow: 0px 10px 104px 10px rgba(62, 66, 66, 0.15);
-moz-box-shadow: 0px 10px 104px 10px rgba(62, 66, 66, 0.15);
box-shadow: 0px 10px 104px 10px rgba(62, 66, 66, 0.15);
}
@media (max-width: 600px) {
.title-img {
width: 80%;
}
@media screen and (max-width: 1245px) {
.company-intro .img {
display: none;
.tabs {
overflow-x: auto;
}
}
</style>
src/components/Body/AboutUs/Copyright.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="headline" id="ContactUs">
<img width="50%" style="min-width: 400px;" src="@\assets\img\tt002.png" />
<img width="50%" src="@\assets\img\tt002.png" />
<!-- <h1>软著与专利</h1> -->
</div>
<div class="container">
src/components/Body/AboutUs/List/Case.vue
+1
View File
@@ -0,0 +1 @@
<!-- 成功案例 -->
src/components/Body/AboutUs/List/Grow.vue
+99
View File
@@ -0,0 +1,99 @@
<!-- 发展历程 -->
<template>
<div class="event-list">
<div class="event-item" v-for="(event, index) in events" :key="index">
<div class="event-year">{{ event.year }}</div>
<div class="event-image">
<img :src="event.image" alt="Event Image"/>
</div>
<div class="event-title">{{ event.title }}</div>
<div class="event-description">{{ event.description }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
events: [
{
year: "2015年",
image: "src/assets/img/1640334000969813.jpg",
title: "公司成立",
description: "事件描述，占位文本，11514"
},
{
year: "2020",
image: "src/assets/img/1640334000969813.jpg",
title: "分公司成立",
description: "事件描述，占位文本，11514"
},
{
year: "2021",
image: "src/assets/img/1640334000969813.jpg",
title: "设立分部",
description: "事件描述，占位文本，11514"
},
{
year: "2023",
image: "src/assets/img/1640334000969813.jpg",
title: "合资公司成立",
description: "事件描述，占位文本，11514"
},
// 添加更多事件对象...
]
};
}
};
</script>
<style scoped>
.event-list {
display: flex;
flex-wrap: wrap;
justify-content: center; /* 剧中排列 */
gap: 20px;
}
.event-item {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.event-year {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.event-image img {
max-width: 100%;
max-height: 200px; /* 设置图片最大高度 */
width: auto;
height: auto;
border-radius: 8px;
object-fit: cover; /* 保持图片比例并填充 */
}
.event-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.event-description {
font-size: 14px;
line-height: 1.6;
color: #666;
}
@media (max-width: 600px) {
.event-item {
width: 90%; /* 在小屏幕上使事件列表占据 90% 的宽度 */
margin-bottom: 20px; /* 增加底部间距 */
}
}
</style>
src/components/Body/AboutUs/List/Inc-Info.vue
+61
View File
@@ -0,0 +1,61 @@
<!-- 公司介绍 -->
<template>
<div class="company-intro" data-aos="fade-up" data-aos-duration="1500">
<div class="img">
<img class="company-pic" src="@/assets/img/专利图.jpg" alt="companypic">
</div>
<div class="text">
<h2>公司介绍</h2>
<p>北京图力普联科技有限公司（以下简称“图力普联”）成立于2015年12月，注册资金600万元。公司总部位于北京，西安设有子公司。</p>
<p>公司成立以来，持续强化研发投入与技术团队培养，2020年12月取得《高新技术企业》证书，后续还获得《中关村高新技术企业》证书，2023年获评北京市创新型企业、北京市专精特新企业。</p>
<p>公司现拥有自主研发专利权4项，软件著作权11项，“在申请”专利8项。我们为客户提供从产品设计（ID/MD和整机评价）到研发过程（PCB、SI/PI、DFM和ODM），从测试（EMC、环境及可靠性）到生产（供应链管理、打样、批量）的一站式专业解决方案。公司已通过ISO9001质量管理体系认证，我们致力于加快电子产品的硬件创新进程，提升产品质量，成为一流的硬件创新服务商。作为一家专注于硬件ODM和OEM的公司，我们拥有优势合作的射频实验室、环境实验室、PCB/FPC/SMT工厂资源。我们的客户广泛分布在工业控制、自动驾驶、汽车电子、人工智能等行业，累计服务国内外客户300+。
</p>
</div>
</div>
</template>
<script>
export default {
name: "CompanyIntro"
};
</script>
<style scoped>
.company-intro {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 20px;
}
.img {
flex: 1;
max-width: 50%;
padding: 10px;
}
.text {
flex: 1;
max-width: 50%;
padding: 10px;
line-height: 1.6; /* Adjusted line height for better readability */
}
.company-pic {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
@media (max-width: 768px) {
.company-intro {
flex-direction: column;
}
.img, .text {
max-width: 100%;
}
}
</style>
src/components/Body/AboutUs/List/OpenLib.vue
+1
View File
@@ -0,0 +1 @@
<!-- 开放实验室 -->
src/components/Body/AboutUs/List/SoftServe.vue
+1
View File
@@ -0,0 +1 @@
<!-- 软件服务 -->
src/components/Gallary2.vue
+22
View File
@@ -0,0 +1,22 @@
<template>
<v-carousel cycle hide-delimiters>
<v-carousel-item
src="@/assets/img/1663754846112467.jpg"
cover
></v-carousel-item>
<v-carousel-item
src="@/assets/img/1663754864969972.jpg"
cover
></v-carousel-item>
<v-carousel-item
src="@/assets/img/1663754872288766.jpg"
cover
></v-carousel-item>
</v-carousel>
</template>
<script>
</script>
src/components/Home.vue
+5 -5
View File
@@ -1,9 +1,9 @@
<template>
<Gallary />
<Gallary2 />
<div class="appbody">
<Products />
<AboutUs />
<Copyright />
<News />
<Cooperate />
<ContectUs />
@@ -15,8 +15,10 @@
<script>
import AOS from 'aos';
import 'aos/dist/aos.css';
import Gallary from "@/components/Gallary.vue";
//import Gallary from "@/components/Gallary.vue";
import Gallary2 from "@/components/Gallary2.vue";
import AboutUs from "@/components/Body/AboutUs/AboutUs.vue";
import Copyright from "@/components/Body/AboutUs/Copyright.vue";
import Products from "@/components/Body/Products/Products.vue";
import IndexFooter from "@/components/IndexFooter.vue";
import News from '@/components/Body/News/News.vue';
@@ -33,8 +35,6 @@ export default {
<style>
.appbody {
width: 100%;
max-width: 1920px;
min-width: 600px;
margin: auto;
}
</style>
src/components/TopBar/Navbar.vue
+1 -1
View File
@@ -116,7 +116,7 @@ export default {
}
};
</script>
<style>
<style scoped>
body {
padding-top: 56px;
color: black;
src/components/TopBar/Navbar2.vue
+191
View File
@@ -0,0 +1,191 @@
<template>
<div class="navbar">
<div class="navbar-left">
<img src="@/assets/icon/itulipu.jpg" alt="Company Logo" class="logo" />
</div>
<div class="navbar-right">
<ul class="nav-items">
<li class="nav-item" @click="scrollTo('home')">主页</li>
<li class="nav-item" @click="scrollTo('services')">产品与服务</li>
<li class="nav-item" @mouseenter="showSubMenu('about')" @mouseleave="hideSubMenu('about')">
合作领域
<ul v-if="showAboutSubMenu" class="sub-menu">
<li class="sub-item" @click="scrollTo('team')">教育</li>
<li class="sub-item" @click="scrollTo('history')">汽车</li>
<li class="sub-item" @click="scrollTo('team')">工控</li>
<li class="sub-item" @click="scrollTo('history')">物联网</li>
<li class="sub-item" @click="scrollTo('team')">云计算</li>
<li class="sub-item" @click="scrollTo('history')">芯片</li>
</ul>
</li>
<li class="nav-item" @click="scrollTo('contact')">关于我们</li>
<li class="nav-item" @click="scrollTo('contact')">新闻资讯</li>
<li class="nav-item" @click="scrollTo('contact')">联系我们</li>
<li class="nav-item" @click="scrollTo('contact')">EN</li>
</ul>
</div>
<button class="menu-toggle" @click="toggleMenu">☰</button>
</div>
<div class="mobile-nav" v-if="showMobileMenu">
<ul class="mobile-nav-items">
<li class="mobile-nav-item" @click="scrollTo('home'); toggleMenu()">Home</li>
<li class="mobile-nav-item" @click="toggleSubMenu">About</li>
<ul v-if="showMobileSubMenu" class="mobile-sub-menu">
<li class="mobile-sub-item" @click="scrollTo('team'); toggleMenu()">Team</li>
<li class="mobile-sub-item" @click="scrollTo('history'); toggleMenu()">History</li>
</ul>
<li class="mobile-nav-item" @click="scrollTo('services'); toggleMenu()">Services</li>
<li class="mobile-nav-item" @click="scrollTo('contact'); toggleMenu()">Contact</li>
<a href="https://en.tulipu.com" class="mobile-language-toggle">
EN
</a>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
showAboutSubMenu: false,
showMobileMenu: false,
showMobileSubMenu: false,
};
},
methods: {
scrollTo(section) {
const element = document.getElementById(section);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
},
showSubMenu(menu) {
if (menu === 'about') {
this.showAboutSubMenu = true;
}
},
hideSubMenu(menu) {
if (menu === 'about') {
this.showAboutSubMenu = false;
}
},
toggleMenu() {
this.showMobileMenu = !this.showMobileMenu;
},
toggleSubMenu() {
this.showMobileSubMenu = !this.showMobileSubMenu;
}
},
};
</script>
<style scoped>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: white;
color: black;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1000; /* Ensure navbar is above other content */
}
.navbar-left .logo {
height: 50px;
}
.navbar-right {
display: flex;
align-items: center;
}
.nav-items {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-item {
margin-right: 20px;
cursor: pointer;
position: relative;
}
.sub-menu {
position: absolute;
top: 100%;
left: 0;
background: white;
list-style: none;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 2000; /* Ensure submenu is above other elements */
}
.sub-item {
margin: 5px 0;
cursor: pointer;
}
.language-toggle, .menu-toggle, .mobile-language-toggle {
padding: 5px 10px;
cursor: pointer;
background-color: #ffc476;
color: white;
border: none;
border-radius: 5px;
outline: none;
text-decoration: none; /* Ensure link looks like button */
display: inline-block;
text-align: center;
}
.language-toggle:hover, .menu-toggle:hover, .mobile-language-toggle:hover {
background-color: #efefef;
}
.menu-toggle {
display: none;
}
.mobile-nav {
display: none;
}
@media (max-width: 768px) {
.nav-items {
display: none;
}
.menu-toggle {
display: block;
}
.mobile-nav {
display: block;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.mobile-nav-items {
list-style: none;
padding: 0;
}
.mobile-nav-item {
padding: 10px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.mobile-sub-menu {
list-style: none;
padding: 0 20px;
}
.mobile-sub-item {
padding: 10px 0;
cursor: pointer;
}
}
</style>
src/components/TopBar/TopBar.vue
+2 -3
View File
@@ -1,8 +1,7 @@
<template>
<Navbar />
<Navbar2 />
</template>
<script>
import Navbar from '@/components/TopBar/Navbar.vue';
import Navbar2 from '@/components/TopBar/Navbar.vue';
import BackgroundCSS from '@/components/BackgroundCSS.vue';
</script>
vite.config.mjs
+1
View File
@@ -42,6 +42,7 @@ export default defineConfig({
],
},
server: {
host: '0.0.0.0',
port: 3000,
},
})