393 lines
15 KiB
HTML
393 lines
15 KiB
HTML
<div class="information-box">
|
||
<el-scrollbar class="page-component__scroll">
|
||
<div style="padding-right: 20px;">
|
||
<div class="title">
|
||
<template v-if="parseInt(imagesData.level)==1">
|
||
<el-image style="width: 25px; height: 25px;vertical-align: bottom;" src="dzz/pichome/image/grade/1.png" fit="contain">
|
||
<template #error><div class="el-image__placeholder"></div></template>
|
||
</el-image>
|
||
</template>
|
||
<template v-else-if="parseInt(imagesData.level)==2">
|
||
<el-image style="width: 25px; height: 25px;vertical-align: bottom;" src="dzz/pichome/image/grade/2.png" fit="contain">
|
||
<template #error><div class="el-image__placeholder"></div></template>
|
||
</el-image>
|
||
</template>
|
||
<template v-else-if="parseInt(imagesData.level)==3">
|
||
<el-image style="width: 25px; height: 25px;vertical-align: bottom;" src="dzz/pichome/image/grade/3.png" fit="contain">
|
||
<template #error><div class="el-image__placeholder"></div></template>
|
||
</el-image>
|
||
</template>
|
||
<template v-else-if="parseInt(imagesData.level)==4">
|
||
<el-image style="width: 25px; height: 25px;vertical-align: bottom;" src="dzz/pichome/image/grade/4.png" fit="contain">
|
||
<template #error><div class="el-image__placeholder"></div></template>
|
||
</el-image>
|
||
</template>
|
||
<template v-else-if="parseInt(imagesData.level)==5">
|
||
<el-image style="width: 25px; height: 25px;vertical-align: bottom;" src="dzz/pichome/image/grade/5.png" fit="contain">
|
||
<template #error><div class="el-image__placeholder"></div></template>
|
||
</el-image>
|
||
</template>
|
||
<span v-cloak>{{imagesData.name}}.{{imagesData.ext}}</span>
|
||
</div>
|
||
<div class="operation clearfix" >
|
||
<el-button
|
||
plain
|
||
v-cloak
|
||
size="large"
|
||
v-if="imagesData.download"
|
||
@click="rightDown"
|
||
style="width: 100%;">立即下载</el-button>
|
||
<el-tooltip
|
||
v-if="(imagesData.iniframe || imagesData.icondata || imagesData.originalimg) && imagesData.download"
|
||
class="item"
|
||
effect="dark"
|
||
content="查看原图"
|
||
placement="bottom">
|
||
<el-button plain circle icon="View" size="large" @click="rightView"></el-button>
|
||
</el-tooltip>
|
||
|
||
<el-tooltip v-if="imagesData.share" class="item" effect="dark" content="分享" placement="bottom">
|
||
<el-button plain @click="rightShare" size="large" v-if="imagesData.share" circle icon="Share"></el-button>
|
||
</el-tooltip>
|
||
<el-tooltip v-if="parseInt(imagesData.collection)" class="item" effect="dark" content="收藏" placement="bottom">
|
||
<el-button plain @click="rightCollection" size="large" v-if="parseInt(imagesData.collection)" circle icon="Star"></el-button>
|
||
</el-tooltip>
|
||
</div>
|
||
|
||
<div class="message">
|
||
<div class="thesis-wrap" v-if="imagesData.colors && imagesData.colors.length">
|
||
<el-text v-cloak truncated tag="b" class="tip-title" size="large" style="color: var(--el-text-color-primary);">颜色</el-text>
|
||
<ul class="color clearfix" v-cloak>
|
||
<li class="color-list" v-for="citem in imagesData.colors">
|
||
<el-dropdown v-cloak trigger="click" @visible-change="rightShowPopoverColor(citem.val)" @command="rightCommandColor" placement="bottom">
|
||
<div style="width: 100%;">
|
||
<el-tooltip :content="'#'+citem.val" effect="light" placement="top" popper-class="color-top">
|
||
<div class="bg" :style="{background: '#'+citem.val}"></div>
|
||
</el-tooltip>
|
||
</div>
|
||
<template #dropdown>
|
||
<el-dropdown-menu class="el-popover-color">
|
||
<el-dropdown-item command="common" v-if="DocumentHref">搜索相似颜色的项目</el-dropdown-item>
|
||
<el-dropdown-item :divided="DocumentHref" :command="ColorPopver.base">复制 {{ColorPopver.base}}</el-dropdown-item>
|
||
<el-dropdown-item :command="ColorPopver.rgb">复制 {{ColorPopver.rgb}}</el-dropdown-item>
|
||
<el-dropdown-item :command="ColorPopver.rgba">复制 {{ColorPopver.rgba}}</el-dropdown-item>
|
||
<el-dropdown-item :command="ColorPopver.hsl">复制 {{ColorPopver.hsl}}</el-dropdown-item>
|
||
<el-dropdown-item divided :command="ColorPopver.hsv">复制 {{ColorPopver.hsv}}</el-dropdown-item>
|
||
<el-dropdown-item :command="ColorPopver.cmyk">复制 {{ColorPopver.cmyk}}</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
|
||
</el-dropdown>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="thesis-wrap" v-if="imagesData.tag && imagesData.tag.length">
|
||
<el-text v-cloak truncated tag="b" class="tip-title" size="large" style="color: var(--el-text-color-primary);">标签</el-text>
|
||
<div v-if="imagesData.tag" class="label clearfix" v-cloak>
|
||
<el-tag v-for="item in imagesData.tag" size="large" effect="light" type="info" @click="rightClickTag(item.key)">{{item.val}}</el-tag>
|
||
</div>
|
||
</div>
|
||
<div class="thesis-wrap" v-if="imagesData.desc" v-cloak>
|
||
<el-text v-cloak truncated tag="b" class="tip-title" size="large" style="color: var(--el-text-color-primary);">描述</el-text>
|
||
<div v-if="imagesData.desc" class="notes" style="white-space: pre-wrap;">{{imagesData.desc}}</div>
|
||
</div>
|
||
|
||
<div class="thesis-wrap" v-if="imagesData.link" v-cloak>
|
||
<el-text v-cloak truncated tag="b" size="large" class="tip-title" style="color: var(--el-text-color-primary);">链接</el-text>
|
||
<p class="link">
|
||
<el-link :underline="false" :href="imagesData.link" truncated style="font-size: 12px;" target="_blank">{{imagesData.link}}</el-link>
|
||
<el-icon @click="rightcopyText(imagesData.link)"><Copy-Document /></el-icon>
|
||
</p>
|
||
</div>
|
||
<div class="thesis-wrap" v-if="imagesData.realfianllypath" v-cloak>
|
||
<el-text v-cloak truncated tag="b" size="large" class="tip-title" style="color: var(--el-text-color-primary);">固定地址</el-text>
|
||
<p class="link">
|
||
<el-text v-cloak truncated size="small">{{imagesData.realfianllypath}}</el-text>
|
||
<el-icon @click="rightrealfianllypath(imagesData.realfianllypath)"><Copy-Document /></el-icon>
|
||
</p>
|
||
</div>
|
||
<div class="thesis-wrap" v-if="imagesData.foldernames && imagesData.foldernames.length">
|
||
<el-text v-cloak truncated tag="b" size="large" class="tip-title" style="color: var(--el-text-color-primary);">分类</el-text>
|
||
<div class="label clearfix" style="padding: 0;" v-cloak>
|
||
<el-tag v-for="item in imagesData.foldernames" size="large" effect="light" type="info" @click="rightClickClass(item.key)">
|
||
{{item.val.fname}}</el-tag>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="information">
|
||
<el-text v-cloak truncated tag="b" class="tip" size="large" style="color: var(--el-text-color-primary);">基本信息</el-text>
|
||
<el-row type="flex" class="field">
|
||
<el-col :span="12">
|
||
<el-text v-cloak truncated size="small">评分</el-text>
|
||
</el-col>
|
||
<el-col :span="12" style="text-align: right;">
|
||
<div class="record" v-cloak>
|
||
<div class="el-rate el-rate--small">
|
||
<span class="el-rate__item" v-for="s in parseInt(imagesData.grade)" style="cursor: default;">
|
||
<el-icon class="el-rate__icon is-active"><Star-Filled></Star-Filled></el-icon>
|
||
</span>
|
||
<span class="el-rate__item" v-for="s in 5-parseInt(imagesData.grade)" style="cursor: default;">
|
||
<el-icon class="el-rate__icon"><Star></Star></el-icon>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" class="field">
|
||
<el-col :span="12">
|
||
<el-text v-cloak truncated size="small">尺寸</el-text>
|
||
</el-col>
|
||
<el-col :span="12" style="text-align: right;">
|
||
<el-text size="small" style="color: var(--el-text-color-primary);">{{imagesData.width}}×{{imagesData.height}}</el-text>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" class="field">
|
||
<el-col :span="12">
|
||
<el-text v-cloak truncated size="small">文件大小</el-text>
|
||
</el-col>
|
||
<el-col :span="12" style="text-align: right;">
|
||
<el-text size="small" style="color: var(--el-text-color-primary);">{{imagesData.fsize}}</el-text>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" class="field">
|
||
<el-col :span="12">
|
||
<el-text v-cloak truncated size="small">类型</el-text>
|
||
</el-col>
|
||
<el-col :span="12" style="text-align: right;">
|
||
<el-text size="small" style="color: var(--el-text-color-primary);">{{imagesData.ext}}</el-text>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" class="field">
|
||
<el-col :span="12">
|
||
<el-text v-cloak truncated size="small">创建时间</el-text>
|
||
</el-col>
|
||
<el-col :span="12" style="text-align: right;">
|
||
<el-text size="small" style="color: var(--el-text-color-primary);">{{imagesData.mtime}}</el-text>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" class="field">
|
||
<el-col :span="12">
|
||
<el-text v-cloak truncated size="small">添加时间</el-text>
|
||
</el-col>
|
||
<el-col :span="12" style="text-align: right;">
|
||
<el-text size="small" style="color: var(--el-text-color-primary);">{{imagesData.btime}}</el-text>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" class="field">
|
||
<el-col :span="12">
|
||
<el-text v-cloak truncated size="small">修改时间</el-text>
|
||
</el-col>
|
||
<el-col :span="12" style="text-align: right;">
|
||
<el-text size="small" style="color: var(--el-text-color-primary);">{{imagesData.dateline}}</el-text>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
<Dzz-Collectdialog
|
||
:visible="ImageCollect.visible"
|
||
:rids="ImageCollect.rid"
|
||
@success="ImageCollectClose"
|
||
@close="ImageCollectClose"></Dzz-Collectdialog>
|
||
</div>
|
||
<script type="text/javascript">
|
||
var rightMixin = {
|
||
data(){
|
||
return {
|
||
ImageCollect:{
|
||
visible:false,
|
||
rid:[],
|
||
}
|
||
}
|
||
},
|
||
methods:{
|
||
rightShowPopoverColor(val) {
|
||
var rgb = this.rightColorHexToRgb('#' + val);
|
||
var hsl = this.rightColorRgbToHsl(rgb.r, rgb.g, rgb.b);
|
||
var cmyk = this.rightColorRgbToCmyk(rgb.r, rgb.g, rgb.b);
|
||
var hsv = this.rightColorRgbToHsv(rgb.r, rgb.g, rgb.b);
|
||
this.ColorPopver = {
|
||
base: '#' + val,
|
||
rgb: 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')',
|
||
rgba: 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 1)',
|
||
hsl: hsl,
|
||
hsv: hsv,
|
||
cmyk: cmyk
|
||
};
|
||
},
|
||
|
||
async rightCommandColor(val){
|
||
var self = this;
|
||
if(val == 'common'){
|
||
if(!this.DocumentHref)return false;
|
||
<!--{if $opentype=='current'}-->
|
||
window.parent.location.href = this.DocumentHref+'&color=' + this.ColorPopver.base;
|
||
window.parent.location.reload()
|
||
<!--{else}-->
|
||
window.location.href = this.DocumentHref+'&color=' + this.ColorPopver.base;
|
||
<!--{/if}-->
|
||
}else{
|
||
CopyTxt(this,val)
|
||
}
|
||
},
|
||
rightView(){
|
||
if(this.imagesData.realfianllypath){
|
||
window.open(this.imagesData.realfianllypath);
|
||
}else if(this.imagesData.iniframe){
|
||
window.open(this.imagesData.iniframe);
|
||
}else if(this.imagesData.originalimg){
|
||
window.open(this.imagesData.originalimg);
|
||
}else{
|
||
window.open(this.imagesData.icondata);
|
||
}
|
||
},
|
||
async rightShare() {
|
||
var self = this;
|
||
if (self.imagesData.dpath){
|
||
var res = await axios.post('index.php?mod=banner&op=appajax&do=createshare',{path: self.imagesData.dpath});
|
||
var data = res.data;
|
||
if (data.success) {
|
||
CopyTxt(self, data.success);
|
||
} else {
|
||
self.$message({
|
||
message: '分享失败',
|
||
type: 'error'
|
||
});
|
||
}
|
||
} else {
|
||
this.$message({
|
||
message: '数据错误',
|
||
type: 'error'
|
||
});
|
||
}
|
||
|
||
},
|
||
rightCollection(){
|
||
this.ImageCollect.rid = [this.imagesData.rid]
|
||
this.ImageCollect.visible = true;
|
||
},
|
||
ImageCollectClose(){//收藏关闭
|
||
this.ImageCollect.visible = false;
|
||
},
|
||
async rightDown() {
|
||
var self = this;
|
||
if (self.imagesData.dpath) {
|
||
if(self.isadmin){
|
||
window.open('index.php?mod=pichome&op=download&dpath=' + self.imagesData.dpath);
|
||
}else{
|
||
window.open('index.php?mod=banner&op=download&dpath=' + self.imagesData.dpath);
|
||
}
|
||
} else {
|
||
self.$message({
|
||
message: '数据错误',
|
||
type: 'error'
|
||
});
|
||
}
|
||
|
||
},
|
||
async rightClickTag(tid){
|
||
var self = this;
|
||
if(!this.DocumentHref)return false;
|
||
<!--{if $opentype=='current'}-->
|
||
window.parent.location.href = this.DocumentHref+'&tag=' + tid;
|
||
window.parent.location.reload()
|
||
<!--{else}-->
|
||
window.location.href = this.DocumentHref+'&tag=' + tid;
|
||
<!--{/if}-->
|
||
},
|
||
async rightClickClass(cid){
|
||
var self = this;
|
||
if(!this.DocumentHref)return false;
|
||
let fidname = sessionStorage.getItem('fidname');
|
||
if(!fidname){
|
||
fidname = 'fid';
|
||
}
|
||
<!--{if $opentype=='current'}-->
|
||
window.parent.location.href = this.DocumentHref+'&'+fidname+'=' + cid;
|
||
window.parent.location.reload()
|
||
<!--{else}-->
|
||
window.location.href = this.DocumentHref+'&'+fidname+'=' + cid;
|
||
<!--{/if}-->
|
||
|
||
},
|
||
rightcopyText(val) {
|
||
CopyTxt(this, val);
|
||
},
|
||
rightrealfianllypath(val) {
|
||
CopyTxt(this, val);
|
||
},
|
||
rightColorHexToRgb(hex) {
|
||
var str = {
|
||
r: parseInt('0x' + hex.slice(1, 3)),
|
||
g: parseInt('0x' + hex.slice(3, 5)),
|
||
b: parseInt('0x' + hex.slice(5, 7))
|
||
};
|
||
return str;
|
||
},
|
||
rightColorRgbToHsl(r, g, b) {
|
||
r /= 255, g /= 255, b /= 255;
|
||
var max = Math.max(r, g, b),
|
||
min = Math.min(r, g, b);
|
||
var h, s, l = (max + min) / 2;
|
||
if (max == min) {
|
||
h = s = 0; // achromatic
|
||
} else {
|
||
var d = max - min;
|
||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||
switch (max) {
|
||
case r:
|
||
h = (g - b) / d + (g < b ? 6 : 0);
|
||
break;
|
||
case g:
|
||
h = (b - r) / d + 2;
|
||
break;
|
||
case b:
|
||
h = (r - g) / d + 4;
|
||
break;
|
||
}
|
||
h *= 6;
|
||
}
|
||
return 'hsl(' + Math.round(parseInt(h * 100) / 10) + ', ' + Math.round(parseInt(s * 1000) / 10) +
|
||
'%, ' + Math.round(parseInt(l * 1000) / 10) + '%)';
|
||
},
|
||
rightColorRgbToHsv(R, G, B) {
|
||
R /= 255
|
||
G /= 255
|
||
B /= 255
|
||
var max = Math.max(R, G, B)
|
||
var min = Math.min(R, G, B)
|
||
var range = max - min
|
||
var V = max
|
||
var S = V === 0 ? 0 : range / V
|
||
var H = 0
|
||
if (R === V) H = (60 * (G - B)) / range
|
||
if (G === V) H = 120 + (60 * (B - R)) / range
|
||
if (B === V) H = 240 + (60 * (R - G)) / range
|
||
if (range === 0) H = 0
|
||
if (H < 0) H += 360
|
||
return 'hsv(' + Math.round(H) + ', ' + Math.round(parseInt(S * 1000) / 10) + '%, ' + Math.round(
|
||
parseInt(V * 1000) / 10) + '%)';
|
||
},
|
||
rightColorRgbToCmyk(R, G, B) {
|
||
if ((R == 0) && (G == 0) && (B == 0)) {
|
||
return [0, 0, 0, 1];
|
||
} else {
|
||
var calcR = 1 - (R / 255),
|
||
calcG = 1 - (G / 255),
|
||
calcB = 1 - (B / 255);
|
||
|
||
var K = Math.min(calcR, Math.min(calcG, calcB)),
|
||
C = (calcR - K) / (1 - K),
|
||
M = (calcG - K) / (1 - K),
|
||
Y = (calcB - K) / (1 - K);
|
||
|
||
return 'cmyk(' + Math.round(parseInt(C * 1000) / 10) + '%, ' + Math.round(parseInt(M * 1000) /
|
||
10) + '%, ' + Math.round(parseInt(Y * 1000) / 10) + '%, ' + Math.round(parseInt(K *
|
||
1000) / 10) + '%)';
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script> |