updata
This commit is contained in:
parent
54e01453d5
commit
f702d39c5b
BIN
f/web-kboss/src/assets/image/icon1.png
Normal file
BIN
f/web-kboss/src/assets/image/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
f/web-kboss/src/assets/image/icon2.png
Normal file
BIN
f/web-kboss/src/assets/image/icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1001 B |
BIN
f/web-kboss/src/assets/image/icon3.png
Normal file
BIN
f/web-kboss/src/assets/image/icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
f/web-kboss/src/assets/image/icon4.png
Normal file
BIN
f/web-kboss/src/assets/image/icon4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@ -338,7 +338,7 @@ export const asyncRoutes = [
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
component: () => import('../views/customer/orderManagement/index.vue'),
|
||||
component: () => import('@/views/product/productHome/productIndex/index.vue'),
|
||||
name: 'ResourceOverview',
|
||||
meta: {
|
||||
title: "资源概览",
|
||||
|
||||
@ -78,17 +78,17 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
|
||||
background: #C6D7EB;
|
||||
border-radius: 6px;
|
||||
border: 1.5px solid #f8faff;
|
||||
box-shadow: 0 1px 4px rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, #818cf8 0%, #a78bfa 50%, #c084fc 100%);
|
||||
background: #C6D7EB;
|
||||
box-shadow: 0 1px 6px rgba(99, 102, 241, 0.35);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: linear-gradient(180deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
|
||||
background: #C6D7EB;
|
||||
}
|
||||
|
||||
BIN
f/web-kboss/src/views/homePage/about/img/.png
Normal file
BIN
f/web-kboss/src/views/homePage/about/img/.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
f/web-kboss/src/views/homePage/about/img/Newbanner.png
Normal file
BIN
f/web-kboss/src/views/homePage/about/img/Newbanner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 335 KiB |
|
Before Width: | Height: | Size: 790 KiB After Width: | Height: | Size: 790 KiB |
BIN
f/web-kboss/src/views/homePage/about/img/advantage2.png
Normal file
BIN
f/web-kboss/src/views/homePage/about/img/advantage2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
f/web-kboss/src/views/homePage/about/img/advantage3.png
Normal file
BIN
f/web-kboss/src/views/homePage/about/img/advantage3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
BIN
f/web-kboss/src/views/homePage/about/img/advantage4.png
Normal file
BIN
f/web-kboss/src/views/homePage/about/img/advantage4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
f/web-kboss/src/views/homePage/about/img/advantage5.png
Normal file
BIN
f/web-kboss/src/views/homePage/about/img/advantage5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
f/web-kboss/src/views/homePage/about/img/advantage6.png
Normal file
BIN
f/web-kboss/src/views/homePage/about/img/advantage6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
f/web-kboss/src/views/homePage/about/img/jzg.png
Normal file
BIN
f/web-kboss/src/views/homePage/about/img/jzg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
f/web-kboss/src/views/homePage/about/img/sm.png
Normal file
BIN
f/web-kboss/src/views/homePage/about/img/sm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
f/web-kboss/src/views/homePage/about/img/yj.png
Normal file
BIN
f/web-kboss/src/views/homePage/about/img/yj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
f/web-kboss/src/views/homePage/about/img/zizhi.png
Normal file
BIN
f/web-kboss/src/views/homePage/about/img/zizhi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
@ -1,127 +1,161 @@
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<div class="banner">
|
||||
<span v-if="JSON.stringify(logoInfoNew)!=='{}'" style="font-size: 38px">
|
||||
{{ logoInfoNew.home.bannerTitle }} <span style="color: #0e0b0b">{{ translations[language].slogan }}</span>
|
||||
</span>
|
||||
<div v-if="JSON.stringify(logoInfoNew) !== '{}'" style="font-size: 38px;">
|
||||
<!-- 开元云 标题 -->
|
||||
<div>{{ logoInfoNew.home.bannerTitle }}</div>
|
||||
<p style="color: #0e0b0b">全球领先的AI服务运营商</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mainBox" style="padding-top: 35px">
|
||||
<div class="inBox">
|
||||
<div class="leftBox">
|
||||
<img v-if="JSON.stringify(logoInfoNew)!=='{}'"
|
||||
:src="logoInfoNew.home.logoImg"
|
||||
alt="">
|
||||
<p class="leftBoxtitle">关于<span class="gradient-text">我们</span></p>
|
||||
<!-- <img v-if="JSON.stringify(logoInfoNew) !== '{}'" :src="logoInfoNew.home.logoImg" alt=""> -->
|
||||
</div>
|
||||
<div v-if="JSON.stringify(logoInfoNew)!=='{}'" class="rightBox">
|
||||
<p v-for="(i,index) in logoInfoNew.about.content" :key="index">
|
||||
<div v-if="JSON.stringify(logoInfoNew) !== '{}'" class="rightBox">
|
||||
<p v-for="(i, index) in logoInfoNew.about.content" :key="index">
|
||||
{{ i }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 公司资质 -->
|
||||
<div class="zizhi">
|
||||
<div style="width: 1400px;">
|
||||
<div style="text-align:center;font-size: 26px;font-weight: bold;margin: 55px 0;width: 100%;margin-bottom: 50px">
|
||||
{{ translations[language].qualifications }}
|
||||
<div style="text-align:center;font-size: 30px;font-weight: bold;margin: 55px 0;width: 100%;margin-bottom: 50px">
|
||||
公司<span class="gradient-text">资质</span>
|
||||
</div>
|
||||
<LogoTwo></LogoTwo>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="why">
|
||||
<ul class="whyUl">
|
||||
<li>
|
||||
<span class="icon"><img src="./img/1.png" alt=""></span>
|
||||
<div class="title">{{ translations[language].mission }}</div>
|
||||
<div class="description">
|
||||
<span style="color:#222F60;font-weight: bold;margin-bottom: 10px;display: flex;justify-content: center;align-items: center">
|
||||
{{ translations[language].missionContent }}
|
||||
</span>
|
||||
<!-- 企业文化 -->
|
||||
<div class="enterprise">
|
||||
<div class="enterprise-inner">
|
||||
<div class="left-box">
|
||||
<div class="left-title">
|
||||
<span>企业<span class="gradient-text">文化</span></span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="icon"><img src="./img/2.png" alt=""></span>
|
||||
<div class="title">{{ translations[language].vision }}</div>
|
||||
<div class="description">
|
||||
<span style="color:#222F60;font-weight: bold;margin-bottom: 10px;display: flex;justify-content: center;align-items: center">
|
||||
{{ translations[language].visionContent }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
<img src="./img/sm.png" alt="使命图标">
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div class="item-tit">
|
||||
<div>使命</div>
|
||||
<div>Mission</div>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
<p>让AI无处不在，让智能如此简单</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="icon"><img src="./img/3.png" alt=""></span>
|
||||
<div class="title">{{ translations[language].values }}</div>
|
||||
<div class="description">
|
||||
<span style="color:#222F60;font-weight: bold;margin-bottom: 10px;display: flex;justify-content: center;align-items: center">
|
||||
{{ translations[language].valuesContent }}
|
||||
</span>
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
<img src="./img/yj.png" alt="愿景图标">
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div class="item-tit">
|
||||
<div>愿景</div>
|
||||
<div>Vision</div>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
<p>全球领先的AI服务运营商</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
<img src="./img/jzg.png" alt="价值观图标">
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div class="item-tit">
|
||||
<div>价值观</div>
|
||||
<div>Value</div>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
<p>卓越、开放、创新</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ad">
|
||||
<div style="text-align:center;font-size: 26px;font-weight: bold;margin: 55px 0;width: 100%;margin-bottom: 50px">
|
||||
{{ translations[language].platformAdvantages }}
|
||||
<!-- 优势 -->
|
||||
<div class="advantage">
|
||||
<div class="advantage-tit">
|
||||
<span>平台<span class="gradient-text">优势</span></span>
|
||||
</div>
|
||||
<ul class="adUl">
|
||||
<li>
|
||||
<div class="iconBox">
|
||||
<img src="./img/5.png" alt="">
|
||||
<!-- 优势列表 -->
|
||||
<div class="advantage-content">
|
||||
<div class="advantage-grid">
|
||||
<div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage1.png') + ')' }">
|
||||
<div class="content-wrapper">
|
||||
<div class="top-tit">
|
||||
精准定位
|
||||
</div>
|
||||
<div class="btm-tit">
|
||||
专注于为各行业提供专业、高效的人工智能解决方案，助力企业智能化转型。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<span>{{ translations[language].advantage1Title }}</span>
|
||||
<span class="description">{{ translations[language].advantage1Desc }}</span>
|
||||
<div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage2.png') + ')' }">
|
||||
<div class="content-wrapper">
|
||||
<div class="top-tit">
|
||||
技术服务
|
||||
</div>
|
||||
<div class="btm-tit">
|
||||
提供人工智能相关的技术服务，为企业解决复杂的技术难题。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="iconBox">
|
||||
<img src="./img/6.png" alt="">
|
||||
<div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage3.png') + ')' }">
|
||||
<div class="content-wrapper">
|
||||
<div class="top-tit">
|
||||
产品定制
|
||||
</div>
|
||||
<div class="btm-tit">
|
||||
根据企业的特定需求，定制开发人工智能产品，满足不同场景的应用需求。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<span>{{ translations[language].advantage2Title }}</span>
|
||||
<span class="description">{{ translations[language].advantage2Desc }}</span>
|
||||
<div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage4.png') + ')' }">
|
||||
<div class="content-wrapper">
|
||||
<div class="top-tit">
|
||||
产业赋能
|
||||
</div>
|
||||
<div class="btm-tit">
|
||||
通过人工智能技术，为传统产业赋能，提升产业的竞争力和创新能力。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="iconBox">
|
||||
<img src="./img/7.png" alt="">
|
||||
<div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage5.png') + ')' }">
|
||||
<div class="content-wrapper">
|
||||
<div class="top-tit">
|
||||
一站式、本地化服务
|
||||
</div>
|
||||
<div class="btm-tit">
|
||||
从售前、售中到售后提供一站式全方位服务
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<span>{{ translations[language].advantage3Title }}</span>
|
||||
<span class="description">{{ translations[language].advantage3Desc }}</span>
|
||||
<div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage6.png') + ')' }">
|
||||
<div class="content-wrapper">
|
||||
<div class="top-tit">
|
||||
提供AI基础设施与模型服务
|
||||
</div>
|
||||
<div class="btm-tit">
|
||||
提供整体底层技术架构和系统支持及模型服务
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="iconBox">
|
||||
<img src="./img/4.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<span>{{ translations[language].advantage4Title }}</span>
|
||||
<span class="description">{{ translations[language].advantage4Desc }}</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="iconBox">
|
||||
<img src="./img/2.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<span>{{ translations[language].advantage5Title }}</span>
|
||||
<span class="description">{{ translations[language].advantage5Desc }}</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="iconBox">
|
||||
<img src="./img/8.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<span>{{ translations[language].advantage6Title }}</span>
|
||||
<span class="description">{{ translations[language].advantage6Desc }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 优势列表完 -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -129,75 +163,14 @@
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import LogoTwo from "@/views/homePage/mainPage/logoG/logoTwo.vue";
|
||||
import {mapGetters, mapState} from "vuex";
|
||||
// 导入语言管理
|
||||
import { languageStore, languageBus } from '@/utils/language'
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
|
||||
export default Vue.extend({
|
||||
name: "about",
|
||||
components: {LogoTwo},
|
||||
components: { LogoTwo },
|
||||
data() {
|
||||
return {
|
||||
language: 'zh',
|
||||
languageChangedHandler: null,
|
||||
translations: {
|
||||
zh: {
|
||||
slogan: '全球领先的AI服务运营商',
|
||||
qualifications: '公司资质',
|
||||
mission: '使命',
|
||||
missionContent: '让AI无处不在，让智能如此简单',
|
||||
vision: '愿景',
|
||||
visionContent: '全球领先的AI服务运营商',
|
||||
values: '价值观',
|
||||
valuesContent: '卓越、开放、创新',
|
||||
platformAdvantages: '平台优势',
|
||||
advantage1Title: '精准定位',
|
||||
advantage1Desc: '专注于为各行业提供专业、高效的人工智能解决方案，助力企业智能化转型。',
|
||||
advantage2Title: '技术服务',
|
||||
advantage2Desc: '提供人工智能相关的技术服务，为企业解决复杂的技术难题。',
|
||||
advantage3Title: '产品定制',
|
||||
advantage3Desc: '根据企业的特定需求，定制开发人工智能产品，满足不同场景的应用需求。',
|
||||
advantage4Title: '产业赋能',
|
||||
advantage4Desc: '通过人工智能技术，为传统产业赋能，提升产业的竞争力和创新能力。',
|
||||
advantage5Title: '一站式、本地化服务',
|
||||
advantage5Desc: '从售前、售中到售后提供一站式全方位服务',
|
||||
advantage6Title: '提供AI基础设施与模型服务',
|
||||
advantage6Desc: '提供整体底层技术架构和系统支持及模型服务'
|
||||
},
|
||||
en: {
|
||||
slogan: 'Leading AI Service Operator Worldwide',
|
||||
qualifications: 'Company Qualifications',
|
||||
mission: 'Mission',
|
||||
missionContent: 'Make AI ubiquitous and intelligence so simple',
|
||||
vision: 'Vision',
|
||||
visionContent: 'Global Leading AI Service Operator',
|
||||
values: 'Values',
|
||||
valuesContent: 'Excellence, Openness, Innovation',
|
||||
platformAdvantages: 'Platform Advantages',
|
||||
advantage1Title: 'Precise Positioning',
|
||||
advantage1Desc: 'Focus on providing professional and efficient AI solutions for various industries to help enterprises achieve intelligent transformation.',
|
||||
advantage2Title: 'Technical Services',
|
||||
advantage2Desc: 'Provide AI-related technical services to help enterprises solve complex technical problems.',
|
||||
advantage3Title: 'Product Customization',
|
||||
advantage3Desc: 'Customize AI products according to specific enterprise needs to meet application requirements in different scenarios.',
|
||||
advantage4Title: 'Industry Empowerment',
|
||||
advantage4Desc: 'Empower traditional industries through AI technology, enhancing industry competitiveness and innovation capability.',
|
||||
advantage5Title: 'One-stop, Localized Service',
|
||||
advantage5Desc: 'Provide comprehensive one-stop services from pre-sales to after-sales',
|
||||
advantage6Title: 'AI Infrastructure & Model Services',
|
||||
advantage6Desc: 'Provide overall underlying technical architecture, system support, and model services'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 修复：确保从共享状态获取当前语言
|
||||
this.initLanguage()
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 移除事件监听
|
||||
if (this.languageChangedHandler) {
|
||||
languageBus.$off('language-changed', this.languageChangedHandler)
|
||||
// 删除了language和translations相关数据
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -222,41 +195,29 @@ export default Vue.extend({
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 初始化语言状态
|
||||
initLanguage() {
|
||||
// 直接从store获取当前语言，确保一致性
|
||||
this.language = languageStore.getLanguage()
|
||||
console.log('about页面初始化语言:', this.language)
|
||||
|
||||
// 保存事件处理函数的引用，以便正确移除
|
||||
this.languageChangedHandler = (lang) => {
|
||||
console.log('about页面接收到语言变化:', lang)
|
||||
this.language = lang
|
||||
}
|
||||
|
||||
// 监听语言变化事件
|
||||
languageBus.$on('language-changed', this.languageChangedHandler)
|
||||
}
|
||||
// 删除了initLanguage方法
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.banner {
|
||||
background: url("./img/banner.png") no-repeat center center;
|
||||
background: url("./img/Newbanner.png") no-repeat top center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-size: cover;
|
||||
align-items: center;
|
||||
height: 250px;
|
||||
height: 500px;
|
||||
flex-direction: column;
|
||||
font-weight: bold;
|
||||
span {
|
||||
|
||||
div {
|
||||
background: linear-gradient(to right, #275AFF, #2EBDFA);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -266,6 +227,7 @@ export default Vue.extend({
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, #fff 0%, #f6f8fd 40%, #fff 100%);
|
||||
|
||||
.inBox {
|
||||
display: flex;
|
||||
@ -276,6 +238,14 @@ export default Vue.extend({
|
||||
.leftBox {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
.leftBoxtitle {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 300px;
|
||||
@ -290,105 +260,275 @@ export default Vue.extend({
|
||||
}
|
||||
}
|
||||
|
||||
.why {
|
||||
/* 企业文化部分样式 */
|
||||
.enterprise {
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, #d7e9ff 0%, #fff 100%);
|
||||
padding: 80px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: 500px;
|
||||
background: url("./img/jiajiebg.png");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
.whyUl {
|
||||
padding-top: 90px;
|
||||
width: 1300px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
li {
|
||||
width: 280px;
|
||||
height: 310px;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
|
||||
img {
|
||||
width: 47px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 15px 0;
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ad {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.adUl {
|
||||
.enterprise-inner {
|
||||
width: 1400px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
li {
|
||||
margin-bottom: 45px;
|
||||
.left-box {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 30% !important;
|
||||
max-width: 30%;
|
||||
padding-right: 15px;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
.content {
|
||||
.left-title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
padding-left: 15px;
|
||||
font-size: 16px;
|
||||
|
||||
.description {
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
.right-box {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.item-img {
|
||||
flex-shrink: 0;
|
||||
margin-right: 25px;
|
||||
|
||||
img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.item-tit {
|
||||
margin-bottom: 15px;
|
||||
|
||||
div:first-child {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.item-text {
|
||||
margin-left: 40px;
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
color: #444;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.zizhi {
|
||||
height: 900px;
|
||||
width: 100%;
|
||||
background: url("./img/zizhi.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 新增渐变文字样式 */
|
||||
.gradient-text {
|
||||
background: linear-gradient(to right, #0066FF, #66CCFF);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// 优势样式
|
||||
.advantage {
|
||||
padding: 80px 0;
|
||||
background:#fff;
|
||||
|
||||
.advantage-tit {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.advantage-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.advantage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 30px;
|
||||
width: 1200px;
|
||||
|
||||
.advantage-item {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
padding: 40px 30px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
/* 背景图设置 */
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
|
||||
/* 默认状态：白色半透明遮罩，黑色文字 */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 12px;
|
||||
z-index: 1;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.top-tit {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btm-tit {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 悬停状态：蓝色半透明遮罩，白色文字 */
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 25px rgba(0, 102, 255, 0.2);
|
||||
|
||||
&::before {
|
||||
background: rgba(0, 102, 255, 0.9);
|
||||
}
|
||||
|
||||
.top-tit {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btm-tit {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 - 适配不同屏幕尺寸 */
|
||||
@media (max-width: 1200px) {
|
||||
.mainBox .inBox,
|
||||
.enterprise .enterprise-inner,
|
||||
.advantage-content .advantage-grid {
|
||||
width: 95% !important;
|
||||
}
|
||||
|
||||
.advantage-content .advantage-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.banner {
|
||||
height: 300px;
|
||||
font-size: 28px !important;
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.mainBox .inBox {
|
||||
flex-direction: column;
|
||||
|
||||
.leftBox, .rightBox {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.leftBox {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.enterprise .enterprise-inner {
|
||||
flex-direction: column;
|
||||
|
||||
.left-box, .right-box {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.left-box {
|
||||
margin-bottom: 40px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.zizhi {
|
||||
height: auto;
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.advantage-item {
|
||||
height: 160px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,24 @@
|
||||
<template>
|
||||
<div class="parent">
|
||||
<div class="container-wrapper">
|
||||
<div class="container">
|
||||
<!-- 第一组图片 -->
|
||||
<div v-for="(image, index) in images" :key="index" class="child">
|
||||
<!-- 第一排 - 前8张图片 -->
|
||||
<div class="container row1">
|
||||
<div v-for="(image, index) in firstRowImages" :key="index" class="child">
|
||||
<img :src="image" alt="logo"/>
|
||||
</div>
|
||||
<!-- 第二组相同的图片（用于无缝衔接） -->
|
||||
<div v-for="(image, index) in images" :key="'dup-'+index" class="child">
|
||||
<!-- 重复第一组图片（用于无缝衔接） -->
|
||||
<div v-for="(image, index) in firstRowImages" :key="'dup-'+index" class="child">
|
||||
<img :src="image" alt="logo"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二排 - 其余图片 -->
|
||||
<div class="container row2">
|
||||
<div v-for="(image, index) in secondRowImages" :key="'second-'+index" class="child">
|
||||
<img :src="image" alt="logo"/>
|
||||
</div>
|
||||
<!-- 重复第二组图片（用于无缝衔接） -->
|
||||
<div v-for="(image, index) in secondRowImages" :key="'second-dup-'+index" class="child">
|
||||
<img :src="image" alt="logo"/>
|
||||
</div>
|
||||
</div>
|
||||
@ -19,27 +30,30 @@
|
||||
export default {
|
||||
name: 'LogoCarousel',
|
||||
data() {
|
||||
const allImages = [
|
||||
require('./img/zizhi/img.png'),
|
||||
require('./img/zizhi/img_1.png'),
|
||||
require('./img/zizhi/img_2.png'),
|
||||
require('./img/zizhi/img_3.png'),
|
||||
require('./img/zizhi/img_4.png'),
|
||||
require('./img/zizhi/img_5.png'),
|
||||
require('./img/zizhi/img_6.png'),
|
||||
require('./img/zizhi/img_7.png'),
|
||||
require('./img/zizhi/img_8.png'),
|
||||
require('./img/zizhi/img_9.png'),
|
||||
require('./img/zizhi/img_10.png'),
|
||||
require('./img/zizhi/img_11.png'),
|
||||
require('./img/zizhi/img_12.png'),
|
||||
require('./img/zizhi/img_13.png'),
|
||||
require('./img/zizhi/img_15.png'),
|
||||
require('./img/zizhi/img_16.png'),
|
||||
require('./img/zizhi/img_17.png'),
|
||||
require('./img/zizhi/img_18.png')
|
||||
];
|
||||
|
||||
return {
|
||||
images: [
|
||||
require('./img/zizhi/img.png'),
|
||||
require('./img/zizhi/img_1.png'),
|
||||
require('./img/zizhi/img_2.png'),
|
||||
require('./img/zizhi/img_3.png'),
|
||||
require('./img/zizhi/img_4.png'),
|
||||
require('./img/zizhi/img_5.png'),
|
||||
require('./img/zizhi/img_6.png'),
|
||||
require('./img/zizhi/img_7.png'),
|
||||
require('./img/zizhi/img_8.png'),
|
||||
require('./img/zizhi/img_9.png'),
|
||||
require('./img/zizhi/img_10.png'),
|
||||
require('./img/zizhi/img_11.png'),
|
||||
require('./img/zizhi/img_12.png'),
|
||||
require('./img/zizhi/img_13.png'),
|
||||
require('./img/zizhi/img_15.png'),
|
||||
require('./img/zizhi/img_16.png'),
|
||||
require('./img/zizhi/img_17.png'),
|
||||
require('./img/zizhi/img_18.png')
|
||||
]
|
||||
firstRowImages: allImages.slice(0, 8), // 前8张图片
|
||||
secondRowImages: allImages.slice(8) // 其余图片
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -48,7 +62,7 @@ export default {
|
||||
<style scoped>
|
||||
.parent {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
@ -57,15 +71,23 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
height: 50%;
|
||||
animation: scroll 45s linear infinite;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 第二排反向滚动 */
|
||||
.row2 {
|
||||
animation: scrollReverse 40s linear infinite;
|
||||
}
|
||||
|
||||
.child {
|
||||
flex: 0 0 auto;
|
||||
width: 300px;
|
||||
@ -80,7 +102,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
padding: 10px; /* 可选内边距 */
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -92,4 +114,13 @@ export default {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scrollReverse {
|
||||
0% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -7,12 +7,14 @@
|
||||
<el-form :model="form" label-width="100px">
|
||||
<el-form-item label="产品区域:">
|
||||
<el-radio-group v-model="form.product_area" size="small" @input="searchProduct">
|
||||
<el-radio-button :label="item" :value="item" v-for="(item, index) in product_area" :key="index"></el-radio-button>
|
||||
<el-radio-button :label="item" :value="item" v-for="(item, index) in product_area"
|
||||
:key="index"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品类型:">
|
||||
<el-radio-group v-model="form.ptype" size="small" @input="searchProduct">
|
||||
<el-radio-button :label="item" :value="item" v-for="(item, index) in ptype" :key="index"></el-radio-button>
|
||||
<el-radio-button :label="item" :value="item" v-for="(item, index) in ptype"
|
||||
:key="index"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-button type="primary" size="small" style="margin-left: 10px" @click="resetSearch">重置</el-button>
|
||||
</el-form-item>
|
||||
@ -20,12 +22,13 @@
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- v-infinite-scroll="load" -->
|
||||
<div class="productBig" >
|
||||
<div class="productBig">
|
||||
<el-card class="productList" v-for="(item, index) in this.discountProductList" :key="index">
|
||||
<div slot="header" class="cardHeader">
|
||||
<span>
|
||||
{{ item.name }}
|
||||
<el-button style="float: right; margin-left: 5px" type="primary" size="small" @click="payFirst(item)">购买</el-button>
|
||||
<el-button style="float: right; margin-left: 5px" type="primary" size="small"
|
||||
@click="payFirst(item)">购买</el-button>
|
||||
<!-- <el-button style="float: right" type="primary" size="small" @click="inShoppingCard(item)">加入购物车</el-button> -->
|
||||
</span>
|
||||
</div>
|
||||
@ -70,7 +73,7 @@
|
||||
</el-row>
|
||||
<el-row :span="24">
|
||||
<el-col :span="12" class="productDiscription">
|
||||
<span >规格说明:</span>
|
||||
<span>规格说明:</span>
|
||||
<div style="width: 80%;display: flex">{{ item.spec_note }}</div>
|
||||
</el-col>
|
||||
<el-col :span="6" class="productDiscription">
|
||||
@ -88,7 +91,8 @@
|
||||
</div>
|
||||
|
||||
<!-- 立即购买弹窗 -->
|
||||
<el-dialog :title="title + productDetail.name" :visible.sync="dialogVisible" width="30%" class="myDialog" :before-close="close">
|
||||
<el-dialog :title="title + productDetail.name" :visible.sync="dialogVisible" width="30%" class="myDialog"
|
||||
:before-close="close">
|
||||
<el-form ref="payForm" :model="productDetail" label-width="100px" :rules="payForm">
|
||||
<div style="overflow-y: scroll; height: 400px">
|
||||
<el-form-item label="产品描述:">
|
||||
@ -106,32 +110,40 @@
|
||||
|
||||
<div id="renderMoban" v-if="isShow">
|
||||
<el-form-item label="路由数:" prop="route_num">
|
||||
<el-select v-model="productDetail.route_num" placeholder="请选择路由数" @change="searchMoney(productDetail.route_num)">
|
||||
<el-option v-for="(item,index) in route_numList" :key="index" :label="item.route_num" :value="item.route_num">
|
||||
<el-select v-model="productDetail.route_num" placeholder="请选择路由数"
|
||||
@change="searchMoney(productDetail.route_num)">
|
||||
<el-option v-for="(item, index) in route_numList" :key="index" :label="item.route_num"
|
||||
:value="item.route_num">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="带宽:" prop="broadband">
|
||||
<el-select v-model="productDetail.broadband" placeholder="请选择带宽" @change="searchMoney(productDetail.broadband)">
|
||||
<el-option v-for="(item,index) in broadbandList" :key="index" :label="item.broadband" :value="item.broadband">
|
||||
<el-select v-model="productDetail.broadband" placeholder="请选择带宽"
|
||||
@change="searchMoney(productDetail.broadband)">
|
||||
<el-option v-for="(item, index) in broadbandList" :key="index" :label="item.broadband"
|
||||
:value="item.broadband">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="高校:" prop="high_school">
|
||||
<el-select v-model="productDetail.high_school" placeholder="请选择高校" @change="searchMoney(productDetail.high_school)">
|
||||
<el-option v-for="(item,index) in schoolList" :key="index" :label="item.name" :value="item.name">
|
||||
<el-select v-model="productDetail.high_school" placeholder="请选择高校"
|
||||
@change="searchMoney(productDetail.high_school)">
|
||||
<el-option v-for="(item, index) in schoolList" :key="index" :label="item.name" :value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="超算中心:" prop="chaosuan_center">
|
||||
<el-select v-model="productDetail.chaosuan_center" placeholder="请选择超算中心" @change="searchMoney(productDetail.chaosuan_center)">
|
||||
<el-option v-for="(item,index) in chaosuan_centerList" :key="index" :label="item.name" :value="item.name">
|
||||
<el-select v-model="productDetail.chaosuan_center" placeholder="请选择超算中心"
|
||||
@change="searchMoney(productDetail.chaosuan_center)">
|
||||
<el-option v-for="(item, index) in chaosuan_centerList" :key="index" :label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="距离:" @change="searchMoney(productDetail.distance)">
|
||||
<el-select v-model="productDetail.distance" placeholder="请选择距离" disabled>
|
||||
<el-option v-for="(item,index) in distanceList" :key="index" :label="item.distance" :value="item.distance">
|
||||
<el-option v-for="(item, index) in distanceList" :key="index" :label="item.distance"
|
||||
:value="item.distance">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -191,8 +203,8 @@
|
||||
<el-col :span="21" class="payTypeList">
|
||||
<div class="bigDiv">
|
||||
<div class="divSon" v-for="item in payTypeList" :key="item.index" @mouseenter="changeColor">
|
||||
<div class="divSonItem" @click="payType(item.index)">{{item.payType}}</div>
|
||||
<div class="divSonTitle">{{item.title}}</div>
|
||||
<div class="divSonItem" @click="payType(item.index)">{{ item.payType }}</div>
|
||||
<div class="divSonTitle">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attention">
|
||||
@ -216,14 +228,15 @@
|
||||
<!-- <span>如何选择地域</span> -->
|
||||
</el-col>
|
||||
<el-col :span="21" class="aereList">
|
||||
<el-button size="small" :round="false" @click="DistrictShow">华东1(杭州) <i class="el-icon-caret-bottom"></i></el-button>
|
||||
<el-button size="small" :round="false" @click="DistrictShow">华东1(杭州) <i
|
||||
class="el-icon-caret-bottom"></i></el-button>
|
||||
<div class="discrption">不同地域的实例之间内网互不相通；选择靠近您客户的地域，可降低网络时延、提高您客户的访问速度</div>
|
||||
<div class="aereDiv" v-if="isDistrictShow">
|
||||
<div>
|
||||
<span>亚太-中国</span>
|
||||
<el-row :gutter="5" v-for="item in Asia_China" :key="item.RegionId">
|
||||
<el-col :span="8">
|
||||
<span>{{item.LocalName}}</span>
|
||||
<span>{{ item.LocalName }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -668,22 +681,24 @@ export default {
|
||||
// background-color: rgba(240, 241, 244);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
height: 100vh;
|
||||
|
||||
.product {
|
||||
.search {
|
||||
// position: fixed;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.productBig {
|
||||
.productList {
|
||||
// height:calc(100vh-300px);
|
||||
|
||||
margin-top: 5px;
|
||||
padding: 25px;
|
||||
.cardHeader {
|
||||
}
|
||||
.cardBody {
|
||||
|
||||
.cardBody {
|
||||
font-size: 14px;
|
||||
// font-weight: 600;
|
||||
|
||||
@ -699,16 +714,19 @@ export default {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.discountPrice {
|
||||
color: #f00606;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-decoration: line-through;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.discount {
|
||||
height: 30px;
|
||||
width: 70px;
|
||||
@ -721,44 +739,54 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aLiDialog {
|
||||
// background-color: rgb(99, 100, 100);
|
||||
overflow-y: scroll;
|
||||
|
||||
.buy {
|
||||
font-size: 12px;
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
border: 1px solid red;
|
||||
|
||||
.content {
|
||||
.left {
|
||||
.payType {
|
||||
.payTypeTitle {
|
||||
padding-top: 15px;
|
||||
|
||||
.payTypeItem {
|
||||
font-weight: 600;
|
||||
|
||||
.light {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payTypeList {
|
||||
.bigDiv {
|
||||
display: flex;
|
||||
|
||||
.divSon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #cbcbcb;
|
||||
margin-right: 30px;
|
||||
padding: 10px;
|
||||
|
||||
.divSonItem {
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.divSonTitle {
|
||||
color: #787e80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attention {
|
||||
display: flex;
|
||||
padding-top: 5px;
|
||||
@ -770,6 +798,7 @@ export default {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.explain {
|
||||
color: #787e80;
|
||||
height: 30px;
|
||||
@ -779,31 +808,34 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aere {
|
||||
.aereCol {
|
||||
padding-top: 20px;
|
||||
|
||||
.aereSpan {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.aereList {
|
||||
margin-top: 5px;
|
||||
|
||||
.discrption {
|
||||
color: #787e80;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.aereDiv {
|
||||
border: 1px solid #cbcbcb;
|
||||
}
|
||||
}
|
||||
.network {
|
||||
.networkItem {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.right {
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,12 +5,14 @@
|
||||
<div class="bigTitle">快捷导航</div>
|
||||
<ul class="recUl">
|
||||
<li v-for="(item,index) in navList" :key="index" @click="goBaidu(item)">
|
||||
<i :class="item.icon || 'el-icon-link'"></i>
|
||||
<!-- 修改这里：使用img标签替换i标签 -->
|
||||
<img :src="getNavIcon(index)" class="nav-icon" alt="icon" />
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 其他部分保持不变 -->
|
||||
<div class="section">
|
||||
<div class="bigTitle">资源概览</div>
|
||||
<ul class="recUl overView">
|
||||
@ -52,6 +54,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧部分保持不变 -->
|
||||
<div class="rightBox">
|
||||
<div class="user card">
|
||||
<div class="userImg">
|
||||
@ -108,7 +111,10 @@ import { reqNewHomeResource, reqNewHomeResourceWarning, reqQuickNav } from "@/ap
|
||||
import { editReachargelogAPI } from "@/api/finance/customerRechargeManagement";
|
||||
import { getUnreadmsgAPI } from "@/api/login";
|
||||
import MessageCenter from '@/components/MessageCenter/MessageCenter.vue';
|
||||
|
||||
import icon1 from '@/assets/image/icon1.png';
|
||||
import icon2 from '@/assets/image/icon2.png';
|
||||
import icon3 from '@/assets/image/icon3.png';
|
||||
import icon4 from '@/assets/image/icon4.png';
|
||||
export default Vue.extend({
|
||||
name: "mainPage",
|
||||
components: {
|
||||
@ -132,7 +138,9 @@ export default Vue.extend({
|
||||
{ name: '处理中', count: 7 },
|
||||
{ name: '站内信', count: 0 }
|
||||
],
|
||||
messageCenterVisible: false
|
||||
messageCenterVisible: false,
|
||||
// 添加图标路径数组
|
||||
navIcons: [icon1, icon2, icon3, icon4]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -172,6 +180,12 @@ export default Vue.extend({
|
||||
}
|
||||
})
|
||||
},
|
||||
// 添加获取导航图标的方法
|
||||
getNavIcon(index) {
|
||||
// 如果导航项数量超过图标数量，循环使用图标
|
||||
const iconIndex = index % this.navIcons.length;
|
||||
return this.navIcons[iconIndex];
|
||||
},
|
||||
async initMybalance() {
|
||||
const res = await editReachargelogAPI()
|
||||
if (res.status) {
|
||||
@ -202,19 +216,16 @@ export default Vue.extend({
|
||||
|
||||
switch(todoName) {
|
||||
case '待支付':
|
||||
// 待支付：显示未支付和续费的数据
|
||||
query = {
|
||||
filterType: 'processing' // 使用明确的标识
|
||||
filterType: 'processing'
|
||||
};
|
||||
break;
|
||||
case '待续费':
|
||||
// 待续费：只显示续费的数据
|
||||
query = {
|
||||
filterType: 'pendingPayment'
|
||||
};
|
||||
break;
|
||||
case '处理中':
|
||||
// 处理中：显示未支付的数据
|
||||
query = {
|
||||
filterType: 'processing'
|
||||
};
|
||||
@ -255,7 +266,6 @@ export default Vue.extend({
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.mainBox {
|
||||
background: #f5f7fa;
|
||||
width: 100%;
|
||||
@ -330,12 +340,21 @@ export default Vue.extend({
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
// 修改这里：为图片添加样式
|
||||
.nav-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 10px;
|
||||
color: #409eff;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
// 移除原来的图标样式
|
||||
// i {
|
||||
// font-size: 24px;
|
||||
// margin-bottom: 10px;
|
||||
// color: #409eff;
|
||||
// }
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user