321 lines
7.7 KiB
Vue
321 lines
7.7 KiB
Vue
<!-- 请购 -->
|
||
<template>
|
||
<view class="draw-all">
|
||
<!-- <view class="draw-title">
|
||
<view class="draw-flex">
|
||
<view class="draw-title-gun"></view>
|
||
<view class="draw-title-font">清单</view>
|
||
</view>
|
||
<view class="draw-blue">
|
||
请购单号:A0120250301001
|
||
</view>
|
||
</view> -->
|
||
<view class="draw-contain">
|
||
<!-- 解决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> |