首先放下作者大大的github地址：https://github.com/shikkk/el-responsive-layout
然後讓我們一起去欣賞作者大大的項目哇
我們可以看看效果
接下來我們一起看看項目哇
在index.html中，我們會看到引用了baidu的hm.js，簡單的來說，就是：使用百度統計跟蹤網站的流量。
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="icon" href="./title_icon2.ico" type="image/x-icon">
<title>DataX首頁</title>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?f41de1b2df0b4e3b42f05303bf7f9272";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
接下來看main.js
//main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/display.css';
import App from './App'
import router from './router'
import 'c-swipe/dist/swipe.css';
import { Swipe, SwipeItem } from 'c-swipe';
Vue.config.productionTip = false
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
router.beforeEach((to, from, next) => {
// 統計代碼
if(to.path == '/product' || to.path == '/solution'){
_hmt.push(['_trackPageview', to.fullPath]);
}
next();
});
不過這個項目裏面的App.vue是直接就上了哦，不過裏面還是有通用的router-view的，用來裝一些公共的東西的,麪包屑那個還專門判斷了是移動端才顯示的呢
//App.vue
<template>
<div id="app">
<div class="header">
<div class="container clearfix">
<el-row class="PC">
<el-col :span="3">
<div class="index-logo">
<router-link to="/">
<img src="../static/image/pc-logo.png"/>
</router-link>
</div>
</el-col>
<el-col :span="11">
<el-menu
:default-active="activeIndex"
:active-text-color="activeColor"
:router="true"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect">
<el-menu-item index="/">首頁</el-menu-item>
<el-menu-item index="/solution">解決方案</el-menu-item>
<el-menu-item index="/product">產品中心</el-menu-item>
<el-menu-item index="/contactUs">聯繫我們</el-menu-item>
</el-menu>
</el-col>
<el-col :span="10">
<div style="line-height: 80px;" class="text-right">
<el-button round
@click="goLogin()"
class="btn-box">CMBI 登錄</el-button>
<el-button round
@click="goLogin()"
class="btn-box">CPBI 登錄</el-button>
<el-button round
type="primary"
@click="goLogin()">DataX 登錄</el-button>
</div>
</el-col>
</el-row>
<el-row type="flex" class="row-bg Mobile" justify="space-between">
<el-col :span="8" class="m-box">
<div class="menu-btn" @click="mobileNav"><span></span><span></span><span></span></div>
</el-col>
<el-col :span="8" class="m-box m-index-logo" style="padding: 0">
<router-link to="/">
<img src="../static/image/logo.png">
</router-link>
</el-col>
<el-col :span="8" class="m-box text-right">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
登錄<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item><a @click="goLogin()">CMBI 登錄</a></el-dropdown-item>
<el-dropdown-item><a @click="goLogin()">CPBI 登錄</a></el-dropdown-item>
<el-dropdown-item><a @click="goLogin()">DataX 登錄</a></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</div>
</div>
<div :class="['mobile-nav',[mobile_nav?'m-nav-show':'m-nav-hide']]">
<el-row>
<el-col :span="12" style="padding-left: 20px">
<img src="../static/image/logo2.png">
</el-col>
<el-col :span="12" class="text-right" style="padding-right: 20px">
<i class="el-icon-close" @click="mobileNav" style="color: #FFFFFF;font-size: 30px"></i>
</el-col>
</el-row>
<el-menu
:default-active="activeIndex"
:active-text-color="activeColor"
:router="true"
class="el-menu-vertical-demo"
background-color="transparent"
text-color="#fff"
style="margin: 20px 0"
>
<el-menu-item index="/" class="m-menu-icon icon1" @click="mobileNav">
<span slot="title">首頁</span>
</el-menu-item>
<el-menu-item index="/solution" class="m-menu-icon icon2" @click="mobileNav">
<span slot="title">解決方案</span>
</el-menu-item>
<el-menu-item index="/product" class="m-menu-icon icon3" @click="mobileNav">
<span slot="title">產品中心</span>
</el-menu-item>
<el-menu-item index="/contactUs" class="m-menu-icon icon4" @click="mobileNav">
<span slot="title">聯繫我們</span>
</el-menu-item>
</el-menu>
</div>
<div :class="['main-content',{'pdb0':activeIndex == '/contactUs'}]">
<router-view :class="[activeIndex == '/contactUs'?'':'content']"></router-view>
</div>
<Footer v-if="activeIndex != '/contactUs'"></Footer>
</div>
</template>
<script>
import Footer from './components/footer/Footer'
import ElCol from "element-ui/packages/col/src/col";
export default {
name: 'App',
data() {
return {
activeIndex: '',
activeColor:'#409EFF',
mobile_nav:false
};
},
components: {
ElCol, Footer
},
methods: {
handleSelect(val){
},
mobileNav(){
this.mobile_nav = !this.mobile_nav
},
getPath(){
this.activeIndex =this.$route.path
},
goLogin(url,opt_label){
window.open(url)
_hmt.push(['_trackEvent', 'login', 'click', opt_label])
}
},
created(){
this.activeIndex =this.$route.path
},
watch: {
'$route':'getPath'
},
}
</script>
<style lang="less">
@import "style/common.less";
</style>
接下來我們來看router.js
//index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/content/homepage/homepage'
import Solution from '@/components/content/solution/solution'
import Product from '@/components/content/product/product'
import Contact from '@/components/content/contactUs/contactUs'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: Home
},
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/Solution',
name: 'Solution',
component: Solution
},
{
path: '/product',
name: 'product',
component: Product
},
{
path: '/contactUs',
name: 'contactUs',
component: Contact
}
]
})
接下來我們來看homepage.vue
上面是一個輪播圖，以及下面的我們的產品，數據都是寫在json中的，點擊詳情或者解決方案，跳轉到新的頁面部分，處理的非常的精巧
//homepage.vue
<template>
<div class="index-con">
<div class="banner hidden-sm-and-down" >
<el-carousel :interval="3000" type="card" height="400px">
<el-carousel-item v-for="(item,index) in banner" :key="index">
<a :href="item.login_href" target="_blank" @click="listen(item.web)">
<img :src="item.m_img">
</a>
</el-carousel-item>
</el-carousel>
</div>
<div class="m-banner hidden-md-and-up" >
<swipe loop style="width: 100%" :autoplayTime="3000">
<swipe-item v-for="(n,index) in banner" :key="index">
<a @click="listen(n.web)">
<img :src="n.m_img" style="width: 100%">
</a>
</swipe-item>
</swipe>
</div>
<div class="container solution">
<h2 class="title text-center">產品解決方案</h2>
<h3 class="text-center">將我們的數據及開發能力，賦能到公司更多產品及業務線，提供整套數據解決方案</h3>
<el-row type="flex" class="row-bg" justify="space-around" style="margin-top: 55px">
<el-col :span="11" class="sports solution-box" >
<el-card class="box-card" shadow="always" :body-style="{ padding: '0px'}">
<dl @click="goSolutionPage('game')">
<dt>遊戲解決方案</dt>
<dd>爲遊戲開發者提供數據、賬號、支付等一站式解決方案，使遊戲開發者專注於遊戲開發</dd>
</dl>
</el-card>
</el-col>
<el-col :span="11" class="sports solution-box" >
<el-card class="box-card" shadow="always" :body-style="{ padding: '0px'}">
<dl @click="goSolutionPage('finance')" >
<dt>金融解決方案</dt>
<dd>爲金融業務量身定製的風控系統，具備安全穩定、敏捷高效、高彈性、高可用的特性</dd>
</dl>
</el-card>
</el-col>
</el-row>
</div>
<div class="container product">
<h2 class="title text-center">我們的產品</h2>
<el-row :gutter="20">
<el-col :span="6" v-for="(item,index) in product" class="product-box" :key="index">
<el-card :body-style="{ padding: '0px' }" shadow="hover">
<div class="text-center card">
<img :src="item.img">
<h3>{{item.tit}}</h3>
<p>{{item.con}}</p>
<a @click="goProductPage(item.href)" :class="[item.href == 'accountNum'?'bg-gray':'']">{{item.btn}}</a>
</div>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: 'homepage',
data () {
return {
value2: 0,
banner:[{
web:'CMBI',
img:'/static/image/banner01.jpg',
m_img:'/static/image/banner1.jpg',
},
{
web:'CPBI',
img:'/static/image/banner02.jpg',
m_img:'/static/image/banner2.jpg',
},
{
web:'DATAX',
img:'/static/image/banner03.jpg',
m_img:'/static/image/banner3.jpg',
}
],
product: [
{
img: 'static/image/index01.png',
tit: '支付系統',
con: '高度集成多家主流支付渠道，一鍵接入，簡單快捷',
btn: '查看詳情',
href: 'payment',
},
{
img: 'static/image/index02.png',
tit: '數據系統',
con: '可視化自定義數據平臺，數據運營盡在掌握',
btn: '查看詳情',
href: 'dataSystem'
},
{
img: 'static/image/index03.png',
tit: '大數據SDK',
con: '收集全面的用戶數據，深度把握用戶行爲，爲分析用戶提供有效數據',
btn: '查看詳情',
href: 'dataSDK'
},
{
img: 'static/image/index04.png',
tit: '帳號系統',
con: '敬請期待……',
btn: '查看詳情',
href: 'accountNum'
}
]
}
},
methods: {
goProductPage(id){
if(id!=='accountNum'){
this.$router.push({
path:'/product',
query: {
id: id
}
});
}
},
goSolutionPage(page){
this.$router.push({
path:'/solution',
query: {
page: page
}
})
},
listen(web){
_hmt.push(['_trackEvent', 'banner-login', 'click', web])
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.index-con {
.banner{
max-width: 1370px;margin: 0 auto;
}
.el-carousel {
margin-top: 40px;
}
.el-carousel__indicators--outside{
margin-top: 20px;
.el-carousel__button{
height: 4px;
}
}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item img {
width: 100%;
background: #ffffff;
}
.el-carousel__arrow {
height: 50px;
width: 50px;
}
.solution {
padding: 80px 0;
dl{
padding: 43px 33px 60px 76px
}
dt {
color: #009ef6;
font-size: 22px;
margin-bottom: 28px;
}
dd {
color: #959595;
font-size: 18px;
line-height: 30px;
}
> h3 {
color: #888;
}
}
.title {
font-size: 40px;
}
.product {
padding-top: 4px;
}
.product-box {
margin-top: 28px;
position: relative;
bottom: 0;
transition: all .3s ease-in-out;
}
.card {
height: 362px;
width: 100%;
position: relative;
h3 {
font-size: 18px;
}
img {
height: 100px;
width: 100px;
margin: 54px 0 30px 0;
}
p {
margin-top: 15px;
font-size: 14px;
color: #99a9bf;
padding: 0 25px;
line-height: 20px;
}
a {
height: 52px;
line-height: 52px;
font-size: 14px;
color: #409eff;
text-align: center;
border: 0;
border-top: 1px solid #eaeefb;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
cursor: pointer;
width: 100%;
background-color: #fff;
border-radius: 0 0 5px 5px;
transition: all .3s;
text-decoration: none;
display: block;
}
}
.product-box:hover {
bottom: 6px;
box-shadow: 0 6px 18px 0 rgba(232, 237, 250, .5)
}
.card a:hover {
color: #fff;
background: #409eff
}
.card .bg-gray:hover {
background: #ffffff;
color: #409eff;
}
@media (max-width: 768px){
.banner{
/*display: none;*/
}
.solution{
padding: 30px 0 80px 0;
h3{
text-align: left;
padding: 0 20px;
font-size: 20px;
}
}
.product-box {
width: 80%;
float: none;
margin: 0 auto 20px;
}
.el-row--flex{
display: block;
}
.solution-box {
width: 80%;
float: none;
margin: 0 auto 20px;
dl{
padding: 30px;
}
}
}
}
</style>
解決方案頁面也挺有意思的
//solution.vue
<template>
<div class="solution-page container">
<el-row :gutter="20">
<el-col :span="6" class="m-el-menu">
<el-menu class="side-nav"
:default-active="activeIndex"
:active-text-color="activeColor"
@select="handleSelect"
>
<el-menu-item index="game">
<span slot="title" class="nav-item">遊戲解決方案</span>
</el-menu-item>
<el-menu-item index="finance">
<span slot="title" class="nav-item">金融解決方案</span>
</el-menu-item>
</el-menu>
</el-col>
<el-col :span="18" class="m-el-page">
<component :is="currentView"></component>
</el-col>
</el-row>
</div>
</template>
<script>
import game from './game'
import finance from './finance'
export default {
name: 'solution',
data() {
return {
activeIndex: 'game',
activeColor:'#409EFF',
currentView:''
}
},
components: {
game,
finance
},
methods: {
handleSelect(key) {
console.log('key',key)
this.currentView = key
_hmt.push(['_trackEvent', 'solution-menu', 'click', key])
},
goToPage(){
window.scrollTo(0,0);
var page = this.$route.query.page;
console.log('............page',this.$route.query.page)
if(page){
this.currentView = page;
this.activeIndex = page;
}else {
this.currentView = 'game'
}
}
},
created(){
this.goToPage()
}
}
</script>
<style scoped lang="less">
.solution-page{
padding: 55px 0 95px;
box-sizing: border-box;;
}
.side-nav {
width: 100%;
box-sizing: border-box;
padding:0 30px;
transition: opacity .3s;
border-right: 0;
.el-menu-item{
height: 40px;
padding: 0!important;
border-right: 1px solid #e6e6e6;
}
}
.el-menu-item{
background: #ffffff!important;
}
el-menu-item:hover{
background: #ffffff!important;
}
.side-nav .nav-item {
font-size: 16px;
line-height: 40px;
height: 100%;
margin: 0;
padding: 0;
text-decoration: none;
display: block;
position: relative;
font-weight: 700;
cursor: pointer;
}
@media (max-width: 768px){
.side-nav{
padding:0 20px 40px;
.el-menu-item{
border-right: 0;
}
}
}
</style>
//game.vue
<template>
<div class="game-content">
<h2 >遊戲解決方案</h2>
<div class="background">
<h3>產品背景</h3>
<p class="introduce">遊戲是我們公司發展的重要業務，對創新性、趣味性、時效性有很高的要求，我們通過爲他們提供賬戶、支付、數據服務，使遊戲開發者更專注於遊戲開發。</p>
</div>
<div class="advantage">
<h3>我們的優勢</h3>
<el-row :gutter="64">
<el-col :sm="7" :xs="22" v-for="(item,index) in advantage" :key="index">
<el-card :body-style="{ padding: '0px 0px 25px 0px' }" class="card" shadow="never">
<div class="text-center">
<img :src="item.img">
<h4>{{item.tit}}</h4>
<span>{{item.con}}</span>
</div>
</el-card>
<ul class="hidden-sm-and-up" style="margin-top: 20px">
<li >
<strong >{{item.tit}}：</strong>
{{item.info}}
</li>
</ul>
</el-col>
</el-row>
</div>
<ul class="hidden-xs-only">
<li >
<strong >快速安裝接入：</strong>
客戶端安裝便捷，SDK一鍵出包，後臺簡便部署，快速高效解決遊戲接入和部署問題
</li>
<li>
<strong>數據安全無憂：</strong>
無第三方介入用戶登錄、支付流程、用戶運營數據傳輸皆在公司內部更安全
</li>
<li>
<strong>多維數據管理：</strong>
強大的後臺管理系統，多遊戲管理，參數維護，數據統計分析，讓遊戲運營輕鬆可靠
</li>
</ul>
<div class="Packing">
<h3>包含產品</h3>
<el-row :gutter="10">
<el-col :sm="8" :xs="24" v-for="(item,index) in Packing" class="m-cards" :key="index">
<el-card :body-style="{ padding: '15px 20px',height: '140px',position: 'relative' }" class="card" shadow="never">
<div class="pack-card">
<h4 class="text-center">{{item.tit}}</h4>
<p class="text-left">{{item.con}}</p>
<a @click="goPage(item.href)">{{item.btn}}</a>
</div>
</el-card>
</el-col>
</el-row>
</div>
<div class="access">
<h3>接入我們</h3>
<el-steps class="hidden-xs-only" >
<el-step title="確定合作意向" description=""></el-step>
<el-step title="聯繫我們，溝通功能需求" description=""></el-step>
<el-step title="開發完成，聯調測試" description=""></el-step>
<el-step title="產品交接培訓" description=""></el-step>
</el-steps>
<div style="height: 300px;margin-bottom: 40px" class="hidden-sm-and-up">
<el-steps direction="vertical">
<el-step title="確定合作意向"></el-step>
<el-step title="聯繫我們，溝通功能需求"></el-step>
<el-step title="開發完成，聯調測試"></el-step>
<el-step title="產品交接培訓"></el-step>
</el-steps>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
value2: 0,
advantage: [
{
img: 'static/image/game1.png',
tit: '快速安裝接入',
con: 'quickly',
info:'客戶端安裝便捷，SDK一鍵出包，後臺簡便部署，快速高效解決遊戲接入和部署問題'
},
{
img: 'static/image/game2.png',
tit: '數據安全無憂',
con: 'security',
info:'無第三方介入用戶登錄、支付流程、用戶運營數據傳輸皆在公司內部更安全'
},
{
img: 'static/image/game3.png',
tit: '多維數據管理',
con: 'dimensional analysis',
info:'強大的後臺管理系統，多遊戲管理，參數維護，數據統計分析，讓遊戲運營輕鬆可靠'
}
],
Packing: [
{
tit: '用戶管理',
con: '用戶自建平臺，滿足個性化定製需求',
btn:'敬請期待',
href:''
},
{
tit: '支付體系',
con: '公司內部的支付流程，數據傳播更安全，溝通無障礙',
btn:'瞭解更多>',
href:'payment'
},
{
tit: '數據平臺',
con: '強大的後臺管理功能，多遊戲管理，參數維護，數據統計分析，財務報表，讓遊戲運營輕鬆可靠',
btn:'瞭解更多>',
href:'dataSystem'
}
]
}
},
methods: {
goPage(id){
if(id){
this.$router.push({
path:'/product',
query: {
id: id
}
});
}
}
}
}
</script>
<style scoped lang="less">
.game-content{
margin-left: -1px;
.background{
margin-bottom:64px;
p{
color: #7b8799;
}
}
.advantage{
margin-bottom:70px;
.el-card{
border:0;
}
.card{
background: #fbfcfd;
text-align: center;
margin-top: 20px;
img{
margin: 40px auto 25px;
width: 80px;
height: 80px;
}
h4{
color: #1f2d3d;
font-weight: 400;
margin: 0;
}
span{
font-size: 14px;
color: #99a9bf;
}
}
}
ul{
margin-bottom: 50px;
padding-left: 0;
li{
font-size: 14px;
margin-bottom: 10px;
color: #99a9bf;
}
li strong{
font-weight: 400;
color: #5e6d82;
}
}
.Packing{
h3{
margin: 20px 0 40px 0;
font-size: 22px;
}
.pack-card{
h4{
font-size: 18px;
}
p{
color: #b7c1d2;
}
a{
color:#409EFF;
position: absolute;
left: 20px;
bottom: 15px;
}
}
}
.access{
h3{
margin: 65px 0 40px 0;
font-size: 22px;
}
}
}
</style>
//finance.vue
<template>
<div class="finance-content">
<h2 >金融解決方案</h2>
<div class="background">
<h3>產品背景</h3>
<h4>基於金融業務推出的風控解決方案</h4>
<p>風控是整個金融業務的核心環節，對系統的穩定性、運行速度、靈活性有很高的要求，我們與金融團隊溝通並確認需求後，爲其推出的整套風控
解決方案，經過嚴格的審批流程驗證、模型測試和數據校驗，充分的保證了金融策略以及風控系統的完整性和安全性。</p>
</div>
<div class="function">
<h3>產品功能</h3>
<el-row type="flex" class="row-bg cards-div" justify="space-around">
<el-col :span="6" class="cards-box">
<el-card :body-style="{ padding: '15px 20px',position: 'relative' }" class="card" shadow="hover">
<div class="function-card">
<h4 class="blue">用戶特徵獲取</h4>
<ul>
<li>設備特徵</li>
<li>進件特徵</li>
</ul>
<em class="garden">1</em>
</div>
</el-card>
</el-col>
<el-col :span="6" class="cards-box">
<el-card :body-style="{ padding: '15px 20px',position: 'relative' }" class="card" shadow="hover">
<div class="function-card">
<h4 class="blue">風控核心類型</h4>
<ul>
<li>支持多類型&規則計算</li>
<li>支持模型數配置</li>
<li>進行多模型串行運算</li>
</ul>
<em class="garden">2</em>
</div>
</el-card>
</el-col>
<el-col :span="6" class="cards-box">
<el-card :body-style="{ padding: '15px 20px',position: 'relative' }" class="card" shadow="hover">
<div class="function-card">
<h4 class="blue">信貸評級</h4>
<ul>
<li>信貸政策針對不同客羣靈活配置</li>
<li>根據業務配置信用分、風險權重、概率限制等</li>
</ul>
<em class="garden">3</em>
</div>
</el-card>
</el-col>
</el-row>
</div>
<div class="advantage">
<h3>我們的優勢</h3>
<el-row >
<el-col :sm="20" :xs="24" v-for="(item,index) in advantage" :key="index">
<el-row class="cards">
<el-col :span="6" class="text-center">
<img :src="item.img"/>
<span>{{item.tit}}</span>
</el-col>
<el-col :span="18">
<p v-html="item.con"></p>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
<div class="access">
<h3>接入我們</h3>
<el-steps class="hidden-xs-only">
<el-step title="確定合作意向" description=""></el-step>
<el-step title="聯繫我們，溝通功能需求" description=""></el-step>
<el-step title="開發完成，聯調測試" description=""></el-step>
<el-step title="產品交接培訓" description=""></el-step>
</el-steps>
<div style="height: 300px;margin-bottom: 40px" class="hidden-sm-and-up">
<el-steps direction="vertical">
<el-step title="確定合作意向"></el-step>
<el-step title="聯繫我們，溝通功能需求"></el-step>
<el-step title="開發完成，聯調測試"></el-step>
<el-step title="產品交接培訓"></el-step>
</el-steps>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
value2: 0,
advantage: [
{
img: 'static/image/finance1.png',
tit: '快速安裝接入',
con: '服務器對外部網絡完全隔離，僅支持內部網絡訪問<br>服務器採用負載均衡設計，可實現自動轉移錯誤，支持水平擴展',
},
{
img: 'static/image/finance2.png',
tit: '數據安全無憂',
con: '支持大量特徵數據的實時運算，響應速度快，性能優異',
},
{
img: 'static/image/finance3.png',
tit: '多維數據管理',
con: '針對金融業務政策變化大的特點，支持模型、規則的靈活配置，更加貼合業務場景',
}
]
}
}
}
</script>
<style lang="less">
.finance-content{
margin-left: -1px;
.background{
margin-bottom:64px;
h4{
margin: 32px 0 16px 0;
}
p{
color: #7b8799;
}
}
.function{
h3{
margin: 20px 0 40px 0;
font-size: 22px;
}
.function-card{
h4{
font-size: 18px;
margin-left: 10px;
}
ul{
margin-top: 24px;
li{
color: #979797;
line-height: 24px;
list-style: disc;
margin-left: 10px;
}
}
.garden{
display: inline-block;
list-style: none;
width: 40px;height: 40px;
border-radius: 50%;
background: #eff5fd;
text-align: center;
line-height: 40px;
position: absolute;
color: #409EFF;
font-size: 20px;
left: -20px;top: -20px;
}
}
.el-card{
overflow: inherit;
min-height: 180px;
}
@media (min-width:1024px) and (max-width:1140px) {
.el-card{
min-height: 200px;
}
}
}
.advantage{
h3{
margin-bottom: 32px;
}
.cards{
margin-bottom: 22px;
padding: 15px 0 25px 0;
background: #FBFCFD;
span{
margin-top: 11px;
display: block;
}
p{
margin: 40px 0 0 30px;
}
}
}
.access{
h3{
margin: 65px 0 40px 0;
font-size: 22px;
}
}
@media (max-width: 768px){
.cards-div{
display: block;
}
.cards-box{
float: none;
width: 80%;
margin: 0 auto 30px;
}
.advantage{
.cards p{
margin: 20px 0 0 20px;
}
}
}
}
</style>
產品中心頁面
<template>
<div class="solution-page container">
<el-row :gutter="20">
<el-col :span="6" class="m-el-menu">
<el-menu class="side-nav"
:default-active="activeIndex"
:active-text-color="activeColor"
@select="handleSelect"
>
<el-menu-item index="payment">
<span slot="title" class="nav-item">支付系統</span>
</el-menu-item>
<el-menu-item index="dataSystem">
<span slot="title" class="nav-item">數據系統</span>
</el-menu-item>
<el-menu-item index="dataSDK">
<span slot="title" class="nav-item">大數據SDK</span>
</el-menu-item>
<!--<el-menu-item index="accountNum" disabled>-->
<!--<span slot="title" class="nav-item">賬號系統</span>-->
<!--</el-menu-item>-->
</el-menu>
</el-col>
<el-col :span="18" class="m-el-page">
<component :is="currentView"></component>
</el-col>
</el-row>
</div>
</template>
<script>
import payment from './payment'
import dataSystem from './data'
import dataSDK from './dataSDK'
import accountNum from './accountNum'
export default {
name: 'product',
data() {
return {
activeIndex: 'payment',
activeColor:'#409EFF',
currentView:''
}
},
components: {
payment,
dataSystem,
dataSDK,
accountNum
},
methods: {
handleSelect(key) {
_hmt.push(['_trackEvent', 'product-menu', 'click', key])
this.currentView = key
},
goToPage(){
window.scrollTo(0,0);
var id = this.$route.query.id;
if(id){
this.currentView = id;
this.activeIndex = id;
}else {
this.currentView = 'payment'
}
}
},
created(){
this.goToPage()
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.solution-page{
padding: 55px 0 95px;
box-sizing: border-box;;
}
.side-nav {
width: 100%;
box-sizing: border-box;
padding:0 30px;
transition: opacity .3s;
border-right: 0;
.el-menu-item{
height: 40px;
padding: 0!important;
background: #ffffff!important;
border-right: 1px solid #e6e6e6;
}
}
el-menu-item:hover{
background: #ffffff!important;
}
.side-nav .nav-item {
font-size: 16px;
line-height: 40px;
height: 100%;
margin: 0;
padding: 0;
text-decoration: none;
display: block;
position: relative;
font-weight: 700;
}
@media (max-width: 768px){
.side-nav{
padding:0 20px 40px;
.el-menu-item{
border-right: 0;
}
}
}
</style>
//payment.vue
<template>
<div class="payment-content">
<h2 >支付系統</h2>
<div class="background">
<h3>產品背景</h3>
<p class="introduce">支付是商業變現必不可少的環節。支付SDK是針對支付功能推出的集成SDK，開發者不需要自己搭建支付模塊，寫冗長代碼，接入聚合SDK
就可擁有各渠道支付功能。</p>
</div>
<div class="trait">
<h3>產品特點</h3>
<ul>
<li class="trait-tit">分別支持Android、IOS系統</li>
<li style="margin: 20px 0 62px 0">
<el-row type="flex" class="row-bg">
<el-col :sm="7" :xs="10">
<el-card class="box-card" shadow="hover" :body-style="{ padding: '10px 0'}">
<img src="../../../../static/image/ios.png">
<span>IOS</span>
</el-card>
</el-col>
<el-col style="margin-left: 30px" :sm="7" :xs="10">
<el-card class="box-card" shadow="hover" :body-style="{ padding: '10px 0'}">
<img src="../../../../static/image/Android.png">
<span>Android</span>
</el-card>
</el-col>
</el-row>
</li>
<li class="trait-tit">集成Google play In-app Billing、IOS In-App Purchase、微信、支付寶等多種支付渠道</li>
<li class="pay">
<el-row class="row-bg">
<el-col :sm="6" :xs="12">
<img src="../../../../static/image/billing-icon.png">
<span>In-app Billing</span>
</el-col>
<el-col :sm="6" :xs="12">
<img src="../../../../static/image/ios-icon.png" style="height: 38px;width: 32px;margin-top: -3px">
<span>In-app Purchase</span>
</el-col>
<el-col :sm="6" :xs="12" class="m-mtb20">
<img src="../../../../static/image/weixin-icon.png" style="height: 32px;width: 36px;">
<span>WeChat Pay</span>
</el-col>
<el-col :sm="6" :xs="12" class="m-mtb20">
<img src="../../../../static/image/ali-icon.png" style="height: 34px;width: 34px;margin-top: -1px">
<span>AliPay</span>
</el-col>
</el-row>
</li>
<li class="trait-tit" >無需開發，直接接入</li>
<li class="gray" style="margin: 20px 0 62px 0">公司內部聚合支付，在保障您數據安全的基礎上，簡化接入流程，給您帶來簡單便捷的接入體驗</li>
<li class="trait-tit">簡潔而強大的訂單管理系統</li>
<li class="gray" style="margin: 20px 0 62px 0">通過後臺可實時查詢訂單詳情、支付狀態，可查詢多方交易數據，統一管理賬務數據，可多維度分析業務運營情況</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data () {
return {
value2: 0,
}
}
}
</script>
<style lang="less">
.payment-content{
margin-left: -1px;
.background{
margin-bottom:64px;
h4{
margin: 32px 0 16px 0;
}
}
.trait{
h3{
margin: 20px 0 40px 0;
font-size: 22px;
}
ul{
.trait-tit{
list-style: disc;
margin-left: 15px;
color: #414d5a;
}
.pay {
margin: 30px 0 62px 0;
line-height: 39px;
span{
margin-left: 5px;
}
}
.box-card{
img{
margin-left: 20px;
}
span{
display: inline-block;
width: 84px;
font-size: 22px;
margin-left: 25px;
vertical-align: middle;
}
}
@media (max-width: 768px){
.box-card{
img{
margin-left: 10px;
}
}
}
}
}
}
</style>
//data.vue
<template>
<div class="data-content">
<h2 >數據系統</h2>
<div class="background">
<h3>產品背景</h3>
<h4>DataX支持自定義報表，可根據需求快速產出報表，讓你的數據應付自如~</h4>
<div class="cards-box">
<el-row :gutter="40" class="row-bg" >
<el-col :sm="8" :xs="24" class="m-mb20">
<el-card class="box-card" shadow="hover">
<img src="../../../../static/image/data-icon1.png"/>
<h5 class="blue">無報表時代</h5>
<p>從數據抽取、製作報表、分析結果全部人工實現</p>
<ul>
<li>準確度低</li>
<li>效率低</li>
<li>工作繁瑣</li>
</ul>
</el-card>
</el-col>
<el-col :sm="8" :xs="24" class="m-mb20">
<el-card class="box-card" shadow="hover">
<img src="../../../../static/image/data-icon2.png"/>
<h5 class="blue">傳統報表時代</h5>
<p>業務提需求，平臺部門做報表</p>
<ul>
<li>需求溝通時間長</li>
<li>開發成本高</li>
<li>實現週期長</li>
</ul>
</el-card>
</el-col>
<el-col :sm="8" :xs="24" class="m-mb20">
<el-card class="box-card" shadow="hover">
<img src="../../../../static/image/data-icon3.png"/>
<h5 class="blue">自定義報表時代</h5>
<p>DataX自助式報表系統</p>
<ul>
<li>效率高</li>
<li>個性化定製</li>
<li>覆蓋廣</li>
</ul>
</el-card>
</el-col>
</el-row>
</div>
<p class="introduce">在面臨業務需求增多、數據獲取多樣、開發成本高的壓力下，我們推出DataX自定義報表系統。</p>
</div>
<div class="goods">
<h3>產品優勢</h3>
<ul>
<li >
<strong >效率高：</strong>
半小時出報表，快速獲取數據&分析的結果
</li>
<li>
<strong>易操作：</strong>
自定義報表系統，拖拽式操作，半小時快速出報表。
</li>
<li>
<strong>樣式多：</strong>
交叉表、柱狀圖、地圖、漏斗圖等多種圖表樣式，讓你的報表隨你所想
</li>
<li>
<strong>個性化定製：</strong>
Dashbroad、報表、交互分析等多種數據需求，均可滿足
</li>
<li>
<strong>數據源覆蓋廣：</strong>
ES、MYSQL等，支持多種數據存儲，報表的展示在幾秒內
</li>
</ul>
</div>
<div class="access">
<h3>使用方法</h3>
<h4>如何使用DataX</h4>
<el-steps class="hidden-xs-only">
<el-step title="添加數據源" description=""></el-step>
<el-step title="抽取數據集" description=""></el-step>
<el-step title="生成圖表" description=""></el-step>
<el-step title="組合報表" description=""></el-step>
<el-step title="報表展示" description=""></el-step>
</el-steps>
<div style="height: 400px;margin-bottom: 40px" class="hidden-sm-and-up">
<el-steps direction="vertical">
<el-step title="添加數據源"></el-step>
<el-step title="抽取數據集"></el-step>
<el-step title="生成圖表"></el-step>
<el-step title="組合報表"></el-step>
<el-step title="報表展示"></el-step>
</el-steps>
</div>
<div style="padding-top: 32px">
<video controls
class="video"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portraint"
poster="/static/image/video.jpg"
>
<source src="static/video/DataxoOperate2.mp4" type="video/mp4">
您的瀏覽器不支持 HTML5 video 標籤。
</video>
</div>
<div class="download">
<a href="static/file/datax操作文檔.pdf">
<i class="el-icon-download"></i>
操作文檔下載
</a>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
value2: 0
}
}
}
</script>
<style lang="less">
.data-content{
margin-left: -1px;
.background{
margin-bottom:64px;
h4{
margin: 30px 0 32px 0;
}
.cards-box{
margin: 10px 0 18px 0;
.box-card{
background: #fbfcfd;
h5{
font-size: 18px;
margin: 18px 0;
}
p{
color: #333333;
min-height: 45px;
}
ul{
margin-top: 10px;
}
li{
color: #979797;
line-height: 28px;
}
}
}
}
.goods{
ul{
margin-bottom: 50px;
margin-top: 30px;
padding-left: 0;
li{
font-size: 14px;
margin-bottom: 10px;
color: #979797;
}
li strong{
font-weight: 400;
color: #5e6d82;
}
}
}
.access{
h4{
font-size: 18px;
margin: 32px 0 16px 0;
}
h3{
margin: 65px 0 40px 0;
font-size: 22px;
}
.download{
margin-top: 50px;
}
.video{
width: 550px;
}
@media (max-width: 768px){
.video{
width: 100%;
}
}
}
}
</style>
//dataSDK.vue
<template xmlns="http://www.w3.org/1999/html">
<div class="SDK-content">
<h2 >大數據SDK</h2>
<div class="background">
<h3>產品背景</h3>
<p class="introduce">隨着數據時代的到來，數據將在各個方面扮演越來越重要的角色。公司開展多項數據業務，同時不同業務也開始越來越多的使用數據建模進行推廣運營，數據價值越來越被看中。收集整合用戶數據的大數據SDK應運而生，通過公司各產品積極支持， 客戶端通過大數據SDK收集、上報數據，由大數據團隊接收處理並管理數據，共同爲公司各業務線提供豐富有價值的數據。</p>
</div>
<div class="data-sources">
<h3>數據來源及內容</h3>
<p class="introduce">大數據SDK通過集成到公司內各產品收集用戶數據，輸出維度主要有以下：</p>
<el-row style="margin-top: 40px" :gutter="20">
<el-col :sm="12" :xs="24" class="m-mb20">
<el-card class="box-card" shadow="hover">
<el-row>
<el-col :span="12">
<h4 class="circle-dot">用戶屬性</h4>
<div class="text-center">
<img src="../../../../static/image/sdk-icon1.png"/>
<p>硬件信息</p>
</div>
</el-col>
<el-col :span="12">
<div class="text-center" style="margin-top: 30px">
<img src="../../../../static/image/sdk-icon2.png"/>
<p>地理信息信息</p>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :sm="12" :xs="24">
<el-card class="box-card" shadow="hover">
<el-row>
<el-col :span="12">
<h4 class="circle-dot">用戶行爲</h4>
<div class="text-center">
<img src="../../../../static/image/sdk-icon3.png"/>
<p>系統行爲</p>
</div>
</el-col>
<el-col :span="12">
<div class="text-center" style="margin-top: 30px">
<img src="../../../../static/image/sdk-icon4.png"/>
<p>第三方應用行爲</p>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
</div>
<div class="apply">
<h3>大數據應用</h3>
<p class="introduce">大數據SDK將收集到的用戶數據，處理整合輸出到公司內部各數據業務及其他產品線。目前向Libra，智庫等數據業務；金融業務建模；廣告用戶標籤及產品推廣中用戶挖掘等需求提供數據。</p>
<el-row style="margin-top: 45px" class="hidden-xs-only">
<el-col :sm="2" :xs="4" class="front">
<div style="margin-top: 10px">獲取<br>數據</div>
<img src="../../../../static/image/arrow.png">
<div class="">業務<br>輸出</div>
</el-col>
<el-col :sm="22" :xs="20">
<div class="bg-purple">大數據SDK</div>
<el-row :gutter="20" style="margin-top: 45px">
<el-col :sm="6" :xs="20" class="m-mb20">
<el-card class="box-card" shadow="hover">
<h4 class="circle-dot">數據業務</h4>
<p>Libra 平臺<br>智能數據平臺</p>
</el-card>
</el-col>
<el-col :sm="6" :xs="20" class="m-mb20">
<el-card class="box-card" shadow="hover">
<h4 class="circle-dot">金融業務</h4>
<p>數據建模</p>
</el-card>
</el-col>
<el-col :sm="6" :xs="20" class="m-mb20">
<el-card class="box-card" shadow="hover">
<h4 class="circle-dot">廣告業務</h4>
<p>用戶標籤</p>
</el-card>
</el-col>
<el-col :sm="6" :xs="20" class="m-mb20">
<el-card class="box-card" shadow="hover">
<h4 class="circle-dot">產品推廣</h4>
<p>潛在用戶挖掘</p>
</el-card>
</el-col>
</el-row>
</el-col>
</el-row>
<el-row style="margin-top: 45px" class="hidden-sm-and-up">
<el-col :xs="24" class="front">
<el-col :xs="8">
獲取數據
</el-col>
<el-col :xs="6">
<div style="height: 40px;">
<img src="../../../../static/image/arrow.png" class="arrow">
</div>
</el-col>
<el-col :xs="10" class="text-left">
業務輸出
</el-col>
</el-col>
<el-col :xs="24">
<el-row>
<el-col :xs="6">
<div class="m-bg-purple">大<br>數<br>據<br>S<br>D<br>K</div>
</el-col>
<el-col :xs="16">
<el-row style="margin-left: 30px">
<el-col :sm="12" :xs="24" class="m-mb20">
<el-card class="box-card" shadow="hover">
<h4 class="circle-dot">數據業務</h4>
<p>Libra 平臺<br>智能數據平臺</p>
</el-card>
</el-col>
<el-col :sm="12" :xs="24" class="m-mb20">
<el-card class="box-card" shadow="hover">
<h4 class="circle-dot">金融業務</h4>
<p>數據建模</p>
</el-card>
</el-col>
<el-col :sm="12" :xs="24" class="m-mb20">
<el-card class="box-card" shadow="hover">
<h4 class="circle-dot">廣告業務</h4>
<p>用戶標籤</p>
</el-card>
</el-col>
<el-col :sm="12" :xs="24" class="m-mb20">
<el-card class="box-card" shadow="hover">
<h4 class="circle-dot">產品推廣</h4>
<p>潛在用戶挖掘</p>
</el-card>
</el-col>
</el-row>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data () {
return {
value2: 0
}
}
}
</script>
<style lang="less">
.SDK-content{
margin-left: -1px;
.background{
margin-bottom:64px;
h4{
margin: 32px 0 16px 0;
}
}
.data-sources{
.box-card{
background: #fbfcfd;
h4{
margin-left: 20%;
}
img{
margin-top: 38px;
}
p{
font-size: 18px;
margin-top: 10px;
color: #7b8799;
}
}
}
.apply{
.front{
text-align: center;
img{
margin: 9px 0 16px 0;
}
.arrow{
transform:rotate(270deg);margin-top: -16px;
margin-left: -20px;
}
div{
font-size: 16px;
color: #7b8799;
}
}
.bg-purple{
padding: 20px 0;
background: #ebeef5;
border-radius: 4px;
font-size: 18px;
text-align: center;
}
.box-card{
background: #fbfcfd;
p{
font-size: 18px;
color: #979797;
min-height: 58px;
margin: 10px 0 0 20px;
}
}
@media (max-width: 768px){
.m-bg-purple{
width: 70%;
margin-left: 20px;
padding-top: 180px;
height:340px ;
background: #ebeef5;
border-radius: 4px;
font-size: 18px;
text-align: center;
}
.data-sources{
.box-card{
h4{
margin-left: 10%;
}
}
}
.box-card p{
min-height: auto;
}
}
}
@media (max-width: 768px){
.data-sources{
.box-card{
h4{
margin-left: 10%;
}
}
}
}
}
</style>
contactUs頁面就比較隨性了
//contactUs
<template>
<div>
<div class="container">
<div class="contact-us text-center">
<dl>
<dt class="h2">聯繫我</dt>
<dd>有任何使用和體驗問題，請聯繫我們</dd>
</dl>
<dl >
<dt class="h3" style="margin-right: 36px">郵箱聯繫</dt>
<dd class="gray">[email protected]</dd>
</dl>
<dl>
<dt class="h3">部門地址</dt>
<dd class="gray">部門地址：</dd>
</dl>
<div>
<!-- <img src="../../../../static/image/address2.jpg" style="width: 100%"> -->
</div>
</div>
</div>
<div class="bottom-side">
©2018 石志凱 [email protected]
</div>
</div>
</template>
<script>
export default {
name: 'contactUs'
}
</script>
<style scoped lang="less">
.contact-us{
padding-top: 55px;
.h2{
font-size: 28px;
}
.h3{
font-size: 22px;
}
dl{
margin-bottom: 72px;
dd{
margin-top: 18px;
}
.weixin{
display: inline-block;
width: 162px;
height: 162px;
}
}
.mr32{
margin-right: 32px;
}
.ml32{
margin-left: 32px;
}
}
.bottom-side{
color: #ababab;
margin-top: 100px;
height: 68px;
background: #f7fbfd;
text-align: center;
padding-top: 32px;
}
@media (max-width: 768px){
.contact-us{
.mr32,.ml32{
margin-right: 0;
margin-left: 0;
}
dl{
text-align: center!important;
}
dt{
margin-right: 0!important;
}
}
}
</style>
感謝作者大大開源項目，超級感謝