zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改气泡弹出框定位问题

zq-ui
zq 1 week ago
parent
633231ae79
commit
f6cc5b4acc
2 changed files with 48 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/style/theme/common.scss
  2. 58
      src/views/super/Ranking/RankBatchList.vue

8
src/style/theme/common.scss
View File

@ -951,6 +951,14 @@ body {
.el-popover {
padding: 32px;
}
::v-deep .custom-popover {
position: fixed !important;
max-height: 290px;
overflow-y: auto;
margin-top: 0 !important;
margin-left: 0 !important;
transform: none !important;
}
// 日历区间背景颜色
.el-date-table td.in-range div {

58
src/views/super/Ranking/RankBatchList.vue
View File

@ -47,20 +47,23 @@
<el-table-column v-else prop="name" :label="type_desc[dataType]" width="150"></el-table-column>
<el-table-column v-for="(field, index) in valueFields" :key="field" :label="labels[index]"
:prop="String(index + 1)"
:prop="String(index + 1)"
:render-header=" (h, scope) => index == 3 ? renderHeaderWithIcon(h, scope, require('@/assets/require.svg')) : scope.column.label"
sortable="custom" min-width="170">
<!--产品利润排行展示查看更多-->
<template v-if="index == 3 && dataRank == 1" v-slot="{ row, $index }">
<el-popover v-model="row.id_popover" placement="top" trigger="manual"
<!-- <el-popover v-model="row.id_popover" placement="top" trigger="manual"
:ref="`popover-${$index}`" :append-to-body="false" :visible-arrow="true"
popper-class="custom-popover" @show="popshow">
popper-class="custom-popover" @show="popshow"> -->
<el-popover v-model="row.id_popover" :ref="`popover-${row.id}`"
placement="top" trigger="manual" :append-to-body="false" :visible-arrow="true"
popper-class="custom-popover" @show="popshow" >
<div v-if="type != 'agent'" class="pop-wrap">
<div class="flex-between flex pop-top">
<h3>
{{ text }} {{ row.name }}
{{ row.name }}
<span class="lookMore" @click="goLookMoreData(row.id)">查看更多</span>
</h3>
<span class="flex point" @click="closePop(row,'id')">
@ -82,7 +85,7 @@
<div v-else class="pop-wrap">
<div class="flex-between flex pop-top">
<h3>
{{ text }} {{ row.name }}
{{ row.name }}
<span class="lookMore" @click="goLookCheckTypeRank(row.id)">查看更多</span>
</h3>
<span class="flex point" @click="closePop(row,'id')">
@ -114,15 +117,15 @@
<div class="flex" slot="reference">
{{ row[field] }}
<svg-icon v-if="row[field] > 0" :size="14"
:path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'"
:hoverColor="'#006AFF'" @click="handleClick(row, $index, 'id')" />
<svg-icon :size="14" v-if="row[field] *100 != 0"
:path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'"
:hoverColor="'#006AFF'" @click="handleClick(row, $index, 'id')" />
</div>
</el-popover>
</template>
<template v-else slot-scope="scope" >
<div class="flex" >
<template v-else slot-scope="scope">
<div class="flex">
{{ scope.row[field] }}
</div>
</template>
@ -133,9 +136,10 @@
:render-header=" (h, scope) => renderHeaderWithIcon(h, scope, require('@/assets/require.svg')) "
key="top" prop="top" label="代理商排行" width="250" fixed="right">
<template v-slot="{ row, $index }">
<el-popover v-model="row.id_popover_2" placement="top" trigger="manual"
popper-class="custom-popover"
:ref="`popover_2-${$index}`" @show="popshow" :append-to-body="false" :visible-arrow="true">
<el-popover v-model="row.id_popover_2" :ref="`popover_2-${$index}`" placement="top" trigger="manual"
popper-class="custom-popover" @show="popshow" :append-to-body="false"
:visible-arrow="true"
>
<div class="pop-wrap">
<div class="flex-between flex pop-top">
<h3>
@ -152,7 +156,7 @@
<el-table-column prop="value_1" width="200" label="销售额"></el-table-column>
</el-table>
</div>
<span v-if="top_list[row.id]" slot="reference">
<span v-if="top_list[row.id]" slot="reference" class="flex">
No.1 {{ top_list[row.id]['name'] }}
<svg-icon :size="14" @click="handleClick2(row, $index, 'id')"
:path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'"
@ -177,6 +181,7 @@ import GuipTable from '@/components/GuipTable.vue';
import CustomDropdown from '@/components/CustomDropdown.vue';
import SvgIcon from '@/components/SvgIcon.vue';
import GuipToolTip from '@/components/GuipToolTip.vue';
// import HoverImage from '@/components/super/HoverImage.vue';
export default {
name: 'rank_batch_list',
props: {
@ -372,6 +377,7 @@ export default {
}
},
handleClick2(row, index, type) {
console.log('执行了');
// 关闭其他行的弹框
this.tableData.forEach((item, i) => {
item[type + '_popover'] = false;
@ -406,7 +412,7 @@ export default {
})
},
handleSortChange({ prop, order }) {
console.log('prop--排序',prop);
console.log('prop--排序', prop);
this.sort_by = 4;
this.sort_order = 2;
if (order == 'ascending') {
@ -598,16 +604,26 @@ export default {
}
</script>
<style scoped lang="scss">
.pagetitle{
h4{
.pagetitle {
h4 {
margin-bottom: 0;
}
}
::v-deep .custom-popover {
position: fixed !important;
max-height: 290px;
overflow-y: auto;
margin-top: 0 !important;
margin-left: 0 !important;
transform: none !important;
}
.lookMore {
cursor: pointer;
font-weight: 400;
}
.beforeNotice{
.beforeNotice {
margin-top: 12px;
border-radius: 4px;
background: #F2F7FF;
@ -615,12 +631,14 @@ export default {
padding: 20px 14px;
color: #1E2226;
letter-spacing: 0.08em;
.noticeTop{
.noticeTop {
gap: 8px;
margin-bottom: 12px;
}
.noticeBot{
.noticeBot {
gap: 10px;
}

Write Preview
Loading…
Cancel
Save