首页自适应调整

cpp-ui/src/views/largeScreen/components/center-bottom.vue

@@ -1,22 +1,26 @@
 <template>
   <div>
     <div class="flex position-a forecast-line-btu">
-      <div :class="day === 'day'?'btu-checked':'btu-no-checked'"  class="forecastLine btu-checked-style flex items-center justify-center" id="day"
+      <div :class="day === 'day'?'btu-checked':'btu-no-checked'"
+           class="forecastLine btu-checked-style flex items-center justify-center" id="day"
            @click="changeForecastLine('day')">当日
       </div>
-      <div :class="day === 'tenDay'?'btu-checked':'btu-no-checked'" class="forecastLine btu-checked-style flex items-center justify-center" id="tenDay"
+      <div :class="day === 'tenDay'?'btu-checked':'btu-no-checked'"
+           class="forecastLine btu-checked-style flex items-center justify-center" id="tenDay"
            @click="changeForecastLine('tenDay')">十日
       </div>
-      <div :class="type === 'wind'?'btu-checked':'btu-no-checked'"  class="forecastLineType btu-checked-style flex items-center justify-center" id="wind"
+      <div :class="type === 'wind'?'btu-checked':'btu-no-checked'"
+           class="forecastLineType btu-checked-style flex items-center justify-center" id="wind"
            @click="changeForecastLineType('wind')">风电
       </div>
-      <div :class="type === 'photovoltaic'?'btu-checked':'btu-no-checked'"  class="forecastLineType btu-checked-style flex items-center justify-center"
+      <div :class="type === 'photovoltaic'?'btu-checked':'btu-no-checked'"
+           class="forecastLineType btu-checked-style flex items-center justify-center"
            id="photovoltaic" @click="changeForecastLineType('photovoltaic')">光伏
       </div>
     </div>
 
     <div class="position-a echartsFullIcon" @click="openFull">
-      <img src="../../../assets/images/dashboard/full.png" style="width: 1.5vw" />
+      <img src="../../../assets/images/dashboard/full.png" style="width: 1.5vw"/>
     </div>
     <div id="lineChart"/>
     <!-- 全屏弹框 -->
@@ -37,6 +41,7 @@
 
 <script>
 import {lineOption} from '../echarts-data'
+
 export default {
   data() {
     return {
@@ -45,8 +50,8 @@ export default {
       lineChart: null,
       fullChart: null,
       chartData: {},
-      day:'day',
-      type:'wind'
+      day: 'day',
+      type: 'wind'
     }
   },
   props: {
@@ -74,7 +79,7 @@ export default {
     }
   },
   beforeDestroy() {
-    if (this.lineChart !==null) {
+    if (this.lineChart !== null) {
       this.lineChart.dispose();
       this.lineChart = null
       const _this = this
@@ -88,20 +93,20 @@ export default {
   },
   methods: {
     initChart() {
-      if(sessionStorage.getItem('screen-forecast-day')){
+      if (sessionStorage.getItem('screen-forecast-day')) {
         this.day = sessionStorage.getItem('screen-forecast-day')
-      }else{
+      } else {
         this.day = 'day'
       }
-      if(sessionStorage.getItem('screen-forecast-type')){
+      if (sessionStorage.getItem('screen-forecast-type')) {
         this.type = sessionStorage.getItem('screen-forecast-type')
-      }else{
+      } else {
         this.type = 'wind'
       }
       this.lineChart = this.$echarts.init(document.getElementById('lineChart'));
       this.setOptions(this.chartData)
     },
-    openFull(){
+    openFull() {
       const _this = this
       _this.dialogVisible = true// 打开弹窗
       _this.$nextTick(() => {
@@ -111,7 +116,7 @@ export default {
         }
       })
     },
-    setOptions({realList, ableList,theoryList,dqList,cdqList,timeList} = {}) {
+    setOptions({realList, ableList, theoryList, dqList, cdqList, timeList} = {}) {
       const _this = this
       let option = JSON.parse(JSON.stringify(lineOption))
       option.series[0].data = realList
@@ -123,9 +128,15 @@ export default {
       this.lineChart.setOption(option, true)
       window.addEventListener("resize", this.chartsResize);
     },
-    setFullOptions({realList, ableList,theoryList,dqList,cdqList,timeList} = {}) {
+    setFullOptions({realList, ableList, theoryList, dqList, cdqList, timeList} = {}) {
       this.fullChart = this.$echarts.init(document.getElementById('forecastFullChart'));
       let option = JSON.parse(JSON.stringify(lineOption))
+      option.grid = {
+        top: '5%',
+        left: '3%',
+        right: '3%',
+        bottom: '5%',
+      }
       option.series[0].data = realList
       option.series[1].data = ableList
       option.series[2].data = theoryList
@@ -139,13 +150,13 @@ export default {
      * */
     changeForecastLine(id) {
       const activeItem = document.querySelector('.btu-checked.forecastLine')
-      sessionStorage.setItem('screen-forecast-day',id)
+      sessionStorage.setItem('screen-forecast-day', id)
       this.checkedClass(id, activeItem)
       this.getForecastContrast()
     },
     changeForecastLineType(id) {
       const activeItem = document.querySelector('.btu-checked.forecastLineType')
-      sessionStorage.setItem('screen-forecast-type',id)
+      sessionStorage.setItem('screen-forecast-type', id)
       this.checkedClass(id, activeItem)
       this.getForecastContrast()
     },
@@ -157,33 +168,37 @@ export default {
       clickItem.classList.remove('btu-no-checked')
       clickItem.classList.add('btu-checked')
     },
-    chartsResize(){
-      if(this.lineChart !== null && this.lineChart !== undefined){
+    chartsResize() {
+      if (this.lineChart !== null && this.lineChart !== undefined) {
         this.lineChart.resize();
       }
     },
-    getForecastContrast(){
+    getForecastContrast() {
       let forecastType
-      if(sessionStorage.getItem('screen-forecast-type')){
+      if (sessionStorage.getItem('screen-forecast-type')) {
         forecastType = sessionStorage.getItem('screen-forecast-type')
-      }else{
+      } else {
         forecastType = 'wind'
       }
       let forecastDay
-      if(sessionStorage.getItem('screen-forecast-day')){
+      if (sessionStorage.getItem('screen-forecast-day')) {
         forecastDay = sessionStorage.getItem('screen-forecast-day')
-      }else{
+      } else {
         forecastDay = 'day'
       }
       let queryParams = {
         "forecastType": forecastType,
         "forecastDay": forecastDay
       }
-      this.$axios({url: '/largeScreenController/forecastContrast', method: 'get',params: queryParams}).then(response => {
+      this.$axios({
+        url: '/largeScreenController/forecastContrast',
+        method: 'get',
+        params: queryParams
+      }).then(response => {
         let curveMap = response.data.curveMap
         this.chartData = {
           realList: curveMap.realList,
-            ableList: curveMap.ableList,
+          ableList: curveMap.ableList,
           theoryList: curveMap.theoryList,
           cdqList: curveMap.cdqList,
           dqList: curveMap.dqList,
@@ -201,7 +216,8 @@ export default {
   width: 100%;
   height: 30vh;
 }
-.forecast-line-btu{
+
+.forecast-line-btu {
   top: .5vh;
   right: 2.2vw;
 }

cpp-ui/src/views/largeScreen/components/center-top.vue

@@ -187,6 +187,7 @@ export default {
   width: 5vw;
   right: .5vw;
   top: 1vh;
+  font-size: .85vw;
 }
 
 .runDay {

cpp-ui/src/views/largeScreen/components/left-bottom.vue

@@ -22,6 +22,7 @@
 
 <script>
 import {dqTickOptions} from '../echarts-data'
+import {fontSize} from "../../../utils";
 export default {
   data() {
     return {
@@ -231,10 +232,10 @@ export default {
           type: 'inside'
         }],
         grid: {
-          top: 50,
-          left: '4%',
+          top: '15%',
+          left: '3%',
           right: '4%',
-          bottom: '10%',
+          bottom: '5%',
           containLabel: true
         },
         animation: false,
@@ -283,7 +284,8 @@ export default {
           type: 'category',
           axisTick: {show: true},
           axisLabel: {
-            color: '#89BFE5'
+            color: '#89BFE5',
+            textStyle:{fontSize:fontSize(.12)}
           },
           axisLine: {
             onZero: false,
@@ -299,7 +301,7 @@ export default {
             padding: [3, 0, 0, 0],
             formatter: '{value}',
             textStyle: {
-              fontSize: 14,
+              fontSize: fontSize(.12),
               color: '#89BFE5'
             },
           },

cpp-ui/src/views/largeScreen/components/left-middle.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="progress-bar_container">
     <div>
-      <div class="bar_title">
+      <div class="bar_title flex items-center">
         <div class="flex tb_container">
           <span class="tb_title">日发电量</span>
           <span class="tb_num">{{ realGeneratingSum }}</span>
@@ -16,7 +16,7 @@
       </div>
     </div>
     <div style="margin-top: 5vh">
-      <div class="bar_title">
+      <div class="bar_title flex items-center">
         <div class="flex tb_container">
           <span class="tb_title">实际功率</span>
           <span class="tb_num">{{ realPowerSum }}</span>
@@ -98,7 +98,7 @@ export default {
 
 .bar_title {
   width: 100%;
-  height: 2rem;
+  height: 1.5rem;
   background-image: url("../../../assets/images/dashboard/progressBarTitleBg.png");
   background-repeat: no-repeat;
 }
@@ -109,6 +109,7 @@ export default {
 
   .tb_title {
     width: 6rem;
+    font-size: .85vw;
     //margin-left: 1.5vw;
   }
 

cpp-ui/src/views/largeScreen/components/progress-bar.vue

@@ -85,6 +85,7 @@ export default {
   left: 0; /* 进度文字左对齐 */
   width: 100%;
   text-align: right;
+  font-size: 0.85vw;
   /*font-weight: bold;*/
 
 }

cpp-ui/src/views/largeScreen/components/right-bottom.vue

@@ -104,6 +104,12 @@ export default {
     setFullOptions({xData, pData} = {}) {
       this.fullChart = this.$echarts.init(document.getElementById('fullChart'));
       let option = JSON.parse(JSON.stringify(forecast10LineOption))
+      option.grid = {
+        top: '5%',
+        left: '3%',
+        right: '3%',
+        bottom: '5%',
+      }
       option.xAxis.data = xData
       option.series[0].data = pData
       // 柱状图宽度

cpp-ui/src/views/largeScreen/components/right-middle.vue

@@ -350,6 +350,12 @@ export default {
         "weatherType": weatherType
       }
       let option = JSON.parse(JSON.stringify(weatherLineOption))
+      option.grid = {
+        top: '5%',
+        left: '3%',
+        right: '3%',
+        bottom: '5%',
+      }
       let index = 0;
       this.$axios({url: '/largeScreenController/forecastNwpFull', method: 'get',params: queryParams}).then(response => {
         let stationObj = response.data

cpp-ui/src/views/largeScreen/components/right-top.vue

@@ -10,51 +10,53 @@
            @click="changeAccuracy('accuracy-month')">月
       </div>
     </div>
-        <el-table
-          :data="tableData"
-          size="mini" height="24vh" :show-header="false"
-          style="width: 100%;"
-          ref="accuracyTable"
-          @cell-mouse-enter="tableScroll(true)"
-          @cell-mouse-leave="tableScroll(false)"
-        >
-          <el-table-column prop="sort" align="center" label="" fixed width="50px">
-            <template slot-scope="scope">
-              <div class="sortStyle flex justify-center sort1" v-if="Number(scope.row.sort) === 1"><span
-                class="sort-num-style">{{ scope.row.sort }}</span></div>
-              <div class="sortStyle flex justify-center sort2" v-else-if="Number(scope.row.sort) === 2"><span
-                class="sort-num-style">{{ scope.row.sort }}</span></div>
-              <div class="sortStyle flex justify-center sort3" v-else-if="Number(scope.row.sort) === 3"><span
-                class="sort-num-style">{{ scope.row.sort }}</span></div>
-              <span v-else>{{ scope.row.sort }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="name" align="center" label="" fixed min-width="50px"></el-table-column>
-          <el-table-column prop="accuracy" align="center" label="" fixed min-width="50px"></el-table-column>
-        </el-table>
-
-<!--    <div class="TItemUl" :class="{'animate-up': animateUp}" @mouseenter="scrollAnimate(true)" @mouseleave="scrollAnimate(false)">-->
-<!--      <div v-for="(item,index) in tableData" :key="index">-->
-<!--        <div class="TItemRow flex items-center justify-between" :class="index === 0?'highlight':''">-->
-<!--          <div class="TItemCell flex justify-center" style="width: 50px">-->
-<!--            <div class="sortStyle flex justify-center sort1" v-if="Number(item.sort) === 1"><span-->
-<!--              class="sort-num-style">{{ item.sort }}</span></div>-->
-<!--            <div class="sortStyle flex justify-center sort2" v-else-if="Number(item.sort) === 2"><span-->
-<!--              class="sort-num-style">{{ item.sort }}</span></div>-->
-<!--            <div class="sortStyle flex justify-center sort3" v-else-if="Number(item.sort) === 3"><span-->
-<!--              class="sort-num-style">{{ item.sort }}</span></div>-->
-<!--            <span v-else>{{ item.sort }}</span>-->
-<!--          </div>-->
-<!--          <div class="TItemCell">{{ item.name }}</div>-->
-<!--          <div class="TItemCell">{{ item.accuracy }}</div>-->
-<!--        </div>-->
-<!--        <div class="divider"/>-->
-<!--      </div>-->
-<!--      <div class="TItemRow" v-if="tableData.length==0">-->
-<!--        <div class="TI_default" style="width:100%">暂无数据</div>-->
-<!--      </div>-->
-
-<!--    </div>-->
+    <el-table
+      :data="tableData"
+      size="mini" height="24vh" :show-header="false"
+      style="width: 100%;"
+      ref="accuracyTable"
+      @cell-mouse-enter="tableScroll(true)"
+      @cell-mouse-leave="tableScroll(false)"
+    >
+      <el-table-column prop="sort" align="center" label="" fixed width="50px">
+        <template slot-scope="scope">
+          <div class="sortStyle flex justify-center sort1" v-if="Number(scope.row.sort) === 1">
+            <div class="sort-num-style flex items-center">{{ scope.row.sort }}</div></div>
+          <div class="sortStyle flex justify-center sort2" v-else-if="Number(scope.row.sort) === 2">
+            <div class="sort-num-style flex items-center">{{ scope.row.sort }}</div>
+          </div>
+          <div class="sortStyle flex justify-center sort3" v-else-if="Number(scope.row.sort) === 3">
+            <div class="sort-num-style  flex items-center">{{ scope.row.sort }}</div>
+          </div>
+          <span v-else>{{ scope.row.sort }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" align="center" label="" fixed min-width="50px"></el-table-column>
+      <el-table-column prop="accuracy" align="center" label="" fixed min-width="50px"></el-table-column>
+    </el-table>
+
+    <!--    <div class="TItemUl" :class="{'animate-up': animateUp}" @mouseenter="scrollAnimate(true)" @mouseleave="scrollAnimate(false)">-->
+    <!--      <div v-for="(item,index) in tableData" :key="index">-->
+    <!--        <div class="TItemRow flex items-center justify-between" :class="index === 0?'highlight':''">-->
+    <!--          <div class="TItemCell flex justify-center" style="width: 50px">-->
+    <!--            <div class="sortStyle flex justify-center sort1" v-if="Number(item.sort) === 1"><span-->
+    <!--              class="sort-num-style">{{ item.sort }}</span></div>-->
+    <!--            <div class="sortStyle flex justify-center sort2" v-else-if="Number(item.sort) === 2"><span-->
+    <!--              class="sort-num-style">{{ item.sort }}</span></div>-->
+    <!--            <div class="sortStyle flex justify-center sort3" v-else-if="Number(item.sort) === 3"><span-->
+    <!--              class="sort-num-style">{{ item.sort }}</span></div>-->
+    <!--            <span v-else>{{ item.sort }}</span>-->
+    <!--          </div>-->
+    <!--          <div class="TItemCell">{{ item.name }}</div>-->
+    <!--          <div class="TItemCell">{{ item.accuracy }}</div>-->
+    <!--        </div>-->
+    <!--        <div class="divider"/>-->
+    <!--      </div>-->
+    <!--      <div class="TItemRow" v-if="tableData.length==0">-->
+    <!--        <div class="TI_default" style="width:100%">暂无数据</div>-->
+    <!--      </div>-->
+
+    <!--    </div>-->
 
   </div>
 </template>
@@ -65,8 +67,8 @@ export default {
 
   data() {
     return {
-      dayTableData:[],
-      monthTableData:[],
+      dayTableData: [],
+      monthTableData: [],
       tableData: [
         // {sort: 1, name: '新疆光伏电站', accuracy: '99.8%'},
         // {sort: 2, name: '新疆光伏电站', accuracy: '97.8%'},
@@ -90,14 +92,13 @@ export default {
         this.dayTableData = value.dayRankingList
         this.monthTableData = value.lastMonthRankingList
 
-        if(sessionStorage.getItem('screen-accuracy-type')){
-          if (sessionStorage.getItem('screen-accuracy-type').includes('day')){
+        if (sessionStorage.getItem('screen-accuracy-type')) {
+          if (sessionStorage.getItem('screen-accuracy-type').includes('day')) {
             this.tableData = this.dayTableData
-          }
-          else{
+          } else {
             this.tableData = this.monthTableData
           }
-        }else{
+        } else {
           this.tableData = this.dayTableData
         }
         // this.tableData = value
@@ -131,15 +132,14 @@ export default {
       clickItem.classList.remove('btu-no-checked')
       clickItem.classList.add('btu-checked')
 
-      if (sessionStorage.getItem('screen-accuracy-type')=='day'){
+      if (sessionStorage.getItem('screen-accuracy-type') == 'day') {
         this.tableData = this.dayTableData
-      }
-      else{
+      } else {
         this.tableData = this.monthTableData
       }
 
     },
-    scrollAnimate (stop) {
+    scrollAnimate(stop) {
       if (stop) {
         clearInterval(this.scrolltimer)
         this.scrolltimer = null
@@ -183,7 +183,7 @@ export default {
 
 <style lang='scss' scoped>
 .son_container {
-  margin: .1vw ;
+  margin: .1vw;
 }
 
 ::v-deep.son_container .el-table--scrollable-y .el-table__body-wrapper {
@@ -193,11 +193,13 @@ export default {
 .sortStyle {
   width: 2vw;
   height: 3.5vh;
+  align-items: flex-start;
 
   .sort-num-style {
     color: #1e1e1e;
     font-weight: bold;
-    font-size: 16px;
+    font-size: .9vw;
+    height: 2vh;
   }
 }
 
@@ -226,26 +228,31 @@ export default {
   width: 100%;
   height: 24vh;
   overflow: hidden;
+
   .TItemRow {
     width: 100%;
     padding: 0.15vw .3vw;
   }
-  .TItemCell{
+
+  .TItemCell {
     width: 33%;
     text-align: center;
     padding: .1vw;
   }
-  .divider{
+
+  .divider {
     width: 100%;
     height: 1px;
     background: #1c84c6;
   }
+
   .animate-up {
     transition: all 0.5s ease-in-out;
     transform: translateY(-30px);
   }
 }
-.highlight{
+
+.highlight {
   background: rgba(28, 132, 198, 0.4);
 }
 </style>

cpp-ui/src/views/largeScreen/echarts-data.js

@@ -124,6 +124,9 @@ export const gaugeOption = {
 export let lineOption = {
   tooltip: {
     trigger: 'axis',
+    backgroundColor:'rgba(77, 109, 144, 0.87)',
+    borderColor:'#89BFE5',
+    textStyle:{color:'#fff', fontFamily:'Microsoft YaHei'},
     axisPointer: {
       type: 'cross',
       animation: false,
@@ -136,9 +139,10 @@ export let lineOption = {
     type: 'inside'
   }],
   grid: {
-    left: 55,
-    right: 30,
-    bottom: 30
+    top:'20%',
+    left: '5%',
+    right: '3%',
+    bottom: '10%',
   },
   legend: {
     data: ['实际功率', '可用功率', '理论功率', '短期', '超短期'],
@@ -336,6 +340,9 @@ export let lineOption = {
 export let weatherLineOption = {
   tooltip: {
     trigger: 'axis',
+    backgroundColor:'rgba(77, 109, 144, 0.87)',
+    borderColor:'#89BFE5',
+    textStyle:{color:'#fff', fontFamily:'Microsoft YaHei'},
     axisPointer: {
       type: 'cross',
       animation: false,
@@ -348,9 +355,10 @@ export let weatherLineOption = {
     type: 'inside'
   }],
   grid: {
-    left: 30,
-    right: 30,
-    bottom: 30
+    top:'20%',
+    left: '8%',
+    right: '3%',
+    bottom: '15%',
   },
   legend: {
     data: [],
@@ -443,14 +451,18 @@ export const forecast10LineOption = {
   animation: false,
   tooltip: {
     trigger: 'axis',
+    backgroundColor:'rgba(77, 109, 144, 0.87)',
+    borderColor:'#89BFE5',
+    textStyle:{color:'#fff', fontFamily:'Microsoft YaHei'},
     axisPointer: {
       type: 'shadow'
     }
   },
   grid: {
-    left: 20,
-    right: 30,
-    bottom: 10,
+    top:'20%',
+    left: '3%',
+    right: '1%',
+    bottom: '1%',
     containLabel: true
   },
   xAxis: {
@@ -466,20 +478,24 @@ export const forecast10LineOption = {
       alignWithLabel: true
     },
     axisLabel: {
-      color: '#89BFE5'
+      color: '#89BFE5',
+      textStyle: {
+        fontSize: fontSize(.12)
+      }
     },
   },
   yAxis: {
     type: 'value',
     name: '万kWh',
     nameTextStyle: {
-      color: '#89BFE5'
+      color: '#89BFE5',
+      fontSize:fontSize(.14)
     },
     axisLabel: {
       padding: [3, 0, 0, 0],
       formatter: '{value}',
       textStyle: {
-        fontSize: 14,
+        fontSize: fontSize(.12),
         color: '#89BFE5'
       },
     },
@@ -576,7 +592,8 @@ export const dqTickOptions= {
   xAxis: {
     type: 'category',
     axisLabel: {
-      color: '#89BFE5'
+      color: '#89BFE5',
+      textStyle:{fontSize:fontSize(.14)}
     },
     axisTick: {show: true},
     axisLine: {
@@ -593,7 +610,7 @@ export const dqTickOptions= {
       padding: [3, 0, 0, 0],
       formatter: '{value}',
       textStyle: {
-        fontSize: 14,
+        fontSize: fontSize(.14),
         color: '#89BFE5'
       },
     },

cpp-ui/src/views/largeScreen/index.vue

@@ -24,35 +24,39 @@
       <div class="width-20 ml-0 flex-column justify-between">
         <div class="border-style">
           <div class="barTitleBg right-title-style">场站数据统计</div>
-          <div class="flex flex-wrap" style="height: 25vh">
+          <div class="flex-column justify-center" style="height: 25vh">
+            <div class="flex justify-around">
             <div class="flex width-50">
               <img src="../../assets/images/dashboard/num3.png" class="left-img"/>
-              <div class="flex-column justify-center items-center">
+              <div class="flex-column justify-center items-center left-img-text">
                 <span>风速</span>
                 <span>{{ envData.wsAvg }} m/s</span>
               </div>
             </div>
             <div class="flex width-50">
               <img src="../../assets/images/dashboard/num2.png" class="left-img"/>
-              <div class="flex-column justify-center items-center">
+              <div class="flex-column justify-center items-center left-img-text">
                 <span>风电开机容量</span>
                 <span>{{ envData.fdOpenCapcitySum }} MW</span>
               </div>
             </div>
-            <div class="flex width-50">
+            </div>
+            <div class="flex justify-around">
+              <div class="flex width-50">
               <img src="../../assets/images/dashboard/num4.png" class="left-img"/>
-              <div class="flex-column justify-center items-center">
+              <div class="flex-column justify-center items-center left-img-text">
                 <span>辐照度</span>
                 <span>{{ envData.fzdAvg }} W/㎡</span>
               </div>
             </div>
             <div class="flex width-50">
               <img src="../../assets/images/dashboard/num2.png" class="left-img"/>
-              <div class="flex-column justify-center items-center">
+              <div class="flex-column justify-center items-center left-img-text">
                 <span>光伏开机容量</span>
                 <span>{{ envData.gfOpenCapcitySum }} MW</span>
               </div>
             </div>
+            </div>
           </div>
         </div>
         <div class="border-style">
@@ -1059,7 +1063,7 @@ export default {
 $top-container-height: 11vh;
 .largeScreen {
   width: 100%;
-  height: calc(100vh);
+  height: 100vh;
   color: white;
   background-color: #101C38;
   background-image: url('../../assets/images/pageBg.png');
@@ -1138,7 +1142,10 @@ $top-container-height: 11vh;
 .left-img {
   width: 6vw;
 }
-
+.left-img-text{
+  width: 5.5vw;
+  font-size: .85vw;
+}
 .badge-img {
   width: 1.5vw;
 }
@@ -1186,7 +1193,7 @@ $top-container-height: 11vh;
 }
 
 .width-50 {
-  width: 50%;
+  max-width: 25vh;
 }
 
 .height-58vh {