diff --git a/README.md b/README.md
index 2edf422d..a9736067 100644
--- a/README.md
+++ b/README.md
@@ -3,21 +3,21 @@
</p>
<p align="center">
- <a href="https://github.com/vuejs/vue">
- <img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
- </a>
- <a href="https://github.com/ElemeFE/element">
- <img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
- </a>
- <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">
- </a>
- <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">
- </a>
- <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">
- </a>
+ <a href="https://github.com/vuejs/vue">
+ <img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
+ </a>
+ <a href="https://github.com/ElemeFE/element">
+ <img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
+ </a>
+ <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">
+ </a>
+ <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">
+ </a>
+ <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">
+ </a>
</p>
English | [简体中文](./README.zh-CN.md)
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 41a4a77e..80427047 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -3,21 +3,21 @@
</p>
<p align="center">
- <a href="https://github.com/vuejs/vue">
- <img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
- </a>
- <a href="https://github.com/ElemeFE/element">
- <img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
- </a>
- <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">
- </a>
- <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">
- </a>
- <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">
- </a>
+ <a href="https://github.com/vuejs/vue">
+ <img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
+ </a>
+ <a href="https://github.com/ElemeFE/element">
+ <img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
+ </a>
+ <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">
+ </a>
+ <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">
+ </a>
+ <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">
+ </a>
</p>
简体中文 | [English](./README.md)
diff --git a/config/dev.env.js b/config/dev.env.js
index d1e29d4e..68ddea56 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -1,5 +1,5 @@
module.exports = {
- NODE_ENV: '"development"',
- ENV_CONFIG: '"dev"',
- BASE_API: '"https://api-dev"'
+ NODE_ENV: '"development"',
+ ENV_CONFIG: '"dev"',
+ BASE_API: '"https://api-dev"'
}
diff --git a/config/prod.env.js b/config/prod.env.js
index 0c43ea73..bfcd6d27 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,5 @@
module.exports = {
- NODE_ENV: '"production"',
- ENV_CONFIG: '"prod"',
- BASE_API: '"https://api-prod"'
+ NODE_ENV: '"production"',
+ ENV_CONFIG: '"prod"',
+ BASE_API: '"https://api-prod"'
}
diff --git a/config/sit.env.js b/config/sit.env.js
index 296a3de6..93178e80 100644
--- a/config/sit.env.js
+++ b/config/sit.env.js
@@ -1,5 +1,5 @@
module.exports = {
- NODE_ENV: '"production"',
- ENV_CONFIG: '"sit"',
- BASE_API: '"https://api-sit"'
+ NODE_ENV: '"production"',
+ ENV_CONFIG: '"sit"',
+ BASE_API: '"https://api-sit"'
}
diff --git a/index.html b/index.html
index 341431a0..489d1a53 100644
--- a/index.html
+++ b/index.html
@@ -1,15 +1,15 @@
<!DOCTYPE html>
<html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="renderer" content="webkit">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- <title>vue-element-admin</title>
- </head>
- <body>
- <script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
- <div id="app"></div>
- <!-- built files will be auto injected -->
- </body>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="renderer" content="webkit">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+ <title>vue-element-admin</title>
+ </head>
+ <body>
+ <script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+ </body>
</html>
diff --git a/src/App.vue b/src/App.vue
index 3761c410..690cfc98 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
<template>
- <div id="app">
- <router-view></router-view>
- </div>
+ <div id="app">
+ <router-view></router-view>
+ </div>
</template>
<script>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 35a597ea..5ffa0646 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -30,16 +30,16 @@ export default {
<style scoped>
.hamburger {
- display: inline-block;
- cursor: pointer;
- width: 20px;
- height: 20px;
- transform: rotate(90deg);
- transition: .38s;
- transform-origin: 50% 50%;
+ display: inline-block;
+ cursor: pointer;
+ width: 20px;
+ height: 20px;
+ transform: rotate(90deg);
+ transition: .38s;
+ transform-origin: 50% 50%;
}
.hamburger.is-active {
- transform: rotate(0deg);
+ transform: rotate(0deg);
}
</style>
diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue
index cf7c4fb2..c1dade3f 100644
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@@ -1,104 +1,104 @@
<template>
<div class="vue-image-crop-upload" v-show="value">
- <div class="vicp-wrap">
- <div class="vicp-close" @click="off">
- <i class="vicp-icon4"></i>
- </div>
+ <div class="vicp-wrap">
+ <div class="vicp-close" @click="off">
+ <i class="vicp-icon4"></i>
+ </div>
- <div class="vicp-step1" v-show="step == 1">
- <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-arrow"></i>
- <i class="vicp-icon1-body"></i>
- <i class="vicp-icon1-bottom"></i>
- </i>
- <span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</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">
- </div>
- <div class="vicp-error" v-show="hasError">
- <i class="vicp-icon2"></i> {{ errorMsg }}
- </div>
- <div class="vicp-operate">
- <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
- </div>
- </div>
+ <div class="vicp-step1" v-show="step == 1">
+ <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-arrow"></i>
+ <i class="vicp-icon1-body"></i>
+ <i class="vicp-icon1-bottom"></i>
+ </i>
+ <span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</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">
+ </div>
+ <div class="vicp-error" v-show="hasError">
+ <i class="vicp-icon2"></i> {{ errorMsg }}
+ </div>
+ <div class="vicp-operate">
+ <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
+ </div>
+ </div>
- <div class="vicp-step2" v-if="step == 2">
- <div class="vicp-crop">
- <div class="vicp-crop-left" v-show="true">
- <div class="vicp-img-container">
- <img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false"
- @drag="preventDefault"
- @dragstart="preventDefault"
- @dragend="preventDefault"
- @dragleave="preventDefault"
- @dragover="preventDefault"
- @dragenter="preventDefault"
- @drop="preventDefault"
- @touchstart="imgStartMove"
- @touchmove="imgMove"
- @touchend="createImg"
- @touchcancel="createImg"
- @mousedown="imgStartMove"
- @mousemove="imgMove"
- @mouseup="createImg"
- @mouseout="createImg"
- ref="img">
- <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>
+ <div class="vicp-step2" v-if="step == 2">
+ <div class="vicp-crop">
+ <div class="vicp-crop-left" v-show="true">
+ <div class="vicp-img-container">
+ <img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false"
+ @drag="preventDefault"
+ @dragstart="preventDefault"
+ @dragend="preventDefault"
+ @dragleave="preventDefault"
+ @dragover="preventDefault"
+ @dragenter="preventDefault"
+ @drop="preventDefault"
+ @touchstart="imgStartMove"
+ @touchmove="imgMove"
+ @touchend="createImg"
+ @touchcancel="createImg"
+ @mousedown="imgStartMove"
+ @mousemove="imgMove"
+ @mouseup="createImg"
+ @mouseout="createImg"
+ ref="img">
+ <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>
- <div class="vicp-range">
- <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="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i>
- </div>
+ <div class="vicp-range">
+ <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="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i>
+ </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="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
</div>
- </div>
- <div class="vicp-crop-right" v-show="true">
- <div class="vicp-preview">
- <div class="vicp-preview-item" v-if="!noSquare">
- <img :src="createImgUrl" :style="previewStyle">
- <span>{{ lang.preview }}</span>
- </div>
- <div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle">
- <img :src="createImgUrl" :style="previewStyle">
- <span>{{ lang.preview }}</span>
- </div>
- </div>
- </div>
- </div>
- <div class="vicp-operate">
- <a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
- <a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
- </div>
- </div>
+ </div>
+ <div class="vicp-crop-right" v-show="true">
+ <div class="vicp-preview">
+ <div class="vicp-preview-item" v-if="!noSquare">
+ <img :src="createImgUrl" :style="previewStyle">
+ <span>{{ lang.preview }}</span>
+ </div>
+ <div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle">
+ <img :src="createImgUrl" :style="previewStyle">
+ <span>{{ lang.preview }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="vicp-operate">
+ <a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
+ <a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
+ </div>
+ </div>
- <div class="vicp-step3" v-if="step == 3">
- <div class="vicp-upload">
- <span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
- <div class="vicp-progress-wrap">
- <span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
- </div>
- <div class="vicp-error" v-show="hasError">
- <i class="vicp-icon2"></i> {{ errorMsg }}
- </div>
- <div class="vicp-success" v-show="loading === 2">
- <i class="vicp-icon3"></i> {{ lang.success }}
- </div>
- </div>
- <div class="vicp-operate">
- <a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
- <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
- </div>
- </div>
- <canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
- </div>
+ <div class="vicp-step3" v-if="step == 3">
+ <div class="vicp-upload">
+ <span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
+ <div class="vicp-progress-wrap">
+ <span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
+ </div>
+ <div class="vicp-error" v-show="hasError">
+ <i class="vicp-icon2"></i> {{ errorMsg }}
+ </div>
+ <div class="vicp-success" v-show="loading === 2">
+ <i class="vicp-icon3"></i> {{ lang.success }}
+ </div>
+ </div>
+ <div class="vicp-operate">
+ <a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
+ <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
+ </div>
+ </div>
+ <canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
+ </div>
</div>
</template>
@@ -409,7 +409,7 @@ export default {
}, 200)
},
/* 图片选择区域函数绑定
- ---------------------------------------------------------------*/
+ ---------------------------------------------------------------*/
preventDefault(e) {
e.preventDefault()
return false
@@ -589,7 +589,7 @@ export default {
scale.x = rX
scale.y = rY
},
- // 按钮按下开始向右旋转
+ // 按钮按下开始向右旋转
startRotateRight(e) {
let that = this,
{
@@ -737,7 +737,7 @@ export default {
}
}, 300)
},
- // 生成需求图片
+ // 生成需求图片
createImg(e) {
let that = this,
{
@@ -1132,9 +1132,9 @@ export default {
appearance: none;
cursor: pointer;
/* 滑块
- ---------------------------------------------------------------*/
+ ---------------------------------------------------------------*/
/* 轨道
- ---------------------------------------------------------------*/ }
+ ---------------------------------------------------------------*/ }
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
outline: none; }
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb {
diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
index f980b762..f3478d6c 100644
--- a/src/components/PanThumb/index.vue
+++ b/src/components/PanThumb/index.vue
@@ -1,12 +1,12 @@
<template>
- <div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
- <div class="pan-info">
- <div class="pan-info-roles-container">
- <slot></slot>
- </div>
- </div>
- <img class="pan-thumb" :src="image">
- </div>
+ <div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
+ <div class="pan-info">
+ <div class="pan-info-roles-container">
+ <slot></slot>
+ </div>
+ </div>
+ <img class="pan-thumb" :src="image">
+ </div>
</template>
<script>
@@ -35,106 +35,106 @@ export default {
<style scoped>
.pan-item {
- width: 200px;
- height: 200px;
- border-radius: 50%;
- display: inline-block;
- position: relative;
- cursor: default;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+ width: 200px;
+ height: 200px;
+ border-radius: 50%;
+ display: inline-block;
+ position: relative;
+ cursor: default;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.pan-info-roles-container {
- padding: 20px;
- text-align: center;
+ padding: 20px;
+ text-align: center;
}
.pan-thumb {
- width: 100%;
- height: 100%;
- background-size: 100%;
- border-radius: 50%;
- overflow: hidden;
- position: absolute;
- transform-origin: 95% 40%;
- transition: all 0.3s ease-in-out;
+ width: 100%;
+ height: 100%;
+ background-size: 100%;
+ border-radius: 50%;
+ overflow: hidden;
+ position: absolute;
+ transform-origin: 95% 40%;
+ transition: all 0.3s ease-in-out;
}
.pan-thumb:after {
- content: '';
- width: 8px;
- height: 8px;
- position: absolute;
- border-radius: 50%;
- top: 40%;
- left: 95%;
- margin: -4px 0 0 -4px;
- 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);
+ content: '';
+ width: 8px;
+ height: 8px;
+ position: absolute;
+ border-radius: 50%;
+ top: 40%;
+ left: 95%;
+ margin: -4px 0 0 -4px;
+ 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);
}
.pan-info {
- position: absolute;
- width: inherit;
- height: inherit;
- border-radius: 50%;
- overflow: hidden;
- box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
+ position: absolute;
+ width: inherit;
+ height: inherit;
+ border-radius: 50%;
+ overflow: hidden;
+ box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
}
.pan-info h3 {
- color: #fff;
- text-transform: uppercase;
- position: relative;
- letter-spacing: 2px;
- font-size: 18px;
- margin: 0 60px;
- padding: 22px 0 0 0;
- height: 85px;
- font-family: 'Open Sans', Arial, sans-serif;
- text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
+ color: #fff;
+ text-transform: uppercase;
+ position: relative;
+ letter-spacing: 2px;
+ font-size: 18px;
+ margin: 0 60px;
+ padding: 22px 0 0 0;
+ height: 85px;
+ font-family: 'Open Sans', Arial, sans-serif;
+ text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.pan-info p {
- color: #fff;
- padding: 10px 5px;
- font-style: italic;
- margin: 0 30px;
- font-size: 12px;
- border-top: 1px solid rgba(255, 255, 255, 0.5);
+ color: #fff;
+ padding: 10px 5px;
+ font-style: italic;
+ margin: 0 30px;
+ font-size: 12px;
+ border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.pan-info p a {
- display: block;
- color: #333;
- width: 80px;
- height: 80px;
- background: rgba(255, 255, 255, 0.3);
- border-radius: 50%;
- color: #fff;
- font-style: normal;
- font-weight: 700;
- text-transform: uppercase;
- font-size: 9px;
- letter-spacing: 1px;
- padding-top: 24px;
- margin: 7px auto 0;
- font-family: 'Open Sans', Arial, sans-serif;
- opacity: 0;
- 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);
+ display: block;
+ color: #333;
+ width: 80px;
+ height: 80px;
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+ color: #fff;
+ font-style: normal;
+ font-weight: 700;
+ text-transform: uppercase;
+ font-size: 9px;
+ letter-spacing: 1px;
+ padding-top: 24px;
+ margin: 7px auto 0;
+ font-family: 'Open Sans', Arial, sans-serif;
+ opacity: 0;
+ 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);
}
.pan-info p a:hover {
- background: rgba(255, 255, 255, 0.5);
+ background: rgba(255, 255, 255, 0.5);
}
.pan-item:hover .pan-thumb {
- transform: rotate(-110deg);
+ transform: rotate(-110deg);
}
.pan-item:hover .pan-info p a {
- opacity: 1;
- transform: translateX(0px) rotate(0deg);
+ opacity: 1;
+ transform: translateX(0px) rotate(0deg);
}
</style>
diff --git a/src/components/Upload/singleImage2.vue b/src/components/Upload/singleImage2.vue
index a353713a..bafc14d0 100644
--- a/src/components/Upload/singleImage2.vue
+++ b/src/components/Upload/singleImage2.vue
@@ -1,19 +1,19 @@
<template>
- <div class="singleImageUpload2 upload-container">
- <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
- :on-success="handleImageScucess">
- <i class="el-icon-upload"></i>
- <div class="el-upload__text">Drag或<em>点击上传</em></div>
- </el-upload>
- <div v-show="imageUrl.length>0" class="image-preview">
- <div class="image-preview-wrapper" v-show="imageUrl.length>1">
- <img :src="imageUrl">
- <div class="image-preview-action">
- <i @click="rmImage" class="el-icon-delete"></i>
- </div>
- </div>
- </div>
- </div>
+ <div class="singleImageUpload2 upload-container">
+ <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
+ :on-success="handleImageScucess">
+ <i class="el-icon-upload"></i>
+ <div class="el-upload__text">Drag或<em>点击上传</em></div>
+ </el-upload>
+ <div v-show="imageUrl.length>0" class="image-preview">
+ <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+ <img :src="imageUrl">
+ <div class="image-preview-action">
+ <i @click="rmImage" class="el-icon-delete"></i>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
@@ -66,53 +66,53 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
.upload-container {
- width: 100%;
- height: 100%;
- position: relative;
- .image-uploader {
- height: 100%;
- }
- .image-preview {
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0px;
- top: 0px;
- border: 1px dashed #d9d9d9;
- .image-preview-wrapper {
- position: relative;
- width: 100%;
- height: 100%;
- img {
- width: 100%;
- height: 100%;
- }
- }
- .image-preview-action {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- cursor: default;
- text-align: center;
- color: #fff;
- opacity: 0;
- font-size: 20px;
- background-color: rgba(0, 0, 0, .5);
- transition: opacity .3s;
- cursor: pointer;
- text-align: center;
- line-height: 200px;
- .el-icon-delete {
- font-size: 36px;
- }
- }
- &:hover {
- .image-preview-action {
- opacity: 1;
- }
- }
- }
+ width: 100%;
+ height: 100%;
+ position: relative;
+ .image-uploader {
+ height: 100%;
+ }
+ .image-preview {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ border: 1px dashed #d9d9d9;
+ .image-preview-wrapper {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .image-preview-action {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ cursor: default;
+ text-align: center;
+ color: #fff;
+ opacity: 0;
+ font-size: 20px;
+ background-color: rgba(0, 0, 0, .5);
+ transition: opacity .3s;
+ cursor: pointer;
+ text-align: center;
+ line-height: 200px;
+ .el-icon-delete {
+ font-size: 36px;
+ }
+ }
+ &:hover {
+ .image-preview-action {
+ opacity: 1;
+ }
+ }
+ }
}
</style>
diff --git a/src/components/Upload/singleImage3.vue b/src/components/Upload/singleImage3.vue
index 92717699..8168bd53 100644
--- a/src/components/Upload/singleImage3.vue
+++ b/src/components/Upload/singleImage3.vue
@@ -1,27 +1,27 @@
<template>
- <div class="upload-container">
- <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
- :on-success="handleImageScucess">
- <i class="el-icon-upload"></i>
- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
- </el-upload>
- <div class="image-preview image-app-preview">
- <div class="image-preview-wrapper" v-show="imageUrl.length>1">
- <img :src="imageUrl">
- <div class="image-preview-action">
- <i @click="rmImage" class="el-icon-delete"></i>
- </div>
- </div>
- </div>
- <div class="image-preview">
- <div class="image-preview-wrapper" v-show="imageUrl.length>1">
- <img :src="imageUrl">
- <div class="image-preview-action">
- <i @click="rmImage" class="el-icon-delete"></i>
- </div>
- </div>
- </div>
- </div>
+ <div class="upload-container">
+ <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
+ :on-success="handleImageScucess">
+ <i class="el-icon-upload"></i>
+ <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+ </el-upload>
+ <div class="image-preview image-app-preview">
+ <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+ <img :src="imageUrl">
+ <div class="image-preview-action">
+ <i @click="rmImage" class="el-icon-delete"></i>
+ </div>
+ </div>
+ </div>
+ <div class="image-preview">
+ <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+ <img :src="imageUrl">
+ <div class="image-preview-action">
+ <i @click="rmImage" class="el-icon-delete"></i>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
@@ -76,70 +76,70 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.upload-container {
- width: 100%;
- position: relative;
- @include clearfix;
- .image-uploader {
- width: 35%;
- float: left;
- }
- .image-preview {
- width: 200px;
- height: 200px;
- position: relative;
- border: 1px dashed #d9d9d9;
- float: left;
- margin-left: 50px;
- .image-preview-wrapper {
- position: relative;
- width: 100%;
- height: 100%;
- img {
- width: 100%;
- height: 100%;
- }
- }
- .image-preview-action {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- cursor: default;
- text-align: center;
- color: #fff;
- opacity: 0;
- font-size: 20px;
- background-color: rgba(0, 0, 0, .5);
- transition: opacity .3s;
- cursor: pointer;
- text-align: center;
- line-height: 200px;
- .el-icon-delete {
- font-size: 36px;
- }
- }
- &:hover {
- .image-preview-action {
- opacity: 1;
- }
- }
- }
- .image-app-preview {
- width: 320px;
- height: 180px;
- position: relative;
- border: 1px dashed #d9d9d9;
- float: left;
- margin-left: 50px;
- .app-fake-conver {
- height: 44px;
- position: absolute;
- width: 100%; // background: rgba(0, 0, 0, .1);
- text-align: center;
- line-height: 64px;
- color: #fff;
- }
- }
+ width: 100%;
+ position: relative;
+ @include clearfix;
+ .image-uploader {
+ width: 35%;
+ float: left;
+ }
+ .image-preview {
+ width: 200px;
+ height: 200px;
+ position: relative;
+ border: 1px dashed #d9d9d9;
+ float: left;
+ margin-left: 50px;
+ .image-preview-wrapper {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .image-preview-action {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ cursor: default;
+ text-align: center;
+ color: #fff;
+ opacity: 0;
+ font-size: 20px;
+ background-color: rgba(0, 0, 0, .5);
+ transition: opacity .3s;
+ cursor: pointer;
+ text-align: center;
+ line-height: 200px;
+ .el-icon-delete {
+ font-size: 36px;
+ }
+ }
+ &:hover {
+ .image-preview-action {
+ opacity: 1;
+ }
+ }
+ }
+ .image-app-preview {
+ width: 320px;
+ height: 180px;
+ position: relative;
+ border: 1px dashed #d9d9d9;
+ float: left;
+ margin-left: 50px;
+ .app-fake-conver {
+ height: 44px;
+ position: absolute;
+ width: 100%; // background: rgba(0, 0, 0, .1);
+ text-align: center;
+ line-height: 64px;
+ color: #fff;
+ }
+ }
}
</style>
diff --git a/src/views/components-demo/splitpane.vue b/src/views/components-demo/splitpane.vue
index d870197e..5a0bfb2b 100644
--- a/src/views/components-demo/splitpane.vue
+++ b/src/views/components-demo/splitpane.vue
@@ -38,30 +38,30 @@ export default {
</script>
<style scoped>
- .components-container {
- position: relative;
- height: 100vh;
- }
+ .components-container {
+ position: relative;
+ height: 100vh;
+ }
- .left-container {
- background-color: #F38181;
- height: 100%;
- }
+ .left-container {
+ background-color: #F38181;
+ height: 100%;
+ }
- .right-container {
- background-color: #FCE38A;
- height: 200px;
- }
+ .right-container {
+ background-color: #FCE38A;
+ height: 200px;
+ }
- .top-container {
- background-color: #FCE38A;
- width: 100%;
- height: 100%;
- }
+ .top-container {
+ background-color: #FCE38A;
+ width: 100%;
+ height: 100%;
+ }
- .bottom-container {
- width: 100%;
- background-color: #95E1D3;
- height: 100%;
- }
+ .bottom-container {
+ width: 100%;
+ background-color: #95E1D3;
+ height: 100%;
+ }
</style>
diff --git a/src/views/dashboard/admin/components/TodoList/index.scss b/src/views/dashboard/admin/components/TodoList/index.scss
index 0632ac90..95f1acaa 100644
--- a/src/views/dashboard/admin/components/TodoList/index.scss
+++ b/src/views/dashboard/admin/components/TodoList/index.scss
@@ -1,317 +1,317 @@
.todoapp {
- font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
- line-height: 1.4em;
- color: #4d4d4d;
- min-width: 230px;
- max-width: 550px;
- margin: 0 auto ;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- font-weight: 300;
- background: #fff;
- z-index: 1;
- position: relative;
- button {
- margin: 0;
- padding: 0;
- border: 0;
- background: none;
- font-size: 100%;
- vertical-align: baseline;
- font-family: inherit;
- font-weight: inherit;
- color: inherit;
- -webkit-appearance: none;
- appearance: none;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- :focus {
- outline: 0;
- }
- .hidden {
- display: none;
- }
- .todoapp {
- background: #fff;
- margin: 130px 0 40px 0;
- position: relative;
- 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 {
- font-style: italic;
- font-weight: 300;
- color: #e6e6e6;
- }
- .todoapp input::-moz-placeholder {
- font-style: italic;
- font-weight: 300;
- color: #e6e6e6;
- }
- .todoapp input::input-placeholder {
- font-style: italic;
- font-weight: 300;
- color: #e6e6e6;
- }
- .todoapp h1 {
- position: absolute;
- top: -155px;
- width: 100%;
- font-size: 100px;
- font-weight: 100;
- text-align: center;
- color: rgba(175, 47, 47, 0.15);
- -webkit-text-rendering: optimizeLegibility;
- -moz-text-rendering: optimizeLegibility;
- text-rendering: optimizeLegibility;
- }
- .new-todo,
- .edit {
- position: relative;
- margin: 0;
- width: 100%;
- font-size: 18px;
- font-family: inherit;
- font-weight: inherit;
- line-height: 1.4em;
- border: 0;
- color: inherit;
- padding: 6px;
- border: 1px solid #999;
- box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
- box-sizing: border-box;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- .new-todo {
- padding: 10px 16px 16px 60px;
- border: none;
- background: rgba(0, 0, 0, 0.003);
- box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
- }
- .main {
- position: relative;
- z-index: 2;
- border-top: 1px solid #e6e6e6;
- }
- .toggle-all {
- text-align: center;
- border: none;
- /* Mobile Safari */
- opacity: 0;
- position: absolute;
- }
- .toggle-all+label {
- width: 60px;
- height: 34px;
- font-size: 0;
- position: absolute;
- top: -52px;
- left: -13px;
- -webkit-transform: rotate(90deg);
- transform: rotate(90deg);
- }
- .toggle-all+label:before {
- content: '❯';
- font-size: 22px;
- color: #e6e6e6;
- padding: 10px 27px 10px 27px;
- }
- .toggle-all:checked+label:before {
- color: #737373;
- }
- .todo-list {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .todo-list li {
- position: relative;
- font-size: 24px;
- border-bottom: 1px solid #ededed;
- }
- .todo-list li:last-child {
- border-bottom: none;
- }
- .todo-list li.editing {
- border-bottom: none;
- padding: 0;
- }
- .todo-list li.editing .edit {
- display: block;
- width: 506px;
- padding: 12px 16px;
- margin: 0 0 0 43px;
- }
- .todo-list li.editing .view {
- display: none;
- }
- .todo-list li .toggle {
- text-align: center;
- width: 40px;
- /* auto, since non-WebKit browsers doesn't support input styling */
- height: auto;
- position: absolute;
- top: 0;
- bottom: 0;
- margin: auto 0;
- border: none;
- /* Mobile Safari */
- -webkit-appearance: none;
- appearance: none;
- }
- .todo-list li .toggle {
- opacity: 0;
- }
- .todo-list li .toggle+label {
- /*
- 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/
- */
- 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-position: center left;
- background-size: 36px;
- }
- .todo-list li .toggle:checked+label {
- 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');
- }
- .todo-list li label {
- word-break: break-all;
- padding: 15px 15px 15px 50px;
- display: block;
- line-height: 1.0;
- font-size: 14px;
- transition: color 0.4s;
- }
- .todo-list li.completed label {
- color: #d9d9d9;
- text-decoration: line-through;
- }
- .todo-list li .destroy {
- display: none;
- position: absolute;
- top: 0;
- right: 10px;
- bottom: 0;
- width: 40px;
- height: 40px;
- margin: auto 0;
- font-size: 30px;
- color: #cc9a9a;
- transition: color 0.2s ease-out;
- }
- .todo-list li .destroy:hover {
- color: #af5b5e;
- }
- .todo-list li .destroy:after {
- content: '×';
- }
- .todo-list li:hover .destroy {
- display: block;
- }
- .todo-list li .edit {
- display: none;
- }
- .todo-list li.editing:last-child {
- margin-bottom: -1px;
- }
- .footer {
- color: #777;
- position: relative;
- padding: 10px 15px;
- height: 40px;
- text-align: center;
- border-top: 1px solid #e6e6e6;
- }
- .footer:before {
- content: '';
- position: absolute;
- right: 0;
- bottom: 0;
- left: 0;
- height: 50px;
- 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);
- }
- .todo-count {
- float: left;
- text-align: left;
- }
- .todo-count strong {
- font-weight: 300;
- }
- .filters {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .filters li {
- display: inline;
- }
- .filters li a {
- color: inherit;
- font-size: 12px;
- padding: 3px 7px;
- text-decoration: none;
- border: 1px solid transparent;
- border-radius: 3px;
- }
- .filters li a:hover {
- border-color: rgba(175, 47, 47, 0.1);
- }
- .filters li a.selected {
- border-color: rgba(175, 47, 47, 0.2);
- }
- .clear-completed,
- html .clear-completed:active {
- float: right;
- position: relative;
- line-height: 20px;
- text-decoration: none;
- cursor: pointer;
- }
- .clear-completed:hover {
- text-decoration: underline;
- }
- .info {
- margin: 65px auto 0;
- color: #bfbfbf;
- font-size: 10px;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
- text-align: center;
- }
- .info p {
- line-height: 1;
- }
- .info a {
- color: inherit;
- text-decoration: none;
- font-weight: 400;
- }
- .info a:hover {
- text-decoration: underline;
- }
- /*
- Hack to remove background from Mobile Safari.
- Can't use it globally since it destroys checkboxes in Firefox
+ font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ line-height: 1.4em;
+ color: #4d4d4d;
+ min-width: 230px;
+ max-width: 550px;
+ margin: 0 auto ;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-weight: 300;
+ background: #fff;
+ z-index: 1;
+ position: relative;
+ button {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ font-size: 100%;
+ vertical-align: baseline;
+ font-family: inherit;
+ font-weight: inherit;
+ color: inherit;
+ -webkit-appearance: none;
+ appearance: none;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+ :focus {
+ outline: 0;
+ }
+ .hidden {
+ display: none;
+ }
+ .todoapp {
+ background: #fff;
+ margin: 130px 0 40px 0;
+ position: relative;
+ 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 {
+ font-style: italic;
+ font-weight: 300;
+ color: #e6e6e6;
+ }
+ .todoapp input::-moz-placeholder {
+ font-style: italic;
+ font-weight: 300;
+ color: #e6e6e6;
+ }
+ .todoapp input::input-placeholder {
+ font-style: italic;
+ font-weight: 300;
+ color: #e6e6e6;
+ }
+ .todoapp h1 {
+ position: absolute;
+ top: -155px;
+ width: 100%;
+ font-size: 100px;
+ font-weight: 100;
+ text-align: center;
+ color: rgba(175, 47, 47, 0.15);
+ -webkit-text-rendering: optimizeLegibility;
+ -moz-text-rendering: optimizeLegibility;
+ text-rendering: optimizeLegibility;
+ }
+ .new-todo,
+ .edit {
+ position: relative;
+ margin: 0;
+ width: 100%;
+ font-size: 18px;
+ font-family: inherit;
+ font-weight: inherit;
+ line-height: 1.4em;
+ border: 0;
+ color: inherit;
+ padding: 6px;
+ border: 1px solid #999;
+ box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+ .new-todo {
+ padding: 10px 16px 16px 60px;
+ border: none;
+ background: rgba(0, 0, 0, 0.003);
+ box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
+ }
+ .main {
+ position: relative;
+ z-index: 2;
+ border-top: 1px solid #e6e6e6;
+ }
+ .toggle-all {
+ text-align: center;
+ border: none;
+ /* Mobile Safari */
+ opacity: 0;
+ position: absolute;
+ }
+ .toggle-all+label {
+ width: 60px;
+ height: 34px;
+ font-size: 0;
+ position: absolute;
+ top: -52px;
+ left: -13px;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ }
+ .toggle-all+label:before {
+ content: '❯';
+ font-size: 22px;
+ color: #e6e6e6;
+ padding: 10px 27px 10px 27px;
+ }
+ .toggle-all:checked+label:before {
+ color: #737373;
+ }
+ .todo-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+ .todo-list li {
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px solid #ededed;
+ }
+ .todo-list li:last-child {
+ border-bottom: none;
+ }
+ .todo-list li.editing {
+ border-bottom: none;
+ padding: 0;
+ }
+ .todo-list li.editing .edit {
+ display: block;
+ width: 506px;
+ padding: 12px 16px;
+ margin: 0 0 0 43px;
+ }
+ .todo-list li.editing .view {
+ display: none;
+ }
+ .todo-list li .toggle {
+ text-align: center;
+ width: 40px;
+ /* auto, since non-WebKit browsers doesn't support input styling */
+ height: auto;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ border: none;
+ /* Mobile Safari */
+ -webkit-appearance: none;
+ appearance: none;
+ }
+ .todo-list li .toggle {
+ opacity: 0;
+ }
+ .todo-list li .toggle+label {
+ /*
+ 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/
+ */
+ 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-position: center left;
+ background-size: 36px;
+ }
+ .todo-list li .toggle:checked+label {
+ 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');
+ }
+ .todo-list li label {
+ word-break: break-all;
+ padding: 15px 15px 15px 50px;
+ display: block;
+ line-height: 1.0;
+ font-size: 14px;
+ transition: color 0.4s;
+ }
+ .todo-list li.completed label {
+ color: #d9d9d9;
+ text-decoration: line-through;
+ }
+ .todo-list li .destroy {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 10px;
+ bottom: 0;
+ width: 40px;
+ height: 40px;
+ margin: auto 0;
+ font-size: 30px;
+ color: #cc9a9a;
+ transition: color 0.2s ease-out;
+ }
+ .todo-list li .destroy:hover {
+ color: #af5b5e;
+ }
+ .todo-list li .destroy:after {
+ content: '×';
+ }
+ .todo-list li:hover .destroy {
+ display: block;
+ }
+ .todo-list li .edit {
+ display: none;
+ }
+ .todo-list li.editing:last-child {
+ margin-bottom: -1px;
+ }
+ .footer {
+ color: #777;
+ position: relative;
+ padding: 10px 15px;
+ height: 40px;
+ text-align: center;
+ border-top: 1px solid #e6e6e6;
+ }
+ .footer:before {
+ content: '';
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ height: 50px;
+ 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);
+ }
+ .todo-count {
+ float: left;
+ text-align: left;
+ }
+ .todo-count strong {
+ font-weight: 300;
+ }
+ .filters {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+ .filters li {
+ display: inline;
+ }
+ .filters li a {
+ color: inherit;
+ font-size: 12px;
+ padding: 3px 7px;
+ text-decoration: none;
+ border: 1px solid transparent;
+ border-radius: 3px;
+ }
+ .filters li a:hover {
+ border-color: rgba(175, 47, 47, 0.1);
+ }
+ .filters li a.selected {
+ border-color: rgba(175, 47, 47, 0.2);
+ }
+ .clear-completed,
+ html .clear-completed:active {
+ float: right;
+ position: relative;
+ line-height: 20px;
+ text-decoration: none;
+ cursor: pointer;
+ }
+ .clear-completed:hover {
+ text-decoration: underline;
+ }
+ .info {
+ margin: 65px auto 0;
+ color: #bfbfbf;
+ font-size: 10px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ text-align: center;
+ }
+ .info p {
+ line-height: 1;
+ }
+ .info a {
+ color: inherit;
+ text-decoration: none;
+ font-weight: 400;
+ }
+ .info a:hover {
+ text-decoration: underline;
+ }
+ /*
+ 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) {
- .toggle-all,
- .todo-list li .toggle {
- background: none;
- }
- .todo-list li .toggle {
- height: 40px;
- }
- }
- @media (max-width: 430px) {
- .footer {
- height: 50px;
- }
- .filters {
- bottom: 10px;
- }
- }
+ @media screen and (-webkit-min-device-pixel-ratio:0) {
+ .toggle-all,
+ .todo-list li .toggle {
+ background: none;
+ }
+ .todo-list li .toggle {
+ height: 40px;
+ }
+ }
+ @media (max-width: 430px) {
+ .footer {
+ height: 50px;
+ }
+ .filters {
+ bottom: 10px;
+ }
+ }
}
diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue
index dd9996ff..d3eb0b0b 100644
--- a/src/views/dashboard/editor/index.vue
+++ b/src/views/dashboard/editor/index.vue
@@ -40,34 +40,34 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
- .emptyGif {
- display: block;
- width: 45%;
- margin: 0 auto;
- }
+ .emptyGif {
+ display: block;
+ width: 45%;
+ margin: 0 auto;
+ }
- .dashboard-editor-container {
- background-color: #e3e3e3;
- min-height: 100vh;
- padding: 50px 60px 0px;
- .pan-info-roles {
- font-size: 12px;
- font-weight: 700;
- color: #333;
- display: block;
- }
- .info-container {
- position: relative;
- margin-left: 190px;
- height: 150px;
- line-height: 200px;
- .display_name {
- font-size: 48px;
- line-height: 48px;
- color: #212121;
- position: absolute;
- top: 25px;
- }
- }
- }
+ .dashboard-editor-container {
+ background-color: #e3e3e3;
+ min-height: 100vh;
+ padding: 50px 60px 0px;
+ .pan-info-roles {
+ font-size: 12px;
+ font-weight: 700;
+ color: #333;
+ display: block;
+ }
+ .info-container {
+ position: relative;
+ margin-left: 190px;
+ height: 150px;
+ line-height: 200px;
+ .display_name {
+ font-size: 48px;
+ line-height: 48px;
+ color: #212121;
+ position: absolute;
+ top: 25px;
+ }
+ }
+ }
</style>
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
index 0811866c..7c824531 100644
--- a/src/views/layout/Layout.vue
+++ b/src/views/layout/Layout.vue
@@ -1,12 +1,12 @@
<template>
- <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
- <sidebar class="sidebar-container"></sidebar>
- <div class="main-container">
- <navbar></navbar>
- <tags-view></tags-view>
- <app-main></app-main>
- </div>
- </div>
+ <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
+ <sidebar class="sidebar-container"></sidebar>
+ <div class="main-container">
+ <navbar></navbar>
+ <tags-view></tags-view>
+ <app-main></app-main>
+ </div>
+ </div>
</template>
<script>
@@ -29,11 +29,11 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
- @import "src/styles/mixin.scss";
- .app-wrapper {
- @include clearfix;
- position: relative;
- height: 100%;
- width: 100%;
- }
+ @import "src/styles/mixin.scss";
+ .app-wrapper {
+ @include clearfix;
+ position: relative;
+ height: 100%;
+ width: 100%;
+ }
</style>
diff --git a/src/views/login/socialsignin.vue b/src/views/login/socialsignin.vue
index bdd11120..fc782b5c 100644
--- a/src/views/login/socialsignin.vue
+++ b/src/views/login/socialsignin.vue
@@ -34,35 +34,35 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
- .social-signup-container {
- margin: 20px 0;
- .sign-btn {
- display: inline-block;
- cursor: pointer;
- }
- .icon {
- color: #fff;
- font-size: 30px;
- margin-top: 6px;
- }
- .wx-svg-container,
- .qq-svg-container {
- display: inline-block;
- width: 40px;
- height: 40px;
- line-height: 40px;
- text-align: center;
- padding-top: 1px;
- border-radius: 4px;
- margin-bottom: 20px;
- margin-right: 5px;
- }
- .wx-svg-container {
- background-color: #8dc349;
- }
- .qq-svg-container {
- background-color: #6BA2D6;
- margin-left: 50px;
- }
- }
+ .social-signup-container {
+ margin: 20px 0;
+ .sign-btn {
+ display: inline-block;
+ cursor: pointer;
+ }
+ .icon {
+ color: #fff;
+ font-size: 30px;
+ margin-top: 6px;
+ }
+ .wx-svg-container,
+ .qq-svg-container {
+ display: inline-block;
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ padding-top: 1px;
+ border-radius: 4px;
+ margin-bottom: 20px;
+ margin-right: 5px;
+ }
+ .wx-svg-container {
+ background-color: #8dc349;
+ }
+ .qq-svg-container {
+ background-color: #6BA2D6;
+ margin-left: 50px;
+ }
+ }
</style>