前台加word-break: break-all;
This commit is contained in:
parent
74168d8a2c
commit
f1de4b860e
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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%;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue