Browse Source

修改弹出框字体样式

zq-tableui
zq 1 month ago
parent
commit
d694ed9343
  1. 110
      src/style/theme/common.scss
  2. 15
      src/views/elementGroups.vue
  3. 8
      src/views/super/Ranking/RankDetail.vue
  4. 11
      src/views/super/Ranking/RankList.vue

110
src/style/theme/common.scss

@ -151,6 +151,21 @@ body {
}
}
.custom-popover {
position: fixed !important;
max-height: 290px;
overflow-y: auto;
margin-top: 0 !important;
margin-left: 0 !important;
transform: none !important;
}
.tableHeaderSelect ::v-deep .el-input__inner{
font-size: 14px;
font-weight: normal;
letter-spacing: 0.08em;
font-family: Microsoft YaHei UI;
color: #1E2226;
}
.ellipsis{
}
@ -181,7 +196,8 @@ body {
}
.min-flex-right {
min-width: 1033px;
max-width: 1556px;
max-width: 100%;
// max-width: 1556px;
width: 84.75%;
margin: 0 auto;
.flex-common{
@ -260,6 +276,9 @@ body {
}
// end---------
//radio 发生change事件时会有报错
::v-deep .el-radio__original {
display: none !important;
@ -331,6 +350,7 @@ body {
width: 88px;
height: 33px;
border-radius: 2px;
font-size: 12px;
}
.el-button--primary,.el-button--normal{
background: #006AFF;
@ -712,7 +732,9 @@ body {
justify-content: flex-start;
}
}
.el-table__header colgroup col {
width: auto !important;
}
.form-top-icon {
display: flex;
align-items: center;
@ -730,6 +752,80 @@ body {
// table start
/* 确保单元格内容超出时显示省略号 */
// .cell-content {
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// max-width: 100px; /* 根据实际需要调整 */
// }
.nowrap{
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 小屏幕下调整 */
@media screen and (max-width: 1440px) {
.el-table th.el-table__cell > .cell{
white-space: nowrap !important;
}
.cell-content {
display: inline-block;
max-width:60%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.svg-icon-wrapper{
width: 12px !important;
height: 12px !important;
}
}
@media screen and (min-width: 1321px) and (max-width: 1440px){
.el-table{
th,td{
font-size: 13px !important;
}
}
body{
font-size: 13px !important;
}
.tableHeaderSelect .el-input__inner{
font-size: 13px !important;
}
}
@media screen and (max-width: 1320px){
body{
font-size: 12px !important;
}
.el-table{
th,td{
font-size: 12px !important;
}
}
.tableHeaderSelect .el-input__inner{
font-size: 12px !important;
}
}
@media screen and (min-width: 1440px) {
.el-table{
th,td{
font-size: 14px !important;
}
}
.cell-content {
white-space: normal;
max-width: none;
}
.svg-icon-wrapper{
// width: 12px !important;
// height: 12px !important;
}
}
.el-table{
min-height: 258px;
th,td{
@ -743,6 +839,10 @@ body {
}
td{
}
.el-table__header .el-input--suffix{
display: flex;
align-items: center;
}
}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
background-color: #F6F7FA;
@ -774,7 +874,7 @@ body {
}
.el-table .el-table__cell {
padding: 18px 0;
padding: 16px 0 !important;
}
.el-table .cell {
@ -788,11 +888,13 @@ body {
// 表格行内小图标 默认隐藏
.el-table .svg-icon-wrapper{
display: none !important;
margin-left: 8px;
}
//划过时 显示
.el-table__row:hover{
.el-table .el-table__row:hover{
.svg-icon-wrapper{
display: block !important;
margin-left: 8px;
}
}
// table end

15
src/views/elementGroups.vue

@ -22,17 +22,6 @@
:multiple="true" autoColumn="true" :loading="tableLoading">
<!-- <template slot="header"> -->
<el-table-column width="180" fixed="left" label="名称(固定左)"></el-table-column>
<!-- <el-table-column prop="type">
<template slot="header">
<GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions"
defaultValue="全部检测类型" @change="changeSelectType" />
</template>
<template slot-scope="scope">
{{ type2name[scope.row.type] }}
</template>
</el-table-column> -->
<el-table-column prop="created_at" label="时间" width="200">
<template slot-scope="scope">
<div class="flex cell_render">
@ -43,7 +32,7 @@
'0' ? '文字居中' : '文字居中' }}</span>
</GuipToolTip>
<GuipToolTip content="图标居中">
<svg-icon size="16" :path="require('@/assets/register/tableEdit.svg')"
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')"
:color="'#8A9099'" :hoverColor="'#006AFF'" />
</GuipToolTip>
@ -58,7 +47,7 @@
scope.row.payment
==
'0' ? '单元格局中' : '单元格局中' }}</span>
<svg-icon size="16" :path="require('@/assets/register/tableEdit.svg')"
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')"
:color="'#8A9099'" :hoverColor="'#006AFF'" />
</div>

8
src/views/super/Ranking/RankDetail.vue

@ -61,7 +61,7 @@
<div class="flex-between flex pop-top">
<h3>
{{ row.value_1 }} {{ rank_type_desc[dataRank] }}
<span @click="goLookMoreData(row.value_1)">查看更多</span>
<span class="lookMore" @click="goLookMoreData(row.value_1)">查看更多</span>
</h3>
<span class="flex point" @click="closePop(row,'id')">
关闭<img src="@/assets/register/close.svg">
@ -123,7 +123,7 @@
<div class="flex-between flex pop-top">
<h3>
{{ row.value_1 }} {{ rank_type_desc[dataRank] }}
<span @click="goLookMoreData(row.value_1)">查看更多</span>
<span class="lookMore" @click="goLookMoreData(row.value_1)">查看更多</span>
</h3>
<span class="flex point" @click="closePop(row,'id')">
关闭<img src="@/assets/register/close.svg">
@ -539,4 +539,8 @@ export default {
}
}
}
.lookMore {
cursor: pointer;
font-weight: 400;
}
</style>

11
src/views/super/Ranking/RankList.vue

@ -89,7 +89,7 @@
<div class="flex-between flex pop-top">
<h3>
{{ text }} {{ row.name }} {{ rank_type_desc[dataRank] }}
<span @click="goLookMoreData(row.id)">查看更多</span>
<span class="lookMore" @click="goLookMoreData(row.id)">查看更多</span>
</h3>
<span class="flex point" @click="closePop(row,'id')">
关闭<img src="@/assets/register/close.svg">
@ -127,7 +127,7 @@
<div class="flex-between flex pop-top">
<h3>
{{ text }} {{ row.name }} {{ rank_type_desc[dataRank] }}
<span @click="goLookMoreData(row.id)">查看更多</span>
<span class="lookMore" @click="goLookMoreData(row.id)">查看更多</span>
</h3>
<span class="flex point" @click="closePop(row,'id')">
关闭<img src="@/assets/register/close.svg">
@ -161,7 +161,7 @@
<div class="flex-between flex pop-top">
<h3>
{{ text }} {{ row.name }} {{ rank_type_desc[dataRank] }}
<span @click="goLookMoreRank(row.id)">查看更多</span>
<span class="lookMore" @click="goLookMoreRank(row.id)">查看更多</span>
</h3>
<span class="flex point" @click="closePop(row,'id')">
关闭<img src="@/assets/register/close.svg">
@ -635,7 +635,10 @@ export default {
.color-red{
color: #FF4D4F;
}
.lookMore {
cursor: pointer;
font-weight: 400;
}
.pop-wrap {
display: flex;
flex-direction: column;

Loading…
Cancel
Save