1111
This commit is contained in:
parent
be1d539bd4
commit
3e8417d555
|
|
@ -1,12 +1,13 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 遮罩层 -->
|
||||
<view v-if="isVisible" class="overlay" @click="closeDrawer"></view>
|
||||
<!-- 遮罩层，display 由 v-show 控制，opacity 由 overlay-show 类控制 -->
|
||||
<view v-show="isVisible" :class="['overlay', { 'overlay-show': isVisible }]" @click="closeDrawer" />
|
||||
|
||||
<!-- 抽屉 -->
|
||||
<view :class="['drawer', { 'drawer-open': isVisible }]" :style="drawerStyle">
|
||||
<view class="drawer-content">
|
||||
<!-- 抽屉中间的半圆 -->
|
||||
<view class="drawer-content-circle" @click="closeDrawer">
|
||||
<view v-show="isVisible" class="drawer-content-circle" @click="closeDrawer">
|
||||
<image class="drawer-img" src="/static/index/zuoyuan.png" />
|
||||
</view>
|
||||
<!-- 抽屉内容 -->
|
||||
|
|
@ -20,42 +21,39 @@
|
|||
import {
|
||||
ref,
|
||||
defineProps,
|
||||
withDefaults,
|
||||
computed
|
||||
} from 'vue';
|
||||
} from 'vue'
|
||||
|
||||
const isVisible = ref(false);
|
||||
// 控制抽屉显示隐藏
|
||||
const isVisible = ref(false)
|
||||
|
||||
// 接收父组件传入的宽度百分比
|
||||
const props = defineProps({
|
||||
// 左探头百分之多少
|
||||
widNumber: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: 85
|
||||
}
|
||||
})
|
||||
const drawerStyle = computed(() => {
|
||||
const width = props.widNumber || 85; // 默认宽度为85%
|
||||
const right = isVisible.value ? '0%' : `-${width + 5}%`;
|
||||
|
||||
return {
|
||||
width: `${width}%`,
|
||||
right
|
||||
};
|
||||
});
|
||||
// 打开抽屉
|
||||
const openDrawer = () => {
|
||||
isVisible.value = true;
|
||||
};
|
||||
// 仅动态设置宽度，位置由 transform 控制
|
||||
const drawerStyle = computed(() => ({
|
||||
width: `${props.widNumber}%`
|
||||
}))
|
||||
|
||||
// 关闭抽屉
|
||||
const closeDrawer = () => {
|
||||
isVisible.value = false;
|
||||
};
|
||||
// 对外暴露打开方法
|
||||
function openDrawer() {
|
||||
isVisible.value = true
|
||||
}
|
||||
|
||||
// 对外暴露关闭方法
|
||||
function closeDrawer() {
|
||||
isVisible.value = false
|
||||
}
|
||||
|
||||
// 暴露方法供父组件调用
|
||||
defineExpose({
|
||||
openDrawer,
|
||||
closeDrawer,
|
||||
});
|
||||
closeDrawer
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
@ -68,58 +66,64 @@
|
|||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
/* 确保遮罩层在抽屉下方 */
|
||||
will-change: opacity;
|
||||
transition: opacity 0.3s ease;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
/* 由 v-show 控制 */
|
||||
}
|
||||
|
||||
/* 抽屉样式 */
|
||||
/* 当 isVisible 为 true 时，添加 overlay-show 类，触发遮罩渐显 */
|
||||
.overlay-show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 抽屉整体样式 */
|
||||
.drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
// right: -90%;
|
||||
// width: 85%;
|
||||
right: 0;
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
z-index: 1000;
|
||||
/* 确保抽屉在遮罩层上方 */
|
||||
transition: right 0.5s ease;
|
||||
border-top-left-radius: 80rpx;
|
||||
/* 设置左上角的圆角半径 */
|
||||
border-bottom-left-radius: 80rpx;
|
||||
/* overflow: hidden; */
|
||||
/* 设置左下角的圆角半径 */
|
||||
|
||||
/* 使用 transform 做动画，避免布局重排 */
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.4s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* 抽屉打开时的样式 */
|
||||
/* 抽屉打开时 */
|
||||
.drawer-open {
|
||||
right: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* 抽屉内容样式 */
|
||||
.drawer-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.drawer-content-circle {
|
||||
position: absolute;
|
||||
top: calc(50% - 55rpx);
|
||||
left: -40rpx;
|
||||
width: 100rpx;
|
||||
height: 110rpx;
|
||||
// background-color: #f00;
|
||||
/* border-radius 的两个值分别代表水平和垂直半径 */
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
background: linear-gradient(to bottom, #dfecfa, #c9dbee);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
clip-path: inset(0 60% 0 0);
|
||||
.drawer-content-circle {
|
||||
position: absolute;
|
||||
top: calc(50% - 55rpx);
|
||||
left: -40rpx;
|
||||
width: 100rpx;
|
||||
height: 110rpx;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
background: linear-gradient(to bottom, #dfecfa, #c9dbee);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
clip-path: inset(0 60% 0 0);
|
||||
}
|
||||
|
||||
/* 上 右 下 左，裁掉右半边 */
|
||||
.drawer-img {
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
margin-left: 10rpx;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.drawer-img {
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
margin-left: 10rpx;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,11 +14,9 @@
|
|||
</view>
|
||||
|
||||
<view class="days">
|
||||
<view v-for="cell in cells" :key="cell.key" class="day-cell" :class="{
|
||||
'prev-month': cell.prev,
|
||||
'next-month': cell.next,
|
||||
selected: isSelected(cell.key)
|
||||
}" @click="selectDate(cell)">
|
||||
<view v-for="cell in cells" :key="cell.key" class="day-cell"
|
||||
:class="{'prev-month': cell.prev,'next-month': cell.next,selected: isSelected(cell.key)}"
|
||||
@click="selectDate(cell)">
|
||||
<view class="gregorian">{{ cell.dateText }}</view>
|
||||
<view class="lunar" v-if="cell.lunarText">{{ cell.lunarText }}</view>
|
||||
</view>
|
||||
|
|
@ -66,7 +64,6 @@
|
|||
next: false,
|
||||
});
|
||||
}
|
||||
|
||||
const totalDays = new Date(year.value, month.value + 1, 0).getDate();
|
||||
for (let d = 1; d <= totalDays; d++) {
|
||||
const lunar = solarlunar.solar2lunar(year.value, month.value + 1, d);
|
||||
|
|
@ -78,7 +75,6 @@
|
|||
next: false,
|
||||
});
|
||||
}
|
||||
|
||||
return list;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,242 @@
|
|||
<template>
|
||||
<view class="plsbuy-contain">
|
||||
<view class="draw-title">
|
||||
<view class="draw-flex">
|
||||
<view class="draw-title-gun"></view>
|
||||
<view class="draw-title-font">请购数量</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="calculator-father">
|
||||
<view v-for="(item,index) in calculatorArray" :key="index">
|
||||
<view :class="blueNumber == index ? `calculator-kuai-target` : `calculator-kuai`"
|
||||
@click="clickKuai(item,index)">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="qinggou-font">
|
||||
请购数量
|
||||
</view>
|
||||
<view class="stringShow-father">
|
||||
<view v-for="(item,index) in stringShow" :key="index">
|
||||
<view class="stringShow-kuai">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="plsbuy-bottom">
|
||||
<view class="plsbuy-bottom-blue" @click="closeIt">
|
||||
确认
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
computed,
|
||||
nextTick,
|
||||
watch
|
||||
} from 'vue';
|
||||
const emit = defineEmits(['right'])
|
||||
const blueNumber = ref(-1);
|
||||
const props = defineProps({
|
||||
doOnce: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
translateNumber: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.doOnce,
|
||||
() => {
|
||||
relNumber.value = props.translateNumber
|
||||
stringShow.value = toFixed4ByPadStart(relNumber.value)
|
||||
}
|
||||
)
|
||||
const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, "AC", 0, "CE"];
|
||||
const stringShow = ref("0000");
|
||||
const relNumber = ref(0);
|
||||
// const isZero = ref(false);
|
||||
const clickKuai = (item : any, index : number) => {
|
||||
blueNumber.value = index;
|
||||
setTimeout(() => {
|
||||
blueNumber.value = -1
|
||||
}, 300)
|
||||
if (item == "AC") {
|
||||
relNumber.value = 0;
|
||||
stringShow.value = "0000"
|
||||
return
|
||||
}
|
||||
if (item == "CE") {
|
||||
relNumber.value = Math.trunc(relNumber.value / 10)
|
||||
stringShow.value = toFixed4ByPadStart(relNumber.value)
|
||||
return
|
||||
}
|
||||
|
||||
if (digitCountByString(relNumber.value) > 3) {
|
||||
|
||||
} else {
|
||||
if (!relNumber.value) {
|
||||
relNumber.value = item
|
||||
} else {
|
||||
relNumber.value = relNumber.value * 10 + item;
|
||||
}
|
||||
|
||||
stringShow.value = toFixed4ByPadStart(relNumber.value)
|
||||
}
|
||||
|
||||
}
|
||||
const closeIt = () => {
|
||||
emit('right', relNumber.value)
|
||||
}
|
||||
|
||||
// 这个方法是查看数字有多少位
|
||||
function digitCountByString(n) {
|
||||
// 先处理负数
|
||||
const s = Math.abs(n).toString();
|
||||
// 若不想统计小数点，可去掉小数点后再取长度：
|
||||
// return s.replace('.', '').length;
|
||||
return s.length;
|
||||
}
|
||||
// 这个方法是将Number转为String
|
||||
function toFixed4ByPadStart(n) {
|
||||
// 1. 取绝对值并向下取整，防止小数和负号影响
|
||||
const intPart = Math.floor(Math.abs(n));
|
||||
// 2. 转字符串并 padStart 到长度 4，不足时前面补 '0'
|
||||
return String(intPart).padStart(4, '0');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.plsbuy-contain {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("/static/index/pink.png") center/cover;
|
||||
}
|
||||
|
||||
.draw-title {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 30rpx;
|
||||
.draw-flex {
|
||||
display: flex;
|
||||
}
|
||||
.draw-title-gun {
|
||||
margin-left: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
width: 13rpx;
|
||||
height: 40rpx;
|
||||
background: linear-gradient(to bottom, #04BCED, #0160CE);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.draw-title-font {
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.plsbuy-bottom {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
height: 70rpx;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.calculator-father {
|
||||
width: 420rpx;
|
||||
height: 500rpx;
|
||||
margin-top: 20rpx;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
|
||||
.calculator-kuai {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #DCDCEE;
|
||||
border-radius: 25rpx;
|
||||
font-size: 45rpx;
|
||||
font-weight: 500;
|
||||
margin: 15rpx 20rpx 0 20rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.calculator-kuai-target {
|
||||
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #DCDCEE;
|
||||
border-radius: 25rpx;
|
||||
font-size: 45rpx;
|
||||
font-weight: 500;
|
||||
margin: 15rpx 20rpx 0 20rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.stringShow-father {
|
||||
width: 420rpx;
|
||||
height: 70rpx;
|
||||
margin-top: 20rpx;
|
||||
margin-left: 23rpx;
|
||||
// flex-wrap: wrap;
|
||||
display: flex;
|
||||
|
||||
.stringShow-kuai {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// background-color: #DCDCEE;
|
||||
border-radius: 25rpx;
|
||||
// border-radius: 15rpx;
|
||||
font-size: 45rpx;
|
||||
font-weight: 500;
|
||||
margin: 0 15rpx;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border: 3rpx solid #303C57;
|
||||
}
|
||||
}
|
||||
|
||||
.qinggou-font {
|
||||
font-size: 35rpx;
|
||||
font-weight: 500;
|
||||
margin-top: 10rpx;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,316 +1,488 @@
|
|||
<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);
|
||||
}
|
||||
}
|
||||
<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" style="width: 75%;">
|
||||
<view class="popup-font-left">
|
||||
规格型号：
|
||||
</view>
|
||||
<view class="popup-font-right">
|
||||
800mm*690mm
|
||||
</view>
|
||||
</view>
|
||||
<view class="popup-right-font-contain">
|
||||
<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" style="width: 75%;">
|
||||
<view class="popup-font-left">
|
||||
库存上限：
|
||||
</view>
|
||||
<view class="popup-font-right">
|
||||
1000
|
||||
</view>
|
||||
</view>
|
||||
<view class="popup-right-font-contain">
|
||||
<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 :scroll-top="moveTop" style="height: 100%;width: 1150rpx;" :show-scrollbar="true">
|
||||
<view v-for="(item, index) in shopArray" :key="index" class="plsbuy-card-heng"
|
||||
:class="{ 'slide-out': item.sliding }">
|
||||
<view class="card-flex">
|
||||
<image class="plsbuy-card-img" src="/static/index/subtract.png" @click="startRemove(index)" />
|
||||
<view class="plsbuy-weight">供应商：</view>
|
||||
<view class="plsbuy-font-right">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="card-flex">
|
||||
<view class="plsbuy-right-weight">采购数量</view>
|
||||
<view :class="item.change===1?`plsbuy-jian-target`:`plsbuy-jian`" @click="subtractNumber(item)">
|
||||
-</view>
|
||||
<view :class="saveIndex==index ? `plsbuy-number-target` :`plsbuy-number`" @click="openRightCal(item.many,index)">{{ item.many }}</view>
|
||||
<view :class="item.change===2?`plsbuy-jia-target`:`plsbuy-jia`" @click="addNumber(item)">+
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</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" @click="addNewShop">
|
||||
新增供应商
|
||||
</view>
|
||||
<view class="plsbuy-bottom-blue" @click="closeIt">
|
||||
确认
|
||||
</view>
|
||||
<view class="plsbuy-bottom-white" @click="closeIt">
|
||||
取消
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
computed,
|
||||
nextTick,
|
||||
defineProps,
|
||||
watch
|
||||
} from 'vue';
|
||||
const emit = defineEmits(['closeIt', 'openRight', 'closeRight'])
|
||||
const props = defineProps({
|
||||
saveIndex: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
changeNumber: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
watch(
|
||||
() => props.changeNumber,
|
||||
() => {
|
||||
shopArray.value[props.saveIndex].many = props.changeNumber;
|
||||
}
|
||||
)
|
||||
const calNumber = ref(50);
|
||||
const moveTop = ref(0);
|
||||
const shopName = ref({
|
||||
name: "长春市永佳利商贸有限公司",
|
||||
many: 0,
|
||||
change: 0
|
||||
})
|
||||
const shopArray = ref([{
|
||||
name: "长春市永佳利商贸有限公司",
|
||||
many: 9999,
|
||||
change: 0
|
||||
},
|
||||
{
|
||||
name: "长春市永佳利商贸有限公司",
|
||||
many: 0,
|
||||
change: 0
|
||||
},
|
||||
{
|
||||
name: "长春市永佳利商贸有限公司",
|
||||
many: 0,
|
||||
change: 0
|
||||
},
|
||||
]);
|
||||
const subtractNumber = (item) => {
|
||||
closeRight()
|
||||
item.many && item.many--
|
||||
item.change = 1
|
||||
setTimeout(() => {
|
||||
item.change = 0
|
||||
}, 300)
|
||||
}
|
||||
const addNumber = (item) => {
|
||||
closeRight()
|
||||
item.many < 9999 && item.many++
|
||||
item.change = 2
|
||||
setTimeout(() => {
|
||||
item.change = 0
|
||||
}, 300)
|
||||
}
|
||||
const addNewShop = () => {
|
||||
closeRight()
|
||||
if (canDo.value) {
|
||||
shopArray.value.push(JSON.parse(JSON.stringify(shopName.value)))
|
||||
//他的破组件是监听实现的，所以不这样写，他第二次不刷新
|
||||
moveTop.value = 998;
|
||||
nextTick(() => {
|
||||
moveTop.value = 999;
|
||||
})
|
||||
}
|
||||
}
|
||||
const closeIt = () => {
|
||||
closeRight()
|
||||
emit('closeIt')
|
||||
};
|
||||
const closeRight = () => {
|
||||
emit('closeRight')
|
||||
}
|
||||
const openRightCal = (num : number, index : number) => {
|
||||
emit('openRight', num, index)
|
||||
}
|
||||
const canDo = ref(true);
|
||||
/** 点击「删除」按钮，只把 sliding 设为 true，触发动画 */
|
||||
function startRemove(idx) {
|
||||
closeRight()
|
||||
if (canDo.value) {
|
||||
canDo.value = false;
|
||||
shopArray.value[idx].sliding = true; // 数据驱动触发动画 :contentReference[oaicite:0]{index=0}
|
||||
setTimeout(() => {
|
||||
shopArray.value.splice(idx, 1);
|
||||
canDo.value = true;
|
||||
}, 400)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
/* 滚动条整体样式 */
|
||||
display: block !important;
|
||||
width: 7rpx;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
/* 滚动条里面小方块 */
|
||||
border-radius: 5rpx !important;
|
||||
box-shadow: inset 0 0 1rpx rgba(0, 0, 0, 0.2) !important;
|
||||
background-color: #CCCCCC !important;
|
||||
}
|
||||
|
||||
.plsbuy-contain {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("/static/index/newpink.png") center/cover;
|
||||
|
||||
.plsbuy-title {
|
||||
background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.8);
|
||||
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-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);
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.plsbuy-card-heng {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100rpx;
|
||||
|
||||
.plsbuy-card-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
// justify-content: space-around;
|
||||
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-jian-target {
|
||||
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
||||
color: #fff;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
border: 1rpx solid #fff;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
.plsbuy-number {
|
||||
border: 1rpx solid #313A4E;
|
||||
// padding: 10rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
margin: 0 10rpx;
|
||||
// margin: 0 20rpx;
|
||||
width: 90rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
.plsbuy-number-target {
|
||||
color:#0076FF;
|
||||
border: 1rpx solid #0076FF;
|
||||
// padding: 10rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
margin: 0 10rpx;
|
||||
// margin: 0 20rpx;
|
||||
width: 90rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
.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;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
|
||||
.plsbuy-jia-target {
|
||||
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
||||
color: #fff;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #fff;
|
||||
font-size: 35rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.card-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes slide-out {
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 给添加了 .slide-out 的卡片触发动画 */
|
||||
.plsbuy-card-heng.slide-out {
|
||||
animation: slide-out 0.3s forwards;
|
||||
/* 0.3s 动画，结束后保持最终状态 :contentReference[oaicite:3]{index=3} */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,716 @@
|
|||
<!-- 出入库 -->
|
||||
<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>
|
||||
<view class="draw-contain">
|
||||
<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="margin-right: 30rpx;">
|
||||
当前库存：96
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-card-top-card-noral" style="margin-top: 20rpx;">
|
||||
<view class="swiper-all-flex">
|
||||
<view class="swiper-gray">
|
||||
物料编码：
|
||||
</view>
|
||||
<view class="swiper-black">
|
||||
ZHYP044
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-card-top-card-noral" style="margin-top: 20rpx;">
|
||||
<view class="swiper-all-flex">
|
||||
<view class="swiper-gray">
|
||||
规格型号：
|
||||
</view>
|
||||
<view class="swiper-black">
|
||||
800mm*690mm
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="select-width">
|
||||
<view class="select-blue" @click="blueshow = !blueshow">
|
||||
<image class="select-blue-img" src="/static/index/warehouseCard/selectblue.png" />
|
||||
<view class="select-blue-font">
|
||||
{{blueValue}}
|
||||
</view>
|
||||
<div class="triangle-down"></div>
|
||||
<!-- 下拉列表：用 open/close 类触发动画 -->
|
||||
<view class="dropdown-list" v-show="blueshow" :class="blueshow ? 'open' : 'close'" @click.stop>
|
||||
<view v-for="(item, i) in bluelist" :key="i" class="dropdown-item"
|
||||
:class="item.label == blueValue ? 'active' : ''"
|
||||
@click="blueValue = item.label;blueshow=false">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="select-white" @click="whiteshow = !whiteshow">
|
||||
<image class="select-blue-img" src="/static/index/warehouseCard/selectwhite.png" />
|
||||
<view class="select-blue-font">
|
||||
{{whiteValue}}
|
||||
</view>
|
||||
<div class="triangle-down"></div>
|
||||
<view class="dropdown-list" v-show="whiteshow" :class="whiteshow ? 'open' : 'close'" @click.stop>
|
||||
<view v-for="(item, i) in whitelist" :key="i" class="dropdown-item"
|
||||
:class="item.label == whiteValue ? 'active' : ''"
|
||||
@click="whiteValue = item.label;whiteshow=false">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="scroll-view">
|
||||
<view class="scroll-view-title">
|
||||
<view class="amount">
|
||||
总计:100笔
|
||||
</view>
|
||||
<view class="outhouse">
|
||||
<image class="outhouse-img" src="/static/index/warehouseCard/orangeicon.png" />
|
||||
<view class="outhouse-left">
|
||||
出库:
|
||||
</view>
|
||||
<view class="outhouse-right">
|
||||
50笔
|
||||
</view>
|
||||
</view>
|
||||
<view class="inhouse">
|
||||
<image class="inhouse-img" src="/static/index/warehouseCard/blueicon.png" />
|
||||
<view class="inhouse-left">
|
||||
出库:
|
||||
</view>
|
||||
<view class="inhouse-right">
|
||||
50笔
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y :scroll-top="topNumber" @scroll="movedown" style="height: 730rpx;margin-top: 2%;"
|
||||
:show-scrollbar="false">
|
||||
<view class="swiper-flex">
|
||||
<view v-for="(item,index) in manyCard" :key="index">
|
||||
<view class="swiper-card-spec">
|
||||
<view class="swiper-card-top">
|
||||
<view class="swiper-card-top-card">
|
||||
<view class="swiper-card-top-card-weight">
|
||||
<view class="weight-left">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="weight-right" style="color: #59657A ;font-weight: 400;">
|
||||
摘要:服务指令
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-card-top-card-noral">
|
||||
<view class="swiper-all-flex">
|
||||
<view class="swiper-gray">
|
||||
服务指令:生活用品请领
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="swiper-all-flex">
|
||||
<view class="swiper-gray" :style="item.add<0?{color:`#FF6600`}:{color:`#008AFF`}"
|
||||
style="font-weight: 700;font-size: 35rpx;">
|
||||
{{item.add >0 ? "+" + item.add : item.add }}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-card-top-card-noral">
|
||||
<view class="swiper-all-flex">
|
||||
<!-- <view class="swiper-gray">
|
||||
采购单位：
|
||||
</view> -->
|
||||
<view class="swiper-black">
|
||||
2025-02-13 17:29:18
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-all-flex">
|
||||
<view class="swiper-black">
|
||||
库存：
|
||||
</view>
|
||||
<view class="swiper-black">
|
||||
96
|
||||
</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 class="down-contain">
|
||||
<image class="down-contain-img" src="/static/index/warehouseCard/arrow.png" @click="movedownone" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <u-select v-model="blueshow" :list="bluelist" @confirm="blueconfirm"></u-select>
|
||||
<u-select v-model="whiteshow" :list="whitelist" @confirm="whiteconfirm"></u-select> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits, watch } from 'vue';
|
||||
const note = ref("");
|
||||
const topNumber = ref(0);
|
||||
const topNumberSave = ref(0);
|
||||
const blueshow = ref(false);
|
||||
const whiteshow = ref(false);
|
||||
const blueValue = ref("全部");
|
||||
const whiteValue = ref("日期从近到远");
|
||||
const bluelist = ref([{
|
||||
value: 0,
|
||||
label: '全部'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '出库'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '入库'
|
||||
},
|
||||
])
|
||||
const whitelist = ref([{
|
||||
value: 0,
|
||||
label: '日期从近到远'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '日期从远到近'
|
||||
},
|
||||
])
|
||||
const manyCard = ref([
|
||||
{
|
||||
name:'生活用品请领',
|
||||
add:-20
|
||||
},
|
||||
{
|
||||
name:'采购入库',
|
||||
add:10
|
||||
},
|
||||
{
|
||||
name:'生活用品请领',
|
||||
add:-20
|
||||
},
|
||||
{
|
||||
name:'生活用品请领',
|
||||
add:20
|
||||
},
|
||||
{
|
||||
name:'生活用品请领',
|
||||
add:-20
|
||||
},
|
||||
{
|
||||
name:'生活用品请领',
|
||||
add:100
|
||||
},
|
||||
{
|
||||
name:'生活用品请领',
|
||||
add:9999
|
||||
},
|
||||
])
|
||||
const blueconfirm = (res) => {
|
||||
// console.log("????",res)
|
||||
blueValue.value = res[0].label
|
||||
}
|
||||
const whiteconfirm = (res) => {
|
||||
// console.log("????",res)
|
||||
whiteValue.value = res[0].label
|
||||
}
|
||||
const movedown = (res) => {
|
||||
topNumberSave.value = res.detail.scrollTop.toFixed(2)
|
||||
}
|
||||
|
||||
const movedownone = () => {
|
||||
topNumberSave.value = Number(topNumberSave.value) + 115;
|
||||
topNumber.value = topNumberSave.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 抽屉的css
|
||||
.draw-all {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: url("/static/index/pink.png") center/cover, rgba(255, 255, 255, 0.2);
|
||||
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-card {
|
||||
margin: 0 0 30rpx 30rpx;
|
||||
margin-left: 40rpx;
|
||||
width: 960rpx;
|
||||
height: 250rpx;
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 30rpx;
|
||||
background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.7);
|
||||
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: 200rpx;
|
||||
margin-top: 30rpx;
|
||||
margin-left: 30rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.swiper-card-top-card {
|
||||
// background-color: #fff;
|
||||
margin-left: 40rpx;
|
||||
width: calc(100% - 40rpx);
|
||||
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: #008AFF;
|
||||
font-weight: 700;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-card-top-card-noral {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.swiper-card-spec {
|
||||
margin: 0 0 30rpx 30rpx;
|
||||
margin-left: 40rpx;
|
||||
width: 890rpx;
|
||||
height: 200rpx;
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 30rpx;
|
||||
background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.7);
|
||||
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: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-top: 30rpx;
|
||||
margin-left: 30rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.swiper-card-top-card {
|
||||
// background-color: #fff;
|
||||
// margin-left: 40rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.swiper-card-top-card-weight {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 0 40rpx;
|
||||
// justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
margin-top: 15rpx;
|
||||
|
||||
// background-color: #fff;
|
||||
.weight-left {
|
||||
font-weight: 700;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
.weight-right {
|
||||
color: #008AFF;
|
||||
font-weight: 700;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-card-top-card-noral {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0 40rpx;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.swiper-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0rpx;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.swiper-all-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.swiper-gray {
|
||||
color: #596278;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.swiper-black {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.delete-img {
|
||||
width: 40rpx;
|
||||
height: 45rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
|
||||
.scroll-view {
|
||||
height: 930rpx;
|
||||
width: calc(100% - 80rpx);
|
||||
margin-left: 40rpx;
|
||||
border-radius: 40rpx;
|
||||
border: 2rpx solid #fff;
|
||||
box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroll-view-title {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background: linear-gradient(to right, #E3EAFF, #F4ECFF, #DCE4FF);
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.amount {
|
||||
// font-weight: 500;
|
||||
}
|
||||
|
||||
.outhouse {
|
||||
display: flex;
|
||||
|
||||
.outhouse-img {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 8rpx;
|
||||
margin-top: -6rpx;
|
||||
}
|
||||
|
||||
.outhouse-left {
|
||||
color: #FF6600;
|
||||
}
|
||||
|
||||
.outhouse-right {
|
||||
margin-left: 7rpx;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.inhouse {
|
||||
display: flex;
|
||||
|
||||
.inhouse-img {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 8rpx;
|
||||
margin-top: -2rpx;
|
||||
}
|
||||
|
||||
.inhouse-left {
|
||||
color: #008FFF;
|
||||
}
|
||||
|
||||
.inhouse-right {
|
||||
margin-left: 7rpx;
|
||||
// font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-width {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.select-blue {
|
||||
border: 1rpx solid #fff;
|
||||
width: 180rpx;
|
||||
height: 70rpx;
|
||||
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
||||
border-radius: 15rpx;
|
||||
margin-right: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.select-blue-img {
|
||||
width: 27rpx;
|
||||
height: 27rpx;
|
||||
}
|
||||
|
||||
.select-blue-font {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 定义一个向下的小三角 */
|
||||
.triangle-down {
|
||||
width: 0;
|
||||
/* 元素本身无宽高 */
|
||||
height: 0;
|
||||
/* 元素本身无宽高 */
|
||||
|
||||
/* 左右边框透明，形成斜边 */
|
||||
border-left: 8rpx solid transparent;
|
||||
border-right: 8rpx solid transparent;
|
||||
|
||||
/* 顶部边框着色，形成底边，三角指向下 */
|
||||
border-top: 8rpx solid #fff;
|
||||
/* 这里的 #000 可替换成任何颜色 */
|
||||
}
|
||||
}
|
||||
|
||||
.select-white {
|
||||
border: 1rpx solid #fff;
|
||||
width: 280rpx;
|
||||
height: 70rpx;
|
||||
background: linear-gradient(to bottom, #EEF5FF, #D4DEFC);
|
||||
border-radius: 15rpx;
|
||||
margin-right: 40rpx;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.select-blue-img {
|
||||
width: 27rpx;
|
||||
height: 27rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.select-blue-font {
|
||||
color: #19233B;
|
||||
}
|
||||
|
||||
/* 定义一个向下的小三角 */
|
||||
.triangle-down {
|
||||
width: 0;
|
||||
/* 元素本身无宽高 */
|
||||
height: 0;
|
||||
/* 元素本身无宽高 */
|
||||
|
||||
/* 左右边框透明，形成斜边 */
|
||||
border-left: 8rpx solid transparent;
|
||||
border-right: 8rpx solid transparent;
|
||||
|
||||
/* 顶部边框着色，形成底边，三角指向下 */
|
||||
border-top: 8rpx solid #19233B;
|
||||
/* 这里的 #000 可替换成任何颜色 */
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.down-contain {
|
||||
width: 100%;
|
||||
height: 75rpx;
|
||||
// background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.down-contain-img {
|
||||
height: 30rpx;
|
||||
width: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 列表定位和初始样式 */
|
||||
.dropdown-list {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border: 2rpx solid #ccc;
|
||||
box-sizing: border-box;
|
||||
max-height: 0;
|
||||
z-index: 999;
|
||||
border-radius: 15rpx;
|
||||
/* 初始收起 */
|
||||
}
|
||||
|
||||
/* 列表项默认与选中样式 */
|
||||
.dropdown-item {
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.dropdown-item.active {
|
||||
color: #016AD1;
|
||||
background-color: #c9e8ff;
|
||||
}
|
||||
|
||||
/* 定义下拉动画：从 max-height:0 到 300px */
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
max-height: 600rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 定义收起动画：与 slideDown 相反 */
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
max-height: 600rpx;
|
||||
}
|
||||
|
||||
to {
|
||||
max-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 根据 show 状态触发动画 */
|
||||
.open {
|
||||
animation: slideDown 0.3s ease forwards;
|
||||
}
|
||||
|
||||
.close {
|
||||
animation: slideUp 0.3s ease forwards;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,601 @@
|
|||
<!-- 详情按钮 -->
|
||||
<template>
|
||||
<view class="draw-all">
|
||||
<view class="draw-contain">
|
||||
<!-- 解决margin重叠问题 -->
|
||||
<view class="draw-title">
|
||||
<view class="draw-flex">
|
||||
<view class="draw-title-gun"></view>
|
||||
<view class="draw-title-font">采购单</view>
|
||||
</view>
|
||||
<view :class="openType ? `title-button`:`title-button-red`">
|
||||
{{stateArray[openType]}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-card-once">
|
||||
<view class="swiper-card-top">
|
||||
<view class="swiper-card-top-card">
|
||||
<view class="swiper-card-top-card-weight">
|
||||
<view class="weight-left">
|
||||
<view class="">采购单号：</view>
|
||||
<view class="" style="font-weight: 700;">A0120250301001</view>
|
||||
</view>
|
||||
<view class="weight-left">
|
||||
<view class="">总金额：</view>
|
||||
<view class="" style="color: red;">100.00</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="weight-boom">
|
||||
<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: 55%;">
|
||||
<view class="swiper-gray">
|
||||
采购日期：
|
||||
</view>
|
||||
<view class="swiper-black">
|
||||
2025.03.02
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-card-top-card-noral" style="margin-top: 15rpx;">
|
||||
<view class="swiper-all-flex">
|
||||
<view class="swiper-gray">
|
||||
付款方式：
|
||||
</view>
|
||||
<view class="swiper-black">
|
||||
月结
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-all-flex" style="width: 55%;">
|
||||
<view class="swiper-gray">
|
||||
供应商：
|
||||
</view>
|
||||
<view class="swiper-black">
|
||||
宽城区珂爱个人卫生用品店
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-title" style="margin-top: 25rpx;">
|
||||
<view class="draw-flex">
|
||||
<view class="draw-title-gun"></view>
|
||||
<view class="draw-title-font">物料信息</view>
|
||||
</view>
|
||||
<view class="draw-flex" style="margin-top: -10rpx;" v-if="openType===3">
|
||||
<view class="button-first" @click="openDrawer(0)">
|
||||
入库单
|
||||
</view>
|
||||
<view class="button-second" @click="openDrawer(1)">
|
||||
挂账单
|
||||
</view>
|
||||
<view class="button-third" @click="openDrawer(2)">
|
||||
核销单
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="scroll-view" >
|
||||
<scroll-view scroll-y style="height: 93%;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">
|
||||
<view class="swiper-card-top-card">
|
||||
<view class="card-img-father">
|
||||
<image class="card-img" src="/static/index/guan.png" />
|
||||
</view>
|
||||
<view class="card-right">
|
||||
<view class="card-right-title">
|
||||
<view class="draw-flex">
|
||||
<view class="title-gray">
|
||||
货品名称：
|
||||
</view>
|
||||
<view class="title-black">
|
||||
引流袋(医用透明)
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-flex">
|
||||
<view class="title-gray">
|
||||
采购数量：
|
||||
</view>
|
||||
<view class="title-black">
|
||||
10
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-right-other">
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
货品编码：
|
||||
</view>
|
||||
<view class="title-black">
|
||||
FLYPO01
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
规格型号：
|
||||
</view>
|
||||
<view class="title-black">
|
||||
6cm*7cm
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
采购单位：
|
||||
</view>
|
||||
<view class="title-black">
|
||||
个
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-right-other">
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
参考单价：
|
||||
</view>
|
||||
<view class="title-green">
|
||||
0.1
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
采购单价：
|
||||
</view>
|
||||
<view class="title-red">
|
||||
0.1
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
采购金额：
|
||||
</view>
|
||||
<view class="title-red">
|
||||
10.12
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="draw-title" style="margin-top: 25rpx;">
|
||||
<view class="draw-flex">
|
||||
<view class="draw-title-gun"></view>
|
||||
<view class="draw-title-font">{{openType?`备注`:`作废原因`}}</view>
|
||||
<view v-if="!openType" class="draw-red">*</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="down-note">
|
||||
<textarea class="down-note-title-input" v-model="note" maxlength="300" placeholder-style="color:#999"
|
||||
:placeholder="openType?`请输入备注`:`请输入作废原因`" />
|
||||
<text class="char-count">{{ note.length }}/300</text>
|
||||
</view>
|
||||
|
||||
<view class="button-card">
|
||||
<view class="swiper-button-white" @click="closedetail">
|
||||
关闭
|
||||
</view>
|
||||
<!-- <view class="swiper-button-blue">
|
||||
确认
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits, watch } from 'vue';
|
||||
const note = ref("");
|
||||
const calendarShow = ref(false);
|
||||
const stateTarget = ref("");
|
||||
const props = defineProps({
|
||||
openType: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const stateArray = ['已作废', '未确认', '已确认', '未完结', '待结账', '已结账'];
|
||||
// 初始化左侧菜单列表
|
||||
const buttonList = ref([
|
||||
{ url: '/static/index/Warehousing/sousuo.png', name: '查询' },
|
||||
{ url: '/static/index/Warehousing/chongzhi.png', name: '重置' },
|
||||
|
||||
]);
|
||||
const emit = defineEmits(['closedetail','openDrawer'])
|
||||
const calendarchange = (e : any) => {
|
||||
stateTarget.value = e.result
|
||||
}
|
||||
const closedetail = () => {
|
||||
emit('closedetail')
|
||||
}
|
||||
const openDrawer = (index:number) =>{
|
||||
emit('openDrawer',index)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.draw-all {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 80rpx;
|
||||
border-bottom-left-radius: 80rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.draw-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.draw-contain {
|
||||
width: 100%;
|
||||
height: calc(100vh);
|
||||
background-image: url("/static/index/fanpink.png");
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-gray {
|
||||
color: #596278;
|
||||
}
|
||||
|
||||
.draw-title {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 80rpx;
|
||||
margin-left: 20rpx;
|
||||
.draw-flex {
|
||||
display: flex;
|
||||
.button-first{
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 15rpx;
|
||||
background: linear-gradient(to bottom right,#00C3AC,#28CFB3);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.button-second{
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 15rpx;
|
||||
background: linear-gradient(to bottom right,#869AF3 ,#8296E9);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.button-third{
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 60rpx;
|
||||
background: linear-gradient(to bottom right,#FF7A95 ,#FF9D94);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.draw-title-gun {
|
||||
margin-left: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
width: 13rpx;
|
||||
height: 40rpx;
|
||||
background: linear-gradient(to bottom, #04BCED, #0160CE);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.draw-title-font {
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
margin-top: -3rpx;
|
||||
}
|
||||
|
||||
.draw-title-blue {
|
||||
height: 50rpx;
|
||||
width: 120rpx;
|
||||
margin-right: 50rpx;
|
||||
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
height: 650rpx;
|
||||
width: calc(100% - 80rpx);
|
||||
margin-left: 40rpx;
|
||||
border-radius: 40rpx;
|
||||
border: 2rpx solid #fff;
|
||||
box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-card-once {
|
||||
margin: 0 0 30rpx 30rpx;
|
||||
width: 1340rpx;
|
||||
height: 270rpx;
|
||||
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;
|
||||
padding: 0 40rpx;
|
||||
|
||||
.swiper-card-top {
|
||||
width: 100%;
|
||||
height: 270rpx;
|
||||
display: flex;
|
||||
|
||||
.swiper-card-top-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.swiper-card-top-card-weight {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 25rpx 0;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.weight-left {
|
||||
display: flex;
|
||||
|
||||
.blue-number {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #017DE9;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.weight-right {
|
||||
color: #FF6000;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.weight-boom {
|
||||
width: 1270rpx;
|
||||
margin-left: -10rpx;
|
||||
height: 140rpx;
|
||||
background-color: rgba(131, 159, 204, 0.2);
|
||||
border: 2rpx solid #fff;
|
||||
box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
|
||||
border-radius: 25rpx;
|
||||
}
|
||||
|
||||
.swiper-card-top-card-noral {
|
||||
margin-left: 50rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0rpx;
|
||||
|
||||
.swiper-card {
|
||||
margin: 0 0 30rpx 30rpx;
|
||||
width: 1250rpx;
|
||||
height: 230rpx;
|
||||
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;
|
||||
padding: 0 40rpx;
|
||||
|
||||
.swiper-card-top {
|
||||
width: 100%;
|
||||
height: 270rpx;
|
||||
|
||||
.swiper-card-top-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index-right-button-blue {
|
||||
height: 50rpx;
|
||||
width: 100rpx;
|
||||
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #fff;
|
||||
}
|
||||
|
||||
.swiper-all-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card-img-father {
|
||||
height: 100%;
|
||||
width: 230rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.card-img {
|
||||
margin-top: -15rpx;
|
||||
// 图片切的有问题
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-right {
|
||||
width: calc(100% - 230rpx);
|
||||
height: 100%;
|
||||
|
||||
.card-right-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 700;
|
||||
margin: 30rpx 0;
|
||||
|
||||
.title-gray {
|
||||
color: #596278;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.title-black {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-right-other {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 25rpx;
|
||||
|
||||
.title-gray {
|
||||
color: #596278;
|
||||
}
|
||||
|
||||
.title-green {
|
||||
color: #647900;
|
||||
}
|
||||
|
||||
.title-red {
|
||||
color: #FF4A27;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-white {
|
||||
background: linear-gradient(to bottom, #D5E0F8, #ECF6FF);
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 20rpx;
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 10rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
.swiper-button-blue {
|
||||
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 20rpx;
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 10rpx;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
.button-card {
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.down-note {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 170rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-top: -10rpx;
|
||||
}
|
||||
.down-note-title-input {
|
||||
width: calc(100% - 100rpx);
|
||||
margin-left: 40rpx;
|
||||
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;
|
||||
}
|
||||
.char-count {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
right: 70rpx;
|
||||
color: #999;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
.title-button {
|
||||
height: 50rpx;
|
||||
width: 120rpx;
|
||||
margin-right: 50rpx;
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 15rpx;
|
||||
background: #00AEFF;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-button-red {
|
||||
height: 50rpx;
|
||||
width: 120rpx;
|
||||
margin-right: 50rpx;
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 15rpx;
|
||||
background: linear-gradient(to bottom, #FF8251, #F52E2C);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.draw-red{
|
||||
color: red;
|
||||
font-size: 40rpx;
|
||||
margin-top: -10rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,529 @@
|
|||
<!-- 作废 -->
|
||||
<template>
|
||||
<view class="draw-all">
|
||||
<view class="draw-contain">
|
||||
<!-- 解决margin重叠问题 -->
|
||||
<view class="draw-title">
|
||||
<view class="draw-flex">
|
||||
<view class="draw-title-gun"></view>
|
||||
<view class="draw-title-font">采购单</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-card-once">
|
||||
<view class="swiper-card-top">
|
||||
<view class="swiper-card-top-card">
|
||||
<view class="swiper-card-top-card-weight">
|
||||
<view class="weight-left">
|
||||
<view class="">采购单号：</view>
|
||||
<view class="" style="font-weight: 700;">A0120250301001</view>
|
||||
</view>
|
||||
<view class="weight-left">
|
||||
<view class="">总金额：</view>
|
||||
<view class="" style="color: red;">100.00</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="weight-boom">
|
||||
<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: 55%;">
|
||||
<view class="swiper-gray">
|
||||
采购日期：
|
||||
</view>
|
||||
<view class="swiper-black">
|
||||
2025.03.02
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-card-top-card-noral" style="margin-top: 15rpx;">
|
||||
<view class="swiper-all-flex">
|
||||
<view class="swiper-gray">
|
||||
付款方式：
|
||||
</view>
|
||||
<view class="swiper-black">
|
||||
月结
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-all-flex" style="width: 55%;">
|
||||
<view class="swiper-gray">
|
||||
供应商：
|
||||
</view>
|
||||
<view class="swiper-black">
|
||||
宽城区珂爱个人卫生用品店
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-title" style="margin-top: 25rpx;">
|
||||
<view class="draw-flex">
|
||||
<view class="draw-title-gun"></view>
|
||||
<view class="draw-title-font">物料信息</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="scroll-view" >
|
||||
<scroll-view scroll-y style="height: 93%;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">
|
||||
<view class="swiper-card-top-card">
|
||||
<view class="card-img-father">
|
||||
<image class="card-img" src="/static/index/guan.png" />
|
||||
</view>
|
||||
<view class="card-right">
|
||||
<view class="card-right-title">
|
||||
<view class="draw-flex">
|
||||
<view class="title-gray">
|
||||
货品名称：
|
||||
</view>
|
||||
<view class="title-black">
|
||||
引流袋(医用透明)
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-flex">
|
||||
<view class="title-gray">
|
||||
采购数量：
|
||||
</view>
|
||||
<view class="title-black">
|
||||
10
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-right-other">
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
货品编码：
|
||||
</view>
|
||||
<view class="title-black">
|
||||
FLYPO01
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
规格型号：
|
||||
</view>
|
||||
<view class="title-black">
|
||||
6cm*7cm
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
采购单位：
|
||||
</view>
|
||||
<view class="title-black">
|
||||
个
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-right-other">
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
参考单价：
|
||||
</view>
|
||||
<view class="title-green">
|
||||
0.1
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
采购单价：
|
||||
</view>
|
||||
<view class="title-red">
|
||||
0.1
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
采购金额：
|
||||
</view>
|
||||
<view class="title-red">
|
||||
10.12
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="draw-title" style="margin-top: 25rpx;">
|
||||
<view class="draw-flex">
|
||||
<view class="draw-title-gun"></view>
|
||||
<view class="draw-title-font">作废原因</view>
|
||||
<view class="draw-red">*</view>
|
||||
</view>
|
||||
</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="button-card">
|
||||
<view class="swiper-button-white" @click="closevoid">
|
||||
关闭
|
||||
</view>
|
||||
<view class="swiper-button-blue" @click="voidIt()">
|
||||
作废
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits, watch } from 'vue';
|
||||
const note = ref("");
|
||||
const calendarShow = ref(false);
|
||||
const stateTarget = ref("");
|
||||
const emit = defineEmits(['voidIt',"closevoid"])
|
||||
const props = defineProps({
|
||||
|
||||
});
|
||||
// const stateArray = ['已作废', '未确认', '已确认', '未完结', '待结账', '已结账'];
|
||||
// 初始化左侧菜单列表
|
||||
const buttonList = ref([
|
||||
{ url: '/static/index/Warehousing/sousuo.png', name: '查询' },
|
||||
{ url: '/static/index/Warehousing/chongzhi.png', name: '重置' },
|
||||
|
||||
]);
|
||||
// const emit = defineEmits(['opendetail'])
|
||||
const calendarchange = (e : any) => {
|
||||
stateTarget.value = e.result
|
||||
}
|
||||
const voidIt = () =>{
|
||||
emit('voidIt')
|
||||
}
|
||||
const closevoid = () =>{
|
||||
emit('closevoid')
|
||||
}
|
||||
// const opendetail = () => {
|
||||
// emit('opendetail')
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.draw-all {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 80rpx;
|
||||
border-bottom-left-radius: 80rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.draw-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.draw-contain {
|
||||
width: 100%;
|
||||
height: calc(100vh);
|
||||
background-image: url("/static/index/fanpink.png");
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-gray {
|
||||
color: #596278;
|
||||
}
|
||||
|
||||
.draw-title {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 80rpx;
|
||||
margin-left: 20rpx;
|
||||
.draw-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.draw-title-gun {
|
||||
margin-left: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
width: 13rpx;
|
||||
height: 40rpx;
|
||||
background: linear-gradient(to bottom, #04BCED, #0160CE);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.draw-title-font {
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
margin-top: -3rpx;
|
||||
}
|
||||
|
||||
.draw-title-blue {
|
||||
height: 50rpx;
|
||||
width: 120rpx;
|
||||
margin-right: 50rpx;
|
||||
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
height: 650rpx;
|
||||
width: calc(100% - 80rpx);
|
||||
margin-left: 40rpx;
|
||||
border-radius: 40rpx;
|
||||
border: 2rpx solid #fff;
|
||||
box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-card-once {
|
||||
margin: 0 0 30rpx 30rpx;
|
||||
width: 1340rpx;
|
||||
height: 270rpx;
|
||||
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;
|
||||
padding: 0 40rpx;
|
||||
|
||||
.swiper-card-top {
|
||||
width: 100%;
|
||||
height: 270rpx;
|
||||
display: flex;
|
||||
|
||||
.swiper-card-top-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.swiper-card-top-card-weight {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 25rpx 0;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.weight-left {
|
||||
display: flex;
|
||||
|
||||
.blue-number {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #017DE9;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.weight-right {
|
||||
color: #FF6000;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.weight-boom {
|
||||
width: 1270rpx;
|
||||
margin-left: -10rpx;
|
||||
height: 140rpx;
|
||||
background-color: rgba(131, 159, 204, 0.2);
|
||||
border: 2rpx solid #fff;
|
||||
box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
|
||||
border-radius: 25rpx;
|
||||
}
|
||||
|
||||
.swiper-card-top-card-noral {
|
||||
margin-left: 50rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0rpx;
|
||||
|
||||
.swiper-card {
|
||||
margin: 0 0 30rpx 30rpx;
|
||||
width: 1250rpx;
|
||||
height: 230rpx;
|
||||
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;
|
||||
padding: 0 40rpx;
|
||||
|
||||
.swiper-card-top {
|
||||
width: 100%;
|
||||
height: 270rpx;
|
||||
|
||||
.swiper-card-top-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index-right-button-blue {
|
||||
height: 50rpx;
|
||||
width: 100rpx;
|
||||
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #fff;
|
||||
}
|
||||
|
||||
.swiper-all-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card-img-father {
|
||||
height: 100%;
|
||||
width: 230rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.card-img {
|
||||
margin-top: -15rpx;
|
||||
// 图片切的有问题
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-right {
|
||||
width: calc(100% - 230rpx);
|
||||
height: 100%;
|
||||
|
||||
.card-right-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 700;
|
||||
margin: 30rpx 0;
|
||||
|
||||
.title-gray {
|
||||
color: #596278;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.title-black {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-right-other {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 25rpx;
|
||||
|
||||
.title-gray {
|
||||
color: #596278;
|
||||
}
|
||||
|
||||
.title-green {
|
||||
color: #647900;
|
||||
}
|
||||
|
||||
.title-red {
|
||||
color: #FF4A27;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-white {
|
||||
background: linear-gradient(to bottom, #D5E0F8, #ECF6FF);
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 20rpx;
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.swiper-button-blue {
|
||||
background: linear-gradient(to bottom, #FF8251, #F52E2C);
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 20rpx;
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 10rpx;
|
||||
color: #fff;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
.button-card {
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.down-note {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 170rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-top: -10rpx;
|
||||
}
|
||||
.down-note-title-input {
|
||||
width: calc(100% - 100rpx);
|
||||
margin-left: 40rpx;
|
||||
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;
|
||||
}
|
||||
.char-count {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
right: 70rpx;
|
||||
color: #999;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
.draw-red{
|
||||
color: red;
|
||||
font-size: 40rpx;
|
||||
margin-top: -10rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,321 @@
|
|||
<!-- 请购 -->
|
||||
<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">
|
||||
<!-- 解决margin重叠问题 -->
|
||||
<view class="index-right-height"></view>
|
||||
<view class="index-right-title">
|
||||
<view class="index-right-name">
|
||||
请购单号
|
||||
</view>
|
||||
<input class="index-right-input" placeholder="请输入请购单号" />
|
||||
<view class="index-right-name">
|
||||
请购人
|
||||
</view>
|
||||
<input class="index-right-input" placeholder="请输入请购人" />
|
||||
<view class="index-right-name">
|
||||
请购日期:
|
||||
</view>
|
||||
|
||||
<view @click.stop="calendarShow=true">
|
||||
<view class="index-right-input" style="width: 300rpx;height: 66rpx;"
|
||||
:style="stateTarget?{}:{color:`#999`}">
|
||||
{{stateTarget ? stateTarget : `请输入请购日期`}}
|
||||
</view>
|
||||
</view>
|
||||
<u-calendar style="width: 40%;margin-left: 30%;" border-radius="40" v-model="calendarShow" mode="date"
|
||||
@change="calendarchange"></u-calendar>
|
||||
<view class="index-right-button-all">
|
||||
<view v-for="(item,index) in buttonList" :key="index">
|
||||
<view class="index-right-button">
|
||||
<image class="index-right-button-img" :src="item.url" />
|
||||
<view class="index-right-button-font">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="scroll-view">
|
||||
<scroll-view scroll-y style="height: 93%;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">
|
||||
<view class="swiper-card-top-card">
|
||||
<view class="swiper-card-top-card-weight">
|
||||
<view class="weight-left">
|
||||
<view class="">请购单号</view>
|
||||
<view class="blue-number">A0120250301001</view>
|
||||
</view>
|
||||
<view class="index-right-button-blue" @click="opendetail">
|
||||
详情
|
||||
</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">
|
||||
2025.03.01
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-all-flex" style="width: 40%;">
|
||||
<view class="swiper-gray">
|
||||
请购人：
|
||||
</view>
|
||||
<view class="swiper-black">
|
||||
王法
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits, watch } from 'vue';
|
||||
const note = ref("");
|
||||
const calendarShow = ref(false);
|
||||
const stateTarget = ref("");
|
||||
// 初始化左侧菜单列表
|
||||
const buttonList = ref([
|
||||
// { url: '/static/index/Warehousing/zuoce.png', name: '请购单' },
|
||||
{ url: '/static/index/Warehousing/sousuo.png', name: '查询' },
|
||||
{ url: '/static/index/Warehousing/chongzhi.png', name: '重置' },
|
||||
|
||||
]);
|
||||
const emit = defineEmits(['opendetail'])
|
||||
const calendarchange = (e : any) => {
|
||||
stateTarget.value = e.result
|
||||
}
|
||||
const opendetail = () =>{
|
||||
emit('opendetail')
|
||||
}
|
||||
</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;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.index-right-height {
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.index-right-title {
|
||||
margin-left: 30rpx;
|
||||
width: calc(100% - 60rpx);
|
||||
height: 120rpx;
|
||||
background: linear-gradient(to right, #C4E0FD, #D5CDFF, #D9ECFF);
|
||||
border-radius: 35rpx;
|
||||
border: 2rpx solid #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.index-right-name {
|
||||
margin-left: 20rpx;
|
||||
margin-right: 10rpx;
|
||||
color: #19233B;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.index-right-input {
|
||||
font-size: 27rpx;
|
||||
width: 240rpx;
|
||||
border: 2rpx #a0adc8 solid;
|
||||
padding: 15rpx 0 15rpx 20rpx;
|
||||
background-color: rgb(234, 243, 254);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.index-right-button-all {
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.index-right-button {
|
||||
height: 70rpx;
|
||||
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #fff;
|
||||
margin-right: 10rpx;
|
||||
|
||||
.index-right-button-img {
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
margin: 0 5rpx 0 10rpx;
|
||||
}
|
||||
|
||||
.index-right-button-font {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.scroll-view {
|
||||
margin-top: 20rpx;
|
||||
height: 1300rpx;
|
||||
width: calc(100% - 80rpx);
|
||||
margin-left: 40rpx;
|
||||
border-radius: 40rpx;
|
||||
border: 2rpx solid #fff;
|
||||
box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
|
||||
overflow: hidden;
|
||||
}
|
||||
.swiper-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0rpx;
|
||||
|
||||
.swiper-card {
|
||||
margin: 0 0 30rpx 30rpx;
|
||||
width: 900rpx;
|
||||
height: 230rpx;
|
||||
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;
|
||||
padding: 0 40rpx;
|
||||
.swiper-card-top {
|
||||
width: 100%;
|
||||
height: 270rpx;
|
||||
display: flex;
|
||||
|
||||
.swiper-card-top-card {
|
||||
// background-color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.swiper-card-top-card-weight {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 25rpx;
|
||||
|
||||
.weight-left {
|
||||
// font-weight: 700;
|
||||
// font-size: 35rpx;
|
||||
.blue-number{
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #017DE9;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.weight-right {
|
||||
color: #FF6000;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-card-top-card-noral {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 35rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.index-right-button-blue {
|
||||
height: 50rpx;
|
||||
width: 100rpx;
|
||||
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
||||
color: #fff;
|
||||
// font-size: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #fff;
|
||||
// margin-right: 10rpx;
|
||||
}
|
||||
.swiper-all-flex{
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
<!-- 悬浮球 -->
|
||||
<template>
|
||||
<view class="draw-all">
|
||||
<view class="draw-title">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,413 @@
|
|||
<!-- 悬浮球-详情进来的版 -->
|
||||
<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>
|
||||
|
|
@ -0,0 +1,643 @@
|
|||
<!-- 入库单 -->
|
||||
<template>
|
||||
<view class="draw-all">
|
||||
<view class="draw-contain">
|
||||
<!-- 解决margin重叠问题 -->
|
||||
<!-- <view class="draw-title">
|
||||
<view class="draw-flex">
|
||||
<view class="draw-title-gun"></view>
|
||||
<view class="draw-title-font">采购单</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="swiper-card-once">
|
||||
<view class="swiper-card-top">
|
||||
<view class="swiper-card-top-card">
|
||||
<view class="swiper-card-top-card-weight">
|
||||
<view class="weight-left">
|
||||
<view class="green-font">采购单号：</view>
|
||||
<view class="green-font" style="font-weight: 700;">A0120250301001</view>
|
||||
</view>
|
||||
<!-- <view class="weight-left">
|
||||
<view class="">总金额：</view>
|
||||
<view class="" style="color: red;">100.00</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<!-- <view class="weight-boom"> -->
|
||||
<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: 55%;">
|
||||
<view class="swiper-gray">
|
||||
采购日期：
|
||||
</view>
|
||||
<view class="swiper-black">
|
||||
2025.03.02
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-card-top-card-noral" style="margin-top: 15rpx;">
|
||||
<view class="swiper-all-flex">
|
||||
<view class="swiper-gray">
|
||||
付款方式：
|
||||
</view>
|
||||
<view class="swiper-black">
|
||||
月结
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-all-flex" style="width: 55%;">
|
||||
<view class="swiper-gray">
|
||||
供应商：
|
||||
</view>
|
||||
<view class="swiper-black">
|
||||
宽城区珂爱个人卫生用品店
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- </view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-title" style="margin-top: 25rpx;">
|
||||
<view class="draw-flex">
|
||||
<view class="draw-title-gun"></view>
|
||||
<view class="draw-title-font">入库单</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="radio-circle-top-father">
|
||||
<scroll-view scroll-x style="height: 100%;" :show-scrollbar="false">
|
||||
<view class="swiper-all-flex">
|
||||
<view class="radio-circle-top">
|
||||
<view :class="!postItems?`radio-circle-target`: `radio-circle`" @click="postItems=0"></view>
|
||||
<view class="radio-font" @click="postItems=0">入库单号:A0120250301001555R01</view>
|
||||
</view>
|
||||
<view class="radio-circle-top">
|
||||
<view :class="postItems==1?`radio-circle-target`: `radio-circle`" @click="postItems=1;"></view>
|
||||
<view class="radio-font" @click="postItems=1">入库单号:A0120250301001555R02</view>
|
||||
</view>
|
||||
<view class="radio-circle-top">
|
||||
<view :class="postItems==2?`radio-circle-target`: `radio-circle`" @click="postItems=2;"></view>
|
||||
<view class="radio-font" @click="postItems=2">入库单号:A0120250301001555R03</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="ruku-time">
|
||||
<view style="display: flex;margin-left: 50rpx;">
|
||||
<view class="ruku-time-font">
|
||||
入库时间：
|
||||
</view>
|
||||
<view class="ruku-time-weight">
|
||||
2025.03.02 10:10:10
|
||||
</view>
|
||||
</view>
|
||||
<view class="button-first">
|
||||
随行单
|
||||
</view>
|
||||
</view>
|
||||
<view class="scroll-view">
|
||||
<scroll-view scroll-y style="height: 93%;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">
|
||||
<view class="swiper-card-top-card">
|
||||
<view class="card-img-father">
|
||||
<image class="card-img" src="/static/index/guan.png" />
|
||||
</view>
|
||||
<view class="card-right">
|
||||
<view class="card-right-title">
|
||||
<view class="draw-flex">
|
||||
<view class="title-gray">
|
||||
货品名称：
|
||||
</view>
|
||||
<view class="title-black">
|
||||
引流袋(医用透明)
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-flex">
|
||||
<view class="title-gray">
|
||||
采购数量：
|
||||
</view>
|
||||
<view class="title-black">
|
||||
10
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-right-other">
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
货品编码：
|
||||
</view>
|
||||
<view class="title-black">
|
||||
FLYPO01
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
规格型号：
|
||||
</view>
|
||||
<view class="title-black">
|
||||
6cm*7cm
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
采购单位：
|
||||
</view>
|
||||
<view class="title-black">
|
||||
个
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-right-other">
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
参考单价：
|
||||
</view>
|
||||
<view class="title-green">
|
||||
0.1
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
采购单价：
|
||||
</view>
|
||||
<view class="title-red">
|
||||
0.1
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-flex" style="width: 30%;">
|
||||
<view class="title-gray">
|
||||
采购金额：
|
||||
</view>
|
||||
<view class="title-red">
|
||||
10.12
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="draw-title" style="margin-top: 25rpx;">
|
||||
<view class="draw-flex">
|
||||
<view class="draw-title-gun"></view>
|
||||
<view class="draw-title-font">作废原因</view>
|
||||
<view class="draw-red">*</view>
|
||||
</view>
|
||||
</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="button-card">
|
||||
<view class="swiper-button-white" @click="closevoid">
|
||||
关闭
|
||||
</view>
|
||||
<view class="swiper-button-blue" @click="voidIt()">
|
||||
作废
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits, watch } from 'vue';
|
||||
const note = ref("");
|
||||
const calendarShow = ref(false);
|
||||
const stateTarget = ref("");
|
||||
const emit = defineEmits(['voidIt', "closevoid"])
|
||||
const props = defineProps({
|
||||
|
||||
});
|
||||
const postItems = ref(0);
|
||||
// const stateArray = ['已作废', '未确认', '已确认', '未完结', '待结账', '已结账'];
|
||||
// 初始化左侧菜单列表
|
||||
const buttonList = ref([
|
||||
{ url: '/static/index/Warehousing/sousuo.png', name: '查询' },
|
||||
{ url: '/static/index/Warehousing/chongzhi.png', name: '重置' },
|
||||
|
||||
]);
|
||||
// const emit = defineEmits(['opendetail'])
|
||||
const calendarchange = (e : any) => {
|
||||
stateTarget.value = e.result
|
||||
}
|
||||
const voidIt = () => {
|
||||
emit('voidIt')
|
||||
}
|
||||
const closevoid = () => {
|
||||
emit('closevoid')
|
||||
}
|
||||
// const opendetail = () => {
|
||||
// emit('opendetail')
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.draw-all {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 80rpx;
|
||||
border-bottom-left-radius: 80rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.draw-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.draw-contain {
|
||||
width: 100%;
|
||||
height: calc(100vh);
|
||||
background-image: url("/static/index/fanpink.png");
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-gray {
|
||||
color: #596278;
|
||||
}
|
||||
|
||||
.draw-title {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 80rpx;
|
||||
margin-left: 20rpx;
|
||||
|
||||
.draw-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.draw-title-gun {
|
||||
margin-left: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
width: 13rpx;
|
||||
height: 40rpx;
|
||||
background: linear-gradient(to bottom, #04BCED, #0160CE);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.draw-title-font {
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
margin-top: -3rpx;
|
||||
}
|
||||
|
||||
.draw-title-blue {
|
||||
height: 50rpx;
|
||||
width: 120rpx;
|
||||
margin-right: 50rpx;
|
||||
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
height: 650rpx;
|
||||
width: calc(100% - 80rpx);
|
||||
margin-left: 40rpx;
|
||||
border-radius: 40rpx;
|
||||
border: 2rpx solid #fff;
|
||||
box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-card-once {
|
||||
margin: 60rpx 0 30rpx 30rpx;
|
||||
width: 1100rpx;
|
||||
height: 220rpx;
|
||||
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;
|
||||
padding: 0 40rpx;
|
||||
|
||||
.swiper-card-top {
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
display: flex;
|
||||
|
||||
.swiper-card-top-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.swiper-card-top-card-weight {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 25rpx 0;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.weight-left {
|
||||
display: flex;
|
||||
|
||||
.blue-number {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #017DE9;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.weight-right {
|
||||
color: #FF6000;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.swiper-card-top-card-noral {
|
||||
// margin-left: 50rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0rpx;
|
||||
|
||||
.swiper-card {
|
||||
margin: 0 0 30rpx 30rpx;
|
||||
width: 1010rpx;
|
||||
height: 230rpx;
|
||||
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;
|
||||
padding: 0 40rpx;
|
||||
|
||||
.swiper-card-top {
|
||||
width: 100%;
|
||||
height: 270rpx;
|
||||
|
||||
.swiper-card-top-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index-right-button-blue {
|
||||
height: 50rpx;
|
||||
width: 100rpx;
|
||||
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #fff;
|
||||
}
|
||||
|
||||
.swiper-all-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card-img-father {
|
||||
height: 100%;
|
||||
width: 230rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.card-img {
|
||||
margin-top: -15rpx;
|
||||
// 图片切的有问题
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-right {
|
||||
width: calc(100% - 230rpx);
|
||||
height: 100%;
|
||||
|
||||
.card-right-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 700;
|
||||
margin: 30rpx 0;
|
||||
|
||||
.title-gray {
|
||||
color: #596278;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.title-black {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-right-other {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 25rpx;
|
||||
|
||||
.title-gray {
|
||||
color: #596278;
|
||||
}
|
||||
|
||||
.title-green {
|
||||
color: #647900;
|
||||
}
|
||||
|
||||
.title-red {
|
||||
color: #FF4A27;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-white {
|
||||
background: linear-gradient(to bottom, #D5E0F8, #ECF6FF);
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 20rpx;
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.swiper-button-blue {
|
||||
background: linear-gradient(to bottom, #FF8251, #F52E2C);
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 20rpx;
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 10rpx;
|
||||
color: #fff;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
.button-card {
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.down-note {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 170rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-top: -10rpx;
|
||||
}
|
||||
|
||||
.down-note-title-input {
|
||||
width: calc(100% - 100rpx);
|
||||
margin-left: 40rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.char-count {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
right: 70rpx;
|
||||
color: #999;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.draw-red {
|
||||
color: red;
|
||||
font-size: 40rpx;
|
||||
margin-top: -10rpx;
|
||||
}
|
||||
|
||||
.green-font {
|
||||
// background-color: #28CFB3;
|
||||
color: #28CFB3;
|
||||
}
|
||||
|
||||
.radio-circle-top-father {
|
||||
// overflow: auto;
|
||||
display: flex;
|
||||
margin: 0 0 0 80rpx;
|
||||
height: 50rpx;
|
||||
.radio-circle-top {
|
||||
// margin-top: 30rpx;
|
||||
// width: 2000rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.radio-circle {
|
||||
position: relative;
|
||||
margin-top: 2rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid rgb(2, 171, 254);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.radio-circle-target {
|
||||
position: relative;
|
||||
margin-top: 2rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid rgb(2, 171, 254);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.radio-circle-target::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background-color: rgb(2, 171, 254);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.radio-font {
|
||||
margin-left: 15rpx;
|
||||
margin-right: 60rpx;
|
||||
width: 400rpx;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
}
|
||||
.ruku-time{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
|
||||
.ruku-time-font{
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.ruku-time-weight{
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.button-first{
|
||||
width: 120rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 15rpx;
|
||||
background: linear-gradient(to bottom right,#00C3AC,#28CFB3);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 40rpx;
|
||||
margin-top: -5rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
</view>
|
||||
<image class="bgc-img" src="/static/index/Warehousing/thirdbutton.png" />
|
||||
</view>
|
||||
<view class="fourth-bgc">
|
||||
<view class="fourth-bgc" @click="clickgoshop">
|
||||
<image class="fourth-bgc-img" src="/static/index/Warehousing/fourthbutton.png" />
|
||||
<view class="fourth-bgc-font">
|
||||
请购单
|
||||
|
|
@ -50,22 +50,40 @@
|
|||
<view class="swiper-contain">
|
||||
<scroll-view scroll-y style="height: 98%;" :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 v-for="(item,index) in cardsArray" :key="index">
|
||||
<view class="swiper-card" :style="
|
||||
item.type === 1
|
||||
? {
|
||||
// backgroundColor: '#00D6A9',
|
||||
background: '#00D6A9 url(/static/index/warehouseCard/bgcgreen.png) center/cover'
|
||||
}
|
||||
: item.type === 2
|
||||
? {
|
||||
// backgroundColor: '#BD9AF8',
|
||||
background: '#BD9AF8 url(/static/index/warehouseCard/bgcpouple.png) center/cover'
|
||||
}
|
||||
: {}
|
||||
">
|
||||
<view class="swiper-card-left">
|
||||
<view class="swiper-card-left-white">
|
||||
<image class="swiper-card-left-white-img" :src="`/static/index/project3.png`"
|
||||
@click="opendetail" />
|
||||
<image :class="item.type === 0
|
||||
? 'swiper-card-left-white-img-first'
|
||||
: item.type === 1
|
||||
? 'swiper-card-left-white-img-second'
|
||||
: 'swiper-card-left-white-img-third'" :src="`/static/index/project3.png`" @click="opendetail" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="swiper-card-right">
|
||||
<view class="swiper-right-title">
|
||||
<view class="swiper-title-font">纸尿裤-拉拉裤</view>
|
||||
<view class="swiper-title-font">{{item.name}}</view>
|
||||
<view class="swiper-title-font-button">
|
||||
护理类
|
||||
{{ item.type === 0
|
||||
? '护理类'
|
||||
: item.type === 1
|
||||
? '医疗类'
|
||||
: '行政类' }}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="swiper-heng"></view>
|
||||
<view class="swiper-font">
|
||||
|
|
@ -97,7 +115,11 @@
|
|||
</view>
|
||||
|
||||
<view class="swiper-left-buttons">
|
||||
<view class="swiper-left-button-blue" @click="openBuy">
|
||||
<view :class="item.type === 0
|
||||
? 'swiper-left-button-blue'
|
||||
: item.type === 1
|
||||
? 'swiper-left-button-green'
|
||||
: 'swiper-left-button-pouple'" @click="openBuy">
|
||||
请购
|
||||
</view>
|
||||
<view class="swiper-left-button" @click="clickgoback">
|
||||
|
|
@ -107,7 +129,10 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 给底部一个距离 -->
|
||||
<view class="bug-bottom"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -123,18 +148,34 @@
|
|||
</view>
|
||||
</view>
|
||||
<!-- 请购的的弹出层 -->
|
||||
<view v-show="plsBuyIsopen && isShow" class="popup-detail" @click="plsBuyIsopen=false">
|
||||
<view v-show="plsBuyIsopen && isShow" class="popup-detail-plsbuy" @click="plsBuyIsopen=false">
|
||||
<view class="popup-detail-content-plsbuy" :style="{ opacity: plsBuyisopacity ? 1 : 0 }" @click.stop>
|
||||
<plsbuy @closeIt="plsBuyIsopen=false" />
|
||||
<plsbuy :saveIndex="saveIndex" :changeNumber="changeNumber" @closeIt="plsBuyIsopen=false" @openRight="openRight" @closeRight="closeRight" />
|
||||
</view>
|
||||
<view v-show="rightCalShow" class="popup-detail-content-calculator" :style="{ opacity: plsBuyisopacity ? 1 : 0 }" @click.stop>
|
||||
<calculator :doOnce="doOnce" :translateNumber="translateNumber" @right="rightOk" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 请购的的弹出层 -->
|
||||
<!-- <view v-show="plsBuyIsopen && isShow" class="popup-detail-calculator" @click="plsBuyIsopen=false">
|
||||
<view class="popup-detail-content-calculator" :style="{ opacity: plsBuyisopacity ? 1 : 0 }" @click.stop>
|
||||
<calculator @closeIt="plsBuyIsopen=false" />
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 悬浮球点击后打开的抽屉 -->
|
||||
<Drawer ref="drawer" >
|
||||
<Drawer ref="drawer">
|
||||
<shoppingCar />
|
||||
</Drawer>
|
||||
<Drawer ref="draweranther" :widNumber="45" style="z-index: 9999;">
|
||||
<shoppingCarSmall />
|
||||
</Drawer>
|
||||
<!-- 请购单点击后打开的抽屉 -->
|
||||
<Drawer ref="goshopdrawer">
|
||||
<goplsbuy @opendetail="draweranther.openDrawer()" />
|
||||
</Drawer>
|
||||
<!-- 出入库点击后打开的抽屉 -->
|
||||
<Drawer ref="gobackdrawer" :widNumber="45">
|
||||
<shoppingCar />
|
||||
<gobackhouse />
|
||||
</Drawer>
|
||||
<!-- 悬浮球 -->
|
||||
<ball :isShow="isShow && !detailisopen && !plsBuyIsopen" @click="clickBall" />
|
||||
|
|
@ -144,21 +185,85 @@
|
|||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, watch } from 'vue';
|
||||
import Drawer from "@/component/public/Drawer.vue"
|
||||
import shoppingCar from "@/component/storeroom/drawer/shoppingCar/index.vue"
|
||||
import shoppingCarSmall from "@/component/storeroom/drawer/shoppingCarSmall/index.vue"
|
||||
import gobackhouse from "@/component/storeroom/drawer/gobackhouse/index.vue"
|
||||
import goplsbuy from "@/component/storeroom/drawer/plsbuy/index.vue"
|
||||
import ball from "@/component/storeroom/components/ball.vue";
|
||||
import info from "@/component/storeroom/components/info.vue"
|
||||
import plsbuy from "@/component/storeroom/components/plsbuy.vue"
|
||||
|
||||
import calculator from "@/component/storeroom/components/calculator.vue"
|
||||
const props = defineProps({
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
// 使用watch监听isShow变化
|
||||
const transition = ref(true);
|
||||
const draweranther = ref(null)
|
||||
const drawer = ref(null);
|
||||
const gobackdrawer = ref(null);
|
||||
const goshopdrawer = ref(null);
|
||||
const cardsArray = ref([
|
||||
{
|
||||
name: "纸尿裤-拉拉裤",
|
||||
type: 0
|
||||
},
|
||||
{
|
||||
name: "纸尿裤-拉拉裤",
|
||||
type: 0
|
||||
},
|
||||
{
|
||||
name: "纸尿裤-拉拉裤",
|
||||
type: 0
|
||||
},
|
||||
{
|
||||
name: "纸尿裤-拉拉裤",
|
||||
type: 0
|
||||
},
|
||||
{
|
||||
name: "胃管（进口）",
|
||||
type: 1
|
||||
},
|
||||
{
|
||||
name: "胃管（进口）",
|
||||
type: 1
|
||||
},
|
||||
{
|
||||
name: "胃管（进口）",
|
||||
type: 1
|
||||
},
|
||||
{
|
||||
name: "胃管（进口）",
|
||||
type: 1
|
||||
},
|
||||
{
|
||||
name: "洗护用品",
|
||||
type: 2
|
||||
},
|
||||
{
|
||||
name: "洗护用品",
|
||||
type: 2
|
||||
},
|
||||
{
|
||||
name: "洗护用品",
|
||||
type: 2
|
||||
},
|
||||
{
|
||||
name: "洗护用品",
|
||||
type: 2
|
||||
},
|
||||
{
|
||||
name: "洗护用品",
|
||||
type: 2
|
||||
},
|
||||
{
|
||||
name: "洗护用品",
|
||||
type: 2
|
||||
},
|
||||
])
|
||||
|
||||
watch(
|
||||
() => props.isShow,
|
||||
(newVal, oldVal) => {
|
||||
|
|
@ -199,12 +304,38 @@
|
|||
plsBuyisopacity.value = true
|
||||
}, 100)
|
||||
}
|
||||
const clickBall = () =>{
|
||||
const clickBall = () => {
|
||||
drawer.value.openDrawer();
|
||||
}
|
||||
const clickgoback = () =>{
|
||||
const clickgoshop = () => {
|
||||
goshopdrawer.value.openDrawer();
|
||||
}
|
||||
const clickgoback = () => {
|
||||
gobackdrawer.value.openDrawer();
|
||||
}
|
||||
// 记录序列号
|
||||
const saveIndex = ref(-1);
|
||||
// 传递数字
|
||||
const translateNumber = ref(0);
|
||||
//右侧计算器显示
|
||||
const rightCalShow = ref(false);
|
||||
const doOnce = ref(0);
|
||||
const openRight = (number:number,index:number) =>{
|
||||
saveIndex.value = index;
|
||||
translateNumber.value = number;
|
||||
rightCalShow.value = true;
|
||||
doOnce.value++
|
||||
}
|
||||
const closeRight = () =>{
|
||||
saveIndex.value = -1;
|
||||
translateNumber.value = 0;
|
||||
rightCalShow.value = false;
|
||||
}
|
||||
const changeNumber = ref(0);
|
||||
const rightOk = (num:number) =>{
|
||||
rightCalShow.value = false;
|
||||
changeNumber.value = num;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
|
@ -308,11 +439,9 @@
|
|||
margin: 20rpx 0 0 20rpx;
|
||||
width: 666rpx;
|
||||
height: 345rpx;
|
||||
border: 2rpx solid #fff;
|
||||
// border: 2rpx solid #fff;
|
||||
border-radius: 30rpx;
|
||||
background: url("/static/index/clearmountain.png") center/cover, rgba(255, 255, 255, 0.5);
|
||||
background-blend-mode: screen;
|
||||
isolation: isolate;
|
||||
background: #01ADF9 url("/static/index/warehouseCard/bgcblue.png") center/cover;
|
||||
box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
|
||||
|
|
@ -324,15 +453,31 @@
|
|||
margin: 27rpx 0 20rpx 30rpx;
|
||||
width: 200rpx;
|
||||
height: 280rpx;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
// background-color: rgba(255, 255, 255, 0.3);
|
||||
display: flex;
|
||||
border-radius: 30rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.swiper-card-left-white-img {
|
||||
.swiper-card-left-white-img-first {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
box-shadow: 2rpx 2rpx 4rpx 2rpx rgba(1, 178, 255, 0.2);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.swiper-card-left-white-img-second {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
box-shadow: 2rpx 2rpx 4rpx 2rpx rgba(11, 206, 184, 0.2);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.swiper-card-left-white-img-third {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
box-shadow: 2rpx 2rpx 4rpx 2rpx rgba(188, 163, 246, 0.2);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -353,13 +498,12 @@
|
|||
}
|
||||
|
||||
.swiper-title-font-button {
|
||||
padding: 5rpx 15rpx;
|
||||
background: linear-gradient(to right bottom, #0076ff, #00c9ff);
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-top: -3rpx;
|
||||
margin-right: 25rpx;
|
||||
margin-top: -20rpx;
|
||||
font-size: 25rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.swiper-title-mark {
|
||||
|
|
@ -424,12 +568,48 @@
|
|||
box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-detail-plsbuy {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
backdrop-filter: blur(1rpx);
|
||||
background-color: rgba(89, 109, 154, 0.4);
|
||||
|
||||
/* 添加毛玻璃效果 */
|
||||
z-index: 999;
|
||||
|
||||
.popup-detail-content-plsbuy {
|
||||
position: absolute;
|
||||
left: 350rpx;
|
||||
top: 310rpx;
|
||||
display: flex;
|
||||
width: 1200rpx;
|
||||
height: 850rpx;
|
||||
background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.5);
|
||||
background-blend-mode: screen;
|
||||
// background: url("/static/index/pink.png") center/cover;
|
||||
background-color: #fff;
|
||||
// background: url("/static/index/pink.png") center/cover;
|
||||
// background-blend-mode: screen;
|
||||
border: 2rpx solid #fff;
|
||||
/* 使用 screen 混合模式，让图像与白色混合变淡 */
|
||||
border-radius: 30rpx;
|
||||
box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.popup-detail-content-calculator {
|
||||
position: absolute;
|
||||
right: 160rpx;
|
||||
top: 310rpx;
|
||||
display: flex;
|
||||
width: 600rpx;
|
||||
height: 850rpx;
|
||||
background-color: #fff;
|
||||
// background: url("/static/index/pink.png") center/cover, rgba(255, 255, 255, 1);
|
||||
// background-blend-mode: screen;
|
||||
border: 2rpx solid #fff;
|
||||
/* 使用 screen 混合模式，让图像与白色混合变淡 */
|
||||
border-radius: 30rpx;
|
||||
|
|
@ -438,6 +618,33 @@
|
|||
}
|
||||
}
|
||||
|
||||
// .popup-detail-calculator {
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// // backdrop-filter: blur(1rpx);
|
||||
// // background-color: rgba(89, 109, 154, 0.4);
|
||||
// /* 添加毛玻璃效果 */
|
||||
// z-index: 999;
|
||||
|
||||
// .popup-detail-content-calculator {
|
||||
// position: absolute;
|
||||
// right: 150rpx;
|
||||
// top: 310rpx;
|
||||
// display: flex;
|
||||
// width: 600rpx;
|
||||
// height: 850rpx;
|
||||
// background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.5);
|
||||
// background-blend-mode: screen;
|
||||
// border: 2rpx solid #fff;
|
||||
// /* 使用 screen 混合模式，让图像与白色混合变淡 */
|
||||
// border-radius: 30rpx;
|
||||
// box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
// transition: opacity 0.4s ease;
|
||||
// }
|
||||
// }
|
||||
.blackfont {
|
||||
font-weight: 600;
|
||||
color: red;
|
||||
|
|
@ -445,14 +652,14 @@
|
|||
|
||||
.swiper-left-buttons {
|
||||
display: flex;
|
||||
margin-top: 10rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.swiper-left-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 160rpx;
|
||||
height: 70rpx;
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(to bottom, #D5E0F8, #ECF6FF);
|
||||
border: 1rpx #fff solid;
|
||||
|
|
@ -464,8 +671,8 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 160rpx;
|
||||
height: 70rpx;
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
||||
color: #fff;
|
||||
|
|
@ -473,6 +680,34 @@
|
|||
margin-right: 20rpx;
|
||||
box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.swiper-left-button-green {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(to right bottom, #00D6A9, #19BCD4);
|
||||
color: #fff;
|
||||
border: 1rpx #fff solid;
|
||||
margin-right: 20rpx;
|
||||
box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.swiper-left-button-pouple {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(to right bottom, #AA55E1, #BD9AF8);
|
||||
color: #fff;
|
||||
border: 1rpx #fff solid;
|
||||
margin-right: 20rpx;
|
||||
box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.bgc-img {
|
||||
|
|
@ -571,4 +806,7 @@
|
|||
z-index: 101;
|
||||
}
|
||||
|
||||
.bug-bottom {
|
||||
height: 30rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,17 +4,20 @@
|
|||
<!-- 解决margin重叠问题 -->
|
||||
<view class="index-right-height"></view>
|
||||
<view class="index-right-title">
|
||||
<view class="ball-bgc" style="box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);" @click="firstBallClick">
|
||||
<view class="ball-bgc" style="box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);"
|
||||
@click="firstBallClick">
|
||||
<view :class="clickBall(firstBall)">
|
||||
采购
|
||||
</view>
|
||||
</view>
|
||||
<view class="ball-bgc" style="box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);" @click="secondBallClick">
|
||||
<view class="ball-bgc" style="box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);"
|
||||
@click="secondBallClick">
|
||||
<view :class="clickBall(secondBall)">
|
||||
拣货
|
||||
</view>
|
||||
</view>
|
||||
<view class="ball-bgc" style="box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);" @click="thirdBallClick">
|
||||
<view class="ball-bgc" style="box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);"
|
||||
@click="thirdBallClick">
|
||||
<view :class="clickBall(thirdBall)">
|
||||
结账
|
||||
</view>
|
||||
|
|
@ -135,7 +138,7 @@
|
|||
</view>
|
||||
<view class="swiper-button">
|
||||
<view class="button-father">
|
||||
<view class="swiper-button-white">
|
||||
<view class="swiper-button-white" @click="openDetailDrawer(item.cardType)">
|
||||
详情
|
||||
</view>
|
||||
<view class="swiper-button-blue" v-show="item.cardType==4"
|
||||
|
|
@ -159,7 +162,7 @@
|
|||
确认
|
||||
</view>
|
||||
<view class="swiper-button-red" v-show="item.cardType==1"
|
||||
@click="isDelete(index)">
|
||||
@click="openVoidDrawer(index)">
|
||||
作废
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -195,12 +198,28 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 详情的抽屉 -->
|
||||
<Drawer ref="detaildrawer" :widNumber="60">
|
||||
<otherDetail :openType="openType" @closedetail="closedetaildrawer" @openDrawer="openDrawer" />
|
||||
</Drawer>
|
||||
<!-- 入库单的抽屉 -->
|
||||
<Drawer ref="storagedrawer" :widNumber="50" style="z-index: 1000;">
|
||||
<storage @voidIt="isDelete(saveVoidIndex)" @closevoid="closevoid" />
|
||||
</Drawer>
|
||||
<!-- 作废的抽屉 -->
|
||||
<Drawer ref="voiddrawer" :widNumber="60">
|
||||
<otherVoid @voidIt="isDelete(saveVoidIndex)" @closevoid="closevoid" />
|
||||
</Drawer>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, watch } from 'vue';
|
||||
|
||||
import Drawer from "@/component/public/Drawer.vue"
|
||||
import otherDetail from "@/component/storeroom/drawer/otherDetail/index.vue"
|
||||
import otherVoid from "@/component/storeroom/drawer/otherVoid/index.vue"
|
||||
import storage from "@/component/storeroom/drawer/storage/index.vue"
|
||||
|
||||
const props = defineProps({
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
|
|
@ -212,7 +231,7 @@
|
|||
const getBallFirst = (type : number) => {
|
||||
switch (type) {
|
||||
case 0:
|
||||
return `ball-red`
|
||||
return `ball-red-big`
|
||||
case 1:
|
||||
return `ball-yellow-big`
|
||||
default:
|
||||
|
|
@ -260,16 +279,41 @@
|
|||
}
|
||||
}
|
||||
)
|
||||
|
||||
const detaildrawer = ref(null);
|
||||
const voiddrawer = ref(null);
|
||||
const storagedrawer = ref(null);
|
||||
|
||||
const firstBall = ref(0);
|
||||
const secondBall = ref(0);
|
||||
const thirdBall = ref(0);
|
||||
const calendarShow = ref(false);
|
||||
// 打开详情
|
||||
const openType = ref(-1);
|
||||
const openDetailDrawer = (type:number) =>{
|
||||
openType.value = type;
|
||||
detaildrawer.value.openDrawer();
|
||||
}
|
||||
const saveVoidIndex = ref(-1);
|
||||
const openVoidDrawer = (index:number) =>{
|
||||
// openType.value = type;
|
||||
saveVoidIndex.value = index
|
||||
voiddrawer.value.openDrawer();
|
||||
}
|
||||
const openDrawer = (index:number) =>{
|
||||
if(!index){
|
||||
storagedrawer.value.openDrawer();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const isDelete = (index : number) => {
|
||||
firstBall.value = 0
|
||||
secondBall.value = 0
|
||||
thirdBall.value = 0
|
||||
cardArray.value[index].cardType = 0
|
||||
sliceArray.value = cardArray.value;
|
||||
voiddrawer.value.closeDrawer()
|
||||
}
|
||||
const isRight = (index : number) => {
|
||||
firstBall.value = 0
|
||||
|
|
@ -426,6 +470,12 @@
|
|||
detailisopacity.value = true
|
||||
}, 200)
|
||||
}
|
||||
const closedetaildrawer = () =>{
|
||||
detaildrawer.value.closeDrawer()
|
||||
}
|
||||
const closevoid = () =>{
|
||||
voiddrawer.value.closeDrawer()
|
||||
}
|
||||
const calendarchange = (e : any) => {
|
||||
stateTarget.value = e.result
|
||||
}
|
||||
|
|
@ -700,7 +750,7 @@
|
|||
align-items: center;
|
||||
border-radius: 50%;
|
||||
margin-left: 20rpx;
|
||||
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -726,19 +776,30 @@
|
|||
color: #A53600;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
.ball-red {
|
||||
.ball-red-big {
|
||||
background: #FF642F;
|
||||
color: #fff;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
.ball-red {
|
||||
background: #FF642F;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.ball-white {
|
||||
background: linear-gradient(to bottom, #CBD9FD, #A2B7E0);
|
||||
width: 80rpx;
|
||||
|
|
@ -751,18 +812,6 @@
|
|||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
// .ball-blue {
|
||||
// background: linear-gradient(to bottom, #CBD9FD, #A2B7E0);
|
||||
// width: 80rpx;
|
||||
// height: 80rpx;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// border-radius: 50%;
|
||||
// color: #fff;
|
||||
// font-size: 25rpx;
|
||||
// }
|
||||
|
||||
.ball-green {
|
||||
background: linear-gradient(to top, #ACE800, #55B718);
|
||||
width: 80rpx;
|
||||
|
|
@ -902,5 +951,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -131,6 +131,7 @@
|
|||
method: 'GET',
|
||||
dataType:'json',
|
||||
success: (res) => {
|
||||
console.log("?????",res)
|
||||
if(res.data.code==100){
|
||||
//提示升级
|
||||
if(res.data.data.update_url){
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
"name" : "养老App",
|
||||
"appid" : "__UNI__FB2D473",
|
||||
"description" : "养老App",
|
||||
"versionName" : "1.1.5",
|
||||
"versionCode" : 115,
|
||||
"versionName" : "1.1.7",
|
||||
"versionCode" : 117,
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@
|
|||
]);
|
||||
|
||||
// 当前选中的菜单索引
|
||||
const menuIndex = ref<number>(1);
|
||||
const menuIndex = ref<number>(0);
|
||||
const menuIndexshow = ref<boolean>(false);
|
||||
const menuIndexshowsecond = ref<boolean>(false);
|
||||
// 暗黑模式
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
import storeroomorders from "@/component/storeroom/orders.vue"
|
||||
// 暗黑模式
|
||||
const darkFans = ref(false);
|
||||
const menuIndex = ref(0);
|
||||
const menuIndex = ref(1);
|
||||
// 删除表格弹窗
|
||||
const detailisopen = ref(false);
|
||||
const detailisopacity = ref(false)
|
||||
|
|
|
|||
|
|
@ -5,9 +5,10 @@
|
|||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="small-button" @click="jumpTo(`/pages/assess/index`)">
|
||||
<!-- 服务考核页面要保留啊啊啊 -->
|
||||
<!-- <view class="small-button" @click="jumpTo(`/pages/assess/index`)">
|
||||
服务考核
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<!-- 自动更新组件 -->
|
||||
<zy-update ref="zyupgrade" :noticeflag="true" theme="blue" :h5preview="false" oldversion="1.0.0"
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 404 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 804 B |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 468 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
|
@ -1 +1 @@
|
|||
https://app.liuyingyong.cn/build/download/ba272f50-1418-11f0-9c9c-93f8848c2d95
|
||||
https://app.liuyingyong.cn/build/download/3cc83f50-2b24-11f0-bca4-f7e5c2668d85
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,8 @@
|
|||
|
||||
;(function(){
|
||||
let u=void 0,isReady=false,onReadyCallbacks=[],isServiceReady=false,onServiceReadyCallbacks=[];
|
||||
const __uniConfig = {"pages":[],"globalStyle":{"backgroundColor":"#F8F8F8","bounce":"none","navigationBar":{"backgroundColor":"#F8F8F8","titleText":"uni-app x","type":"default","titleColor":"#000000"},"isNVue":false},"nvue":{"compiler":"uni-app","styleCompiler":"uni-app","flex-direction":"column"},"renderer":"auto","appname":"养老App","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":true},"compilerVersion":"4.57","entryPagePath":"pages/index/index","entryPageQuery":"","realEntryPagePath":"","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000},"locales":{},"darkmode":false,"themeConfig":{}};
|
||||
const __uniRoutes = [{"path":"pages/index/index","meta":{"isQuit":true,"isEntry":true,"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/Nursing/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/Warehousing/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/login/login","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/timeMatrix/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/timeMatrix/indexnew","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}}].map(uniRoute=>(uniRoute.meta.route=uniRoute.path,__uniConfig.pages.push(uniRoute.path),uniRoute.path='/'+uniRoute.path,uniRoute));
|
||||
const __uniConfig = {"pages":[],"globalStyle":{"backgroundColor":"#F8F8F8","bounce":"none","navigationBar":{"backgroundColor":"#F8F8F8","titleText":"uni-app x","type":"default","titleColor":"#000000"},"isNVue":false},"nvue":{"compiler":"uni-app","styleCompiler":"uni-app","flex-direction":"column"},"renderer":"auto","appname":"养老App","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":true},"compilerVersion":"4.64","entryPagePath":"pages/index/index","entryPageQuery":"","realEntryPagePath":"","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000},"locales":{},"darkmode":false,"themeConfig":{}};
|
||||
const __uniRoutes = [{"path":"pages/index/index","meta":{"isQuit":true,"isEntry":true,"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/Nursing/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/Warehousing/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/assess/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/login/login","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/timeMatrix/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/timeMatrix/indexnew","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}}].map(uniRoute=>(uniRoute.meta.route=uniRoute.path,__uniConfig.pages.push(uniRoute.path),uniRoute.path='/'+uniRoute.path,uniRoute));
|
||||
__uniConfig.styles=[];//styles
|
||||
__uniConfig.onReady=function(callback){if(__uniConfig.ready){callback()}else{onReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"ready",{get:function(){return isReady},set:function(val){isReady=val;if(!isReady){return}const callbacks=onReadyCallbacks.slice(0);onReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
|
||||
__uniConfig.onServiceReady=function(callback){if(__uniConfig.serviceReady){callback()}else{onServiceReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"serviceReady",{get:function(){return isServiceReady},set:function(val){isServiceReady=val;if(!isServiceReady){return}const callbacks=onServiceReadyCallbacks.slice(0);onServiceReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
{"@platforms":["android","iPhone","iPad"],"id":"__UNI__FB2D473","name":"养老App","version":{"name":"1.1.5","code":115},"description":"养老App","developer":{"name":"","email":"","url":""},"permissions":{"Share":{},"Camera":{},"VideoPlayer":{},"UniNView":{"description":"UniNView原生渲染"}},"plus":{"useragent":{"value":"uni-app","concatenate":true},"splashscreen":{"autoclose":true,"delay":0,"target":"id:1","waiting":true},"popGesture":"close","launchwebview":{"render":"always","id":"1","kernel":"WKWebview"},"usingComponents":true,"nvueStyleCompiler":"uni-app","compilerVersion":3,"distribute":{"icons":{"android":{"hdpi":"icon-android-hdpi.png","xhdpi":"icon-android-xhdpi.png","xxhdpi":"icon-android-xxhdpi.png","xxxhdpi":"icon-android-xxxhdpi.png"},"ios":{"appstore":"unpackage/res/icons/1024x1024.png","ipad":{"app":"unpackage/res/icons/76x76.png","app@2x":"unpackage/res/icons/152x152.png","notification":"unpackage/res/icons/20x20.png","notification@2x":"unpackage/res/icons/40x40.png","proapp@2x":"unpackage/res/icons/167x167.png","settings":"unpackage/res/icons/29x29.png","settings@2x":"unpackage/res/icons/58x58.png","spotlight":"unpackage/res/icons/40x40.png","spotlight@2x":"unpackage/res/icons/80x80.png"},"iphone":{"app@2x":"unpackage/res/icons/120x120.png","app@3x":"unpackage/res/icons/180x180.png","notification@2x":"unpackage/res/icons/40x40.png","notification@3x":"unpackage/res/icons/60x60.png","settings@2x":"unpackage/res/icons/58x58.png","settings@3x":"unpackage/res/icons/87x87.png","spotlight@2x":"unpackage/res/icons/80x80.png","spotlight@3x":"unpackage/res/icons/120x120.png"},"prerendered":"false"}},"google":{"abiFilters":["armeabi-v7a","arm64-v8a","x86"],"permissions":["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"],"packagename":"uni.UNIFB2D473","aliasname":"__uni__fb2d473","password":"Z4Urhm9jqwqMGoeQNpGzJA==","storepwd":"Z4Urhm9jqwqMGoeQNpGzJA==","keypwd":"Z4Urhm9jqwqMGoeQNpGzJA==","keystore":"google-keystore.keystore","custompermissions":true},"apple":{"dSYMs":false,"devices":"universal"},"plugins":{"audio":{"mp3":{"description":"Android平台录音支持MP3格式文件"}},"share":{"weixin":{"UniversalLinks":"","appid":"wxda748470da82886e"}}},"orientation":"portrait-primary"},"statusbar":{"immersed":"supportedDevice","style":"dark","background":"#F8F8F8"},"uniStatistics":{"enable":false},"allowsInlineMediaPlayback":true,"uni-app":{"control":"uni-v3","vueVersion":"3","compilerVersion":"4.57","nvueCompiler":"uni-app","renderer":"auto","nvue":{"flex-direction":"column"},"nvueLaunchMode":"normal","webView":{"minUserAgentVersion":"49.0"}},"adid":"122926210510"},"app-harmony":{"useragent":{"value":"uni-app","concatenate":true},"uniStatistics":{"enable":false}},"screenOrientation":["landscape-primary","landscape-secondary"],"launch_path":"__uniappview.html"}
|
||||
{"@platforms":["android","iPhone","iPad"],"id":"__UNI__FB2D473","name":"养老App","version":{"name":"1.1.7","code":117},"description":"养老App","developer":{"name":"","email":"","url":""},"permissions":{"Share":{},"Camera":{},"VideoPlayer":{},"UniNView":{"description":"UniNView原生渲染"}},"plus":{"useragent":{"value":"uni-app","concatenate":true},"splashscreen":{"autoclose":true,"delay":0,"target":"id:1","waiting":true},"popGesture":"close","launchwebview":{"render":"always","id":"1","kernel":"WKWebview"},"usingComponents":true,"nvueStyleCompiler":"uni-app","compilerVersion":3,"distribute":{"icons":{"android":{"hdpi":"icon-android-hdpi.png","xhdpi":"icon-android-xhdpi.png","xxhdpi":"icon-android-xxhdpi.png","xxxhdpi":"icon-android-xxxhdpi.png"},"ios":{"appstore":"unpackage/res/icons/1024x1024.png","ipad":{"app":"unpackage/res/icons/76x76.png","app@2x":"unpackage/res/icons/152x152.png","notification":"unpackage/res/icons/20x20.png","notification@2x":"unpackage/res/icons/40x40.png","proapp@2x":"unpackage/res/icons/167x167.png","settings":"unpackage/res/icons/29x29.png","settings@2x":"unpackage/res/icons/58x58.png","spotlight":"unpackage/res/icons/40x40.png","spotlight@2x":"unpackage/res/icons/80x80.png"},"iphone":{"app@2x":"unpackage/res/icons/120x120.png","app@3x":"unpackage/res/icons/180x180.png","notification@2x":"unpackage/res/icons/40x40.png","notification@3x":"unpackage/res/icons/60x60.png","settings@2x":"unpackage/res/icons/58x58.png","settings@3x":"unpackage/res/icons/87x87.png","spotlight@2x":"unpackage/res/icons/80x80.png","spotlight@3x":"unpackage/res/icons/120x120.png"},"prerendered":"false"}},"google":{"abiFilters":["armeabi-v7a","arm64-v8a","x86"],"permissions":["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"],"packagename":"uni.UNIFB2D473","aliasname":"__uni__fb2d473","password":"Z4Urhm9jqwqMGoeQNpGzJA==","storepwd":"Z4Urhm9jqwqMGoeQNpGzJA==","keypwd":"Z4Urhm9jqwqMGoeQNpGzJA==","keystore":"google-keystore.keystore","custompermissions":true},"apple":{"dSYMs":false,"devices":"universal"},"plugins":{"audio":{"mp3":{"description":"Android平台录音支持MP3格式文件"}},"share":{"weixin":{"UniversalLinks":"","appid":"wxda748470da82886e"}}},"orientation":"portrait-primary"},"statusbar":{"immersed":"supportedDevice","style":"dark","background":"#F8F8F8"},"uniStatistics":{"enable":false},"allowsInlineMediaPlayback":true,"uni-app":{"control":"uni-v3","vueVersion":"3","compilerVersion":"4.64","nvueCompiler":"uni-app","renderer":"auto","nvue":{"flex-direction":"column"},"nvueLaunchMode":"normal","webView":{"minUserAgentVersion":"49.0"}},"adid":"122926210510"},"app-harmony":{"useragent":{"value":"uni-app","concatenate":true},"uniStatistics":{"enable":false}},"screenOrientation":["landscape-primary","landscape-secondary"],"launch_path":"__uniappview.html"}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
.calendar[data-v-0bf11501]{padding:16px}.header[data-v-0bf11501]{display:flex;flex-direction:column}.header-title[data-v-0bf11501]{display:flex;justify-content:space-between;align-items:center}.year-month[data-v-0bf11501]{font-size:18px;font-weight:700;margin-bottom:8px}.botton-father[data-v-0bf11501]{display:flex;margin-top:-.625rem}.click-button[data-v-0bf11501]{padding:.3125rem;width:3.75rem;font-size:.78125rem;height:1.25rem;margin-right:.3125rem;display:flex;justify-content:center;align-items:center;color:#fff;background-color:#888;border-radius:.3125rem}.weekdays[data-v-0bf11501]{display:flex;background-color:#e9e7fc;border-radius:.9375rem;padding:.3125rem}.weekday[data-v-0bf11501]{flex:1;text-align:center}.days[data-v-0bf11501]{display:flex;flex-wrap:wrap;padding:.3125rem}.day-cell[data-v-0bf11501]{width:2.29688rem;height:2.51563rem;text-align:center;padding-top:.25rem;padding-bottom:.25rem;box-sizing:border-box}.day-cell.prev-month .gregorian[data-v-0bf11501],.day-cell.next-month .gregorian[data-v-0bf11501]{color:#ccc}.day-cell.selected[data-v-0bf11501]{background-color:#0b98dc;border-radius:.3125rem}.day-cell.selected .gregorian[data-v-0bf11501],.day-cell.selected .lunar[data-v-0bf11501]{color:#fff}.gregorian[data-v-0bf11501]{font-size:14px}.lunar[data-v-0bf11501]{font-size:10px;color:#888}.backgroundContainer[data-v-65a124ce]{position:relative;width:100%;height:100vh;background-image:url(../../static/index/lightbgcnew.png);background-size:cover;background-position:center center;overflow:hidden}.assess-title[data-v-65a124ce]{margin-top:1.875rem;width:100%;height:1.875rem;display:flex;align-items:center;justify-content:space-between}.assess-title .right-icons[data-v-65a124ce]{display:flex;align-items:center;float:right;height:2.1875rem;margin-right:1.25rem}.assess-title .right-icons .right-icons-font[data-v-65a124ce]{margin-left:.3125rem;margin-right:.3125rem;font-size:1.09375rem;margin-top:-.46875rem}.assess-title .right-icons .right-icons-font-dark[data-v-65a124ce]{color:#fff;margin-left:.3125rem;margin-right:.3125rem;font-size:1.09375rem;margin-top:-.46875rem}.assess-title .right-icons .right-icons-img[data-v-65a124ce]{width:2.5rem;height:2.5rem;margin-left:.3125rem;margin-right:.3125rem;margin-top:-.625rem}.assess-title .right-icons .right-icons-img-icon[data-v-65a124ce]{width:1.875rem;height:2.5rem;margin-left:.25rem}.assess-title .left-icons[data-v-65a124ce]{display:flex;margin-left:1.25rem}.assess-title .left-icons .left-icons-img[data-v-65a124ce]{width:2.1875rem;height:2.1875rem}.assess-title .left-icons .right-icons-font[data-v-65a124ce]{font-weight:700;font-size:1.09375rem;margin-left:.3125rem;margin-top:.3125rem}.assess-title .left-icons .right-icons-text[data-v-65a124ce]{font-size:1.09375rem;margin-top:.3125rem}.assess-another[data-v-65a124ce]{width:100%;height:calc(100vh - 3.75rem);margin-top:.3125rem;display:flex;margin-left:1.5625rem}.assess-another .left-contain[data-v-65a124ce]{height:100%;width:18.75rem}.assess-another .left-contain .calendar[data-v-65a124ce]{width:100%;height:20.3125rem;background:linear-gradient(to top,#f4f3ff,#fff,#ecefff);border-radius:.78125rem}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 404 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 804 B |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
unpackage/cache/wgt/__UNI__FB2D473/static/index/warehouseCard/bgcpouple.png
vendored
Normal file
BIN
unpackage/cache/wgt/__UNI__FB2D473/static/index/warehouseCard/bgcpouple.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
unpackage/cache/wgt/__UNI__FB2D473/static/index/warehouseCard/orangeicon.png
vendored
Normal file
BIN
unpackage/cache/wgt/__UNI__FB2D473/static/index/warehouseCard/orangeicon.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
unpackage/cache/wgt/__UNI__FB2D473/static/index/warehouseCard/selectblue.png
vendored
Normal file
BIN
unpackage/cache/wgt/__UNI__FB2D473/static/index/warehouseCard/selectblue.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 468 B |
BIN
unpackage/cache/wgt/__UNI__FB2D473/static/index/warehouseCard/selectwhite.png
vendored
Normal file
BIN
unpackage/cache/wgt/__UNI__FB2D473/static/index/warehouseCard/selectwhite.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,8 @@
|
|||
|
||||
;(function(){
|
||||
let u=void 0,isReady=false,onReadyCallbacks=[],isServiceReady=false,onServiceReadyCallbacks=[];
|
||||
const __uniConfig = {"pages":[],"globalStyle":{"backgroundColor":"#F8F8F8","bounce":"none","navigationBar":{"backgroundColor":"#F8F8F8","titleText":"uni-app x","type":"default","titleColor":"#000000"},"isNVue":false},"nvue":{"compiler":"uni-app","styleCompiler":"uni-app","flex-direction":"column"},"renderer":"auto","appname":"养老App","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":true},"compilerVersion":"4.57","entryPagePath":"pages/index/index","entryPageQuery":"","realEntryPagePath":"","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000},"locales":{},"darkmode":false,"themeConfig":{}};
|
||||
const __uniRoutes = [{"path":"pages/index/index","meta":{"isQuit":true,"isEntry":true,"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/Nursing/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/Warehousing/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/login/login","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/timeMatrix/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/timeMatrix/indexnew","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}}].map(uniRoute=>(uniRoute.meta.route=uniRoute.path,__uniConfig.pages.push(uniRoute.path),uniRoute.path='/'+uniRoute.path,uniRoute));
|
||||
const __uniConfig = {"pages":[],"globalStyle":{"backgroundColor":"#F8F8F8","bounce":"none","navigationBar":{"backgroundColor":"#F8F8F8","titleText":"uni-app x","type":"default","titleColor":"#000000"},"isNVue":false},"nvue":{"compiler":"uni-app","styleCompiler":"uni-app","flex-direction":"column"},"renderer":"auto","appname":"养老App","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":true},"compilerVersion":"4.64","entryPagePath":"pages/index/index","entryPageQuery":"","realEntryPagePath":"","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000},"locales":{},"darkmode":false,"themeConfig":{}};
|
||||
const __uniRoutes = [{"path":"pages/index/index","meta":{"isQuit":true,"isEntry":true,"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/Nursing/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/Warehousing/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/assess/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/login/login","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/timeMatrix/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/timeMatrix/indexnew","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}}].map(uniRoute=>(uniRoute.meta.route=uniRoute.path,__uniConfig.pages.push(uniRoute.path),uniRoute.path='/'+uniRoute.path,uniRoute));
|
||||
__uniConfig.styles=[];//styles
|
||||
__uniConfig.onReady=function(callback){if(__uniConfig.ready){callback()}else{onReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"ready",{get:function(){return isReady},set:function(val){isReady=val;if(!isReady){return}const callbacks=onReadyCallbacks.slice(0);onReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
|
||||
__uniConfig.onServiceReady=function(callback){if(__uniConfig.serviceReady){callback()}else{onServiceReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"serviceReady",{get:function(){return isServiceReady},set:function(val){isServiceReady=val;if(!isServiceReady){return}const callbacks=onServiceReadyCallbacks.slice(0);onServiceReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -7,8 +7,8 @@
|
|||
"id": "__UNI__FB2D473",
|
||||
"name": "养老App",
|
||||
"version": {
|
||||
"name": "1.1.5",
|
||||
"code": 115
|
||||
"name": "1.1.7",
|
||||
"code": 117
|
||||
},
|
||||
"description": "养老App",
|
||||
"developer": {
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
"uni-app": {
|
||||
"control": "uni-v3",
|
||||
"vueVersion": "3",
|
||||
"compilerVersion": "4.57",
|
||||
"compilerVersion": "4.64",
|
||||
"nvueCompiler": "uni-app",
|
||||
"renderer": "auto",
|
||||
"nvue": {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
.calendar[data-v-0bf11501]{padding:16px}.header[data-v-0bf11501]{display:flex;flex-direction:column}.header-title[data-v-0bf11501]{display:flex;justify-content:space-between;align-items:center}.year-month[data-v-0bf11501]{font-size:18px;font-weight:700;margin-bottom:8px}.botton-father[data-v-0bf11501]{display:flex;margin-top:-.625rem}.click-button[data-v-0bf11501]{padding:.3125rem;width:3.75rem;font-size:.78125rem;height:1.25rem;margin-right:.3125rem;display:flex;justify-content:center;align-items:center;color:#fff;background-color:#888;border-radius:.3125rem}.weekdays[data-v-0bf11501]{display:flex;background-color:#e9e7fc;border-radius:.9375rem;padding:.3125rem}.weekday[data-v-0bf11501]{flex:1;text-align:center}.days[data-v-0bf11501]{display:flex;flex-wrap:wrap;padding:.3125rem}.day-cell[data-v-0bf11501]{width:2.29688rem;height:2.51563rem;text-align:center;padding-top:.25rem;padding-bottom:.25rem;box-sizing:border-box}.day-cell.prev-month .gregorian[data-v-0bf11501],.day-cell.next-month .gregorian[data-v-0bf11501]{color:#ccc}.day-cell.selected[data-v-0bf11501]{background-color:#0b98dc;border-radius:.3125rem}.day-cell.selected .gregorian[data-v-0bf11501],.day-cell.selected .lunar[data-v-0bf11501]{color:#fff}.gregorian[data-v-0bf11501]{font-size:14px}.lunar[data-v-0bf11501]{font-size:10px;color:#888}.backgroundContainer[data-v-65a124ce]{position:relative;width:100%;height:100vh;background-image:url(../../static/index/lightbgcnew.png);background-size:cover;background-position:center center;overflow:hidden}.assess-title[data-v-65a124ce]{margin-top:1.875rem;width:100%;height:1.875rem;display:flex;align-items:center;justify-content:space-between}.assess-title .right-icons[data-v-65a124ce]{display:flex;align-items:center;float:right;height:2.1875rem;margin-right:1.25rem}.assess-title .right-icons .right-icons-font[data-v-65a124ce]{margin-left:.3125rem;margin-right:.3125rem;font-size:1.09375rem;margin-top:-.46875rem}.assess-title .right-icons .right-icons-font-dark[data-v-65a124ce]{color:#fff;margin-left:.3125rem;margin-right:.3125rem;font-size:1.09375rem;margin-top:-.46875rem}.assess-title .right-icons .right-icons-img[data-v-65a124ce]{width:2.5rem;height:2.5rem;margin-left:.3125rem;margin-right:.3125rem;margin-top:-.625rem}.assess-title .right-icons .right-icons-img-icon[data-v-65a124ce]{width:1.875rem;height:2.5rem;margin-left:.25rem}.assess-title .left-icons[data-v-65a124ce]{display:flex;margin-left:1.25rem}.assess-title .left-icons .left-icons-img[data-v-65a124ce]{width:2.1875rem;height:2.1875rem}.assess-title .left-icons .right-icons-font[data-v-65a124ce]{font-weight:700;font-size:1.09375rem;margin-left:.3125rem;margin-top:.3125rem}.assess-title .left-icons .right-icons-text[data-v-65a124ce]{font-size:1.09375rem;margin-top:.3125rem}.assess-another[data-v-65a124ce]{width:100%;height:calc(100vh - 3.75rem);margin-top:.3125rem;display:flex;margin-left:1.5625rem}.assess-another .left-contain[data-v-65a124ce]{height:100%;width:18.75rem}.assess-another .left-contain .calendar[data-v-65a124ce]{width:100%;height:20.3125rem;background:linear-gradient(to top,#f4f3ff,#fff,#ecefff);border-radius:.78125rem}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 404 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 804 B |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 468 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"hash": "3a4e4f22",
|
||||
"hash": "2a31966e",
|
||||
"configHash": "4f93fa68",
|
||||
"lockfileHash": "e3b0c442",
|
||||
"browserHash": "cbe9be9c",
|
||||
"lockfileHash": "e88c1aa2",
|
||||
"browserHash": "a6171813",
|
||||
"optimized": {},
|
||||
"chunks": {}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
;(function(){
|
||||
let u=void 0,isReady=false,onReadyCallbacks=[],isServiceReady=false,onServiceReadyCallbacks=[];
|
||||
const __uniConfig = {"pages":[],"globalStyle":{"backgroundColor":"#F8F8F8","bounce":"none","navigationBar":{"backgroundColor":"#F8F8F8","titleText":"uni-app x","type":"default","titleColor":"#000000"},"isNVue":false},"nvue":{"compiler":"uni-app","styleCompiler":"uni-app","flex-direction":"column"},"renderer":"auto","appname":"养老App","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":true},"compilerVersion":"4.57","entryPagePath":"pages/index/index","entryPageQuery":"","realEntryPagePath":"","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000},"locales":{},"darkmode":false,"themeConfig":{}};
|
||||
const __uniConfig = {"pages":[],"globalStyle":{"backgroundColor":"#F8F8F8","bounce":"none","navigationBar":{"backgroundColor":"#F8F8F8","titleText":"uni-app x","type":"default","titleColor":"#000000"},"isNVue":false},"nvue":{"compiler":"uni-app","styleCompiler":"uni-app","flex-direction":"column"},"renderer":"auto","appname":"养老App","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":true},"compilerVersion":"4.64","entryPagePath":"pages/index/index","entryPageQuery":"","realEntryPagePath":"","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000},"locales":{},"darkmode":false,"themeConfig":{}};
|
||||
const __uniRoutes = [{"path":"pages/index/index","meta":{"isQuit":true,"isEntry":true,"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/Nursing/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/Warehousing/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/assess/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/login/login","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/timeMatrix/index","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}},{"path":"pages/timeMatrix/indexnew","meta":{"navigationBar":{"style":"custom","type":"default"},"isNVue":false}}].map(uniRoute=>(uniRoute.meta.route=uniRoute.path,__uniConfig.pages.push(uniRoute.path),uniRoute.path='/'+uniRoute.path,uniRoute));
|
||||
__uniConfig.styles=[];//styles
|
||||
__uniConfig.onReady=function(callback){if(__uniConfig.ready){callback()}else{onReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"ready",{get:function(){return isReady},set:function(val){isReady=val;if(!isReady){return}const callbacks=onReadyCallbacks.slice(0);onReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -7,8 +7,8 @@
|
|||
"id": "__UNI__FB2D473",
|
||||
"name": "养老App",
|
||||
"version": {
|
||||
"name": "1.1.5",
|
||||
"code": 115
|
||||
"name": "1.1.7",
|
||||
"code": 117
|
||||
},
|
||||
"description": "养老App",
|
||||
"developer": {
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
"uni-app": {
|
||||
"control": "uni-v3",
|
||||
"vueVersion": "3",
|
||||
"compilerVersion": "4.57",
|
||||
"compilerVersion": "4.64",
|
||||
"nvueCompiler": "uni-app",
|
||||
"renderer": "auto",
|
||||
"nvue": {
|
||||
|
|
|
|||
|
|
@ -7,38 +7,46 @@
|
|||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
/* 确保遮罩层在抽屉下方 */
|
||||
will-change: opacity;
|
||||
transition: opacity 0.3s ease;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
/* 由 v-show 控制 */
|
||||
}
|
||||
/* 抽屉样式 */
|
||||
/* 当 isVisible 为 true 时，添加 overlay-show 类，触发遮罩渐显 */
|
||||
.overlay-show[data-v-40fcca19] {
|
||||
opacity: 1;
|
||||
}
|
||||
/* 抽屉整体样式 */
|
||||
.drawer[data-v-40fcca19] {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
z-index: 1000;
|
||||
/* 确保抽屉在遮罩层上方 */
|
||||
transition: right 0.5s ease;
|
||||
border-top-left-radius: 2.5rem;
|
||||
/* 设置左上角的圆角半径 */
|
||||
border-bottom-left-radius: 2.5rem;
|
||||
/* overflow: hidden; */
|
||||
/* 设置左下角的圆角半径 */
|
||||
/* 使用 transform 做动画，避免布局重排 */
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.4s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
/* 抽屉打开时的样式 */
|
||||
/* 抽屉打开时 */
|
||||
.drawer-open[data-v-40fcca19] {
|
||||
right: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
/* 抽屉内容样式 */
|
||||
.drawer-content[data-v-40fcca19] {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.drawer-content .drawer-content-circle[data-v-40fcca19] {
|
||||
.drawer-content-circle[data-v-40fcca19] {
|
||||
position: absolute;
|
||||
top: calc(50% - 1.71875rem);
|
||||
left: -1.25rem;
|
||||
width: 3.125rem;
|
||||
height: 3.4375rem;
|
||||
/* border-radius 的两个值分别代表水平和垂直半径 */
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
background: linear-gradient(to bottom, #dfecfa, #c9dbee);
|
||||
|
|
@ -46,9 +54,8 @@
|
|||
align-items: center;
|
||||
-webkit-clip-path: inset(0 60% 0 0);
|
||||
clip-path: inset(0 60% 0 0);
|
||||
/* 上 右 下 左，裁掉右半边 */
|
||||
}
|
||||
.drawer-content .drawer-content-circle .drawer-img[data-v-40fcca19] {
|
||||
.drawer-img[data-v-40fcca19] {
|
||||
width: 0.78125rem;
|
||||
height: 0.78125rem;
|
||||
margin-left: 0.3125rem;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 404 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 804 B |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 468 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue