zheng_xie_ui/work/pages/report/details.vue

<template>
	<view class="detail">
		<view class="navbox">
			<uni-nav-bar  color="#ffffff" rightWidth="150rpx" title="履职详情" @clickLeft="getBack" @clickRight="getEditFn"  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
				<block slot="left">
					<view class="topl">
						<image :src="backimg" ></image>
					</view>
				</block>
				<block slot="right">
					<view class="topr" v-if="checkPermi(['member:info:edit'])">
						<image :src="editimg"></image>
						<view>修改</view>
					</view>
				</block>
			</uni-nav-bar>
		</view>
		<!-- 主体 -->
		<view class="deboxs">
			<view class="dbox">
				<view class="titbox mb14">
					<view class="tit flexc">
						<image :src="titimg"></image>
						<view>基本信息</view>
					</view>
				</view>
				<view class="header flexc">
					<view class="titinf flex1">
						<view class="txt"><text>委员姓名</text>{{memberInfo.name}}</view>
						<view class="txt"><text>身份证号</text>{{memberInfo.card}}</view>
						<view class="txt"><text>联系方式</text>{{memberInfo.phonenumber}}</view>
					</view>
					<image :src="baseUrl+memberInfo.avatar"></image>
				</view>
				<view class="titinf">
					<!-- <view class="txt"><text>党派</text>{{kaType(memberInfo.partyAffiliation,wybgslist)}}</view> -->
					<view class="txt"> <text>界别</text>{{kaType(memberInfo.boundary,jblist)}}</view>
					<view class="txt"><text>工作单位及职务</text>{{memberInfo.unit}}</view>
					<view class="txt"><text>乡镇(经开区)委员工作室</text>{{kaType(memberInfo.studio,wybgslist)}}</view>
				</view>
			</view>
			<view class="dbox">
				<view class="titbox mb27 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>会议参与情况</view>
					</view>
					<view class="tips">请左右滑动查看详细信息</view>
				</view>
				<view class="mb10">
					<block v-if="zxConferenceList&&zxConferenceList.length">
						<zb-table
						  :show-header="true"
						  :columns="hycolumns"
						  :headbgColor="headbgColor"
						  :stripe="false"
						  :fit="true"
						  :parameter="parameter"
						  @rowClick="getDetailhy"
						  @toggleRowSelection="toggleRowSelection"
						  @toggleAllSelection="toggleAllSelection"
						  :border="border"
						  :borderr="borderr"
						  @detail="getDetailhy"
						  :data="zxConferenceList"></zb-table>
					</block>
					<block v-else>
						<no-data padtop="0" padbottom="20"></no-data>
					</block>
				</view>
			</view>
			<view class="dbox">
				<view class="titbox mb27 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>提案方面</view>
					</view>
					<view class="tips">请左右滑动查看详细信息</view>
				</view>
				<view class="mb10">
					<block v-if="proposalInfoList&&proposalInfoList.length">
					<zb-table
					  :show-header="true"
					  :columns="columns"
					  :headbgColor="headbgColor"
					  :stripe="false"
					  :fit="true"
					  :parameter="parameter"
					  @rowClick="getDetailta"
					  @toggleRowSelection="toggleRowSelection"
					  @toggleAllSelection="toggleAllSelection"
					  :border="border"
					  :borderr="borderr"
					  @detail="getDetailta"
					  :data="proposalInfoList"></zb-table>	
					</block>
					<block v-else>
						<no-data padtop="0" padbottom="20"></no-data>
					</block>
				</view>
			</view>
			<view class="dbox">
				<view class="titbox mb27 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>社情民意方面</view>
					</view>
					<view class="tips">请左右滑动查看详细信息</view>
				</view>
				<view class="mb10">
					<block v-if="sqmyInfoList&&sqmyInfoList.length">
						<zb-table
						  :show-header="true"
						  :columns="zxcolumns"
						  :headbgColor="headbgColor"
						  :stripe="false"
						  :fit="true"
						  :parameter="parameter"
						  @rowClick="getDetailsq"
						  @toggleRowSelection="toggleRowSelection"
						  @toggleAllSelection="toggleAllSelection"
						  :border="border"
						  :borderr="borderr"
						  @detail="getDetailsq"
						  :data="sqmyInfoList"></zb-table>
					</block>
					<block v-else>
						<no-data padtop="0" padbottom="20"></no-data>
					</block>
				</view>
			</view>
			<view class="dbox">
				<view class="titbox mb27 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>招商线索</view>
					</view>
					<view class="tips">请左右滑动查看详细信息</view>
				</view>
				<view class="mb10">
					<block v-if="zxInvestmentList&&zxInvestmentList.length">
						<zb-table
						  :show-header="true"
						  :columns="zsxscolumns"
						  :headbgColor="headbgColor"
						  :stripe="false"
						  :fit="true"
						  :parameter="parameter"
						  @rowClick="getDetailzs"
						  @toggleRowSelection="toggleRowSelection"
						  @toggleAllSelection="toggleAllSelection"
						  :border="border"
						  :borderr="borderr"
						  @detail="getDetailzs"
						  :data="zxInvestmentList"></zb-table>
					</block>
					<block v-else>
						<no-data padtop="0" padbottom="20"></no-data>
					</block>
				</view>
			</view>
			<view class="dbox">
				<view class="titbox mb27 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>视察调研活动</view>
					</view>
					<view class="tips">请左右滑动查看详细信息</view>
				</view>
				<!-- 按照活动类型分开 -->
				<view class="mb10">
					<block v-if="activityScdyList&&activityScdyList.length">
					<zb-table
					  :show-header="true"
					  :columns="hdcolumns"
					  :headbgColor="headbgColor"
					  :stripe="false"
					  :fit="true"
					  :parameter="parameter"
					  @rowClick="getDetailhd"
					  @toggleRowSelection="toggleRowSelection"
					  @toggleAllSelection="toggleAllSelection"
					  :border="border"
					  :borderr="borderr"
					  @detail="getDetailhd"
					  :data="activityScdyList"></zb-table>
					</block>
					<block v-else>
						<no-data padtop="0" padbottom="20"></no-data>
					</block>
				</view>
			</view>
			<view class="dbox">
				<view class="titbox mb27 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>政协委员工作室活动</view>
					</view>
					<view class="tips">请左右滑动查看详细信息</view>
				</view>
				<view class="mb10">
					<block v-if="activityLlzList&&activityLlzList.length">
					<zb-table
					  :show-header="true"
					  :columns="hdcolumns"
					  :headbgColor="headbgColor"
					  :stripe="false"
					  :fit="true"
					  :parameter="parameter"
					  @rowClick="getDetailhd"
					  @toggleRowSelection="toggleRowSelection"
					  @toggleAllSelection="toggleAllSelection"
					  :border="border"
					  :borderr="borderr"
					  @detail="getDetailhd"
					  :data="activityLlzList"></zb-table>
					</block>
					<block v-else>
						<no-data padtop="0" padbottom="20"></no-data>
					</block>
				</view>
			</view>
			<view class="dbox">
				<view class="titbox mb27 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>界别活动</view>
					</view>
					<view class="tips">请左右滑动查看详细信息</view>
				</view>
				<view class="mb10">
					<block v-if="activityJbList&&activityJbList.length">
					<zb-table
					  :show-header="true"
					  :columns="hdcolumns"
					  :headbgColor="headbgColor"
					  :stripe="false"
					  :fit="true"
					  :parameter="parameter"
					  @rowClick="getDetailhd"
					  @toggleRowSelection="toggleRowSelection"
					  @toggleAllSelection="toggleAllSelection"
					  :border="border"
					  :borderr="borderr"
					  @detail="getDetailhd"
					  :data="activityJbList"></zb-table>
					</block>
					<block v-else>
						<no-data padtop="0" padbottom="20"></no-data>
					</block>
				</view>
			</view>
			<view class="dbox">
				<view class="titbox mb27 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>为群众办实事活动</view>
					</view>
					<view class="tips">请左右滑动查看详细信息</view>
				</view>
				<view class="mb10">
					<block v-if="activityBssList&&activityBssList.length">
					<zb-table
					  :show-header="true"
					  :columns="hdcolumns"
					  :headbgColor="headbgColor"
					  :stripe="false"
					  :fit="true"
					  :parameter="parameter"
					  @rowClick="getDetailhd"
					  @toggleRowSelection="toggleRowSelection"
					  @toggleAllSelection="toggleAllSelection"
					  :border="border"
					  :borderr="borderr"
					  @detail="getDetailhd"
					  :data="activityBssList"></zb-table>
					</block>
					<block v-else>
						<no-data padtop="0" padbottom="20"></no-data>
					</block>
				</view>
			</view>
<!-- 			<view class="dbox">
				<view class="titbox mb27 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>活动参与情况</view>
					</view>
					<view class="tips">请左右滑动查看详细信息</view>
				</view>
				<view class="mb10">
					<block v-if="zxActivityList&&zxActivityList.length">
					<zb-table
					  :show-header="true"
					  :columns="hdcolumns"
					  :headbgColor="headbgColor"
					  :stripe="false"
					  :fit="true"
					  :parameter="parameter"
					  @rowClick="rowClick"
					  @toggleRowSelection="toggleRowSelection"
					  @toggleAllSelection="toggleAllSelection"
					  :border="border"
					  :borderr="borderr"
					  @detail="getDetails"
					  :data="zxActivityList"></zb-table>
					</block>
					<block v-else>
						<no-data padtop="0" padbottom="20"></no-data>
					</block>
				</view>
			</view> -->
			<!-- <view class="dbox">
				<view class="titbox mb27 flexc">
					<view class="tit flexc flex1">
						<image :src="titimg"></image>
						<view>大会发言情况</view>
					</view>
					<view class="tips">请左右滑动查看详细信息</view>
				</view>
				<view class="mb10">
					<block v-if="zxSpeakList&&zxSpeakList.length">
					<zb-table
					  :show-header="true"
					  :columns="fycolumns"
					  :headbgColor="headbgColor"
					  :stripe="false"
					  :fit="true"
					  :parameter="parameter"
					  @rowClick="rowClick"
					  @toggleRowSelection="toggleRowSelection"
					  @toggleAllSelection="toggleAllSelection"
					  :border="border"
					  :borderr="borderr"
					  @detail="getDetails"
					  :data="zxSpeakList"></zb-table>
					</block>
					<block v-else>
						<no-data padtop="0" padbottom="20"></no-data>
					</block>
				</view>
			</view> -->
			<view class="fbtns" v-if="checkPermi(['member:info:MemberReport'])">
				<view class="btn btn1" @click="getReportFn">生成报告</view>
				<!-- <view class="btn btn2" @click="getScfkFn">审核</view> -->
			</view>
			
		</view>
		<pop-up :type='ptype' @getClose="getClose"></pop-up>
	</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import config from '@/config'
	const baseUrl = config.baseUrl
	import noData from "@/components/nodata/nodata.vue"
	import zbTable from "@/work/components/zb-table/zb-tables.vue"
	import popUp from "@/work/components/popup/popup.vue"
	import { selectValue } from '@/utils/common.js';
	import {getInfojopDetai} from "@/api/mine/report.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
	export default{
		components:{popUp,zbTable,noData},
		data(){
			return{
				backimg:require("@/work/static/images/back.png"),
				editimg:require("@/work/static/images/edit.png"),
				fjimg:require("@/work/static/images/fjimg.png"),
				filelist:[], 
				stepList:[],
				backgroundColor:"#1D64E2",
				titimg:require("@/work/static/images/titbg.png"),
				columns: [
				    { name: 'proposalNumber', label: '案号',width:230,align:'center', },
				    { name: 'title', label: '题目',align:'center'},
					{ name: 'categoryName', label: '提案类别',align:'center',},
				    { name: 'isRecord', label: '是否立案',align:'center',type:"format",key:"sflalist"}, 
				    { name: 'proposalProgress', label: '提案进度',align:'center',type:"format",key:"tajdlist"},
				],
				zxcolumns: [
				    { name: 'sqmyNumber', label: '编号',width:230,align:'center', },
				    { name: 'title', label: '信息标题 ',width:230,align:'center', },
				    { name: 'topicType', label: '主题类型',align:'center',type:"format",key:"ztlxlist"},
					{ name: 'isRecord', label: '是否采用',align:'center',type:"format",key:"sflalist"},
					// { name: 'sqmyProgress', label: '社情进度',align:'center',type:"format",key:"sqjdlist"},
				],
				zsxscolumns:[
					{ name: 'clueName', label: '项目线索名称',width:230,align:'center', },
					{ name: 'investmentAmount', label: '拟投资额 ',width:230,align:'center', },
					{ name: 'contactsName', label: '联系人',align:'center',},
					{ name: 'contactsPhone', label: '联系方式',align:'center',},
					{ name: 'type', label: '状态',align:'center',type:"format",key:"xsztlist"},
					{ name: 'publishTime', label: '录入时间',align:'center',},
				],
				hycolumns:[{ name: 'conferenceTitle', label: '会议名称 ',width:230,align:'center', },
					{ name: 'conferenceType', type:"format", label: '会议类型',align:'center',key:"hylxlist"},
					{ name: 'conferenceDate', label: '会议日期',align:'center'},
					{ name: 'conferenceTime', label: '会议时间',align:'center'},
					{ name: 'conferenceAddress', label: '会议地点',align:'center'},],
				hdcolumns: [
				    { name: 'activityTitle', label: '活动名称 ',width:230,align:'center', },
					// { name: 'activityType', type:"format", label: '活动类型',align:'center',key:"hdlxlist"},
				    { name: 'activityDate', label: '活动日期',align:'center'},
				    { name: 'activityTime', label: '活动时间',align:'center'},
				    { name: 'activityAddress', label: '活动地点',align:'center'},
				],
				fycolumns: [
				    { name: 'speakTitle', label: '发言题目 ',width:230,align:'center', },
				    { name: 'conferenceTitle', label: '关联会议',align:'center'},
				    { name: 'inputName', label: '录入人',align:'center'},
				    { name: 'speakType', label: '发言类型',align:'center',type:"format",key:"fylxlist"},
				    { name: 'publishTime', label: '录入时间',align:'center'},
				],
				parameter:{
					hdlxlist:[],
					hylxlist:[],
					ztlxlist:[],
					fylxlist:[],
					tajdlist:[],
					sqjdlist:[],
					xsztlist:[],
					sflalist:[ {label: '是',value:'0'},{label: '否',value:'0'},]
				},
				border:true,
				borderr:false,
				headbgColor:'#F1F1F1',
				tableData:[],
				dwdetList:[],
				dwVal:0,
				ptype:'',
				datainfo:{},
				matterList:[],
				memberInfo:{},
				proposalInfoList:{},
				sqmyInfoList:{},
				zxConferenceList:{},
				zxActivityList:{},
				zxSpeakList:{},
				jblist:[],
				wybgslist:[],
				zxInvestmentList:[],//招商集合
				activityScdyList:[],//视察调研集合
				activityLlzList:[],//联络组活动集合
				activityJbList:[],//界别集合
				activityBssList:[],//为群众办实事集合
			}
		},
		onUnload(){
			uni.$off('refreshdetail')
		},
		onLoad(e) {
			this.id=e.id;
			this.baseUrl=baseUrl;
			this.getDetail()
			this.init()
			uni.$on('refreshdetail', (e) => {
				this.getDetail()
			})
		},
		mounted() {
		},
		methods:{
			checkPermi, checkRole,
			getBack(){
				uni.navigateBack({
					delta:1
				})
			},
			kaType(ite,list){
				return selectValue(list, ite);
			},
			typeFormat(ite,list){
				return selectValue(list, ite);
			},
			getDetailhy(e){
				var data=e.conferenceId
				this.$tab.navigateTo('/work/pages/meeting/details?id='+data)
			},
			getDetailta(e){
				var data=e.proposalId
				this.$tab.navigateTo('/work/pages/case/details?id='+data)
			},
			getDetailsq(e){
				var data=e.sqmyId
				this.$tab.navigateTo('/work/pages/sqmyInfo/details?id='+data)
			},
			getDetailzs(e){
				var data=e.investmentId
				this.$tab.navigateTo('/work/pages/meeting/zsyzdetails?id='+data)
			},
			getDetailhd(e){
				var data=e.activityId
				this.$tab.navigateTo('/work/pages/meeting/activedetails?id='+data)
			},
			getDetails(e){
				console.log(e,123)
			},
			rowClick(e){
				console.log(e,123)
			},
			init(){
				// 界别
				getDictionaryFn('circles').then(res=>{
					if(res.code==200&&res.data.length){
						this.jblist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value:v.dictValue
							}
						})
					}
				})
				// 委员办公室
				getDictionaryFn('member_studio').then(res=>{
					if(res.code==200&&res.data.length){
						this.wybgslist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
				// 提案进度
				getDictionaryFn('proposal_progress').then(res=>{
					if(res.code==200&&res.data.length){
						this.parameter.tajdlist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
				// 社情详情
				getDictionaryFn('sqmy_jd').then(res=>{
					if(res.code==200&&res.data.length){
						this.parameter.sqjdlist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
				// 线索状态
				getDictionaryFn('investment_type').then(res=>{
					if(res.code==200&&res.data.length){
						this.parameter.xsztlist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value:v.dictValue
							}
						})
					}
				})
				// 主题类型
				getDictionaryFn('sqmy_topic_type').then(res=>{
					if(res.code==200&&res.data.length){
						this.parameter.ztlxlist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value:v.dictValue
							}
						})
					}
				})
				// 发言类型
				getDictionaryFn('speak_type').then(res=>{
					if(res.code==200&&res.data.length){
						this.parameter.fylxlist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value:v.dictValue
							}
						})
					}
				})
				//会议类型
				getDictionaryFn('conference_type').then(res=>{
					if(res.code==200&&res.data.length){
						this.parameter.hylxlist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value:v.dictValue
							}
						})
					}
				})
				// 活动类型
				getDictionaryFn('activity_type').then(res=>{
					if(res.code==200&&res.data.length){
						this.parameter.hdlxlist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value:v.dictValue
							}
						})
					}
				})
			},
			getReportFn(){
				this.$tab.navigateTo('/work/pages/report/report?id='+this.memberInfo.userId)
			},
			getEditFn(){
				if(checkPermi(['member:info:edit'])){
					this.$tab.navigateTo('/work/pages/report/mineinfo?type=edit&id='+this.id)
				}
			},
			getClose(){
				this.ptype=""
			},
			getScfkFn(){
				this.ptype="scfk"
			},
			getDelFn(){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							getCasDelFn(this.id).then(res=>{
								if(res.code==200){
									that.$toast('删除成功')
									uni.$emit("refreshlist")
									setTimeout(function(){
										uni.navigateBack({
											delta: 1 //返回层数，2则上上页
										});
									},1200)
								}
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			getDetail(){
				var parms={
					memberId:this.id,
				}
				getInfojopDetai(parms).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						this.memberInfo=res.data.memberInfo;
						this.proposalInfoList=res.data.proposalInfoList;
						this.sqmyInfoList=res.data.sqmyInfoList;
						this.zxInvestmentList=res.data.zxInvestmentList;
						this.activityScdyList=res.data.activityScdyList;
						this.activityLlzList=res.data.activityLlzList;
						this.activityJbList=res.data.activityJbList;
						this.activityBssList=res.data.activityBssList;
						this.zxConferenceList=res.data.zxConferenceList;
						// this.zxActivityList=res.data.zxActivityList;
						// this.zxSpeakList=res.data.zxSpeakList;
						// if(res.data.zxFjList&&res.data.zxFjList.length){
						// 	this.filelist=JSON.parse(JSON.stringify(res.data.zxFjList))
						// }
						// this.dwdetList=res.data.proposalUnitReplyList;
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.detail{display: flex;flex-direction: column;height: 100vh;}
.navbox{background-color: $com-cd3;flex:0 0 auto;
	.topl{width: 60rpx;height: 60rpx;display: flex;align-items: center;justify-content: center;
		image{width: 40rpx;height: 30rpx;}
	}
	.topr{display: flex;align-items: center;
		image{width: 26rpx;height: 26rpx;margin-right: 12rpx;}
		view{font-weight: 500;font-size: 26rpx;color: #FFFFFF;}
	}
}
.deboxs{flex:1;overflow: auto;padding-bottom: 30rpx;padding-top: 24rpx;
	.dbox{background: #FFFFFF;border-radius: 10rpx;margin: 0 24rpx 24rpx;padding: 36rpx 24rpx 24rpx;
		.titbox{
			.tit{
				image{width: 32rpx;height: 18rpx;margin-right: 10rpx;}
				view{font-weight: bold;font-size: 32rpx;color: #222327;}
			}
			.tips{font-weight: 500;font-size: 26rpx;color: #FF0000;}
		}
		.titinf{display: flex;flex-wrap: wrap;
			&.nact{height: 0;overflow: hidden;}
			&.act{height: auto;}
			.txt{font-weight: 500;font-size: 26rpx;margin-bottom: 20rpx;color: #222327;display: flex;align-items: flex-start;flex:0 1 auto;min-width: 50%;
				&.nact{height: 200rpx;overflow: hidden;}
				&.act{height: auto;}
				text{color: #AAAAAA;min-width: 104rpx;text-align-last: justify;flex: 0 0 auto;margin-right: 20rpx;
					&.w65{width: 130rpx;}
				}
				view{text-indent: 2rem;}
			}
			
		}
		.header{
			image{width: 166rpx;height: 200rpx;flex: 0 0 auto;margin-top: -66rpx;}
			.txt{min-width: 100%;}
		}
		
		.bortop{border-top: 2rpx dashed #C1C1C1;margin-bottom: 32rpx;margin-top: 14rpx;width: 100%;}
		// 附件
		.fjlists {display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 12rpx;
			// image{margin-right: 18rpx;flex: 0 0 auto;}
			.imgl{width: 40rpx;height: 40rpx;display: flex;align-items: center;justify-content: center;margin-right: 6rpx;flex: 0 0 auto;
				image{width: 26rpx;height: 24rpx;}
				}
			.tit{font-size: 26rpx;color: #343434;font-weight: 500;margin-top: 4rpx;flex:1;}
			.fjlook{font-weight: 500;font-size: 26rpx;color: #1D64E2;flex: 0 0 auto;margin-left: 20rpx;margin-top: 4rpx;}
		}
	}
	
}
// 按钮
	.fbtns{display: flex;align-items: center;justify-content: space-between;padding: 54rpx 12rpx 34rpx;
		.btn{height: 80rpx;font-weight: bold;font-size: 30rpx;box-sizing: border-box;border-radius: 40rpx;display: flex;align-items: center;
		justify-content: center;margin:0 12rpx;flex:1;
			&.btn1{border: 2rpx solid #1D64E2;background: #ffffff;color: #1D64E2;}
			&.btn2{background: #1D64E2;color: #ffffff;}
			&.btn3{border: 2rpx solid #FF0000;background: #ffffff;color: #FF0000;}
		}
	}
</style>