<template>
<item-card :height="height" :padding="padding" :titleStyle="titleStyle" :title="config.title" :background="config.background">
<div class="main-box allwh fac">
<div class="box-item flexcolumn facac">
<num-card title="园区人员总数" :num="1024" color="white"></num-card>
<num-card title="今日人员流量" :num="5024" color="white" class="box-item-num"></num-card>
</div>
<div class="box-item">
<chart-init id="persontotlw" class="charts-item" :options="pieData"></chart-init>
</div>
<div class="box-item facac">
<div class="flexwrap">
<div class="box-item-card facab" :style="{'border-color': item.color, background: item.bg}" v-for="(item,index) in personData" :key="index">
<div>{{item.title}}</div>
<div :style="{color:item.color}">{{item.value}}</div>
</div>
</div>
</div>
</div>
</item-card>
</template>
<script>
export default {
data () {
return {
height: this.util.setFontSize(327, 1212) + 'px',
padding: `0 ${this.util.setFontSize(21, 1212)}px`,
titleStyle: {
height: `${this.util.setFontSize(45, 1212)}px`,
flex: `0 0 ${this.util.setFontSize(45, 940)}px`,
'font-size': `${this.util.setFontSize(18, 1212)}px`,
'color':'#51BECF',
'font-weight':'normal'
},
config: {
title: '今日人员总览',
//background: 'rgb(10,23,40)'
background: '#10445C'
},
pieData: {},
personData: [
{ title: '重点到访', value: 1, color: '#FFAF47', bg: '#272D36' },
{ title: '重点人员', value: 1, color: '#FFAF47', bg: '#272D36' },
{ title: '访客到访', value: 1, color: '#00EFFC', bg: '#0D3348' },
{ title: '访客预约', value: 1, color: '#00EFFC', bg: '#0D3348' },
{ title: '黑名单监测', value: 1, color: '#999', bg: '#1D2B3E' }
]
}
},
created () {
// console.log(String(12580).split(''))
this.setData()
},
methods: {
setData () {
const legendData = [
{ name: '员工', value: 1041 },
{ name: '访客', value: 432 },
{ name: '包商', value: 1422 },
];
const that = this;
this.pieData = {
title: {
//text: 1289,
textStyle: {
color: '#fff',
fontSize: this.util.setFontSize(30, 1212)
},
top: '43%',
left: '15%'
},
color: ['#2781F5', '#807afc', '#D26D5A'],
legend: {
orient: 'vertical',
textStyle: {
color: '#fff',
fontSize: that.util.setFontSize(14, 1212)
},
top: 'center',
right: '20%',
icon: 'rect',
itemGap: that.util.setFontSize(20, 1212),
formatter: function (name) {
//return `${name}---------${that.util.checkLegendValue(name, legendData, true)}`
return `${name}`
}
},
series: {
type: 'pie',
center: ['25%', '50%'],
radius: ['53%', '70%'],
label: {
show: false
},
labelLine: {
show: false
},
data: legendData
}
}
}
}
}
</script>
<style lang="scss" scoped>
@function ptx($num){
@return ($num*800/1212) *1px
}
.main-box{
.box-item{
flex: 1;
height: 100%;
&:nth-last-of-type(1){
width: ptx(358);
flex: 0 0 ptx(358);
}
.box-item-num{
margin-top: ptx(20);
}
}
.box-item-card{
width: ptx(176);
height: ptx(57);
font-size: ptx(14);
padding: 0 ptx(15);
border-left: ptx(4) solid;
box-sizing: border-box;
color: #fff;
margin-top: ptx(6);
&:nth-of-type(2n-1){
margin-right: ptx(6);
}
&:nth-last-of-type(1){
margin-right: 0;
width: 100%;
}
}
}
</style>
样式里面 ptx函数的作用是什么,麻烦大神解答一下
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答 默认 最新
- lshen01 2023-03-16 18:32关注
参考GPT和自己的思路:
在上面的代码中,
ptx
函数的作用是将数字转换为对应的像素值。针对不同屏幕尺寸和设备像素比,使用ptx
函数可以实现更好的响应式布局效果。在这个例子中,ptx
函数的实现方式是将数字乘以一个固定的比例系数(800/1212),然后乘以 1 像素。例如,在计算width
和font-size
属性时,将相应的数字乘以800/1212
,再乘以 1 像素,就得到了对应的像素值。本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
- ¥15 C#调用python代码(python带有库)
- ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
- ¥15 活动选择题。最多可以参加几个项目?
- ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
- ¥15 vs2019中数据导出问题
- ¥20 云服务Linux系统TCP-MSS值修改?
- ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
- ¥20 怎么在stm32门禁成品上增加查询记录功能
- ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面