store-management-app/src/pages/painting/index.vue

<template>
    <view class="content">
      <navBar> 入库 </navBar>
      <view class="container-box">
        <span style="font-weight: bold">
          已扫画筒号：{{ }}
        </span>
        <span style="margin-top: 40rpx;">
            请放入：
        </span>
        <view class="painting-box" >
          <span style="font-weight: bold;text-align: center;">{{  }}货架</span>
          <up-line style="margin-top: 20rpx;"></up-line>
          <span style="color: #CF3050;font-size: 24px;text-align: center;margin-top: 20rpx;">
            A1
          </span>
          <span style="text-align: center;margin-top: 20rpx;">
            A列1行
          </span>
        </view>
      
      </view>
    </view>
    <view class="button-container">
        <up-button
          style="width: 326rpx; margin: auto; height: 80rpx;"
          color="#BCBCBC"
          throttleTime="5"
          :loading="loading"
          >取消</up-button
        >
        <up-button
          style="width: 326rpx; margin: auto; height: 80rpx;"
          color="#EFC54E"
          throttleTime="5"
          :loading="loading"
          >确认</up-button
        >
      </view>
  </template>
  
  
  <script setup>
  import { ref } from "vue";
  </script>
  
  <style lang="scss" scoped>
  page {
    background: url("@/static/bgp.png") no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    height: 100vh;
    box-sizing: border-box;
  }
  
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
    .container-box {
      height: 100%;
      width: 98%;
      display: flex;
      flex-direction: column;
      margin-top: 60rpx;
      padding: 40rpx;
      box-sizing: border-box;

    }
  
  
    .painting-box {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-top: 20rpx;
      padding: 20rpx;
      box-sizing: border-box;
      background-color: #fff;
      box-shadow: 0 0 6px rgba(219, 218, 218, 0.5);
    }
  }
  .button-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      position: fixed;
      bottom: 20rpx;
      left: 0;
      padding: 0 20rpx;
      box-sizing: border-box;
      background-color: #fff;
      height: 8%;
    }
  </style>