首先放下作者大大的github地址：https://github.com/jangocheng/Website
感谢作者大大开源项目
然后我们一起看下项目哇
我动图截得很快，有些是没有完全渲染出来，有些可能是后台接口问题，我们一起来看项目哇
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="description" content="天津市国瑞数码安全系统股份有限公司是一家新三板挂牌（简称：国瑞数码，证券代码：839215）的*高新技术企业。公司成立于1999年 11月，注册资本2600万，是由国家密码管理局审核批准的“商用密码产品生产定点单位”和“商用密码产品销售许可单位”，并拥有国家保密局颁发的涉密信息系统集成甲级资质证书，及武器装备科研生产单位保密资格证书。
自成立以来，国瑞数码秉承自主研发和科技创新，承担了国家科技部、发改委、工业和信息化部等机构的科研项目和研究课题，先后推出了PKI电子身份认证、PMI授权管理、访问控制网关、瑞盾智能密码钥匙、网站防篡改、终端安全登录、安全公文传输、ICP/IP地址/域名信息备案管理、接入资源管理、IDC/ISP信息安全管理、网络身份实名验证、互联网大数据分析、通信网反诈骗等产品，培养了一批优秀的技术人才和管理骨干。
经过多年积累，国瑞数码在互联网管理、密码技术、访问控制技术、网络与信息安全、网络攻防技术、大数据分析技术、虚拟计算技术、工业互联网安全、区块链、人工智能与神经网络以及下一代互联网管理等方面拥有了丰富的产品研发和项目建设经验，承建了*网信办、工业和信息化部等部门的多项全国性信息化系统，成为该单位多年来重要的技术支撑单位。
2009年以来，国瑞数码为工业和信息化部承建了互联网网站备案、全国互联网综合安全管理平台系统，参与制定相关行业标准和企业标准。在该系统的“部-省-企业”三级架构中，不但占据“部-省”制高点，还为数百家企业建立企业系统，成为该领域唯一涵盖“部-省-企业”三级用户的系统提供商。
2016年开始，国瑞数码为工业和信息化部承建电信网反诈骗电话指挥平台系统，承担了上海、山东、重庆、四川、贵州、湖南等十余省份反诈骗电话综合管理、有效防范、数据分析及指挥联动系统的建设。">
<title>国瑞数码官网</title>
<link rel="shortcut icon" type="image/x-icon" href="http://www.ncs-cyber.com.cn/image/favicon.ico">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
index.html中有出于seo的目的，加了一些description
在main.js中，我们可以看到引用了地图，还有懒加载的功能
//main.js
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import axios from ‘axios‘
import VueAMap from ‘vue-amap‘
import VueLazyload from ‘vue-lazyload‘
import "babel-polyfill"
import store from ‘./store‘
import ‘swiper/dist/css/swiper.css‘
import "core-js/modules/es6.promise";
import "core-js/modules/es6.array.iterator";
import {Pagination, Carousel, CarouselItem, Message} from ‘element-ui‘
Vue.use(Pagination)
Vue.use(Carousel)
Vue.use(CarouselItem)
Vue.prototype.$message = Message;
Vue.use(VueAMap)
Vue.use(VueLazyload, {
error: require(‘common/img/fileError.jpg‘),
loading: require(‘common/img/loading_logo.png‘)
})
VueAMap.initAMapApiLoader({
key: ‘‘,
plugin: [‘AMap.Autocomplete‘, ‘AMap.PlaceSearch‘, ‘AMap.Scale‘, ‘AMap.OverView‘, ‘AMap.ToolBar‘, ‘AMap.MapType‘, ‘AMap.PolyEditor‘, ‘AMap.CircleEditor‘],
v: ‘1.4.4‘
});
Vue.config.productionTip = false
new Vue({
el: ‘#app‘,
router,
store,
components: {App},
template: ‘<App/>‘
})
接下来我们来看app.vue页面
app.vue中，有一些是公共的部分，还有一些是在router-view中渲染的
//app.vue
<template>
<div id="app">
<homeHeader></homeHeader>
<homeNav></homeNav>
<div class="app-contentContainer">
<transition name="fade" appear>
<keep-alive>
<router-view v-if="!$route.meta.isKeepAlive"></router-view>
</keep-alive>
</transition>
<router-view v-if="$route.meta.isKeepAlive"></router-view>
</div>
<footers></footers>
</div>
</template>
<script>
import HomeHeader from ‘./components/home-header/home-header‘
import HomeNav from ‘./components/home-nav/home-nav‘
import Footers from ‘./components/footer/footer‘
export default {
name: ‘App‘,
components: {
HomeHeader,
HomeNav,
Footers
}
}
</script>
<style>
@import ‘./common/css/default.css‘;
@import ‘./common/css/public.css‘;
body {
font-size: 14px;
font-family: "Microsoft YaHei", ‘sans-serif‘, "Tahoma", "Helvetica";
}
.fade-enter-active, .fade-leave-active {
transition: opacity .2s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.app-contentContainer {
position: relative;
background: rgba(237, 237, 237, 0.59);
overflow: hidden;
}
</style>
接下来看homeHeader.vue组件
我以为的一个效果，可以用css实现，结果作者大大是用Js实现的
//home-header.vue
<template>
<div class="header-top">
<div class="cf commonWidth">
<div class="fr header-top_phone">010-82990836/35</div>
<div class="fr header-top_weixin" @mouseenter="isCode_enter" @mouseleave="enter_leave">
关注微信
<span class="header-top_weixin_down" ref="headerTopWeixinDown"></span>
<transition name="myCode">
<div class="weixin_code" v-show="state" @mouseenter="state=false">
<img src="./img-weixin.jpg" alt="">
</div>
</transition>
</div>
</div>
</div>
</template>
<script>
export default {
name: "home-header",
data() {
return {
state: false
}
},
methods: {
isCode_enter() {
this.state = true
this.$refs.headerTopWeixinDown.style.transform = ‘rotate(135deg)‘
this.$refs.headerTopWeixinDown.style.marginBottom = ‘-3px‘
},
enter_leave() {
this.state = false
this.$refs.headerTopWeixinDown.style.transform = ‘rotate(-45deg)‘
this.$refs.headerTopWeixinDown.style.marginBottom = ‘2px‘
}
}
}
</script>
<style scoped lang="scss">
.myCode-enter-active, .myCode-leave-active {
transition: all .1s;
}
.myCode-enter, .myCode-leave-to {
opacity: 0;
transform: translateY(100px);
}
.header-top {
height: 32px;
background-color: #373d41;
}
.header-top_phone,
.header-top_weixin {
position: relative;
line-height: 32px;
color: #fff;
padding-left: 30px;
}
.weixin_code {
position: absolute;
right: -35px;
top: 32px;
z-index: 99;
}
.header-top_phone {
background: url(./../../common/img/icon-phone.png) no-repeat left center;
}
.header-top_weixin {
margin-right: 37px;
background: url(./../../common/img/icon-weixin.png) no-repeat left center;
}
.header-top_weixin_down {
display: inline-block;
width: 8px;
height: 8px;
border-left: 1px #fff solid;
border-bottom: 1px #fff solid;
transform: rotate(-45deg);
margin-left: 10px;
margin-bottom: 2px;
}
</style>
作者大大的js确实挺牛的
//home-nav.vue
<template>
<div class="header-bottom">
<div class="cf commonWidth">
<img class="fl header-bottom_img" v-lazy="iconLogo" alt="">
<div class="fr">
<ul id="routerWrap">
<router-link @mouseenter.native="addClas(item.name)"
@click.native="clilckAddClas($event,item.name)"
v-for="(item,index) in nav"
tag="li"
:to="item.url"
ref="routerLink"
:key="index">
{{item.name}}
</router-link>
</ul>
</div>
</div>
<div class="header-bottom-subTab hide" :class="{show:nav_active===‘关于国瑞‘}">
<ul class="cf">
<router-link tag="li" to="/introduce">国瑞介绍</router-link>
<router-link tag="li" exact to="/managementTeam">管理团队</router-link>
<router-link tag="li" exact to="/developmentCatalogue">发展历程</router-link>
<router-link tag="li" to="/qualificationHonor">资质荣誉</router-link>
<router-link tag="li" to="/culture">企业文化</router-link>
</ul>
<div class="sliderBorder"></div>
</div>
</div>
</template>
<script>
export default {
name: "home-nav",
data() {
return {
nav: [
{"name": "首页", "url": "/index"},
{"name": "关于国瑞", "url": "/introduce"},
{"name": "产品信息", "url": "/product"},
{"name": "成功案例", "url": "/successCase"},
{"name": "新闻中心", "url": "/newsCenter"},
{"name": "人才招聘", "url": "/recruitment"},
{"name": "联系我们", "url": "/contactUs"}
],
nav_active: ‘首页‘,
click_active: ‘‘
}
},
methods: {
addClas(name) {
this.nav_active = name
},
clilckAddClas(ev, name) {
let routes = document.getElementById(‘routerWrap‘).getElementsByTagName(‘li‘)
this.click_active = name
if (this.click_active === ‘关于国瑞‘) {
ev.target.setAttribute("id", "routerActive");
} else {
for(let i=0;i<routes.length;i++) {
routes[i].setAttribute("id", "");
}
}
}
},
created() {
this.iconLogo = require(‘common/img/icon-logo.png‘)
}
}
</script>
<style scoped lang="scss">
.header-bottom {
height: 93px;
.commonWidth ul {
margin-top: 46px;
#routerActive {
color: #0051bc;
border-bottom: 2px solid #0044b4;
padding-bottom: 8px;
}
li {
float: left;
height: 27px;
line-height: 27px;
font-size: 16px;
color: #000000;
padding: 0 15px;
text-decoration: none;
border: 1px solid #fff;
cursor: pointer;
margin-left: 8px;
transition: .5s;
&:hover {
color: #005bf5;
}
&.router-link-active {
color: #0051bc;
border-bottom: 2px solid #0044b4;
padding-bottom: 8px;
}
}
}
}
.header-bottom-subTab {
position: absolute;
left: 0;
top: 125px;
z-index: 9;
width: 100%;
height: 52px;
line-height: 52px;
background-color: rgba(0, 0, 0, .3);
ul {
margin-left: 30%;
li {
float: left;
color: #fff;
margin-right: 62px;
cursor: pointer;
&.router-link-active {
color: #00d8ff;
}
&:hover {
color: #00d8ff;
}
}
}
&:hover .sliderBorder {
width: 99%;
border-width: 1px;
}
}
.header-bottom_img {
margin-top: 21px;
}
.sliderBorder {
border: 0 dotted #0abdff;
width: 0;
margin: 0 auto;
transition: 1s;
}
</style>
还有一个公共的那个就是footers
//footer.vue
<template>
<div>
<div class="footer-top">
<div class="cf commonWidth">
<div class="fl footer-top_logo">
<img src="./logo.jpg" alt="">
</div>
<div class="fl footer-top-mL">
<div class="footer-top_icon footer-top_location"></div>
<div class="footer-top_info">
<p>北京市朝阳区甲2号院芍药居综合楼</p>
<p>天津市华苑产业区海泰绿色产业基地K1-1-60</p>
<p>济南市历下区大明湖路96号</p>
</div>
</div>
<div class="fl footer-top-mL">
<div class="footer-top_icon footer-top_phone"></div>
<div class="footer-top_info">
<p>010-84623755</p>
<p>022-27237082</p>
<p>13176019241</p>
</div>
</div>
<div class="fl footer-top-mL">
<div class="footer-top_icon footer-top_email"></div>
<div class="footer-top_info">
<p class="footer-top_emailInfo">gr-hr@ncs-cyber.com.cn</p>
</div>
</div>
<div class="fl footer-top-mL footer-top_weweima">
<img :src="bottomCode" alt="">
<p>关注微信</p>
</div>
</div>
</div>
<div class="footer-bottom">
<p>京ICP备09061609号-2 Copyright?1999-2013.国瑞数码安全系统有限公司 版权所有</p>
</div>
</div>
</template>
<script>
export default {
created() {
this.bottomCode = require(‘common/img/icon-erweima.png‘)
}
}
</script>
<style scoped>
.footer-top {
height: 220px;
background-color: #373d41;
}
.footer-top_logo {
margin: 90px 0 0 30px;
}
.footer-top_icon {
height: 72px;
background-repeat: no-repeat;
background-position: center center;
margin-bottom: 17px;
margin-top: 42px;
}
.footer-top_location {
background-image: url(./../../common/img/icon-bottom_location.png);
}
.footer-top_phone {
background-image: url(./../../common/img/icon-bottom_phone.png);
}
.footer-top_email {
background-image: url(./../../common/img/icon-bottom_email.png);
}
.footer-top_info p {
height: 24px;
line-height: 24px;
font-size: 12px;
color: #fff;
}
.footer-top-mL {
margin-left: 80px;
}
.footer-top_weweima {
margin-top: 65px;
}
.footer-top_weweima p {
margin-top: 10px;
color: #fff;
font-size: 14px;
text-align: center;
}
.footer-top_emailInfo {
font-size: 16px !important;
margin-top: 38px;
}
.footer-bottom {
height: 34px;
line-height: 34px;
text-align: center;
font-size: 12px;
color: #c6c6c6;
background-color: #2c3235;
}
</style>
接下来看router.js
//router.js
import Vue from ‘vue‘
import Router from ‘vue-router‘
const Home = () => import (‘@/components/home/home‘)
const NewsCenter = () => import (‘@/components/news-center/news-center‘)
const NewsCenterDetails = () => import (‘@/components/news-center-details/news-center-details‘)
const Recruitment = () => import (‘@/components/recruitment/recruitment‘)
const RecruitmentDetails = () => import (‘@/components/recruitment-details/recruitment-details‘)
const Introduce = () => import (‘@/components/introduce/introduce‘)
const ManagementTeam = () => import (‘@/components/management-team/management-team‘)
const DevelopmentCatalogue = () => import (‘@/components/development-catalogue/development-catalogue‘)
const QualificationHonor = () => import (‘@/components/qualification-Honor/qualification-Honor‘)
const ContactUs = () => import (‘@/components/contact-us/contact-us‘)
const SuccessCase = () => import (‘@/components/success-case/success-case‘)
const Product = () => import (‘@/components/product/product‘)
const ProductDetails = () => import (‘@/components/product-details/product-details‘)
const Culture = () => import (‘@/components/Culture/Culture‘)
const PageNotFound = () => import (‘@/components/page-not-found/page-not-found‘)
Vue.use(Router)
export default new Router({
mode: ‘history‘,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
const position = {}
if (to.hash) {
position.selector = to.hash
}
if (to.matched.some(m => m.meta.scrollToTop)) {
position.x = 0
position.y = 0
}
if(to.query.y > 0) {
position.x = 0
position.y = to.query.y
}
return position
}
},
routes: [
{
path: ‘/‘,
component: Home,
redirect:‘/index‘
},
{
path: ‘/index‘,
component: Home
},
{
path: ‘/newsCenter‘,
component: NewsCenter,
children: [
{
path: ‘newsDetails‘,
component: NewsCenterDetails,
}
]
},
{
path: ‘/recruitment‘,
component: Recruitment,
children: [
{
path: ‘recruitmentDetails‘,
component: RecruitmentDetails
}
]
},
{
path: ‘/introduce‘,
component: Introduce
},
{
path: ‘/managementTeam‘,
component: ManagementTeam
},
{
path: ‘/developmentCatalogue‘,
component: DevelopmentCatalogue
},
{
path: ‘/qualificationHonor‘,
component: QualificationHonor
},
{
path: ‘/contactUs‘,
component: ContactUs
},
{
path: ‘/successCase‘,
component: SuccessCase
},
{
path: ‘/product‘,
component: Product,
children: [
{
path: ‘productDetails‘,
component: ProductDetails,
meta:{
isKeepAlive:true
}
}
]
},
{
path: ‘/culture‘,
component: Culture
},
{
path: "*",
component: PageNotFound
}
]
})
接下来看home.vue,最上面有一个轮播图,作者大大应该是把轮播的部分专门抽出来了
//scrollBanner_home.vue
<template>
<div class="scrollBanner_home" @click="toContactUs">
<el-carousel style="" height="528px" trigger="click">
<el-carousel-item
v-for="(item,index) in scrollBanners_home"
:key="index">
<img :src="item" alt="加载失败">
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name: ‘scrollBanner_home‘,
props: {
scrollBanners_home: {
type: Array
}
},
methods:{
toContactUs() {
this.$router.push(‘contactUs‘)
}
}
}
</script>
<style scoped lang="scss">
.scrollBanner_home {
text-align: center;
}
@media all and (max-width: 1920px) {
img {
width:100%;
}
}
</style>
<template>
<div id="home">
<scrollBanner_home :scrollBanners_home="scrollBanners_home"></scrollBanner_home>
<div class="row1">
<div class="commonWidth">
<div class="commonTitle">
<h3>国瑞，不仅仅是一家安全公司</h3>
<p>我们坚持我们的信仰，为用户打造真正有价值的服务平台</p>
</div>
<div class="cf row1-item-wrap">
<div class="fl row1-item">
<div class="row1-item_icon row1-item_iconGY"></div>
<h3>企业格言</h3>
<p>团结 自信</p>
<p>创造 发展</p>
</div>
<div class="fl row1-item row1-itemCenter">
<div class="row1-item_icon row1-item_iconSM"></div>
<h3>创业使命</h3>
<p>为客户创造价值</p>
<p>为员工创造机会</p>
<p>为社会创造效益</p>
</div>
<div class="fl row1-item">
<div class="row1-item_icon row1-item_iconLX"></div>
<h3>企业思想</h3>
<p>研制最好的产品</p>
<p>提供最好的服务</p>
<p>创造最好的品牌</p>
</div>
</div>
</div>
</div>
<div class="row2">
<companyProfile :homeSliderData="homeSliderData"></companyProfile>
</div>
<div class="row3">
<goodProduct :goodProductList="goodProductList"></goodProduct>
<canvas id="Mycanvas" ></canvas>
</div>
<div class="row4">
<recentNews :recentNews="recentNews"></recentNews>
</div>
<div class="row5">
<partner :partner="partner"></partner>
</div>
</div>
</template>
<script>
import * as api from "api/home"
import ScrollBanner_home from ‘base/scrollBanner_home/scrollBanner_home‘
import RecentNews from ‘base/recentNews/recentNews‘
import Partner from ‘base/partner/partner‘
import GoodProduct from ‘base/goodProduct/goodProduct‘
import CompanyProfile from ‘base/companyProfile/companyProfile‘
const ISHIDE = 8
export default {
name: "home",
data() {
return {
qizhui: ‘http://103.231.146.242:28732/cyber/‘,
scrollBanners_home: [],
homeSliderData: [],
goodProductList: [],
initIndex: 0,
recentNews: [],
partner: [],
}
},
created() {
this.imgs = {
hezuo01: require(‘@/assets/home-img/icon-hezuo01.png‘),
lArrow: require(‘@/assets/home-img/icon-l-arrow.png‘),
rArrow: require(‘@/assets/home-img/icon-r-arrow.png‘),
scroll01: require(‘@/assets/home-img/img-scroll01.png‘)
}
this._getImage()
this._getSliderData()
this._getGoodProduct()
this._getRecentNews()
this._partner()
},
mounted() {
setTimeout(() => {
this._initCanvas()
},20)
},
methods: {
_initCanvas() {
//定义画布宽高和生成点的个数
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight,
POINT = 35;
var canvas = document.getElementById(‘Mycanvas‘);
canvas.width = WIDTH,
canvas.height = HEIGHT;
var context = canvas.getContext(‘2d‘);
context.strokeStyle = ‘eceeef‘,
context.strokeWidth = 1,
context.fillStyle = ‘rgba(0,0,0,0.1)‘;
var circleArr = [];
//线条：开始xy坐标，结束xy坐标，线条透明度
function Line(x, y, _x, _y, o) {
this.beginX = x,
this.beginY = y,
this.closeX = _x,
this.closeY = _y,
this.o = o;
}
//点：圆心xy坐标，半径，每帧移动xy的距离
function Circle(x, y, r, moveX, moveY) {
this.x = x,
this.y = y,
this.r = r,
this.moveX = moveX,
this.moveY = moveY;
}
//生成max和min之间的随机数
function num(max, _min) {
var min = arguments[1] || 0;
return Math.floor(Math.random() * (max - min + 1) + min);
}
// 绘制原点
function drawCricle(cxt, x, y, r, moveX, moveY) {
var circle = new Circle(x, y, r, moveX, moveY)
cxt.beginPath()
cxt.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI)
cxt.closePath()
cxt.fill();
return circle;
}
//绘制线条
function drawLine(cxt, x, y, _x, _y, o) {
var line = new Line(x, y, _x, _y, o)
cxt.beginPath()
cxt.strokeStyle = ‘rgba(0,0,0,‘ + o + ‘)‘
cxt.moveTo(line.beginX, line.beginY)
cxt.lineTo(line.closeX, line.closeY)
cxt.closePath()
cxt.stroke();
}
//每帧绘制
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
for(var i = 0; i < POINT; i++) {
drawCricle(context, circleArr[i].x, circleArr[i].y, circleArr[i].r);
}
for(var i = 0; i < POINT; i++) {
for(var j = 0; j < POINT; j++) {
if(i + j < POINT) {
var A = Math.abs(circleArr[i + j].x - circleArr[i].x),
B = Math.abs(circleArr[i + j].y - circleArr[i].y);
var lineLength = Math.sqrt(A * A + B * B);
var C = 1 / lineLength * 7 - 0.009;
var lineOpacity = C > 0.03 ? 0.03 : C;
if(lineOpacity > 0) {
drawLine(context, circleArr[i].x, circleArr[i].y, circleArr[i + j].x, circleArr[i + j].y, lineOpacity);
}
}
}
}
}
//初始化生成原点
function init() {
circleArr = [];
for(var i = 0; i < POINT; i++) {
circleArr.push(drawCricle(context, num(WIDTH), num(HEIGHT), num(15, 2), num(10, -10) / 40, num(10, -10) / 40));
}
draw();
}
//调用执行
init();
setInterval(function() {
for(var i = 0; i < POINT; i++) {
var cir = circleArr[i];
cir.x += cir.moveX;
cir.y += cir.moveY;
if(cir.x > WIDTH) cir.x = 0;
else if(cir.x < 0) cir.x = WIDTH;
if(cir.y > HEIGHT) cir.y = 0;
else if(cir.y < 0) cir.y = HEIGHT;
}
draw();
}, 10);
},
_getImage() {
api.getImage()
.then(res => {
if (res.success === ‘true‘) {
const DATA = res.data
for (let [index, item] of DATA.entries()) {
this.scrollBanners_home.push(item.bannerImgPath)
}
}
})
},
_getSliderData() {
api.getSliderData()
.then(res => {
if (res[0].success === ‘true‘) {
const DATA = res[0].data
this.homeSliderData = DATA
}
})
},
_getGoodProduct() {
api.getGoodProduct()
.then(res => {
if (res[0].success === ‘true‘) {
const DATA = res[0].data
this.goodProductList = DATA
}
})
},
_getRecentNews() {
api.getRecentNews()
.then(res => {
if (res[0].success === ‘true‘) {
const DATA = res[0].data
this.recentNews = DATA
}
})
},
_partner() {
api.partner()
.then(res => {
if (res.success === ‘true‘) {
const DATA = res.data
this.partner = DATA
}
})
}
},
components: {
ScrollBanner_home,
RecentNews,
Partner,
GoodProduct,
CompanyProfile
}
}
</script>
<style scoped lang="scss">
#home {
font-size: 14px;
font-family: "Microsoft YaHei", ‘sans-serif‘, "Tahoma", "Helvetica";
}
.swiper-container {
overflow: visible;
}
.row1-item-wrap {
width: 820px;
margin: 0 auto;
}
.row1-item_icon {
/*width:75px;*/
height: 75px;
background-repeat: no-repeat;
background-position: center center;
-webkit-transition: all 4s;
-moz-transition: all 4s;
-ms-transition: all 4s;
-o-transition: all 4s;
transition: all 4s;
}
.row1-item:hover .row1-item_icon {
transform: rotateY(360deg);
}
.row1-item:hover h3 {
color: rgb(0, 193, 222);
}
.row1-item_iconGY {
background-image: url(./../../assets/home-img/icon-geyan.png);
}
.row1-item_iconSM {
background-image: url(./../../assets/home-img/icon-shiming.png);
}
.row1-item_iconLX {
background-image: url(./../../assets/home-img/icon-lixiang.png);
}
.row1-itemCenter {
margin: 0 248px;
}
.row1-item h3 {
font-size: 22px;
color: #373d41;
text-align: center;
margin-top: 19px;
margin-bottom: 17px;
}
.row1-item p {
height: 24px;
line-height: 24px;
color: #989fa3;
text-align: center;
}
.row2 {
height: 433px;
margin-top: 116px;
background-color: #fff;
}
.row3{
position: relative;
}
.row4 {
padding-bottom: 16px;
}
.row5 {
height: 480px;
}
#Mycanvas{
position:absolute;
left:0;
top:0;
z-index: -1;
}
</style>
introduce页面
//barnner.vue
<template> <!--:style="{backgroundImage:‘url(‘+bgImg+‘)‘}"-->
<div class="barnner" @click="showWx" :style="{backgroundImage:‘url(‘+bgImg+‘)‘}"></div>
</template>
<script>
export default {
name: "barnner",
props: {
"bgImg": {
type: String
},
‘isWx‘: {
type: Boolean
}
},
methods: {
showWx() {
if (this.isWx) {
this.$router.push({path: ‘/contactUs‘})
}
}
}
}
</script>
<style scoped lang="scss">
.barnner {
height: 400px;
background-position: center center;
background-repeat: no-repeat;
}
@media all and (max-width: 1920px) {
.barnner {
background-size:cover;
}
}
</style>
//introduce.vue
<template>
<div class="introduce">
<barnner ref="banner" :bgImg="bgImg" :isWx="true"></barnner>
<div class="commonWidth">
<div class="introduce-wrap">
<div class="commonCategory">
<h3>关于国瑞 > 国瑞介绍</h3>
</div>
<section>
<div class="content" >
<p v-html="content"></p>
<div id="chart"></div>
</div>
</section>
</div>
</div>
</div>
</template>
<script>
import Barnner from ‘base/barnner/barnner‘
import * as api from ‘api/introduce‘
export default {
name: "introduce",
data() {
return {
bgImg: ‘http://www.ncs-cyber.com.cn/CompanyWebsite/upload/banner/about.png‘,
content:‘‘
}
},
created() {
this._getIntroduce()
},
methods: {
_getIntroduce() {
api.getIntroduce()
.then(res => {
if(res[0].success) {
const DATA = res[0].data
this.content = DATA
}
})
}
},
components: {
Barnner
}
}
</script>
<style scoped lang="scss">
.introduce {
height: 100%;
}
.introduce-wrap {
margin-top: 23px;
margin-bottom: 23px;
box-shadow: 0 0 6px #e0e0e0;
}
.content {
background-color: #fff;
padding: 0 150px;
border: 1px solid #fff;
margin-bottom: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content p {
margin-top: 44px;
line-height: 23px;
color: #666666;
font-size: 14px;
text-indent: 2em;
font-family: "Microsoft YaHei", ‘Georgia‘, Times, Times New Roman, serif;
}
.content #chart {
background: url(./img/img-map.png) no-repeat center center;
height: 600px;
margin-top: 50px;
}
</style>
//product.vue
<template>
<div class="product">
<barnner ref="banner" :bgImg="bgImg" :isWx="true"></barnner>
<div class="container commonWidth" ref="commonWidth">
<div class="row" :id="items.EnglishTitle+items.id"
v-for="(items, index) in product"
:key="index">
<h3 class="title">
<span>{{items.title}}</span>
</h3>
<swiper :options="swiperOption">
<swiper-slide style="width:373px;" v-for="(childItem,index) in items.item"
:key="index"
@click.native="select(childItem)">
<img width="100%" v-lazy="childItem.productImageImagePath" alt="">
<p>{{childItem.productTitle}}</p>
</swiper-slide>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
</swiper>
</div>
</div>
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</template>
<script>
import {getProduct} from ‘api/product‘
import Barnner from ‘base/barnner/barnner‘
import {swiper, swiperSlide} from ‘vue-awesome-swiper‘
export default {
name: "product",
data() {
return {
domain: ‘http://www.ncs-cyber.com.cn/CompanyWebsite/‘,
product: [],
bgImg: ‘http://www.ncs-cyber.com.cn/CompanyWebsite/upload/banner/product.png‘,
swiperOption: {
slidesPerView: ‘auto‘,
spaceBetween: 10,
slidesPerGroup: 3,
pagination: {
el: ‘.swiper-pagination‘,
clickable: true
},
navigation: {
nextEl: ‘.swiper-button-next‘,
prevEl: ‘.swiper-button-prev‘,
}
}
}
},
created() {
this._getProduct()
},
mounted() {
setTimeout(() => {
}, 20)
this._initView()//这样写是为了在详情页刷新页面的时候保证dom渲染比当前页面慢，就不会出现刷新上一级页面也会存在的问题
},
methods: {
_getProduct() {
getProduct()
.then(res => {
if (res[0].success) {
const DATA = res[0].data
this.product = DATA
}
}).catch(err => {
// console.log(err)
})
},
select(childItem) {
this.$router.push({
path: `/product/productDetails`,
query: {
id: childItem.productId
}
})
},
_initView() {
let commonWidth = this.$refs.commonWidth
commonWidth.style.display = ‘block‘
}
},
watch: {
$route() {
this._initView()
}
},
components: {
Barnner,
swiper,
swiperSlide
}
}
</script>
<style scoped lang="scss">
.product{
height:100%;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .2s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.container {
box-shadow: 0 0 10px #e8e8e8;
border: 1px solid #e8e8e8;
border-radius: 5px;
padding: 10px 30px;
margin-top: 30px;
margin-bottom: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background:#fff;
}
.row {
margin-top: 6px;
margin-bottom: 30px;
}
.title {
height: 46px;
color: #343434;
border-bottom: solid 1px #dfdfdf;
margin-bottom: 20px;
span {
display: inline-block;
border-bottom: solid 3px #2d8fe9;
font-weight: 600;
line-height: 44px;
padding: 0 10px;
font-size: 18px;
}
}
.swiper-slide {
height: 225px;
border: 1px solid #c5d8db;
text-align: center;
cursor: pointer;
}
.swiper-slide p {
color: #292d30;
overflow: hidden;
font-size: 14px;
margin-top: 20px;
}
.swiper-button-next,
.swiper-button-prev {
top: 0;
width: 40px;
height: 100%;
margin-top: 0;
background-size: 16px;
background-color: rgba(37, 41, 44, .8);
z-index: 999;
}
.swiper-button-prev {
left: 0;
}
.swiper-button-next {
right: 0;
}
</style>
//success-case.vue
<template>
<div class="success-case">
<barnner ref="banner" :bgImg="bgImg"></barnner>
<div class="commonWidth" style="padding-bottom:20px;">
<div v-for="item in successCase">
<div class="titleWrap">
<div class="center">
<h1 class="title">{{item.title}}</h1>
<h3 class="subtitle">{{item.subtitle}}</h3>
</div>
</div>
<div class="picWrap">
<div class="pic_item" v-for="pic in item.case">
<div style="margin-top:20px;">
<img v-lazy="pic.caseCompanyCompanyPath" alt="" height="62">
<p>{{pic.caseCompanyCompanyName}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as api from ‘api/success-case‘
import Barnner from ‘base/barnner/barnner‘
export default {
name: "success-case",
data() {
return {
successCase: [],
bgImg: ‘http://www.ncs-cyber.com.cn/CompanyWebsite/upload/banner/success.png‘
}
},
created() {
this._successCase()
},
methods: {
_successCase() {
api.successCase()
.then(res => {
if (res[0].success === ‘true‘) {
let titleList = res[0].data.industry
let picList = res[0].data.team
let arr = []
for (let [index, item] of titleList.entries()) {
arr.push({
title: item.caseIndustryIndustryName,
subtitle: item.caseIndustryIndustryEnglish,
case: this.case(item.caseIndustryOrder, picList)
})
}
this.successCase = arr
console.log(this.successCase)
}
})
},
case(caseIndustryOrder, picList) {
let arr = []
for (let [index, item] of picList.entries()) {
if (item.caseIndustry_id === caseIndustryOrder) {
arr.push(item)
}
}
return arr
}
},
components: {
Barnner
}
}
</script>
<style scoped lang="scss">
.titleWrap {
margin-bottom: 40px;
margin-top: 60px;
text-align: center;
background: url("http://www.ncs-cyber.com.cn/image/case/dd.png") repeat-x center center;
}
.center {
text-align: center;
background-color: #f7f7f7;
width: 300px;
margin: 0 auto;
}
.title {
color: #262626;
font-size: 30px;
}
.subtitle {
color: #929292;
font-size: 18px;
margin-top: 10px;
}
.picWrap {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
&:after {
content: "";
flex: auto;
}
.pic_item{
width: 268px;
height: 144px;
border: 1px solid #dcdcdc;
background-color: #fff;
margin: 15px;
text-align: center;
box-shadow: 0 0 4px #ccc;
p{
margin-top:20px;
color: #5b5b5b;
}
}
img {
border: none;
vertical-align: middle;
}
}
</style>
//news-center.vue
<template>
<div class="news-center">
<barnner ref="banner" :bgImg="bgImg"></barnner>
<div class="wrap" ref="wrap">
<div class="commonWidth">
<div class="tab cf">
<ul class="fl" ref="navBox">
<li @click="navTab(item,index)"
v-for="(item,index) in navs"
:index="index"
:key="index"
:class="{active:item.newsTypeTypename===navActive}">
{{item.newsTypeTypename}}
</li>
</ul>
<div class="fr total-number">共<span> {{totals}} </span>篇</div>
</div>
<div class="flex-container">
<div class="flex-item" v-for="(item,index) in list" :key="index" @click="newItem(item)">
<div class="certificate-img">
<div class="top">
<img width="100%" height="154" v-lazy="item.picturePath" :key="item.picturePath" alt="">
<h3>{{item.title}}</h3>
<i>来源：{{item.source}}</i>
</div>
</div>
<div class="certificate-desc cf">
<div class="fl view">{{item.view}}</div>
<div class="fl heart">{{item.heart}}</div>
<div class="fl time">{{item.createtime_String}}</div>
</div>
</div>
</div>
<!--分页-->
<div id="paging">
<el-pagination
@current-change="currentChange"
:current-page="paging.currentPage"
background
:page-size="paging.pageSize"
layout="prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
</div>
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</template>
<script>
import * as api from ‘api/news-center‘
import Barnner from ‘base/barnner/barnner‘
import {mapMutations, mapGetters} from ‘vuex‘
export default {
name: "news-center",
data() {
return {
paging: {
newsType: ‘‘,
pageSize: 8,
currentPage: 1,
},
totals: 0,
list: [],
navs: [{"newsTypeTypename": ‘全部‘, id: ‘‘}],
navActive: ‘全部‘,
bgImg: ‘http://www.ncs-cyber.com.cn/CompanyWebsite/upload/banner/new-banr.png‘
}
},
computed: {
total: function () {
return this.totals
},
...mapGetters([
‘newsRecordList‘,
])
},
created() {
this._getListAll()
this._getNav()
},
mounted() {
setTimeout(() => {
}, 20)
this.initView()
},
methods: {
...mapMutations({
setNews: ‘SET_NEWS‘,
}),
_getNav() {
api.getNav()
.then(res => {
if (res[0].success === ‘true‘) {
const DATA = res[0].data
for (let [index, item] of DATA.entries()) {
this.navs.push(item)
}
}
})
},
_getListAll() {
api.getListAll(this.paging)
.then(res => {
if (res[0].success === ‘true‘) {
const DATA = res[0]
this.list = DATA.data
this.totals = DATA.page.totalRows
}
})
.catch(err => {
// console.log(err)
})
},
navTab(item, index) {
this.navActive = item.newsTypeTypename
this.paging.newsType = item.id
this.paging.currentPage = 1
localStorage.setItem(‘newsType‘, item.id)
this._getListAll() //导航切换调用created （this._getListAll()） 初始化数据
},
newItem(item) {
api.views(item.id)
this.$router.push(
{path: `/newsCenter/newsDetails`}
)
this.setNews(item)
},
initView() {
let wrap = this.$refs.wrap
wrap.style.display = ‘block‘
},
currentChange(size) {
this.paging.currentPage = size
this._getListAll()
}
},
watch: {
$route() {
this.initView()
}
},
components: {
Barnner
}
}
</script>
<style scoped lang="scss">
.fade-enter-active, .fade-leave-active {
transition: opacity .2s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.wrap {
border: 1px solid #f2f2f2;
}
.tab {
height: 32px;
border-bottom: 1px solid #dcdcdc;
margin: 20px 0 41px 0;
}
.tab li {
float: left;
padding: 0 30px;
line-height: 32px;
cursor: pointer;
color: #666666;
}
.tab .active {
background-color: #356fd9;
color: #fff;
font-weight: bold;
}
.tab .total-number {
font-size: 12px;
color: #666666;
margin-top: 9px;
}
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-container:after {
content: "";
flex: auto;
}
.flex-item {
width: 278px;
height: 282px;
border: 1px solid #dcdcdc;
background-color: #fff;
margin: 0 10px 27px 10px;
cursor: pointer;
}
.certificate-img {
height: calc(100% - 35px);
}
.certificate-img .top {
width: 250px;
margin: 0 auto;
}
.certificate-img img {
margin-top: 7px;
cursor: pointer;
}
.certificate-img h3 {
width: 210px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #222222;
margin-top: 26px;
margin-bottom: 10px;
}
.certificate-img i {
color: #666666;
font-size: 12px;
font-style: normal;
}
.certificate-desc {
height: 34px;
line-height: 34px;
border-top: 1px solid #dcdcdc;
background-color: #f6f6f6;
color: #828282;
}
#paging {
margin: 80px 0;
text-align: center;
}
.view, .heart, .time {
padding-left: 28px;
background-position: 5px center;
background-repeat: no-repeat;
margin-left: 12px;
}
.view {
background-image: url("../../assets/news-center/icon-view.png");
}
.heart {
background-image: url("../../assets/news-center/icon-heart.png");
}
.time {
background-image: url("../../assets/news-center/icon-time.png");
}
</style>
<template>
<div style="height:100%;">
<barnner ref="banner" :bgImg="bgImg" :isWx="true"></barnner>
<div class="commonWidth" ref="commonWidth">
<div class="introduce-wrap">
<div class="commonCategory">
<h3>人才招聘</h3>
</div>
<section>
<div class="content">
<div class="box cf">
<!--校园招聘-->
<div class="fl campus-wrap">
<div class="cf">
<div class="fl icon icon-campus"></div>
<div class="fl title">校园招聘</div>
</div>
<ul>
<li v-for="item in campusRecruitment">
<span class="circle-wrap">
<i class=""></i>
</span>
<span class="desc" @click="select(item)">{{item.webWorkContentJob}}</span>
</li>
</ul>
</div>
<!--社会招聘-->
<div class="fl social-wrap" style="margin:0 150px;">
<div class="cf">
<div class="fl icon icon-social"></div>
<div class="fl title">社会招聘</div>
</div>
<ul>
<li v-for="item in societyRecruitment">
<span class="circle-wrap">
<i class=""></i>
</span>
<span class="desc" @click="select(item)">{{item.webWorkContentJob}}</span>
</li>
</ul>
</div>
<!--福利待遇-->
<div class="fl welfare-wrap">
<div class="cf">
<div class="fl icon icon-welfare"></div>
<div class="fl title">福利待遇</div>
</div>
<ul>
<li v-for="item in Benefits">
<span class="circle-wrap">
<i class=""></i>
</span>
<span class="desc" @click="select(item)">{{item.webWorkContentJob}}</span>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</template>
<script>
import * as api from ‘api/recruitment‘
import Barnner from ‘base/barnner/barnner‘
import {mapMutations} from ‘vuex‘
export default {
name: "recruitment",
data() {
return {
campusRecruitment: [],
societyRecruitment: [],
Benefits: [],
bgImg: ‘http://www.ncs-cyber.com.cn/CompanyWebsite/upload/banner/job-banr.png‘
}
},
created() {
this._getCampusRecruitment()
},
mounted() {
this._initView()
},
methods: {
...mapMutations({
set_recruitment: ‘SET_RECRUITMENT‘
}),
_getCampusRecruitment() {
api.getRecruitmentList()
.then(res => {
if (res[0].success === ‘true‘) {
const DATA = res[0].data
this.campusRecruitment = DATA.mainBJ
this.societyRecruitment = DATA.mainTJ
this.Benefits = DATA.mainFl
}
})
},
select(item) {
this.$router.push(
{path: `/recruitment/recruitmentDetails`}
)
this.set_recruitment(item)
},
_initView() {
let commonWidth = this.$refs.commonWidth
commonWidth.style.display = ‘block‘
}
},
watch: {
$route() {
this._initView()
}
},
components: {
Barnner
}
}
</script>
<style scoped lang="scss">
.fade-enter-active, .fade-leave-active {
transition: opacity .2s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.introduce-wrap {
margin-top: 23px;
margin-bottom: 50px;
}
.content {
border: 1px solid #fff;
background-color: #fff;
/*min-height:100px;*/
}
.content .box {
width: 930px;
margin: 42px auto;
}
.box .title {
margin-left: 17px;
margin-top: 33px;
font-size: 16px;
font-weight: bold;
color: #555555;
}
.box .icon {
width: 78px;
height: 78px;
border-radius: 50%;
}
.box .icon-campus {
background: #fb6e50 url("./img/icon-campus.png") no-repeat center center;
}
.box .icon-social {
background: #48c1cf url("./img/icon-social.png") no-repeat center center;
}
.box .icon-welfare {
background: #ffb739 url("./img/icon-welfare.png") no-repeat center center;
}
.box .circle-wrap {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
text-align: center;
}
.box .circle-wrap .circle {
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
vertical-align: 4px;
}
.campus-wrap .circle-wrap {
border: 1px solid #fb6e50;
}
.campus-wrap .circle {
background-color: #fb6e50;
}
.social-wrap .circle-wrap {
border: 1px solid #48c1cf;
}
.social-wrap .circle {
background-color: #48c1cf;
}
.welfare-wrap .circle-wrap {
border: 1px solid #ffb739;
}
.welfare-wrap .circle {
background-color: #ffb739;
}
.box .desc {
margin-left: 21px;
color: #555555;
cursor: pointer;
&:hover {
color: #0b3e6f;
}
}
.box ul {
margin: 18px 0 0 65px;
}
.box ul li {
margin-bottom: 20px;
}
.box ul .active {
color: #fb6e50;
}
</style>
<template>
<div class="contact-us">
<barnner ref="banner" :bgImg="bgImg"></barnner>
<div class="commonWidth">
<div class="mapWrap" v-for="(item,index) in companyList" :key="index">
<div class="title">
<label>{{item.area}}</label>
</div>
<div class="cf wrap">
<div class="fl left">
<div class="address">{{item.companyAddressAddress}}</div>
<div class="cf mB">
<div class="fl icon icon-phone"></div>
<div class="fl mL">
<div class="space">
<span class="name">总机：</span>
<span>{{item.companyAddressSwitchboard}}</span>
</div>
<div class="space">
<span class="name">市场部：</span>
<span>{{item.companyAddressMarketphone}}</span>
</div>
<div class="space">
<span class="name">技术支持：</span>
<span>{{item.companyAddressSupportphone}}</span>
</div>
</div>
</div>
<div class="cf mB">
<div class="fl icon icon-email"></div>
<div class="fl mL space email">
<span class="name">Email</span>
<span>{{item.companyAddressEmail}}</span>
</div>
</div>
</div>
<div class="fr map">
<maps :item="item"></maps>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Barnner from ‘base/barnner/barnner‘
import * as api from ‘api/contact-us‘
import Maps from ‘base/v-maps/v-maps‘
export default {
name: "contact-us",
data() {
return {
companyList: [],
bgImg: ‘http://www.ncs-cyber.com.cn/CompanyWebsite/upload/banner/email-banr.png ‘,
}
},
created() {
this._companyList()
},
methods: {
_companyList() {
api.companyList()
.then(res => {
if (res[0].success === ‘true‘) {
const DATA = res[0].data
for (let [index, item] of DATA.entries()) {
item.map = {
zoom: 15,
center: [item.companyAddressLongitude, item.companyAddressLatitude],
circle: {
clickable: true,
center: [item.companyAddressLongitude, item.companyAddressLatitude],
radius: 200,
fillOpacity: 0.3,
strokeStyle: ‘dashed‘,
fillColor: ‘#FFFF00‘,
strokeColor: ‘#00BFFF‘
},
marker: {
position: [item.companyAddressLongitude, item.companyAddressLatitude],
events: {
dragend: (e) => {
this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
}
},
visible: true,
draggable: false
},
mywindow: {
position: [item.companyAddressLongitude, item.companyAddressLatitude],
content: `<h4>国瑞数码</h4>
<div style="font-size:12px;">${item.companyAddressAddress}</div>`,
visible: true,
events: {
close() {
this.visible = false
}
}
},
plugin: {
pName: ‘Scale‘,
events: {
init(instance) {
console.log(instance)
}
}
}
}
}
this.companyList = DATA
}
})
}
},
components: {
Barnner,
Maps
}
}
</script>
<style scoped lang="scss">
.contact-us {
padding-bottom: 96px;
}
.mapWrap {
margin-top: 50px;
}
.title {
height: 35px;
line-height: 35px;
background: #c1d5e7;
label {
display: inline-block;
width: 180px;
background: #1f87c8;
text-align: center;
font-weight: 600;
color: #fff;
font-size: 16px;
}
}
.wrap {
margin-top: 40px;
}
.left {
margin-left: 50px;
}
.address {
height: 44px;
line-height: 44px;
background: url("./../../assets/contact-us/icon-location.png") no-repeat left center;
padding-left: 64px;
font-weight: bold;
color: #353535;
margin-bottom: 34px;
}
.icon {
width: 44px;
height: 44px;
&-phone {
background: url("./../../assets/contact-us/icon-phone.png") no-repeat center center;
}
&-email {
background: url("./../../assets/contact-us/icon-email.png") no-repeat center center;
}
}
.mL {
margin-left: 20px;
}
.name {
display: inline-block;
min-width: 72px;
text-align: left;
color: #868686;
}
.space {
margin-bottom: 24px;
& span:nth-child(2) {
color: #353535;
font-weight: bold;
}
}
.mB {
margin-bottom: 34px;
}
.email {
height: 44px;
line-height: 44px;
}
.map {
width: 600px;
height: 330px;
border: 1px solid #ccc;
margin-right: 45px;
}
</style>