前台加word-break: break-all;
This commit is contained in:
parent
74168d8a2c
commit
f1de4b860e
|
@ -257,6 +257,7 @@
|
|||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 20px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.content-fangwenliang {
|
||||
width: 215px;
|
||||
|
@ -268,6 +269,7 @@
|
|||
-webkit-box-orient: vertical;
|
||||
color: #999999;
|
||||
margin-bottom: 20px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -599,6 +599,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.num {
|
||||
width: 100px;
|
||||
|
@ -719,6 +720,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
div:nth-of-type(1) {
|
||||
|
@ -757,6 +759,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
span:hover {
|
||||
border: 1px solid #147ad8;
|
||||
|
|
|
@ -139,6 +139,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(1) {
|
||||
|
|
|
@ -302,6 +302,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -177,6 +177,7 @@
|
|||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.tab-top-down {
|
||||
|
@ -269,6 +270,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -160,6 +160,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.associated-ability-card-content {
|
||||
width: 100%;
|
||||
|
@ -175,6 +176,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -110,6 +110,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.content-footer {
|
||||
position: absolute;
|
||||
|
|
|
@ -258,6 +258,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.label-content {
|
||||
position: relative;
|
||||
|
@ -291,6 +292,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
|
|
|
@ -324,7 +324,7 @@
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.usage-mode {
|
||||
.usage-mode {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
@ -377,6 +377,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -436,6 +437,7 @@
|
|||
line-height: 0.2rem;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
flex-direction: column;
|
||||
|
||||
|
@ -447,6 +449,7 @@
|
|||
margin-bottom: 0.08rem;
|
||||
white-space: nowrap;
|
||||
-webkit-line-clamp: 1;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-right: 0.15rem;
|
||||
|
||||
|
@ -457,5 +460,5 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -153,6 +153,7 @@
|
|||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -175,6 +175,7 @@
|
|||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.associated-ability-card-content {
|
||||
|
@ -190,6 +191,7 @@
|
|||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -138,6 +138,7 @@
|
|||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,26 +7,42 @@
|
|||
<DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue" :key="itemSonTitle.name"
|
||||
@click="tabSwitch(itemSonTitle.name)" class="tab-son" :class="
|
||||
<div
|
||||
v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
|
||||
:key="itemSonTitle.name"
|
||||
@click="tabSwitch(itemSonTitle.name)"
|
||||
class="tab-son"
|
||||
:class="
|
||||
tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
|
||||
">
|
||||
"
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.name }}</template>
|
||||
<div class="tab-top" :class="
|
||||
<div
|
||||
class="tab-top"
|
||||
:class="
|
||||
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
|
||||
">
|
||||
"
|
||||
>
|
||||
{{ itemSonTitle.name }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<div class="tab-bottom" v-if="tabInitialize() == itemSonTitle.name"></div>
|
||||
<div
|
||||
class="tab-bottom"
|
||||
v-if="tabInitialize() == itemSonTitle.name"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
|
||||
<div class="content" v-if="tabindex == itemSonTitle.name">
|
||||
<div class="content-left">
|
||||
<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 class="content-right">
|
||||
<div class="content-right-scene">
|
||||
|
@ -44,17 +60,17 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const flag = ref(true)
|
||||
let dataFrom = ref([])
|
||||
// tab切换方法
|
||||
let tabindex = ref('场景说明一')
|
||||
//数据初始化
|
||||
const props = defineProps({
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const flag = ref(true)
|
||||
let dataFrom = ref([])
|
||||
// tab切换方法
|
||||
let tabindex = ref('场景说明一')
|
||||
//数据初始化
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '功能介绍'
|
||||
)[0]
|
||||
|
@ -65,8 +81,8 @@ if (props.dataList.infoList) {
|
|||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
}
|
||||
watch(
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
|
@ -80,26 +96,26 @@ watch(
|
|||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
//滚动条样式
|
||||
function tabIndexClass(index, title, content) {
|
||||
)
|
||||
//滚动条样式
|
||||
function tabIndexClass(index, title, content) {
|
||||
if (title == '功能介绍' && index == 0 && content.length > 6) {
|
||||
return 'tab-son-class'
|
||||
}
|
||||
}
|
||||
//初始化tab切换(判断标题不同,点击事件的判断变量不同)
|
||||
function tabInitialize() {
|
||||
}
|
||||
//初始化tab切换(判断标题不同,点击事件的判断变量不同)
|
||||
function tabInitialize() {
|
||||
return tabindex.value
|
||||
}
|
||||
//tab切换点击事件
|
||||
function tabSwitch(name) {
|
||||
}
|
||||
//tab切换点击事件
|
||||
function tabSwitch(name) {
|
||||
tabindex.value = name
|
||||
return tabindex.value
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.function-intorduction {
|
||||
.function-intorduction {
|
||||
width: 100%;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
|
@ -146,6 +162,7 @@ function tabSwitch(name) {
|
|||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.tab-top-down {
|
||||
|
@ -247,6 +264,7 @@ function tabSwitch(name) {
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -254,5 +272,5 @@ function tabSwitch(name) {
|
|||
.application-scenarios-and-case-son:first-child {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -236,6 +236,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.label-content {
|
||||
|
@ -275,6 +276,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -293,6 +293,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -178,6 +178,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.tab-top-down {
|
||||
min-width: 120px;
|
||||
|
@ -269,6 +270,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -160,6 +160,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.associated-ability-card-content {
|
||||
width: 100%;
|
||||
|
@ -175,6 +176,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -158,6 +158,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.tab-top-down {
|
||||
min-width: 1.2rem;
|
||||
|
@ -244,6 +245,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -243,6 +243,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.label-content {
|
||||
|
@ -282,6 +283,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -297,6 +297,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -358,6 +359,7 @@
|
|||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
flex-direction: column;
|
||||
word-break: break-all;
|
||||
|
||||
p {
|
||||
// width: 1.60rem;
|
||||
|
@ -369,6 +371,7 @@
|
|||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-right: 0.15rem;
|
||||
word-break: break-all;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
|
|
|
@ -302,6 +302,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -178,6 +178,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.tab-top-down {
|
||||
min-width: 120px;
|
||||
|
@ -269,6 +270,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -160,6 +160,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.associated-ability-card-content {
|
||||
width: 100%;
|
||||
|
@ -175,6 +176,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -158,6 +158,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.tab-top-down {
|
||||
min-width: 1.2rem;
|
||||
|
@ -244,6 +245,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -248,6 +248,7 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -272,6 +273,7 @@
|
|||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
|
|
|
@ -245,6 +245,7 @@
|
|||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.label-content {
|
||||
|
@ -278,6 +279,7 @@
|
|||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -138,6 +138,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.main-center {
|
||||
|
|
|
@ -293,6 +293,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -178,6 +178,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.tab-top-down {
|
||||
min-width: 120px;
|
||||
|
@ -269,6 +270,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -160,6 +160,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.associated-ability-card-content {
|
||||
width: 100%;
|
||||
|
@ -175,6 +176,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -252,6 +252,7 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -239,6 +239,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.label-content {
|
||||
position: relative;
|
||||
|
@ -273,6 +274,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
|
|
|
@ -362,6 +362,7 @@
|
|||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
flex-direction: column;
|
||||
word-break: break-all;
|
||||
|
||||
p {
|
||||
// width: 1.60rem;
|
||||
|
@ -372,6 +373,7 @@
|
|||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-right: 0.15rem;
|
||||
word-break: break-all;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
|
|
|
@ -1757,5 +1757,6 @@
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 1;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -814,6 +814,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.td-name-text {
|
||||
|
|
|
@ -380,6 +380,7 @@
|
|||
font-size: 0.14rem;
|
||||
color: #666666;
|
||||
line-height: 0.2rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.chakangengduo {
|
||||
|
|
|
@ -405,6 +405,7 @@
|
|||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
.out {
|
||||
cursor: pointer;
|
||||
|
@ -487,6 +488,7 @@
|
|||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
button {
|
||||
|
|
|
@ -968,6 +968,7 @@
|
|||
text-overflow: ellipsis;
|
||||
/*超出显示为省略号*/
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
|
@ -1103,5 +1104,6 @@
|
|||
text-overflow: ellipsis;
|
||||
/*超出显示为省略号*/
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -114,6 +114,7 @@
|
|||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
button {
|
||||
margin: 0px;
|
||||
|
|
|
@ -450,6 +450,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.up:hover {
|
||||
|
@ -496,6 +497,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.child:hover {
|
||||
|
|
|
@ -449,6 +449,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.up:hover {
|
||||
|
@ -495,6 +496,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.child:hover {
|
||||
|
|
|
@ -6,21 +6,44 @@
|
|||
<div class="resultListSearchInput-father">
|
||||
<div class="resultListSearchInput-son">
|
||||
模糊搜索
|
||||
<a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
|
||||
@search="getAppResources" @change="onSearch" class="resultListSearchInput" />
|
||||
<a-input-search
|
||||
v-model:value="searchValue"
|
||||
placeholder="请输入关键词"
|
||||
enter-button="搜索"
|
||||
size="large"
|
||||
@search="getAppResources"
|
||||
@change="onSearch"
|
||||
class="resultListSearchInput"
|
||||
/>
|
||||
<button class="button-reset" @click="chongzhi()">重置</button>
|
||||
<div class="hengxian"></div>
|
||||
</div>
|
||||
</div>
|
||||
<searchResultList v-show="resourceList.data && resourceList.data.length > 0" :key="listKey2"
|
||||
:resourceList="resourceList" :resourceTotal="resourceTotal" selectCardsname="融合服务" />
|
||||
<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" />
|
||||
<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">
|
||||
<div
|
||||
v-if="resourceList.data && resourceList.data.length <= 0"
|
||||
style="margin-top: 2rem"
|
||||
>
|
||||
<a-empty />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -28,26 +51,17 @@
|
|||
<home-footer></home-footer>
|
||||
</template>
|
||||
<script>
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import {
|
||||
defineComponent,
|
||||
reactive,
|
||||
ref,
|
||||
toRefs,
|
||||
onMounted,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
|
||||
|
||||
import {
|
||||
getIntegrationServicesList,
|
||||
} from '@/api/home.js'
|
||||
import { useRouter } from 'vue-router'
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import searchResultList from '@/views/home/components/searchResultList.vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getIntegrationServicesList } from '@/api/home.js'
|
||||
import { useRouter } from 'vue-router'
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import searchResultList from '@/views/home/components/searchResultList.vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
export default defineComponent({
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
// 分页
|
||||
const loading = ref(true)
|
||||
|
@ -95,12 +109,11 @@ export default defineComponent({
|
|||
paramsGetResources.orderField = 'create_date'
|
||||
paramsGetResources.orderType = 'DESC'
|
||||
mybus.emit('chongzhi', {
|
||||
type: '融合服务'
|
||||
type: '融合服务',
|
||||
})
|
||||
getAppResources()
|
||||
}
|
||||
|
||||
|
||||
const getAppResources = () => {
|
||||
getIntegrationList()
|
||||
}
|
||||
|
@ -112,17 +125,20 @@ export default defineComponent({
|
|||
page: currentPage.value,
|
||||
orderField: paramsGetResources.orderField,
|
||||
orderType: paramsGetResources.orderType,
|
||||
name: searchValue.value
|
||||
name: searchValue.value,
|
||||
}
|
||||
getIntegrationServicesList(postData).then(res => {
|
||||
getIntegrationServicesList(postData).then(
|
||||
(res) => {
|
||||
if (res.data.code !== 0) {
|
||||
return message.error(res.data.msg)
|
||||
}
|
||||
resourceList.data = res.data.data.list || []
|
||||
resourceTotal.value = res.data.data.total || 0
|
||||
}, err => {
|
||||
},
|
||||
(err) => {
|
||||
message.error(err)
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
mybus.on('paramsGetResources', (ids) => {
|
||||
|
@ -163,7 +179,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
listKey2.value++;
|
||||
listKey2.value++
|
||||
getAppResources()
|
||||
})
|
||||
|
||||
|
@ -208,10 +224,10 @@ export default defineComponent({
|
|||
mybus.off('refresh')
|
||||
mybus.off('changePage')
|
||||
},
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.resultListSearchInput-father {
|
||||
.resultListSearchInput-father {
|
||||
background: #f3f5f9;
|
||||
padding: 0.2rem;
|
||||
|
||||
|
@ -228,9 +244,9 @@ export default defineComponent({
|
|||
margin-top: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.resultListSearchInput {
|
||||
.resultListSearchInput {
|
||||
margin-left: 0.1rem;
|
||||
|
||||
:deep(.ant-input) {
|
||||
|
@ -255,9 +271,9 @@ export default defineComponent({
|
|||
:deep(.ant-input-group-addon) {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-reset {
|
||||
.button-reset {
|
||||
border: 0;
|
||||
outline: none;
|
||||
width: 0.8rem;
|
||||
|
@ -270,9 +286,9 @@ export default defineComponent({
|
|||
line-height: 0.34rem;
|
||||
margin-left: 2.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.details-pageconetent {
|
||||
.details-pageconetent {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
@ -308,12 +324,13 @@ export default defineComponent({
|
|||
padding-bottom: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-card-grid) {
|
||||
:deep(.ant-card-grid) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -185,6 +185,7 @@
|
|||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
button {
|
||||
margin: 0rem;
|
||||
|
|
|
@ -423,6 +423,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.left:hover {
|
||||
color: #0058e1;
|
||||
|
|
|
@ -328,6 +328,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.name:hover {
|
||||
color: #0058e1;
|
||||
|
|
|
@ -169,6 +169,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.text {
|
||||
width: 100%;
|
||||
|
|
|
@ -153,7 +153,7 @@
|
|||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.popular-ability {
|
||||
.popular-ability {
|
||||
height: 6.8rem;
|
||||
background: url('~@/assets/newHome/popular-bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
|
@ -298,6 +298,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.text {
|
||||
width: 100%;
|
||||
|
@ -343,5 +344,5 @@
|
|||
background: rgba(0, 88, 225, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -179,6 +179,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.content-top-pingfen {
|
||||
background: unset;
|
||||
|
@ -203,6 +204,7 @@
|
|||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 0.12rem;
|
||||
cursor: pointer;
|
||||
word-break: break-all;
|
||||
}
|
||||
.num {
|
||||
font-size: 0.14rem;
|
||||
|
|
|
@ -167,6 +167,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.pulish-time {
|
||||
position: absolute;
|
||||
|
|
|
@ -176,6 +176,7 @@
|
|||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
color: #999999;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.content-body-bottom {
|
||||
|
|
|
@ -300,6 +300,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
.type {
|
||||
background: #0087ff;
|
||||
color: #fff;
|
||||
|
@ -321,6 +322,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.result:hover {
|
||||
color: #0058e1;
|
||||
|
|
|
@ -192,6 +192,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.result:hover {
|
||||
color: #0058e1;
|
||||
|
|
|
@ -201,6 +201,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.result:hover {
|
||||
color: #0058e1;
|
||||
|
|
|
@ -222,6 +222,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.content-body-content {
|
||||
margin-top: 10px;
|
||||
|
@ -238,6 +239,7 @@
|
|||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
color: #999999;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.content-body-bottom {
|
||||
|
|
|
@ -863,6 +863,7 @@
|
|||
-webkit-box-orient: vertical;
|
||||
max-width: 8.1rem;
|
||||
line-height: 24px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.content-body-bottom {
|
||||
|
|
|
@ -195,6 +195,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.content-body-content {
|
||||
margin-top: 10px;
|
||||
|
@ -212,6 +213,7 @@
|
|||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
color: #999999;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.content-body-bottom {
|
||||
|
|
|
@ -573,6 +573,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -194,6 +194,7 @@
|
|||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.result:hover {
|
||||
|
|
|
@ -213,6 +213,7 @@
|
|||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.result:hover {
|
||||
|
|
|
@ -862,6 +862,7 @@
|
|||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -198,6 +198,7 @@
|
|||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.result:hover {
|
||||
|
|
Loading…
Reference in New Issue