数据产品上架添加选中效果
Showing
1 changed file
with
22 additions
and
6 deletions
| ... | @@ -790,8 +790,11 @@ const btnClick = (item) => { | ... | @@ -790,8 +790,11 @@ const btnClick = (item) => { |
| 790 | } | 790 | } |
| 791 | } | 791 | } |
| 792 | 792 | ||
| 793 | const currExchangeGuid = ref(''); | ||
| 794 | |||
| 793 | const cardBtnClick = (item) => { | 795 | const cardBtnClick = (item) => { |
| 794 | console.log(item, '------------------') | 796 | console.log(item, '------------------') |
| 797 | currExchangeGuid.value = item.exchangeGuid; | ||
| 795 | getTableData(item.exchangeGuid); | 798 | getTableData(item.exchangeGuid); |
| 796 | } | 799 | } |
| 797 | 800 | ||
| ... | @@ -920,22 +923,23 @@ const formInfo = ref<any>({ | ... | @@ -920,22 +923,23 @@ const formInfo = ref<any>({ |
| 920 | </div> | 923 | </div> |
| 921 | <div v-loading="flowDetailLoading"> | 924 | <div v-loading="flowDetailLoading"> |
| 922 | <div class="list-content" v-if="demandListData.length > 0"> | 925 | <div class="list-content" v-if="demandListData.length > 0"> |
| 923 | <div class="card-content" v-for="item in demandListData" :key="item.guid" @click="cardBtnClick(item)"> | 926 | <div class="card-content" v-for="item in demandListData" :key="item.guid" @click="cardBtnClick(item)" :class="{ active: currExchangeGuid == item.exchangeGuid }"> |
| 924 | <div class="header"> | 927 | <div class="header"> |
| 925 | <div class="header-top"> | 928 | <div class="header-top"> |
| 926 | <img class="left-img" | 929 | <img class="left-img" |
| 927 | :src="(item.picUrl && typeof item.picUrl == 'string') ? item.picUrl : defaultItemLogo" alt="" /> | 930 | :src="(item.picUrl && typeof item.picUrl == 'string') ? item.picUrl : defaultItemLogo" alt="" /> |
| 928 | <div class="title">{{ item.exchangeName ?? '--' }}</div> | 931 | <div class="title"> <ellipsis-tooltip :content="item.exchangeName ?? '--'" class-name="w100f" |
| 932 | :refName="'tooltipOver'"></ellipsis-tooltip></div> | ||
| 929 | </div> | 933 | </div> |
| 930 | <div class="right-main"> | 934 | <div class="right-main"> |
| 931 | <div class="count-group"> | 935 | <div class="count-group"> |
| 932 | <div class="count-item"> | 936 | <div class="count-item"> |
| 933 | <div class="item-label">已上架产品数</div> | 937 | <div class="item-label">已上架产品数</div> |
| 934 | <div class="item-num">{{ item.listingNum || '--' }}</div> | 938 | <div class="item-num">{{ changeNum(item.listingNum || 0) }}</div> |
| 935 | </div> | 939 | </div> |
| 936 | <div class="count-item"> | 940 | <div class="count-item"> |
| 937 | <div class="item-label">审批中产品数</div> | 941 | <div class="item-label">审批中产品数</div> |
| 938 | <div class="item-num">{{ item.underReviewNum || '--' }}</div> | 942 | <div class="item-num">{{ changeNum(item.underReviewNum || 0) }}</div> |
| 939 | </div> | 943 | </div> |
| 940 | </div> | 944 | </div> |
| 941 | </div> | 945 | </div> |
| ... | @@ -1000,15 +1004,27 @@ const formInfo = ref<any>({ | ... | @@ -1000,15 +1004,27 @@ const formInfo = ref<any>({ |
| 1000 | display: flex; | 1004 | display: flex; |
| 1001 | 1005 | ||
| 1002 | flex-wrap: wrap; | 1006 | flex-wrap: wrap; |
| 1003 | padding: 0 8px; | 1007 | padding: 0 0px 0px 8px; |
| 1004 | 1008 | ||
| 1005 | .card-content { | 1009 | .card-content { |
| 1006 | width: 300px; | 1010 | width: 290px; |
| 1007 | // box-shadow: 0 0 0 1px #d9d9d9; | 1011 | // box-shadow: 0 0 0 1px #d9d9d9; |
| 1008 | border: 1px solid #d9d9d9; | 1012 | border: 1px solid #d9d9d9; |
| 1009 | border-radius: 3px; | 1013 | border-radius: 3px; |
| 1010 | margin-right: 12px; | 1014 | margin-right: 12px; |
| 1011 | margin-bottom: 12px; | 1015 | margin-bottom: 12px; |
| 1016 | cursor: pointer; | ||
| 1017 | |||
| 1018 | &:hover { | ||
| 1019 | border: 1px solid var(--el-color-primary); | ||
| 1020 | } | ||
| 1021 | |||
| 1022 | &.active { | ||
| 1023 | border: 1px solid var(--el-color-primary); | ||
| 1024 | .header { | ||
| 1025 | background-color: #ebf6f7; | ||
| 1026 | } | ||
| 1027 | } | ||
| 1012 | 1028 | ||
| 1013 | .header { | 1029 | .header { |
| 1014 | display: flex; | 1030 | display: flex; | ... | ... |
-
Please register or sign in to post a comment