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