@@ -29,8 +29,8 @@ const backgroundImageStyle = computed(() => {
2929 : class = " { 'reverse-layout': feature.reverse }"
3030 >
3131 < div class = " feature-text" >
32- < h3 class = " title" > {{ feature .title }}< / h3>
33- < p class = " description " v- html= " feature.description" >< / p>
32+ < h3 class = " feature- title" > {{ feature .title }}< / h3>
33+ < p class = " feature-desc " v- html= " feature.description" >< / p>
3434 < / div>
3535 < div class = " feature-visual" >
3636 < img
@@ -46,67 +46,7 @@ const backgroundImageStyle = computed(() => {
4646
4747< style scoped lang= " less" >
4848@import " ../common.less" ;
49-
50- /* FeatureSection 特有样式 */
51- .feature - section .section {
52- position: relative;
53- overflow: hidden;
54- min- height: 75vh ;
55- }
56-
57- .feature - content {
58- margin: 0 auto;
59- display: flex;
60- align- items: center;
61- justify- content: space- between;
62- column- gap: 100px ;
63- }
64-
65- .reverse - layout {
66- flex- direction: row- reverse;
67- }
68-
69- .section - title {
70- font- size: 45px ;
71- font- weight: 700 ;
72- margin- bottom: 30px ;
73- color: var (-- text- primary);
74- }
75-
76- .feature - desc {
77- font- size: 22px ;
78- line- height: 1.8 ;
79- color: var (-- text- secondary);
80- }
81-
82- .feature - visual {
83- flex: 1 ;
84- display: flex;
85- justify- content: center;
86- }
87-
88- .floating - img {
89- width: 100 % ;
90- filter: drop- shadow (0 20px 40px rgba (0 , 0 , 0 , 0.15 ));
91- border- radius: 24px ;
92- transition: transform 0 .3s ease;
93- }
94-
95- .floating - img: hover {
96- transform: scale (1.02 );
97- }
98-
99- .delay - 1 {
100- animation- delay: 1s ;
101- }
102-
103- .delay - 2 {
104- animation- delay: 2s ;
105- }
106-
107- .delay - 3 {
108- animation- delay: 3s ;
109- }
49+ @import " ../components/feature-section.less" ;
11050
11151/* ==================== 响应式适配 ==================== */
11252
@@ -179,11 +119,11 @@ const backgroundImageStyle = computed(() => {
179119 }
180120
181121 .feature - text {
182- .title {
122+ .feature - title {
183123 font- size: 20px ;
184124 padding- bottom: 12px ;
185125 }
186- .description {
126+ .feature - desc {
187127 font- size: 14px ;
188128 }
189129 }
0 commit comments