From 6f604e6e228dc33ff88b55190c0e3793177d21ce Mon Sep 17 00:00:00 2001
From: ali <ali9696@163.com>
Date: 星期五, 28 二月 2025 11:41:14 +0800
Subject: [PATCH] basecard&linechart
---
zhitan-vue/src/components/BaseCard/index.vue | 5 ++---
zhitan-vue/src/components/Echarts/LineChart.vue | 2 +-
zhitan-vue/src/components/BaseCard/BaseCard.vue | 35 ++++++++++++++++++++---------------
3 files changed, 23 insertions(+), 19 deletions(-)
diff --git a/zhitan-vue/src/components/BaseCard/BaseCard.vue b/zhitan-vue/src/components/BaseCard/BaseCard.vue
index f0bc7f3..f5b431e 100644
--- a/zhitan-vue/src/components/BaseCard/BaseCard.vue
+++ b/zhitan-vue/src/components/BaseCard/BaseCard.vue
@@ -5,8 +5,13 @@
</div>
<div class="mycard-content">
<div class="data-box" v-if="props.tabArray.length > 0">
- <div v-for="(item, i) in props.tabArray" :key="i" class="li-box" :class="isActive == item.value ? 'is-li' : ''"
- @click="changeActive(item.value)">
+ <div
+ v-for="(item, i) in props.tabArray"
+ :key="i"
+ class="li-box"
+ :class="isActive == item.value ? 'is-li' : ''"
+ @click="changeActive(item.value)"
+ >
{{ item.label }}
</div>
</div>
@@ -16,7 +21,7 @@
</template>
<script setup>
-const emit = defineEmits();
+const emit = defineEmits()
const props = defineProps({
title: {
type: String,
@@ -30,16 +35,16 @@
type: Array,
default: () => [],
},
-});
+})
const data = reactive({
isActive: "DAY",
-});
-const { isActive } = toRefs(data);
-changeActive(isActive.value);
+})
+const { isActive } = toRefs(data)
+changeActive(isActive.value)
function changeActive(value) {
- isActive.value = value;
- emit("changeActive", isActive.value);
+ isActive.value = value
+ emit("changeActive", isActive.value)
}
</script>
@@ -55,19 +60,19 @@
align-items: center;
height: 3.7037vh; //40
padding-left: 2.1354vw; //41px;
- background: url('../../assets/images/basecard/title_bg.png') no-repeat;
+ background: url("../../assets/images/basecard/title_bg.png") no-repeat;
background-size: auto 100%;
.name {
font-family: YouSheBiaoTiHei;
- font-size: 1.2500vw; //24px;
+ font-size: 1.25vw; //24px;
color: #fff;
}
}
.mycard-content {
border: 1px solid;
- border-image: linear-gradient(0deg, #0A3C86, #000) 1;
+ border-image: linear-gradient(0deg, #0a3c86, #000) 1;
background: linear-gradient(0deg, rgba(18, 111, 216, 0.2) 0%, rgba(18, 111, 216, 0) 100%);
position: relative;
@@ -82,7 +87,7 @@
z-index: 1;
.li-box {
- border: 1px solid #2E86EA;
+ border: 1px solid #2e86ea;
cursor: pointer;
text-align: center;
padding: 0.3704vh 0.3125vw;
@@ -90,8 +95,8 @@
}
.is-li {
- background: #2E86EA;
- border: 1px solid #2E86EA;
+ background: #2e86ea;
+ border: 1px solid #2e86ea;
}
}
}
diff --git a/zhitan-vue/src/components/BaseCard/index.vue b/zhitan-vue/src/components/BaseCard/index.vue
index 398a771..f434aeb 100644
--- a/zhitan-vue/src/components/BaseCard/index.vue
+++ b/zhitan-vue/src/components/BaseCard/index.vue
@@ -8,8 +8,7 @@
</template>
<script setup>
-defineProps(['title'])
-
+defineProps(["title"])
</script>
<style lang="scss" scoped>
@@ -20,7 +19,7 @@
border-radius: 10px 10px 10px 10px;
border: 1px solid #22408c;
padding-bottom: 10px;
-
+
.mycard-title {
display: flex;
justify-content: flex-start;
diff --git a/zhitan-vue/src/components/Echarts/LineChart.vue b/zhitan-vue/src/components/Echarts/LineChart.vue
index c4c0de6..ef9af8b 100644
--- a/zhitan-vue/src/components/Echarts/LineChart.vue
+++ b/zhitan-vue/src/components/Echarts/LineChart.vue
@@ -59,7 +59,7 @@
name: item.name,
type: props.chartType, // 鏍规嵁浼犲叆绫诲瀷娓叉煋
data: item.data,
- barWidth: "16",
+ barWidth: props.chartData.barWidth || "16",
itemStyle: {
borderRadius: [15, 15, 0, 0],
},
--
Gitblit v1.9.3