首先放下作者大大的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>
产品中心页面
扫描二维码关注公众号，回复：
11455208 查看本文章
<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>
感谢作者大大开源项目，超级感谢