zkr/zhz-front-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Lishundong
2025-10-24 09:34:42 +08:00
commit c0e46d1ae7
282 changed files with 33820 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
packageA/pages/post/component/radarMap.vue Normal file
View File

@@ -0,0 +1,167 @@
<template>
<view style="display: flex; justify-content: center; padding: 0px 0">
<canvas canvas-id="radarCanvas" id="radarCanvas" style="width: 300px; height: 250px"></canvas>
</view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
// const src = ref('');
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
});
// 监听页面初始化
onMounted(() => {
if (Object.keys(props.value).length > 0) {
rawRadarChart();
}
});
// 监听 props.value 变化
watch(
() => props.value,
(newVal) => {
if (newVal && Object.keys(newVal).length > 0) {
const { skill, experience, education, salary, age, location } = newVal.radarChart;
const labels = ['学历', '年龄', '工作地', '技能', '工作经验', '期望薪资'];
const data = [education, age, location, skill, experience, salary].map((item) => item * 0.05);
rawRadarChart(labels, data);
}
},
{ deep: true, immediate: false } // deep 递归监听对象内部变化
);
function rawRadarChart(labels, data) {
const ctx = uni.createCanvasContext('radarCanvas');
const width = 80;
const height = 80;
const centerX = 150;
const centerY = 125;
// const data = [2, 3.5, 5, 3.5, 5, 3.5]; // 示例数据
// const labels = ['火烧', '泡水', '事故', '外观', '部件', '火烧'];
const colors = ['#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5'];
const maxScore = 5; // 数据最大值
const angleStep = (2 * Math.PI) / labels.length;
// 绘制背景多边形
ctx.setLineWidth(1);
ctx.setStrokeStyle('#F6F6F6');
//底部圆盘
ctx.beginPath();
ctx.arc(centerX, centerY, width, 0, 2 * Math.PI);
ctx.setFillStyle('#FFFFFF');
ctx.closePath();
ctx.fill();
//多边形圈
// 多边形圈
for (let i = 5; i > 0; i--) {
ctx.setStrokeStyle(colors[i - 1]); // 设置边框颜色
ctx.beginPath();
labels.forEach((label, index) => {
const x = centerX + (width / 5) * i * Math.cos(angleStep * index - Math.PI / 2);
const y = centerY + (height / 5) * i * Math.sin(angleStep * index - Math.PI / 2);
if (index === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
});
ctx.closePath();
ctx.stroke(); // 只描边，不填充
}
// //竖线
labels.forEach((label, index) => {
ctx.setStrokeStyle('#F5F5F5');
ctx.setFillStyle('#F5F5F5');
ctx.beginPath();
const x1 = centerX + width * 0.6 * Math.sin(angleStep * index);
const y1 = centerY + height * 0.6 * Math.cos(angleStep * index);
const x = centerX + width * Math.sin(angleStep * index);
const y = centerY + height * Math.cos(angleStep * index);
ctx.moveTo(x1, y1);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
});
// 绘制雷达图数据
ctx.setStrokeStyle('#256BFA');
ctx.setFillStyle('rgba(37,107,250, 0.24)');
ctx.setLineWidth(2);
ctx.beginPath();
const pointList = []; // 记录每个点的位置，等会画小圆点
data.forEach((score, index) => {
const x = centerX + width * (score / maxScore) * Math.cos(angleStep * index - Math.PI / 2);
const y = centerY + height * (score / maxScore) * Math.sin(angleStep * index - Math.PI / 2);
pointList.push({ x, y }); // 保存位置
if (index === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
});
ctx.closePath();
ctx.fill();
ctx.stroke();
// 绘制每个小圆点
ctx.setFillStyle('#256BFA'); // 小圆点颜色（你可以改）
pointList.forEach((point) => {
ctx.beginPath();
ctx.arc(point.x, point.y, 4, 0, 2 * Math.PI); // 半径 4，可以自己调大小
ctx.fill();
});
// 绘制标签
ctx.setTextAlign('center');
labels.forEach((label, index) => {
const x = centerX + (width + 30) * Math.cos(angleStep * index - Math.PI / 2);
const y = centerY + (height + 26) * Math.sin(angleStep * index - Math.PI / 2);
//标题
ctx.setFillStyle('#000');
ctx.setFontSize(12);
ctx.font = 'bold 12px sans-serif';
ctx.fillText(label, x, y);
// ctx.setFillStyle('#A2A4A2');
// ctx.font = '12px sans-serif';
// ctx.setFontSize(12);
// ctx.fillText(data[index], x, y + 16);
});
ctx.draw();
//转图片
// uni.canvasToTempFilePath({
// x: 0,
// y: 0,
// width: 320,
// height: 320,
// destWidth: 840,
// destHeight: 840,
// canvasId: 'radarCanvas',
// success: (res) => {
// // 在H5平台下，tempFilePath 为 base64
// src = res.tempFilePath;
// },
// });
}
</script>
<style></style>

190
packageA/pages/post/component/videoPlayer.vue Normal file
View File

@@ -0,0 +1,190 @@
<template>
<!-- 小窗播放容器 -->
<view
v-if="visible"
class="mini-player"
:style="{
left: position.x + 'px',
top: position.y + 'px',
width: isFullScreen ? '100%' : videoWidth + 'rpx',
height: isFullScreen ? '100vh' : videoHeight + 'rpx',
}"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
@touchmove.stop.prevent
>
<!-- 视频组件 -->
<video
:src="videoUrl"
:controls="true"
:show-progress="isFullScreen"
:style="{
width: '100%',
height: '100%',
}"
id="myVideo"
ref="videoRef"
@play="onPlay"
@pause="onPause"
@loadedmetadata="onLoadedMetadata"
></video>
<!-- 控制栏 -->
<view class="controls">
<!-- <text @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</text>
<text @click="toggleFullScreen">{{ isFullScreen ? '退出全屏' : '全屏' }}</text> -->
<text @click="close">关闭</text>
</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { nextTick } from 'vue';
const videoRef = ref(null);
const visible = ref(false);
const isPlaying = ref(false);
const isFullScreen = ref(false);
const videoUrl = ref('');
const position = reactive({ x: 20, y: 100 });
const videoContext = ref(null);
const startPos = reactive({ x: 0, y: 0 });
const moving = ref(false);
const videoWidth = ref(0);
const videoHeight = ref(0);
// 初始化视频上下文
onMounted(() => {
videoContext.value = uni.createVideoContext('myVideo');
});
// 触摸开始
const handleTouchStart = (e) => {
if (isFullScreen.value) return;
startPos.x = e.touches[0].clientX - position.x;
startPos.y = e.touches[0].clientY - position.y;
moving.value = true;
};
// 触摸移动
const handleTouchMove = (e) => {
if (!moving.value || isFullScreen.value) return;
const newX = e.touches[0].clientX - startPos.x;
const newY = e.touches[0].clientY - startPos.y;
// 边界检测
const maxX = window.innerWidth - videoWidth.value / 2; // 300rpx换算后的值
const maxY = window.innerHeight - videoHeight.value / 2;
position.x = Math.max(0, Math.min(newX, maxX));
position.y = Math.max(0, Math.min(newY, maxY));
};
// 触摸结束
const handleTouchEnd = () => {
moving.value = false;
};
// 播放状态变化
const onPlay = () => {
isPlaying.value = true;
};
const onPause = () => {
isPlaying.value = false;
};
// 切换播放状态
const togglePlay = () => {
isPlaying.value ? videoContext.value.pause() : videoContext.value.play();
};
// 切换全屏
const toggleFullScreen = () => {
isFullScreen.value = !isFullScreen.value;
if (!isFullScreen.value) {
// 退出全屏时恢复原位
position.x = 20;
position.y = 100;
}
};
// 关闭播放器
const close = () => {
visible.value = false;
videoContext.value.stop();
isPlaying.value = false;
isFullScreen.value = false;
};
// 打开播放器方法
const open = (url) => {
videoUrl.value = url;
visible.value = true;
nextTick(() => {
videoContext.value.play();
});
};
const onLoadedMetadata = (e) => {
const video = e.detail;
const width = video.width;
const height = video.height;
const ratio = width / height;
// 设置宽度：横屏宽 300，竖屏宽 180（可自定义）
if (ratio >= 1) {
videoWidth.value = 300; // 横屏
videoHeight.value = 300 * (height / width); // 保持比例
} else {
videoWidth.value = 180; // 竖屏
videoHeight.value = 180 * (height / width); // 保持比例
}
// console.log(`宽高: ${width}x${height}`);
// console.log(`比例: ${ratio.toFixed(2)} (${getRatioName(ratio)})`);
};
function getRatioName(ratio) {
const rounded = Math.round(ratio * 100) / 100;
if (Math.abs(rounded - 16 / 9) < 0.01) return '16:9';
if (Math.abs(rounded - 4 / 3) < 0.01) return '4:3';
if (Math.abs(rounded - 1) < 0.01) return '1:1';
return `${rounded.toFixed(2)}:1`;
}
// 暴露方法
defineExpose({ open });
</script>
<style scoped>
.mini-player {
position: fixed;
z-index: 999;
background: #000;
border-radius: 8rpx;
overflow: hidden;
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
}
.controls {
position: absolute;
top: 0;
right: 0;
/* background: rgba(0, 0, 0, 0.7); */
padding: 10rpx;
display: flex;
justify-content: space-around;
}
.controls text {
color: #fff;
font-size: 24rpx;
padding: 8rpx 16rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 4rpx;
}
</style>

568
packageA/pages/post/post.vue Normal file
View File

@@ -0,0 +1,568 @@
<template>
<AppLayout title="" backGorundColor="#F4F4F4">
<template #headerleft>
<view class="btnback">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</template>
<template #headerright>
<!-- <view class="btnshare">
<image src="@/static/icon/share.png" @click="shareJob"></image>
</view> -->
<view class="btn mar_ri10">
<image src="@/static/icon/collect3.png" v-if="!jobInfo.isCollection" @click="jobCollection"></image>
<image src="@/static/icon/collect2.png" v-else @click="jobCollection"></image>
</view>
</template>
<view class="content" v-show="!isEmptyObject(jobInfo)">
<view class="content-top btn-feel">
<view class="top-salary">
<Salary-Expectation
:max-salary="jobInfo.maxSalary"
:min-salary="jobInfo.minSalary"
:is-month="true"
></Salary-Expectation>
</view>
<view class="top-name">{{ jobInfo.jobTitle }}</view>
<view class="top-info">
<view class="info-img"><image src="/static/icon/post12.png"></image></view>
<view class="info-text">
<dict-Label dictType="experience" :value="jobInfo.experience"></dict-Label>
</view>
<view class="info-img mar_le20"><image src="/static/icon/post13.png"></image></view>
<view class="info-text">
<dict-Label dictType="education" :value="jobInfo.education"></dict-Label>
</view>
</view>
<view class="position-source">
<text>来源&nbsp;</text>
{{ jobInfo.dataSource }}
</view>
</view>
<view class="ai-explain" v-if="jobInfo.isExplain">
<view class="exbg">
<view class="explain-left btn-shaky">
<view class="leftText">AI+智能讲解，职位一听就懂</view>
<view class="leftdownText">懒得看文字？我用AI讲给你听</view>
</view>
<view class="explain-right button-click" @click="seeExplain">点击查看</view>
</view>
</view>
<view class="content-card">
<view class="card-title">
<text class="title">职位描述</text>
</view>
<view class="description" :style="{ whiteSpace: 'pre-wrap' }">
{{ jobInfo.description }}
</view>
</view>
<view class="content-card">
<view class="card-title">
<text class="title">公司信息</text>
<text
class="btntext button-click"
@click="navTo(`/packageA/pages/UnitDetails/UnitDetails?companyId=${jobInfo.company.companyId}`)"
>
单位详情
</text>
</view>
<view class="company-info">
<view class="companyinfo-left">
<image src="@/static/icon/companyIcon.png" mode=""></image>
</view>
<view class="companyinfo-right">
<view class="row1">{{ jobInfo.company?.name }}</view>
<view class="row2">
<dict-tree-Label
v-if="jobInfo.company?.industry"
dictType="industry"
:value="jobInfo.company?.industry"
></dict-tree-Label>
<span v-if="jobInfo.company?.industry">&nbsp;</span>
<dict-Label dictType="scale" :value="jobInfo.company?.scale"></dict-Label>
</view>
<view class="row2">
<text>在招</text>
<text style="color: #256bfa">{{ companyCount }}</text>
<text>个职位</text>
</view>
</view>
</view>
<view class="company-map" v-if="jobInfo.latitude && jobInfo.longitude">
<map
style="width: 100%; height: 100%"
:latitude="jobInfo.latitude"
:longitude="jobInfo.longitude"
:markers="mapCovers"
></map>
</view>
</view>
<view class="content-card">
<view class="card-title">
<text class="title">竞争力分析</text>
</view>
<view class="description">
三个月内共15位求职者申请，你的简历匹配度为{{ raderData.matchScore }}分，排名位于第{{
raderData.rank
}}位，超过{{ raderData.percentile }}%的竞争者，处在优秀位置。
</view>
<RadarMap :value="raderData"></RadarMap>
<view class="card-footer">
<view class="footer-title">你与职位的匹配度</view>
<view class="footer-content">
<view class="progress-container">
<view
v-for="(item, index) in matchingDegree"
:key="index"
class="progress-item"
:class="getClass(index)"
/>
</view>
</view>
<view class="progress-text">
<view class="text-rpx" v-for="(item, index) in matchingDegree" :key="index">{{ item }}</view>
</view>
</view>
</view>
<view style="height: 24px"></view>
</view>
<template #footer>
<view class="footer">
<view class="btn-wq button-click" @click="jobApply">立即前往</view>
</view>
</template>
<VideoPlayer ref="videoPalyerRef" />
</AppLayout>
</template>
<script setup>
import point from '@/static/icon/point.png';
import VideoPlayer from './component/videoPlayer.vue';
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
import dictLabel from '@/components/dict-Label/dict-Label.vue';
import RadarMap from './component/radarMap.vue';
const { $api, navTo, getLenPx, parseQueryParams, navBack, isEmptyObject } = inject('globalFunction');
import config from '@/config.js';
const matchingDegree = ref(['一般', '良好', '优秀', '极好']);
const currentStep = ref(1);
const companyCount = ref(0);
const jobInfo = ref({});
const state = reactive({});
const mapCovers = ref([]);
const jobIdRef = ref();
const raderData = ref({});
const videoPalyerRef = ref(null);
const explainUrlRef = ref('');
onLoad((option) => {
if (option.jobId) {
initLoad(option);
}
});
onShow(() => {
const option = parseQueryParams(); // 兼容微信内置浏览器
if (option.jobId) {
initLoad(option);
}
});
function initLoad(option) {
const jobId = atob(option.jobId);
if (jobId !== jobIdRef.value) {
jobIdRef.value = jobId;
getDetail(jobId);
}
}
function seeExplain() {
if (jobInfo.value.explainUrl) {
videoPalyerRef.value?.open(jobInfo.value.explainUrl);
// console.log(jobInfo.value.explainUrl);
// explainUrlRef.value = jobInfo.value.explainUrl;
}
}
function getDetail(jobId) {
return new Promise((reslove, reject) => {
$api.createRequest(`/app/job/${jobId}`).then((resData) => {
const { latitude, longitude, companyName, companyId } = resData.data;
jobInfo.value = resData.data;
reslove(resData.data);
getCompanyIsAJobs(companyId);
getCompetivetuveness(jobId);
if (latitude && longitude) {
mapCovers.value = [
{
latitude: latitude,
longitude: longitude,
iconPath: point,
label: {
content: companyName,
textAlign: 'center',
padding: 3,
fontSize: 12,
bgColor: '#FFFFFF',
anchorX: getTextWidth(companyName), // X 轴调整，负数向左
borderRadius: 5,
},
width: 34,
},
];
}
});
});
}
function getCompanyIsAJobs(companyId) {
$api.createRequest(`/app/company/count/${companyId}`).then((resData) => {
companyCount.value = resData.data;
});
}
function getTextWidth(text, size = 12) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.font = `${12}px Arial`;
return -(context.measureText(text).width / 2) - 20; // 计算文字中心点
}
function getCompetivetuveness(jobId) {
$api.createRequest(`/app/job/competitiveness/${jobId}`, {}, 'GET').then((resData) => {
raderData.value = resData.data;
currentStep.value = resData.data.matchScore * 0.04;
});
}
// 申请岗位
function jobApply() {
const jobId = jobInfo.value.jobId;
if (jobInfo.value.isApply) {
const jobUrl = jobInfo.value.jobUrl;
return window.open(jobUrl);
} else {
$api.createRequest(`/app/job/apply/${jobId}`, {}, 'GET').then((resData) => {
getDetail(jobId);
$api.msg('申请成功');
const jobUrl = jobInfo.value.jobUrl;
return window.open(jobUrl);
});
}
}
// 取消/收藏岗位
function jobCollection() {
const jobId = jobInfo.value.jobId;
if (jobInfo.value.isCollection) {
$api.createRequest(`/app/job/collection/${jobId}`, {}, 'DELETE').then((resData) => {
getDetail(jobId);
$api.msg('取消收藏成功');
});
} else {
$api.createRequest(`/app/job/collection/${jobId}`, {}, 'POST').then((resData) => {
getDetail(jobId);
$api.msg('收藏成功');
});
}
}
function getClass(index) {
const current = currentStep.value;
const floorIndex = Math.floor(current);
if (index < floorIndex) {
return 'active';
} else if (index === floorIndex) {
const decimal = current % 1;
const percent = Math.round(decimal * 100);
return `half${percent}`;
} else {
return '';
}
}
</script>
<style lang="stylus" scoped>
.btnback{
width: 64rpx;
height: 64rpx;
}
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 52rpx;
height: 52rpx;
}
.btnshare {
width: 48rpx;
height: 48rpx;
margin-right: 46rpx;
}
image {
height: 100%;
width: 100%;
}
.progress-container {
display: flex;
align-items: center;
gap: 8rpx; /* 间距 */
margin-top: 24rpx
}
.progress-text{
margin-top: 8rpx
display: flex;
align-items: center;
gap: 8rpx; /* 间距 */
justify-content: space-around
width: 100%
font-weight: 400;
font-size: 20rpx;
color: #999999;
text-align: center;
}
.progress-item {
width: 25%;
height: 24rpx;
background-color: #eee;
border-radius: 24rpx;
overflow: hidden;
position: relative;
transition: background-color 0.3s;
}
/* 完整激活格子 */
.progress-item.active {
background: linear-gradient(to right, #256bfa, #8c68ff);
}
/* 当前进度进行中的格子 */
for i in 0..100
.progress-item.half{i}::before
content ''
position absolute
left 0
top 0
bottom 0
width 100%
background linear-gradient(to right, #256bfa (i)%, #eaeaea (i)%)
border-radius 24rpx
.card-footer{
.footer-title{
font-weight: 600;
font-size: 28rpx;
color: #000000;
}
.footer-content{
.content-line{
display: grid
grid-template-columns: repeat(4, 1fr)
background: linear-gradient( to left, #9E74FD 0%, #256BFA 100%);
border-radius: 10rpx
.line-pargrah{
height: 20rpx;
position: relative
}
.line-pargrah::after{
position: absolute;
content: '';
right: 10
top: 0
width: 6rpx
height: 20rpx
background: #FFFFFF
}
}
}
}
// ai
.ai-explain{
margin-top: 28rpx
background-color: #FFFFFF
border-radius: 20rpx 20rpx 20rpx 20rpx;
overflow: hidden
.exbg{
padding: 28rpx 40rpx;
display: flex
align-items: center
justify-content: space-between
background: url('@/static/icon/aibg.png') center center no-repeat;
background-size: 100% 100%
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.explain-left{
.leftText{
font-weight: 600;
font-size: 32rpx;
}
.leftdownText{
margin-top: 12rpx
font-weight: 400;
font-size: 28rpx;
color: #495265;
}
}
.explain-right{
width: 168rpx;
height: 72rpx;
border-radius: 40rpx 40rpx 40rpx 40rpx;
border: 2rpx solid #E7E9ED;
text-align: center;
line-height: 72rpx
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
}
.content{
padding: 0 28rpx
height: 100%
.content-top{
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 52rpx 32rpx 34rpx 32rpx
position: relative
overflow: hidden
.top-salary{
font-weight: 500;
font-size: 32rpx;
color: #4C6EFB;
}
.top-name{
font-weight: 600;
font-size: 36rpx;
color: #000000;
margin-top: 8rpx
}
.top-info{
margin-top: 22rpx
display: flex;
align-items: center
.info-img{
width: 40rpx;
height: 40rpx
}
.info-text{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
margin-left: 10rpx
}
}
.position-source{
position: absolute
top: 0
right: 0
width: fit-content;
height: 76rpx;
padding: 0 24rpx
background: rgba(37,107,250,0.1);
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
text-align: center
line-height: 76rpx
font-weight: 400;
font-size: 28rpx;
color: #64779F;
border-bottom-left-radius: 20rpx
}
}
.content-card{
padding: 24rpx
margin-top: 28rpx
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
.card-title{
font-weight: 600;
font-size: 32rpx;
color: #000000;
position: relative;
display: flex
justify-content: space-between
.title{
position: relative;
z-index: 2;
}
.btntext{
white-space: nowrap
font-weight: 400;
font-size: 28rpx;
color: #256BFA;
}
}
.card-title::before{
position: absolute
content: '';
left: -14rpx
bottom: 0
height: 16rpx;
width: 108rpx;
background: linear-gradient(to right, #CBDEFF, #FFFFFF);
border-radius: 8rpx;
z-index: 1;
}
.description{
margin-top: 30rpx
font-weight: 400;
font-size: 28rpx;
color: #495265;
}
.company-info{
padding-top: 30rpx
display: flex
flex-direction: row
flex-wrap: nowrap
.companyinfo-left{
width: 96rpx;
height: 96rpx;
margin-right: 24rpx
}
.companyinfo-right{
.row1{
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.row2{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
line-height: 45rpx;
}
}
}
.company-map{
margin-top: 28rpx
height: 416rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
overflow: hidden
}
}
}
.footer{
background: #FFFFFF;
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11,44,112,0.12);
border-radius: 0rpx 0rpx 0rpx 0rpx;
padding: 40rpx 28rpx 20rpx 28rpx
.btn-wq{
height: 90rpx;
background: #256BFA;
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
line-height: 90rpx
}
}
</style>