wangqi
/
website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 产品中心

main
betaqi 3 months ago
parent
cc638ee5ce
commit
a17dbddabb
6 changed files with 234 additions and 60 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 52
      components/pageLayout/abuot.vue
  2. 2
      components/pageLayout/cloudData.vue
  3. 2
      pages/index.vue
  4. 114
      pages/products/BK-1000.vue
  5. 124
      pages/products/BK-2000.vue
  6. BIN
      public/images/banner/bk1000_sm.png

52
components/pageLayout/abuot.vue
Unescape View File

@ -1,29 +1,4 @@ @@ -1,29 +1,4 @@
<template>
<div
class="mx-auto h-[824px] md:h-[358px] sm:h-[198px] bg-cover bg-no-repeat overflow-hidden relative"
>
<picture class="absolute inset-0 z-0">
<source media="(max-width: 1024px)" srcset="/images/about/bg_sm.png" />
<source media="(max-width: 1025px)" srcset="/images/about/bg_lg.png" />
<img src="/images/about/bg_lg.png" loading="eager" class="size-full object-cover" />
</picture>
<div
class="text-white font-bold text-center mt-[198px] md:mt-[42px] sm:mt-[20px] flex flex-col items-center relative z-20"
>
<span class="text-7xl md:text-6xl sm:text-3xl opacity-35">ABUOT</span>
<span class="text-4xl md:text-4xl sm:text-base relative -top-8">关于我们</span>
</div>
<div
class="text-white font-bold text-center mt-17 md:mt-5 sm:mt-3 text-[28px] md:text-2xl sm:text-xs max-w-[1440px] mx-auto relative z-20 break-all px-48 md:px-20 sm:px-10"
>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
<div
class="font-bold text-center mt-13 md:mt-5 sm:mt-3 text-3xl md:text-base sm:text-xs text-[#15A351]"
>
了解更多>>
</div>
</div>
<div class="bg-white relative py-[74px] md:py-[40px] sm:py-[10px]">
<div class="max-w-[1920px] m-auto relative">
<img
@ -73,8 +48,33 @@ @@ -73,8 +48,33 @@
</div>
</div>
</div>
<div
class="mx-auto h-[824px] md:h-[358px] sm:h-[198px] bg-cover bg-no-repeat overflow-hidden relative"
>
<picture class="absolute inset-0 z-0">
<source media="(max-width: 1024px)" srcset="/images/about/bg_sm.png" />
<source media="(max-width: 1025px)" srcset="/images/about/bg_lg.png" />
<img src="/images/about/bg_lg.png" loading="eager" class="size-full object-cover" />
</picture>
<div
class="text-white font-bold text-center mt-[198px] md:mt-[42px] sm:mt-[20px] flex flex-col items-center relative z-20"
>
<span class="text-7xl md:text-6xl sm:text-3xl opacity-35">ABUOT</span>
<span class="text-4xl md:text-4xl sm:text-base relative -top-8">关于我们</span>
</div>
<div
class="text-white font-bold text-center mt-17 md:mt-5 sm:mt-3 text-[28px] md:text-2xl sm:text-xs max-w-[1440px] mx-auto relative z-20 break-all px-48 md:px-20 sm:px-10"
>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
<div
class="font-bold text-center mt-13 md:mt-5 sm:mt-3 text-3xl md:text-base sm:text-xs text-[#15A351]"
>
了解更多>>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
<style scoped></style>

2
components/pageLayout/cloudData.vue
Unescape View File

@ -74,4 +74,4 @@ const cloudDataList = [ @@ -74,4 +74,4 @@ const cloudDataList = [
]
</script>
<style lang="scss" scoped></style>
<style scoped></style>

2
pages/index.vue
Unescape View File

@ -83,7 +83,7 @@ useSeoMeta({ @@ -83,7 +83,7 @@ useSeoMeta({
const slides = [
{
bgLg: '/images/banner/bk1000.png',
bgSm: '/images/banner/device_sm.png',
bgSm: '/images/banner/bk1000_sm.png',
title: '储能工业控制主机 BK-1000',
subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护',
tags: [

114
pages/products/BK-1000.vue
Unescape View File

@ -1,19 +1,27 @@ @@ -1,19 +1,27 @@
<template>
<div>
<div class="h-[888px] w-full">
<div class="size-full relative flex overflow-hidden items-center sm:items-start">
<div class="h-[888px] w-full md:h-[710px] sm:h-[410px]">
<div
class="size-full relative flex overflow-hidden items-center md:items-start sm:items-start"
>
<picture class="absolute w-full h-full left-0 top-0 -z-10">
<source media="(max-width: 480px)" :srcset="slide.bgSm" />
<source media="(max-width: 1280px)" :srcset="slide.bgLg" />
<source media="(max-width: 1024px)" :srcset="slide.bgSm" />
<source media="(max-width: 1025px)" :srcset="slide.bgLg" />
<img :src="slide.bgLg" loading="eager" class="size-full object-cover" />
</picture>
<div class="w-[1440px] md:w-[870px] sm:w-[300px] sm:top-19 relative mx-auto">
<div class="flex flex-col gap-10 text-white justify-center items-center w-[398px]">
<h2 class="text-5xl md:text-lg sm:text-xs font-bold">
<div
class="w-[1440px] md:w-[870px] sm:w-[300px] md:h-[calc(100%-200px)] sm:top-19 relative mx-auto flex md:justify-center sm:justify-center sm:pt-10"
>
<div
class="flex flex-col gap-10 sm:gap-3 text-white justify-center items-center w-[398px]"
>
<h2
class="text-5xl md:text-[40px] md:leading-[40px] sm:text-[20px] sm:leading-[20px] font-bold"
>
{{ slide.title }}
</h2>
<div
class="text-4xl md:text-2xl sm:text-base overflow-hidden font-bold bg-gradient-to-r from-[#69AA25] to-[#13A892] w-[328px] h-[48px] rounded-full flex items-center justify-center"
class="text-4xl md:text-[28px] md:leading-[28px] sm:text-xs overflow-hidden font-bold bg-gradient-to-r from-[#69AA25] to-[#13A892] w-[328px] h-[48px] md:w-[258px] sm:w-[130px] sm:h-[24px] rounded-full flex items-center justify-center"
>
{{ slide.subtitle }}
</div>
@ -21,19 +29,54 @@ @@ -21,19 +29,54 @@
</div>
</div>
</div>
<div class="h-[888px] max-w-[1440px] w-full relative mx-auto">
<div v-for="item in slide.content" :key="item.title" class="flex gap-10">
<div class="px-56">
<h3 class="text-5xl font-bold text-[#414141]">
<div
class="h-[888px] max-w-[1440px] md:max-w-[750px] sm:max-w-[320px] w-full relative mx-auto pt-[136px] md:pt-[48px] sm:pt-[24px]"
>
<div v-for="item in slide.content" :key="item.title" class="flex md:flex-col sm:flex-col">
<div class="px-[12%] md:px-0 sm:px-0 md:pt-12 sm:pt-6 md:pb-23 sm:pb-11">
<h3 class="text-5xl sm:text-2xl font-bold text-[#414141] md:text-center sm:text-center">
{{ item.title }}
</h3>
</div>
<ul>
<li v-for="info in item.info" :key="info.label">
<span>{{ info.label }}</span>
<p v-for="value in info.value" :key="value">{{ value }}</p>
</li>
</ul>
<div class="flex-1 grid grid-cols-2 md:hidden sm:hidden">
<div v-for="column in item.info" :key="column.column" class="flex flex-col">
<div v-for="info in column.items" :key="info.label" class="min-h-[160px]">
<div class="text-3xl font-bold text-[#17A755] mb-5">{{ info.label }}</div>
<p
v-for="value in info.value"
:key="value"
class="text-[18px] text-[#6F6F6F] font-[400]"
>
{{ value }}
</p>
</div>
</div>
</div>
<div class="hidden md:block sm:block">
<div
v-for="column in item.info"
:key="column.column"
class="flex flex-wrap md:gap-5 sm:gap-1"
>
<div
v-for="info in column.items"
:key="info.label"
class="md:min-h-[182px] md:max-w-[640px] sm:max-w-[320px] sm:min-h-[92px] md:min-w-[200px] sm:min-w-[100px]"
:class="{ 'flex-1': column.column === 1 }"
>
<div class="text-3xl sm:text-base font-bold text-[#17A755] mb-5">
{{ info.label }}
</div>
<p
v-for="value in info.value"
:key="value"
class="text-[18px] sm:text-[10px] sm:leading-[10px] text-[#6F6F6F] font-[400]"
>
{{ value }}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
@ -42,28 +85,39 @@ @@ -42,28 +85,39 @@
<script setup lang="ts">
const slide = {
bgLg: '/images/banner/bk1000.png',
bgSm: '/images/banner/device_sm.png',
bgSm: '/images/banner/bk1000_sm.png',
title: '储能工业控制主机',
subtitle: 'BK-1000',
content: [
{
title: '尺寸与重量',
info: [
{ label: '长度', value: ['162.6mm'] },
{ label: '宽度', value: ['75.1mm'] },
{ label: '厚度', value: ['8.4mm'] },
{
label: '重量',
value: [
'约226克（含电池）',
'*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。',
column: 1,
items: [
{ label: '长度', value: ['162.6mm'] },
{ label: '宽度', value: ['75.1mm'] },
{ label: '厚度', value: ['8.4mm'] },
],
},
{
label: 'xxxx',
value: [
'约226克（含电池）',
'*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。',
column: 2,
items: [
{
label: '重量',
value: [
'约226克（含电池）',
'*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。',
],
},
{
label: 'xxxx',
value: [
'约226克（含电池）',
'*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。',
],
},
],
},
],

124
pages/products/BK-2000.vue
Unescape View File

@ -1,9 +1,129 @@ @@ -1,9 +1,129 @@
<template>
<div>
<h1>BK-2000</h1>
<div class="h-[888px] w-full md:h-[710px] sm:h-[410px]">
<div
class="size-full relative flex overflow-hidden items-center md:items-start sm:items-start"
>
<picture class="absolute w-full h-full left-0 top-0 -z-10">
<source media="(max-width: 1024px)" :srcset="slide.bgSm" />
<source media="(max-width: 1025px)" :srcset="slide.bgLg" />
<img :src="slide.bgLg" loading="eager" class="size-full object-cover" />
</picture>
<div
class="w-[1440px] md:w-[870px] sm:w-[300px] md:h-[calc(100%-200px)] sm:top-19 relative mx-auto flex md:justify-center sm:justify-center sm:pt-10"
>
<div
class="flex flex-col gap-10 sm:gap-3 text-white justify-center items-center w-[398px]"
>
<h2
class="text-5xl md:text-[40px] md:leading-[40px] sm:text-[20px] sm:leading-[20px] font-bold"
>
{{ slide.title }}
</h2>
<div
class="text-4xl md:text-[28px] md:leading-[28px] sm:text-xs overflow-hidden font-bold bg-gradient-to-r from-[#69AA25] to-[#13A892] w-[328px] h-[48px] md:w-[258px] sm:w-[130px] sm:h-[24px] rounded-full flex items-center justify-center"
>
{{ slide.subtitle }}
</div>
</div>
</div>
</div>
</div>
<div
class="h-[888px] max-w-[1440px] md:max-w-[750px] sm:max-w-[320px] w-full relative mx-auto pt-[136px] md:pt-[48px] sm:pt-[24px]"
>
<div v-for="item in slide.content" :key="item.title" class="flex md:flex-col sm:flex-col">
<div class="px-[12%] md:px-0 sm:px-0 md:pt-12 sm:pt-6 md:pb-23 sm:pb-11">
<h3 class="text-5xl sm:text-2xl font-bold text-[#414141] md:text-center sm:text-center">
{{ item.title }}
</h3>
</div>
<div class="flex-1 grid grid-cols-2 md:hidden sm:hidden">
<div v-for="column in item.info" :key="column.column" class="flex flex-col">
<div v-for="info in column.items" :key="info.label" class="min-h-[160px]">
<div class="text-3xl font-bold text-[#17A755] mb-5">{{ info.label }}</div>
<p
v-for="value in info.value"
:key="value"
class="text-[18px] text-[#6F6F6F] font-[400]"
>
{{ value }}
</p>
</div>
</div>
</div>
<div class="hidden md:block sm:block">
<div
v-for="column in item.info"
:key="column.column"
class="flex flex-wrap md:gap-5 sm:gap-1"
>
<div
v-for="info in column.items"
:key="info.label"
class="md:min-h-[182px] md:max-w-[640px] sm:max-w-[320px] sm:min-h-[92px] md:min-w-[200px] sm:min-w-[100px]"
:class="{ 'flex-1': column.column === 1 }"
>
<div class="text-3xl sm:text-base font-bold text-[#17A755] mb-5">
{{ info.label }}
</div>
<p
v-for="value in info.value"
:key="value"
class="text-[18px] sm:text-[10px] sm:leading-[10px] text-[#6F6F6F] font-[400]"
>
{{ value }}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
const slide = {
bgLg: '/images/banner/bk2000.png',
bgSm: '/images/banner/bk2000_sm.png',
title: '储能工业控制主机',
subtitle: 'BK-2000',
content: [
{
title: '尺寸与重量',
info: [
{
column: 1,
items: [
{ label: '长度', value: ['162.6mm'] },
{ label: '宽度', value: ['75.1mm'] },
{ label: '厚度', value: ['8.4mm'] },
],
},
{
column: 2,
items: [
{
label: '重量',
value: [
'约226克（含电池）',
'*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。',
],
},
{
label: 'xxxx',
value: [
'约226克（含电池）',
'*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。',
],
},
],
},
],
},
],
}
</script>
<style scoped></style>

BIN
public/images/banner/bk1000_sm.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 239 KiB

Write Preview
Loading…
Cancel
Save