diff --git a/pages/NursingNew/index.vue b/pages/NursingNew/index.vue
index 8dc9fcf..951a311 100644
--- a/pages/NursingNew/index.vue
+++ b/pages/NursingNew/index.vue
@@ -256,7 +256,6 @@
 
 	// 变更菜单
 	const changeMenu = (index) => {
-		console.log(index)
 		if (index === menuIndex.value) {
 			return
 		}
diff --git a/pages/material/component/carditem.vue b/pages/material/component/carditem.vue
index a8fcf40..08e0b7d 100644
--- a/pages/material/component/carditem.vue
+++ b/pages/material/component/carditem.vue
@@ -60,7 +60,7 @@
 								<image :src="'/static/index/procurement/+.png'" mode="aspectFill"></image>
 							</view> -->
 							<view class="zkadd guodu" >
-								<view class="zkadd-white" style="background: #F1F1F1;" @click.stop="crk(v,index)" @touchend.stop>盘点</view>
+								<view class="zkadd-white" style="background: #F1F1F1;" @click.stop="pandian(v,index)" @touchend.stop>盘点</view>
 								<view class="zkadd-white" @click.stop="crk(v,index)" @touchend.stop>出入库</view>
 								<view class="zkadd-blue" @click.stop="addcar(v,index)" v-if="v.isAdd!=1" @touchend.stop>
 									<view>
@@ -77,12 +77,18 @@
 				<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="InvoicingList.length>6" />
 			</view>
 		</scroll-view>
-		<view class="mengban"> </view>
+		<view class="mengban" v-if="priceshow" @click="priceshow = false"> </view>
+		<price :show="priceshow" @close="priceshow = false"></price>
+		
+		<view class="mengban" v-if="pd" @click="guanbipd"> </view>
+		<inventory :isShow="pd" v-if="pds"></inventory>
 	</view>
 </template>
 
 <script setup lang="ts">
 	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent } from 'vue';
+	import price from './price.vue'
+	import inventory from './inventory.vue'
 	const props = defineProps({
 		InvoicingList: {
 			type: Array
@@ -95,16 +101,30 @@
 			default: false
 		},
 	})
+	const priceshow = ref(false)
+	const pd = ref(false)
+	const pds = ref(false)
 	const emit = defineEmits(['addcartory', 'scrolltolower', 'addcar', 'crk'])
 	const serverUrl = ref('')
 	onMounted(() => {
 		serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
-		// setTimeout(()=>{
-		// 	console.log(serverUrl.value+props.InvoicingList[0].materialImg)
-		// },3000)
 	})
+	const pandian = ()=>{
+		pds.value = true
+		setTimeout(()=>{
+			pd.value = true
+		},10)
+	}
+	const guanbipd = ()=>{
+		pd.value = false;
+		setTimeout(()=>{
+			pds.value = false
+		},450)
+		
+	}
 	const caigouobj = ref({})
 	const addcar = (v : any, i : number) => {
+		priceshow.value = true
 		// console.log("为啥点击不上啊",i)
 		if (Number(v.kcsl) >= Number(v.upperLimit)) {
 			uni.showToast({
@@ -300,7 +320,7 @@
 				margin: 0.6vw 0;
 			}
 			view{
-				font-size: 13px;
+				font-size: 1.3vw;
 				color: #777777;
 				font-style: normal;
 				text-transform: none;
diff --git a/pages/material/component/crkval.vue b/pages/material/component/crkval.vue
new file mode 100644
index 0000000..da97397
--- /dev/null
+++ b/pages/material/component/crkval.vue
@@ -0,0 +1,37 @@
+<template>
+	<view>
+		<view class="crkd  guodu"  :style="!show?'width: 0;right:-4vw':'width: 86.8vw'" >
+			
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	 import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent } from 'vue';
+	 const props = defineProps({
+	 	show: {
+	 		type: Boolean 
+	 	},
+	 })
+	 
+</script>
+
+<style lang="less" scoped>
+.crkd{
+	width: 86.8vw;
+	height: 100vh;
+	position: fixed;
+	right: 0;
+	top: 0;
+	z-index:101;
+	padding:0 2vw;
+	background: #FFFFFF;
+	border-radius: 3vw 0 0 3vw;
+}
+.guodu {
+		transition: .4s;
+		-webkit-transform-style: preserve-3d;
+		-webkit-overflow-scrolling: touch;
+	}
+	
+</style>
diff --git a/pages/material/component/gress.vue b/pages/material/component/gress.vue
new file mode 100644
index 0000000..b32be51
--- /dev/null
+++ b/pages/material/component/gress.vue
@@ -0,0 +1,205 @@
+<template>
+  <div
+    class="circle-progress"
+    :style="{
+      width: '5vw',
+      height: '5vw',
+    }"
+  >
+    <!-- 背景圆环 -->
+    <div class="circle-bg" :style="{ borderColor: bgColor }"></div>
+
+    <!-- 进度圆环容器（用于实现圆角） -->
+    <div class="circle-bar-wrapper">
+      <!-- 进度圆环（核心） -->
+      <div
+        class="circle-bar"
+        :style="{
+          background: `conic-gradient(${color} ${animateProgress}%, transparent ${animateProgress}%)`,
+          '--thickness': `${thickness}px`,
+          '--half-thickness': `${thickness / 2}px`,
+        }"
+      ></div>
+    </div>
+
+    <!-- 中间文字 -->
+    <div class="circle-content" v-if="showText">
+      <div class="progress-number">{{ Math.round(animateProgress) }}%</div>
+      <div class="progress-label">进度</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, watch } from 'vue';
+
+/**
+ * 纯CSS环形进度条组件（APP/移动端专用）
+ * 适配设计图样式，带数字加载动效
+ */
+interface ProgressProps {
+  /** 进度 0~100 */
+  progress?: number;
+  /** 进度条颜色 */
+  color?: string;
+  /** 背景圆环颜色 */
+  bgColor?: string;
+  /** 圆环粗细（优化后默认更细） */
+  thickness?: number;
+  /** 是否显示中间文字 */
+  showText?: boolean;
+  /** 动画时长(秒) */
+  duration?: number;
+}
+
+// 定义Props（thickness默认改为1px，更细）
+const props = withDefaults(defineProps<ProgressProps>(), {
+  progress: 0,
+  color: '#409EFF', // 匹配设计图蓝色
+  bgColor: '#E5E5E5', // 灰色背景（提高不透明度，保证显示清晰）
+  thickness: 1, // 进度条更细，默认1px
+  showText: true,
+  duration: 1.5, // 动画时长
+});
+
+// 限制进度在0-100之间
+const realProgress = computed(() => {
+  const p = Number(props.progress);
+  return isNaN(p) ? 0 : Math.max(0, Math.min(100, p));
+});
+
+// 动画进度值
+const animateProgress = ref(0);
+
+// 数字加载动画
+const startProgressAnimation = () => {
+  const target = realProgress.value;
+  const duration = props.duration * 1000;
+  const frameRate = 60;
+  const totalFrames = duration / (1000 / frameRate);
+  const increment = target / totalFrames;
+  
+  let currentFrame = 0;
+  const timer = setInterval(() => {
+    currentFrame++;
+    animateProgress.value += increment;
+    
+    if (currentFrame >= totalFrames || animateProgress.value >= target) {
+      animateProgress.value = target;
+      clearInterval(timer);
+    }
+  }, 1000 / frameRate);
+};
+
+// 监听进度变化重新执行动画
+watch(realProgress, () => {
+  animateProgress.value = 0;
+  startProgressAnimation();
+}, { immediate: false });
+
+// 组件挂载时执行动画
+onMounted(() => {
+  startProgressAnimation();
+});
+</script>
+
+<style scoped>
+.circle-progress {
+  position: relative;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  /* 增加立体阴影，提升层次感 */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  border-radius: 50%;
+  /* 背景色保证阴影显示完整 */
+  background: #fff;
+}
+
+/* 背景圆环（完整显示灰色环） */
+.circle-bg {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 3px  solid #E8E9EA;
+  box-sizing: border-box;
+  opacity: 1;
+  z-index: 2;
+  position: relative;
+}
+
+/* 进度圆环容器（核心：实现进度条圆角） */
+.circle-bar-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  z-index: 3;
+  /* 裁剪超出部分，保证圆角效果 */
+  overflow: hidden;
+}
+
+/* 进度圆环（核心） */
+.circle-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  /* 环形核心：锥形渐变 + 遮罩 */
+  -webkit-mask: radial-gradient(
+    transparent calc(50% - 3px),
+    black calc(50% - 3px)
+  );
+  mask: radial-gradient(
+    transparent calc(50% - 3px),
+    black calc(50% - 3px)
+  );
+  /* 进度条圆角关键：通过伪元素实现 */
+  &::after {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    right: 3px;
+    bottom: 3px;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 13px rgba(255, 255, 255, 1);
+  }
+  /* 进度条末端圆角优化 */
+  clip-path: circle(50% at center);
+}
+
+/* 中间文字容器 */
+.circle-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80%;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 3; /* 文字层级最高 */
+}
+
+/* 百分比数字样式 - 匹配设计图 */
+.progress-number {
+  font-size: 1.2vw; /* 适配5vw容器的字体大小 */
+  font-weight: 600;
+  color: #333;
+  line-height: 1;
+  margin-bottom: 0.2vw;
+}
+
+/* 进度标签样式 - 匹配设计图 */
+.progress-label {
+  font-size: 1.1vw; /* 适配5vw容器的字体大小 */
+  color: #666;
+  line-height: 1;
+}
+</style>
\ No newline at end of file
diff --git a/pages/material/component/inventory.vue b/pages/material/component/inventory.vue
new file mode 100644
index 0000000..8a4f7bf
--- /dev/null
+++ b/pages/material/component/inventory.vue
@@ -0,0 +1,1024 @@
+<template>
+	<view>
+		<view class="cont guodu"  :style="!transition?'opacity: 0':'opacity: 1'" >
+			<view class="topbox">
+				<view class="carditem guodu"  >
+					<view class="cgsl">
+						<text>325</text>
+						<view>差额</view>
+					</view>
+					<view class="kcpdsl">
+						<view style="border-right: 1px solid #E6E6E6;">
+							<text>25</text>
+							<text>库存数量</text>
+						</view>
+						<view>
+							<text>--</text>
+							<text>盘点数量</text>
+						</view>
+					</view>
+					<view class="speitem guodu">
+						<view class="imghs">
+							<image style="border-radius: 1vw;"
+								:src=" '/static/index/procurement/k.png'"
+								mode="aspectFill">
+							</image>
+						</view>
+						<view class="cardp">
+							<view>复健用品</view>
+							<view>复健用品</view>
+						</view>
+					</view>
+					<view class="msitem guodu">
+						<view>
+							<view>纸尿裤-拉拉裤纸尿裤拉拉裤纸尿裤</view><text style="white-space: nowrap;"> ZHYP044</text>
+						</view>
+						<view style="margin-top: 1.6vw;">
+							<text style="white-space: nowrap;"> 规格型号: 800mm*680mm</text>
+						</view>
+						<view>
+							<text style="white-space: nowrap;"> 品牌型号：品牌型号名称</text>
+						</view>
+						<view>
+							<text style="white-space: nowrap;"> 生产厂家：吉林省捌零信创科技有限...</text>
+						</view>
+						<view>
+							<text style="white-space: nowrap;"> 供 应 商 ：长春市天林商贸有限公司...</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="jisuansl">
+				<!-- <torytor></torytor> -->
+				<view class="tan guodu" >
+					<view class="tbox guodu" >
+						<!--  :tb="v.dqkcsl" :pz="pz" @pddjjnum="pddjjnum" :pdsl="v.pdsl" :idex="i"  -->
+						<torytor :show="true" :pddType='pddType'></torytor>
+						<view class="bpq" >
+							<view class="bp b" @click="bz = !bz;pz = false">
+								<image src="/static/index/procurement/th.png" mode="aspectFill"></image>
+								备注
+								<!-- <text :class="{r:v?.pdType == 2&&v?.cesl>0,g:v.pdType == 1}" v-if="v?.content">1</text> -->
+								<text class="r">1</text>
+							</view>
+							<view class="bp p" @click="pz = !pz;bz = false">
+				
+								<image src="/static/index/procurement/xj.png" mode="aspectFill"></image>
+								拍照
+								<!-- <text :class="{r:v?.pdType == 2&&v?.cesl>0,g:v.pdType == 1}"
+									v-if="v?.picPatharr?.length>0">{{v?.picPatharr?.length}}</text> -->
+								<text class="g">2</text>
+							</view>
+							<view class="qued" @click="config(v,i)" v-if="pddType=='1'">
+								确定
+							</view>
+							<view class="triangle-leftbz" v-if="bz">
+								<image src="/static/index/procurement/jb.png" mode="aspectFill"></image>
+							</view>
+							<view class="triangle-leftpz" v-if="pz">
+								<image src="/static/index/procurement/jb.png" mode="aspectFill"></image>
+							</view>
+							<view class="gray-bgc guodu" :class="bz?'':'itemhei0'">
+								<view class="textare" v-if="bz">
+									<!-- <textarea v-model="v?.content" placeholder="请输入备注" maxlength="200"
+										:disabled="pddType!='1'"></textarea> -->
+										<textarea  placeholder="请输入备注" maxlength="200"
+											:disabled="false"></textarea>
+								</view>
+								<view class="submit" v-if="bz">
+									<view @click="bz = false">{{pddType=='1'?'取消':'关闭'}}</view>
+									<view @click="bz = false" v-if="pddType=='1'">确定</view>
+								</view>
+							</view>
+							<view class="gray-pgc guodu" :class="pz?'':'itemhei0'">
+								<view class="pztit" v-if="pz">拍照：</view>
+								<scroll-view scroll-x class="scrollbgc">
+									<view class="zpj" v-if="pz">
+										<view class="zpk" v-for="(p,o) in 5" :key="o"
+											@click="previewImage(v,p,o)">
+											<image :src="serverUrl+p" mode="aspectFill"></image>
+											<view @click.stop="open=1;del(v,o)">
+				
+												<image src="/static/index/keyimg/deletebutton.png" mode="aspectFill"
+													style="width: 75%;height: 70%;"></image>
+											</view>
+										</view>
+										<view class="clkpz" @click="uplod(v,i)" >
+											<image src="/static/index/procurement/xjpz.png" mode="aspectFill"></image>
+											<text>点击拍照上传 </text>
+										</view>
+										<defaultr cont="暂无图片"  
+											style="position: absolute;width: 10vw;height: 10vw;"></defaultr>
+									</view>
+								</scroll-view>
+				
+								<view class="submit" v-if="pz" style="height: 3.5vw;">
+									<view @click="pz = false">{{pddType=='1'?'取消':'关闭'}}</view>
+									<view  @click="pz = false">确定</view>
+								</view>
+				
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, inject, watch } from 'vue';
+	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
+	import torytor from './torytor.vue'
+	const transition = ref(false)
+	const bz = ref(false)
+	const pz = ref(false)
+	const pddType = ref('1')
+	
+	 const props = defineProps({
+	 	isShow: {
+	 		type: Boolean
+	 	},
+	 });
+	 watch(
+	 	() => props.isShow,
+	 	(newVal, oldVal) => {
+	 		if (!oldVal && newVal) {
+	 			transition.value = false;
+	 			setTimeout(() => {
+	 				transition.value = true;
+	 			}, 10)
+	 		} else {
+	 			transition.value = false;
+	 		}
+	 	}
+	 )
+	  const open = ref(0)
+	  const scrolltop = ref(0)
+	  const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
+	  const emit = defineEmits(['scrolltolower', 'tabitem', 'right'])
+	  const valitem = ref({});
+	  const valindex = ref(-1);
+	  
+	  const havezk = ref(false)
+	  // 点击锁
+	  const secondlock = ref(false)
+	  // 检测上一次点击
+	  const savelastvalue = ref(false)
+	  
+	  const zhankai = (v, i) => {
+	  
+	  	let s = Math.ceil((i + 1) / 3);
+	  	if (valindex.value != i && valindex.value > -1 && uni.getStorageSync('valitem') && props.pddType == '1') {
+	  		emit('tabitem', valindex.value, uni.getStorageSync('valitem'))
+	  	}
+	  	valindex.value = i;
+	  	scrolltop.value = top.value;
+	  	v.zk = !v.zk;
+	  	savelastvalue.value = v.zk
+	  	if(savelastvalue.value && v.zk){
+	  		secondlock.value = true;
+	  	}
+	  	havezk.value = v.zk
+	  	
+	  	if (v.zk) {
+	  		if (props.pddType == '1') { uni.setStorageSync('valitem', v); }
+	  		setTimeout(() => {
+	  			v.yczk = v.zk;
+	  		}, 200)
+	  	} else {
+	  		v.yczk = v.zk;
+	  		v.bz = false;
+	  		v.pz = false;
+	  	}
+	  	// if (v.dczk == true) {
+	  
+	  	// } else {
+	  	// 	// nextTick(() => {
+	  	// 	// 	// scrolltop.value = (top.value > (s - 2) * 182) ? top.value : (s - 2) * 182;
+	  	// 	// 	// scrolltop.value = (Math.ceil(i / 2) -1) * 200;
+	  	// 	// })
+	  	// }
+	  
+	  	gb(i)
+	  }
+	  const gb = (i) => {
+	  	props.pddlist.forEach((item, k) => {
+	  		if (i != k) {
+	  			item.zk = false;
+	  			item.bz = false;
+	  			item.pz = false;
+	  			item.yczk = false;
+	  		}
+	  	})
+	  }
+	  const top = ref(0)
+	  const scroll = (e) => {
+	  	// console.log(e.detail.scrollTop)
+	  	top.value = e.detail.scrollTop;
+	  }
+	  const pddjjnum = (e, i) => {
+	  	let ce = 0;
+	  	props.pddlist[i].pdsl = e;
+	  	ce = e - props.pddlist[i].dqkcsl;
+	  	props.pddlist[i].cesl = Math.abs(ce);
+	  	props.pddlist[i].pdType = ce == 0 ? '' : (ce > 0 ? 1 : 2)
+	  }
+	  const config = (e, i) => {
+	  	// console.log("点击成功了吗?")
+	  	if ((e.content == '' || e.content == null) && e.cesl != 0) {
+	  		uni.showToast({
+	  			icon: 'error',
+	  			title: "请填写备注！"
+	  		})
+	  		return
+	  	}
+	  	emit('right', e, i)
+	  }
+	  const scrolltolower = () => {
+	  	emit('scrolltolower')
+	  }
+	  // 上传
+	  const albumlist = ref([])
+	  const uplod = (v, i) => {
+	  	uni.chooseImage({
+	  		count: 1, //默认9
+	  		sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
+	  		sourceType: ['camera'], //从相册选择
+	  		success: (e) => {
+	  			let ar = JSON.stringify(e.tempFilePaths)
+	  			uni.compressImage({
+	  				src: JSON.parse(ar)[0],
+	  				quality: 60,
+	  				success: res => {
+	  					sxdupld(res.tempFilePath, v)
+	  					// v.picPatharr.push(res.tempFilePath);
+	  					// console.log(v.picPatharr)
+	  				}
+	  			})
+	  		}
+	  	});
+	  }
+	  const sxdupld = (e, v) => {
+	  	let now = new Date();
+	  	let year = now.getFullYear();
+	  	let month = now.getMonth() + 1;
+	  	uni.uploadFile({
+	  		url: uni.getStorageSync('serverUrl') + '/sys/common/upload',
+	  		filePath: e,
+	  		name: 'file',
+	  		formData: {
+	  			biz: year + '/' + month + '/pddPic'
+	  		},
+	  		header: {
+	  			'X-Access-Token': uni.getStorageSync('token')
+	  		},
+	  		success: res => {
+	  			const data = JSON.parse(res.data);
+	  			console.log(v)
+	  			v.picPatharr.push(data.message);
+	  			shuzhi(v)
+	  		},
+	  		fail: () => {
+	  			uni.showToast({ title: '上传失败', icon: 'none' })
+	  		}
+	  	})
+	  }
+	  const previewImage = (arr, p, i) => {
+	  	let u = []
+	  	arr.picPatharr.forEach(e => {
+	  		u.push(serverUrl.value + e)
+	  	})
+	  	uni.previewImage({
+	  		current: i,
+	  		urls: u,
+	  		showmenu: false,
+	  		longPressActions: {
+	  			itemList: [],
+	  		}
+	  	})
+	  }
+	  const shuzhi = (v) => {
+	  	v.picPath = '';
+	  	v.picPatharr.forEach((e, i) => {
+	  		v.picPath += e + ','
+	  	})
+	  }
+	  const picv = ref({});
+	  const pici = ref(0);
+	  const del = (v, o) => {
+	  	picv.value = v;
+	  	pici.value = o;
+	  }
+	  const del1 = () => {
+	  	picv.value.picPatharr.splice(pici.value, 1);
+	  	open.value = 0
+	  }
+	  /** 只针对 UniApp 原生 App 的最简判断函数（true = 上半，false = 下半，null = 无法判断） */
+	  function isTopHalfApp(e) {
+	  	if (!e) return null;
+	  	// 原生 app 常见：changedTouches 或 touches
+	  	const touch = (e.changedTouches && e.changedTouches[0]) || (e.touches && e.touches[0]) || null;
+	  	const y = touch
+	  		? (typeof touch.clientY === 'number' ? touch.clientY : (typeof touch.pageY === 'number' ? touch.pageY : null))
+	  		: (e.detail && typeof e.detail.y === 'number' ? e.detail.y : null);
+	  
+	  	let h = null;
+	  	try {
+	  		h = uni.getSystemInfoSync().windowHeight; // UniApp 原生 App 推荐使用
+	  	} catch (err) {
+	  		h = null;
+	  	}
+	  
+	  	if (y == null || !h) return null;
+	  	return y <= (h * 1 / 2);
+	  }
+	  const isbottom = ref(false);
+	  const clicklock = ref(false)
+	  /** 事件处理示例 */
+	  function onTap(e) {
+	  	const top = isTopHalfApp(e);
+	  	if (top === null) {
+	  		// uni.showToast({ title: '无法判断坐标', icon: 'none' });
+	  		return;
+	  	}
+	  	if (havezk.value) {
+	  		// console.log("top", top, clicklock.value)
+	  		if (!clicklock.value || secondlock.value ) {
+	  			if (!top) {
+	  				isbottom.value = true
+	  				// console.log("开启了")
+	  			} else {
+	  				isbottom.value = false
+	  			}
+	  			clicklock.value = true;
+	  			secondlock.value = false;
+	  		} 
+	  		// if (!top) {
+	  		// 	isbottom.value = true
+	  		// 	// console.log("开启了")
+	  		// } else {
+	  		// 	isbottom.value = false
+	  		// }
+	  	} else {
+	  		clicklock.value = false
+	  	}
+	  
+	  	// uni.showToast({ title: top ? '上半部分' : '下半部分', icon: 'none' });
+	  }
+</script>
+
+<style lang="less" scoped>
+.cont{
+	width: 50vw;
+	height: 43vw;
+	background: #FFFFFF;
+	border-radius: 1.6vw;
+	position: fixed;
+	z-index: 110;
+	top: 9.8vw;
+	right: 24.8vw;
+	.jisuansl{
+		width: 100%;
+		height: 24vw;
+		margin-top: 2vw;
+	}
+	.topbox{
+		width: 100%;
+		height: 22vw;
+		position: relative;
+	}
+}
+.guodu {
+		transition: .4s;
+		-webkit-transform-style: preserve-3d;
+		-webkit-overflow-scrolling: touch;
+	}
+	.itemhei0 {
+		height: 0vw !important;
+		z-index: 27 !important;
+	}
+	
+.carditem {
+		position: absolute;
+		top: 2.5vw;
+		left: 0;
+		height: 17.5vw;
+		width: 100%;
+		display: flex;
+		transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
+		will-change: transform;
+		.kcpdsl{
+			width: 16.4vw;
+			height: 3vw;
+			display: flex;
+			position: absolute;
+			bottom: 0;
+			left: 16vw;
+			view{
+				width: 50%;
+				height: 3vw;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: space-around;
+				text{
+					&:nth-child(1){
+						font-weight: bold;
+						font-size: 1.7vw;
+						color: #555555;
+					}
+					&:nth-child(2){
+						font-size: 1.1vw;
+						color: #999999;
+					}
+				}
+			}
+		}
+		.cgsl{
+			position: absolute;
+			width: 5vw;
+			height:4.5vw;
+			display: flex;
+			justify-content: center;
+			flex-direction: column;
+			align-items: center;
+			right: 2.6vw;
+			top: 0vw;
+			text{
+				font-weight: bold;
+				font-size: 1.7vw;
+				color: #222222;
+				font-style: normal;
+				text-transform: none;
+				margin: 0.6vw 0;
+			}
+			view{
+				font-size: 1vw;
+				color: #777777;
+				font-style: normal;
+				text-transform: none;
+			}
+		}
+		.cgdh{
+			position: absolute;
+			width: 25vw;
+			height: 3vw;
+			display: flex;
+			align-items: center;
+			top: -2vw;
+			left: 2.3vw;
+			
+			text{
+				width: 1.5vw;
+				height: 1.5vw;
+				border-radius: 0.3vw;
+				font-weight: bold;
+				font-size: 1vw;
+				line-height: 1.5vw;
+				text-align: center;
+				display: block;
+				color: #fff;
+				margin-left: 1.2vw;
+			}
+			.s{
+				background: #FF5B5B;
+			}
+			.j{
+				background: #1083F8;
+			}
+		}
+
+		
+
+		.zkf {
+			width: 7vw;
+			right: -7vw;
+		}
+
+		.add {
+			width: 4.5vw;
+			height: 100%;
+			position: absolute;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			top: 50%;
+			transform: translateY(-50%);
+			// top: 0.8vw;
+			right: 16vw;
+			// background-color: red;
+
+			>view {
+				width: 5.5vw;
+				height: 2.2vw;
+				background: #fff;
+				border-radius: 0.9vw;
+				border: 1px solid #1083F8;
+				font-weight: 400;
+				font-size: 1.4vw;
+				color: #1083F8;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				position: absolute;
+				top: 2.3vw;
+				right: 0.8vw;
+			}
+
+			image {
+				width: 2.5vw;
+				height: 2.5vw;
+			}
+		}
+
+		.msitem {
+			min-width: 25vw;
+			height: 20vw;
+			margin-right: 4.2vw;
+			position: relative;
+
+			>view {
+
+				&:nth-child(2),
+				&:nth-child(3),
+				&:nth-child(4),
+				&:nth-child(6),
+				&:nth-child(5) {
+					margin-top: 0.25vw;
+					max-width: 25vw;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+
+					text {
+						font-weight: 400;
+						font-size: 1.3vw;
+						color: #777777;
+						margin-top: 0.25vw;
+					}
+				}
+
+				&:nth-child(1) {
+					display: flex;
+					align-items: center;
+					height: 2vw;
+					margin-top: 1vw;
+
+					>view {
+						max-width: 13vw;
+						height: 2vw;
+						font-weight: bold;
+						font-size: 1.8vw;
+						color: #222222;
+						text-overflow: ellipsis;
+						overflow: hidden;
+						white-space: nowrap;
+					}
+
+					text {
+						width: 6vw;
+						font-weight: 300;
+						font-size: 1.4vw;
+						color: #222222;
+					}
+				}
+			}
+
+			>.wlsy {
+				width: 100%;
+				height: 3.4vw;
+				display: flex;
+				justify-content: space-between;
+				margin-top: 0vw;
+
+				>view {
+					width: 33.3%;
+					height: 100%;
+					display: flex;
+					flex-direction: column;
+					position: relative;
+					margin-top: 1vw;
+
+					&:nth-child(1) {
+						width: 30%;
+						align-items: left;
+					}
+
+					&:nth-child(2) {
+						width: 40%;
+						align-items: center;
+					}
+
+					&:nth-child(3) {
+						width: 30%;
+						text-align: right;
+						align-items: right;
+					}
+
+					&:nth-child(2)::after {
+						content: '';
+						position: absolute;
+						right: 0;
+						width: 100%;
+						height: 2.2vw;
+						border-left: 1px solid #C9C9C9;
+						border-right: 1px solid #C9C9C9;
+						top: 0.6vw;
+					}
+
+					text {
+						&:nth-child(1) {
+							font-weight: bold;
+							font-size: 1.8vw;
+							color: #555555;
+						}
+
+						&:nth-child(2) {
+							font-weight: 400;
+							font-size: 1.2vw;
+							color: #999999;
+						}
+					}
+				}
+			}
+		}
+
+		// .spleft{
+		// 	margin-left: -15vw !important;
+		// }
+		.speitem {
+			min-width: 18vw;
+			height: 17vw;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+
+			.cardp {
+				width: 12.5vw;
+				height: 4vw;
+				display: flex;
+				flex-wrap: wrap;
+				margin: 0 auto;
+				align-items: center;
+
+				view {
+					min-width: 5.5vw;
+					height: 1.8vw;
+					border-radius: 0.9vw;
+					border: 1px solid #D2D2D2;
+					margin: 0.5vw 0 0 0.5vw;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					font-weight: 400;
+					font-size: 1vw;
+					color: #555555;
+					padding: 0 0.25vw;
+
+					&:nth-child(1),
+					&:nth-child(2) {
+						max-width: 6vw;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						display: block;
+						line-height: 1.8vw;
+						text-align: center;
+					}
+
+					&:nth-child(3) {
+						max-width: 11.5vw;
+						padding: 0 0.8vw;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						display: block;
+						line-height: 1.8vw;
+						text-align: center;
+					}
+				}
+			}
+
+			.imghs {
+				width: 10vw;
+				height: 10vw;
+				margin: 1vw auto 0.25vw;
+				padding: 0.2vw;
+				background: #fff;
+				border-radius: 1.1vw;
+				
+				>image {
+					width: 100%;
+					height: 100%;
+					border-radius: 1.1vw;
+				}
+			}
+
+		}
+	}
+	
+	
+	.tan {
+		width: 100%;
+		height: 100%;
+		
+		.submit {
+			width: 100%;
+			height: 1vw;
+			margin-top: 0.7vw;
+			// margin-top: 0.9vw;
+			padding-right: 2vw;
+			display: flex;
+			justify-content: flex-end;
+	
+			view {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+	
+				&:nth-child(1) {
+					width: 5.7vw;
+					height: 2.3vw;
+					background: #F8F8F8;
+					border-radius: 1.2vw;
+					border: 1px solid #E5E5E5;
+					font-weight: 400;
+					font-size: 1.2vw;
+					color: #555555;
+				}
+	
+				&:nth-child(2) {
+					width: 5.7vw;
+					height: 2.3vw;
+					background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
+					border-radius: 1.2vw;
+					border: 1px solid rgba(3, 133, 250, 0.34);
+					font-weight: 400;
+					font-size: 1.2vw;
+					color: #1083F8;
+					margin-left: 0.7vw;
+				}
+			}
+		}
+	
+		.bpq {
+			width: 100%;
+			height: 2.6vw;
+			position: absolute;
+			display: flex;
+			bottom: 0.5vw;
+			left: 1vw;
+	
+			.triangle-leftpz {
+				width: 2vw;
+				height: 1.5vw;
+				position: absolute;
+				bottom: 2.2vw;
+				left: 11vw;
+				z-index: 30;
+	
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+	
+			.triangle-leftbz {
+				width: 2vw;
+				height: 1.5vw;
+				position: absolute;
+				bottom: 2.2vw;
+				left: 4vw;
+				z-index: 30;
+	
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+	
+			.gray-pgc {
+				background: #fff;
+				width: 46vw;
+				height: 30vw;
+				border-radius: 2vw;
+				box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(116, 141, 164, 0.22);
+				position: absolute;
+				bottom: 3.6vw;
+				left: 1vw;
+				overflow: hidden;
+	
+				>.submit {
+					position: absolute;
+					bottom: 0;
+					right: 0;
+				}
+	
+				.scrollbgc {
+					width: 92%;
+					margin-left: 4%;
+					height: 22vw;
+	
+					.zpj {
+						width: 30%;
+						display: flex;
+						flex-wrap: wrap;
+						flex-direction: column;
+						// padding: 0 1.6vw;
+						height: 22vw;
+						// background-color: red;
+	
+						.zpk {
+							width: 16.4vw;
+							height: 10vw;
+							margin-top: 1vw;
+							border-radius: 1.1vw;
+							position: relative;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							background: #F9F9F9;
+							overflow: hidden;
+							margin-right: 1vw;
+	
+							view {
+								width: 2vw;
+								height: 2vw;
+								z-index: 20;
+								position: absolute;
+								right: 0.8vw;
+								top: 0.8vw;
+								border-radius: 0.6vw 1.1vw 0.6vw 0.6vw;
+								background: rgba(255, 255, 255, 1);
+								display: flex;
+								justify-content: center;
+								align-items: center;
+							}
+	
+							image {
+								width: 100%;
+								height: 100%;
+							}
+						}
+	
+						.clkpz {
+							width: 16.4vw;
+							height: 10vw;
+							background: #FAFDFF;
+							border-radius: 1.1vw;
+							border: 1px solid #DDEFFF;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							margin-top: 1vw;
+							flex-direction: column;
+	
+							text {
+								font-weight: 400;
+								font-size: 1vw;
+								color: #78B1EB;
+							}
+	
+							image {
+								width: 2.8vw;
+								height: 2.8vw;
+							}
+						}
+	
+					}
+				}
+	
+	
+				.pztit {
+					font-weight: 400;
+					font-size: 1.5vw;
+					color: #888888;
+					margin: 1.6vw auto 0;
+					width: 100%;
+					padding-left: 2.4vw;
+				}
+			}
+	
+			.gray-bgc {
+				background: #fff;
+				width: 33vw;
+				height: 14.1vw;
+				border-radius: 2vw;
+				box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(116, 141, 164, 0.6);
+				position: absolute;
+				bottom: 3.6vw;
+				left: 1vw;
+				overflow: hidden;
+	
+				.triangle-left {
+					width: 2vw;
+					height: 1.5vw;
+					position: absolute;
+					top: 99.5%;
+					left: 3vw;
+	
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+	
+				.textare {
+					width: 29vw;
+					height:7.8vw;
+					background: #F5F5F5;
+					border: 4rpx solid #F5F5F5;
+					border-radius: 1vw;
+					margin: 1.6vw auto 0;
+					padding: 1vw;
+	
+					textarea {
+						width: 100%;
+						height: 100%;
+						font-weight: 400;
+						font-size: 1.3vw;
+						color: #999999;
+					}
+				}
+	
+			}
+	
+			.qued {
+				width: 6vw;
+				height: 2.8vw;
+				background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
+				border-radius: 1.3vw;
+				border: 1px solid rgba(3, 133, 250, 0.34);
+				right: 3.2vw;
+				top: 1vw;
+				position: absolute;
+				font-weight: 400;
+				font-size: 1.4vw;
+				color: #0385FA;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+	
+			.bp {
+				width: 5vw;
+				height: 2.8vw;
+				display: flex;
+				align-items: flex-end;
+				font-weight: 400;
+				font-size: 1.2vw;
+				color: #555555;
+				margin-left: 1.5vw;
+				white-space: nowrap;
+				position: relative;
+	
+				>text {
+					min-width: 1vw;
+					height: 1vw;
+					border-radius: 0.5vw;
+					font-weight: 400;
+					font-size: 0.8vw;
+					color: #FFFFFF;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					padding: 0 0.4vw;
+					position: absolute;
+					right: -0.5vw;
+					top: 0;
+					background: #555555;
+				}
+	
+				.g {
+					background: #0385FA;
+					border: 1px solid #0385FA;
+				}
+	
+				.r {
+					background: #FF5757;
+					border: 1px solid #FF5757;
+	
+				}
+	
+				image {
+					width: 1.8vw;
+					height: 1.8vw;
+					margin-right: 0.4vw;
+				}
+			}
+		}
+	
+		.tbox {
+			width: 100%;
+			height: 16vw;
+			position: absolute;
+			top: 1vw;
+			z-index: 28;
+			left: 0;
+	
+		}
+	}
+</style>
diff --git a/pages/material/component/price.vue b/pages/material/component/price.vue
index 3db0897..eed5e86 100644
--- a/pages/material/component/price.vue
+++ b/pages/material/component/price.vue
@@ -1,19 +1,456 @@
 <template>
 	<view>
-		
+		<view class="box guodu"  :style="!show?'width: 0;right:-6vw':'width: 78vw'" >
+			<view class="title">
+				<view></view>
+				销售价格
+			</view>
+			<view class="gys">供应商：长春市天林商贸有限公司</view>
+			<view class="list">
+				<view class="cgdh">
+					<view class="zc">
+						采购单号   101C20251012001
+						<view>库存数量<text>105</text></view>
+					</view>
+					<view class="sxd" @click="sxd = true">随行单</view>
+				</view>
+				<view class="contents">
+					<view class="carditem guodu"  >
+						 
+						<view class="speitem guodu">
+							<view class="imghs">
+								<image style="border-radius: 1vw;"
+									:src=" '/static/index/procurement/k.png'"
+									mode="aspectFill">
+								</image>
+							</view>
+							<view class="cardp">
+								<view>复健用品</view>
+								<view>复健用品</view>
+							</view>
+							<!-- <view class="cardp">
+								<view v-if="v.categoryId_dictText">{{v.categoryId_dictText}}</view>
+								<view v-if="v.typeId_dictText">{{v.typeId_dictText}}</view>
+								<view v-if="v.medicationId_dictText">{{v.medicationId_dictText}}</view>
+							</view> -->
+						</view>
+						<view class="msitem guodu">
+							<view>
+								<view>纸尿裤-拉拉裤纸尿裤拉拉裤纸尿裤</view>
+							</view>
+							<view style="margin-top: 1vw;">
+								<text style="white-space: nowrap;"> 物料编码: ZHYP044</text>
+							</view>
+							<view>
+								<text style="white-space: nowrap;"> 规格型号: 800mm*680mm</text>
+							</view>
+							<view>
+								<text style="white-space: nowrap;"> 品牌型号：品牌型号名称</text>
+							</view>
+							<view>
+								<text style="white-space: nowrap;"> 生产厂家：吉林省捌零信创科技有限...</text>
+							</view>
+						</view>
+						
+					</view>
+					
+					<view class="righs">
+						<view class="hezi">
+							<view>
+								<text>￥</text>
+								0.35 
+							</view>
+							<view class="jg">
+								采购价格
+								<text class="s">↑</text><text class="sb ss">￥0.26 </text>
+							</view>
+						</view>
+						<view class="hezi">
+							<view>
+								<text>￥</text>0.35 
+								<image src="/static/index/material/edh.png" mode="aspectFill"></image>
+								<image src="/static/index/material/edl.png" mode="aspectFill"></image>
+							</view>
+							<view class="jg">
+								销售价格
+								<text class="j">↓</text><text class="sb jj">￥0.26 </text>
+							</view>
+						</view>
+						<view class="hezi">
+							<view>
+								片
+							</view>
+							<text>采购单位</text>
+						</view>
+						<view class="hezi">
+							<view style="padding-left: 0.3vw;">
+								片
+								<image src="/static/index/material/edr.png" mode="aspectFill"></image>
+							</view>
+							<text>采购单位</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="btn">
+				<view class="qx" @click="emit('close')">取消</view>
+				<view class="qd">确认</view>
+			</view>
+		</view>
+		<view class="mengban" v-if="sxd" @click="sxd = false"> </view>
+		<sxds :show="sxd" @close="sxd = false"></sxds>
 	</view>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				
-			};
-		}
-	}
+<script setup lang="ts">
+	 import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent } from 'vue';
+	 import sxds from './sxd.vue'
+	 const props = defineProps({
+	 	show: {
+	 		type: Boolean 
+	 	},
+	 })
+	 const sxd = ref(false)
+	 const emit = defineEmits(['close' ])
 </script>
 
-<style lang="less">
-
+<style lang="less" scoped>
+	.mengban{
+		width: 100vw;
+		height: 100vh;
+		position: fixed;
+		background: RGBA(240, 240, 240, 0.64);
+		top: 0;
+		left: 0;
+		z-index: 1010;
+	}
+.box{
+	width: 0;
+	height: 100vh;
+	background: #FFFFFF;
+	position: fixed;
+	top: 0;
+	right: 0;
+	z-index: 1001;
+	overflow: hidden;
+	border-radius: 3vw 0 0 3vw;
+	padding: 3vw;
+	.btn{
+		position: absolute;
+		right: 3.5vw;
+		bottom: 2.7vw;
+		display: flex;
+		justify-content: flex-end;
+		view{
+			width: 8vw;
+			height: 3.4vw;
+			border-radius: 1.1vw;
+			font-size: 16px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-left: 1vw;
+		}
+		.qd{
+			background: #57A8FA;
+			color: #FFFFFF;
+		}
+		.qx{
+			background: #E1F0FF;
+			color: #555555;
+		}
+	}
+	.list::after{
+		content: '';
+		width: 1rpx;
+		height: 15vw;
+		background: #D2D2D2;
+		position: absolute;
+		top: 4vw;
+		left: 39.7vw;
+	}
+	.list{
+		width: 71.9vw;
+		height: 21.5vw;
+		background: #FFFFFF;
+		border-radius:2.2vw;
+		border: 1px solid #D2D2D2;
+		margin-top: 1.7vw;
+		padding: 1.8vw 2.3vw 0;
+		position: relative;
+		.contents{
+			width: 100%;
+			height: 16vw;
+			display: flex;
+			.righs{
+				width: 30vw;
+				height: 100%;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				margin-top: 3vw;
+				.s{
+					color: #FF5B5B !important;
+					margin: 0 0.5vw;
+				}
+				.j{
+					color: #0385FA !important;
+					margin: 0 0.5vw;
+				}
+				.ss{
+					background: #FF5B5B !important;
+				}
+				.jj{
+					background: #0385FA !important;
+					
+				}
+				.sb{
+					width: 4.8vw;
+					height: 2.1vw;
+					border-radius: 0.5vw;
+					font-weight: 400;
+					font-size: 1.4vw;
+					color: #FFFFFF !important;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+				.hezi{
+					width: 14vw;
+					height: 70rpx;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+					white-space: nowrap;
+					>view{
+						font-size: 2.2vw;
+						color: #333333;
+						display: flex;
+						align-items: flex-end;
+						font-weight: bold;
+						height: 2.4vw;
+						white-space: nowrap;
+						text{
+							font-size: 1.4vw;
+							line-height: 2.3vw;
+							
+						}
+						image{
+							width: 1.4vw;
+							height: 1.4vw;
+							position: relative;
+							top:-0.4vw;
+						}
+					}
+					.jg{
+						font-size: 1.3vw;
+						color: #888888;
+						white-space: nowrap;
+					}
+				}
+			}
+		}
+		.cgdh{
+			width: 100%;
+			height: 40rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			white-space: nowrap;
+			.zc{
+				font-size: 1.5vw;
+				color: #777777;
+				display: flex;
+				align-items: center;
+				view{
+					margin-left: 4.5vw;
+					text{
+						font-weight: bold;
+						font-size: 2vw;
+						color: #222222;
+					}
+				}
+			}
+			.sxd{
+				width: 5.5vw;
+				height: 2.4vw;
+				background: #FFFFFF;
+				border-radius: 0.9vw;
+				border: 1px solid #0385FA;
+				font-size: 1.2vw;
+				color: #0385FA;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+		
+	}
+	.gys{
+		font-weight: bold;
+		font-size: 1.4vw;
+		color: #777777;
+		margin-top: 2.3vw;
+	}
+	.title{
+		font-size: 1.7vw;
+		color: #222222;
+		display: flex;
+		align-items: center;
+		view{
+			width: 0.5vw;
+			height: 1.4vw;
+			background: radial-gradient( 0% 0% at 0% 0%, #006DC9 7.25%, #0385FA 100%), #F7F7F7;
+			border-radius: 0.2vw;
+			margin-right: 1vw;
+		}
+	}
+}
+.guodu {
+		transition: .4s;
+		-webkit-transform-style: preserve-3d;
+		-webkit-overflow-scrolling: touch;
+	}
+	
+	
+	.carditem {
+		height: 100%;
+		width: 39.7vw;
+		display: flex;
+		transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
+		will-change: transform;
+		margin-top: 2vw;
+		justify-content: space-between;
+		padding-right: 1.8vw;
+		.msitem {
+			min-width: 23vw;
+			height: 14vw;
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
+			>view {
+				&:nth-child(2),
+				&:nth-child(3),
+				&:nth-child(4),
+				&:nth-child(6),
+				&:nth-child(5) {
+					margin-top: 0.25vw;
+					max-width: 23vw;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+	
+					text {
+						font-weight: 400;
+						font-size: 1.3vw;
+						color: #777777;
+						margin-top: 0.25vw;
+					}
+				}
+	
+				&:nth-child(1) {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					height: 2vw;
+					margin-top: 1vw;
+	
+					>view {
+						width: 19vw;
+						height: 2vw;
+						font-weight: bold;
+						font-size: 1.8vw;
+						color: #222222;
+						text-overflow: ellipsis;
+						overflow: hidden;
+						white-space: nowrap;
+					}
+	
+					text {
+						width: 6vw;
+						font-weight: 300;
+						font-size: 1.4vw;
+						color: #222222;
+					}
+				}
+			}
+	
+		}
+	
+		// .spleft{
+		// 	margin-left: -15vw !important;
+		// }
+		.speitem {
+			min-width: 13vw;
+			height: 14vw;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+	
+			.cardp {
+				width: 12.5vw;
+				height: 4vw;
+				display: flex;
+				flex-wrap: wrap;
+				margin: 0 auto;
+				align-items: center;
+	
+				view {
+					min-width: 5.5vw;
+					height: 1.8vw;
+					border-radius: 0.9vw;
+					border: 1px solid #D2D2D2;
+					margin: 0.5vw 0 0 0.5vw;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					font-weight: 400;
+					font-size: 1vw;
+					color: #555555;
+					padding: 0 0.25vw;
+	
+					&:nth-child(1),
+					&:nth-child(2) {
+						max-width: 6vw;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						display: block;
+						line-height: 1.8vw;
+						text-align: center;
+					}
+	
+					&:nth-child(3) {
+						max-width: 11.5vw;
+						padding: 0 0.8vw;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						display: block;
+						line-height: 1.8vw;
+						text-align: center;
+					}
+				}
+			}
+	
+			.imghs {
+				width: 10vw;
+				height: 10vw;
+				margin: 1vw auto 0.25vw;
+				padding: 0.2vw;
+				background: #fff;
+				border-radius: 1.1vw;
+				
+				>image {
+					width: 100%;
+					height: 100%;
+					border-radius: 1.1vw;
+				}
+			}
+	
+		}
+	}
 </style>
diff --git a/pages/material/component/sxd.vue b/pages/material/component/sxd.vue
new file mode 100644
index 0000000..f26341b
--- /dev/null
+++ b/pages/material/component/sxd.vue
@@ -0,0 +1,317 @@
+<template>
+	<view>
+		<view class="box guodu"  :style="!show?'width: 0;right:-6vw':'width: 67vw'" >
+			<view class="title">
+				<view></view>
+				随行单
+			</view>
+			<scroll-view scroll-y="true" class="scrolsxd">
+				<view>
+					<view class="cgz">
+						<view class="left">
+							<image src="/static/index/material/cgd.png" mode="aspectFill"></image>
+							采购单
+						</view>
+						<view class="cd">
+							采购中
+						</view>
+					</view>
+					<view class="dz">
+						<view>采购单号：</view>
+						 101C20251121006 
+						 <view class="je">
+							 <text> ￥25</text>
+							 <text>订单金额</text>
+						 </view>
+					</view>
+					<view class="dz">
+						<view>采购日期：</view>
+						   2025-10-12
+					</view>
+					
+					<view class="cgz top1">
+						<view class="left">
+							<image src="/static/index/material/jg.png" mode="aspectFill"></image>
+							机构信息
+						</view> 
+					</view>
+					
+					<view class="dz">
+						<view>机构名称：</view>
+						吉林省久泰健康产业有限公司
+					</view>
+					<view class="dz">
+						<view>收货地址：</view>
+						 吉林省长春市朝阳区开运街41号吉省长春市朝阳区开运街41号 
+					</view>
+					<view class="dz">
+						<view>联系人：</view>
+						 张某 
+					</view>
+					<view class="dz">
+						<view>电话：</view>
+						13845337753
+					</view>
+					
+					<view class="cgz top1">
+						<view class="left">
+							<image src="/static/index/material/gys.png" mode="aspectFill"></image>
+							供应商信息
+						</view> 
+					</view>
+					 
+					<view class="dz">
+						<view>供应商：</view>
+						吉林天林商贸有限公司
+					</view>
+					<view class="dz">
+						<view>联系人：</view>
+						吕婧文
+					</view>
+					<view class="dz">
+						<view>电话：</view>
+						13356856633
+					</view>
+					
+					<view class="conts">
+						<view class="tittop">
+							<text>纸尿裤-拉拉裤纸尿裤</text>
+							<view>
+								采购数量
+								<text>155</text>
+							</view>
+						</view>
+						<view class="dz">
+							<view>规格型号：</view>
+							800mm*680mm
+						</view>
+						<view class="dz">
+							<view>品牌型号：</view>
+							品牌型号名称
+						</view>
+						<view class="dz">
+							<view>生产厂家：</view>
+							吉林省捌零信创科技有限
+						</view>
+						
+						<view class="jglb" style="margin-top: 2.5vw;">
+							<view>
+								<text>¥0.32</text>
+								<text>采购价格</text>
+							</view>
+							<view>
+								<text>片</text>
+								<text>采购单位</text>
+							</view>
+							<view class="l">
+								<text>¥0.56</text>
+								<text>销售价格</text>
+							</view>
+							<view class="l">
+								<text>片</text>
+								<text>销售单位</text>
+							</view>
+						</view>
+						<view class="jglb">
+							<view>
+								<text>350</text>
+								<text>入库数量</text>
+							</view>
+							<view>
+								<text>150</text>
+								<text>挂账数量</text>
+							</view>
+							<view >
+								<text>12</text>
+								<text>销账数量</text>
+							</view>
+							<view >
+								<text>￥0.56</text>
+								<text>销售金额</text>
+							</view>
+						</view>
+					</view>
+					
+				</view>
+			</scroll-view>
+		
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent } from 'vue';
+	 const props = defineProps({
+	 	show: {
+	 		type: Boolean 
+	 	},
+	 })
+	 
+</script>
+
+<style lang="less" scoped>
+	.conts{
+		width: 57vw;
+		height: 36vw;
+		background: #FFFFFF;
+		border-radius: 1.6vw;
+		border: 1px solid #DCDCDC;
+		padding: 1.8vw 3.3vw;
+		margin-top: 2vw;
+		.jglb{
+			width: 100%;
+			height: 9vw;
+			border-top: 1px solid #E5E5E5;
+			display: flex;
+			justify-content: space-between;
+			view{
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				
+				text{
+					&:nth-child(1){
+						font-size: 2.1vw;
+						color: #555555;
+						font-weight: bold;
+					}
+					&:nth-child(2){
+						font-size: 1.4vw;
+						color: #555555;
+					}
+				}
+			}
+			.l{
+				color: #0385FA;
+			}
+		}
+		.tittop{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+			height: 4.5vw;
+			border-bottom: 1px solid #E5E5E5;
+			margin-bottom: 1.5vw;
+			text{
+				font-weight: bold;
+				font-size: 2.1vw;
+				color: #222222;
+			}
+			view{
+				font-size: 1.3vw;
+				color: #888888;
+				text{
+					font-weight: bold;
+					font-size: 2.4vw;
+					color: #333333;
+					margin-left: 0.6vw;
+				}
+			}
+		}
+	} 
+.box{
+	width: 0;
+	height: 100vh;
+	background: #FFFFFF;
+	position: fixed;
+	top: 0;
+	right: 0;
+	z-index: 1011;
+	overflow: hidden;
+	border-radius: 3vw 0 0 3vw;
+	padding: 3vw;
+	.scrolsxd{
+		width: 100%;
+		height: calc(100vh - 10vw);
+		margin-top: 2vw;
+		padding-left: 1.2vw;
+		.dz{
+			width: 100%;
+			display: flex;
+			align-items: center;
+			margin-top: 0.7vw;
+			font-size: 1.4vw;
+			color: #333333;
+			position: relative;
+			view{
+				width: 7vw;
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+			}
+			.je{
+				flex-direction: column;
+				justify-content: center;
+				position: absolute;
+				right: 0;
+				top: -0.5vw;
+				text{
+					&:nth-child(1){
+						font-weight: bold;
+						font-size:2.4vw;
+						color: #333333;
+					}
+					&:nth-child(2){
+						font-size:1.3vw;
+						color: #888888;
+					}
+				}
+			}
+		}
+		.top1{
+			margin-top: 1vw;
+		}
+		.cgz{
+			width: 100%;
+			height: 4.2vw;
+			display: flex;
+			justify-content: space-between;
+			border-bottom: 1px solid #E5E5E5;
+			margin-bottom: 2vw;
+			.left{
+				font-weight: bold;
+				font-size: 1.7vw;
+				color: #333333;
+				display: flex;
+				align-items: center;
+				image{
+					width: 2.1vw;
+					height: 2.1vw;
+					margin-right: 0.8vw;
+				}
+			}
+			.cd{
+				width: 7.9vw;
+				height: 3.2vw;
+				border-radius: 1.1vw;
+				border: 1px solid #0385FA;
+				font-size: 1.6vw;
+				color: #0385FA;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+	}
+	.title{
+		font-size: 1.7vw;
+		color: #222222;
+		display: flex;
+		align-items: center;
+		view{
+			width: 0.5vw;
+			height: 1.4vw;
+			background: radial-gradient( 0% 0% at 0% 0%, #006DC9 7.25%, #0385FA 100%), #F7F7F7;
+			border-radius: 0.2vw;
+			margin-right: 1vw;
+		}
+	}
+}
+.guodu {
+		transition: .4s;
+		-webkit-transform-style: preserve-3d;
+		-webkit-overflow-scrolling: touch;
+	}
+</style>
diff --git a/pages/material/component/torytor.vue b/pages/material/component/torytor.vue
new file mode 100644
index 0000000..a4b1487
--- /dev/null
+++ b/pages/material/component/torytor.vue
@@ -0,0 +1,353 @@
+<template>
+	<view>
+		<view class="jsuq guodu" >
+			<view class="leftsa">
+				<view class="shu">数量</view>
+				<view  class="jiajian">
+					<view :class="pddType!='3'? `jj`:`jj-bad`" @click="jjnum(-1)" @touchstart="handleTouchStart(-1)" @touchend="handleTouchEnd">
+						-
+					</view>
+					<view :class="pddType!='3'? `stringShow-kuai`:`stringShow-kuai-bad`">
+						<view v-for="(item,index) in stringShow" :key="index">
+							{{item}}
+						</view>
+					</view>
+					<view :class="pddType!='3'? `jj`:`jj-bad`" @click="jjnum(1)" @touchstart="handleTouchStart(1)" @touchend="handleTouchEnd">
+						+
+					</view>
+				</view>
+				
+				<!-- <view class="jiajian"> </view> -->
+			</view>
+			<view class="rigsbt">
+				<view class="calculator-father">
+					<view v-for="(item,index) in calculatorArray" :key="index">
+						<view :class="pddType!='3'?`calculator-kuai`:`calculator-kuai-bad`" v-if="item==`AC`" @click="clickKuai(item,index)">
+							<image src="/static/cleanone.png" mode="aspectFill"
+								style="width: 50%;height: 50%;margin-left: -5rpx;"></image>
+
+						</view>
+						<view :class="pddType!='3'?`calculator-kuai`:`calculator-kuai-bad`" v-else-if="item==`AE`" style="font-size: 1.2vw;color: #0385FA;"
+							@click="clickKuai(item,index)">
+							同步
+						</view>
+						<view :class="pddType!='3'?`calculator-kuai`:`calculator-kuai-bad`" v-else @click="clickKuai(item,index)">
+							{{item}}
+						</view>
+
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
+	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
+	const stringShow = ref("0000");
+	const relNumber = ref(0);
+	const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "AC", "AE"];
+	const props = defineProps({
+		show: {
+			type: Boolean
+		},
+		tb: {
+			type: Number
+		},
+		idex: {
+			type: Number
+		},
+		pdsl: {
+			type: Number
+		},
+		pddType: {
+			type: String
+		},
+		// pz:{
+		// 	// type: Boolean
+		// },
+	});
+	watch(() => props.show,
+		() => {
+			if (props.show == true) {
+				relNumber.value = props.pdsl ? props.pdsl : 0;
+				stringShow.value = toFixed4ByPadStart(relNumber.value);
+				isZero.value = false
+			} else {
+				relNumber.value = 0;
+				stringShow.value = toFixed4ByPadStart(relNumber.value)
+			}
+		})
+	const emit = defineEmits(['pddjjnum'])
+	const isZero = ref(false);
+	const clickKuai = (item : any, index : number) => {
+		if (props.pddType != '1') { return }
+		if (item == "AE") {
+			relNumber.value = props.tb;
+			stringShow.value = toFixed4ByPadStart(relNumber.value);
+			emit('pddjjnum', relNumber.value, props.idex);
+			return
+		}
+		if (item == "AC") {
+			relNumber.value = Math.trunc(relNumber.value / 10)
+			stringShow.value = toFixed4ByPadStart(relNumber.value);
+			emit('pddjjnum', relNumber.value, props.idex);
+			return
+		}
+		if (isZero.value == false) {
+			isZero.value = true;
+			relNumber.value = item;
+			stringShow.value = toFixed4ByPadStart(relNumber.value);
+			emit('pddjjnum', relNumber.value, props.idex);
+			return
+		}
+		if (digitCountByString(relNumber.value) > 3) {
+
+		} else {
+			if (!relNumber.value) {
+				relNumber.value = item
+			} else {
+				relNumber.value = relNumber.value * 10 + item;
+			}
+			emit('pddjjnum', relNumber.value, props.idex);
+			stringShow.value = toFixed4ByPadStart(relNumber.value)
+		}
+
+	}
+	const InteroutId = ref(null)
+	let longPressTimer = null;
+	let longPressed = false;
+	const handleTouchStart = (e : number) => {
+		if (props.pddType != '1') { return }
+		longPressed = false;
+		if (longPressTimer) {
+			clearTimeout(longPressTimer);
+			longPressTimer = null;
+		}
+		longPressTimer = setTimeout(() => {
+			longPressTimer = null;
+			longPressed = true;
+			Interval(e)
+		}, 800); // 1000ms = 1s
+	}
+	const handleTouchEnd = () => {
+		if (longPressTimer) {
+			clearTimeout(longPressTimer);
+			longPressTimer = null;
+			// console.log('未达到 1 秒：取消长按');
+			return;
+		}
+
+		// 如果已经触发过长按
+		if (longPressed) {
+			// console.log('长按已触发，用户放手');
+			clearInterval(InteroutId.value);
+			longPressed = false; // 重置状态（按需）
+		} else {
+			console.log('无效状态（通常不会到这）');
+		}
+	}
+	const Interval = (e : number) => {
+		InteroutId.value = setInterval(() => {
+			jjnum(e);
+		}, 120);
+	}
+	const jjnum = (e : number) => {
+		if (props.pddType != '1') { return }
+		let num = 9999;
+		if (num <= relNumber.value && e == 1) { relNumber.value = num; return }
+		if (relNumber.value <= 0 && e == -1) { relNumber.value = 0; return }
+		relNumber.value += e;
+		stringShow.value = toFixed4ByPadStart(relNumber.value)
+		emit('pddjjnum', relNumber.value, props.idex)
+	}
+	function digitCountByString(n) {
+		const s = Math.abs(n).toString();
+		return s.length;
+	}
+	function toFixed4ByPadStart(n) {
+		const intPart = Math.floor(Math.abs(n));
+		return String(intPart).padStart(4, '0');
+	}
+</script>
+
+<style scoped lang="less">
+	.jsuq {
+		width: 50vw;
+		display: flex;
+		height: 16vw;
+		justify-content: space-between;
+		// background-color: red;
+		margin-top: -1.5vw;
+
+		.rigsbt {
+			width: 25vw;
+			height: 100%;
+			margin-right: 1vw;
+
+			.calculator-father {
+				width: 23vw;
+				height: 90%;
+				margin: 0 auto 0;
+				flex-wrap: wrap;
+				display: grid;
+				grid-template-columns: 1fr 1fr 1fr 1fr;
+
+
+				.calculator-kuai {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					// background-color: #F3F5F9;
+					background-size: 100% 100%;
+					font-size: 1.5vw;
+					font-weight: 500;
+					width: 4.2vw;
+					height: 4.2vw;
+					background: url('/static/index/procurement/bt.png') no-repeat;
+					background-size: 100% 100%;
+					border-radius: 25rpx;
+				}
+
+				.calculator-kuai:active {
+					background: linear-gradient(to bottom, #019cef, #0084fa);
+					color: #fff !important;
+					font-weight: 500;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					background-size: 100% 100%;
+					font-size: 1.5vw;
+					width: 4.2vw;
+					height: 4.2vw;
+					border-radius: 1.6vw;
+				}
+				.calculator-kuai-bad{
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					background-color: #F3F5F9;
+					color: #999;
+					border-radius: 30rpx;
+					background-size: 100% 100%;
+					font-size: 1.5vw;
+					font-weight: 500;
+					width: 5vw;
+					height: 4vw;
+					opacity: 0.6;
+				}
+			}
+		}
+
+		.leftsa {
+			width: 21.8vw;
+			height: 80%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			padding: 0 1.5vw;
+			margin-left: 2.5vw;
+
+			.shu {
+				font-weight: 400;
+				font-size: 1.2vw;
+				color: #222222;
+			}
+
+			.stringShow-kuai {
+				display: flex;
+				align-items: center;
+				width: 9vw;
+				height: 3.4vw;
+				background: #F3F5F9;
+				border-radius: 1vw;
+				// color: #999;
+				color: black;
+				border: 1px solid #CBCFD0;
+				justify-content: space-around;
+				box-shadow: 0rpx 0.1vw 0.3vw 0rpx rgba(140, 143, 153, 0.17) inset;
+				opacity: 0.6;
+
+				view {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					font-size: 1.7vw;
+					font-weight: 500;
+					width: 2.2vw;
+					height: 3.4vw;
+				}
+			}
+			.stringShow-kuai-bad {
+				display: flex;
+				align-items: center;
+				width: 9vw;
+				height: 3.4vw;
+				background: #F3F5F9;
+				border-radius: 1vw;
+				color: #999;
+				border: 1px solid #CBCFD0;
+				justify-content: space-around;
+				box-shadow: 0rpx 0.1vw 0.3vw 0rpx rgba(140, 143, 153, 0.17) inset;
+				opacity: 0.6;
+			
+				view {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					font-size: 1.7vw;
+					font-weight: 500;
+					width: 2.2vw;
+					height: 3.4vw;
+				}
+			}
+			
+
+			.jiajian {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				.jj-bad{
+					width: 4.2vw;
+					height: 4.2vw;
+					margin: 0 0.4vw;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					color: #999;
+					background: url('/static/index/procurement/bt.png') no-repeat;
+					background-size: 100% 100%;
+					border-radius: 25rpx;
+					font-size: 36rpx;
+					opacity: 0.6;
+				}
+
+				.jj {
+					width: 4.2vw;
+					height: 4.2vw;
+					margin: 0 1vw;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					background: url('/static/index/procurement/bt.png') no-repeat;
+					background-size: 100% 100%;
+					border-radius: 25rpx;
+					font-size: 36rpx;
+				}
+
+				.jj:active {
+					background: linear-gradient(to bottom, #00C9FF, #0076FF);
+					color: #fff;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					background-color: #DCDCEE;
+					font-weight: 500;
+				}
+			}
+
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/material/material.vue b/pages/material/material.vue
index 9370add..835649e 100644
--- a/pages/material/material.vue
+++ b/pages/material/material.vue
@@ -11,18 +11,12 @@
 				<image src="/static/index/procurement/shr.png" mode="aspectFill" class="shr"></image>
 				检索
 			</view>
-			<!-- <view class="shx guodu" @click="ification=true">
-				<image src="/static/index/purchaseorder/select.png" mode="aspectFill" class="sh"></image>
-				<image src="/static/index/purchaseorder/selecttarget.png" mode="aspectFill" class="shr"></image>
-				筛选
-			</view> -->
 			<view class="shx guodu" @click="chongzhi"
 				v-if="form.categoryId!=''||form.wlParamInfo!=''||form.suppliers!=''">
 				<image src="/static/index/procurement/cz.png" mode="aspectFill"></image>
 				重置
 			</view>
-			<view class="back guodu" >
-				<!-- <image src="/static/index/procurement/bk.png" mode="aspectFill"></image> -->
+			<view class="back guodu" @click="crkshow = true">
 				出入库
 			</view>
 		</view>
@@ -36,6 +30,9 @@
 			<carditem :InvoicingList="InvoicingList" @addcartory="addcartory" @scrolltolower="scrolltolower" lower-threshold="300"
 				:status="status" @crk="crk"></carditem>
 		</view>
+		<gress :progress="percent" :thickness="0.8"  style="position: fixed;bottom: 4.7vw;right: 1.3vw;z-index: 3;"></gress>
+		<view class="mengban" v-if="crkshow" @click="crkshow = false"> </view>
+		<crkval :show="crkshow"></crkval>
 	</view>
 </template>
 
@@ -43,7 +40,12 @@
 	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, inject, watch } from 'vue';
 	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
 	import carditem from './component/carditem.vue'
+	import gress from './component/gress.vue'
+	import crkval from './component/crkval.vue'
+	const percent = ref(0);
 	 const transition = ref(false)
+	 const crkshow = ref(false)
+	 
 	 const props = defineProps({
 	 	isShow: {
 	 		type: Boolean
@@ -54,6 +56,9 @@
 	 	(newVal, oldVal) => {
 	 		if (!oldVal && newVal) {
 	 			transition.value = false;
+				setTimeout(()=>{
+					percent.value = 55
+				},1000)
 	 			setTimeout(() => {
 	 				transition.value = true;
 	 			}, 50)
@@ -97,6 +102,15 @@
 </script>
 
 <style lang="less" scoped>
+	.mengban{
+		width: 100vw;
+		height: 100vh;
+		position: fixed;
+		background: RGBA(240, 240, 240, 0.64);
+		top: 0;
+		left: 0;
+		z-index: 99;
+	}
 .listcard {
 		width: 90vw;
 		height: calc(100vh - 4vw);
diff --git a/static/index/material/cgd.png b/static/index/material/cgd.png
new file mode 100644
index 0000000..1149e50
Binary files /dev/null and b/static/index/material/cgd.png differ
diff --git a/static/index/material/edh.png b/static/index/material/edh.png
new file mode 100644
index 0000000..6ba9d07
Binary files /dev/null and b/static/index/material/edh.png differ
diff --git a/static/index/material/edl.png b/static/index/material/edl.png
new file mode 100644
index 0000000..7497008
Binary files /dev/null and b/static/index/material/edl.png differ
diff --git a/static/index/material/edr.png b/static/index/material/edr.png
new file mode 100644
index 0000000..f849f09
Binary files /dev/null and b/static/index/material/edr.png differ
diff --git a/static/index/material/gys.png b/static/index/material/gys.png
new file mode 100644
index 0000000..3706e55
Binary files /dev/null and b/static/index/material/gys.png differ
diff --git a/static/index/material/jg.png b/static/index/material/jg.png
new file mode 100644
index 0000000..49e7aa0
Binary files /dev/null and b/static/index/material/jg.png differ