feat: 去除hTov

罗广辉

2025-03-28 04024e9044ab49d41608890c7de34083c5eff215

feat: 去除hTov

 src/assets/images/home/homeRight/completionLeft.png

 src/components/CommonTitle.vue

@@ -20,7 +20,7 @@
.overview-title {
  position: relative;
  width: 404px;
  height: hToV(43);
  height: 43px;
  background-image: url(@/assets/images/title-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
@@ -30,7 +30,7 @@
  .left {
    position: absolute;
    left: 49px;
    bottom: hToV(16);
    bottom: 16px;
    font-weight: 400;
    font-size: 20px;
    color: #ffffff;
@@ -39,8 +39,8 @@
    font-style: normal;
    text-transform: none;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
    height: hToV(26);
    line-height: hToV(23);
    height: 26px;
    line-height:  23px;
  }

  .right {
@@ -48,13 +48,13 @@
    font-weight: 500;
    font-size: 14px;
    color: #0be7f6;
    height: hToV(21);
    line-height: hToV(21);
    height:  21px;
    line-height:  21px;
    font-family: Source Han Sans CN, Source Han Sans CN, serif;
    text-align: right;
    font-style: normal;
    text-transform: none;
    bottom: hToV(16);
    bottom:  16px;
    right: 11px;
    cursor: pointer;
  }

 src/main.js

@@ -35,8 +35,8 @@
// import formSetting from './views/tool/formsetting.vue';
// import tenantPackage from './views/system/tenantpackage.vue';
// import tenantDatasource from './views/system/tenantdatasource.vue';
import './utils/rem'
import { hToV, wToR } from '@/utils/pxConver';
import { onResize, pxToRem } from '@/utils/rem';
onResize()
import 'virtual:svg-icons-register'
window.$crudCommon = crudCommon;
debug();
@@ -61,8 +61,7 @@
app.config.globalProperties.$dayjs = dayjs;
app.config.globalProperties.website = website;
app.config.globalProperties.getScreen = getScreen;
app.config.globalProperties.wToR = wToR;
app.config.globalProperties.hToV = hToV;
app.config.globalProperties.pxToRem = pxToRem;

app.use(error);
app.use(i18n);

 src/styles/variables.scss

@@ -2,7 +2,4 @@
$sidebar_collapse: 60px;
$top_height: 50px;

@function hToV($px) {
  //@return calc($px / 1080) * 100vh;
  @return $px * 1px;
}


 src/utils/pxConver.js

File was deleted

 src/utils/rem.js

@@ -1,16 +1,13 @@

// 设置 rem 函数
const setRem = ()=> {
    const scale = document.documentElement.clientWidth / 192
    document.documentElement.style.fontSize = scale + 'px'
export function onResize() {
    const resize = ()=> {
        const scale = document.documentElement.clientWidth / 192
        document.documentElement.style.fontSize = scale + 'px'
    }
    resize()
    window.addEventListener('resize', resize)
}

// 初始化
setRem()
export const pxToRem = width => {
    return width * 0.1 + 'rem';
};

function onResize() {
    setRem()
}

// 改变窗口大小时重新设置 rem
window.addEventListener('resize', onResize)

 src/views/Home/components/HomeLeft/HomeLeft.vue

@@ -20,7 +20,6 @@
</template>

<script setup>
import { hToV, wToR } from '@/utils/pxConver';
import CommonTitle from '@/components/CommonTitle.vue';
import OverviewNext from './OverviewNext.vue';
import InspectionRaskDetails from './InspectionRaskDetails.vue';

 src/views/Home/components/HomeLeft/InspectionRaskDetails.vue

@@ -17,7 +17,6 @@
</template>

<script setup>
import { hToV, wToR } from '@/utils/pxConver';

const list = ref([
  { name: '计划执行', value: 89, color: '#FFFFFF' },
@@ -40,12 +39,12 @@
    .inspection-num {
        background: url('@/assets/images/inspection-num.png') no-repeat center / 100% 100%;
        width: 360px;
        height: hToV(118);
        height: 118px;
        position: relative;
        .total {
            position: absolute;
            left: 34px;
            top: hToV(34);
            top: 34px;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
@@ -56,14 +55,14 @@
        }
        .status {
            position: absolute;
            top: hToV(8);
            top: 8px;
            right: 10px;
            width: 200px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-start;
            line-height: hToV(22);
            line-height: 22px;
            padding: 0 10px 10px 0;
            .name {
                font-weight: 400;

 src/views/Home/components/HomeLeft/OverviewNext.vue

@@ -40,7 +40,6 @@
    </div>
</template>
<script setup>
import { hToV, wToR } from '@/utils/pxConver';

const list = ref([
  { name: '执行中', value: 89, color: '#FFA768' },

 src/views/Home/components/HomeRight/EventOverview.vue

@@ -1,12 +1,13 @@
<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
import { wToR } from '@/utils/pxConver';
import { pxToRem } from '@/utils/rem';
import overviewImg1 from '@/assets/images/home/homeRight/overview1.png';
import overviewImg2 from '@/assets/images/home/homeRight/overview2.png';
import overviewImg3 from '@/assets/images/home/homeRight/overview3.png';
import overviewImg4 from '@/assets/images/home/homeRight/overview4.png';
import overviewImg5 from '@/assets/images/home/homeRight/overview5.png';
import overviewImg6 from '@/assets/images/home/homeRight/overview6.png';
import completionLeft from '@/assets/images/home/homeRight/completionLeft.png';

const list = ref([
  { name: '待审核', value: 265, img: overviewImg1, color: '#FF8E8E' },
@@ -16,11 +17,35 @@
  { name: '已完成', value: 246, img: overviewImg5, color: '#FF8E8E' },
  { name: '已完结', value: 262, img: overviewImg6, color: '#8EFFAC' },
]);
const value = ref('');

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
];
</script>

<template>
  <CommonTitle title="事件概况" />
  <div :style="{ marginLeft: wToR(14) }">
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="eventOverview">
      <div class="overviewData">
        <div class="totalBox">
@@ -34,11 +59,49 @@
          </div>
        </div>
      </div>

      <el-select class="homeRightSelect" v-model="value" placeholder="请选择" size="large">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <div class="completion">
        <img class="completion-left-img" :src="completionLeft" />
        <div class="completion-text">事件类型完成率情况</div>
        <div class="completion-separator"></div>
        <img class="completion-left-img" :src="completionLeft" />
      </div>

      <div class="chart">
        <div class="chart-text">echarts柱状图</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.homeRightSelect {
  width: 356px;

  :deep() {
    .el-select__wrapper {
      background: linear-gradient(90deg, #195bad 0%, rgba(25, 91, 173, 0) 100%);
      min-height: 28px;
      box-shadow: none;
      border: 1px solid #306fca;
    }

    .el-select__placeholder {
      font-family: Microsoft YaHei, Microsoft YaHei, serif;
      color: #ffffff;
    }
  }
}

.eventOverview {
  width: 390px;
  height: 445px;
@@ -119,5 +182,33 @@
      }
    }
  }

  .completion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 356px;
    height: 23px;

    &--left-img {
      width: 16px;
      height: 16px;
    }

    &-text {
      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      line-height: 21px;
    }

    &-separator {
      width: 149px;
      height: 0px;
      border: 1px solid #4ca6ff;
      opacity: 0.2;
    }
  }
}
</style>

 src/views/Home/components/HomeRight/Synergy.vue

@@ -1,6 +1,6 @@
<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
import { wToR } from '@/utils/pxConver';
import { pxToRem } from '@/utils/rem';

const list = ref([
  { name: '替代人工(人次)', value: 1174, color: '#FFFFFF' },
@@ -10,7 +10,7 @@
</script>
<template>
  <CommonTitle title="降本增效" />
  <div :style="{ marginLeft: wToR(14) }">
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="synergy">
      <div class="synergy-item" v-for="item in list">
        <div class="title">{{ item.name }}</div>

 src/views/Home/components/HomeRight/TaskAchievements.vue

@@ -1,6 +1,6 @@
<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
import { wToR } from '@/utils/pxConver';
import { pxToRem } from '@/utils/rem';
import data1 from '@/assets/images/home/homeRight/data1.png';
import data2 from '@/assets/images/home/homeRight/data2.png';
import data3 from '@/assets/images/home/homeRight/data3.png';
@@ -19,7 +19,7 @@
</script>
<template>
  <CommonTitle title="任务成果" @details="detailsFun" />
  <div :style="{ marginLeft: wToR(14) }">
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="taskAchievements">
      <div class="rawData">
        <div class="bigTitle">原始<br />数据</div>