增加单个机巢页面

chenyao

2025-03-31 295eb3cc87aaa5176d64a4ef985cdad0bfefae9a

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

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

const list = ref([
  { name: '替代人工(人次)', value: 1174, color: '#FFFFFF' },
@@ -9,10 +10,12 @@
</script>
<template>
  <CommonTitle title="降本增效" />
  <div class="synergy">
    <div class="synergy-item" v-for="item in list">
      <div class="title">{{ item.name }}</div>
      <div class="value" :style="{ color: item.color }">{{ item.value }}</div>
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="synergy">
      <div class="synergy-item" v-for="item in list">
        <div class="title">{{ item.name }}</div>
        <div class="value" :style="{ color: item.color }">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>
@@ -20,7 +23,7 @@
<style scoped lang="scss">
.synergy {
  width: 390px;
  height: hToV(108);
  height: 108px;
  background: linear-gradient(
    270deg,
    #1f3e7a 0%,
@@ -28,16 +31,16 @@
    rgba(31, 62, 122, 0) 100%
  );
  opacity: 0.85;
  margin: hToV(2) 0 hToV(13) 0;
  margin: 2px 0 13 0;
  display: flex;
  justify-content: space-between;
  padding: hToV(11) 27px 0;
  padding: 11px 27px 0;

  .synergy-item {
    width: 95px;
    height: hToV(77);
    padding-top: hToV(7);
    background: url('@/assets/images/home/synergyBg.png') no-repeat center center / 100% 100%;
    height: 77px;
    padding-top: 7px;
    background: url('@/assets/images/home/homeRight/synergyBg.png') no-repeat center center / 100% 100%;

    .title {
      font-family: Source Han Sans CN, Source Han Sans CN, serif;
@@ -47,7 +50,7 @@
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin-bottom: hToV(4);
      margin-bottom: 4px;
    }

    .value {
@@ -55,7 +58,7 @@
      font-weight: 400;
      font-size: 26px;
      color: #ffffff;
      line-height: hToV(26);
      line-height: 26px;
      font-style: normal;
      text-transform: none;
      text-align: center;