yumoqing/kboss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updata #55

Merged
charles merged 1 commits from main into prod 2025-12-24 17:46:53 +08:00
Conversation 0 Commits 1 Files Changed 3 +340 -105
3 changed files with 340 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f63e86cc7b - Show all commits

BIN
f/web-kboss/src/assets/image/user.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

442
f/web-kboss/src/views/homePage/about/index.vue
View File

@ -1,14 +1,14 @@
<template>
<div style="width: 100%;">
<div class="banner">
<div v-if="JSON.stringify(logoInfoNew) !== '{}'" style="font-size: 38px;">
<div v-if="JSON.stringify(logoInfoNew) !== '{}'" class="banner-content">
<!-- 开元云 标题 -->
<div>{{ logoInfoNew.home.bannerTitle }}</div>
<p style="color: #0e0b0b">全球领先的AI服务运营商</p>
<div class="banner-title">{{ logoInfoNew.home.bannerTitle }}</div>
<p class="banner-subtitle">全球领先的AI服务运营商</p>
</div>
</div>
<div class="mainBox" style="padding-top: 35px">
<div class="mainBox">
<div class="inBox">
<div class="leftBox">
<p class="leftBoxtitle">关于<span class="gradient-text">我们</span></p>
@ -23,8 +23,8 @@
</div>
<!-- 公司资质 -->
<div class="zizhi">
<div style="width: 1400px;">
<div style="text-align:center;font-size: 30px;font-weight: bold;margin: 55px 0;width: 100%;margin-bottom: 50px">
<div class="zizhi-content">
<div class="zizhi-title">
公司<span class="gradient-text">资质</span>
</div>
<LogoTwo></LogoTwo>
@ -201,6 +201,15 @@ export default Vue.extend({
</script>
<style scoped lang="scss">
/* 通用样式 */
.gradient-text {
background: linear-gradient(to right, #0066FF, #66CCFF);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
}
.banner {
background: url("./img/Newbanner.png") no-repeat top center;
display: flex;
@ -211,13 +220,26 @@ export default Vue.extend({
flex-direction: column;
font-weight: bold;
div {
.banner-content {
text-align: center;
padding: 0 20px;
}
.banner-title {
background: linear-gradient(to right, #275AFF, #2EBDFA);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
text-align: center;
font-size: 38px;
margin-bottom: 10px;
}
.banner-subtitle {
color: #0e0b0b;
font-size: 20px;
margin: 0;
}
}
@ -228,16 +250,17 @@ export default Vue.extend({
align-items: center;
flex-direction: column;
background: linear-gradient(180deg, #fff 0%, #f6f8fd 40%, #fff 100%);
padding: 35px 20px;
.inBox {
display: flex;
justify-content: space-between;
align-items: center;
width: 1450px;
align-items: flex-start;
max-width: 1450px;
width: 100%;
.leftBox {
width: 25%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
@ -245,34 +268,59 @@ export default Vue.extend({
.leftBoxtitle {
font-size: 30px;
font-weight: bold;
}
img {
width: 300px;
margin: 0;
}
}
.rightBox {
width: 75%;
height: 100%;
line-height: 2;
line-height: 1.8;
p {
margin-bottom: 15px;
font-size: 16px;
color: #333;
}
}
}
}
/* 企业文化部分样式 */
.enterprise {
/* 公司资质部分 */
.zizhi {
width: 100%;
background: linear-gradient(180deg, #d7e9ff 0%, #fff 100%);
padding: 80px 0;
background: url("./img/zizhi.png") no-repeat;
background-size: cover;
padding: 60px 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 900px;
.zizhi-content {
max-width: 1400px;
width: 100%;
}
.zizhi-title {
text-align: center;
font-size: 30px;
font-weight: bold;
margin: 0 0 50px 0;
width: 100%;
}
}
/* 企业文化部分 */
.enterprise {
width: 100%;
background: linear-gradient(180deg, #d7e9ff 0%, #fff 100%);
padding: 80px 20px;
.enterprise-inner {
width: 1400px;
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
align-items: flex-start;
.left-box {
width: 25%;
@ -283,8 +331,7 @@ export default Vue.extend({
.left-title {
font-size: 30px;
font-weight: bold;
display: flex;
justify-content: center;
text-align: center;
}
}
@ -292,15 +339,16 @@ export default Vue.extend({
width: 70%;
display: flex;
flex-direction: column;
gap: 40px;
gap: 30px;
.item {
display: flex;
align-items: center;
border-radius: 12px;
padding: 30px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
background: white;
&:hover {
transform: translateY(-5px);
@ -309,11 +357,11 @@ export default Vue.extend({
.item-img {
flex-shrink: 0;
margin-right: 25px;
margin-right: 20px;
img {
width: 70px;
height: 70px;
width: 60px;
height: 60px;
object-fit: contain;
}
}
@ -321,30 +369,30 @@ export default Vue.extend({
.item-content {
flex: 1;
display: flex;
align-items: center;
flex-direction: column;
.item-tit {
margin-bottom: 15px;
display: flex;
align-items: baseline;
margin-bottom: 10px;
div:first-child {
font-size: 24px;
font-size: 22px;
font-weight: bold;
color: #333;
margin-right: 15px;
margin-right: 10px;
}
div:last-child {
font-size: 16px;
font-size: 14px;
color: #666;
font-style: italic;
}
}
.item-text {
margin-left: 40px;
p {
font-size: 18px;
font-size: 16px;
line-height: 1.6;
color: #444;
margin: 0;
@ -356,31 +404,10 @@ export default Vue.extend({
}
}
.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;
padding: 80px 20px;
background: #fff;
.advantage-tit {
text-align: center;
@ -397,27 +424,26 @@ export default Vue.extend({
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
width: 1200px;
max-width: 1200px;
width: 100%;
.advantage-item {
position: relative;
border-radius: 12px;
padding: 40px 30px;
padding: 30px 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
height: 140px;
min-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;
@ -438,21 +464,20 @@ export default Vue.extend({
}
.top-tit {
font-size: 22px;
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
margin-bottom: 10px;
color: #333;
transition: all 0.3s ease;
}
.btm-tit {
font-size: 16px;
font-size: 15px;
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);
@ -474,61 +499,270 @@ export default Vue.extend({
}
}
/* 响应式设计 - 适配不同屏幕尺寸 */
@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) {
/* 平板设备适配 (768px - 1024px) */
@media (max-width: 1024px) {
.banner {
height: 300px;
font-size: 28px !important;
height: 400px;
p {
font-size: 16px;
.banner-title {
font-size: 32px;
}
.banner-subtitle {
font-size: 18px;
}
}
.mainBox .inBox {
flex-direction: column;
.leftBox {
width: 30%;
.leftBox, .rightBox {
width: 100% !important;
.leftBoxtitle {
font-size: 26px;
}
}
.leftBox {
margin-bottom: 30px;
.rightBox {
width: 65%;
p {
font-size: 15px;
}
}
}
.enterprise .enterprise-inner {
flex-direction: column;
.left-box, .right-box {
width: 100% !important;
.left-box {
width: 30%;
}
.left-box {
margin-bottom: 40px;
justify-content: flex-start;
.right-box {
width: 65%;
.item {
padding: 20px;
.item-img img {
width: 50px;
height: 50px;
}
.item-content .item-tit div:first-child {
font-size: 20px;
}
}
}
}
.advantage-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
.advantage-item {
min-height: 130px;
padding: 25px 20px;
}
}
}
/* 手机设备适配 (小于768px) */
@media (max-width: 768px) {
.banner {
height: 300px;
.banner-title {
font-size: 26px;
}
.banner-subtitle {
font-size: 16px;
}
}
.mainBox {
padding: 25px 15px;
.inBox {
flex-direction: column;
.leftBox {
width: 100%;
margin-bottom: 20px;
justify-content: flex-start;
.leftBoxtitle {
font-size: 24px;
}
}
.rightBox {
width: 100%;
p {
font-size: 14px;
line-height: 1.6;
}
}
}
}
.zizhi {
height: auto;
padding: 50px 0;
padding: 40px 15px;
min-height: auto;
.zizhi-title {
font-size: 24px;
margin-bottom: 30px;
}
}
.advantage-item {
height: 160px !important;
.enterprise {
padding: 50px 15px;
.enterprise-inner {
flex-direction: column;
.left-box {
width: 100%;
margin-bottom: 30px;
justify-content: flex-start;
.left-title {
font-size: 24px;
}
}
.right-box {
width: 100%;
gap: 20px;
.item {
flex-direction: column;
text-align: center;
padding: 20px 15px;
.item-img {
margin-right: 0;
margin-bottom: 15px;
img {
width: 50px;
height: 50px;
}
}
.item-content {
.item-tit {
flex-direction: column;
align-items: center;
margin-bottom: 8px;
div:first-child {
font-size: 18px;
margin-right: 0;
margin-bottom: 5px;
}
div:last-child {
font-size: 13px;
}
}
.item-text {
margin-left: 0;
p {
font-size: 14px;
}
}
}
}
}
}
}
.advantage {
padding: 50px 15px;
.advantage-tit {
font-size: 24px;
margin-bottom: 30px;
}
.advantage-grid {
gap: 15px !important;
.advantage-item {
min-height: 120px;
padding: 20px 15px;
.top-tit {
font-size: 18px;
margin-bottom: 8px;
}
.btm-tit {
font-size: 13px;
}
}
}
}
}
/* 小手机设备适配 (小于480px) */
@media (max-width: 480px) {
.banner {
height: 250px;
.banner-title {
font-size: 22px;
}
.banner-subtitle {
font-size: 14px;
}
}
.mainBox {
.inBox {
.leftBox .leftBoxtitle {
font-size: 22px;
}
.rightBox p {
font-size: 13px;
}
}
}
.zizhi .zizhi-title,
.enterprise .left-box .left-title,
.advantage .advantage-tit {
font-size: 22px;
}
.advantage-grid .advantage-item {
min-height: 110px;
padding: 15px;
.top-tit {
font-size: 16px;
}
.btm-tit {
font-size: 12px;
}
}
}
/* 横屏模式适配 */
@media (max-height: 600px) and (orientation: landscape) {
.banner {
height: 300px;
}
.zizhi {
min-height: 700px;
}
}
</style>

3
f/web-kboss/src/views/homePage/components/topBox/index.vue
View File

@ -1261,7 +1261,7 @@ export default Vue.extend({
display: flex;
justify-content: center;
align-items: center;
background-color: #1A1A1A;
background-color: #eee;
width: 46px;
height: 46px;
border-radius: 50%;
@ -1269,6 +1269,7 @@ export default Vue.extend({
margin-right: 8px;
img {
// border-radius: 50%;
width: 26px;
height: 26px;
}