epmet-work-pc-chengyang/src/views/dataBoard/cpts/resi-details.vue

<template>
	<popup title="居民详情" @close="handleClose">
		<template v-slot:cnt>
			<div class="m-info">
				<div class="subtitle">
					<i class="i-chunk"></i>
					<span>基本信息</span>
					<i class="i-line"></i>
				</div>
				<div class="row">
					<div class="item">
						<div class="field">所属网格：</div>
						<div class="value">
							<span v-if="info.community">{{
								info.community
							}}</span>
							<span v-if="info.grid"> - {{ info.grid }}</span>
						</div>
					</div>
					<div class="item">
						<div class="field">所属房屋：</div>
						<div class="value">
							<span v-if="info.village">{{ info.village }}</span>
							<span v-if="info.building">
								- {{ info.building }}</span
							>
							<span v-if="info.unit"> - {{ info.unit }}</span>
							<span v-if="info.room"> - {{ info.room }}</span>
						</div>
					</div>
					<div class="item">
						<div class="field">本地户籍：</div>
						<div class="value">{{ info.census_type }}</div>
					</div>
				</div>
				<div class="row">
					<div class="item">
						<div class="field">居民姓名：</div>
						<div class="value">{{ info.name }}</div>
					</div>
					<div class="item">
						<div class="field">出生日期：</div>
						<div class="value">{{ info.birthday }}</div>
					</div>
					<div class="item">
						<div class="field">性别：</div>
						<div class="value">{{ info.gender }}</div>
					</div>
					<div class="item">
						<div class="field">民族：</div>
						<div class="value">{{ info.ethnic }}</div>
					</div>
					<div class="item">
						<div class="field">联系电话：</div>
						<div class="value">{{ info.telephone }}</div>
					</div>
					<div class="item">
						<div class="field">证件号：</div>
						<div class="value">{{ info.idcard }}</div>
					</div>
					<div class="item">
						<div class="field">备注：</div>
						<div class="value">{{ info.resident_remark }}</div>
					</div>
				</div>

				<div class="subtitle">
					<i class="i-chunk"></i>
					<span>分类信息</span>
					<i class="i-line"></i>
				</div>

				<div class="row">
					<div class="item">
						<div class="field">居民分类：</div>
						<div class="value">
							<div class="u-categorys">
								<span v-if="info.crowd">党员</span>
								<span v-if="info.mlsp">低保人员</span>
								<span v-if="info.srs">保障房人员</span>
								<span v-if="info.unemployed">失业人员</span>
								<span v-if="info.woca">育龄妇女</span>
								<span v-if="info.exs">退役军人</span>
								<span v-if="info.ufs">统战人员</span>
								<span v-if="info.petitioner">信访人员</span>
								<span v-if="info.volunteer">志愿者</span>
								<span v-if="info.in_person">特扶人员</span>
								<span v-if="info.tenant">租户</span>
								<span v-if="info.float_popu">流动人口</span>
								<span v-if="info.special_popu">特殊人群</span>
								<span v-if="info.aaaa">独居老人</span>
								<span v-if="info.empty_nest">空巢老人</span>
								<span v-if="info.disability">失能老人</span>
								<span v-if="info.dementia">失智老人</span>
								<span v-if="info.adisability">残疾</span>
								<span v-if="info.ser_ill">大病</span>
								<span v-if="info.ncd">慢病</span>
							</div>
						</div>
					</div>
				</div>

				<div class="subtitle">
					<i class="i-chunk"></i>
					<span>其他信息</span>
					<i class="i-line"></i>
				</div>

				<div class="m-tabs">
					<div
						class="tab-btn"
						@click="subStartTabIndex"
						v-if="tabList.length > 7"
					>
						<img
							src="@/assets/img/shuju/people/arrow-double-left.png"
						/>
					</div>
					<div
						v-show="
							index >= startTabIndex && index < startTabIndex + 7
						"
						class="tab"
						:class="
							currentTabIndex % tabList.length == index
								? 'z-on'
								: ''
						"
						:key="'tab' + index"
						@click="currentTabIndex = index"
						v-for="(item, index) in tabList"
					>
						{{ item }}
					</div>
					<div
						class="tab-btn"
						@click="addStartTabIndex"
						v-if="tabList.length > 7"
					>
						<img
							src="@/assets/img/shuju/people/arrow-double-right.png"
						/>
					</div>
				</div>

				<div v-if="currentTab == '教育信息'">
					<div class="row">
						<div class="item">
							<div class="field">文化程度：</div>
							<div class="value">{{ info.education }}</div>
						</div>
						<div class="item">
							<div class="field">备注：</div>
							<div class="value">{{ info.education_remark }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '兴趣爱好'">
					<div class="row">
						<div class="item">
							<div class="field">兴趣：</div>
							<div class="value">{{ info.hobby }}</div>
						</div>
						<div class="item">
							<div class="field">备注：</div>
							<div class="value">{{ info.hobby_remark }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '宗教'">
					<div class="row">
						<div class="item">
							<div class="field">宗教：</div>
							<div class="value">{{ info.belief }}</div>
						</div>
						<div class="item">
							<div class="field">备注：</div>
							<div class="value">{{ info.belief_remark }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '健康'">
					<div class="row">
						<div class="item">
							<div class="field">残疾类别：</div>
							<div class="value">{{ info.disable_type }}</div>
						</div>
						<div class="item">
							<div class="field">残疾等级：</div>
							<div class="value">{{ info.disable_degree }}</div>
						</div>
						<div class="item">
							<div class="field">残疾证号：</div>
							<div class="value">{{ info.disable_idcard }}</div>
						</div>
						<div class="item">
							<div class="field">残疾说明：</div>
							<div class="value">{{ info.disable_remark }}</div>
						</div>
						<div class="item">
							<div class="field">监护人：</div>
							<div class="value">{{ info.guardian }}</div>
						</div>
						<div class="item">
							<div class="field">劳动能力：</div>
							<div class="value">{{ info.skill }}</div>
						</div>
						<div class="item">
							<div class="field">非义务教育阶段助学：</div>
							<div class="value">
								{{ info.voluntaryEducationFlag }}
							</div>
						</div>
						<div class="item">
							<div class="field">所患大病：</div>
							<div class="value">
								{{ info.voluntaryEducationFlag }}
							</div>
						</div>
						<div class="item">
							<div class="field">大病患病时间：</div>
							<div class="value">{{ info.illnessCode }}</div>
						</div>
						<div class="item">
							<div class="field">所患慢性病：</div>
							<div class="value">
								{{ info.chronicDiseaseCode }}
							</div>
						</div>
						<div class="item">
							<div class="field">慢病患病时间：</div>
							<div class="value">
								{{ info.chronicDiseaseTime }}
							</div>
						</div>
						<div class="item">
							<div class="field">是否参保：</div>
							<div class="value">
								{{ info.chronicDiseaseTime }}
							</div>
						</div>
						<div class="item">
							<div class="field">自付金额：</div>
							<div class="value">{{ info.selfPayAmount }}</div>
						</div>
						<div class="item">
							<div class="field">救助金额：</div>
							<div class="value">{{ info.selfPayAmount }}</div>
						</div>
						<div class="item">
							<div class="field">救助时间：</div>
							<div class="value">
								{{ info.deliveranceAmount }}
							</div>
						</div>
						<div class="item">
							<div class="field">享受救助明细序号：</div>
							<div class="value">{{ info.deliveranceTime }}</div>
						</div>
						<div class="item">
							<div class="field">备注：</div>
							<div class="value">{{ info.deliveranceNum }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '工作'">
					<div class="row">
						<div class="item">
							<div class="field">工作单位：</div>
							<div class="value">{{ info.workunit }}</div>
						</div>
						<div class="item">
							<div class="field">职业：</div>
							<div class="value">{{ info.career }}</div>
						</div>
						<div class="item">
							<div class="field">离退休时间：</div>
							<div class="value">{{ info.retire_date }}</div>
						</div>
						<div class="item">
							<div class="field">备注：</div>
							<div class="value">{{ info.retire_remark }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '经济状况'">
					<div class="row">
						<div class="item">
							<div class="field">退休金额：</div>
							<div class="value">{{ info.retire_income }}</div>
						</div>
						<div class="item">
							<div class="field">月收入：</div>
							<div class="value">{{ info.income }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '居住'">
					<div class="row">
						<div class="item">
							<div class="field">籍贯：</div>
							<div class="value">{{ info.native }}</div>
						</div>
						<div class="item">
							<div class="field">户籍所在地：</div>
							<div class="value">{{ info.native_place }}</div>
						</div>
						<div class="item">
							<div class="field">现居住地：</div>
							<div class="value">
								{{ info.residence_current }}
							</div>
						</div>
						<div class="item">
							<div class="field">人户状况：</div>
							<div class="value">{{ info.household }}</div>
						</div>
						<div class="item">
							<div class="field">备注：</div>
							<div class="value">{{ info.household_remark }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '家庭'">
					<div class="row">
						<div class="item">
							<div class="field">与户主关系：</div>
							<div class="value">{{ info.holdingrel }}</div>
						</div>
						<div class="item">
							<div class="field">居住情况：</div>
							<div class="value">{{ info.residence }}</div>
						</div>
						<div class="item">
							<div class="field">婚姻状况：</div>
							<div class="value">{{ info.marital }}</div>
						</div>
						<div class="item">
							<div class="field">配偶状况：</div>
							<div class="value">{{ info.spouse }}</div>
						</div>
						<div class="item">
							<div class="field">有无赡养人：</div>
							<div class="value">{{ info.supporters }}</div>
						</div>
						<div class="item">
							<div class="field">与赡养人关系：</div>
							<div class="value">
								{{ info.supporters_relation }}
							</div>
						</div>
						<div class="item">
							<div class="field">赡养人联系电话：</div>
							<div class="value">
								{{ info.dependantMobile }}
							</div>
						</div>
						<div class="item">
							<div class="field">备注：</div>
							<div class="value">{{ info.familyInfoRemark }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '党员'">
					<div class="row">
						<div class="item">
							<div class="field">入党时间：</div>
							<div class="value">{{ info.joinTime }}</div>
						</div>
						<div class="item">
							<div class="field">转正时间：</div>
							<div class="value">{{ info.positiveTime }}</div>
						</div>
						<div class="item">
							<div class="field">所属支部：</div>
							<div class="value">{{ info.branchId }}</div>
						</div>
						<div class="item">
							<div class="field">是否流动党员：</div>
							<div class="value">{{ info.flowFlag }}</div>
						</div>
						<div class="item">
							<div class="field">流动党员活动证号：</div>
							<div class="value">{{ info.flowActNum }}</div>
						</div>
						<div class="item">
							<div class="field">职务：</div>
							<div class="value">{{ info.partyJob }}</div>
						</div>
						<div class="item">
							<div class="field">是否退休：</div>
							<div class="value">{{ info.retiredFlag }}</div>
						</div>
						<div class="item">
							<div class="field">是否党员中心户：</div>
							<div class="value">{{ info.centerFlag }}</div>
						</div>
						<div class="item">
							<div class="field">入党时所在党支部：</div>
							<div class="value">{{ info.joinBranchName }}</div>
						</div>
						<div class="item">
							<div class="field">组织关系转入社区时间：</div>
							<div class="value">
								{{ info.joinCommunityTime }}
							</div>
						</div>
						<div class="item">
							<div class="field">是否请长假：</div>
							<div class="value">{{ info.longHolidayFlag }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '保障房'">
					<div class="row">
						<div class="item">
							<div class="field">住房性质：</div>
							<div class="value">{{ info.housingNature }}</div>
						</div>
						<div class="item">
							<div class="field">保障类型：</div>
							<div class="value">{{ info.securityType }}</div>
						</div>
						<div class="item">
							<div class="field">发证日期：</div>
							<div class="value">{{ info.certificateDate }}</div>
						</div>
						<div class="item">
							<div class="field">补贴编号：</div>
							<div class="value">{{ info.subsidyNum }}</div>
						</div>
						<div class="item">
							<div class="field">补贴金额：</div>
							<div class="value">{{ info.subsidyAmount }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '失业'">
					<div class="row">
						<div class="item">
							<div class="field">原工作单位：</div>
							<div class="value">{{ info.originWorkUnit }}</div>
						</div>
						<div class="item">
							<div class="field">失业时间：</div>
							<div class="value">{{ info.unemploymentTime }}</div>
						</div>
						<div class="item">
							<div class="field">失业证号：</div>
							<div class="value">{{ info.unemploymentTime }}</div>
						</div>
						<div class="item">
							<div class="field">再就业优惠证号：</div>
							<div class="value">{{ info.employmentNum }}</div>
						</div>
						<div class="item">
							<div class="field">技术特长：</div>
							<div class="value">{{ info.specialSkill }}</div>
						</div>
						<div class="item">
							<div class="field">失业原因：</div>
							<div class="value">
								{{ info.unemploymentReason }}
							</div>
						</div>
						<div class="item">
							<div class="field">是否就业困难对象：</div>
							<div class="value">
								{{ info.employmentHardFlag }}
							</div>
						</div>
						<div class="item">
							<div class="field">劳动能力就业愿望：</div>
							<div class="value">{{ info.employmentWish }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '退役军人'">
					<div class="row">
						<div class="item">
							<div class="field">入伍时间：</div>
							<div class="value">{{ info.joinArmyTime }}</div>
						</div>
						<div class="item">
							<div class="field">退伍时间：</div>
							<div class="value">{{ info.leaveArmyTime }}</div>
						</div>
						<div class="item">
							<div class="field">服役单位：</div>
							<div class="value">{{ info.serviceUnit }}</div>
						</div>
						<div class="item">
							<div class="field">接收单位：</div>
							<div class="value">{{ info.receiveUnit }}</div>
						</div>
						<div class="item">
							<div class="field">待安置补助金：</div>
							<div class="value">{{ info.settlementAmount }}</div>
						</div>
						<div class="item">
							<div class="field">培训状况：</div>
							<div class="value">{{ info.trainDesc }}</div>
						</div>
						<div class="item">
							<div class="field">参战时间开始日期：</div>
							<div class="value">{{ info.joinWarStartTime }}</div>
						</div>
						<div class="item">
							<div class="field">参战时间截止日期：</div>
							<div class="value">{{ info.joinWarEndTime }}</div>
						</div>
						<div class="item">
							<div class="field">现就业状况：</div>
							<div class="value">
								{{ info.employmentSituation }}
							</div>
						</div>
						<div class="item">
							<div class="field">是否办理公益性岗位：</div>
							<div class="value">
								{{ info.pubWelfareJobFlag }}
							</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '统战人员'">
					<div class="row">
						<div class="item">
							<div class="field">职务：</div>
							<div class="value">{{ info.duty }}</div>
						</div>
						<div class="item">
							<div class="field">探亲情况：</div>
							<div class="value">{{ info.visitation }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '志愿者'">
					<div class="row">
						<div class="item">
							<div class="field">志愿者类别：</div>
							<div class="value">
								{{ info.volunteerCategory }}
							</div>
						</div>
						<div class="item">
							<div class="field">备注：</div>
							<div class="value">{{ info.volunteerRemark }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '老年人'">
					<div class="row">
						<div class="item">
							<div class="field">高龄补助：</div>
							<div class="value">{{ info.volunteerRemark }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '特殊人群'">
					<div class="row">
						<div class="item">
							<div class="field">特殊人群类别：</div>
							<div class="value">
								{{ info.specialCategoryCode }}
							</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '出生信息'">
					<div class="row">
						<div class="item">
							<div class="field">出生地：</div>
							<div class="value">{{ info.birthplace }}</div>
						</div>
						<div class="item">
							<div class="field">父亲姓名：</div>
							<div class="value">{{ info.father }}</div>
						</div>
						<div class="item">
							<div class="field">母亲姓名：</div>
							<div class="value">{{ info.mother }}</div>
						</div>
						<div class="item">
							<div class="field">胎次：</div>
							<div class="value">{{ info.count }}</div>
						</div>
						<div class="item">
							<div class="field">申报日期：</div>
							<div class="value">{{ info.reportDate }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '死亡信息'">
					<div class="row">
						<div class="item">
							<div class="field">死亡时间：</div>
							<div class="value">{{ info.deathDate }}</div>
						</div>
						<div class="item">
							<div class="field">加入原因：</div>
							<div class="value">{{ info.deathReason }}</div>
						</div>
						<div class="item">
							<div class="field">移除时间：</div>
							<div class="value">{{ info.removeDate }}</div>
						</div>
						<div class="item">
							<div class="field">移除原因：</div>
							<div class="value">{{ info.removeReason }}</div>
						</div>
					</div>
				</div>

				<div v-if="currentTab == '迁出'">
					<div class="row">
						<div class="item">
							<div class="field">迁出信息：</div>
							<div class="value">{{ info.outOfTime }}</div>
						</div>
						<div class="item">
							<div class="field">迁出类别：</div>
							<div class="value">{{ info.type }}</div>
						</div>
						<div class="item">
							<div class="field">迁出原因：</div>
							<div class="value">{{ info.reason }}</div>
						</div>
						<div class="item">
							<div class="field">迁出至组织：</div>
							<div class="value">{{ info.deptId }}</div>
						</div>
						<div class="item">
							<div class="field">小区：</div>
							<div class="value">{{ info.villageName }}</div>
						</div>
						<div class="item">
							<div class="field">楼号：</div>
							<div class="value">{{ info.buildName }}</div>
						</div>
						<div class="item">
							<div class="field">单元：</div>
							<div class="value">{{ info.unitName }}</div>
						</div>
						<div class="item">
							<div class="field">房屋：</div>
							<div class="value">{{ info.homeName }}</div>
						</div>
						<div class="item">
							<div class="field">外迁地址：</div>
							<div class="value">{{ info.address }}</div>
						</div>
					</div>
				</div>
			</div>
		</template>
	</popup>
</template>

<script>
import popup from "@/views/dataBoard/cpts/popup";
import { requestPostBi } from "@/js/dai/request-bipass";

export default {
	name: "residentDetails",
	props: {
		resiId: {
			type: String,
			default: "",
		},
	},

	components: { popup },

	data() {
		return {
			info: {
				woca: true,
				exs: false,
				srs: true,
				household: "--",
				holdingrel: "--",
				ethnic: "--",
				community: "--",
				user_id: "--",
				census_type: "--",
				aged: true,
				spouse: "--",
				mlsp: false,
				ncp: true,
				disable_idcard: "--",
				volunteer: false,
				village: "--",
				disable_degree: "--",
				marital: "--",
				native_place: "--",
				disable_type: "--",
				building: "--",
				disable_remark: "--",
				skill: "--",
				petitioner: true,
				unemployed: true,
				needs_group: "--",
				hobby: "--",
				unit: "--",
				gender: "--",
				retire_income: "--",
				workunit: "--",
				ufs: false,
				birthday: "--",
				in_person: false,
				adisability: false,
				household_remark: "--",
				belief: "--",
				education_remark: "--",
				education: "--",
				residence_current: "--",
				career: "--",
				empty_nest: false,
				idcard: "--",
				room: "--",
				guardian: "--",
				tenant: true,
				residence: "--",
				supporters: "--",
				ser_ill: false,
				ncd: true,
				belief_remark: "--",
				dementia: false,
				disability: true,
				telephone: "--",
				income: "--",
				native: "--",
				crowd: false,
				resident_remark: "--",
				hobby_remark: "--",
				retire_remark: "--",
				special_popu: true,
				street: "--",
				float_popu: true,
				supporters_relation: "--",
				name: "--",
				grid: "--",
				retire_date: "--",

				joinTime: "--",
				positiveTime: "--",
				branchId: "--",
				flowFlag: "--",
				flowActNum: "--",
				partyJob: "--",
				retiredFlag: "--",
				centerFlag: "--",
				joinBranchName: "--",
				joinCommunityTime: "--",
				longHolidayFlag: "--",
				ensure_house_id: "--",
				housingNature: "--",
				securityType: "--",
				certificateDate: "--",
				subsidyNum: "--",
				subsidyAmount: "--",
				unemployed_id: "--",
				originWorkUnit: "--",
				unemploymentTime: "--",
				unemploymentNum: "--",
				employmentNum: "--",
				specialSkill: "--",
				unemploymentReason: "--",
				employmentHardFlag: "--",
				employmentWish: "--",
				veteran_id: "--",
				joinArmyTime: "--",
				leaveArmyTime: "--",
				serviceUnit: "--",
				receiveUnit: "--",
				settlementAmount: "--",
				trainDesc: "--",
				joinWarStartTime: "--",
				joinWarEndTime: "--",
				employmentSituation: "--",
				pubWelfareJobFlag: "--",
				united_front_id: "--",
				duty: "--",
				visitation: "--",
				volunteer_id: "--",
				volunteerCategory: "--",
				volunteerRemark: "--",
				old_people_id: "--",
				oldSubsidy: "--",
				special_id: "--",
				specialCategoryCode: "--",
				birth_record_id: "--",
				birthplace: "--",
				father: "--",
				mother: "--",
				count: "--",
				reportDate: "--",
				death_record_id: "--",
				deathDate: "--",
				deathReason: "--",
				removeDate: "--",
				removeReason: "--",
				move_out_record_id: "--",
				outOfTime: "--",
				type: "--",
				reason: "--",
				deptId: "--",
				villageId: "--",
				villageName: "--",
				buildId: "--",
				buildName: "--",
				unitId: "--",
				unitName: "--",
				homeId: "--",
				homeName: "--",
				address: "--",
				residence_current: "--",
			},

			currentTabIndex: 0,
			startTabIndex: 0,
			BaseTabList: [
				"教育信息",
				"兴趣爱好",
				"宗教",
				"健康",
				"工作",
				"经济状况",
				"居住",
				"家庭",
			],
			tabList: [],
		};
	},

	computed: {
		currentTab() {
			return this.tabList[this.currentTabIndex];
		},
	},

	mounted() {
		this.getApiData();
	},

	methods: {
		addStartTabIndex() {
			const { startTabIndex, tabList } = this;
			if (startTabIndex < tabList.length - 7) {
				this.startTabIndex = startTabIndex + 1;
			} else {
				this.startTabIndex = tabList.length - 7;
			}
		},
		subStartTabIndex() {
			const { startTabIndex, tabList } = this;
			if (startTabIndex > 0) {
				this.startTabIndex = startTabIndex - 1;
			} else {
				this.startTabIndex = 0;
			}
		},

		handleClose() {
			this.$emit("close");
		},

		async getApiData() {
			this.getInfo();
		},

		// 根据房屋id获取详情
		async getInfo() {
			const url = "resident_info";

			const { data, code, msg } = await requestPostBi(
				url,
				{
					queryParam: {
						resident_id: this.resiId,
					},
				},
				{
					// mockId: 61172054,
				}
			);

			if (code === 0) {
				this.info = { ...this.info, ...data[0] };

				const { info } = this;
				let tabList = this.BaseTabList;
				info.crowd && tabList.push("党员");
				info.srs && tabList.push("保障房");
				info.unemployed && tabList.push("失业");
				info.exs && tabList.push("退役军人");
				info.ufs && tabList.push("统战人员");
				info.volunteer && tabList.push("志愿者");
				info.aged && tabList.push("老年人");
				info.special_popu && tabList.push("特殊人群");
				tabList.push("出生信息");
				tabList.push("死亡信息");
				tabList.push("迁出");
				this.tabList = tabList;
			} else {
				this.$message.error(msg);
			}
		},
	},
};
</script>

<style lang="scss" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style>
<style lang="scss" scoped>
@import "~@/assets/scss/c/config.scss";
@import "~@/assets/scss/c/function.scss";

.u-categorys {
	display: flex;
	flex-wrap: wrap;

	span {
		display: block;
		width: 90px;
	}
}

.m-tabs {
	margin-top: 30px;
	display: flex;
	align-items: center;
	padding-left: 20px;

	.tab-btn {
		width: 30px;
		text-align: center;
		cursor: pointer;
	}

	.tab {
		@include toe;
		margin: 0 5px;
		min-width: 72px;
		padding: 0 8px;
		height: 24px;
		box-shadow: inset 0px 0px 12px 0px rgba(26, 149, 255, 0.45);
		border-radius: 2px;
		border: 1px solid #1a95ff;
		border-radius: 2px;
		text-align: center;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		line-height: 23px;
		cursor: pointer;
		transition: all ease 0.5s;
		&.z-on {
			background: linear-gradient(90deg, #1a5afd, #009cff);
			box-shadow: none;
		}
	}
}
</style>