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

120 lines
3.1 KiB
Vue
Raw Normal View History

2024-09-11 06:57:03 +00:00
<template>
<view class="content">
<navBar v-if="!isDetail"> 出库 </navBar>
<navBar v-if="isDetail"> 画作详情 </navBar>
<view class="container-box" >
<span style="font-weight: bold;text-align: center;" v-if="!isDetail">
保存要出库A000-B3的
</span>
<span style="font-weight: bold;text-align: center;margin-top: 20rpx;" v-if="!isDetail"> PT00000004画筒吗</span>
<span style="font-weight: bold;text-align: center;" v-if="isDetail">画筒号</span>
<span style="font-weight: bold;text-align: center;margin-top: 20rpx;" v-if="isDetail">所在位置</span>
<view class="painting-box" >
<span>画作名称</span>
<span style="margin-top: 20rpx;">画家</span>
<span style="margin-top: 20rpx;">预览图</span>
<view class="image-container">
<up-image
:show-loading="true"
:src="src"
width="98%"
height="100px"
@click="click"
></up-image>
</view>
</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
>
<up-button
style="width: 426rpx; margin: auto; height: 86rpx;"
color="#EFC54E"
throttleTime="5"
:loading="loading"
@click="login"
v-if="isDetail"
>返回继续扫码</up-button
>
</view>
</template>
<script setup>
import { ref } from "vue";
const isDetail = ref(false);
</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: 60rpx;
padding: 20rpx;
box-sizing: border-box;
background-color: #fff;
box-shadow: 0 0 6px rgba(219, 218, 218, 0.5);
}
.image-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20rpx;
}
}
.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>