<template>
  <view class="flex-col section_1">
    <view class="flex-row-center-center page__title">监控台</view>
    <view class="flex-col group_5">
      <view class="flex-col group_6">
        <text class="text_3">添加设备</text>
        <text class="text_4">开始构架你的数字车间</text>
      </view>
      <view class="flex-col items-center text-wrapper" @click="go2('device-operation', { operation: 'add' })">
        <text>添加设备</text>
      </view>
    </view>
  </view>
</template>

<script>
import { go2 } from '@/utils/hook.js'
export default {
  methods: {
    go2
  }
}
</script>

<style lang="scss" scoped>
.section_1 {
  padding: 4rpx 0 302rpx;
  background-image: url('https://qncloud.oss-cn-shenzhen.aliyuncs.com/print-package-app/digital-workshop-bg.png');
  background-position: 0px 0px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .page__title {
    font-size: 34rpx;
    color: rgb(255, 255, 255);
    margin-top: 56rpx;
  }
  .group_5 {
    margin-top: 42rpx;
    padding: 0 32rpx;
    .group_6 {
      padding-bottom: 34rpx;
      .text_3 {
        color: rgb(255, 255, 255);
        font-size: 38rpx;
        font-weight: 500;
        line-height: 53rpx;
        white-space: nowrap;
      }
      .text_4 {
        margin-top: 5rpx;
        color: rgb(255, 255, 255);
        font-size: 34rpx;
        line-height: 48rpx;
        white-space: nowrap;
      }
    }
    .text-wrapper {
      padding: 18rpx 0;
      color: rgb(0, 122, 255);
      font-size: 32rpx;
      font-weight: 500;
      line-height: 45rpx;
      white-space: nowrap;
      background-color: rgb(255, 255, 255);
      border-radius: 40rpx;
      width: 200rpx;
    }
  }
}
</style>
