forked from AkkomaGang/admin-fe
fix: change tab char to 2 spaces (#522)
This commit is contained in:
Yuga Sun
花裤衩
parent
3cc3e134c2
commit
26b84847dd
17 changed files with 799 additions and 799 deletions
30
README.md
30
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.0.8-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)
|
||||||
|
|
|
||||||
|
|
@ -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.0.8-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)
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
<body>
|
<body>
|
||||||
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
|
<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,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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
@ -409,7 +409,7 @@ export default {
|
||||||
}, 200)
|
}, 200)
|
||||||
},
|
},
|
||||||
/* 图片选择区域函数绑定
|
/* 图片选择区域函数绑定
|
||||||
---------------------------------------------------------------*/
|
---------------------------------------------------------------*/
|
||||||
preventDefault(e) {
|
preventDefault(e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
return false
|
return false
|
||||||
|
|
@ -589,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,
|
||||||
{
|
{
|
||||||
|
|
@ -737,7 +737,7 @@ export default {
|
||||||
}
|
}
|
||||||
}, 300)
|
}, 300)
|
||||||
},
|
},
|
||||||
// 生成需求图片
|
// 生成需求图片
|
||||||
createImg(e) {
|
createImg(e) {
|
||||||
let that = this,
|
let that = this,
|
||||||
{
|
{
|
||||||
|
|
@ -1132,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>
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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,27 +1,27 @@
|
||||||
<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>
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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,317 @@
|
||||||
.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: 50px;
|
||||||
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;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.filters li {
|
.filters li {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
.filters li a {
|
.filters li a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 3px 7px;
|
padding: 3px 7px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
.filters li a:hover {
|
.filters li a:hover {
|
||||||
border-color: rgba(175, 47, 47, 0.1);
|
border-color: rgba(175, 47, 47, 0.1);
|
||||||
}
|
}
|
||||||
.filters li a.selected {
|
.filters li a.selected {
|
||||||
border-color: rgba(175, 47, 47, 0.2);
|
border-color: rgba(175, 47, 47, 0.2);
|
||||||
}
|
}
|
||||||
.clear-completed,
|
.clear-completed,
|
||||||
html .clear-completed:active {
|
html .clear-completed:active {
|
||||||
float: right;
|
float: right;
|
||||||
position: relative;
|
position: relative;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.clear-completed:hover {
|
.clear-completed:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.info {
|
.info {
|
||||||
margin: 65px auto 0;
|
margin: 65px auto 0;
|
||||||
color: #bfbfbf;
|
color: #bfbfbf;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.info p {
|
.info p {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
.info a {
|
.info a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
.info a:hover {
|
.info a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
/*
|
/*
|
||||||
Hack to remove background from Mobile Safari.
|
Hack to remove background from Mobile Safari.
|
||||||
Can't use it globally since it destroys checkboxes in Firefox
|
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,34 +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;
|
||||||
padding: 50px 60px 0px;
|
padding: 50px 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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue