From b1bbe479ec6c8be35319c9337b6ab96f79c72b53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=85=81=E6=9E=9E?= <3422692813@qq.com>
Date: Sat, 8 Feb 2025 16:11:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A3=80=E6=B5=8B=E6=96=87=E6=A1=A3=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/manage/deviceManage.vue | 1185 +++++++++++++++++++--------------
 1 file changed, 691 insertions(+), 494 deletions(-)

diff --git a/pages/manage/deviceManage.vue b/pages/manage/deviceManage.vue
index 8efb9b9..064c9e0 100644
--- a/pages/manage/deviceManage.vue
+++ b/pages/manage/deviceManage.vue
@@ -1,16 +1,17 @@
 <!-- 默认复制 -->
 
 <template>
-	<view class="content">
-		<view class="top-heder">
-			<view class="t-left" @click="getback()">
-				<uni-icons type="left" size="18"></uni-icons>
-			</view>
-			<view class="t-title">
-				<text>资料管理</text>
-			</view>
-			<view class="t-you"></view>
-		</view>
+  <view class="content">
+    <u-loading-page  :loading="isLoading"></u-loading-page>
+    <view class="top-heder">
+      <view class="t-left" @click="getback()">
+        <uni-icons type="left" size="18"></uni-icons>
+      </view>
+      <view class="t-title">
+        <text>资料管理</text>
+      </view>
+      <view class="t-you"></view>
+    </view>
 
     <view class="searchContent">
       <view class="t-input">
@@ -20,529 +21,725 @@
       <view class="sou" @click="getlist()">搜索</view>
     </view>
 
-		<view class="cont">
-		<view class="c-box" @click="addwenjian()">
-				<!-- <view class="">
-					<image src="../../static/imgs/wenjianjia.png" mode=""></image>
-				</view> -->
-			<view style="width: 100%; display: flex; justify-content: center;">
-				<text >  + 新增文件</text>
-			</view>
-		</view>
-		<view class="bjimg" v-if="arrlist == ''">
-			<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
-		</view>
-		<view class="wrap-box">
+    <view class="cont">
+      <view class="c-box" @click="addwenjian()">
+        <!-- <view class="">
+          <image src="../../static/imgs/wenjianjia.png" mode=""></image>
+        </view> -->
+        <view style="width: 100%; display: flex; justify-content: center;">
+          <text> + 新增文件</text>
+        </view>
+      </view>
+      <view class="bjimg" v-if="arrlist == ''">
+        <image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
+      </view>
+      <view class="wrap-box">
 
-			<view class="w-box"  v-for="(item,index) in arrlist" :key="index" >
-				<view class=" wimg" v-if="item.type=='1'" @click="enrtryFile(item.id)">
-					<image src="../../static/imgs/wenjianjia.png" mode=""></image>
-				</view>
-				<view class="wimg" v-else>
-					<image src="../../static/imgs/wenjian.png" mode=""></image>
-				</view>
-				<view class="">{{item.fileName}}</view>
-				<view class="" v-if="item.warnTime">{{item.warnTime}}</view>
-				<view class="" v-if="!item.warnTime" style=" visibility: hidden;">{{'1'}}</view>
-        <view class="" v-if="item.count">文件数:{{item.count}}</view>
-        <view class="" v-if="!item.count" style=" visibility: hidden;">{{'1'}}</view>
-				<view class="bsd-dis">
-					<view class="bianji" v-if="item.type == '2'" @click="viewFile(item.filePath)">预览</view>
-					<view class="bianji" @click="editFile(item.id)">编辑</view>
-					<view class="sanchu" @click="delFile(item.id)">删除</view>
-				</view>
-			</view>
+        <view class="w-box" v-for="(item,index) in arrlist" :key="index">
+          <view class=" wimg" v-if="item.type=='1'" @click="enrtryFile(item.id)">
+            <image src="../../static/imgs/wenjianjia.png" mode=""></image>
+          </view>
+          <view class="wimg" v-else>
+            <image src="../../static/imgs/wenjian.png" mode=""></image>
+          </view>
+          <view class="">{{ item.fileName }}</view>
+          <view class="" v-if="item.warnTime">{{ item.warnTime }}</view>
+          <view class="" v-if="!item.warnTime" style=" visibility: hidden;">{{ '1' }}</view>
+          <view class="" v-if="item.count">文件数:{{ item.count }}</view>
+          <view class="" v-if="!item.count" style=" visibility: hidden;">{{ '1' }}</view>
+          <view class="bsd-dis">
+            <view class="bianji" v-if="item.type == '2'" @click="viewFile(item.filePath)">预览</view>
+            <view class="bianji" @click="editFile(item.id)">编辑</view>
+            <view class="bianji" @click="showHistory(item.id)">历史版本</view>
+            <view class="sanchu" @click="delFile(item.id)">删除</view>
+          </view>
+        </view>
 
-		</view>
+      </view>
 
 
-		</view>
+    </view>
 
 
-	</view>
+    <u-popup :show="isShow" mode="bottom" @close="isShow = false">
+      <view>
+        <!-- 弹出层 -->
+        <view v-if="isShow" class="popup">
+          <view class="popup-content">
+            <view class="popup-title">修改记录</view>
+
+            <!-- 步骤条 -->
+            <view class="steps">
+              <view v-for="(item, index) in drawerData" :key="index" class="step">
+                <view class="step-index">{{ index + 1 }}</view>
+                <view class="step-content">
+                  <text class="step-file-name">📄 文件名称：{{ item.fileName }}</text>
+                  <text class="step-time">🕒 修改时间：{{ formatDate(item.createTime) }}</text>
+                  <text class="step-time">🕒 提醒时间：{{ item.warnTime != null ? formatDate(item.warnTime) : '' }}</text>
+                  <text class="step-download" @click="viewFile(item.filePath)" v-if="item.type == '2'">📂 预览文件</text>
+                </view>
+              </view>
+            </view>
+
+            <!--            <button class="close-btn" @click="isShow = false">关闭</button>-->
+          </view>
+        </view>
+      </view>
+    </u-popup>
+  </view>
 </template>
 
 <script>
-	import config from '@/config'
-	import request from '../../utils/request';
+import config from '@/config'
+import request from '../../utils/request';
+import {formatDate} from "@/utils/utils";
 
-	export default{
-		data(){
-			return{
-			arrlist:[],
-			fileId:null,
-			pageNum: 1,//第几页
-			pageSize: 20,//一页多少张
-			totalPages: 0,//总数
-			nowFile:{},
-        fileName: null
-			}
-		},
+export default {
+  data() {
+    return {
+      arrlist: [],
+      fileId: null,
+      pageNum: 1,//第几页
+      pageSize: 20,//一页多少张
+      totalPages: 0,//总数
+      nowFile: {},
+      fileName: null,
+      isShow: false,
+      drawerData: [],
+      isLoading:false
+    }
+  },
 
-		onLoad(){
+  onLoad() {
 
-		},
-		onShow() {
-			this.getlist()
+  },
+  onShow() {
+    this.getlist()
 
-		},
-		onReachBottom() {
-			if (this.pageNum >= this.totalPages) {
-				uni.showToast({
-					title: '没有下一页数据',
-					icon: 'none'
-				})
+  },
+  onReachBottom() {
+    if (this.pageNum >= this.totalPages) {
+      uni.showToast({
+        title: '没有下一页数据',
+        icon: 'none'
+      })
 
-			} else {
-				this.pageNum++
-				this.getlist()
-			}
-		},
-		methods:{
-			async getlist(){
-				let res = await request({
-					url: '/inspectionFile/inspectionFile/list',
-					method: 'get',
-					data: {
-						pageSize:this.pageSize,
-						pageNum:this.pageNum,
-						fatherId:this.fileId,
-            fileName: this.fileName,
-					}
-				})
-				if (this.pageNum != 1){
-					this.arrlist = this.arrlist.concat(res.rows)
-				}else{
-					this.arrlist = res.rows
-					}
-				let total =  res.total
-				this.totalPages = Math.ceil(total / this.pageSize);
-        this.getCountByDirectory()
-			},
-      getCountByDirectory(){
-        if (this.arrlist && this.arrlist.length > 0){
-          const ids = this.arrlist.filter(item => (item.type === '1' && !item.count)).map(item => item.id)
-          if (ids && ids.length > 0){
+    } else {
+      this.pageNum++
+      this.getlist()
+    }
+  },
+  methods: {
+    formatDate,
+    async getlist() {
+      let res = await request({
+        url: '/inspectionFile/inspectionFile/list',
+        method: 'get',
+        data: {
+          pageSize: this.pageSize,
+          pageNum: this.pageNum,
+          fatherId: this.fileId,
+          fileName: this.fileName,
+        }
+      })
+      if (this.pageNum != 1) {
+        this.arrlist = this.arrlist.concat(res.data)
+      } else {
+        this.arrlist = res.data
+      }
+      let total = res.total
+      this.totalPages = Math.ceil(total / this.pageSize);
+      this.getCountByDirectory()
+    },
+    showHistory(id) {
+      this.isShow = true
+      this.isShow = true
+      request({
+        url: '/system/fileRecord/get/' + id,
+        method: 'get',
+      }).then(res => {
+        if (res && res.data) {
+          this.drawerData = res.data
+        }
+      })
+    },
+    getCountByDirectory() {
+      if (this.arrlist && this.arrlist.length > 0) {
+        const ids = this.arrlist.filter(item => (item.type === '1' && !item.count)).map(item => item.id)
+        if (ids && ids.length > 0) {
+          request({
+            url: '/inspectionFile/inspectionFile/getCountByIds?ids=' + ids,
+            method: 'get',
+          }).then(res => {
+            if (res && res.data) {
+              const map = new Map(Object.entries(res.data))
+              this.arrlist.filter(item => (item.type === '1' && !item.count)).forEach(item => {
+                this.$set(item, 'count', map.get(item.id + ''))
+              })
+            }
+          })
+        }
+      }
+    },
+    async getback() {
+      if (!this.fileId) {
+        uni.navigateBack()
+      } else {
+        let res = await request({
+          url: '/inspectionFile/inspectionFile/' + this.fileId,
+          method: 'get',
+        })
+        this.nowFile = res.data
+        this.arrlist = []
+        this.pageNum = 1
+        this.fileId = this.nowFile.fatherId
+        this.getlist()
+
+
+      }
+
+    },
+    addwenjian() {
+      uni.navigateTo({
+        url: '/pages/manage/deviceAdd?fileId=' + this.fileId + '&type=add'
+      })
+    },
+    enrtryFile(fileId) {
+      this.fileId = fileId
+      this.arrlist = []
+      this.pageNum = 1
+      this.getlist()
+    },
+    viewFile(filePath) {
+      this.isLoading = true;
+
+      uni.downloadFile({
+        url: this.$baseImageUrl + '/' + filePath,
+        success: (res) => {  // 使用箭头函数
+          var filePath = res.tempFilePath;
+          console.log('看看执行了吗');
+          this.isLoading = false;
+          console.log('目前的loading', this.isLoading);  // this 现在指向 Vue 实例
+
+          uni.openDocument({
+            filePath: filePath,
+            showMenu: true,
+            success: (res) => {
+              console.log("文件打开成功");
+            },
+            fail: (err) => {
+              console.error("文件打开失败", err);
+            }
+          });
+        },
+        fail: (err) => {
+          console.error("文件下载失败", err);
+        }
+      });
+    },
+    editFile(fileId) {
+      uni.navigateTo({
+        url: '/pages/manage/deviceAdd?fileId=' + fileId + '&type=edit'
+      })
+    },
+    delFile(fileId) {
+      let that = this
+      uni.showModal({
+        title: '确认',
+        content: '是否确认删除',
+        success: function (res) {
+          if (res.confirm) {
             request({
-              url: '/inspectionFile/inspectionFile/getCountByIds?ids=' + ids,
-              method: 'get',
+              url: '/inspectionFile/inspectionFile/del/' + fileId,
+              method: 'post'
             }).then(res => {
-              if (res && res.data){
-                const map = new Map(Object.entries(res.data))
-                this.arrlist.filter(item => (item.type === '1' && !item.count)).forEach(item => {
-                  this.$set(item, 'count', map.get(item.id + ''))
-                })
-              }
+              that.getlist()
             })
           }
         }
-      },
-			async getback(){
-				if(!this.fileId){
-					uni.navigateBack()
-				}else{
-					let res = await request({
-						url: '/inspectionFile/inspectionFile/'+this.fileId,
-						method: 'get',
-					})
-					this.nowFile = res.data
-					this.arrlist=[]
-					this.pageNum =1
-					this.fileId = this.nowFile.fatherId
-					this.getlist()
+      });
+
+    },
+    gostaff() {
+      uni.navigateTo({
+        url: '/pages/manage/staffManage'
+      })
+    },
+    goinformation() {
+      uni.navigateTo({
+        url: '/pages/manage/informationManage'
+      })
+    },
+    godevice() {
+      uni.navigateTo({
+        url: '/pages/manage/deviceManage'
+      })
+    },
 
 
-				}
-
-			},
-			addwenjian(){
-				uni.navigateTo({
-					url:'/pages/manage/deviceAdd?fileId='+this.fileId+'&type=add'
-				})
-			},
-			enrtryFile(fileId){
-				this.fileId = fileId
-				this.arrlist=[]
-				this.pageNum =1
-				this.getlist()
-			},
-			viewFile(filePath){
-				uni.downloadFile({
-				  url: this.$baseImageUrl+'/'+filePath,
-				  success: function (res) {
-				    var filePath = res.tempFilePath;
-				    uni.openDocument({
-				      filePath: filePath,
-				      showMenu: true,
-				      success: function (res) {
-				      }
-				    });
-				  }
-				});
-			},
-			editFile(fileId){
-				uni.navigateTo({
-					url:'/pages/manage/deviceAdd?fileId='+fileId+'&type=edit'
-				})
-			},
-			 delFile(fileId){
-				let that = this
-				uni.showModal({
-					 title: '确认',
-					 content: '是否确认删除',
-					 success: function (res) {
-            if (res.confirm){
-              request({
-                url: '/inspectionFile/inspectionFile/del/'+fileId,
-                method: 'post'
-              }).then(res=>{
-                that.getlist()
-              })
-            }
-					 }
-				 });
-
-			},
-			gostaff(){
-				uni.navigateTo({
-					url:'/pages/manage/staffManage'
-				})
-			},
-			goinformation(){
-				uni.navigateTo({
-					url:'/pages/manage/informationManage'
-				})
-			},
-			godevice(){
-				uni.navigateTo({
-					url:'/pages/manage/deviceManage'
-				})
-			},
+  },
 
 
-		},
-
-
-	}
+}
 </script>
 
 <style scoped lang="scss">
-	.content{
-		width: 100%;
-		height: calc(100vh);
-		background-color: #F6F6F6;
-		box-sizing: border-box;
-		// padding-top: 45px;
-	}
-	.top-icon{
-		margin-bottom: 45px;
-	}
-	.q-fab{
-		position: fixed;
-		bottom: 50px;
-		right: 15px;
-		width: 55px;
-		height: 55px;
-		border-radius: 50%;
-		overflow: hidden;
-		image{
-			width: 100%;
-			height: 100%;
-		}
-	}
-	.fab-z1{
-		position: fixed;
-		bottom: 115px;
-		right: 15px;
-		width: 50px;
-		height: 50px;
-		border-radius: 50%;
-		overflow: hidden;
-		image{
-			width: 100%;
-			height: 100%;
-		}
-	}
-	.fab-z2{
-		position: fixed;
-		bottom: 50px;
-		right: 80px;
-		width: 50px;
-		height: 50px;
-		border-radius: 50%;
-		overflow: hidden;
-		image{
-			width: 100%;
-			height: 100%;
-		}
-	}
-	.c-tap{
-		width: 100%;
-		height: 40px;
-		box-sizing: border-box;
-		padding: 15px;
-		display: flex;
-		background-color: white;
-		align-items: center;
-	}
-	.c-top{
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	}
-	.c-title{
-		font-size: 18px;
-		font-weight: bold
-	}
-	.cont{
-		width: 100%;
-		padding: 15px;
-		padding-top: 0px ;
-		box-sizing: border-box;
-		background-color: #F6F6F6;
+.content {
+  width: 100%;
+  height: calc(100vh);
+  background-color: #F6F6F6;
+  box-sizing: border-box;
+  // padding-top: 45px;
+}
 
-	}
-	.hongdian{
-		width: 15px;
-		height: 15px;
-		background-color: crimson;
-		border-radius: 50%;
-		overflow: hidden;
-		position: absolute;
-		top: 5px;
-		right: 5px;
-		z-index: 9999;
-	}
-	.c-box{
-		width: 100%;
-		box-sizing: border-box;
-		padding: 10px;
-		background-color: white;
-		margin-top: 10px;
-		border-radius: 10px;
-		display: flex;
-		align-items: flex-start;
+.top-icon {
+  margin-bottom: 45px;
+}
 
-		font-size: 18px;
-		font-weight: bold;
-		image{
-			width: 30px;
-			height: 30px;
-			margin-right: 10px;
-		}
-	}
-	.c-b-top{
-		width: 100%;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-	.t-left{
-		width: 40%;
-		height: 100px;
-		border-radius: 7px;
-		margin-right: 10px;
-		overflow: hidden;
-		image{
-			width: 100%;
-			height: 100%;
-		}
+.q-fab {
+  position: fixed;
+  bottom: 50px;
+  right: 15px;
+  width: 55px;
+  height: 55px;
+  border-radius: 50%;
+  overflow: hidden;
 
-	}
-	.t-right{
-		width: 60%;
-	}
-	.t-tilte{
-		font-size: 20px;
-		font-weight: bold;
-		color: #333333;
-		 white-space: nowrap;
-		 overflow: hidden;
-		 text-overflow: ellipsis;
+  image {
+    width: 100%;
+    height: 100%;
+  }
+}
 
-	}
-	.tw-tilte{
-		width: 100%;
-		text-align: right;
-		font-size: 16px;
-		font-weight: bold;
-		color: #5e5e5e;
-		 white-space: nowrap;
-		 overflow: hidden;
-		 text-overflow: ellipsis;
+.fab-z1 {
+  position: fixed;
+  bottom: 115px;
+  right: 15px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  overflow: hidden;
 
-	}
-	.t-zi{
-		font-size: 14px;
-		font-weight: 400;
-		color: #666666;
-		 overflow: hidden;
-		  text-overflow: ellipsis;
-		  display: -webkit-box;
-		  -webkit-line-clamp: 3;
-		  -webkit-box-orient: vertical;
+  image {
+    width: 100%;
+    height: 100%;
+  }
+}
 
-	}
-	.bjimg{
-		width: 255px;
-		height: 236px;
-		margin: 0px auto;
-		margin-top: 100px;
-		image{
-			width: 100%;
-			height: 100%;
-		}
-	}
-	.c-b-bom{
-		width: 100%;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-top: 5px;
-	}
-	.b-left{
-		color: #0D2E8D;
-		font-size: 14px;
-	}
-	.b-right{
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-	.z-lv{
-		display: flex;
-		align-items: center;
-		color: #0D2E8D;
-		font-size: 15px;
-		margin-right: 10px;
-	}
-	.y-hong{
-		display: flex;
-		align-items: center;
-		color: #fa3534;
-		font-size: 15px;
-		margin-right: 15px;
-	}
-	.z-img{
-		width: 20px;
-		height: 15px;
-		image{
-			width: 100%;
-			height: 100%;
-		}
-		margin-right: 2px;
-	}
-	.tap-box{
-		width: 30%;
-		text-align: center;
-	}
-	.gang{
-		height: 4px;
-		background: #0D2E8D;
-		width: 80%;
-		margin: 0px auto;
-	}
-	.lan{
-		color: #0D2E8D;
-	}
-	.top-heder{
-		width: 100%;
-		height: 68px;
-		background: white;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		box-sizing: border-box;
-		padding: 5px 15px;
-    margin-top: 2rem;
-	}
-	.t-title{
-		font-size: 17px;
-		font-weight: bold;
-		color: #333333;
-	}
-	.t-left{
-		width: 20%;
-		height: 20px;
-	}
-	.t-you{
-	width: 20%;
-	height: 20px;
-	}
-	.wrap-box{
-		width: 100%;
-		display: flex;
-		justify-content: space-between;
-		box-sizing: border-box;
-		flex-wrap: wrap;
-	}
-	.w-box{
-		width: 48%;
-		background-color: white;
-		margin-top: 10px;
-		border-radius: 10px;
-		box-sizing: border-box;
-		padding: 10px;
-		text-align: center;
+.fab-z2 {
+  position: fixed;
+  bottom: 50px;
+  right: 80px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  overflow: hidden;
 
-	}
-	.wimg{
-		width: 100%;
-		height: 120px;
-		image{
-			width: 100%;
-			height: 100%;
-		}
-	}
-	.bsd-dis{
-		display: flex;
-		width: 100%;
-		align-items: center;
-		justify-content: space-around;
-		margin-top: 10px;
-	}
-	.bianji{
-		width: 50px;
-		height: 24px;
-		color: #0D2E8D;
+  image {
+    width: 100%;
+    height: 100%;
+  }
+}
 
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 8px;
-	}
-	.sanchu{
-		width: 50px;
-		height: 24px;
-		color: #FF571A;
+.c-tap {
+  width: 100%;
+  height: 40px;
+  box-sizing: border-box;
+  padding: 15px;
+  display: flex;
+  background-color: white;
+  align-items: center;
+}
 
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 8px;
-	}
+.c-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 
-  .t-input{
-    width: 75%;
-    height: 36px;
-    background: #F0F0F0;
-    border-radius: 50px;
-    box-sizing: border-box;
-    padding: 0 15px;
-    display: flex;
-    align-items: center;
+.c-title {
+  font-size: 18px;
+  font-weight: bold
+}
+
+.cont {
+  width: 100%;
+  padding: 15px;
+  padding-top: 0px;
+  box-sizing: border-box;
+  background-color: #F6F6F6;
+
+}
+
+.hongdian {
+  width: 15px;
+  height: 15px;
+  background-color: crimson;
+  border-radius: 50%;
+  overflow: hidden;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 9999;
+}
+
+.c-box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  background-color: white;
+  margin-top: 10px;
+  border-radius: 10px;
+  display: flex;
+  align-items: flex-start;
+
+  font-size: 18px;
+  font-weight: bold;
+
+  image {
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
+  }
+}
+
+.c-b-top {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.t-left {
+  width: 40%;
+  height: 100px;
+  border-radius: 7px;
+  margin-right: 10px;
+  overflow: hidden;
+
+  image {
+    width: 100%;
+    height: 100%;
   }
 
-  .sou{
-    width: 10%;
-    margin-left: 5px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+}
+
+.t-right {
+  width: 60%;
+}
+
+.t-tilte {
+  font-size: 20px;
+  font-weight: bold;
+  color: #333333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+}
+
+.tw-tilte {
+  width: 100%;
+  text-align: right;
+  font-size: 16px;
+  font-weight: bold;
+  color: #5e5e5e;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+}
+
+.t-zi {
+  font-size: 14px;
+  font-weight: 400;
+  color: #666666;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+
+}
+
+.bjimg {
+  width: 255px;
+  height: 236px;
+  margin: 0px auto;
+  margin-top: 100px;
+
+  image {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.c-b-bom {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 5px;
+}
+
+.b-left {
+  color: #0D2E8D;
+  font-size: 14px;
+}
+
+.b-right {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.z-lv {
+  display: flex;
+  align-items: center;
+  color: #0D2E8D;
+  font-size: 15px;
+  margin-right: 10px;
+}
+
+.y-hong {
+  display: flex;
+  align-items: center;
+  color: #fa3534;
+  font-size: 15px;
+  margin-right: 15px;
+}
+
+.z-img {
+  width: 20px;
+  height: 15px;
+
+  image {
+    width: 100%;
+    height: 100%;
   }
 
-  .searchContent{
-    display: flex;
-    justify-content: center;
+  margin-right: 2px;
+}
+
+.tap-box {
+  width: 30%;
+  text-align: center;
+}
+
+.gang {
+  height: 4px;
+  background: #0D2E8D;
+  width: 80%;
+  margin: 0px auto;
+}
+
+.lan {
+  color: #0D2E8D;
+}
+
+.top-heder {
+  width: 100%;
+  height: 68px;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 5px 15px;
+  margin-top: 2rem;
+}
+
+.t-title {
+  font-size: 17px;
+  font-weight: bold;
+  color: #333333;
+}
+
+.t-left {
+  width: 20%;
+  height: 20px;
+}
+
+.t-you {
+  width: 20%;
+  height: 20px;
+}
+
+.wrap-box {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+}
+
+.w-box {
+  width: 48%;
+  background-color: white;
+  margin-top: 10px;
+  border-radius: 10px;
+  box-sizing: border-box;
+  padding: 10px;
+  text-align: center;
+
+}
+
+.wimg {
+  width: 100%;
+  height: 120px;
+
+  image {
+    width: 100%;
+    height: 100%;
   }
+}
+
+.bsd-dis {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-around;
+  margin-top: 10px;
+}
+
+.bianji {
+  width: 50px;
+  height: 24px;
+  color: #0D2E8D;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+}
+
+.sanchu {
+  width: 50px;
+  height: 24px;
+  color: #FF571A;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+}
+
+.t-input {
+  width: 75%;
+  height: 36px;
+  background: #F0F0F0;
+  border-radius: 50px;
+  box-sizing: border-box;
+  padding: 0 15px;
+  display: flex;
+  align-items: center;
+}
+
+.sou {
+  width: 10%;
+  margin-left: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.searchContent {
+  display: flex;
+  justify-content: center;
+}
+
+/* 弹出层背景 */
+.popup {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+/* 弹出层内容 */
+.popup-content {
+  width: 90%;
+  background: #fff;
+  border-radius: 10px 10px 0 0;
+  padding: 20px;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* 标题 */
+.popup-title {
+  font-size: 18px;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 15px;
+}
+
+/* 步骤条 */
+.steps {
+  padding: 10px;
+}
+
+/* 单个步骤 */
+.step {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 15px;
+}
+
+/* 序号样式 */
+.step-index {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  border-radius: 50%;
+  background: #007aff;
+  color: #fff;
+  font-size: 14px;
+  font-weight: bold;
+  margin-right: 10px;
+}
+
+/* 步骤内容 */
+.step-content {
+  flex: 1;
+  background: #f8f8f8;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+/* 文字样式 */
+.step-file-name {
+  font-size: 16px;
+  font-weight: bold;
+  display: block;
+}
+
+.step-time {
+  font-size: 14px;
+  color: #666;
+  display: block;
+  margin: 5px 0;
+}
+
+.step-download {
+  font-size: 14px;
+  color: #007aff;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+/* 关闭按钮 */
+.close-btn {
+  width: 100%;
+  padding: 10px;
+  background: #007aff;
+  color: white;
+  text-align: center;
+  border-radius: 5px;
+  margin-top: 10px;
+}
 </style>