橘柒啊 2020-10-23 16:49 采纳率: 100%
浏览 49
已采纳

样式里面 ptx函数的作用是什么,麻烦大神解答一下

<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>

  • 写回答

1条回答 默认 最新

  • lshen01 2023-03-16 18:32
    关注

    参考GPT和自己的思路:

    在上面的代码中,ptx 函数的作用是将数字转换为对应的像素值。针对不同屏幕尺寸和设备像素比,使用 ptx 函数可以实现更好的响应式布局效果。在这个例子中,ptx 函数的实现方式是将数字乘以一个固定的比例系数(800/1212),然后乘以 1 像素。例如,在计算 widthfont-size 属性时,将相应的数字乘以 800/1212,再乘以 1 像素,就得到了对应的像素值。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已采纳回答 3月17日

悬赏问题

  • ¥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之后,代码跳到注释行里面