首先放下作者大大的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">[email protected]</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>