代码提交

src/components/layout/header.vue

@@ -7,12 +7,12 @@
        
       </div>
       <div class="right">
-        <div v-if="this.$route.path == '/'" style=" width: 10%;display: flex;justify-content: space-between;align-items: center;"><img src="../../assets/newbanImg/close.png" style="width:25px;height:27px;cursor: pointer;"/>|</div>
-        <div v-if="this.$route.path != '/'" style=" width: 10%;display: flex;justify-content: space-between;align-items: center;"><img src="../../assets/newbanImg/fanhui.png" style="width:31px;height:26px;cursor: pointer;" @click="goHome"/>|</div>
+        <div v-if="this.$route.path == '/index'" style=" width: 10%;display: flex;justify-content: space-between;align-items: center;"><img src="../../assets/newbanImg/close.png" style="width:25px;height:27px;cursor: pointer;"@click="goLogin"/>|</div>
+        <div v-if="this.$route.path != '/index'" style=" width: 10%;display: flex;justify-content: space-between;align-items: center;"><img src="../../assets/newbanImg/fanhui.png" style="width:31px;height:26px;cursor: pointer;" @click="goHome"/>|</div>
         <img src="../../assets/newbanImg/user.png" style="width:25px;height:25px"/>|
         <div class="date">
-          <div class="time" style="font-size:20px">18:30:52</div>
-          <div class="riqi" style="font-size:12px">2021-3-3</div>
+          <div class="time" style="font-size:20px">{{time}}</div>
+          <div class="riqi" style="font-size:12px">{{year}}</div>
         </div>|
         <div class="tianqi">
           <img src="../../assets/weather/Cloudy .png" style="width:32px;height:32px"/>
@@ -59,13 +59,28 @@ export default {
           value: '1',
           label: '国网南京供电公司 陈堃'
         }],
+      pageStatus:'',//返回保电场景
+      time:'',//时间
+      year:'',//年
     };
   },
   components: {
     // BottomLeftChart,
   },
   mounted() {
-    console.log(this.$route.path, "aaaa");
+    //时间
+    window.setInterval(()=>{
+        this.time = this.$moment().format("hh:mm:ss")
+      },1000)
+      this.year = this.$moment().format("YYYY-MM-DD")
+    //切换模型
+     let that = this;
+     window.addEventListener('message', function (e) {
+      var res = e.data;
+      if (res.val != null) {
+        that.pageStatus = res.val
+       }
+      })
     this.timeFn();
     this.timeVal = new Date()
       this.searchShow1 = this.searchShow;
@@ -76,7 +91,7 @@ export default {
     /** 返回上一页 */
     goPage() {
       if(this.htStatus == 1 ){
-        this.$router.push('/');
+        this.$router.push('/index');
       }else{
         this.$parent.handleHtweb()
       }
@@ -90,7 +105,48 @@ export default {
       }, 1000);
     },
     goHome() {
-      this.$router.push("/");
+      if (this.pageStatus != '') {
+        this.$parent.componentShow = "";
+        this.$parent.modelOthers = false;
+        this.$parent.htStatus = 1
+        this.$parent.handleMenus(0)
+        this.pageStatus = '';
+        this.$parent.popStatus = ''
+        this.$parent.menusArr.pop()
+      }else{
+        this.$router.push("/index");
+      }
+    },
+    goLogin(){
+      if (this.$parent.jiangsuMapShow == true) {
+        this.$confirm('确定退出登录？', '确认信息', {
+          distinguishCancelAndClose: true,
+          confirmButtonText: '退出',
+          cancelButtonText: '取消'
+        })
+          .then(() => {
+            this.$message({
+              type: 'info',
+              message: '返回登录'
+            });
+            this.$router.push('/')
+          })
+          .catch(action => {
+            this.$message({
+              type: 'info',
+              message: action === 'cancel'
+                ? '取消退出'
+                : '停留在当前页面'
+            })
+          });
+      }else{
+        this.$parent.jiangsuMapShow = true
+        this.$parent.qujiIconShow = false;
+        window.setTimeout(()=>{
+          this.$parent.shijiIconShow = true;
+        },1600)
+      }
+        
     },
     handle(){
       // window.parent.handledianwei();
@@ -155,4 +211,8 @@ $box-width: 100%;
     }
   }
 }
+// ::v-deep  .el-message-box{
+//   background: url('../../assets/borad-bg.png') no-repeat !important;
+//   background: 100% 100%;
+// }
 </style>

src/router/index.js

@@ -7,14 +7,21 @@ const routes = [
 
     {
         path: '/',
+        name: 'login',
+        meta: {
+            title: '登录'
+        },
+        component: () =>
+            import ('../views/login/login.vue'),
+    },
+    {
+        path: '/index',
         name: 'index',
         meta: {
             title: '首页'
         },
         component: () =>
-            // import ('../views/index.vue')
             import ('../views/land/index.vue'),
-            // import ('../views/land/index.vue'),
     },
 
     {
@@ -35,15 +42,6 @@ const routes = [
             component: () =>
                 import ('../views/land/index.vue'),
         }, 
-        // {
-        //     path: '/landChild',
-        //     name: 'landChild',
-        //     meta: {
-        //         title: '侵华日军南京大屠杀遇难同胞纪念馆'
-        //     },
-        //     component: () =>
-        //         import ('../views/land/children/index.vue'),
-        // },
         {
             path: '/landChildren',
             name: 'landChildren',

src/views/land/child/index.vue

@@ -11,7 +11,6 @@
           ref="iframe"
           v-show="htStatus == 1"
           :src="unityUrl"
-          allowfullscreen
         ></iframe>
       </transition>
       <transition name="my">
@@ -470,7 +469,6 @@
                 <div
                   class="list"
                   v-for="(item, index) in menusArr"
-                  :class="css_list[index]"
                   :key="index"
                   @click="handleMenus(index)"
                   :style="{
@@ -478,24 +476,30 @@
                       menusActive != index
                         ? 'url(' + menubg.url + ')'
                         : 'url(' + menubg.actUrl + ')',
+                        marginLeft:menusActive == index ? '10px': '0px'
                   }"
                 >
-                  <p>{{ item.text }}</p>
+                <div class="listText">
                   <img
                     :src="menusActive != index ? item.pic : item.actPic"
                     alt=""
-                    style="margin-right: 10px"
+                    style="width:26px;height:26px;"
                   />
+                  <p>{{ item.text }}</p>
                 </div>
                 </div>
               </div>
               <div
               class="menshow"
-              style="margin-left: 5px; cursor: pointer"
+              style="
+              position: absolute;
+              cursor: pointer;
+              left: 94%;
+              top: 47%;"
               @click="handleMenufalse()"
             >
               <img
-                src="@/assets/newimgs/WechatIMG2.png"
+                src="@/assets/newbanImg/jiantou1.png"
                 :style="{
                   transform:
                     jiantoufan == false ? 'rotate(180deg)' : 'rotate(0deg)',
@@ -504,6 +508,8 @@
               />
             </div>
             </div>
+            
+          </div>
         </transition>
         <transition name="homeleave">
           <div class="right" v-if="homeActive">
@@ -526,7 +532,7 @@
                   <div>
                     <img :src="item.path" alt="" />
                     <span
-                      style="color: #fff; margin-left: 10px; font-size: 14px"
+                      style="color: rgb(148,240,255); margin-left: 10px; font-size: 14px"
                       >{{ item.name }}</span
                     >
                   </div>
@@ -535,79 +541,17 @@
                   </div>
                 </div>
               </div>
+              <div class="toptitle">配电房电力参数信息</div>
               <div class="infos">
                 <div
                   class="list"
-                  :class="getBg[index]"
                   v-for="(item, index) in fuzaiArr"
                   :key="index"
                 >
-                  <div
-                    class="text"
-                    :style="{
-                      'margin-left': index % 2 == 0 ? '88px' : '100px',
-                    }"
-                  >
-                    <span
-                      v-if="index == 0"
-                      style="
-                        color: rgb(135, 237, 15);
-                        font-size: 18px;
-                        font-weight: 600;
-                        margin-right: 2px;
-                      "
-                      >{{ item.vlaue }}</span
-                    >
-                    <span
-                      v-if="index == 0"
-                      style="color: rgb(135, 237, 15); font-size: 13px"
-                      >{{ item.icon }}</span
-                    >
-                    <span
-                      v-if="index == 1"
-                      style="
-                        color: rgb(252, 83, 251);
-                        font-size: 18px;
-                        font-weight: 600;
-                        margin-right: 3px;
-                      "
-                      >{{ item.vlaue }}</span
-                    >
-                    <span
-                      v-if="index == 1"
-                      style="color: rgb(252, 83, 251); font-size: 13px"
-                      >{{ item.icon }}</span
-                    >
-                    <span
-                      v-if="index == 2"
-                      style="
-                        color: rgb(102, 254, 255);
-                        font-size: 18px;
-                        font-weight: 600;
-                        margin-right: 3px;
-                      "
-                      >{{ item.vlaue }}</span
-                    >
-                    <span
-                      v-if="index == 2"
-                      style="color: rgb(102, 254, 255); font-size: 13px"
-                      >{{ item.icon }}</span
-                    >
-                    <span
-                      v-if="index == 3"
-                      style="
-                        color: rgb(251, 157, 62);
-                        font-size: 18px;
-                        font-weight: 600;
-                        margin-right: 3px;
-                      "
-                      >{{ item.vlaue }}</span
-                    >
-                    <span
-                      v-if="index == 3"
-                      style="color: rgb(251, 157, 62); font-size: 13px"
-                      >{{ item.icon }}</span
-                    >
+                <img :src="item.icon" style="width:90px;height:64px"/>
+                <div class="nameArr">
+                  <div>{{item.name}}</div>
+                  <div style="font-size: 23px;font-weight: 600;">{{item.vlaue}}</div>
                 </div>
                 </div>
               </div>
@@ -631,7 +575,7 @@
                   <div>
                     <img :src="item.path" alt="" />
                     <span
-                      style="color: #fff; margin-left: 10px; font-size: 14px"
+                      style="color: rgb(148,240,255); margin-left: 10px; font-size: 14px"
                       >{{ item.name}}</span
                     >
                   </div>
@@ -640,6 +584,7 @@
                   </div>
                 </div>
               </div>
+              <div class="toptitle">配电房电力参数信息</div>
               <div class="infos">
                 <div
                   class="list"
@@ -647,7 +592,12 @@
                   v-for="(item, index) in fuzaiArr1"
                   :key="index"
                 >
-                  <div
+                <img :src="item.icon" style="width:90px;height:64px"/>
+                <div class="nameArr">
+                  <div>{{item.name}}</div>
+                  <div style="font-size: 23px;font-weight: 600;">{{item.vlaue}}</div>
+                </div>
+                  <!-- <div
                     class="text"
                     :style="{
                       'margin-left': index % 2 == 0 ? '78px' : '100px',
@@ -713,7 +663,7 @@
                       style="color: rgb(251, 157, 62); font-size: 13px"
                       >{{ item.icon }}</span
                     >
-                  </div>
+                  </div> -->
                 </div>
               </div>
             </div>
@@ -1388,7 +1338,7 @@
         </transition>
       </div>
     </div>
-    <div
+    <!-- <div
       class="btn"
       :style="{ 'justify-content': htStatus == 1 ? 'space-around' : 'center' }"
       style="align-items: center"
@@ -1434,8 +1384,8 @@
         title="保电"
         class="baodian"
       />
-      <!-- <img src="@/assets/htBtn/measure.png" alt="" srcset=""> -->
-    </div>
+       <img src="@/assets/htBtn/measure.png" alt="" srcset="">
+    </div> -->
     <div class="center" v-show="carChangeShow">
       <div class="close" @click="closeVideo">关闭</div>
       <Center :dataSource="false" style="width: 100%; height: 95%">
@@ -1463,7 +1413,7 @@
 
     <div class="homexian">
       <img
-        src="@/assets/newimgs/WechatIMG2.png"
+        src="@/assets/newbanImg/jiantou1.png"
         alt=""
         v-if="menuShow"
         @click="handleMenushow"
@@ -1521,6 +1471,10 @@
         ></component>
       </keep-alive>
      </div>
+      <transition name="mask">
+        <div class="maskBg" v-show="maskBgShow">
+        </div>
+      </transition>
   </div>
 </template>
   
@@ -1549,6 +1503,7 @@ export default {
   mixins: [drawMixin],
   data() {
     return {
+      maskBgShow:true,//遮罩消失
       popStatus:'',
       modelOthers: false,
       componentShow: "",
@@ -1672,56 +1627,56 @@ export default {
       ],
       menusActive: 0,
       menubg: {
-        url: require("@/assets/newimgs/moren.png"),
-        actUrl: require("@/assets/newimgs/xuanzhong.png"),
+        url: require("@/assets/newbanImg/default.png"),
+        actUrl: require("@/assets/newbanImg/action.png"),
       },
       menusArr: [
         {
-          pic: require("@/assets/newimgs/配电房-默认.png"),
-          actPic: require("@/assets/newimgs/配电房-选中.png"),
+          pic: require("@/assets/newbanImg/peidianfangmoren.png"),
+          actPic: require("@/assets/newbanImg/peidianfangxuanzhong.png"),
           text: "配电房信息",
         },
 
         {
-          pic: require("@/assets/newimgs/设备出线-默认.png"),
-          actPic: require("@/assets/newimgs/设备出线-选中.png"),
+          pic: require("@/assets/newbanImg/kaiguanxinximoren.png"),
+          actPic: require("@/assets/newbanImg/kaiguanxinxixuanzhong.png"),
           text: "开关信息",
         },
         {
-          pic: require("@/assets/newimgs/一次系统-默认.png"),
-          actPic: require("@/assets/newimgs/一次系统-选中.png"),
+          pic: require("@/assets/newbanImg/yicimoren.png"),
+          actPic: require("@/assets/newbanImg/yicixuanzhong.png"),
           text: "一次系统图",
         },
         {
-          pic: require("@/assets/newimgs/环境信息-默认.png"),
-          actPic: require("@/assets/newimgs/环境信息-选中.png"),
+          pic: require("@/assets/newbanImg/huanjingmoren.png"),
+          actPic: require("@/assets/newbanImg/huanjingxuanzhong.png"),
           text: "环境信息",
         },
         {
-          pic: require("@/assets/newimgs/运维档案-默认.png"),
-          actPic: require("@/assets/newimgs/运维档案-选中.png"),
+          pic: require("@/assets/newbanImg/yunweimoren.png"),
+          actPic: require("@/assets/newbanImg/yunweixuanzhong.png"),
           text: "运维档案",
         },
         {
-          pic: require("@/assets/newimgs/告警信息-默认.png"),
-          actPic: require("@/assets/newimgs/告警信息-选中.png"),
+          pic: require("@/assets/newbanImg/jinggaomoren.png"),
+          actPic: require("@/assets/newbanImg/jinggaoxuanzhong.png"),
           text: "告警信息",
         },
         {
-          pic: require("@/assets/newimgs/事件记录-默认.png"),
-          actPic: require("@/assets/newimgs/事件记录-选中.png"),
+          pic: require("@/assets/newbanImg/shijianmoren.png"),
+          actPic: require("@/assets/newbanImg/shijianxuanzhong.png"),
           text: "事件记录",
         },
         {
-          pic: require("@/assets/newimgs/检查通知单-默认.png"),
-          actPic: require("@/assets/newimgs/检查通知单-选中.png"),
+          pic: require("@/assets/newbanImg/jianchamoren.png"),
+          actPic: require("@/assets/newbanImg/jianchaxuanzhong.png"),
           text: "检查通知单",
         },
-        {
-          pic: require("@/assets/newimgs/VR-默认.png"),
-          actPic: require("@/assets/newimgs/VR-选中.png"),
-          text: "VR全景",
-        },
+        // {
+        //   pic: require("@/assets/newbanImg/VRmoren.png"),
+        //   actPic: require("@/assets/newbanImg/VRxuanzhong.png"),
+        //   text: "VR全景",
+        // },
       ],
       popInfoShow: false,
       popInfoShow1: false,
@@ -1884,30 +1839,6 @@ export default {
         },
       ],
       eniorArr1: [
-        //  {
-        //   path: require("@/assets/mapInfo/资源 37.png"),
-        //   name: "前门门禁",
-        //   nametwo: "侧门门禁",
-        //   value:require("@/assets/mapInfo/资源 37.png"),
-        // },
-        // {
-        //   path: require("@/assets/mapInfo/资源 36.png"),
-        //   name: "烟感1",
-        //   nametwo: "烟感2",
-        //   value: require("@/assets/mapInfo/资源 36.png"),
-        // },
-        //  {
-        //   path: require("@/assets/mapInfo/资源 35.png"),
-        //   name: "水浸",
-        //   nametwo: "温度（℃）",
-        //   value: '24.1',
-        // },
-        // {
-        //   path: '24.1&nbsp;&nbsp;&nbsp;&nbsp;',
-        //   name: "湿度(%RH)",
-        //   nametwo: "",
-        //   value: '',
-        // },
         {
           path: require("@/assets/mapInfo/资源 37.png"),
           name: "门禁1",
@@ -1967,92 +1898,51 @@ export default {
         {
           name: "总负荷",
           vlaue: "198",
-          icon: "",
+          icon: require("@/assets/newbanImg/zongfuhe.png"),
         },
         {
           name: "进线电压信息",
           vlaue: "5.84",
-          icon: "",
+          icon: require("@/assets/newbanImg/jinxiandianya.png"),
         },
         {
           name: "累计电量",
           vlaue: "183935",
-          icon: "",
+          icon: require("@/assets/newbanImg/leijidianliang.png"),
         },
         {
           name: "功率因数",
           vlaue: "0.98",
-          icon: "",
+          icon: require("@/assets/newbanImg/gonglvyinsu.png"),
         },
       ],
       fuzaiArr1: [
         {
           name: "总负荷",
           vlaue: "198",
-          icon: "",
+          icon: require("@/assets/newbanImg/zongfuhe.png"),
         },
         {
           name: "进线电压信息",
           vlaue: "5.84",
-          icon: "",
+          icon: require("@/assets/newbanImg/jinxiandianya.png"),
         },
         {
           name: "累计电量",
           vlaue: "183935",
-          icon: "",
+          icon: require("@/assets/newbanImg/leijidianliang.png"),
         },
         {
           name: "功率因数",
           vlaue: "0.98",
-          icon: "",
+          icon: require("@/assets/newbanImg/gonglvyinsu.png"),
         },
       ],
       threeUrl: "",
       htStatus: 1,
       perSon: "1",
       selectArr: ["新馆", "旧馆"],
-      alarmListData: [
-        // {
-        //   time: "2022-11-04 08:16:46",
-        //   bianwei: "侧门门禁2报警变位",
-        //   dizhi: "南京软件园科技发展有限公司（腾飞大厦中心站）",
-        //   zhan: "腾飞大厦中心站",
-        //   fsz: "1",
-        //   cemeng: "2",
-        // },
-        // {
-        //   time: "2022-11-04 08:16:46",
-        //   bianwei: "侧门门禁2报警变位",
-        //   dizhi: "南京软件园科技发展有限公司（腾飞大厦中心站）",
-        //   zhan: "腾飞大厦中心站",
-        //   fsz: "1",
-        //   cemeng: "2",
-        // },
-        // {
-        //   time: "2022-11-04 08:16:46",
-        //   bianwei: "侧门门禁2报警变位",
-        //   dizhi: "南京软件园科技发展有限公司（腾飞大厦中心站）",
-        //   zhan: "腾飞大厦中心站",
-        //   fsz: "1",
-        //   cemeng: "2",
-        // },
-        // {
-        //   time: "2022-11-04 08:16:46",
-        //   bianwei: "侧门门禁2报警变位",
-        //   dizhi: "南京软件园科技发展有限公司（腾飞大厦中心站）",
-        //   zhan: "腾飞大厦中心站",
-        //   fsz: "1",
-        //   cemeng: "2",
-        // },
-        // {
-        //   time: "2022-11-04 08:16:46",
-        //   bianwei: "侧门门禁2报警变位",
-        //   dizhi: "南京软件园科技发展有限公司（腾飞大厦中心站）",
-        //   zhan: "腾飞大厦中心站",
-        //   fsz: "1",
-        //   cemeng: "2",
-        // },
-      ],
+      alarmListData: [],
       classOption: {
         step: 0.5, // 数值越大速度滚动越快
         // limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
@@ -2116,12 +2006,12 @@ export default {
     unityChange: {
       handler(newV) {
         if (newV == 0) {
-          this.unityUrl = "/htWeb/unity.html?src=1";
+          // this.unityUrl = "/htWeb/unity.html?src=1";
           this.threeUrl =
             "http://221.226.19.85:10133/bdz_360_22_12_8/index.html";
           this.searchHandle("2");
         } else if (newV == 1) {
-          this.unityUrl = "/htWeb/unity.html?src=2";
+          // this.unityUrl = "/htWeb/unity.html?src=2";
           this.threeUrl =
             "http://221.226.19.85:10133/bdz_360_22_11_11/index.html";
           this.searchHandle("1");
@@ -2133,8 +2023,12 @@ export default {
     },
   },
   mounted() {
-    //切换模型
      let that = this;
+     //初始化遮罩消失
+    window.setTimeout(()=>{
+      that.maskBgShow = false
+    },2500)
+    //切换模型
      window.addEventListener('message', function (e) {
       var res = e.data;
       if (res.val != null) {
@@ -2142,10 +2036,30 @@ export default {
            that.modelOthers = true
            that.componentShow = 'modelPop'
           that.popStatus = 'XG'
+          that.unityChange = 0
+          that.handleSelect(0)
+          let VR =  {
+           pic: require("@/assets/newbanImg/VRmoren.png"),
+           actPic: require("@/assets/newbanImg/VRxuanzhong.png"),
+           text: "VR全景",
+         }
+          that.menusArr.push(VR)
         }else if (res.val == 'JG') {
           that.popStatus = 'JG'
            that.modelOthers = true
            that.componentShow = 'modelPop'
+           that.unityChange = 1
+           that.handleSelect(1)
+           let VR =  {
+           pic: require("@/assets/newbanImg/VRmoren.png"),
+           actPic: require("@/assets/newbanImg/VRxuanzhong.png"),
+           text: "VR全景",
+         }
+          that.menusArr.push(VR)
+        }else if (res.val == 'goThree') {
+           that.modelOthers = false
+           that.componentShow = ''
+          that.htStatus = 2;
         }
        }
       })
@@ -2723,8 +2637,12 @@ export default {
     },
     handleMenus(index) {
       this.menusActive = index;
-      if (index == 8) {
+      if (index == 8 && this.popStatus !="") {
         this.handleUnity();
+        let val = 'goThree'
+          window.parent.postMessage({
+                 val
+          }, '*'); // * 通配符 匹配所有地址; content 表示传递过去嵌套iframe页面的数据
       }
     },
     //弹窗
@@ -2797,8 +2715,6 @@ export default {
       this.tableShow = true;
     },
     hanldetoukui() {
-       this.componentShow = ''
-       this.modelOthers = false
       // this.unityUrl = "/htWeb/unity.html?src=3";
       // this.blueQiuShow = true
       // this.redQiuShow = false
@@ -2859,6 +2775,8 @@ export default {
     },
     handleUnity() {
       this.mapShow = false;
+      this.componentShow = '';
+      this.modelOthers = false
       this.$refs.iframe.contentWindow.unity.g3d.flyTo(
         this.$refs.iframe.contentWindow.unity.models[0],
         {
@@ -3626,6 +3544,46 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
+  .maskBg{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    background: black;
+    background-size: 100% 100%;
+    opacity: 0;
+    animation: mymove 3s 1;
+    /* Safari and Chrome */
+    -webkit-animation: mymove 3s 1;
+  }
+      @keyframes mymove {
+          0% {
+          opacity: 1;
+            }
+           
+          50% {
+            opacity: 0.5;
+          }
+         
+        100% {
+        opacity: 0;
+          }
+      }
+      @-webkit-keyframes mymove{ /* Safari and Chrome */
+          0% {
+          opacity: 1;
+          }
+         
+          50% {
+            opacity: 0.5;
+          }
+          
+          100% {
+          opacity: 0;
+          }
+        }
   .bg {
     width: 100%;
     height: 100%;
@@ -3662,7 +3620,7 @@ export default {
 }
 .main {
   width: 100%;
-  height: 90%;
+  height: 100%;
   display: flex;
   justify-content: space-between;
   box-sizing: border-box;
@@ -3671,30 +3629,32 @@ export default {
   z-index: 9;
   pointer-events: none;
   .left {
-    width: 351px;
-    height: 100%;
+    width: 296px;
+    height: 1080px;
     pointer-events: auto;
-    margin-top: 10px;
     box-sizing: border-box;
     display: flex;
     align-items: center;
     z-index: 99;
     .leftmenus {
-      width: 301px;
+      width: 100%;
       height: 100%;
-      background: url("../../../assets/newimgs/zuoxian.png") no-repeat;
+      background: url("../../../assets/newbanImg/leftbg.png") no-repeat;
       background-size: 100% 100%;
       display: flex;
       align-items: center;
+      position: relative;
       .menus {
         display: flex;
         flex-flow: column nowrap;
         justify-content: space-between;
         width: 100%;
-        height: 580px;
+        height: 66%;
+        top: 13%;
+        position: absolute;
         .list {
-          width: 184px;
-          height: 54px;
+          width: 292px;
+          height: 103px;
           background: url("../../../assets/newimgs/moren.png") no-repeat;
           display: flex;
           flex-flow: row nowrap;
@@ -3703,8 +3663,8 @@ export default {
           cursor: pointer;
           p {
             color: #ffffff;
-            margin-left: 20px;
-            font-size: 15px;
+            margin-left: 10px;
+            font-size: 16px;
           }
           &.css1 {
             margin-left: 0px;
@@ -3733,6 +3693,14 @@ export default {
           &.css9 {
             margin-left: 0px;
           }
+          .listText{
+            height: 43px;
+            margin-top: 15px;
+            width: 45%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between
+          }
         }
       }
     }
@@ -3741,23 +3709,27 @@ export default {
     height: 100%;
     pointer-events: auto;
     display: flex;
-    padding-top: 110px;
-    padding-right: 10px;
+    // padding-top: 110px;
+    padding-right: 15px;
     box-sizing: border-box;
     z-index: 99;
     .infothings {
-      width: 427px;
-      height: 594px;
-      background: url("../../../assets/newimgs/peidianfangKuang.png") no-repeat;
+      width: 434px;
+      height: 688px;
+      background: url("../../../assets/newbanImg/rightbg.png") no-repeat;
       background-size: 100% 100%;
+      margin-top: 35%;
+      padding: 15px 7px;
+    box-sizing: border-box;
+        display: flex;
+    flex-wrap: wrap;
       .toptitle {
-        width: 100%;
-        height: 40px;
-        background: url("../../../assets/newimgs/zhongyaoshebeichuxian.png")
-          no-repeat;
+        width: 417px;
+        height: 38px;
+        background: url("../../../assets/newbanImg/rightTitle.png")no-repeat;
         background-size: 100% 100%;
         color: #ffffff;
-        text-indent: 40px;
+        text-indent: 50px;
         line-height: 40px;
       }
       .info {
@@ -3792,35 +3764,21 @@ export default {
         display: flex;
         flex-flow: row wrap;
         justify-content: space-between;
-        margin-top: 10px;
         .list {
           width: 190px;
           height: 105px;
-          margin-bottom: 10px;
-          .text {
-            height: 100%;
-            width: 70%;
-            margin-left: 90px;
-            line-height: 145px;
-          }
-          &.list1 {
-            background: url("../../../assets/mapInfo/zongfuhe.png") no-repeat;
-            background-size: 100% 100%;
-          }
-          &.list2 {
-            background: url("../../../assets/mapInfo/jinxiandianya.png")
-              no-repeat;
-            background-size: 100% 100%;
-          }
-          &.list3 {
-            background: url("../../../assets/mapInfo/leijidianliang.png")
-              no-repeat;
-            background-size: 100% 100%;
-          }
-          &.list4 {
-            background: url("../../../assets/mapInfo/gonglvyiinshu.png")
-              no-repeat;
-            background-size: 100% 100%;
+          display: flex;
+          flex-wrap: nowrap;
+          align-items: center;
+          justify-content: space-between;
+          .nameArr{
+            width: 51%;
+            height: 75%;
+            color: #fff;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: flex-start
           }
         }
       }
@@ -3828,13 +3786,15 @@ export default {
     .envior {
       width: 427px;
       height: 241px;
-      background: url("../../../assets/newimgs/huanjingxinxiKuang.png")
+      background: url("../../../assets/newbanImg/rightbg.png")
         no-repeat;
       background-size: 100% 100%;
+      margin-top: 35%;
+      padding: 10px 5px;
       .toptitle {
         width: 100%;
         height: 40px;
-        background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
+        background: url("../../../assets/newbanImg/rightTitle.png") no-repeat;
         background-size: 100% 100%;
         color: #ffffff;
         text-indent: 40px;
@@ -3890,13 +3850,15 @@ export default {
     .envior1 {
       width: 427px;
       height: 241px;
-      background: url("../../../assets/newimgs/huanjingxinxiKuang.png")
+      background: url("../../../assets/newbanImg/rightbg.png")
         no-repeat;
       background-size: 100% 100%;
+      margin-top: 35%;
+      padding: 10px 5px;
       .toptitle {
         width: 100%;
         height: 40px;
-        background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
+        background: url("../../../assets/newbanImg/rightTitle.png") no-repeat;
         background-size: 100% 100%;
         color: #ffffff;
         text-indent: 40px;
@@ -3931,17 +3893,18 @@ export default {
     .maptu {
       width: 427px;
       height: 260px;
-      background: url("../../../assets/newimgs/huanjingxinxiKuang.png")
+      background: url("../../../assets/newbanImg/rightbg.png")
         no-repeat;
       background-size: 100% 100%;
-
+      margin-top: 35%;
+      padding: 10px 5px;
       .toptitle {
         width: 100%;
         height: 40px;
-        background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
+        background: url("../../../assets/newbanImg/rightTitle.png") no-repeat;
         background-size: 100% 100%;
         color: #ffffff;
-        // text-indent: 40px;
+        text-indent: 20px;
         line-height: 40px;
         display: flex;
         justify-content: space-evenly;
@@ -3995,24 +3958,25 @@ export default {
     .chuplc {
       width: 530px;
       height: 666px;
-      background: url("../../../assets/newimgs/zhongyaoshebeiKuang.png")
+      background: url("../../../assets/newbanImg/rightbg.png")
         no-repeat;
       background-size: 100% 100%;
+      margin-top: 35%;
+      padding: 10px 5px;
       .toptitle {
         width: 100%;
         height: 40px;
-        background: url("../../../assets/newimgs/zhongyaoshebeichuxian.png")
+        background: url("../../../assets/newbanImg/rightTitle.png")
           no-repeat;
         background-size: 100% 100%;
         color: #ffffff;
-        text-indent: 40px;
+        text-indent: 50px;
         line-height: 40px;
-        margin-left: 6px;
       }
       .user_skills {
         width: 100%;
         height: calc(100% - 80px);
-        padding: 20px;
+        padding: 15px;
         margin-top: 10px;
         box-sizing: border-box;
         display: flex;
@@ -4034,12 +3998,14 @@ export default {
     .warnnews {
       width: 427px;
       height: 405px;
-      background: url("../../../assets/newimgs/waiKuang.png") no-repeat;
+      background: url("../../../assets/newbanImg/rightbg.png") no-repeat;
       background-size: 100% 100%;
+      margin-top: 35%;
+      padding: 10px 5px;
       .toptitle {
         width: 100%;
         height: 40px;
-        background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
+        background: url("../../../assets/newbanImg/rightTitle.png") no-repeat;
         background-size: 100% 100%;
         color: #ffffff;
         text-indent: 40px;
@@ -4056,12 +4022,14 @@ export default {
     .record {
       width: 427px;
       height: 701px;
-      background: url("../../../assets/newimgs/shishiKuang.png") no-repeat;
+      background: url("../../../assets/newbanImg/rightbg.png") no-repeat;
       background-size: 100% 100%;
+      margin-top: 35%;
+      padding: 10px 5px;
       .toptitle {
         width: 100%;
         height: 40px;
-        background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
+        background: url("../../../assets/newbanImg/rightTitle.png") no-repeat;
         background-size: 100% 100%;
         color: #ffffff;
         text-indent: 40px;
@@ -4180,12 +4148,14 @@ export default {
     .notice {
       width: 427px;
       height: 721px;
-      background: url("../../../assets/newimgs/shishiKuang.png") no-repeat;
+      background: url("../../../assets/newbanImg/rightbg.png") no-repeat;
       background-size: 100% 100%;
+      margin-top: 35%;
+      padding: 10px 5px;
       .toptitle {
         width: 100%;
         height: 40px;
-        background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
+        background: url("../../../assets/newbanImg/rightTitle.png") no-repeat;
         background-size: 100% 100%;
         color: #ffffff;
         text-indent: 40px;
@@ -4313,12 +4283,14 @@ export default {
     .yunwei {
       width: 427px;
       height: 491px;
-      background: url("../../../assets/newimgs/shishiKuang.png") no-repeat;
+      background: url("../../../assets/newbanImg/rightbg.png") no-repeat;
       background-size: 100% 100%;
+      margin-top: 35%;
+      padding: 10px 5px;
       .toptitle {
         width: 100%;
         height: 40px;
-        background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
+        background: url("../../../assets/newbanImg/rightTitle.png") no-repeat;
         background-size: 100% 100%;
         color: #ffffff;
         text-indent: 40px;

src/views/login/login.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="loginMain">
+    <div class="loginTop">
+      <div class="loginTitle">重要用户配电站房数字化管理系统登录</div>
+    </div>
+    <div class="loginContent">
+      <div class="loginIcon">
+        <img
+          src="@/assets/newbanImg/beijingyuan.png"
+          style="width: 100%; height: 100%"
+        />
+      </div>
+      <div class="loginForm">
+        <div class="welcome">欢迎登录</div>
+        <el-form
+          :model="loginForm"
+          :rules="rules"
+          status-icon
+          label-position="left"
+          label-width="70px"
+          class="form"
+          ref="loginForm"
+        >
+          <el-form-item label="用户名" prop="userName">
+            <el-input type="text" v-model="loginForm.userName"></el-input>
+          </el-form-item>
+
+          <el-form-item label="密码" prop="password">
+            <el-input type="password" v-model="loginForm.password"></el-input>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" @click="submitForm()">登录</el-button>
+            <el-button @click="empty()">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "login",
+  data() {
+    return {
+      loginForm: {
+        userName: "admin",
+        password: "123456",
+      },
+      rules: {
+        userName: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          { min: 1, max: 8, message: "长度请在1到8个字符", trigger: "blur" },
+        ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { min: 1, max: 8, message: "长度请在1到8个字符", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+      //登录事件
+    submitForm() {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          this.$message.success("登录成功");
+          this.$router.push("/index");
+        } else {
+          this.$message.error("请输入正确的账号和密码");
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //清空
+    empty(){
+            this.$message.success("用户名已重置");
+            this.loginForm.userName = ''
+            this.loginForm.password = ''
+      }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.loginMain {
+  width: 1920px;
+  height: 1080px;
+  background: url("../../assets/newbanImg/mapBeijing.png") no-repeat;
+  background-size: 100% 100%;
+  .loginTop {
+    width: 100%;
+    height: 8%;
+    display: flex;
+    align-items: center;
+    .loginTitle {
+      color: #fff;
+      font-size: 45px;
+    }
+  }
+  .loginContent {
+    width: 100%;
+    height: calc(100% - 8%);
+    position: relative;
+    .loginIcon {
+      width: 1091px;
+      height: 934px;
+      position: absolute;
+    //   top: 9%;
+      left: 22%;
+      -webkit-animation: scaleout 1.5s infinite ease-in-out;
+      animation: scaleout 1.5s infinite ease-in-out;
+    }
+    @-webkit-keyframes scaleout {
+      0% {
+        -webkit-transform: scale(1);
+      }
+
+      100% {
+        -webkit-transform: scale(1.02);
+        opacity: 0;
+      }
+    }
+    .loginForm {
+      position: absolute;
+      width: 25%;
+      height: 35%;
+      left: 39%;
+      top: 20%;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      padding: 7px;
+      background: url("../../assets/borad-bg.png") no-repeat;
+      background-size: 100% 100%;
+      .welcome {
+        color: #fff;
+        font-size: 20px;
+        height: 8%;
+      }
+      .form {
+        width: 100%;
+        height: calc(100% - 8%);
+        box-sizing: border-box;
+        padding: 10px;
+        padding-top: 40px;
+        .el-form-item {
+          margin-bottom: 50px;
+        }
+        ::v-deep .el-form-item__content {
+          margin-left: 0 !important;
+          line-height: 40px;
+          position: relative;
+          font-size: 14px;
+          display: flex;
+          flex-wrap: nowrap;
+          justify-content: space-evenly;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/pop/model.vue

@@ -35,7 +35,7 @@ mounted(){
         this.text = '纪念馆-新馆'
     }else{
         this.unityUrl = "/htWeb/unity.html?src=2";
-        this.text = '纪念馆-久馆'
+        this.text = '纪念馆-旧馆'
     }
 },
 methods:{