b071cb83 by lihua

数据产品上架添加选中效果

1 parent 5e511949
...@@ -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;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!