Browse Source

fix: 样式修改

main
betaqi 3 months ago
parent
commit
1e05298993
  1. 2
      components/pageLayout/scenarios.vue
  2. 12
      components/pageLayout/serce.vue
  3. 2
      layouts/default.vue

2
components/pageLayout/scenarios.vue

@ -2,7 +2,7 @@
<div class="mx-auto"> <div class="mx-auto">
<h2 class="title-font py-11 md:py-8 sm:py-4">应用场景</h2> <h2 class="title-font py-11 md:py-8 sm:py-4">应用场景</h2>
<div <div
class="grid grid-cols-2 gap-x-20 pl-12 md:pl-10 sm:pl-4 md:gap-8 sm:gap-4 gap-y-8 md:gap-y-6 sm:gap-y-[12px] max-w-[1440px] mx-auto md:px-10 sm:px-4" class="grid grid-cols-2 gap-x-20 pl-12 md:pl-10 sm:pl-4 pb-10 md:pb-8 sm:pb-4 md:gap-8 sm:gap-4 gap-y-8 md:gap-y-6 sm:gap-y-[12px] max-w-[1440px] mx-auto md:px-10 sm:px-4"
> >
<div <div
v-for="(item, idx) in sceneList" v-for="(item, idx) in sceneList"

12
components/pageLayout/serce.vue

@ -8,7 +8,11 @@
<img :src="item.lgBg" loading="eager" class="size-full object-cover" /> <img :src="item.lgBg" loading="eager" class="size-full object-cover" />
</picture> </picture>
<section class="relative z-10 p-6 md:p-4 size-full"> <section class="relative z-10 p-6 md:p-4 size-full">
<h3 class="text-white text-3xl md:text-lg font-bold">{{ item.title }}</h3> <h3
class="text-white text-3xl md:text-lg font-bold relative after:absolute after:top-1/2 after:-translate-y-1/2 after:-left-6 after:w-4 after:h-2 after:bg-gradient-to-b from-[#11974A] to-[#23C669] after:content-['']"
>
{{ item.title }}
</h3>
<div class="text-[#A4B0B7] flex flex-col lg:text-lg gap-2 md:mt-4 mt-9"> <div class="text-[#A4B0B7] flex flex-col lg:text-lg gap-2 md:mt-4 mt-9">
<p v-for="(content, idx) in item.contentList" :key="idx">{{ content }}</p> <p v-for="(content, idx) in item.contentList" :key="idx">{{ content }}</p>
</div> </div>
@ -28,7 +32,11 @@
<img :src="item.lgBg" loading="eager" class="size-full object-cover" /> <img :src="item.lgBg" loading="eager" class="size-full object-cover" />
</picture> </picture>
<section class="relative z-10 size-full"> <section class="relative z-10 size-full">
<h3 class="text-white text-xs font-bold">{{ item.title }}</h3> <h3
class="text-white text-xs font-bold relative after:absolute after:top-1/2 after:-translate-y-1/2 after:md:-left-8 sm:after:-left-4 sm:after:w-2 sm:after:h-1 after:w-4 after:h-2 after:bg-gradient-to-b from-[#11974A] to-[#23C669] after:content-['']"
>
{{ item.title }}
</h3>
<div <div
class="text-[#A4B0B7] flex flex-col md:gap-4 sm:gap-2 md:mt-6 sm:mt-3 md:text-lg sm:text-[10px]" class="text-[#A4B0B7] flex flex-col md:gap-4 sm:gap-2 md:mt-6 sm:mt-3 md:text-lg sm:text-[10px]"
> >

2
layouts/default.vue

@ -105,7 +105,7 @@
<slot /> <slot />
<footer> <footer>
<div class="bg-white relative py-[74px] md:py-[40px] sm:py-[10px]"> <div class="bg-white relative py-[74px] md:py-[40px] sm:py-[10px]">
<div class="max-w-[1440px] h-[638px] md:h-[362px] sm:h-[166px] m-auto relative"> <div class="max-w-[1920px] h-[848px] md:h-[362px] sm:h-[166px] m-auto relative">
<img src="/images/about/mapBg.png" class="absolute inset-0" /> <img src="/images/about/mapBg.png" class="absolute inset-0" />
<div <div
class="w-[1172px] h-[300px] px-[95px] md:w-[780px] md:h-[180px] sm-[300px] sm:hidden sm:h-[150px] md:px-[20px] sm:px-[10px] bg-white absolute bottom-5 md:-bottom-6 sm:bottom-0 left-1/2 -translate-x-1/2 flex items-center" class="w-[1172px] h-[300px] px-[95px] md:w-[780px] md:h-[180px] sm-[300px] sm:hidden sm:h-[150px] md:px-[20px] sm:px-[10px] bg-white absolute bottom-5 md:-bottom-6 sm:bottom-0 left-1/2 -translate-x-1/2 flex items-center"

Loading…
Cancel
Save