From 75f043dfa6660716364e66ee0b3cf99f44255686 Mon Sep 17 00:00:00 2001 From: DYL0109 <dn18191638832@163.com> Date: 星期三, 16 四月 2025 19:20:36 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/develop1.0' into dyl_dev --- zhitan-vue/src/components/BaseCard/BaseCard.vue | 49 ++++++++++++++++++++++++++++++++++--------------- 1 files changed, 34 insertions(+), 15 deletions(-) diff --git a/zhitan-vue/src/components/BaseCard/BaseCard.vue b/zhitan-vue/src/components/BaseCard/BaseCard.vue index f0bc7f3..47c625b 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,33 @@ 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; + position: relative; + padding-left: 12px; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 5px; + height: 18px; + background-color: #3883FA; + border-radius: 2px; + } } } .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 +101,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 +109,8 @@ } .is-li { - background: #2E86EA; - border: 1px solid #2E86EA; + background: #2e86ea; + border: 1px solid #2e86ea; } } } -- Gitblit v1.9.3