82 changed files with 2453 additions and 1875 deletions
@ -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 @@ |
|||||||
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 @@ |
|||||||
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 @@ |
|||||||
package com.ruoyi.web.controller.ilisteners; |
package com.ruoyi.framework.web.ilisteners; |
||||||
|
|
||||||
import lombok.Data; |
import lombok.Data; |
||||||
|
|
||||||
@Data |
@Data |
||||||
public class PutProcessData { |
public class PutProcessData { |
||||||
private Long id; |
private String id; |
||||||
private String process; |
private String process; |
||||||
|
private boolean success=false; |
||||||
|
private boolean fail=false; |
||||||
|
|
||||||
} |
} |
||||||
|
@ -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 @@ |
|||||||
# 页面标题 |
# 页面标题 |
||||||
VUE_APP_TITLE = 若依管理系统 |
VUE_APP_TITLE = 若依管理系统 |
||||||
|
|
||||||
# 生产环境配置 |
# 生产环境配置 |
||||||
ENV = 'production' |
ENV = 'production' |
||||||
|
|
||||||
# 若依管理系统/生产环境 |
# 若依管理系统/生产环境 |
||||||
VUE_APP_BASE_API = '/prod-api' |
VUE_APP_BASE_API = 'http://106.15.102.28:8080' |
||||||
|
@ -1,10 +1,10 @@ |
|||||||
# 页面标题 |
# 页面标题 |
||||||
VUE_APP_TITLE = 若依管理系统 |
VUE_APP_TITLE = 若依管理系统 |
||||||
|
|
||||||
NODE_ENV = production |
NODE_ENV = production |
||||||
|
|
||||||
# 测试环境配置 |
# 测试环境配置 |
||||||
ENV = 'staging' |
ENV = 'staging' |
||||||
|
|
||||||
# 若依管理系统/测试环境 |
# 若依管理系统/测试环境 |
||||||
VUE_APP_BASE_API = '/stage-api' |
VUE_APP_BASE_API = 'http://106.15.102.28:8080' |
||||||
|
@ -1,90 +1,90 @@ |
|||||||
{ |
{ |
||||||
"name": "ruoyi", |
"name": "ruoyi", |
||||||
"version": "3.8.1", |
"version": "3.8.1", |
||||||
"description": "若依管理系统", |
"description": "若依管理系统", |
||||||
"author": "若依", |
"author": "若依", |
||||||
"license": "MIT", |
"license": "MIT", |
||||||
"scripts": { |
"scripts": { |
||||||
"dev": "vue-cli-service serve", |
"dev": "vue-cli-service serve", |
||||||
"build:prod": "vue-cli-service build", |
"build:prod": "vue-cli-service build", |
||||||
"build:stage": "vue-cli-service build --mode staging", |
"build:stage": "vue-cli-service build --mode staging", |
||||||
"preview": "node build/index.js --preview", |
"preview": "node build/index.js --preview", |
||||||
"lint": "eslint --ext .js,.vue src" |
"lint": "eslint --ext .js,.vue src" |
||||||
}, |
}, |
||||||
"husky": { |
"husky": { |
||||||
"hooks": { |
"hooks": { |
||||||
"pre-commit": "lint-staged" |
"pre-commit": "lint-staged" |
||||||
} |
} |
||||||
}, |
}, |
||||||
"lint-staged": { |
"lint-staged": { |
||||||
"src/**/*.{js,vue}": [ |
"src/**/*.{js,vue}": [ |
||||||
"eslint --fix", |
"eslint --fix", |
||||||
"git add" |
"git add" |
||||||
] |
] |
||||||
}, |
}, |
||||||
"keywords": [ |
"keywords": [ |
||||||
"vue", |
"vue", |
||||||
"admin", |
"admin", |
||||||
"dashboard", |
"dashboard", |
||||||
"element-ui", |
"element-ui", |
||||||
"boilerplate", |
"boilerplate", |
||||||
"admin-template", |
"admin-template", |
||||||
"management-system" |
"management-system" |
||||||
], |
], |
||||||
"repository": { |
"repository": { |
||||||
"type": "git", |
"type": "git", |
||||||
"url": "https://gitee.com/y_project/RuoYi-Vue.git" |
"url": "https://gitee.com/y_project/RuoYi-Vue.git" |
||||||
}, |
}, |
||||||
"dependencies": { |
"dependencies": { |
||||||
"@riophae/vue-treeselect": "0.4.0", |
"@riophae/vue-treeselect": "0.4.0", |
||||||
"axios": "0.24.0", |
"axios": "0.24.0", |
||||||
"clipboard": "2.0.8", |
"clipboard": "2.0.8", |
||||||
"core-js": "3.19.1", |
"core-js": "3.19.1", |
||||||
"echarts": "4.9.0", |
"echarts": "4.9.0", |
||||||
"element-ui": "2.15.6", |
"element-ui": "2.15.6", |
||||||
"file-saver": "2.0.5", |
"file-saver": "2.0.5", |
||||||
"fuse.js": "6.4.3", |
"fuse.js": "6.4.3", |
||||||
"highlight.js": "9.18.5", |
"highlight.js": "9.18.5", |
||||||
"js-beautify": "1.13.0", |
"js-beautify": "1.13.0", |
||||||
"js-cookie": "3.0.1", |
"js-cookie": "3.0.1", |
||||||
"jsencrypt": "3.2.1", |
"jsencrypt": "3.2.1", |
||||||
"nprogress": "0.2.0", |
"nprogress": "0.2.0", |
||||||
"quill": "1.3.7", |
"quill": "1.3.7", |
||||||
"screenfull": "5.0.2", |
"screenfull": "5.0.2", |
||||||
"sortablejs": "1.10.2", |
"sortablejs": "1.10.2", |
||||||
"vue": "2.6.12", |
"vue": "2.6.12", |
||||||
"vue-count-to": "1.0.13", |
"vue-count-to": "1.0.13", |
||||||
"vue-cropper": "0.5.5", |
"vue-cropper": "0.5.5", |
||||||
"vue-meta": "2.4.0", |
"vue-meta": "2.4.0", |
||||||
"vue-router": "3.4.9", |
"vue-router": "3.4.9", |
||||||
"vuedraggable": "2.24.3", |
"vuedraggable": "2.24.3", |
||||||
"vuex": "3.6.0" |
"vuex": "3.6.0" |
||||||
}, |
}, |
||||||
"devDependencies": { |
"devDependencies": { |
||||||
"@vue/cli-plugin-babel": "4.4.6", |
"@vue/cli-plugin-babel": "4.4.6", |
||||||
"@vue/cli-plugin-eslint": "4.4.6", |
"@vue/cli-plugin-eslint": "4.4.6", |
||||||
"@vue/cli-service": "4.4.6", |
"@vue/cli-service": "4.4.6", |
||||||
"babel-eslint": "10.1.0", |
"babel-eslint": "10.1.0", |
||||||
"babel-plugin-dynamic-import-node": "2.3.3", |
"babel-plugin-dynamic-import-node": "2.3.3", |
||||||
"chalk": "4.1.0", |
"chalk": "4.1.0", |
||||||
"compression-webpack-plugin": "5.0.2", |
"compression-webpack-plugin": "5.0.2", |
||||||
"connect": "3.6.6", |
"connect": "3.6.6", |
||||||
"eslint": "7.15.0", |
"eslint": "7.15.0", |
||||||
"eslint-plugin-vue": "7.2.0", |
"eslint-plugin-vue": "7.2.0", |
||||||
"lint-staged": "10.5.3", |
"lint-staged": "10.5.3", |
||||||
"runjs": "4.4.2", |
"runjs": "4.4.2", |
||||||
"sass": "1.32.13", |
"sass": "1.32.13", |
||||||
"sass-loader": "10.1.1", |
"sass-loader": "10.1.1", |
||||||
"script-ext-html-webpack-plugin": "2.1.5", |
"script-ext-html-webpack-plugin": "2.1.5", |
||||||
"svg-sprite-loader": "5.1.1", |
"svg-sprite-loader": "5.1.1", |
||||||
"vue-template-compiler": "2.6.12" |
"vue-template-compiler": "2.6.12" |
||||||
}, |
}, |
||||||
"engines": { |
"engines": { |
||||||
"node": ">=8.9", |
"node": ">=8.9", |
||||||
"npm": ">= 3.0.0" |
"npm": ">= 3.0.0" |
||||||
}, |
}, |
||||||
"browserslist": [ |
"browserslist": [ |
||||||
"> 1%", |
"> 1%", |
||||||
"last 2 versions" |
"last 2 versions" |
||||||
] |
] |
||||||
} |
} |
||||||
|
@ -1,208 +1,209 @@ |
|||||||
<!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"> |
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||||
<title><%= webpackConfig.name %></title> |
<title><%= webpackConfig.name %></title> |
||||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> |
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> |
||||||
<style> |
<style> |
||||||
html, |
html, |
||||||
body, |
body, |
||||||
#app { |
#app { |
||||||
height: 100%; |
height: 100%; |
||||||
margin: 0px; |
margin: 0px; |
||||||
padding: 0px; |
padding: 0px; |
||||||
} |
} |
||||||
.chromeframe { |
.chromeframe { |
||||||
margin: 0.2em 0; |
margin: 0.2em 0; |
||||||
background: #ccc; |
background: #ccc; |
||||||
color: #000; |
color: #000; |
||||||
padding: 0.2em 0; |
padding: 0.2em 0; |
||||||
} |
} |
||||||
|
|
||||||
#loader-wrapper { |
#loader-wrapper { |
||||||
position: fixed; |
position: fixed; |
||||||
top: 0; |
top: 0; |
||||||
left: 0; |
left: 0; |
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
z-index: 999999; |
z-index: 999999; |
||||||
} |
} |
||||||
|
|
||||||
#loader { |
#loader { |
||||||
display: block; |
display: block; |
||||||
position: relative; |
position: relative; |
||||||
left: 50%; |
left: 50%; |
||||||
top: 50%; |
top: 50%; |
||||||
width: 150px; |
width: 150px; |
||||||
height: 150px; |
height: 150px; |
||||||
margin: -75px 0 0 -75px; |
margin: -75px 0 0 -75px; |
||||||
border-radius: 50%; |
border-radius: 50%; |
||||||
border: 3px solid transparent; |
border: 3px solid transparent; |
||||||
border-top-color: #FFF; |
border-top-color: #FFF; |
||||||
-webkit-animation: spin 2s linear infinite; |
-webkit-animation: spin 2s linear infinite; |
||||||
-ms-animation: spin 2s linear infinite; |
-ms-animation: spin 2s linear infinite; |
||||||
-moz-animation: spin 2s linear infinite; |
-moz-animation: spin 2s linear infinite; |
||||||
-o-animation: spin 2s linear infinite; |
-o-animation: spin 2s linear infinite; |
||||||
animation: spin 2s linear infinite; |
animation: spin 2s linear infinite; |
||||||
z-index: 1001; |
z-index: 1001; |
||||||
} |
} |
||||||
|
|
||||||
#loader:before { |
#loader:before { |
||||||
content: ""; |
content: ""; |
||||||
position: absolute; |
position: absolute; |
||||||
top: 5px; |
top: 5px; |
||||||
left: 5px; |
left: 5px; |
||||||
right: 5px; |
right: 5px; |
||||||
bottom: 5px; |
bottom: 5px; |
||||||
border-radius: 50%; |
border-radius: 50%; |
||||||
border: 3px solid transparent; |
border: 3px solid transparent; |
||||||
border-top-color: #FFF; |
border-top-color: #FFF; |
||||||
-webkit-animation: spin 3s linear infinite; |
-webkit-animation: spin 3s linear infinite; |
||||||
-moz-animation: spin 3s linear infinite; |
-moz-animation: spin 3s linear infinite; |
||||||
-o-animation: spin 3s linear infinite; |
-o-animation: spin 3s linear infinite; |
||||||
-ms-animation: spin 3s linear infinite; |
-ms-animation: spin 3s linear infinite; |
||||||
animation: spin 3s linear infinite; |
animation: spin 3s linear infinite; |
||||||
} |
} |
||||||
|
|
||||||
#loader:after { |
#loader:after { |
||||||
content: ""; |
content: ""; |
||||||
position: absolute; |
position: absolute; |
||||||
top: 15px; |
top: 15px; |
||||||
left: 15px; |
left: 15px; |
||||||
right: 15px; |
right: 15px; |
||||||
bottom: 15px; |
bottom: 15px; |
||||||
border-radius: 50%; |
border-radius: 50%; |
||||||
border: 3px solid transparent; |
border: 3px solid transparent; |
||||||
border-top-color: #FFF; |
border-top-color: #FFF; |
||||||
-moz-animation: spin 1.5s linear infinite; |
-moz-animation: spin 1.5s linear infinite; |
||||||
-o-animation: spin 1.5s linear infinite; |
-o-animation: spin 1.5s linear infinite; |
||||||
-ms-animation: spin 1.5s linear infinite; |
-ms-animation: spin 1.5s linear infinite; |
||||||
-webkit-animation: spin 1.5s linear infinite; |
-webkit-animation: spin 1.5s linear infinite; |
||||||
animation: spin 1.5s linear infinite; |
animation: spin 1.5s linear infinite; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
@-webkit-keyframes spin { |
@-webkit-keyframes spin { |
||||||
0% { |
0% { |
||||||
-webkit-transform: rotate(0deg); |
-webkit-transform: rotate(0deg); |
||||||
-ms-transform: rotate(0deg); |
-ms-transform: rotate(0deg); |
||||||
transform: rotate(0deg); |
transform: rotate(0deg); |
||||||
} |
} |
||||||
100% { |
100% { |
||||||
-webkit-transform: rotate(360deg); |
-webkit-transform: rotate(360deg); |
||||||
-ms-transform: rotate(360deg); |
-ms-transform: rotate(360deg); |
||||||
transform: rotate(360deg); |
transform: rotate(360deg); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
@keyframes spin { |
@keyframes spin { |
||||||
0% { |
0% { |
||||||
-webkit-transform: rotate(0deg); |
-webkit-transform: rotate(0deg); |
||||||
-ms-transform: rotate(0deg); |
-ms-transform: rotate(0deg); |
||||||
transform: rotate(0deg); |
transform: rotate(0deg); |
||||||
} |
} |
||||||
100% { |
100% { |
||||||
-webkit-transform: rotate(360deg); |
-webkit-transform: rotate(360deg); |
||||||
-ms-transform: rotate(360deg); |
-ms-transform: rotate(360deg); |
||||||
transform: rotate(360deg); |
transform: rotate(360deg); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
#loader-wrapper .loader-section { |
#loader-wrapper .loader-section { |
||||||
position: fixed; |
position: fixed; |
||||||
top: 0; |
top: 0; |
||||||
width: 51%; |
width: 51%; |
||||||
height: 100%; |
height: 100%; |
||||||
background: #7171C6; |
background: #7171C6; |
||||||
z-index: 1000; |
z-index: 1000; |
||||||
-webkit-transform: translateX(0); |
-webkit-transform: translateX(0); |
||||||
-ms-transform: translateX(0); |
-ms-transform: translateX(0); |
||||||
transform: translateX(0); |
transform: translateX(0); |
||||||
} |
} |
||||||
|
|
||||||
#loader-wrapper .loader-section.section-left { |
#loader-wrapper .loader-section.section-left { |
||||||
left: 0; |
left: 0; |
||||||
} |
} |
||||||
|
|
||||||
#loader-wrapper .loader-section.section-right { |
#loader-wrapper .loader-section.section-right { |
||||||
right: 0; |
right: 0; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
.loaded #loader-wrapper .loader-section.section-left { |
.loaded #loader-wrapper .loader-section.section-left { |
||||||
-webkit-transform: translateX(-100%); |
-webkit-transform: translateX(-100%); |
||||||
-ms-transform: translateX(-100%); |
-ms-transform: translateX(-100%); |
||||||
transform: translateX(-100%); |
transform: translateX(-100%); |
||||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
-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); |
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
||||||
} |
} |
||||||
|
|
||||||
.loaded #loader-wrapper .loader-section.section-right { |
.loaded #loader-wrapper .loader-section.section-right { |
||||||
-webkit-transform: translateX(100%); |
-webkit-transform: translateX(100%); |
||||||
-ms-transform: translateX(100%); |
-ms-transform: translateX(100%); |
||||||
transform: translateX(100%); |
transform: translateX(100%); |
||||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
-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); |
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
||||||
} |
} |
||||||
|
|
||||||
.loaded #loader { |
.loaded #loader { |
||||||
opacity: 0; |
opacity: 0; |
||||||
-webkit-transition: all 0.3s ease-out; |
-webkit-transition: all 0.3s ease-out; |
||||||
transition: all 0.3s ease-out; |
transition: all 0.3s ease-out; |
||||||
} |
} |
||||||
|
|
||||||
.loaded #loader-wrapper { |
.loaded #loader-wrapper { |
||||||
visibility: hidden; |
visibility: hidden; |
||||||
-webkit-transform: translateY(-100%); |
-webkit-transform: translateY(-100%); |
||||||
-ms-transform: translateY(-100%); |
-ms-transform: translateY(-100%); |
||||||
transform: translateY(-100%); |
transform: translateY(-100%); |
||||||
-webkit-transition: all 0.3s 1s ease-out; |
-webkit-transition: all 0.3s 1s ease-out; |
||||||
transition: all 0.3s 1s ease-out; |
transition: all 0.3s 1s ease-out; |
||||||
} |
} |
||||||
|
|
||||||
.no-js #loader-wrapper { |
.no-js #loader-wrapper { |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
|
|
||||||
.no-js h1 { |
.no-js h1 { |
||||||
color: #222222; |
color: #222222; |
||||||
} |
} |
||||||
|
|
||||||
#loader-wrapper .load_title { |
#loader-wrapper .load_title { |
||||||
font-family: 'Open Sans'; |
font-family: 'Open Sans'; |
||||||
color: #FFF; |
color: #FFF; |
||||||
font-size: 19px; |
font-size: 19px; |
||||||
width: 100%; |
width: 100%; |
||||||
text-align: center; |
text-align: center; |
||||||
z-index: 9999999999999; |
z-index: 9999999999999; |
||||||
position: absolute; |
position: absolute; |
||||||
top: 60%; |
top: 60%; |
||||||
opacity: 1; |
opacity: 1; |
||||||
line-height: 30px; |
line-height: 30px; |
||||||
} |
} |
||||||
|
|
||||||
#loader-wrapper .load_title span { |
#loader-wrapper .load_title span { |
||||||
font-weight: normal; |
font-weight: normal; |
||||||
font-style: italic; |
font-style: italic; |
||||||
font-size: 13px; |
font-size: 13px; |
||||||
color: #FFF; |
color: #FFF; |
||||||
opacity: 0.5; |
opacity: 0.5; |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
</head> |
</head> |
||||||
<body> |
<body> |
||||||
<div id="app"> |
<div id="app"> |
||||||
<div id="loader-wrapper"> |
<div id="loader-wrapper"> |
||||||
<div id="loader"></div> |
<div id="loader"></div> |
||||||
<div class="loader-section section-left"></div> |
<div class="loader-section section-left"></div> |
||||||
<div class="loader-section section-right"></div> |
<div class="loader-section section-right"></div> |
||||||
<div class="load_title">正在加载系统资源,请耐心等待</div> |
<div class="load_title">正在加载系统资源,请耐心等待</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</body> |
</body> |
||||||
</html> |
</html> |
||||||
|
|
||||||
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue