From 834ccef6ea76a2a3e399b1feb79048daaa2f4398 Mon Sep 17 00:00:00 2001
From: xvv <cccccc420590@163.com>
Date: Mon, 29 Jul 2024 11:08:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E8=A1=A5=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/permission.js                    |   2 +-
 ruoyi-ui/src/router/index.js                  |   1 -
 ruoyi-ui/src/views/home.vue                   | 158 ++++++------
 .../officialWebsite/Components/footer.vue     | 231 ++++++++++++++++++
 .../officialWebsite/Components/header.vue     | 127 ++++++++++
 5 files changed, 443 insertions(+), 76 deletions(-)
 create mode 100644 ruoyi-ui/src/views/officialWebsite/Components/footer.vue
 create mode 100644 ruoyi-ui/src/views/officialWebsite/Components/header.vue

diff --git a/ruoyi-ui/src/permission.js b/ruoyi-ui/src/permission.js
index 80abd72..8dccd36 100644
--- a/ruoyi-ui/src/permission.js
+++ b/ruoyi-ui/src/permission.js
@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register', '/gw', '/sb','/about','/platform','/teaching','/team','/committee','/competition',  ]
+const whiteList = ['/login', '/register', '/gw', '/sb','/about','/platform','/teaching','/team','/committee','/competition','/contact'  ]
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index 14170da..0364eac 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -101,7 +101,6 @@ export const constantRoutes = [
     component: () => import('@/views/officialWebsite/contact'),
     hidden: true
   },
-
   {
     path: '/practice', // 实践平台
     component: () => import('@/views/officialWebsite/practice'),
diff --git a/ruoyi-ui/src/views/home.vue b/ruoyi-ui/src/views/home.vue
index 7d2c3bb..4b35df2 100644
--- a/ruoyi-ui/src/views/home.vue
+++ b/ruoyi-ui/src/views/home.vue
@@ -1,34 +1,35 @@
 <template>
   <div class="container">
     <div class="top-box">
-      <div class="tab-box">
-        <!-- left -->
-        <div class="d-s">
-          <div class="logo-box">
-            <img :src="baseInfo.webImg" />
-          </div>
-          <div class="logo-size">
-            {{ this.baseInfo.webName }}
-          </div>
-        </div>
-        <!-- tab -->
-        <div class="d-s">
-          <div class="x-x" v-for="(item, index) in tablist " :key="index">
-            {{ item.label }}
-          </div>
-        </div>
-        <!-- right -->
-        <div class="d-s" style="font-size: 20px; color: #fff;cursor: pointer;width: 170px;">
-          <i class="el-icon-search" v-if="show_search"></i>
-          <div style="font-size: 18px;  margin-left: 15px; " v-if="show_search" @click="show_search = !show_search">搜索
-          </div>
-          <el-input placeholder="输入关键词" v-model="input4" style="width: 150px;height: 35px" v-if="!show_search">
-            <i slot="prefix" class="el-input__icon el-icon-search"></i>
-          </el-input>
-          <i class="el-icon-circle-close" v-if="!show_search" style="margin-left: 10px;"
-             @click="show_search = true"></i>
-        </div>
-      </div>
+      <headers></headers>
+<!--      <div class="tab-box">-->
+<!--        &lt;!&ndash; left &ndash;&gt;-->
+<!--        <div class="d-s">-->
+<!--          <div class="logo-box">-->
+<!--            <img :src="baseInfo.webImg" />-->
+<!--          </div>-->
+<!--          <div class="logo-size">-->
+<!--            {{ this.baseInfo.webName }}-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        &lt;!&ndash; tab &ndash;&gt;-->
+<!--        <div class="d-s">-->
+<!--          <div class="x-x" v-for="(item, index) in tablist " :key="index" @click="tabClick(item)" >-->
+<!--            {{ item.label }}-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        &lt;!&ndash; right &ndash;&gt;-->
+<!--        <div class="d-s" style="font-size: 20px; color: #fff;cursor: pointer;width: 170px;">-->
+<!--          <i class="el-icon-search" v-if="show_search"></i>-->
+<!--          <div style="font-size: 18px;  margin-left: 15px; " v-if="show_search" @click="show_search = !show_search">搜索-->
+<!--          </div>-->
+<!--          <el-input placeholder="输入关键词" v-model="input4" style="width: 150px;height: 35px" v-if="!show_search">-->
+<!--            <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
+<!--          </el-input>-->
+<!--          <i class="el-icon-circle-close" v-if="!show_search" style="margin-left: 10px;"-->
+<!--             @click="show_search = true"></i>-->
+<!--        </div>-->
+<!--      </div>-->
       <div style="overflow: hidden;position: relative;" class="mySwiper">
         <swiper ref="mySwiper" :options="swiperOptions" style="width: 100%">
           <swiper-slide v-for="(item,index) in bannerlist" :key="index">
@@ -161,60 +162,61 @@
         <img src="../assets/gw/anniu.png" style=" width: 156px;height: 42px">
       </div>
     </div>
-    <div class="index-footer">
-      <div class="footer">
-        <div class="logo">
-          <div class="d-s">
-            <div class="logo-box">
-              <img :src="baseInfo.webImg" />
-            </div>
-            <div class="logo-size">
-              {{this.baseInfo.webName}}
-            </div>
-          </div>
-          <div class="footer-contact">
-            <div class="p">
+    <footers></footers>
+<!--    <div class="index-footer">-->
+<!--      <div class="footer">-->
+<!--        <div class="logo">-->
+<!--          <div class="d-s">-->
+<!--            <div class="logo-box">-->
+<!--              <img :src="baseInfo.webImg" />-->
+<!--            </div>-->
+<!--            <div class="logo-size">-->
+<!--              {{this.baseInfo.webName}}-->
+<!--            </div>-->
+<!--          </div>-->
+<!--          <div class="footer-contact">-->
+<!--            <div class="p">-->
 
-              <img src="../assets/gw/tel.png" alt="">
-              <div class="pp">电话：{{this.baseInfo.contactNumber}}</div>
+<!--              <img src="../assets/gw/tel.png" alt="">-->
+<!--              <div class="pp">电话：{{this.baseInfo.contactNumber}}</div>-->
 
-            </div>
+<!--            </div>-->
 
-            <div class="p">
+<!--            <div class="p">-->
 
-              <img src="../assets/gw/email.png" alt="">
-              <div class="pp">邮箱：{{this.baseInfo.contactEmail}}</div>
+<!--              <img src="../assets/gw/email.png" alt="">-->
+<!--              <div class="pp">邮箱：{{this.baseInfo.contactEmail}}</div>-->
 
-            </div>
-            <div class="p">
+<!--            </div>-->
+<!--            <div class="p">-->
 
-              <img src="../assets/gw/address.png" alt="">
-              <div class="pp">地址：{{ this.baseInfo.address }}</div>
+<!--              <img src="../assets/gw/address.png" alt="">-->
+<!--              <div class="pp">地址：{{ this.baseInfo.address }}</div>-->
 
-            </div>
+<!--            </div>-->
 
 
-          </div>
-        </div>
-        <div class="footer-nav">
-          <div class="footer-nav-item" v-for="item in itemsWithoutFirst">
-            <div class="tt">{{ item.label }}</div>
-            <a href="" v-for="childrenItem in item.children">{{ childrenItem.label }}</a>
-          </div>
-        </div>
-        <div class="web_icp">
-          <div class="left">
-            <a href="">版权所有：{{ this.baseInfo.copyrightInfo }}</a>
-            <a href="">备案信息：{{ this.baseInfo.recordInfo }}</a>
-          </div>
-          <div class="right">
-            <div class="">返回顶部</div>
-            <img src="../assets/gw/top.png" alt="">
-          </div>
-        </div>
-      </div>
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="footer-nav">-->
+<!--          <div class="footer-nav-item" v-for="item in itemsWithoutFirst">-->
+<!--            <div class="tt">{{ item.label }}</div>-->
+<!--            <a href="" v-for="childrenItem in item.children">{{ childrenItem.label }}</a>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="web_icp">-->
+<!--          <div class="left">-->
+<!--            <a href="">版权所有：{{ this.baseInfo.copyrightInfo }}</a>-->
+<!--            <a href="">备案信息：{{ this.baseInfo.recordInfo }}</a>-->
+<!--          </div>-->
+<!--          <div class="right">-->
+<!--            <div class="">返回顶部</div>-->
+<!--            <img src="../assets/gw/top.png" alt="">-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
 
-    </div>
+<!--    </div>-->
   </div>
 </template>
 
@@ -222,11 +224,14 @@
 import {Swiper, SwiperSlide} from "vue-awesome-swiper";
 import "swiper/css/swiper.min.css";
 import {getTab, getbanner, getBaseInfo} from "@/api/gw/home";
-
+import headers from '@/views/officialWebsite/Components/header.vue'
+import footers from '@/views/officialWebsite/Components/footer.vue'
 export default {
   components: {
     Swiper,
     SwiperSlide,
+    headers,
+    footers
   },
   name: 'HelloWorld',
   props: {
@@ -353,6 +358,11 @@ export default {
   },
 
   methods: {
+    tabClick(item){
+      if(item.label=="联系我们"){
+        this.$router.push('/contact');
+      }
+    },
     /** 顶部tab列表 */
     tabLsit() {
       getTab().then(response => {
@@ -454,7 +464,7 @@ export default {
 }
 
 .x-x {
-  margin-right: 20px;
+  margin-right: 10px;
   cursor: pointer;
 }
 
diff --git a/ruoyi-ui/src/views/officialWebsite/Components/footer.vue b/ruoyi-ui/src/views/officialWebsite/Components/footer.vue
new file mode 100644
index 0000000..3517349
--- /dev/null
+++ b/ruoyi-ui/src/views/officialWebsite/Components/footer.vue
@@ -0,0 +1,231 @@
+
+<template>
+  <div class="index-footer">
+    <div class="footer">
+      <div class="logo">
+        <div class="d-s">
+          <div class="logo-box">
+            <img :src="baseInfo.webImg" />
+          </div>
+          <div class="logo-size">
+            {{this.baseInfo.webName}}
+          </div>
+        </div>
+        <div class="footer-contact">
+          <div class="p">
+
+            <img src="../../../assets/gw/tel.png" alt="">
+            <div class="pp">电话：{{this.baseInfo.contactNumber}}</div>
+
+          </div>
+
+          <div class="p">
+
+            <img src="../../../assets/gw/email.png" alt="">
+            <div class="pp">邮箱：{{this.baseInfo.contactEmail}}</div>
+
+          </div>
+          <div class="p">
+
+            <img src="../../../assets/gw/address.png" alt="">
+            <div class="pp">地址：{{ this.baseInfo.address }}</div>
+
+          </div>
+
+
+        </div>
+      </div>
+      <div class="footer-nav">
+        <div class="footer-nav-item" v-for="item in itemsWithoutFirst">
+          <div class="tt">{{ item.label }}</div>
+          <a href="" v-for="childrenItem in item.children">{{ childrenItem.label }}</a>
+        </div>
+      </div>
+      <div class="web_icp">
+        <div class="left">
+          <a href="">版权所有：{{ this.baseInfo.copyrightInfo }}</a>
+          <a href="">备案信息：{{ this.baseInfo.recordInfo }}</a>
+        </div>
+        <div class="right">
+          <div class="">返回顶部</div>
+          <img src="../../../assets/gw/top.png" alt="">
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+import {  getBaseInfo, } from '@/api/gw/home'
+
+export default {
+  data() {
+    return {
+      baseInfo:"",
+    }
+  },
+  mounted() {
+    this.getWebBaseInfo()
+  },
+  methods:{
+    getWebBaseInfo() {
+      getBaseInfo().then(res => {
+        this.baseInfo = res.data
+        this.baseInfo.webImg = process.env.VUE_APP_BASE_API + this.baseInfo.webImg
+      })
+    }
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.index-footer {
+  background: #383838;
+  padding-top: 30px;
+}
+
+.index-footer .footer {
+  width: 80%;
+  margin: 0 auto;
+}
+
+.index-footer .footer .logo {
+  display: flex;
+  justify-content: space-between;
+  /* align-items: center; */
+}
+
+.index-footer .footer .logo .footer-contact {
+}
+
+.index-footer .footer .logo .footer-contact .p {
+  display: inline-block;
+  display: flex;
+  float: left;
+  margin-left: 50px;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 16px;
+  /* justify-content: flex-end; */
+}
+
+.index-footer .footer .logo .footer-contact .p img {
+  margin-right: 10px;
+}
+
+.index-footer .footer .logo .footer-contact .p:nth-child(3) {
+  width: 100%;
+  clear: both;
+  margin-top: 20px;
+}
+
+.index-footer .footer .footer-nav {
+  display: flex;
+  margin-top: 20px;
+  padding-top: 30px;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .footer-nav .footer-nav-item {
+  width: 9%;
+  margin-right: 1%;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item:last-child {
+  margin-right: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt {
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+  position: relative;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt::after {
+  content: "";
+  width: 20px;
+  height: 2px;
+  background: #005375;
+  border-radius: 0px 0px 0px 0px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  display: block;
+  margin-bottom: 15px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a:last-child {
+  margin-bottom: 0;
+}
+
+.index-footer .footer .web_icp {
+  display: flex;
+  margin-top: 50px;
+  height: 80px;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .web_icp a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  margin-right: 30px;
+}
+
+.index-footer .footer .web_icp .right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end
+}
+
+.index-footer .footer .web_icp .right div {
+  margin-right: 25px;
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+
+}
+.logo-box {
+  width: 50px;
+  height: 50px;
+  background: #fff;
+}
+.logo-box img{
+  width: 50px;
+  height: 50px;
+}
+
+.logo-size {
+  font-weight: 800;
+  font-size: 24px;
+  color: #FFFFFF;
+  margin-left: 20px;
+
+}
+.d-s {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/ruoyi-ui/src/views/officialWebsite/Components/header.vue b/ruoyi-ui/src/views/officialWebsite/Components/header.vue
new file mode 100644
index 0000000..6f4a69a
--- /dev/null
+++ b/ruoyi-ui/src/views/officialWebsite/Components/header.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="tab-box">
+    <!-- left -->
+    <div class="d-s">
+      <div class="logo-box">
+        <img :src="baseInfo.webImg" />
+      </div>
+      <div class="logo-size">
+        {{ this.baseInfo.webName }}
+      </div>
+    </div>
+    <!-- tab -->
+    <div class="d-s">
+      <div class="x-x" v-for="(item, index) in tablist " :key="index" @click="tabClick(item)" >
+        {{ item.label }}
+      </div>
+    </div>
+    <!-- right -->
+    <div class="d-s" style="font-size: 20px; color: #fff;cursor: pointer;width: 170px;justify-content: flex-end">
+      <i class="el-icon-search" v-if="show_search"></i>
+      <div style="font-size: 18px;  margin-left: 15px; " v-if="show_search" @click="show_search = !show_search">搜索
+      </div>
+      <el-input placeholder="输入关键词" v-model="input" style="width: 150px;height: 35px" v-if="!show_search">
+        <i slot="prefix" class="el-input__icon el-icon-search"></i>
+      </el-input>
+      <i class="el-icon-circle-close" v-if="!show_search" style="margin-left: 10px;"
+         @click="show_search = true"></i>
+    </div>
+  </div>
+</template>
+<script>
+import { getbanner, getBaseInfo, getTab } from '@/api/gw/home'
+
+export default {
+  data() {
+    return {
+      baseInfo:"",
+      input:'',
+      show_search: true,
+      tablist: [
+        {name: '首页'},
+        {name: '中心概括'},
+        {name: '教学资源'},
+        {name: '教学平台'},
+        {name: '教学团队'},
+        {name: '专业委员会'},
+        {name: '教学研讨活动'},
+        {name: '虚仿专业频道'},
+        {name: '大赛风采'},
+        {name: '实践平台'},
+        {name: '合作企业'},
+        {name: '联系我们'},
+      ],
+    }
+  },
+  mounted() {
+    // 页面加载完毕调用
+    this.tabLsit();
+    this.getWebBaseInfo()
+  },
+  methods:{
+    tabClick(item){
+      if(item){
+        this.$router.push(item.jumpUrl);
+      }
+    },
+    tabLsit() {
+      getTab().then(response => {
+        if (response.code == 200) {
+          this.tablist = response.data;
+          this.categoryQuery.categoryId = this.tablist[0].id
+
+        }
+      })
+    },
+    getWebBaseInfo() {
+      getBaseInfo().then(res => {
+        this.baseInfo = res.data
+        this.baseInfo.webImg = process.env.VUE_APP_BASE_API + this.baseInfo.webImg
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.tab-box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20px 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);;
+  font-weight: bold;
+  font-size: 18px;
+  color: #FFFFFF;
+  position: absolute;
+  z-index: 3;
+
+}
+
+.d-s {
+  display: flex;
+  align-items: center;
+}
+.logo-box {
+  width: 50px;
+  height: 50px;
+  background: #fff;
+}
+.logo-box img{
+  width: 50px;
+  height: 50px;
+}
+
+.logo-size {
+  font-weight: 800;
+  font-size: 24px;
+  color: #FFFFFF;
+  margin-left: 20px;
+
+}
+.x-x {
+  margin-right: 10px;
+  cursor: pointer;
+}
+</style>