Compare commits
No commits in common. "42ad75d8bfc568b8f2c73a435fc7f078fd08190f" and "f12486677e1377561c35813891cf506802aeface" have entirely different histories.
42ad75d8bf
...
f12486677e
@ -1,31 +1,9 @@
|
|||||||
import request from "@/utils/request";
|
import request from "@/utils/request";
|
||||||
// 获取首页产品
|
|
||||||
export const reqHotProduct = () => {
|
export const reqHotProduct = () => {
|
||||||
return request({
|
return request({
|
||||||
url: '/product/get_firstpage_jizuonet.dspy',
|
url: '/product/get_firstpage_jizuonet.dspy',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 获取云，算，网，用数据
|
|
||||||
export const reqNavList = (data) => {
|
|
||||||
return request({
|
|
||||||
url: '/product/get_firstpage_product_tree.dspy',
|
|
||||||
method: 'post',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
|
||||||
data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//立即咨询
|
|
||||||
export const reqNewHomeConsult = (data) => {
|
|
||||||
return request({
|
|
||||||
url: '/product/add_user_inquiry.dspy',
|
|
||||||
method: 'post',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
|
||||||
data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|||||||
@ -85,7 +85,7 @@ export const constantRoutes = [
|
|||||||
path: '/h5HomePage',
|
path: '/h5HomePage',
|
||||||
name: 'H5HomePage',
|
name: 'H5HomePage',
|
||||||
title: 'H5首页',
|
title: 'H5首页',
|
||||||
component: () => import('@/views/H5/calculate/index.vue'),
|
component: () => import('@/views/H5/indexPage/index.vue'),
|
||||||
hidden: true,
|
hidden: true,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@ -1,151 +0,0 @@
|
|||||||
<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">
|
|
||||||
{{ product.description }}
|
|
||||||
</div>
|
|
||||||
<!-- 描述 -->
|
|
||||||
<div class="item-desc">
|
|
||||||
智算
|
|
||||||
</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[1]
|
|
||||||
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>
|
|
||||||
|
|
||||||
@ -1,150 +0,0 @@
|
|||||||
<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">
|
|
||||||
{{ product.description }}
|
|
||||||
</div>
|
|
||||||
<!-- 描述 -->
|
|
||||||
<div class="item-desc">
|
|
||||||
{{ product.label }}
|
|
||||||
</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[0]
|
|
||||||
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>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
@ -1,101 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="main">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="tabBar">
|
|
||||||
<!-- 首页 -->
|
|
||||||
<div class="tabBar-item">
|
|
||||||
<div class="item-img">
|
|
||||||
<img src="./images/tabBar/home.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="item-text">
|
|
||||||
首页
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 云 -->
|
|
||||||
<div class="tabBar-item">
|
|
||||||
<div class="item-img">
|
|
||||||
<img src="./images/tabBar/cloud.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="item-text">
|
|
||||||
云
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 算 -->
|
|
||||||
<div class="tabBar-item">
|
|
||||||
<div class="item-img">
|
|
||||||
<img src="./images/tabBar/calculate.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="item-text">
|
|
||||||
算
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 网 -->
|
|
||||||
<div class="tabBar-item">
|
|
||||||
<div class="item-img">
|
|
||||||
<img src="./images/tabBar/net.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="item-text">
|
|
||||||
网
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 用 -->
|
|
||||||
<div class="tabBar-item">
|
|
||||||
<div class="item-img">
|
|
||||||
<img src="./images/tabBar/user.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="item-text">
|
|
||||||
用
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import './media'
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.tabBar {
|
|
||||||
padding: .1rem 0;
|
|
||||||
background-color: #fff;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
.tabBar-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-img {
|
|
||||||
margin-bottom: .1rem;
|
|
||||||
img {
|
|
||||||
width: .3rem;
|
|
||||||
height: .3rem;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-text {
|
|
||||||
font-size: .14rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,10 +1,23 @@
|
|||||||
|
// 修正适配函数
|
||||||
function adapter() {
|
function adapter() {
|
||||||
//获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
|
// 获取布局视口宽度
|
||||||
const dpWidth = document.documentElement.clientWidth
|
const dpWidth = document.documentElement.clientWidth
|
||||||
//计算根字体大小
|
// 设置最小和最大宽度限制，防止字体过大或过小
|
||||||
const rootFonstSize = (dpWidth * 100) / 750
|
const minWidth = 375
|
||||||
//设置根字体大小
|
const maxWidth = 1920
|
||||||
document.documentElement.style.fontSize = rootFonstSize + 'px'
|
const constrainedWidth = Math.min(Math.max(dpWidth, minWidth), maxWidth)
|
||||||
|
|
||||||
|
// 计算根字体大小（基于设计稿宽度 1900px）
|
||||||
|
const rootFontSize = (constrainedWidth * 100) / 1900
|
||||||
|
|
||||||
|
// 设置根字体大小，限制在合理范围内
|
||||||
|
document.documentElement.style.fontSize = Math.max(12, Math.min(20, rootFontSize)) + 'px'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 页面加载时执行
|
||||||
adapter()
|
adapter()
|
||||||
window.onresize = adapter()
|
|
||||||
|
// 监听窗口大小变化 - 修正语法错误
|
||||||
|
window.onresize = adapter
|
||||||
|
// 或者使用防抖版本，避免频繁触发
|
||||||
|
// window.addEventListener('resize', debounce(adapter, 200))
|
||||||
|
|||||||
@ -1,151 +0,0 @@
|
|||||||
<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">
|
|
||||||
{{ product.description }}
|
|
||||||
</div>
|
|
||||||
<!-- 描述 -->
|
|
||||||
<div class="item-desc">
|
|
||||||
算力网络
|
|
||||||
</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[2]
|
|
||||||
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>
|
|
||||||
|
|
||||||
@ -1,148 +0,0 @@
|
|||||||
<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>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user