refine icon-svg
This commit is contained in:
Pan
parent
9342ae6fc3
commit
622a8c3a69
|
|
@ -1,11 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
function registerAllComponents(requireContext) {
|
||||
return requireContext.keys().forEach(comp => {
|
||||
const vueComp = requireContext(comp)
|
||||
const compName = vueComp.name ? vueComp.name.toLowerCase() : /\/([\w-]+)\.vue$/.exec(comp)[1]
|
||||
Vue.component(compName, vueComp)
|
||||
})
|
||||
}
|
||||
|
||||
registerAllComponents(require.context('./', false, /\.vue$/))
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<svg class="wscn-icon" aria-hidden="true">
|
||||
<svg class="svg-icon" aria-hidden="true">
|
||||
<use :xlink:href="iconName"></use>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'wscn-icon-svg',
|
||||
name: 'icon-svg',
|
||||
props: {
|
||||
iconClass: {
|
||||
type: String,
|
||||
|
|
@ -20,7 +20,3 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
<template>
|
||||
<div class="icon-container" :style="containerStyle">
|
||||
<slot class="icon"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'wscn-icon-stack',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'circle',
|
||||
validator: val => {
|
||||
const validShapes = ['circle', 'square']
|
||||
return validShapes.indexOf(val) > -1
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerStyle() {
|
||||
return {
|
||||
width: `${this.width}px`,
|
||||
height: `${this.width}px`,
|
||||
fontSize: `${this.width * 0.6}px`,
|
||||
borderRadius: `${this.shape === 'circle' && '50%'}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-container {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #1482F0;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
color: #ffffff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,19 +10,21 @@ import 'assets/custom-theme/index.css'; // 换肤版本element-ui css
|
|||
import NProgress from 'nprogress'; // Progress 进度条
|
||||
import 'nprogress/nprogress.css';// Progress 进度条 样式
|
||||
import 'normalize.css/normalize.css';// normalize.css 样式格式化
|
||||
import 'components/Icon-svg/index'; // 封装的svg组件
|
||||
import 'assets/iconfont/iconfont'; // iconfont 具体图标见https://github.com/PanJiaChen/vue-element-admin/wiki
|
||||
import * as filters from './filters'; // 全局vue filter
|
||||
import Multiselect from 'vue-multiselect';// 使用的一个多选框组件，element-ui的select不能满足所有需求
|
||||
import 'vue-multiselect/dist/vue-multiselect.min.css';// 多选框组件css
|
||||
import Sticky from 'components/Sticky'; // 粘性header组件
|
||||
import IconSvg from 'components/Icon-svg';// svg 组件
|
||||
import vueWaves from './directive/waves';// 水波纹指令
|
||||
import errLog from 'store/errLog';// error log组件
|
||||
import './mock/index.js'; // 该项目所有请求使用mockjs模拟
|
||||
|
||||
|
||||
// register globally
|
||||
Vue.component('multiselect', Multiselect);
|
||||
Vue.component('Sticky', Sticky);
|
||||
Vue.component('icon-svg', IconSvg)
|
||||
Vue.use(ElementUI);
|
||||
Vue.use(vueWaves);
|
||||
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ code {
|
|||
.text-center{
|
||||
text-align: center
|
||||
}
|
||||
.wscn-icon {
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
<a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 50px; border: 0; right: 0;"
|
||||
aria-hidden="true">
|
||||
|
|
@ -11,7 +10,6 @@
|
|||
fill="currentColor" class="octo-body"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<el-row class="btn-group">
|
||||
<el-col :span="4" class='text-center'>
|
||||
<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
|
||||
|
|
@ -38,19 +36,19 @@
|
|||
<el-card class="box-card">
|
||||
<div slot="header" class="box-card-header">
|
||||
<pan-thumb class="panThumb" :image="avatar"> 你的权限:
|
||||
<span class="pan-info-roles" v-for="item in roles">{{item}}</span>
|
||||
<span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
|
||||
</pan-thumb>
|
||||
</div>
|
||||
<span class="display_name">{{name}}</span>
|
||||
<div class="info-item">
|
||||
<countTo class="info-item-num" :startVal='0' :endVal='statisticsData.article_count' :duration='3400'></countTo>
|
||||
<span class="info-item-text">文章</span>
|
||||
<wscn-icon-svg icon-class="a" class="dashboard-editor-icon" />
|
||||
<icon-svg icon-class="a" class="dashboard-editor-icon"></icon-svg>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<countTo class="info-item-num" :startVal='0' :endVal='statisticsData.pageviews_count' :duration='3600'></countTo>
|
||||
<span class="info-item-text">浏览量</span>
|
||||
<wscn-icon-svg icon-class="b" class="dashboard-editor-icon" />
|
||||
<icon-svg icon-class="b" class="dashboard-editor-icon"></icon-svg>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<el-table-column width="80px" label="重要性">
|
||||
<template scope="scope">
|
||||
<wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
|
||||
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n"></icon-svg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<el-table-column width="80px" label="重要性">
|
||||
<template scope="scope">
|
||||
<wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
|
||||
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n"></icon-svg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
<el-table-column align="center" label="拖拽" width="95">
|
||||
<template scope="scope">
|
||||
<wscn-icon-svg class='drag-handler' icon-class="tuozhuai" />
|
||||
<icon-svg class='drag-handler' icon-class="tuozhuai" ></icon-svg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
<el-table-column width="100px" label="重要性">
|
||||
<template scope="scope">
|
||||
<wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
|
||||
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" ></icon-svg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
<el-table-column width="80px" label="重要性">
|
||||
<template scope="scope">
|
||||
<wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
|
||||
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" ></icon-svg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
<template v-for="item in routes">
|
||||
<router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
|
||||
<el-menu-item :index="item.path+'/'+item.children[0].path">
|
||||
<wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
|
||||
<icon-svg v-if='item.icon' :icon-class="item.icon" ></icon-svg>{{item.children[0].name}}
|
||||
</el-menu-item>
|
||||
</router-link>
|
||||
<el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
|
||||
<template slot="title">
|
||||
<wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
|
||||
<icon-svg v-if='item.icon' :icon-class="item.icon" ></icon-svg> {{item.name}}
|
||||
</template>
|
||||
<template v-for="child in item.children" v-if='!child.hidden'>
|
||||
<sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.wscn-icon {
|
||||
.svg-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.hideSidebar .menu-indent{
|
||||
|
|
|
|||
|
|
@ -1,32 +1,30 @@
|
|||
<template>
|
||||
<div class="login-container">
|
||||
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
|
||||
label-width="0px"
|
||||
class="card-box login-form">
|
||||
<h3 class="title">系统登录</h3>
|
||||
<el-form-item prop="email">
|
||||
<span class="svg-container"><wscn-icon-svg icon-class="jiedianyoujian"/></span>
|
||||
<el-input name="email" type="text" v-model="loginForm.email" autoComplete="on"
|
||||
placeholder="邮箱"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<span class="svg-container"><wscn-icon-svg icon-class="mima"/></span>
|
||||
<el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password"
|
||||
autoComplete="on" placeholder="密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
|
||||
<div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div>
|
||||
</el-form>
|
||||
<el-dialog title="第三方验证" :visible.sync="showDialog">
|
||||
邮箱登录成功,请选择第三方验证
|
||||
<socialSign></socialSign>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
|
||||
class="card-box login-form">
|
||||
<h3 class="title">系统登录</h3>
|
||||
<el-form-item prop="email">
|
||||
<span class="svg-container"><icon-svg icon-class="jiedianyoujian"></icon-svg></span>
|
||||
<el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<span class="svg-container"><icon-svg icon-class="mima"></icon-svg></span>
|
||||
<el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
|
||||
placeholder="密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
|
||||
<div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div>
|
||||
</el-form>
|
||||
<el-dialog title="第三方验证" :visible.sync="showDialog">
|
||||
邮箱登录成功,请选择第三方验证
|
||||
<socialSign></socialSign>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
<template>
|
||||
<div class="social-signup-container">
|
||||
<div class="sign-btn" @click="wechatHandleClick('wechat')">
|
||||
<span class="wx-svg-container"><wscn-icon-svg icon-class="weixin" class="icon"/></span>
|
||||
微信
|
||||
<span class="wx-svg-container"><icon-svg icon-class="weixin" class="icon"></icon-svg></span> 微信
|
||||
</div>
|
||||
<div class="sign-btn" @click="tencentHandleClick('tencent')">
|
||||
<span class="qq-svg-container"><wscn-icon-svg icon-class="QQ" class="icon"/></span>
|
||||
QQ
|
||||
<span class="qq-svg-container"><icon-svg icon-class="QQ" class="icon"></icon-svg></span> QQ
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue