【別貪心】static_vue_ele_blog

這個是作者大大寫的一個自適應的博客網站，我們可以看下是怎麼實現的
先放下作者大大的github地址：https://github.com/youyougu-me/static_vue_ele_blog
接下來我們一起來欣賞項目哇

//main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router/index";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "./icons";
import vueSmoothScroll from 'vue-smooth-scroll'
Vue.use(vueSmoothScroll)
Vue.use(ElementUI);
Vue.config.productionTip = false;
new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

main.js中引用了一個讓頁面可以很絲滑的vue-smooth-scroll組件

接下來我們來看app.vue

//app.vue
<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>
<script>
export default {
  name: "App",
  provide() {
    //父組件中通過provide來提供變量，在子組件中通過inject來注入變量。
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      isRouterAlive: true //控制視圖是否顯示的變量
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false; //先關閉，
      this.$nextTick(function() {
        this.isRouterAlive = true; //再打開
      });
    }
  },
  mounted() {}
};
</script>


<style lang="scss">
#app {
  width: 100%;
}
</style>

app.vue中也很神奇，使用

  provide() {
    //父組件中通過provide來提供變量，在子組件中通過inject來注入變量。
    return {
      reload: this.reload
    };
  },

這個是想實現點擊當前刷新路由，可用。
接下來我們來看router.js

import Vue from "vue";
import VueRouter from "vue-router";
import Layout from '@/views/Layout'

Vue.use(VueRouter);
//默認路由
export const defaultRoutes = [
  {
    path: "/",
    redirect: "/console",
  },
  {
    path: "/console",
    name: "Console",
    redirect: "index",
    meta: {
      name: "控制檯",
      icon: 'console'
    },
    component: Layout,
    children: [
      {
        path: "/index",
        name: "Index",
        meta: {
          name: "首頁"
        },
        component: () => import("../views/Console/index.vue")
      }
    ]

  },
  //爲防止報錯,匹配的*號404應該放在動態路由的最後
  {
    path: "*",
    redirect: '/',
    hidden: true,
  }
]

// 解決ElementUI導航欄中的vue-router在3.0版本以上重複點菜單報錯問題
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
const router = new VueRouter({
  routes: defaultRoutes
});

export default router;

這個router.js那裏其實也是有一個小細節在的，我就是因爲沒有留意到，然後看下面的代碼就有些迷失了。
跟我一起看這個細節，layout.vue組件吧.

<template>
  <div>
    <!-- 普通定位,高度爲視口大小 -->
    <LayoutHeader />
    <!-- 普通定位,左浮動,固定寬度,設置左margin -->
    <LayoutMain />
    <!-- <div id="blog_ex" class="hehehe" @click="toWowo">wowow喔喔</div> -->
    <!-- 剛開始是relative,之後fixed -->
    <LayoutNav />
    <!-- 普通定位,左浮動,固定寬度,設置左margin -->
    <Foot />
  </div>
</template>

<script>
import LayoutHeader from "./Components/Header";
import LayoutMain from "./Components/Main";
import LayoutNav from "./Components/Nav";
import Foot from "./Components/foot";
export default {
  data() {
    return {};
  },
  methods: {
    toWowo() {
      let anchorElement = document.getElementById("blog_ex");
      if (anchorElement) {
        anchorElement.scrollIntoView();
      }
    }
  },
  created() {},
  mounted() {},
  components: {
    LayoutHeader,
    LayoutMain,
    LayoutNav,
    Foot
  }
};
</script>
<style lang="scss" scoped>
.hehehe {
  height: 2000px;
  float: left;
  margin-left: 320px;
  width: calc(100% - 320px);
  padding-left: 30px;
  padding-top: 40px;
  position: relative;
  box-sizing: border-box;
  background-color: darkcyan;
}
</style>

複習一個小知識點
Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。

//Header.vue
<template>
  <div id="home">
    <!-- 全屏背景,大父級,相對定位 -->
    <div class="bgc">
      <!-- 控制上下滑動浮動圖標 -->
      <transition>
        <!-- div與icon一樣大小 -->
        <div v-show="showFlag" class="icon_div">
          <a href="#blog_main" v-smooth-scroll style="width:100px;height:100px;display:block;">
            <svg-icon iconClass="pull" class="pull"></svg-icon>
          </a>
        </div>
      </transition>
      <!-- 斜標籤 -->
      <div class="fork-me">
        <a class="fork-me-link">
          <span class="fork-me-text">No pain, no gain</span>
        </a>
      </div>
      <!-- 頭像及名字 -->
      <div class="avatar_box">
        <img src="../../../assets/images/avatar.png" alt class="avatar" />
        <div class="name">我背景離鄉了好多年</div>
        <div class="typer">
          <Typer></Typer>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { move } from "@/utils/toolFunc.js";
import Typer from "@c/Typer";
export default {
  data() {
    return {
      //下拉浮動標誌的顯示控制
      showFlag: true
    };
  },
  methods: {
    //點擊事件 實現點擊浮動下拉圖標,平滑滑動到主頁開頭部分(也是側邊欄的頭)
    moveToHome() {
      //目標元素距離頁面頂部的距離,在這裏是恆定值
      let total = document.getElementById("blog_main").offsetTop;
      move(total);
    }
  },
  created() {
    //定時器
    const timer = setInterval(() => {
      this.showFlag = !this.showFlag;
    }, 1000);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
  },
  mounted() {},
  components: {
    Typer
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/fork.scss";
#home {
  width: 100%;
  overflow: hidden;
  .bgc {
    // position: absolute;
    // top: 0;
    // left: 0;
    // width: 100%;
    // height: 100%;
    // z-index: -1;
    //======================
    width: 100%;
    height: 100vh;
    position: relative;
    //======================
    background: #50616d url(../../../assets/images/background.jpg) no-repeat 50%
      scroll;
    background-size: cover;
  }
  //浮動圖標
  .icon_div {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100px;
    z-index: 1;
    width: 100px;
    height: 100px;
    // background-color: red;
    text-align: center;
    line-height: 100px;
  }
  //頭像及名字
  .avatar_box {
    // background-color: #ccc;
    width: 300px;
    height: 500px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 25%;
    .avatar {
      width: 100px;
      margin: 0 auto;
      border-radius: 50%;
      opacity: 0.8;
    }
    .name {
      text-align: center;
      margin: 20px auto;
      color: #fff;
      font-size: 20px;
      opacity: 0.8;
    }
    .typer {
      // text-align: center;
      margin-left: 28px;
    }
  }
}
//======================動畫
.v-enter,
.v-leave-to {
  opacity: 1;
  // transform: translateY(5px) !important;
  bottom: 80px !important;
}
.v-leave-active {
  transition: all 1s ease;
}

.v-enter-active {
  transition: all 1s ease;
}
</style>

光標的動畫效果爲

//Typer.vue
<template>
  <div class="typer">
    <div class="typer-content">
      <p class="typer-static">&nbsp;</p>
      <!-- 動態變化的內容-->
      <p class="typer-dynamic">
        <span class="cut">
          <span class="word" v-for="(letter,index) in words" :key="index">{{letter}}</span>
        </span>
        <!-- 模擬光標-->
        <span class="typer-cursor"></span>
      </p>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      words: [], //字母數組push，pop的載體
      str: "那一年,我決定背井離鄉", //str初始化
      letters: [], //str分解後的字母數組
      order: 1 //表示當前是第幾句話
    };
  },
  watch: {
    //監聽order值的變化，改變str的內容
    order(old, newV) {
      //   if (this.order % 4 == 1) {
      //     this.str = "那一天";
      //   } else if (this.order % 4 == 2) {
      //     this.str = "我背井離鄉";
      //   } else if (this.order % 4 == 3) {
      //     this.str = "鄉里人再也沒喝上一口水";
      //   } else {
      //     this.str = "coding the web...";
      //   }
      // }
      if (this.order == 1) {
        this.str = "那一年,我決定背井離鄉";
      } else if (this.order % 2 == 1) {
        this.str = "那一年,我決定背井離鄉";
      } else {
        this.str = "鄉里人再也沒喝上一口水";
      }
    }
  },
  mounted() {
    //頁面初次加載後調用begin()開始動畫
    this.begin();
  },
  methods: {
    //開始輸入的效果動畫
    begin() {
      this.letters = this.str.split("");
      for (var i = 0; i < this.letters.length; i++) {
        setTimeout(this.write(i), i * 200);
      }
    },
    //開始刪除的效果動畫
    back() {
      let L = this.letters.length;
      for (var i = 0; i < L; i++) {
        setTimeout(this.wipe(i), i * 100);
      }
    },
    //輸入字母
    write(i) {
      return () => {
        let L = this.letters.length;
        this.words.push(this.letters[i]);
        let that = this;
        /*如果輸入完畢，在2s後開始刪除*/
        if (i == L - 1) {
          setTimeout(function() {
            that.back();
          }, 2000);
        }
      };
    },
    //擦掉(刪除)字母
    wipe(i) {
      return () => {
        this.words.pop(this.letters[i]);
        /*如果刪除完畢，在300ms後開始輸入*/
        if (this.words.length == 0) {
          this.order++;
          let that = this;
          setTimeout(function() {
            that.begin();
          }, 300);
        }
      };
    }
  }
};
</script>


<style scoped lang="scss">
.typer {
  margin-top: 2%;
  box-sizing: border-box;
}
.typer .typer-content {
  // font-weight: bold;
  font-size: 18px;
  display: flex;
  flex-direction: row;
  letter-spacing: 2px;
}
.typer-dynamic {
  position: relative;
}
.cut {
  color: #fff;
}
.typer-cursor {
  position: absolute;
  height: 100%;
  width: 3px;
  top: 0;
  right: -10px;
  background-color: #e84d49;
  animation: flash 1.5s linear infinite;
}
</style>

Main.vue

//Main.vue
<template>
  <div id="blog_main">
    <!-- 移動端抽屜控制圖標 -->
    <div
      :class="['draw_flagico',drawerFlag==true?'drawer_open':'drawer_close',fixedFlag==true?'haha':'']"
      @click="controlDrawer"
      ref="drawFlagico"
    >
      <svg-icon
        :iconClass="drawerFlag==true?'rightarrow':'list'"
        :class="drawerFlag==true?'rightarrow':'list'"
      />
    </div>
    <!-- 移動端抽屜 -->
    <el-drawer
      :visible.sync="drawerFlag"
      direction="ltr"
      :before-close="drawerHandleClose"
      :with-header="false"
      :wrapperClosable="true"
      :show-close="true"
      :size="'256px'"
    >
      <MyMenu @controlDrawer="controlDrawer"></MyMenu>
    </el-drawer>

    <!-- 可變內容 -->
    <div style="width:100%">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import MyMenu from "./MyMenu";
export default {
  data() {
    return {
      drawerFlag: false,
      //頁面滑出距離
      toTopDistance: "",
      //整屏幕距離
      fullHeight: document.documentElement.clientHeight,
      fixedFlag: false
    };
  },
  methods: {
    drawerHandleClose(done) {
      done();
    },
    //控制抽屜
    controlDrawer() {
      this.drawerFlag = !this.drawerFlag;
    },
    //獲取頁面滑出距離
    funx() {
      if (document.documentElement.scrollTop != undefined) {
        this.toTopDistance = document.documentElement.scrollTop;
        return;
      }
      if (document.body.scrollTop != undefined) {
        this.toTopDistance = document.body.scrollTop;
        return;
      }
      if (window.pageYOffset != undefined) {
        this.toTopDistance = window.pageYOffset;
        return;
      }
    }
  },
  mounted() {
    // this.$refs.drawFlagico.style.top = this.fullHeight + "px";
    const that = this;
    //頁面一旦改變便會執行
    //但是刷新不會執行
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        that.fullHeight = window.fullHeight;
      })();
    };

    //監聽滾動
    window.addEventListener("scroll", () => {
      this.funx();
      if (this.toTopDistance > this.fullHeight) {
        this.fixedFlag = true;
      } else {
        this.fixedFlag = false;
      }
    });
  },
  watch: {
    //優化獲取屏幕高度的值
    fullHeight(val) {
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          that.timer = false;
        }, 400);
      }
    }
  },
  components: {
    MyMenu
  }
};
</script>

<style lang="scss" scoped>
#blog_main {
  // height: 2000px;
  float: left;
  margin-left: 320px;
  width: calc(100% - 320px);
  padding-left: 30px;
  padding-top: 40px;
  padding-right: 30px;
  position: relative;
  box-sizing: border-box;

  // 小屏幕所見圖標
  .draw_flagico {
    z-index: 9999;
    position: absolute;
    width: 35px;
    height: 35px;
    border: 1px solid #409eff;
    text-align: center;
    line-height: 43px;
    border-radius: 50%;
    display: none;
    left: 15px;
    top: 6px;
    background-color: #fff;
    &:hover {
      border: 2px solid #409eff;
    }
    &.haha {
      position: fixed !important;
      top: 6px !important;
    }
  }

  .el-drawer {
    //小屏幕下圖標可見,只有圖標纔可以打開抽屜、
    //不用設置大屏幕圖標不可見
    //系統自帶必須關閉抽屜才能操作
    // display: none !important;
  }

  //根據flag控制圖標橫向距離
  .drawer_open {
    left: 270px;
  }
  .drawer_close {
    left: 15px;
  }
}

//媒體查詢
@media screen and (max-width: $--screen-sm-min) {
  //小屏幕
  #blog_main {
    margin-left: 0px;
    width: 100%;
    //去掉左邊距
    padding: 0 5px;
    // 控制抽屜圖標可見
    .draw_flagico {
      display: block;
    }
    //抽屜可見
  }
}
</style>

//MyMenu.vue
<template>
  <div id="my_menu">
    <!-- 頭像名字 -->
    <div class="info">
      <img src="@/assets/images/avatar.png" alt class="avatar" />
      <div class="name">我背井離鄉了好多年</div>
    </div>
    <!-- 菜單 -->
    <el-menu
      :default-active="defaultActive"
      background-color="#fff"
      text-color="#2d2d2d"
      active-text-color="#f17c67"
      style="width:100%;position:absolute;"
    >
      <!-- key不能寫在template這裏 -->
      <template v-for="(item,index) in menus">
        <el-submenu :key="item.id" :index="index+''" v-if="item.children.length!==0">
          <!-- 一級菜單 -->
          <template slot="title">
            <!-- <i class="el-icon-location"></i> -->
            <!-- 那邊item裏沒有icon的,這邊也不會報錯 -->
            <!-- <svg-icon :iconClass="iconsObj[item.id]" :className="iconsObj[item.id]" /> -->
            <span slot="title" style="padding-left:10px;">{{item.authName}}</span>
          </template>
          <!-- 子集菜單 -->
          <!-- index就是路徑,組件內定的 -->
          <template v-for="subItem in item.children">
            <el-menu-item :key="subItem.id" :index="'/'+subItem.path">
              <a :href="'#'+subItem.meta.id">{{subItem.authName}}</a>
            </el-menu-item>
          </template>
        </el-submenu>

        <el-menu-item :key="item.id" :index="'/'+item.path" v-else class="noChildItem">
          <a
            :href="'#'+item.meta.id"
            v-smooth-scroll
            style="width:100%;height:100%;display:block;"
            @click="controlDrawer"
          >
            <svg-icon :iconClass="item.path" :className="item.path" />
            {{item.authName}}
          </a>
        </el-menu-item>
      </template>
    </el-menu>
    <!-- 尾部 -->
    <div class="footer">
      <!-- 社交 -->
      <Social />
      <!-- 版權 -->
      <Copyrights />
    </div>
  </div>
</template>

<script>
import Social from "./footer/Social";
import Copyrights from "./footer/Copyrights";
export default {
  data() {
    return {
      menus: [
        {
          id: 1,
          authName: "首頁",
          path: "home",
          children: [],
          meta: {
            id: "home"
          }
        },
        {
          id: 2,
          authName: "關於",
          path: "about",
          children: [
            // {
            //   id: 111,
            //   authName: "概況",
            //   path: "about",
            //   children: []
            // }
          ],
          meta: {
            id: "about"
          }
        },
        {
          id: 3,
          authName: "經歷",
          path: "works",
          children: [],
          meta: {
            id: "works"
          }
        },
        {
          id: 4,
          authName: "作品",
          path: "blog",
          children: [],
          meta: {
            id: "blog"
          }
        }
      ]
    };
  },
  methods: {
    //點擊菜單時關閉抽屜
    controlDrawer() {
      this.$emit("controlDrawer");
    }
  },
  created() {},
  mounted() {},
  computed: {
    defaultActive: function() {
      const route = this.$route;
      return route.path;
    }
  },
  components: {
    Social,
    Copyrights
  }
};
</script>
<style lang="scss" scoped>
#my_menu {
  position: absolute;
  height: 100%;
  width: 100%;
  //菜單
  .el-menu {
    // height: 100%;
    border-right: solid 0 #e6e6e6;
    .noChildItem {
      padding-left: 40px !important;
      border-bottom: 1px solid #ccc;
      width: 80%;
      margin: 0 auto;
    }
  }
  //信息
  .info {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
    .avatar {
      width: 100px;
      border-radius: 50%;
      margin: 50px auto 10px;
    }
    .name {
      font-size: 16px;
    }
  }
  //尾部
  .footer {
    width: 100%;
    position: absolute;
    bottom: 20px;
    left: 0;
  }
}
</style>

//foot.uve
<template>
  <div id="foot">
    <!-- 如果是響應式就不要把高度寫死,這個type也不能是flex -->
    <el-row>
      <el-col :xs="24" :sm="8">
        <Copyrights />
      </el-col>
      <el-col :xs="24" :sm="8">
        <img src="../../../assets/images/avatar.png" alt class="avatar" />
      </el-col>
      <el-col :xs="24" :sm="8">
        <Social />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Social from "./footer/Social";
import Copyrights from "./footer/Copyrights";
export default {
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {},
  components: {
    Social,
    Copyrights
  }
};
</script>
<style lang="scss" scoped>
#foot {
  float: left;
  margin-left: 320px;
  width: calc(100% - 320px);
  position: relative;
  box-sizing: border-box;
  background-color: #eee;
  .avatar {
    width: 50px;
    margin: auto auto;
    border-radius: 50%;
    opacity: 0.8;
  }
}

//媒體查詢
@media screen and (max-width: $--screen-sm-min) {
  //小屏幕
  #foot {
    margin-left: 0px;
    width: 100%;
    //去掉左邊距
    padding: 10px 5px;
    .avatar{
        margin: 20px auto;
    }
  }
}

  //大屏幕
  @media screen and (min-width: $--screen-sm-min) {
    #foot {
      height: 100px;
      line-height: 100px;
      .avatar {
        margin-top: 25px;
      }
    }
  }
</style>

//Social.vue
<!-- 社交 -->

<template>
  <div id="social">
    <a href="https://github.com/youyougu-me" target="_blank">
      <svg-icon iconClass="github" class="github" />
    </a>
    <!-- <a href>
      <svg-icon iconClass="weixin" class="weixin" />
    </a>-->
    <el-popover placement="top-start" title="微信" width="100" trigger="hover">
      <img src="@/assets/images/weixin.jpg" alt style="width:100%;" />
      <a href slot="reference">
        <svg-icon iconClass="weixin" class="weixin" />
      </a>
    </el-popover>
    <a href="https://www.jianshu.com/u/24f7fd7b8b2d" target="_blank">
      <svg-icon iconClass="jian" class="jian" />
    </a>
  </div>
</template>


<script>
export default {};
</script>

<style scoped lang="scss">
#social {
  text-align: center;
  .img {
    width: 20px !important;
  }
  a {
    margin-left: 10px;
  }
}
</style>

我們回過去再看main.vue
會發現在main.vue中有一個router-view，這個可以來渲染我們的對應的路由的頁面
接下來我們來看index.vue

//index.vue

<template>
  <div id="consoleContainer">
    <MaodianAbout />
    <div style="height:80px;"></div>
    <MaodianWorks />
    <div style="height:80px;"></div>
    <MaodianBlog />
  </div>
</template>

<script>
import MaodianAbout from "./maodian/About";
import MaodianWorks from "./maodian/Works";
import MaodianBlog from "./maodian/Blog";
export default {
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {},
  components: {
    MaodianAbout,
    MaodianWorks,
    MaodianBlog
  }
};
</script>
<style lang="scss" scoped>
#consoleContainer {
}
</style>

//About.vue
<template>
  <div id="about">
    <bigTitle :configText="configText"></bigTitle>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="8">
        <img class="img" src="@/assets/images/about.png" alt />
      </el-col>
      <el-col :xs="24" :sm="16">
        <div class="text_container">
          <div class="tag">
            <el-tag>lovecode</el-tag>
            <el-tag type="success">cook</el-tag>
            <el-tag type="info">sports</el-tag>
            <el-tag type="warning">harder</el-tag>
            <el-tag type="danger">optimism</el-tag>
          </div>
          <div class="info">
            <div style="background-color:#ecf5ff;padding:5px 0;">我是一個正宗的重慶崽兒,家住永川,現已24歲,積極謀生中~</div>
            <div
              style="background-color:#f0f9eb;padding:5px 0;"
            >性格呢?有時內向,有時外向,說話一般簡單直接,比較好相處,做事認真負責~</div>
            <div
              style="background-color:#f4f4f5;padding:5px 0;"
            >平時喜歡看看電影,打打羽毛球,對炒菜也比較熱愛,但尚未習得一手好廚藝,正在努力中~</div>
            <div
              style="background-color:#fdf6ec;padding:5px 0;"
            >畢業於重慶理工大(本科),本非計算機科班出身,但對代碼有熱情,於一年前投身與猿類大軍~</div>
            <div style="background-color:#fef0f0;padding:5px 0;">很喜歡的一句話 no pain,no gain~</div>
          </div>
          <div class="social">
            <el-row>
              <el-col :xs="24" :sm="12">
                <span>簡書:</span>
                <a
                  href="https://www.jianshu.com/u/24f7fd7b8b2d/"
                  target="_blank"
                >https://www.jianshu.com/u/24f7fd7b8b2d</a>
              </el-col>
              <el-col :xs="24" :sm="12">
                <span>github:</span>
                <a href="https://github.com/youyougu-me" target="_blank">github.com/youyougu-me</a>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import bigTitle from "@/components/ModuleHeader";
export default {
  data() {
    return {
      configText: {
        sm: "INFORMATION",
        bg: "ABOUT ME"
      }
    };
  },
  methods: {},
  created() {},
  mounted() {},
  components: {
    bigTitle
  }
};
</script>
<style lang="scss" scoped>
#about {
  .img {
    width: 100%;
    margin-bottom: 20px;
  }
  .text_container {
    .info {
      margin-top: 20px;
      div {
        color: $textColor;
        margin-top: 5px;
        letter-spacing: 1px;
        font-size: 14px;
        box-sizing: border-box;
      }
    }
    .social {
      margin-top: 20px;
      span {
        font-weight: bold;
        color: $textColor;
        margin-right: 5px;
        display: inline-block;
        margin-top: 10px;
      }
      a {
        text-decoration: underline;
        display: inline-block;
        margin-top: 10px;
      }
    }
  }

  //媒體查詢
  @media screen and (max-width: $--screen-sm-min) {
    //小屏幕
    // .info {
    // 這個我把它寫到了總的裏面去
    //   padding: 0 5px;
    // }
  }
}
</style>

//Works.vue
<template>
  <div id="works">
    <bigTitle :configText="configText"></bigTitle>
    <!-- 經歷時間線 -->
    <el-timeline>
      <el-timeline-item placement="top" color="#f17c67">
        <el-card>
          <template slot="header">
            <h1 class="title">重慶吉垚物業有限公司</h1>
            <span v-if="true" class="sub-title">2019.07——2020.06</span>
          </template>
          <p
            class="content"
          >吉垚是一家創業型公司,它也是將我引向互聯網的燈塔.我是以實習生的身份步入公司.在那裏有一羣志同道合的夥伴,我們一起學習,相互扶持,合作開發了公司官網和物業後臺管理系統.不僅技術得到了提升,也磨鍊了自己的克服困難的意志,更收穫了友誼.</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item placement="top" color="#f17c67">
        <el-card>
          <template slot="header">
            <h1 class="title">重慶長安汽車股份有限公司</h1>
            <span v-if="true" class="sub-title">2018.07——2019.06</span>
          </template>
          <p
            class="content"
          >畢業季,國企是我'理想'的企業.憑着自己可觀的考試成績和一些榮譽證書,我面試通過順利進入了長安,在那裏我負責的崗位是衝壓車間設備管理.初入社會,只求一份工作,而未對自己的職業進行認真的思考.很感謝長安給我一年時間,讓我明確自己的職業方向,決定投身於猿類大軍.</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item placement="top" color="#f17c67">
        <el-card>
          <template slot="header">
            <h1 class="title">重慶理工大學</h1>
            <span v-if="true" class="sub-title">2014.09——2018.06</span>
          </template>
          <p
            class="content"
          >
          大學,回憶滿滿的一段時光,可能也是我人生中最悠閒最放鬆一段時光.在這裏自己的眼界得到了提升,校園裏豐富多彩的活動也使得自己的生活不再單調.
          </p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import bigTitle from "@/components/ModuleHeader";
export default {
  data() {
    return {
      configText: {
        sm: "EXPERIENCE",
        bg: "MY EXPERIENCE"
      }
    };
  },
  methods: {},
  created() {},
  mounted() {},
  components: {
    bigTitle
  }
};
</script>
<style lang="scss" scoped>
#works {
  .el-card {
    .title {
      font-size: 16px;
    }

    .sub-title {
      font-size: 8px;
      margin-top: 5px;
      display: block;
    }
    .content {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
  }

  //媒體查詢
  //小屏幕
  @media screen and (max-width: $--screen-sm-min) {
  }
}
</style>

//blog.vue
<template>
  <div id="blog">
    <bigTitle :configText="configText"></bigTitle>
    <div class="myworks">
      <div class="workitem" v-for="(item,index) in content" :key="index">
        <h1 class="title">{{item.p0}}</h1>
        <div class="content">
          <div>{{item.p1}}</div>
          <div>{{item.p2}}</div>
          <div>
            作品鏈接:
            <a :href="item.p3">{{item.p3}}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bigTitle from "@/components/ModuleHeader";
import {content} from "./conten";
export default {
  data() {
    return {
      configText: {
        sm: "PROJECTS",
        bg: "MY works"
      },
      content: content
    };
  },
  methods: {},
  created() {},
  mounted() {},
  components: {
    bigTitle
  }
};
</script>
<style lang="scss" scoped>
#blog {
  // height: 1000px;
  margin-bottom:100px;
  .myworks {
    .workitem {
      margin-top: 30px;
      .title {
        background-color: rgba(241, 124, 103, 0.3);
        padding: 10px 0;
        padding-left: 20px;
        font-weight: bold;
      }
      .content {
        margin-top: 10px;
        div {
          color: $textColor;
          margin-top: 5px;
          letter-spacing: 1px;
          font-size: 14px;
          box-sizing: border-box;
          border-bottom: 1px solid #ccc;
          line-height: 1.3;
          a {
            color: rosybrown;
          }
        }
      }
    }
  }

  //媒體查詢
  @media screen and (max-width: $--screen-sm-min) {
    //小屏幕
  }
}
</style>

//ModuleHeader.vue
<!-- 每個內容模塊的title -->

<template>
  <div id="heading">
    <el-row class="color-title">
      <el-col :span="24">
        <span>{{configText.sm}}</span>
      </el-col>
    </el-row>
    <el-row class="color-content">
      <el-col :span="24">
        <h2>{{configText.bg}}</h2>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    configText: {
      default: () => {
        return {};
      }
    }
  }
};
</script>

<style scoped lang="scss">
#heading {
  border-left: 6px solid #e3872d;
  padding: 0.5em 0 0 1.5em;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 30px;
  width: 100%;
  box-sizing: border-box;

  span {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 5px;
  }

  h2 {
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
  }
}
</style>