long/mes_home
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

自动化官网

Browse Source
This commit is contained in:
龙运模
2023-12-29 14:24:12 +08:00
parent 53346fb55e
commit 55dda07809
13 changed files with 14341 additions and 605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -3,7 +3,8 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>官方网站</title>
<title>德木自动化</title>
<link rel="icon" href="./static/favicon.ico">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=jcI3Q88g6V99OPBjLryoOqPTtsRdedHA"></script>
</head>
<body data-spy="scroll" data-target="#myScrollspy">

12507
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
src/assets/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
src/assets/img/logo_hyaline.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

99
src/components/Footer.vue
View File

@@ -1,18 +1,29 @@
<template>
<div id="footer" class="container-fluid">
<div class="logo">
<img src="@/assets/img/logo_white.png" alt="logo图">
<div class="container container-fuild">
<div class="col col-xs-12 col-sm-6 col-md-4">
<div class="logo">
<img src="@/assets/img/logo_hyaline.png" alt="logo图">
<div class="logo-text">
<p class="text-name">自动化MES管理系统</p>
<p class="text">MES ADMIN LOGIN</p>
</div>
</div>
</div>
<div class="col col-xs-12 col-sm-6 col-md-4">
<div class="companyView">
<p class="company text-left">江苏德木供应链管理有限公司</p>
<p class="copy text-left">Copyright &copy; @2021江苏德木供应链管理有限公司</p>
<p class="text text-left">版权所有苏ICP备18028199号</p>
</div>
</div>
<div class="col col-xs-12 col-sm-6 col-md-4">
<div class="aboutView">
<p class="about-text text-left">关于德木</p>
<p class="service text-left">联系客服</p>
</div>
</div>
</div>
<p class="title">公司企业网站模板</p>
<p class="address_tel_fax">
<span>地址：公司地址</span>
<span>Tel：888-888-888</span>
</p>
<p class="email_wx">
<span>邮箱：xxx@163.com</span>
<span>微信号：xxx</span>
</p>
<p class="copy">Copyright &copy; 2018 - {{ new Date().getFullYear() }} 公司名称</p>
</div>
</template>
<script>
@@ -31,45 +42,45 @@ export default {
background: #474747;
overflow: hidden;
text-align: center;
padding: 40px 0 80px 0;
}
.logo {
width: 95px;
height: 45px;
margin: 50px auto 20px;
display: flex;
margin-bottom: 10px;
}
.title {
font-size: 25px;
.logo img{
width: 50px;
height: 45px;
}
.logo .logo-text{
margin-left: 15px;
}
.logo .logo-text .text-name{
font-size: 16px;
font-weight: 400;
margin-bottom: 3px;
}
.logo .logo-text .text{
font-size: 14px;
font-weight: 400;
}
.logo p{
margin: 0;
text-align: left;
}
.companyView .company{
font-weight: 500;
font-size: 18px;
margin-bottom: 20px;
}
.address_tel_fax {
color: #d3d3d3;
font-size: 14px;
margin: 10px 0;
.aboutView .about-text{
font-weight: 500;
font-size: 18px;
margin-bottom: 20px;
}
.email_wx {
color: #d3d3d3;
font-size: 14px;
}
.copy {
color: #d3d3d3;
font-size: 14px;
margin: 50px 0 10px;
}
@media screen and (max-width: 997px) {
.title {
font-size: 20px;
}
.address_tel_fax {
font-size: 12px;
}
.email_wx {
font-size: 12px;
}
.copy {
font-size: 12px;
margin: 30px 0 10px;
}
@media screen and (max-width: 997px) {
}
</style>

2
src/components/GoTop.vue
View File

@@ -40,6 +40,6 @@ export default {
width: 100%;
height: 100%;
color: rgb(8, 162, 233);
font-size: 30px;
font-size: 24px;
}
</style>

189
src/components/Header.vue
View File

@@ -5,8 +5,8 @@
<div class="header-top container-fuild hidden-xs">
<div class="container">
<div class="server pull-left">
<span class="glyphicon glyphicon-earphone"></span>888-888-888
<span class="glyphicon glyphicon-envelope"></span>xxx@163.com
<span class="glyphicon glyphicon-earphone"></span>188-2080-2884
<span class="glyphicon glyphicon-envelope"></span>1724894114@163.com
<span class="glyphicon glyphicon-time"></span>7x24小时为您服务
</div>
<div class="shejiao pull-right">
@@ -19,7 +19,11 @@
<div class="header-nav container hidden-xs">
<!-- 导航logo -->
<div class="header-nav-logo">
<img src="@/assets/img/logo_black.png">
<img src="@/assets/img/logo.png">
<div class="logo-text">
<p class="text-name">{{logoName}}</p>
<p class="text">{{logoText}}</p>
</div>
</div>
<!-- 导航内容 -->
<ul class="header-nav-wrapper">
@@ -45,7 +49,11 @@
<!-- 手机导航 -->
<div class="header-nav-m container-fuild visible-xs">
<div class="header-nav-m-logo">
<img class="center-block" src="@/assets/img/logo_black.png" alt="logo">
<img class="center-block" src="@/assets/img/logo.png" alt="logo">
<div class="logo-text">
<p class="text-name">{{logoName}}</p>
<p class="text">{{logoText}}</p>
</div>
</div>
<!-- 导航栏 -->
<div class="header-nav-m-menu text-center">
@@ -63,7 +71,7 @@
<li
v-for="(item,index) in navList"
:key="index"
:class="index==navIndex?'active':''"
:class="['text-left',index==navIndex?'active':'']"
@click="navClick(index,item.name)"
data-toggle="collapse"
data-target="#menu"
@@ -85,7 +93,9 @@ export default {
return {
navIndex: sessionStorage.getItem('navIndex') ? sessionStorage.getItem('navIndex') : 0,
menuName: "首页",
menuClass: "glyphicon glyphicon-menu-down",
menuClass: "glyphicon glyphicon-home",
logoName:'自动化MES管理系统',
logoText:'MES ADMIN LOGIN',
navList: [
{
name: "首页",
@@ -93,44 +103,49 @@ export default {
children: []
},
{
name: "软件产品",
path: "/software",
children: [
{
name: "智能小镇管理系统",
path: "/software/smartTown"
},
{
name: "大数据管理系统",
path: "/software/bigData"
}
]
},
{
name: "相关服务",
path: "/service",
children: []
},
{
name: "新闻动态",
path: "/newsinformation",
children: []
},
{
name: "公司介绍",
path: "/companyintroduction",
children: []
},
{
name: "工作机会",
name: "产品概览",
path: "/jobchance",
children: []
},
// {
// name: "产品概览",
// path: "/software",
// children: [
// {
// name: "智能小镇管理系统",
// path: "/software/smartTown"
// },
// {
// name: "大数据管理系统",
// path: "/software/bigData"
// }
// ]
// },
{
name: "联系我们",
path: "/contactus",
name: "生产数据",
path: "/service",
children: []
}
},
// {
// name: "新闻动态",
// path: "/newsinformation",
// children: []
// },
{
name: "关于德木",
path: "/companyintroduction",
children: []
},
// {
// name: "工作机会",
// path: "/jobchance",
// children: []
// },
// {
// name: "联系我们",
// path: "/contactus",
// children: []
// }
]
};
},
@@ -141,10 +156,10 @@ export default {
this.menuName = name;
},
menuClick() {
if (this.menuClass == "glyphicon glyphicon-menu-down") {
this.menuClass = "glyphicon glyphicon-menu-up";
if (this.menuClass == "glyphicon glyphicon-home") {
this.menuClass = "glyphicon glyphicon-th-list";
} else {
this.menuClass = "glyphicon glyphicon-menu-down";
this.menuClass = "glyphicon glyphicon-home";
}
}
}
@@ -173,21 +188,33 @@ export default {
}
/* 导航栏logo */
#header .header-nav .header-nav-logo {
width: 100px;
width: 260px;
height: 100%;
float: left;
position: relative;
display: flex;
align-items: center;
}
/* 导航栏logo图片 */
#header .header-nav .header-nav-logo img {
width: 95px;
height: 45px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 60px;
height: 60px;
flex-basis: 60px;
}
#header .header-nav .header-nav-logo .logo-text{
flex: 1;
padding-left: 20px;
}
#header .header-nav .header-nav-logo .text-name{
font-size: 18px;
font-weight: 600;
color: #000;
margin-bottom: 5px;
}
#header .header-nav .header-nav-logo .text{
margin-bottom: 0;
margin-top: 5px;
font-size: 14px;
}
/* 导航栏 导航容器 */
#header .header-nav-fixed .header-nav-wrapper {
@@ -223,7 +250,7 @@ export default {
height: 2px;
opacity: 0;
transition: all 0.6s ease;
background-color: #1e73be;
background-color: #009688;
}
/* 导航栏 每个导航下面的 a 链接的右侧小三角 */
#header .header-nav .header-nav-wrapper > li > a > span {
@@ -232,7 +259,7 @@ export default {
}
/* 导航栏 每个导航下面的 a 链接 鼠标滑上去的样式 */
#header .header-nav .header-nav-wrapper > li > a:hover {
color: #1e73be;
color: #009688;
text-decoration: none;
}
/* 导航栏 每个导航下面的 a 链接 鼠标滑上去下划线的样式 */
@@ -247,9 +274,9 @@ export default {
}
/* 导航栏 每个导航下面的 a 链接 鼠标点击后的样式 */
#header .header-nav .header-nav-wrapper > li.active > a {
color: #1e73be;
color: #009688;
text-decoration: none;
border-bottom: 2px solid #1e73be;
border-bottom: 2px solid #009688;
}
/* 导航栏 每个导航下面的二级导航容器 */
#header .header-nav .header-nav-wrapper > li > dl {
@@ -280,31 +307,41 @@ export default {
cursor: pointer;
background: #ccc;
}
@media screen and (max-width: 997px) {
#header .header-nav-m {
position: relative;
}
/* 导航栏logo容器 */
#header .header-nav-m .header-nav-m-logo {
height: 80px;
height: 70px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* 导航栏logo图片 */
#header .header-nav-m .header-nav-m-logo img {
width: 95px;
height: 45px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50px;
height: 50px;
margin: 0;
}
#header .header-nav-m .header-nav-m-logo .logo-text{
margin-left: 15px;
}
#header .header-nav-m .header-nav-m-logo .logo-text .text-name{
margin-bottom: 5px;
font-size: 16px;
}
#header .header-nav-m .header-nav-m-logo .logo-text .text{
margin-bottom: 0;
margin-top: 5px;
font-size: 12px;
}
/* 导航栏 菜单容器 */
#header .header-nav-m .header-nav-m-menu {
color: #fff;
height: 50px;
font-size: 20px;
font-size: 14px;
line-height: 50px;
background: #474747;
position: relative;
@@ -313,13 +350,16 @@ export default {
#header .header-nav-m .header-nav-m-menu-wrapper {
position: absolute;
top: 50%;
right: 20px;
left: 10px;
margin-top: -20px;
width: 50px;
width: 40px;
height: 40px;
color: #fff;
z-index: 999999;
font-size: 12px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
/* 导航栏 */
#header .header-nav-m .header-nav-m-wrapper {
@@ -332,17 +372,18 @@ export default {
}
/* 导航栏 每个导航 */
#header .header-nav-m .header-nav-m-wrapper > li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
padding: 0;
border-top: 1px solid #ccc;
}
/* 导航栏 每个导航下面的 a 链接 */
#header .header-nav-m .header-nav-m-wrapper > li > a {
color: #fff;
font-size: 15px;
font-size: 14px;
font-weight: bold;
padding: 15px 0;
position: relative;
width: 100%;
padding: 0 20px;
display: inline-block;
}
/* 导航栏 每个导航下面的 a 链接的右侧小三角 */
#header .header-nav .header-nav-wrapper > li > a > span {

173
src/router/index.js
View File

@@ -1,101 +1,112 @@
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
routes: [
{
path: '*',
redirect: '/'
}, {
path: '/',
name: 'PageView',
component: resolve => require(['@/view/PageView'], resolve),
path: "*",
redirect: "/",
},
{
path: "/",
name: "PageView",
component: (resolve) => require(["@/view/PageView"], resolve),
children: [
{
path: '/',
redirect: '/home'
}, {
path: '/home',
name: 'home',
component: resolve => require(['@/view/HomePage'], resolve),
path: "/",
redirect: "/home",
},
{
path: "/home",
name: "home",
component: (resolve) => require(["@/view/HomePage"], resolve),
meta: {
title: '首页'
}
}, {
path: '/software',
name: 'software',
component: resolve => require(['@/view/Software'], resolve),
title: "德木自动化｜首页",
},
},
{
path: "/software",
name: "software",
component: (resolve) => require(["@/view/Software"], resolve),
meta: {
title: '软件产品'
title: "软件产品",
},
children: [
{
path: '/software',
redirect: '/software/smartTown'
path: "/software",
redirect: "/software/smartTown",
},
{
path: '/software/smartTown',
name: 'software',
component: resolve => require(['@/view/Software_smartTown'], resolve),
path: "/software/smartTown",
name: "software",
component: (resolve) =>
require(["@/view/Software_smartTown"], resolve),
meta: {
title: '软件产品丨智能小镇管理系统'
}
title: "德木自动化丨产品概览",
},
},
{
path: '/software/bigData',
name: 'software',
component: resolve => require(['@/view/Software_bigData'], resolve),
path: "/software/bigData",
name: "software",
component: (resolve) =>
require(["@/view/Software_bigData"], resolve),
meta: {
title: '软件产品丨大数据管理系统'
}
}
]
}, {
path: '/service',
name: 'service',
component: resolve => require(['@/view/Service'], resolve),
meta: {
title: '相关服务'
}
}, {
path: '/newsinformation',
name: 'newsinformation',
component: resolve => require(['@/view/NewsInformation'], resolve),
meta: {
title: '新闻动态'
}
}, {
path: '/companyintroduction',
name: 'companyintroduction',
component: resolve => require(['@/view/CompanyIntroduction'], resolve),
meta: {
title: '公司介绍'
}
}, {
path: '/jobchance',
name: 'jobchance',
component: resolve => require(['@/view/JobChance'], resolve),
meta: {
title: '工作机会'
}
}, {
path: '/contactus',
name: 'contactus',
component: resolve => require(['@/view/ContactUs'], resolve),
meta: {
title: '联系我们'
}
title: "德木自动化丨大数据管理系统",
},
},
],
},
{
path: '/servicedetail',
name: 'servicedetail',
component: resolve => require(['@/view/ServiceDetail'],resolve),
path: "/service",
name: "service",
component: (resolve) => require(["@/view/Service"], resolve),
meta: {
title: '相关服务'
}
}
]
}
]
})
title: "德木自动化｜生产数据",
},
},
{
path: "/newsinformation",
name: "newsinformation",
component: (resolve) => require(["@/view/NewsInformation"], resolve),
meta: {
title: "新闻动态",
},
},
{
path: "/companyintroduction",
name: "companyintroduction",
component: (resolve) =>
require(["@/view/CompanyIntroduction"], resolve),
meta: {
title: "德木自动化｜关于德木",
},
},
{
path: "/jobchance",
name: "jobchance",
component: (resolve) => require(["@/view/JobChance"], resolve),
meta: {
title: "德木自动化丨产品概览",
},
},
{
path: "/contactus",
name: "contactus",
component: (resolve) => require(["@/view/ContactUs"], resolve),
meta: {
title: "联系我们",
},
},
{
path: "/servicedetail",
name: "servicedetail",
component: (resolve) => require(["@/view/ServiceDetail"], resolve),
meta: {
title: "相关服务",
},
},
],
},
],
});

402
src/view/CompanyIntroduction.vue
View File

@@ -1,65 +1,405 @@
<template>
<div id="CompanyIntroduction">
<div class="banner container-fuild text-center">关于我们</div>
<div class="container">
<div class="row CompanyIntroduction-container">
<div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn">
<img class="img-responsive center-block" src="@/assets/img/about_img.png">
<div id="swiper" class="container-fuild">
<div class="swiper-container banner-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
<img class="swiper-lazy" :data-src="item.img" alt="轮播图">
<div class="swiper-lazy-preloader"></div>
<div class="swiper-slide-title wow pulse">
<h1>{{item.title}}</h1>
<p>{{item.content}}</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<h3>网站建设文化传播有限公司</h3>
<p class=".text-justify">有家软件公司, 是一家以高科技创意为核心的技术服务公司, 聚集了众多对软件开发和界面设计有独特创意的高端人才, 致力于为企业提供软件开发, 网站建设, 网页设计, IT外包, 手机应用开发, 互联网营销, 微信平台开发等解决方案。</p>
<p class=".text-justify">我们的客户包括集团上市公司, 酒店, IT科技, 教育, 服装, 贸易, 外贸, 时尚, 生物, 工业, 制造等众多行业, 并树立了良好的口碑, 积累了丰富的经验和成功案例. 我们提供权威专业的互联网品牌策划, 并实施高标准的设计方案, 创造真正意义上的品牌网站, 为互联网品牌在互动行销领域创造最大价值而不懈努力!</p>
</div>
</div>
<!-- 公司介绍 -->
<div id="companyIntroduce">
<div class="container">
<div class="homeTitleView customer-title">
<div class="textBack text-center">COMPANY INTROdUCTION</div>
<div class="textName textNameArt text-center">公司介绍</div>
</div>
<div class="row CompanyIntroduction-container">
<div class="col col-xs-12 col-sm-12 col-md-6 wow zoomIn">
<img class="img-responsive center-block" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/company.png">
</div>
<div class="col col-xs-12 col-sm-12 col-md-6">
<p class=".text-justify">江苏德木供应链管理有限公司是国内一家专注木材企业信息化、网络化、数字化解决方案 的服务供应商。 公司致力于围绕木材用户需求，从行业痛点出发，通过对木材全产业链全场景全链
路SaaS产品的研发,围绕企业数字化管理、金融在线化赋能、大数据决策支持等多维度帮 助木材全产业链企业实现数字化科学管理，在线化高效协同，数据化严谨决策，让木材买 卖更简单。</p>
</div>
</div>
</div>
</div>
<!-- 公司愿景 -->
<div id="companyVision">
<div class="container">
<div class="homeTitleView customer-title">
<div class="textBack text-center">CORPORATE VISION</div>
<div class="textName textNameArt textNameArtTop text-center">企业愿景</div>
</div>
<p class="text-center">帮助广大木材企业用户实现数字化管理升级转型，引领木材行业走向产业互联网，成为木材 行业最有价值、最值得信赖的技术服务供应商。</p>
<div class="row">
<div class="col col-sx-12 col-sm-6 col-md-5">
<div class="userView wow slideInUp">
<div class="colLeft">
<div class="title">corporate mission</div>
<div class="viewBox">
<div class="name">企业使命</div>
<div class="text">让木材企业管理更简单</div>
</div>
</div>
<div class="colRight">
<img src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/user/01.png" alt="">
</div>
</div>
</div>
<div class="col col-sx-12 col-sm-6 col-md-5">
<div class="userView wow slideInUp">
<div class="colLeft">
<div class="title">corporate philosophy</div>
<div class="viewBox">
<div class="name">企业理念</div>
<div class="text">开放、融合、赋能、共成</div>
</div>
</div>
<div class="colRight">
<img src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/user/02.png" alt="">
</div>
</div>
</div>
<div class="col col-md-2 hidden-xs">
<div class="colBack"></div>
</div>
</div>
<div class="row">
<div class="col col-sx-12 col-sm-12 col-md-12">
<div class="userView wow zoomIn">
<div class="colLeft">
<div class="title">corporate mission</div>
<div class="viewBox">
<div class="name">企业价值观</div>
<div class="text">以客户价值为核心，用心服务、传递价值</div>
</div>
</div>
<div class="colRight">
<img src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/user/03.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Swiper from "swiper";
import { WOW } from 'wowjs';
export default {
name: 'CompanyIntroduction',
data(){
return{
swiperList: [
{
img: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/swiper1.png",
path: "",
title: '关于德木',
content: '德木存在理由和价值就是帮助客户实现价值',
}
],
userList:[
{
logo:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/user/01.png',
title:'corporate mission',
name:'企业使命',
text:'让木材企业管理更简单'
},
{
logo:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/user/02.png',
title:'corporate philosophy',
name:'企业理念',
text:'开放、融合、赋能、共成'
},
{
logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/user/03.png',
title: 'corporate mission',
name: '企业价值观',
text: '以客户价值为核心，用心服务、传递价值'
}
]
}
},
mounted(){
var wow = new WOW();
/* banner-swiper */
new Swiper(".banner-swiper", {
loop: true, // 循环模式选项
effect: 'fade',
//自动播放
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
// 延迟加载
lazy: {
loadPrevNext: true
},
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true //修改swiper的父元素时，自动初始化swiper
});
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
}
}
</script>
<style scoped>
.banner{
color: #fff;
font-size: 30px;
height: 150px;
line-height: 150px;
background-image: url('../assets/img/banner1.png');
background-repeat: no-repeat;
background-size: cover;
background-attachment: scroll;
background-position: center center;
/* 轮播图 */
#swiper {
height: 700px;
}
.row{
margin-right: 0;
margin-left: 0;
#swiper .banner-swiper {
width: 100%;
height: 100%;
}
.CompanyIntroduction-container{
padding: 100px 0;
#swiper .banner-swiper .swiper-slide img {
width: 100%;
height: 100%;
}
#swiper .banner-swiper .swiper-slide{
position: relative;
}
#swiper .banner-swiper .swiper-slide-title {
position: absolute;
top: 0;
left: 0;
z-index: 999999999;
width: 100%;
height: 100%;
color: #fff;
background: rgba(51, 51, 51, 0.534);
text-align: center;
}
#swiper .banner-swiper .swiper-slide-title > h1{
font-size: 50px;
margin-top: 13%;
}
#swiper .banner-swiper .swiper-slide-title > p{
font-size: 20px;
margin-top: 3%;
font-weight: 700;
}
/* 公司介绍 */
.homeTitleView{
position: relative;
}
.homeTitleView .textBack{
font-size: 34px;
color: rgba(0,0,0,0.05);
font-family: Inter;
font-weight: 600;
}
.homeTitleView .textName{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-weight: 600;
font-size: 36px;
font-family: PingFang SC;
}
.homeTitleView .textNameArt::after{
content: '';
position: absolute;
left: calc(50% - 60px);
bottom: -15px;
width: 120px;
height: 4px;
border-radius: 10px;
background: #009688;
}
.homeTitleView .textNameArtTop::after{
bottom: -55px;
}
#companyIntroduce{
background: url("https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/back1.png") no-repeat;
background-position: center center;
background-size: cover;
background-attachment:fixed;
transition: all ease 0.6s;
padding: 50px 0;
}
/* 公司愿景 */
#companyVision{
padding: 50px 0;
background: #F8F8F8;
}
#companyVision .container>p{
margin: 15px 0;
}
#companyVision .colBack{
background: #009688;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
height: calc(100% - 30px);
width: 100%;
margin-top: 30px;
}
#companyVision .userView{
display: flex;
justify-content: space-between;
background: #FFF;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
padding: 30px;
margin-top: 30px;
}
#companyVision .userView .colLeft{
display: flex;
flex-direction: column;
justify-content: space-between;
}
#companyVision .userView .colLeft .viewBox .name{
margin-bottom: 10px;
font-weight: 600;
color: #000;
font-size: 18px;
}
#companyVision .userView .colLeft .viewBox .text{
font-weight: 400;
color: #000;
}
#companyVision .userView .colLeft .title{
color: #009688;
font-weight: 700;
}
#companyVision .userView .colRight img{
width: auto;
height: 110px;
}
#companyVision .row{
display: flex;
flex-wrap: wrap;
}
#CompanyIntroduction{
width: 100%;
}
#companyIntroduce .CompanyIntroduction-container{
padding: 50px 0;
color: #808080;
transition: all ease 0.5s;
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
#companyIntroduce .CompanyIntroduction-container .col{
display: flex;
align-items: center;
}
.CompanyIntroduction-container>div>p{
font-size: 14px;
line-height: 2.5rem;
line-height: 2.8rem;
color: #333;
font-weight: 400;
font-family: PingFang SC;
}
@media screen and (max-width: 997px){
.CompanyIntroduction-container{
padding: 10px 0;
color: #808080;
/* 媒体查询（手机） */
@media screen and (max-width: 768px) {
.homeTitleView .textBack{
font-size: 20px;
}
.homeTitleView .textName{
font-size: 22px;
}
.homeTitleView .textNameArt::after{
width: 80px;
left: calc(50% - 40px);
}
#swiper {
height: 210px;
}
#swiper .banner-swiper .swiper-slide-title > h1{
font-size: 24px;
line-height: 34px;
}
#swiper .banner-swiper .swiper-slide-title > p{
font-size: 14px;
}
#companyIntroduce{
padding: 30px 0;
}
#companyIntroduce .row{
margin-left: 0;
margin-right: 0;
}
#companyIntroduce .CompanyIntroduction-container{
padding: 20px 0;
}
#companyVision{
padding: 20px 0;
}
#companyVision .homeTitleView{
margin-bottom: 40px;
}
#companyVision .homeTitleView .textNameArtTop::after{
bottom: -15px;
}
#companyVision .row{
margin-left: 0;
margin-right: 0;
}
#companyVision .userView .colRight img{
height: 60px;
}
}
/* 平板 */
@media screen and (min-width: 768px) and (max-width: 996px) {
.homeTitleView .textBack{
font-size: 30px;
}
.homeTitleView .textName{
font-size: 36px;
}
#swiper {
height: 400px;
}
#swiper .banner-swiper .swiper-slide-title > h1{
font-size: 30px;
margin-top: 18%;
}
#swiper .banner-swiper .swiper-slide-title > p{
font-size: 16px;
}
#headCard{
margin-top: 30px;
}
#headCard .row{
margin-left: 0;
margin-right: 0;
}
}
</style>

757
src/view/HomePage.vue
View File

@@ -8,8 +8,8 @@
<img class="swiper-lazy" :data-src="item.img" alt="轮播图">
<div class="swiper-lazy-preloader"></div>
<div class="swiper-slide-title">
<h1>{{item.title}}</h1>
<p>{{item.content}}</p>
<h1 class="wow zoomIn">{{item.title}}</h1>
<p class="wow zoomIn">{{item.content}}</p>
</div>
</div>
</div>
@@ -17,30 +17,102 @@
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> -->
</div>
</div>
<!-- 大数据管理系统 -->
<div id="bigData" class="container-fuild">
<div class="row bigData-container">
<div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn">
<img class="img-responsive" src="@/assets/img/img1.png" alt="大数据管理系统">
<!-- mes系统功能一览 -->
<div id="customer" class="container-fuild">
<div class="container customer-container">
<div class="homeTitleView customer-title">
<div class="textBack text-center">MES SYSTEM FUNCTION OVERVIEW</div>
<div class="textName text-center">MES系统功能一览</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<h2 class="bigData-title">
大数据管理系统
<small>/ Big Data Management System</small>
</h2>
<p>当今最领先的响应式自助建站平台。无论您是普通互联网用户，还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。想创建一个简单的单页式站点，还是一个专业的公司网站，亦或是一个别具一格的博客？起飞页可以满足您的所有需求。</p>
<p>我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户，还是专业网站制作人员。</p>
<h2 class="bigData-device">PC/PAD/Phone &nbsp; 全设备支持</h2>
<a href="#" class="btn btn-lg btn-block btn-info">联系我们</a>
<div class="customer-head hidden-xs">
<div class="head-name">生产工单</div>
</div>
<div class="swiper-container customer-swiper wow slideInUp hidden-xs">
<div class="swiper-wrapper">
<div class="swiper-slide customer-block" v-for="(item,index) in customerList" :key="index">
<div class="customer-logo">
<img class="" :src="item.logo" alt="logo">
</div>
</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
</div>
<div class="row visible-xs customer-block">
<div class="col-xs-12" v-for="(item,index) in customerList" :key="index">
<div class="customer-logo wow zoomIn">
<img class="center-block" :src="item.logo" alt="logo">
</div>
</div>
</div>
</div>
</div>
<div id="customerListView" class="container-fuild">
<div class="container customer-container">
<div class="row hidden-xs">
<template v-for="(item,index) in customerModule">
<div class="col col-xs-12 col-sm-6 col-md-3 wow zoomIn" v-if="!moduleShow?index<4:index>-1" :key="index">
<div class="moduleView"
onmouseenter="this.style.color='#28f';this.style.borderColor='#098'"
onmouseleave="this.style.color='#666';this.style.borderColor='#ccc'">
<div class="customer-logo">
<img :src="item.logo" alt="">
</div>
<div class="head-name">{{item.name}}</div>
<div class="text">{{item.text}}</div>
</div>
</div>
</template>
</div>
<div class="row visible-xs">
<template v-for="(item,index) in customerModule">
<div class="col col-xs-12 col-sm-6 col-md-3 wow zoomIn" :key="index">
<div class="moduleView" onmouseenter="this.style.color='#28f';this.style.borderColor='#098'"
onmouseleave="this.style.color='#666';this.style.borderColor='#ccc'">
<div class="customer-logo">
<img :src="item.logo" alt="">
</div>
<div class="head-name">{{item.name}}</div>
<div class="text">{{item.text}}</div>
</div>
</div>
</template>
</div>
<div class="customer-head hidden-xs" @click="moduleShow=!moduleShow">
<div class="head-name">查看更多<span :class="['icon',!moduleShow?'glyphicon glyphicon-chevron-down':'glyphicon glyphicon-chevron-up']"></span></div>
</div>
</div>
</div>
<!-- 上位机 -->
<div id="bigData" class="container-fuild">
<div class="container customer-container">
<div class="homeTitleView customer-title">
<div class="textBack text-center">UPPER COMPUTER</div>
<div class="textName textNameArt text-center">上位机</div>
</div>
<div class="row bigData-container">
<div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn">
<img class="img-responsive" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/upperComputer.png" alt="上位记系统">
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="bigDataItem">
<div class="bigData-title">德木自动化项目</div>
<p class="text">本项目是一项旨在利用自动化技术来改善木材加工工业的项目。该项目的目标是将传统的人工作业自动化，提高生产效率，减少劳动力成本，并提高生产过程的精度、安全、效率和可靠性。</p>
</div>
<div class="bigDataItem">
<div class="bigData-title">木材自动化</div>
<p class="text">主要组成部分包括自动上料机、机器视觉系统、自动化数控跑车、液压带锯、自动化打包机、自动化控制系统和智能软件系统。这些技术被整合在一起，以实现高效、精确的原木木材加工。</p>
</div>
</div>
</div>
</div>
</div>
<!-- 您身边的IT专家 -->
<div id="contactUs" class="container-fuild text-center">
<!-- <div id="contactUs" class="container-fuild text-center">
<div class="container contactUs-container wow slideInUp">
<h1>您身边的IT专家</h1>
<h3>7x24小时提供出色的IT服务</h3>
@@ -55,78 +127,46 @@
<span></span>
</div>
</div>
</div>
<!-- 客户评价 -->
<div id="customer" class="container-fuild">
<div class="container customer-container">
<p class="customer-title text-center">客户评价</p>
<div class="swiper-container customer-swiper hidden-xs">
<div class="swiper-wrapper">
<div
class="swiper-slide customer-block"
v-for="(item,index) in customerList"
:key="index"
>
<div class="customer-logo">
<img class="center-block" :src="item.logo" alt="logo">
</div>
<div class="customer-yh">
<img src="@/assets/img/yinhao.png" alt="引号">
</div>
<div class="customer-content1">
<small>{{item.content}}</small>
</div>
<div class="customer-content2">{{item.title}}</div>
</div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="row visible-xs customer-block">
<div class="col-xs-12" v-for="(item,index) in customerList" :key="index">
<div class="customer-logo">
<img class="center-block" :src="item.logo" alt="logo">
</div>
<div class="customer-yh">
<img src="@/assets/img/yinhao.png" alt="引号">
</div>
<div class="customer-content1">
<small>{{item.content}}</small>
</div>
<div class="customer-content2">
<small>{{item.title}}</small>
</div>
</div>
</div>
</div>
</div>
<!-- 为什么选择我们 -->
</div> -->
<!-- 技术栈 -->
<div id="whyChooseUs" class="conatiner-fuild">
<div class="container">
<div class="whyChooseUs-title text-center">
<p>为什么选择我们的服务</p>
<p>THE REASON TO CHOOSING US</p>
<div class="homeTitleView customer-title">
<div class="textBack text-center">TECHNICAL SUPPORT</div>
<div class="textName textNameArt text-center">技术栈</div>
</div>
<div class="row">
<div
class="col-xs-12 col-sm-6 col-md-3 server-wrapper"
v-for="(item,index) in serverList"
:key="index"
>
<div
class="server-block wow slideInUp"
onmouseenter="this.style.color='#28f';this.style.borderColor='#28f'"
onmouseleave="this.style.color='#666';this.style.borderColor='#ccc'"
>
<img class="center-block" :src="item.logo" alt="logo">
<p class="text-center">{{item.title}}</p>
<div class="whyChooseView row">
<p class="text-center">技术栈采用了容器化等先进的原生架构，通过云平台技术提供了强大运算能力，能够灵活适配各种不同的生产需求。</p>
<p class="text-center">它可以在主流的云平台上部署，利用全站安全防护、异地灾备和弹性扩容等技术来确保数据的机密性、完整性和可靠性。</p>
<p class="text-center">同时，它采用了标准的openAPI接口，能够高效地连接供应链、生产、仓储物流和销售等各个系统，实现了系统之间的高效通信和集成。</p>
<div class="stackItem">
<div class="col-xs-12 col-sm-6 col-md-2 server-wrapper" v-for="(item,index) in stackList" :key="index">
<div
class="text-center"
v-html="item.content"
onmouseenter="this.style.color='#28f'"
onmouseleave="this.style.color='#ccc'"
></div>
class="server-block wow slideInUp"
onmouseenter="this.style.color='#28f';this.style.borderColor='#098'"
onmouseleave="this.style.color='#666';this.style.borderColor='#ccc'"
>
<img class="center-block" :src="item.logo" alt="logo">
<!-- <p class="text-center">{{item.title}}</p>
<div
class="text-center"
v-html="item.content"
onmouseenter="this.style.color='#28f'"
onmouseleave="this.style.color='#ccc'"
></div> -->
</div>
</div>
</div>
</div>
<div class="whyChooseView row">
<p class="text-center">汇聚来自电子、木材、3D视觉、非标定制等行业工程师，共同打造极致的企业级产品用户体验。</p>
<div class="stackItem">
<div class="col-xs-12 col-sm-6 col-md-2 server-wrapper" v-for="(item,index) in hardwareList" :key="index">
<div class="server-block wow zoomIn" onmouseenter="this.style.color='#28f';this.style.borderColor='#098'"
onmouseleave="this.style.color='#666';this.style.borderColor='#ccc'">
<img class="center-block" :src="item.logo" alt="logo">
</div>
</div>
</div>
</div>
@@ -143,138 +183,137 @@ export default {
return {
swiperList: [
{
img: require("@/assets/img/banner1.png"),
img: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/swiper1.png",
path: "",
title: '您身边的IT专家1',
content: '宣传简介宣传简介宣传简介宣传简介宣传简介宣传简介宣传简介宣传简介',
},
{
img: require("@/assets/img/banner2.jpg"),
path: "",
title: '您身边的IT专家2',
content: '宣传简介宣传简介宣传简介宣传简介宣传简介宣传简介宣传简介宣传简介',
},
{
img: require("@/assets/img/banner1.png"),
path: "",
title: '您身边的IT专家3',
content: '宣传简介宣传简介宣传简介宣传简介宣传简介宣传简介宣传简介宣传简介',
},
{
img: require("@/assets/img/banner2.jpg"),
path: "",
title: '您身边的IT专家4',
content: '宣传简介宣传简介宣传简介宣传简介宣传简介宣传简介宣传简介宣传简介',
title: '欢迎访问我们的官网',
content: '探索我们多功能的MES系统，旨在帮助您优化木材加工流程，实现高效生产和管理。',
}
],
customerList: [
{
logo: require("@/assets/img/logo_hp.png"),
title:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。",
content:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。"
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/1.png",
},
{
logo: require("@/assets/img/logo_kk.png"),
title:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。",
content:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。"
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/2.png",
},
{
logo: require("@/assets/img/logo_toyota.png"),
title:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。",
content:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。"
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/3.png",
},
{
logo: require("@/assets/img/logo_kk.png"),
title:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。",
content:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。"
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/4.png",
},
{
logo: require("@/assets/img/logo_hp.png"),
title:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。",
content:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。"
},
{
logo: require("@/assets/img/logo_toyota.png"),
title:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。",
content:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。"
},
{
logo: require("@/assets/img/logo_kk.png"),
title:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。",
content:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。"
},
{
logo: require("@/assets/img/logo_hp.png"),
title:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。",
content:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。"
},
{
logo: require("@/assets/img/logo_toyota.png"),
title:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。",
content:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。"
},
{
logo: require("@/assets/img/logo_hp.png"),
title:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。",
content:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。"
},
{
logo: require("@/assets/img/logo_kk.png"),
title:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。",
content:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。"
},
{
logo: require("@/assets/img/logo_hp.png"),
title:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。",
content:
"您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。"
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/5.png",
}
],
serverList: [
customerModule:[
{
logo: require("@/assets/img/tel.png"),
title: "核心优势1",
content: "<p>由专业客服提供人工服务</p>负责疑难问题和故障受理"
logo:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/module/1.png',
name:'生产工单',
text:'制定和管理木材加工的生产工单，包括原料、加工工艺和数量信息。实时追踪工单状态和生产进度。'
},
{
logo: require("@/assets/img/computer.png"),
title: "核心优势2",
content: "<p>利用远程视频工具，提供协助</p>帮助客户进行调试、解决故障"
logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/module/2.png',
name: '生产排程',
text:'基于工单需求和生产能力进行排程计划，考虑设备、人员和物料等因素。提供直观的可视化排程界面，方便灵活调整计划。'
},
{
logo: require("@/assets/img/qq.png"),
title: "核心优势3",
content: "<p>利用企业QQ提供在线解答</p>帮助企业快速准确解决问题和故障"
logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/module/3.png',
name: '能耗管理',
text: '监测加工过程中的能耗数据，提供节能建议和优化措施，助力环保生产。'
},
{
logo: require("@/assets/img/skill.png"),
title: "核心优势4",
content: "<p>由技术支持工程师，负责问题解答</p>需求受理及故障受理"
logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/module/4.png',
name: '设备产能和报修',
text: '管理设备产能和效率，提供设备报修申请和记录功能，实时通知处理设备故障，减少停机时间。'
},
{
logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/module/5.png',
name: '生产流程管理',
text: '定义和管理木材加工流程，确保操作标准和产品一致性。'
},
{
logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/module/6.png',
name: '审批流',
text: '设置审批流程，保障重要操作的合规和授权，并提供审批记录和状态跟踪。'
},
],
moduleShow:false,
stackList: [
{
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/stack/1.png",
title: "",
content: ""
},
{
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/stack/2.png",
title: "",
content: ""
},
{
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/stack/3.png",
title: "",
content: ""
},
{
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/stack/4.png",
title: "",
content: ""
},
{
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/stack/5.png",
title: "",
content: ""
},
{
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/stack/6.png",
title: "",
content: ""
},
{
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/stack/7.png",
title: "",
content: ""
},
{
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/stack/8.png",
title: "",
content: ""
},
{
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/stack/9.png",
title: "",
content: ""
}
]
],
hardwareList:[
{
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/stack/10.png",
title: "",
content: ""
},
{
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/stack/11.png",
title: "",
content: ""
},
{
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/stack/12.png",
title: "",
content: ""
},
{
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/stack/13.png",
title: "",
content: ""
},
{
logo: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/stack/14.png",
title: "",
content: ""
},
],
};
},
mounted() {
@@ -315,6 +354,11 @@ export default {
stopOnLastSlide: false,
disableOnInteraction: false
},
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
@@ -323,6 +367,7 @@ export default {
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true //修改swiper的父元素时，自动初始化swiper
});
/* wowjs动画 */
var wow = new WOW({
boxClass: 'wow',
@@ -336,14 +381,47 @@ export default {
};
</script>
<style scoped>
.homeTitleView{
position: relative;
}
.homeTitleView .textBack{
font-size: 34px;
color: rgba(0,0,0,0.05);
font-family: Inter;
font-weight: 600;
}
.homeTitleView .textName{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-weight: 600;
font-size: 36px;
font-family: PingFang SC;
}
.homeTitleView .textNameArt::after{
content: '';
position: absolute;
left: calc(50% - 60px);
bottom: -15px;
width: 120px;
height: 4px;
border-radius: 10px;
background: #009688;
}
/* 整体盒子 */
#HomePage {
width: 100%;
}
/* 轮播图 */
#swiper {
height: 600px;
height: 700px;
}
#swiper .banner-swiper {
width: 100%;
@@ -366,27 +444,42 @@ export default {
color: #fff;
background: rgba(51, 51, 51, 0.534);
text-align: center;
line-height: 80px;
}
#swiper .banner-swiper .swiper-slide-title > h1{
font-size: 50px;
margin-top: 12%;
margin-top: 13%;
}
#swiper .banner-swiper .swiper-slide-title > p{
font-size: 20px;
margin-top: 1%;
margin-top: 3%;
font-weight: 700;
}
/* 大数据管理系统 */
#bigData {
padding: 100px;
padding: 50px 0;
transition: all ease 0.6s;
box-sizing: border-box;
}
#bigData .bigData-title {
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
#bigData .bigDataItem{
margin-bottom: 30px;
}
#bigData .bigData-title {
margin: 15px 0;
border-radius: 28px;
background: #009688;
display: inline-block;
color: #fff;
padding: 8px 24px;
box-shadow: 0px 4px 4px 0px rgba(0, 150, 136, 0.20);
}
#bigData .text{
font-weight: 400;
color: #666;
font-family: PingFang SC;
font-size: 14px;
line-height: 24px;
}
#bigData p {
font-size: 14px;
color: #333;
@@ -395,6 +488,9 @@ export default {
#bigData .bigData-device {
margin: 50px 0 20px;
}
#bigData .bigData-container{
margin-top: 50px;
}
/* 您身边的IT专家 */
#contactUs {
@@ -431,26 +527,23 @@ export default {
background-size: 100% 100%;
}
/* 客户评价 */
/* mes系统功能 */
#customer {
padding: 50px 0;
box-sizing: border-box;
background: #efefef;
background: #fff;
transition: all ease 0.6s;
}
#customer .customer-title {
font-size: 30px;
color: rgb(102, 102, 102);
margin: 0 0 30px;
position: relative;
}
#customer .customer-block {
background: #fff;
padding: 30px;
padding: 30px 30px 70px 30px;
}
#customer .customer-logo img {
width: 94px;
height: 94px;
border: 1px solid #ccc;
width: 100%;
height: auto;
}
#customer .customer-yh img {
width: 34px;
@@ -463,51 +556,186 @@ export default {
#customer .customer-content2 {
padding-top: 20px;
}
/* 为什么选择我们 */
#whyChooseUs {
padding: 100px;
.customer-head{
display: flex;
align-items: center;
justify-content: center;
margin: 30px 0 20px 0;
cursor: pointer;
}
#whyChooseUs .whyChooseUs-title {
margin-bottom: 50px;
}
#whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
font-size: 25px;
.customer-head .head-name{
background: #009688;
width: 200px;
height: 55px;
border-radius: 56px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #fff;
font-weight: 500;
}
#whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
.customer-head .head-name .icon{
margin-left: 10px;
}
#customerListView{
padding: 50px 0;
box-sizing: border-box;
transition: all ease 0.6s;
background: url("https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/back1.png") no-repeat;
background-position: center center;
background-size: cover;
background-attachment:fixed;
}
#customerListView .row{
display: flex;
flex-wrap: wrap;
}
#customerListView .moduleView{
overflow: hidden;
height: calc(100% - 40px);
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
border: 1px solid #f0f0f0;
border-radius: 16px;
background: #FFF;
margin: 20px 0;
padding: 24px 24px 40px 24px;
}
#customerListView .moduleView .customer-logo{
width: 68px;
height: 68px;
}
#customerListView .moduleView .customer-logo img{
width: 68px;
height: auto;
}
#customerListView .moduleView .head-name{
margin: 20px 0 10px 0;
font-weight: 600;
font-size: 18px;
color: #000;
font-family: PingFang SC;
}
#customerListView .moduleView .text{
color: #333;
font-size: 14px;
line-height: 24px;
font-weight: 400;
font-family: PingFang SC;
}
#customerListView .customer-head .head-name{
border-radius: 8px;
}
/* 技术栈 */
#whyChooseUs {
padding: 50px 0;
background: url("https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/back2.png") no-repeat;
background-position: center;
background-size: cover;
}
#whyChooseUs .whyChooseView{
margin-top: 40px;
}
#whyChooseUs .whyChooseView .stackItem{
margin-top: 20px;
}
#whyChooseUs .server-block {
padding: 50px 20px;
border: 1px solid #ccc;
border-bottom: 5px solid #ccc;
margin: 8px 0;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #FFF;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
#whyChooseUs .server-block img {
width: 48px;
height: 48px;
width: 100px;
height: auto;
}
#whyChooseUs .server-block > p {
font-size: 20px;
margin: 30px 0;
#whyChooseUs .whyChooseView > p {
font-size: 14px;
color: #000;
font-weight: 400;
}
#whyChooseUs .server-block > div {
color: #ccc;
#whyChooseUs .stackItem{
width: 100%;
}
/* 媒体查询（手机） */
@media screen and (max-width: 768px) {
#swiper {
height: 200px;
.homeTitleView .textBack{
font-size: 20px;
}
.homeTitleView .textName{
font-size: 22px;
}
.homeTitleView .textNameArt::after{
width: 80px;
left: calc(50% - 40px);
}
#swiper {
height: 210px;
}
#swiper .banner-swiper .swiper-slide-title > h1{
font-size: 24px;
line-height: 34px;
}
#swiper .banner-swiper .swiper-slide-title > p{
font-size: 14px;
}
#customer {
padding: 30px 0;
box-sizing: border-box;
background: #fff;
}
#customer .customer-title {
font-size: 16px;
font-weight: bold;
}
#customer .row {
padding: 10px 15px 0 15px;
}
#customer .customer-block > div {
padding: 20px 0;
}
#customerListView{
padding: 20px 0;
}
#customerListView .moduleView .customer-logo{
width: 46px;
height: 46px;
}
#customerListView .moduleView .customer-logo img{
width: 100%;
}
#customerListView .moduleView .head-name{
font-size: 16px;
}
#bigData {
padding: 30px;
padding: 30px 0;
}
#bigData .bigData-title {
font-size: 20px;
font-size: 16px;
}
#bigData .bigData-device {
font-size: 20px;
margin: 10px 0 10px;
}
#bigData .bigDataItem{
margin-bottom: 0;
}
#contactUs {
height: 200px;
transition: all ease 0.6s;
@@ -532,44 +760,18 @@ export default {
height: 28px;
margin: 10px;
}
#customer {
padding: 30px 0;
box-sizing: border-box;
background: #fff;
}
#customer .customer-title {
font-size: 16px;
font-weight: bold;
}
#customer .customer-logo img {
width: 48px;
height: 48px;
}
#customer .customer-block {
padding: 30px;
}
#customer .customer-block > div {
padding: 30px 0;
}
#whyChooseUs {
padding: 20px 0;
transition: all ease 0.6s;
}
#whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
font-size: 20px;
font-weight: 700;
}
#whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
font-size: 12px;
#whyChooseUs .row{
margin-left: 0;
margin-right: 0;
}
#whyChooseUs .server-block {
padding: 50px 0;
border: 1px solid #ccc;
border-bottom: 5px solid #ccc;
}
#whyChooseUs .server-block img {
width: 48px;
height: 48px;
}
#whyChooseUs .server-block > p {
font-size: 20px;
@@ -582,14 +784,31 @@ export default {
/* 媒体查询（平板） */
@media screen and (min-width: 768px) and (max-width: 996px) {
.homeTitleView .textBack{
font-size: 30px;
}
.homeTitleView .textName{
font-size: 36px;
}
#swiper {
height: 400px;
}
#swiper .banner-swiper .swiper-slide-title > h1{
font-size: 30px;
margin-top: 18%;
}
#swiper .banner-swiper .swiper-slide-title > p{
font-size: 16px;
}
#customerListView{
padding: 30px 0;
}
#bigData {
padding: 60px;
padding: 30px 0;
}
#bigData .bigData-title {
font-size: 30px;
font-size: 18px;
}
#bigData .bigData-device {
font-size: 30px;
@@ -624,6 +843,10 @@ export default {
#whyChooseUs {
padding: 20px 0;
}
#whyChooseUs .row{
margin-left: 0;
margin-right: 0;
}
}
</style>

401
src/view/JobChance.vue
View File

@@ -1,7 +1,64 @@
<template>
<div id="JobChance">
<div class="banner container-fuild text-center">工作机会</div>
<div class="container">
<div id="swiper" class="container-fuild">
<div class="swiper-container banner-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
<img class="swiper-lazy" :data-src="item.img" alt="轮播图">
<div class="swiper-lazy-preloader"></div>
<div class="swiper-slide-title wow pulse">
<h1>{{item.title}}</h1>
<p>{{item.content}}</p>
</div>
</div>
</div>
</div>
</div>
<!-- 数据卡片 -->
<div id="headCard" class="headCard">
<div class="container customer-container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 wow slideInUp" v-for="(item,index) in cardList" :key="index">
<div class="cardView">
<div class="server-block">
<img class="center-block" :src="item.logo" alt="">
<div class="name">{{item.name}}</div>
</div>
<div class="server-text">{{item.text}}</div>
</div>
</div>
</div>
</div>
</div>
<!-- MES系统功能一览 -->
<div id="mesView" class="mesView">
<div class="container customer-container">
<div class="homeTitleView customer-title">
<div class="textBack text-center">MES SYSTEM FUNCTION OVERVIEW</div>
<div class="textName textNameArt text-center">MES系统功能一览</div>
</div>
<div :class="['mesRow row',index==0?'rowOen':'']" v-for="(item,index) in mesList" :key="index">
<div class="col-xs-12 col-sm-6 col-md-6">
<img class="img-responsive wow zoomIn" :src="item.logo" v-if="item.isLeft" alt="">
<div class="mesItem mesItemLeft" v-else>
<div class="mesName">{{item.name}}<span class="adorn"></span></div>
<div class="mesText">{{item.text}}</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<img class="img-responsive wow zoomIn" :src="item.logo" v-if="!item.isLeft" alt="">
<div class="mesItem" v-else>
<div class="mesName"><span class="adorn"></span>{{item.name}}</div>
<div class="mesText">{{item.text}}</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="banner container-fuild text-center">工作机会</div> -->
<!-- <div class="container">
<div class="JobChance-container wow pulse">
<h2>PHP工程师</h2>
<p>岗位职责</p>
@@ -22,23 +79,281 @@
</ol>
<button class="center-block btn btn-warning btn-lg">投递简历</button>
</div>
</div>
</div> -->
</div>
</template>
<script>
import Swiper from "swiper";
import { WOW } from 'wowjs';
export default {
name: "JobChance",
data() {
return {};
return {
swiperList:[
{
img: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/swiper1.png",
path: "",
title: '深入了解每个功能模块的详细特性和优势',
content: '带您逐步了解MES系统如何助力您的业务提升',
}
],
cardList:[
{
logo:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/product/card/1.png',
name:'数据聚合',
text:'汇集生产运营过程中的纸单数据、设备数据、系统数据，使其透明可视化'
},
{
logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/product/card/2.png',
name: '实时协作',
text: '基于公有云和移动端,利用实时更新的数据，实现从工位到集团的高效协作'
},
{
logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/product/card/3.png',
name: '分析解读',
text: '数据驱动业务优化,形成“识别- 定位 - 改善 - 验证”的闭环，持续改善生产运营'
},
{
logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/product/card/4.png',
name: '智能决策',
text: '基于沉淀的高质量数据资产引入AI、大数据等进阶科技实现自动化决策'
}
],
mesList:[
{
logo:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/3.png',
name:'生产工单',
text:'制定和管理木材加工的生产工单，包括原料、加工工艺和数量信息。实时追踪工单状态和生产进度。',
isLeft:true
},
{
logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/4.png',
name: '生产排程',
text: '基于工单需求和生产能力进行排程计划，考虑设备、人员和物料等因素。提供直观的可视化排程界面，方便灵活调整计划。',
isLeft: false
},
{
logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/5.png',
name: '能耗管理',
text: '监测加工过程中的能耗数据，提供节能建议和优化措施，助力环保生产。',
isLeft: true
},
{
logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/6.png',
name: '设备产能和报修',
text: '管理设备产能和效率，提供设备报修申请和记录功能，实时通知处理设备故障，减少停机时间。',
isLeft: false
},
{
logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/1.png',
name: '生产流程管理',
text: '定义和管理木材加工流程，确保操作标准和产品一致性。',
isLeft: true
},
{
logo: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/funct/2.png',
name: '审批流',
text: '设置审批流程，保障重要操作的合规和授权，并提供审批记录和状态跟踪。',
isLeft: false
}
],
};
},
mounted(){
var wow = new WOW();
/* banner-swiper */
new Swiper(".banner-swiper", {
loop: true, // 循环模式选项
effect: 'fade',
//自动播放
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
// 延迟加载
lazy: {
loadPrevNext: true
},
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true //修改swiper的父元素时，自动初始化swiper
});
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
}
};
</script>
<style scoped>
/* 轮播图 */
#swiper {
height: 700px;
}
#swiper .banner-swiper {
width: 100%;
height: 100%;
}
#swiper .banner-swiper .swiper-slide img {
width: 100%;
height: 100%;
}
#swiper .banner-swiper .swiper-slide{
position: relative;
}
#swiper .banner-swiper .swiper-slide-title {
position: absolute;
top: 0;
left: 0;
z-index: 999999999;
width: 100%;
height: 100%;
color: #fff;
background: rgba(51, 51, 51, 0.534);
text-align: center;
}
#swiper .banner-swiper .swiper-slide-title > h1{
font-size: 50px;
margin-top: 13%;
}
#swiper .banner-swiper .swiper-slide-title > p{
font-size: 20px;
margin-top: 3%;
font-weight: 700;
}
/* 卡片 */
.homeTitleView{
position: relative;
}
.homeTitleView .textBack{
font-size: 34px;
color: rgba(0,0,0,0.05);
font-family: Inter;
font-weight: 600;
}
.homeTitleView .textName{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-weight: 600;
font-size: 36px;
font-family: PingFang SC;
}
.homeTitleView .textNameArt::after{
content: '';
position: absolute;
left: calc(50% - 60px);
bottom: -15px;
width: 120px;
height: 4px;
border-radius: 10px;
background: #009688;
}
#headCard{
margin: -150px auto 0 auto;
position: relative;
z-index: 100;
}
#headCard .cardView{
border-radius: 16px;
background: #FFF;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
padding: 20px;
margin: 10px 0;
}
#headCard .cardView .server-block{
display: flex;
align-items: center;
}
#headCard .cardView .server-block img{
height: 40px;
width: auto;
margin: 0;
}
#headCard .cardView .server-block .name{
margin-left: 20px;
color: #333;
font-weight: 500;
font-size: 18px;
}
#headCard .cardView .server-text{
margin-top: 15px;
line-height: 24px;
color: #333;
font-weight: 300;
height: 80px;
}
/* mes系统展览 */
#mesView{
padding: 50px 0 0 0;
}
#mesView .mesRow{
margin: 50px 0;
display: flex;
flex-wrap: wrap;
}
#mesView .rowOen{
margin-top: 80px;
}
#mesView .mesRow .mesItem{
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
#mesView .mesRow .mesItemLeft{
align-items: flex-end;
}
#mesView .mesRow .mesItem .mesName{
font-size: 18px;
font-weight: 600;
color: #000;
display: flex;
align-items: center;
}
#mesView .mesRow .mesItem .mesName .adorn{
background: #F02734;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 10px;
margin-left: 4px;
}
#mesView .mesRow .mesItemLeft .mesName .adorn{
margin-left: 10px;
margin-right: 8px;
}
#mesView .mesRow .mesItem .mesText{
font-weight: 400;
color: #333;
line-height: 24px;
font-size: 14px;
margin-top: 10px;
}
.banner {
color: #fff;
font-size: 30px;
@@ -50,6 +365,9 @@ export default {
background-attachment: scroll;
background-position: center center;
}
#JobChance{
width: 100%;
}
.JobChance-container {
margin: 100px;
padding: 30px;
@@ -74,11 +392,74 @@ font-size: 20px;
font-size: 14px;
line-height: 2.7rem;
}
@media screen and (max-width: 997px) {
.JobChance-container {
margin: 20px 0;
padding: 20px;
border: 1px dashed salmon;
/* 媒体查询（手机） */
@media screen and (max-width: 768px) {
.homeTitleView .textBack{
font-size: 20px;
}
.homeTitleView .textName{
font-size: 22px;
}
.homeTitleView .textNameArt::after{
width: 80px;
left: calc(50% - 40px);
}
#swiper {
height: 210px;
}
#swiper .banner-swiper .swiper-slide-title > h1{
font-size: 24px;
line-height: 34px;
}
#swiper .banner-swiper .swiper-slide-title > p{
font-size: 14px;
}
#headCard{
margin: 20px auto 0 auto;
}
#headCard .row{
margin-left: 0;
margin-right: 0;
}
#mesView{
padding: 30px 0;
}
#mesView .mesRow{
margin: 5px 0;
}
#mesView .rowOen{
margin-top: 50px;
}
#mesView .mesRow .mesItem{
padding: 10px 0;
}
}
/* 平板 */
@media screen and (min-width: 768px) and (max-width: 996px) {
.homeTitleView .textBack{
font-size: 30px;
}
.homeTitleView .textName{
font-size: 36px;
}
#swiper {
height: 400px;
}
#swiper .banner-swiper .swiper-slide-title > h1{
font-size: 30px;
margin-top: 18%;
}
#swiper .banner-swiper .swiper-slide-title > p{
font-size: 16px;
}
#headCard{
margin-top: 30px;
}
#headCard .row{
margin-left: 0;
margin-right: 0;
}
}
</style>

413
src/view/Service.vue
View File

@@ -1,23 +1,52 @@
<template>
<div id="Service">
<div class="container text-center">
<h3>我们的服务</h3>
<p style="color:#b2b2b2">The Best Service You Never See</p>
<div id="swiper" class="container-fuild">
<div class="swiper-container banner-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
<img class="swiper-lazy" :data-src="item.img" alt="轮播图">
<div class="swiper-lazy-preloader"></div>
<div class="swiper-slide-title wow pulse">
<h1>{{item.title}}</h1>
<p>{{item.content}}</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="Service-container row">
<div class="Service-item col-xs-12 col-sm-6 col-md-3 wow slideInUp"
v-for="(item,index) in serviceList" :key="index" @click="ServiceClick(item.id)">
<div class="Service-item-wrapper">
<div class="Service-item-top">
<h4>{{item.title}}</h4>
<i></i>
<p>{{item.eng_title}}</p>
<!-- 数据卡片 -->
<div id="headCard" class="headCard wow slideInUp">
<div class="container customer-container">
<div class="row">
<div class="col col-xs-12 col-sm-6 col-md-3 " v-for="(item,index) in cardList" :key="index">
<div class="cardView">
<div class="server-block">
<div :class="['name',item.isUp?'greenColor':'redColor']">{{item.num}}</div>
<img class="center-block" :src="item.icon" alt="">
</div>
<div class="server-text">{{item.name}}</div>
</div>
<div class="Service-item-img">
<img :src="item.img" alt="服务">
</div>
</div>
</div>
</div>
<!-- mes -->
<div id="mesView" class="mesView">
<div class="container customer-container">
<div :class="['mesRow row',index==0?'rowOen':'']" v-for="(item,index) in serviceList" :key="index">
<div class="col-xs-12 col-sm-6 col-md-6">
<img class="img-responsive wow zoomIn" :src="item.img" v-if="item.isLeft" alt="">
<div class="mesItem mesItemLeft" v-else>
<div class="mesName">{{item.title}}</div>
<div class="mesText">{{item.text}}</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<img class="img-responsive wow zoomIn" :src="item.img" v-if="!item.isLeft" alt="">
<div class="mesItem" v-else>
<div class="mesName">{{item.title}}</div>
<div class="mesText">{{item.text}}</div>
</div>
<div class="Service-item-border"></div>
</div>
</div>
</div>
@@ -25,119 +54,311 @@
</div>
</template>
<script>
import Swiper from "swiper";
import { WOW } from 'wowjs';
export default {
name: 'Service',
data(){
return{
swiperList: [
{
img: "https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/swiper1.png",
path: "",
title: '深入了解每个功能模块的详细特性和优势',
content: '带您逐步了解MES系统如何助力您的业务提升',
}
],
cardList: [
{
name: '出材率提升',
num: '98%',
icon: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/arrowUp.png',
isUp:true,
},
{
name: '生产效率',
num: '120%',
icon: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/arrowUp.png',
isUp: true,
},
{
name: '事故率下降',
num: '80%',
icon: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/arrowDown.png',
isUp: false,
},
{
name: '环保指标',
num: '90%',
icon: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/arrowUp.png',
isUp: true,
},
],
serviceList: [
{
id: 'section-1',
title: '软件定制开发',
eng_title: 'Customize App',
img: require('@/assets/img/service1.jpg')
title: '出材率',
text:'提高木材的出材率是我们原木加工自动化系统的一项关键特性。我们引以为傲的高效率工艺确保每一根原木都被充分利用，最大限度地提高了木材的出材率。',
img: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/1.png',
isLeft:true
},{
id: 'section-2',
title: 'IT外包服务',
eng_title: 'Outsourcing',
img: require('@/assets/img/service2.jpg')
title: '生产效率',
text: '我们的自动化系统采用先进的技术，确保原木加工的高效率和快速生产。通过精密的控制和智能化流程，我们确保了持续的生产能力，助您提高业务生产力。',
img: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/2.png',
isLeft: false
},{
id: 'section-3',
title: '网上商城建设',
eng_title: 'eCommerce Site',
img: require('@/assets/img/service3.jpg')
title: '事故率',
text: '安全是我们关注的首要问题。我们的原木加工自动化系统经过精心设计和全面测试，以确保最低的事故率。我们致力于提供一个安全的工作环境，保障您的生产过程不受干扰。',
img: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/3.png',
isLeft: true
},{
id: 'section-4',
title: 'iOS应用定制开发',
eng_title: 'iOS App Dev',
img: require('@/assets/img/service4.jpg')
title: '环保指标',
text: '我们深知环保责任，因此我们的原木加工自动化系统采用了最先进的环保技术。从节能设计到废物处理，我们致力于降低对环境的影响，为您的业务提供可持续的解决方案。',
img: 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes-home/home/data/4.png',
isLeft: false
}
]
],
}
},
mounted(){
var wow = new WOW();
/* banner-swiper */
new Swiper(".banner-swiper", {
loop: true, // 循环模式选项
effect: 'fade',
//自动播放
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
// 延迟加载
lazy: {
loadPrevNext: true
},
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true //修改swiper的父元素时，自动初始化swiper
});
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
},
methods:{
ServiceClick(id){
this.$router.push({
name: 'servicedetail',
params: {
id: id
}
})
}
}
}
</script>
<style scoped>
.Service-container{
padding: 30px 50px;
/* 轮播图 */
#swiper {
height: 700px;
}
.Service-item{
margin-bottom: 50px;
#swiper .banner-swiper {
width: 100%;
height: 100%;
}
.Service-item-wrapper{
cursor: pointer;
background: rgba(244,244,244,1);
overflow: hidden;
#swiper .banner-swiper .swiper-slide img {
width: 100%;
height: 100%;
}
#swiper .banner-swiper .swiper-slide{
position: relative;
}
#swiper .banner-swiper .swiper-slide-title {
position: absolute;
top: 0;
left: 0;
z-index: 999999999;
width: 100%;
height: 100%;
color: #fff;
background: rgba(51, 51, 51, 0.534);
text-align: center;
}
#swiper .banner-swiper .swiper-slide-title > h1{
font-size: 50px;
margin-top: 13%;
}
#swiper .banner-swiper .swiper-slide-title > p{
font-size: 20px;
margin-top: 3%;
font-weight: 700;
}
/* 卡片 */
#headCard{
position: relative;
z-index: 100;
background: rgba(255, 255, 255, 0.86);
margin-top: -179px;
}
.Service-item-top{
width: 100%;
height: 120px;
padding: 30px;
#headCard .row .col{
display: flex;
align-items: center;
justify-content: center;
height: 180px;
}
#headCard .cardView .server-block{
display: flex;
align-items: baseline;
}
#headCard .cardView .server-block .name{
font-family: DIN Alternate;
font-size: 64px;
font-style: normal;
font-weight: 700;
}
#headCard .cardView .server-block .greenColor{
color: #4CAF50;
}
#headCard .cardView .server-block .redColor{
color: #E63946;
}
#headCard .cardView .server-block img{
width: 18px;
height: auto;
margin-left: 15px;
}
#headCard .cardView .server-text{
text-align: center;
font-weight: 500;
color: #000;
font-size: 16px;
}
.Service-item-top>i{
display: inline-block;
width: 25px;
height: 2px;
background: #28f;
/* mes */
#mesView{
padding: 50px 0 0 0;
}
.Service-item-top>p{
color: #b2b2b2;
opacity: 0;
transform: translateY(10px);
transition: all .5s ease;
#mesView .mesRow{
margin: 50px 0;
display: flex;
flex-wrap: wrap;
}
.Service-item-img{
#mesView .rowOen{
margin-top: 20px;
}
#mesView .mesRow .mesItem{
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
#mesView .mesRow .mesItemLeft{
align-items: flex-end;
}
#mesView .mesRow .mesItem .mesName{
font-size: 16px;
color: #fff;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
width: 130px;
padding: 6px 0;
border-radius: 68px;
background: #009688;
box-shadow: 0px 4px 4px 0px rgba(0, 150, 136, 0.30);
}
#mesView .mesRow .mesItem .mesText{
font-weight: 400;
color: #333;
line-height: 24px;
font-size: 14px;
margin-top: 20px;
}
#Service{
width: 100%;
overflow: hidden;
}
.Service-item-img img{
width: 100%;
transition: all 0.5s ease;
/* 媒体查询（手机） */
@media screen and (max-width: 768px) {
.homeTitleView .textBack{
font-size: 20px;
}
.homeTitleView .textName{
font-size: 22px;
}
.homeTitleView .textNameArt::after{
width: 80px;
left: calc(50% - 40px);
}
#swiper {
height: 210px;
}
#swiper .banner-swiper .swiper-slide-title > h1{
font-size: 24px;
line-height: 34px;
}
#swiper .banner-swiper .swiper-slide-title > p{
font-size: 14px;
}
#headCard{
margin: 20px auto 0 auto;
}
#headCard .row{
margin-left: 0;
margin-right: 0;
}
#headCard .row .col{
height: 150px;
}
#headCard .cardView .server-block .name{
font-size: 46px;
}
#mesView{
padding: 30px 0;
}
#mesView .mesRow{
margin: 5px 0;
}
#mesView .rowOen{
margin-top: 0;
}
#mesView .mesRow .mesItem{
padding: 10px 0;
}
}
.Service-item-border{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 9999999;
width: 100%;
height: 100%;
transition: all 0.5s ease;
border: 1px solid #000;
opacity: 0;
}
.Service-item-wrapper:hover .Service-item-top > i{
opacity: 0;
}
.Service-item-wrapper:hover .Service-item-top > p{
opacity: 1;
transform: translateY(-10px);
}
.Service-item-wrapper:hover .Service-item-img > img{
transform: scale(1.1,1.1);
}
.Service-item-wrapper:hover > .Service-item-border{
opacity: 1;
width: 90%;
height: 90%;
/* 平板 */
@media screen and (min-width: 768px) and (max-width: 996px) {
.homeTitleView .textBack{
font-size: 30px;
}
.homeTitleView .textName{
font-size: 36px;
}
#swiper {
height: 400px;
}
#swiper .banner-swiper .swiper-slide-title > h1{
font-size: 30px;
margin-top: 18%;
}
#swiper .banner-swiper .swiper-slide-title > p{
font-size: 16px;
}
#headCard{
margin-top: 30px;
}
#headCard .row{
margin-left: 0;
margin-right: 0;
}
}
</style>

BIN
static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB