修改官网样式

2021-01-06 09:55:09 +08:00 · 2021-01-06 09:55:09 +08:00 · e09f208a01
commit e09f208a01
parent b25ddc7df1
7 changed files with 61 additions and 106 deletions
--- a/src/layout/eFooter/eCustom.vue
+++ b/src/layout/eFooter/eCustom.vue
@ -13,7 +13,7 @@
        <ul class="col-md" v-for="(el, j) in it.children" :key="j">
          <li>
            <b-link v-if="el.href" :href="el.href">
-              <h6 style="color:#666">{{ el.name }}</h6>
+              <h6 style="color:#666;">{{ el.name }}</h6>
            </b-link>
            <b-img
              v-else-if="el.src"
--- a/src/router/index.js
+++ b/src/router/index.js
@ -17,14 +17,12 @@ const routes = [
    children: [
      {
        path: "/preview/pdf",
-        name: "PreviewPdf",
        hidden: true,
        component: () =>
          import(/* webpackChunkName: "pdf" */ "../views/PreviewPdf/index.vue")
      },
      {
        path: "/preview/image",
-        name: "PreviewImage",
        hidden: true,
        component: () =>
          import(
@ -33,49 +31,54 @@ const routes = [
      },
      {
        path: "/preview/player",
-        name: "PreviewPlayer",
        hidden: true,
        component: () =>
          import(
            /* webpackChunkName: "player" */ "../views/PreviewPlayer/index.vue"
          )
      },
+      {
+        path: "/honor",
+        hidden: true,
+        component: () =>
+          import(/* webpackChunkName: "honor" */ "../views/Honor/index.vue")
+      },
      {
        path: "/home",
-        name: "Home",
        meta: {
-          name: '首页'
+          name: "首页"
        },
        component: Home
      },
      {
-        path: "/honor",
-        name: "Honor",
+        path: "/exhibition",
        meta: {
-          name: '我们的产品'
+          name: "我们的产品"
        },
        component: () =>
-          import(/* webpackChunkName: "honor" */ "../views/Exhibition/index.vue")
+          import(
+            /* webpackChunkName: "honor" */ "../views/Exhibition/index.vue"
+          )
      },
      {
-        path: "/exhibition",
-        name: "Exhibition",
+        path: "/example",
        meta: {
-          name: '经典案例'
+          name: "经典案例"
        },
        children: [
          {
-            path: '/',
+            path: "/",
            redirect: "/preview/pdf?src=西安铁路职业技术学院.pdf",
            meta: {
-              name: "西安铁路职业技术学院",
+              name: "西安铁路职业技术学院"
            }
          },
          {
-            path: '/',
-            redirect: "/preview/pdf?src=贵州装备制造职业学院机电技术专业实训室建设.pdf",
+            path: "/",
+            redirect:
+              "/preview/pdf?src=贵州装备制造职业学院机电技术专业实训室建设.pdf",
            meta: {
-              name: "贵州装备制造职业学院",
+              name: "贵州装备制造职业学院"
            }
          }
        ],
@ -86,18 +89,16 @@ const routes = [
      },
      {
        path: "/about",
-        name: "About",
        meta: {
-          name: '关于玖琏'
+          name: "关于玖琏"
        },
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/About.vue")
      },
      {
        path: "/relation",
-        name: "Relation",
        meta: {
-          name: '联系我们'
+          name: "联系我们"
        },
        component: () =>
          import(/* webpackChunkName: "relation" */ "../views/Relation.vue")
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -2,7 +2,7 @@
  <div class="main">
    <div class="container">
      <article id="introduce">
-        <h6>公司简介</h6>
+        <b>公司简介</b>
        <p>
          北京玖琏科技有限公司成立于2017年1月3日，公司总部位于首都北京，在古都西安设有研发中心。公司致力服务于轨道交通行业、化学化工行业、电力电厂行业等，
          针对各个行业需求及痛点提供一体化培训解决方案。我公司自主研发的行业数字孪生云平台力求站在行业内城市轨道交通的最前沿，集云计算、真实系统逻辑及日常
@ -27,7 +27,7 @@
      </article>

      <article id="proxy">
-        <h6>招商及代理</h6>
+        <b>招商及代理</b>
        <p>
          为进一步加快行业职教互联网化进程，提高职业教育的教学水平，提升个人能力的共享实训平台，我公司长期面向社会寻求代理合作，
          代理商主要负责市场推广及商务交流、项目招投标等内容，详情咨询
@ -38,7 +38,7 @@

      <article id="join">
        <b-img style="width:100%;height:auto" :src="offer" />
-        <h6>加入玖琏</h6>
+        <b>加入玖琏</b>
        <p>
          你的加入可以给我们带来新的活力，我们同样也可以赠你无限的发展空间。世界那么大，你不来，谁知道你牛逼？多一份了解，多一份选择，
          选择不对努力白费，寻找合伙人寻找最优秀的你，欢迎将你的简历投递至
@ -105,13 +105,14 @@ export default {

    article {
      position: relative;
-      padding-bottom: 7em;
+      padding-bottom: 8em;
+      font-size: 1.6em;
      p {
        text-indent: 2em;
      }

      .image-box {
-        h6 {
+        b {
          position: absolute;
          top: 25%;
          left: 28%;
--- a/src/views/Home/main/eProduct.vue
+++ b/src/views/Home/main/eProduct.vue
@ -48,7 +48,7 @@ export default {
        {
          type: "green",
          src: product2,
-          href: "/honor",
+          href: "/exhibition",
          name: "轨道交通",
          describe:
            "轨道交通是指运营车辆需要在特定轨道上行驶的一类交通工具或运输系统。"
@ -56,7 +56,7 @@ export default {
        {
          type: "red",
          src: product1,
-          href: "/honor",
+          href: "/exhibition",
          name: "化学化工",
          describe:
            "化学工业（chemical industry）又称化学加工工业，泛指生产过程中化学方法占主要地位的过程工业。"
@ -64,7 +64,7 @@ export default {
        {
          type: "blue",
          src: product3,
-          href: "/honor",
+          href: "/exhibition",
          name: "电力电厂",
          describe:
            "电力电厂是指将某种形式的原始能转化为电能以供固定设施或运输用电的动力厂。"
--- a/src/views/Home/main/ePropaganda.vue
+++ b/src/views/Home/main/ePropaganda.vue
@ -68,17 +68,8 @@ export default {

 <style lang="scss" scoped>
 .main {
-  margin-left: auto;
-  margin-right: auto;
+  width: 100%;
  position: relative;
-  overflow: hidden;
  margin-bottom: 0.5em !important;
-  .content {
-    position: absolute;
-    display: inline-block;
-    vertical-align: middle;
-    bottom: 14em;
-    left: 36em;
-  }
 }
 </style>
--- a/src/views/Home/main/eRecommend.vue
+++ b/src/views/Home/main/eRecommend.vue
@ -9,9 +9,13 @@
          <h6 style="display:flex">精彩视频</h6>
        </template>
        <b-row>
-          <b-col v-for="(el, i) in videoList" :key="i" style="width:25em">
+          <b-col
+            v-for="(el, i) in videoList"
+            :key="i"
+            style="width:25em;display:flex;justify-content:center;align-items: center;"
+          >
            <iframe
-              style="position: relative;left: -1.3em;"
+              class="frame"
              :src="el.source"
              scrolling="no"
              border="0"
@ -111,7 +115,6 @@ export default {
      display: inline-block;
      margin: 0;
      float: none !important;
-      max-width: 80%;
      &::after {
        content: "";
        width: 100%;
@ -128,81 +131,40 @@ export default {
  .container {
    margin: auto;
  }
-
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap: 2em 2em;
-  }
 }

-.component {
-  width: 200px;
-  background: #ff0000;
-  font-size: 30px;
+.frame {
+  display: flex;
+  margin: 1em;
 }

@media (min-width: 320px) {
-  .component {
+  .frame {
+    width: 220px;
+  }
+}
+
+@media (min-width: 480px) {
+  .frame {
    width: 300px;
-    background: #00ffff;
-    font-size: 23px;
  }
 }

-@media (min-width: 375px) {
-  .component {
-    width: 360px;
-    background: #0000ff;
-    font-size: 26px;
+@media (min-width: 760px) {
+  .frame {
+    width: 560px;
  }
 }

-@media (min-width: 375px) and (min-resolution: 192dpi) {
-  .component {
-    background-image: url(/img/retina2x.png);
-    background: #6666ff;
-  }
-}
-
-@media (max-width: 480px) {
-  .component {
-    background: #00ff00;
-  }
-}
-
-@media (max-width: 767px) {
-  .component {
-    background: #00ff00;
-  }
-}
-
-@media (min-width: 768px) and (max-width: 979px) {
-  .component {
-    width: 600px;
-    background: #00ff00;
-    font-size: 30px;
-  }
-}
-
-@media (max-width: 979px) {
-  .component {
-    background: #00fff0;
-  }
-}
-
-@media (min-width: 980px) {
-  .component {
-    width: 900px;
-    background: #00ff00;
-    font-size: 35px;
+@media (min-width: 990px) {
+  .frame {
+    width: 1000px;
  }
 }

@media (min-width: 1200px) {
-  .component {
-    width: 1000px;
-    background: #00ff00;
+  .frame {
+    width: 1100px;
  }
 }
 </style>
--- a/src/views/Relation.vue
+++ b/src/views/Relation.vue
@ -2,10 +2,10 @@
  <div class="page">
    <div class="container">
      <address style="text-align:left;padding:3em">
-        <p><span v-html="`联系人：`" />许经理</p>
-        <p><span v-html="`手&ensp;&ensp;机：`" />13910989830</p>
-        <p><span v-html="`邮&ensp;&ensp;箱：`" />henry@joylink.club</p>
-        <p><span v-html="`微&ensp;&ensp;信：`" /></p>
+        <h6><span v-html="`联系人：`" />许经理</h6>
+        <h6><span v-html="`手&ensp;&ensp;机：`" />13910989830</h6>
+        <h6><span v-html="`邮&ensp;&ensp;箱：`" />henry@joylink.club</h6>
+        <h6><span v-html="`微&ensp;&ensp;信：`" /></h6>
        <div class="picture">
          <b-img class="image" :src="wxcode" />
        </div>