Skip to content

C
common-templete
Commit 2903a2ed by 汤强勇
Options

增加pug fontawesome 更新package.json

parent 7f697825
Showing with 376 additions and 94 deletions
build/webpack.base.conf.js
......@@ -51,6 +51,10 @@ module.exports = {
options: vueLoaderConfig,
},
{
test: /\.pug$/,
loader: 'pug'
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
......
package.json
......@@ -52,6 +52,9 @@
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"pug": "^2.0.3",
"pug-filters": "^3.1.0",
"pug-loader": "^2.4.0",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
......
src/App.vue
......@@ -12,3 +12,7 @@ export default {
<style>
</style>
<style lang="scss">
@import "~@/assets/font-awesome/scss/font-awesome.scss";
</style>
src/assets/font-awesome/fonts/fontawesome-webfont.svg 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/font-awesome/scss/_animated.scss 0 → 100644
// Spinning Icons
// --------------------------
.#{$fa-css-prefix}-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.#{$fa-css-prefix}-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
src/assets/font-awesome/scss/_bordered-pulled.scss 0 → 100644
// Bordered & Pulled
// -------------------------
.#{$fa-css-prefix}-border {
padding: .2em .25em .15em;
border: solid .08em $fa-border-color;
border-radius: .1em;
}
.#{$fa-css-prefix}-pull-left { float: left; }
.#{$fa-css-prefix}-pull-right { float: right; }
.#{$fa-css-prefix} {
&.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
&.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
}
/* Deprecated as of 4.4.0 */
.pull-right { float: right; }
.pull-left { float: left; }
.#{$fa-css-prefix} {
&.pull-left { margin-right: .3em; }
&.pull-right { margin-left: .3em; }
}
src/assets/font-awesome/scss/_core.scss 0 → 100644
// Base Class Definition
// -------------------------
.#{$fa-css-prefix} {
display: inline-block;
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
src/assets/font-awesome/scss/_fixed-width.scss 0 → 100644
// Fixed Width Icons
// -------------------------
.#{$fa-css-prefix}-fw {
width: (18em / 14);
text-align: center;
}
src/assets/font-awesome/scss/_larger.scss 0 → 100644
// Icon Sizes
// -------------------------
/* makes the font 33% larger relative to the icon container */
.#{$fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -15%;
}
.#{$fa-css-prefix}-2x { font-size: 2em; }
.#{$fa-css-prefix}-3x { font-size: 3em; }
.#{$fa-css-prefix}-4x { font-size: 4em; }
.#{$fa-css-prefix}-5x { font-size: 5em; }
src/assets/font-awesome/scss/_list.scss 0 → 100644
// List Icons
// -------------------------
.#{$fa-css-prefix}-ul {
padding-left: 0;
margin-left: $fa-li-width;
list-style-type: none;
> li { position: relative; }
}
.#{$fa-css-prefix}-li {
position: absolute;
left: -$fa-li-width;
width: $fa-li-width;
top: (2em / 14);
text-align: center;
&.#{$fa-css-prefix}-lg {
left: -$fa-li-width + (4em / 14);
}
}
src/assets/font-awesome/scss/_mixins.scss 0 → 100644
// Mixins
// --------------------------
@mixin fa-icon() {
display: inline-block;
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@mixin fa-icon-rotate($degrees, $rotation) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
-webkit-transform: rotate($degrees);
-ms-transform: rotate($degrees);
transform: rotate($degrees);
}
@mixin fa-icon-flip($horiz, $vert, $rotation) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
-webkit-transform: scale($horiz, $vert);
-ms-transform: scale($horiz, $vert);
transform: scale($horiz, $vert);
}
// Only display content to screen readers. A la Bootstrap 4.
//
// See: http://a11yproject.com/posts/how-to-hide-content/
@mixin sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate
@mixin sr-only-focusable {
&:active,
&:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
}
src/assets/font-awesome/scss/_path.scss 0 → 100644
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
// src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
font-weight: normal;
font-style: normal;
}
src/assets/font-awesome/scss/_rotated-flipped.scss 0 → 100644
// Rotated & Flipped Icons
// -------------------------
.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); }
.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); }
// Hook for IE8-9
// -------------------------
:root .#{$fa-css-prefix}-rotate-90,
:root .#{$fa-css-prefix}-rotate-180,
:root .#{$fa-css-prefix}-rotate-270,
:root .#{$fa-css-prefix}-flip-horizontal,
:root .#{$fa-css-prefix}-flip-vertical {
filter: none;
}
src/assets/font-awesome/scss/_screen-reader.scss 0 → 100644
// Screen Readers
// -------------------------
.sr-only { @include sr-only(); }
.sr-only-focusable { @include sr-only-focusable(); }
src/assets/font-awesome/scss/_stacked.scss 0 → 100644
// Stacked Icons
// -------------------------
.#{$fa-css-prefix}-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.#{$fa-css-prefix}-stack-1x { line-height: inherit; }
.#{$fa-css-prefix}-stack-2x { font-size: 2em; }
.#{$fa-css-prefix}-inverse { color: $fa-inverse; }
src/assets/font-awesome/scss/font-awesome.scss 0 → 100644
/*!
* Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "animated";
@import "rotated-flipped";
@import "stacked";
@import "icons";
@import "screen-reader";
src/components/Sidebar/index.vue
<template>
<div class="sidebar">
<el-row>
<el-col :span="7">
<div class="sidebar-left" v-for="(item,index) in sidebarList" :key="item.routes.path">
<el-button @click="handleClick(index)" type="primary" icon="el-icon-service">{{index}}</el-button>
</div>
</el-col>
<el-col :span="16">
<el-menu :collapse-transition="false" class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" unique-opened :router="true">
<el-submenu :index="item.path" v-for="item in menus" :key="item.path">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{item.title}}</span>
</template>
<el-menu-item v-for="subItem in item.children" :key="subItem.path" :index="subItem.path">{{subItem.title}}</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</div>
<template lang='pug'>
.sidebar
.logo
img(':src'="logo")
.item('v-for'="item in menuList" ,':key'="item.id",'@click'='choseMenu(item)')
sidebar-item&attributes({
':icon':'item.ico',
':link':'item.link',
':type':'item.type',
':id':'item.id',
':name':'item.name',
':pid':'item.pid',
':grade':'item.grade',
':sort':'item.sort'
})
</template>
<script>
import sidebarItem from '../sidebarItem'
const logo = require('@/assets/images/sidebar/logo-blue.png')
export default {
data () {
return {
collapse: false,
currentRouteIndex: 0,
sidebarList: [
{
routes: [
{
path: 'home',
title: '首页'
}
]
},
{
routes: [
{
path: 'home',
title: '精准营销',
children: [
{
path: 'marketing',
title: '营销推送'
},
{
path: 'addmarketing',
title: '推送详情'
}
]
}
]
}
],
menus: []
logo,
menus: [],
menuList: []
}
},
computed: {
onRoutes (e) {
console.log(1)
return this.$route.path.replace('/', '')
}
components: {
sidebarItem
},
mounted () {
new this.$Http(true).get('/getMenus').then(res => {
this.menuList = res.data.data
})
},
computed: {},
created () {
this.menus = this.sidebarList[this.currentRouteIndex].routes
},
methods: {
handleClick (index) {
this.currentRouteIndex = index
this.menus = this.sidebarList[this.currentRouteIndex].routes
},
choseMenu (item) {
console.log(item)
}
}
}
</script>
<style lang="stylus" scoped>
.sidebar {
font-weight: lighter;
letter-spacing: 1px;
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
min-height: 720px;
width: 250px;
background-color: gray;
}
.sidebar-el-menu:not(.el-menu--collapse) {
width: 170px;
}
.sidebar
position fixed
left 0
top 0
bottom 0
width 70px
background #374a5e
.logo
text-overflow ellipsis
overflow hidden
font-weight 400
font-size 22px
width 100%
color #ECF0F1
line-height 59px
display block
height 65px
margin 10px auto
padding-left 5px
padding-top 5px
img
width 60px
.item
position relative
display block
cursor pointer
& + &
margin-bottom 6px
</style>
src/components/sidebarItem/index.vue 0 → 100644
<template lang="pug">
.sidebar-item(@click='clickItem()')
i(class='fa',':class'="icon")
br
span {{name}}
</template>
<script>
export default {
name: 'sidebarItem',
data () {
return {}
},
props: ['icon', 'link', 'type', 'id', 'sort', 'name', 'pid', 'grade'],
methods: {
clickItem () {
console.log('click item')
}
}
}
</script>
<style lang="stylus" scoped>
.sidebar-item
display block
color: #fff
text-align center
font-weight 400
font-size 10px
padding 10px 5px
i
margin-bottom 5px
.fa
font-size 25px
</style>
src/http/index.js deleted 100644 → 0
import userApi from './user'
import orderApi from './order'
import returnOrderApi from './returnOrder'
import OrderConfigApi from './orderConfig'
export const user = userApi
export const order = orderApi
export const returnOrder = returnOrderApi
export const orderConfig = OrderConfigApi
src/main.js
......@@ -8,9 +8,9 @@ import './assets/styles/reset.css'
import 'element-ui/lib/theme-chalk/index.css'
import Axios from 'axios'
import * as filters from './filters'
import { http } from './plugin'
Vue.use(ElementUI)
Vue.use(http)
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
......
src/http/baseHttp.js → src/plugin/http/baseHttp.js
import axios from 'axios'
// import qs from 'qs'
import store from '@/store'
import config from '../config'
import config from '../../config/index'
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
......@@ -32,6 +32,10 @@ const api = axios.create({
baseURL: config.base
})
const mockApi = axios.create({
baseURL: 'http://rap2api.taobao.org/app/mock/115626'
})
api.interceptors.request.use(function (config) {
store.dispatch('show_loading')
// Do something before request is sent
......@@ -60,22 +64,23 @@ api.interceptors.response.use(function (response) {
// api.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
class BaseHttpServer {
constructor (url) {
if (url) {
this.baseUrl = url
constructor (mock = false) {
if (mock) {
this.api = mockApi
} else {
this.api = api
}
this.api = api
}
get (url, params) {
return this.api.get(`${this.baseUrl}/${url}`, { params })
return this.api.get(`${url}`, { params })
.catch((error) => {
console.log(error)
})
}
post (url, params) {
return this.api.post(`${this.baseUrl}/${url}`, params)
return this.api.post(`/${url}`, params)
.catch((error) => {
console.log(error)
})
......
src/plugin/http/index.js 0 → 100644
import { Http } from './baseHttp'
class HttpService {
install (Vue, options) {
// 4. 添加实例方法
Vue.prototype.$Http = Http
}
}
export default new HttpService()
src/plugin/index.js
import momentPlugin from './moment'
import validate from './validate'
import utils from './underscore'
import http from './http'
export {
momentPlugin,
utils,
validate
http
}
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
......
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