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

<template>
  <view class="content">
    <navBar> 添加画作 </navBar>
    <view class="container-box">
      <span style="font-weight: bold">
        已扫画筒号：{{ }}
      </span>
      <view style="display: flex; align-items: center;">
        <up-input class="login-input" placeholder="画家姓名/编号/画作编号/画作名称" style="flex: 1; margin-right: 10rpx;" clearable>
        </up-input>

        <up-button style="width: 120rpx;
          height: 80rpx;
          margin-top: 15rpx;
          margin-left: 15rpx;" color="#EFC54E" throttleTime="5" :loading="loading" @click="login">搜索</up-button>
      </view>
      <view class="painting-box" >
        <span style="display: flex; align-items: center;">
          <up-image :show-loading="true" :src="src" width="100px" height="100px" @click="click"></up-image>
          <span style="display: flex; flex-direction: column; margin-left: 10px;">
            <span style="font-weight: bold;">画作名称</span>
            <span style="color:#BCBCBC;font-size: 16px;">画作编号：</span>
            <span style="color:#BCBCBC;font-size: 16px;">画家编号：</span>
            <span style="color:#BCBCBC;font-size: 16px;">画家姓名：</span>
            <span style="color:#BCBCBC;font-size: 16px;">平尺（寸）：</span>
          </span>
        </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: 95%;
    display: flex;
    flex-direction: column;
    margin-top: 40rpx;
    padding: 40rpx;
    box-sizing: border-box;
    background-color: #fff;
  }

  .login-input {
    width: 80%;
    display: flex;
    background-color: #f9f9f9;
    margin-top: 20rpx;
    padding: 32rpx 24rpx;
    box-sizing: border-box;
    height: 96rpx;
  }

  .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>