Skip to content

P
projectMgmtClient
Commit 3c1d90f7 by lixinming
Options

Merge branch 'master' of http://123.207.147.179:8888/node_server/projectMgmtClient

parents 565d7e66 6fc4777c
Showing with 644 additions and 1 deletions
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
...@@ -13,6 +13,8 @@ ...@@ -13,6 +13,8 @@
"build": "node build/build.js --product" "build": "node build/build.js --product"
}, },
"dependencies": { "dependencies": {
"@babel/core": "^7.18.6",
"@babel/preset-env": "^7.18.6",
"@babel/preset-es2017": "^7.0.0-beta.53", "@babel/preset-es2017": "^7.0.0-beta.53",
"axios": "^0.18.0", "axios": "^0.18.0",
"echarts": "^5.3.1", "echarts": "^5.3.1",
...@@ -20,7 +22,9 @@ ...@@ -20,7 +22,9 @@
"element": "^0.1.4", "element": "^0.1.4",
"element-ui": "^2.13.2", "element-ui": "^2.13.2",
"file-saver": "^2.0.2", "file-saver": "^2.0.2",
"jquery": "^3.6.0",
"js-md5": "^0.7.3", "js-md5": "^0.7.3",
"node": "^18.5.0",
"node-annotation": "^1.0.0", "node-annotation": "^1.0.0",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"qs": "^6.6.0", "qs": "^6.6.0",
......
src/main.js
...@@ -17,6 +17,7 @@ import LangENUS from './lang/en-us' ...@@ -17,6 +17,7 @@ import LangENUS from './lang/en-us'
import LangJAJP from './lang/ja-jp' import LangJAJP from './lang/ja-jp'
import LangKPKR from './lang/ko-kr' import LangKPKR from './lang/ko-kr'
import md5 from 'js-md5' import md5 from 'js-md5'
import $ from 'jquery'
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.use(VueCookie); Vue.use(VueCookie);
......
src/pages/animated/contact.vue 0 → 100644
<template>
<div>
<nav class="cd-side-navigation">
<ul>
<li>
<a href="#0" data-menu="index">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g transform="translate(0, 0)"> <polygon fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points="12,2 3,10 3,23 9,23 9,16 15,16 15,23 21,23 21,10 " stroke-linejoin="miter"></polygon> </g></svg>
Intro
</a>
</li>
<li>
<a href="#0" data-menu="services">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<polyline data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points=" 16,7 16,2 8,2 8,7 " stroke-linejoin="miter"></polyline> <rect x="1" y="7" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="22" height="15" stroke-linejoin="miter"></rect>
<line fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="5" y1="7" x2="5" y2="22" stroke-linejoin="miter"></line>
<line fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="19" y1="7" x2="19" y2="22" stroke-linejoin="miter"></line>
</g>
</svg>
Services
</a>
</li>
<li>
<a href="#0" data-menu="projects">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<rect x="1" y="1" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="22" height="22" stroke-linejoin="miter"></rect>
<rect data-color="color-2" x="5" y="5" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect>
<rect data-color="color-2" x="14" y="5" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect>
<rect data-color="color-2" x="5" y="14" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect>
<rect data-color="color-2" x="14" y="14" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect>
</g>
</svg>
Projects
</a>
</li>
<li>
<a href="#0" class="selected" data-menu="contact">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<polyline data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points=" 19,7 12,14 5,7 " stroke-linejoin="miter"></polyline>
<rect x="1" y="3" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="22" height="18" stroke-linejoin="miter"></rect>
<line data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="7" y1="15" x2="5" y2="17" stroke-linejoin="miter"></line>
<line data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="17" y1="15" x2="19" y2="17" stroke-linejoin="miter"></line>
</g>
</svg>
Contact
</a>
</li>
</ul>
</nav> <!-- .cd-side-navigation -->
<main class="cd-main">
<section class="cd-section contact visible">
<header>
<div class="cd-title">
<h2>Contact</h2>
<span>Some text here</span>
</div>
<a href="#contact-content" class="cd-scroll">Scroll Down</a>
</header>
<div class="cd-content" id="contact-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
</div> <!-- .cd-content -->
</section> <!-- .cd-section -->
</main> <!-- .cd-main -->
<div id="cd-loading-bar" data-scale="1" class="contact"></div> <!-- lateral loading bar -->
</template>
<script>
import * as modernizr from './js/modernizr';
import * as velocity from './js/velocity';
import * as main from './js/main';
export default {
modernizr,
velocity,
main,
};
</script>
<style scoped>
@import url("http://fonts.useso.com/css?family=PT+Sans:400,700");
@import url("css/reset.css");
@import url("css/style.css");
</style>
src/pages/animated/css/reset.css 0 → 100644
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
\ No newline at end of file
src/pages/animated/img/cd-icon-arrow.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="44px" height="44px" viewBox="18 -14 44 44" enable-background="new 18 -14 44 44" xml:space="preserve">
<polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points="60,0 40,16 20,0
"/>
</svg>
src/pages/animated/index.vue 0 → 100644
<template>
<div>
<nav class="cd-side-navigation">
<ul>
<li>
<a href="#0" class="selected" data-menu="index">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g transform="translate(0, 0)"> <polygon fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points="12,2 3,10 3,23 9,23 9,16 15,16 15,23 21,23 21,10 " stroke-linejoin="miter"></polygon> </g></svg>
Intro
</a>
</li>
<li>
<a href="#0" data-menu="services">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g transform="translate(0, 0)"> <polyline data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points=" 16,7 16,2 8,2 8,7 " stroke-linejoin="miter"></polyline> <rect x="1" y="7" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="22" height="15" stroke-linejoin="miter"></rect> <line fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="5" y1="7" x2="5" y2="22" stroke-linejoin="miter"></line> <line fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="19" y1="7" x2="19" y2="22" stroke-linejoin="miter"></line> </g></svg>
Services
</a>
</li>
<li>
<a href="#0" data-menu="projects">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g transform="translate(0, 0)"> <rect x="1" y="1" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="22" height="22" stroke-linejoin="miter"></rect> <rect data-color="color-2" x="5" y="5" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect> <rect data-color="color-2" x="14" y="5" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect> <rect data-color="color-2" x="5" y="14" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect> <rect data-color="color-2" x="14" y="14" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect> </g></svg>
Projects
</a>
</li>
<li>
<a href="#0" data-menu="contact">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g transform="translate(0, 0)"> <polyline data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points=" 19,7 12,14 5,7 " stroke-linejoin="miter"></polyline> <rect x="1" y="3" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="22" height="18" stroke-linejoin="miter"></rect> <line data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="7" y1="15" x2="5" y2="17" stroke-linejoin="miter"></line> <line data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="17" y1="15" x2="19" y2="17" stroke-linejoin="miter"></line> </g>
</svg>
Contact
</a>
</li>
</ul>
</nav> <!-- .cd-side-navigation -->
<main class="cd-main">
<section class="cd-section index visible">
<header>
<div class="cd-title">
<h2>Animated Page Transition #2</h2>
<span>Some text here</span>
</div>
<a href="#index-content" class="cd-scroll">Scroll Down</a>
</header>
<div class="cd-content" id="index-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
</div> <!-- .cd-content -->
</section> <!-- .cd-section -->
</main> <!-- .cd-main -->
<div id="cd-loading-bar" data-scale="1" class="index"></div> <!-- lateral loading bar -->
</div>
</template>
<script>
import * as modernizr from './js/modernizr';
import * as velocity from './js/velocity';
import * as main from './js/main';
export default {
modernizr,
velocity,
main,
};
</script>
<style scoped>
@import url("http://fonts.useso.com/css?family=PT+Sans:400,700");
@import url("css/reset.css");
@import url("css/style.css");
</style>
\ No newline at end of file
src/pages/animated/js/main.js 0 → 100644
jQuery(document).ready(function($){
//set some variables
var isAnimating = false,
firstLoad = false,
newScaleValue = 1;
//cache DOM elements
var dashboard = $('.cd-side-navigation'),
mainContent = $('.cd-main'),
loadingBar = $('#cd-loading-bar');
//select a new section
dashboard.on('click', 'a', function(event){
event.preventDefault();
var target = $(this),
//detect which section user has chosen
sectionTarget = target.data('menu');
if( !target.hasClass('selected') && !isAnimating ) {
//if user has selected a section different from the one alredy visible - load the new content
triggerAnimation(sectionTarget, true);
}
firstLoad = true;
});
//detect the 'popstate' event - e.g. user clicking the back button
$(window).on('popstate', function() {
if( firstLoad ) {
/*
Safari emits a popstate event on page load - check if firstLoad is true before animating
if it's false - the page has just been loaded
*/
var newPageArray = location.pathname.split('/'),
//this is the url of the page to be loaded
newPage = newPageArray[newPageArray.length - 1].replace('.html', '');
if( !isAnimating ) triggerAnimation(newPage, false);
}
firstLoad = true;
});
//scroll to content if user clicks the .cd-scroll icon
mainContent.on('click', '.cd-scroll', function(event){
event.preventDefault();
var scrollId = $(this.hash);
$(scrollId).velocity('scroll', { container: $(".cd-section") }, 200);
});
//start animation
function triggerAnimation(newSection, bool) {
isAnimating = true;
newSection = ( newSection == '' ) ? 'index' : newSection;
//update dashboard
dashboard.find('*[data-menu="'+newSection+'"]').addClass('selected').parent('li').siblings('li').children('.selected').removeClass('selected');
//trigger loading bar animation
initializeLoadingBar(newSection);
//load new content
loadNewContent(newSection, bool);
}
function initializeLoadingBar(section) {
var selectedItem = dashboard.find('.selected'),
barHeight = selectedItem.outerHeight(),
barTop = selectedItem.offset().top,
windowHeight = $(window).height(),
maxOffset = ( barTop + barHeight/2 > windowHeight/2 ) ? barTop : windowHeight- barTop - barHeight,
scaleValue = ((2*maxOffset+barHeight)/barHeight).toFixed(3)/1 + 0.001;
//place the loading bar next to the selected dashboard element
loadingBar.data('scale', scaleValue).css({
height: barHeight,
top: barTop
}).attr('class', '').addClass('loading '+section);
}
function loadNewContent(newSection, bool) {
setTimeout(function(){
//animate loading bar
loadingBarAnimation();
//create a new section element and insert it into the DOM
var section = $('<section class="cd-section overflow-hidden '+newSection+'"></section>').appendTo(mainContent);
//load the new content from the proper html file
section.load(newSection+'.html .cd-section > *', function(event){
//finish up the animation and then make the new section visible
var scaleMax = loadingBar.data('scale');
loadingBar.velocity('stop').velocity({
scaleY: scaleMax
}, 400, function(){
//add the .visible class to the new section element -> it will cover the old one
section.prev('.visible').removeClass('visible').end().addClass('visible').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
resetAfterAnimation(section);
});
//if browser doesn't support transition
if( $('.no-csstransitions').length > 0 ) {
resetAfterAnimation(section);
}
var url = newSection+'.html';
if(url!=window.location && bool){
//add the new page to the window.history
//if the new page was triggered by a 'popstate' event, don't add it
window.history.pushState({path: url},'',url);
}
});
});
}, 50);
}
function loadingBarAnimation() {
var scaleMax = loadingBar.data('scale');
if( newScaleValue + 1 < scaleMax) {
newScaleValue = newScaleValue + 1;
} else if ( newScaleValue + 0.5 < scaleMax ) {
newScaleValue = newScaleValue + 0.5;
}
loadingBar.velocity({
scaleY: newScaleValue
}, 100, loadingBarAnimation);
}
function resetAfterAnimation(newSection) {
//once the new section animation is over, remove the old section and make the new one scrollable
newSection.removeClass('overflow-hidden').prev('.cd-section').remove();
isAnimating = false;
//reset your loading bar
resetLoadingBar();
}
function resetLoadingBar() {
loadingBar.removeClass('loading').velocity({
scaleY: 1
}, 1);
}
});
\ No newline at end of file
src/pages/animated/projects.vue 0 → 100644
<template>
<div>
<nav class="cd-side-navigation">
<ul>
<li>
<a href="#0" data-menu="index">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<polygon fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points="12,2 3,10 3,23 9,23 9,16 15,16 15,23 21,23 21,10 " stroke-linejoin="miter"></polygon>
</g>
</svg>
Intro
</a>
</li>
<li>
<a href="#0" data-menu="services">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<polyline data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points=" 16,7 16,2 8,2 8,7 " stroke-linejoin="miter"></polyline>
<rect x="1" y="7" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="22" height="15" stroke-linejoin="miter"></rect>
<line fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="5" y1="7" x2="5" y2="22" stroke-linejoin="miter"></line>
<line fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="19" y1="7" x2="19" y2="22" stroke-linejoin="miter"></line>
</g>
</svg>
Services
</a>
</li>
<li>
<a href="#0" class="selected" data-menu="projects">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<rect x="1" y="1" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="22" height="22" stroke-linejoin="miter"></rect>
<rect data-color="color-2" x="5" y="5" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect>
<rect data-color="color-2" x="14" y="5" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect>
<rect data-color="color-2" x="5" y="14" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect>
<rect data-color="color-2" x="14" y="14" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect>
</g>
</svg>
Projects
</a>
</li>
<li>
<a href="#0" data-menu="contact">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<polyline data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points=" 19,7 12,14 5,7 " stroke-linejoin="miter"></polyline>
<rect x="1" y="3" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="22" height="18" stroke-linejoin="miter"></rect>
<line data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="7" y1="15" x2="5" y2="17" stroke-linejoin="miter"></line>
<line data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="17" y1="15" x2="19" y2="17" stroke-linejoin="miter"></line>
</g>
</svg>
Contact
</a>
</li>
</ul>
</nav> <!-- .cd-side-navigation -->
<main class="cd-main">
<section class="cd-section projects visible">
<header>
<div class="cd-title">
<h2>Projects</h2>
<span>Some text here</span>
</div>
<a href="#projects-content" class="cd-scroll">Scroll Down</a>
</header>
<div class="cd-content" id="projects-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
</div> <!-- .cd-content -->
</section> <!-- .cd-section -->
</main> <!-- .cd-main -->
<div id="cd-loading-bar" data-scale="1" class="projects"></div> <!-- lateral loading bar -->
</div>
</template>
<script>
import * as modernizr from './js/modernizr';
import * as velocity from './js/velocity';
import * as main from './js/main';
export default {
modernizr,
velocity,
main,
};
</script>
<style scoped>
@import url("http://fonts.useso.com/css?family=PT+Sans:400,700");
@import url("css/reset.css");
@import url("css/style.css");
</style>
src/pages/animated/services.vue 0 → 100644
<template>
<div>
<nav class="cd-side-navigation">
<ul>
<li>
<a href="#0" data-menu="index">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<polygon fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points="12,2 3,10 3,23 9,23 9,16 15,16 15,23 21,23 21,10 " stroke-linejoin="miter"></polygon>
</g>
</svg>
Intro
</a>
</li>
<li>
<a class="selected" href="#0" data-menu="services">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<polyline data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points=" 16,7 16,2 8,2 8,7 " stroke-linejoin="miter"></polyline>
<rect x="1" y="7" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="22" height="15" stroke-linejoin="miter"></rect>
<line fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="5" y1="7" x2="5" y2="22" stroke-linejoin="miter"></line>
<line fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="19" y1="7" x2="19" y2="22" stroke-linejoin="miter"></line>
</g>
</svg>
Services
</a>
</li>
<li>
<a href="#0" data-menu="projects">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<rect x="1" y="1" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="22" height="22" stroke-linejoin="miter"></rect>
<rect data-color="color-2" x="5" y="5" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect>
<rect data-color="color-2" x="14" y="5" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect>
<rect data-color="color-2" x="5" y="14" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect>
<rect data-color="color-2" x="14" y="14" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="5" height="5" stroke-linejoin="miter"></rect>
</g>
</svg>
Projects
</a>
</li>
<li>
<a href="#0" data-menu="contact">
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<polyline data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points=" 19,7 12,14 5,7 " stroke-linejoin="miter"></polyline>
<rect x="1" y="3" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="22" height="18" stroke-linejoin="miter"></rect>
<line data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="7" y1="15" x2="5" y2="17" stroke-linejoin="miter"></line>
<line data-color="color-2" fill="none" stroke="#4a5261" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="17" y1="15" x2="19" y2="17" stroke-linejoin="miter"></line>
</g>
</svg>
Contact
</a>
</li>
</ul>
</nav> <!-- .cd-side-navigation -->
<main class="cd-main">
<section class="cd-section services visible">
<header>
<div class="cd-title">
<h2>Services</h2>
<span>Some text here</span>
</div>
<a href="#services-content" class="cd-scroll">Scroll Down</a>
</header>
<div class="cd-content" id="services-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illo veritatis ea deserunt aliquam blanditiis, voluptas optio, voluptate ut accusamus veniam numquam, porro! Cum minima a molestiae, similique voluptate, perferendis vel iusto quam suscipit delectus dolore ducimus possimus illo molestias voluptas labore optio consequuntur sapiente pariatur libero nam temporibus. Laudantium!
</p>
</div> <!-- .cd-content -->
</section> <!-- .cd-section -->
</main> <!-- .cd-main -->
<div id="cd-loading-bar" data-scale="1" class="services"></div> <!-- lateral loading bar -->
</div>
</template>
<script>
import * as modernizr from './js/modernizr';
import * as velocity from './js/velocity';
import * as main from './js/main';
export default {
modernizr,
velocity,
main,
};
</script>
<style scoped>
@import url("http://fonts.useso.com/css?family=PT+Sans:400,700");
@import url("css/reset.css");
@import url("css/style.css");
</style>
src/router/index.js
...@@ -70,15 +70,29 @@ export default new Router({ ...@@ -70,15 +70,29 @@ export default new Router({
{path: 'stats', name: 'stats', component: () => import('../pages/pm/stats.vue')}, {path: 'stats', name: 'stats', component: () => import('../pages/pm/stats.vue')},
] ]
},{ },
{
path: '/new', path: '/new',
name: 'new', name: 'new',
component: () => import('../pages/home.vue'), component: () => import('../pages/home.vue'),
children: [ children: [
{path: 'menu', name: 'menu', component: () => import('../pages/new/menu.vue')}, {path: 'menu', name: 'menu', component: () => import('../pages/new/menu.vue')},
] ]
},
{
path: '/animated',
name: 'animated',
component: () => import('../pages/animated/index.vue'),
children: [
{path: 'index', name: 'index', component: () => import('../pages/animated/index.vue')},
{path: 'projects', name: 'projects', component: () => import('../pages/animated/projects.vue')},
{path: 'services', name: 'services', component: () => import('../pages/animated/services.vue')},
]
} }
] ]
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment