From 2886d8ee7872f6709b53a4bd84f95ffe0a26eafb Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期一, 18 八月 2025 15:45:57 +0800
Subject: [PATCH] 头部&脚部公共区域
---
src/assets/main.css | 180 +++++++++++++++++++-
src/views/home/index.vue | 1
src/assets/base.css | 125 ++++---------
src/layout/components/headerPage.vue | 23 ++
src/layout/components/footerPage.vue | 197 ++++++++++++++++++++-
src/router/index.js | 2
6 files changed, 425 insertions(+), 103 deletions(-)
diff --git a/src/assets/base.css b/src/assets/base.css
index 8816868..b64e9ba 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,86 +1,49 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
- --vt-c-white: #ffffff;
- --vt-c-white-soft: #f8f8f8;
- --vt-c-white-mute: #f2f2f2;
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
- --vt-c-black: #181818;
- --vt-c-black-soft: #222222;
- --vt-c-black-mute: #282828;
-
- --vt-c-indigo: #2c3e50;
-
- --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
- --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
- --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
- --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
- --vt-c-text-light-1: var(--vt-c-indigo);
- --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
- --vt-c-text-dark-1: var(--vt-c-white);
- --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
}
-
-/* semantic color variables for this project */
-:root {
- --color-background: var(--vt-c-white);
- --color-background-soft: var(--vt-c-white-soft);
- --color-background-mute: var(--vt-c-white-mute);
-
- --color-border: var(--vt-c-divider-light-2);
- --color-border-hover: var(--vt-c-divider-light-1);
-
- --color-heading: var(--vt-c-text-light-1);
- --color-text: var(--vt-c-text-light-1);
-
- --section-gap: 160px;
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --color-background: var(--vt-c-black);
- --color-background-soft: var(--vt-c-black-soft);
- --color-background-mute: var(--vt-c-black-mute);
-
- --color-border: var(--vt-c-divider-dark-2);
- --color-border-hover: var(--vt-c-divider-dark-1);
-
- --color-heading: var(--vt-c-text-dark-1);
- --color-text: var(--vt-c-text-dark-2);
- }
-}
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
- margin: 0;
- font-weight: normal;
-}
-
body {
- min-height: 100vh;
- color: var(--color-text);
- background: var(--color-background);
- transition:
- color 0.5s,
- background-color 0.5s;
- line-height: 1.6;
- font-family:
- Inter,
- -apple-system,
- BlinkMacSystemFont,
- 'Segoe UI',
- Roboto,
- Oxygen,
- Ubuntu,
- Cantarell,
- 'Fira Sans',
- 'Droid Sans',
- 'Helvetica Neue',
- sans-serif;
- font-size: 15px;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ line-height: 1;
+ font-size: 14px;
}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
\ No newline at end of file
diff --git a/src/assets/main.css b/src/assets/main.css
index 480a2ae..4dffbeb 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,15 +1,177 @@
@import './base.css';
-#app {
- width: 100%;
-
+/* 灞呬腑甯冨眬 */
+.contentBox{
+ width: 1200px;
+ margin: 0 auto;
}
-a,
-.green {
- text-decoration: none;
- color: hsla(160, 100%, 37%, 1);
- transition: 0.4s;
- padding: 3px;
+/* 鑷�傚簲鍥剧墖 */
+.autoImg {
+ width: auto;
+ height: auto;
+ max-width: 100%;
+ max-height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
}
+.bannerImg {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+}
+
+/* 鍏嶈垂 */
+.freePrice {
+ color: #0bc266 !important;
+}
+
+.titleBox {
+ height: 60px;
+ background: #d8f7e6;
+ line-height: 60px;
+ padding: 0 40px;
+ font-weight: 700;
+ color: #00873c;
+ font-size: 18px;
+}
+
+/* 瀵屾枃鏈鍣紝淇濈暀瀵屾枃鏈粯璁ゆ牱寮忥紝鎵�瑙佸嵆鎵�寰� */
+.richTextBox {
+ line-height: 1.4;
+}
+
+.richTextBox p {
+ display: block;
+ margin-block-start: 1em;
+ margin-block-end: 1em;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
+}
+
+.richTextBox table[border]:not([border="0"]):not([style*=border-style]) td, .richTextBox table[border]:not([border="0"]):not([style*=border-style]) th {
+ border-style: solid;
+}
+
+.richTextBox table[border]:not([border="0"]):not([style*=border-width]) td, .richTextBox table[border]:not([border="0"]):not([style*=border-width]) th {
+ border-width: 1px;
+}
+.richTextBox table:not([cellpadding]) td, .richTextBox table:not([cellpadding]) th {
+ padding: 0.4rem;
+}
+
+/* 鍗曡鐪佺暐 */
+.ellipsis {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+/* flex甯冨眬 */
+.flex {
+ display: flex;
+}
+
+.flex1 {
+ flex: 1;
+ overflow: hidden;
+}
+
+/* 涓婁紶鍥剧墖 */
+.avatar-uploader .el-upload {
+ width: 190px;
+ height: 140px;
+ border: 1px dashed #d9d9d9;
+ position: relative;
+}
+
+.avatar-uploader .el-upload:hover {
+ border-color: #409eff;
+}
+
+.avatarCover {
+ display: block;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ max-width: 100%;
+ max-height: 100%;
+ margin: auto;
+}
+
+/* 鍐呯疆鐘舵�佸瓧浣撻鑹� */
+.primaryTxt {
+ color: #00873C !important;
+}
+.successTxt {
+ color: #67c23a !important;
+}
+.warningTxt {
+ color: #e6a23c !important;
+}
+.errorTxt {
+ color: #f56c6c !important;
+}
+.infoTxt {
+ color: #999 !important;
+}
+/* 鍐呯疆鐘舵�佽儗鏅鑹� */
+.primaryBack {
+ color: #fff !important;
+ background: #00873C !important;
+}
+.successBack {
+ color: #fff !important;
+ background: #67c23a !important;
+}
+.warningBack {
+ color: #fff !important;
+ background: #e6a23c !important;
+}
+.errorBack {
+ color: #fff !important;
+ background: #f56c6c !important;
+}
+
+/* 涓婚鑹蹭慨鏀�,鏍规嵁UI妗嗘灦鍐冲畾鏄惁闇�瑕� */
+/* .el-button--primary {
+ background-color: #00873C !important;
+ border-color: #00873C !important;
+}
+
+.el-button--primary:focus,
+.el-button--primary:hover {
+ background: #086833 !important;
+ border-color: #086833 !important;
+ color: #fff !important;
+}
+
+.el-tabs__item.is-active {
+ color: #00873C !important;
+} */
+
+.el-input-group__append, .el-input-group__prepend {
+ vertical-align: initial !important;
+}
+.el-checkbox__inner{
+ border: 1px solid #000 !important;
+ width: 20px !important;
+ height: 20px !important;
+}
+
+.el-checkbox__inner::after {
+ left: 7px !important;
+ top: 4px !important;
+}
\ No newline at end of file
diff --git a/src/layout/components/footerPage.vue b/src/layout/components/footerPage.vue
index 15aaa44..184da08 100644
--- a/src/layout/components/footerPage.vue
+++ b/src/layout/components/footerPage.vue
@@ -1,16 +1,193 @@
<template>
- <div class="footerBox">FOOT</div>
+ <div class="pageFooter">
+ <div class="footerContent contentBox flex">
+ <div class="infoBox flex1">
+ <ul class="linkBox">
+ <li class="link" @click="toAboutus(index)" v-for="(item, index) in linkList" :key="index">
+ {{ item.name }}
+ </li>
+ </ul>
+ <ul class="linkBox">
+ <li class="link" @click="toAboutus(index)" v-for="(item, index) in newList" :key="index">
+ {{ item.name }}
+ </li>
+ </ul>
+ <ul class="linkBox">
+ <li
+ class="link"
+ @click="toAboutus(index)"
+ v-for="(item, index) in serviceList"
+ :key="index"
+ >
+ {{ item.name }}
+ </li>
+ </ul>
+ <ul class="linkBox">
+ <li class="link" @click="toAboutus(index)">澶╃尗鏃楄埌搴�</li>
+ <li class="link" style="opacity: 1; font-size: 20px" @click="toAboutus(index)">
+ 浜笢鏃楄埌搴�
+ </li>
+ </ul>
+ </div>
+ <div class="QRCodeBox">
+ <div class="codeItem">
+ <img src="@/assets/images/pageFooter/wechatCode.png" />
+ </div>
+ <div class="codeItem">
+ <img src="@/assets/images/pageFooter/weiboCode.png" />
+ </div>
+ </div>
+ </div>
+ <div class="copyrightBox">
+ <span
+ >涓浗鍗忓拰鍖荤澶у鍑虹増绀炬湁闄愬叕鍙� 涓� 澶囨搴忓彿锛�<span class="beian" @click="toLink"
+ >浜琁CP澶� 05029104鍙�-4浜掕仈缃戝嚭鐗堣鍙瘉 鏂板嚭缃戣瘉 锛堜含 锛�</span
+ >
+ 涓� 澧炲�肩數淇′笟鍔＄粡钀ヨ鍙瘉锛氫含B2-20224426</span
+ >
+ <span style="display: block">Copyright漏2013 涓浗鍗忓拰鍖荤澶у鍑虹増绀炬湁闄愬叕鍙� 鐗堟潈鎵�鏈�!</span>
+ </div>
+ </div>
</template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { reactive } from 'vue'
-<style scoped>
-.footerBox {
- width: 100%;
- height: 240px;
- min-width: 1200px;
- color: #fff;
- background-color: #f0f0f0;
- text-align: center;
+const toAboutus = () => {}
+
+const linkList = reactive([
+ {
+ name: '鍏充簬鎴戜滑',
+ url: '',
+ },
+ {
+ name: '鍏充簬鎴戜滑',
+ url: '',
+ },
+ {
+ name: '鑱旂郴鎴戜滑',
+ url: '',
+ },
+ {
+ name: '鎰忚鍙嶉',
+ url: '',
+ },
+])
+const newList = reactive([
+ {
+ name: '鏂版墜涓婅矾',
+ url: '',
+ },
+ {
+ name: '鎿嶄綔鎸囧崡',
+ url: '',
+ },
+ {
+ name: '鏁欏笀璁よ瘉',
+ url: '',
+ },
+])
+const serviceList = reactive([
+ {
+ name: '鍙嬫儏閾炬帴',
+ url: '',
+ },
+ {
+ name: '鍥藉绉戝鎶�鏈儴',
+ url: '',
+ },
+ {
+ name: '鍥藉鍗敓鍋ュ悍濮�',
+ url: '',
+ },
+ {
+ name: '鍥藉鏁欒偛閮�',
+ url: '',
+ },
+ {
+ name: '鍖椾含甯傚崼鍋ュ',
+ url: '',
+ },
+])
+</script>
+
+<style lang="less" scoped>
+.pageFooter {
+ background: #444444;
+ background-image: url('@/assets/images/xiehe/home/footer-bg.png');
+ .footerContent {
+ padding: 30px 0;
+ .infoBox {
+ display: flex;
+ .linkBox {
+ font-size: 16px;
+ margin-left: 50px;
+ .link {
+ padding-right: 15px;
+ cursor: pointer;
+ color: #fff;
+ margin-top: 20px;
+ opacity: 0.7;
+ &::after {
+ margin-left: 15px;
+ }
+ &:last-child::after {
+ display: none;
+ }
+ &:first-child {
+ color: #fff;
+ opacity: 1;
+ font-size: 20px;
+ margin-bottom: 10px;
+ }
+ }
+ }
+ .address {
+ margin-top: 30px;
+ font-size: 14px;
+ color: #ccc;
+ span {
+ margin-right: 30px;
+ }
+ }
+ .logo {
+ height: 50px;
+ margin-top: 30px;
+ img {
+ height: 100%;
+ }
+ }
+ }
+ .QRCodeBox {
+ .codeItem {
+ display: inline-block;
+ text-align: center;
+ margin-left: 40px;
+ p {
+ font-size: 16px;
+ }
+ img {
+ width: 100px;
+ height: 100px;
+ margin-top: 20px;
+ }
+ }
+ }
+ }
+ .copyrightBox {
+ text-align: center;
+ color: #fff;
+
+ height: 80px;
+ line-height: 40px;
+ font-size: 12px;
+ border-top: 1px solid #e6e6e6;
+ .beian {
+ cursor: pointer;
+ }
+ .beian:hover {
+ color: blue;
+ }
+ }
}
</style>
diff --git a/src/layout/components/headerPage.vue b/src/layout/components/headerPage.vue
index c1664cb..d435d21 100644
--- a/src/layout/components/headerPage.vue
+++ b/src/layout/components/headerPage.vue
@@ -15,7 +15,7 @@
</div>
<div class="searchBox" v-show="!hideSerch">
<el-input
- style="width: 500px"
+ style="width: 500px; height: 50px"
placeholder="璇疯緭鍏ュ唴瀹�"
@change="gotoSearch"
v-model="searchKey"
@@ -83,7 +83,7 @@
<script setup lang="ts">
import { ref } from 'vue'
-
+import { Search } from '@element-plus/icons-vue'
const props = defineProps({
hideSerch: {
type: Boolean,
@@ -97,9 +97,28 @@
let searchKey = ref('')
let userInfo = ref('')
+const navData = ref([
+ {
+ name: '棣栭〉',
+ path: '/home',
+ },
+ {
+ name: '鏁欒偛鍑虹増',
+ path: '/bookStore',
+ },
+ {
+ name: '璇昏�呮湇鍔�',
+ path: '/teachingServices',
+ },
+ {
+ name: '鍏充簬鎴戜滑',
+ path: '/aboutUs',
+ },
+])
const gotoSearch = () => {}
const handleCommand = () => {}
+const gotoPage = () => {}
</script>
<style lang="less" scoped>
diff --git a/src/router/index.js b/src/router/index.js
index 9b039b4..9132c1e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,7 +11,7 @@
redirect: { name: 'home' },
children: [
{
- path: '/',
+ path: '/home',
name: 'home',
component: HomeView,
},
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 69936ea..4221005 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -16,6 +16,7 @@
<style lang="less" scoped>
.homePage {
min-width: 1220px;
+ min-height: calc(100vh - 61.8%);
background-color: #fff;
}
.el-carousel__item h3 {
--
Gitblit v1.9.1