316 lines
6.9 KiB
Vue
316 lines
6.9 KiB
Vue
|
<template>
|
|||
|
|
<view class="plsbuy-contain">
|
|||
|
|
<view class="plsbuy-title">
|
|||
|
|
<image class="plsbuy-title-img" :src="`/static/index/project3.png`" />
|
|||
|
|
<view class="plsbuy-title-font">
|
|||
|
|
<view class="plsbuy-title-weight">纸尿裤-拉拉裤</view>
|
|||
|
|
<view class="plsbuy-title-flex">
|
|||
|
|
<view class="popup-right-font-contain">
|
|||
|
|
<view class="popup-font-left">
|
|||
|
|
规格型号：
|
|||
|
|
</view>
|
|||
|
|
<view class="popup-font-right">
|
|||
|
|
800mm*690mm
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="popup-right-font-contain" style="margin-left: 40rpx;">
|
|||
|
|
<view class="popup-font-left">
|
|||
|
|
采购单位：
|
|||
|
|
</view>
|
|||
|
|
<view class="popup-font-right">
|
|||
|
|
片
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="plsbuy-title-flex">
|
|||
|
|
<view class="popup-right-font-contain">
|
|||
|
|
<view class="popup-font-left">
|
|||
|
|
库存上限：
|
|||
|
|
</view>
|
|||
|
|
<view class="popup-font-right">
|
|||
|
|
1000
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="popup-right-font-contain" style="margin-left: 40rpx;">
|
|||
|
|
<view class="popup-font-left">
|
|||
|
|
库存下限：
|
|||
|
|
</view>
|
|||
|
|
<view class="popup-font-right">
|
|||
|
|
10
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="plsbuy-title-flex">
|
|||
|
|
<view class="popup-right-font-contain">
|
|||
|
|
<view class="popup-font-left">
|
|||
|
|
库存数量：
|
|||
|
|
</view>
|
|||
|
|
<view class="popup-font-right">
|
|||
|
|
50
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="plsbuy-card">
|
|||
|
|
<scroll-view scroll-y style="height: 100%;" :show-scrollbar="true">
|
|||
|
|
<view class="" v-for="(item,index) in [0,1,2,3,3,4]" :key="index">
|
|||
|
|
<view class="plsbuy-card-heng">
|
|||
|
|
<view class="plsbuy-weight">供应商：</view>
|
|||
|
|
<view class="plsbuy-font-right">长春市永佳利商贸有限公司1</view>
|
|||
|
|
<view class="plsbuy-right-weight">采购数量</view>
|
|||
|
|
<view class="plsbuy-jian" @click="calNumber--">-</view>
|
|||
|
|
<view class="plsbuy-number">{{calNumber}}</view>
|
|||
|
|
<view class="plsbuy-jia" @click="calNumber++">+</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<!-- <div class="blur-overlay"></div> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="plsbuy-amount">
|
|||
|
|
<view class="plsbuy-amount-font">
|
|||
|
|
合计：
|
|||
|
|
</view>
|
|||
|
|
<view class="plsbuy-amount-red">
|
|||
|
|
100
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="plsbuy-bottom">
|
|||
|
|
<view class="plsbuy-bottom-blue">
|
|||
|
|
新增供应商
|
|||
|
|
</view>
|
|||
|
|
<view class="plsbuy-bottom-blue">
|
|||
|
|
确认
|
|||
|
|
</view>
|
|||
|
|
<view class="plsbuy-bottom-white" @click="closeIt">
|
|||
|
|
取消
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import {
|
|||
|
|
ref,
|
|||
|
|
onMounted,
|
|||
|
|
onBeforeUnmount,
|
|||
|
|
computed,
|
|||
|
|
nextTick,
|
|||
|
|
defineProps,
|
|||
|
|
watch
|
|||
|
|
} from 'vue';
|
|||
|
|
const emit = defineEmits(['closeIt'])
|
|||
|
|
const calNumber = ref(50);
|
|||
|
|
const closeIt = () =>{
|
|||
|
|
emit('closeIt')
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.plsbuy-contain {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.plsbuy-title {
|
|||
|
|
background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.5);
background-blend-mode: screen;
isolation: isolate;
|
|||
|
|
width: 1120rpx;
|
|||
|
|
height: 250rpx;
|
|||
|
|
margin-top: 50rpx;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.plsbuy-title-img {
|
|||
|
|
height: 220rpx;
|
|||
|
|
width: 220rpx;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
margin-right: 80rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plsbuy-card {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
margin-left: 35rpx;
|
|||
|
|
margin-right: 35rpx;
|
|||
|
|
width: calc(100% - 70rpx);
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
position: relative;
|
|||
|
|
height: 300rpx;
|
|||
|
|
|
|||
|
|
/* 虚化覆盖层 */
|
|||
|
|
.blur-overlay {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0rpx;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 40rpx;
|
|||
|
|
|
|||
|
|
/* 背景模糊效果 */
|
|||
|
|
backdrop-filter: blur(3rpx);
|
|||
|
|
-webkit-backdrop-filter: blur(3rpx);
|
|||
|
|
|
|||
|
|
/* 可选：为了更明显的虚化效果，可加个半透明背景 */
|
|||
|
|
// background-color: rgba(255, 255, 255, 0.2);
|
|||
|
|
|
|||
|
|
/* 层级关系：确保覆盖在背景内容之上 */
|
|||
|
|
z-index: 2;
|
|||
|
|
|
|||
|
|
/* 如果页面使用 flex 布局或其他定位方式，根据需要进行调整 */
|
|||
|
|
pointer-events: none;
|
|||
|
|
/* 如果不希望干扰下面内容的点击，可加上此属性 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plsbuy-card-heng {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 100rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plsbuy-title-font {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 820rpx;
|
|||
|
|
|
|||
|
|
.plsbuy-title-weight {
|
|||
|
|
font-size: 35rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
width: 100%;
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-right-font-contain {
|
|||
|
|
display: flex;
|
|||
|
|
width: 50%;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-font-left {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
line-height: 30rpx;
|
|||
|
|
color: #646464;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-font-right {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
line-height: 30rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plsbuy-title-flex {
|
|||
|
|
display: flex;
|
|||
|
|
width: 100%;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plsbuy-weight {
|
|||
|
|
font-weight: 700;
|
|||
|
|
font-size: 35rpx;
|
|||
|
|
margin-left: 50rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plsbuy-right-weight {
|
|||
|
|
font-weight: 700;
|
|||
|
|
font-size: 35rpx;
|
|||
|
|
margin-left: 140rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plsbuy-font-right {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
line-height: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plsbuy-jian {
|
|||
|
|
background-color: #D3E7FF;
|
|||
|
|
width: 70rpx;
|
|||
|
|
height: 70rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin-left: 30rpx;
|
|||
|
|
border: 1rpx solid #313A4E;
|
|||
|
|
font-size: 35rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plsbuy-number {
|
|||
|
|
font-weight: 700;
|
|||
|
|
margin: 0 20rpx;
|
|||
|
|
width: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plsbuy-jia {
|
|||
|
|
background-color: #D3E7FF;
|
|||
|
|
width: 70rpx;
|
|||
|
|
height: 70rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
border: 1rpx solid #313A4E;
|
|||
|
|
font-size: 35rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plsbuy-amount {
|
|||
|
|
width: 100%;
|
|||
|
|
justify-content: end;
|
|||
|
|
display: flex;
|
|||
|
|
font-size: 35rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
.plsbuy-amount-font {
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plsbuy-amount-red {
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: red;
|
|||
|
|
margin-right: 60rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plsbuy-bottom {
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
height: 70rpx;
|
|||
|
|
// background-color: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 35rpx;
|
|||
|
|
.plsbuy-bottom-blue {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 230rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
|||
|
|
color: #fff;
|
|||
|
|
border: 1rpx #fff solid;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plsbuy-bottom-white {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 230rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background: linear-gradient(to bottom, #D5E0F8, #ECF6FF);
|
|||
|
|
// color: #fff;
|
|||
|
|
border: 1rpx #fff solid;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|