From e089f292eac65d9f8f5e50cd5576eea84fc189c6 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Thu, 27 Mar 2025 14:08:48 +0800
Subject: [PATCH] feat: 完成降本增效小模块
---
src/views/Home/components/HomeRight/TaskAchievements.vue | 27 +++
src/assets/images/home/synergyBg.png | 0
src/components/CommonTitle.vue | 1
src/views/Home/components/HomeRight/HomeRight.vue | 60 ------
src/views/Home/components/HomeRight/EventOverview.vue | 24 +++
src/views/Home/components/HomeRight/Synergy.vue | 65 ++++++++
src/styles/common.scss | 5
src/styles/reset.scss | 284 +++++++++++++++++++++++++++++++++++
8 files changed, 409 insertions(+), 57 deletions(-)
diff --git a/src/assets/images/home/synergyBg.png b/src/assets/images/home/synergyBg.png
new file mode 100644
index 0000000..0997f8a
--- /dev/null
+++ b/src/assets/images/home/synergyBg.png
Binary files differ
diff --git a/src/components/CommonTitle.vue b/src/components/CommonTitle.vue
index 9606796..935ee50 100644
--- a/src/components/CommonTitle.vue
+++ b/src/components/CommonTitle.vue
@@ -13,7 +13,6 @@
default: '机巢概况',
},
});
-l
const attrs = useAttrs();
const show = ref(attrs.onDetails);
</script>
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 89232a0..bed1aad 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,7 +1,8 @@
+//样式重置
+@use './reset.scss';
// 全局变量
@use './variables.scss' as variables;
@use './mixin.scss' as *;
-
// ele样式覆盖
@use './element-ui.scss';
// 顶部右侧显示
@@ -22,7 +23,7 @@
@use "./login.scss";
//适配
@use './media.scss';
-//适配
+//字体
@use './font.scss';
//滚动条样式
@include scrollBar;
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
new file mode 100644
index 0000000..7bf9c14
--- /dev/null
+++ b/src/styles/reset.scss
@@ -0,0 +1,284 @@
+html {
+ -webkit-text-size-adjust: 100%
+}
+
+html:focus-within {
+ scroll-behavior: smooth
+}
+
+body {
+ -webkit-text-size-adjust: 100%;
+ -moz-text-size-adjust: 100%;
+ text-size-adjust: 100%;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ min-height: 100vh;
+ position: relative;
+ text-rendering: optimizeSpeed;
+ width: 100%
+}
+
+*, :after, :before {
+ box-sizing: border-box
+}
+
+a:not([class]) {
+ -webkit-text-decoration-skip: ink;
+ text-decoration-skip-ink: auto
+}
+
+a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ margin: 0;
+ padding: 0;
+ vertical-align: baseline
+}
+
+:focus {
+ outline: 0
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
+ display: block
+}
+
+ol, ul {
+ list-style: none
+}
+
+blockquote, q {
+ quotes: none
+}
+
+blockquote:after, blockquote:before, q:after, q:before {
+ content: "";
+ content: none
+}
+
+input, input:required {
+ box-shadow: none
+}
+
+input:-webkit-autofill, input:-webkit-autofill:active, input:-webkit-autofill:focus, input:-webkit-autofill:hover {
+ -webkit-box-shadow: inset 0 0 0 30px #fff
+}
+
+input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
+ -webkit-appearance: none;
+ -moz-appearance: none
+}
+
+input[type=search] {
+ -webkit-appearance: none;
+ -moz-appearance: none
+}
+
+input:focus {
+ outline: none
+}
+
+audio, canvas, video {
+ display: inline-block;
+ max-width: 100%
+}
+
+audio:not([controls]) {
+ display: none;
+ height: 0
+}
+
+[hidden] {
+ display: none
+}
+
+a:active, a:hover {
+ outline: none
+}
+
+img {
+ height: auto;
+ max-width: 100%;
+ vertical-align: middle
+}
+
+img, picture {
+ display: inline-block
+}
+
+button, input {
+ line-height: normal
+}
+
+button, html input[type=button], input[type=reset], input[type=submit] {
+ -webkit-appearance: button;
+ background: transparent;
+ border: 0;
+ cursor: pointer
+}
+
+button[disabled], html input[disabled] {
+ cursor: default
+}
+
+[disabled] {
+ pointer-events: none
+}
+
+input[type=checkbox], input[type=radio] {
+ padding: 0
+}
+
+input[type=search] {
+ -webkit-appearance: textfield;
+ box-sizing: content-box
+}
+
+input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
+ -webkit-appearance: none
+}
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+ border: 0;
+ padding: 0
+}
+
+button {
+ background: transparent;
+ border: 0
+}
+
+textarea {
+ overflow: auto;
+ resize: vertical;
+ vertical-align: top
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ text-indent: 0
+}
+
+hr {
+ background: #000;
+ border: 0;
+ box-sizing: content-box;
+ height: 1px;
+ line-height: 0;
+ margin: 0;
+ overflow: visible;
+ padding: 0;
+ page-break-after: always;
+ width: 100%
+}
+
+pre {
+ font-family: monospace, monospace;
+ font-size: 100%
+}
+
+a {
+ background-color: transparent
+}
+
+abbr[title] {
+ border-bottom: none;
+ text-decoration: none
+}
+
+code, kbd, pre, samp {
+ font-family: monospace, monospace
+}
+
+small, sub, sup {
+ font-size: 75%
+}
+
+sub, sup {
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline
+}
+
+sub {
+ bottom: -5px
+}
+
+sup {
+ top: -5px
+}
+
+button, input, optgroup, select, textarea {
+ font-family: inherit;
+ font-size: 100%;
+ line-height: 1;
+ margin: 0;
+ padding: 0
+}
+
+button, input {
+ overflow: visible
+}
+
+button, select {
+ text-transform: none
+}
+
+[type=button], [type=reset], [type=submit], button {
+ -webkit-appearance: button
+}
+
+[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
+ border-style: none;
+ outline: 0;
+ padding: 0
+}
+
+legend {
+ border: 0;
+ color: inherit;
+ display: block;
+ max-width: 100%;
+ white-space: normal;
+ width: 100%
+}
+
+fieldset {
+ min-width: 0
+}
+
+body:not(:-moz-handler-blocked) fieldset {
+ display: block
+}
+
+progress {
+ vertical-align: baseline
+}
+
+[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
+ height: auto
+}
+
+[type=search] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px
+}
+
+[type=search]::-webkit-search-decoration {
+ -webkit-appearance: none
+}
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit
+}
+
+summary {
+ display: list-item
+}
+
+template {
+ display: none
+}
diff --git a/src/views/Home/components/HomeRight/EventOverview.vue b/src/views/Home/components/HomeRight/EventOverview.vue
new file mode 100644
index 0000000..7cdc345
--- /dev/null
+++ b/src/views/Home/components/HomeRight/EventOverview.vue
@@ -0,0 +1,24 @@
+<script setup>
+import CommonTitle from '@/components/CommonTitle.vue';
+</script>
+
+<template>
+ <CommonTitle title="事件概况" />
+ <div class="eventOverview"></div>
+</template>
+
+<style scoped lang="scss">
+.eventOverview {
+ width: 390px;
+ height: hToV(445);
+ background: linear-gradient(
+ 270deg,
+ #1f3e7a 0%,
+ rgba(31, 62, 122, 0.35) 79%,
+ rgba(31, 62, 122, 0) 100%
+ );
+ border-radius: 0px 0px 0px 0px;
+ opacity: 0.85;
+ margin: hToV(3) 0 0 0;
+}
+</style>
diff --git a/src/views/Home/components/HomeRight/HomeRight.vue b/src/views/Home/components/HomeRight/HomeRight.vue
index 93083a8..b9d5281 100644
--- a/src/views/Home/components/HomeRight/HomeRight.vue
+++ b/src/views/Home/components/HomeRight/HomeRight.vue
@@ -1,22 +1,16 @@
<template>
<div class="home-right">
- <CommonTitle title="降本增效" />
- <div class="synergy"></div>
-
- <CommonTitle title="任务成果" @details="detailsFun"/>
- <div class="taskAchievements"></div>
-
- <CommonTitle title="事件概况" />
- <div class="eventOverview"></div>
+ <Synergy />
+ <TaskAchievements />
+ <EventOverview />
</div>
</template>
<script setup>
-import CommonTitle from '@/components/CommonTitle.vue';
+import Synergy from '@/views/Home/components/HomeRight/Synergy.vue';
+import TaskAchievements from '@/views/Home/components/HomeRight/TaskAchievements.vue';
+import EventOverview from '@/views/Home/components/HomeRight/EventOverview.vue';
-const detailsFun = () => {
- console.log('details');
-};
</script>
<style scoped lang="scss">
@@ -29,48 +23,6 @@
.titleBox {
width: 404px;
height: hToV(43);
- }
-
- .synergy {
- width: 390px;
- height: hToV(108);
- background: linear-gradient(
- 90deg,
- #1f3e7a 0%,
- rgba(31, 62, 122, 0.35) 79%,
- rgba(31, 62, 122, 0) 100%
- );
- border-radius: 0px 0px 0px 0px;
- opacity: 0.85;
- margin: hToV(2) 0 hToV(13) 0;
- }
-
- .taskAchievements {
- width: 390px;
- height: hToV(204);
- background: linear-gradient(
- 90deg,
- #1f3e7a 0%,
- rgba(31, 62, 122, 0.35) 79%,
- rgba(31, 62, 122, 0) 100%
- );
- border-radius: 0px 0px 0px 0px;
- opacity: 0.85;
- margin: hToV(2) 0 hToV(21) 0;
- }
-
- .eventOverview {
- width: 390px;
- height: hToV(445);
- background: linear-gradient(
- 90deg,
- #1f3e7a 0%,
- rgba(31, 62, 122, 0.35) 79%,
- rgba(31, 62, 122, 0) 100%
- );
- border-radius: 0px 0px 0px 0px;
- opacity: 0.85;
- margin: hToV(3) 0 0 0;
}
}
</style>
diff --git a/src/views/Home/components/HomeRight/Synergy.vue b/src/views/Home/components/HomeRight/Synergy.vue
new file mode 100644
index 0000000..50f4622
--- /dev/null
+++ b/src/views/Home/components/HomeRight/Synergy.vue
@@ -0,0 +1,65 @@
+<script setup>
+import CommonTitle from '@/components/CommonTitle.vue';
+
+const list = ref([
+ { name: '替代人工(人次)', value: 1174, color: '#FFFFFF' },
+ { name: '替代车辆(公里)', value: 2345, color: '#FFA768' },
+ { name: '节约成本(万元)', value: 12.07, color: '#68FFC8' },
+]);
+</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>
+ </div>
+</template>
+
+<style scoped lang="scss">
+.synergy {
+ width: 390px;
+ height: hToV(108);
+ background: linear-gradient(
+ 270deg,
+ #1f3e7a 0%,
+ rgba(31, 62, 122, 0.35) 79%,
+ rgba(31, 62, 122, 0) 100%
+ );
+ opacity: 0.85;
+ margin: hToV(2) 0 hToV(13) 0;
+ display: flex;
+ justify-content: space-between;
+ padding: hToV(11) 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%;
+
+ .title {
+ font-family: Source Han Sans CN, Source Han Sans CN, serif;
+ font-weight: 400;
+ font-size: 14px;
+ color: #ffffff;
+ text-align: center;
+ font-style: normal;
+ text-transform: none;
+ margin-bottom: hToV(4);
+ }
+
+ .value {
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
+ font-weight: 400;
+ font-size: 26px;
+ color: #ffffff;
+ line-height: hToV(26);
+ font-style: normal;
+ text-transform: none;
+ text-align: center;
+ }
+ }
+}
+</style>
diff --git a/src/views/Home/components/HomeRight/TaskAchievements.vue b/src/views/Home/components/HomeRight/TaskAchievements.vue
new file mode 100644
index 0000000..753af84
--- /dev/null
+++ b/src/views/Home/components/HomeRight/TaskAchievements.vue
@@ -0,0 +1,27 @@
+<script setup>
+import CommonTitle from '@/components/CommonTitle.vue';
+
+const detailsFun = () => {
+ console.log('details');
+};
+</script>
+<template>
+ <CommonTitle title="任务成果" @details="detailsFun" />
+ <div class="taskAchievements"></div>
+</template>
+
+<style scoped lang="scss">
+.taskAchievements {
+ width: 390px;
+ height: hToV(204);
+ background: linear-gradient(
+ 270deg,
+ #1f3e7a 0%,
+ rgba(31, 62, 122, 0.35) 79%,
+ rgba(31, 62, 122, 0) 100%
+ );
+ border-radius: 0px 0px 0px 0px;
+ opacity: 0.85;
+ margin: hToV(2) 0 hToV(21) 0;
+}
+</style>
--
Gitblit v1.9.3