update11111

src/assets/style/component.less

@@ -1,3 +1,4 @@
+
 ::-webkit-scrollbar {
   width: 4px;
   height: 1px;
@@ -697,7 +698,67 @@ textarea:-ms-input-placeholder {
 }
 
 .message-material{
-  border-radius: 0;
+  border-radius: 2px;
+  @color:#1983F6;
+  padding: 26px;
+  .header-material{
+    border-bottom: none;
+    line-height: 1;
+    height: auto;
+    >span {
+      font-size: 18px;
+      margin-left: 0;
+      &:last-child {
+        width: auto;
+        cursor: pointer;
+        >i{
+          font-size: 20px;
+          color: #909090;
+        }
+      }
+    }
+  }
+
+  .main-material{
+    .ui-message-icon,.ui-message-title{
+      display: none;
+    }
+    .ui-message-content{
+      line-height: 20px;
+      font-size: 14px;
+      color: #323233;
+      text-align: left;
+      margin: 40px 0;
+    }
+  }
+  
+  
+  .footer-material{
+    margin: 0;
+    margin-top: 60px;
+    padding: 0;
+    border-top: none;
+    text-align: right;
+    .ui-button {
+      margin: 0 10px;
+      font-size: 14px;
+      border-radius: 0;
+      width: 104px;
+      height: 32px;
+      border: none;
+      border-radius: 4px!important;
+      &.submit{
+        background: @color;
+        color: #fff;
+      }
+      &.cancel{
+        color: #202020;
+        background: #EBEBEB;
+      }
+    }
+  
+  }
+  
 }
 
 .ui-message-header {
@@ -719,21 +780,6 @@ textarea:-ms-input-placeholder {
   }
 }
 
-.header-material{
-  span {
-    font-size: 16px;
-    font-weight: bold;
-
-    &:last-child {
-      width: 40px;
-      cursor: pointer;
-      >i{
-        font-size: 20px;
-        color: #909090;
-      }
-    }
-  }
-}
 
 .ui-message-footer {
   margin: 18px 0;
@@ -747,28 +793,6 @@ textarea:-ms-input-placeholder {
   }
 }
 
-.footer-material{
-  margin: 0;
-  padding: 20px 0;
-  border-top: 1px solid #e3e3e3;
-  .ui-button {
-    margin: 0 10px;
-    font-size: 14px;
-    border-radius: 0;
-    width: 104px;
-    height: 32px;
-    border: none;
-    &.submit{
-      background: #1FE4DC;
-      color: #202020;
-    }
-    &.cancel{
-      color: #202020;
-      background: #EBEBEB;
-    }
-  }
-
-}
 
 .ui-message-main {
   .ui-message-icon {
@@ -796,18 +820,6 @@ textarea:-ms-input-placeholder {
   }
 }
 
-.main-material{
-  .ui-message-icon,.ui-message-title{
-    display: none;
-  }
-  .ui-message-content{
-    line-height: 20px;
-    color: #202020;
-    margin: 30px;
-  }
-}
-
-
 .animated.speed {
   -webkit-animation-duration: 0.2s;
   animation-duration: 0.2s;

src/assets/style/component.widgets.less

@@ -541,6 +541,19 @@ body[edit-mode="pc"] .ruler-label .ruler-label-name,
     opacity: .5
 }
 
+.el-message{
+    border: none;
+    box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+}
+
+.el-message__content{
+    color: rgba(0, 0, 0, .65)!important;
+}
+
+.el-message--error{
+    background: #fff!important;
+}
+
 @-webkit-keyframes ruler-point {
     0% {
         height: 0

src/components/table/style.less

@@ -11,8 +11,8 @@
     display: flex;
     align-items: center;
     width: 100%;
-    padding: 5px 0 5px 10px;
-
+    padding: 15px;
+    background: #F5F7FA;
     li{
       text-align: left;
       padding-right: 10px;
@@ -25,7 +25,7 @@
       display: flex;
       align-items: center;
       width: 100%;
-      padding: 10px 0 10px 10px;
+      padding: 15px;
       &:hover{
         background: #F7F7F7;
         &[active-txt]{

src/components/tablist/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="menu-con" :style="{left:deviation+'px'}">
+  <div class="menu-con" :key="id" :style="{left:deviation+'px'}">
     <template v-if="isShowScroll">
       <i class="iconfont icon_back" @click="moveSlide('forward')"></i>
       <i class="iconfont icon_forward" @click="moveSlide('back')"></i>
@@ -43,6 +43,11 @@
 <script>
 const RANGE = 60
 export default {
+  data(){
+    return {
+      hasLoad:false
+    }
+  },
   props: {
     list: {
       default() {
@@ -62,6 +67,13 @@ export default {
   },
   mounted(){
     this.refreshScroll()
+    if (!this.hasLoad) {
+      this.$nextTick(()=>{
+        this.refreshScroll()
+        this.hasLoad=true
+      })
+    }
+
   },
   watch: {
     '$route.name':function (newVal) {
@@ -77,15 +89,17 @@ export default {
     refreshScroll(){
       this.$nextTick(()=>{
         this.oneLeft = 0
-        this.oneWidth = document.querySelector('#'+this.subId).scrollWidth
-        this.menuWidth = document.querySelector('#'+this.id).scrollWidth
-
-        this.isShowScroll = this.oneWidth  + 40 > this.menuWidth
+        if (document.querySelector('#'+this.subId)) {
+            this.oneWidth = document.querySelector('#'+this.subId).offsetWidth
+            this.menuWidth = document.querySelector('#'+this.id).offsetWidth
+            console.log(this.menuWidth,this.oneLeft, this.oneWidth);
+            this.isShowScroll = this.oneWidth  + 40 > this.menuWidth
+        }
       })
     },
     moveSlide(type) {
       if (type == 'back') {
-        console.log((this.menuWidth - this.oneLeft), this.oneWidth);
+        console.log(this.menuWidth,this.oneLeft, this.oneWidth);
         if ((this.menuWidth - this.oneLeft) > this.oneWidth) {
           return
         }

src/core/utils.js

@@ -15,6 +15,7 @@ export default class Utils {
       var sceneName = krpano.get('xml.scene');
       var hlookat = krpano.get("view.hlookat");
       var vlookat = krpano.get("view.vlookat");
+      console.log(hlookat,vlookat);
       return {
         sceneName,
         hlookat,

src/framework/material/aside.vue

@@ -46,7 +46,6 @@ export default {
 
 <style lang="less" scoped>
 .aside{
-  color: #161A1A;
   background: #fff;
   width: 274px;
   margin-right: 30px;
@@ -59,10 +58,11 @@ export default {
       cursor: pointer;
       line-height: 48px;
       height: 48px;
+      color: #323233;
       font-size: 16px;
       &:hover, &.router-link-exact-active,
       &.router-link-active {
-        background: #EBEBEB;
+        background: #F7F8FA;
         font-weight: bold;
       }
       .iconfont{

src/framework/material/header.vue

@@ -10,6 +10,10 @@
         </li>
       </ul>
       <div class="user">
+        <!-- <div>
+          <img :src="require('@/assets/images/icons/img_logo.png')" alt="" />
+          <span>简体中文</span>
+        </div> -->
         <img title="回到个人中心" @click="backtoInfo" :src="userInfo.head||$thumb" alt="" />
       </div>
     </div>
@@ -62,7 +66,7 @@ export default {
   },
   methods:{
     backtoInfo(){
-    window.location.href = '/#/information'
+      window.location.href = '/#/information'
     },
     handleItem(item){
       this.$router.push(item.path)
@@ -109,8 +113,21 @@ export default {
         font-size: 16px;
         color: #909090;
         &.active{
-          color: #202020;
-          font-weight: 600;
+          font-size: 16px;
+          font-weight: bold;
+          color: #0076F6;
+          position: relative;
+          &::before{
+            content: '';
+            width: 20px;
+            height: 2px;
+            background: #0076F6;
+            display: inline-block;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: -10px;
+          }
         }
       }
     }

src/framework/material/index.vue

@@ -26,9 +26,11 @@ export default {
 <style lang="less" scoped>
 .material{
   position: relative;
+  background: #EFF2F4;
   .body{
     max-width: 1280px;
-    margin: 30px auto;
+    margin: 30px auto 0;
+    padding-bottom: 30px;
     display: flex;
     padding-top: 70px;
   }

src/utils/request.js

@@ -26,16 +26,12 @@ export const statusCode = {
   NEXT: -999, //继续执行
   SUCCESS: 0, //成功
   EXCEPTION: -1, //异常错误
-  FAILURE_CODE_3001: 3001, //素材已被引用，无法删除
-  FAILURE_CODE_3002: 3002, //素材已被引用，无法删除
+  FAILURE_CODE_3002: 3002, //请至少保留一个场景。
   FAILURE_CODE_3003: 3003, //文件名称不允许超过50个字符
   FAILURE_CODE_3005: 3005, //不是该用户作品
   FAILURE_CODE_3006: 3006, //作品已被删除，无法编辑
-
-  FAILURE_CODE_3007: 3007, //作品已被删除，无法编辑
-
+  FAILURE_CODE_3007: 3007, //素材已被引用，无法删除。
   FAILURE_CODE_5003: 5003, //不支持此图片
-
   FAILURE_CODE_7005: 7005, //审核中不能编辑
   FAILURE_CODE_7006: 7006, //已审核不能编辑
   FAILURE_CODE_5001: 5001, //token失效

src/views/material/components/paging.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="layer" v-if="max>=1">
     <div class="number">
+      <span :class="{disablehandle:current==1}" @click="current = current - 1">
+        <i class="iconfont iconedit_pre"></i>
+      </span>
+
       <template v-if="currMin > min">
         <span @click="current = min">{{ min }}</span>
         <span v-if="currMin - 1 > min">…</span>
@@ -20,7 +24,9 @@
         <span @click="current = max">{{ max }}</span>
       </template>
 
-      <span v-if="current < max" class="next" @click="current = current + 1"></span>
+      <span :class="{disablehandle:current >= max}" @click="current = current + 1">
+        <i class="iconfont iconedit_next"></i>
+      </span>
     </div>
   </div>
 </template>
@@ -109,6 +115,8 @@ export default {
 
 <style lang="less" scoped>
 @wh:32px;
+@color:#1983F6;
+
 .layer {
   span {
     font-size: 16px;
@@ -120,10 +128,12 @@ export default {
     width: @wh;
     height: @wh;
     text-align: center;
+    border-radius: 2px;
+    background: #fff;
     line-height: @wh;
     &.active {
       color: #fff;
-      background: #202020;
+      background: @color;
     }
   }
   .number span {
@@ -148,38 +158,9 @@ export default {
     color: #fff;
   }
 
-  .next {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    height: 22px;
-    vertical-align: middle;
-    &::before {
-      content: "";
-      background-color: #111;
-      height: 2px;
-      transition: 0.3s ease all;
-      width: 8px;
-      transform-origin: 0 0;
-    }
-    &::after {
-      width: 0;
-      transition: 0.2s ease all;
-      content: "";
-      height: 0;
-      border-color: transparent transparent transparent #011111;
-      border-style: solid;
-      border-width: 5px 0 5px 8px;
-    }
-
-    &:hover {
-      &::before {
-        transform: scaleX(2);
-      }
-      &::after {
-        transform: translateX(5px);
-      }
-    }
+  .disablehandle {
+      color: #C0C4CC;
+      pointer-events: none;
   }
 
   .layout .next-page-item:after {

src/views/material/pano/index.vue

@@ -3,27 +3,24 @@
     <div class="top">
       <crumbs :list="tablist" />
       <div class="filter">
-        <div>
-          <input
-            type="text"
-            v-model="searchKey"
-            @keyup.enter="(paging.current = 1) && getMaterialList()"
-            placeholder="搜索素材"
-          />
-          <i
-            @click="(paging.current = 1) && getMaterialList()"
-            class="iconfont iconbs_search"
-          ></i>
+          <div>
+            <i class="iconfont iconbs_search"></i>
+            <input
+              type="text"
+              placeholder="搜索全景作品"
+              v-model="searchKey"
+            >
+            <i v-if="searchKey" @click="searchKey=''" class="iconfont iconbs_close del"></i>
+          </div>
         </div>
-      </div>
     </div>
     <div class="btn">
       <button
         @mouseover.stop="showList = true"
         @click="$refs.uploadFile.click()"
-        class="ui-button ui-button-rect submit"
+        class="ui-button submit"
       >
-        <span>上传素材</span><i class="iconfont iconbs_upload"></i>
+        <span>上传素材</span><i class="iconfont iconbs_list_info"></i>
         <upload
           ref="uploadFile"
           :failString="'格式错误，请上传2:1、120MB以内、jpg格式的全景图片'"
@@ -212,6 +209,10 @@ export default {
     "paging.pageNum": function () {
       this.getMaterialList();
     },
+    searchKey(){
+      this.paging.current = 1
+      this.getMaterialList();
+    },
     isLongPolling: {
       handler: function (newVal) {
         if (!newVal) {

src/views/material/popup/cover.vue

@@ -1,7 +1,7 @@
 <template>
     <popup v-if="show">
-      <div class="ui-message ui-message-confirm" style="width: 430px">
-        <div class="ui-message-header">
+      <div class="ui-message ui-message-confirm message-material" style="width: 430px">
+        <div class="ui-message-header header-material">
           <span>全景图封面设置</span>
           <span @click="$emit('close')">
             <i class="iconfont icon_close"></i>
@@ -21,7 +21,7 @@
           </div>
         </div>
         <div class="ma-line"></div>
-        <div class="ui-message-footer">
+        <div class="ui-message-footer footer-material">
           <div class="btn">
             <button @click="$emit('close')" class="ui-button ui-button-rect cancel" >
               取消
@@ -75,16 +75,13 @@ export default {
 
 <style lang="less" scoped>
 .ui-message-confirm{
-  border-radius: 0;
   .icon_close{
     color: #909090;
   }
-  .ui-message-header{
-    border-bottom: 1px solid #EBEBEB;
-  }
+
   .ui-message-main{
     display: flex;
-    margin: 20px 30px;
+    margin: 40px 0;
     justify-content: space-between;
     background: #fff;
     >div{
@@ -104,12 +101,10 @@ export default {
   .ui-message-footer{
     width: 100%;
     .btn{
-      width: 80%;
       display: flex;
-      justify-content: center;
-      margin: 0 auto;
+      justify-content: flex-end;
       .ui-button{
-        max-width: 104px
+        max-width: 104px;
       }
     }
 

src/views/material/style.less

@@ -1,16 +1,27 @@
-@color:#1FE4DC;
+@color:#1983F6;
 .con {
   .top {
     display: flex;
     justify-content: space-between;
     align-items: center;
+  }
 
-  
+  .ui-button{
+    border: 1px @color solid;
+    font-size: @color;
   }
   .btn{
     margin-top: 18px;
     .ui-button{
       position: relative;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+      border-radius: 4px;
+      >span{
+        display: inline-block;
+        margin-right: 4px;
+      }
       &:hover{
         .upload-list{
           display: block;
@@ -100,13 +111,15 @@
 
 .filter > div {
   min-width: 292px;
-  height: 34px;
-  border: 1px solid #95989A;
+  height: 40px;
+  border: 1px solid #EBEDF0;
   border-radius: 2px;
   display: inline-block;
+  border-radius: 20px;
   position: relative;
   font-size: 14px;
   vertical-align: middle;
+  background: #F7F8FA;
 }
 
 .filter > div > select,
@@ -121,21 +134,29 @@
 }
 
 .filter > div > input {
-  padding-right: 40px;
+  padding-left: 44px;
 }
 
+
 .filter > div > i {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  right: 10px;
+  left: 10px;
   cursor: pointer;
-  color: #000;
+  color: #C8C9CC;
+  font-size: 24px;
+}
+.filter > div >.del{
+  left: auto;
+  right: 10px;
+  font-size: 14px;
 }
 
+
 .submit{
-  background-color: #1FE4DC!important;
-  border: 1px solid #1FE4DC!important;
+  background-color: @color!important;
+  border: 1px solid @color!important;
 }
 .cancel{
   background: #EBEBEB;
@@ -214,7 +235,7 @@
       justify-content: space-between;
       display: flex;
       .success{
-        color: #1FE4DC;
+        color: @color;
       }
       .error{
         color: #F56C6C;
@@ -246,9 +267,40 @@
     width: 100%;
   }
 }
-
+.nodata{
+  text-align: center;
+  width: 100%;
+  margin: 100px auto;
+    >span{
+      color: #646566;
+    }
+    .create{
+      width: 100px;
+      margin: 0 auto;
+      margin-top: 20px;
+      height: 36px;
+      color: #fff;
+      line-height: 36px;
+      background: linear-gradient(144deg, #00AEFB 0%, #0076F6 100%);
+      border-radius: 22px;
+      text-align: center;
+    }
+  }
 }
 
+
 .panorama{
   padding: 24px 30px;
-}
+}
+
+.comfirmhover{
+  &:hover{
+    color: @color!important;
+  }
+}
+
+.cancelhover{
+  &:hover{
+    color: #FA5555!important;
+  }
+}

src/views/material/works/index.vue

@@ -1,50 +1,59 @@
 <template>
   <div class="works con">
     <div class="tab">
-      <span>我的全景作品</span>
+      <span>我的作品 {{paging.total>0?`(${paging.total})`:''}}</span>
       <div class="tab-r">
-        <button @click="add" class="ui-button ui-button-rect submit"><span>创建作品</span></button>
          <div class="filter">
           <div>
+            <i class="iconfont iconbs_search"></i>
             <input
               type="text"
-              placeholder="搜索全景作品"
+              placeholder="搜索素材"
               v-model="searchKey"
-              @keyup.enter="(paging.current = 1) && getWorksList()"
             >
-            <i @click="(paging.current = 1) && getWorksList()" class="iconfont iconbs_search"></i>
+            <i v-if="searchKey" @click="searchKey=''" class="iconfont iconbs_close del"></i>
           </div>
         </div>
       </div>
     </div>
-    <ul class="w-list">
-      <li v-for="(item,i) in list" :key="i">
-        <div class="view" :title="item.visit">
-          <i class="iconfont iconlist_views"></i>{{item.visit>10000?'1w+':item.visit}}
+    <ul class="w-list" v-if="list.length>0">
+      <li class="add-work" @click="add">
+        <div class="add-con">
+          <div>
+            <i class="iconfont icon_plus"></i>
+          </div>
+          <span>创建作品</span>
         </div>
-        <div class="share" @click="openShare(item)">
-          <i class="iconfont iconbs_share"></i>
+      </li>
+      <li v-for="(item,i) in list" :key="i">
+        <div class="li-hover">
+          <span class="lipreview" @click="handlePreview(item)">预览</span>
+          <ul class="oper">
+            <li class="comfirmhover" @click="edit(item)"><i class="iconfont iconbs_list_edit"></i>编辑</li>
+            <li class="comfirmhover" @click="openShare(item)"><i class="iconfont iconbs_share"></i>分享</li>
+            <li class="cancelhover" @click="del(item)"><i class="iconfont iconlist_delete"></i>删除</li>
+          </ul>
         </div>
         <div class="img" @click="handlePreview(item)">
           <img class="real" :src="item.icon||$thumb" alt="" />
         </div>
         <div class="li-info">
-          <span class="shenglve" :title="item.name" @click="handlePreview(item)">{{item.name||'无标题'}}</span>
+          <span class="shenglve" :title="item.name">{{item.name||'无标题'}}</span>
           <div>
             <span>{{item.createTime}}</span>
-            <div>
-              <span @click="edit(item)" class="edit">编辑</span>
-              <span @click="del(item)" class="del">删除</span>
+            <div :title="item.visit">
+              <i class="iconfont iconlist_views"></i>{{item.visit>10000?'1w+':item.visit}}
             </div>
           </div>
         </div>
       </li>
     </ul>
-    <div class="nodata" v-if="list.length == 0">
+    <div class="nodata" v-else>
         <img :src="$noresult" alt="">
         <span>
-          {{isClickSearch ? "未搜索到结果" : "暂无作品"}}
+          {{isClickSearch ? "未搜索到结果" : "您还没有作品，请先创建作品~"}}
         </span>
+        <div class="create">创建作品</div>
       </div>
     <div class="paging">
       <Paging
@@ -92,7 +101,7 @@ export default {
       shareItem:'',
       isClickSearch: "",
       paging: {
-        pageSize: 8,
+        pageSize: 14,
         pageNum: 1,
         total: 0,
         showSize: 4,
@@ -106,6 +115,10 @@ export default {
   watch:{
     'paging.pageNum':function () {
       this.getWorksList()
+    },
+    searchKey(){
+      this.paging.current = 1
+      this.getWorksList()
     }
   },
   methods:{
@@ -149,7 +162,8 @@ export default {
     },
     del(item){
       this.$confirm({
-          content: "是否删除？",
+          title:'删除素材',
+          content: "确定要删除素材吗？",
           ok: () => {
               delWorks(item.id,()=>{
                 this.$tips({ content: "删除成功",icon:'ok' });
@@ -179,6 +193,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@color:#1983F6;
+
 .works{
   width: 100%;
   flex-direction: column;
@@ -190,7 +206,7 @@ export default {
     align-items: center;
     padding: 24px 30px;
     >span{
-      font-size: 16px;
+      font-size: 18px;
       font-weight: bold;
     }
     .tab-r{
@@ -206,61 +222,83 @@ export default {
     flex-wrap: wrap;
     margin-top: 30px;
     display: flex;
-    @gap:27px;
+    @gap:20px;
     >li{
-      width: calc((100% - @gap * 3) / 4);
+      width: calc((100% - @gap * 4) / 5);
       margin-bottom: @gap;
       box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.16);
       background: #fff;
       position: relative;
       margin-right: @gap;
-
-      &:nth-of-type(4n){
+      border-radius: 4px;
+      &:nth-of-type(5n){
         margin-right: 0;
       }
 
-     
-      &:hover{
-        .img{
-          .real{
-            height: 108%;
-          }  
-        }
-      }
-      >.view{
-        position: absolute;
-        top: 7px;
-        left: 7px;
-        color: #fff;
-        z-index: 99;
-        font-size: 12px;
-        text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
-        .iconfont{
-          font-size: 12px;
-          margin-right: 8px;
-        }
-      }
-      .share{
+      .li-hover{
+        display: none;
+        width: 100%;
+        height: 240px;
         position: absolute;
-        bottom: 82px;
-        right: 10px;
-        width: 40px;
-        height: 40px;
-        cursor: pointer;
-        background: rgba(0, 0, 0, 0.5);
-        color: #fff;
+        top: 0;
+        left: 0;
         z-index: 99;
-        .iconfont{
+        background: rgba(0, 0, 0, 0.6);
+        .lipreview{
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%,-50%);
-          font-size: 24px;
+          color: #fff;
+          border: 1px #fff solid;
+          display: inline-block;
+          line-height: 40px;
+          height: 40px;
+          width: 100px;
+          text-align: center;
+          border-radius: 22px;
+          cursor: pointer;
+          &:hover{
+            background: @color;
+            border: 1px @color solid;
+          }
+        }
+        .oper{
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          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{
+        .li-hover{
+          display: block;
+        }
+        .img{
+          .real{
+            height: 108%;
+          }  
         }
       }
+     
       .img{
         width: 100%;
-        height: 300px;
+        height: 240px;
         position: relative;
         overflow: hidden;
         cursor: pointer;
@@ -287,29 +325,57 @@ export default {
           white-space: nowrap;
           width: 100%;
           cursor: pointer;
+          color: #323233;
+          font-size: 16px;
         }
         >div{
           display: flex;
           justify-content: space-between;
           align-items: center;
           >span{
-            font-size: 12px;
-            color: #909090;
+            font-size: 14px;
+            color: #969799;
           }
           >div{
-            .edit{
-              margin-right: 10px;
-              cursor: pointer;
-              color: @color;
-            }
-            .del{
-              cursor: pointer;
-              color: #F56C6C;
+            color: #969799;
+            i{
+              margin-right: 6px;
             }
           }
         }
       }
     }
+    .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
+          }
+        }
+        span{
+          color: #333333;
+          display: inline-block;
+          margin-top: 8px;
+          font-size: 14px;
+        }
+      }
+    }
   }
 }
 </style>