#

whycq

2024-03-21 4dc72b22acac30fa642999a845d708feacc28100

 Monitor-APP/pages/home/home.vue

@@ -1,215 +1,23 @@
<template>
    <view class="container">
        <!-- 宁波捷丰项目 -->
        <uni-transition :duration="duration" :mode-class="homeMode" :show="homeViewShow">
            <view class="home-view">
                <view class="head">
                    <text>自动仓库WCS监控平台</text>
                </view>
                <!-- 日历 -->
                <view class="time-tools">{{calendar}}</view>
                <view class="button-left" @click="ejected()"></view>
                <view class="button-right" @click="ejected()"></view>
                <!-- 主视图 -->
                <view class="main">
                    <view class="mian-item">
                        <view class="mian-item-box">
                            <y-box>
                                <view class="box-item">
                                    <text class="item-title">自动化立体仓库</text>
                                    <text class="item-subTitle">Automatic Storageand Retrieval System</text>
                                    <text class="item-text" style="text-align: left;">利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化；自动化立体仓库是当前技术水平较高的形式。自动化立体仓库的主体由货架、巷道式堆垛起重机、入（出）库工作台和自动运进（出）及操作控制系统组成。货架是钢结构或钢筋混凝土结构的建筑物或结构体，货架内是标准尺寸的货位空间，巷道堆垛起重机穿行于货架之间的巷道中，完成存、取货的工作。管理上采用计算机及条形码技术。</text>
                                </view>
                                <view class="box-item">
                                    <text class="item-title">仓库数据</text>
                                    <text class="item-subTitle">warehouse data</text>
                                    <view class="img-box">
                                        
                                        <view class="item-img">
                                            <image src="../../static/a1.png" mode="aspectFit"></image>
                                            <view class="flex-col" style="width: calc(100% - 5vw);">
                                                <view class="flex-row" style="position: relative;" >
                                                    <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.xDistance}}</view>
                                                    <view style="position: absolute;bottom: 0;left: 10vw;">m</view>
                                                </view>
                                                <view style="height: 100%;text-align: left;text-indent: 2em;">累计走行距离(米)</view>
                                            </view>
                                        </view>
                                        
                                        <view class="item-img">
                                            <image src="../../static/b1.png" mode="aspectFit"></image>
                                            <view class="flex-col" style="width: calc(100% - 5vw);">
                                                <view class="flex-row" style="position: relative;" >
                                                    <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.yDistance}}</view>
                                                    <view style="position: absolute;bottom: 0;left: 10vw;">m</view>
                                                </view>
                                                <view style="height: 100%;text-align: left;text-indent: 2em;">累计升降距离(米)</view>
                                            </view>
                                        </view>
                                        
                                        <view class="item-img">
                                            <image src="../../static/c1.png" mode="aspectFit"></image>
                                            <view class="flex-col" style="width: calc(100% - 5vw);">
                                                <view class="flex-row" style="position: relative;" >
                                                    <view style="-width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.xDuration}}</view>
                                                    <view style="position: absolute;bottom: 0;left: 10vw;">s</view>
                                                </view>
                                                <view style="height: 100%;text-align: left;text-indent: 2em;">累计走行时长(秒)</view>
                                            </view>
                                        </view>
                                        
                                        <view class="item-img">
                                            <image src="../../static/d1.png" mode="aspectFit"></image>
                                            <view class="flex-col" style="width: calc(100% - 5vw);">
                                                <view class="flex-row" style="position: relative;" >
                                                    <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.yDuration}}</view>
                                                    <view style="position: absolute;bottom: 0;left: 10vw;">s</view>
                                                </view>
                                                <view style="height: 100%;text-align: left;text-indent: 2em;">累计升降时长(秒)</view>
                                            </view>
                                        </view>
                                        
                                    </view>
                                </view>
                                <view class="box-item">
                                    <view class="flex-row" style="width: 100%;">
                                        <!-- 左侧 -->
                                        <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;">
                                            <text class="item-title">库位使用率</text>
                                            <text class="item-subTitle">EQUIPMENT USAGE THIS MONTH</text>
                                        </view>
                                        <!-- 右侧 -->
                                        <view style="margin-left: auto;">
                                            <!-- 百分比 -->
                                            <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" >
                                                <!-- style="justify-content: flex-end;position: absolute;top: 0;right: 1vw;text-align: right;" -->
                                                <text class="item-title">{{baseInfo.usedPr}}%</text>
                                                <text class="item-subTitle">同比上月 + 5%</text>
                                            </view>
                                        </view>
                                    </view>
                                    
                                    <view class="flex-col" style="width: 100%;align-items: flex-start;position: relative;font-size: 1vw">
                                        <!-- 进度条 -->
                                        <view class="flex-row" style="width: 100%;position: relative;margin-top: 5%;">
                                            <view class="progressBar" style="width: 80%;height: 2vw;">
                                                <view class="progress" :style="'width:'+ baseInfo.usedPr + '%'"></view>
                                            </view>
                                            <view style="position: absolute;bottom: 0;right: 0;font-size: 2.5vw;color: #FF5722;;">{{baseInfo.used}}</view>
                                        </view>
                                    </view>
                                </view>
                            </y-box>
                        </view>
                    </view>
                    <view class="mian-item">
                        <view class="mian-item-box">
                            <view style="width: 100%;height: 100%;">
                                <view style="height: 35%;">
                                    <!-- 折线图 -->
                                    <y-box>
                                        <view class="box-item">
                                            <view class="flex-row" style="width: 100%;">
                                                <!-- 左侧 -->
                                                <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;">
                                                    <text class="item-title">入出库统计</text>
                                                    <text class="item-subTitle">ORDER STATISTICS</text>
                                                </view>
                                                <!-- 右侧 -->
                                                <view style="margin-left: auto;">
                                                    <!-- 百分比 -->
                                                    <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" >
                                                        <!-- style="justify-content: flex-end;position: absolute;top: 0;right: 1vw;text-align: right;" -->
                                                        <text class="item-title">31</text>
                                                        <text class="item-subTitle">今日订单数</text>
                                                    </view>
                                                </view>
                                            </view>
                                            <view class="charts-box">
                                                <qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true"/>
                                            </view>
                                        </view>
                                    </y-box>
                                </view>
                                
                                
                                <!-- null -->
                                <view style="height: 2%;"></view>
                                
                                
                                <view style="height: 43%;">
                                    <y-box>
                                        <view class="box-item">
                                            <view class="flex-row" style="width: 100%;">
                                                <!-- 左侧 -->
                                                <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;">
                                                    <text class="item-title">库存类型</text>
                                                    <text class="item-subTitle">INCOME DATE</text>
                                                </view>
                                                <!-- 右侧 -->
                                                <view style="margin-left: auto;">
                                                    <!-- 百分比 -->
                                                    <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" >
                                                        <text class="item-title">今天</text> 
                                                        <text class="item-subTitle">Today</text>
                                                    </view>
                                                </view>
                                            </view>
                                            <view class="flex-row" style="width: 100%;">
                                                <!-- 左 -->
                                                <view class="charts-box-ring">
                                                    <qiun-data-charts type="ring" :opts="{legend:{position:'bottom'}}" :eopts="ringOpts" :chartData="chartsDataPie2" :echartsH5="true" :echartsApp="true"/>
                                                </view>
                                                <!-- 右 -->
                                                <view>
                                                    <view class="flex-row sub-info">
                                                        <image src="../../static/g1.png" mode="aspectFit"></image>
                                                        <view style="width: 8vw;height: 4vw;line-height: 4vw;">在库</view>
                                                        <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.stockCount}}</view>
                                                    </view>
                                                    <view class="flex-row sub-info" style="margin-top: 2vh;">
                                                        <image src="../../static/f1.png" mode="aspectFit"></image>
                                                        <view style="width: 8vw;height: 4vw;line-height: 4vw;">空库</view>
                                                        <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.emptyCount}}</view>
                                                    </view>
                                                    <view class="flex-row sub-info" style="margin-top: 2vh;">
                                                        <image src="../../static/e1.png" mode="aspectFit"></image>
                                                        <view style="width: 8vw;height: 4vw;line-height: 4vw;">锁定</view>
                                                        <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.noneCount}}</view>
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                        
                                    </y-box>
                                </view>
                                <view style="height: 2%;"></view>
                                <view style="height: 18%;">
                                    <y-box>
                                        <view class="flex-col" style="width: 100%;height: 100%;font-size: 4vh;justify-content: center;letter-spacing: 1vh;">
                                            <!-- 嘉善边锋机械股份有限公司 -->
                                            自动仓库WCS监控平台
                                            <!-- <image src="../../static/ruiyun.jpg" mode="" style="width: 100%;"></image> -->
                                        </view>
                                    </y-box>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                
            </view>
        </uni-transition>
        <!-- 全板/拣料信息 -->
        <uni-transition :duration="duration" :mode-class="infoMode" :show="infoViewShow">
            <view class="home-view">
                <view class="head">
                    <text>{{infoText.title}}</text>
               <view class="head-left" @click="ejected()">
                  <view class="logo"></view>
               </view>
               <view class="head-mid">
                  <text style="z-index: 999;">出库单列表</text>
               </view>
               <view class="head-right">
                  <view class="time-tools">{{calendar}}</view>
               </view>
                </view>
                <!-- 日历 -->
                <view class="time-tools">{{calendar}}</view>
                <view class="button-left" @click="ejected()"></view>
                <view class="button-right" @click="ejected()"></view>
                <!-- <view class="time-tools">{{calendar}}</view> -->
                <!-- <view class="button-left" @click="ejected()"></view> -->
                <!-- <view class="button-right" @click="ejected()"></view> -->
                <!-- 主体 -->
                <view class="info-main">
                    <view class="info-box">
@@ -218,11 +26,14 @@
                            <view class="text-content">
                                <!-- head -->
                                <view class="swiper-head">
                                    <view style="width: 20%;">目标站：{{infoText.staNo}}</view>
                                    <view style="width: 30%;">商品编号</view>
                                    <view style="width: 20%;">商品名称</view>
                                    <view style="width: 20%;">规格</view>
                                    <view style="width: 10%;">数量</view>
                                    <view class="item-box1" style="width: 10%;">呼叫编号</view>
                                    <view class="item-box1" style="width: 15%;">呼叫产线</view>
                                    <view class="item-box1" style="width: 15%;">产线代码</view>
                           <view class="item-box1" style="width: 15%;">呼叫工单</view>
                           <view class="item-box1" style="width: 15%;">任务名称</view>
                           <view class="item-box1" style="width: 10%;">出库单状态</view>
                           <view class="item-box1" style="width: 10%;">呼叫时间</view>
                           <view class="item-box1" style="width: 9.5%;">最晚送达时间</view>
                                </view>
                                <!-- body -->
                                <view class="swiper-body">
@@ -231,15 +42,34 @@
                                    vertical 滑动方向是否为纵向 
                                    display-multiple-items 同时显示的滑块数量 -->
                                    <swiper class="swiper-body-main" vertical="true" 
                                    display-multiple-items="8"
                                    circular="true" :autoplay="true" :interval="3000" :duration="1000">
                                        <swiper-item class="swiper-item" v-for="(item,i) in swiperList" :key="i">
                                            <view style="width: 20%;">No:{{i+1}}</view>
                                            <view style="width: 30%;">{{item.matNo}}</view>
                                            <view style="width: 20%;">{{item.maknx}}</view>
                                            <view style="width: 20%;">{{item.specs}}</view>
                                            <view style="width: 10%;">{{item.count}}</view>
                                    display-multiple-items="10"
                                    circular="true" :autoplay="false" :interval="3000" :duration="1000" disable-touch='true'>
                                        <swiper-item class="swiper-item"  v-for="(item,i) in swiperList" :key="i">
                                            <view class="item-box" style="width: 10%;" >{{item.callNo ? item.callNo : '--'}}</view>
                                            <view class="item-box" style="width: 15%;">{{item.callLine}}</view>
                                            <view class="item-box" style="width: 15%;">{{item.callLineNo}}</view>
                                            <view class="item-box" style="width: 15%;">
												
                                    <text style="color: #25E51E ;"  v-if="item.inspectSts == 'inspectWhite'">{{item.storeAdd}}</text>
                                    <text v-if="item.inspectSts == 'inspectRed'">{{item.callOrder}}</text>
                                 </view>
                                            
                                 <view class="item-box" style="width: 15%;">{{item.callName}}</view>
                                 <view class="item-box" style="width: 10%;">
                                    <text class="beBatch1" v-if="item.callSettle == 2 ">
                                       {{item.callSettle$}}
                                    </text>
                                    <text class="beBatch2" v-if="item.callSettle != 2 ">
                                       {{item.callSettle$}}
                                    </text>
                                    <!-- <text class="beBatch3" v-if="item.inspectSts != 'inspectWhite'">
                                       {{item.beBatch$}}
                                    </text> -->
                                 </view>
                                 <view class="item-box" style="width: 10%;">{{item.callTime$}}</view>
                                 <view class="item-box" style="width: 9.5%;">{{item.lastTime$}}</view>
                                        </swiper-item>
                              <view style="height: 1px;"></view>
                                    </swiper>
                                </view>
                            </view>
@@ -316,7 +146,28 @@
                </view>
            </view>
        </view>
    </view>
      <!-- 确认是否操作 -->
      <view>
         <uni-popup ref="inputDialog" type="dialog">
            <uni-popup-dialog :type="msgType" :title="dialogTitle" :content="dialogContent" @confirm="dialogConfirm"
                           @close="dialogClose"></uni-popup-dialog>
         </uni-popup>
      </view>
      <!-- 操作成功失败弹窗 -->
      <view>
         <!-- 提示信息弹窗 -->
         <uni-popup ref="message" type="message">
            <uni-popup-message :type="messageType" :message="messageText" :duration="3000"></uni-popup-message>
         </uni-popup>
      </view>
      <view class="board">
         <uni-transition ref="ani" custom-class="transition" :mode-class="newModeClass" :show="errorBoardShow">
            <view class="error-board">
               <text v-for="item in carInfo">{{item}}</text>
            </view>
         </uni-transition>
      </view>
   </view>
</template>
 
<script>
@@ -325,9 +176,21 @@
    export default {
        data() {
            return {
            newModeClass: 'slide-top',
            errorBoardShow: false,
            carInfo: [],
            type: 'center',
            msgType: 'success',
            messageType: 'success',
            messageText: '这是一条成功提示',
            dialogTitle: '',
            value: '',
            dialogContent: '确认开始该笔补货物料？',
            matnr: '',
            dialogType: 0,
                series: [],
                homeViewShow: true,
                infoViewShow: false    ,
                homeViewShow: false,
                infoViewShow: true    ,
                errorInfoViewShow: false,
                homeMode: [],
                infoMode: [],
@@ -381,7 +244,10 @@
                    count: "",
                    error: ""
                },
                swiperList: []
                swiperList: [
					
            ],
            inspect: 'inspectRed'
            }
        },
        onShow() {
@@ -403,67 +269,127 @@
            that.basePort = BasePort
            that.baseCrnId = BaseCrnId
            this.getUrl()
         setTimeout(()=>{
            this.getServerData()
            this.initlineChart()
            this.initPieChart()
            this.getOther()
            setTimeout(()=>{
               this.getServerData()
               this.initlineChart()
               this.initPieChart()
               this.getOther()
               setTimeout(()=>{
                  this.getServerData()
                  this.initlineChart()
                  this.initPieChart()
                  this.getOther()
               },500)
            },500)
         },500)
        },
        onLoad() {
         setInterval(()=>{
            this.getServerData()
            this.getDate2()
            this.getUrl()
            this.getInfo()
            this.getError()
            // this.getServerData()
            // this.getUrl()
            // this.getInfo()
            // this.getError()
            // this.getInfo2()
            // this.getError2()
            this.controller()
            this.getDate2()
            this.getInfo3()
            this.getCarInfo()
            // this.getInfo4()
            // this.controller()
         },1000)
         
         // setInterval(()=>{
         //    this.changeErrorShow()
         // },5000)
         
         setInterval(()=>{
            this.getServerData()
            this.initlineChart()
            this.initPieChart()
            this.getOther()
         },600000)
         // setInterval(()=>{
         //    this.getServerData()
         //    this.initlineChart()
         //    this.initPieChart()
         //    this.getOther()
         // },600000)
        },
        methods: {
         // 日历 服务器
         // 异常信息
         getCarInfoTest() {
            let that = this
            var result = ycqdata.carError
            var res = result.data
            that.carInfoModel(res)
         },
         getCarInfo() {
            let that = this
            uni.request({
               url: that.commonUrl + "/mobile/error/list2",
               method: "GET",
               success(result) {
                  var res = result.data
                  that.carInfoModel(res)
               }
            })
         },
         carInfoModel(res) {
            let infoList = []
			
            if (res.code == 200 && res.data != '') {
               let str = ''
               for (let k of res.data) {
                  str = `${k.tsakNo1}-${k.errName}`
                  infoList.push(str)
               }
               this.carInfo = infoList
               this.errorBoardShow = true
            } else {
               this.errorBoardShow = false
            }
         },
         getDate2() {
            let that = this
            if(that.commonUrl == 'undefined') {
               return
            }
            uni.request({
               url: that.commonUrl + "/monitor/date",
               url: that.commonUrl + "/mobile/date",
               method:"GET",
               success(result) {
                  // console.log(result);
                  var res = result.data.data
                  that.calendar = res.year + "年" + res.month + "月" + res.day + "日 " + res.hour + ":" + res.minute + ":" + res.second + " " + res.week
                  that.calendar = res.hour + ":" + res.minute + ":" + res.second + " " + res.year + "-" + res.month + "-" + res.day
                  that.currDate = res.year + "/" + res.month + "/" + res.day
               },
               fail(res) {
               }
               
            })
         },
         // 开始按钮
         complete(matnr) {
            this.matnr = matnr
            this.dialogTitle = `品番：${matnr}`
            this.dialogType = 1
            this.dialogContent = '确认开始该笔补货物料？'
            this.$refs.inputDialog.open()
         },
         // 结束按钮
         cancel(matnr) {
            this.matnr = matnr
            this.dialogTitle = `品番：${matnr}`
            this.dialogType = 2
            this.dialogContent = '确认完成该笔补货物料？'
            this.$refs.inputDialog.open()
         },
         // 弹窗取消
         dialogClose() {
            this.$refs.inputDialog.close()
         },
         // 弹窗确认
         dialogConfirm() {
            let that = this
            uni.request({
                url: that.commonUrl + "/LocDetlReplenishmentController/hand/control/re",
                method:"GET",
                data: {matnr:that.matnr,type: that.dialogType},
                success(result) {
                  console.log(result);
                    var res = result.data
                  if (res.code === 200) {
                     that.messageType = 'success'
                     that.messageText = `操作成功`
                     that.$refs.message.open()
                  } else {
                     that.messageType = 'error'
                     that.messageText = res.msg
                     that.$refs.message.open()
                  }
                }
            })
         },
            getUrl() {
@@ -502,6 +428,38 @@
                    that.infoType = 0
                }
            },
         getInfo3() {
            let that = this
            uni.request({
                url: that.commonUrl + "/mobile/order/list",
                method:"GET",
               data: {},
                success(result) {
                    var res = result.data
                  for (let k of res.data) {
                     if (k.inspect == 1) {
                        k['inspectSts'] = 'inspectWhite' 
                     } else {
                        k['inspectSts'] = 'inspectRed' 
                     }
                  }
                   that.swiperList = res.data
                }
            })
         },
         getInfo4() {
            let result = ycqdata.dataError3
            var    res = result.data
            for (let k of res.data) {
               if (k.inspect == 1) {
                  k['inspectSts'] = 'inspectWhite' 
               } else {
                  k['inspectSts'] = 'inspectRed' 
						
               }
            }
            this.swiperList = res.data
         },
            getError2 () {
                let that = this
                let result = ycqdata.dataError2
@@ -817,7 +775,7 @@
    .container{
        width: 100vw;
        min-height: 100vh;
        background-color: #00163E;
        background-color: #083870;
        color: #fff;
        text-align: center;
        
@@ -826,8 +784,9 @@
    .home-view {
        width: 100vw;
        min-height: 100vh;
        background-image: url(../../static/background.png);
        background-size: 100vw 100vh;
       /* background-image: url(../../static/head.png);
        background-size: 50vw 10vh;
      background-repeat: no-repeat; */
    }
    .home-right {
        width: 50vw;
@@ -841,23 +800,49 @@
    .head {
        width: 100vw;
        height: 11vh;
        font-size:4vw;
        font-size:3vw;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: scale(0.7);
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }
   .head-mid {
      height: 10vh;
      background-image: url(../../static/head.png);
      background-size: 100% 100%;
   }
   .head-left {
      height: 6vh;
      background-image: url(../../static/headleft.png);
      background-size: 110% 100%;
      transform: scaleX(-1);
   }
   .head-right {
      height: 6vh;
      background-image: url(../../static/headleft.png);
      background-size: 110% 100%;
   }
   .logo {
      position: absolute;
      left: 30%;
      top: 90%;
      width: 60%;
      height: 110%;
      background-image: url(../../static/DENSO_logo.png);
      background-size: 60% 60%;
      /* background-color: #55ff7f; */
      background-repeat: no-repeat;
      transform: scaleX(-1);
   }
    .time-tools {
        position: absolute;
        right: 2%;
        top: 2%;
        font-size:1vw;
        right: 4%;
        top: 6%;
        font-size:1.2vw;
        transform: scale(0.8);
    }
    .button-left {
        position: absolute;
        background-image: url(../../static/right.png);
        background-image: url(../../static/headleft.png);
        background-size: 100% 100%;
        top: 1.8%;
        left: 21.3%;
@@ -993,6 +978,7 @@
    .info-box {
        width: 98%;
        height: 98%;
      background-color: #032246;
    }
    /* 异常信息 */
    .error-info-view {
@@ -1097,4 +1083,72 @@
        height: 20%;font-size: 8vh;
        justify-content: center;
    }
</style>
   .beBatch1 {
      color: #ffba02;
      padding: 4rpx 10rpx;
      background-color: #fff8e6;
      font-weight: bold;
      border-radius: 2rpx;
   }
   .beBatch2 {
      color: #ff5454;
      padding: 4rpx 10rpx;
      background-color: #ffeded;
      font-weight: bold;
      border-radius: 2rpx;
   }
   .inspectRed {
      color: #F10F0F;
   }
   .inspectWhite {
      color: #FFF;
   }
   .item-box1 {
      height: 98%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #7db2f7;
   }
   .item-box {
      height: 98%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #074a9a;
   }
   .start-btn {
      color: #FFF;
      background-color: #13ce66;
      transform: scale(0.7);
   }
   .end-btn {
      color: #FFF;
      background-color: #1890ff;
      transform: scale(0.7);
   }
   .popup {
		
   }
   .board {
      position: absolute;
      top: 0;
      right: 0;
      /* background-color: #aa00ff; */
      /* height: 13vh; */
      width: 100%;
      /* box-shadow: rgba(0,0,0,.35) 0px 5px 15px; */
   }
	
   .error-board {
      margin: .2rem;
      height: 11vh;
      background-color: #F56C6C;
      box-shadow: rgba(0, 0, 0, .35) 0px 5px 15px;
      border-radius: .2rem;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 2rem;
   } 
</style>