bonus
/
pub_svc_platform_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

This commit is contained in:
BianLzhaoMin 2025-09-17 10:28:39 +08:00
parent e5ba12c6f8
commit cf09f1d57d
4 changed files with 91 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/TextTip/index.vue
View File

@ -243,7 +243,7 @@ export default {
animation: tooltipFadeIn 0.3s ease-out;
pointer-events: auto;
max-width: 90vw; /* 最大宽度为视口宽度的90% */
min-width: 200px;
min-width: 70vw;
}
.tooltip-content {

49
src/views/publicService/productCenter/components/case-container.vue
View File

@ -41,10 +41,19 @@
<div class="case-right-content">
<h3>{{ item.caseCompany }}</h3>
<!-- <div>{{ item.caseIntroduction }} </div> -->
<TextTip
:maxLines="2"
:content="item.caseIntroduction"
/>
<div>
<el-tooltip effect="dark" placement="top">
<div
slot="content"
class="product-info-tooltip"
>
{{ item.caseIntroduction }}
</div>
<div class="product-info-content">
{{ item.caseIntroduction }}
</div>
</el-tooltip>
</div>
</div>
</div>
</div>
@ -331,17 +340,17 @@ export default {
font-weight: 600;
color: #333333;
}
// div {
// // width: 100%;
// // height: 90px;
// font-size: 14px;
// color: #333333;
// line-height: 1.8;
// display: -webkit-box; /* 将元素作为弹性伸缩盒子模型显示 */
// -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式为垂直排列 */
// -webkit-line-clamp: 2; /* 限制显示的行数为4行 */
// overflow: hidden; /* 超出部分隐藏 */
// }
div {
// width: 100%;
// height: 90px;
font-size: 14px;
color: #333333;
line-height: 1.8;
display: -webkit-box; /* 将元素作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式为垂直排列 */
-webkit-line-clamp: 2; /* 限制显示的行数为4行 */
overflow: hidden; /* 超出部分隐藏 */
}
}
::v-deep .el-carousel__arrow {
@ -354,4 +363,14 @@ export default {
width: 18px;
border-radius: 2px;
}
.product-info-tooltip {
max-width: 80vw !important;
padding: 6px 8px;
border-radius: 12px;
font-size: 14px;
line-height: 1.5;
font-family: 'PingFang SC', sans-serif;
letter-spacing: 0.5px;
}
</style>

23
src/views/publicService/productCenter/product-case-list.vue
View File

@ -32,7 +32,18 @@
<h3>{{ item.caseCompany }}</h3>
<!-- <div>{{ item.caseIntroduction }} </div> -->
<TextTip :maxLines="2" :content="item.caseIntroduction" />
<!-- <TextTip :maxLines="2" :content="item.caseIntroduction" /> -->
<div>
<el-tooltip effect="dark" placement="top">
<div slot="content" class="product-info-tooltip">
{{ item.caseIntroduction }}
</div>
<div class="product-info-content">
{{ item.caseIntroduction }}
</div>
</el-tooltip>
</div>
</div>
</div>
</div>
@ -212,4 +223,14 @@ export default {
width: 18px;
border-radius: 2px;
}
.product-info-tooltip {
max-width: 80vw !important;
padding: 6px 8px;
border-radius: 12px;
font-size: 14px;
line-height: 1.5;
font-family: 'PingFang SC', sans-serif;
letter-spacing: 0.5px;
}
</style>

35
src/views/publicService/productCenter/product-detail.vue
View File

@ -42,7 +42,16 @@
</span>
</div>
<TextTip :content="productDetail.introduction" :maxLines="4" />
<div class="product-container">
<el-tooltip effect="dark" placement="top">
<div slot="content" class="product-info-tooltip">
{{ productDetail.introduction }}
</div>
<div class="product-info-content">
{{ productDetail.introduction }}
</div>
</el-tooltip>
</div>
</div>
</div>
@ -904,4 +913,28 @@ export default {
// width: 100%;
height: 79vh;
}
.product-info-content {
font-size: 14px;
font-family: 'PingFang SC', sans-serif;
letter-spacing: 1px;
line-height: 1.8;
cursor: pointer;
transition: all 0.3s ease;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4 !important;
overflow: hidden;
word-wrap: break-word;
}
.product-info-tooltip {
max-width: 80vw !important;
padding: 6px 8px;
border-radius: 12px;
font-size: 14px;
line-height: 1.5;
font-family: 'PingFang SC', sans-serif;
letter-spacing: 0.5px;
}
</style>