Compare commits
19 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
7003a79ef6 | ||
|
|
c5faa63ee5 | ||
|
d29a9486a2 | ||
|
01442ce4d7 | ||
|
|
f28a7149fb | ||
|
|
51ad902d8f | ||
|
3cff6dcf4c | ||
|
|
afe975b3c2 | ||
|
|
d0eebf83c4 | ||
|
|
a55b149b27 | ||
|
|
fc19121311 | ||
|
|
de06619266 | ||
|
88c28f5d7e | ||
|
|
26b84847dd | ||
|
|
3cc3e134c2 | ||
|
|
2afb1dfabb | ||
|
|
5fe3d70246 | ||
|
|
4aa9345d90 | ||
|
0fcbf4b53b |
32
README.md
32
README.md
@@ -3,21 +3,21 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://github.com/vuejs/vue">
|
<a href="https://github.com/vuejs/vue">
|
||||||
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
|
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/ElemeFE/element">
|
<a href="https://github.com/ElemeFE/element">
|
||||||
<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
|
<img src="https://img.shields.io/badge/element--ui-2.3.0-brightgreen.svg" alt="element-ui">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
|
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
|
||||||
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
|
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
|
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
|
||||||
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
|
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
|
||||||
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
|
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
English | [简体中文](./README.zh-CN.md)
|
English | [简体中文](./README.zh-CN.md)
|
||||||
@@ -39,7 +39,7 @@ English | [简体中文](./README.zh-CN.md)
|
|||||||
- Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)
|
- Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)
|
||||||
- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||||
|
|
||||||
**Note: This project uses element-ui@2.0.0+ version, so the minimum compatible vue@2.5.0+**
|
**Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**
|
||||||
|
|
||||||
## Preparation
|
## Preparation
|
||||||
|
|
||||||
|
|||||||
@@ -3,21 +3,21 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://github.com/vuejs/vue">
|
<a href="https://github.com/vuejs/vue">
|
||||||
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
|
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/ElemeFE/element">
|
<a href="https://github.com/ElemeFE/element">
|
||||||
<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
|
<img src="https://img.shields.io/badge/element--ui-2.3.0-brightgreen.svg" alt="element-ui">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
|
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
|
||||||
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
|
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
|
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
|
||||||
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
|
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
|
||||||
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
|
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
简体中文 | [English](./README.md)
|
简体中文 | [English](./README.md)
|
||||||
@@ -38,7 +38,7 @@
|
|||||||
- 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)
|
- 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)
|
||||||
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||||
|
|
||||||
**注意：该项目使用 element-ui@2.0.0+ 版本，所以最低兼容 vue@2.5.0+**
|
**注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+**
|
||||||
|
|
||||||
## 前序准备
|
## 前序准备
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
NODE_ENV: '"development"',
|
NODE_ENV: '"development"',
|
||||||
ENV_CONFIG: '"dev"',
|
ENV_CONFIG: '"dev"',
|
||||||
BASE_API: '"https://api-dev"'
|
BASE_API: '"https://api-dev"'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
NODE_ENV: '"production"',
|
NODE_ENV: '"production"',
|
||||||
ENV_CONFIG: '"prod"',
|
ENV_CONFIG: '"prod"',
|
||||||
BASE_API: '"https://api-prod"'
|
BASE_API: '"https://api-prod"'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
NODE_ENV: '"production"',
|
NODE_ENV: '"production"',
|
||||||
ENV_CONFIG: '"sit"',
|
ENV_CONFIG: '"sit"',
|
||||||
BASE_API: '"https://api-sit"'
|
BASE_API: '"https://api-sit"'
|
||||||
}
|
}
|
||||||
|
|||||||
24
index.html
24
index.html
@@ -1,15 +1,15 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
<meta name="renderer" content="webkit">
|
<meta name="renderer" content="webkit">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
<title>vue-element-admin</title>
|
<title>vue-element-admin</title>
|
||||||
</head>
|
</head>
|
||||||
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
|
<body>
|
||||||
<body>
|
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vue-element-admin",
|
"name": "vue-element-admin",
|
||||||
"version": "3.6.3",
|
"version": "3.6.5",
|
||||||
"description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
|
"description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
|
||||||
"author": "Pan <panfree23@gmail.com>",
|
"author": "Pan <panfree23@gmail.com>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
"codemirror": "5.32.0",
|
"codemirror": "5.32.0",
|
||||||
"dropzone": "5.2.0",
|
"dropzone": "5.2.0",
|
||||||
"echarts": "3.8.5",
|
"echarts": "3.8.5",
|
||||||
"element-ui": "2.0.8",
|
"element-ui": "2.3.2",
|
||||||
"file-saver": "1.3.3",
|
"file-saver": "1.3.3",
|
||||||
"font-awesome": "4.7.0",
|
"font-awesome": "4.7.0",
|
||||||
"js-cookie": "2.2.0",
|
"js-cookie": "2.2.0",
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -25,14 +25,16 @@ export default {
|
|||||||
},
|
},
|
||||||
customStyle: {
|
customStyle: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: {
|
default: function() {
|
||||||
right: '50px',
|
return {
|
||||||
bottom: '50px',
|
right: '50px',
|
||||||
width: '40px',
|
bottom: '50px',
|
||||||
height: '40px',
|
width: '40px',
|
||||||
'border-radius': '4px',
|
height: '40px',
|
||||||
'line-height': '45px',
|
'border-radius': '4px',
|
||||||
background: '#e7eaf1'
|
'line-height': '45px',
|
||||||
|
background: '#e7eaf1'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
transitionName: {
|
transitionName: {
|
||||||
|
|||||||
@@ -30,16 +30,16 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.hamburger {
|
.hamburger {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
transition: .38s;
|
transition: .38s;
|
||||||
transform-origin: 50% 50%;
|
transform-origin: 50% 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hamburger.is-active {
|
.hamburger.is-active {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,104 +1,104 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="vue-image-crop-upload" v-show="value">
|
<div class="vue-image-crop-upload" v-show="value">
|
||||||
<div class="vicp-wrap">
|
<div class="vicp-wrap">
|
||||||
<div class="vicp-close" @click="off">
|
<div class="vicp-close" @click="off">
|
||||||
<i class="vicp-icon4"></i>
|
<i class="vicp-icon4"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vicp-step1" v-show="step == 1">
|
<div class="vicp-step1" v-show="step == 1">
|
||||||
<div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
|
<div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
|
||||||
<i class="vicp-icon1" v-show="loading != 1">
|
<i class="vicp-icon1" v-show="loading != 1">
|
||||||
<i class="vicp-icon1-arrow"></i>
|
<i class="vicp-icon1-arrow"></i>
|
||||||
<i class="vicp-icon1-body"></i>
|
<i class="vicp-icon1-body"></i>
|
||||||
<i class="vicp-icon1-bottom"></i>
|
<i class="vicp-icon1-bottom"></i>
|
||||||
</i>
|
</i>
|
||||||
<span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span>
|
<span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span>
|
||||||
<span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span>
|
<span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span>
|
||||||
<input type="file" v-show="false" v-if="step == 1" @change="handleChange" ref="fileinput">
|
<input type="file" v-show="false" v-if="step == 1" @change="handleChange" ref="fileinput">
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-error" v-show="hasError">
|
<div class="vicp-error" v-show="hasError">
|
||||||
<i class="vicp-icon2"></i> {{ errorMsg }}
|
<i class="vicp-icon2"></i> {{ errorMsg }}
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-operate">
|
<div class="vicp-operate">
|
||||||
<a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
|
<a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vicp-step2" v-if="step == 2">
|
<div class="vicp-step2" v-if="step == 2">
|
||||||
<div class="vicp-crop">
|
<div class="vicp-crop">
|
||||||
<div class="vicp-crop-left" v-show="true">
|
<div class="vicp-crop-left" v-show="true">
|
||||||
<div class="vicp-img-container">
|
<div class="vicp-img-container">
|
||||||
<img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false"
|
<img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false"
|
||||||
@drag="preventDefault"
|
@drag="preventDefault"
|
||||||
@dragstart="preventDefault"
|
@dragstart="preventDefault"
|
||||||
@dragend="preventDefault"
|
@dragend="preventDefault"
|
||||||
@dragleave="preventDefault"
|
@dragleave="preventDefault"
|
||||||
@dragover="preventDefault"
|
@dragover="preventDefault"
|
||||||
@dragenter="preventDefault"
|
@dragenter="preventDefault"
|
||||||
@drop="preventDefault"
|
@drop="preventDefault"
|
||||||
@touchstart="imgStartMove"
|
@touchstart="imgStartMove"
|
||||||
@touchmove="imgMove"
|
@touchmove="imgMove"
|
||||||
@touchend="createImg"
|
@touchend="createImg"
|
||||||
@touchcancel="createImg"
|
@touchcancel="createImg"
|
||||||
@mousedown="imgStartMove"
|
@mousedown="imgStartMove"
|
||||||
@mousemove="imgMove"
|
@mousemove="imgMove"
|
||||||
@mouseup="createImg"
|
@mouseup="createImg"
|
||||||
@mouseout="createImg"
|
@mouseout="createImg"
|
||||||
ref="img">
|
ref="img">
|
||||||
<div class="vicp-img-shade vicp-img-shade-1" :style="sourceImgShadeStyle"></div>
|
<div class="vicp-img-shade vicp-img-shade-1" :style="sourceImgShadeStyle"></div>
|
||||||
<div class="vicp-img-shade vicp-img-shade-2" :style="sourceImgShadeStyle"></div>
|
<div class="vicp-img-shade vicp-img-shade-2" :style="sourceImgShadeStyle"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vicp-range">
|
<div class="vicp-range">
|
||||||
<input type="range" :value="scale.range" step="1" min="0" max="100" @input="zoomChange">
|
<input type="range" :value="scale.range" step="1" min="0" max="100" @input="zoomChange">
|
||||||
<i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="vicp-icon5"></i>
|
<i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="vicp-icon5"></i>
|
||||||
<i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i>
|
<i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vicp-rotate" v-if="!noRotate">
|
<div class="vicp-rotate" v-if="!noRotate">
|
||||||
<i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i>
|
<i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i>
|
||||||
<i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
|
<i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-crop-right" v-show="true">
|
<div class="vicp-crop-right" v-show="true">
|
||||||
<div class="vicp-preview">
|
<div class="vicp-preview">
|
||||||
<div class="vicp-preview-item" v-if="!noSquare">
|
<div class="vicp-preview-item" v-if="!noSquare">
|
||||||
<img :src="createImgUrl" :style="previewStyle">
|
<img :src="createImgUrl" :style="previewStyle">
|
||||||
<span>{{ lang.preview }}</span>
|
<span>{{ lang.preview }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle">
|
<div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle">
|
||||||
<img :src="createImgUrl" :style="previewStyle">
|
<img :src="createImgUrl" :style="previewStyle">
|
||||||
<span>{{ lang.preview }}</span>
|
<span>{{ lang.preview }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-operate">
|
<div class="vicp-operate">
|
||||||
<a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
|
<a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
|
||||||
<a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
|
<a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vicp-step3" v-if="step == 3">
|
<div class="vicp-step3" v-if="step == 3">
|
||||||
<div class="vicp-upload">
|
<div class="vicp-upload">
|
||||||
<span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
|
<span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
|
||||||
<div class="vicp-progress-wrap">
|
<div class="vicp-progress-wrap">
|
||||||
<span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
|
<span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-error" v-show="hasError">
|
<div class="vicp-error" v-show="hasError">
|
||||||
<i class="vicp-icon2"></i> {{ errorMsg }}
|
<i class="vicp-icon2"></i> {{ errorMsg }}
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-success" v-show="loading === 2">
|
<div class="vicp-success" v-show="loading === 2">
|
||||||
<i class="vicp-icon3"></i> {{ lang.success }}
|
<i class="vicp-icon3"></i> {{ lang.success }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-operate">
|
<div class="vicp-operate">
|
||||||
<a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
|
<a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
|
||||||
<a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
|
<a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
|
<canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -395,6 +395,7 @@ export default {
|
|||||||
off() {
|
off() {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.$emit('input', false)
|
this.$emit('input', false)
|
||||||
|
this.$emit('close')
|
||||||
if (this.step == 3 && this.loading == 2) {
|
if (this.step == 3 && this.loading == 2) {
|
||||||
this.setStep(1)
|
this.setStep(1)
|
||||||
}
|
}
|
||||||
@@ -408,7 +409,7 @@ export default {
|
|||||||
}, 200)
|
}, 200)
|
||||||
},
|
},
|
||||||
/* 图片选择区域函数绑定
|
/* 图片选择区域函数绑定
|
||||||
---------------------------------------------------------------*/
|
---------------------------------------------------------------*/
|
||||||
preventDefault(e) {
|
preventDefault(e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
return false
|
return false
|
||||||
@@ -588,7 +589,7 @@ export default {
|
|||||||
scale.x = rX
|
scale.x = rX
|
||||||
scale.y = rY
|
scale.y = rY
|
||||||
},
|
},
|
||||||
// 按钮按下开始向右旋转
|
// 按钮按下开始向右旋转
|
||||||
startRotateRight(e) {
|
startRotateRight(e) {
|
||||||
let that = this,
|
let that = this,
|
||||||
{
|
{
|
||||||
@@ -736,7 +737,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}, 300)
|
}, 300)
|
||||||
},
|
},
|
||||||
// 生成需求图片
|
// 生成需求图片
|
||||||
createImg(e) {
|
createImg(e) {
|
||||||
let that = this,
|
let that = this,
|
||||||
{
|
{
|
||||||
@@ -1131,9 +1132,9 @@ export default {
|
|||||||
appearance: none;
|
appearance: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
/* 滑块
|
/* 滑块
|
||||||
---------------------------------------------------------------*/
|
---------------------------------------------------------------*/
|
||||||
/* 轨道
|
/* 轨道
|
||||||
---------------------------------------------------------------*/ }
|
---------------------------------------------------------------*/ }
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
|
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
|
||||||
outline: none; }
|
outline: none; }
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb {
|
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb {
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
|
<div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
|
||||||
<div class="pan-info">
|
<div class="pan-info">
|
||||||
<div class="pan-info-roles-container">
|
<div class="pan-info-roles-container">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img class="pan-thumb" :src="image">
|
<img class="pan-thumb" :src="image">
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -19,7 +19,7 @@ export default {
|
|||||||
},
|
},
|
||||||
zIndex: {
|
zIndex: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 100
|
default: 1
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -35,106 +35,106 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.pan-item {
|
.pan-item {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info-roles-container {
|
.pan-info-roles-container {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-thumb {
|
.pan-thumb {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform-origin: 95% 40%;
|
transform-origin: 95% 40%;
|
||||||
transition: all 0.3s ease-in-out;
|
transition: all 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-thumb:after {
|
.pan-thumb:after {
|
||||||
content: '';
|
content: '';
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
top: 40%;
|
top: 40%;
|
||||||
left: 95%;
|
left: 95%;
|
||||||
margin: -4px 0 0 -4px;
|
margin: -4px 0 0 -4px;
|
||||||
background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
|
background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
|
||||||
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
|
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info {
|
.pan-info {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
|
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info h3 {
|
.pan-info h3 {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
position: relative;
|
position: relative;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
margin: 0 60px;
|
margin: 0 60px;
|
||||||
padding: 22px 0 0 0;
|
padding: 22px 0 0 0;
|
||||||
height: 85px;
|
height: 85px;
|
||||||
font-family: 'Open Sans', Arial, sans-serif;
|
font-family: 'Open Sans', Arial, sans-serif;
|
||||||
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
|
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info p {
|
.pan-info p {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 10px 5px;
|
padding: 10px 5px;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
margin: 0 30px;
|
margin: 0 30px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info p a {
|
.pan-info p a {
|
||||||
display: block;
|
display: block;
|
||||||
color: #333;
|
color: #333;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: rgba(255, 255, 255, 0.3);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
padding-top: 24px;
|
padding-top: 24px;
|
||||||
margin: 7px auto 0;
|
margin: 7px auto 0;
|
||||||
font-family: 'Open Sans', Arial, sans-serif;
|
font-family: 'Open Sans', Arial, sans-serif;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
|
transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
|
||||||
transform: translateX(60px) rotate(90deg);
|
transform: translateX(60px) rotate(90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info p a:hover {
|
.pan-info p a:hover {
|
||||||
background: rgba(255, 255, 255, 0.5);
|
background: rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-item:hover .pan-thumb {
|
.pan-item:hover .pan-thumb {
|
||||||
transform: rotate(-110deg);
|
transform: rotate(-110deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-item:hover .pan-info p a {
|
.pan-item:hover .pan-info p a {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateX(0px) rotate(0deg);
|
transform: translateX(0px) rotate(0deg);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -153,7 +153,10 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.tinymce-container {
|
.tinymce-container {
|
||||||
position: relative
|
position: relative;
|
||||||
|
}
|
||||||
|
.tinymce-container>>>.mce-fullscreen {
|
||||||
|
z-index: 10000;
|
||||||
}
|
}
|
||||||
.tinymce-textarea {
|
.tinymce-textarea {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|||||||
@@ -2,6 +2,6 @@
|
|||||||
// Detail plugins list see https://www.tinymce.com/docs/plugins/
|
// Detail plugins list see https://www.tinymce.com/docs/plugins/
|
||||||
// Custom builds see https://www.tinymce.com/download/custom-builds/
|
// Custom builds see https://www.tinymce.com/download/custom-builds/
|
||||||
|
|
||||||
const plugins = ['advlist anchor autolink autoresize autosave bbcode code codesample colorpicker colorpicker contextmenu directionality emoticons fullpage fullscreen hr image imagetools importcss insertdatetime legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
|
const plugins = ['advlist anchor autolink autoresize autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullpage fullscreen hr image imagetools importcss insertdatetime legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
|
||||||
|
|
||||||
export default plugins
|
export default plugins
|
||||||
|
|||||||
@@ -1,19 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="singleImageUpload2 upload-container">
|
<div class="singleImageUpload2 upload-container">
|
||||||
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
|
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
|
||||||
:on-success="handleImageScucess">
|
:on-success="handleImageScucess">
|
||||||
<i class="el-icon-upload"></i>
|
<i class="el-icon-upload"></i>
|
||||||
<div class="el-upload__text">Drag或<em>点击上传</em></div>
|
<div class="el-upload__text">Drag或<em>点击上传</em></div>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<div v-show="imageUrl.length>0" class="image-preview">
|
<div v-show="imageUrl.length>0" class="image-preview">
|
||||||
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
||||||
<img :src="imageUrl">
|
<img :src="imageUrl">
|
||||||
<div class="image-preview-action">
|
<div class="image-preview-action">
|
||||||
<i @click="rmImage" class="el-icon-delete"></i>
|
<i @click="rmImage" class="el-icon-delete"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -66,53 +66,53 @@ export default {
|
|||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
.upload-container {
|
.upload-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
.image-uploader {
|
.image-uploader {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.image-preview {
|
.image-preview {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
border: 1px dashed #d9d9d9;
|
border: 1px dashed #d9d9d9;
|
||||||
.image-preview-wrapper {
|
.image-preview-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
background-color: rgba(0, 0, 0, .5);
|
background-color: rgba(0, 0, 0, .5);
|
||||||
transition: opacity .3s;
|
transition: opacity .3s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 200px;
|
line-height: 200px;
|
||||||
.el-icon-delete {
|
.el-icon-delete {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,34 +1,34 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="upload-container">
|
<div class="upload-container">
|
||||||
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
|
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
|
||||||
:on-success="handleImageScucess">
|
:on-success="handleImageScucess">
|
||||||
<i class="el-icon-upload"></i>
|
<i class="el-icon-upload"></i>
|
||||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<div class="image-preview image-app-preview">
|
<div class="image-preview image-app-preview">
|
||||||
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
||||||
<img :src="imageUrl">
|
<img :src="imageUrl">
|
||||||
<div class="image-preview-action">
|
<div class="image-preview-action">
|
||||||
<i @click="rmImage" class="el-icon-delete"></i>
|
<i @click="rmImage" class="el-icon-delete"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="image-preview">
|
<div class="image-preview">
|
||||||
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
||||||
<img :src="imageUrl">
|
<img :src="imageUrl">
|
||||||
<div class="image-preview-action">
|
<div class="image-preview-action">
|
||||||
<i @click="rmImage" class="el-icon-delete"></i>
|
<i @click="rmImage" class="el-icon-delete"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getToken } from '@/api/qiniu'
|
import { getToken } from '@/api/qiniu'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'singleImageUpload',
|
name: 'singleImageUpload3',
|
||||||
props: {
|
props: {
|
||||||
value: String
|
value: String
|
||||||
},
|
},
|
||||||
@@ -76,70 +76,70 @@ export default {
|
|||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
@import "src/styles/mixin.scss";
|
@import "src/styles/mixin.scss";
|
||||||
.upload-container {
|
.upload-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
.image-uploader {
|
.image-uploader {
|
||||||
width: 35%;
|
width: 35%;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
.image-preview {
|
.image-preview {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px dashed #d9d9d9;
|
border: 1px dashed #d9d9d9;
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
.image-preview-wrapper {
|
.image-preview-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
background-color: rgba(0, 0, 0, .5);
|
background-color: rgba(0, 0, 0, .5);
|
||||||
transition: opacity .3s;
|
transition: opacity .3s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 200px;
|
line-height: 200px;
|
||||||
.el-icon-delete {
|
.el-icon-delete {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.image-app-preview {
|
.image-app-preview {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
height: 180px;
|
height: 180px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px dashed #d9d9d9;
|
border: 1px dashed #d9d9d9;
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
.app-fake-conver {
|
.app-fake-conver {
|
||||||
height: 44px;
|
height: 44px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%; // background: rgba(0, 0, 0, .1);
|
width: 100%; // background: rgba(0, 0, 0, .1);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 64px;
|
line-height: 64px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<input id="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
|
<input id="excel-upload-input" ref="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
|
||||||
<div id="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
|
<div id="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
|
||||||
Drop excel file here or
|
Drop excel file here or
|
||||||
<el-button style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">browse</el-button>
|
<el-button style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">browse</el-button>
|
||||||
@@ -51,7 +51,9 @@ export default {
|
|||||||
handkeFileChange(e) {
|
handkeFileChange(e) {
|
||||||
const files = e.target.files
|
const files = e.target.files
|
||||||
const itemFile = files[0] // only use files[0]
|
const itemFile = files[0] // only use files[0]
|
||||||
|
if (!itemFile) return
|
||||||
this.readerData(itemFile)
|
this.readerData(itemFile)
|
||||||
|
this.$refs['excel-upload-input'].value = null // fix can't select the same excel
|
||||||
},
|
},
|
||||||
readerData(itemFile) {
|
readerData(itemFile) {
|
||||||
const reader = new FileReader()
|
const reader = new FileReader()
|
||||||
|
|||||||
@@ -73,3 +73,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//dropdown
|
||||||
|
.el-dropdown-menu{
|
||||||
|
a{
|
||||||
|
display: block
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -2,18 +2,21 @@
|
|||||||
// 主体区域
|
// 主体区域
|
||||||
.main-container {
|
.main-container {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
transition: margin-left 0.28s;
|
transition: margin-left .28s;
|
||||||
margin-left: 180px;
|
margin-left: 180px;
|
||||||
} // 侧边栏
|
}
|
||||||
|
// 侧边栏
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
transition: width 0.28s;
|
transition: width .28s;
|
||||||
width: 180px!important;
|
width: 180px !important;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
font-size: 0px;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
|
overflow: hidden;
|
||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -23,78 +26,48 @@
|
|||||||
}
|
}
|
||||||
.el-menu {
|
.el-menu {
|
||||||
border: none;
|
border: none;
|
||||||
width: 100%;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.hideSidebar {
|
.hideSidebar {
|
||||||
.sidebar-container,.sidebar-container .el-menu {
|
.sidebar-container {
|
||||||
width: 36px!important;
|
width: 36px !important;
|
||||||
// overflow: inherit;
|
|
||||||
}
|
}
|
||||||
.main-container {
|
.main-container {
|
||||||
margin-left: 36px;
|
margin-left: 36px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.hideSidebar {
|
|
||||||
.submenu-title-noDropdown {
|
.submenu-title-noDropdown {
|
||||||
padding-left: 10px!important;
|
padding-left: 10px !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
span {
|
.el-tooltip {
|
||||||
height: 0;
|
padding: 0 10px !important;
|
||||||
width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
|
|
||||||
opacity: 0;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
border-radius: 3px;
|
|
||||||
z-index: 1002;
|
|
||||||
width: 140px;
|
|
||||||
height: 56px;
|
|
||||||
visibility: visible;
|
|
||||||
position: absolute;
|
|
||||||
right: -145px;
|
|
||||||
text-align: left;
|
|
||||||
text-indent: 20px;
|
|
||||||
top: 0px;
|
|
||||||
background-color: $subMenuBg!important;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-submenu {
|
.el-submenu {
|
||||||
&>.el-submenu__title {
|
&>.el-submenu__title {
|
||||||
padding-left: 10px!important;
|
padding-left: 10px !important;
|
||||||
&>span {
|
&>span {
|
||||||
display: none;
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
visibility: hidden;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.el-submenu__icon-arrow {
|
.el-submenu__icon-arrow {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.nest-menu {
|
|
||||||
.el-submenu__icon-arrow {
|
|
||||||
display: block!important;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
display: inline-block!important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.nest-menu .el-submenu>.el-submenu__title,
|
.nest-menu .el-submenu>.el-submenu__title,
|
||||||
.el-submenu .el-menu-item {
|
.el-submenu .el-menu-item {
|
||||||
min-width: 180px!important;
|
min-width: 180px !important;
|
||||||
background-color: $subMenuBg!important;
|
background-color: $subMenuBg !important;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $menuHover!important;
|
background-color: $menuHover !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-menu--collapse .el-menu .el-submenu{
|
.el-menu--collapse .el-menu .el-submenu {
|
||||||
min-width: 180px!important;
|
min-width: 180px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -131,16 +131,14 @@ export function objectMerge(target, source) {
|
|||||||
if (Array.isArray(source)) {
|
if (Array.isArray(source)) {
|
||||||
return source.slice()
|
return source.slice()
|
||||||
}
|
}
|
||||||
for (const property in source) {
|
Object.keys(source).forEach((property) => {
|
||||||
if (source.hasOwnProperty(property)) {
|
const sourceProperty = source[property]
|
||||||
const sourceProperty = source[property]
|
if (typeof sourceProperty === 'object') {
|
||||||
if (typeof sourceProperty === 'object') {
|
target[property] = objectMerge(target[property], sourceProperty)
|
||||||
target[property] = objectMerge(target[property], sourceProperty)
|
} else {
|
||||||
continue
|
|
||||||
}
|
|
||||||
target[property] = sourceProperty
|
target[property] = sourceProperty
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
return target
|
return target
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -253,15 +251,13 @@ export function deepClone(source) {
|
|||||||
throw new Error('error arguments', 'shallowClone')
|
throw new Error('error arguments', 'shallowClone')
|
||||||
}
|
}
|
||||||
const targetObj = source.constructor === Array ? [] : {}
|
const targetObj = source.constructor === Array ? [] : {}
|
||||||
for (const keys in source) {
|
Object.keys(source).forEach((keys) => {
|
||||||
if (source.hasOwnProperty(keys)) {
|
if (source[keys] && typeof source[keys] === 'object') {
|
||||||
if (source[keys] && typeof source[keys] === 'object') {
|
targetObj[keys] = source[keys].constructor === Array ? [] : {}
|
||||||
targetObj[keys] = source[keys].constructor === Array ? [] : {}
|
targetObj[keys] = deepClone(source[keys])
|
||||||
targetObj[keys] = deepClone(source[keys])
|
} else {
|
||||||
} else {
|
targetObj[keys] = source[keys]
|
||||||
targetObj[keys] = source[keys]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
return targetObj
|
return targetObj
|
||||||
}
|
}
|
||||||
|
|||||||
54
src/vendor/Export2Excel.js
vendored
54
src/vendor/Export2Excel.js
vendored
@@ -116,45 +116,43 @@ export function export_table_to_excel(id) {
|
|||||||
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
|
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
|
||||||
}
|
}
|
||||||
|
|
||||||
export function export_json_to_excel(th, jsonData, defaultTitle) {
|
export function export_json_to_excel({header, data, filename='excel-list', autoWidth=true}={}) {
|
||||||
|
|
||||||
/* original data */
|
/* original data */
|
||||||
|
data=[...data]
|
||||||
var data = jsonData;
|
data.unshift(header);
|
||||||
data.unshift(th);
|
|
||||||
var ws_name = "SheetJS";
|
var ws_name = "SheetJS";
|
||||||
|
|
||||||
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
|
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
|
||||||
|
|
||||||
/*设置worksheet每列的最大宽度*/
|
if(autoWidth){
|
||||||
const colWidth = data.map(row => row.map(val => {
|
/*设置worksheet每列的最大宽度*/
|
||||||
/*先判断是否为null/undefined*/
|
const colWidth = data.map(row => row.map(val => {
|
||||||
if (val == null) {
|
/*先判断是否为null/undefined*/
|
||||||
return {'wch': 10};
|
if (val == null) {
|
||||||
}
|
return {'wch': 10};
|
||||||
/*再判断是否为中文*/
|
}
|
||||||
else if (val.toString().charCodeAt(0) > 255) {
|
/*再判断是否为中文*/
|
||||||
return {'wch': val.toString().length * 2};
|
else if (val.toString().charCodeAt(0) > 255) {
|
||||||
} else {
|
return {'wch': val.toString().length * 2};
|
||||||
return {'wch': val.toString().length};
|
} else {
|
||||||
}
|
return {'wch': val.toString().length};
|
||||||
}))
|
}
|
||||||
/*以第一行为初始值*/
|
}))
|
||||||
let result = colWidth[0];
|
/*以第一行为初始值*/
|
||||||
for (let i = 1; i < colWidth.length; i++) {
|
let result = colWidth[0];
|
||||||
for (let j = 0; j < colWidth[i].length; j++) {
|
for (let i = 1; i < colWidth.length; i++) {
|
||||||
if (result[j]['wch'] < colWidth[i][j]['wch']) {
|
for (let j = 0; j < colWidth[i].length; j++) {
|
||||||
result[j]['wch'] = colWidth[i][j]['wch'];
|
if (result[j]['wch'] < colWidth[i][j]['wch']) {
|
||||||
|
result[j]['wch'] = colWidth[i][j]['wch'];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
ws['!cols'] = result;
|
||||||
}
|
}
|
||||||
ws['!cols'] = result;
|
|
||||||
|
|
||||||
/* add worksheet to workbook */
|
/* add worksheet to workbook */
|
||||||
wb.SheetNames.push(ws_name);
|
wb.SheetNames.push(ws_name);
|
||||||
wb.Sheets[ws_name] = ws;
|
wb.Sheets[ws_name] = ws;
|
||||||
|
|
||||||
var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
|
var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
|
||||||
var title = defaultTitle || 'excel-list'
|
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), filename + ".xlsx");
|
||||||
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -38,30 +38,30 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.components-container {
|
.components-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-container {
|
.left-container {
|
||||||
background-color: #F38181;
|
background-color: #F38181;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-container {
|
.right-container {
|
||||||
background-color: #FCE38A;
|
background-color: #FCE38A;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-container {
|
.top-container {
|
||||||
background-color: #FCE38A;
|
background-color: #FCE38A;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-container {
|
.bottom-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #95E1D3;
|
background-color: #95E1D3;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,317 +1,319 @@
|
|||||||
.todoapp {
|
.todoapp {
|
||||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
color: #4d4d4d;
|
color: #4d4d4d;
|
||||||
min-width: 230px;
|
min-width: 230px;
|
||||||
max-width: 550px;
|
max-width: 550px;
|
||||||
margin: 0 auto ;
|
margin: 0 auto ;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
button {
|
button {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
background: none;
|
background: none;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
:focus {
|
:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.todoapp {
|
.todoapp {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
margin: 130px 0 40px 0;
|
margin: 130px 0 40px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
.todoapp input::-webkit-input-placeholder {
|
.todoapp input::-webkit-input-placeholder {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #e6e6e6;
|
color: #e6e6e6;
|
||||||
}
|
}
|
||||||
.todoapp input::-moz-placeholder {
|
.todoapp input::-moz-placeholder {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #e6e6e6;
|
color: #e6e6e6;
|
||||||
}
|
}
|
||||||
.todoapp input::input-placeholder {
|
.todoapp input::input-placeholder {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #e6e6e6;
|
color: #e6e6e6;
|
||||||
}
|
}
|
||||||
.todoapp h1 {
|
.todoapp h1 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -155px;
|
top: -155px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 100px;
|
font-size: 100px;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: rgba(175, 47, 47, 0.15);
|
color: rgba(175, 47, 47, 0.15);
|
||||||
-webkit-text-rendering: optimizeLegibility;
|
-webkit-text-rendering: optimizeLegibility;
|
||||||
-moz-text-rendering: optimizeLegibility;
|
-moz-text-rendering: optimizeLegibility;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
.new-todo,
|
.new-todo,
|
||||||
.edit {
|
.edit {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
border: 0;
|
border: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
border: 1px solid #999;
|
border: 1px solid #999;
|
||||||
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
.new-todo {
|
.new-todo {
|
||||||
padding: 10px 16px 16px 60px;
|
padding: 10px 16px 16px 60px;
|
||||||
border: none;
|
border: none;
|
||||||
background: rgba(0, 0, 0, 0.003);
|
background: rgba(0, 0, 0, 0.003);
|
||||||
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
||||||
}
|
}
|
||||||
.main {
|
.main {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
border-top: 1px solid #e6e6e6;
|
border-top: 1px solid #e6e6e6;
|
||||||
}
|
}
|
||||||
.toggle-all {
|
.toggle-all {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: none;
|
border: none;
|
||||||
/* Mobile Safari */
|
/* Mobile Safari */
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
.toggle-all+label {
|
.toggle-all+label {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -52px;
|
top: -52px;
|
||||||
left: -13px;
|
left: -13px;
|
||||||
-webkit-transform: rotate(90deg);
|
-webkit-transform: rotate(90deg);
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
.toggle-all+label:before {
|
.toggle-all+label:before {
|
||||||
content: '❯';
|
content: '❯';
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
color: #e6e6e6;
|
color: #e6e6e6;
|
||||||
padding: 10px 27px 10px 27px;
|
padding: 10px 27px 10px 27px;
|
||||||
}
|
}
|
||||||
.toggle-all:checked+label:before {
|
.toggle-all:checked+label:before {
|
||||||
color: #737373;
|
color: #737373;
|
||||||
}
|
}
|
||||||
.todo-list {
|
.todo-list {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.todo-list li {
|
.todo-list li {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
border-bottom: 1px solid #ededed;
|
border-bottom: 1px solid #ededed;
|
||||||
}
|
}
|
||||||
.todo-list li:last-child {
|
.todo-list li:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.todo-list li.editing {
|
.todo-list li.editing {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.todo-list li.editing .edit {
|
.todo-list li.editing .edit {
|
||||||
display: block;
|
display: block;
|
||||||
width: 506px;
|
width: 506px;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
margin: 0 0 0 43px;
|
margin: 0 0 0 43px;
|
||||||
}
|
}
|
||||||
.todo-list li.editing .view {
|
.todo-list li.editing .view {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
/* auto, since non-WebKit browsers doesn't support input styling */
|
/* auto, since non-WebKit browsers doesn't support input styling */
|
||||||
height: auto;
|
height: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
border: none;
|
border: none;
|
||||||
/* Mobile Safari */
|
/* Mobile Safari */
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
.todo-list li .toggle+label {
|
.todo-list li .toggle+label {
|
||||||
/*
|
/*
|
||||||
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
||||||
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
||||||
*/
|
*/
|
||||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
|
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center left;
|
background-position: center left;
|
||||||
background-size: 36px;
|
background-size: 36px;
|
||||||
}
|
}
|
||||||
.todo-list li .toggle:checked+label {
|
.todo-list li .toggle:checked+label {
|
||||||
background-size: 36px;
|
background-size: 36px;
|
||||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
|
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
|
||||||
}
|
}
|
||||||
.todo-list li label {
|
.todo-list li label {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
padding: 15px 15px 15px 50px;
|
padding: 15px 15px 15px 50px;
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.0;
|
line-height: 1.0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
transition: color 0.4s;
|
transition: color 0.4s;
|
||||||
}
|
}
|
||||||
.todo-list li.completed label {
|
.todo-list li.completed label {
|
||||||
color: #d9d9d9;
|
color: #d9d9d9;
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
}
|
}
|
||||||
.todo-list li .destroy {
|
.todo-list li .destroy {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: #cc9a9a;
|
color: #cc9a9a;
|
||||||
transition: color 0.2s ease-out;
|
transition: color 0.2s ease-out;
|
||||||
}
|
}
|
||||||
.todo-list li .destroy:hover {
|
.todo-list li .destroy:hover {
|
||||||
color: #af5b5e;
|
color: #af5b5e;
|
||||||
}
|
}
|
||||||
.todo-list li .destroy:after {
|
.todo-list li .destroy:after {
|
||||||
content: '×';
|
content: '×';
|
||||||
}
|
}
|
||||||
.todo-list li:hover .destroy {
|
.todo-list li:hover .destroy {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.todo-list li .edit {
|
.todo-list li .edit {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.todo-list li.editing:last-child {
|
.todo-list li.editing:last-child {
|
||||||
margin-bottom: -1px;
|
margin-bottom: -1px;
|
||||||
}
|
}
|
||||||
.footer {
|
.footer {
|
||||||
color: #777;
|
color: #777;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-top: 1px solid #e6e6e6;
|
border-top: 1px solid #e6e6e6;
|
||||||
}
|
}
|
||||||
.footer:before {
|
.footer:before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 50px;
|
height: 40px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
.todo-count {
|
.todo-count {
|
||||||
float: left;
|
float: left;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.todo-count strong {
|
.todo-count strong {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
.filters {
|
.filters {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
position: relative;
|
||||||
}
|
z-index: 1;
|
||||||
.filters li {
|
list-style: none;
|
||||||
display: inline;
|
}
|
||||||
}
|
.filters li {
|
||||||
.filters li a {
|
display: inline;
|
||||||
color: inherit;
|
}
|
||||||
font-size: 12px;
|
.filters li a {
|
||||||
padding: 3px 7px;
|
color: inherit;
|
||||||
text-decoration: none;
|
font-size: 12px;
|
||||||
border: 1px solid transparent;
|
padding: 3px 7px;
|
||||||
border-radius: 3px;
|
text-decoration: none;
|
||||||
}
|
border: 1px solid transparent;
|
||||||
.filters li a:hover {
|
border-radius: 3px;
|
||||||
border-color: rgba(175, 47, 47, 0.1);
|
}
|
||||||
}
|
.filters li a:hover {
|
||||||
.filters li a.selected {
|
border-color: rgba(175, 47, 47, 0.1);
|
||||||
border-color: rgba(175, 47, 47, 0.2);
|
}
|
||||||
}
|
.filters li a.selected {
|
||||||
.clear-completed,
|
border-color: rgba(175, 47, 47, 0.2);
|
||||||
html .clear-completed:active {
|
}
|
||||||
float: right;
|
.clear-completed,
|
||||||
position: relative;
|
html .clear-completed:active {
|
||||||
line-height: 20px;
|
float: right;
|
||||||
text-decoration: none;
|
position: relative;
|
||||||
cursor: pointer;
|
line-height: 20px;
|
||||||
}
|
text-decoration: none;
|
||||||
.clear-completed:hover {
|
cursor: pointer;
|
||||||
text-decoration: underline;
|
}
|
||||||
}
|
.clear-completed:hover {
|
||||||
.info {
|
text-decoration: underline;
|
||||||
margin: 65px auto 0;
|
}
|
||||||
color: #bfbfbf;
|
.info {
|
||||||
font-size: 10px;
|
margin: 65px auto 0;
|
||||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
color: #bfbfbf;
|
||||||
text-align: center;
|
font-size: 10px;
|
||||||
}
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||||
.info p {
|
text-align: center;
|
||||||
line-height: 1;
|
}
|
||||||
}
|
.info p {
|
||||||
.info a {
|
line-height: 1;
|
||||||
color: inherit;
|
}
|
||||||
text-decoration: none;
|
.info a {
|
||||||
font-weight: 400;
|
color: inherit;
|
||||||
}
|
text-decoration: none;
|
||||||
.info a:hover {
|
font-weight: 400;
|
||||||
text-decoration: underline;
|
}
|
||||||
}
|
.info a:hover {
|
||||||
/*
|
text-decoration: underline;
|
||||||
Hack to remove background from Mobile Safari.
|
}
|
||||||
Can't use it globally since it destroys checkboxes in Firefox
|
/*
|
||||||
|
Hack to remove background from Mobile Safari.
|
||||||
|
Can't use it globally since it destroys checkboxes in Firefox
|
||||||
*/
|
*/
|
||||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||||
.toggle-all,
|
.toggle-all,
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 430px) {
|
@media (max-width: 430px) {
|
||||||
.footer {
|
.footer {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
.filters {
|
.filters {
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -40,35 +40,34 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
.emptyGif {
|
.emptyGif {
|
||||||
display: block;
|
display: block;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-editor-container {
|
.dashboard-editor-container {
|
||||||
background-color: #e3e3e3;
|
background-color: #e3e3e3;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
margin-top: -50px;
|
padding: 50px 60px 0px;
|
||||||
padding: 100px 60px 0px;
|
.pan-info-roles {
|
||||||
.pan-info-roles {
|
font-size: 12px;
|
||||||
font-size: 12px;
|
font-weight: 700;
|
||||||
font-weight: 700;
|
color: #333;
|
||||||
color: #333;
|
display: block;
|
||||||
display: block;
|
}
|
||||||
}
|
.info-container {
|
||||||
.info-container {
|
position: relative;
|
||||||
position: relative;
|
margin-left: 190px;
|
||||||
margin-left: 190px;
|
height: 150px;
|
||||||
height: 150px;
|
line-height: 200px;
|
||||||
line-height: 200px;
|
.display_name {
|
||||||
.display_name {
|
font-size: 48px;
|
||||||
font-size: 48px;
|
line-height: 48px;
|
||||||
line-height: 48px;
|
color: #212121;
|
||||||
color: #212121;
|
position: absolute;
|
||||||
position: absolute;
|
top: 25px;
|
||||||
top: 25px;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ export default {
|
|||||||
{ title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' },
|
{ title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' },
|
||||||
{ title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' },
|
{ title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' },
|
||||||
{ title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
|
{ title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
|
||||||
{ title: '优雅的使用 icon', href: 'https://segmentfault.com/a/https://segmentfault.com/a/1190000012213278' }
|
{ title: '优雅的使用 icon', href: 'https://segmentfault.com/a/1190000012213278' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -65,6 +65,7 @@ export default {
|
|||||||
.pan-img {
|
.pan-img {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
.text-jumbo {
|
.text-jumbo {
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
|
|||||||
@@ -1,8 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- $t is vue-i18n global function to translate lang -->
|
<!-- $t is vue-i18n global function to translate lang -->
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
|
|
||||||
|
<label class="radio-label" style="padding-left:0;">Filename: </label>
|
||||||
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
|
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
|
||||||
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
|
<label class="radio-label">Cell Auto Width: </label>
|
||||||
|
<el-radio-group v-model="autoWidth">
|
||||||
|
<el-radio :label="true" border>True</el-radio>
|
||||||
|
<el-radio :label="false" border>False</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
<el-button style='margin:0 0 20px 20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
|
||||||
|
|
||||||
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
|
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
|
||||||
<el-table-column align="center" label='Id' width="95">
|
<el-table-column align="center" label='Id' width="95">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
@@ -45,7 +53,8 @@ export default {
|
|||||||
list: null,
|
list: null,
|
||||||
listLoading: true,
|
listLoading: true,
|
||||||
downloadLoading: false,
|
downloadLoading: false,
|
||||||
filename: ''
|
filename: '',
|
||||||
|
autoWidth: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@@ -66,7 +75,12 @@ export default {
|
|||||||
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
||||||
const list = this.list
|
const list = this.list
|
||||||
const data = this.formatJson(filterVal, list)
|
const data = this.formatJson(filterVal, list)
|
||||||
excel.export_json_to_excel(tHeader, data, this.filename)
|
excel.export_json_to_excel({
|
||||||
|
header: tHeader,
|
||||||
|
data,
|
||||||
|
filename: this.filename,
|
||||||
|
autoWidth: this.autoWidth
|
||||||
|
})
|
||||||
this.downloadLoading = false
|
this.downloadLoading = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@@ -82,3 +96,13 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.radio-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
line-height: 40px;
|
||||||
|
padding: 0 12px 0 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -72,7 +72,11 @@ export default {
|
|||||||
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
||||||
const list = this.multipleSelection
|
const list = this.multipleSelection
|
||||||
const data = this.formatJson(filterVal, list)
|
const data = this.formatJson(filterVal, list)
|
||||||
excel.export_json_to_excel(tHeader, data, this.filename)
|
excel.export_json_to_excel({
|
||||||
|
header: tHeader,
|
||||||
|
data,
|
||||||
|
filename: this.filename
|
||||||
|
})
|
||||||
this.$refs.multipleTable.clearSelection()
|
this.$refs.multipleTable.clearSelection()
|
||||||
this.downloadLoading = false
|
this.downloadLoading = false
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
|
<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
|
||||||
<sidebar class="sidebar-container"></sidebar>
|
<sidebar class="sidebar-container"></sidebar>
|
||||||
<div class="main-container">
|
<div class="main-container">
|
||||||
<navbar></navbar>
|
<navbar></navbar>
|
||||||
<tags-view></tags-view>
|
<tags-view></tags-view>
|
||||||
<app-main></app-main>
|
<app-main></app-main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -29,11 +29,11 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
@import "src/styles/mixin.scss";
|
@import "src/styles/mixin.scss";
|
||||||
.app-wrapper {
|
.app-wrapper {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -2,17 +2,18 @@
|
|||||||
<div class="menu-wrapper">
|
<div class="menu-wrapper">
|
||||||
<template v-for="item in routes" v-if="!item.hidden&&item.children">
|
<template v-for="item in routes" v-if="!item.hidden&&item.children">
|
||||||
|
|
||||||
<router-link v-if="item.children.length===1 && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
|
<router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path"
|
||||||
|
:key="item.children[0].name">
|
||||||
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
|
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
|
||||||
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
|
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
|
||||||
<span v-if="item.children[0].meta&&item.children[0].meta.title">{{generateTitle(item.children[0].meta.title)}}</span>
|
<span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{generateTitle(item.children[0].meta.title)}}</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
<el-submenu v-else :index="item.name||item.path" :key="item.name">
|
<el-submenu v-else :index="item.name||item.path" :key="item.name">
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
|
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
|
||||||
<span v-if="item.meta&&item.meta.title">{{generateTitle(item.meta.title)}}</span>
|
<span v-if="item.meta&&item.meta.title" slot="title">{{generateTitle(item.meta.title)}}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-for="child in item.children" v-if="!child.hidden">
|
<template v-for="child in item.children" v-if="!child.hidden">
|
||||||
@@ -21,7 +22,7 @@
|
|||||||
<router-link v-else :to="item.path+'/'+child.path" :key="child.name">
|
<router-link v-else :to="item.path+'/'+child.path" :key="child.name">
|
||||||
<el-menu-item :index="item.path+'/'+child.path">
|
<el-menu-item :index="item.path+'/'+child.path">
|
||||||
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
|
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
|
||||||
<span v-if="child.meta&&child.meta.title">{{generateTitle(child.meta.title)}}</span>
|
<span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</router-link>
|
</router-link>
|
||||||
</template>
|
</template>
|
||||||
@@ -46,6 +47,15 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
hasOneShowingChildren(children) {
|
||||||
|
const showingChildren = children.filter(item => {
|
||||||
|
return !item.hidden
|
||||||
|
})
|
||||||
|
if (showingChildren.length === 1) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
},
|
||||||
generateTitle
|
generateTitle
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<scroll-bar>
|
<scroll-bar>
|
||||||
<el-menu mode="vertical" :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
|
<el-menu
|
||||||
|
mode="vertical"
|
||||||
|
:collapse-transition="false"
|
||||||
|
:show-timeout="200"
|
||||||
|
:default-active="$route.path"
|
||||||
|
:collapse="isCollapse"
|
||||||
|
background-color="#304156"
|
||||||
|
text-color="#bfcbd9"
|
||||||
|
active-text-color="#409EFF"
|
||||||
|
>
|
||||||
<sidebar-item :routes="permission_routers"></sidebar-item>
|
<sidebar-item :routes="permission_routers"></sidebar-item>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</scroll-bar>
|
</scroll-bar>
|
||||||
|
|||||||
@@ -34,35 +34,35 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
.social-signup-container {
|
.social-signup-container {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
.sign-btn {
|
.sign-btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.icon {
|
.icon {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
}
|
}
|
||||||
.wx-svg-container,
|
.wx-svg-container,
|
||||||
.qq-svg-container {
|
.qq-svg-container {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 1px;
|
padding-top: 1px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
.wx-svg-container {
|
.wx-svg-container {
|
||||||
background-color: #8dc349;
|
background-color: #8dc349;
|
||||||
}
|
}
|
||||||
.qq-svg-container {
|
.qq-svg-container {
|
||||||
background-color: #6BA2D6;
|
background-color: #6BA2D6;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user