bug746组件服务智能算法-算法优势
This commit is contained in:
parent
a9e500490d
commit
fb2e57e756
|
@ -9,7 +9,7 @@
|
||||||
<div class="algorithm-advantage" v-if="flag">
|
<div class="algorithm-advantage" v-if="flag">
|
||||||
<detals-title title="算法优势" type="ADVANTGE"></detals-title>
|
<detals-title title="算法优势" type="ADVANTGE"></detals-title>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="top">
|
<div class="top" v-if="data.length < 3">
|
||||||
<div v-for="val in data" :key="val.id" class="item">
|
<div v-for="val in data" :key="val.id" class="item">
|
||||||
<div class="icon" :class="val.icon"></div>
|
<div class="icon" :class="val.icon"></div>
|
||||||
<a-tooltip>
|
<a-tooltip>
|
||||||
|
@ -22,17 +22,44 @@
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="top" v-else>
|
||||||
|
<swiper
|
||||||
|
:slidesPerView="3"
|
||||||
|
:spaceBetween="30"
|
||||||
|
:pagination="{ clickable: true }"
|
||||||
|
:modules="modules"
|
||||||
|
class="mySwiper2"
|
||||||
|
@swiper="onSwiper"
|
||||||
|
@slideChange="onSlideChange"
|
||||||
|
>
|
||||||
|
<swiper-slide v-for="val in data" :key="val.id" class="item">
|
||||||
|
<div class="icon" :class="val.icon"></div>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>{{ val.title }}</template>
|
||||||
|
<div class="title">{{ val.title }}</div>
|
||||||
|
</a-tooltip>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>{{ val.text }}</template>
|
||||||
|
<div class="text">{{ val.text }}</div>
|
||||||
|
</a-tooltip>
|
||||||
|
</swiper-slide>
|
||||||
|
</swiper>
|
||||||
|
</div>
|
||||||
<div class="bottom"></div>
|
<div class="bottom"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, defineProps, watch } from 'vue'
|
import { ref, defineProps, watch } from 'vue'
|
||||||
|
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
|
||||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||||
|
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
|
||||||
|
import 'swiper/swiper-bundle.min.css'
|
||||||
const data = ref([])
|
const data = ref([])
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
dataList: { type: Object, default: null },
|
dataList: { type: Object, default: null },
|
||||||
})
|
})
|
||||||
|
const modules = ref([Pagination])
|
||||||
const flag = ref(true)
|
const flag = ref(true)
|
||||||
if (props.dataList.infoList) {
|
if (props.dataList.infoList) {
|
||||||
let obj = props.dataList.infoList.filter(
|
let obj = props.dataList.infoList.filter(
|
||||||
|
@ -43,10 +70,10 @@
|
||||||
} else {
|
} else {
|
||||||
data.value = []
|
data.value = []
|
||||||
let arr = JSON.parse(obj.attrValue)
|
let arr = JSON.parse(obj.attrValue)
|
||||||
if (arr.length > 3) {
|
// if (arr.length > 3) {
|
||||||
// 截取数组前三位
|
// // 截取数组前三位
|
||||||
arr = arr.splice(0, 3)
|
// arr = arr.splice(0, 3)
|
||||||
}
|
// }
|
||||||
arr.forEach((item, index) => {
|
arr.forEach((item, index) => {
|
||||||
data.value.push({
|
data.value.push({
|
||||||
title: item.name,
|
title: item.name,
|
||||||
|
@ -67,10 +94,10 @@
|
||||||
} else {
|
} else {
|
||||||
data.value = []
|
data.value = []
|
||||||
let arr = JSON.parse(obj.attrValue)
|
let arr = JSON.parse(obj.attrValue)
|
||||||
if (arr.length > 3) {
|
// if (arr.length > 3) {
|
||||||
// 截取数组前三位
|
// // 截取数组前三位
|
||||||
arr = arr.splice(0, 3)
|
// arr = arr.splice(0, 3)
|
||||||
}
|
// }
|
||||||
arr.forEach((item, index) => {
|
arr.forEach((item, index) => {
|
||||||
data.value.push({
|
data.value.push({
|
||||||
title: item.name,
|
title: item.name,
|
||||||
|
@ -90,6 +117,7 @@
|
||||||
.main {
|
.main {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
.top {
|
.top {
|
||||||
|
width: 13.14rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -98,7 +98,16 @@
|
||||||
label="应用领域"
|
label="应用领域"
|
||||||
name="detailsField"
|
name="detailsField"
|
||||||
style="width: 6.93rem"
|
style="width: 6.93rem"
|
||||||
:rules="[{ required: true, message: '请选择应用领域' }]"
|
:rules="[
|
||||||
|
{
|
||||||
|
required:
|
||||||
|
formName.detailsType === '应用资源' ||
|
||||||
|
formName.detailsType === '组件服务'
|
||||||
|
? true
|
||||||
|
: false,
|
||||||
|
message: '请选择应用领域',
|
||||||
|
},
|
||||||
|
]"
|
||||||
>
|
>
|
||||||
<a-select
|
<a-select
|
||||||
:disabled="
|
:disabled="
|
||||||
|
|
Loading…
Reference in New Issue