update code

yanzhu-bigscreen/public/css/largeScreenStyle.css

@@ -50,6 +50,10 @@ body{
         width:1912px;
         height: 1080px;
     }
+    .img-openwin{
+        width: 26px;
+        height:26px;
+    }
     .div-header{
         background-image: url("../images/banner-top-1k.png");
     }
@@ -71,6 +75,22 @@ body{
     .div-header{
         background-image: url("../images/banner-top-2k.png");
     }
+    .img-openwin{
+        width: 30px;
+        height:30px;
+    }
+    .screen-one-1-1::after,.screen-one-1-2::after,.screen-one-1-3::after,
+    .screen-one-2-1::after,.screen-one-2-2::after,.screen-one-2-3::after,
+    .screen-one-3-1::after,.screen-one-3-2::after,.screen-one-3-3::after
+    {
+        background-size: auto 30px;
+        height: 30px !important;
+    }
+    .module-title{
+        height: 30px !important;
+        line-height: 30px !important;
+        font-size: 20px;
+    }
 }
 
 
@@ -90,6 +110,27 @@ body{
     .div-header{
         background-image: url("../images/banner-top-4k.png");
     }
+    .img-openwin{
+        width: 40px;
+        height: 40px;
+    }
+    .screen-one-1-1::after,.screen-one-1-2::after,.screen-one-1-3::after,
+    .screen-one-2-1::after,.screen-one-2-2::after,.screen-one-2-3::after,
+    .screen-one-3-1::after,.screen-one-3-2::after,.screen-one-3-3::after
+    {
+        background-size: auto 40px;
+        height: 40px !important;
+    }
+    .module-title{
+        height: 40px !important;
+        line-height: 40px !important;
+        font-size: 26px;
+    }
+}
+.img-openwin{
+    position: absolute;
+    top:0px;
+    right: 0px;
 }
 .main-app {
     height:calc(100%  - 130px);

yanzhu-bigscreen/src/components/header.vue

@@ -15,8 +15,11 @@
             </el-col>
             <el-col :span="8">
                 <div class="header-title-user-info">
-                <el-select v-model="selProject" style="width: 150px;margin-right: 20px;height:30px;line-height: 30px;" @change="doProjectSelect">
+                    <el-select v-model="selProject" popper-class="header-sel-project-pop"
-                    <el-option v-for="it in projects" :key="it.id" :label="it.projectName" :value="it.id"></el-option>
+                        style="width: 150px;margin-right: 20px;height:30px;line-height: 30px;"
+                        @change="doProjectSelect">
+                        <el-option v-for="it in projects" :key="it.id" :label="it.projectName"
+                            :value="it.id"></el-option>
                     </el-select>
                     <span class="command" @click="doLogout">{{ nickName }}
                         <i class="el-icon-switch-button"></i>
@@ -96,6 +99,7 @@ export default {
 <style lang="less">
 .div-header {
     line-height: 100px;
+
     .header-center {
         text-align: center;
         color: #3da2ff;
@@ -103,4 +107,75 @@ export default {
         font-weight: bold;
     }
 }
+
+@media (min-width: 1921px) and (max-width: 2560px) {
+    .div-header {
+        .head-nav {
+            font-size: 16px;
+            width: auto;
+            height: auto;
+            padding: 5px 40px;
+            position: relative;
+            top: -8px;
+        }
+    }
+
+    .header-center {
+        font-size: 42px !important;
+        margin-top: 10px;
+    }
+
+    .header-title-user-info {
+        font-size: 20px;
+
+        .el-select {
+            transform: scale(1.5);
+            margin-right: 60px !important;
+            position: relative;
+            top: -5px;
+        }
+    }
+    .header-sel-project-pop {
+        transform: scale(1.5);
+        width: 200px;
+        min-width: unset !important;
+        margin-left: 50px;
+    }
+}
+
+@media (min-width: 2561px) {
+    .div-header {
+        .head-nav {
+            font-size: 20px;
+            width: auto;
+            height: auto;
+            padding: 5px 40px;
+            position: relative;
+            top: -8px;
+        }
+    }
+
+    .header-center {
+        font-size: 52px !important;
+        margin-top: 10px;
+    }
+
+    .header-title-user-info {
+        font-size: 30px;
+
+        .el-select {
+            transform: scale(2);
+            margin-right: 100px !important;
+            position: relative;
+            top: -5px;
+        }
+    }
+
+    .header-sel-project-pop {
+        transform: scale(2);
+        width: 200px;
+        min-width: unset !important;
+        margin-left: 100px;
+    }
+}
 </style>

yanzhu-bigscreen/src/views/projectDetail.vue

@@ -3,8 +3,10 @@
 
         <el-col :span="6" class="h100">
             <module-one-1-1 label="项目概况">
-                <div class="glr-title">{{ selProject?.projectName||'' }}</div>
+                <img src="images/icon2001.png" class="img-openwin"/>
+                <div class="glr-title prj-info-title">{{ selProject?.projectName||'' }}</div>
                 <div class="dept-info-list">
+                    <el-row>
                     <el-col :span="12" class="dept-item">
                         <div class="dept-title">建设单位</div>
                         <div v-if="deptType1==null" class="dept-nodata">
@@ -14,7 +16,7 @@
                             <img class="dept-img" src="images/company_3.png"/>
                             <div class="dept-row">
                                 <div class="dept-name"> {{ deptType1.deptName }}</div>
-                                <div class="dept-leader-phone">
+                                <div class="dept-leader-phone" :title="(deptType1.leader||'')+' '+(deptType1.phone||'')">
                                     <span class="dept-leader">{{deptType1.leader}}</span>
                                     <span class="dept-phone">{{deptType1.phone}}</span>
                                 </div>
@@ -30,13 +32,15 @@
                             <img class="dept-img" src="images/company_2.png"/>
                             <div class="dept-row">
                                 <div class="dept-name"> {{ deptType2.deptName }}</div>
-                                <div class="dept-leader-phone">
+                                <div class="dept-leader-phone" :title="(deptType2.leader||'')+' '+(deptType2.phone||'')">
                                     <span class="dept-leader">{{deptType2.leader}}</span>
                                     <span class="dept-phone">{{deptType2.phone}}</span>
                                 </div>
                             </div>
                         </div>                    
                     </el-col>
+                </el-row>
+                <el-row>
                     <el-col :span="12" class="dept-item">
                         <div class="dept-title">总包单位</div>
                         <div v-if="deptType3.deptName==null" class="dept-nodata">
@@ -46,7 +50,7 @@
                             <img class="dept-img" src="images/company_3.png"/>
                             <div class="dept-row">
                                 <div class="dept-name"> {{ deptType3.deptName }}</div>
-                                <div class="dept-leader-phone">
+                                <div class="dept-leader-phone" :title="(deptType3.leader||'')+' '+(deptType3.phone||'')">
                                     <span class="dept-leader">{{deptType3.leader}}</span>
                                     <span class="dept-phone">{{deptType3.phone}}</span>
                                 </div>
@@ -62,14 +66,15 @@
                             <img class="dept-img" src="images/company_11.png"/>
                             <div class="dept-row">
                                 <div class="dept-name"> {{ deptType4.deptName }}</div>
-                                <div class="dept-leader-phone">
+                                <div class="dept-leader-phone" :title="(deptType4.leader||'')+' '+(deptType4.phone||'')">
                                     <span class="dept-leader">{{deptType4.leader}}</span>
                                     <span class="dept-phone">{{deptType4.phone}}</span>
                                 </div>
                             </div>
                         </div>                    
                     </el-col>
-
+                </el-row>
+                <el-row>
                     <el-col :span="12" class="dept-item">
                         <div class="dept-title">检测单位</div>
                         <div v-if="deptType5==null" class="dept-nodata">
@@ -79,7 +84,7 @@
                             <img class="dept-img" src="images/company_12.png"/>
                             <div class="dept-row">
                                 <div class="dept-name"> {{ deptType5.deptName }}</div>
-                                <div class="dept-leader-phone">
+                                <div class="dept-leader-phone" :title="(deptType5.leader||'')+' '+(deptType5.phone||'')">
                                     <span class="dept-leader">{{deptType5.leader}}</span>
                                     <span class="dept-phone">{{deptType5.phone}}</span>
                                 </div>
@@ -96,14 +101,14 @@
                             <img class="dept-img" src="images/company_10.png"/>
                             <div class="dept-row">
                                 <div class="dept-name"> {{ deptType6.deptName }}</div>
-                                <div class="dept-leader-phone">
+                                <div class="dept-leader-phone" :title="(deptType6.leader||'')+' '+(deptType6.phone||'')">
                                     <span class="dept-leader">{{deptType6.leader}}</span>
                                     <span class="dept-phone">{{deptType6.phone}}</span>
                                 </div>
                             </div>
                         </div>                    
                     </el-col>
-
+                </el-row>
                 </div>
             </module-one-1-1>
             <module-one-1-1 label="项目概况">
@@ -181,4 +186,109 @@ export default {
 }
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+.project-detail{
+    color: #c2d5f6;
+    .dept-info-list{
+        height: calc(100% - 30px);
+        margin-top:10px;
+        .el-row{
+            min-height: 33%;
+        }
+        .dept-item{
+           .dept-title{
+            line-height: 30px;
+            font-size: 14px;
+           } 
+           .dept-nodata{
+            color:#ccc;
+            font-size: 12px;
+           }
+           .dept-info{
+            display: flex;
+            .dept-img{
+                width:42px;
+                height:42px;
+            }
+            .dept-row{
+                margin-left: 8px;
+                font-size:12px;   
+                line-height: 22px;
+                display: inline-grid;
+                flex-grow: 1;
+                padding-right: 10px;
+                .dept-name{
+                    color: #50a2eb;
+                }
+                .dept-leader-phone{
+                    color: #ab3715;
+                     cursor: pointer;    
+                     overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;           
+                    .dept-leader{
+                        margin-right:10px;
+                    }
+                }
+            }
+           }
+        }
+    }
+}
+@media (min-width: 1921px) and (max-width: 2560px) {
+    .project-detail{
+        .prj-info-title{
+            font-size:24px;
+        }
+        .dept-info-list{
+            .dept-item{
+                .dept-title{
+                    font-size: 18px;
+                    line-height: 40px;
+                }
+                .dept-nodata{
+                    font-size: 16px;
+                }
+                .dept-info{
+                    .dept-img{
+                        width:60px;
+                        height:60px;
+                    }
+                    .dept-row{
+                        font-size: 18px;
+                        line-height: 32px;
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 2561px) {
+    .project-detail{
+        .prj-info-title{
+            font-size:32px;
+        }
+        .dept-info-list{
+            .dept-item{
+                .dept-title{
+                    font-size: 24px;
+                    line-height: 40px;
+                }
+                .dept-nodata{
+                    font-size: 18px;
+                }
+                .dept-info{
+                    .dept-img{
+                        width:100px;
+                        height:100px;
+                    }
+                    .dept-row{
+                        font-size: 24px;
+                        line-height: 32px;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>