| 提交 | 用户 | age | ||
| ec4248 | 1 | <template> |
| S | 2 | <div :class="prefixCls"> |
| 3 | <Row :class="`${prefixCls}-top`"> | |
| 4 | <Col :span="4" :class="`${prefixCls}-col`"> | |
| 5 | <div :class="`${prefixCls}-top__avatar`"> | |
| 6 | <img width="50" :src="avatar" /> | |
| 7 | </div> | |
| 8 | </Col> | |
| 9 | <Col :span="20" :class="`${prefixCls}-col`"> | |
| 10 | <div class="mb-10px"> | |
| 11 | <div class="mb-5px"> | |
| 12 | Vben | |
| 13 | <Icon | |
| 14 | icon="majesticons:open" | |
| 15 | class="mr-15px cursor-pointer" | |
| 16 | @click="" | |
| 17 | :style="{ color: 'hotpink' }" | |
| 18 | :size="16" | |
| 19 | /> | |
| 20 | </div> | |
| 21 | <div>海纳百川，有容乃大</div> | |
| 22 | </div> | |
| 23 | <div class="mb-10px flex"> | |
| 24 | <div> | |
| 25 | <span>跟进人：</span> | |
| 26 | <span>111</span> | |
| 27 | </div> | |
| 28 | <div class="ml-10px flex"> | |
| 29 | <span>线索评分<BasicHelp :text="['评分规则：1，评分=各维度分数（所打分数*该维度权重）的总和；', '2，如只有首次评分，则以首次评分为准；如有两次评分，则取两次评分的平均值。']"/>：</span> | |
| 30 | <span>10</span> | |
| 31 | </div> | |
| 32 | </div> | |
| 33 | <div class=""> | |
| 34 | <template v-for="tag in tags" :key="tag"> | |
| 35 | <Tag class="mb-2"> | |
| 36 | {{ tag }} | |
| 37 | </Tag> | |
| 38 | </template> | |
| f353bc | 39 | <TagSelector class="pb-10px inline-block mt-10px"></TagSelector> |
| ec4248 | 40 | </div> |
| S | 41 | |
| 42 | </Col> | |
| 43 | <!-- <Col :span="8" :class="`${prefixCls}-col`">--> | |
| 44 | <!-- <CollapseContainer :class="`${prefixCls}-top__team`" title="团队" :canExpand="false">--> | |
| 45 | <!-- <div v-for="(team, index) in teams" :key="index" :class="`${prefixCls}-top__team-item`">--> | |
| 46 | <!-- <Icon :icon="team.icon" :color="team.color" />--> | |
| 47 | <!-- <span>{{ team.title }}</span>--> | |
| 48 | <!-- </div>--> | |
| 49 | <!-- </CollapseContainer>--> | |
| 50 | <!-- </Col>--> | |
| 51 | </Row> | |
| 52 | <div :class="`${prefixCls}-bottom`"> | |
| 53 | <Tabs> | |
| 54 | <template v-for="item in achieveList" :key="item.key"> | |
| 55 | <TabPane :tab="item.name"> | |
| abcc94 | 56 | |
| S | 57 | <ScrollContainer class="scroll-wrap"> |
| 58 | <component :is="tabs[item.component]" /> | |
| 59 | </ScrollContainer> | |
| 60 | ||
| ec4248 | 61 | </TabPane> |
| S | 62 | </template> |
| 63 | </Tabs> | |
| 64 | </div> | |
| 65 | </div> | |
| 66 | </template> | |
| 67 | ||
| 68 | <script lang="ts" setup> | |
| 69 | import Icon from '@/components/Icon/Icon.vue'; | |
| 70 | import { Col, Row, Tabs, Tag } from 'ant-design-vue'; | |
| 71 | import { computed } from 'vue'; | |
| 72 | import Dynamic from './Dynamic.vue'; | |
| 73 | import Detail from './Detail.vue'; | |
| 74 | import Schedule from './Schedule.vue'; | |
| 75 | ||
| 76 | import headerImg from '@/assets/images/header.jpg'; | |
| 77 | import { useUserStore } from '@/store/modules/user'; | |
| 78 | import { achieveList, tags } from './data'; | |
| 79 | import {BasicHelp} from "@/components/Basic"; | |
| abcc94 | 80 | import ScrollContainer from "@/components/Container/src/ScrollContainer.vue"; |
| S | 81 | import {TagSelector} from "@/components/TagSelector"; |
| ec4248 | 82 | |
| S | 83 | const userStore = useUserStore(); |
| 84 | const TabPane = Tabs.TabPane; | |
| 85 | const tabs = { | |
| 86 | Detail, | |
| 87 | Dynamic, | |
| 88 | Schedule, | |
| 89 | }; | |
| 90 | const prefixCls = 'clues-drawer'; | |
| 91 | const avatar = computed(() => userStore.getUserInfo.avatar || headerImg); | |
| 92 | </script> | |
| 93 | <style lang="less" scoped> | |
| 94 | .clues-drawer { | |
| 95 | &-col:not(:last-child) { | |
| 96 | padding: 0 10px; | |
| 97 | ||
| 98 | //&:not(:last-child) { | |
| 99 | // border-right: 1px dashed rgb(206 206 206 / 50%); | |
| 100 | //} | |
| 101 | } | |
| 102 | ||
| 103 | &-top { | |
| 104 | //margin: 16px 16px 12px; | |
| 105 | //padding: 10px; | |
| 106 | border-radius: 3px; | |
| 107 | background-color: @component-background; | |
| 108 | ||
| 109 | &__avatar { | |
| 110 | text-align: center; | |
| 111 | ||
| 112 | img { | |
| 113 | margin: auto; | |
| 114 | border-radius: 50%; | |
| 115 | } | |
| 116 | ||
| 117 | span { | |
| 118 | display: block; | |
| 119 | font-size: 20px; | |
| 120 | font-weight: 500; | |
| 121 | } | |
| 122 | ||
| 123 | div { | |
| 124 | margin-top: 3px; | |
| 125 | font-size: 12px; | |
| 126 | } | |
| 127 | } | |
| 128 | ||
| 129 | &__detail { | |
| 130 | margin-top: 15px; | |
| 131 | padding-left: 20px; | |
| 132 | } | |
| 133 | ||
| 134 | &__team { | |
| 135 | &-item { | |
| 136 | display: inline-block; | |
| 137 | padding: 4px 24px; | |
| 138 | } | |
| 139 | ||
| 140 | span { | |
| 141 | margin-left: 3px; | |
| 142 | } | |
| 143 | } | |
| 144 | } | |
| 145 | ||
| 146 | &-bottom { | |
| 147 | //margin: 0 16px 16px; | |
| 148 | //padding: 10px; | |
| 149 | border-radius: 3px; | |
| 150 | background-color: @component-background; | |
| 151 | } | |
| abcc94 | 152 | .scroll-wrap{ |
| cb1651 | 153 | height: calc(100vh - 310px); |
| abcc94 | 154 | } |
| cb1651 | 155 | //:deep(.scrollbar__wrap) { |
| S | 156 | // padding: 10px !important; |
| 157 | //} | |
| ec4248 | 158 | } |
| S | 159 | </style> |
