<template>
	<Layout  :titles="'区块链数字资产查询'" :title_content="'区块链数字资产查询'">
		<view class="content-fx2" >
			<view class="hy">
				<view class="asset_type">
					<view class="asset_nav" :class="{'active': activeTab === 1}" @tap="exchange(1)">
						<image :src="activeTab === 1 ? '../static/img/asset/a_icon1x.png' : '../static/img/asset/a_icon1.png'" class="asset_icon"></image>
						<view class="asset_title">资产编号</view>
					</view>
					<view class="asset_nav" :class="{'active': activeTab === 2}" @tap="exchange(2)">
						<image :src="activeTab === 2 ? '../static/img/asset/a_icon2x.png' : '../static/img/asset/a_icon2.png'" class="asset_icon"></image>
						<view class="asset_title">资产指纹</view>
					</view>
					<view class="asset_nav" :class="{'active': activeTab === 3}" @tap="exchange(3)">
						<image :src="activeTab === 3 ? '../static/img/asset/a_icon3x.png' : '../static/img/asset/a_icon3.png'" class="asset_icon"></image>
						<view class="asset_title">存证HASH</view>
					</view>
				</view>
				<view class="form_query">
					<!-- <image src="../static/img/page/ss.png" class="ss"></image> -->
					  <uni-data-select class="ssxl" placeholder="资产类别" v-model="sz_type" :localdata="range"  ></uni-data-select>
					
					<input type="text" v-model="hash" class="hash" name="param" :placeholder="placeholder"  value="">
					<view class="btn-query" id="btn_sub" @tap="find()">立即核验</view>
				</view>
				<view class="form_tips">
					温馨提示
					<p>1. 核验功能主要验证在本平台确权的数据资产数据是否被篡改，权属是否正确;</p>
					<p>2. 可通过三种方式: 资产编号、资产指纹、存证HASH;</p>
					<p>3. 通过验证的条件为: 在链上能匹配到一致的数据信息;</p>
				</view>
			</view>
		</view>
		
		 <view class="content"> 
			<view class="content_e" v-if="show">
				核验通过<image src="../static/img/page/pass.png" class="pass"></image>，资产溯源记录如下
			</view>
			<view class="content_e" v-if="showsz">
				核验通过<image src="../static/img/page/pass.png" class="pass"></image>，资产溯源记录如下
			</view>
			 <view class="content_bg" > 
			 <view class="content_e" v-if="shows" style="text-align: center;margin: 0 auto;">
				 查验无结果
			 </view>
			 <view class="content_l" v-if="showsz">
			 					 
			 					 <view class="content2">
			 					 	<view class="content2_t">
			 					 		资产编号:
			 					 	</view>
			 						<view class="content2_no">
			 							{{asset.item_no}}
			 						</view>
			 					 </view>
								 <view class="content2">
								 	<view class="content2_t">
								 		资产哈希:
								 	</view>
										<view class="content2_no">
											{{asset.hash}}
										</view>
								 </view>
			 					 <view class="content2s">
			 						<view class="content2">
			 							<view class="content2_t">
			 							资产名称:
			 							</view>
			 							<view class="content2_no">
			 								{{asset.info.asset_name}}
			 							</view>
			 						</view>
			 						<view class="content22">
			 							<view class="content2_t">
			 							资产类型:
			 							</view>
			 							<view class="content2_no" >
			 								{{asset.info.asset_type}}
			 							</view>
			 							
			 						</view>
			 					</view>
			 					<view class="content_timeline">
			 					 	<view class="content2_t">
			 					 	   资产溯源路径:
			 					 	</view>
			 						
			 						<view class="content_timeline_line">
			 							<el-timeline >
			 								<el-timeline-item
			 								v-for="(activity, index) in activities"
			 								:key="index"
			 								:icon="activity.icon"
			 								:type="activity.type"
			 								:color="activity.color"
			 								:size="activity.size"
			 								>
											<p class="content_timeline_name" :style="{color:activity.color}" >{{activity.name}}</p>
			 								<p class="content_timeline_content">哈希：</p>
			 								<p class="content_timeline_content">{{activity.hash}}</p>
			 								<p class="content_timeline_content">{{activity.timestamp}}</p>
			 								</el-timeline-item>
			 							</el-timeline>
			 							<view class="content_more" @click="showMore()">
			 								{{showAll ? '收起' : '查看更多'}}<i :class="showAll ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
			 							</view>
			 						</view>
			 						
			 					</view>
			 </view>
			 
			 <view class="content_r" id="certs" v-if="showsz" >
			 					 <image :src="game.cert_url" class="content_r_img" mode="widthFix">
			       <view class="download" @tap="exportToPDFs(game.cert_url)">
			 						下载证书
			 					 </view>
			 </view>
			 
			 
				 <view class="content_l" v-if="show">
					 
					 <view class="content2">
					 	<view class="content2_t">
					 		资产编号:
					 	</view>
						<view class="content2_no">
							{{asset.no}}
						</view>
					 </view>
					 <view class="content2s">
						<view class="content2">
							<view class="content2_t">
							资产名称:
							</view>
							<view class="content2_no">
								{{asset.name}}
							</view>
						</view>
						<view class="content22">
							<view class="content2_t">
							资产状态:
							</view>
							<view class="content2_no" v-if="game.asset_status=='talk'">
								洽谈对接中
							</view>
							<view class="content2_no" v-if="game.asset_status=='financing'">
								需要融资
							</view>
							<view class="content2_no" v-if="game.asset_status=='frozen'">
								质押冻结中
							</view>
							<view class="content2_no" v-if="game.asset_status=='disposing'">
								待处置
							</view>
							<view class="content2_no" v-if="game.asset_status=='disposed'">
								处置完成
							</view>
						</view>
					</view>
					<view class="content_timeline">
					 	<view class="content2_t">
					 	   资产溯源路径:
					 	</view>
						
						<view class="content_timeline_line">
							<el-timeline >
								<el-timeline-item
								v-for="(activity, index) in activities"
								:key="index"
								:icon="activity.icon"
								:type="activity.type"
								:color="activity.color"
								:size="activity.size"
								>
								<p class="content_timeline_name" :style="{color:activity.color}">{{activity.name}}</p>
								<p class="content_timeline_content">资产指纹：{{activity.content}}</p>
								<p class="content_timeline_content">{{activity.hash}}</p>
								<p class="content_timeline_content">{{activity.timestamp}}</p>
								</el-timeline-item>
							</el-timeline>
							<view class="content_more" @click="showMore()">
								{{showAll ? '收起' : '查看更多'}}<i :class="showAll ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
							</view>
						</view>
						
					</view>
				 </view>
				 <view class="content_r" id="certs" v-if="show">
					 <image :src="game.cert_url" class="content_r_img" mode="widthFix">
				       <view class="download" @tap="exportToPDFs(game.cert_url)">
						下载证书
					 </view>
				 </view>

					<view class="content_l2s" v-if="show2">
					 <view class="content12s">
					 	核验通过<image src="../static/img/page/pass.png" class="pass2s"></image>
					 </view>
					 <view class="content22s">
					 	<view class="content2_t2s">
					 		存证HASH
					 	</view>
						<view class="content2_no2s">
							{{info.tx_hash}}
						</view>
					 </view>
					 <view class="content22s">
					 	<view class="content2_t2s">
					 	   上链时间
					 	</view>
					 	<view class="content2_no2s">
					 		{{info.block_time}}
					 	</view>
					 </view>
					 <view class="download2s" @tap="exportToPDF()">
						下载证书
					 </view>
				 </view>
				  <view class="content_r2s" id="certs" v-if="show2">
					 <!-- <image src="../static/img/page/certs6.png" class="content_r_img" mode="widthFix"> -->
					 <view class="assets_name2s">{{info.pseudonym}}</view>
					 <view class="assets2s">{{info.worksname}}</view>
					 <view class="assets_time2s">{{info.block_time}}</view>
					 <view class="assets_no2s">{{info.ev_id}}</view>
					 <view class="assets_hi2s">{{info.block_height}}</view>
					 <view class="assets_hash2s">{{info.tx_hash}}</view>
					 <!-- <view class="assets_code">{{info.pseudonym}}</view> -->
				 </view>


				 <view class="content_l2s" v-if="show3">
					 <view class="content12s">
					 	核验通过<image src="../static/img/page/pass.png" class="pass2s"></image>
					 </view>
					 <view class="content22s">
					 	<view class="content2_t2s">
					 		存证HASH
					 	</view>
						<view class="content2_no2s">
							{{info.tx_hash}}
						</view>
					 </view>
					 <view class="content22s">
					 	<view class="content2_t2s">
					 	   上链时间
					 	</view>
					 	<view class="content2_no2s">
					 		{{info.block_time}}
					 	</view>
					 </view>
					 <view class="download2s" @tap="exportToPDF()">
						下载证书
					 </view>
				 </view>
				  <view class="content_r2s" id="certs" v-if="show3">
					 <!-- <image src="../static/img/page/certs6.png" class="content_r_img" mode="widthFix"> -->
					 <view class="assets_name2s">{{info.pseudonym}}</view>
					 <view class="assets2s">{{info.worksname}}</view>
					 <view class="assets_time2s">{{info.block_time}}</view>
					 <view class="assets_no2s">{{info.ev_id}}</view>
					 <view class="assets_hi2s">{{info.block_height}}</view>
					 <view class="assets_hash2s">{{info.tx_hash}}</view>
					 <!-- <view class="assets_code">{{info.pseudonym}}</view> -->
				 </view>
			 </view>
		  </view>
		  
		  <!-- 数字资产-->
		  
		  
	</Layout>
	
</template>

<script>
	import Layout from './part/layouts.vue';
	import JsPDF from 'jspdf';
	import html2canvas from 'html2canvas';
	export default {
		components:{
			Layout,
			// Kefu
		},
		data(){
			return {
				hash:'',
				info:[],
				show:false,
				shows:false,
				show2:false,
				show3:false,
				showAll:false,
				showsz:false,
				activeTab: 1,
				placeholder:'可输入资产编号对存证证书进行核验',
                types:'no',
				onchain_logs:[],
				asset:[],
				game:[],
				activitiess:[],
				activities: [],
				sz_type: 0,
				range: [
				  // { value: 0, text: "资产类别" },
				  { value: 1, text: "游戏产品" },
				  { value: 2, text: "游戏数字资产" },
				],
				
			}
		},
		created() {
			// this.getZs();
		},
		beforeDestroy() {
		},
		methods:{
			showMore(){
				this.showAll = !this.showAll;
				if(this.showAll){
					this.activities = this.activitiess;
				}else{
					this.activities = this.activitiess.slice(0,4);
				}
			},
			exchange(tab){
				this.activeTab = tab;
				if(tab==1){
					this.types = 'no';
					this.placeholder = '可输入资产编号对存证证书进行核验';
				}else if(tab==2){
					this.types = 'fingerprint';
					this.placeholder = '可输入资产指纹对存证证书进行核验';
				}else if(tab==3){
					this.types = 'hash';
					this.placeholder = '可输入存证HASH对存证证书进行核验';
				}
			},
			find_sz(){
			    let that = this;
			    that.show=false;
			    that.shows=false;
				that.show2=false;
				that.show3=false;
				that.showAll=false;
				that.game.cert_url = '';
				that.showsz = false;
				uni.showLoading({
					title: '查询中'
				});
				if(that.hash==''){
					uni.showToast({
						title: '查询不能为空',
						icon:'none',
						duration: 2000
					});
					return;
				}
				if(that.types=='no'){
					 var sztype = 'item_no'
				}else if(that.types=='fingerprint'){
					var sztype = 'key'
				}else{
					var sztype = 'hash'
				}
				// $allowedTypes = ['item_no', 'key', 'hash'];
				that._post('gameasset.GameAsset/query',{
					value: that.hash,
					type: sztype
				},res=>{
					uni.hideLoading();
					if(res.data.length==0){
						//that.finds();
						that.shows = true;
						that.showsz = false;
						return;
					}else{
						that.game.cert_url = res.data.cert_url;
						that.asset = res.data.logs[0];
						that.asset.info = JSON.parse(that.asset['info']);
						//循环处理that.onchain_logs成activities
						that.activitiess = res.data.logs.map((item,key)=>{
								//item.type:asset-确权登记;evaluate-资产评估上链; frozen-质押冻结;transfer-处置转移;change-变更登记
								let name = '';
								if(item.type=='asset'){
									name = '确权登记';
								}else if(item.type=='evaluate'){
									name = '资产评估上链';
								}else if(item.type=='frozen'){
									name = '质押冻结';
								}else if(item.type=='transfer'){
									name = '资产交易';
								}else if(item.type=='change'){
									name = '变更登记';
								}
								else if(item.type=='mint'){
									name = '确权登记';
								}
							if(res.data.logs.length==key+2){
								name = '资产发放';
							}	
							let post_time = '';	
							post_time = item['info'].post_time;
							if(post_time==undefined){
								// console.log(JSON.parse(item['info']),111111)
								post_time = JSON.parse(item['info'])['post_time'];
							}
							//循环第一个赋值color
							if(key==0){
								//判断item.type是否为asset，赋值name 
								
								return {
									name: name,
									content: item.key,
									hash: item.hash,
									timestamp: post_time,
									size: 'large',
									type: 'primary',
									color:'#F86D07',	
									icon: 'el-icon-check'
								}
							}else{
								return {
									name: name,
									content: item.key,
									hash: item.hash,
									timestamp: post_time,
									icon: ''
								}
							}
						})
						if(!this.showAll){
							this.activities = this.activitiess.slice(0, 4);
						}
						
						that.showsz = true;
					}
				}
				,err=>{
					if(err.data.msg=='未找到相关资产项'){
						that.shows = true;
						that.showsz = false;
						// that.finds();
						return;
					}else{
						uni.showToast({
							icon:'none',
							title: err.data.msg
						})
					return;
					}
					// this.$message(err.data.msg);
				}
				)
			},
			
			find(){
			    let that = this;
				if(that.sz_type==0){
					uni.showToast({
						title: '请选择资产类别',
						icon:'none',
						duration: 2000
					});
					return;
				}
				if(that.sz_type==2){
					this.find_sz();
					return;
				}
				 that.show=false;
				that.shows=false;
				that.show2=false;
				that.show3=false;
				that.showAll=false;
				that.game.cert_url = '';
				that.showsz = false;
				uni.showLoading({
					title: '查询中'
				});
				if(that.hash==''){
					uni.showToast({
						title: '查询不能为空',
						icon:'none',
						duration: 2000
					});
					return;
				}
				that._post('asset.asset/query',{
					param: that.hash,
					type: that.types
				},res=>{
					uni.hideLoading();
					if(res.data.length==0){
						that.finds();
						return;
					}else{
						that.onchain_logs = res.data.onchain_logs;
						that.asset = res.data.asset;
						that.game = res.data.game;
						if(!that.game.cert_url){
							that.show3=true;
							that.show=false;
							that.info.tx_hash=that.asset.tx_hash;
							that.info.pseudonym=that.asset.name;
							that.info.worksname=that.asset.username;
							that.info.ev_id=that.asset.fingerprint;
							that.info.block_height=that.asset.blockNumber;
							//转换时间戳that.asset.record_time转换成日期2025-03-06 10:00:00
							let date = new Date(that.asset.record_time*1000);
							let year = date.getFullYear();
							let month = date.getMonth()+1;
							let day = date.getDate();
							let hour = date.getHours();
							let minute = date.getMinutes();
							let second = date.getSeconds();
							that.info.block_time=year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
							
						}else{
							that.show=true;
							that.show3=false;
						}
						//循环处理that.onchain_logs成activities
						that.activitiess = that.onchain_logs.map((item,key)=>{
							//item.type:asset-确权登记;evaluate-资产评估上链; frozen-质押冻结;transfer-处置转移;change-变更登记
								let name = '';
								if(item.type=='asset'){
									name = '确权登记';
								}else if(item.type=='evaluate'){
									name = '资产评估上链';
								}else if(item.type=='frozen'){
									name = '质押冻结';
								}else if(item.type=='transfer'){
									name = '处置转移';
								}else if(item.type=='change'){
									name = '变更登记';
								}
							//循环第一个赋值color
							if(key==0){
								//判断item.type是否为asset，赋值name 
								
								return {
									name: name,
									content: item.fingerprint,
									hash: item.tx_hash,
									timestamp: item.create_time,
									size: 'large',
									type: 'primary',
									color:'#F86D07',	
									icon: 'el-icon-check'
								}
							}else{
								return {
									name: name,
									content: item.fingerprint,
									hash: item.tx_hash,
									timestamp: item.create_time,
								}
							}
						})
						if(!this.showAll){
							this.activities = this.activitiess.slice(0, 4);
						}
						//that.show = true;
					}
				}
				,err=>{
					if(err.data.msg=='资产不存在'){
						that.finds();
						return;
					}else{
						uni.showToast({
							icon:'none',
							title: err.data.msg
						})
					return;
					}
					// this.$message(err.data.msg);
				}
				)
			},
			
			finds(){
				let that = this;
				that.show=false;
				that.shows=false;
				that.show2=false;
				that.showAll=false;
				that.game.cert_url = '';
				that.showsz = false;
				if(that.hash==''){
					uni.showToast({
						title: '查询不能为空',
						icon:'none',
						duration: 2000
					});
					return;
				}
				uni.showLoading({
					title: '查询中'
				});
				uni.request({
				  url: 'https://banquan.scszcb.com/home/blockchain/queryresultnew?param='+this.hash,
				  method: 'POST',
				  success: function(res) {
					  uni.hideLoading();
					  if(res.data.msg=='没有查询到结果'){
						that.shows = true;
						that.show=false;
						that.show2=false;
						that.show3=false;
						that.showAll=false;
						return;
					  }else{
						  that.info = res.data;
						  that.show2 = true;
					  }
				  },
				  fail: function(eres) {
					  uni.hideLoading();
				  		that.shows = true;
						that.show=false;
						that.show2=false;
						that.show3=false;
						that.showAll=false;
				  },
				});
			},
			exportToPDF() {
			       let that = this
			       this.loading = false;
				   uni.showLoading({
				   	title: '下载中'
				   });
			       html2canvas(document.querySelector('#certs'), {//对应的dom元素id(class也可以)
					allowTaint: true,//是否允许跨域图像渲染画布
					useCORS:true,//是否尝试使用 CORS 从服务器加载图像 解决图片跨域问题
					 dpi: 300, // 设置截图的分辨率
					 scale: 2, // 设置截图缩放比例，以适应pdf的dpi
					 imageQuality: 1 // 设置图片质量为最好
				}).then(canvas => {
			       var contentWidth = canvas.width;
			       var contentHeight = canvas.height;
			       // 加水印
			       // console.log(canvas)
			       var ctx=canvas.getContext("2d");
			       ctx.rotate(Math.PI / 180 * 20);
			       ctx.font="60px";
			       ctx.fillStyle = "rgba(255,255,255,1)"; 
			       ctx.strokeText("证书",250,50);
			       // 加水印
			       //一页pdf显示html页面生成的canvas高度;
			       var pageHeight = contentWidth / 592.28 * 841.89;
			       //未生成pdf的html页面高度
			       var leftHeight = contentHeight;
			       //页面偏移
			       var position = 0;
			       //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
			       var imgWidth = 595.28;
			       var imgHeight = 592.28/contentWidth * contentHeight;
			     
			       var pageData = canvas.toDataURL('image/jpeg', 1.0);
			       var pdf = new JsPDF('', 'pt', 'a4');
			     
			       //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
			       //当内容未超过pdf一页显示的范围，无需分页
			       if (leftHeight < pageHeight) {
			       pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
			       } else {
			           while(leftHeight > 0) {
			               pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
			               leftHeight -= pageHeight;
			               position -= 841.89;
			               //避免添加空白页
			               if(leftHeight > 0) {
			                 pdf.addPage();
			               }
			           }
			       }
			       pdf.save('证书.pdf');
			        uni.hideLoading();
			       });
			    },
			exportToPDFs(url){
				// url = https://static-cog.scszsj.com/game/cert/2025/03/67c940cee1730.jpg 替换成 https://szsj-cog.oss-cn-chengdu.aliyuncs.com/game/cert/2025/03/67c940cee1730.jpg
				let ulrs = 'https://szsj-cog.oss-cn-chengdu.aliyuncs.com/';
				url = url.replace('https://static-cog.scszsj.com', ulrs);
				// 根据url电脑浏览器打开
				window.open(url, '_blank');
            },
			downPdf() {
				 window.screen.zoom = 0.5;
				window.scrollTo(500, 0) //首先滚动到顶部 如果要某一个元素 就滚动到元素位置
				let that = this;
				const dpi = 600;
				html2canvas(document.querySelector('#certs'), {//对应的dom元素id(class也可以)
					allowTaint: true,//是否允许跨域图像渲染画布
					useCORS:true,//是否尝试使用 CORS 从服务器加载图像 解决图片跨域问题
					 dpi: dpi, // 设置截图的分辨率
					 scale: dpi/96, // 设置截图缩放比例，以适应pdf的dpi
					 imageQuality: 1 // 设置图片质量为最好
				}).then(function (canvas) {
					/* 提高倍数 */
					// canvas.width = canvas.width*2;
					// canvas.height = canvas.height*2;
					//生成的canvas实例
					var contentWidth = canvas.width;//所选元素宽度
					var contentHeight = canvas.height;//所选元素高度
					console.log(contentWidth,222)
					console.log(contentHeight,222)
					
					//一页pdf显示html页面生成的canvas高度;
					var pageHeight = contentWidth / 595.28 * 841.89;
					//未生成pdf的html页面高度
					var leftHeight = contentHeight;
					//pdf页面偏移
					var position = 0;
					//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
					var imgWidth = 595.28;
					var imgHeight = 595.28 / contentWidth * contentHeight;
					console.log(imgWidth,222)
					console.log(imgHeight,222)
					//return false;
					var pageData = canvas.toDataURL('image/jpeg', 1.0);//转成jpg格式
					var pdf = new JsPDF('', 'pt', 'a4',true);//生成pdf实例
					
					//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
					//当内容未超过pdf一页显示的范围，无需分页
					// if (leftHeight < pageHeight) {
					// 	pdf.addImage(pageData, 'PNG', 0, 0, imgWidth, imgHeight,'', 'FAST');
					// } else {
					// 	while (leftHeight > 0) {
					// 		pdf.addImage(pageData, 'PNG', 0, position, imgWidth, imgHeight,'', 'FAST')
					// 		leftHeight -= pageHeight;
					// 		position -= 841.89;
					// 		//避免添加空白页
					// 		if (leftHeight > 0) {
					// 			pdf.addPage();
					// 		}
					// 	}
					// }
					pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight,'', 'FAST');
					//保存
					pdf.save('证书.pdf');
					//可以吧生成的pdf转成其他格式 如 base64
					pdf.output('datauristring')//获取到base64 的pdf
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.asset_type{
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		width:507px;
		margin: 0 auto;
	}	
	.asset_nav{
		display: flex;
		width: 140px;
		cursor: pointer;
		align-items: center;
	}
	.asset_title{
		font-weight: 400;
		font-size: 22px;
		color: #979797;
	}
	
	.asset_icon{
		width: 22px;
		height: 22px;
		margin-right: 10px;
	}
	.active .asset_title{
		font-weight: 500;
		color: #F86D07;
	}
	
	.content_e{
		height: 132px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		font-size: 24px;
		color: #332C26;
	}
	.hy{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 670px;
		height: 241px;
		
	}
	.hy_title{
		background: -webkit-linear-gradient(#FFA536, #EF6F04);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: bold;
		font-size: 37px;
		 letter-spacing: 4px;
		 width: 100%;
		 text-align: center;
	}
	
	.form_query{
		width: 670px;
		height: 68px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-radius: 14px;
		border: 2px solid #f5be8d;
		background-color: #ffffff;
		cursor: pointer;
	}
	.ssxl{
		width: 112px;
		height: 32px;
		border-radius: 6px 6px 6px 6px;
		margin-left: 32px;
	}
	::v-deep .uni-select{
		width: 132px;
		height: 32px;
		background: #FFDBC2 !important;
		border: none;
	}
	::v-deep .uni-select__input-placeholder{
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
		line-height: 22px;
	}
	::v-deep .uni-select__input-text{
		text-align: center;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
		line-height: 22px;
	}
	::v-deep .uniui-clear{
		display: flex;
		align-items: center;
	}
	
	::v-deep .uniui-clear:before{
		font-size: 18px !important;
		color: #3D3D3D;
	}
	
	.hash{
		width:346px;
	}
	.btn-query{
		width: 125px;
		height: 68px;
		 background: linear-gradient(to bottom, #FFD161, #FF9336);
		border-radius: 0px 12px 12px 0px;
		text-align: center;
		line-height: 68px;
		font-weight: 400;
		font-size: 20px;
		color: #332C26;
	}
	.content-fx2{
		width: 100%;
		height: 428px;
		background-image: url('../static/img/page/hys.jpg');
		background-size: cover;
		position:relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.content{
	    width: 100%;
	    min-height: 1076px;
	    border-radius: 2px 2px 2px 2px;
		background: linear-gradient(to bottom, #fdf7f1, #faece1);
		overflow: hidden;
		background-image: url('../static/img/asset/a_bg.jpg');
		background-size: cover;
	}
	.content_bg{
		width: 1140px;
		min-height: 1073px;
		// box-shadow: 0px 0px 21px #BFA188;
		margin: 19px auto 21px;
		display: flex;
		justify-content: space-between;
	}
	.content_l{
		width: 505px;
		height: 1073px;
		display: flex;
		flex-direction: column;
	}
	.content1{
		display: flex;
		font-weight: 400;
		font-size: 22px;
		color: #332C26;
	}
	.content2s{
		width:100%;
		display: flex;
		justify-content: space-between;
	}
	.content2{
		display: flex;
		flex-direction: column;
	}
	.content22{
		display: flex;
		flex-direction: column;
		width:65px;
	}
	.content2_t{
		font-weight: 400;
		font-size: 14px;
		color: #7E7C7A;
		margin-bottom: 12px;
	}
	.content2_no{
		font-weight: 600;
		font-size: 16px;
		color: #433B34;
		// width: 270px;
		word-wrap: break-word; 
		margin-bottom: 30px;
	}
	.pass{
		width: 29px;
		height: 29px;
		margin-left: 16px;
	}
	
	.content_r{
		width: 562px;
		overflow: hidden;
		position: relative;
		margin-left: 30px;
		font-size: 16px;
		color: #262626;
		font-weight: bold;
		
	}
	.content_r_img{
		width: 562px;
	}
	.assets_name{
		position: absolute;
		top: 375px;
		left: 220px;
	}
	.assets{
		position: absolute;
		top: 407px;
		left: 234px;
		
	}
	.assets_time{
		position: absolute;
		top: 472px;
		left: 234px;
		
	}
	.assets_no{
		position: absolute;
		top: 504px;
		left: 234px;
		
	}
	.assets_hi{
		position: absolute;
		top: 536px;
		left: 234px;
		
	}
	.assets_hash{
		position: absolute;
		top: 563px;
		left: 234px;
		width: 486px;
		word-wrap: break-word; 
		font-size: 14px;
	}
	.assets_code{
		position: absolute;
		top: 640px;
		left: 596px;
		
	}
	.download{
		width: 130px;
		height: 40px;
		background: radial-gradient( 100% 0% at 0% 0%, #FF9336 0%, #FFB95D 73%);
		// background: linear-gradient(to right, #FFB95D, #FF9336);
		box-shadow: 4px 0px 8px 0px #9A6337;
		border-radius: 9px 9px 9px 9px;
		line-height: 40px;
		text-align: center;
		font-weight: 600;
		font-size: 16px;
		color: #332C26;
		cursor: pointer;
		margin:0 auto;
		margin-top: 40px;
	}
	.form_tips{
		width: 458px;
		height: 78px;
		font-family: "Source Han Sans CN", sans-serif, "Source Han Sans CN", sans-serif;
		font-weight: 400;
		font-size: 13px;
		color: #C59473;
		line-height: 24px;
		text-align: left;
		font-style: normal;
		text-transform: none;	
		margin-left:40px;
	}
	.content_timeline_line{
		width: 450px;
		height: 668px;
		background: #FFFFFF;
		box-shadow: 4px 0px 8px 0px rgb(230, 182, 142);
		border-radius: 12px 12px 12px 12px;
		padding: 40px;
		margin-top: 18px;
		overflow-y: auto; /* 允许垂直方向滚动 */
		overflow-x: hidden; /* 隐藏水平滚动条 */
		word-wrap: break-word; /* 长单词换行 */
	}
	.content_timeline_line::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
}
	.content_more{
		cursor: pointer;
		font-weight: 400;
		font-size: 14px;
		color: #979797;
		margin: 0 auto;
		text-align:center
	}
	.content_timeline_name{
		font-weight: bold;
		font-size: 16px;
		color: #979797;
		margin-bottom: 12px;
	}
	.content_timeline_content{
		font-weight: 400;
		font-size: 14px;
		color: #979797;
		margin-bottom: 6px;
	}
	//show2
	.content_l2s{
		width: 286px;
		height: 300px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 30px;
		margin-top: 300px;
	}
	.content12s{
		display: flex;
		font-weight: 400;
		font-size: 22px;
		color: #332C26;
	}
	.content22s{
		display: flex;
		flex-direction: column;
	}
	.content2_t2s{	
		font-weight: 400;
		font-size: 14px;
		color: #7E7C7A;
		margin-bottom: 18px;
	}
	.content2_no2s{
		font-weight: 400;
		font-size: 14px;
		color: #433B34;
		width: 270px;
		word-wrap: break-word; 
	}
	.pass2s{
		width: 29px;
		height: 29px;
		margin-left: 16px;
	}
	
	.content_r2s{
		width: 800px;
		height: 1128px;
		overflow: hidden;
		position: relative;
		margin-left: 30px;
		font-size: 16px;
		color: #262626;
		font-weight: bold;
		margin-top: -20px;
		background-image: url('../static/img/page/certbg.png');
		background-size: cover;
		margin-top: 100px;
	}
	.content_r_img2s{
		width: 800px;
	}
	.assets_name2s{
		position: absolute;
		top: 373px;
		left: 220px;
	}
	.assets2s{
		position: absolute;
		top: 404px;
		left: 230px;
		
	}
	.assets_time2s{
		position: absolute;
		top: 470px;
		left: 234px;
		
	}
	.assets_no2s{
		position: absolute;
		top: 504px;
		left: 234px;
		
	}
	.assets_hi2s{
		position: absolute;
		top: 536px;
		left: 234px;
		
	}
	.assets_hash2s{
		position: absolute;
		top: 560px;
		left: 234px;
		width: 486px;
		word-wrap: break-word; 
		font-size: 14px;
	}
	.assets_code2s{
		position: absolute;
		top: 640px;
		left: 596px;
		
	}
	.download2s{
		width: 130px;
		height: 40px;
		background: radial-gradient( 100% 0% at 0% 0%, #FF9336 0%, #FFB95D 73%);
		// background: linear-gradient(to right, #FFB95D, #FF9336);
		box-shadow: 4px 0px 8px 0px #9A6337;
		border-radius: 9px 9px 9px 9px;
		line-height: 40px;
		text-align: center;
		font-weight: 400;
		font-size: 16px;
		color: #332C26;
		cursor: pointer;
	}
</style>
