头部&脚部公共区域

杨磊

昨天 2886d8ee7872f6709b53a4bd84f95ffe0a26eafb

头部&脚部公共区域

 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;
}

 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;
}

 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"
          >京ICP备 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>

 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>

 src/router/index.js

@@ -11,7 +11,7 @@
      redirect: { name: 'home' },
      children: [
        {
          path: '/',
          path: '/home',
          name: 'home',
          component: HomeView,
        },

 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 {