149 lines
3.2 KiB
Vue
149 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 标题 -->
|
|
<div class="top-tit">
|
|
开元云
|
|
</div>
|
|
|
|
<!-- 供应商 -->
|
|
<div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier">
|
|
<div class="supplier-title">{{ cloudData.secMenu[0].secTitle }}</div>
|
|
</div>
|
|
|
|
<!-- 云产品 -->
|
|
<div class="box">
|
|
<!-- 循环所有分类下的产品 -->
|
|
<template v-if="cloudData.secMenu && cloudData.secMenu.length > 0">
|
|
<template v-for="secMenu in cloudData.secMenu">
|
|
<template v-for="thrMenu in secMenu.thrMenu">
|
|
<!-- 循环每个分类下的产品 -->
|
|
<div
|
|
v-for="product in thrMenu.value"
|
|
:key="product.id"
|
|
class="box-item"
|
|
>
|
|
<!-- 标题 -->
|
|
<div class="item-tit">
|
|
{{ product.name }}
|
|
</div>
|
|
<!-- 详情 -->
|
|
<div class="item-detail">
|
|
{{ thrMenu.thrTitle }}
|
|
</div>
|
|
<!-- 描述 -->
|
|
<div class="item-desc">
|
|
AI应用
|
|
</div>
|
|
<!-- 立即咨询 -->
|
|
<div class="item-btn">
|
|
<div class="btn">
|
|
立即咨询
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { reqNavList } from '@/api/H5/index'
|
|
export default {
|
|
data() {
|
|
return {
|
|
cloudData: {},
|
|
}
|
|
},
|
|
created() {
|
|
this.getCloudData()
|
|
},
|
|
methods: {
|
|
async getCloudData() {
|
|
const res = await reqNavList()
|
|
if (res.status == true) {
|
|
this.cloudData = res.data.product_service[3]
|
|
console.log(this.cloudData);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.top-tit {
|
|
display: flex;
|
|
justify-content: center;
|
|
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
font-size: .3rem;
|
|
}
|
|
|
|
.supplier {
|
|
display: flex;
|
|
padding: .22rem ;
|
|
.supplier-title {
|
|
font-size: .2rem;
|
|
color: #000;
|
|
padding: .1rem .16rem;
|
|
background-color: pink;
|
|
border-radius: 0.08rem;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: 0 .3rem;
|
|
.box-item {
|
|
display: flex;
|
|
width: 48%;
|
|
flex-direction: column;
|
|
align-items: self-start;
|
|
border: .02rem solid #f0f0f0;
|
|
border-radius: .2rem;
|
|
padding: .1rem 0.1rem;
|
|
margin: .34rem 0;
|
|
.item-tit{
|
|
font-size: .14rem;
|
|
color: #000;
|
|
}
|
|
.item-detail{
|
|
color: #737373;
|
|
font-size: .12rem;
|
|
margin: .26rem 0;
|
|
}
|
|
.item-desc{
|
|
color: #acafb3;
|
|
background-color: #e9edf2;
|
|
font-size: .12rem;
|
|
padding: .06rem .1rem;
|
|
border-radius: .08rem;
|
|
}
|
|
.item-btn{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
.btn{
|
|
background-color: #1f70ff;
|
|
color: #fff;
|
|
padding: .05rem .1rem;
|
|
border-radius: .1rem;
|
|
font-size: 0.16rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|