diff --git a/src/components/linksList/Index.vue b/src/components/linksList/Index.vue index 9789a7ea..43b49b5c 100644 --- a/src/components/linksList/Index.vue +++ b/src/components/linksList/Index.vue @@ -7,11 +7,7 @@

{{ $t('warmReminder') }}

- +
@@ -19,16 +15,8 @@ - + @@ -81,12 +69,18 @@ export default { ContentPlaceholder, }, - created() {}, + created() { }, methods: { getAssembleRoute(item) { return `/post/${item._id}` }, + + onListClick() { + if (window.IS_FROM_GOOGLE_ADS) { + window.gtag_report_conversion() + } + } }, } @@ -98,6 +92,8 @@ export default { .main { .links-list { .single-moudle { + aspect-ratio: 2.8 / 1; + &:hover { background-color: $white-grey; } @@ -105,7 +101,22 @@ export default { .el-card { text-align: left; - border-bottom: 1px solid $item-border-color !important; + border-bottom: 1px solid $item-border-color !important; + } + } +} + +@media screen and (max-width: $mobile-screen) { + .main { + .links-list { + .single-moudle { + aspect-ratio: auto; + height: 22rem; + + .el-card__body { + height: 100%; + } + } } } } diff --git a/src/components/linksList/LinkItem.vue b/src/components/linksList/LinkItem.vue index b633920b..ef218b18 100644 --- a/src/components/linksList/LinkItem.vue +++ b/src/components/linksList/LinkItem.vue @@ -18,8 +18,8 @@ -

- + {{ item.title }} {{ iitem }} -
+
{{ getAbstractContent(item) }}
@@ -400,36 +400,30 @@ export default { } .content { - margin: 5px; - - .title { - margin-top: 3rem; - - .title-link { - display: flex; - justify-content: flex-start; - align-items: center; - font-size: 1.8rem; - font-weight: bolder; - line-height: 1.2; - text-decoration: none; - color: $link-title; - transition: color 0.3s ease-in; - - &:hover { - transition: color 0.3s ease-out; - color: $link-title-hover; - } + .title-link { + font-size: 1.8rem; + font-weight: bolder; + line-height: 1.2; + text-decoration: none; + color: $link-title; + transition: color 0.3s ease-in; + + &:hover { + transition: color 0.3s ease-out; + color: $link-title-hover; } } .abstract { width: 100%; - margin-bottom: 1rem; font-size: $font-small; color: $black-grey; line-height: 1.5; letter-spacing: 0.02rem; + display: -webkit-box; + -webkit-line-clamp: 3; + overflow: hidden; + text-overflow: ellipsis; } .operate-area {