82 changed files with 2453 additions and 1875 deletions
@ -1,2 +1,26 @@
@@ -1,2 +1,26 @@
|
||||
package com.ruoyi.web.controller.mapper;public class FileDao { |
||||
package com.ruoyi.web.controller.mapper; |
||||
|
||||
import com.ruoyi.system.domain.BFile; |
||||
import org.apache.ibatis.annotations.*; |
||||
import org.apache.ibatis.type.JdbcType; |
||||
|
||||
import java.util.List; |
||||
|
||||
@Mapper |
||||
public interface FileDao { |
||||
|
||||
@Select("<script>" + |
||||
"select * from b_file " + |
||||
"" + " <where> done =1 and id \n" + |
||||
"NOT IN" + |
||||
"<foreach item='t' collection='list' open='(' separator=',' close=')'>" + |
||||
"#{t}" + |
||||
"</foreach>" + |
||||
"</where>" + |
||||
"</script>") |
||||
@Results({ |
||||
@Result(column="video_name", property="videoName", jdbcType= JdbcType.VARCHAR), |
||||
|
||||
}) |
||||
public List<BFile> findByNoIds(@Param("list") List<Long> ids); |
||||
} |
||||
|
||||
@ -1,2 +1,31 @@
@@ -1,2 +1,31 @@
|
||||
package com.ruoyi.web.controller.upload;public class UploadFileController { |
||||
package com.ruoyi.web.controller.upload; |
||||
|
||||
import com.ruoyi.common.core.page.TableDataInfo; |
||||
import com.ruoyi.system.domain.SysConfig; |
||||
import org.springframework.security.access.prepost.PreAuthorize; |
||||
import org.springframework.web.bind.annotation.GetMapping; |
||||
import org.springframework.web.bind.annotation.RequestMapping; |
||||
import org.springframework.web.bind.annotation.RestController; |
||||
|
||||
import java.util.List; |
||||
|
||||
import static com.ruoyi.common.utils.PageUtils.startPage; |
||||
|
||||
@RestController |
||||
@RequestMapping("/videos") |
||||
public class VideosController { |
||||
|
||||
|
||||
|
||||
/** |
||||
* 获取参数配置列表 |
||||
*/ |
||||
/*@PreAuthorize("@ss.hasPermi('videos:list')") |
||||
@GetMapping("/list") |
||||
public TableDataInfo list(SysConfig config) |
||||
{ |
||||
startPage(); |
||||
List<SysConfig> list = configService.selectConfigList(config); |
||||
return getDataTable(list); |
||||
}*/ |
||||
} |
||||
|
||||
@ -1,2 +1,86 @@
@@ -1,2 +1,86 @@
|
||||
package com.ruoyi.web.serveice;public class UploadService { |
||||
package com.ruoyi.web.serveice; |
||||
|
||||
import com.aliyun.oss.OSS; |
||||
import com.ruoyi.framework.web.ilisteners.PutProcessData; |
||||
import com.ruoyi.framework.web.service.AliOSSService; |
||||
import com.ruoyi.system.domain.BFile; |
||||
import com.ruoyi.system.service.IBFileService; |
||||
import com.ruoyi.system.service.IBVideosService; |
||||
import com.ruoyi.web.controller.mapper.FileDao; |
||||
import com.ruoyi.web.controller.mapper.VideoDao; |
||||
import lombok.extern.slf4j.Slf4j; |
||||
import org.springframework.beans.factory.annotation.Autowired; |
||||
import org.springframework.stereotype.Component; |
||||
|
||||
import java.io.File; |
||||
import java.util.concurrent.ExecutorService; |
||||
import java.util.concurrent.Executors; |
||||
|
||||
@Slf4j |
||||
@Component |
||||
public class UploadService { |
||||
|
||||
|
||||
private ExecutorService executorService = Executors.newSingleThreadExecutor(); |
||||
|
||||
@Autowired |
||||
private IBFileService bFileService; |
||||
|
||||
@Autowired |
||||
private IBVideosService videosService; |
||||
|
||||
@Autowired |
||||
private AliOSSService ossService; |
||||
|
||||
@Autowired |
||||
private VideoDao videoDao; |
||||
|
||||
@Autowired |
||||
private FileDao fileDao; |
||||
|
||||
public void uploadFile(BFile bfile, String filename, File f, String suffix){ |
||||
OSS client = ossService.newOss(); |
||||
|
||||
executorService.submit(new Runnable() { |
||||
@Override |
||||
public void run() { |
||||
log.info("upload start v1"); |
||||
try { |
||||
//ossService.uploadSuffix(client, multipartFile.getBytes(), suffix);
|
||||
PutProcessData processData = new PutProcessData(); |
||||
processData.setId(filename); |
||||
bfile.setDone(3L); |
||||
bFileService.updateBFile(bfile); |
||||
|
||||
ossService.uploadSuffix(client, processData, filename, f, suffix,bFileService,bfile); |
||||
/*while (true) { |
||||
logger.info("upload path:{}, success:{}, fail:{}", path, processData.isSuccess(), processData.isFail()); |
||||
if (processData.isSuccess() || processData.isFail()) { |
||||
if (processData.isSuccess()) { |
||||
bfile.setPercent("100%"); |
||||
bfile.setDone(1L); |
||||
} else if (processData.isFail()) { |
||||
bfile.setPercent("-1%"); |
||||
bfile.setDone(2L); |
||||
} |
||||
|
||||
bFileService.updateBFile(bfile); |
||||
break; |
||||
} else { |
||||
bfile.setPercent(processData.getProcess() + "%"); |
||||
bFileService.updateBFile(bfile); |
||||
} |
||||
Thread.sleep(1000); |
||||
}*/ |
||||
} catch (Exception e) { |
||||
|
||||
e.printStackTrace(); |
||||
} finally { |
||||
f.delete(); |
||||
} |
||||
|
||||
|
||||
} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
@ -1,10 +1,12 @@
@@ -1,10 +1,12 @@
|
||||
package com.ruoyi.web.controller.ilisteners; |
||||
package com.ruoyi.framework.web.ilisteners; |
||||
|
||||
import lombok.Data; |
||||
|
||||
@Data |
||||
public class PutProcessData { |
||||
private Long id; |
||||
private String id; |
||||
private String process; |
||||
private boolean success=false; |
||||
private boolean fail=false; |
||||
|
||||
} |
||||
|
||||
@ -1,2 +1,119 @@
@@ -1,2 +1,119 @@
|
||||
package com.ruoyi.system.service;public class AliOSSService { |
||||
package com.ruoyi.framework.web.service; |
||||
|
||||
import cn.hutool.core.date.DateUtil; |
||||
import cn.hutool.core.util.StrUtil; |
||||
import com.aliyun.oss.OSS; |
||||
import com.aliyun.oss.OSSClientBuilder; |
||||
import com.aliyun.oss.model.PutObjectRequest; |
||||
import com.aliyun.oss.model.PutObjectResult; |
||||
import com.ruoyi.common.exception.base.BaseException; |
||||
import com.ruoyi.framework.web.ilisteners.PutObjectProgressListener; |
||||
import com.ruoyi.framework.web.ilisteners.PutProcessData; |
||||
import com.ruoyi.system.domain.BFile; |
||||
import com.ruoyi.system.service.IBFileService; |
||||
import lombok.Data; |
||||
import lombok.extern.slf4j.Slf4j; |
||||
import org.springframework.beans.factory.annotation.Value; |
||||
import org.springframework.stereotype.Service; |
||||
import java.io.ByteArrayInputStream; |
||||
import java.io.File; |
||||
import java.io.InputStream; |
||||
import java.util.UUID; |
||||
|
||||
@Data |
||||
@Slf4j |
||||
@Service |
||||
public class AliOSSService { |
||||
|
||||
@Value("${ali.oss.endpoint}") |
||||
private String endpoint = "yourEndpoint"; |
||||
|
||||
|
||||
// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
|
||||
@Value("${ali.oss.accessKey}") |
||||
private String accessKeyId = "yourAccessKeyId"; |
||||
|
||||
@Value("${ali.oss.secret}") |
||||
private String accessKeySecret = "yourAccessKeySecret"; |
||||
|
||||
|
||||
//阿里云BucketName
|
||||
@Value("${ali.oss.bucketName}") |
||||
private String bucketName; |
||||
|
||||
//阿里云绑定的域名
|
||||
@Value("${ali.oss.domain}") |
||||
private String domain; |
||||
|
||||
//阿里云路径前缀
|
||||
@Value("${ali.oss.prefix}") |
||||
private String prefix; |
||||
|
||||
|
||||
public OSS newOss() { |
||||
log.info("new oss accessKeyId:{}", accessKeyId); |
||||
return new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); |
||||
} |
||||
|
||||
public void remove(OSS client, String objectName, String path) { |
||||
if (client.doesObjectExist(objectName, path)){ |
||||
client.deleteObject(bucketName, path); |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
public String upload(OSS client, InputStream inputStream, String path) { |
||||
try { |
||||
client.putObject(bucketName, path, inputStream); |
||||
|
||||
} catch (Exception e) { |
||||
throw new BaseException("上传文件失败，请检查配置信息"); |
||||
} |
||||
|
||||
return domain + "/" + path; |
||||
} |
||||
|
||||
|
||||
public String upload(OSS client, PutProcessData processData , String fileName, File f, String path, IBFileService bFileService, BFile bile) { |
||||
try { |
||||
/*PutObjectResult putObjectResult=client.putObject(bucketName, path, inputStream);*/ |
||||
client |
||||
.putObject(new PutObjectRequest(bucketName, |
||||
path, f) |
||||
.<PutObjectRequest> withProgressListener( |
||||
new PutObjectProgressListener(processData,bFileService,bile) |
||||
)); |
||||
|
||||
} catch (Exception e) { |
||||
throw new BaseException("上传文件失败，请检查配置信息"); |
||||
} |
||||
|
||||
return domain + "/" + path; |
||||
} |
||||
public String uploadSuffix(OSS client, PutProcessData processData , String fileName, File f, String suffix,IBFileService bFileService, BFile bile) { |
||||
|
||||
return upload(client, processData, fileName, f, getPath(getPrefix(), suffix),bFileService,bile); |
||||
} |
||||
|
||||
public String uploadSuffix(OSS client, byte[] data, String suffix) { |
||||
return upload(client, new ByteArrayInputStream(data), getPath(getPrefix(), suffix)); |
||||
} |
||||
|
||||
|
||||
public String uploadSuffix(OSS client, InputStream inputStream, String suffix) { |
||||
return upload(client, inputStream, getPath(getPrefix(), suffix)); |
||||
} |
||||
|
||||
public String getPath(String prefix, String suffix) { |
||||
//生成uuid
|
||||
String uuid = UUID.randomUUID().toString().replaceAll("-", ""); |
||||
//文件路径
|
||||
String path = DateUtil.today().replaceAll("-", ""); |
||||
if (StrUtil.isNotBlank(prefix)) { |
||||
path = prefix + "/" + path; |
||||
} |
||||
|
||||
return path + suffix; |
||||
} |
||||
} |
||||
|
||||
@ -1,8 +1,8 @@
@@ -1,8 +1,8 @@
|
||||
# 页面标题 |
||||
VUE_APP_TITLE = 若依管理系统 |
||||
|
||||
# 生产环境配置 |
||||
ENV = 'production' |
||||
|
||||
# 若依管理系统/生产环境 |
||||
VUE_APP_BASE_API = '/prod-api' |
||||
# 页面标题 |
||||
VUE_APP_TITLE = 若依管理系统 |
||||
|
||||
# 生产环境配置 |
||||
ENV = 'production' |
||||
|
||||
# 若依管理系统/生产环境 |
||||
VUE_APP_BASE_API = 'http://106.15.102.28:8080' |
||||
|
||||
@ -1,10 +1,10 @@
@@ -1,10 +1,10 @@
|
||||
# 页面标题 |
||||
VUE_APP_TITLE = 若依管理系统 |
||||
|
||||
NODE_ENV = production |
||||
|
||||
# 测试环境配置 |
||||
ENV = 'staging' |
||||
|
||||
# 若依管理系统/测试环境 |
||||
VUE_APP_BASE_API = '/stage-api' |
||||
# 页面标题 |
||||
VUE_APP_TITLE = 若依管理系统 |
||||
|
||||
NODE_ENV = production |
||||
|
||||
# 测试环境配置 |
||||
ENV = 'staging' |
||||
|
||||
# 若依管理系统/测试环境 |
||||
VUE_APP_BASE_API = 'http://106.15.102.28:8080' |
||||
|
||||
@ -1,90 +1,90 @@
@@ -1,90 +1,90 @@
|
||||
{ |
||||
"name": "ruoyi", |
||||
"version": "3.8.1", |
||||
"description": "若依管理系统", |
||||
"author": "若依", |
||||
"license": "MIT", |
||||
"scripts": { |
||||
"dev": "vue-cli-service serve", |
||||
"build:prod": "vue-cli-service build", |
||||
"build:stage": "vue-cli-service build --mode staging", |
||||
"preview": "node build/index.js --preview", |
||||
"lint": "eslint --ext .js,.vue src" |
||||
}, |
||||
"husky": { |
||||
"hooks": { |
||||
"pre-commit": "lint-staged" |
||||
} |
||||
}, |
||||
"lint-staged": { |
||||
"src/**/*.{js,vue}": [ |
||||
"eslint --fix", |
||||
"git add" |
||||
] |
||||
}, |
||||
"keywords": [ |
||||
"vue", |
||||
"admin", |
||||
"dashboard", |
||||
"element-ui", |
||||
"boilerplate", |
||||
"admin-template", |
||||
"management-system" |
||||
], |
||||
"repository": { |
||||
"type": "git", |
||||
"url": "https://gitee.com/y_project/RuoYi-Vue.git" |
||||
}, |
||||
"dependencies": { |
||||
"@riophae/vue-treeselect": "0.4.0", |
||||
"axios": "0.24.0", |
||||
"clipboard": "2.0.8", |
||||
"core-js": "3.19.1", |
||||
"echarts": "4.9.0", |
||||
"element-ui": "2.15.6", |
||||
"file-saver": "2.0.5", |
||||
"fuse.js": "6.4.3", |
||||
"highlight.js": "9.18.5", |
||||
"js-beautify": "1.13.0", |
||||
"js-cookie": "3.0.1", |
||||
"jsencrypt": "3.2.1", |
||||
"nprogress": "0.2.0", |
||||
"quill": "1.3.7", |
||||
"screenfull": "5.0.2", |
||||
"sortablejs": "1.10.2", |
||||
"vue": "2.6.12", |
||||
"vue-count-to": "1.0.13", |
||||
"vue-cropper": "0.5.5", |
||||
"vue-meta": "2.4.0", |
||||
"vue-router": "3.4.9", |
||||
"vuedraggable": "2.24.3", |
||||
"vuex": "3.6.0" |
||||
}, |
||||
"devDependencies": { |
||||
"@vue/cli-plugin-babel": "4.4.6", |
||||
"@vue/cli-plugin-eslint": "4.4.6", |
||||
"@vue/cli-service": "4.4.6", |
||||
"babel-eslint": "10.1.0", |
||||
"babel-plugin-dynamic-import-node": "2.3.3", |
||||
"chalk": "4.1.0", |
||||
"compression-webpack-plugin": "5.0.2", |
||||
"connect": "3.6.6", |
||||
"eslint": "7.15.0", |
||||
"eslint-plugin-vue": "7.2.0", |
||||
"lint-staged": "10.5.3", |
||||
"runjs": "4.4.2", |
||||
"sass": "1.32.13", |
||||
"sass-loader": "10.1.1", |
||||
"script-ext-html-webpack-plugin": "2.1.5", |
||||
"svg-sprite-loader": "5.1.1", |
||||
"vue-template-compiler": "2.6.12" |
||||
}, |
||||
"engines": { |
||||
"node": ">=8.9", |
||||
"npm": ">= 3.0.0" |
||||
}, |
||||
"browserslist": [ |
||||
"> 1%", |
||||
"last 2 versions" |
||||
] |
||||
} |
||||
{ |
||||
"name": "ruoyi", |
||||
"version": "3.8.1", |
||||
"description": "若依管理系统", |
||||
"author": "若依", |
||||
"license": "MIT", |
||||
"scripts": { |
||||
"dev": "vue-cli-service serve", |
||||
"build:prod": "vue-cli-service build", |
||||
"build:stage": "vue-cli-service build --mode staging", |
||||
"preview": "node build/index.js --preview", |
||||
"lint": "eslint --ext .js,.vue src" |
||||
}, |
||||
"husky": { |
||||
"hooks": { |
||||
"pre-commit": "lint-staged" |
||||
} |
||||
}, |
||||
"lint-staged": { |
||||
"src/**/*.{js,vue}": [ |
||||
"eslint --fix", |
||||
"git add" |
||||
] |
||||
}, |
||||
"keywords": [ |
||||
"vue", |
||||
"admin", |
||||
"dashboard", |
||||
"element-ui", |
||||
"boilerplate", |
||||
"admin-template", |
||||
"management-system" |
||||
], |
||||
"repository": { |
||||
"type": "git", |
||||
"url": "https://gitee.com/y_project/RuoYi-Vue.git" |
||||
}, |
||||
"dependencies": { |
||||
"@riophae/vue-treeselect": "0.4.0", |
||||
"axios": "0.24.0", |
||||
"clipboard": "2.0.8", |
||||
"core-js": "3.19.1", |
||||
"echarts": "4.9.0", |
||||
"element-ui": "2.15.6", |
||||
"file-saver": "2.0.5", |
||||
"fuse.js": "6.4.3", |
||||
"highlight.js": "9.18.5", |
||||
"js-beautify": "1.13.0", |
||||
"js-cookie": "3.0.1", |
||||
"jsencrypt": "3.2.1", |
||||
"nprogress": "0.2.0", |
||||
"quill": "1.3.7", |
||||
"screenfull": "5.0.2", |
||||
"sortablejs": "1.10.2", |
||||
"vue": "2.6.12", |
||||
"vue-count-to": "1.0.13", |
||||
"vue-cropper": "0.5.5", |
||||
"vue-meta": "2.4.0", |
||||
"vue-router": "3.4.9", |
||||
"vuedraggable": "2.24.3", |
||||
"vuex": "3.6.0" |
||||
}, |
||||
"devDependencies": { |
||||
"@vue/cli-plugin-babel": "4.4.6", |
||||
"@vue/cli-plugin-eslint": "4.4.6", |
||||
"@vue/cli-service": "4.4.6", |
||||
"babel-eslint": "10.1.0", |
||||
"babel-plugin-dynamic-import-node": "2.3.3", |
||||
"chalk": "4.1.0", |
||||
"compression-webpack-plugin": "5.0.2", |
||||
"connect": "3.6.6", |
||||
"eslint": "7.15.0", |
||||
"eslint-plugin-vue": "7.2.0", |
||||
"lint-staged": "10.5.3", |
||||
"runjs": "4.4.2", |
||||
"sass": "1.32.13", |
||||
"sass-loader": "10.1.1", |
||||
"script-ext-html-webpack-plugin": "2.1.5", |
||||
"svg-sprite-loader": "5.1.1", |
||||
"vue-template-compiler": "2.6.12" |
||||
}, |
||||
"engines": { |
||||
"node": ">=8.9", |
||||
"npm": ">= 3.0.0" |
||||
}, |
||||
"browserslist": [ |
||||
"> 1%", |
||||
"last 2 versions" |
||||
] |
||||
} |
||||
|
||||
@ -1,208 +1,209 @@
@@ -1,208 +1,209 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
||||
<meta name="renderer" content="webkit"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||
<title><%= webpackConfig.name %></title> |
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> |
||||
<style> |
||||
html, |
||||
body, |
||||
#app { |
||||
height: 100%; |
||||
margin: 0px; |
||||
padding: 0px; |
||||
} |
||||
.chromeframe { |
||||
margin: 0.2em 0; |
||||
background: #ccc; |
||||
color: #000; |
||||
padding: 0.2em 0; |
||||
} |
||||
|
||||
#loader-wrapper { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
z-index: 999999; |
||||
} |
||||
|
||||
#loader { |
||||
display: block; |
||||
position: relative; |
||||
left: 50%; |
||||
top: 50%; |
||||
width: 150px; |
||||
height: 150px; |
||||
margin: -75px 0 0 -75px; |
||||
border-radius: 50%; |
||||
border: 3px solid transparent; |
||||
border-top-color: #FFF; |
||||
-webkit-animation: spin 2s linear infinite; |
||||
-ms-animation: spin 2s linear infinite; |
||||
-moz-animation: spin 2s linear infinite; |
||||
-o-animation: spin 2s linear infinite; |
||||
animation: spin 2s linear infinite; |
||||
z-index: 1001; |
||||
} |
||||
|
||||
#loader:before { |
||||
content: ""; |
||||
position: absolute; |
||||
top: 5px; |
||||
left: 5px; |
||||
right: 5px; |
||||
bottom: 5px; |
||||
border-radius: 50%; |
||||
border: 3px solid transparent; |
||||
border-top-color: #FFF; |
||||
-webkit-animation: spin 3s linear infinite; |
||||
-moz-animation: spin 3s linear infinite; |
||||
-o-animation: spin 3s linear infinite; |
||||
-ms-animation: spin 3s linear infinite; |
||||
animation: spin 3s linear infinite; |
||||
} |
||||
|
||||
#loader:after { |
||||
content: ""; |
||||
position: absolute; |
||||
top: 15px; |
||||
left: 15px; |
||||
right: 15px; |
||||
bottom: 15px; |
||||
border-radius: 50%; |
||||
border: 3px solid transparent; |
||||
border-top-color: #FFF; |
||||
-moz-animation: spin 1.5s linear infinite; |
||||
-o-animation: spin 1.5s linear infinite; |
||||
-ms-animation: spin 1.5s linear infinite; |
||||
-webkit-animation: spin 1.5s linear infinite; |
||||
animation: spin 1.5s linear infinite; |
||||
} |
||||
|
||||
|
||||
@-webkit-keyframes spin { |
||||
0% { |
||||
-webkit-transform: rotate(0deg); |
||||
-ms-transform: rotate(0deg); |
||||
transform: rotate(0deg); |
||||
} |
||||
100% { |
||||
-webkit-transform: rotate(360deg); |
||||
-ms-transform: rotate(360deg); |
||||
transform: rotate(360deg); |
||||
} |
||||
} |
||||
|
||||
@keyframes spin { |
||||
0% { |
||||
-webkit-transform: rotate(0deg); |
||||
-ms-transform: rotate(0deg); |
||||
transform: rotate(0deg); |
||||
} |
||||
100% { |
||||
-webkit-transform: rotate(360deg); |
||||
-ms-transform: rotate(360deg); |
||||
transform: rotate(360deg); |
||||
} |
||||
} |
||||
|
||||
|
||||
#loader-wrapper .loader-section { |
||||
position: fixed; |
||||
top: 0; |
||||
width: 51%; |
||||
height: 100%; |
||||
background: #7171C6; |
||||
z-index: 1000; |
||||
-webkit-transform: translateX(0); |
||||
-ms-transform: translateX(0); |
||||
transform: translateX(0); |
||||
} |
||||
|
||||
#loader-wrapper .loader-section.section-left { |
||||
left: 0; |
||||
} |
||||
|
||||
#loader-wrapper .loader-section.section-right { |
||||
right: 0; |
||||
} |
||||
|
||||
|
||||
.loaded #loader-wrapper .loader-section.section-left { |
||||
-webkit-transform: translateX(-100%); |
||||
-ms-transform: translateX(-100%); |
||||
transform: translateX(-100%); |
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
||||
} |
||||
|
||||
.loaded #loader-wrapper .loader-section.section-right { |
||||
-webkit-transform: translateX(100%); |
||||
-ms-transform: translateX(100%); |
||||
transform: translateX(100%); |
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
||||
} |
||||
|
||||
.loaded #loader { |
||||
opacity: 0; |
||||
-webkit-transition: all 0.3s ease-out; |
||||
transition: all 0.3s ease-out; |
||||
} |
||||
|
||||
.loaded #loader-wrapper { |
||||
visibility: hidden; |
||||
-webkit-transform: translateY(-100%); |
||||
-ms-transform: translateY(-100%); |
||||
transform: translateY(-100%); |
||||
-webkit-transition: all 0.3s 1s ease-out; |
||||
transition: all 0.3s 1s ease-out; |
||||
} |
||||
|
||||
.no-js #loader-wrapper { |
||||
display: none; |
||||
} |
||||
|
||||
.no-js h1 { |
||||
color: #222222; |
||||
} |
||||
|
||||
#loader-wrapper .load_title { |
||||
font-family: 'Open Sans'; |
||||
color: #FFF; |
||||
font-size: 19px; |
||||
width: 100%; |
||||
text-align: center; |
||||
z-index: 9999999999999; |
||||
position: absolute; |
||||
top: 60%; |
||||
opacity: 1; |
||||
line-height: 30px; |
||||
} |
||||
|
||||
#loader-wrapper .load_title span { |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
font-size: 13px; |
||||
color: #FFF; |
||||
opacity: 0.5; |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<div id="app"> |
||||
<div id="loader-wrapper"> |
||||
<div id="loader"></div> |
||||
<div class="loader-section section-left"></div> |
||||
<div class="loader-section section-right"></div> |
||||
<div class="load_title">正在加载系统资源，请耐心等待</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
||||
<meta name="renderer" content="webkit"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||
<title><%= webpackConfig.name %></title> |
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> |
||||
<style> |
||||
html, |
||||
body, |
||||
#app { |
||||
height: 100%; |
||||
margin: 0px; |
||||
padding: 0px; |
||||
} |
||||
.chromeframe { |
||||
margin: 0.2em 0; |
||||
background: #ccc; |
||||
color: #000; |
||||
padding: 0.2em 0; |
||||
} |
||||
|
||||
#loader-wrapper { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
z-index: 999999; |
||||
} |
||||
|
||||
#loader { |
||||
display: block; |
||||
position: relative; |
||||
left: 50%; |
||||
top: 50%; |
||||
width: 150px; |
||||
height: 150px; |
||||
margin: -75px 0 0 -75px; |
||||
border-radius: 50%; |
||||
border: 3px solid transparent; |
||||
border-top-color: #FFF; |
||||
-webkit-animation: spin 2s linear infinite; |
||||
-ms-animation: spin 2s linear infinite; |
||||
-moz-animation: spin 2s linear infinite; |
||||
-o-animation: spin 2s linear infinite; |
||||
animation: spin 2s linear infinite; |
||||
z-index: 1001; |
||||
} |
||||
|
||||
#loader:before { |
||||
content: ""; |
||||
position: absolute; |
||||
top: 5px; |
||||
left: 5px; |
||||
right: 5px; |
||||
bottom: 5px; |
||||
border-radius: 50%; |
||||
border: 3px solid transparent; |
||||
border-top-color: #FFF; |
||||
-webkit-animation: spin 3s linear infinite; |
||||
-moz-animation: spin 3s linear infinite; |
||||
-o-animation: spin 3s linear infinite; |
||||
-ms-animation: spin 3s linear infinite; |
||||
animation: spin 3s linear infinite; |
||||
} |
||||
|
||||
#loader:after { |
||||
content: ""; |
||||
position: absolute; |
||||
top: 15px; |
||||
left: 15px; |
||||
right: 15px; |
||||
bottom: 15px; |
||||
border-radius: 50%; |
||||
border: 3px solid transparent; |
||||
border-top-color: #FFF; |
||||
-moz-animation: spin 1.5s linear infinite; |
||||
-o-animation: spin 1.5s linear infinite; |
||||
-ms-animation: spin 1.5s linear infinite; |
||||
-webkit-animation: spin 1.5s linear infinite; |
||||
animation: spin 1.5s linear infinite; |
||||
} |
||||
|
||||
|
||||
@-webkit-keyframes spin { |
||||
0% { |
||||
-webkit-transform: rotate(0deg); |
||||
-ms-transform: rotate(0deg); |
||||
transform: rotate(0deg); |
||||
} |
||||
100% { |
||||
-webkit-transform: rotate(360deg); |
||||
-ms-transform: rotate(360deg); |
||||
transform: rotate(360deg); |
||||
} |
||||
} |
||||
|
||||
@keyframes spin { |
||||
0% { |
||||
-webkit-transform: rotate(0deg); |
||||
-ms-transform: rotate(0deg); |
||||
transform: rotate(0deg); |
||||
} |
||||
100% { |
||||
-webkit-transform: rotate(360deg); |
||||
-ms-transform: rotate(360deg); |
||||
transform: rotate(360deg); |
||||
} |
||||
} |
||||
|
||||
|
||||
#loader-wrapper .loader-section { |
||||
position: fixed; |
||||
top: 0; |
||||
width: 51%; |
||||
height: 100%; |
||||
background: #7171C6; |
||||
z-index: 1000; |
||||
-webkit-transform: translateX(0); |
||||
-ms-transform: translateX(0); |
||||
transform: translateX(0); |
||||
} |
||||
|
||||
#loader-wrapper .loader-section.section-left { |
||||
left: 0; |
||||
} |
||||
|
||||
#loader-wrapper .loader-section.section-right { |
||||
right: 0; |
||||
} |
||||
|
||||
|
||||
.loaded #loader-wrapper .loader-section.section-left { |
||||
-webkit-transform: translateX(-100%); |
||||
-ms-transform: translateX(-100%); |
||||
transform: translateX(-100%); |
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
||||
} |
||||
|
||||
.loaded #loader-wrapper .loader-section.section-right { |
||||
-webkit-transform: translateX(100%); |
||||
-ms-transform: translateX(100%); |
||||
transform: translateX(100%); |
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
||||
} |
||||
|
||||
.loaded #loader { |
||||
opacity: 0; |
||||
-webkit-transition: all 0.3s ease-out; |
||||
transition: all 0.3s ease-out; |
||||
} |
||||
|
||||
.loaded #loader-wrapper { |
||||
visibility: hidden; |
||||
-webkit-transform: translateY(-100%); |
||||
-ms-transform: translateY(-100%); |
||||
transform: translateY(-100%); |
||||
-webkit-transition: all 0.3s 1s ease-out; |
||||
transition: all 0.3s 1s ease-out; |
||||
} |
||||
|
||||
.no-js #loader-wrapper { |
||||
display: none; |
||||
} |
||||
|
||||
.no-js h1 { |
||||
color: #222222; |
||||
} |
||||
|
||||
#loader-wrapper .load_title { |
||||
font-family: 'Open Sans'; |
||||
color: #FFF; |
||||
font-size: 19px; |
||||
width: 100%; |
||||
text-align: center; |
||||
z-index: 9999999999999; |
||||
position: absolute; |
||||
top: 60%; |
||||
opacity: 1; |
||||
line-height: 30px; |
||||
} |
||||
|
||||
#loader-wrapper .load_title span { |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
font-size: 13px; |
||||
color: #FFF; |
||||
opacity: 0.5; |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<div id="app"> |
||||
<div id="loader-wrapper"> |
||||
<div id="loader"></div> |
||||
<div class="loader-section section-left"></div> |
||||
<div class="loader-section section-right"></div> |
||||
<div class="load_title">正在加载系统资源，请耐心等待</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue