前台加word-break: break-all;

This commit is contained in:
gaoyuanwei 2022-07-19 09:42:41 +08:00
parent 74168d8a2c
commit f1de4b860e
61 changed files with 837 additions and 710 deletions

View File

@ -257,6 +257,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-bottom: 20px; margin-bottom: 20px;
word-break: break-all;
} }
.content-fangwenliang { .content-fangwenliang {
width: 215px; width: 215px;
@ -268,6 +269,7 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
color: #999999; color: #999999;
margin-bottom: 20px; margin-bottom: 20px;
word-break: break-all;
} }
} }
} }

View File

@ -599,6 +599,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.num { .num {
width: 100px; width: 100px;
@ -719,6 +720,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
div:nth-of-type(1) { div:nth-of-type(1) {
@ -757,6 +759,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
span:hover { span:hover {
border: 1px solid #147ad8; border: 1px solid #147ad8;

View File

@ -139,6 +139,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
.item:nth-of-type(1) { .item:nth-of-type(1) {

View File

@ -302,6 +302,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 5; -webkit-line-clamp: 5;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }

View File

@ -177,6 +177,7 @@
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
word-break: break-all;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.tab-top-down { .tab-top-down {
@ -269,6 +270,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 6; -webkit-line-clamp: 6;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }

View File

@ -160,6 +160,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.associated-ability-card-content { .associated-ability-card-content {
width: 100%; width: 100%;
@ -175,6 +176,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 5; -webkit-line-clamp: 5;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }

View File

@ -110,6 +110,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 5; -webkit-line-clamp: 5;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.content-footer { .content-footer {
position: absolute; position: absolute;

View File

@ -258,6 +258,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.label-content { .label-content {
position: relative; position: relative;
@ -291,6 +292,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
.bottom { .bottom {

View File

@ -324,138 +324,141 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.usage-mode { .usage-mode {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.8rem 0;
.content {
margin-top: 0.3rem;
display: flex; display: flex;
flex-direction: column;
align-items: center;
padding: 0.8rem 0;
.content-left { .content {
height: 1.5rem; margin-top: 0.3rem;
width: 6.2rem;
background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
no-repeat;
background-position: center;
background-size: 100% 100%;
border-radius: 0.1rem;
margin-right: 0.6rem;
box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
display: flex; display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.35rem;
.left { .content-left {
.content-left-title { height: 1.5rem;
font-size: 0.26rem; width: 6.2rem;
line-height: 0.26rem; background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
color: #212956; no-repeat;
margin-bottom: 0.2rem; background-position: center;
background-size: 100% 100%;
border-radius: 0.1rem;
margin-right: 0.6rem;
box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.35rem;
span:first-child { .left {
margin-right: 0.1rem; .content-left-title {
font-size: 0.26rem;
line-height: 0.26rem;
color: #212956;
margin-bottom: 0.2rem;
span:first-child {
margin-right: 0.1rem;
}
} }
}
.content-left-content { .content-left-content {
width: 4.2rem; width: 4.2rem;
font-size: 0.2rem; font-size: 0.2rem;
color: rgba(33, 41, 86, 0.8); color: rgba(33, 41, 86, 0.8);
line-height: 0.2rem; line-height: 0.2rem;
p { p {
display: -webkit-box;
margin-bottom: 0.1rem;
span:last-of-type {
width: 298px;
display: -webkit-box; display: -webkit-box;
overflow: hidden; margin-bottom: 0.1rem;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical; span:last-of-type {
width: 298px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
} }
} }
} }
}
.right { .right {
div { div {
height: 0.4rem; height: 0.4rem;
width: 1.3rem; width: 1.3rem;
background: #ffffff; background: #ffffff;
border-radius: 0.2rem; border-radius: 0.2rem;
color: #526aff; color: #526aff;
font-size: 0.2rem; font-size: 0.2rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer;
}
div:first-child {
margin-bottom: 0.2rem;
}
}
}
.content-right {
height: 1.5rem;
width: 6.2rem;
background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
no-repeat;
background-position: center;
background-size: 100% 100%;
border-radius: 0.1rem;
box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 0.3rem;
.content-right-left {
border-right: 0.01rem solid #707fe0;
padding-right: 0.1rem;
margin-right: 0.1rem;
}
.content-right-title {
font-size: 0.26rem;
line-height: 0.26rem;
color: #212956;
margin-bottom: 0.15rem;
}
.content-right-content {
display: flex;
font-size: 0.16rem;
color: rgba(33, 41, 86, 0.8);
line-height: 0.2rem;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
flex-direction: column;
p {
// width: 1.60rem;
height: 0.2rem;
display: -webkit-box;
// overflow: hidden;
margin-bottom: 0.08rem;
white-space: nowrap;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-right: 0.15rem;
span {
cursor: pointer; cursor: pointer;
} }
div:first-child {
margin-bottom: 0.2rem;
}
}
}
.content-right {
height: 1.5rem;
width: 6.2rem;
background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
no-repeat;
background-position: center;
background-size: 100% 100%;
border-radius: 0.1rem;
box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 0.3rem;
.content-right-left {
border-right: 0.01rem solid #707fe0;
padding-right: 0.1rem;
margin-right: 0.1rem;
}
.content-right-title {
font-size: 0.26rem;
line-height: 0.26rem;
color: #212956;
margin-bottom: 0.15rem;
}
.content-right-content {
display: flex;
font-size: 0.16rem;
color: rgba(33, 41, 86, 0.8);
line-height: 0.2rem;
overflow: hidden;
-webkit-line-clamp: 1;
word-break: break-all;
-webkit-box-orient: vertical;
flex-direction: column;
p {
// width: 1.60rem;
height: 0.2rem;
display: -webkit-box;
// overflow: hidden;
margin-bottom: 0.08rem;
white-space: nowrap;
-webkit-line-clamp: 1;
word-break: break-all;
-webkit-box-orient: vertical;
margin-right: 0.15rem;
span {
cursor: pointer;
}
}
} }
} }
} }
} }
}
</style> </style>

View File

@ -153,6 +153,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
word-break: break-all;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
} }

View File

@ -175,6 +175,7 @@
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
word-break: break-all;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.associated-ability-card-content { .associated-ability-card-content {
@ -190,6 +191,7 @@
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 5; -webkit-line-clamp: 5;
word-break: break-all;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
} }

View File

@ -138,6 +138,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
word-break: break-all;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
} }

View File

@ -7,26 +7,42 @@
<DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle> <DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
</div> </div>
<div class="tab"> <div class="tab">
<div v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue" :key="itemSonTitle.name" <div
@click="tabSwitch(itemSonTitle.name)" class="tab-son" :class=" v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
:key="itemSonTitle.name"
@click="tabSwitch(itemSonTitle.name)"
class="tab-son"
:class="
tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue) tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
"> "
>
<a-tooltip> <a-tooltip>
<template #title>{{ itemSonTitle.name }}</template> <template #title>{{ itemSonTitle.name }}</template>
<div class="tab-top" :class=" <div
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : '' class="tab-top"
"> :class="
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
"
>
{{ itemSonTitle.name }} {{ itemSonTitle.name }}
</div> </div>
</a-tooltip> </a-tooltip>
<div class="tab-bottom" v-if="tabInitialize() == itemSonTitle.name"></div> <div
class="tab-bottom"
v-if="tabInitialize() == itemSonTitle.name"
></div>
</div> </div>
</div> </div>
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle"> <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
<div class="content" v-if="tabindex == itemSonTitle.name"> <div class="content" v-if="tabindex == itemSonTitle.name">
<div class="content-left"> <div class="content-left">
<div class="content-left-scene" v-if="!itemSonTitle.img"></div> <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
<a-image :width="635" :height="340" :src="itemSonTitle.img" v-if="itemSonTitle.img"></a-image> <a-image
:width="635"
:height="340"
:src="itemSonTitle.img"
v-if="itemSonTitle.img"
></a-image>
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="content-right-scene"> <div class="content-right-scene">
@ -44,215 +60,217 @@
</template> </template>
<script setup> <script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
const flag = ref(true) const flag = ref(true)
let dataFrom = ref([]) let dataFrom = ref([])
// tab // tab
let tabindex = ref('场景说明一') let tabindex = ref('场景说明一')
// //
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
if (props.dataList.infoList) { if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => item.attrType === '功能介绍' (item) => item.attrType === '功能介绍'
)[0] )[0]
if (!obj) { if (!obj) {
flag.value = false flag.value = false
} else { } else {
obj.attrValue = JSON.parse(obj.attrValue) obj.attrValue = JSON.parse(obj.attrValue)
dataFrom.value = obj dataFrom.value = obj
tabindex.value = dataFrom.value.attrValue[0].name tabindex.value = dataFrom.value.attrValue[0].name
}
}
watch(
() => props.dataList,
(val) => {
if (val) {
let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
if (!obj) {
flag.value = false
} else {
obj.attrValue = JSON.parse(obj.attrValue)
dataFrom.value = obj
tabindex.value = dataFrom.value.attrValue[0].name
}
} }
} }
) watch(
// () => props.dataList,
function tabIndexClass(index, title, content) { (val) => {
if (title == '功能介绍' && index == 0 && content.length > 6) { if (val) {
return 'tab-son-class' let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
if (!obj) {
flag.value = false
} else {
obj.attrValue = JSON.parse(obj.attrValue)
dataFrom.value = obj
tabindex.value = dataFrom.value.attrValue[0].name
}
}
}
)
//
function tabIndexClass(index, title, content) {
if (title == '功能介绍' && index == 0 && content.length > 6) {
return 'tab-son-class'
}
}
//tab
function tabInitialize() {
return tabindex.value
}
//tab
function tabSwitch(name) {
tabindex.value = name
return tabindex.value
} }
}
//tab
function tabInitialize() {
return tabindex.value
}
//tab
function tabSwitch(name) {
tabindex.value = name
return tabindex.value
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.function-intorduction { .function-intorduction {
width: 100%; width: 100%;
background: #f7f8fa; background: #f7f8fa;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: unset;
.application-scenarios-and-case-son {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow: unset; overflow-x: unset;
.tab { .application-scenarios-and-case-son {
max-width: 13rem; padding-top: 0.8rem;
overflow-x: auto; padding-bottom: 0.8rem;
display: flex; display: flex;
justify-content: center; flex-direction: column;
color: #808080; align-items: center;
border-bottom: 0.01rem #e4e6f5 solid; overflow: unset;
margin-top: 0.45rem;
margin-bottom: 0.4rem;
cursor: pointer;
padding-left: 0.4rem;
padding-right: 0.4rem;
.tab-son { .tab {
max-width: 13rem;
overflow-x: auto;
display: flex; display: flex;
flex-direction: column; justify-content: center;
align-items: center; color: #808080;
margin-right: 1rem; border-bottom: 0.01rem #e4e6f5 solid;
margin-top: 0.45rem;
margin-bottom: 0.4rem;
cursor: pointer;
padding-left: 0.4rem;
padding-right: 0.4rem;
.tab-top { .tab-son {
min-width: 1.2rem; display: flex;
font-size: 0.24rem; flex-direction: column;
line-height: 0.24rem; align-items: center;
margin-bottom: 0.2rem; margin-right: 1rem;
max-width: 2rem;
height: 0.24rem; .tab-top {
min-width: 1.2rem;
font-size: 0.24rem;
line-height: 0.24rem;
margin-bottom: 0.2rem;
max-width: 2rem;
height: 0.24rem;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-align: center;
word-break: break-all;
}
.tab-top-down {
min-width: 1.2rem;
color: #526aff;
margin-bottom: 0.16rem;
}
.tab-bottom {
height: 0.04rem;
width: 0.6rem;
background: #526aff;
}
}
.tab-son-class {
margin-left: 4.3rem;
margin-bottom: 0.02rem;
}
.tab-son-class-two {
margin-left: 2.3rem;
margin-bottom: 0.02rem;
}
.tab-son:last-child {
margin-right: 0rem;
}
}
.tab::-webkit-scrollbar-thumb {
background: rgba(82, 106, 255, 0.4);
}
.content {
display: flex;
position: relative;
width: 100%;
min-width: 13rem;
height: 3.4rem;
.content-left {
position: absolute;
left: 0;
min-width: 6.2rem;
:deep(.ant-image-img) {
width: 100%;
height: 100%;
object-fit: contain;
}
// text-align: center;
.content-top {
text-align: left;
}
}
.content-right {
width: 6.2rem;
height: 3.4rem;
position: absolute;
right: 0;
display: flex;
justify-content: center;
}
.content-right-scene,
.content-right-case {
width: 6.2rem;
height: 3.4rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.content-left-scene,
.content-left-case {
height: 3.4rem;
width: 6.35rem;
border-radius: 0.1rem;
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
background-position: center;
background-size: 6.35rem 3.4rem;
}
.content-top {
font-size: 0.22rem;
line-height: 0.22rem;
color: #000000;
margin-bottom: 0.35rem;
}
.content-bottom {
font-size: 0.18rem;
color: #999999;
line-height: 0.26rem;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 6;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
text-align: center; word-break: break-all;
} }
.tab-top-down {
min-width: 1.2rem;
color: #526aff;
margin-bottom: 0.16rem;
}
.tab-bottom {
height: 0.04rem;
width: 0.6rem;
background: #526aff;
}
}
.tab-son-class {
margin-left: 4.3rem;
margin-bottom: 0.02rem;
}
.tab-son-class-two {
margin-left: 2.3rem;
margin-bottom: 0.02rem;
}
.tab-son:last-child {
margin-right: 0rem;
} }
} }
.tab::-webkit-scrollbar-thumb { .application-scenarios-and-case-son:first-child {
background: rgba(82, 106, 255, 0.4); padding-top: 1rem;
}
.content {
display: flex;
position: relative;
width: 100%;
min-width: 13rem;
height: 3.4rem;
.content-left {
position: absolute;
left: 0;
min-width: 6.2rem;
:deep(.ant-image-img) {
width: 100%;
height: 100%;
object-fit: contain;
}
// text-align: center;
.content-top {
text-align: left;
}
}
.content-right {
width: 6.2rem;
height: 3.4rem;
position: absolute;
right: 0;
display: flex;
justify-content: center;
}
.content-right-scene,
.content-right-case {
width: 6.2rem;
height: 3.4rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.content-left-scene,
.content-left-case {
height: 3.4rem;
width: 6.35rem;
border-radius: 0.1rem;
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
background-position: center;
background-size: 6.35rem 3.4rem;
}
.content-top {
font-size: 0.22rem;
line-height: 0.22rem;
color: #000000;
margin-bottom: 0.35rem;
}
.content-bottom {
font-size: 0.18rem;
color: #999999;
line-height: 0.26rem;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
} }
} }
.application-scenarios-and-case-son:first-child {
padding-top: 1rem;
}
}
</style> </style>

View File

@ -236,6 +236,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.label-content { .label-content {
@ -275,6 +276,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }

View File

@ -293,6 +293,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 5; -webkit-line-clamp: 5;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }

View File

@ -178,6 +178,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.tab-top-down { .tab-top-down {
min-width: 120px; min-width: 120px;
@ -269,6 +270,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 6; -webkit-line-clamp: 6;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }

View File

@ -160,6 +160,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.associated-ability-card-content { .associated-ability-card-content {
width: 100%; width: 100%;
@ -175,6 +176,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 5; -webkit-line-clamp: 5;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }

View File

@ -158,6 +158,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.tab-top-down { .tab-top-down {
min-width: 1.2rem; min-width: 1.2rem;
@ -244,6 +245,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 6; -webkit-line-clamp: 6;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }

View File

@ -243,6 +243,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.label-content { .label-content {
@ -282,6 +283,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }

View File

@ -297,6 +297,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }
@ -358,6 +359,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
flex-direction: column; flex-direction: column;
word-break: break-all;
p { p {
// width: 1.60rem; // width: 1.60rem;
@ -369,6 +371,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-right: 0.15rem; margin-right: 0.15rem;
word-break: break-all;
span { span {
cursor: pointer; cursor: pointer;

View File

@ -302,6 +302,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 5; -webkit-line-clamp: 5;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }

View File

@ -178,6 +178,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.tab-top-down { .tab-top-down {
min-width: 120px; min-width: 120px;
@ -269,6 +270,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 6; -webkit-line-clamp: 6;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }

View File

@ -160,6 +160,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.associated-ability-card-content { .associated-ability-card-content {
width: 100%; width: 100%;
@ -175,6 +176,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 5; -webkit-line-clamp: 5;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }

View File

@ -158,6 +158,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.tab-top-down { .tab-top-down {
min-width: 1.2rem; min-width: 1.2rem;
@ -244,6 +245,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 6; -webkit-line-clamp: 6;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }

View File

@ -248,6 +248,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
word-break: break-all;
} }
} }
} }
@ -272,6 +273,7 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
word-break: break-all;
} }
} }
.right { .right {

View File

@ -245,6 +245,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
word-break: break-all;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.label-content { .label-content {
@ -278,6 +279,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
word-break: break-all;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
} }

View File

@ -138,6 +138,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
.main-center { .main-center {

View File

@ -293,6 +293,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 5; -webkit-line-clamp: 5;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }

View File

@ -178,6 +178,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.tab-top-down { .tab-top-down {
min-width: 120px; min-width: 120px;
@ -269,6 +270,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 6; -webkit-line-clamp: 6;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }

View File

@ -160,6 +160,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.associated-ability-card-content { .associated-ability-card-content {
width: 100%; width: 100%;
@ -175,6 +176,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 5; -webkit-line-clamp: 5;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }

View File

@ -252,6 +252,7 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
} }

View File

@ -239,6 +239,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.label-content { .label-content {
position: relative; position: relative;
@ -273,6 +274,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
.bottom { .bottom {

View File

@ -362,6 +362,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
flex-direction: column; flex-direction: column;
word-break: break-all;
p { p {
// width: 1.60rem; // width: 1.60rem;
@ -372,6 +373,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-right: 0.15rem; margin-right: 0.15rem;
word-break: break-all;
span { span {
cursor: pointer; cursor: pointer;

View File

@ -1757,5 +1757,6 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
word-break: break-all;
} }
</style> </style>

View File

@ -814,6 +814,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.td-name-text { .td-name-text {

View File

@ -380,6 +380,7 @@
font-size: 0.14rem; font-size: 0.14rem;
color: #666666; color: #666666;
line-height: 0.2rem; line-height: 0.2rem;
word-break: break-all;
} }
} }
.chakangengduo { .chakangengduo {

View File

@ -405,6 +405,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
word-break: break-all;
} }
.out { .out {
cursor: pointer; cursor: pointer;
@ -487,6 +488,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
word-break: break-all;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
button { button {

View File

@ -968,6 +968,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
/*超出显示为省略号*/ /*超出显示为省略号*/
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
.btn { .btn {
@ -1103,5 +1104,6 @@
text-overflow: ellipsis; text-overflow: ellipsis;
/*超出显示为省略号*/ /*超出显示为省略号*/
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
</style> </style>

View File

@ -114,6 +114,7 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
overflow: hidden; overflow: hidden;
word-break: break-all;
} }
button { button {
margin: 0px; margin: 0px;

View File

@ -450,6 +450,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
.up:hover { .up:hover {
@ -496,6 +497,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
.child:hover { .child:hover {

View File

@ -449,6 +449,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
.up:hover { .up:hover {
@ -495,6 +496,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
} }
.child:hover { .child:hover {

View File

@ -1,263 +1,279 @@
<template> <template>
<!-- 青岛 --> <!-- 青岛 -->
<div class="details-pageconetent"> <div class="details-pageconetent">
<home-header></home-header> <home-header></home-header>
<div class="top"> <div class="top">
<div class="resultListSearchInput-father"> <div class="resultListSearchInput-father">
<div class="resultListSearchInput-son"> <div class="resultListSearchInput-son">
模糊搜索 模糊搜索
<a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large" <a-input-search
@search="getAppResources" @change="onSearch" class="resultListSearchInput" /> v-model:value="searchValue"
<button class="button-reset" @click="chongzhi()">重置</button> placeholder="请输入关键词"
<div class="hengxian"></div> enter-button="搜索"
</div> size="large"
</div> @search="getAppResources"
<searchResultList v-show="resourceList.data && resourceList.data.length > 0" :key="listKey2" @change="onSearch"
:resourceList="resourceList" :resourceTotal="resourceTotal" selectCardsname="融合服务" /> class="resultListSearchInput"
<div class="pagination"> />
<a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage" <button class="button-reset" @click="chongzhi()">重置</button>
v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper <div class="hengxian"></div>
:total="resourceTotal" :page-size-options="pageSizeOptions" @change="pageChange"
@showSizeChange="onShowSizeChange" />
</div>
<div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 2rem">
<a-empty />
</div>
</div> </div>
</div>
<searchResultList
v-show="resourceList.data && resourceList.data.length > 0"
:key="listKey2"
:resourceList="resourceList"
:resourceTotal="resourceTotal"
selectCardsname="融合服务"
/>
<div class="pagination">
<a-pagination
v-if="resourceList.data && resourceList.data.length > 0"
v-model:current="currentPage"
v-model:pageSize="currentPageSize"
show-size-changer
show-less-items
show-quick-jumper
:total="resourceTotal"
:page-size-options="pageSizeOptions"
@change="pageChange"
@showSizeChange="onShowSizeChange"
/>
</div>
<div
v-if="resourceList.data && resourceList.data.length <= 0"
style="margin-top: 2rem"
>
<a-empty />
</div>
</div> </div>
<home-footer></home-footer> </div>
<home-footer></home-footer>
</template> </template>
<script> <script>
import HomeFooter from '@/views/newHome/components/Footer' import HomeFooter from '@/views/newHome/components/Footer'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import { import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
defineComponent,
reactive,
ref,
toRefs,
onMounted,
watch,
} from 'vue'
import { import { getIntegrationServicesList } from '@/api/home.js'
getIntegrationServicesList, import { useRouter } from 'vue-router'
} from '@/api/home.js' import HomeHeader from '@/views/home/components/header'
import { useRouter } from 'vue-router' import searchResultList from '@/views/home/components/searchResultList.vue'
import HomeHeader from '@/views/home/components/header' import { message } from 'ant-design-vue'
import searchResultList from '@/views/home/components/searchResultList.vue'
import { message } from 'ant-design-vue'
export default defineComponent({ export default defineComponent({
setup() { setup() {
//
const loading = ref(true)
const currentPage = ref(1)
const currentPageSize = ref(5)
const pageSizeOptions = ref(['5', '10', '20', '50'])
const router = useRouter()
const select = router.currentRoute.value.query.select
const searchValue = ref('')
const Cardsname = ref(select)
const resourceList = reactive({ data: [] })
const resourceTotal = ref(0)
const current = ref(1)
//
let listKey = ref(0)
//
const listKey2 = ref(0)
//
const paramsGetResources = {
pageNum: 1,
pageSize: currentPageSize.value,
type: Cardsname.value,
name: '',
orderField: 'create_date', // total visits 访 applyCount score collectCount
orderType: 'DESC', // ASC DESC
}
//
const onSearch = () => {
loading.value = true
currentPage.value = 1
}
//
const chongzhi = () => {
loading.value = true
//
searchValue.value = ''
// //
const loading = ref(true) currentPage.value = 1
const currentPage = ref(1) currentPageSize.value = 5
const currentPageSize = ref(5) //
const pageSizeOptions = ref(['5', '10', '20', '50']) paramsGetResources.pageNum = 1
const router = useRouter() paramsGetResources.pageSize = 5
const select = router.currentRoute.value.query.select paramsGetResources.orderField = 'create_date'
const searchValue = ref('') paramsGetResources.orderType = 'DESC'
const Cardsname = ref(select) mybus.emit('chongzhi', {
const resourceList = reactive({ data: [] }) type: '融合服务',
const resourceTotal = ref(0) })
const current = ref(1) getAppResources()
// }
let listKey = ref(0)
//
const listKey2 = ref(0)
//
const paramsGetResources = {
pageNum: 1,
pageSize: currentPageSize.value,
type: Cardsname.value,
name: '',
orderField: 'create_date', // total visits 访 applyCount score collectCount
orderType: 'DESC', // ASC DESC
}
//
const onSearch = () => {
loading.value = true
currentPage.value = 1
}
//
const chongzhi = () => {
loading.value = true
//
searchValue.value = ''
//
currentPage.value = 1
currentPageSize.value = 5
//
paramsGetResources.pageNum = 1
paramsGetResources.pageSize = 5
paramsGetResources.orderField = 'create_date'
paramsGetResources.orderType = 'DESC'
mybus.emit('chongzhi', {
type: '融合服务'
})
getAppResources()
}
const getAppResources = () => {
getIntegrationList()
}
const getAppResources = () => { //
getIntegrationList() const getIntegrationList = () => {
let postData = {
limit: currentPageSize.value,
page: currentPage.value,
orderField: paramsGetResources.orderField,
orderType: paramsGetResources.orderType,
name: searchValue.value,
} }
getIntegrationServicesList(postData).then(
// (res) => {
const getIntegrationList = () => { if (res.data.code !== 0) {
let postData = { return message.error(res.data.msg)
limit: currentPageSize.value,
page: currentPage.value,
orderField: paramsGetResources.orderField,
orderType: paramsGetResources.orderType,
name: searchValue.value
} }
getIntegrationServicesList(postData).then(res => { resourceList.data = res.data.data.list || []
if (res.data.code !== 0) { resourceTotal.value = res.data.data.total || 0
return message.error(res.data.msg) },
} (err) => {
resourceList.data = res.data.data.list || [] message.error(err)
resourceTotal.value = res.data.data.total || 0 }
}, err => { )
message.error(err) }
})
mybus.on('paramsGetResources', (ids) => {
if (ids && ids.length > 0) {
paramsGetResources.deptIds = ids
} else {
delete paramsGetResources.deptIds
} }
getAppResources()
console.log('paramsGetResources', paramsGetResources)
})
mybus.on('changePage', (page) => {
paramsGetResources.pageNum = page
getAppResources('分页查询')
})
mybus.on('changeSelcted', () => {
getAppResources()
})
mybus.on('paramsGetResources', (ids) => { mybus.on('refresh', () => {
if (ids && ids.length > 0) { paramsGetResources.pageNum = 1
paramsGetResources.deptIds = ids currentPage.value = 1
} else { getAppResources()
delete paramsGetResources.deptIds })
} mybus.on('changeCondition', (condition) => {
getAppResources() paramsGetResources.orderField = condition.orderField
console.log('paramsGetResources', paramsGetResources) paramsGetResources.orderType = condition.orderType
}) getAppResources()
mybus.on('changePage', (page) => { })
paramsGetResources.pageNum = page
getAppResources('分页查询')
})
mybus.on('changeSelcted', () => {
getAppResources()
})
mybus.on('refresh', () => { const pageChange = (val) => {
paramsGetResources.pageNum = 1 console.log(val)
currentPage.value = 1 loading.value = true
getAppResources() currentPage.value = val
}) paramsGetResources.pageNum = val
mybus.on('changeCondition', (condition) => { let params = '分页查询' //
paramsGetResources.orderField = condition.orderField getAppResources(params)
paramsGetResources.orderType = condition.orderType }
getAppResources()
})
const pageChange = (val) => { onMounted(() => {
console.log(val) listKey2.value++
loading.value = true getAppResources()
currentPage.value = val })
paramsGetResources.pageNum = val
let params = '分页查询' //
getAppResources(params)
}
onMounted(() => { //
listKey2.value++; const onShowSizeChange = (current, pageSize) => {
getAppResources() currentPage.value = current
}) currentPageSize.value = pageSize
paramsGetResources.pageNum = current
paramsGetResources.pageSize = pageSize
getAppResources()
}
watch(currentPageSize, () => {
console.log('pageSize', currentPageSize.value)
})
// return {
const onShowSizeChange = (current, pageSize) => { listKey,
currentPage.value = current searchValue,
currentPageSize.value = pageSize currentPage,
paramsGetResources.pageNum = current resourceList,
paramsGetResources.pageSize = pageSize resourceTotal,
getAppResources() pageChange,
} listKey2,
watch(currentPageSize, () => { Cardsname,
console.log('pageSize', currentPageSize.value) getAppResources,
}) chongzhi,
onSearch,
return { currentPageSize,
listKey, pageSizeOptions,
searchValue, current,
currentPage, loading,
resourceList, }
resourceTotal,
pageChange,
listKey2,
Cardsname,
getAppResources,
chongzhi,
onSearch,
currentPageSize,
pageSizeOptions,
current,
loading,
}
}, },
components: { components: {
HomeHeader, HomeHeader,
HomeFooter, HomeFooter,
searchResultList, searchResultList,
}, },
beforeUnmount() { beforeUnmount() {
mybus.off('paramsGetResources') mybus.off('paramsGetResources')
mybus.off('changeCondition') mybus.off('changeCondition')
mybus.off('refresh') mybus.off('refresh')
mybus.off('changePage') mybus.off('changePage')
}, },
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.resultListSearchInput-father { .resultListSearchInput-father {
background: #f3f5f9; background: #f3f5f9;
padding: 0.2rem; padding: 0.2rem;
// padding-left: 0.2rem; // padding-left: 0.2rem;
// padding-top: 0.2rem; // padding-top: 0.2rem;
.resultListSearchInput-son { .resultListSearchInput-son {
background: #fff; background: #fff;
padding: 0.2rem 0.2rem 0rem 0.3rem; padding: 0.2rem 0.2rem 0rem 0.3rem;
.hengxian { .hengxian {
width: 100%; width: 100%;
height: 0.01rem; height: 0.01rem;
background: rgba(150, 144, 144, 0.3); background: rgba(150, 144, 144, 0.3);
margin-top: 0.2rem; margin-top: 0.2rem;
} }
} }
} }
.resultListSearchInput { .resultListSearchInput {
margin-left: 0.1rem; margin-left: 0.1rem;
:deep(.ant-input) { :deep(.ant-input) {
width: 4rem; width: 4rem;
height: 0.36rem; height: 0.36rem;
background: #fff; background: #fff;
border-radius: 0.04rem; border-radius: 0.04rem;
} }
:deep(.ant-input-search-button) { :deep(.ant-input-search-button) {
width: 0.8rem; width: 0.8rem;
height: 0.36rem; height: 0.36rem;
background: #0087ff; background: #0087ff;
border-radius: 0.04rem !important; border-radius: 0.04rem !important;
font-size: 0.14rem; font-size: 0.14rem;
font-weight: 400; font-weight: 400;
color: #fff; color: #fff;
line-height: 0.34rem; line-height: 0.34rem;
margin-left: 0.1rem; margin-left: 0.1rem;
} }
:deep(.ant-input-group-addon) { :deep(.ant-input-group-addon) {
left: 0 !important; left: 0 !important;
} }
} }
.button-reset { .button-reset {
border: 0; border: 0;
outline: none; outline: none;
width: 0.8rem; width: 0.8rem;
@ -270,9 +286,9 @@ export default defineComponent({
line-height: 0.34rem; line-height: 0.34rem;
margin-left: 2.5rem; margin-left: 2.5rem;
cursor: pointer; cursor: pointer;
} }
.details-pageconetent { .details-pageconetent {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
@ -283,37 +299,38 @@ export default defineComponent({
background: rgba(245, 243, 243, 0.3); background: rgba(245, 243, 243, 0.3);
.details-pageconetent-left { .details-pageconetent-left {
max-height: 6.9rem; max-height: 6.9rem;
position: absolute; position: absolute;
width: 2.5rem; width: 2.5rem;
top: 0.17rem; top: 0.17rem;
left: 2.5rem; left: 2.5rem;
margin-right: 0.17rem; margin-right: 0.17rem;
overflow: auto; overflow: auto;
} }
.top { .top {
min-height: 7.2rem; min-height: 7.2rem;
position: relative; position: relative;
width: 11.5rem; width: 11.5rem;
display: flex; display: flex;
padding-top: 0.2rem; padding-top: 0.2rem;
flex-direction: column; flex-direction: column;
font-size: 0.16rem; font-size: 0.16rem;
justify-content: left; justify-content: left;
background: #f3f5f9;
.pagination {
background: #f3f5f9; background: #f3f5f9;
padding-bottom: 0.6rem;
.pagination { }
background: #f3f5f9;
padding-bottom: 0.6rem;
}
} }
} }
:deep(.ant-card-grid) { :deep(.ant-card-grid) {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
} word-break: break-all;
}
</style> </style>

View File

@ -185,6 +185,7 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
overflow: hidden; overflow: hidden;
word-break: break-all;
} }
button { button {
margin: 0rem; margin: 0rem;

View File

@ -423,6 +423,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.left:hover { .left:hover {
color: #0058e1; color: #0058e1;

View File

@ -328,6 +328,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.name:hover { .name:hover {
color: #0058e1; color: #0058e1;

View File

@ -169,6 +169,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.text { .text {
width: 100%; width: 100%;

View File

@ -153,195 +153,196 @@
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.popular-ability { .popular-ability {
height: 6.8rem; height: 6.8rem;
background: url('~@/assets/newHome/popular-bg.png') no-repeat; background: url('~@/assets/newHome/popular-bg.png') no-repeat;
background-size: 100%; background-size: 100%;
display: flex;
justify-content: center;
.main {
width: 13rem;
margin-top: 0.78rem;
display: flex; display: flex;
flex-direction: column; justify-content: center;
flex-wrap: wrap; .main {
.top { width: 13rem;
font-size: 0.3rem; margin-top: 0.78rem;
color: #fff;
text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; .top {
align-items: center; font-size: 0.3rem;
.line { color: #fff;
width: 0.34rem; text-align: center;
height: 0.03rem;
background-color: #fff;
margin-top: 0.08rem;
}
}
.bottom {
display: flex;
justify-content: space-between;
margin-top: 0.52rem;
.left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
.select { justify-content: center;
cursor: pointer; align-items: center;
.line {
width: 0.34rem;
height: 0.03rem;
background-color: #fff;
margin-top: 0.08rem;
}
}
.bottom {
display: flex;
justify-content: space-between;
margin-top: 0.52rem;
.left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; .select {
justify-content: center; cursor: pointer;
width: 1.05rem;
height: 1.39rem;
background: rgba(255, 255, 255, 0.08);
margin-bottom: 0.01rem;
border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
.img {
width: 0.36rem;
height: 0.36rem;
background-size: 100%;
}
.fwl {
background: url('~@/assets/newHome/fwl-no.png') no-repeat;
background-size: contain;
}
.sgl {
background: url('~@/assets/newHome/sgl-no.png') no-repeat;
background-size: contain;
}
.scl {
background: url('~@/assets/newHome/scl-no.png') no-repeat;
background-size: contain;
}
.text {
color: rgba(255, 255, 255, 0.6);
font-size: 0.14rem;
margin-top: 0.08rem;
}
}
.select:hover {
background: rgba(255, 255, 255, 0.12);
}
.checked {
background: rgba(255, 255, 255, 0.18) !important;
border-right: 0.02rem solid #fff;
}
}
.right {
cursor: pointer;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-left: 0.2rem;
.item {
width: 3.78rem;
height: 2rem;
display: flex;
.item-left {
width: 0.83rem;
height: 100%;
display: flex; display: flex;
justify-content: center; flex-direction: column;
flex-wrap: wrap;
align-items: center; align-items: center;
background: #eef1f8; justify-content: center;
width: 1.05rem;
height: 1.39rem;
background: rgba(255, 255, 255, 0.08);
margin-bottom: 0.01rem;
border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
.img { .img {
width: 0.56rem; width: 0.36rem;
height: 0.56rem; height: 0.36rem;
background-size: 100%; background-size: 100%;
} }
.zj { .fwl {
background: url('~@/assets/newHome/popular-zj.png') no-repeat; background: url('~@/assets/newHome/fwl-no.png') no-repeat;
background-size: contain; background-size: contain;
} }
.yy { .sgl {
background: url('~@/assets/newHome/popular-yy.png') no-repeat; background: url('~@/assets/newHome/sgl-no.png') no-repeat;
background-size: contain; background-size: contain;
} }
.jc { .scl {
background: url('~@/assets/newHome/popular-jc.png') no-repeat; background: url('~@/assets/newHome/scl-no.png') no-repeat;
background-size: contain; background-size: contain;
} }
.sj {
background: url('~@/assets/newHome/popular-sj.png') no-repeat;
background-size: contain;
}
.zs {
background: url('~@/assets/newHome/popular-zs.png') no-repeat;
background-size: contain;
}
}
.item-right {
width: 100%;
height: 100%;
background: #fff;
.fw {
width: 100%;
padding-right: 0.1rem;
padding-top: 0.03rem;
text-align: right;
color: 666;
font-size: 0.14rem;
color: #666;
}
.name {
font-size: 0.18rem;
color: #212121;
text-align: center;
margin-top: 0.05rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.text { .text {
width: 100%; color: rgba(255, 255, 255, 0.6);
padding: 0.24rem 0.3rem;
font-size: 0.14rem; font-size: 0.14rem;
color: #212121; margin-top: 0.08rem;
line-height: 0.24rem;
height: 1rem;
overflow: hidden;
} }
} }
.select:hover {
background: rgba(255, 255, 255, 0.12);
}
.checked {
background: rgba(255, 255, 255, 0.18) !important;
border-right: 0.02rem solid #fff;
}
} }
.item:nth-of-type(4), .right {
.item:nth-of-type(5), cursor: pointer;
.item:nth-of-type(6) { display: flex;
margin-top: 0.2rem; justify-content: space-between;
} flex-wrap: wrap;
.item:hover { margin-left: 0.2rem;
border-radius: 0.02rem; .item {
border: 0.01rem solid #0058e1; width: 3.78rem;
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3); height: 2rem;
display: flex;
.item-left {
width: 0.83rem;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #eef1f8;
.img {
width: 0.56rem;
height: 0.56rem;
background-size: 100%;
}
.zj {
background: url('~@/assets/newHome/popular-zj.png') no-repeat;
background-size: contain;
}
.yy {
background: url('~@/assets/newHome/popular-yy.png') no-repeat;
background-size: contain;
}
.jc {
background: url('~@/assets/newHome/popular-jc.png') no-repeat;
background-size: contain;
}
.sj {
background: url('~@/assets/newHome/popular-sj.png') no-repeat;
background-size: contain;
}
.zs {
background: url('~@/assets/newHome/popular-zs.png') no-repeat;
background-size: contain;
}
}
.item-right {
width: 100%;
height: 100%;
background: #fff;
.fw {
width: 100%;
padding-right: 0.1rem;
padding-top: 0.03rem;
text-align: right;
color: 666;
font-size: 0.14rem;
color: #666;
}
.name {
font-size: 0.18rem;
color: #212121;
text-align: center;
margin-top: 0.05rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
.text {
width: 100%;
padding: 0.24rem 0.3rem;
font-size: 0.14rem;
color: #212121;
line-height: 0.24rem;
height: 1rem;
overflow: hidden;
}
}
}
.item:nth-of-type(4),
.item:nth-of-type(5),
.item:nth-of-type(6) {
margin-top: 0.2rem;
}
.item:hover {
border-radius: 0.02rem;
border: 0.01rem solid #0058e1;
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
}
} }
} }
} .bottom-btn {
.bottom-btn { cursor: pointer;
cursor: pointer; text-align: center;
text-align: center; margin-top: 0.24rem;
margin-top: 0.24rem; color: #fff;
color: #fff; width: 1rem;
width: 1rem; height: 0.24rem;
height: 0.24rem; line-height: 0.24rem;
line-height: 0.24rem; margin-left: 6rem;
margin-left: 6rem; span {
span { display: inline-block;
display: inline-block; width: 0.1rem;
width: 0.1rem; height: 0.1rem;
height: 0.1rem; background: url('~@/assets/newHome/gd.png') no-repeat;
background: url('~@/assets/newHome/gd.png') no-repeat; background-size: contain;
background-size: contain; }
}
.bottom-btn:hover {
background: rgba(0, 88, 225, 0.1);
} }
}
.bottom-btn:hover {
background: rgba(0, 88, 225, 0.1);
} }
} }
}
</style> </style>

View File

@ -179,6 +179,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.content-top-pingfen { .content-top-pingfen {
background: unset; background: unset;
@ -203,6 +204,7 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-bottom: 0.12rem; margin-bottom: 0.12rem;
cursor: pointer; cursor: pointer;
word-break: break-all;
} }
.num { .num {
font-size: 0.14rem; font-size: 0.14rem;

View File

@ -167,6 +167,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.pulish-time { .pulish-time {
position: absolute; position: absolute;

View File

@ -176,6 +176,7 @@
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
color: #999999; color: #999999;
word-break: break-all;
} }
} }
.content-body-bottom { .content-body-bottom {

View File

@ -300,6 +300,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
.type { .type {
background: #0087ff; background: #0087ff;
color: #fff; color: #fff;
@ -321,6 +322,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.result:hover { .result:hover {
color: #0058e1; color: #0058e1;

View File

@ -192,6 +192,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.result:hover { .result:hover {
color: #0058e1; color: #0058e1;

View File

@ -201,6 +201,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.result:hover { .result:hover {
color: #0058e1; color: #0058e1;

View File

@ -222,6 +222,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.content-body-content { .content-body-content {
margin-top: 10px; margin-top: 10px;
@ -238,6 +239,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
color: #999999; color: #999999;
word-break: break-all;
} }
} }
.content-body-bottom { .content-body-bottom {

View File

@ -863,6 +863,7 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
max-width: 8.1rem; max-width: 8.1rem;
line-height: 24px; line-height: 24px;
word-break: break-all;
} }
} }
.content-body-bottom { .content-body-bottom {

View File

@ -195,6 +195,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
} }
.content-body-content { .content-body-content {
margin-top: 10px; margin-top: 10px;
@ -212,6 +213,7 @@
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
color: #999999; color: #999999;
word-break: break-all;
} }
} }
.content-body-bottom { .content-body-bottom {

View File

@ -573,6 +573,7 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all;
color: #999999; color: #999999;
} }
} }

View File

@ -194,6 +194,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
word-break: break-all;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.result:hover { .result:hover {

View File

@ -213,6 +213,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
word-break: break-all;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.result:hover { .result:hover {

View File

@ -862,6 +862,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
word-break: break-all;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
} }

View File

@ -198,6 +198,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
word-break: break-all;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.result:hover { .result:hover {