ziqim/Yangcai365_web/manage/zview/works/worksShowPC.zml

<script>
//复制作品id
function doCopyIDInfo()
{
     Z.copy(Z("#worksId").val());
     top.Z.tips("复制成功");
}

</script>
<style>
body{height:100%}
/*图片展示区*/
.show-thumb{left:0;top:0;bottom:0;right:300px;padding:30px;}
.show-thumb-list{align-items:center;align-content:center;justify-content:center;flex-wrap:wrap;overflow-y: auto;}<!--display:flex;-->
<#if media.getMediaUrl().indexOf(",")==-1>
.show-thumb-list>li{padding:5px;max-width:45%;}
<#else>
.show-thumb-list>li{padding:5px;}
 </#if>
/*信息列表区*/
.show-info{top:0;bottom:0;right:0;border-left:1px solid #e1e1e1;}
.show-info-list>li{font-size:14px;padding:15px 0;border-bottom:1px solid #f5f5f5;color:#777;}
/*顶部三要素*/
.show-info-list>li>span.tag{margin-right:28px;float:left;padding:15px 0;}
.show-info-list>li>span.tag:not(.view):hover,.show-info-list>li>span.tag.collect.active{color:#00a2eb;}
.show-info-list>li>span.tag>i{display:inline-block;width:17px;height:15px;vertical-align:middle;margin-right:5px;background:url(http://cdn.tubangzhu.com/static/tbz-main/images/preview-tag_8774a98.png) no-repeat;}
.show-info-list>li>span.tag.share>i{background-position:0 0;margin-right:3px;}
.show-info-list>li>span.tag.share:hover>i{background-position:0 -15px;}
.show-info-list>li>span.tag.view>i{background-position:-17px 0;}
.show-info-list>li>span.tag.view>i{background-position:-17px 0;}
.show-info-list>li>span.tag.collect>i{background-position:-35px 0;}
.show-info-list>li>span.tag.collect:hover>i,.show-info-list>li>span.tag.collect.active>i{background-position: -35px -15px;}
.show-info-list>li .z-button.z-xlarge{height:44px;}
/*分享列表*/
.share-list{position:absolute;top:45px;left:-5px;background:#fff;width:280px;line-height:35px;box-shadow:0 0 5px #aaa;border-radius:4px;padding:8px 15px;/*display:none;*/z-index:1;}
.share-list>span{position:absolute;width:10px;height:10px;background:#fff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);top:-5px;left:30px;box-shadow:-1px -1px 0 #d4d2d2;}
/*标题图标*/
.list-title>i{background:url(http://cdn.tubangzhu.com/static/tbz-main/images/preview-tag_8774a98.png) no-repeat -187px 0;display:inline-block;width:10px;height:19px;vertical-align:middle;margin-right:5px;}
/*类型添加*/
.type-list{}
.type-list>li{padding:8px 0;border-bottom:1px dashed #f5f5f5;}
/*关键字选择区*/
.kwywords-list>.kwywordItem-list>span{display:inline-block;border-radius:3px;padding:5px 10px;margin:3px;position:relative;}
.kwywords-list>.kwywordItem-list>span>.z-error{display:none;position:absolute;right:-5px;top:-5px;border-radius:50%;margin:0;border:1px solid #777;width:15px;height:15px;line-height:14px;text-align:center;font-size:12px;background:#fff;z-index:9;cursor:pointer;}
.kwywords-list>.kwywordItem-list>span>.z-error:hover{color:#ea4a36;border-color:#ea4a36;}
.kwywords-list>.kwywordItem-list>span:hover .z-error{display:block;}
.kwywords-list>.item-add{position:relative;}
.kwywords-list>.item-add>input{width:100%;}
.kwywords-list>.item-add>button{padding:3px 10px;position:absolute;top:0;right:0;}
.fileDownload:hover{opacity: 0.8;}

/**/

</style>

<div class="z-relative z-w100p z-h100p z-overflow-hidden">
    <div class="show-thumb z-absolute">
        <ul class="show-thumb-list z-w100p z-h100p" style="text-align: center;">
            <#if media.getMediaUrl().indexOf(",")==-1>
                <li><img src="${media.getMediaUrl()}"/></li>
            <#else>
                <#for path : Arrays.toStringArray(media.getMediaUrl())>
                    <li>
                    <img style="width:400px;" src="${path}"/>
                    </li></br>
                </#for>
            </#if>
        </ul>
    </div>
    <div class="show-info z-absolute z-w300 z-pd15">
        <ul class="show-info-list z-relative z-h100p">
          <input name="worksId" id="worksId" value="${media.getMediaId()}" type="hidden" >
          <#if media.getTypeId()!=3>
           <li class="z-clearfix">
           ID：${media.getMediaId()}             
	          <span class="z-float-right">
	          <button class="z-button z-blue z-small" onclick="doCopyIDInfo();"><i class="z-font z-text"></i>复制</button>
	          </span>
	       </li>
          <#else>
          <li class="z-clearfix">
          <div>名称：${media.getMediaName()}</div></br>
          	  ID：${media.getMediaId()}             
	          <span class="z-float-right">
	          <button class="z-button z-blue z-small" onclick="doCopyIDInfo();"><i class="z-font z-text"></i>复制</button>
	          </span></br></br>
	      <div>P 数：${media.getPageValue()}P</div></br>
	      <div>版式：<#if media.getOddEven()=0>横版<#elseif media.getOddEven()=1>竖版</#if>${media.getWidthMm()}X${media.getHeightMm()}mm</div>
	      </li>
	      </#if>
          <li class="z-clearfix">创建时间：${media.getCreateTime()}</li>
          <li class="tag-edit z-relative" data-value="一级 类型  二级 行业 三级 属性">
                <div class="z-h25 z-mg-t5 z-mg-b15">
                    <span class="list-title z-lh25"><i></i>行业属性</span>
                </div>
                <ul class="type-list">
                  <li>
                    ${Global.get(ProductTypeCache.class).getName(media.getTypeId())}&nbsp;&nbsp;
                    ${Global.get(DesignIndustryCache.class).getIndustryName(media.getIndustryId())}&nbsp;&nbsp;
                    ${media.getIndustrySubName()}&nbsp;&nbsp;
                    ${media.getAttributeName()}&nbsp;&nbsp;
                  </li>
                </ul>
           </li>
           <li class="keyword-edit">
                <div class="list-title z-mg-t5 z-mg-b15"><i></i>关键词</div>
                <div class="kwywords-list">
                    <div class="kwywordItem-list">
                    <#for keyword : DesignerPresenter.updateKeywordArr(media.getKeywordName(), "work", media.getMediaId())>
                        <span class="z-bg-blue"><i></i>${keyword}</span>
                    </#for>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>