fix:ui

src/Layouts/MainPage/Header.vue

@@ -23,11 +23,11 @@
         >
           <slot name="logo" />
           <div
-            class="text-sm font-medium flex flex-row items-center justify-center -mb-1"
+            class="text-sm  font-medium flex flex-row items-center justify-between -mb-1"
             :class="theme === 'white' ? ' text-white' : ' text-black '"
           >
             <div
-              class="mr-14 cursor-pointer pb-3 px-2 border-b-2 border-transparent"
+              class="mr-14 cursor-pointer pb-3 px-2 border-b-2 border-transparent leading-7"
               :class="[theme === 'white' ? '' : 'hover:text-mainBlue  hover:border-mainBlue',
               activeRoute == NAV_EVENT.NAV0 ? ' text-mainBlue' : '']"
               @mouseenter="handleHover($event, NAV_EVENT.NAV0)"
@@ -61,7 +61,7 @@
               />
             </div>
             <div
-              class="cursor-pointer mr-10 px-2 pb-3 border-b-2 border-transparent"
+              class="cursor-pointer mr-10 px-2 pb-3 border-b-2 border-transparent leading-7"
               :class="[theme === 'white' ? '' : 'hover:text-mainBlue hover:border-b-2 hover:border-mainBlue',
               activeRoute == NAV_EVENT.NAV3 ? ' text-mainBlue' : '']"
               @mouseenter="handleHover($event, NAV_EVENT.NAV3)"
@@ -76,7 +76,7 @@
           </div>
         </div>
         <div
-          :class="[hovering ? ' bg-white' : ' h-0 overflow-hidden', theme == 'white' ? ' mt-12' : 'pt-12', listHeight]"
+          :class="[hovering ? ' bg-white' : ' h-0 overflow-hidden', theme == 'white' ? ' mt-14' : 'pt-14', listHeight]"
           class="transition-all ease-in-out duration-300 fixed top-0 w-full z-20"
         >
           <div class="w-full border-t border-gray-200" v-show="hovering">
@@ -95,7 +95,7 @@
 import styleClass from '@/assets/style/style.module.css'
 import { ref, withDefaults, defineProps, reactive, computed } from 'vue';
 import MainButton from "@/components/mainButton.vue"
-import hoverBar from '@/components/hoverBar.vue';
+import hoverBar from '@/Layouts/MainPage/hoverBar.vue';
 import { provennanceList } from '@/context/provenance';
 import { solutionList } from '@/context/solution';
 import { useRoute, useRouter } from 'vue-router';
@@ -150,6 +150,9 @@ const handleClick = (e: Event, item: NAV_EVENT) => {
   if (currentNav.value == NAV_EVENT.NAV0 || currentNav.value == NAV_EVENT.NAV2 || currentNav.value == NAV_EVENT.NAV3) {
     router.push({ name: item })
   }
+  if(item == NAV_EVENT.NAV4){
+    window.open('https://slc.8n.cn/login')
+  }
 }
 
 /* handle Hover */

src/Layouts/MainPage/SideBar.vue

@@ -14,13 +14,13 @@
         <div class="text-sm text-gray-500 pt-2">{{ item.header }}</div>
       </div>
     </div>
-    <div class="bg-white fixed top-36 right-24 mr-1 rounded-lg py-2" v-if="display1">
+    <div class="bg-white fixed top-36 right-24 mr-1 rounded-lg py-2 shadow-sideBarShadow" v-if="display1">
       <div class="text-xs text-gray-600 pt-2 text-center font-medium">扫一扫添加客服</div>
       <img src="@/assets/serviceQr.png" class="w-28" />
       <div class="triangle absolute top-0 bottom-0 my-auto -right-2"></div>
     </div>
     <div
-      class="bg-white fixed top-64 right-24 mr-1 rounded-lg py-3 flex items-center px-2"
+      class="bg-white fixed top-64 right-24 mr-1 rounded-lg py-3 flex items-center px-2 shadow-sideBarShadow"
       v-if="display2"
     >
       <svg-icon iconClass="tel2" class="w-6 h-5 mx-auto mr-4" />
@@ -64,15 +64,12 @@ const handleHover = (e: Event, id: number) => {
     } else if (id == 3) {
       display2.value = true
     }
-    console.log('enter', id);
   } else if (e.type == 'mouseleave') {
     if (id == 2) {
       display1.value = false
     } else if (id == 3) {
       display2.value = false
     }
-    console.log('leaver', id);
-
   }
 }
 </script>

src/components/hoverBar.vue → src/Layouts/MainPage/hoverBar.vue

@@ -17,7 +17,7 @@
           <svg-icon :iconClass="child.icon" class="w-10 h-10 pr-2" />
           <div class="flex flex-col">
             <div class="text-sm font-medium">{{ child.product }}</div>
-            <div class="text-xs text-contentMain">{{ child.detail }}</div>
+            <div class="text-xs text-contentMain leading-4">{{ child.detail }}</div>
           </div>
         </div>
       </div>
@@ -28,7 +28,6 @@
 <script setup lang="ts">
 import { withDefaults, defineProps, defineEmits } from 'vue';
 import { useRouter } from 'vue-router';
-import SvgIcon from './svgIcon.vue';
 
 interface child { id: number, product: string, detail: string, icon: string, route?: string, website?: string }
 interface item {

src/assets/style/style.module.css

@@ -36,7 +36,7 @@
 }
 
 .footerSecondFont{
-  @apply text-sm text-footerSecondFont opacity-50 pb-3 cursor-pointer
+  @apply text-sm  text-footerSecondFont opacity-50 pb-3 cursor-pointer
 }
 
 .footerMainFontMobile{
@@ -55,9 +55,9 @@
    @apply border-mainBlue text-mainBlue
  }
  .mainHeader{
-  @apply text-3xl font-semibold text-gray-800 text-center
+  @apply text-3xl font-semibold  text-headerMain text-center
  }
 
  .secondHeader{
-  @apply text-xl font-semibold text-gray-800 text-center
+  @apply text-xl font-semibold text-headerMain text-center
  }
\ No newline at end of file

src/components/solutions.vue

@@ -11,8 +11,8 @@
             :class="getWidth(disadvantages.length)"
           >
             <svg-icon :iconClass="dis.icon" class="h-12 w-12 mx-auto" />
-            <div class="text-lg font-semibold text-gray-800 pt-4 py-3 text-center">{{ dis.title }}</div>
-            <div class="text-sm text-contentMain text-justify leading-7">{{ dis.detail }}</div>
+            <div class="text-lg font-semibold text-headerMain pt-4 py-3 text-center">{{ dis.title }}</div>
+            <div class="text-sm text-contentMain text-justify leading-6">{{ dis.detail }}</div>
           </div>
         </div>
       </div>
@@ -21,13 +21,13 @@
         <svg-icon :iconClass="props.url" width="1124" height="589" class=" mx-auto" />
       </div>
       <div class="advantages bg-secondaryBlue pb-20 pt-11">
-        <div class="text-3xl text-headerMain font-semibold text-center pb-10">方案价值</div>
-        <div class="grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-5">
+        <div :class="myStyle.mainHeader">方案价值</div>
+        <div class="grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-5 pt-10">
           <div class v-for="i in plans" :key="i.id">
             <div
               class="bg-white border-l-4 border-blue-600 px-12 h-44 hover:shadow-homeCardShadow"
             >
-              <div class="pt-12 text-gray-800 text-lg font-semibold">{{ i.title }}</div>
+              <div class="pt-12 text-headerMain text-lg font-semibold">{{ i.title }}</div>
               <div class="text-sm text-contentMain text-justify pt-2">{{ i.detail }}</div>
             </div>
           </div>

src/components/systemCard.vue

 
 <template>
   <div :class="props.data.id % 2 == 0 ? ' bg-systemCardBg' : ' bg-white'" class="pt-10 pb-24">
-    <div class="wrappper flex w-bodySet mx-auto items-center" :class="style" ref="card">
-      <div data-aos="fade-up" data-aos-duration="500" data-aos-easing="ease-in-out-cubic">
-        <svg-icon v-if="props.data.url" :iconClass="props.data.url" width="787" height="583" />
+    <div class="wrappper flex w-bodySet px-48 mx-auto items-center justify-between" :class="style" ref="card" data-aos="fade-up" data-aos-duration="600" data-aos-easing="ease-in-out-cubic">
+      <div >
+        <svg-icon v-if="props.data.url" :iconClass="props.data.url" width="576px" height="464px" />
         <img v-else :src="getImgUrl(props.data.png!)" />
       </div>
 
@@ -12,7 +12,7 @@
       >
         <svg-icon :iconClass="props.data.icon" class="w-12 h-12 mb-1" />
         <div class="pt-2 text-headerMain text-2xl font-semibold">{{ props.data.title }}</div>
-        <div class="text-sm text-contentMain pt-4 text-justify" :class="props.isActive ? 'isActive' : ''">{{ props.data.detail }}</div>
+        <div class="text-sm text-contentMain pt-4 text-justify">{{ props.data.detail }}</div>
       </div>
     </div>
   </div>
@@ -49,12 +49,10 @@ const style = computed(() => {
 </script>
 
 <style scoped>
-.wrapper {
-  animation-delay: 2s;
-}
+
 /* 文字逐行进入效果 */
 .isActive {
-  animation: 3s cubic-bezier(0.43, 0.195, 0.02, 1) 0s forwards line_enter;
+  animation: 1s cubic-bezier(.455,.03,.515,.955) 0s forwards line_enter;
 }
 
 @keyframes line_enter {

src/context/provenance.ts

@@ -46,7 +46,7 @@ export const provennanceList = [
       {
         id: 31,
         product: '存证服务',
-        detail: '无需人工录入数据，通过SDK接口自动上链',
+        detail: '无需人工录入，通过SDK接口自动上链',
         icon: 'cunzhengfuwu',
         route: '/autoDeposits'
       }

src/views/Auto.vue

@@ -32,7 +32,7 @@
           <div
             class="bg-white border-l-4 border-blue-600 px-12 h-44 pb-2 hover:shadow-homeCardShadow"
           >
-            <div class="pt-12 text-gray-800 text-xl font-semibold">{{ i.title }}</div>
+            <div class="pt-12  text-headerMain text-xl font-semibold">{{ i.title }}</div>
             <div class="text-sm text-contentMain text-justify pt-2">{{ i.detail }}</div>
           </div>
         </div>
@@ -40,7 +40,7 @@
     </div>
     <div class="framework pb-32 w-bodySet px-28 mx-auto">
       <div class="text-3xl text-gray-800 font-semibold text-center py-12">接口架构</div>
-      <div class="bg-white flex flex-row mx-auto  p-8 pr-36 border justify-between">
+      <div class="bg-white flex flex-row mx-auto  p-8 pr-36 border justify-between items-center">
         <svg-icon iconClass="if" width="486" height="365" />
         <div
           class=" w-96 text-sm text-contentMain text-justify pt-1 "

src/views/CompanyProvenance.vue

@@ -36,6 +36,7 @@
       >
         <div
           class="flex items-center w-bodySet mx-auto justify-center pl-40 pr-32"
+          data-aos="fade-up" data-aos-duration="600" data-aos-easing="ease-in-out-cubic"
           :class="item.id % 2 == 0 ? ' flex-row-reverse' : ' flex-row'"
         >
           <div :class="item.id % 2 == 0 ? ' pl-28' : ' pr-28'">
@@ -43,7 +44,7 @@
           </div>
           <div class="w-1/3">
             <div class="pt-2 text-headerMain text-2xl font-semibold">{{ item.title }}</div>
-            <div class="text-base text-gray-500 pt-4 text-justify">{{ item.detail }}</div>
+            <div class="text-sm text-contentMain pt-4 text-justify">{{ item.detail }}</div>
           </div>
         </div>
       </div>

src/views/DigitalAssets.vue

@@ -24,12 +24,13 @@
       >
         <div
           class="flex w-bodySet mx-auto justify-between px-40"
+          data-aos="fade-up" data-aos-duration="600" data-aos-easing="ease-in-out-cubic"
           :class="item.id % 2 == 0 ? ' flex-row-reverse' : ' flex-row'"
         >
           <svg-icon :iconClass="item.icon" width="552px" height="436px" />
           <div class="w-1/2 px-20 pt-28">
             <div class="text-3xl text-headerMain font-semibold">{{ item.title }}</div>
-            <div class="text-sm text-gray-500 pt-8 text-justify">{{ item.detail }}</div>
+            <div class="text-sm  text-contentMain pt-8 text-justify">{{ item.detail }}</div>
           </div>
         </div>
       </div>

src/views/HelpCenter.vue

@@ -46,7 +46,7 @@
       <div class="text-2xl font-medium text-gray-800">{{ state.firstArticle.title }}</div>
       <div class="pt-2 text-gray-500">{{ state.firstArticle.introduction }}</div>
       <div class="pt-8 border-b border-gray-300"></div>
-      <div class="pt-7 text-sm text-gray-600 leading-9" v-html="state.firstArticle.content"></div>
+      <div class="pt-7 text-sm text-gray-600 leading-6" v-html="state.firstArticle.content"></div>
     </div>
   </div>
 </template>

src/views/Home.vue

 <template>
-  <div class="bg-white md:min-w-bodySet mx-auto">
+  <div class="bg-white md:min-w-bodySet mx-auto home">
     <div class="banner bg-gradient-to-r from-white to-bannerBgEndColor pb-8">
       <div class="w-bodySet mx-auto pt-14">
         <div class="w-11/12 mx-auto relative">
@@ -16,7 +16,6 @@
             >基于区块链技术的存证溯源服务系统，面向企业和政府部门提供支持数据上链、流程化办公、任务协同、资产数字化的高级版存证溯源服务。</div>
             <div class="flex flex-row mt-6">
               <!-- <MainButton size="large" text="立即体验" /> -->
-              <div></div>
               <MainButton
                 size="large"
                 text="预约演示"
@@ -29,9 +28,9 @@
       </div>
     </div>
     <div ref="wrapper">
-      <div class="bar bg-mainBlue text-white text-sm py-3 px-36">
-        <div class=" w-bodySet mx-auto">
-          <div class="flex flex-row justify-center w-11/12 mx-auto">
+      <div class="bar bg-mainBlue text-white text-sm py-3">
+        <div class="w-bodySet mx-auto">
+          <div class="flex flex-row justify-center px-12">
             <div class="flex flex-row items-center border-r border-borderGray w-1/3 justify-center">
               <svg-icon iconClass="document" class="w-9 h-9 pr-3" />
               <span>
@@ -41,14 +40,14 @@
             </div>
             <div class="flex flex-row items-center border-r border-borderGray w-1/3 justify-center">
               <svg-icon iconClass="suyuan" class="w-9 h-9 pr-3" />
-              <span >
+              <span>
                 数字通证
                 <span class="pr-2"></span>追溯源头
               </span>
             </div>
             <div class="flex flex-row items-center w-1/3 justify-center">
               <svg-icon iconClass="data" class="w-9 h-9 pr-3" />
-              <span >
+              <span>
                 数据验真
                 <span class="pr-2"></span>真实可靠
               </span>
@@ -149,7 +148,6 @@
         </div>
       </div>
     </div>
-    <img :src="getSvgUrl('system1')" />
     <el-dialog v-model="dialogFormVisible" width="30rem" destroy-on-close>
       <div class="text-center text-xl font-semibold text-gray-800">免费定制需求</div>
       <el-form ref="form" :model="state.form" label-width="120px" :rules="rules">
@@ -197,12 +195,6 @@ const getImgUrl = computed(() => {
   }
 })
 
-const getSvgUrl = computed(() => {
-  return (url: string) => {
-    return require(`@/icons/svg/${url}.svg`)
-  }
-})
-
 
 /* handle tab switch */
 enum NAV_EVENT {
@@ -439,5 +431,18 @@ window.addEventListener("scroll", handleScroll);
   background: #409eff;
   color: white;
 }
+
+
+.home /deep/.el-dialog {
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  margin: auto;
+  height: 40.6rem;
+  position: absolute;
+}
 </style>
 
+
+

src/views/Mail.vue

@@ -52,7 +52,7 @@
         >
           <div class="w-1/3 bg-white px-8 py-14">
             <div class="text-xl text-headerMain font-semibold">{{ item.title }}</div>
-            <div class="text-sm text-gray-500 pt-5 text-justify">{{ item.detail }}</div>
+            <div class="text-sm text-contentMain pt-4 text-justify">{{ item.detail }}</div>
           </div>
           <div class="flex justify-end">
             <img :src="getImgUrl(item.png)" class="w-1/2" />

src/views/PersonalProvenance.vue

@@ -31,7 +31,7 @@
       <div class="grid grid-cols-2 grid-rows-3 gap-y-6 gap-x-5 w-bodySet mx-auto px-28">
         <div class v-for="i in interfaceList" :key="i.id">
           <div class="bg-white border-l-4 border-blue-600 px-12 h-44 hover:shadow-homeCardShadow">
-            <div class="pt-12 text-gray-800 text-lg font-semibold">{{ i.title }}</div>
+            <div class="pt-12  text-headerMain text-lg font-semibold">{{ i.title }}</div>
             <div class="text-sm text-contentMain text-justify pt-2">{{ i.detail }}</div>
           </div>
         </div>

tailwind.config.js

@@ -24,7 +24,7 @@ module.exports = {
       current: 'currentColor',
       mainBlue: '#2E2DFF',
       footerBg: '#1E2454',
-      footerSecondFont:'#7177A8',
+      footerSecondFont:'#8A92CF',
       footerBorder: '#313A7E',
       bannerBgStartColor:'#F2F6FF',
       bannerBgEndColor:'#E1E9FE',
@@ -292,8 +292,8 @@ module.exports = {
       ],
     },
     fontSize: {
-      xs: ['0.75rem', { lineHeight: '1rem' }],
-      sm: ['0.875rem', { lineHeight: '1.25rem' }],
+      xs: ['0.75rem', { lineHeight: '1.5rem' }],
+      sm: ['0.875rem', { lineHeight: '1.5rem' }],
       base: ['1rem', { lineHeight: '1.5rem' }],
       lg: ['1.125rem', { lineHeight: '1.75rem' }],
       xl: ['1.25rem', { lineHeight: '1.75rem' }],