feat: 标题调整

罗广辉

2025-03-27 946876e4c34cc49655928f3a1fc438a4e3d3207a

feat: 标题调整

 src/components/CommonTitle.vue

@@ -3,7 +3,7 @@
    <div class="left">
      {{ title }}
    </div>
    <div class="right">详情 ></div>
    <div class="right" v-if="show" @click="attrs.onDetails()">详情 ></div>
  </div>
</template>
<script setup>
@@ -13,6 +13,9 @@
    default: '机巢概况',
  },
});
l
const attrs = useAttrs();
const show = ref(attrs.onDetails);
</script>
<style scoped lang="scss">
.overview-title {
@@ -24,7 +27,6 @@
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;

  .left {
    position: absolute;
@@ -55,6 +57,7 @@
    text-transform: none;
    bottom: hToV(16);
    right: 11px;
    cursor: pointer;
  }
}
</style>

 src/views/Home/Home.vue

@@ -1,9 +1,7 @@
<template>
  <div class="warp">
    <HomeLeft></HomeLeft>
    <!-- <div>中间搜索</div> -->
    <HomeRight></HomeRight>
  </div>
</template>

<script>
@@ -28,16 +26,4 @@
};
</script>
<style scoped lang="scss">
.page-home {
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
  position: relative;
  .warp {
    display: flex;
    justify-content: space-between;
  }
}
</style>

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

@@ -1,23 +1,22 @@
<template>
  <div class="home-right">
    <CommonTitle title="协同" />
    <CommonTitle title="降本增效" />
    <div class="synergy"></div>

    <CommonTitle title="协同" />
    <CommonTitle title="任务成果" @details="detailsFun"/>
    <div class="taskAchievements"></div>

    <CommonTitle title="协同" />
    <CommonTitle title="事件概况" />
    <div class="eventOverview"></div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
<script setup>
import CommonTitle from '@/components/CommonTitle.vue';

export default defineComponent({
  components: { CommonTitle },
});
const detailsFun = () => {
  console.log('details');
};
</script>

<style scoped lang="scss">
@@ -26,7 +25,6 @@
  top: hToV(122);
  right: 31px;
  width: 404px;
  height: 43px;

  .titleBox {
    width: 404px;
@@ -35,7 +33,7 @@

  .synergy {
    width: 390px;
    height: 108px;
    height: hToV(108);
    background: linear-gradient(
      90deg,
      #1f3e7a 0%,
@@ -44,6 +42,7 @@
    );
    border-radius: 0px 0px 0px 0px;
    opacity: 0.85;
    margin: hToV(2) 0 hToV(13) 0;
  }

  .taskAchievements {
@@ -57,6 +56,7 @@
    );
    border-radius: 0px 0px 0px 0px;
    opacity: 0.85;
    margin: hToV(2) 0 hToV(21) 0;
  }

  .eventOverview {
@@ -70,6 +70,7 @@
    );
    border-radius: 0px 0px 0px 0px;
    opacity: 0.85;
    margin: hToV(3) 0 0 0;
  }
}
</style>