添加压缩文件预览
This commit is contained in:
jmal
parent
c1bdc28390
commit
6fd1caa559
@ -107,6 +107,14 @@ export default {
|
|||||||
params
|
params
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
// 查找下级目录
|
||||||
|
listfiles: function(params) {
|
||||||
|
return request({
|
||||||
|
url: 'listfiles',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
},
|
||||||
// 移动文件/文件夹
|
// 移动文件/文件夹
|
||||||
move: function(params) {
|
move: function(params) {
|
||||||
return request({
|
return request({
|
||||||
@ -180,6 +188,14 @@ export default {
|
|||||||
params
|
params
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
// 通过filepath预览文本文件
|
||||||
|
previewTextByPath: function(params) {
|
||||||
|
return request({
|
||||||
|
url: '/preview/path/text',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
},
|
||||||
// 预览文本文件
|
// 预览文本文件
|
||||||
previewText: function(params) {
|
previewText: function(params) {
|
||||||
return request({
|
return request({
|
||||||
@ -196,4 +212,12 @@ export default {
|
|||||||
params
|
params
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
// 解压文件
|
||||||
|
unzip: function(params) {
|
||||||
|
return request({
|
||||||
|
url: '/unzip',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
201
src/components/FileTree/index.vue
Normal file
201
src/components/FileTree/index.vue
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-tree
|
||||||
|
ref="fileTree"
|
||||||
|
:data="directoryTreeData"
|
||||||
|
:node-key="localFileMode?'path':'id'"
|
||||||
|
:props="directoryTreeProps"
|
||||||
|
:load="localFileMode ? loadOfLocalFileMode : directoryTreeLoadNode"
|
||||||
|
:highlight-current="true"
|
||||||
|
:default-expanded-keys="defaultExpandedKeys"
|
||||||
|
:render-content="renderContent"
|
||||||
|
hight="100"
|
||||||
|
lazy
|
||||||
|
@node-click="treeNodeClick"
|
||||||
|
@node-expand="treeNodeExpand"
|
||||||
|
>
|
||||||
|
</el-tree>
|
||||||
|
<sim-text-preview :file="textPreviewRow" :status.sync="textPreviewVisible" :filepath="filepath"></sim-text-preview>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import api from '@/api/file-api'
|
||||||
|
import IconFile from "@/components/Icon/IconFile"
|
||||||
|
import SimTextPreview from "@/components/preview/SimTextPreview"
|
||||||
|
import { iconClass,suffix } from '@/utils/file-type'
|
||||||
|
export default {
|
||||||
|
name: "FileTree",
|
||||||
|
components: {IconFile,SimTextPreview},
|
||||||
|
props: {
|
||||||
|
directoryTreeData: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
localFileMode: { //本地文件模式, true:通过文件路径加载, false: 通用文件Id加载
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
tempDir: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
textPreviewVisible : false,
|
||||||
|
textPreviewRow: {},
|
||||||
|
filepath: undefined,
|
||||||
|
directoryTreeProps: {
|
||||||
|
label: 'name',
|
||||||
|
children: 'children',
|
||||||
|
isLeaf: 'isLeaf'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 默认展开项
|
||||||
|
defaultExpandedKeys() {
|
||||||
|
if(!this.localFileMode){
|
||||||
|
return ['0']
|
||||||
|
}else{
|
||||||
|
let keys = []
|
||||||
|
this.directoryTreeData.forEach(file => {
|
||||||
|
keys.push(file.path)
|
||||||
|
})
|
||||||
|
return keys
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 加载下一级文件树 localFileMode = true
|
||||||
|
loadOfLocalFileMode(node, resolve) {
|
||||||
|
if (node.level === 0) {
|
||||||
|
let elDialogWrapper = document.querySelector('.compressed-file-dialog')
|
||||||
|
console.log('elDialogWrapper', elDialogWrapper.style.zIndex)
|
||||||
|
elDialogWrapper.style.zIndex += 5
|
||||||
|
return resolve(this.directoryTreeData)
|
||||||
|
}
|
||||||
|
if (node.level > 0){
|
||||||
|
api.listfiles({
|
||||||
|
username: this.$store.state.user.name,
|
||||||
|
path: node.data.path,
|
||||||
|
tempDir: this.tempDir
|
||||||
|
}).then(res => {
|
||||||
|
const nextNodes = res.data
|
||||||
|
return resolve(nextNodes)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 加载下一级文件树 localFileMode = false
|
||||||
|
directoryTreeLoadNode(node, resolve) {
|
||||||
|
let fileId = null
|
||||||
|
if (node.level === 0) {
|
||||||
|
const that = this
|
||||||
|
setTimeout(function () {
|
||||||
|
that.$refs.fileTree.setCurrentKey('0')
|
||||||
|
},0)
|
||||||
|
return resolve([{'id':"0",'name':'全部文件'}])
|
||||||
|
}
|
||||||
|
if (node.level > 1){
|
||||||
|
fileId = node.data.id
|
||||||
|
}
|
||||||
|
api.queryFileTree({
|
||||||
|
userId: this.$store.state.user.userId,
|
||||||
|
username: this.$store.state.user.name,
|
||||||
|
fileId: fileId,
|
||||||
|
}).then(res => {
|
||||||
|
const nextNodes = res.data
|
||||||
|
return resolve(nextNodes)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 点击文件树
|
||||||
|
treeNodeClick(row) {
|
||||||
|
if(suffix.simText.includes(row.suffix)){
|
||||||
|
// 文本文件
|
||||||
|
this.textPreviewRow = row
|
||||||
|
this.textPreviewVisible = true
|
||||||
|
this.filepath = row.path
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 节点被展开时触发
|
||||||
|
treeNodeExpand(row,node,event) {
|
||||||
|
},
|
||||||
|
renderContent(h, { node, data, store }) {
|
||||||
|
if(data.newFolder){
|
||||||
|
return (
|
||||||
|
<span class="custom-tree-node">
|
||||||
|
<span><svg-icon icon-class="folder" /></span>
|
||||||
|
<span>
|
||||||
|
<div class="el-input el-input--mini el-input-tree">
|
||||||
|
<input type="text" autocomplete="on" value="新建文件夹" id="treeInput" class="el-input__inner"></input>
|
||||||
|
</div>
|
||||||
|
<button type="button" on-click={() => {
|
||||||
|
let path = '/'
|
||||||
|
let parentData = node.parent.data
|
||||||
|
if(parentData.path){
|
||||||
|
path = parentData.path + parentData.name + path
|
||||||
|
}
|
||||||
|
api.newFolder({
|
||||||
|
isFolder: true,
|
||||||
|
filename: data.name,
|
||||||
|
currentDirectory: path,
|
||||||
|
username: this.$store.state.user.name,
|
||||||
|
userId: this.$store.state.user.userId
|
||||||
|
}).then((res) => {
|
||||||
|
data.newFolder = false
|
||||||
|
data.id = res.data.id
|
||||||
|
console.log(data)
|
||||||
|
}).catch(() => {
|
||||||
|
window.event.preventDefault()
|
||||||
|
window.event.stopPropagation()
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
class="el-button el-icon-check el-button--mini el-input-tree-button" element-loading-spinner="el-icon-loading" element-loading-background="#f6f7fa88"></button>
|
||||||
|
<button type="button" on-click={() => {
|
||||||
|
this.$refs.fileTree.remove(node)
|
||||||
|
window.event.preventDefault()
|
||||||
|
window.event.stopPropagation()
|
||||||
|
}}
|
||||||
|
class="el-button el-icon-close el-button--mini el-input-tree-button" element-loading-spinner="el-icon-loading" element-loading-background="#f6f7fa88"></button>
|
||||||
|
</span>
|
||||||
|
</span>);
|
||||||
|
}
|
||||||
|
if(node.expanded){
|
||||||
|
return (
|
||||||
|
<span class="custom-tree-node">
|
||||||
|
<svg-icon icon-class="open-folder" />
|
||||||
|
<span style="margin-left: 5px;">{node.label}</span>
|
||||||
|
<span>
|
||||||
|
</span>
|
||||||
|
</span>);
|
||||||
|
}else{
|
||||||
|
let iconClass = this.findIconClass(node.data)
|
||||||
|
return (
|
||||||
|
<span class="custom-tree-node">
|
||||||
|
<svg-icon icon-class={iconClass}/>
|
||||||
|
<span style="margin-left: 5px;">{node.label}</span>
|
||||||
|
<span>
|
||||||
|
</span>
|
||||||
|
</span>);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
findIconClass(file){
|
||||||
|
if(file.isFolder){
|
||||||
|
return 'folder'
|
||||||
|
}
|
||||||
|
let suffix = file.suffix;
|
||||||
|
if(!suffix && file.name){
|
||||||
|
suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
|
||||||
|
}
|
||||||
|
if(iconClass.has(suffix)){
|
||||||
|
return iconClass.get(suffix)
|
||||||
|
}
|
||||||
|
return 'file'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@ -102,6 +102,37 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</e-vue-contextmenu>
|
</e-vue-contextmenu>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
class="open-file-dialog"
|
||||||
|
title="提示"
|
||||||
|
top="35vh"
|
||||||
|
:visible.sync="openCompressionVisible">
|
||||||
|
<svg-icon icon-class="open-folder"></svg-icon> <span class="dialog-msg">查看压缩文件</span>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button size="small" >解压到...</el-button>
|
||||||
|
<el-button size="small" @click="unzip(openingFile,openingFile.id,false)">解压到当前目录</el-button>
|
||||||
|
<el-button size="small" type="primary" @click=compressionFilePreview(openingFile)>预览</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
class="open-file-dialog"
|
||||||
|
title="提示"
|
||||||
|
top="35vh"
|
||||||
|
:visible.sync="notPreviewDialogVisible">
|
||||||
|
<svg-icon icon-class="warring"></svg-icon> <span class="dialog-msg">此文件不支持预览, 是否下载该文件?</span>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button size="small" @click="forciblyOpen(openingFile)">强行使用文本编辑器打开</el-button>
|
||||||
|
<el-button size="small" @click="notPreviewDialogVisible = false">取 消</el-button>
|
||||||
|
<el-button size="small" type="primary" @click=determineDownload(openingFile)>确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!--展示压缩文件-->
|
||||||
|
<el-dialog class="compressed-file-dialog" :title="'预览:'+compressedFileName" :visible.sync="compressedFileVisible">
|
||||||
|
<file-tree :directoryTreeData="compressedFileData" :tempDir="compressedFileTempDir"></file-tree>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
<!--移动或复制弹出框-->
|
<!--移动或复制弹出框-->
|
||||||
<el-dialog
|
<el-dialog
|
||||||
:title="'移动或复制到'+selectTreeNode.showName"
|
:title="'移动或复制到'+selectTreeNode.showName"
|
||||||
@ -404,6 +435,9 @@
|
|||||||
import VideoPreview from "@/components/preview/VideoPreview";
|
import VideoPreview from "@/components/preview/VideoPreview";
|
||||||
import AudioPreview from "@/components/preview/AudioPreview";
|
import AudioPreview from "@/components/preview/AudioPreview";
|
||||||
import ButtonUpload from "@/components/button/ButtonUpload";
|
import ButtonUpload from "@/components/button/ButtonUpload";
|
||||||
|
|
||||||
|
import FileTree from"@/components/FileTree"
|
||||||
|
|
||||||
import '@/utils/directives.js'
|
import '@/utils/directives.js'
|
||||||
|
|
||||||
import 'pl-table/themes/index.css';
|
import 'pl-table/themes/index.css';
|
||||||
@ -415,7 +449,8 @@
|
|||||||
components: {AudioPreview, VideoPreview, ImageViewer, SimTextPreview, IconFile, BreadcrumbFilePath, EmptyFile,
|
components: {AudioPreview, VideoPreview, ImageViewer, SimTextPreview, IconFile, BreadcrumbFilePath, EmptyFile,
|
||||||
PlTable,
|
PlTable,
|
||||||
PlTableColumn,
|
PlTableColumn,
|
||||||
ButtonUpload
|
ButtonUpload,
|
||||||
|
FileTree
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
isCollectView: {
|
isCollectView: {
|
||||||
@ -579,7 +614,10 @@
|
|||||||
cellMouseIndex: -1,
|
cellMouseIndex: -1,
|
||||||
editingIndex: -1,
|
editingIndex: -1,
|
||||||
dialogMoveOrCopyVisible: false,
|
dialogMoveOrCopyVisible: false,
|
||||||
|
compressedFileVisible: false,
|
||||||
directoryTreeData: [],
|
directoryTreeData: [],
|
||||||
|
compressedFileData: [],
|
||||||
|
compressedFileName: '',
|
||||||
selectTreeNode: {},
|
selectTreeNode: {},
|
||||||
directoryTreeProps: {
|
directoryTreeProps: {
|
||||||
label: 'name',
|
label: 'name',
|
||||||
@ -618,6 +656,10 @@
|
|||||||
dragElementList: [],
|
dragElementList: [],
|
||||||
drawFlag: false,
|
drawFlag: false,
|
||||||
fileListScrollTop: 0,
|
fileListScrollTop: 0,
|
||||||
|
notPreviewDialogVisible: false,
|
||||||
|
openingFile: '',
|
||||||
|
openCompressionVisible: false,
|
||||||
|
compressedFileTempDir: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -2356,8 +2398,43 @@
|
|||||||
}
|
}
|
||||||
},300)
|
},300)
|
||||||
},
|
},
|
||||||
|
// 预览压缩文件
|
||||||
|
compressionFilePreview(file){
|
||||||
|
this.unzip(file,undefined,true)
|
||||||
|
},
|
||||||
|
// 解压文件
|
||||||
|
unzip(file, destFileId, tempDir) {
|
||||||
|
let status = '解压'
|
||||||
|
let decompressing = this.$message({
|
||||||
|
iconClass: 'el-icon-loading',
|
||||||
|
type: 'info',
|
||||||
|
duration: 0,
|
||||||
|
dangerouslyUseHTMLString: true,
|
||||||
|
message: '<span> 正在'+status+'</span>'
|
||||||
|
});
|
||||||
|
api.unzip({
|
||||||
|
fileId: file.id,
|
||||||
|
destFileId: destFileId
|
||||||
|
}).then((res) => {
|
||||||
|
decompressing.iconClass = null
|
||||||
|
decompressing.type = 'success'
|
||||||
|
decompressing.message = status+'成功'
|
||||||
|
|
||||||
|
this.compressedFileData = res.data
|
||||||
|
this.compressedFileVisible = true
|
||||||
|
this.compressedFileName = file.name
|
||||||
|
this.compressedFileTempDir = tempDir
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
decompressing.close()
|
||||||
|
},1000)
|
||||||
|
}).catch(() => {
|
||||||
|
decompressing.close()
|
||||||
|
})
|
||||||
|
},
|
||||||
// 点击文件或文件夹
|
// 点击文件或文件夹
|
||||||
fileClick(row) {
|
fileClick(row) {
|
||||||
|
this.openingFile = row
|
||||||
if (row.isFolder) {
|
if (row.isFolder) {
|
||||||
this.editingIndex = -1
|
this.editingIndex = -1
|
||||||
// 打开文件夹
|
// 打开文件夹
|
||||||
@ -2415,19 +2492,46 @@
|
|||||||
this.$router.push(`/public/articles/article?mark=${row.id}`)
|
this.$router.push(`/public/articles/article?mark=${row.id}`)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
if(suffix.compressedFile.includes(row.suffix)){
|
||||||
|
// this.unzip(row)
|
||||||
|
this.openCompressionVisible = true
|
||||||
|
return
|
||||||
|
}
|
||||||
// 打开文件
|
// 打开文件
|
||||||
let fileIds = [row.id]
|
let fileIds = [row.id]
|
||||||
|
|
||||||
this.$confirm('此文件不支持预览, 是否下载该文件?', '提示', {
|
this.notPreviewDialogVisible = true
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
// this.$confirm('此文件不支持预览, 是否下载该文件?', '提示', {
|
||||||
type: 'warning'
|
// confirmButtonText: '确定',
|
||||||
}).then(() => {
|
// cancelButtonText: '强行使用文本编辑器打开',
|
||||||
let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
|
// type: 'warning',
|
||||||
window.open(url, '_self')
|
// distinguishCancelAndClose: true
|
||||||
})
|
// }).then(() => {
|
||||||
|
// let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
|
||||||
|
// window.open(url, '_self')
|
||||||
|
// }).catch(() => {
|
||||||
|
// this.textPreviewRow = row
|
||||||
|
// this.textPreviewVisible = true
|
||||||
|
// })
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
// 强行使用文本编辑器打开
|
||||||
|
forciblyOpen(file) {
|
||||||
|
this.textPreviewRow = file
|
||||||
|
this.textPreviewVisible = true
|
||||||
|
const that = this
|
||||||
|
setTimeout(function () {
|
||||||
|
that.notPreviewDialogVisible = false
|
||||||
|
},100)
|
||||||
|
},
|
||||||
|
determineDownload(file) {
|
||||||
|
this.downLaod(file)
|
||||||
|
this.notPreviewDialogVisible = false
|
||||||
|
},
|
||||||
|
downLaod(file){
|
||||||
|
window.open(`${process.env.VUE_APP_BASE_FILE_API}preview/${file.name}?jmal-token=${this.$store.state.user.token}&fileIds=${file.id}`, '_self')
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -2518,5 +2622,16 @@
|
|||||||
/deep/.el-input-tree-button {
|
/deep/.el-input-tree-button {
|
||||||
margin-left: 5px!important;
|
margin-left: 5px!important;
|
||||||
}
|
}
|
||||||
|
/deep/.open-file-dialog {
|
||||||
|
.el-dialog {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
.svg-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.dialog-msg {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@ -66,6 +66,10 @@
|
|||||||
type: String,
|
type: String,
|
||||||
default: undefined
|
default: undefined
|
||||||
},
|
},
|
||||||
|
filepath: {
|
||||||
|
type: String,
|
||||||
|
default: undefined
|
||||||
|
},
|
||||||
status: {
|
status: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: function () {
|
default: function () {
|
||||||
@ -160,15 +164,20 @@
|
|||||||
if(this.shareId){
|
if(this.shareId){
|
||||||
request = 'sharePreviewText'
|
request = 'sharePreviewText'
|
||||||
}
|
}
|
||||||
|
if(this.filepath){
|
||||||
|
request = 'previewTextByPath'
|
||||||
|
this.options.readOnly = true
|
||||||
|
}
|
||||||
api[request]({
|
api[request]({
|
||||||
shareId: this.shareId,
|
shareId: this.shareId,
|
||||||
fileId: file.id,
|
fileId: file.id,
|
||||||
id: file.id,
|
id: file.id,
|
||||||
|
path: this.filepath,
|
||||||
username: this.$store.state.user.name
|
username: this.$store.state.user.name
|
||||||
}).then((res)=>{
|
}).then((res)=>{
|
||||||
this.loading.close()
|
this.loading.close()
|
||||||
this.textPreviewVisible = true
|
this.textPreviewVisible = true
|
||||||
this.content = res.data.contentText
|
this.content = res.data.contentText
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
this.loading.close()
|
this.loading.close()
|
||||||
})
|
})
|
||||||
@ -256,7 +265,7 @@
|
|||||||
this.setTheme()
|
this.setTheme()
|
||||||
},
|
},
|
||||||
setTheme(){
|
setTheme(){
|
||||||
let header = document.querySelector('.simtext-dialog .el-dialog__header')
|
let header = document.querySelector('.simtext-dialog .el-dialog .el-dialog__header')
|
||||||
if(this.lightTheme){
|
if(this.lightTheme){
|
||||||
header.style.background = '#FFF'
|
header.style.background = '#FFF'
|
||||||
header.style.color = '#181818'
|
header.style.color = '#181818'
|
||||||
@ -290,7 +299,6 @@
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "src/styles/markdown";
|
@import "src/styles/markdown";
|
||||||
|
|
||||||
|
|
||||||
/deep/.el-dialog {
|
/deep/.el-dialog {
|
||||||
/*width: 1035px;*/
|
/*width: 1035px;*/
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
|
|||||||
1
src/icons/svg/warring.svg
Normal file
1
src/icons/svg/warring.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg t="1590740552858" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1150" width="128" height="128"><path d="M512 1024.056889a512.568889 512.568889 0 0 1-512-512 512.625778 512.625778 0 0 1 512-512 512.568889 512.568889 0 0 1 512 512 512.512 512.512 0 0 1-512 512z m0-284.444445a56.888889 56.888889 0 0 0-55.978667 46.762667A57.856 57.856 0 0 0 455.111111 796.444444a56.888889 56.888889 0 0 0 56.888889 56.888889 56.888889 56.888889 0 0 0 55.921778-46.762666 55.296 55.296 0 0 0 0.967111-10.069334 56.888889 56.888889 0 0 0-56.888889-56.888889z m0-560.64a52.679111 52.679111 0 0 0-47.843556 40.675556 42.496 42.496 0 0 0-0.796444 8.021333v357.262223a51.996444 51.996444 0 0 0 48.64 48.753777 53.020444 53.020444 0 0 0 48.753778-40.675555V227.612444a51.996444 51.996444 0 0 0-48.64-48.696888z" fill="#FFC320" p-id="1151"></path></svg>
|
||||||
|
After Width: | Height: | Size: 880 B |
@ -6,7 +6,10 @@ export const suffix = {
|
|||||||
'xml','xsl','iml','m','bas','prg','cmd',
|
'xml','xsl','iml','m','bas','prg','cmd',
|
||||||
'sass','sas','php','lst','key','pem','log',
|
'sass','sas','php','lst','key','pem','log',
|
||||||
'cmake','db','gradle','bat'
|
'cmake','db','gradle','bat'
|
||||||
]
|
],
|
||||||
|
compressedFile: [
|
||||||
|
'zip'
|
||||||
|
],
|
||||||
}
|
}
|
||||||
|
|
||||||
monaco.languages.getLanguages().forEach(language => {
|
monaco.languages.getLanguages().forEach(language => {
|
||||||
|
|||||||
@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="padding:30px;">
|
|
||||||
<el-alert :closable="false" title="menu 1">
|
|
||||||
<router-view />
|
|
||||||
</el-alert>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="padding:30px;">
|
|
||||||
<el-alert :closable="false" title="menu 1-1" type="success">
|
|
||||||
<router-view />
|
|
||||||
</el-alert>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="padding:30px;">
|
|
||||||
<el-alert :closable="false" title="menu 1-2" type="success">
|
|
||||||
<router-view />
|
|
||||||
</el-alert>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<template functional>
|
|
||||||
<div style="padding:30px;">
|
|
||||||
<el-alert :closable="false" title="menu 1-2-1" type="warning" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<template functional>
|
|
||||||
<div style="padding:30px;">
|
|
||||||
<el-alert :closable="false" title="menu 1-2-2" type="warning" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<template functional>
|
|
||||||
<div style="padding:30px;">
|
|
||||||
<el-alert :closable="false" title="menu 1-3" type="success" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="padding:30px;">
|
|
||||||
<el-alert :closable="false" title="menu 2" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-html="htms"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
converter.setOption('tables', true); // 将表格显示出来
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
htms: ""
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.setMakedown()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setMakedown() {
|
|
||||||
this.htms = converter.makeHtml('# 这是一个标题')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,184 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Title</title>
|
|
||||||
<style>
|
|
||||||
.process-area {
|
|
||||||
width: 140px;
|
|
||||||
height: 140px;
|
|
||||||
background: #eee;
|
|
||||||
margin: auto;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: relative;
|
|
||||||
transition: .5s;
|
|
||||||
}
|
|
||||||
.process-anime {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
border: 4px solid #fff;
|
|
||||||
transform: translate(-50%,-50%);
|
|
||||||
width: 130px;
|
|
||||||
height: 130px;
|
|
||||||
background: linear-gradient(45deg,#fde47c,#fdeca6);
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.process-anime .cube-a {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
background: rgba(53,53,53,.3);
|
|
||||||
width: 130px;
|
|
||||||
height: 130px;
|
|
||||||
border-radius: 50px;
|
|
||||||
animation: fx-rotate 15s infinite linear;
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
transition: .5s;
|
|
||||||
}
|
|
||||||
.process-anime .cube-b {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
background: #fff;
|
|
||||||
width: 130px;
|
|
||||||
height: 130px;
|
|
||||||
border-radius: 50px;
|
|
||||||
animation: fx-rotate 10s infinite reverse linear;
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
transition: .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**成功**/
|
|
||||||
.process-anime .done {
|
|
||||||
position: absolute;
|
|
||||||
width: 56px;
|
|
||||||
height: 56px;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%,-50%) scale(2.25);
|
|
||||||
}
|
|
||||||
.process-anime .done .checkmark {
|
|
||||||
width: 56px;
|
|
||||||
height: 56px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: block;
|
|
||||||
stroke-width: 2;
|
|
||||||
stroke: #fff;
|
|
||||||
stroke-miterlimit: 10;
|
|
||||||
box-shadow: inset 0 0 0 #fdda65;
|
|
||||||
animation: fill-data-v-93100324 .4s ease-in-out .4s forwards,scale-data-v-93100324 .3s ease-in-out .9s both;
|
|
||||||
}
|
|
||||||
.process-anime .done .checkmark__check {
|
|
||||||
transform: translate(2px,2px);
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
stroke-dasharray: 48;
|
|
||||||
stroke-dashoffset: 48;
|
|
||||||
animation: stroke-data-v-93100324 .3s cubic-bezier(.65,0,.45,1) .8s forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
*{
|
|
||||||
margin:0;
|
|
||||||
}
|
|
||||||
.box{
|
|
||||||
width: 130px;
|
|
||||||
height: 130px;
|
|
||||||
margin: 130px auto;
|
|
||||||
background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, rgba(255,234,149,0.96) 68%);
|
|
||||||
border-radius: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.box:before{
|
|
||||||
content: '';
|
|
||||||
width: 130px;
|
|
||||||
height: 130px;
|
|
||||||
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,234,149,0.96) 68%);
|
|
||||||
border-radius: 100%;
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
top: 10px;
|
|
||||||
}
|
|
||||||
/*.box:after{*/
|
|
||||||
/*content: '';*/
|
|
||||||
/*width: 160px;*/
|
|
||||||
/*height: 160px;*/
|
|
||||||
/*background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,234,149,1) 50%);*/
|
|
||||||
/*border-radius: 100%;*/
|
|
||||||
/*position: absolute;*/
|
|
||||||
/*left: 20px;*/
|
|
||||||
/*top: 20px;*/
|
|
||||||
/*}*/
|
|
||||||
.wave{
|
|
||||||
margin-top: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 210px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.parallax>use {
|
|
||||||
animation: wave-move 5s linear infinite;
|
|
||||||
animation-duration: 1.5s;
|
|
||||||
}
|
|
||||||
.parallax>use:nth-child(1) {
|
|
||||||
animation-delay: -.5s;
|
|
||||||
}
|
|
||||||
.parallax>use:nth-child(2) {
|
|
||||||
animation-delay: -.9s;
|
|
||||||
}
|
|
||||||
.parallax>use:nth-child(3) {
|
|
||||||
animation-delay: -1.5s;
|
|
||||||
}
|
|
||||||
@keyframes wave-move {
|
|
||||||
0% {
|
|
||||||
transform: translate(90px,0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate(-85px,0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes fx-rotate {
|
|
||||||
0% {
|
|
||||||
transform: translate(-50%) rotate(0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate(-50%,2px) rotate(365deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="process-area">
|
|
||||||
<div class="process-anime">
|
|
||||||
<div class="cube-a" style="top: -60%;"></div>
|
|
||||||
<div class="cube-b" style="top: -60%;"></div><!----></div>
|
|
||||||
|
|
||||||
<div data-v-93100324="" class="done">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="done-icon checkmark">
|
|
||||||
<path d="M14.1 27.2l7.1 7.2 16.7-16.8" class="checkmark__check" style="fill: transparent;"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="box">
|
|
||||||
<svg class="wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 200 210">
|
|
||||||
<defs>
|
|
||||||
<path id="wave-shape" stroke="rgba(255,255,255,.8)" stroke-width=".5" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 58-18 88-18 58 18 88 18 v185h-528z"></path>
|
|
||||||
</defs>
|
|
||||||
<g class="parallax">
|
|
||||||
<use xlink:href="#wave-shape" x="50" y="0" fill="url(#linear)"></use>
|
|
||||||
<use xlink:href="#wave-shape" x="50" y="3" fill="url(#linear)"></use>
|
|
||||||
<use xlink:href="#wave-shape" x="50" y="6" fill="url(#linear)"></use>
|
|
||||||
</g>
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(90)">
|
|
||||||
<stop offset="10%" stop-color="#FDD936" stop-opacity="0.4" />
|
|
||||||
<stop offset="80%" stop-color="#E6911B" stop-opacity="0.8" />
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<style>
|
|
||||||
#aaa {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
background: blue;
|
|
||||||
transition: all 2s;
|
|
||||||
-moz-transition: all 2s; /* Firefox 4 */
|
|
||||||
-webkit-transition: all 2s; /* Safari and Chrome */
|
|
||||||
-o-transition: all 2s; /* Opera */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
function big() {
|
|
||||||
document.getElementById("aaa").style.width = "300px";
|
|
||||||
document.getElementById("aaa").style.height = "300px";
|
|
||||||
}
|
|
||||||
function small() {
|
|
||||||
document.getElementById("aaa").style.width = "100px";
|
|
||||||
document.getElementById("aaa").style.height = "100px";
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<button onclick="big()">Big</button>
|
|
||||||
<button onclick="small()">Small</button>
|
|
||||||
<div id="aaa"></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,206 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
||||||
<title>js仿360桌面悬浮球拖拽到边缘自动贴边特效</title>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#drag-ball {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
background: #ddd;
|
|
||||||
position: fixed;
|
|
||||||
cursor: move;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 4px solid #66cc66;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: url('test.jpeg') no-repeat center center;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="drag-ball"></div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
// 自动吸附距离
|
|
||||||
var marginOffset = 50;
|
|
||||||
|
|
||||||
var ball = document.querySelector('#drag-ball');
|
|
||||||
var ballWidth = ball.offsetWidth;
|
|
||||||
var ballHeight = ball.offsetHeight;
|
|
||||||
var cuntWidth = 0;
|
|
||||||
var cuntHeight = 0;
|
|
||||||
// ball.style.left = parseInt(Math.random() * (document.body.offsetWidth - ballWidth)) + 'px';
|
|
||||||
// ball.style.top = parseInt(Math.random() * (document.body.offsetHeight - ballHeight)) + 'px';
|
|
||||||
|
|
||||||
function move(obj, w, h) {
|
|
||||||
if (obj.direction === 'left') {
|
|
||||||
obj.style.left = 0 - w + 'px';
|
|
||||||
} else if (obj.direction === 'right') {
|
|
||||||
obj.style.left = document.body.offsetWidth - ballWidth + w + 'px';
|
|
||||||
}
|
|
||||||
if (obj.direction === 'top') {
|
|
||||||
obj.style.top = 0 - h + 'px';
|
|
||||||
} else if (obj.direction === 'bottom') {
|
|
||||||
obj.style.top = document.body.offsetHeight - ballHeight + h + 'px';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function rate(obj, a) {
|
|
||||||
obj.style.transform = ' rotate(' + a + ')'
|
|
||||||
}
|
|
||||||
|
|
||||||
function action(obj) {
|
|
||||||
|
|
||||||
var dir = obj.direction;
|
|
||||||
|
|
||||||
switch (dir) {
|
|
||||||
case 'left':
|
|
||||||
rate(obj, '90deg');
|
|
||||||
break;
|
|
||||||
case 'right':
|
|
||||||
rate(obj, '-90deg');
|
|
||||||
break;
|
|
||||||
case 'top':
|
|
||||||
rate(obj, '-180deg');
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
rate(obj, '-0');
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function ballMove(ballDynamicLeft,ballDynamicTop) {
|
|
||||||
cuntWidth = 0;
|
|
||||||
cuntHeight = 0;
|
|
||||||
ball.direction = '';
|
|
||||||
ball.style.transition = '';
|
|
||||||
ball.style.left = ballDynamicLeft + 'px';
|
|
||||||
ball.style.top = ballDynamicTop + 'px';
|
|
||||||
if (ballDynamicLeft < marginOffset) {
|
|
||||||
ball.direction = 'left';
|
|
||||||
if (ballDynamicLeft < 1) {
|
|
||||||
move(ball, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (ballDynamicTop < marginOffset) {
|
|
||||||
ball.direction = 'top';
|
|
||||||
if (ballDynamicTop < 1) {
|
|
||||||
move(ball, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (ballDynamicLeft > document.body.offsetWidth - ballWidth - marginOffset) {
|
|
||||||
ball.direction = 'right';
|
|
||||||
if (ballDynamicLeft > document.body.offsetWidth - ballWidth - 1) {
|
|
||||||
move(ball, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (ballDynamicTop > document.body.offsetHeight - ballHeight - marginOffset) {
|
|
||||||
ball.direction = 'bottom';
|
|
||||||
if (ballDynamicTop > document.body.offsetHeight - ballHeight - 1) {
|
|
||||||
move(ball, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/***
|
|
||||||
* 移动端
|
|
||||||
*/
|
|
||||||
ball.addEventListener('touchstart', function (e) {
|
|
||||||
var ballLeft = e.touches[0].clientX - ball.offsetLeft;
|
|
||||||
var ballTop = e.touches[0].clientY - ball.offsetTop;
|
|
||||||
move(this, 0, 0);
|
|
||||||
rate(this, 0)
|
|
||||||
document.addEventListener('touchmove', function (e) {
|
|
||||||
var ballDynamicLeft = e.touches[0].clientX - ballLeft
|
|
||||||
var ballDynamicTop = e.touches[0].clientY - ballTop
|
|
||||||
ballMove(ballDynamicLeft,ballDynamicTop)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
ball.addEventListener('touchend', function () {
|
|
||||||
this.style.transition = '.5s';
|
|
||||||
move(this, ballWidth / 2, ballHeight / 2);
|
|
||||||
action(this);
|
|
||||||
})
|
|
||||||
|
|
||||||
/***
|
|
||||||
* pc端
|
|
||||||
*/
|
|
||||||
ball.onmousedown = function (e) {
|
|
||||||
var ballLeft = e.clientX - ball.offsetLeft;
|
|
||||||
var ballTop = e.clientY - ball.offsetTop;
|
|
||||||
document.onmousemove = function (e) {
|
|
||||||
cuntWidth = 0;
|
|
||||||
cuntHeight = 0;
|
|
||||||
var ballDynamicLeft = e.clientX - ballLeft
|
|
||||||
var ballDynamicTop = e.clientY - ballTop
|
|
||||||
ballMove(ballDynamicLeft,ballDynamicTop)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ball.onmouseover = function () {
|
|
||||||
move(this, 0, 0);
|
|
||||||
rate(this, 0)
|
|
||||||
}
|
|
||||||
|
|
||||||
ball.onmouseout = function () {
|
|
||||||
move(this, ballWidth / 2, ballHeight / 2);
|
|
||||||
action(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
ball.onmouseup = function () {
|
|
||||||
document.onmousemove = null;
|
|
||||||
this.style.transition = '.5s';
|
|
||||||
move(this, ballWidth / 2, ballHeight / 2);
|
|
||||||
action(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.onresize = function () {
|
|
||||||
var bodyH = document.body.offsetHeight;
|
|
||||||
var ballTop = ball.offsetTop;
|
|
||||||
var bodyW = document.body.offsetWidth;
|
|
||||||
var ballLeft = ball.offsetLeft;
|
|
||||||
|
|
||||||
if (ballTop + ballHeight > bodyH) {
|
|
||||||
ball.style.top = bodyH - ballHeight + 'px';
|
|
||||||
cuntHeight++;
|
|
||||||
}
|
|
||||||
if (bodyH > ballTop && cuntHeight > 0) {
|
|
||||||
ball.style.top = bodyH - ballHeight + 'px';
|
|
||||||
}
|
|
||||||
if (ballLeft + ballWidth > bodyW) {
|
|
||||||
ball.style.left = bodyW - ballWidth + 'px';
|
|
||||||
cuntWidth++;
|
|
||||||
}
|
|
||||||
if (bodyW > ballLeft && cuntWidth > 0) {
|
|
||||||
ball.style.left = bodyW - ballWidth + 'px';
|
|
||||||
}
|
|
||||||
move(ball, ballWidth / 2, ballHeight / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB |
@ -1,29 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang=en>
|
|
||||||
<title>Example of DataTransfer.setDragImage()</title>
|
|
||||||
<meta name="viewport" content="width=device-width">
|
|
||||||
<style>
|
|
||||||
div {
|
|
||||||
margin: 0em;
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
#source {
|
|
||||||
color: blue;
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
#target {
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
</script>
|
|
||||||
<body>
|
|
||||||
<img src="../../assets/img/moveFile.png">
|
|
||||||
<h1>Example of <code>DataTransfer.setDragImage()</code></h1>
|
|
||||||
<div>
|
|
||||||
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
|
|
||||||
Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
|
|
||||||
</div>
|
|
||||||
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,281 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
||||||
<title>悬浮小球不旋转</title>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*#drag-ball {*/
|
|
||||||
/*width: 100px;*/
|
|
||||||
/*height: 100px;*/
|
|
||||||
/*position: fixed;*/
|
|
||||||
/*cursor: pointer;*/
|
|
||||||
/*box-sizing: border-box;*/
|
|
||||||
/*border-radius: 50%;*/
|
|
||||||
/*background-size: 100% 100%;*/
|
|
||||||
/*overflow: hidden;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
.process-area {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
cursor: pointer;
|
|
||||||
background: #eee;
|
|
||||||
margin: auto;
|
|
||||||
overflow: hidden;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: fixed;
|
|
||||||
transition: .5s;
|
|
||||||
}
|
|
||||||
.process-anime {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
border: 4px solid #fff;
|
|
||||||
transform: translate(-50%,-50%);
|
|
||||||
width: 90px;
|
|
||||||
height: 90px;
|
|
||||||
background: linear-gradient(45deg,#fde47c,#fdeca6);
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.process-anime .cube-a {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
background: rgba(53,53,53,.3);
|
|
||||||
width: 130px;
|
|
||||||
height: 130px;
|
|
||||||
border-radius: 50px;
|
|
||||||
animation: fx-rotate 15s infinite linear;
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
transition: .5s;
|
|
||||||
}
|
|
||||||
.process-anime .cube-b {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
background: #fff;
|
|
||||||
width: 130px;
|
|
||||||
height: 130px;
|
|
||||||
border-radius: 50px;
|
|
||||||
animation: fx-rotate 10s infinite reverse linear;
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
transition: .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fx-rotate {
|
|
||||||
0% {
|
|
||||||
transform: translate(-50%) rotate(0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate(-50%,2px) rotate(365deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<!--<div id="drag-ball"></div>-->
|
|
||||||
|
|
||||||
<div class="process-area" id="drag-ball">
|
|
||||||
<div class="process-anime">
|
|
||||||
<div class="cube-a" style="top: -70%;"></div>
|
|
||||||
<div class="cube-b" style="top: -70%;"></div><!----></div>
|
|
||||||
|
|
||||||
<!--<div data-v-93100324="" class="done">-->
|
|
||||||
<!--<svg xmlns="http://www.w3.org/2000/svg" class="done-icon checkmark">-->
|
|
||||||
<!--<path d="M14.1 27.2l7.1 7.2 16.7-16.8" class="checkmark__check" style="fill: transparent;"></path>-->
|
|
||||||
<!--</svg>-->
|
|
||||||
<!--</div>-->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
// 自动吸附距离
|
|
||||||
var marginOffset = 100;
|
|
||||||
|
|
||||||
var ball = document.querySelector('#drag-ball');
|
|
||||||
var ballWidth = ball.offsetWidth;
|
|
||||||
var ballHeight = ball.offsetHeight;
|
|
||||||
var cuntWidth = 0;
|
|
||||||
var cuntHeight = 0;
|
|
||||||
// ball.style.left = parseInt(Math.random() * (document.body.offsetWidth - ballWidth)) + 'px';
|
|
||||||
// ball.style.top = parseInt(Math.random() * (document.body.offsetHeight - ballHeight)) + 'px';
|
|
||||||
|
|
||||||
function move(obj, w, h) {
|
|
||||||
if (obj.direction === 'left') {
|
|
||||||
obj.style.left = 0 - w + 'px';
|
|
||||||
} else if (obj.direction === 'right') {
|
|
||||||
obj.style.left = document.body.offsetWidth - ballWidth + w + 'px';
|
|
||||||
}
|
|
||||||
if (obj.direction === 'top') {
|
|
||||||
obj.style.top = 0 - h + 'px';
|
|
||||||
} else if (obj.direction === 'bottom') {
|
|
||||||
obj.style.top = document.body.offsetHeight - ballHeight + h + 'px';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function rate(obj, a) {
|
|
||||||
obj.style.transform = ' rotate(' + a + ')'
|
|
||||||
}
|
|
||||||
|
|
||||||
function action(obj) {
|
|
||||||
|
|
||||||
var dir = obj.direction;
|
|
||||||
|
|
||||||
switch (dir) {
|
|
||||||
case 'left':
|
|
||||||
rate(obj, '90deg');
|
|
||||||
break;
|
|
||||||
case 'right':
|
|
||||||
rate(obj, '-90deg');
|
|
||||||
break;
|
|
||||||
case 'top':
|
|
||||||
rate(obj, '-180deg');
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
rate(obj, '-0');
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function ballMove(ballDynamicLeft,ballDynamicTop) {
|
|
||||||
cuntWidth = 0;
|
|
||||||
cuntHeight = 0;
|
|
||||||
ball.direction = '';
|
|
||||||
ball.style.transition = '';
|
|
||||||
ball.style.left = ballDynamicLeft + 'px';
|
|
||||||
ball.style.top = ballDynamicTop + 'px';
|
|
||||||
if (ballDynamicLeft < marginOffset) {
|
|
||||||
ball.direction = 'left';
|
|
||||||
if (ballDynamicLeft < 1) {
|
|
||||||
move(ball, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (ballDynamicTop < marginOffset) {
|
|
||||||
ball.direction = 'top';
|
|
||||||
if (ballDynamicTop < 1) {
|
|
||||||
move(ball, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (ballDynamicLeft > document.body.offsetWidth - ballWidth - marginOffset) {
|
|
||||||
ball.direction = 'right';
|
|
||||||
if (ballDynamicLeft > document.body.offsetWidth - ballWidth - 1) {
|
|
||||||
move(ball, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (ballDynamicTop > document.body.offsetHeight - ballHeight - marginOffset) {
|
|
||||||
ball.direction = 'bottom';
|
|
||||||
if (ballDynamicTop > document.body.offsetHeight - ballHeight - 1) {
|
|
||||||
move(ball, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/***
|
|
||||||
* 移动端
|
|
||||||
*/
|
|
||||||
ball.addEventListener('touchstart', function (e) {
|
|
||||||
var ballLeft = e.touches[0].clientX - ball.offsetLeft;
|
|
||||||
var ballTop = e.touches[0].clientY - ball.offsetTop;
|
|
||||||
move(this, 0, 0);
|
|
||||||
rate(this, 0)
|
|
||||||
document.addEventListener('touchmove', function (e) {
|
|
||||||
var ballDynamicLeft = e.touches[0].clientX - ballLeft
|
|
||||||
var ballDynamicTop = e.touches[0].clientY - ballTop
|
|
||||||
ballMove(ballDynamicLeft,ballDynamicTop)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
ball.addEventListener('touchend', function () {
|
|
||||||
this.style.transition = '.5s';
|
|
||||||
move(this, ballWidth / 2, ballHeight / 2);
|
|
||||||
action(this);
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
/***
|
|
||||||
* pc端
|
|
||||||
*/
|
|
||||||
ball.onmousedown = function (e) {
|
|
||||||
console.log('onmousedown')
|
|
||||||
var ballLeft = e.clientX - ball.offsetLeft;
|
|
||||||
var ballTop = e.clientY - ball.offsetTop;
|
|
||||||
document.onmousemove = function (e) {
|
|
||||||
console.log('onmousemove')
|
|
||||||
cuntWidth = 0;
|
|
||||||
cuntHeight = 0;
|
|
||||||
var ballDynamicLeft = e.clientX - ballLeft
|
|
||||||
var ballDynamicTop = e.clientY - ballTop
|
|
||||||
ballMove(ballDynamicLeft,ballDynamicTop)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ball.onclick = function() {
|
|
||||||
console.log('click')
|
|
||||||
}
|
|
||||||
|
|
||||||
ball.onmouseover = function () {
|
|
||||||
console.log('onmouseover')
|
|
||||||
move(this, 0, 0);
|
|
||||||
rate(this, 0)
|
|
||||||
}
|
|
||||||
|
|
||||||
ball.onmouseout = function () {
|
|
||||||
console.log('onmouseout')
|
|
||||||
move(this, ballWidth / 2, ballHeight / 2);
|
|
||||||
// action(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
ball.onmouseup = function () {
|
|
||||||
console.log('onmouseup')
|
|
||||||
document.onmousemove = null;
|
|
||||||
this.style.transition = '.5s';
|
|
||||||
move(this, ballWidth / 2, ballHeight / 2);
|
|
||||||
// action(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.onresize = function () {
|
|
||||||
var bodyH = document.body.offsetHeight;
|
|
||||||
var ballTop = ball.offsetTop;
|
|
||||||
var bodyW = document.body.offsetWidth;
|
|
||||||
var ballLeft = ball.offsetLeft;
|
|
||||||
|
|
||||||
if (ballTop + ballHeight > bodyH) {
|
|
||||||
ball.style.top = bodyH - ballHeight + 'px';
|
|
||||||
cuntHeight++;
|
|
||||||
}
|
|
||||||
if (bodyH > ballTop && cuntHeight > 0) {
|
|
||||||
ball.style.top = bodyH - ballHeight + 'px';
|
|
||||||
}
|
|
||||||
if (ballLeft + ballWidth > bodyW) {
|
|
||||||
ball.style.left = bodyW - ballWidth + 'px';
|
|
||||||
cuntWidth++;
|
|
||||||
}
|
|
||||||
if (bodyW > ballLeft && cuntWidth > 0) {
|
|
||||||
ball.style.left = bodyW - ballWidth + 'px';
|
|
||||||
}
|
|
||||||
move(ball, ballWidth / 2, ballHeight / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang=en>
|
|
||||||
<title>Example of DataTransfer.setDragImage()</title>
|
|
||||||
<meta name="viewport" content="width=device-width">
|
|
||||||
<style>
|
|
||||||
div {
|
|
||||||
margin: 0em;
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
#source {
|
|
||||||
color: blue;
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
#target {
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
function dragstart_handler(ev) {
|
|
||||||
console.log("dragStart");
|
|
||||||
// 设置拖动的格式和数据。使用事件目标的id作为数据
|
|
||||||
// ev.dataTransfer.setData("text/plain", ev.target.id);
|
|
||||||
// 创建一个图像并且使用它作为拖动图像
|
|
||||||
// 请注意： 改变 "example.gif" 为一个已经存在的图片
|
|
||||||
// 或者，一个还没有创建出来的图片，那么浏览器将会使用默认的拖动图片
|
|
||||||
// 译者注：默认的拖动图片与拖动对象没有联系。一般是一个小型文件图标
|
|
||||||
let img = new Image();
|
|
||||||
img.src = 'https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png';
|
|
||||||
ev.dataTransfer.setDragImage(img, 10, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
function dragover_handler(ev) {
|
|
||||||
console.log("dragOver");
|
|
||||||
ev.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
function drop_handler(ev) {
|
|
||||||
console.log("Drop");
|
|
||||||
ev.preventDefault();
|
|
||||||
// 获取拖放目标的id数据
|
|
||||||
let data = ev.dataTransfer.getData("text");
|
|
||||||
ev.target.appendChild(document.getElementById(data));
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<body>
|
|
||||||
<h1>Example of <code>DataTransfer.setDragImage()</code></h1>
|
|
||||||
<div>
|
|
||||||
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
|
|
||||||
Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
|
|
||||||
</div>
|
|
||||||
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
||||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
|
|
||||||
<head>
|
|
||||||
<title>鼠标拖动画矩形</title>
|
|
||||||
<meta http-equiv="content-type" content="text/htmlcharset=utf-8">
|
|
||||||
<style type="text/css">
|
|
||||||
/*body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0padding:0}*/
|
|
||||||
/*html{color:#000overflow-y:scolloverflow:-moz-scrollbars-vertical}*/
|
|
||||||
/*.draw-rectangle{position:absolute border:1px dashed #2898ff width:0px height:0pxleft:0px top:0px overflow:hidden}*/
|
|
||||||
/*.retc{position:absolute border:1px solid #CCCCCC overflow:hidden background:#EFEFEF}*/
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body style="text-align:center;">
|
|
||||||
<div id="ddd" style="margin:0 auto;margin-top:100px;text-align: center;width: 500px;height: 5000px; border:1px solid #000000;"></div>
|
|
||||||
</body>
|
|
||||||
<script language = "javascript">
|
|
||||||
|
|
||||||
let $$ = function(id){
|
|
||||||
return document.getElementById(id)
|
|
||||||
}
|
|
||||||
let draw = $$('ddd')
|
|
||||||
let wId = "rectangle1"
|
|
||||||
let startX = 0, startY = 0
|
|
||||||
let flag = false
|
|
||||||
let retcLeft = 0, retcTop = 0, retcHeight = 0, retcWidth = 0
|
|
||||||
draw.onmousedown = function(e){
|
|
||||||
|
|
||||||
flag = true
|
|
||||||
let evt = window.event || e
|
|
||||||
console.log('evt',evt)
|
|
||||||
let scrollTop = draw.scrollTop || draw.scrollTop
|
|
||||||
let scrollLeft = draw.scrollLeft || draw.scrollLeft
|
|
||||||
startX = evt.clientX + scrollLeft
|
|
||||||
startY = evt.clientY + scrollTop
|
|
||||||
let div = document.createElement("div")
|
|
||||||
div.id = wId
|
|
||||||
div.className = "draw-rectangle"
|
|
||||||
div.style.left = evt.x + "px"
|
|
||||||
div.style.top = evt.y + "px"
|
|
||||||
div.style.position = 'absolute'
|
|
||||||
div.style.border = '1px dashed #2898ff'
|
|
||||||
div.style.width = '0px'
|
|
||||||
div.style.height = '0px'
|
|
||||||
div.style.left = '0px'
|
|
||||||
div.style.top = '0px'
|
|
||||||
div.style.overflow = 'hidden'
|
|
||||||
draw.appendChild(div)
|
|
||||||
|
|
||||||
document.onmousemove = function(e){
|
|
||||||
if(flag){
|
|
||||||
let evt = window.event || e
|
|
||||||
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
|
|
||||||
let scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft
|
|
||||||
retcLeft = (startX - evt.clientX - scrollLeft > 0 ? evt.clientX + scrollLeft : startX)
|
|
||||||
retcTop = (startY - evt.clientY - scrollTop > 0 ? evt.clientY + scrollTop : startY)
|
|
||||||
retcHeight = Math.abs(startY - evt.clientY - scrollTop)
|
|
||||||
retcWidth = Math.abs(startX - evt.clientX - scrollLeft)
|
|
||||||
$$(wId).style.left = retcLeft + 'px'
|
|
||||||
$$(wId).style.top = retcTop + 'px'
|
|
||||||
$$(wId).style.width = retcWidth + 'px'
|
|
||||||
$$(wId).style.height = retcHeight + 'px'
|
|
||||||
$$(wId).style.backgroundColor = '#f2f5fa55'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
document.onmouseup = function(){
|
|
||||||
flag = false
|
|
||||||
if($$(wId)){
|
|
||||||
console.log('left',retcLeft, 'top',retcTop, 'width',retcWidth, 'hieght',retcHeight)
|
|
||||||
// draw.removeChild($$(wId))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
<el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
|
|
||||||
|
|
||||||
<el-tree
|
|
||||||
ref="tree2"
|
|
||||||
:data="data2"
|
|
||||||
:props="defaultProps"
|
|
||||||
:filter-node-method="filterNode"
|
|
||||||
class="filter-tree"
|
|
||||||
default-expand-all
|
|
||||||
/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
filterText: '',
|
|
||||||
data2: [{
|
|
||||||
id: 1,
|
|
||||||
label: 'Level one 1',
|
|
||||||
children: [{
|
|
||||||
id: 4,
|
|
||||||
label: 'Level two 1-1',
|
|
||||||
children: [{
|
|
||||||
id: 9,
|
|
||||||
label: 'Level three 1-1-1'
|
|
||||||
}, {
|
|
||||||
id: 10,
|
|
||||||
label: 'Level three 1-1-2'
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
id: 2,
|
|
||||||
label: 'Level one 2',
|
|
||||||
children: [{
|
|
||||||
id: 5,
|
|
||||||
label: 'Level two 2-1'
|
|
||||||
}, {
|
|
||||||
id: 6,
|
|
||||||
label: 'Level two 2-2'
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
id: 3,
|
|
||||||
label: 'Level one 3',
|
|
||||||
children: [{
|
|
||||||
id: 7,
|
|
||||||
label: 'Level two 3-1'
|
|
||||||
}, {
|
|
||||||
id: 8,
|
|
||||||
label: 'Level two 3-2'
|
|
||||||
}]
|
|
||||||
}],
|
|
||||||
defaultProps: {
|
|
||||||
children: 'children',
|
|
||||||
label: 'label'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
filterText(val) {
|
|
||||||
this.$refs.tree2.filter(val)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
filterNode(value, data) {
|
|
||||||
if (!value) return true
|
|
||||||
return data.label.indexOf(value) !== -1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 背景图高斯模糊效果 -->
|
|
||||||
<div class="bgFilter">
|
|
||||||
<div class="box">
|
|
||||||
<img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582723247&t=3060bfc4978e78d3accef89c1eb7dc8e" alt="img" class="bg">
|
|
||||||
<div class="content">
|
|
||||||
<!-- <img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582723247&t=3060bfc4978e78d3accef89c1eb7dc8e" alt="img"> -->
|
|
||||||
<div class="text">我是文字我是文字我是文字</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "bgFilter"
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.bgFilter {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #000;
|
|
||||||
.box {
|
|
||||||
width: 700px;
|
|
||||||
height: 500px;
|
|
||||||
position: relative;
|
|
||||||
// 我是模糊的背景
|
|
||||||
.bg {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
-webkit-filter: blur(8px);
|
|
||||||
-moz-filter: blur(8px);
|
|
||||||
-o-filter: blur(8px);
|
|
||||||
-ms-filter: blur(8px);
|
|
||||||
filter: blur(8px);
|
|
||||||
}
|
|
||||||
// 我是图片和上面的文字
|
|
||||||
.content {
|
|
||||||
.text {
|
|
||||||
width: 100%;
|
|
||||||
padding: 30px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background-color: rgba(255, 255, 255, 0.7);
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
z-index: 1;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 5%;
|
|
||||||
transform: translate(0, -50%);
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user