首页优化

itdmWeb/src/views/user/firstIndex.vue

@@ -1,60 +1,99 @@
 <template>
-    <div class="center">
-        <div class="header"></div>
-        <div class="box a1" @click="iTDM"></div>
-        <!-- <div class="box">2</div>
-        <div class="box">3</div>
-        <div class="box">4</div>
-        <div class="box">5</div>
-        <div class="box">6</div> -->
+    <div class="chooseSystem-container" ref="systemContainer">
+      <div class="header">
+        <!-- <img src="../../assets/tg.png" alt="" style="width: auto;height: 100%;"> -->
+      </div>
+      <img src="../../assets/content.png" alt="" ref="systemContent">
+      <div class="common-system system-iTDM" ref="systemiTDM" @click="chooseSystem('/dashboard/analysis')"></div>
     </div>
 </template>
-
-<script>
-export default {
-    data() {
-        return {
-            
-        }
+  
+  <script>
+  export default {
+    name: '',
+    data () {
+      return {
+        timer: null
+      }
+    },
+    created () {
+    },
+    mounted () {
+      // 设置定时器--因为初始执行方法时img没有加载完，所以获取不到高度；定时一段时间等img加载之后再执行
+      this.timer = setTimeout(() => {
+        this.setSystemStyle()
+      }, 100)
+      // this.$nextTick(() => {
+      // })
+      window.addEventListener('resize', this.setSystemStyle)
+    },
+    beforeDestroy() {
+      // 清除定时器
+      if(this.timer){
+        clearInterval(this.timer);
+        this.timer = null;
+      }
     },
     methods: {
-        iTDM(){
-            console.log(11111)
-            this.$router.push({path: '/dashboard/analysis'})
-        }
+      setSystemStyle(){
+        // console.log(this.$refs)
+        // 获取图片宽高和top以及left
+        var systemWidth = this.$refs.systemContent.offsetWidth
+        var systemHeight = this.$refs.systemContent.offsetHeight
+        var systemTop = this.$refs.systemContent.offsetTop
+        var systemLeft = this.$refs.systemContent.offsetLeft
+        // console.log(systemWidth, systemHeight, systemTop, systemLeft)
+        // 设置iTDM动态宽高和top以及left
+        this.$refs.systemiTDM.style.width = (systemWidth * 0.234) + 'px'
+        this.$refs.systemiTDM.style.height = (systemHeight * 0.107) + 'px'
+        this.$refs.systemiTDM.style.top = (systemTop - systemHeight/2 + systemHeight*0.18) + 'px'
+        this.$refs.systemiTDM.style.left = (systemLeft - systemWidth/2 + systemWidth*0.03) + 'px'
+      },
+      chooseSystem(url){
+        this.$router.push({path: url})
+        // this.$router.push({path: item.url})
+      },
     }
-}
-</script>
-
-<style lang="less" scoped>
-.center{
-    height: 100%;
+  }
+  </script>
+  
+  <style lang="scss">
+  .chooseSystem-container{
     width: 100%;
-    /* display: flex; */
-    background: url('../../assets/firstBg2.png') no-repeat center center;
-    background-size: cover;
-    overflow:hidden
-}
-.header{
-    height: 68px;
-    width: 252px;
-    // border: 1px solid rgb(0, 0, 0);
-    background: url('../../assets/tg.png') no-repeat center center;
+    height: 100%;
+    background: url('../../assets/bg.png') no-repeat center center;
     background-size: cover;
-    margin-top: 1%;
-    margin-left: 82%;
-    /* position: absolute;
-    left: 70%;
-    top: 10%; */
-}
-.box{ 
-    height: 20%;
-    width: 40%;
-    // border: 1px solid rgb(0, 0, 0);
-}
-.a1{
-    margin-left: 14%;
-    margin-top: 4.9%;
-    cursor: pointer;
-}
-</style>
+    position: relative;
+    .header{
+      width: 100%;
+      height: 68px;
+      position: absolute;
+      right: 0;
+      top: 20px;
+      // padding-right: 20px;
+      // background: url('../../assets/title.png') no-repeat right center;
+      background-size: contain;
+      background: url('../../assets/tg.png') no-repeat right center;
+    }
+    img{
+      width: 80%;
+      height: auto;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .common-system{
+      cursor: pointer;
+      position: absolute;
+    }
+    .system-iTDM{
+      width: 0;
+      height: 0;
+      // background: red;
+      top: 0;
+      left: 0;
+    }
+  }
+  </style>
+