50%首页

.eslintrc.js

-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  'extends': [
-    'plugin:vue/essential',
-    'eslint:recommended',
-    '@vue/typescript/recommended'
-  ],
-  parserOptions: {
-    ecmaVersion: 2020
-  },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  }
-}

src/Layouts/MainPage/Header.vue

@@ -14,7 +14,7 @@
         :style="bgTransparent ? styleClass.transHeaderBg : styleClass.blurHeaderBg"
       >
         <img src="@/assets/logo.png" class="w-20 h-6" />
-        <div class="text-sm text-gray-500 font-medium flex flex-row items-center">
+        <div class="text-sm text-gray-800 font-medium flex flex-row items-center">
           <div class="pr-14 hover:text-mainBlue cursor-pointer" @click="handleClick">首页</div>
           <div
             class="flex items-center pr-12 hover:text-mainBlue cursor-pointer"
@@ -38,7 +38,7 @@
         :class="hovering ? ' bg-white pt-12 h-72' : ' h-0 overflow-hidden'"
         class="transition-all ease-in-out duration-1000 absolute top-0 w-full z-10"
       >
-        <!-- <div class="h-px bg-gray-200"></div> -->
+        <div class="h-px bg-gray-200"></div>
         <div class="w-bodySet mx-auto pt-5 pb-10">
           <hoverBar :data="list" />
         </div>

src/assets/style/style.module.css

@@ -12,8 +12,16 @@
  @apply border border-mainBlue text-white hover:bg-white hover:border-gray-400 hover:text-gray-600 transition duration-500 bg-mainBlue 
 }
 
+.secondBtn{
+  @apply border border-mainBlue text-mainBlue hover:bg-white hover:border-gray-400 hover:text-gray-600 transition duration-500 bg-white 
+}
+
+.darkBtn{
+  @apply border border-gray-800 text-white hover:bg-white hover:border-gray-400 hover:text-gray-600 transition duration-500 bg-gray-800
+}
+ 
 .largeBtn{
-  @apply text-lg px-6 py-2 rounded-3xl
+  @apply text-base px-6 py-2 rounded-3xl
 }
 
 .meduimBtn{
@@ -35,3 +43,7 @@
  .footerSecondFontMobile{
    @apply text-xs  text-gray-400 pb-2 cursor-pointer pr-5
  }
+
+ .homeTab{
+   @apply text-sm py-3 w-1/5 border border-gray-100 text-gray-400  hover:border-mainBlue hover:text-mainBlue cursor-pointer
+ }
\ No newline at end of file

src/assets/style/style.module.css.d.ts

@@ -2,12 +2,15 @@ declare const styles: {
   readonly "blurHeaderBg": string;
   readonly "transHeaderBg": string;
   readonly "mainBtn": string;
+  readonly "secondBtn": string;
+  readonly "darkBtn": string;
   readonly "largeBtn": string;
   readonly "meduimBtn": string;
   readonly "footerMainFont": string;
   readonly "footerSecondFont": string;
   readonly "footerMainFontMobile": string;
   readonly "footerSecondFontMobile": string;
+  readonly "homeTab": string;
 };
 export = styles;
 

src/components/mainButton.vue

 <template>
   <div>
     <button
-      :class="[props.size === 'medium' ? styleClass.meduimBtn : styleClass.largeBtn, styleClass.mainBtn]"
+      :class="[props.size === 'medium' ? styleClass.meduimBtn : styleClass.largeBtn,
+      style]"
       @click="handleClick"
     >{{ props.text }}</button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { withDefaults, defineProps, defineEmits } from 'vue';
+import { withDefaults, defineProps, defineEmits, computed } from 'vue';
 import styleClass from '@/assets/style/style.module.css'
 
 const props = withDefaults(defineProps<{
   text: string,
+  theme?: 'main' | 'second' | 'dark',
   size?: 'large' | 'medium'
 }>(), {
+  theme: 'main',
   size: 'medium'
 })
 
@@ -22,4 +25,21 @@ const emits = defineEmits(['handleClick'])
 const handleClick = (e: Event) => {
   emits('handleClick', e)
 }
+
+const style = computed(() => {
+  let theme = ''
+  switch (props.theme) {
+    case 'main':
+      theme = styleClass.mainBtn
+      break
+    case 'second':
+      theme = styleClass.secondBtn
+      break
+    case 'dark':
+      theme = styleClass.darkBtn
+      break
+  }
+  return theme
+})
+
 </script>
\ No newline at end of file

src/components/tabCard.vue

+<template>
+  <div class="flex flex-row py-12">
+    <div class="w-2/5">
+      <img :src="getImgUrl(props.data.icon)" />
+    </div>
+    <div class="w-3/5 flex flex-col justify-evenly h-96 pl-5">
+      <div class="text-xl text-gray-800 font-medium">{{ props.data.title }}</div>
+      <div class="text-sm text-gray-400">{{ props.data.detail }}</div>
+      <slot name="dataProve" />
+      <div class="flex flex-row">
+        <MainButton text="查看更多" size="large" />
+        <div class="pr-5"></div>
+        <MainButton text="立即体验" size="large" theme="dark" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, withDefaults } from "vue"
+import MainButton from "./mainButton.vue"
+interface item {
+  id: number,
+  icon: string,
+  title: string,
+  detail: string
+}
+
+const props = withDefaults(defineProps<{
+  data: item
+}>(), {
+
+})
+
+const getImgUrl = computed(() => {
+  return (url: string) => {
+    return require(`@/assets/${url}.png`)
+  }
+})
+</script>
\ No newline at end of file

src/context/provenanceType.ts

+export default [
+  {
+    id:1,
+    title:'数据存证',
+    detail:'为个人和小微企业提供可信存证服务，任务全流程上链，无法作弊，不可篡改，从源头控制数据，保证数据真实可靠。具有自定义上链模板、一键式上链、增量更新、可视化溯源等多种功能，适用于农产品、公益捐赠、医疗药品和电子病例共享等多种应用场景。',
+    icon:'shuju'
+  },
+  {
+    id:2,
+    title:'协同溯源',
+    detail:'为企业和政府提供数据上链、流程化办公、任务协同等高级版存证溯源服务。支持添加企业组织，实现员工管理和任务分配；支持溯源授权和关联，实现多企业合作协同；支持创建自定义任务流程，实现任务自动化。',
+    icon:'xietong'
+  },
+  {
+    id:3,
+    title:'接口存证',
+    detail:'企业版存证系统兼顾区块链安全性、不可篡改、高效查询等优势，同时提供企业级别的数据安全、部门管理、企业间协同、存证关联等高级产品功能。 适用于农产品溯源、工业制造溯源、政务数据加密授权分享、消防系统溯源存证、智慧医疗电子病例共享等场景',
+    icon:'jiekou'
+  },
+  {
+    id:4,
+    title:'数字资产',
+    detail:'结合区块链技术，通过发行通证的方式将资产与通证锚定，实现资产数字化，让线下有价值属性的实物资产，在区块链上进行数字化呈现，促进资产流通，提升资产价值，实现共享经济。链上资产信息公开透明可查询，消除了暗箱操作的可能，一个不受人为因素控制的公平的流通市场不仅节约了时间和金钱，也让维权过程变得简单易操作。',
+    icon:'shuzi'
+  },
+  {
+    id:5,
+    title:'区块链验真',
+    detail:'企业版存证系统兼顾区块链安全性、不可篡改、高效查询等优势，同时提供企业级别的数据安全、部门管理、企业间协同、存证关联等高级产品功能。 适用于农产品溯源、工业制造溯源、政务数据加密授权分享、消防系统溯源存证、智慧医疗电子病例共享等场景',
+    icon:'qukuai'
+  },
+]
\ No newline at end of file

src/icons/svg/data.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>二级-网页防篡改备份</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页" transform="translate(-870.000000, -660.000000)" fill-rule="nonzero">
+            <g id="二级-网页防篡改备份" transform="translate(870.000000, 660.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="30" height="30"></rect>
+                <path d="M23.4375,1.875 L6.5625,1.875 C3.9375,1.875 1.875,3.9375 1.875,6.5625 L1.875,23.4375 C1.875,26.0625 3.9375,28.125 6.5625,28.125 L23.4375,28.125 C26.0625,28.125 28.125,26.0625 28.125,23.4375 L28.125,6.5625 C28.125,3.9375 26.0625,1.875 23.4375,1.875 Z M3.75,6.5625 C3.75,5.0625 5.0625,3.75 6.5625,3.75 L23.4375,3.75 C24.9375,3.75 26.25,5.0625 26.25,6.5625 L26.25,9 L3.75,9 L3.75,6.5625 Z M26.25,23.4375 C26.25,24.9375 24.9375,26.25 23.4375,26.25 L6.5625,26.25 C5.0625,26.25 3.75,24.9375 3.75,23.4375 L3.75,10.875 L26.25,10.875 L26.25,23.4375 Z M5.25,6.375 C5.25,6.89276695 5.66973305,7.3125 6.1875,7.3125 C6.70526695,7.3125 7.125,6.89276695 7.125,6.375 C7.125,5.85723305 6.70526695,5.4375 6.1875,5.4375 C5.66973305,5.4375 5.25,5.85723305 5.25,6.375 Z M8.25,6.375 C8.25,6.89276695 8.66973305,7.3125 9.1875,7.3125 C9.70526695,7.3125 10.125,6.89276695 10.125,6.375 C10.125,5.85723305 9.70526695,5.4375 9.1875,5.4375 C8.66973305,5.4375 8.25,5.85723305 8.25,6.375 Z M11.4375,6.375 C11.4375,6.89276695 11.857233,7.3125 12.375,7.3125 C12.892767,7.3125 13.3125,6.89276695 13.3125,6.375 C13.3125,5.85723305 12.892767,5.4375 12.375,5.4375 C11.857233,5.4375 11.4375,5.85723305 11.4375,6.375 Z M7.5,16.5 L22.5,16.5 C23.0625,16.5 23.4375,16.125 23.4375,15.5625 C23.4375,15 23.0625,14.625 22.5,14.625 L7.5,14.625 C6.9375,14.625 6.5625,15 6.5625,15.5625 C6.5625,16.125 6.9375,16.5 7.5,16.5 Z M20.8125,20.625 L9.1875,20.625 C8.625,20.625 8.25,21 8.25,21.5625 C8.25,22.125 8.625,22.5 9.1875,22.5 L20.8125,22.5 C21.375,22.5 21.75,22.125 21.75,21.5625 C21.75,21 21.375,20.625 20.8125,20.625 L20.8125,20.625 Z" id="形状" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/icons/svg/document.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="29px" height="29px" viewBox="0 0 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>文件</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页" transform="translate(-462.000000, -660.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="文件" transform="translate(462.000000, 660.000000)">
+                <rect id="矩形" opacity="0" x="0" y="0" width="29" height="29"></rect>
+                <path d="M9.35554338,23.2955576 C9.16136199,23.2955576 9,23.4533092 9,23.6491387 C9,23.8422484 9.15862705,24 9.35554338,24 C9.54972476,24 9.71108676,23.8422484 9.71108676,23.6491387 C9.70835181,23.456029 9.54972476,23.2955576 9.35554338,23.2955576 Z M9.70835181,17.6464362 L14.6804892,17.6464362 C15.068852,17.6491387 15.388841,17.3309157 15.388841,16.9419764 L15.388841,16.5883953 C15.388841,16.1967362 15.068852,15.8839529 14.6804892,15.8839529 L9.70835181,15.8839529 C9.31451914,15.8839529 9,16.2021759 9,16.5883953 L9,16.9419764 C9,17.3336355 9.31998904,17.6464362 9.70835181,17.6464362 Z M19.2943483,12 L9.70835181,12 C9.31451914,12 9,12.318223 9,12.7044424 L9,13.0553037 C9,13.4469628 9.31998904,13.7597461 9.70835181,13.7597461 L19.2916133,13.7597461 C19.685446,13.7597461 19.9999827,13.4415231 19.9999827,13.0553037 L19.9999827,12.7044424 C20.0027001,12.318223 19.685446,12 19.2943483,12 L19.2943483,12 Z M10.4167036,23.6491387 C10.4167036,23.8422484 10.5753307,24 10.772247,24 L16.0971928,24 L16.0971928,23.2955576 L10.772247,23.2955576 C10.5780656,23.2955576 10.4167036,23.456029 10.4167036,23.6491387 Z" id="形状"></path>
+                <path d="M26,4.89373814 C26,3.29478736 24.7078439,2 23.1155741,2 L6.88442592,2 C5.29215612,2 4,3.29757785 4,4.89652863 L4,24.0950999 C4,25.6940507 5.29215612,26.9916285 6.88442592,26.9916285 L19.5003158,26.9916285 L19.5086523,27 L25.9694329,20.1577185 L25.9194139,20.1074897 L26,20.1074897 L26,4.89373814 Z M20.5868384,18.2964617 C18.9945686,18.2964617 17.7024125,19.5940395 17.7024125,21.1929903 L17.7024125,25.17781 L7.24567387,25.17781 C6.44814955,25.17781 5.80346091,24.5304163 5.80346091,23.7295457 L5.80346091,5.25929233 C5.80346091,4.4584217 6.44814955,3.81102802 7.24567387,3.81102802 L22.7515473,3.81102802 C23.5490716,3.81102802 24.1937603,4.4584217 24.1937603,5.25929233 C24.1965391,5.25929233 24.1965391,12.6819958 24.1965391,18.2964617 L20.5868384,18.2964617 Z" id="形状"></path>
+                <path d="M19.2943645,7 L9.70835292,7 C9.31451964,7 9,7.36111111 9,7.79938272 L9,8.20061728 C9,8.64506173 9.31998954,9 9.70835292,9 L19.2916295,9 C19.6854628,9 20,8.63888889 20,8.20061728 L20,7.79938272 C20.0027174,7.35493827 19.6854628,7 19.2943645,7 L19.2943645,7 Z" id="路径"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/icons/svg/suyuan.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>溯源</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页" transform="translate(-1306.000000, -654.000000)" fill-rule="nonzero">
+            <g id="溯源" transform="translate(1306.000000, 654.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="35" height="35"></rect>
+                <path d="M17.5,3.68421053 C25.1305668,3.68421053 31.3157895,9.86942798 31.3157895,17.4999883 C31.3157895,18.5216474 31.2045547,19.5291364 30.9870445,20.5097024 L30.8998988,20.8759976 L28.8381579,20.3587916 C29.0719636,19.4320717 29.1902834,18.4741778 29.1902834,17.4999883 C29.1902834,11.0434148 23.956579,5.80971481 17.5,5.80971481 C11.043421,5.80971481 5.8097166,11.0434148 5.8097166,17.4999883 C5.8097166,23.9565619 11.043421,29.1902619 17.5,29.1902619 C20.2363889,29.1946473 22.8868582,28.2349003 24.9860324,26.4795354 L25.0625506,26.4136448 L16.7567814,18.2587934 L18.2432186,16.7404748 L26.8295546,25.1702248 L28.1020243,26.4221468 L27.3580972,27.1802433 C24.7627967,29.8296622 21.2087725,31.3205938 17.5,31.3157778 C9.8694332,31.3157778 3.68421053,25.1305487 3.68421053,17.4999883 C3.68421053,9.86942798 9.8694332,3.68421053 17.5,3.68421053 Z M17.5,10.7692247 C19.5212508,10.7688557 21.4356649,11.6768561 22.7142432,13.2423235 C23.9928216,14.807791 24.5001913,16.8649775 24.0961538,18.8454325 L24.0373482,19.1075781 L21.9727733,18.601708 C22.461904,16.6145228 21.5809882,14.5429473 19.8104161,13.5166755 C18.039844,12.4904037 15.8044293,12.755669 14.3232123,14.1678141 C12.8419953,15.5799592 12.4703644,17.8001679 13.4109815,19.6176923 C14.3515986,21.4352167 16.3787813,22.413978 18.3870445,22.0202275 L18.6031377,21.9727578 L19.1097166,24.0366225 C16.5865159,24.6561117 13.9320721,23.7680568 12.2896242,21.7549329 C10.6471763,19.7418091 10.310043,16.9631326 11.4234238,14.6156482 C12.5368046,12.2681637 14.9018649,10.7710997 17.5,10.7692247 L17.5,10.7692247 Z" id="形状" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/views/Home.vue

 <template>
-  <div class=" bg-blue-50  h-screen pt-20 md:min-w-bodySet mx-auto">
-   home
+  <div class="bg-white md:min-w-bodySet mx-auto">
+    <div class="banner bg-gradient-to-r from-white to-bannerBgEndColor">
+      <div class="w-bodySet mx-auto pt-24">
+        <div :style="{ backgroundImage: `url(${getImgUrl('banner')})` }" class="bg-cover">
+          <div class="w-1/2 pl-36 py-36">
+            <div class="text-4xl font-semibold text-headerMain">
+              区块链协同溯源+商城
+              <br />追溯商品全流程
+            </div>
+            <div
+              class="text-base text-contentMain mt-5"
+            >基于区块链技术的存证溯源服务系统，面向企业和政府部门提供支持数据上链、流程化办公、任务协同、资产数字化的高级版存证溯源服务。</div>
+            <div class="flex flex-row mt-6">
+              <MainButton size="large" text="立即体验" />
+              <div class="pl-2"></div>
+              <MainButton size="large" text="预约演示" theme="second" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bar bg-mainBlue text-white text-sm py-3">
+      <div class="flex flex-row w-8/12 mx-auto justify-around">
+        <div class="flex flex-row items-center border-r border-indigo-600">
+          <svg-icon iconClass="document" class="w-9 h-9 pr-3" />
+          <span class="pr-36">链上存证 防止篡改</span>
+        </div>
+        <div class="flex flex-row items-center border-r border-indigo-600">
+          <svg-icon iconClass="suyuan" class="w-9 h-9 pr-3" />
+          <span class="pr-36">数字通证 追溯源头</span>
+        </div>
+        <div class="flex flex-row items-center">
+          <svg-icon iconClass="data" class="w-9 h-9 pr-3" />
+          <span class="pr-36">数据验真 真实可靠</span>
+        </div>
+      </div>
+    </div>
+    <div class="tab">
+      <div class="text-2xl font-semibold text-gray-700 text-center mt-14">多样化溯源类型，全面满足企业需求</div>
+      <div
+        class="w-6/12 mx-auto flex flex-row mt-12 justify-center text-center border border-gray-200 rounded-lg"
+      >
+        <div
+          :class="styleClass.homeTab"
+          class="rounded-l-lg"
+          @mouseenter="handleTabSwitch(NAV_EVENT.NAV1)"
+        >数据存证</div>
+        <div :class="styleClass.homeTab" @mouseenter="handleTabSwitch(NAV_EVENT.NAV2)">协同溯源</div>
+        <div :class="styleClass.homeTab" @mouseenter="handleTabSwitch(NAV_EVENT.NAV3)">接口存证</div>
+        <div :class="styleClass.homeTab" @mouseenter="handleTabSwitch(NAV_EVENT.NAV4)">区块链商城</div>
+        <div
+          :class="styleClass.homeTab"
+          class="rounded-r-lg"
+          @mouseenter="handleTabSwitch(NAV_EVENT.NAV5)"
+        >区块链验真</div>
+      </div>
+      <div class="pannel w-6/12 mx-auto cursor-default">
+        <TabCard :data="nav[currentNav]">
+          <template #dataProve v-if="currentNav == 0">
+            <div class=" flex flex-row w-1/2">
+              <div class=" w-1/2">
+                <div class="flex flex-row items-center">
+                  <div class="w-2 h-2 rounded-full bg-indigo-400 mr-2"></div>
+                  <div class="text-gray-400 text-xs">自动上链</div>
+                </div>
+                <div class="flex flex-row items-center mt-6">
+                  <div class="w-2 h-2 rounded-full bg-indigo-400 mr-2"></div>
+                  <div class="text-gray-400 text-xs">自动增量存证</div>
+                </div>
+              </div>
+              <div class=" w-1/2">
+                <div class="flex flex-row items-center">
+                  <div class="w-2 h-2 rounded-full bg-indigo-400 mr-2"></div>
+                  <div class="text-gray-400 text-xs">数据统计</div>
+                </div>
+                <div class="flex flex-row items-center mt-6">
+                  <div class="w-2 h-2 rounded-full bg-indigo-400 mr-2"></div>
+                  <div class="text-gray-400 text-xs">定制查询条件</div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </TabCard>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import MainButton from '@/components/mainButton.vue';
+import styleClass from '@/assets/style/style.module.css';
+import nav from "@/context/provenanceType"
+import { computed, ref } from 'vue';
+import TabCard from '@/components/tabCard.vue';
+
+
+const getImgUrl = computed(() => {
+  return (url: string) => {
+    return require(`@/assets/${url}.png`)
+  }
+})
+
+
+
+/* handle tab switch */
+enum NAV_EVENT {
+  NAV1,
+  NAV2,
+  NAV3,
+  NAV4,
+  NAV5
+}
+
+let currentNav = ref(0)
+const handleTabSwitch = (type: NAV_EVENT) => {
+  switch (type) {
+    case NAV_EVENT.NAV1:
+      currentNav.value = 0
+      break
+    case NAV_EVENT.NAV2:
+      currentNav.value = 1
+      break
+    case NAV_EVENT.NAV3:
+      currentNav.value = 2
+      break
+    case NAV_EVENT.NAV4:
+      currentNav.value = 3
+      break
+    case NAV_EVENT.NAV5:
+      currentNav.value = 4
+      break
+  }
+}
 
+const navItem = computed(() => {
+  return nav[currentNav.value]
+})
 </script>

tailwind.config.js

@@ -18,6 +18,9 @@ module.exports = {
       mainBlue: '#2E2DFF',
       footerBg: '#1E2454',
       footerBorder: '#313A7E',
+      bannerBgEndColor:'#E1E9FE',
+      headerMain:'#273C6E',
+      contentMain:'#76869E',
       
       black: colors.black,
       white: colors.white,
@@ -285,6 +288,7 @@ module.exports = {
       '7xl': ['4.5rem', { lineHeight: '1' }],
       '8xl': ['6rem', { lineHeight: '1' }],
       '9xl': ['8rem', { lineHeight: '1' }],
+
     },
     fontWeight: {
       thin: '100',