Project_yhfu/src/components/TVWall.vue

<template>
  <div>
    <el-dialog title="电视墙" :visible.sync="TVWallVisible" v-if="TVWallVisible" customClass="TVWallCustomWidth"
               @close="cancelEventLocationShow()">
	  <!--<div class="forthis" style="width: 22%; position: absolute;left: 0;z-index: 9999999999999;">-->
	  	<!--&lt;!&ndash; <div class="this-title">-->
	  		<!--<span>林场</span>-->
	  		<!--<span>45</span>-->
	  	<!--</div> &ndash;&gt;-->
	  	<!--<div class="i-list-con" style="height: 46vh; overflow-y: scroll;">-->
	  		<!--<span v-for="(item,index) in cameraList" :key="index">-->
	  			<!--<div class="d-l-con" @click="playhk(item.channelCode)">-->
	  				<!--<div class="d-l-l-text">-->
	  					<!--<i class="i-small"></i>-->
	  					<!--<h4>{{ item.cameraName }}</h4>-->
	  				<!--</div>-->
	  			<!--</div>-->
	  		<!--</span>-->
	  	<!--</div>-->
	  <!--</div>-->
      <!--<div style="width:70%;height:400px;position:absolute;">-->
        <!--&lt;!&ndash;视频窗口展示-&#45;&#45;大华&ndash;&gt;-->
        <!--<div id="dom1" class="dom1"></div>-->
        <!--&lt;!&ndash;视频窗口展示-&#45;&#45;海康&ndash;&gt;-->
        <!--<div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>-->
      <!--</div>-->

      <div id="dom1" class="dom1"></div>
    </el-dialog>
  </div>

</template>

<script>
/** ----------------------------------摄像头预览开始------------------------------------- */
import { getDahuaVideoServer, getTVWallList } from '@/api/dahua/dahua'
import { tvCameraList } from '@/api/haikang/haikang'
import DHWs from '@/dahua/lib/DHWs'
import { rotation } from '@/api/monitor'
/** ----------------------------------摄像头预览结束------------------------------------- */
export default {
  array:[],
  dicts: ['event_source'],
  components: {},
  data() {
    return {
      tvListJson: [
        {
        'switchTab': '1',
        'treeLabels': [
          {
            'labelCode': '123456',
            'labelName': '视频场景',
            'parentLabelCode': null
          },
          {
            'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa',
            'labelName': '标签2',
            'parentLabelCode': 123456
          },
          {
            'labelCode': 'd941adbbd3e64dac92cc448dec5293cd',
            'labelName': '标签1',
            'parentLabelCode': 123456
          }
        ],
        'labelChannels': [{
          'channelDates': [{
            'channelCode': '6044981090191552',
            'channelName': '复兴大桥中段-交通事故',
            'channelSn': null,
            'cameraType': 0,
            'online': 1
          },
            {
              'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
              'channelName': '北京7青羊东二路77号2通道1',
              'channelSn': null,
              'cameraType': 1,
              'online': 1
            }
          ],
          'labelCode': 'd941adbbd3e64dac92cc448dec5293cd'
        },
          {
            'channelDates': [{
              'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
              'channelName': '北京7青羊东二路77号2通道2',
              'channelSn': null,
              'cameraType': 2,
              'online': 0
            }],
            'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa'
          }
        ]
      },
        {
          'switchTab': '2',
          'labelChannels': [{
            'channelDates': [{
              'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
              'channelName': '北京7青羊东二路77号2通道1',
              'channelSn': null,
              'cameraType': 1,
              'online': 1
            },
              {
                'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
                'channelName': '北京7青羊东二路77号2通道2',
                'channelSn': null,
                'cameraType': 2,
                'online': 0
              }
            ]
          }]
        }
      ],
      TVWallVisible: false,
      activeName: 'tv',
      channelId: ['ZgVzqsjwA1DTF561VHG69F'],
      /** ----------------------------------摄像头预览开始------------------------------------- */
      showModal: true,
      activePanel: 'key1',
      isLogin: false,
      loginType: '1',
      token: '',
      ctrlType: 'playerWin',
      https: 1,
      httpsList: [
        {
          value: 0,
          label: 0
        },
        {
          value: 1,
          label: 1
        }
      ],
      ctrlTypeList: [{
        value: 'playerWin',
        label: '播放控件'
      }, {
        value: 'realMonitorUI',
        label: '带设备树实时预览控件'
      }, {
        value: 'playbackUI',
        label: '带设备树视频回放控件'
      }, {
        value: 'TVWallUI',
        label: '视频上墙'
      }],
      ctrlList: [
        {
          value: 'ctrl1',
          label: '控件1'
        },
        {
          value: 'ctrl2',
          label: '控件2'
        },
        {
          value: 'ctrl3',
          label: '控件3'
        }
      ],
      splitList: [
        {
          value: 1,
          label: '1 * 1'
        },
        {
          value: 4,
          label: '2 * 2'
        },
        {
          value: 9,
          label: '3 * 3'
        }
      ],
      displayModeList: [
        {
          value: 1,
          label: '播放器预览模式'
        },
        {
          value: 2,
          label: '播放器回放模式'
        }
      ],
      mixedVideoDisplayModeList: [
        {
          value: 1,
          label: '播放实时视频'
        },
        {
          value: 2,
          label: '播放回放视频'
        }
      ],
      ctrl: 'ctrl1',
      splitNum: 1,
      displayMode: 1,
      displayTimeRange: [],
      modalDisplayTimeRange: [],
      mixedVideoTime: null,
      recordPath: 'C:\\DSS LightWeight\\DSS LightWeight Client\\Record\\',
      downloadName: '',
      downTimeRange: [],
      downloadFormat: 0,
      downloadFormatList: [{
        value: 0,
        label: 'dav'
      },
        {
          value: 1,
          label: 'avi'
        }, {
          value: 2,
          label: 'mp4'
        }],
      downloadSource: 3,
      downloadSourceList: [
        {
          value: 3,
          label: '中心录像'
        }, {
          value: 2,
          label: '设备录像'
        }],
      showDownloadStreamType: false,
      downloadStreamType: 1,
      downloadStreamTypeList: [{
        value: 1,
        label: '主码流'
      },
        {
          value: 2,
          label: '辅码流'
        },
        {
          value: 3,
          label: '三码流'
        }],
      downloadIsShow: true,
      downloadIsShowList: [{
        value: true,
        label: '是'
      },
        {
          value: false,
          label: '否'
        }],
      crtPosX: 0,
      crtPosY: 0,
      crtWidth: 1150,
      crtHeight: 700,
      domId: 'dom1',
      mixedVideoDisplayMode: 2,
      isShowTipe: true,
      /** ----------------------------------摄像头预览结束------------------------------------- */
      cameraList:[],
      initCount: 0,
      pubKey: '',
      oWebControl: null
    }
  },
  created() {
    const DHWsInstance = DHWs.getInstance()
    this.ws = DHWsInstance
  },
  methods: {
    cancelEventLocationShow() {
      // this.activeName = 'tv'
      this.TVWallVisible = false
      this.destroy()

      if (this.oWebControl != null) {
        this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
        this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
          },
          function() {  // 断开与插件服务连接失败
          })
      }
    },
    playRealMonitorVideo(array) { // 自定义设备树自动播放指定通道编码视频
      const config = this.ws.config
      const { loginIp, userCode } = config
      this.ws.postMessage('playRealMonitorVideo', {
        loginIp,
        userCode,
        params: {
          ctrlCode: "ctrl1",
          array: array
        }
      })

    },

    //火点联动电视墙调用
    showTVWall1(longitude,latitude,tvListJson) {
      // let that=this;
      /** ----------------------------------大华摄像头预览开始------------------------------------- */
      this.ws.addEventListener('connectStateChange', data => {
        if (data) {
          console.log('连接成功')
        } else {
          console.log('连接失败，下载客户端')
          this.alertReinstall()
          this.isShowTipe && this.$modal.confirm({
            title: '下载客户端',
            content: '检测到您未安装部分插件,将影响部分功能使用，请下载后使用？',
            onOk: () => {
              //这里写下载方法
              this.isShowTipe = false
            },
            onCancel: () => {
              this.isShowTipe = false
            }
          });
        }
      })
      getDahuaVideoServer().then(newResponse => {
        this.ws.detectConnectQt().then(res => {
          if (res) { // 连接客户端成功
            this.alertLogin()
            this.ws.login({
              loginIp: newResponse.loginIp,
              loginPort: newResponse.loginPort,
              userName: newResponse.userName,
              userPwd: newResponse.userPwd,
              // loginIp: '192.168.100.100',
              // loginPort: 8314,
              // userName: 'system',
              // userPwd: 'Admin@123',
              token: '',
              https: 1
            })
            this.ws.on('loginState', (res) => {
              this.isLogin = res
              console.log('---res-----', res)
              if (res) {
                this.alertLoginSuccess()
                this.activePanel = 'key2'
                console.log(tvListJson)
                const array=[]
                const array1=[]
                tvListJson[0].treeLabels.forEach((item,index)=>
                {
                  if (index!=0)
                  {
                    const param =Object.assign({})
                    param.channelId=item.labelCode
                    array.push(param)
                    array1.push(item.labelCode)
                  }

                })
                this.create1(longitude,latitude,tvListJson,array,array1)
                // var obj=JSON.parse(tvListJson)
              } else {
                this.alertLoginFailed()
              }
            })
          } else { // 连接客户端失败
            this.alertReinstall()
          }
        })

      })
      /** ----------------------------------大华摄像头预览结束------------------------------------- */
      /** ----------------------------------海康摄像头预览开始------------------------------------- */
      // tvCameraList().then(response => {
      //   this.cameraList=response.data
      // })
      // that.initPlugin()
      // setTimeout(function() {
      //   that.playhk();
      // }, 5000)
      // /** ----------------------------------海康摄像头预览结束------------------------------------- */
      this.TVWallVisible = true

    },
    rotation(lng,lat,list){
      rotation(lng,lat,list).then(res => {
        console.log(res)

      })
    },
    create1(longitude,latitude,tvListJson,array,array1) { // 调用创建控件接口
      let _this = this
      const params = [
        {
          'ctrlType': 'realMonitorUI',
          'ctrlCode': 'ctrl1',
          'ctrlProperty': {
            'displayMode': 1,
            'splitNum': 1,
            'channelList': [
              {
                'channelId': ''
              }
            ]
          },
          'visible': true,
          'domId': 'dom1'
        }
      ]
      this.setPos()
      this.customizeTree(tvListJson);
      _this.ws.createCtrl(params);
      _this.playRealMonitorVideo(array)
      setTimeout(() => {
        _this.rotation(longitude,latitude,array1)
      }, 5000)
    },
    showTVWall() {
      // let that=this;
      /** ----------------------------------大华摄像头预览开始------------------------------------- */
      this.ws.addEventListener('connectStateChange', data => {
        if (data) {
          console.log('连接成功')
        } else {
          console.log('连接失败，下载客户端')
          this.alertReinstall()
          this.isShowTipe && this.$modal.confirm({
            title: '下载客户端',
            content: '检测到您未安装部分插件,将影响部分功能使用，请下载后使用？',
            onOk: () => {
              //这里写下载方法
              this.isShowTipe = false
            },
            onCancel: () => {
              this.isShowTipe = false
            }
          });
        }
      })
      this.preview()
      /** ----------------------------------大华摄像头预览结束------------------------------------- */
      /** ----------------------------------海康摄像头预览开始------------------------------------- */
      // tvCameraList().then(response => {
      //   this.cameraList=response.data
      // })
      // that.initPlugin()
      // setTimeout(function() {
      //   that.playhk();
      // }, 5000)
      // /** ----------------------------------海康摄像头预览结束------------------------------------- */
      this.TVWallVisible = true
    },
    /** ----------------------------------大华摄像头预览开始------------------------------------- */
    alertLogin: function() {
      this.$modal.msg('登录中....')
    },
    alertLoginSuccess: function() {
      this.$modal.msgSuccess('登录成功！')
    },
    alertLoginFailed: function() {
      this.$modal.msgError('登陆失败！')
    },
    alertReinstall: function() {
      this.$modal.msgWarning('请重新安装客户端')
    },
    /** 预览按钮操作 */
    preview() {
      getTVWallList().then(newres => {
        getDahuaVideoServer().then(newResponse => {
          this.ws.detectConnectQt().then(res => {
            if (res) { // 连接客户端成功
              this.alertLogin()
              this.ws.login({
                loginIp: newResponse.loginIp,
                loginPort: newResponse.loginPort,
                userName: newResponse.userName,
                userPwd: newResponse.userPwd,
                // loginIp: '192.168.100.100',
                // loginPort: 8314,
                // userName: 'system',
                // userPwd: 'Admin@123',
                token: '',
                https: 1
              })
              this.ws.on('loginState', (res) => {
                this.isLogin = res
                console.log('---res-----', res)
                if (res) {
                  this.alertLoginSuccess()
                  this.activePanel = 'key2'
                  this.create(newres.data)
                } else {
                  this.alertLoginFailed()
                }
              })
            } else { // 连接客户端失败
              this.alertReinstall()
            }
          })
        })
      })
    },

    create(tvListJson) { // 调用创建控件接口
      let _this = this
      const params = [
        {
          'ctrlType': 'realMonitorUI',
          'ctrlCode': 'ctrl1',
          'ctrlProperty': {
            'displayMode': 1,
            'splitNum': 1,
            'channelList': [
              {
                'channelId': ''
              }
            ]
          },
          'visible': true,
          'domId': 'dom1'
        }
      ]
      this.setPos()
      this.customizeTree(tvListJson);
      setTimeout(function () {
        _this.ws.createCtrl(params);
      }, 3000);
    },
    setPos() {
      let target = document.getElementById(this.domId)
      console.log(target, 'target')
      target.style.right = `${this.crtPosX}px`
      target.style.top = `${this.crtPosY}px`
      target.style.width = `${this.crtWidth}px`
      target.style.height = `${this.crtHeight}px`
      if (document.createEvent) {
        var event = document.createEvent('HTMLEvents')
        event.initEvent('resize', true, true)
        window.dispatchEvent(event)
      } else if (document.createEventObject) {
        window.fireEvent('onresize')
      }
    },
    destroy() { // 调用销毁控件接口
      if (!this.isLogin) {
        this.$modal.msgWarning('正在登陆客户端，请稍等......')
        return false
      }
      const ctrls = this.ws.ctrls.map(i => {
        if (i.ctrlCode === this.ctrl) {
          return i.ctrlCode
        }
      })
      this.ws.destroyCtrl(ctrls)
    },
    customizeTree(tvListJson) { // 调用控件接口树
      const config = this.ws.config
      const { loginIp, userCode } = config
      this.ws.postMessage('customizeTree', {
        loginIp,
        userCode,
        params: {
          array: tvListJson
        }
      })
    },
    /** ----------------------------------大华摄像头预览结束------------------------------------- */
    /** ----------------------------------海康摄像头预览开始------------------------------------- */
    // 创建播放实例
    initPlugin() {
      let that=this
      that.oWebControl = new WebControl({
        szPluginContainer: 'playWnd',                       // 指定容器id
        iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
        iServicePortEnd: 15909,
        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',   // 用于IE10使用ActiveX的clsid
        cbConnectSuccess: function() {                     // 创建WebControl实例成功
          that.oWebControl.JS_StartService('window', {         // WebControl实例创建成功后需要启动服务
            dllPath: './VideoPluginConnect.dll'         // 值"./VideoPluginConnect.dll"写死
          }).then(function() {                           // 启动插件服务成功
            that.oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
              cbIntegrationCallBack: cbIntegrationCallBack
            })

            that.oWebControl.JS_CreateWnd('playWnd', 850, 615).then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
              that.init()  // 创建播放实例成功后初始化
            })
          }, function() { // 启动插件服务失败
          })
        },
        cbConnectError: function() { // 创建WebControl实例失败
          that.oWebControl = null
          $('#playWnd').html('插件未启动，正在尝试启动，请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
          WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
          initCount++
          if (initCount < 3) {
            setTimeout(function() {
              that.initPlugin()
            }, 3000)
          } else {
            $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
          }
        },
        cbConnectClose: function(bNormalClose) {
          // 异常断开：bNormalClose = false
          // JS_Disconnect正常断开：bNormalClose = true
          console.log('cbConnectClose')
          that.oWebControl = null
        }
      })
    },
    //初始化
    init() {
      let that=this
      this.getPubKey(function() {
        ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
        var appkey = '24699060'                           //综合安防管理平台提供的appkey，必填
        var secret = that.setEncrypt('tt1pMbsrlwGZUWucdAPw')   //综合安防管理平台提供的secret，必填
        var ip = '36.49.108.22'                           //综合安防管理平台IP地址，必填
        var playMode = 0                                  //初始播放模式：0-预览，1-回放
        var port = 1443                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
        var snapDir = 'D:\\SnapDir'                       //抓图存储路径
        var videoDir = 'D:\\VideoDir'                     //紧急录像或录像剪辑存储路径
        var layout = '3x3'                                //playMode指定模式的布局
        var enableHTTPS = 1                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
        var encryptedFields = 'secret'					   //加密字段，默认加密领域为secret
        var showToolbar = 1                               //是否显示工具栏，0-不显示，非0-显示
        var showSmart = 1                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
        var buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769'  //自定义工具条按钮
        ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

        that.oWebControl.JS_RequestInterface({
          funcName: 'init',
          argument: JSON.stringify({
            appkey: appkey,                            //API网关提供的appkey
            secret: secret,                            //API网关提供的secret
            ip: ip,                                    //API网关IP地址
            playMode: playMode,                        //播放模式（决定显示预览还是回放界面）
            port: port,                                //端口
            snapDir: snapDir,                          //抓图存储路径
            videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
            layout: layout,                            //布局
            enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
            encryptedFields: encryptedFields,          //加密字段
            showToolbar: showToolbar,                  //是否显示工具栏
            showSmart: showSmart,                      //是否显示智能信息
            buttonIDs: buttonIDs                       //自定义工具条按钮
          })
        }).then(function(oData) {
          that.oWebControl.JS_Resize(850, 615)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
        })
      })
    },
    //获取公钥
    getPubKey(callback) {
      let that=this
      that.oWebControl.JS_RequestInterface({
        funcName: 'getRSAPubKey',
        argument: JSON.stringify({
          keyLength: 1024
        })
      }).then(function(oData) {
        console.log(oData)
        if (oData.responseMsg.data) {
          that.pubKey = oData.responseMsg.data
          callback()
        }125
      })
    },
//RSA加密
    setEncrypt(value) {
      var encrypt = new JSEncrypt()
      encrypt.setPublicKey(this.pubKey)
      return encrypt.encrypt(value)
    },
    //播放海康摄像头
    playhk(channelCode){
      var cameraIndexCode = channelCode     //获取输入的监控点编号值，必填
      var streamMode = 0                                     //主子码流标识：0-主码流，1-子码流
      var transMode = 1                                      //传输协议：0-UDP，1-TCP
      var gpuMode = 0                                        //是否启用GPU硬解，0-不启用，1-启用
      var wndId = -1                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）

      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')

      this.oWebControl.JS_RequestInterface({
        funcName: 'startPreview',
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode,                //监控点编号
          streamMode: streamMode,                         //主子码流标识
          transMode: transMode,                           //传输协议
          gpuMode: gpuMode,                               //是否开启GPU硬解
          wndId: wndId                                     //可指定播放窗口
        })
      })
    }
    /** ----------------------------------海康摄像头预览结束------------------------------------- */
  }
}

// 推送消息
function cbIntegrationCallBack(oData) {
  console.log(JSON.stringify(oData.responseMsg))
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/assets/styles/base.scss';

.event-info-con {
  width: 100%;
  display: flex;

  .e-left {
    width: 32%;
  }

  .e-center {
    width: 30%;
    margin-left: 1%;

    .img-company {
      width: 100%;
      height: 18.3vh;

      img {
      }
    }
  }

  .e-right {
    margin-left: 1%;
    width: 45%;
  }

  .e-location-left {
    width: 28%;
    margin-top: 1rem;
  }

  .e-location-right {
    width: 71%;
    margin-top: 1.3rem;
    margin-left: 1rem;
  }
}

.el-dialog:not(.is-fullscreen) {
  margin-top: 5.5vh !important;
}

.bottom-menu-normal {
  max-width: 90%;
  padding: 0 3rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 100000;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
  background-size: cover;
  overflow: hidden;

  .btm-m-con {
    position: relative;
    color: $inBlue;
    font-size: .5rem;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    white-space: nowrap;

    i {
      font-size: 1rem;
      color: $inBlue;
      text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
      margin-right: 0.2rem;
    }
  }

  .btm-m-con:hover {
    text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
    filter: brightness(2.3);
    -webkit-transform: translateX(0.2rem);
    transform: translateX(0.2rem);
    transition: all 0.2s ease-in-out;

    i {
      color: $inBlueHover;
      text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
    }
  }

  .m-l-none {
    .el-input__inner {
      margin-left: 0 !important;
    }
  }

}

/*海康*/
html, body {
  padding: 0;
  margin: 0;
}

.playWnd {
  margin: -13px 0 0 255px;
  width: 850px; /*播放容器的宽和高设定*/
  height: 615px;
  border: 1px solid red;
}

.operate {
  margin-top: 24px;
}

.operate::after {
  content: '';
  display: block;
  clear: both;
}

.module {
  float: left;
  width: 340px;
  /*min-height: 320px;*/
  margin-left: 16px;
  padding: 16px 8px;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
}

.module .item {
  margin-bottom: 4px;
}

.module input[type="text"] {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0;
  width: 150px;
  min-height: 20px;
}

.module .btn {
  min-width: 80px;
  min-height: 24px;
  margin-top: 100px;
  margin-left: 80px;
}
</style>