fix: m
							parent
							
								
									49557020f3
								
							
						
					
					
						commit
						e638356856
					
				| 
						 | 
				
			
			@ -5,7 +5,7 @@ body,
 | 
			
		|||
    padding: 0;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    font-size: 14px;
 | 
			
		||||
    font-size: 16px;
 | 
			
		||||
    overflow: hidden !important;
 | 
			
		||||
    font-family: Microsoft YaHei, Hiragino Sans GB;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -20,7 +20,7 @@ export default {
 | 
			
		|||
    this.getRealTimeUesdView()
 | 
			
		||||
    this.timer = setInterval(() => {
 | 
			
		||||
      this.getRealTimeData()
 | 
			
		||||
    }, 1000)
 | 
			
		||||
    }, 10000)
 | 
			
		||||
  },
 | 
			
		||||
  unmounted() {
 | 
			
		||||
    clearInterval(this.timer)
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -31,10 +31,13 @@ export default {
 | 
			
		|||
      scale: null
 | 
			
		||||
    })
 | 
			
		||||
    const style = computed(() => {
 | 
			
		||||
      // 标品: 始终保持1920*1080的宽高比
 | 
			
		||||
      // 改动后: 始终保持占满屏幕, 最宽1920
 | 
			
		||||
      const innerWidth = window.innerWidth > 1920 ? 1920 : window.innerWidth
 | 
			
		||||
      return {
 | 
			
		||||
        width: `${props.width}px`,
 | 
			
		||||
        height: `${props.height}px`,
 | 
			
		||||
        transform: `scale(${state.scale})`
 | 
			
		||||
        transform: `scale(${innerWidth / 1920},${state.scale})`
 | 
			
		||||
      }
 | 
			
		||||
    })
 | 
			
		||||
    function getScale() {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -48,10 +48,11 @@ export default {
 | 
			
		|||
</script>
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.scroll-table {
 | 
			
		||||
  height: 100%;
 | 
			
		||||
  height: calc(100% - 20px);
 | 
			
		||||
  color: #fff;
 | 
			
		||||
  font-size: 14px;
 | 
			
		||||
  padding: 0 10px;
 | 
			
		||||
  margin: 10px 0 10 0;
 | 
			
		||||
  padding-left: 0px;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  list-style: none;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -53,17 +53,16 @@
 | 
			
		|||
                  中科院高性能数值模拟实验平台是低碳智能燃煤发电与超净排放全国重点实验室的核心实验平台之-,以设计标准化、部署模块化,管理可视化,运维智能化为依托,打造满足中国机房设计标准、美国机房设计标准和Uptime
 | 
			
		||||
                  Institue的创新性平台,致力于拓展科研手段、深化生产服务,为火力发电、新能源等领域的关键技术、核心装备、系统集成等相关科技研发提供有力支撑。
 | 
			
		||||
                </div>
 | 
			
		||||
                <br />
 | 
			
		||||
                <div>平台建筑面积200余平方米,硬件设施智能完善、软件系统高效便捷,主要开展火力发电固体燃料热解与燃烧、气体燃料燃烧、污染物生成与脱除、物质流能量流、全过程控制优化的数值模拟,以及综合能源系统仿真研究等八大研究方向。</div>
 | 
			
		||||
              </div>
 | 
			
		||||
              <el-row :gutter="32">
 | 
			
		||||
              <el-row>
 | 
			
		||||
                <el-col :span="6" v-for="(item, index) in introItems" :key="index">
 | 
			
		||||
                  <div class="intro-item text-right m-r" :style="{ 'background-image': `url(${item.img})` }">
 | 
			
		||||
                    <div>
 | 
			
		||||
                  <div class="intro-item m-r" :style="{ 'background-image': `url(${item.img})` }">
 | 
			
		||||
                    <div class="p-l-lg">
 | 
			
		||||
                      <span class="intro-item-value" :style="{ color: introColorMap[index] }">{{ item.value }}</span>
 | 
			
		||||
                      <span>{{ item.unit }}</span>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <div>{{ item.text }}</div>
 | 
			
		||||
                    <div class="p-l-lg">{{ item.text }}</div>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </el-col>
 | 
			
		||||
              </el-row>
 | 
			
		||||
| 
						 | 
				
			
			@ -173,7 +172,7 @@ export default {
 | 
			
		|||
        },
 | 
			
		||||
        {
 | 
			
		||||
          value: 0,
 | 
			
		||||
          unit: '小 时',
 | 
			
		||||
          unit: '小时',
 | 
			
		||||
          text: '使用总时长',
 | 
			
		||||
          img: subIcon4
 | 
			
		||||
        }
 | 
			
		||||
| 
						 | 
				
			
			@ -216,7 +215,7 @@ export default {
 | 
			
		|||
    const getPlateformSumList = async () => {
 | 
			
		||||
      const res = await getPlateformSum()
 | 
			
		||||
 | 
			
		||||
      res.data.map((item) => {
 | 
			
		||||
      res.data.map(item => {
 | 
			
		||||
        if (item.keyName === 'userNum') {
 | 
			
		||||
          state.introItems[0].value = item.numValue
 | 
			
		||||
        }
 | 
			
		||||
| 
						 | 
				
			
			@ -254,7 +253,7 @@ export default {
 | 
			
		|||
  width: 100%;
 | 
			
		||||
  height: 100%;
 | 
			
		||||
  background: url('./images/bg.png') no-repeat;
 | 
			
		||||
  padding: 90px 20px 20px 20px;
 | 
			
		||||
  padding: 73px 20px 0 20px;
 | 
			
		||||
  box-sizing: border-box;
 | 
			
		||||
  color: #fff;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -271,37 +270,37 @@ export default {
 | 
			
		|||
  height: 100%;
 | 
			
		||||
}
 | 
			
		||||
.mini-card {
 | 
			
		||||
  height: 280px !important;
 | 
			
		||||
  height: 285px !important;
 | 
			
		||||
}
 | 
			
		||||
.card-border1 {
 | 
			
		||||
  background: url('./images/item-border1.png');
 | 
			
		||||
  background-size: 100% 85%;
 | 
			
		||||
  background-repeat: no-repeat;
 | 
			
		||||
  background-position-y: 43px;
 | 
			
		||||
  background-position-y: 40px;
 | 
			
		||||
}
 | 
			
		||||
.card-border2 {
 | 
			
		||||
  background: url('./images/item-border2.png');
 | 
			
		||||
  background-size: 100% 85%;
 | 
			
		||||
  background-size: 100% 89%;
 | 
			
		||||
  background-repeat: no-repeat;
 | 
			
		||||
  background-position-y: 43px;
 | 
			
		||||
  background-position-y: 40px;
 | 
			
		||||
}
 | 
			
		||||
.card-border3 {
 | 
			
		||||
  background: url('./images/item-border3.png');
 | 
			
		||||
  background-size: 100% 85%;
 | 
			
		||||
  background-repeat: no-repeat;
 | 
			
		||||
  background-position-y: 43px;
 | 
			
		||||
  background-position-y: 40px;
 | 
			
		||||
}
 | 
			
		||||
.card-border4 {
 | 
			
		||||
  background: url('./images/item-border4.png');
 | 
			
		||||
  background-size: 100% 92%;
 | 
			
		||||
  background-size: 100% 94%;
 | 
			
		||||
  background-repeat: no-repeat;
 | 
			
		||||
  background-position-y: 43px;
 | 
			
		||||
  background-position-y: 40px;
 | 
			
		||||
}
 | 
			
		||||
.card-border5 {
 | 
			
		||||
  background: url('./images/item-border5.png');
 | 
			
		||||
  background-size: 100% 85%;
 | 
			
		||||
  background-size: 100% 86%;
 | 
			
		||||
  background-repeat: no-repeat;
 | 
			
		||||
  background-position-y: 43px;
 | 
			
		||||
  background-position-y: 40px;
 | 
			
		||||
}
 | 
			
		||||
.card-title-border1 {
 | 
			
		||||
  background: url('./images/item-header1.png');
 | 
			
		||||
| 
						 | 
				
			
			@ -310,14 +309,18 @@ export default {
 | 
			
		|||
  background: url('./images/item-header1.png');
 | 
			
		||||
  background-position-x: -33px !important;
 | 
			
		||||
}
 | 
			
		||||
.p-l-lg {
 | 
			
		||||
  padding-left: 55px;
 | 
			
		||||
}
 | 
			
		||||
.card {
 | 
			
		||||
  height: 350px;
 | 
			
		||||
  height: 385px;
 | 
			
		||||
  padding: 15px;
 | 
			
		||||
  padding-top: 0;
 | 
			
		||||
  padding-bottom: 0;
 | 
			
		||||
  box-sizing: border-box;
 | 
			
		||||
 | 
			
		||||
  &:not(:last-child) {
 | 
			
		||||
    margin-bottom: 20px;
 | 
			
		||||
    margin-bottom: 13px;
 | 
			
		||||
  }
 | 
			
		||||
  .card-title {
 | 
			
		||||
    font-size: 18px;
 | 
			
		||||
| 
						 | 
				
			
			@ -334,8 +337,9 @@ export default {
 | 
			
		|||
  }
 | 
			
		||||
}
 | 
			
		||||
.intro-card {
 | 
			
		||||
  height: 650px;
 | 
			
		||||
  height: 680px;
 | 
			
		||||
  .intro-img {
 | 
			
		||||
    display: block;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    height: 280px;
 | 
			
		||||
    border-radius: 10px;
 | 
			
		||||
| 
						 | 
				
			
			@ -350,18 +354,19 @@ export default {
 | 
			
		|||
    width: 100%;
 | 
			
		||||
    height: 120px;
 | 
			
		||||
    background-position: center;
 | 
			
		||||
    background-position-x: -10px;
 | 
			
		||||
    background-repeat: no-repeat;
 | 
			
		||||
    background-size: contain;
 | 
			
		||||
    padding-top: 15px;
 | 
			
		||||
    & > div {
 | 
			
		||||
      padding-right: 20%;
 | 
			
		||||
    }
 | 
			
		||||
    .intro-item-value {
 | 
			
		||||
      margin-right: 10px;
 | 
			
		||||
      font-size: 32px;
 | 
			
		||||
      -webkit-text-stroke: 1px #fff;
 | 
			
		||||
      text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
 | 
			
		||||
      margin-right: 5px;
 | 
			
		||||
      font-size: 36px;
 | 
			
		||||
      font-weight: bold;
 | 
			
		||||
      text-shadow: 0px 0px 1px #fff;
 | 
			
		||||
      text-stroke: 1px #ffffff;
 | 
			
		||||
      line-height: 38px;
 | 
			
		||||
      text-transform: none;
 | 
			
		||||
      -webkit-text-stroke: 1px #fff;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue