新版项目列表显示样式修改

src/components/app-header/components/user_center.vue

@@ -1986,8 +1986,9 @@ export default {
 .yiyun_yinyongname {
   line-height: 1.2;
 }
-.flex_right_pain_body {
+.user_center .flex_right_pain_body {
   font-size: 16px;
+  height: calc(100vh - 24px - 16px - 48px - 58px - 6px - 50px) !important;
 }
 .check-for-updates {
   display: flex;

src/components/notification/index.js

@@ -8,7 +8,7 @@ const NotificationConstructor = vue.extend(Notification);
 //添加通知节点
 
 let notifyWrap = document.createElement('div');
-notifyWrap.style = "position: fixed; right: 0px; top: 48px;z-index:999"
+notifyWrap.style = "position: fixed; right: 32px; top: 68px;z-index:999"
 document.body.appendChild(notifyWrap);
 
 const notify =(options) =>{

src/views/main_web/proj-item.vue

@@ -1,33 +1,23 @@
 <template>
     <div class="prjitem" ref="item">
-        <div class="prjitem_content" @mouseover="showSetIcon(projItem.Id), isMouseHover = true" @mouseout="hiddenSetIcon, isMouseHover = false">
+        <div class="prjitem_content" 
+            @mouseenter="showSetIcon(projItem.Id), isMouseHover = true" 
+            @mouseleave="hiddenSetIcon, isMouseHover = false"
+            @click.stop="goFilePage(projItem)"
+        >
             <img class="prjitem_img"  ref="projimg"
-                    @click="goFilePage(projItem)"
-                    :class="{'height-full': isHeightFull, 'width-full': isWidthFull}"
                 :src="projItem.ShowImgUrl | resolveImg" alt="" 
-            >
-                <div class="newprj_icon" v-if="projItem.newProjStatus == 1">新项目</div>
-                <div class="prjitem_title" 
-                    :class="{'move-item-name': focusProjId == projItem.Id }"
-                    :title="projItem.ProjName">{{ subProjName(projItem.ProjName) }}</div>
-                <div class="operate-bar" v-if="isMouseHover && focusProjId == projItem.Id">
-                    <div class="bar-item">观全局</div>
-                    <div class="bar-item">项目管理</div>
-                </div>
-        </div>
-        <!-- <div class="prjitem_select">
-            <div class="btn_whole" @click.stop="watchAllBtnClick(projItem,index)">
-                <img src="/static/img/global.svg" alt="" srcset="">
-                <p>观全局</p>
-            </div><div class="btn_manage" @click.stop="lookProjDetailClick(projItem)">
-                <img src="/static/img/prjManage.svg" alt="" srcset="">
-                <p>项目管理</p>
+            />
+            <div class="newprj_icon" v-if="projItem.newProjStatus == 1">新项目</div>
+            <div class="prjitem_title" 
+                :class="{'move-item-name': focusProjId == projItem.Id && isMouseHover }"
+                :title="projItem.ProjName">{{ subProjName(projItem.ProjName) }}</div>
+            <div class="operate-bar" :class="{'show-operate-bar': isMouseHover && focusProjId == projItem.Id}">
+                <div class="bar-item" @click.stop="watchAllBtnClick">观全局</div>
+                <div class="bar-item" @click.stop="lookProjDetailClick">项目管理</div>
             </div>
-        </div> -->
+        </div>
     </div>
-
-    
-    
 </template>
 
 <script>
@@ -39,9 +29,6 @@ export default {
             isEmpty:false,
             isMouseHover: false,//鼠标是否悬浮
             projImgEl: null,
-            isWidthFull: false,//图片是否最大宽度显示
-            isHeightFull: false,//图片是否以最大高度显示
-
         }
     },
     props:{
@@ -52,15 +39,6 @@ export default {
             }
         },
     },
-    mounted() {
-        this.itemEl = this.$refs.item;
-        this.projImgEl = this.$refs.projimg;
-        if(this.projImgEl) {
-            this.isWidthFull = this.projImgEl.clientHeight > this.projImgEl.clientWidth;
-            this.isHeightFull = this.projImgEl.clientHeight < this.projImgEl.clientWidth;
-        }
-       
-    },
     watch:{
         projItem() {
             this.projImgEl = this.$refs.projimg;
@@ -77,8 +55,8 @@ export default {
     },
     methods:{
         // 点击了项目管理按钮
-        lookProjDetailClick(projItem) {
-            this.$emit('lookProjDetailClick', projItem);
+        lookProjDetailClick() {
+            this.$emit('lookProjDetailClick');
         },
         //项目管理
         manageProj(){
@@ -95,13 +73,12 @@ export default {
             return name;
         },
         // 点击了观全局按钮
-        watchAllBtnClick(projItem, i) {
-            this.$emit('watchAllBtnClick', projItem, i);
+        watchAllBtnClick() {
+            this.$emit('watchAllBtnClick');
         },
         // 控制设置图标显示与隐藏
         showSetIcon(Id) {
             this.focusProjId = Id;
-   
         },
         hiddenSetIcon() {
             this.focusProjId = '';
@@ -147,7 +124,7 @@ export default {
         display: inline-block;
         border-radius:16px ;
         margin: 30px 0px;
-        transition: all .3s linear;
+        transition: width .3s linear;
         width: 100%;
         overflow: hidden;
     }
@@ -163,7 +140,6 @@ export default {
     .prjitem_content{
         position:relative;
         width: 100%;
-        // height: 245px;    
         height: 245px;
         background-color: #fff;
         overflow:hidden;
@@ -172,7 +148,7 @@ export default {
         height:0;padding-bottom:61%;
     }
     .prjitem_img{
-        max-width: 100%;
+        /* max-width: 100%; */
         /* max-height: 100%; */
         transform: scale(1.1);
         cursor: pointer;
@@ -184,23 +160,16 @@ export default {
     }
     .prjitem_title{
         position: absolute;
-        bottom: 0px;
-
+        bottom: 24px;
         box-sizing: border-box;
-
         width: 100%;
-        height: 68px;
-
         font-size: 25px;
-        padding: 16px 24px 24px 24px;
+        padding: 0 0 0 24px;
 
-        color: rgba(255, 255, 255, 100);
-      
-        font-size: 25px;
+        color: #fff;
         font-weight: 500;
         text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
        
-        display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 1;
         overflow: hidden;
@@ -209,7 +178,7 @@ export default {
         text-align: left;
         cursor: pointer;
 
-        transition: position .5s ease-in;
+        transition: bottom .3s linear;
     }
     .newprj_icon{
         width: 52px;
@@ -223,49 +192,7 @@ export default {
         font-size: 12px; 
         border-radius: 10px;
         text-align: center;
-
-    }
-    .btn_whole,.btn_manage{
-        width: 50%;
-        background-color: rgba(252, 252, 252, 1);
-        display: inline-block;
-        line-height: 80px;
-        font-size: 13px;  
-        position: relative;   
-        cursor: pointer;
-        height: 80px;
-
-    }
-    
-    .btn_whole p,.btn_manage p{
-        display: inline-block;
-        position: absolute;
-        right: 40px;
     }
-    .btn_whole img,.btn_manage img{
-      top: 50%;
-      transform: translateY(-50%);
-      position:absolute;
-      left: 32px;
-    }
-    .prjitem_select{
-      height: 80px;
-    }
-
-    .btn_whole{
-        border-bottom-left-radius:16px;
-        border-right: 1px solid #dedede;
-        box-sizing: border-box;
-    }
-    .btn_manage{
-        border-bottom-right-radius:16px;
-    }
-    .btn_whole:hover,.btn_manage:hover{
-        background-color: rgba(50, 50, 60, 0.15);
-        transition: background-color 1s;
-    }
-    
-
 </style>
 
 <style scoped lang="scss">
@@ -277,20 +204,21 @@ export default {
 
         box-sizing: border-box;
         width: 100%;
-
+        opacity: 0;
+        transition: opacity .4s linear;
+        
         .bar-item {
             flex: 1;
-            font-size: 14px;
-            color: #fff;
-
+            margin: 0 11px;
             height: 52px;
             line-height: 52px;
             text-align: center;
-
-            margin: 0 11px;
-
+            font-size: 14px;
+            font-family: PingFangSC-Regular;
             border-radius: 8px;
+            color: #fff;
             background-color: rgba(50, 50, 60, 0.15);
+            cursor: pointer;
         }
     }
     .height-full {
@@ -302,8 +230,13 @@ export default {
         max-width: 100%;
     }
     .move-item-name {
-        position: absolute;
-        top: 50%;
-        transform: translate(0, -50%);
+        bottom: 50%;
+        transform: translate(0, 50%);
+    }
+    .show-operate-bar {
+        opacity: 1;
+    }
+    .hide-operate-bar {
+        opacity: 0;
     }
 </style>

src/views/main_web/proj-list.vue

@@ -9,16 +9,15 @@
                 <div class="prjitemList">
                     <el-row :gutter="64">
                         <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6"
-                        v-for="projItem in projPageList"
+                        v-for="(projItem, index) in projPageList"
                         :key="projItem.Id"
                         >
-                            <proj-item :projItem="projItem"/>
+                            <proj-item :projItem="projItem" 
+                                        @lookProjDetailClick="lookProjDetailClick(projItem)"
+                                        @watchAllBtnClick="watchAllBtnClick(projItem, index)"/>
                         </el-col>
                     </el-row>
-
-                </div>               
-               
-
+                </div>
             </div>
         </section>
 
@@ -33,7 +32,6 @@ export default {
     data() {
         return {
             isEmpty:false,
-
         }
     },
     components: {
@@ -50,17 +48,6 @@ export default {
         addNewFolders:Function,
         scrollLoad:Function
 
-    },
-    mounted() {
-        this.itemEl = this.$refs.item;
-        this.projImgEl = this.$refs.projimg;
-        if(this.projImgEl) {
-            this.isWidthFull = this.projImgEl.clientHeight > this.projImgEl.clientWidth;
-            this.isHeightFull = this.projImgEl.clientHeight < this.projImgEl.clientWidth;
-            console.log('isWidthFull', this.isWidthFull)
-            console.log('isHeightFull', this.isHeightFull)
-        }
-       
     },
     watch:{
         projPageListLength: {
@@ -103,42 +90,6 @@ export default {
         watchAllBtnClick(projItem, i) {
             this.$emit('watchAllBtnClick', projItem, i);
         },
-        // 控制设置图标显示与隐藏
-        showSetIcon(Id) {
-            this.focusProjId = Id;
-   
-        },
-        hiddenSetIcon() {
-            this.focusProjId = '';
-        },
-
-        /**
-         * 转到workspace工作空间
-         */
-        goFilePage: function (proj) {
-        sessionStorage.createUserID = proj.CreateUserId;
-        sessionStorage.templateID = proj.TemplateId;
-        sessionStorage.projId = proj.Id;
-        sessionStorage.nowFolderIndex = "";
-        sessionStorage.comFolderId = proj.ComFolderId;
-        sessionStorage.newProjStatus = proj.NewProjStatus;
-        if (sessionStorage.projName != proj.ProjName) {
-            sessionStorage.projName = proj.ProjName;
-        }
-        this.$router.push({
-            name: "workspace",
-        }).catch(err => console.log(err))
-        const params={
-            API:'folder/queryNodeFolderListByProjectId',
-            Action:'打开项目',
-            CompanyName:sessionStorage.CompanyName,
-            Subject:sessionStorage.projName,
-            Source:sessionStorage.client,  
-            ProjectName:sessionStorage.projName,
-        }
-        fetchApi('operation/record',params);  
-        sessionStorage.pageName = "workspace";
-        },
     }
 }
 </script>
@@ -147,161 +98,4 @@ export default {
     .prjitemList {
         padding: 0 32px;
     }
-
-    .prjitem{
-        display: inline-block;
-        border-radius:16px ;
-        margin: 30px 0px;
-        transition: all .3s linear;
-        width: 100%;
-        overflow: hidden;
-    }
-    .prjitem:hover{
-      box-shadow:-8px 0px 10px #E0E0E0,   /*左边阴影*/
-		8px 0px 10px #E0E0E0,  /*右边阴影*/
-        0px 10px 10px #E0E0E0; /*下边阴影*/ ;
-      transform:scale(1.02);
-    }
-    .prjitem:last-child:nth-child(3n){
-        margin-right: calc( 28% + 4% );
-    }
-    .prjitem_content{
-        position:relative;
-        width: 100%;
-        // height: 245px;    
-        height: 245px;
-        background-color: #fff;
-        overflow:hidden;
-        border-top-left-radius: 16px;
-        border-top-right-radius: 16px;
-        height:0;padding-bottom:61%;
-    }
-    .prjitem_img{
-        max-width: 100%;
-        /* max-height: 100%; */
-        transform: scale(1.1);
-        cursor: pointer;
-        margin: 0 auto;
-        display: block;
-        position: inherit!important;
-        min-height: 245px;
-        min-width: 100%;
-    }
-    .prjitem_title{
-        position: absolute;
-        bottom: 0px;
-
-        box-sizing: border-box;
-
-        width: 100%;
-        height: 68px;
-
-        font-size: 25px;
-        padding: 16px 24px 24px 24px;
-
-        color: rgba(255, 255, 255, 100);
-      
-        font-size: 25px;
-        font-weight: 500;
-        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
-       
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 1;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        text-align: left;
-        cursor: pointer;
-
-        transition: position .5s ease-in;
-    }
-    .newprj_icon{
-        width: 52px;
-        height: 20px;
-        position: absolute;
-        left: 24px;
-        top: 20px;
-        line-height: 20px;
-        background-color:#D6243A;
-        color: rgba(255, 255, 255, 100);
-        font-size: 12px; 
-        border-radius: 10px;
-        text-align: center;
-
-    }
-    .btn_whole,.btn_manage{
-        width: 50%;
-        background-color: rgba(252, 252, 252, 1);
-        display: inline-block;
-        line-height: 80px;
-        font-size: 13px;  
-        position: relative;   
-        cursor: pointer;
-        height: 80px;
-
-    }
-    
-    .btn_whole p,.btn_manage p{
-        display: inline-block;
-        position: absolute;
-        right: 40px;
-    }
-    .btn_whole img,.btn_manage img{
-      top: 50%;
-      transform: translateY(-50%);
-      position:absolute;
-      left: 32px;
-    }
-    .prjitem_select{
-      height: 80px;
-    }
-
-    .btn_whole{
-        border-bottom-left-radius:16px;
-        border-right: 1px solid #dedede;
-        box-sizing: border-box;
-    }
-    .btn_manage{
-        border-bottom-right-radius:16px;
-    }
-    .btn_whole:hover,.btn_manage:hover{
-        background-color: rgba(50, 50, 60, 0.15);
-        transition: background-color 1s;
-    }
-    
-
-</style>
-
-<style scoped lang="scss">
-    .operate-bar {
-        position: absolute;
-        bottom: 11px;
-        display: flex;
-        justify-content: space-between;
-
-        box-sizing: border-box;
-        width: 100%;
-
-        .bar-item {
-            flex: 1;
-            font-size: 14px;
-            color: #fff;
-
-            height: 52px;
-            line-height: 52px;
-            text-align: center;
-
-            margin: 0 11px;
-
-            border-radius: 8px;
-            background-color: rgba(50, 50, 60, 0.15);
-        }
-    }
-
-    .move-item-name {
-        position: absolute;
-        top: 50%;
-        transform: translate(0, -50%);
-    }
 </style>