Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c4107ec5 1 parent 1bb6d5a6

fix 解决方案优化移动端显示

Inline Side-by-side
Showing 2 changed files with 35 additions and 18 deletions
1 <!-- 1 <!--
2 * @Date: 2024-09-29 15:49:27 2 * @Date: 2024-09-29 15:49:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-12-05 16:07:14 4 + * @LastEditTime: 2024-12-09 13:46:50
5 * @FilePath: /hager/src/views/solution/detail.vue 5 * @FilePath: /hager/src/views/solution/detail.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -78,15 +78,16 @@ ...@@ -78,15 +78,16 @@
78 <div class="card"> 78 <div class="card">
79 <img :src="item.cover" alt="图片" class="card-image"> 79 <img :src="item.cover" alt="图片" class="card-image">
80 <div class="card-content"> 80 <div class="card-content">
81 - <h3 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ item.post_title }}</h3> 81 + <!-- <h3 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ item.post_title }}</h3> -->
82 - <p class="clamp-text" v-html="item.post_description "></p> 82 + <h3 class="clamp-title">{{ item.post_title }}</h3>
83 + <!-- <p class="clamp-text" v-html="item.post_description "></p> -->
83 <i class="el-icon-right"></i> 84 <i class="el-icon-right"></i>
84 </div> 85 </div>
85 </div> 86 </div>
86 </div> 87 </div>
87 </swiper-slide> 88 </swiper-slide>
88 </swiper> 89 </swiper>
89 - <div v-if="success_data_list.length > SuccessSlidesPerView || is_xs" class="hager-product-center-more xs"> 90 + <div v-if="success_data_list.length > SuccessSlidesPerView || (is_xs && success_data_list.length > 2)" class="hager-product-center-more xs">
90 <!-- <hager-more></hager-more> --> 91 <!-- <hager-more></hager-more> -->
91 <div class="xs-control"> 92 <div class="xs-control">
92 <div> 93 <div>
...@@ -110,7 +111,7 @@ ...@@ -110,7 +111,7 @@
110 </div> 111 </div>
111 </swiper-slide> 112 </swiper-slide>
112 </swiper> 113 </swiper>
113 - <div v-if="product_list.length > productSlidesPerView || is_xs" class="hager-product-center-more"> 114 + <div v-if="product_list.length > productSlidesPerView || (is_xs && product_list.length > 2)" class="hager-product-center-more">
114 <!-- <hager-more></hager-more> --> 115 <!-- <hager-more></hager-more> -->
115 <div class="xs-control"> 116 <div class="xs-control">
116 <div> 117 <div>
...@@ -412,11 +413,17 @@ export default { ...@@ -412,11 +413,17 @@ export default {
412 } 413 }
413 .card-content { 414 .card-content {
414 padding: 1rem 1.5rem; 415 padding: 1rem 1.5rem;
415 - h3 { 416 + .clamp-title {
416 color: @secondary-color; 417 color: @secondary-color;
417 font-size: 1.25rem; 418 font-size: 1.25rem;
418 margin: 0; 419 margin: 0;
419 margin-bottom: 0.5rem; 420 margin-bottom: 0.5rem;
421 + min-height: calc(2 * 1.5em); /* 假设行高为 1.5em */
422 + line-height: 1.5em;
423 + display: -webkit-box;
424 + -webkit-box-orient: vertical;
425 + -webkit-line-clamp: 2; /* 显示两行 */
426 + overflow: hidden;
420 } 427 }
421 p { 428 p {
422 font-size: 0.95rem; 429 font-size: 0.95rem;
...@@ -499,8 +506,8 @@ export default { ...@@ -499,8 +506,8 @@ export default {
499 margin-top: 2rem; 506 margin-top: 2rem;
500 .nav { 507 .nav {
501 flex: 1; 508 flex: 1;
502 - text-align: center; 509 + // text-align: center;
503 - padding: 1.5rem 0; 510 + padding: 1.5rem 10vw;
504 position: relative; 511 position: relative;
505 &:not(:last-child) { 512 &:not(:last-child) {
506 &::after { 513 &::after {
...@@ -513,19 +520,25 @@ export default { ...@@ -513,19 +520,25 @@ export default {
513 font-size: 1rem; 520 font-size: 1rem;
514 } 521 }
515 } 522 }
523 + &:first-child {
524 + text-align: right;
525 + }
526 + &:last-child {
527 + text-align: left;
528 + }
516 } 529 }
517 .detail-nav { 530 .detail-nav {
518 display: inline; 531 display: inline;
519 color: @text-color; 532 color: @text-color;
520 font-size: 1.2rem; 533 font-size: 1.2rem;
521 - padding: 1.4rem 0; 534 + padding: 1.4rem;
522 &:hover { 535 &:hover {
523 cursor: pointer; 536 cursor: pointer;
524 } 537 }
525 } 538 }
526 .current-nav { 539 .current-nav {
527 color: @secondary-color; 540 color: @secondary-color;
528 - border-bottom: 2px solid #ED6C00; 541 + border-bottom: 3px solid #ED6C00;
529 font-weight: bold; 542 font-weight: bold;
530 } 543 }
531 } 544 }
......
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
47 <div class="card-content"> 47 <div class="card-content">
48 <div class="card-title"> 48 <div class="card-title">
49 <span>{{ item.category_name }}</span> 49 <span>{{ item.category_name }}</span>
50 - <i class="el-icon-right"></i> 50 + <!-- <i class="el-icon-right"></i> -->
51 </div> 51 </div>
52 <p class="card-sub">{{ item.sub }}</p> 52 <p class="card-sub">{{ item.sub }}</p>
53 </div> 53 </div>
...@@ -244,18 +244,22 @@ export default { ...@@ -244,18 +244,22 @@ export default {
244 244
245 .card-content { 245 .card-content {
246 padding: 15px; 246 padding: 15px;
247 + padding-bottom: 0;
247 .card-title { 248 .card-title {
248 - display: flex; 249 + // display: flex;
249 - align-items: center; 250 + // align-items: center;
250 - justify-content: space-between; 251 + // justify-content: space-between;
251 font-size: 1rem; 252 font-size: 1rem;
252 color: @secondary-color; 253 color: @secondary-color;
253 - margin-bottom: 10px; 254 + // margin-bottom: 10px;
254 font-weight: bold; 255 font-weight: bold;
255 span { 256 span {
256 - white-space: nowrap; /* 不换行 */ 257 + min-height: calc(2 * 1.5em); /* 假设行高为 1.5em */
257 - overflow: hidden; /* 隐藏超出部分 */ 258 + line-height: 1.5em;
258 - text-overflow: ellipsis; /* 用省略号表示被截断的部分 */ 259 + display: -webkit-box;
260 + -webkit-box-orient: vertical;
261 + -webkit-line-clamp: 2; /* 显示两行 */
262 + overflow: hidden;
259 } 263 }
260 } 264 }
261 .card-sub { 265 .card-sub {
......