413 lines
9.2 KiB
Vue
413 lines
9.2 KiB
Vue
|
<!-- 悬浮球-详情进来的版 -->
|
|||
|
|
<template>
|
|||
|
|
<view class="draw-all">
|
|||
|
|
<view class="draw-title">
|
|||
|
|
<view class="draw-flex">
|
|||
|
|
<view class="draw-title-gun"></view>
|
|||
|
|
<view class="draw-title-font">请购清单</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="draw-blue">
|
|||
|
|
请购单号:A0120250301001
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="draw-contain">
|
|||
|
|
<view class="scroll-view">
|
|||
|
|
<scroll-view scroll-y style="height: 100%;margin-top: 2%;" :show-scrollbar="false">
|
|||
|
|
<view class="swiper-flex">
|
|||
|
|
<view v-for="(item,index) in [1,1,1,1,1,1,1,1,1,1,1,1,1]" :key="index">
|
|||
|
|
<view class="swiper-card">
|
|||
|
|
<!-- 卡片内容 -->
|
|||
|
|
<view class="swiper-card-top">
|
|||
|
|
<image class="swiper-card-top-img" :src="`/static/index/project3.png`" />
|
|||
|
|
<view class="swiper-card-top-card">
|
|||
|
|
<view class="swiper-card-top-card-weight">
|
|||
|
|
<view class="weight-left">
|
|||
|
|
纸尿裤-拉拉裤
|
|||
|
|
</view>
|
|||
|
|
<view class="weight-right" style="width: 40%;">
|
|||
|
|
采购数量：50
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="swiper-card-top-card-noral">
|
|||
|
|
<view class="swiper-all-flex">
|
|||
|
|
<view class="swiper-gray">
|
|||
|
|
规格型号：
|
|||
|
|
</view>
|
|||
|
|
<view class="swiper-black">
|
|||
|
|
800mm*690mm
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="swiper-card-top-card-noral">
|
|||
|
|
<view class="swiper-all-flex">
|
|||
|
|
<view class="swiper-gray">
|
|||
|
|
采购单位：
|
|||
|
|
</view>
|
|||
|
|
<view class="swiper-black">
|
|||
|
|
片
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="swiper-all-flex" style="width: 40%;">
|
|||
|
|
<view class="swiper-gray">
|
|||
|
|
库存数量：
|
|||
|
|
</view>
|
|||
|
|
<view class="swiper-black">
|
|||
|
|
50
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="swiper-card-top-card-noral">
|
|||
|
|
<view class="swiper-all-flex">
|
|||
|
|
<view class="swiper-gray">
|
|||
|
|
库存下限：
|
|||
|
|
</view>
|
|||
|
|
<view class="swiper-black">
|
|||
|
|
10
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="swiper-all-flex" style="width: 40%;">
|
|||
|
|
<view class="swiper-gray">
|
|||
|
|
库存上限：
|
|||
|
|
</view>
|
|||
|
|
<view class="swiper-black">
|
|||
|
|
1000
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="swiper-card-down">
|
|||
|
|
<view class="down-left">
|
|||
|
|
<view class="down-left-weight">
|
|||
|
|
供应商：
|
|||
|
|
</view>
|
|||
|
|
<view class="down-left-font">
|
|||
|
|
长春市永佳利商贸有限公司1
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <image class="delete-img" :src="`/static/index/deleteIt.png`" /> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
<view class="down-note">
|
|||
|
|
<textarea disabled="" class="down-note-title-input" v-model="note" maxlength="300" placeholder-style="color:#999"
|
|||
|
|
placeholder="该请购单未备注" />
|
|||
|
|
<text class="char-count">{{ note.length }}/300</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="down-note">
|
|||
|
|
<textarea class="down-note-title-input" v-model="note" maxlength="300" placeholder-style="color:#999"
|
|||
|
|
placeholder="请输入备注" />
|
|||
|
|
<text class="char-count">{{ note.length }}/300</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="down-button">
|
|||
|
|
<view class="swiper-left-button-orange">
|
|||
|
|
清空
|
|||
|
|
</view>
|
|||
|
|
<view class="swiper-left-button-blue">
|
|||
|
|
保存
|
|||
|
|
</view>
|
|||
|
|
<view class="swiper-left-button-blue" style="margin-right: 40rpx;">
|
|||
|
|
提交
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits, watch } from 'vue';
|
|||
|
|
const note = ref("");
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
// 抽屉的css
|
|||
|
|
.draw-all {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
background: url("/static/index/clearmountain.png") center/cover, rgba(255, 255, 255, 0.4);
|
|||
|
|
background-blend-mode: screen;
|
|||
|
|
isolation: isolate;
|
|||
|
|
/* 白色背景透明度为 10% */
|
|||
|
|
// background-image: url('/static/index/mountain.png');
|
|||
|
|
// background-blend-mode: screen;
|
|||
|
|
// background-position: 30% 50%;
|
|||
|
|
border-top-left-radius: 80rpx;
|
|||
|
|
border-bottom-left-radius: 80rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.draw-flex {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// position: relative;
|
|||
|
|
.draw-title {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 140rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding-top: 68rpx;
|
|||
|
|
|
|||
|
|
.draw-title-gun {
|
|||
|
|
margin-left: 60rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
width: 13rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
background: linear-gradient(to bottom, #04BCED, #0160CE);
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.draw-title-font {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.draw-contain {
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100vh - 140rpx);
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 弹窗遮罩层 */
|
|||
|
|
.modal {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
/* 半透明背景 */
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
/* 垂直居中 */
|
|||
|
|
justify-content: center;
|
|||
|
|
/* 水平居中 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 弹窗内容，宽高占屏幕70% */
|
|||
|
|
.modal-content {
|
|||
|
|
width: 80vw;
|
|||
|
|
height: 80vh;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.draw-blue {
|
|||
|
|
color: #0090FF;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
margin-right: 45rpx;
|
|||
|
|
margin-top: 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-flex {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-left: 0rpx;
|
|||
|
|
|
|||
|
|
.swiper-card {
|
|||
|
|
margin: 0 0 30rpx 30rpx;
|
|||
|
|
width: 900rpx;
|
|||
|
|
height: 360rpx;
|
|||
|
|
border: 2rpx solid #fff;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.5);
|
|||
|
|
background-blend-mode: screen;
|
|||
|
|
isolation: isolate;
|
|||
|
|
box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.swiper-card-top {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 270rpx;
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.swiper-card-top-img {
|
|||
|
|
width: 250rpx;
|
|||
|
|
height: 250rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
margin-left: 30rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-card-top-card {
|
|||
|
|
// background-color: #fff;
|
|||
|
|
width: calc(100% - 260rpx);
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.swiper-card-top-card-weight {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 35rpx;
|
|||
|
|
|
|||
|
|
.weight-left {
|
|||
|
|
font-weight: 700;
|
|||
|
|
font-size: 35rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.weight-right {
|
|||
|
|
color: #FF6000;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-card-top-card-noral {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 15rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-card-down {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 90rpx;
|
|||
|
|
display: flex;
|
|||
|
|
background: linear-gradient(to right, #ceddff, #f3effa, #d1dafe);
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.down-left {
|
|||
|
|
display: flex;
|
|||
|
|
margin-left: 50rpx;
|
|||
|
|
|
|||
|
|
.down-left-weight {
|
|||
|
|
font-weight: 700;
|
|||
|
|
font-size: 25rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.down-left-font {
|
|||
|
|
font-size: 25rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-all-flex {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-gray {
|
|||
|
|
color: #596278;
|
|||
|
|
font-size: 25rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-black {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.delete-img {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 45rpx;
|
|||
|
|
margin-right: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.down-note {
|
|||
|
|
width: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
height: 15%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.downitems-center-says {
|
|||
|
|
display: flex;
|
|||
|
|
color: #6F7FA3;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
margin-top: 25rpx;
|
|||
|
|
margin-right: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.downitems-center-father {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #BAC5DE;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
margin-top: 0rpx;
|
|||
|
|
|
|||
|
|
.downitems-center-says-maike {
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 30rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.down-note-title-input {
|
|||
|
|
width: calc(100% - 100rpx);
|
|||
|
|
margin-left: 40rpx;
|
|||
|
|
// margin-top: 10rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
font-size: 27rpx;
|
|||
|
|
border: 2rpx #a0adc8 solid;
|
|||
|
|
padding: 15rpx 0 15rpx 20rpx;
|
|||
|
|
background-color: rgba(234, 243, 254,0.6);
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.down-button {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 8%;
|
|||
|
|
|
|||
|
|
.swiper-left-button-blue {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 160rpx;
|
|||
|
|
height: 70rpx;
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-left-button-orange {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 160rpx;
|
|||
|
|
height: 70rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background: linear-gradient(to right bottom, #FF9323, #FF5038);
|
|||
|
|
color: #fff;
|
|||
|
|
border: 1rpx #fff solid;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.char-count {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 30rpx;
|
|||
|
|
right: 70rpx;
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 25rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-view {
|
|||
|
|
height: 85%;
|
|||
|
|
width: calc(100% - 80rpx);
|
|||
|
|
margin-left: 40rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
border: 2rpx solid #fff;
|
|||
|
|
box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
</style>
|