|
|
@@ -0,0 +1,264 @@
|
|
|
+<template>
|
|
|
+ <div class="card-view">
|
|
|
+ <div class="card-title">
|
|
|
+ <div class="title-left">
|
|
|
+ <p>{{ props.title }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="title-right">
|
|
|
+ <ul v-if="props.topTabs">
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in props.topTabs"
|
|
|
+ :key="index"
|
|
|
+ :class="index == topTabsIndex ? 'liActive' : ''"
|
|
|
+ @click="topTabsClick(item, index)"
|
|
|
+ >
|
|
|
+ <p>{{ item }}</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <el-select
|
|
|
+ v-if="topTabsYear"
|
|
|
+ v-model="yearModel"
|
|
|
+ class="m-2"
|
|
|
+ placeholder="选择年份"
|
|
|
+ style="width: 100px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in yearOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tabs-Box" v-if="initTabsShow()">
|
|
|
+ <div class="tabs-left">
|
|
|
+ <ul v-if="props.leftTabs">
|
|
|
+ <el-radio-group v-model="radioModel" @change="radioGroupChange">
|
|
|
+ <el-radio
|
|
|
+ v-for="(item, index) in props.leftTabs"
|
|
|
+ :label="index"
|
|
|
+ :key="index"
|
|
|
+ size="large"
|
|
|
+ >{{ item }}</el-radio
|
|
|
+ >
|
|
|
+ </el-radio-group>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="tabs-right">
|
|
|
+ <ul v-if="props.rightTabs">
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in props.rightTabs"
|
|
|
+ :key="index"
|
|
|
+ :class="index == rightTabsIndex ? 'liActive' : ''"
|
|
|
+ @click="rightTabsClick(item, index)"
|
|
|
+ >
|
|
|
+ <p>{{ item }}</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <slot></slot>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+const props = defineProps({
|
|
|
+ title: String,
|
|
|
+ leftTabs: Array,
|
|
|
+ rightTabs: Array,
|
|
|
+ topTabs: Array,
|
|
|
+ topTabsYear: Boolean
|
|
|
+})
|
|
|
+const emit = defineEmits(['leftClick', 'rightClick', 'topClick'])
|
|
|
+const yearOptions = ref([
|
|
|
+ {
|
|
|
+ label: '2024',
|
|
|
+ value: '2024'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '2023',
|
|
|
+ value: '2023'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '2022',
|
|
|
+ value: '2022'
|
|
|
+ }
|
|
|
+])
|
|
|
+const yearModel = ref('2024')
|
|
|
+const radioModel = ref(0)
|
|
|
+const rightTabsIndex = ref(0)
|
|
|
+const topTabsIndex = ref(0)
|
|
|
+const initTabsShow = () => {
|
|
|
+ if (props.leftTabs || props.rightTabs) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+}
|
|
|
+const rightTabsClick = (item, index) => {
|
|
|
+ rightTabsIndex.value = index
|
|
|
+ emit('rightClick', index)
|
|
|
+}
|
|
|
+
|
|
|
+const topTabsClick = (item, index) => {
|
|
|
+ topTabsIndex.value = index
|
|
|
+ emit('topClick', index)
|
|
|
+}
|
|
|
+const radioGroupChange = (v) => {
|
|
|
+ emit('leftClick', props.leftTabs[v])
|
|
|
+}
|
|
|
+
|
|
|
+/** 初始化 **/
|
|
|
+onMounted(() => {
|
|
|
+ initTabsShow()
|
|
|
+})
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+p,
|
|
|
+span,
|
|
|
+h4,
|
|
|
+h5,
|
|
|
+h6 {
|
|
|
+ font-family: AlibabaPuHuiTiR;
|
|
|
+}
|
|
|
+.card-view {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+
|
|
|
+ .card-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 46px;
|
|
|
+ background: url(@/assets/imgs/oaView/card-title-lone.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-left: 45px;
|
|
|
+ .title-left {
|
|
|
+ p {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: AlibabaPuHuiTiB;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ffffff;
|
|
|
+ background: linear-gradient(0deg, #ffff 20%, #def1ff 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title-right {
|
|
|
+ margin-top: 8px;
|
|
|
+ height: 100%;
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 64px;
|
|
|
+ height: 24px;
|
|
|
+ border: 2px solid #0d6795;
|
|
|
+ background-color: transparent;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 5px;
|
|
|
+ p {
|
|
|
+ color: #7ac1ec;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .liActive {
|
|
|
+ background-color: #29a4e4;
|
|
|
+ p {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabs-Box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 40px;
|
|
|
+ padding-right: 0;
|
|
|
+ .tabs-left {
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ li {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabs-right {
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 24px;
|
|
|
+ border: 2px solid #0d6795;
|
|
|
+ background-color: transparent;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 5px;
|
|
|
+ padding: 0 4px;
|
|
|
+ p {
|
|
|
+ color: #7ac1ec;
|
|
|
+ font-size: 16px;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .liActive {
|
|
|
+ background-color: #29a4e4;
|
|
|
+ p {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-content {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 86px);
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.tabs-left) {
|
|
|
+ .el-radio__label {
|
|
|
+ color: #7ac1ec;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: AlibabaPuHuiTiR;
|
|
|
+ }
|
|
|
+ .el-radio {
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.title-right) {
|
|
|
+ .el-select {
|
|
|
+ .el-input {
|
|
|
+ }
|
|
|
+ .el-input__wrapper {
|
|
|
+ background-color: transparent;
|
|
|
+ border-radius: 0;
|
|
|
+ border-color: #0d6795 !important;
|
|
|
+ }
|
|
|
+ input,
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wuhongbo
