updata
9
f/web-kboss/src/api/H5/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
export const reqHotProduct = () => {
|
||||
return request({
|
||||
url: '/product/get_firstpage_jizuonet.dspy',
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
|
||||
@ -80,7 +80,16 @@ export const constantRoutes = [
|
||||
title: '产品详情',
|
||||
component: () => import('@/views/homePage/wxDetailPage.vue'),
|
||||
hidden: true
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/h5HomePage',
|
||||
name: 'H5HomePage',
|
||||
title: 'H5首页',
|
||||
component: () => import('@/views/H5/indexPage/index.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
|
||||
{
|
||||
hidden: true, path: '/screen', name: 'screen', title: '可视化大屏', meta: {
|
||||
title: "可视化大屏", fullPath: "/operation/analyze/screen",
|
||||
}, component: () => import('@/views/product/bigScreen/index.vue'), children: [{
|
||||
|
||||
BIN
f/web-kboss/src/views/H5/images/banner.png
Normal file
|
After Width: | Height: | Size: 4.5 MiB |
BIN
f/web-kboss/src/views/H5/images/top/img.png
Normal file
|
After Width: | Height: | Size: 7.8 KiB |
BIN
f/web-kboss/src/views/H5/images/top/img_1.png
Normal file
|
After Width: | Height: | Size: 8.0 KiB |
BIN
f/web-kboss/src/views/H5/images/top/img_2.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
f/web-kboss/src/views/H5/images/top/img_3.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
f/web-kboss/src/views/H5/images/top/img_4.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
f/web-kboss/src/views/H5/images/top/img_5.png
Normal file
|
After Width: | Height: | Size: 5.4 KiB |
BIN
f/web-kboss/src/views/H5/images/top/img_6.png
Normal file
|
After Width: | Height: | Size: 7.7 KiB |
BIN
f/web-kboss/src/views/H5/images/top/img_7.png
Normal file
|
After Width: | Height: | Size: 9.6 KiB |
BIN
f/web-kboss/src/views/H5/images/top/img_8.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
f/web-kboss/src/views/H5/images/top/img_9.png
Normal file
|
After Width: | Height: | Size: 6.6 KiB |
392
f/web-kboss/src/views/H5/indexPage/index.vue
Normal file
@ -0,0 +1,392 @@
|
||||
<template>
|
||||
<div class="main-page">
|
||||
<!-- banner图 -->
|
||||
<div class="top-box">
|
||||
<div class="title">
|
||||
<p class="title-top">
|
||||
<span class="name">开元云</span> 您身边的AI管家
|
||||
</p>
|
||||
<p class="title-btm">
|
||||
全球领先的AI服务运营商
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 云筑企业基座 -->
|
||||
<div class="base-box">
|
||||
<div class="text">
|
||||
<p class="text-top">云筑企业基座</p>
|
||||
<p class="text-btm">多云结合 让上云更简单</p>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="content">
|
||||
<div class="item-box" v-for="(item, index) in baseData" :key="index">
|
||||
<!-- 标题 -->
|
||||
<div class="item-title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<!-- 介绍 -->
|
||||
<div class="item-description">
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="item-content">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
<div class="icon-box">
|
||||
|
||||
</div>
|
||||
<!-- 价格 -->
|
||||
<div class="item-price">
|
||||
<span class="price-icon">¥</span> <span class="price">{{ item.price }}</span> 台/月
|
||||
</div>
|
||||
<!-- 按钮 -->
|
||||
<div class="item-button">
|
||||
<div class="item-button-text">立即咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 智算未来征程 -->
|
||||
<div class="journey-box">
|
||||
<div class="text">
|
||||
<p class="text-top">智算未来征程</p>
|
||||
<p class="text-btm">多元异构 灵活短租</p>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="content">
|
||||
<div class="item-box" v-for="(item, index) in baseData" :key="index">
|
||||
<!-- 标题 -->
|
||||
<div class="item-title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<!-- 介绍 -->
|
||||
<div class="item-description">
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="item-content">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
<div class="icon-box">
|
||||
|
||||
</div>
|
||||
<!-- 价格 -->
|
||||
<div class="item-price">
|
||||
<span class="price-icon">¥</span> <span class="price">{{ item.price }}</span> 台/月
|
||||
</div>
|
||||
<!-- 按钮 -->
|
||||
<div class="item-button">
|
||||
<div class="item-button-text">立即咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 网织智能经纬 -->
|
||||
<div class="latitude-box">
|
||||
<div class="text">
|
||||
<p class="text-top">网织智能经纬</p>
|
||||
<p class="text-btm">云算网结合 让连接更简单</p>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="content">
|
||||
<div class="item-box" v-for="(item, index) in baseData" :key="index">
|
||||
<!-- 标题 -->
|
||||
<div class="item-title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<!-- 介绍 -->
|
||||
<div class="item-description">
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="item-content">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
<div class="icon-box">
|
||||
|
||||
</div>
|
||||
<!-- 价格 -->
|
||||
<div class="item-price">
|
||||
<span class="price-icon">¥</span> <span class="price">{{ item.price }}</span> 台/月
|
||||
</div>
|
||||
<!-- 按钮 -->
|
||||
<div class="item-button">
|
||||
<div class="item-button-text">立即咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 合作机构 -->
|
||||
<div class="partner">
|
||||
<div class="text">
|
||||
<p class="text-top">合作伙伴</p>
|
||||
<p class="text-btm">Partners</p>
|
||||
</div>
|
||||
<!-- 滚动合作伙伴内容 -->
|
||||
<div class="partner-scroll">
|
||||
<div class="logo-scroll-wrapper">
|
||||
<div class="logo-scroll-container">
|
||||
<div v-for="(image, index) in duplicatedImages" :key="index" class="logo-item">
|
||||
<img :src="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reqHotProduct } from '@/api/H5/index.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseData: [],
|
||||
journeyData: [],
|
||||
latitude: [],
|
||||
images: [
|
||||
require('../images/top/img.png'),
|
||||
require('../images/top/img_1.png'),
|
||||
require('../images/top/img_2.png'),
|
||||
require('../images/top/img_3.png'),
|
||||
require('../images/top/img_4.png'),
|
||||
require('../images/top/img_5.png'),
|
||||
require('../images/top/img_6.png'),
|
||||
require('../images/top/img_8.png'),
|
||||
require('../images/top/img_9.png')
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
duplicatedImages() {
|
||||
return [...this.images, ...this.images]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getHotProduct()
|
||||
},
|
||||
methods: {
|
||||
async getHotProduct() {
|
||||
const res = await reqHotProduct()
|
||||
console.log('数据', res);
|
||||
if (res.status == true) {
|
||||
this.baseData = res.data.base
|
||||
this.journeyData = res.data.suan
|
||||
this.latitude = res.data.net
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.main-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f8fafd;
|
||||
}
|
||||
|
||||
.top-box {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
background: url("../images/banner.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #222f60;
|
||||
|
||||
.name {
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-size: .55rem;
|
||||
}
|
||||
|
||||
.title-top {
|
||||
font-size: .55rem;
|
||||
}
|
||||
|
||||
.title-btm {
|
||||
font-size: .26rem;
|
||||
margin-top: .98rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 子项标题
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: .14rem 0;
|
||||
width: 100%;
|
||||
|
||||
.text-top {
|
||||
font-size: .26rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.text-btm {
|
||||
margin-top: .14rem;
|
||||
font-size: .18rem;
|
||||
color: #707070;
|
||||
}
|
||||
}
|
||||
|
||||
// 云筑企业基座
|
||||
.base-box,
|
||||
.journey-box,
|
||||
.latitude-box {
|
||||
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.3rem 0.4rem;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 0.2rem;
|
||||
|
||||
.item-box {
|
||||
width: 48%;
|
||||
background-color: #fff;
|
||||
border-radius: 0.1rem;
|
||||
padding: 0.2rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 0.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.item-title {
|
||||
font-size: 0.2rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
font-size: 0.14rem;
|
||||
color: #666;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
font-size: 0.14rem;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
font-size: 0.1rem;
|
||||
font-weight: bold;
|
||||
color: #d4d6e1;
|
||||
margin: 0.15rem 0;
|
||||
|
||||
.price {
|
||||
font-size: .22rem;
|
||||
color: #f52220;
|
||||
}
|
||||
|
||||
.price-icon {
|
||||
color: #f52220;
|
||||
font-size: .1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.item-button {
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
border-radius: 0.04rem;
|
||||
padding: 0.08rem 0;
|
||||
text-align: center;
|
||||
|
||||
.item-button-text {
|
||||
color: #fff;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 合作伙伴样式
|
||||
.partner {
|
||||
background-color: #f8f9fd;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.3rem 0.4rem;
|
||||
|
||||
.partner-scroll {
|
||||
width: 100%;
|
||||
max-width: 14rem;
|
||||
margin: 0 auto;
|
||||
padding: .15rem;
|
||||
background: #fff;
|
||||
border-radius: .16rem;
|
||||
margin-bottom: .3rem;
|
||||
|
||||
.logo-scroll-wrapper {
|
||||
width: 100%;
|
||||
height: .85rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-scroll-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
animation: scroll 15s linear infinite;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.logo-item {
|
||||
flex: 0 0 auto;
|
||||
width: 1.68rem;
|
||||
height: 100%;
|
||||
margin-right: .2rem;
|
||||
background: #fff;
|
||||
border-radius: .04rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -189,7 +189,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column align="center" header-align="center" label="订单原价" width="140">
|
||||
<template slot-scope="scope">
|
||||
<div class="cell-content">¥{{ scope.row.list_price }}</div>
|
||||
<div class="cell-content">¥{{ scope.row.origin_amout }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" header-align="center" label="订单折后价" width="140">
|
||||
|
||||
0
f/web-kboss/src/views/homePage/mainPage/qqq.vue
Normal file
@ -590,7 +590,7 @@ export default {
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
// -webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||