跟新

components.d.ts

@@ -8,6 +8,17 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElText: typeof import('element-plus/es')['ElText']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
     IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
     IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']

package-lock.json

@@ -29,6 +29,7 @@
         "eslint-plugin-vue": "^9.23.0",
         "npm-run-all2": "^6.1.2",
         "prettier": "^3.2.5",
+        "sass": "^1.77.3",
         "typescript": "~5.4.0",
         "unocss": "^0.60.3",
         "unplugin-auto-import": "^0.17.6",
@@ -3807,6 +3808,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4846,6 +4853,23 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/sass": {
+      "version": "1.77.3",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.77.3.tgz",
+      "integrity": "sha512-WJHo+jmFp0dwRuymPmIovuxHaBntcCyja5hCB0yYY9wWrViEp4kF5Cdai98P72v6FzroPuABqu+ddLMbQWmwzA==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/scule": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",

package.json

@@ -34,6 +34,7 @@
     "eslint-plugin-vue": "^9.23.0",
     "npm-run-all2": "^6.1.2",
     "prettier": "^3.2.5",
+    "sass": "^1.77.3",
     "typescript": "~5.4.0",
     "unocss": "^0.60.3",
     "unplugin-auto-import": "^0.17.6",

src/layout/component/FooterBlock.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts"></script>
 
-<template>12331223132</template>
+<template>dd</template>
 
 <style scoped></style>

src/layout/component/HeadBlock.vue

@@ -1,15 +1,187 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+// import type { TabsInstance } from 'element-plus'
+
+import { useRoute, useRouter } from 'vue-router'
+const input3 = ref('')
+const tabs = ref([
+  { title: '信用信息', placeholder: '请输入主体名称' },
+  { title: '统一社会信用代码', placeholder: '请输入统一社会信用代码' },
+  { title: '站内文章', placeholder: '请输入站内文章关键字' },
+]);
+
+const route: any = useRoute()
+const router: any = useRouter()
+
+
+const munTabs = ref([
+  { title: '首页', route:'home'},
+  { title: '信用动态', route:'creditDynamics' },
+  { title: '信用慧企', route:'creditWiseEnterprise' },
+  { title: '信用评价结果', route:'creditEcaluationResults' },
+  { title: '信用警示', route:'creditWarning' },
+  { title: '信用服务', route:'creditServices' },
+  { title: '通知公告', route:'about' },
+]);
+const activeTab = ref(0); // 默认激活第一个tab  
+const activeMun = ref(0); // 默认激活第一个tab  
+
+const placeholder = ref('请输入主体名称');
+// const tabPosition = ref<TabsInstance['tabPosition']>('left')
+const setActiveTab = (index: any, value: any) => {
+  activeTab.value = index;
+  placeholder.value = value.placeholder;
+  console.log(index, value);
+};
+const munActiveTab = (index: any,tab:any) => {
+  console.log(index, tab);
+  
+  activeMun.value = index;
+  router.push({
+      path: tab.route,
+      query: {}
+    });
+};
+
+
+</script>
 
 <template>
   <div class="headContainer w100vw">
-  
+    <!-- 标题部分登录跳转 -->
+    <div class="headTitle">
+      <text>欢迎来到怀化市高新区企业信用信息分级分类平台</text>
+      <div>
+        <el-button type="primary">登录</el-button>
+      </div>
+    </div>
+    <!-- 头部功能及其显示内容 -->
+    <div class="headModule">
+      <div>
+        <H1>怀化市高新区企业信用信息分级分类平台</H1>
+        <H3>www.aabbccd.com</H3>
+      </div>
+      <div class="headSearch">
+        <!-- 搜索上方tab切换选择 -->
+        <div class="headSTab">
+          <div v-for="(tab, index) in tabs" :key="index" class="tab" :class="{ active: activeTab === index }"
+            @click="setActiveTab(index, tab)">
+            {{ tab.title }}
+          </div>
+        </div>
+        <!-- 搜索框位置 -->
+        <div>
+          <el-input v-model="input3" style="width: 337px;height:33px" :placeholder=placeholder class="input-with-select">
+            <template #append>
+              <el-button :icon="Search" />
+            </template>
+          </el-input>
+        </div>
+      </div>
+    </div>
+    <div class="D" style="display:flex;justify-content:center">
+      <div style="width:100%;position: absolute;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    background:rgba(255,255,255,.22);
+    height:46px">
+        <div class="headMune">
+          <div v-for="(tab, index) in munTabs" :key="index" class="tab" :class="{ activeMun: activeMun === index }"
+            @click="munActiveTab(index,tab)">
+            {{ tab.title }}</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<style scoped>
-.headContainer{
+<style scoped lang="scss">
+$boxWidth: 1200px;
+
+.headContainer {
   background-image: url("../../assets/img/back.png");
-  background-size:  100% 100%;
+  background-size: 100% 100%;
   height: 238px;
+  position: relative;
+
+  .headTitle {
+    margin: 0 40px;
+    height: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    text {
+      font-weight: 400;
+      font-size: 13px;
+      color: #FFFFFF;
+    }
+  }
+
+  .headModule {
+    margin-top: 27px;
+    width: $boxWidth;
+    margin: 27px auto 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    H1 {
+      font-weight: bold;
+      font-size: 26px;
+      color: #FFFFFF;
+    }
+
+    H3 {
+      font-weight: bold;
+      font-size: 14px;
+      color: #FFFFFF;
+      margin: 16px 0 0 0;
+    }
+
+    .headSearch {
+
+      .headSTab {
+        display: flex;
+
+        .tab {
+          color: white;
+          padding: 6px 6px;
+          margin-bottom: 16px;
+          border-radius: 6px;
+        }
+
+        .active {
+          background-color: #FF9900;
+        }
+      }
+    }
+  }
+
+  .headMune {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    width: $boxWidth;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 46px;
+
+    .tab {
+      color: white;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .activeMun {
+      background-color: #FF9900;
+    }
+  }
 }
 </style>

src/layout/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import HeadBlock from '@/layout/component/HeadBlock.vue'
-import FooterBlock from '@/layout/component/FooterBlock.vue'
+// import FooterBlock from '@/layout/component/FooterBlock.vue'
 </script>
 
 <template>
@@ -8,7 +8,7 @@ import FooterBlock from '@/layout/component/FooterBlock.vue'
   <transition enter-active-class="animate__animated animate__fadeIn" mode="out-in">
     <RouterView />
   </transition>
-  <FooterBlock />
+  <!-- <FooterBlock /> -->
 </template>
 
 <style scoped></style>

src/router/route.ts

@@ -15,13 +15,47 @@ export const routes: RouteRecordRaw[] = [
         meta: {
           title: '首页'
         }
-      },
-      {
+      },{
+        path: '/creditDynamics',
+        name: 'creditDynamics',
+        component: () => import('@/views/creditDynamics/index.vue'),
+        meta: {
+          title: '信用动态'
+        }
+      },{
+        path: '/creditWiseEnterprise',
+        name: 'creditWiseEnterprise',
+        component: () => import('@/views/creditWiseEnterprise/index.vue'),
+        meta: {
+          title: '信用慧企'
+        }
+      },{
+        path: '/creditEcaluationResults',
+        name: 'creditEcaluationResults',
+        component: () => import('@/views/creditEcaluationResults/index.vue'),
+        meta: {
+          title: '信用评价结果'
+        }
+      },{
+        path: '/creditWarning',
+        name: 'creditWarning',
+        component: () => import('@/views/creditWarning.vue'),
+        meta: {
+          title: '信用警示'
+        }
+      },{
+        path: '/creditServices',
+        name: 'creditServices',
+        component: () => import('@/views/creditServices/index.vue'),
+        meta: {
+          title: '信用服务'
+        }
+      },{
         path: '/about',
         name: 'about',
-        component: () => import('@/views/AboutView.vue'),
+        component: () => import('@/views/about/index.vue'),
         meta: {
-          title: '首页'
+          title: '知公告'
         }
       }
     ]

src/views/AboutView.vue

@@ -1,3 +1,3 @@
-<template>about</template>
+<template>首页</template>
 
 <style></style>

src/views/HomeView/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts"></script>
 
-<template>12321312312312312321</template>
+<template>2</template>
 
 <style scoped></style>

src/views/about/index.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div>信用动态</div>
+</template>
+
+<style scoped></style>

src/views/creditDynamics/index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>2</template>
+
+<style scoped></style>

src/views/creditEcaluationResults/index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>2</template>
+
+<style scoped></style>

src/views/creditServices/index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>2</template>
+
+<style scoped></style>

src/views/creditWarning/index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>2</template>
+
+<style scoped></style>

src/views/creditWiseEnterprise/index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>2</template>
+
+<style scoped></style>