|
|
@@ -29,36 +29,40 @@
|
|
|
@scroll.self="onWorkListScroll"
|
|
|
>
|
|
|
<li class="add-work" @click="add">
|
|
|
- <div class="add-con">
|
|
|
- <div>
|
|
|
- <i class="iconfont icon_plus"></i>
|
|
|
+ <div class="wrapper">
|
|
|
+ <div class="add-con">
|
|
|
+ <div>
|
|
|
+ <i class="iconfont icon_plus"></i>
|
|
|
+ </div>
|
|
|
+ <span>创建作品</span>
|
|
|
</div>
|
|
|
- <span>创建作品</span>
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li v-for="(item,i) in list" :key="i" :class="{'has-more-data': hasMoreData}">
|
|
|
- <div class="li-hover">
|
|
|
- <span class="lipreview" @click="handlePreview(item)">预览</span>
|
|
|
- <ul class="oper">
|
|
|
- <li class="comfirmhover" @click="edit(item)"><i class="iconfont icon-works_editor"></i>编辑</li>
|
|
|
- <li class="comfirmhover" @click="openShare(item)"><i class="iconfont icon-works_share"></i>分享</li>
|
|
|
- <li class="cancelhover" @click="del(item, i)"><i class="iconfont icon-works_delete"></i>删除</li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="img" @click="handlePreview(item)">
|
|
|
- <img class="real" :src="item.icon||$thumb" alt="" />
|
|
|
- </div>
|
|
|
- <div class="li-info">
|
|
|
- <div>
|
|
|
- <span class="shenglve tttttt" :title="item.name||'无标题'">{{item.name||'无标题'}}</span>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <span>{{item.createTime.split(' ')[0]}}</span>
|
|
|
- <div :title="item.visit">
|
|
|
- <i class="iconfont iconworks_look"></i>{{item.visit>10000?'1w+':item.visit}}
|
|
|
+ <li v-for="(item,i) in list" :key="i" :class="{'has-more-data': hasMoreData}">
|
|
|
+ <div class="wrapper">
|
|
|
+ <div class="li-hover">
|
|
|
+ <span class="lipreview" @click="handlePreview(item)">预览</span>
|
|
|
+ <ul class="oper">
|
|
|
+ <li class="comfirmhover" @click="edit(item)"><i class="iconfont icon-works_editor"></i>编辑</li>
|
|
|
+ <li class="comfirmhover" @click="openShare(item)"><i class="iconfont icon-works_share"></i>分享</li>
|
|
|
+ <li class="cancelhover" @click="del(item, i)"><i class="iconfont icon-works_delete"></i>删除</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="img" @click="handlePreview(item)">
|
|
|
+ <img class="real" :src="item.icon||$thumb" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="li-info">
|
|
|
+ <div>
|
|
|
+ <span class="shenglve tttttt" :title="item.name||'无标题'">{{item.name||'无标题'}}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>{{item.createTime.split(' ')[0]}}</span>
|
|
|
+ <div :title="item.visit">
|
|
|
+ <i class="iconfont iconworks_look"></i>{{item.visit>10000?'1w+':item.visit}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</li>
|
|
|
<div class="work-list-loading-wrapper" v-show="isRequestingMoreData">
|
|
|
<img class="work-list-loading" :src="require('@/assets/images/icons/work-list-loading.gif')" />
|
|
|
@@ -353,165 +357,169 @@ export default {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-content: flex-start;
|
|
|
- >li{
|
|
|
+ >li {
|
|
|
width: calc((100% - @gap * 4) / 5);
|
|
|
margin-bottom: @gap;
|
|
|
- background: #fff;
|
|
|
- position: relative;
|
|
|
margin-right: @gap;
|
|
|
- border-radius: 6px;
|
|
|
- overflow: hidden;
|
|
|
&:nth-of-type(5n){
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
&:nth-last-of-type(1).has-more-data {
|
|
|
display: none;
|
|
|
}
|
|
|
- .li-hover{
|
|
|
- display: none;
|
|
|
- width: 100%;
|
|
|
- height: 240px;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 99;
|
|
|
- background: rgba(0, 0, 0, 0.6);
|
|
|
- .lipreview{
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
- color: #fff;
|
|
|
- display: inline-block;
|
|
|
- line-height: 40px;
|
|
|
- height: 40px;
|
|
|
- width: 100px;
|
|
|
- text-align: center;
|
|
|
- border-radius: 22px;
|
|
|
- cursor: pointer;
|
|
|
- background-color: transparent;
|
|
|
- border: 1px solid #fff;
|
|
|
- &:hover {
|
|
|
- border: none;
|
|
|
- background: #1983F6;
|
|
|
- }
|
|
|
- }
|
|
|
- .oper{
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
+ .wrapper {
|
|
|
+ height: 100%;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ .li-hover{
|
|
|
+ display: none;
|
|
|
+ width: 100%;
|
|
|
+ height: 240px;
|
|
|
position: absolute;
|
|
|
- bottom: 10px;
|
|
|
+ top: 0;
|
|
|
left: 0;
|
|
|
- width: 100%;
|
|
|
- >li{
|
|
|
+ z-index: 99;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ .lipreview{
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
color: #fff;
|
|
|
- font-size: 13px;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 40px;
|
|
|
+ height: 40px;
|
|
|
+ width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 22px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: transparent;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ &:hover {
|
|
|
+ border: none;
|
|
|
+ background: #1983F6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .oper{
|
|
|
display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- >i{
|
|
|
- font-size: 20px;
|
|
|
- margin-right: 4px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ >li{
|
|
|
+ color: #fff;
|
|
|
+ font-size: 13px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ >i{
|
|
|
+ font-size: 20px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- &:hover{
|
|
|
- box-shadow: 0px 2px 12px 0px rgba(50, 50, 51, 0.12);
|
|
|
- transform: translateY(-6px);
|
|
|
- .li-hover{
|
|
|
- display: block;
|
|
|
}
|
|
|
.img{
|
|
|
+ width: 100%;
|
|
|
+ height: 240px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ cursor: pointer;
|
|
|
.real{
|
|
|
- height: 108%;
|
|
|
- }
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 0;
|
|
|
+ transition: all ease 0.3s;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .img{
|
|
|
- width: 100%;
|
|
|
- height: 240px;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- cursor: pointer;
|
|
|
- .real{
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- z-index: 0;
|
|
|
- transition: all ease 0.3s;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .li-info{
|
|
|
- font-size: 14px;
|
|
|
- padding: 10px;
|
|
|
- >div{
|
|
|
- text-align: left;
|
|
|
- &:first-of-type{
|
|
|
- >span{
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 10px;
|
|
|
- display: inline-block;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- cursor: pointer;
|
|
|
- color: #323233;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- &:last-of-type{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- >span{
|
|
|
- font-size: 14px;
|
|
|
- color: #969799;
|
|
|
+ .li-info{
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 10px;
|
|
|
+ >div{
|
|
|
+ text-align: left;
|
|
|
+ &:first-of-type{
|
|
|
+ >span{
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #323233;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
- >div{
|
|
|
- color: #969799;
|
|
|
- i{
|
|
|
- margin-right: 6px;
|
|
|
+ &:last-of-type{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ >span{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #969799;
|
|
|
+ }
|
|
|
+ >div{
|
|
|
+ color: #969799;
|
|
|
+ i{
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ &:hover{
|
|
|
+ .wrapper {
|
|
|
+ box-shadow: 0px 2px 12px 0px rgba(50, 50, 51, 0.12);
|
|
|
+ transform: translateY(-6px);
|
|
|
+ .li-hover{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .img{
|
|
|
+ .real{
|
|
|
+ height: 108%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.add-work{
|
|
|
- .add-con{
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
- text-align: center;
|
|
|
- div{
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- border-radius: 50%;
|
|
|
- background: linear-gradient(144deg, #00AEFB 0%, #0076F6 100%);
|
|
|
- position: relative;
|
|
|
- cursor: pointer;
|
|
|
- >i{
|
|
|
- font-size: 32px;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
- color: #fff
|
|
|
+ .wrapper {
|
|
|
+ .add-con{
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ text-align: center;
|
|
|
+ div{
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: linear-gradient(144deg, #00AEFB 0%, #0076F6 100%);
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ >i{
|
|
|
+ font-size: 32px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ color: #fff
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ color: #333333;
|
|
|
+ display: inline-block;
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
- }
|
|
|
- span{
|
|
|
- color: #333333;
|
|
|
- display: inline-block;
|
|
|
- margin-top: 8px;
|
|
|
- font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
}
|
任一存