diff --git a/yanzhu-bigscreen/src/components/module/module-one-3-2.vue b/yanzhu-bigscreen/src/components/module/module-one-3-2.vue
new file mode 100644
index 00000000..1665e511
--- /dev/null
+++ b/yanzhu-bigscreen/src/components/module/module-one-3-2.vue
@@ -0,0 +1,24 @@
+<template>
+    <div class="screen-module">
+        <div class="screen-one-3-2">
+            <div class="module-title">
+                <span>{{label}}</span>
+            </div>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        label: {
+            type: String,
+        },
+    },
+
+    data() {
+        return {}
+    },
+}
+</script>
diff --git a/yanzhu-bigscreen/src/components/module/module-one-3-3.vue b/yanzhu-bigscreen/src/components/module/module-one-3-3.vue
new file mode 100644
index 00000000..3f4fef53
--- /dev/null
+++ b/yanzhu-bigscreen/src/components/module/module-one-3-3.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="screen-module">
+        <div class="screen-one-3-3" :class="notitle?'no-title':''">
+            <div class="module-title">
+                <span>{{label}}</span>
+            </div>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        label: {
+            type: String,
+        },
+        notitle: {
+            type: Boolean,
+        },
+    },
+
+    data() {
+        return {}
+    },
+}
+</script>
diff --git a/yanzhu-bigscreen/src/views/init.js b/yanzhu-bigscreen/src/views/init.js
index ed385199..b3fcd77d 100644
--- a/yanzhu-bigscreen/src/views/init.js
+++ b/yanzhu-bigscreen/src/views/init.js
@@ -13,6 +13,8 @@ import moduleOne21 from "../components/module/module-one-2-1.vue";
 import moduleOne22 from "../components/module/module-one-2-2.vue";
 import moduleOne23 from "../components/module/module-one-2-3.vue";
 import moduleOne31 from "../components/module/module-one-3-1.vue";
+import moduleOne32 from "../components/module/module-one-3-2.vue";
+import moduleOne33 from "../components/module/module-one-3-3.vue";
 import staffSurveyChart from "../components/staffSurveyChart.vue";
 import trendChartLine from "../components/trend-chart-line.vue";
 import trendLineChart from "../components/trend-line-chart.vue";
@@ -36,6 +38,8 @@ Vue.component("module-one-2-1", moduleOne21);
 Vue.component("module-one-2-2", moduleOne22);
 Vue.component("module-one-2-3", moduleOne23);
 Vue.component("module-one-3-1", moduleOne31);
+Vue.component("module-one-3-2", moduleOne32);
+Vue.component("module-one-3-3", moduleOne33);
 Vue.component("people-number", peopleNumber);
 Vue.component("staff-survey-chart", staffSurveyChart);
 Vue.component("trend-chart-line", trendChartLine);
diff --git a/yanzhu-bigscreen/src/views/projectDetail.vue b/yanzhu-bigscreen/src/views/projectDetail.vue
index e7bf5aea..a550feab 100644
--- a/yanzhu-bigscreen/src/views/projectDetail.vue
+++ b/yanzhu-bigscreen/src/views/projectDetail.vue
@@ -1,1701 +1,1618 @@
 <template>
-  <div class="project-detail main-page">
-    <el-col :span="6" class="h100">
-      <module-one-1-1 label="项目概况">
-        <img src="images/icon2001.png" class="img-openwin" @click="showDetailDlg" />
-        <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">暂无数据</div>
-              <div class="dept-info" v-else>
-                <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"
-                    :title="(deptType1.leader || '') + ' ' + (deptType1.phone || '')"
-                  >
-                    <span class="dept-leader">{{ deptType1.leader }}</span>
-                    <span class="dept-phone">{{ deptType1.phone }}</span>
-                  </div>
-                </div>
-              </div>
-            </el-col>
-            <el-col :span="12" class="dept-item">
-              <div class="dept-title">设计单位</div>
-              <div v-if="deptType2 == null" class="dept-nodata">暂无数据</div>
-              <div class="dept-info" v-else>
-                <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"
-                    :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">暂无数据</div>
-              <div class="dept-info" v-else>
-                <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"
-                    :title="(deptType3.leader || '') + ' ' + (deptType3.phone || '')"
-                  >
-                    <span class="dept-leader">{{ deptType3.leader }}</span>
-                    <span class="dept-phone">{{ deptType3.phone }}</span>
-                  </div>
-                </div>
-              </div>
-            </el-col>
-            <el-col :span="12" class="dept-item">
-              <div class="dept-title">监理单位</div>
-              <div v-if="deptType4 == null" class="dept-nodata">暂无数据</div>
-              <div class="dept-info" v-else>
-                <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"
-                    :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">暂无数据</div>
-              <div class="dept-info" v-else>
-                <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"
-                    :title="(deptType5.leader || '') + ' ' + (deptType5.phone || '')"
-                  >
-                    <span class="dept-leader">{{ deptType5.leader }}</span>
-                    <span class="dept-phone">{{ deptType5.phone }}</span>
-                  </div>
-                </div>
-              </div>
-            </el-col>
+    <div class="project-detail main-page">
+        <el-col :span="6" class="h100">
+            <module-one-1-1 label="项目概况">
+                <img src="images/icon2001.png" class="img-openwin" @click="showDetailDlg" />
+                <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">暂无数据</div>
+                            <div class="dept-info" v-else>
+                                <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" :title="(deptType1.leader || '') + ' ' + (deptType1.phone || '')">
+                                        <span class="dept-leader">{{ deptType1.leader }}</span>
+                                        <span class="dept-phone">{{ deptType1.phone }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </el-col>
+                        <el-col :span="12" class="dept-item">
+                            <div class="dept-title">设计单位</div>
+                            <div v-if="deptType2 == null" class="dept-nodata">暂无数据</div>
+                            <div class="dept-info" v-else>
+                                <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" :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">暂无数据</div>
+                            <div class="dept-info" v-else>
+                                <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" :title="(deptType3.leader || '') + ' ' + (deptType3.phone || '')">
+                                        <span class="dept-leader">{{ deptType3.leader }}</span>
+                                        <span class="dept-phone">{{ deptType3.phone }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </el-col>
+                        <el-col :span="12" class="dept-item">
+                            <div class="dept-title">监理单位</div>
+                            <div v-if="deptType4 == null" class="dept-nodata">暂无数据</div>
+                            <div class="dept-info" v-else>
+                                <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" :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">暂无数据</div>
+                            <div class="dept-info" v-else>
+                                <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" :title="(deptType5.leader || '') + ' ' + (deptType5.phone || '')">
+                                        <span class="dept-leader">{{ deptType5.leader }}</span>
+                                        <span class="dept-phone">{{ deptType5.phone }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </el-col>
 
-            <el-col :span="12" class="dept-item">
-              <div class="dept-title">勘察单位</div>
-              <div v-if="deptType6 == null" class="dept-nodata">暂无数据</div>
-              <div class="dept-info" v-else>
-                <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"
-                    :title="(deptType6.leader || '') + ' ' + (deptType6.phone || '')"
-                  >
-                    <span class="dept-leader">{{ deptType6.leader }}</span>
-                    <span class="dept-phone">{{ deptType6.phone }}</span>
-                  </div>
+                        <el-col :span="12" class="dept-item">
+                            <div class="dept-title">勘察单位</div>
+                            <div v-if="deptType6 == null" class="dept-nodata">暂无数据</div>
+                            <div class="dept-info" v-else>
+                                <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" :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>
-              </div>
-            </el-col>
-          </el-row>
-        </div>
-      </module-one-1-1>
-      <module-one-1-1 label="劳务人员概况">
-        <img
-          src="images/icon2001.png"
-          class="img-openwin"
-          v-if="attendanceTotal > 0"
-          @click="doShowAttendanceDetail"
-        />
-        <div class="attendance-info warning-info">
-          <div class="attendance-info-title warning-info-title">
-            <div
-              :class="attendanceNav == 0 ? 'active' : ''"
-              @click="doAttendanceNav(0, '在岗人员')"
-            >
-              在岗人员
-            </div>
-            <div
-              :class="attendanceNav == 1 ? 'active' : ''"
-              @click="doAttendanceNav(1, '今日出勤')"
-            >
-              今日出勤
-            </div>
-          </div>
-          <el-row>
-            <el-col :span="8" class="attendance-tag">
-              <div class="survey_content">
-                <div class="survey_content_img">
-                  <img
-                    :src="
+            </module-one-1-1>
+            <module-one-1-1 label="劳务人员概况">
+                <img src="images/icon2001.png" class="img-openwin" v-if="attendanceTotal > 0" @click="doShowAttendanceDetail" />
+                <div class="attendance-info warning-info">
+                    <div class="attendance-info-title warning-info-title">
+                        <div :class="attendanceNav == 0 ? 'active' : ''" @click="doAttendanceNav(0, '在岗人员')">在岗人员</div>
+                        <div :class="attendanceNav == 1 ? 'active' : ''" @click="doAttendanceNav(1, '今日出勤')">今日出勤</div>
+                    </div>
+                    <el-row>
+                        <el-col :span="8" class="attendance-tag">
+                            <div class="survey_content">
+                                <div class="survey_content_img">
+                                    <img
+                                        :src="
                       attendanceNav == 0
                         ? 'images/survey_icon_4.png'
                         : 'images/survey_icon_5.png'
                     "
-                  />
+                                    />
+                                </div>
+                            </div>
+                            <div class="survey_content_number labour-survey_content_number">
+                                <div class="survey_content_value">
+                                    <span>{{ attendanceTotal }}</span> 人
+                                </div>
+                                <p>{{ attendanceNav == 0 ? "在岗人员" : "今日出勤" }}</p>
+                            </div>
+                        </el-col>
+                        <el-col :span="16">
+                            <staffSurveyChart :key="chartKey" :height="$dpi() == '1K' ? '220px' : $dpi() == '2K' ? '330px' : '550px'" :data="attendanceData" :width="140"></staffSurveyChart>
+                        </el-col>
+                    </el-row>
                 </div>
-              </div>
-              <div class="survey_content_number labour-survey_content_number">
-                <div class="survey_content_value">
-                  <span>{{ attendanceTotal }}</span> 人
-                </div>
-                <p>{{ attendanceNav == 0 ? "在岗人员" : "今日出勤" }}</p>
-              </div>
-            </el-col>
-            <el-col :span="16">
-              <staffSurveyChart
-                :key="chartKey"
-                :height="$dpi() == '1K' ? '220px' : $dpi() == '2K' ? '330px' : '550px'"
-                :data="attendanceData"
-                :width="140"
-              ></staffSurveyChart>
-            </el-col>
-          </el-row>
-        </div>
-      </module-one-1-1>
-      <module-one-1-1 label="项目全景">
-        <div class="photography-list">
-          <template v-if="photographyList && photographyList.length > 0">
-            <el-carousel height="100%" :autoplay="false">
-              <el-carousel-item v-for="(item, idx) in photographyList" :key="idx">
-                <video controls class="photography-video">
-                  <source :src="item.videoUrl" type="video/mp4" :key="item.videoUrl" />
-                  您的浏览器不支持Video标签。
-                </video>
-                <div class="photography-list-title">
-                  {{ item.videoDate }}
-                </div>
-              </el-carousel-item>
-            </el-carousel>
-          </template>
-          <template v-else>
-            <div class="photography-list-nodata">
-              <div>
-                <i class="video-play">
-                  <svg
-                    class="icon"
-                    style="
+            </module-one-1-1>
+            <module-one-1-1 label="项目全景">
+                <div class="photography-list">
+                    <template v-if="photographyList && photographyList.length > 0">
+                        <el-carousel height="100%" :autoplay="false">
+                            <el-carousel-item v-for="(item, idx) in photographyList" :key="idx">
+                                <video controls="controls" class="photography-video" autoplay="autoplay" loop="loop">
+                                    <source :src="item.videoUrl" type="video/mp4" :key="item.videoUrl" />您的浏览器不支持Video标签。
+                                </video>
+                                <div class="photography-list-title">{{ item.videoDate }}</div>
+                            </el-carousel-item>
+                        </el-carousel>
+                    </template>
+                    <template v-else>
+                        <div class="photography-list-nodata">
+                            <div>
+                                <i class="video-play">
+                                    <svg
+                                        class="icon"
+                                        style="
                       width: 30px;
                       height: 30px;
                       vertical-align: middle;
                       fill: currentColor;
                       overflow: hidden;
                     "
-                    viewBox="0 0 1024 1024"
-                    version="1.1"
-                    xmlns="http://www.w3.org/2000/svg"
-                    p-id="4551"
-                  >
-                    <path
-                      d="M128 138.666667c0-47.232 33.322667-66.666667 74.176-43.562667l663.146667 374.954667c40.96 23.168 40.853333 60.8 0 83.882666L202.176 928.896C161.216 952.064 128 932.565333 128 885.333333v-746.666666z"
-                      fill="#3D3D3D"
-                      p-id="4552"
-                    ></path>
-                  </svg>
-                </i>
-              </div>
-              <div class="photography-list-no-title">暂无数据</div>
-            </div>
-          </template>
-        </div>
-      </module-one-1-1>
-    </el-col>
-    <el-col :span="12" class="h100">
-      <module-one-2-2 label="" class="no-title no-border">
-        <div></div>
-        <div
-          class="modify-project-amount"
-          @mouseout="costMouseout"
-          @mouseover="costMouseover"
-        >
-          <div class="modify-btn">
-            <img src="images/foot_left.png" @click="modifyLeftBtn" />
-          </div>
-          <div class="modify-content" id="modifyContent" v-if="selProject">
-            <div class="modify-content-overflow">
-              <div class="project-amount">
-                <div class="project-amount-bgd">
-                  <div class="project-amount-con">
-                    <p>
-                      <svg-icon icon-class="money"></svg-icon>
-                      总投资
-                    </p>
-                    <div>
-                      <span class="led-number">{{ costOutData.totalInv || 0 }}</span> 万元
-                    </div>
-                  </div>
+                                        viewBox="0 0 1024 1024"
+                                        version="1.1"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        p-id="4551"
+                                    >
+                                        <path
+                                            d="M128 138.666667c0-47.232 33.322667-66.666667 74.176-43.562667l663.146667 374.954667c40.96 23.168 40.853333 60.8 0 83.882666L202.176 928.896C161.216 952.064 128 932.565333 128 885.333333v-746.666666z"
+                                            fill="#3D3D3D"
+                                            p-id="4552"
+                                        />
+                                    </svg>
+                                </i>
+                            </div>
+                            <div class="photography-list-no-title">暂无数据</div>
+                        </div>
+                    </template>
                 </div>
-              </div>
-              <div class="project-amount">
-                <div class="project-amount-bgd">
-                  <div class="project-amount-con">
-                    <p>
-                      <svg-icon icon-class="money"></svg-icon>
-                      本月完成
-                    </p>
-                    <div>
-                      <span class="led-number">{{ costOutData.curMonth || 0 }}</span> 万元
+            </module-one-1-1>
+        </el-col>
+        <el-col :span="12" class="h100">
+            <module-one-2-2 label class="no-title no-border">
+                <div></div>
+                <div class="modify-project-amount" @mouseout="costMouseout" @mouseover="costMouseover">
+                    <div class="modify-btn">
+                        <img src="images/foot_left.png" @click="modifyLeftBtn" />
                     </div>
-                  </div>
-                </div>
-              </div>
+                    <div class="modify-content" id="modifyContent" v-if="selProject">
+                        <div class="modify-content-overflow">
+                            <div class="project-amount">
+                                <div class="project-amount-bgd">
+                                    <div class="project-amount-con">
+                                        <p>
+                                            <svg-icon icon-class="money"></svg-icon>总投资
+                                        </p>
+                                        <div>
+                                            <span class="led-number">{{ costOutData.totalInv || 0 }}</span> 万元
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="project-amount">
+                                <div class="project-amount-bgd">
+                                    <div class="project-amount-con">
+                                        <p>
+                                            <svg-icon icon-class="money"></svg-icon>本月完成
+                                        </p>
+                                        <div>
+                                            <span class="led-number">{{ costOutData.curMonth || 0 }}</span> 万元
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
 
-              <div class="project-amount">
-                <div class="project-amount-bgd">
-                  <div class="project-amount-con">
-                    <p>
-                      <svg-icon icon-class="money"></svg-icon>
-                      本年完成
-                    </p>
-                    <div>
-                      <span class="led-number">{{ costOutData.totalYear || 0 }}</span>
-                      万元
-                    </div>
-                  </div>
-                </div>
-              </div>
+                            <div class="project-amount">
+                                <div class="project-amount-bgd">
+                                    <div class="project-amount-con">
+                                        <p>
+                                            <svg-icon icon-class="money"></svg-icon>本年完成
+                                        </p>
+                                        <div>
+                                            <span class="led-number">{{ costOutData.totalYear || 0 }}</span>
+                                            万元
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
 
-              <div class="project-amount">
-                <div class="project-amount-bgd">
-                  <div class="project-amount-con">
-                    <p>
-                      <svg-icon icon-class="money"></svg-icon>
-                      开累完成
-                    </p>
-                    <div>
-                      <span class="led-number">{{ costOutData.totalMonth || 0 }}</span>
-                      万元
-                    </div>
-                  </div>
-                </div>
-              </div>
+                            <div class="project-amount">
+                                <div class="project-amount-bgd">
+                                    <div class="project-amount-con">
+                                        <p>
+                                            <svg-icon icon-class="money"></svg-icon>开累完成
+                                        </p>
+                                        <div>
+                                            <span class="led-number">{{ costOutData.totalMonth || 0 }}</span>
+                                            万元
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
 
-              <div class="project-amount">
-                <div class="project-amount-bgd">
-                  <div class="project-amount-con">
-                    <p>
-                      <svg-icon icon-class="date"></svg-icon>
-                      计划开工日期
-                    </p>
-                    <div>
-                      <span class="led-number">{{
-                        selProject.scheduledStartTime | toDate
-                      }}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+                            <div class="project-amount">
+                                <div class="project-amount-bgd">
+                                    <div class="project-amount-con">
+                                        <p>
+                                            <svg-icon icon-class="date"></svg-icon>计划开工日期
+                                        </p>
+                                        <div>
+                                            <span class="led-number">
+                                                {{
+                                                selProject.scheduledStartTime | toDate
+                                                }}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
 
-              <div class="project-amount">
-                <div class="project-amount-bgd">
-                  <div class="project-amount-con">
-                    <p>
-                      <svg-icon icon-class="date"></svg-icon>
-                      计划竣工日期
-                    </p>
-                    <div>
-                      <span class="led-number">{{
-                        selProject.plannedCompletionTime | toDate
-                      }}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+                            <div class="project-amount">
+                                <div class="project-amount-bgd">
+                                    <div class="project-amount-con">
+                                        <p>
+                                            <svg-icon icon-class="date"></svg-icon>计划竣工日期
+                                        </p>
+                                        <div>
+                                            <span class="led-number">
+                                                {{
+                                                selProject.plannedCompletionTime | toDate
+                                                }}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
 
-              <div class="project-amount">
-                <div class="project-amount-bgd">
-                  <div class="project-amount-con">
-                    <p>
-                      <svg-icon icon-class="date"></svg-icon>
-                      实际开工日期
-                    </p>
-                    <div>
-                      <span class="led-number">{{
-                        selProject.actualOperatingTime | toDate
-                      }}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+                            <div class="project-amount">
+                                <div class="project-amount-bgd">
+                                    <div class="project-amount-con">
+                                        <p>
+                                            <svg-icon icon-class="date"></svg-icon>实际开工日期
+                                        </p>
+                                        <div>
+                                            <span class="led-number">
+                                                {{
+                                                selProject.actualOperatingTime | toDate
+                                                }}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
 
-              <div class="project-amount">
-                <div class="project-amount-bgd">
-                  <div class="project-amount-con">
-                    <p>
-                      <svg-icon icon-class="date"></svg-icon>
-                      合同工期
-                    </p>
-                    <div>
-                      <span class="led-number">{{
-                        selProject.projectTimeLimit || ""
-                      }}</span>
-                      天
-                    </div>
-                  </div>
-                </div>
-              </div>
+                            <div class="project-amount">
+                                <div class="project-amount-bgd">
+                                    <div class="project-amount-con">
+                                        <p>
+                                            <svg-icon icon-class="date"></svg-icon>合同工期
+                                        </p>
+                                        <div>
+                                            <span class="led-number">
+                                                {{
+                                                selProject.projectTimeLimit || ""
+                                                }}
+                                            </span>
+                                            天
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
 
-              <div class="project-amount">
-                <div class="project-amount-bgd">
-                  <div class="project-amount-con">
-                    <p>
-                      <svg-icon icon-class="area"></svg-icon>
-                      建筑面积
-                    </p>
-                    <div>
-                      <span class="led-number">{{ selProject.floorArea || "" }}</span>
-                      平方米
+                            <div class="project-amount">
+                                <div class="project-amount-bgd">
+                                    <div class="project-amount-con">
+                                        <p>
+                                            <svg-icon icon-class="area"></svg-icon>建筑面积
+                                        </p>
+                                        <div>
+                                            <span class="led-number">{{ selProject.floorArea || "" }}</span>
+                                            平方米
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modify-btn">
+                        <img src="images/foot_right.png" @click="modifyRightBtn" />
                     </div>
-                  </div>
                 </div>
-              </div>
-            </div>
-          </div>
-          <div class="modify-btn">
-            <img src="images/foot_right.png" @click="modifyRightBtn" />
-          </div>
-        </div>
-        <div class="prj-img-list">
-          <span class="prj-img-nav" v-if="showImgVideo">
-            <span
-              class="prj-img-nav-item"
-              :class="imgVideoSel == 1 ? 'is-active' : ''"
-              @click="imgVideoSel = 1"
-              >效果图</span
-            >
-            <span
-              class="prj-img-nav-item"
-              :class="imgVideoSel == 2 ? 'is-active' : ''"
-              @click="imgVideoSel = 2"
-              >视频</span
-            >
-          </span>
-          <el-carousel height="100%" :autoplay="false" v-if="imgVideoSel == 1">
-            <el-carousel-item v-for="(it, idx) in prjImgs" :key="idx">
-              <el-image style="width: 100%; height: 100%" :src="it" fit="contain" />
-            </el-carousel-item>
-          </el-carousel>
-          <div class="prj-video-layout" v-if="imgVideoSel == 2">
-            <video class="prj-video">
-              <source :src="prjVideo" type="video/mp4" />
-              您的浏览器不支持Video标签。
-            </video>
-          </div>
-        </div>
-      </module-one-2-2>
-      <module-one-1-2 label="项目节点计划预警" class="prj-plan">
-        <div class="dangerous-max" :key="chartKey">
-          <div class="dangerous-timeline-max w-scroll">
-            <div class="dangerous-timeline-min" :style="{ width: maxWidth + 'px' }">
-              <template v-if="projectBuildNode && projectBuildNode.length > 0">
-                <div
-                  class="dangerous-timeline-con"
-                  v-for="(item, idx) in projectBuildNode"
-                  :key="idx"
-                >
-                  <div class="dangerous-text" v-html="item.nodeText"></div>
-                  <div class="dangerous-dot">
-                    <div class="dangerous-dot-item"></div>
-                  </div>
-                  <div class="dangerous-time-max">
-                    <div class="dangerous-time-min">
-                      计划：{{ item.planEndDate || "---" }}
+                <div class="prj-img-list">
+                    <span class="prj-img-nav" v-if="showImgVideo">
+                        <span class="prj-img-nav-item" :class="imgVideoSel == 1 ? 'is-active' : ''" @click="imgVideoSel = 1">效果图</span>
+                        <span class="prj-img-nav-item" :class="imgVideoSel == 2 ? 'is-active' : ''" @click="imgVideoSel = 2">视频</span>
+                    </span>
+                    <el-carousel height="100%" :autoplay="false" v-if="imgVideoSel == 1">
+                        <el-carousel-item v-for="(it, idx) in prjImgs" :key="idx">
+                            <el-image style="width: 100%; height: 100%" :src="it" fit="contain" />
+                        </el-carousel-item>
+                    </el-carousel>
+                    <div class="prj-video-layout" v-if="imgVideoSel == 2">
+                        <video class="prj-video" controls="controls" autoplay="autoplay" loop="loop">
+                            <source :src="prjVideo" controls="controls" type="video/mp4" />您的浏览器不支持Video标签。
+                        </video>
                     </div>
-                    <div class="dangerous-time-min">实际：{{ item.endDate || "--" }}</div>
-                    <div
-                      v-if="item.finishState > 0"
-                      class="project-expect-state dangerous-time-nav"
-                      :class="
+                </div>
+            </module-one-2-2>
+            <module-one-1-2 label="项目节点计划预警" class="prj-plan">
+                <div class="dangerous-max" :key="chartKey">
+                    <div class="dangerous-timeline-max w-scroll">
+                        <div class="dangerous-timeline-min" :style="{ width: maxWidth + 'px' }">
+                            <template v-if="projectBuildNode && projectBuildNode.length > 0">
+                                <div class="dangerous-timeline-con" v-for="(item, idx) in projectBuildNode" :key="idx">
+                                    <div class="dangerous-text" v-html="item.nodeText"></div>
+                                    <div class="dangerous-dot">
+                                        <div class="dangerous-dot-item"></div>
+                                    </div>
+                                    <div class="dangerous-time-max">
+                                        <div class="dangerous-time-min">计划：{{ item.planEndDate || "---" }}</div>
+                                        <div class="dangerous-time-min">实际：{{ item.endDate || "--" }}</div>
+                                        <div
+                                            v-if="item.finishState > 0"
+                                            class="project-expect-state dangerous-time-nav"
+                                            :class="
                         (item.finishState == 1 ? 'active' : '') +
                         ' state-' +
                         item.finishState
                       "
-                    >
-                      {{ item.finish }}
+                                        >{{ item.finish }}</div>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                        <div class="strip-max" :style="{ width: maxWidth + 'px' }">
+                            <div class="strip-min" :style="{ width: minWidth + 'px' }"></div>
+                        </div>
+                    </div>
+                </div>
+            </module-one-1-2>
+        </el-col>
+        <el-col :span="6" class="h100">
+            <module-one-2-1 label class="no-title no-border work-info">
+                <div class="analyse-map">
+                    <div class="analyse-title analyse_title_blue">
+                        <div class="analyse-text">安全生产</div>
+                    </div>
+                </div>
+                <div class="work-days" style="display: flex; align-items: center; justify-content: center">
+                    <div style="margin-right: 10px">第</div>
+                    <people-number :number="startDays" unit></people-number>
+                    <div style="margin-left: 10px">天</div>
+                </div>
+                <div class="analyse-map">
+                    <div class="analyse-title analyse_title_blue">
+                        <div class="analyse-text">环境监测</div>
                     </div>
-                  </div>
                 </div>
-              </template>
-            </div>
-            <div class="strip-max" :style="{ width: maxWidth + 'px' }">
-              <div class="strip-min" :style="{ width: minWidth + 'px' }"></div>
-            </div>
-          </div>
-        </div>
-      </module-one-1-2>
-    </el-col>
-    <el-col :span="6" class="h100">
-      <module-one-2-1 label="" class="no-title no-border work-info">
-        <div class="analyse-map">
-          <div class="analyse-title analyse_title_blue">
-            <div class="analyse-text">安全生产</div>
-          </div>
-        </div>
-        <div
-          class="work-days"
-          style="display: flex; align-items: center; justify-content: center"
-        >
-          <div style="margin-right: 10px">第</div>
-          <people-number :number="startDays" unit=""></people-number>
-          <div style="margin-left: 10px">天</div>
-        </div>
-        <div class="analyse-map">
-          <div class="analyse-title analyse_title_blue">
-            <div class="analyse-text">环境监测</div>
-          </div>
-        </div>
 
-        <div v-if="weathers" class="weather-list">
-          <div v-if="weathers.length > 0" class="weather-item">
-            <span class="weather-day">今天</span>
-            <span class="weather-info">{{ weathers[0].weather }}</span>
-            <img class="weather-img" :src="weathers[0].img" />
-            <span class="weather-temp"
-              >{{ weathers[0].highTemp }} ～ {{ weathers[0].lowTemp }}</span
-            >
-          </div>
-          <div v-if="weathers.length > 1" class="weather-item">
-            <span class="weather-day">明天</span>
-            <span class="weather-info">{{ weathers[1].weather }}</span>
-            <img class="weather-img" :src="weathers[1].img" />
-            <span class="weather-temp"
-              >{{ weathers[1].highTemp }} ～ {{ weathers[1].lowTemp }}</span
-            >
-          </div>
-          <div v-if="weathers.length > 2" class="weather-item">
-            <span class="weather-day">后天</span>
-            <span class="weather-info">{{ weathers[2].weather }}</span>
-            <img class="weather-img" :src="weathers[2].img" />
-            <span class="weather-temp"
-              >{{ weathers[2].highTemp }} ～ {{ weathers[2].lowTemp }}</span
-            >
-          </div>
-        </div>
-        <div class="weather-info">
-          <el-row>
-            <el-col :span="12" class="weather-info-item">
-              <div class="current-value-img">
-                <svg-icon icon-class="pressure"></svg-icon>
-              </div>
-              <div class="wi-data">
-                <div class="wi-label">当前气压</div>
-                <div class="wi-data-unit">
-                  <span class="wi-txt">{{ weatherInfo.pressure }}</span>
-                  <span class="wi-unit">hPa</span>
+                <div v-if="weathers" class="weather-list">
+                    <div v-if="weathers.length > 0" class="weather-item">
+                        <span class="weather-day">今天</span>
+                        <span class="weather-info">{{ weathers[0].weather }}</span>
+                        <img class="weather-img" :src="weathers[0].img" />
+                        <span class="weather-temp">{{ weathers[0].highTemp }} ～ {{ weathers[0].lowTemp }}</span>
+                    </div>
+                    <div v-if="weathers.length > 1" class="weather-item">
+                        <span class="weather-day">明天</span>
+                        <span class="weather-info">{{ weathers[1].weather }}</span>
+                        <img class="weather-img" :src="weathers[1].img" />
+                        <span class="weather-temp">{{ weathers[1].highTemp }} ～ {{ weathers[1].lowTemp }}</span>
+                    </div>
+                    <div v-if="weathers.length > 2" class="weather-item">
+                        <span class="weather-day">后天</span>
+                        <span class="weather-info">{{ weathers[2].weather }}</span>
+                        <img class="weather-img" :src="weathers[2].img" />
+                        <span class="weather-temp">{{ weathers[2].highTemp }} ～ {{ weathers[2].lowTemp }}</span>
+                    </div>
                 </div>
-              </div>
-            </el-col>
-            <el-col :span="12" class="weather-info-item">
-              <div class="current-value-img">
-                <svg-icon icon-class="humidity"></svg-icon>
-              </div>
-              <div class="wi-data">
-                <div class="wi-label">当前湿度</div>
-                <div class="wi-data-unit">
-                  <span class="wi-txt">{{ weatherInfo.humidity }}</span>
-                  <span class="wi-unit">%</span>
-                </div>
-              </div>
-            </el-col>
-          </el-row>
+                <div class="weather-info">
+                    <el-row>
+                        <el-col :span="12" class="weather-info-item">
+                            <div class="current-value-img">
+                                <svg-icon icon-class="pressure"></svg-icon>
+                            </div>
+                            <div class="wi-data">
+                                <div class="wi-label">当前气压</div>
+                                <div class="wi-data-unit">
+                                    <span class="wi-txt">{{ weatherInfo.pressure }}</span>
+                                    <span class="wi-unit">hPa</span>
+                                </div>
+                            </div>
+                        </el-col>
+                        <el-col :span="12" class="weather-info-item">
+                            <div class="current-value-img">
+                                <svg-icon icon-class="humidity"></svg-icon>
+                            </div>
+                            <div class="wi-data">
+                                <div class="wi-label">当前湿度</div>
+                                <div class="wi-data-unit">
+                                    <span class="wi-txt">{{ weatherInfo.humidity }}</span>
+                                    <span class="wi-unit">%</span>
+                                </div>
+                            </div>
+                        </el-col>
+                    </el-row>
 
-          <el-row>
-            <el-col :span="12" class="weather-info-item">
-              <div class="current-value-img">
-                <svg-icon icon-class="precipitation"></svg-icon>
-              </div>
-              <div class="wi-data">
-                <div class="wi-label">当前降雨量</div>
-                <div class="wi-data-unit">
-                  <span class="wi-txt">{{ weatherInfo.precipitation }}</span>
-                  <span class="wi-unit">mm</span>
+                    <el-row>
+                        <el-col :span="12" class="weather-info-item">
+                            <div class="current-value-img">
+                                <svg-icon icon-class="precipitation"></svg-icon>
+                            </div>
+                            <div class="wi-data">
+                                <div class="wi-label">当前降雨量</div>
+                                <div class="wi-data-unit">
+                                    <span class="wi-txt">{{ weatherInfo.precipitation }}</span>
+                                    <span class="wi-unit">mm</span>
+                                </div>
+                            </div>
+                        </el-col>
+                        <el-col :span="12" class="weather-info-item">
+                            <div class="current-value-img">
+                                <svg-icon icon-class="wind"></svg-icon>
+                            </div>
+                            <div class="wi-data">
+                                <div class="wi-label">当前风向</div>
+                                <div class="wi-data-unit">
+                                    <span class="wi-txt">{{ weatherInfo.windDirection }}{{ weatherInfo.windScale }}</span>
+                                </div>
+                            </div>
+                        </el-col>
+                    </el-row>
                 </div>
-              </div>
-            </el-col>
-            <el-col :span="12" class="weather-info-item">
-              <div class="current-value-img">
-                <svg-icon icon-class="wind"></svg-icon>
-              </div>
-              <div class="wi-data">
-                <div class="wi-label">当前风向</div>
-                <div class="wi-data-unit">
-                  <span class="wi-txt"
-                    >{{ weatherInfo.windDirection }}{{ weatherInfo.windScale }}</span
-                  >
-                </div>
-              </div>
-            </el-col>
-          </el-row>
-        </div>
-      </module-one-2-1>
-      <module-one-1-1 label="项目监测预警">
-        <MonitAndWarning type="detail"></MonitAndWarning>
-      </module-one-1-1>
-    </el-col>
-    <project-info-dialog ref="infoDlg"></project-info-dialog>
-    <attendanceInfoDlg ref="attDlg"></attendanceInfoDlg>
-  </div>
+            </module-one-2-1>
+            <module-one-1-1 label="项目监测预警">
+                <MonitAndWarning type="detail"></MonitAndWarning>
+            </module-one-1-1>
+        </el-col>
+        <project-info-dialog ref="infoDlg"></project-info-dialog>
+        <attendanceInfoDlg ref="attDlg"></attendanceInfoDlg>
+    </div>
 </template>
 
 <script>
-import projectInfoDialog from "./detail/projectInfoDialog.vue";
-import staffSurveyChart from "@/components/staffSurveyChart.vue";
-import MonitAndWarning from "./components/MonitAndWarning.vue";
-import attendanceInfoDlg from "./detail/attendanceInfoDlg.vue";
-import debounce from "lodash.debounce";
+import projectInfoDialog from './detail/projectInfoDialog.vue'
+import staffSurveyChart from '@/components/staffSurveyChart.vue'
+import MonitAndWarning from './components/MonitAndWarning.vue'
+import attendanceInfoDlg from './detail/attendanceInfoDlg.vue'
+import debounce from 'lodash.debounce'
 export default {
-  components: {
-    projectInfoDialog,
-    staffSurveyChart,
-    MonitAndWarning,
-    attendanceInfoDlg,
-  },
-  data() {
-    return {
-      chartKey: 0,
-      dpi: "",
-      selProject: null,
-      prjInfo: {},
-      deptType1: [], //建设单位
-      deptType2: [], //设计单位
-      deptType3: [], //总包单位
-      deptType4: [], //监理单位
-      deptType5: [], //检测单位
-      deptType6: [], //勘察单位
-      prjImgs: [],
-      prjVideo: null,
-      showImgVideo: false,
-      imgVideoSel: 1,
-      attendanceNav: 0,
-      attendanceTotal: 0,
-      attendanceData: [
-        { text: "普通工种", value: 0, id: 0 },
-        { text: "特殊工种", value: 0, id: 0 },
-        { text: "管理人员", value: 0, id: 0 },
-      ],
-      deviceNav: 0,
-      deviceData: [
-        { text: "自有", value: 45 },
-        { text: "租赁", value: 55 },
-        { text: "分包", value: 65 },
-      ],
-      costIndex: 0,
-      direction: "right",
-      costInterval: undefined,
-      cityInfo: [],
-      cityId: "",
-      startDays: 0,
-      weathers: [],
-      weatherInfo: {},
-      projectBuildNode: [],
-      maxWidth: 0,
-      minWidth: 100,
-      costOutData: {},
-      photographyList:[],
-    };
-  },
-  mounted() {
-    window.detailApp = this;
-    this.$store.dispatch("ChangeNav", 2);
-    this.$bus.$on(
-      "projectChange",
-      debounce((prj) => {
-        this.selProject = prj;
-        this.init();
-      })
-    );
-    this.selProject = this.$store.getters.selProject;
-    this.init();
-    this.dpi = this.$dpi();
-    window.addEventListener("resize", () => {
-      if (this.dpi != this.$dpi()) {
-        this.dpi = this.$dpi();
-        this.chartKey++;
-      }
-    });
-    this.costInterval = setInterval(this.manufacturingCostRoll, 5000);
-    this.$api.weather.getCityInfo().then((d) => {
-      this.cityInfo = d.data?.city || [];
-    });
-  },
-  methods: {
-    showDetailDlg() {
-      this.$refs.infoDlg.showDialog({
-        prjInfo: this.prjInfo,
-        selProject: this.selProject,
-      });
+    components: {
+        projectInfoDialog,
+        staffSurveyChart,
+        MonitAndWarning,
+        attendanceInfoDlg,
     },
-    init() {
-      if (!this.selProject) {
-        return;
-      }
-      this.$api.project.getProjectInfo(this.selProject.id).then((d) => {
-        this.prjInfo = d.data || {};
-        let tmps = this.prjInfo.projectDeptsList || [];
-        const func = (t) => {
-          let objs = tmps.filter((it) => it.deptType == t);
-          return objs.length > 0 ? objs[0] : null;
-        };
-        this.prjImgs = (this.prjInfo?.setting?.orgImage || "")
-          .split(",")
-          .filter((d) => d);
-        this.prjVideo = this.prjInfo?.setting?.orgVideo || "";
-        this.showImgVideo = this.prjImgs.length > 0 && this.prjVideo;
-        this.imgVideoSel = 1;
-        this.deptType1 = func("建设单位");
-        this.deptType2 = func("设计单位");
-        this.deptType3 = {
-          deptName: this.prjInfo.disDeptName,
-          leader: this.prjInfo.projectPerson,
-          phone: this.prjInfo.projectPersonPhone,
-        };
-        this.deptType4 = func("监理单位");
-        this.deptType5 = func("检测单位");
-        this.deptType6 = func("勘察单位");
-        let tmp = this.cityInfo.map((d) => {
-          d[18] =
-            Math.abs(d[4] - this.prjInfo.latitude) +
-            Math.abs(d[5] - this.prjInfo.longitude);
-          return d;
-        });
-        tmp = tmp.sort((a, b) => a[18] - b[18]);
-        this.cityId = tmp.length > 0 && tmp[0].length > 0 ? tmp[0][0] : "";
-        if (this.prjInfo.actualOperatingTime) {
-          this.startDays =
-            this.$dt(this.prjInfo.actualOperatingTime).diff(new Date(), "day") * -1;
-        } else {
-          this.startDays = 0;
+    data() {
+        return {
+            chartKey: 0,
+            dpi: '',
+            selProject: null,
+            prjInfo: {},
+            deptType1: [], //建设单位
+            deptType2: [], //设计单位
+            deptType3: [], //总包单位
+            deptType4: [], //监理单位
+            deptType5: [], //检测单位
+            deptType6: [], //勘察单位
+            prjImgs: [],
+            prjVideo: null,
+            showImgVideo: false,
+            imgVideoSel: 1,
+            attendanceNav: 0,
+            attendanceTotal: 0,
+            attendanceData: [
+                { text: '普通工种', value: 0, id: 0 },
+                { text: '特殊工种', value: 0, id: 0 },
+                { text: '管理人员', value: 0, id: 0 },
+            ],
+            deviceNav: 0,
+            deviceData: [
+                { text: '自有', value: 45 },
+                { text: '租赁', value: 55 },
+                { text: '分包', value: 65 },
+            ],
+            costIndex: 0,
+            direction: 'right',
+            costInterval: undefined,
+            cityInfo: [],
+            cityId: '',
+            startDays: 0,
+            weathers: [],
+            weatherInfo: {},
+            projectBuildNode: [],
+            maxWidth: 0,
+            minWidth: 100,
+            costOutData: {},
+            photographyList: [],
         }
-        if (this.cityId) {
-          this.$api.weather.getByCity(this.cityId).then((w) => {
-            this.weathers = w.data || [];
-          });
-          this.getWeatherNowInfo();
-        }
-      });
-      this.loadAttendanceData();
-      this.loadMilestoneData();
-      this.loadCostOutput();
-      this.initPhotographyList();
     },
-    initPhotographyList(){
-        this.$api.detail
-        .photographyList(this.selProject.id)
-        .then((d) => {
-          this.photographyList = d.data;
-        });
-    },
-    loadCostOutput() {
-      let dt = this.$dt(new Date());
-      this.$api.detail
-        .costOutputSelectYearAndMonth({
-          comId: this.selProject.comId,
-          projectId: this.selProject.id,
-          year: dt.$y,
-          month: dt.$M + 1,
-        })
-        .then((d) => {
-          this.costOutData = d;
-        });
-    },
-    loadMilestoneData() {
-      this.$api.detail
-        .milestoneList({
-          pageNum: 1,
-          pageSize: 100,
-          comId: this.selProject.comId,
-          projectId: this.selProject.id,
-        })
-        .then((d) => {
-          this.projectBuildNode = d;
-          let itemWidth = this.$dpi() == "1K" ? 200 : this.$dpi() == "2K" ? 300 : 500;
-          this.maxWidth = itemWidth * this.projectBuildNode.length;
-          let n = 0;
-          for (let i = 0; i < this.projectBuildNode.length; i++) {
-            if (this.projectBuildNode[i].finish == "进行中") {
-              n = i;
+    mounted() {
+        window.detailApp = this
+        this.$store.dispatch('ChangeNav', 2)
+        this.$bus.$on(
+            'projectChange',
+            debounce((prj) => {
+                this.selProject = prj
+                this.init()
+            })
+        )
+        this.selProject = this.$store.getters.selProject
+        this.init()
+        this.dpi = this.$dpi()
+        window.addEventListener('resize', () => {
+            if (this.dpi != this.$dpi()) {
+                this.dpi = this.$dpi()
+                this.chartKey++
             }
-          }
-          this.minWidth = n * itemWidth + 100;
-        });
+        })
+        this.costInterval = setInterval(this.manufacturingCostRoll, 5000)
+        this.$api.weather.getCityInfo().then((d) => {
+            this.cityInfo = d.data?.city || []
+        })
     },
-    loadAttendanceData() {
-      let ajax = this.$api.detail.groupByCraftType;
-      let posData = {
-        comId: this.selProject.comId,
-        projectId: this.selProject.id,
-      };
-      if (this.attendanceNav == 1) {
-        ajax = this.$api.detail.groupByCraftTypeByAttendance;
-        //posData.createTime = this.$dt(new Date()).format("YYYY-MM-DD");
-        posData.createTime = "2024-10-13";
-      }
-      ajax(posData).then((d) => {
-        this.attendanceData = (d.data || []).map((it) => {
-          return {
-            text: it.createBy,
-            value: it.id || 0,
-            id: it.craftType,
-          };
-        });
-        let count = 0;
-        this.attendanceData.forEach((it) => {
-          count += it.value;
-        });
-        this.attendanceTotal = count;
-      });
+    methods: {
+        showDetailDlg() {
+            this.$refs.infoDlg.showDialog({
+                prjInfo: this.prjInfo,
+                selProject: this.selProject,
+            })
+        },
+        init() {
+            if (!this.selProject) {
+                return
+            }
+            this.$api.project.getProjectInfo(this.selProject.id).then((d) => {
+                this.prjInfo = d.data || {}
+                let tmps = this.prjInfo.projectDeptsList || []
+                const func = (t) => {
+                    let objs = tmps.filter((it) => it.deptType == t)
+                    return objs.length > 0 ? objs[0] : null
+                }
+                this.prjImgs = (this.prjInfo?.setting?.orgImage || '').split(',').filter((d) => d)
+                this.prjVideo = this.prjInfo?.setting?.orgVideo || ''
+                this.showImgVideo = this.prjImgs.length > 0 && this.prjVideo
+                this.imgVideoSel = 1
+                this.deptType1 = func('建设单位')
+                this.deptType2 = func('设计单位')
+                this.deptType3 = {
+                    deptName: this.prjInfo.disDeptName,
+                    leader: this.prjInfo.projectPerson,
+                    phone: this.prjInfo.projectPersonPhone,
+                }
+                this.deptType4 = func('监理单位')
+                this.deptType5 = func('检测单位')
+                this.deptType6 = func('勘察单位')
+                let tmp = this.cityInfo.map((d) => {
+                    d[18] = Math.abs(d[4] - this.prjInfo.latitude) + Math.abs(d[5] - this.prjInfo.longitude)
+                    return d
+                })
+                tmp = tmp.sort((a, b) => a[18] - b[18])
+                this.cityId = tmp.length > 0 && tmp[0].length > 0 ? tmp[0][0] : ''
+                if (this.prjInfo.actualOperatingTime) {
+                    this.startDays = this.$dt(this.prjInfo.actualOperatingTime).diff(new Date(), 'day') * -1
+                } else {
+                    this.startDays = 0
+                }
+                if (this.cityId) {
+                    this.$api.weather.getByCity(this.cityId).then((w) => {
+                        this.weathers = w.data || []
+                    })
+                    this.getWeatherNowInfo()
+                }
+            })
+            this.loadAttendanceData()
+            this.loadMilestoneData()
+            this.loadCostOutput()
+            this.initPhotographyList()
+        },
+        initPhotographyList() {
+            this.$api.detail.photographyList(this.selProject.id).then((d) => {
+                this.photographyList = d.data
+            })
+        },
+        loadCostOutput() {
+            let dt = this.$dt(new Date())
+            this.$api.detail
+                .costOutputSelectYearAndMonth({
+                    comId: this.selProject.comId,
+                    projectId: this.selProject.id,
+                    year: dt.$y,
+                    month: dt.$M + 1,
+                })
+                .then((d) => {
+                    this.costOutData = d
+                })
+        },
+        loadMilestoneData() {
+            this.$api.detail
+                .milestoneList({
+                    pageNum: 1,
+                    pageSize: 100,
+                    comId: this.selProject.comId,
+                    projectId: this.selProject.id,
+                })
+                .then((d) => {
+                    this.projectBuildNode = d
+                    let itemWidth = this.$dpi() == '1K' ? 200 : this.$dpi() == '2K' ? 300 : 500
+                    this.maxWidth = itemWidth * this.projectBuildNode.length
+                    let n = 0
+                    for (let i = 0; i < this.projectBuildNode.length; i++) {
+                        if (this.projectBuildNode[i].finish == '进行中') {
+                            n = i
+                        }
+                    }
+                    this.minWidth = n * itemWidth + 100
+                })
+        },
+        loadAttendanceData() {
+            let ajax = this.$api.detail.groupByCraftType
+            let posData = {
+                comId: this.selProject.comId,
+                projectId: this.selProject.id,
+            }
+            if (this.attendanceNav == 1) {
+                ajax = this.$api.detail.groupByCraftTypeByAttendance
+                //posData.createTime = this.$dt(new Date()).format("YYYY-MM-DD");
+                posData.createTime = '2024-10-13'
+            }
+            ajax(posData).then((d) => {
+                this.attendanceData = (d.data || []).map((it) => {
+                    return {
+                        text: it.createBy,
+                        value: it.id || 0,
+                        id: it.craftType,
+                    }
+                })
+                let count = 0
+                this.attendanceData.forEach((it) => {
+                    count += it.value
+                })
+                this.attendanceTotal = count
+            })
+        },
+        getWeatherNowInfo() {
+            this.$api.weather.getCityNowInfo(this.cityId).then((cn) => {
+                this.weatherInfo = cn?.data?.now || {}
+                setTimeout(this.getWeatherNowInfo, 1000 * 60 * 5) //5分钟刷新一次
+            })
+        },
+        doAttendanceNav(n) {
+            this.attendanceNav = n
+            this.loadAttendanceData()
+        },
+        doShowAttendanceDetail() {
+            this.$refs.attDlg.showDialog({
+                prjInfo: this.prjInfo,
+                attendanceData: this.attendanceData,
+                type: this.attendanceNav,
+            })
+        },
+        doDeviceNav(n) {
+            this.deviceNav = n
+        },
+        costMouseover() {
+            clearInterval(this.costInterval)
+        },
+        costMouseout() {
+            this.costInterval = setInterval(this.manufacturingCostRoll, 5000)
+        },
+        modifyLeftBtn() {
+            this.direction = 'left'
+            this.manufacturingCostRoll()
+        },
+        modifyRightBtn() {
+            this.direction = 'right'
+            this.manufacturingCostRoll()
+        },
+        manufacturingCostRoll() {
+            var width = $('.project-amount').innerWidth()
+            if (this.direction == 'right') {
+                if (this.costIndex == 6) {
+                    this.costIndex = 0
+                } else {
+                    this.costIndex = this.costIndex + 3
+                }
+            } else {
+                if (this.costIndex == 0) {
+                    this.costIndex = 6
+                } else {
+                    this.costIndex = this.costIndex - 3
+                }
+            }
+            $('#modifyContent').animate({ scrollLeft: width * this.costIndex + 'px' })
+            this.direction = 'right'
+        },
     },
-    getWeatherNowInfo() {
-      this.$api.weather.getCityNowInfo(this.cityId).then((cn) => {
-        this.weatherInfo = cn?.data?.now || {};
-        setTimeout(this.getWeatherNowInfo, 1000 * 60 * 5); //5分钟刷新一次
-      });
-    },
-    doAttendanceNav(n) {
-      this.attendanceNav = n;
-      this.loadAttendanceData();
-    },
-    doShowAttendanceDetail() {
-      this.$refs.attDlg.showDialog({
-        prjInfo: this.prjInfo,
-        attendanceData: this.attendanceData,
-        type: this.attendanceNav,
-      });
-    },
-    doDeviceNav(n) {
-      this.deviceNav = n;
-    },
-    costMouseover() {
-      clearInterval(this.costInterval);
-    },
-    costMouseout() {
-      this.costInterval = setInterval(this.manufacturingCostRoll, 5000);
-    },
-    modifyLeftBtn() {
-      this.direction = "left";
-      this.manufacturingCostRoll();
-    },
-    modifyRightBtn() {
-      this.direction = "right";
-      this.manufacturingCostRoll();
-    },
-    manufacturingCostRoll() {
-      var width = $(".project-amount").innerWidth();
-      if (this.direction == "right") {
-        if (this.costIndex == 6) {
-          this.costIndex = 0;
-        } else {
-          this.costIndex = this.costIndex + 3;
-        }
-      } else {
-        if (this.costIndex == 0) {
-          this.costIndex = 6;
-        } else {
-          this.costIndex = this.costIndex - 3;
-        }
-      }
-      $("#modifyContent").animate({ scrollLeft: width * this.costIndex + "px" });
-      this.direction = "right";
-    },
-  },
-};
+}
 </script>
 
 <style lang="less">
 .project-detail {
-  color: #c2d5f6;
-  .photography-list {
-    width: calc(100% - 4px);
-    height: calc(100% - 26px);
-    padding-left: 1px;
+    color: #c2d5f6;
+    .photography-list {
+        width: calc(100% - 4px);
+        height: calc(100% - 26px);
+        padding-left: 1px;
 
-    .el-carousel {
-      height: 100%;
-    }
-
-    .photography-video {
-      width: 100%;
-      height: calc(100% - 30px);
-    }
-
-    .photography-list-title {
-      line-height: 20px;
-      text-align: center;
-    }
-
-    .photography-list-nodata {
-      background: rgba(255, 255, 255, 0.2);
-      width: 80%;
-      height: 80%;
-      margin-left: 10%;
-      margin-top: 6%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-flow: column;
-
-      .video-play {
-        width: 80px;
-        height: 80px;
-        display: inline-block;
-        background: rgba(0, 0, 0, 0.4);
-        line-height: 80px;
-        text-align: center;
-        border-radius: 40px;
-        margin-bottom: 12px;
-      }
-
-      .photography-list-no-title {
-        color: rgba(255, 255, 255, 0.2);
-      }
-    }
-  }
-  .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;
+        .el-carousel {
+            height: 100%;
         }
 
-        .dept-row {
-          margin-left: 8px;
-          font-size: 12px;
-          line-height: 22px;
-          display: inline-grid;
-          flex-grow: 1;
-          padding-right: 10px;
+        .photography-video {
+            width: 100%;
+            height: calc(100% - 30px);
+        }
 
-          .dept-name {
-            color: #50a2eb;
-          }
+        .photography-list-title {
+            line-height: 20px;
+            text-align: center;
+        }
 
-          .dept-leader-phone {
-            color: #ab3715;
-            cursor: pointer;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
+        .photography-list-nodata {
+            background: rgba(255, 255, 255, 0.2);
+            width: 80%;
+            height: 80%;
+            margin-left: 10%;
+            margin-top: 6%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-flow: column;
 
-            .dept-leader {
-              margin-right: 10px;
+            .video-play {
+                width: 80px;
+                height: 80px;
+                display: inline-block;
+                background: rgba(0, 0, 0, 0.4);
+                line-height: 80px;
+                text-align: center;
+                border-radius: 40px;
+                margin-bottom: 12px;
+            }
+
+            .photography-list-no-title {
+                color: rgba(255, 255, 255, 0.2);
             }
-          }
         }
-      }
     }
-  }
+    .dept-info-list {
+        height: calc(100% - 30px);
+        margin-top: 10px;
 
-  .device-info {
-    .device-title {
-      padding: 10px;
-    }
-
-    .device-data {
-      padding: 30px 0px;
-
-      .survey_content_value {
-        .sp-number {
-          font-size: 40px;
+        .el-row {
+            min-height: 33%;
         }
 
-        .sp-unit {
-          font-size: 12px;
+        .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;
+                        }
+                    }
+                }
+            }
         }
-      }
     }
 
-    .device-data-list {
-      display: flex;
-      padding: 0px 10%;
+    .device-info {
+        .device-title {
+            padding: 10px;
+        }
 
-      .device-data-item {
-        display: inline-flex;
-        width: 33%;
-        align-items: center;
-      }
+        .device-data {
+            padding: 30px 0px;
+
+            .survey_content_value {
+                .sp-number {
+                    font-size: 40px;
+                }
+
+                .sp-unit {
+                    font-size: 12px;
+                }
+            }
+        }
+
+        .device-data-list {
+            display: flex;
+            padding: 0px 10%;
+
+            .device-data-item {
+                display: inline-flex;
+                width: 33%;
+                align-items: center;
+            }
+        }
     }
-  }
 
-  .modify-project-amount {
-    .modify-content {
-      width: 840px;
+    .modify-project-amount {
+        .modify-content {
+            width: 840px;
 
-      .modify-content-overflow {
-        width: 2500px;
+            .modify-content-overflow {
+                width: 2500px;
 
-        .project-amount {
-          .project-amount-bgd {
-            width: 256px;
+                .project-amount {
+                    .project-amount-bgd {
+                        width: 256px;
 
-            .project-amount-con {
-              .svg-icon {
+                        .project-amount-con {
+                            .svg-icon {
+                                width: 20px;
+                                height: 20px;
+                                fill: #63c8ff;
+                            }
+
+                            .led-number {
+                                font-size: 36px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .prj-img-list {
+        height: calc(100% - 130px);
+        position: relative;
+
+        .prj-img-nav {
+            position: absolute;
+            z-index: 999;
+
+            .prj-img-nav-item {
+                display: inline-block;
+                line-height: 30px;
+                height: 30px;
+                width: 90px;
+                text-align: center;
+                background-color: #192c648a;
+                border: solid 1px #1e90ff8a;
+                color: #ccc;
+                cursor: pointer;
+
+                &.is-active {
+                    background-color: #50a2eb8a;
+                    color: #fff;
+                }
+            }
+        }
+
+        .prj-video-layout {
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            justify-items: center;
+        }
+
+        .el-carousel {
+            height: 100%;
+
+            .el-carousel__arrow {
+                width: 50px;
+                height: 50px;
+                background-color: #192c648a;
+
+                i {
+                    font-size: 20px;
+                }
+            }
+        }
+    }
+
+    .work-days {
+        margin: 20px 0px;
+    }
+
+    .weather-list {
+        margin-top: 30px;
+
+        .weather-item {
+            line-height: 40px;
+
+            .weather-day {
+                display: inline-block;
+                width: 30%;
+            }
+
+            .weather-temp {
+                display: inline-block;
+                margin-left: 30%;
+            }
+
+            .weather-img {
                 width: 20px;
-                height: 20px;
-                fill: #63c8ff;
-              }
-
-              .led-number {
-                font-size: 36px;
-              }
             }
-          }
         }
-      }
-    }
-  }
-
-  .prj-img-list {
-    height: calc(100% - 130px);
-    position: relative;
-
-    .prj-img-nav {
-      position: absolute;
-      z-index: 999;
-
-      .prj-img-nav-item {
-        display: inline-block;
-        line-height: 30px;
-        height: 30px;
-        width: 90px;
-        text-align: center;
-        background-color: #192c648a;
-        border: solid 1px #1e90ff8a;
-        color: #ccc;
-        cursor: pointer;
-
-        &.is-active {
-          background-color: #50a2eb8a;
-          color: #fff;
-        }
-      }
     }
 
-    .prj-video-layout {
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      justify-items: center;
-    }
+    .weather-info {
+        margin-top: 60px;
 
-    .el-carousel {
-      height: 100%;
-
-      .el-carousel__arrow {
-        width: 50px;
-        height: 50px;
-        background-color: #192c648a;
-
-        i {
-          font-size: 20px;
-        }
-      }
-    }
-  }
-
-  .work-days {
-    margin: 20px 0px;
-  }
-
-  .weather-list {
-    margin-top: 30px;
-
-    .weather-item {
-      line-height: 40px;
-
-      .weather-day {
-        display: inline-block;
-        width: 30%;
-      }
-
-      .weather-temp {
-        display: inline-block;
-        margin-left: 30%;
-      }
-
-      .weather-img {
-        width: 20px;
-      }
-    }
-  }
-
-  .weather-info {
-    margin-top: 60px;
-
-    .el-row {
-      margin-top: 30px;
-    }
-
-    .weather-info-item {
-      display: flex;
-      align-items: center;
-
-      .current-value-img {
-        width: 60px;
-        height: 60px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .svg-icon {
-          width: 30px;
-          height: 30px;
-          fill: #63c8ff;
-        }
-      }
-
-      .wi-data {
-        margin-left: 10px;
-        line-height: 30px;
-
-        .wi-label {
-          font-size: 14px;
+        .el-row {
+            margin-top: 30px;
         }
 
-        .wi-data-unit {
-          .wi-txt {
-            color: #fff;
-            font-weight: bold;
-            font-size: 16px;
-          }
+        .weather-info-item {
+            display: flex;
+            align-items: center;
 
-          .wi-unit {
-            margin-left: 4px;
-            font-size: 10px;
-          }
+            .current-value-img {
+                width: 60px;
+                height: 60px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .svg-icon {
+                    width: 30px;
+                    height: 30px;
+                    fill: #63c8ff;
+                }
+            }
+
+            .wi-data {
+                margin-left: 10px;
+                line-height: 30px;
+
+                .wi-label {
+                    font-size: 14px;
+                }
+
+                .wi-data-unit {
+                    .wi-txt {
+                        color: #fff;
+                        font-weight: bold;
+                        font-size: 16px;
+                    }
+
+                    .wi-unit {
+                        margin-left: 4px;
+                        font-size: 10px;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 
-  .prj-plan {
-    .dangerous-timeline-max {
-      width: 850px;
-      height: 230px;
+    .prj-plan {
+        .dangerous-timeline-max {
+            width: 850px;
+            height: 230px;
 
-      .dangerous-timeline-con {
-        width: 200px;
-        font-size: 14px;
-      }
+            .dangerous-timeline-con {
+                width: 200px;
+                font-size: 14px;
+            }
 
-      .dangerous-text {
-        font-size: 14px;
-      }
+            .dangerous-text {
+                font-size: 14px;
+            }
 
-      .dangerous-time-max {
-        text-align: center;
+            .dangerous-time-max {
+                text-align: center;
 
-        .dangerous-time-nav {
-          display: inline-block;
+                .dangerous-time-nav {
+                    display: inline-block;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 @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;
-          }
-        }
-      }
-    }
-
-    .attendance-info-title {
-      * {
-        font-size: 24px;
-      }
-    }
-
-    .attendance-tag {
-      * {
-        font-size: 24px;
-      }
-
-      padding-top: 40px;
-
-      .survey_content_img {
-        background-size: 120px 80px;
-        width: 120px;
-        height: 120px;
-
-        img {
-          width: 60px;
-          height: 60px;
-        }
-      }
-    }
-
-    .device-info {
-      .device-title {
-        padding: 10px;
-
-        .survey_title_btn_min {
-          font-size: 20px;
-          height: 40px;
-          width: 150px;
-          line-height: 40px;
-        }
-      }
-
-      .device-data {
-        padding: 70px 0px;
-
-        .survey_content_img {
-          width: 120px;
-          height: 120px;
-          line-height: 120px;
-          background-size: 120px 80px;
-
-          img {
-            width: 60px;
-            height: 60px;
-          }
-        }
-
-        .survey_content_number {
-          font-size: 20px;
-
-          .survey_content_value {
-            .sp-number {
-              font-size: 60px;
-            }
-
-            .sp-unit {
-              font-size: 20px;
-            }
-          }
-        }
-      }
-
-      .device-data-list {
-        .device-data-item {
-          font-size: 20px;
-        }
-      }
-    }
-
-    .modify-project-amount {
-      .modify-btn {
-        img {
-          height: 60px;
-        }
-      }
-
-      .modify-content {
-        width: 1110px;
-
-        .modify-content-overflow {
-          width: 3420px;
-
-          .project-amount {
-            .project-amount-bgd {
-              width: 350px;
-              height: 130px;
-
-              .project-amount-con {
-                p {
-                  font-size: 20px;
-
-                  .svg-icon {
-                    width: 20px;
-                    height: 20px;
-                    fill: #63c8ff;
-                  }
-                }
-
-                .led-number {
-                  font-size: 48px;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .prj-img-list {
-      height: calc(100% - 150px);
-
-      .prj-img-nav {
-        .prj-img-nav-item {
-          line-height: 40px;
-          height: 40px;
-          width: 110px;
-          font-size: 18px;
-        }
-      }
-
-      .el-carousel {
-        height: 100%;
-
-        .el-carousel__arrow {
-          width: 80px;
-          height: 80px;
-          background-color: #192c648a;
-
-          i {
-            font-size: 30px;
-          }
-        }
-      }
-    }
-
-    .work-info {
-      .analyse-text {
-        font-size: 24px;
-      }
-
-      .analyse-title {
-        height: 60px;
-      }
-
-      .work-days {
-        margin: 20px 0px;
-        font-size: 24px;
-
-        .people-number-con {
-          div {
-            width: 40px;
-            height: 60px;
-            line-height: 60px;
-            font-size: 40px;
-          }
-        }
-      }
-
-      .weather-list {
-        margin-top: 50px;
-
-        .weather-item {
-          line-height: 60px;
-          font-size: 24px;
-
-          .weather-img {
-            width: 30px;
-          }
-        }
-      }
-
-      .weather-info {
-        margin-top: 80px;
-
-        .el-row {
-          margin-top: 60px;
-        }
-
-        .weather-info-item {
-          .current-value-img {
-            width: 80px;
-            height: 80px;
-
-            .svg-icon {
-              width: 40px;
-              height: 40px;
-            }
-          }
-
-          .wi-data {
-            margin-left: 10px;
-            line-height: 40px;
-
-            .wi-label {
-              font-size: 20px;
-            }
-
-            .wi-data-unit {
-              .wi-txt {
-                font-size: 24px;
-              }
-
-              .wi-unit {
-                margin-left: 4px;
-                font-size: 14px;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .prj-plan {
-      .dangerous-timeline-max {
-        width: 1160px;
-        height: 340px;
-
-        .dangerous-timeline-con {
-          width: 300px;
-          font-size: 24px;
-        }
-
-        .dangerous-text {
-          font-size: 24px;
-        }
-
-        .dangerous-time-max {
-          height: 150px;
-          line-height: 50px;
-
-          .project-expect-state {
+    .project-detail {
+        .prj-info-title {
             font-size: 24px;
-            width: 160px;
-            height: 40px;
-            line-height: 40px;
-          }
         }
-      }
+
+        .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;
+                    }
+                }
+            }
+        }
+
+        .attendance-info-title {
+            * {
+                font-size: 24px;
+            }
+        }
+
+        .attendance-tag {
+            * {
+                font-size: 24px;
+            }
+
+            padding-top: 40px;
+
+            .survey_content_img {
+                background-size: 120px 80px;
+                width: 120px;
+                height: 120px;
+
+                img {
+                    width: 60px;
+                    height: 60px;
+                }
+            }
+        }
+
+        .device-info {
+            .device-title {
+                padding: 10px;
+
+                .survey_title_btn_min {
+                    font-size: 20px;
+                    height: 40px;
+                    width: 150px;
+                    line-height: 40px;
+                }
+            }
+
+            .device-data {
+                padding: 70px 0px;
+
+                .survey_content_img {
+                    width: 120px;
+                    height: 120px;
+                    line-height: 120px;
+                    background-size: 120px 80px;
+
+                    img {
+                        width: 60px;
+                        height: 60px;
+                    }
+                }
+
+                .survey_content_number {
+                    font-size: 20px;
+
+                    .survey_content_value {
+                        .sp-number {
+                            font-size: 60px;
+                        }
+
+                        .sp-unit {
+                            font-size: 20px;
+                        }
+                    }
+                }
+            }
+
+            .device-data-list {
+                .device-data-item {
+                    font-size: 20px;
+                }
+            }
+        }
+
+        .modify-project-amount {
+            .modify-btn {
+                img {
+                    height: 60px;
+                }
+            }
+
+            .modify-content {
+                width: 1110px;
+
+                .modify-content-overflow {
+                    width: 3420px;
+
+                    .project-amount {
+                        .project-amount-bgd {
+                            width: 350px;
+                            height: 130px;
+
+                            .project-amount-con {
+                                p {
+                                    font-size: 20px;
+
+                                    .svg-icon {
+                                        width: 20px;
+                                        height: 20px;
+                                        fill: #63c8ff;
+                                    }
+                                }
+
+                                .led-number {
+                                    font-size: 48px;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .prj-img-list {
+            height: calc(100% - 150px);
+
+            .prj-img-nav {
+                .prj-img-nav-item {
+                    line-height: 40px;
+                    height: 40px;
+                    width: 110px;
+                    font-size: 18px;
+                }
+            }
+
+            .el-carousel {
+                height: 100%;
+
+                .el-carousel__arrow {
+                    width: 80px;
+                    height: 80px;
+                    background-color: #192c648a;
+
+                    i {
+                        font-size: 30px;
+                    }
+                }
+            }
+        }
+
+        .work-info {
+            .analyse-text {
+                font-size: 24px;
+            }
+
+            .analyse-title {
+                height: 60px;
+            }
+
+            .work-days {
+                margin: 20px 0px;
+                font-size: 24px;
+
+                .people-number-con {
+                    div {
+                        width: 40px;
+                        height: 60px;
+                        line-height: 60px;
+                        font-size: 40px;
+                    }
+                }
+            }
+
+            .weather-list {
+                margin-top: 50px;
+
+                .weather-item {
+                    line-height: 60px;
+                    font-size: 24px;
+
+                    .weather-img {
+                        width: 30px;
+                    }
+                }
+            }
+
+            .weather-info {
+                margin-top: 80px;
+
+                .el-row {
+                    margin-top: 60px;
+                }
+
+                .weather-info-item {
+                    .current-value-img {
+                        width: 80px;
+                        height: 80px;
+
+                        .svg-icon {
+                            width: 40px;
+                            height: 40px;
+                        }
+                    }
+
+                    .wi-data {
+                        margin-left: 10px;
+                        line-height: 40px;
+
+                        .wi-label {
+                            font-size: 20px;
+                        }
+
+                        .wi-data-unit {
+                            .wi-txt {
+                                font-size: 24px;
+                            }
+
+                            .wi-unit {
+                                margin-left: 4px;
+                                font-size: 14px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .prj-plan {
+            .dangerous-timeline-max {
+                width: 1160px;
+                height: 340px;
+
+                .dangerous-timeline-con {
+                    width: 300px;
+                    font-size: 24px;
+                }
+
+                .dangerous-text {
+                    font-size: 24px;
+                }
+
+                .dangerous-time-max {
+                    height: 150px;
+                    line-height: 50px;
+
+                    .project-expect-state {
+                        font-size: 24px;
+                        width: 160px;
+                        height: 40px;
+                        line-height: 40px;
+                    }
+                }
+            }
+        }
     }
-  }
 }
 
 @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;
+    .project-detail {
+        .prj-info-title {
+            font-size: 32px;
         }
 
-        .dept-nodata {
-          font-size: 18px;
-        }
-
-        .dept-info {
-          .dept-img {
-            width: 100px;
-            height: 100px;
-          }
-
-          .dept-row {
-            font-size: 24px;
-            line-height: 32px;
-          }
-        }
-      }
-    }
-
-    .attendance-info-title {
-      * {
-        font-size: 36px;
-      }
-    }
-
-    .attendance-tag {
-      * {
-        font-size: 36px;
-      }
-
-      padding-top: 100px;
-
-      .survey_content_img {
-        background-size: 150px 100px;
-        width: 150px;
-        height: 150px;
-
-        img {
-          width: 80px;
-          height: 80px;
-        }
-      }
-    }
-
-    .device-info {
-      .device-title {
-        padding: 20px;
-
-        .survey_title_btn_min {
-          font-size: 30px;
-          height: 60px;
-          width: 210px;
-          line-height: 60px;
-        }
-      }
-
-      .device-data {
-        padding: 120px 0px;
-
-        .survey_content_img {
-          width: 180px;
-          height: 180px;
-          line-height: 180px;
-          background-size: 180px 120px;
-
-          img {
-            width: 90px;
-            height: 90px;
-          }
-        }
-
-        .survey_content_number {
-          font-size: 30px;
-
-          .survey_content_value {
-            .sp-number {
-              font-size: 90px;
-            }
-
-            .sp-unit {
-              font-size: 30px;
-            }
-          }
-        }
-      }
-
-      .device-data-list {
-        .device-data-item {
-          img {
-            width: 40px;
-            height: 40px;
-          }
-
-          font-size: 30px;
-        }
-      }
-    }
-
-    .modify-project-amount {
-      .modify-btn {
-        img {
-          height: 90px;
-          margin-top: 10px;
-        }
-      }
-
-      .modify-content {
-        width: 1680px;
-
-        .modify-content-overflow {
-          width: 5220px;
-
-          .project-amount {
-            .project-amount-bgd {
-              width: 540px;
-              height: 165px;
-
-              .project-amount-con {
-                p {
-                  font-size: 30px;
-
-                  .svg-icon {
-                    width: 30px;
-                    height: 30px;
-                  }
+        .dept-info-list {
+            .dept-item {
+                .dept-title {
+                    font-size: 24px;
+                    line-height: 40px;
                 }
 
-                div {
-                  font-size: 30px;
-
-                  .led-number {
-                    font-size: 60px;
-                  }
+                .dept-nodata {
+                    font-size: 18px;
+                }
+
+                .dept-info {
+                    .dept-img {
+                        width: 100px;
+                        height: 100px;
+                    }
+
+                    .dept-row {
+                        font-size: 24px;
+                        line-height: 32px;
+                    }
                 }
-              }
             }
-          }
-        }
-      }
-    }
-
-    .prj-img-list {
-      height: calc(100% - 190px);
-
-      .prj-img-nav {
-        .prj-img-nav-item {
-          line-height: 60px;
-          height: 60px;
-          width: 130px;
-          font-size: 30px;
-        }
-      }
-
-      .el-carousel {
-        height: 100%;
-
-        .el-carousel__arrow {
-          width: 120px;
-          height: 120px;
-          background-color: #192c648a;
-
-          i {
-            font-size: 40px;
-          }
-        }
-      }
-    }
-
-    .work-info {
-      .analyse-text {
-        font-size: 30px;
-      }
-
-      .analyse-title {
-        height: 80px;
-      }
-
-      .work-days {
-        margin: 20px 0px;
-        font-size: 32px;
-
-        .people-number-con {
-          div {
-            width: 60px;
-            height: 90px;
-            line-height: 90px;
-            font-size: 50px;
-          }
-        }
-      }
-
-      .weather-list {
-        margin-top: 120px;
-
-        .weather-item {
-          line-height: 100px;
-          font-size: 40px;
-
-          .weather-img {
-            width: 40px;
-          }
-        }
-      }
-
-      .weather-info {
-        margin-top: 140px;
-
-        .el-row {
-          margin-top: 120px;
         }
 
-        .weather-info-item {
-          .current-value-img {
-            width: 100px;
-            height: 100px;
-
-            .svg-icon {
-              width: 50px;
-              height: 50px;
-            }
-          }
-
-          .wi-data {
-            margin-left: 10px;
-            line-height: 50px;
-
-            .wi-label {
-              font-size: 30px;
-            }
-
-            .wi-data-unit {
-              .wi-txt {
+        .attendance-info-title {
+            * {
                 font-size: 36px;
-              }
-
-              .wi-unit {
-                margin-left: 4px;
-                font-size: 20px;
-              }
             }
-          }
         }
-      }
+
+        .attendance-tag {
+            * {
+                font-size: 36px;
+            }
+
+            padding-top: 100px;
+
+            .survey_content_img {
+                background-size: 150px 100px;
+                width: 150px;
+                height: 150px;
+
+                img {
+                    width: 80px;
+                    height: 80px;
+                }
+            }
+        }
+
+        .device-info {
+            .device-title {
+                padding: 20px;
+
+                .survey_title_btn_min {
+                    font-size: 30px;
+                    height: 60px;
+                    width: 210px;
+                    line-height: 60px;
+                }
+            }
+
+            .device-data {
+                padding: 120px 0px;
+
+                .survey_content_img {
+                    width: 180px;
+                    height: 180px;
+                    line-height: 180px;
+                    background-size: 180px 120px;
+
+                    img {
+                        width: 90px;
+                        height: 90px;
+                    }
+                }
+
+                .survey_content_number {
+                    font-size: 30px;
+
+                    .survey_content_value {
+                        .sp-number {
+                            font-size: 90px;
+                        }
+
+                        .sp-unit {
+                            font-size: 30px;
+                        }
+                    }
+                }
+            }
+
+            .device-data-list {
+                .device-data-item {
+                    img {
+                        width: 40px;
+                        height: 40px;
+                    }
+
+                    font-size: 30px;
+                }
+            }
+        }
+
+        .modify-project-amount {
+            .modify-btn {
+                img {
+                    height: 90px;
+                    margin-top: 10px;
+                }
+            }
+
+            .modify-content {
+                width: 1680px;
+
+                .modify-content-overflow {
+                    width: 5220px;
+
+                    .project-amount {
+                        .project-amount-bgd {
+                            width: 540px;
+                            height: 165px;
+
+                            .project-amount-con {
+                                p {
+                                    font-size: 30px;
+
+                                    .svg-icon {
+                                        width: 30px;
+                                        height: 30px;
+                                    }
+                                }
+
+                                div {
+                                    font-size: 30px;
+
+                                    .led-number {
+                                        font-size: 60px;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .prj-img-list {
+            height: calc(100% - 190px);
+
+            .prj-img-nav {
+                .prj-img-nav-item {
+                    line-height: 60px;
+                    height: 60px;
+                    width: 130px;
+                    font-size: 30px;
+                }
+            }
+
+            .el-carousel {
+                height: 100%;
+
+                .el-carousel__arrow {
+                    width: 120px;
+                    height: 120px;
+                    background-color: #192c648a;
+
+                    i {
+                        font-size: 40px;
+                    }
+                }
+            }
+        }
+
+        .work-info {
+            .analyse-text {
+                font-size: 30px;
+            }
+
+            .analyse-title {
+                height: 80px;
+            }
+
+            .work-days {
+                margin: 20px 0px;
+                font-size: 32px;
+
+                .people-number-con {
+                    div {
+                        width: 60px;
+                        height: 90px;
+                        line-height: 90px;
+                        font-size: 50px;
+                    }
+                }
+            }
+
+            .weather-list {
+                margin-top: 120px;
+
+                .weather-item {
+                    line-height: 100px;
+                    font-size: 40px;
+
+                    .weather-img {
+                        width: 40px;
+                    }
+                }
+            }
+
+            .weather-info {
+                margin-top: 140px;
+
+                .el-row {
+                    margin-top: 120px;
+                }
+
+                .weather-info-item {
+                    .current-value-img {
+                        width: 100px;
+                        height: 100px;
+
+                        .svg-icon {
+                            width: 50px;
+                            height: 50px;
+                        }
+                    }
+
+                    .wi-data {
+                        margin-left: 10px;
+                        line-height: 50px;
+
+                        .wi-label {
+                            font-size: 30px;
+                        }
+
+                        .wi-data-unit {
+                            .wi-txt {
+                                font-size: 36px;
+                            }
+
+                            .wi-unit {
+                                margin-left: 4px;
+                                font-size: 20px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .prj-plan {
+            .dangerous-timeline-max {
+                width: 1790px;
+                height: 570px;
+
+                .strip-max {
+                    top: 136px;
+                }
+
+                .dangerous-timeline-con {
+                    width: 500px;
+                    font-size: 42px;
+                }
+
+                .dangerous-text {
+                    font-size: 42px;
+                    height: 100px;
+                    line-height: 40px;
+                }
+
+                .dangerous-time-max {
+                    height: 300px;
+                    line-height: 100px;
+
+                    .project-expect-state {
+                        font-size: 36px;
+                        width: 240px;
+                        height: 60px;
+                        line-height: 60px;
+                    }
+                }
+            }
+        }
     }
-
-    .prj-plan {
-      .dangerous-timeline-max {
-        width: 1790px;
-        height: 570px;
-
-        .strip-max {
-          top: 136px;
-        }
-
-        .dangerous-timeline-con {
-          width: 500px;
-          font-size: 42px;
-        }
-
-        .dangerous-text {
-          font-size: 42px;
-          height: 100px;
-          line-height: 40px;
-        }
-
-        .dangerous-time-max {
-          height: 300px;
-          line-height: 100px;
-
-          .project-expect-state {
-            font-size: 36px;
-            width: 240px;
-            height: 60px;
-            line-height: 60px;
-          }
-        }
-      }
-    }
-  }
 }
 </style>
diff --git a/yanzhu-bigscreen/src/views/schedule/photography.vue b/yanzhu-bigscreen/src/views/schedule/photography.vue
index 68511130..cb8b0bcf 100644
--- a/yanzhu-bigscreen/src/views/schedule/photography.vue
+++ b/yanzhu-bigscreen/src/views/schedule/photography.vue
@@ -1,183 +1,208 @@
 <template>
-  <div class="project-photography main-page">
-    <el-col :span="6" class="h100">
-      <module-one-3-1 label="项目全景列表">
-        <div class="left-list scroll">
-          <template v-if="infoList && infoList.length > 0">
-            <div
-              v-for="(item, index) in infoList"
-              :key="index"
-              class="video-item"
-              @click.stop="playVideo(item)"
-            >
-              <span class="div-date">{{ item.videoDate }}</span>
-              <i
-                class="header-icon el-icon-camera-solid"
-                style="font-size: 24px; color: aqua"
-              ></i>
-            </div>
-          </template>
-          <div v-else style="text-align: center" class="div-no-data">
-            <img src="images/nodata.png" style="width: 120px" />
-            <div style="text-align: center; font-size: 12px; color: #888">暂无数据</div>
-          </div>
-        </div>
-      </module-one-3-1>
-    </el-col>
-    <el-col :span="18" class="no-title">
-      <module-one-3-3 :notitle="true">
-        <template v-if="info">
-          <div class="right-title">
-            <span class="sp-title">{{ info.videoDate }}</span>
-          </div>
-          <video style="width: 98%;" controls>
-            <source :src="info.videoUrl" type="video/mp4" />
-            您的浏览器不支持Video标签。
-          </video>
-        </template>
-        <div v-else style="text-align: center" class="div-no-data">
-          <img src="images/nodata.png" style="width: 120px" />
-          <div style="text-align: center; font-size: 12px; color: #888">暂无数据</div>
-        </div>
-      </module-one-3-3>
-    </el-col>
-  </div>
+    <div class="project-photography main-page">
+        <el-col :span="6" class="h100">
+            <module-one-3-1 label="项目全景列表">
+                <div class="left-list scroll">
+                    <template v-if="infoList && infoList.length > 0">
+                        <div v-for="(item, index) in infoList" :key="index" :class="info==item?'is-active':''" class="video-item" @click.stop="playVideo(item)">
+                            <span class="div-date">{{ item.videoDate }}</span>
+                            <i class="header-icon el-icon-camera-solid" style="font-size: 24px; color: aqua"></i>
+                        </div>
+                    </template>
+                    <div v-else style="text-align: center" class="div-no-data">
+                        <img src="images/nodata.png" style="width: 120px" />
+                        <div style="text-align: center; font-size: 12px; color: #888">暂无数据</div>
+                    </div>
+                </div>
+            </module-one-3-1>
+        </el-col>
+        <el-col :span="18" class="no-title">
+            <module-one-3-3 :notitle="true">
+                <template v-if="info">
+                    <div class="right-title">
+                        <span class="sp-title">{{ info.videoDate }}</span>
+                    </div>
+                    <video style="width: 98%;" controls>
+                        <source :src="info.videoUrl" type="video/mp4" />您的浏览器不支持Video标签。
+                    </video>
+                </template>
+                <div v-else style="text-align: center" class="div-no-data">
+                    <img src="images/nodata.png" style="width: 120px" />
+                    <div style="text-align: center; font-size: 12px; color: #888">暂无数据</div>
+                </div>
+            </module-one-3-3>
+        </el-col>
+    </div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      info: null,
-      activeNames: [],
-      infoList: {},
-    };
-  },
-  mounted() {
-    window.photography = this;
-    this.$store.dispatch("ChangeNav", 501);
-    this.$bus.$on("projectChange", (prj) => {
-      this.selProject = prj;
-      this.init();
-    });
-    this.selProject = this.$store.getters.selProject;
-    this.init();
-  },
-  methods: {
-    playVideo(it) {
-      this.info = null;
-      setTimeout(() => {
-        this.info = it;
-      }, 400);
-    },
-    init() {
-      if (!this.selProject) {
-        return;
-      }
-      this.$api.detail.photographyList(this.selProject.id).then((d) => {
-        if (d.data.length > 0) {
-          this.info = d.data[0];
-        } else {
-          this.info = null;
+    data() {
+        return {
+            info: null,
+            activeNames: [],
+            infoList: {},
         }
-        this.infoList = d.data;
-      });
     },
-  },
-};
+    mounted() {
+        window.photography = this
+        this.$store.dispatch('ChangeNav', 501)
+        this.$bus.$on('projectChange', (prj) => {
+            this.selProject = prj
+            this.init()
+        })
+        this.selProject = this.$store.getters.selProject
+        this.init()
+    },
+    methods: {
+        playVideo(it) {
+            this.info = null
+            setTimeout(() => {
+                this.info = it
+            }, 400)
+        },
+        init() {
+            if (!this.selProject) {
+                return
+            }
+            this.$api.detail.photographyList(this.selProject.id).then((d) => {
+                if (d.data.length > 0) {
+                    this.info = d.data[0]
+                } else {
+                    this.info = null
+                }
+                this.infoList = d.data
+            })
+        },
+    },
+}
 </script>
 
 <style lang="less">
 .project-photography {
-  .div-no-data {
-    text-align: center;
-    height: 600px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .no-title {
-    .right-title {
-      height: 200px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    .div-no-data {
+        text-align: center;
+        height: 600px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
-    .sp-title {
-      display: inline-block;
-      line-height: 72px;
-      padding: 0px 40px;
-      font-size: 40px;
-      background-size: 100% 100%;
-      background-image: url("../../assets/images/bgphoto.png");
-    }
-    video {
-      width: 100%;
-      height: calc(100% - 201px);
-    }
-    /deep/ .screen-one-3-3 {
-      background-image: none;
-      border: solid 1px #409eff5c;
-      .module-title {
-        display: none;
-      }
-    }
-  }
-  .left-list {
-    max-height: calc(100% - 40px);
-    overflow-y: auto;
-    &::-webkit-scrollbar {
-      width: 4px;
-      height: 4px;
-    }
-  }
-  /deep/ .screen-one-3-1 {
-    .el-collapse {
-      border: none;
-      margin-top: 4px;
-
-      .el-collapse-item {
-      }
-
-      .el-collapse-item__header {
-        background-color: #097fca2e;
-        color: #089fff;
-        border-bottom: dotted 1px #089fff77;
-      }
-
-      .el-collapse-item__content {
-        padding-bottom: 12px;
-      }
-
-      .el-collapse-item__wrap {
-        background-color: transparent;
-        border: none;
-        .img-item {
-          margin-top: 8px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-direction: column;
-          color: #fff;
-          position: relative;
+    .no-title {
+        .right-title {
+            height: 200px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
-        .video-item {
-          position: relative;
-          line-height: 30px;
-          display: flex;
-          align-items: center;
-          cursor: pointer;
-          border-bottom: solid 1px #089fff77;
-          .div-date {
-            width: calc(90% - 24px);
-            text-align: left;
-            bottom: 0px;
-            color: #089fff;
-            padding-left: 24px;
-          }
+        .sp-title {
+            display: inline-block;
+            line-height: 72px;
+            padding: 0px 40px;
+            font-size: 40px;
+            background-size: 100% 100%;
+            background-image: url('../../assets/images/bgphoto.png');
+        }
+        video {
+            width: 100%;
+            height: calc(100% - 201px);
+        }
+        /deep/ .screen-one-3-3 {
+            background-image: none;
+            border: solid 1px #409eff5c;
+            .module-title {
+                display: none;
+            }
+        }
+    }
+    .left-list {
+        max-height: calc(100% - 40px);
+        overflow-y: auto;
+        &::-webkit-scrollbar {
+            width: 4px;
+            height: 4px;
+        }
+    }
+    .screen-one-3-1 {
+        height: calc(100% - 20px) !important;
+        .left-list {
+            padding: 10px 10px 10px 0px;
+            .video-item {
+                line-height: 40px;
+                border: solid 1px #1e8fff83;
+                padding: 0px 20px;
+                margin-top: 10px;
+                position: relative;
+                cursor: pointer;
+                &:first-child {
+                    margin-top: 0px;
+                }
+                .header-icon {
+                    position: absolute;
+                    right: 10px;
+                    top: 10px;
+                }
+                &.is-active {
+                    background-color: #089fff;
+                    color: #fff;
+                    &:hover {
+                        background-color: #089fff;
+                        color: #fff;
+                    }
+                }
+                &:hover {
+                    background-color: #08a0ff95;
+                    color: #fff;
+                }
+            }
+        }
+    }
+    /deep/ .screen-one-3-1 {
+        .el-collapse {
+            border: none;
+            margin-top: 4px;
+
+            .el-collapse-item {
+            }
+
+            .el-collapse-item__header {
+                background-color: #097fca2e;
+                color: #089fff;
+                border-bottom: dotted 1px #089fff77;
+            }
+
+            .el-collapse-item__content {
+                padding-bottom: 12px;
+            }
+
+            .el-collapse-item__wrap {
+                background-color: transparent;
+                border: none;
+                .img-item {
+                    margin-top: 8px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: column;
+                    color: #fff;
+                    position: relative;
+                }
+                .video-item {
+                    position: relative;
+                    line-height: 30px;
+                    display: flex;
+                    align-items: center;
+                    cursor: pointer;
+                    border-bottom: solid 1px #089fff77;
+                    .div-date {
+                        width: calc(90% - 24px);
+                        text-align: left;
+                        bottom: 0px;
+                        color: #089fff;
+                        padding-left: 24px;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>