wit-uniapp/pages/Workorder/Tenantbill/companybill/companybill.vue

<template>
	<view class="">
		<view class="topname">
			<view class="topname1" @click="goback">
				<u-icon name="arrow-left" color="#000000" size="36"></u-icon>
			</view>
			<view class="topname2">
				{{ this.fatherparameter.name}}
			</view>
		</view>

		<view class="subsection">
			<u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
		</view>
		
		<!-- 列表 -->
		<!-- 账单明细 -->
		<view class="" v-show="cdshow==true">
			<!-- 日期选择器 -->
			<view class="topbilledit">
				<view class="changetime1">
					<picker mode="date" :value="dataForm.costCycle" fields="month" @change="dateChange">
						<view class="selestDate">{{dataForm.costCycle}}</view>
					</picker>
				</view>
				<view class="changetime2">
					<u-icon name="arrow-down-fill" color="#666666" size="20"></u-icon>
				</view>
			</view>
			
			<view class="nodata" v-if="nodata==true" >
				暂无数据
			</view>
			<view class="yesdata" v-if="nodata==false">
				<view class="onerecord">
					共有 <span>1</span>条记录
				</view>
				<view class="records">
					<view class="records1">
						待支付
					</view>
					<view class="Currentamount">
						物业费: <span>￥{{zddata.amount}}</span>
					</view>
					<view class="Currentamount">
						管理费:￥ {{zddata.glf}}
					</view>
					<view class="Currentamount">
						中央空调使用费:￥ {{zddata.ktf}}
					</view>
					<view class="Currentamount">
						电梯费:￥ {{zddata.dtf}}
					</view>
				</view>
			</view>			
		</view>
		<!-- 缴费记录 -->
		<view class="" v-show="cdshow==false">
			<view class="topbilledit" @click="typechange">
				<view class="changetime1">
					{{expensedata}}
				</view>
				<view class="changetime2">
					<u-icon name="arrow-down-fill" color="#666666" size="20"></u-icon>
				</view>
			</view>
		<!-- 	列表 -->
		<view class="nodata" v-if="jfnodata==true" >
			暂无数据
		</view>
			<view class="u-listdata"  v-if="jfnodata==false">
				<view style="padding:10rpx 0 0 30rpx">
					共有 <span style="color: red">{{totalnumber}}</span>条记录
				</view>
				
				<u-list  @scrolltolower="scrolltolower" :pagingEnabled='true'>
					<u-list-item v-for="(item, index) in indexList" :key="index">
						
						<view class="companylist" >
							<view class="settled" v-if="item.status==1">
								预存
							</view>
							<h3>{{item.tenantInfo.name}}</h3>
							<view class="Currentamount1">
								扣缴金额: <span>￥{{item.amount}}</span>
							</view>
							<view class="Currentamount1">
								账户余额: {{item.surplus}}
							</view>
							<view class="Currentamount1">
								租户电话:￥{{item.tenantInfo.tel}}
							</view>
							<view class="Currentamount1">
								操作人: {{item.creator}}
							</view>
							<view class="Currentamount1">
								扣缴时间: {{item.createDate}}
							</view>
						</view>
				
					</u-list-item>
				</u-list>
				
			</view>
		</view>

<view class="dibu" v-show="dibucaidan">
	<view class="yucun">
		<u-button type="success" text="预存" @click="prestore('预存')"></u-button>
	</view>
	<view class="yucun">
		<u-button type="primary" text="补助" @click="prestore('补助')"></u-button>
	</view>
	<!-- <view class="yucun">
		<u-button type="error" text="退费" @click="prestore('退费')"></u-button>
	</view> -->
</view>

		<u-picker :show="showtype" :columns="columnstype" keyName="dictLabel" @confirm="confirmtype" @cancel='canceltype'>	</u-picker>
			
			
			<u-popup :show="showpayjine" @close="closepay1" @open="openpay1" mode="bottom" :round="10" :closeable=true :closeOnClickOverlay=true>
			    <view class="paytall1">
			        <!-- <text>请选择支付方式</text> -->
			        <view class="hejitop">
			            {{prestorename}}
			        </view>
			        <view class="zhifufs">
			            <u--form
			                    labelWidth="100"
			                    labelPosition="left"
			                    :model="model1"
			                    :rules="rules"
			                    ref="uForm"
			            >
			                <u-form-item
			                        label="金额"
			                        prop="userInfo.amount"
			                        borderBottom
			                        ref="item1"
			                >
			                    <u--input
			                            v-model="model1.userInfo.amount"
			                            border="none"
			                    ></u--input>
			                </u-form-item>
			
			            </u--form>
			        </view>
			        <view style="margin: 0 30rpx;">
			            <u-button type="primary" text="确定" @click="Confirmationpaymentjine"></u-button>
			        </view>
			    </view>
			</u-popup>
		
	<view class="canys" v-if="zhifucanvas">
	    <h4>请用微信扫码二维码</h4>
	    <canvas  class="zhifucanvas" canvas-id='canvas'></canvas>
	   <view class="guanbi">
	       <u-button type="primary" :plain="true" text="关闭" @click="guanbi"></u-button>
	   </view>
	</view>
	
	<u-notify ref="uNotify" message="" ></u-notify>
	</view>
</template>

<script>
	var QRCode = require('@/utils/qrcode.js');
	const BaseApi = require("@/http/baseApi.js");
	
	export default {
		data() {
			return {
				  zhifucanvas: false,
				dibucaidan:true,
				prestorename:'',
				model1: {
				    userInfo: {
				        amount: '',
				    },
				},
				rules: {
				    'userInfo.amount': {
				        type: 'string',
				        required: true,
				        message: '请填写预存金额',
				        trigger: ['blur', 'change']
				    },
				},
				  showpayjine: false,
				totalnumber:0,
				jfnodata:false,
				showtype: false,
				cdshow: true,
				fatherparameter: {},
				expensedata:'全部',
				list: ['账单明细', '缴费记录', ],
				current: 0,
				dataForm: {
					tenantId: "",
					costCycle: "",
					type: "",
					page: 1,
					limit: 10,
				},
				indexList: [],
				payStatusList: [],
				zddata:{
					amount:'',
					dtf:'',
					ktf:'',
					glf:'',
				},
				nodata:true,
				pd:true,
				columnstype: [],
				jfpost: {
					tenantId: "",
					costCycle: "",
					type: "",
					page: 1,
					limit: 10,
				},
				
			}
		},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
		onLoad: function(options) {
			
			//option为object类型，会序列化上个页面传递的参数
			//	console.log(options); //打印出上个页面传递的参数。
			this.fatherparameter = JSON.parse(decodeURIComponent(options.para));
			
			let getDictDataList=uni.getStorageSync('getDictDataList');
 // console.log('111111111111111111',getDictDataList)

			for(let i=0;i<getDictDataList.length;i++){
				if(getDictDataList[i].dictType=='PayType'){
					this.columnstype=[getDictDataList[i].dataList]
				}


				if(getDictDataList[i].dictType=='PayStatus'){
					this.payStatusList=[getDictDataList[i].dataList]
				}	
			}


			this.dataForm.tenantId = this.fatherparameter.id;
			this.dataForm.costCycle = this.fatherparameter.cycle;
			this.dataForm.page = 1;
			
			
			this.jfpost.tenantId = this.fatherparameter.id;
			this.jfpost.costCycle = this.fatherparameter.cycle;
			this.jfpost.page = 1;
			
			this.getalldata();
		//	this.getPayStatusList();
			//this.getPayTypeList();
		},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},

		//监听页面隐藏
		onHide() {},
		//监听窗口尺寸变化
		onResize() {},
		//监听页面卸载
		onUnload() {},
		//监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {},


		methods: {
			
			prestore(e){
				//  console.log('111111111111111111',e)
				this.showpayjine=true;
				this.dibucaidan=false;
				this.prestorename=e;
			},
			Confirmationpaymentjine() {
			 
			    this.$refs.uForm.validate().then(res => {
			      //  uni.$u.toast('校验通过')
			      //  console.log('111111111111111111', this.model1.userInfo.amount)
			        this.showpayjine=false;
			        this.Predepositshow=false;
					this.dibucaidan=true;
			  if(this.prestorename=='预存'){
				  this.prestoredata(this.model1.userInfo.amount)
			  }else if(this.prestorename=='补助'){
				   this.subsidydata(this.model1.userInfo.amount)
			  }else if(this.prestorename=='退费'){
				   this.refunddata(this.model1.userInfo.amount)
			  }  
			      //   let postdata = {
			      //       totalFee: '0.01',
			      //       tenantId: Math.floor(this.dataForm.tenantId),
			      //       tradeType: 'NATIVE',
			      //       billIds: ''
			      //   }   				  
			    }).catch(errors => {
			        uni.$u.toast('校验失败')
			    })
			},
			//预存
			prestoredata(e){
				   this.zhifucanvas=true;
				//  console.log('11',e)
				//this.fatherparameter.id
				let postdata = {
				    totalFee: e,
				    tenantId: Math.floor(this.fatherparameter.id),
				    tradeType: 'NATIVE',
				    billIds: ''
				}
				uni.request({
				    url: BaseApi.BaseApi + '/pay/createOrder',
				    method: "POST",
				    data: postdata,
				    header: {
				        'content-type': 'application/x-www-form-urlencoded',
				        "token": uni.getStorageSync('tokendata'),
				    },
				    success: (res) => {
				        //	window.open(res.codeUrl, '_blank);
				        let qrcode = new QRCode('canvas', {
				            text: res.data.codeUrl, // weixin://wxpay/bizpayurl?pr=sZz****
				            width: 213,
				            height: 213,
				            colorDark: "black",
				            colorLight: "white",
				            correctLevel: QRCode.CorrectLevel.H,
				        });
				     //   10秒之后调取查询订单
				        let that = this;
				        setTimeout(function () {
							  that.zhifucanvas = false;
							that.zddata={};
							that.dataForm.page = 1;
				            that.getalldata();
							
							this.jfpost.page = 1;
							this.indexList=[];
							 this.getjfdata();
				        }, 15000);
				
				    }
				});
				
			},
			//补助
			subsidydata(e){
				  console.log('22',e)
				//this.zhifucanvas=true;
				//  console.log('11',e)
				//this.fatherparameter.id
				let postdata = {
				    totalFee: e,
				    tenantId: Math.floor(this.fatherparameter.id),
				    tradeType: 'NATIVE',
				    billIds: ''
				}
				uni.request({
				    url: BaseApi.BaseApi + '/pay/createOrder',
				    method: "POST",
				    data: postdata,
				    header: {
				        'content-type': 'application/x-www-form-urlencoded',
				        "token": uni.getStorageSync('tokendata'),
				    },
				    success: (res) => {
				   
				     	this.$refs.uNotify.success('补助成功')														    		
				    }
				});
				
				
			},
			//退费
			refunddata(e){
				  console.log('33',e)
				  let postdata = {
				      amount: e,
				      id:Math.floor(this.fatherparameter.id),
				      orderId: 0,
				      refundReason: ''
				  }
				  
				this.$api.post('/refundinfo',postdata)
				.then(res=>{
				if(res.data.code==0){
					this.$refs.uNotify.success('退费成功')										
				}else{
					this.$refs.uNotify.error(res.data.msg)										
				}
				
				})
					
			},
			
			closepay1() {
			    this.showpayjine = false
			    // console.log('close');
				this.dibucaidan=true;
			},
			openpay1() {
			    console.log('open');
			},
			goback() {
				uni.navigateBack({
					delta: 1
				});
			},
			guanbi(){
			    this.zhifucanvas=false;
			    this.Predepositshow=true;
			    this.getalldata();
			    this.getjfdata();
			},
			
			canceltype() {
				this.showtype = false;
			},
			confirmtype(e) {
				//console.log('111111111111111111', e.value[0])
				this.showtype = false;
				this.expensedata = e.value[0].dictLabel;
					if( e.value[0].dictLabel=='全部'){
						this.jfpost.type= '';
					}	else{
						this.jfpost.type= e.value[0].dictValue;
					}		
								
					
				this.indexList=[];
				this.jfpost.page = 1;
				 this.getjfdata();
			},
			typechange() {
				this.showtype = true;
			},
			sectionChange(index) {
				this.current = index;
				if (index == 0) {
					this.cdshow = true;
				
					this.dataForm.page = 1;
					this.getalldata();
				} else {
					this.cdshow = false;
					this.jfpost.page = 1;
					this.indexList=[];
					 this.getjfdata();
				}
			},
			scrolltolower() {
				if(this.pd){
					this.getjfdata();
				}else{
					 return
				}
			},
			getjfdata(){
				this.$api.get('/payrecord/page', this.jfpost)
					.then(res => {
						this.totalnumber=res.data.data.total;
						//  console.log('111111111111111111',res.data.data.list)
						if (res.data.data.list.length != 0) {
							this.indexList.push(...res.data.data.list);
								this.jfpost.page = this.jfpost.page + 1;
								this.pd=true;
								this.jfnodata=false;
						} else {
							uni.showToast({
								title:'暂无更多数据了',
								icon: 'none',
								duration: 1500
							})
							this.pd=false;
							//this.jfnodata=true
						}									
								
					})
			},
			
			
			dateChange(e) {
				this.myday = e.target.value;
				this.dataForm.costCycle = e.target.value;
				this.jfpost.costCycle = e.target.value;
				
				this.zddata={};
				this.dataForm.page = 1;
				this.getalldata();
			},
			getalldata() {
				this.$api.post('/billinfo/billDetail', this.dataForm)
					.then(res => {
						//console.log('111111111111111111', res.data)
					//	this.indexList = [];
					//	this.indexList = res.data.data;
					//	console.log('222222', this.indexList)
						this.zddata={};
					if(res.data.data.length==0){
						//  console.log('111111111111111111',)
					//	this.zddata={};
						  this.nodata=true;
					}else{
						 this.nodata=false; 
						this.zddata.amount=res.data.data[0].amount;
						this.zddata.glf=res.data.data[0].billLists[0].amount;
						this.zddata.ktf=res.data.data[0].billLists[1].amount;
						this.zddata.dtf=res.data.data[0].billLists[2].amount;
						
					}	
					})
			},

		}
	}
</script>

<style lang="scss">
	
	.dibu{
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
	}
	.yucun{
		width: 200rpx;

	}
	.nodata{
		text-align: center;
		padding-top: 400rpx;
		
	}
	.yesdata{
		
	}
	.companylist {
		margin: 20rpx 30rpx;
		background: #fff;
		height: 280rpx;
		border-radius: 10px;
		position: relative;
	
		h3 {
			height: 70rpx;
			line-height: 70rpx;
			padding-left: 30rpx;
		}
	}
	.settled {
		background-color: #09C700;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		font-size: 14rpx;
		position: absolute;
		top: 0px;
		right: 0px;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}
	.Currentamount {
		padding-left: 30rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #BCB3A7;
	
		span {
			color: #FA5555;
			padding-left: 9rpx;
		}
	}
	
	.Currentamount1 {
		padding-left: 30rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: #BCB3A7;
	
		span {
			color: #FA5555;
			padding-left: 9rpx;
		}
	}
	
	.records1{
		background-color: #FA5555;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		font-size: 14rpx;
		position: absolute;
		top: 0px;
		right: 0px;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}
	.records{
		display: flex;
		flex-direction: column;
		// justify-content: center;
		position: relative;
		width: 690rpx;
		height: 210rpx;
		background: #fff;
		margin: 0 auto;
		border-radius: 9rpx;
	}
	.onerecord{
		width: 750rpx;
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 30rpx;
		color: #999;
		span{
			color: red;
		}
	}
	.topbilledit {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		height: 60rpx;
	}

	.changetime2 {
		padding-left: 10rpx;
	}

	.subsection {
		padding: 30rpx;
		background: #fff;
		margin-top: 30rpx;
	}

	.topname {
		height: 44px;
		width: 750rpx;
		display: flex;
		align-items: center;
	}

	.topname1 {
		width: 50rpx;
		padding-left: 10rpx;
	}

	.topname2 {
		width: 700rpx;
		text-align: center;
		font-weight: bold;
	}
	
	    .Predeposit {
	        position: fixed;
	        bottom: 0;
	        left: 0;
	        right: 0;
	        width: 750rpx;
	    }
	
	    .nodata {
	        text-align: center;
	        padding-top: 400rpx;
	    }
	
	    .zhifucanvas {
	        width: 400rpx;
	        height: 400rpx;
	       margin: 0 auto;
	    }
	.canys{
	    width: 500rpx;
	    height: 600rpx;
	    position: fixed;
	    top: 30%;
	    left: 140rpx;
	    background: #e6e6e6;
	    h4{
	        width: 500rpx;
	        text-align: center;
	        height: 80rpx;
	        line-height: 80rpx;
	    }
	}
	.guanbi{
	    margin-top: 50rpx;
	}
	
	    .zhifufs {
	        padding: 30rpx;
	
	        ::v-deep .u-radio-label--right {
	            margin-top: 30rpx;
	        }
	
	        ::v-deep .u-radio__icon-wrap {
	            width: 40rpx !important;
	            height: 40rpx !important;
	        }
	
	        ::v-deep .u-radio__text {
	            font-size: 32rpx !important;
	        }
	    }
	
	    .hejitop {
	        width: 750rpx;
	        text-align: center;
	        font-weight: bold;
	        font-size: 40rpx;
	        margin-bottom: 30rpx;
	    }
	
	    .paytall {
	        width: 750rpx;
	        height: 400rpx;
	        background-color: #fff;
	    }
	
	    .paytall1 {
	        width: 750rpx;
	        height: 330rpx;
	        background-color: #fff;
	    }
	
	    .heji span {
	        color: #ED3A25;
	    }
	
	    .likezhifu {
	        margin-left: 20rpx;
	        margin-right: 30rpx;
	    }
	
	    .zhifu {
	        position: fixed;
	        right: 0 ;
	        bottom: 0 ;
	        left: 0 ;
	        height: 140rpx;
	        background-color: #fff;
	        display: flex;
	        align-items: center;
	        justify-content: space-between;
	    }
	
	    .zhifuleft {
	        margin-left: 30rpx;
	    }
	
	    .zhifuright {
	        display: flex;
	        align-items: center;
	        justify-content: flex-end;
	    }
	
	    .outstanding1 {
	        background-color: #09C700;
	        width: 100rpx;
	        height: 40rpx;
	        text-align: center;
	        line-height: 40rpx;
	        color: #fff;
	        font-size: 14 rpx;
	        position: absolute;
	        top: 0px;
	        right: 0px;
	        border-top-right-radius: 10rpx;
	        border-bottom-left-radius: 10rpx;
	    }
	
	    .outstanding2 {
	        background-color: #ED3A25;
	        width: 100rpx;
	        height: 40rpx;
	        text-align: center;
	        line-height: 40rpx;
	        color: #fff;
	        font-size: 14rpx;
	        position: absolute;
	        top: 0px;
	        right: 0px;
	        border-top-right-radius: 10rpx;
	        border-bottom-left-radius: 10rpx;
	    }
	
	    .outstanding3 {
	        background-color: #e6e6e6;
	        width: 100rpx;
	        height: 40rpx;
	        text-align: center;
	        line-height: 40rpx;
	        color: #fff;
	        font-size: 14 rpx;
	        position: absolute;
	        top: 0px;
	        right: 0px;
	        border-top-right-radius: 10rpx;
	        border-bottom-left-radius: 10rpx;
	    }
	
	    .userInfotenantName {
	        text-align: center;
	        margin-bottom: 10rpx;
	        font-size: 34rpx;
	    }
	
	    .topbilledit {
	        display: flex;
	        justify-content: space-around;
	        align-items: center;
	    }
	
	    .changetime1 {
	        padding-right: 10rpx;
	    }
	
	    .paisong {
	        display: flex;
	        flex-direction: column;
	        justify-content: center;
	        height: 220rpx;
	        background-color: #fff;
	        margin: 30rpx;
	        border-radius: 9rpx;
	        position: relative;
	
	        h3 {
	            height: 70rpx;
	            line-height: 70rpx;
	            padding-left: 30rpx;
	        }
	    }
	
	    .paisong2 {
	        display: flex;
	        flex-direction: column;
	        justify-content: center;
	        height: 330rpx;
	        background-color: #fff;
	        margin: 30rpx;
	        border-radius: 9rpx;
	        position: relative;
	
	        h3 {
	            height: 70rpx;
	            line-height: 70rpx;
	            padding-left: 30rpx;
	        }
	    }
	
	    .companylist {
	        margin: 20rpx 30rpx;
	        background: #fff;
	        height: 280rpx;
	        border-radius: 10px;
	        position: relative;
	
	        h3 {
	            height: 70rpx;
	            line-height: 70rpx;
	            padding-left: 30rpx;
	        }
	    }
	
	    .settled1 {
	        background-color: #09C700;
	        width: 100rpx;
	        height: 40rpx;
	        text-align: center;
	        line-height: 40rpx;
	        color: #fff;
	        font-size: 14rpx;
	        position: absolute;
	        top: 0px;
	        right: 0px;
	        border-top-right-radius: 10rpx;
	        border-bottom-left-radius: 10rpx;
	    }
	
	    .settled2 {
	        background-color: #30D3A2;
	        width: 100rpx;
	        height: 40rpx;
	        text-align: center;
	        line-height: 40rpx;
	        color: #fff;
	        font-size: 14 rpx;
	        position: absolute;
	        top: 0px;
	        right: 0px;
	        border-top-right-radius: 10rpx;
	        border-bottom-left-radius: 10rpx;
	    }
	
	    .settled3 {
	        background-color: #30D3A2;
	        width: 100rpx;
	        height: 40rpx;
	        text-align: center;
	        line-height: 40rpx;
	        color: #fff;
	        font-size: 14rpx;
	        position: absolute;
	        top: 0px;
	        right: 0px;
	        border-top-right-radius: 10rpx;
	        border-bottom-left-radius: 10rpx;
	    }
	
	
	    .Currentamount {
	        padding-left: 30rpx;
	        height: 50rpx;
	        line-height: 50rpx;
	        color: #BCB3A7;
	
	        span {
	            color: #FA5555;
	            padding-left: 9rpx;
	        }
	    }
	
	    .Currentamount1 {
	        padding-left: 30rpx;
	        height: 45rpx;
	        line-height: 45rpx;
	        color: #BCB3A7;
	
	        span {
	            color: #FA5555;
	            padding-left: 9rpx;
	        }
	    }
	
	    .records1 {
	        background-color: #FA5555;
	        width: 100rpx;
	        height: 40rpx;
	        text-align: center;
	        line-height: 40rpx;
	        color: #fff;
	        font-size: 14rpx;
	        position: absolute;
	        top: 0px;
	        right: 0px;
	        border-top-right-radius: 10rpx;
	        border-bottom-left-radius: 10rpx;
	    }
	
	    .records {
	        display: flex;
	        flex-direction: column;
	        // justify-content: center;
	        position: relative;
	        width: 690rpx;
	        height: 210rpx;
	        background: #fff;
	        margin: 0 auto;
	        border-radius: 9rpx;
	    }
	
	    .onerecord {
	        width: 750rpx;
	        height: 90rpx;
	        line-height: 90rpx;
	        padding-left: 30rpx;
	        color: #999;
	
	        span {
	            color: red;
	        }
	    }
	
	    .topbilledit {
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        background: #fff;
	        height: 60rpx;
	    }
	
	    .changetime2 {
	        padding-left: 10rpx;
	    }
	
	    .subsection {
	        padding: 30rpx;
	        background: #fff;
	    }
	
	    .topname {
	        height: 44px;
	        width: 750rpx;
	        display: flex;
	        align-items: center;
	    }
	
	    .topname1 {
	        width: 50rpx;
	        padding-left: 10rpx;
	    }
	
	    .topname2 {
	        width: 700rpx;
	        text-align: center;
	        font-weight: bold;
	    }
</style>