Commit 4a653291 by 周志凯

styles: layout

1 parent d42e220c
......@@ -3,12 +3,15 @@ module.exports = {
env: {
node: true
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
parserOptions: {
parser: "babel-eslint"
parser: 'babel-eslint'
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
'prettier/prettier': 'error',
quotes: ['error', 'single'],
semi: ['error', 'never'],
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
};
}
......@@ -2234,6 +2234,14 @@
"integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
"dev": true
},
"async-validator": {
"version": "1.8.5",
"resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz",
"integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
"requires": {
"babel-runtime": "6.x"
}
},
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
......@@ -2273,6 +2281,37 @@
"integrity": "sha1-oXs6jqgRBg501H0wYSJACtRJeuI=",
"dev": true
},
"axios": {
"version": "0.19.2",
"resolved": "https://registry.npm.taobao.org/axios/download/axios-0.19.2.tgz",
"integrity": "sha1-PqNsXYgY0NX4qKl6bTa4bNwAyyc=",
"requires": {
"follow-redirects": "1.5.10"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz?cache=0&sync_timestamp=1585479417937&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.5.10.tgz",
"integrity": "sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=",
"requires": {
"debug": "=3.1.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
},
"babel-eslint": {
"version": "10.1.0",
"resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",
......@@ -2287,6 +2326,11 @@
"resolve": "^1.12.0"
}
},
"babel-helper-vue-jsx-merge-props": {
"version": "2.0.3",
"resolved": "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
"integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
},
"babel-loader": {
"version": "8.1.0",
"resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.1.0.tgz?cache=0&sync_timestamp=1584715910722&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.1.0.tgz",
......@@ -2309,6 +2353,27 @@
"object.assign": "^4.1.0"
}
},
"babel-runtime": {
"version": "6.26.0",
"resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
},
"dependencies": {
"core-js": {
"version": "2.6.11",
"resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.11.tgz?cache=0&sync_timestamp=1586450269267&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.11.tgz",
"integrity": "sha1-OIMUafmSK97Y7iHJ3EaYXgOZMIw="
},
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz?cache=0&sync_timestamp=1584052597708&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.11.1.tgz",
"integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
}
}
},
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
......@@ -4023,7 +4088,6 @@
"version": "4.1.1",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-4.1.1.tgz",
"integrity": "sha1-O3ImAlUQnGtYnO4FDx1RYTlmR5E=",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
......@@ -4069,8 +4133,7 @@
"deepmerge": {
"version": "1.5.2",
"resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
"integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
"dev": true
"integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
},
"default-gateway": {
"version": "5.0.5",
......@@ -4529,6 +4592,19 @@
"integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=",
"dev": true
},
"element-ui": {
"version": "2.13.2",
"resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.2.tgz?cache=0&sync_timestamp=1589795164194&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felement-ui%2Fdownload%2Felement-ui-2.13.2.tgz",
"integrity": "sha1-WCv0eqqqr+I+oZWPriF6aHrQZEc=",
"requires": {
"async-validator": "~1.8.1",
"babel-helper-vue-jsx-merge-props": "^2.0.0",
"deepmerge": "^1.2.0",
"normalize-wheel": "^1.0.1",
"resize-observer-polyfill": "^1.5.0",
"throttle-debounce": "^1.0.1"
}
},
"elliptic": {
"version": "6.5.2",
"resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.2.tgz",
......@@ -6832,6 +6908,11 @@
"integrity": "sha1-MTtidN2nGPcU0AszMLuubjjpAgk=",
"dev": true
},
"js-cookie": {
"version": "2.2.1",
"resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz",
"integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
},
"js-message": {
"version": "1.0.5",
"resolved": "https://registry.npm.taobao.org/js-message/download/js-message-1.0.5.tgz",
......@@ -8051,8 +8132,7 @@
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.2.tgz",
"integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk=",
"dev": true
"integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk="
},
"multicast-dns": {
"version": "6.2.3",
......@@ -8373,6 +8453,16 @@
"integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
"dev": true
},
"normalize-wheel": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
"integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
},
"normalize.css": {
"version": "8.0.1",
"resolved": "https://registry.npm.taobao.org/normalize.css/download/normalize.css-8.0.1.tgz",
"integrity": "sha1-m5iiCHOLnMJjTKrLxC0THJdIe/M="
},
"npm-run-path": {
"version": "2.0.2",
"resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
......@@ -8394,6 +8484,11 @@
"set-blocking": "~2.0.0"
}
},
"nprogress": {
"version": "0.2.0",
"resolved": "https://registry.npm.taobao.org/nprogress/download/nprogress-0.2.0.tgz?cache=0&sync_timestamp=1587262530340&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnprogress%2Fdownload%2Fnprogress-0.2.0.tgz",
"integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
},
"nth-check": {
"version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/nth-check/download/nth-check-1.0.2.tgz",
......@@ -10241,6 +10336,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
},
"resolve": {
"version": "1.17.0",
"resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.17.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresolve%2Fdownload%2Fresolve-1.17.0.tgz",
......@@ -10558,6 +10658,14 @@
"ajv-keywords": "^3.4.1"
}
},
"script-ext-html-webpack-plugin": {
"version": "2.1.4",
"resolved": "https://registry.npm.taobao.org/script-ext-html-webpack-plugin/download/script-ext-html-webpack-plugin-2.1.4.tgz",
"integrity": "sha1-fDCTVOMQv3hSPhuEypb9N0zrmIA=",
"requires": {
"debug": "^4.1.1"
}
},
"scss-tokenizer": {
"version": "0.2.3",
"resolved": "https://registry.npm.taobao.org/scss-tokenizer/download/scss-tokenizer-0.2.3.tgz",
......@@ -11657,6 +11765,11 @@
"neo-async": "^2.6.0"
}
},
"throttle-debounce": {
"version": "1.1.0",
"resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz?cache=0&sync_timestamp=1591627081398&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrottle-debounce%2Fdownload%2Fthrottle-debounce-1.1.0.tgz",
"integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
},
"through": {
"version": "2.3.8",
"resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
......
......@@ -8,7 +8,13 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.5",
"element-ui": "^2.13.2",
"js-cookie": "^2.2.1",
"normalize.css": "^8.0.1",
"nprogress": "^0.2.0",
"script-ext-html-webpack-plugin": "^2.1.4",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
......
module.exports = {
singleQuote: true,
semi: false
}
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
</template>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
<template>
<el-container>
<el-header>
<global-header />
</el-header>
<el-main class="content-container">
<div class="condition">condition</div>
<div class="content">
<router-view />
</div>
</el-main>
</el-container>
</template>
<script>
import GlobalHeader from './components/GlobalHeader'
export default {
name: 'BasicLayout',
components: { GlobalHeader }
}
</script>
<style lang="scss">
@import '~@/styles/variables.scss';
.content-container {
padding: 0;
}
.content {
margin: $headerHeight 165px 0;
background-color: #e9eef3;
color: #333;
text-align: center;
height: 100vh;
line-height: 160px;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 1);
transition: all 0.3s linear;
}
.condition {
width: 100%;
position: fixed;
top: $headerHeight;
height: 60px;
line-height: 60px;
background: #f0d;
text-align: center;
}
</style>
<template>
<el-container class="page-layout-container">
<el-header>
<!-- menu -->
<global-header />
</el-header>
<el-container class="main-container">
<!-- doing open/close -->
<!-- <div class="drawer-bg" /> -->
<el-aside width="200px">
<sidebar />
</el-aside>
<el-main class="main-content">Main</el-main>
</el-container>
</el-container>
</template>
<script>
import GlobalHeader from './components/GlobalHeader'
import Sidebar from './components/Sidebar'
export default {
name: 'PageLayout',
components: { GlobalHeader, Sidebar }
}
</script>
<style lang="scss" scoped>
.page-layout-container {
width: 100%;
height: 100%;
}
.main-container {
margin: 0 165px;
background-color: #e9eef3;
color: #333;
text-align: center;
height: 100vh;
line-height: 160px;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 1);
transition: all 0.3s linear;
}
</style>
<template>
<div class="layout-header">
<el-header class="platform-head fixed-header">
<div class="header-middle">
<!-- menu -->
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
>
<el-menu-item index="1">处理中心</el-menu-item>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
<el-menu-item index="3">消息中心</el-menu-item>
</el-menu>
</div>
<div class="header-left">logo</div>
<div class="header-right">right</div>
</el-header>
</div>
</template>
<script>
export default {
name: 'GlobalHeader',
data() {
return {
activeIndex: '1'
}
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath)
}
}
}
</script>
<style lang="scss" scoped>
.layout-header {
box-sizing: border-box;
flex: 0 0 auto;
}
.platform-head {
width: 100%;
background-color: #b3c0d1;
color: #fff;
height: 60px;
line-height: 60px;
padding: 0 500px 0 300px;
overflow: hidden;
&.fixed-header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
}
}
.header-middle {
position: relative;
float: left;
width: 100%;
height: 60px;
}
.header-left {
position: relative;
float: left;
width: 300px;
height: inherit;
left: -300px;
margin-left: -100%;
background: #f00;
text-align: center;
}
.header-right {
position: relative;
float: left;
width: 500px;
height: inherit;
right: -500px;
margin-left: -500px;
background: #00f;
text-align: center;
}
</style>
<template>
<div class="sidebar-container fixed-sidebar">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
:background-color="variables.menuBg"
:text-color="variables.menuText"
:active-text-color="variables.menuActiveText"
@open="handleOpen"
@close="handleClose"
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
import variables from '@/styles/variables.scss'
export default {
name: 'Sidebar',
computed: {
variables() {
return variables
}
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath)
},
handleClose(key, keyPath) {
console.log(key, keyPath)
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
@import '~@/styles/variables.scss';
.sidebar-container {
width: $sidebarWidth;
&.fixed-sidebar {
position: fixed;
top: 60px;
}
.el-menu-vertical-demo {
height: 100vh;
overflow: hidden;
}
}
</style>
import PageLayout from './PageLayout'
import BasicLayout from './BasicLayout'
export { PageLayout, BasicLayout }
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Vue from 'vue'
Vue.config.productionTip = false;
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'normalize.css/normalize.css'
import App from './App.vue'
import router from './router'
// import store from './store'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
router,
store,
// store,
render: h => h(App)
}).$mount("#app");
}).$mount('#app')
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
// layout
import { PageLayout, BasicLayout } from '../layouts'
const routes = [
Vue.use(VueRouter)
/**
* 基础路由
*/
export const constantRoutes = [
{
path: '/login',
name: 'Login',
component: () => import('@/views/login/index')
},
{
path: '/404',
component: () => import('@/views/error-page/404')
},
{
path: '/',
component: BasicLayout,
redirect: '/account',
children: [
{
path: "/",
name: "Home",
component: Home
path: 'account',
name: 'Account',
component: () => import('@/views/report/account/index'),
meta: {}
}
]
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
path: '/analysis',
component: PageLayout,
redirect: '/analysis/seqasis',
children: [
{
path: 'seqasis',
name: 'Seqasis',
component: () => import('@/views/analysis/seqasis/index'),
meta: {}
}
]
}
];
]
export const asyncRoutes = [
{
//
},
{ path: '*', redirect: '/404' }
]
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
// mode: 'history',
// base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
export default router;
export default router
// const reportRoutes = [
// {
// path: '/account',
// name: 'Account',
// meta: {},
// component: () => import('@/views/report/account/index')
// }
// ]
// cover elementui style
\ No newline at end of file
File mode changed
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
@mixin scrollbar {
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
// base color
$blue: #4bbeff;
// header
$headerHeight: 60px;
// sidebar
$menuText: #fff;
$menuActiveText: #3bb8ff;
$menuBg: #414755;
$menuHover: #28313d;
$sidebarWidth: 200px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
menuText: $menuText;
menuActiveText: $menuActiveText;
menuBg: $menuBg;
menuHover: $menuHover;
sidebarWidth: $sidebarWidth;
}
<template>
<div>seq analysis</div>
</template>
<template>
<div>404</div>
</template>
<script>
export default {
name: '404'
}
</script>
<template>
<div>Login</div>
</template>
<script>
export default {
name: 'Login'
}
</script>
<template>
<div>account</div>
</template>
<script>
export default {
name: 'Account'
}
</script>
'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const name = 'Bussiness Platform'
const port = process.env.port || process.env.npm_config_port || 8080
module.exports = {
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
}
},
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src')
}
}
},
chainWebpack(config) {
config.plugins.delete('preload')
config.plugins.delete('prefetch')
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.preserveWhitespace = true
return options
})
.end()
config.when(process.env.NODE_ENV !== 'development', config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [
{
inline: /runtime\..*\.js$/
}
])
.end()
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial'
},
elementUI: {
name: 'chunk-elementUI',
priority: 20,
test: /[\\/]node_modules[\\/]_?element-ui(.*)/
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'),
minChunks: 3,
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single')
})
}
}
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!