updata
This commit is contained in:
parent
8a8fe00e96
commit
9436cc7e52
@ -1,3 +1,4 @@
|
||||
让图标始终是对其的状态 让布局规整些
|
||||
<template>
|
||||
<div class="main-page">
|
||||
<!-- banner图 -->
|
||||
@ -11,6 +12,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 云筑企业基座 -->
|
||||
<div class="base-box">
|
||||
<div class="text">
|
||||
@ -19,33 +21,30 @@
|
||||
</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 class="item-box" v-for="(item, key) in baseData" :key="key">
|
||||
<div class="item-title">{{ item.title }}</div>
|
||||
<div class="item-description">{{ item.description }}</div>
|
||||
|
||||
<!-- 优势列表 -->
|
||||
<div class="advantage-list" v-if="item.list && item.list.length">
|
||||
<div class="advantage-item" v-for="listItem in item.list" :key="listItem.id">
|
||||
<img v-if="listItem.icon" :src="getIconPath(listItem.icon)" alt="" class="advantage-icon" />
|
||||
<span v-if="listItem.name" class="advantage-name">{{ listItem.name }} : </span>
|
||||
<span class="advantage-content">{{ listItem.content }}</span>
|
||||
</div>
|
||||
<!-- 价格 -->
|
||||
</div>
|
||||
|
||||
<div class="item-price">
|
||||
<span class="price-icon">￥</span> <span class="price">{{ item.price }}</span> 台/月
|
||||
<span class="price-icon">￥</span>
|
||||
<span class="price">{{ item.price }}</span> {{ item.price_unit }}
|
||||
</div>
|
||||
<!-- 按钮 -->
|
||||
<div class="item-button">
|
||||
<div class="item-button-text">立即咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 智算未来征程 -->
|
||||
<div class="journey-box">
|
||||
<div class="text">
|
||||
@ -54,33 +53,30 @@
|
||||
</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 class="item-box" v-for="(item, key) in journeyData" :key="key">
|
||||
<div class="item-title">{{ item.title }}</div>
|
||||
<div class="item-description">{{ item.description }}</div>
|
||||
|
||||
<!-- 优势列表 -->
|
||||
<div class="advantage-list" v-if="item.list && item.list.length">
|
||||
<div class="advantage-item" v-for="listItem in item.list" :key="listItem.id">
|
||||
<img v-if="listItem.icon" :src="getIconPath(listItem.icon)" alt="" class="advantage-icon" />
|
||||
<span v-if="listItem.name" class="advantage-name">{{ listItem.name }}：</span>
|
||||
<span class="advantage-content">{{ listItem.content }}</span>
|
||||
</div>
|
||||
<!-- 价格 -->
|
||||
</div>
|
||||
|
||||
<div class="item-price">
|
||||
<span class="price-icon">￥</span> <span class="price">{{ item.price }}</span> 台/月
|
||||
<span class="price-icon">￥</span>
|
||||
<span class="price">{{ item.price }}</span> {{ item.price_unit }}
|
||||
</div>
|
||||
<!-- 按钮 -->
|
||||
<div class="item-button">
|
||||
<div class="item-button-text">立即咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 网织智能经纬 -->
|
||||
<div class="latitude-box">
|
||||
<div class="text">
|
||||
@ -89,27 +85,30 @@
|
||||
</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 class="item-box" v-for="(item, key) in latitude" :key="key">
|
||||
<div class="item-title">{{ item.title }}</div>
|
||||
<div class="item-description">{{ item.description }}</div>
|
||||
|
||||
<!-- 优势列表 -->
|
||||
<div class="advantage-list" v-if="item.advantageList && item.advantageList.length">
|
||||
<div class="advantage-item" v-for="advantage in item.advantageList" :key="advantage.id">
|
||||
<img v-if="advantage.icon" :src="getIconPath(advantage.icon)" alt="" class="advantage-icon" />
|
||||
<span class="advantage-name">{{ advantage.name }}：</span>
|
||||
<span class="advantage-content">{{ advantage.content }}</span>
|
||||
</div>
|
||||
<!-- 价格 -->
|
||||
<div class="item-price">
|
||||
<span class="price-icon">￥</span> <span class="price">{{ item.price }}</span> 台/月
|
||||
</div>
|
||||
<!-- 按钮 -->
|
||||
|
||||
<!-- 标签列表 - 添加边框 -->
|
||||
<div class="tag-list" v-if="item.tagList && item.tagList.length">
|
||||
<span
|
||||
class="tag-item"
|
||||
v-for="tag in item.tagList"
|
||||
:key="tag.id"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="item-button">
|
||||
<div class="item-button-text">立即咨询</div>
|
||||
</div>
|
||||
@ -117,7 +116,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 合作机构 -->
|
||||
<!-- 合作伙伴 -->
|
||||
<div class="partner">
|
||||
<div class="text">
|
||||
<p class="text-top">合作伙伴</p>
|
||||
@ -134,18 +133,65 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<div class="footer">
|
||||
<div class="left-box">
|
||||
<div class="logo-footer">
|
||||
<img :src="logoImg" alt="公司logo" v-if="logoImg">
|
||||
<img src="@/assets/kyy/LOGO.png" alt="公司logo" class="img" v-else>
|
||||
</div>
|
||||
<div class="content-main">
|
||||
<ul>
|
||||
<li>地址: {{ address }}</li>
|
||||
<li>电话：400-6150805
|
||||
<span class="phone-number">010-65917875</span>
|
||||
</li>
|
||||
<li>邮箱：Open-computing@kaiyuancloud.cn</li>
|
||||
<li>IPC备案号: {{ ICP }}
|
||||
<span class="copyright">版权所有 @kaiyuanyun 2023</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="@/image/login/policeInsignia/policeInsignia.png" alt="公安备案图标" class="police-icon">
|
||||
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010502054007" rel="noreferrer" target="_blank"
|
||||
class="police-link">京公网安备11010502054007</a>
|
||||
<span>
|
||||
<router-link tag="a" target="_blank" class="license-link"
|
||||
:to="{ name: 'homePageImage' }">经营许可证:京B2-20232313</router-link>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="qr-box">
|
||||
<div class="qr-code">
|
||||
<img src="@/assets/kyy/客服wechat.png" alt="微信客服二维码">
|
||||
</div>
|
||||
<span class="qr-content">微信客服</span>
|
||||
</div>
|
||||
<div class="qr-box qr-box-margin">
|
||||
<div class="qr-code">
|
||||
<img src="@/assets/kyy/kyy公众号.jpg" alt="公众号二维码">
|
||||
</div>
|
||||
<span class="qr-content">扫描关注二维码</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reqHotProduct } from '@/api/H5/index.js'
|
||||
import { getLogoAPI } from "@/api/login"
|
||||
|
||||
export default {
|
||||
name: 'MainPage',
|
||||
data() {
|
||||
return {
|
||||
baseData: [],
|
||||
journeyData: [],
|
||||
latitude: [],
|
||||
baseData: {},
|
||||
journeyData: {},
|
||||
latitude: {},
|
||||
images: [
|
||||
require('../images/top/img.png'),
|
||||
require('../images/top/img_1.png'),
|
||||
@ -156,7 +202,13 @@ export default {
|
||||
require('../images/top/img_6.png'),
|
||||
require('../images/top/img_8.png'),
|
||||
require('../images/top/img_9.png')
|
||||
]
|
||||
],
|
||||
logoImg: require("@/assets/logo/colorLogo.png"),
|
||||
logoText: "开元云(北京)科技有限公司",
|
||||
url: window.location.href,
|
||||
photosUrl: [],
|
||||
ICP: "京ICP备2022001945号-1",
|
||||
address: "农业展览馆13号瑞辰国际中心518B(团结湖地铁站c东南口步行420米)"
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -165,34 +217,109 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getHotProduct()
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
try {
|
||||
await this.getHotProduct()
|
||||
await this.getCompanyInfo()
|
||||
} catch (error) {
|
||||
console.error('数据加载失败:', error)
|
||||
}
|
||||
},
|
||||
|
||||
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
|
||||
console.log('热门产品数据', res)
|
||||
|
||||
if (res.status) {
|
||||
// 直接使用对象结构
|
||||
this.baseData = res.data.base || {}
|
||||
this.journeyData = res.data.suan || {}
|
||||
this.latitude = res.data.net || {}
|
||||
}
|
||||
},
|
||||
|
||||
async getCompanyInfo() {
|
||||
const params = {
|
||||
url_link: this.parseURL(this.url)
|
||||
}
|
||||
|
||||
const res = await getLogoAPI(params)
|
||||
|
||||
if (res.status && res.data && res.data.length) {
|
||||
this.photosUrl = res.data[0]
|
||||
|
||||
if (this.photosUrl.orgname !== '业主机构') {
|
||||
this.logoImg = this.photosUrl.logo || this.logoImg
|
||||
this.logoText = this.photosUrl.orgname || this.logoText
|
||||
this.ICP = this.photosUrl.license_number || this.ICP
|
||||
this.address = this.photosUrl.address || this.address
|
||||
}
|
||||
} else {
|
||||
this.showErrorMessage(res.msg || '获取公司信息失败')
|
||||
}
|
||||
},
|
||||
|
||||
parseURL(url) {
|
||||
if (url.includes("#")) {
|
||||
return url.split("#")[0]
|
||||
}
|
||||
return url
|
||||
},
|
||||
|
||||
showErrorMessage(message) {
|
||||
this.$message({
|
||||
message,
|
||||
type: "error"
|
||||
})
|
||||
},
|
||||
|
||||
// 获取图标路径
|
||||
getIconPath(iconPath) {
|
||||
// 如果图标路径是绝对路径或网络路径，直接返回
|
||||
if (iconPath.startsWith('http') || iconPath.startsWith('//') || iconPath.startsWith('data:')) {
|
||||
return iconPath
|
||||
}
|
||||
// 如果是相对路径，尝试使用 require 加载
|
||||
try {
|
||||
// 注意：这里可能需要根据实际路径调整
|
||||
// 假设图标在 @/views/homePage/mainPage/ 目录下
|
||||
return require(`@/views/homePage/mainPage/${iconPath}`)
|
||||
} catch (e) {
|
||||
console.warn('图标加载失败:', iconPath)
|
||||
return ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
<style lang="less">
|
||||
html, body {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.main-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-y: auto !important;
|
||||
background-color: #f8fafd;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.main-page {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #f8fafd;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.top-box {
|
||||
width: 100%;
|
||||
@ -229,7 +356,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// 子项标题
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -244,17 +370,14 @@ export default {
|
||||
}
|
||||
|
||||
.text-btm {
|
||||
margin-top: .14rem;
|
||||
font-size: .18rem;
|
||||
color: #707070;
|
||||
}
|
||||
}
|
||||
|
||||
// 云筑企业基座
|
||||
.base-box,
|
||||
.journey-box,
|
||||
.latitude-box {
|
||||
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -287,14 +410,38 @@ export default {
|
||||
font-size: 0.14rem;
|
||||
color: #666;
|
||||
margin-bottom: 0.15rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
font-size: 0.14rem;
|
||||
color: #333;
|
||||
.advantage-list {
|
||||
margin: 0.1rem 0;
|
||||
.advantage-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
font-size: 0.12rem;
|
||||
color: #666;
|
||||
margin-bottom: 0.08rem;
|
||||
line-height: 1.4;
|
||||
|
||||
.advantage-icon {
|
||||
width: 0.16rem;
|
||||
height: 0.16rem;
|
||||
margin-right: 0.05rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.advantage-name {
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
margin-right: 0.05rem;
|
||||
}
|
||||
|
||||
.advantage-content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-price {
|
||||
font-size: 0.1rem;
|
||||
@ -313,11 +460,30 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.1rem;
|
||||
margin: 0.15rem 0;
|
||||
|
||||
.tag-item {
|
||||
padding: 0.04rem 0.12rem;
|
||||
font-size: 0.12rem;
|
||||
color: #aeb6bf;
|
||||
background-color: #fff;
|
||||
border: .02rem solid #c8d6e7;
|
||||
border-radius: 0.12rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.item-button {
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
border-radius: 0.04rem;
|
||||
padding: 0.08rem 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-top: auto;
|
||||
|
||||
.item-button-text {
|
||||
color: #fff;
|
||||
@ -328,7 +494,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// 合作伙伴样式
|
||||
.partner {
|
||||
background-color: #f8f9fd;
|
||||
width: 100%;
|
||||
@ -389,4 +554,124 @@ export default {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
background: #f5f7fa;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.4rem;
|
||||
border-top: 0.013rem solid #e4e7ed;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.left-box {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.logo-footer {
|
||||
width: 1.333rem;
|
||||
height: 0.4rem;
|
||||
margin-right: 0.667rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.content-main {
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 0.16rem;
|
||||
color: #606266;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 0.08rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #409eff;
|
||||
text-decoration: none;
|
||||
font-size: 0.16rem;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.phone-number {
|
||||
margin-left: 0.267rem;
|
||||
font-size: .16rem;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-left: 0.267rem;
|
||||
font-size: .16rem;
|
||||
}
|
||||
|
||||
.police-icon {
|
||||
width: 0.227rem;
|
||||
height: 0.227rem;
|
||||
margin-right: 0.027rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.police-link {
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
|
||||
.license-link {
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
|
||||
.right-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.qr-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.qr-code {
|
||||
width: 1.333rem;
|
||||
height: 1.333rem;
|
||||
background: #fff;
|
||||
border-radius: 0.053rem;
|
||||
margin-bottom: 0.133rem;
|
||||
padding: 0.08rem;
|
||||
border: 0.013rem solid #e4e7ed;
|
||||
box-sizing: content-box;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-content {
|
||||
font-size: 0.16rem;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-box-margin {
|
||||
margin-left: 0.667rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
23
f/web-kboss/src/views/H5/media.js
Normal file
23
f/web-kboss/src/views/H5/media.js
Normal file
@ -0,0 +1,23 @@
|
||||
// 修正适配函数
|
||||
function adapter() {
|
||||
// 获取布局视口宽度
|
||||
const dpWidth = document.documentElement.clientWidth
|
||||
// 设置最小和最大宽度限制，防止字体过大或过小
|
||||
const minWidth = 375
|
||||
const maxWidth = 1920
|
||||
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()
|
||||
|
||||
// 监听窗口大小变化 - 修正语法错误
|
||||
window.onresize = adapter
|
||||
// 或者使用防抖版本，避免频繁触发
|
||||
// window.addEventListener('resize', debounce(adapter, 200))
|
||||
@ -205,9 +205,8 @@ export default Vue.extend({
|
||||
|
||||
async initMybalance() {
|
||||
const res = await editReachargelogAPI()
|
||||
if (res.status) {
|
||||
// 注意：根据您的 user 模块，这里需要使用 'SETMYBANLANCE' 而不是 'user/setMybalance'
|
||||
this.$store.commit('SETMYBANLANCE', res.data)
|
||||
if (res.status==true) {
|
||||
this.mybalance = res.data
|
||||
}
|
||||
},
|
||||
async getUnreadMsgCount() {
|
||||
@ -282,11 +281,7 @@ export default Vue.extend({
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
mybalance: state => state.user.mybalance,
|
||||
})
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user