Randall/goindex-theme-r
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

替换grid view 视频文件的icon ，修复图片点击不能定位到该图

Browse Source
This commit is contained in:
qxz 2020-05-19 18:10:44 +08:00
parent d015fe2d3f
commit a9fddbfa9e
7 changed files with 81 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
buildAppJSPlugin.js
View File

@ -17,14 +17,12 @@ class BuildAppJSPlugin {
// 遍历所有编译过的资源文件， // 遍历所有编译过的资源文件，
// 对于每个文件名称，都添加一行内容。 // 对于每个文件名称，都添加一行内容。
for (let filename in compilation.assets) { for (let filename in compilation.assets) {
if (filename.match(".*\\.js$")) {
if (process.env.NODE_ENV === "production") { if (process.env.NODE_ENV === "production") {
filename = (process.env.VUE_APP_PUBLIC_PATH || "/") + filename; filename = (process.env.VUE_APP_PUBLIC_PATH || "/") + filename;
} else { } else {
filename = "/" + filename; filename = "/" + filename;
} }
// filename = "/" + filename;
if (filename.match(".*\\.js$")) {
jsarr.push(filename); jsarr.push(filename);
} }
if (filename.match(".*\\.css$")) { if (filename.match(".*\\.css$")) {
@ -47,33 +45,32 @@ class BuildAppJSPlugin {
.map((e) => e.css)); .map((e) => e.css));
} }
let content = ` let content = `
var styles = ${JSON.stringify(cssarr)};
var scripts = ${JSON.stringify(jsarr)}; var scripts = ${JSON.stringify(jsarr)};
${cdnjs} ${cdnjs}
document.write('<div id="app"></div>');
var title = document.getElementsByTagName('title')
styles.forEach((item) => {
let link = document.createElement('link');
link.href=item;
link.rel = 'preload';
link.as = 'style';
title[0].parentNode.insertBefore(link,title[0])
link = document.createElement('link');
link.href=item;
link.rel = 'stylesheet';
title[0].parentNode.insertBefore(link,title[0])
});
scripts.forEach((item) => { scripts.forEach((item) => {
document.write('<script src="' + item + '"></script>'); document.write('<script src="' + item + '"></script>');
}); });
`; `;
let cssContent = ''
cssarr.forEach(item=>{
cssContent += `@import url(${item});\n`
})
// 将这个列表作为一个新的文件资源，插入到 webpack 构建中： // 将这个列表作为一个新的文件资源，插入到 webpack 构建中：
compilation.assets["app.js"] = { compilation.assets["app.js"] = {
source: function() { source: function() {
return content; return content;
}, },
size: function() { size: function() {
return cssarr.length + jsarr.length; return jsarr.length;
},
};
compilation.assets["style.css"] = {
source: function() {
return cssContent;
},
size: function() {
return cssarr.length;
}, },
}; };

2
dependencies-cdn.js
View File

@ -18,7 +18,7 @@ module.exports = [
// { name: 'brace/snippets/javascript', library: 'javascript', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js', css: '' }, // { name: 'brace/snippets/javascript', library: 'javascript', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js', css: '' },
// { name: 'vue2-ace-editor', library: 'Vue2ACEEditor', js: 'https://cdn.jsdelivr.net/npm/vue2-ace-editor@0.0.15/index.min.js', css: '' }, // { name: 'vue2-ace-editor', library: 'Vue2ACEEditor', js: 'https://cdn.jsdelivr.net/npm/vue2-ace-editor@0.0.15/index.min.js', css: '' },
{ name: 'markdown-it', library: 'markdownit', js: 'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js', css: '' }, { name: 'markdown-it', library: 'markdownit', js: 'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js', css: '' },
{ name: '', library: '', js: 'https://at.alicdn.com/t/font_1760192_zf96psu0uo.js', css: '' }, { name: '', library: '', js: 'https://at.alicdn.com/t/font_1760192_axq33n6snd.js', css: '' },
{ name: '', library: '', js: '', css: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css' }, { name: '', library: '', js: '', css: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css' },
{ name: '', library: '', js: '', css: 'https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css' }, { name: '', library: '', js: '', css: 'https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css' },
{ name: '', library: '', js: '', css: 'https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css' }, { name: '', library: '', js: '', css: 'https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css' },

4
public/index.html
View File

@ -43,11 +43,11 @@
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %> <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script> <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %> <% } %>
<script src="/app.js"></script>
</head> </head>
<body> <body>
<div id="app"></div>
<script src="/app.js"></script>
</body> </body>
</html> </html>

10
src/assets/style/theme/acrou/index.scss
View File

@ -1,3 +1,13 @@
@font-face {
font-family: 'iconfont'; /* project id 1760192 */
src: url('//at.alicdn.com/t/font_1760192_tl9awsq3di.eot');
src: url('//at.alicdn.com/t/font_1760192_tl9awsq3di.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1760192_tl9awsq3di.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1760192_tl9awsq3di.woff') format('woff'),
url('//at.alicdn.com/t/font_1760192_tl9awsq3di.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1760192_tl9awsq3di.svg#iconfont') format('svg');
}
body { body {
overflow: hidden; overflow: hidden;
} }

2
src/main.js
View File

@ -17,6 +17,8 @@ import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css' import 'viewerjs/dist/viewer.css'
import "@/assets/style/theme/register.scss" import "@/assets/style/theme/register.scss"
document.write(`<script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?b5880d23c0d350f0a4c8ac671320847e";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();</script>`);
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI) Vue.use(ElementUI)
Vue.use(VueAxios,axios) Vue.use(VueAxios,axios)

16
src/views/page/GoList.vue
View File

@ -8,13 +8,7 @@
infinite-scroll-disabled="busy" infinite-scroll-disabled="busy"
infinite-scroll-distance="10" infinite-scroll-distance="10"
> >
<list-view <list-view :data="buildFiles" v-if="mode === 'list'" :icons="getIcon" :go="go" :copy="copy" />
:data="buildFiles"
v-if="mode === 'list'"
:icons="getIcon"
:go="go"
:copy="copy"
/>
<grid-view <grid-view
class="g2-content" class="g2-content"
:data="buildFiles" :data="buildFiles"
@ -23,10 +17,7 @@
:go="go" :go="go"
:thum="thum" :thum="thum"
/> />
<div <div v-show="files.length === 0" class="has-text-centered no-content"></div>
v-show="files.length === 0"
class="has-text-centered no-content"
></div>
<center> <center>
<div :class="!busy ? 'is-hidden' : ''"> <div :class="!busy ? 'is-hidden' : ''">
<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i> <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
@ -247,7 +238,8 @@ export default {
if (file.mimeType.indexOf("image") != -1) { if (file.mimeType.indexOf("image") != -1) {
this.viewer = true; this.viewer = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$viewer.show(); let index = this.images.findIndex(item => item.path === file.path)
this.$viewer.view(index);
}); });
return; return;
} }

34
src/views/page/components/grid/index.vue
View File

@ -35,12 +35,9 @@
: '') : '')
" "
> >
<i></i>
<figure class="image is-square"> <figure class="image is-square">
<img <img v-if="file.thumbnailLink" v-lazy="thum(file.thumbnailLink)" :alt="file.name" />
v-if="file.thumbnailLink"
v-lazy="thum(file.thumbnailLink)"
:alt="file.name"
/>
</figure> </figure>
</div> </div>
<div class="media g2-grid-view-file"> <div class="media g2-grid-view-file">
@ -129,16 +126,35 @@ export default {
.g2-grid-view-play { .g2-grid-view-play {
&:before { &:before {
z-index: 10; z-index: 10;
background-image: url("https://cloud.jsonpop.cn/go2index/vue/play.png");
background-repeat: no-repeat;
background-position: center;
background-size: 50px;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
content: ""; content: "";
background: rgba(0, 0, 0, 0.15);
opacity: 1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000);
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
i {
font-style: normal;
}
i:before {
z-index: 10;
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
height: 0;
color: hsla(0, 0%, 100%, 0.67);
content: "\e6f6";
font-size: 3rem;
font-family: iconfont !important;
line-height: 0;
} }
} }
.iconfont { .iconfont {