Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ const backgroundImageStyle = computed(() => {
:class="{ 'reverse-layout': feature.reverse }"
>
<div class="feature-text">
<h3 class="title">{{ feature.title }}</h3>
<p class="description" v-html="feature.description"></p>
<h3 class="feature-title">{{ feature.title }}</h3>
<p class="feature-desc" v-html="feature.description"></p>
</div>
<div class="feature-visual">
<img
Expand All @@ -46,67 +46,7 @@ const backgroundImageStyle = computed(() => {

<style scoped lang="less">
@import "../common.less";

/* FeatureSection 特有样式 */
.feature-section.section {
position: relative;
overflow: hidden;
min-height: 75vh;
}

.feature-content {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 100px;
}

.reverse-layout {
flex-direction: row-reverse;
}

.section-title {
font-size: 45px;
font-weight: 700;
margin-bottom: 30px;
color: var(--text-primary);
}

.feature-desc {
font-size: 22px;
line-height: 1.8;
color: var(--text-secondary);
}

.feature-visual {
flex: 1;
display: flex;
justify-content: center;
}

.floating-img {
width: 100%;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
border-radius: 24px;
transition: transform 0.3s ease;
}

.floating-img:hover {
transform: scale(1.02);
}

.delay-1 {
animation-delay: 1s;
}

.delay-2 {
animation-delay: 2s;
}

.delay-3 {
animation-delay: 3s;
}
@import "../components/feature-section.less";
Comment thread
wuyiping0628 marked this conversation as resolved.

/* ==================== 响应式适配 ==================== */

Expand Down Expand Up @@ -179,11 +119,11 @@ const backgroundImageStyle = computed(() => {
}

.feature-text {
.title {
.feature-title {
font-size: 20px;
padding-bottom: 12px;
}
.description {
.feature-desc {
font-size: 14px;
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ const highlights = [
<template>
<section class="highlights-section section fade-in-up">
<div class="section-container">
<h3 class="text-center title">核心亮点</h3>
<p class="section-description text-center description">AI 助手赋能网页智能交互</p>
<h3 class="text-center highlights-title">核心亮点</h3>
<p class="section-description text-center">AI 助手赋能网页智能交互</p>
<div class="highlights-grid">
<div
v-for="(highlight, index) in highlights"
Expand All @@ -80,67 +80,7 @@ const highlights = [

<style scoped lang="less">
@import "../common.less";

.highlights-section {
background: #fff;
}

.highlights-section.section {
position: relative;
overflow: hidden;
min-height: 90vh;
}

.section-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
}

.highlights-grid {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}

.highlight-card {
background: #f8f9fa;
padding: 40px;
border-radius: 16px;
transition: all 0.3s ease;
border: 1px solid transparent;
}

.highlight-card:hover {
transform: translateY(-5px);
background: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.card-icon {
width: 48px;
height: 48px;
margin-bottom: 28px;
}

.card-icon img {
width: 100%;
height: 100%;
}

.highlight-card h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
}

.highlight-card p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
}

@import "../components/highlights-section.less";
/* ==================== 响应式适配 ==================== */

@media (max-width: 1200px) {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/* 2、FeatureSection 特有样式 */
.feature-section.section {
position: relative;
overflow: hidden;
min-height: 75vh;
border-top: 1px solid #f0f0f0;
}

.feature-content {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 100px;

.feature-title {
font-size: 38px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 32px;
}

.feature-desc {
max-width: 432px;
font-size: 20px;
font-weight: 300;
line-height: 40px;
letter-spacing: 1px;
color: #808080;
}
}


.reverse-layout {
flex-direction: row-reverse;
}

.section-title {
font-size: 45px;
font-weight: 700;
margin-bottom: 30px;
color: var(--text-primary);
}

.feature-visual {
flex: 1;
display: flex;
justify-content: center;
}

.floating-img {
width: 100%;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
border-radius: 24px;
transition: transform 0.3s ease;
}

.floating-img:hover {
transform: scale(1.02);
}

.delay-1 {
animation-delay: 1s;
}

.delay-2 {
animation-delay: 2s;
}

.delay-3 {
animation-delay: 3s;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/** 1、HighlightsSection.vue部分 */
.section-container {
max-width: 1400px;
margin: 100px 90px 100px;
}

.highlights-section {
background: #fff;
}

.highlights-section.section {
position: relative;
overflow: hidden;
min-height: 90vh;
}

.card-icon {
width: 48px;
height: 48px;
margin-bottom: 28px;
}

.card-icon img {
width: 100%;
height: 100%;
}

.highlights-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}

.highlight-card {
background: #f8f9fa;
padding: 40px 40px 28px 40px;
border-radius: 16px;
transition: all 0.3s ease;
border: 1px solid transparent;
width: 330px;
height: 283px;
Comment thread
wuyiping0628 marked this conversation as resolved.

h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
line-height: 27px;
}

p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
}
}

.highlights-title {
font-size: 40px;
font-weight: 700;
margin-bottom: 16px;
line-height: 53px;
color: #191919;
}

.section-description {
font-size: 20px;
padding-bottom: 100px;
line-height: 28px;
color: #808080;
letter-spacing: 1px;
font-weight: 300;
}
Loading