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