gengxin

src/layout/common/logo.vue

@@ -1,19 +0,0 @@
-<template>
-  <div id="logo">
-    <p>logo</p>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'logo',
-  props: {},
-  components: {},
-  data: () => ({}),
-  created() {},
-  computed: {},
-  methods: {},
-};
-</script>
-
-<style lang="less" scoped></style>

src/layout/common/newmenu.vue

@@ -0,0 +1,85 @@
+<template>
+  <div id="newmenu">
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+      <el-menu-item index="1">新闻动态</el-menu-item>
+      <el-menu-item index="2">成果展示</el-menu-item>
+      <el-menu-item index="3">计算服务</el-menu-item>
+      <el-menu-item index="4">交流活动</el-menu-item>
+      <el-menu-item index="5"><a href="https://www.ele.me" target="_blank">党建学院</a></el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'newmenu',
+  props: {},
+  components: {},
+  data: () => ({
+    activeIndex: '1',
+    activeIndex2: '1',
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSelect() {},
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.menu {
+  height: 70px;
+  overflow: hidden;
+}
+
+/deep/.el-menu--horizontal > .el-menu-item {
+  float: left;
+  height: 60px;
+  line-height: 60px;
+  margin: 0;
+  color: #909399;
+  width: 240.5px;
+  text-align: center;
+  float: left;
+  width: 238px;
+  text-align: center;
+  border-right: 2px solid #76bdfe;
+  font-size: 22px;
+  color: #fff;
+}
+
+/deep/.el-menu--horizontal > .el-menu-item:nth-child(5) {
+  float: left;
+  height: 60px;
+  line-height: 60px;
+  margin: 0;
+  color: #fff;
+  width: 240px;
+  text-align: center;
+  float: left;
+  width: 238px;
+  text-align: center;
+  border: none;
+  font-size: 22px;
+}
+
+/deep/.el-menu-item:hover {
+  background: #2152994f !important;
+
+  color: #fff !important;
+  border: none;
+  font-size: 22px !important;
+}
+
+/deep/.el-menu--horizontal > .el-menu-item.is-active {
+  background: #215299;
+  border: none;
+  color: #fff;
+}
+
+/deep/.el-menu.el-menu--horizontal {
+  border-bottom: none;
+  background: #2152994f;
+}
+</style>

src/layout/common/top.vue

@@ -0,0 +1,104 @@
+<template>
+  <div id="logo">
+    <el-col :span="24" class="top">
+      <div class="w_1200">
+        <span class="date"
+          >{{ date }}星期{{
+            week == 1 ? '一' : week == 2 ? '二' : week == 3 ? '三' : week == 4 ? '四' : week == 5 ? '五' : week == 6 ? '六' : week == 7 ? '日' : ''
+          }}</span
+        >
+      </div>
+    </el-col>
+    <el-col :span="24" class="logo">
+      <div class="w_1200">
+        <el-col :span="24" class="logotop">
+          <el-col :span="2"> <el-image :src="src"></el-image></el-col>
+          <el-col :span="16"
+            ><p class="logotitle">吉林省计算中心</p>
+            <p class="logoinfo">JiLin province computing center</p></el-col
+          >
+          <el-col :span="6" class="search">
+            <el-col :soan="16" class="searchtitle">
+              <el-input placeholder="关键词" @select="handleSelect" style="height:30px" class="newinput"></el-input> </el-col
+            ><el-col :span="2"><el-button type="primary" icon="el-icon-search"></el-button></el-col>
+          </el-col>
+        </el-col>
+      </div>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'logo',
+  props: { date: null, week: null },
+  components: {},
+  data: () => ({
+    src: require('@/assets/logo.png'),
+    newsrc: require('@/assets/123.jpg'),
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSelect() {},
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  height: 40px;
+  overflow: hidden;
+  background-color: rgba(11, 58, 125, 0.8);
+  color: #fff;
+  line-height: 40px;
+}
+
+.logo {
+  height: 200px;
+  overflow: hidden;
+}
+
+.logo .logotop {
+  padding: 75px 10px;
+  height: 210px;
+}
+
+.logo .logotitle {
+  color: #fff;
+  font-size: 40px;
+  margin: 0;
+}
+
+.logo .logoinfo {
+  font-size: 16px;
+  color: #fff;
+  font-family: 黑体;
+  text-transform: uppercase;
+  margin: 0;
+}
+.search {
+  height: 40px;
+  background: #2152994f;
+  border-radius: 25px;
+  color: #fff;
+  padding: 0 0 0 16px;
+}
+.search .searchtitle {
+  width: 240px;
+}
+/deep/.el-input__inner {
+  background: transparent;
+
+  border: none;
+  float: left;
+}
+
+/deep/.search .el-button--primary {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 10px 0 0 0;
+  font-size: 17px;
+}
+</style>

src/views/index.vue

@@ -2,40 +2,11 @@
   <div id="index">
     <el-row>
       <div class="w_1200">
-        <el-col :span="24" class="top">
-          <div class="w_1200">
-            <span class="date"
-              >{{ date }}星期{{
-                week == 1 ? '一' : week == 2 ? '二' : week == 3 ? '三' : week == 4 ? '四' : week == 5 ? '五' : week == 6 ? '六' : week == 7 ? '日' : ''
-              }}</span
-            >
-          </div>
-        </el-col>
-        <el-col :span="24" class="logo">
-          <div class="w_1200">
-            <el-col :span="24" class="logotop">
-              <el-col :span="2"> <el-image :src="src"></el-image></el-col>
-              <el-col :span="16"
-                ><p class="logotitle">吉林省计算中心</p>
-                <p class="logoinfo">JiLin province computing center</p></el-col
-              >
-              <el-col :span="6" class="search">
-                <el-col :soan="16" class="searchtitle">
-                  <el-input placeholder="关键词" @select="handleSelect" style="height:30px" class="newinput"></el-input> </el-col
-                ><el-col :span="2"><el-button type="primary" icon="el-icon-search"></el-button></el-col>
-              </el-col>
-            </el-col>
-          </div>
-        </el-col>
+        <top :date="date" :week="week"></top>
+
         <el-col :span="24" class="menu">
           <div class="w_1200">
-            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
-              <el-menu-item index="1">新闻动态</el-menu-item>
-              <el-menu-item index="2">成果展示</el-menu-item>
-              <el-menu-item index="3">计算服务</el-menu-item>
-              <el-menu-item index="4">交流活动</el-menu-item>
-              <el-menu-item index="5"><a href="https://www.ele.me" target="_blank">党建学院</a></el-menu-item>
-            </el-menu>
+            <newmenu></newmenu>
           </div>
         </el-col>
         <el-col :span="24" class="main">
@@ -76,15 +47,21 @@
 </template>
 
 <script>
+import top from '@/layout/common/top.vue';
+import newmenu from '@/layout/common/newmenu.vue';
+
 import moment from 'moment';
 export default {
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    top,
+    newmenu,
+  },
   data: () => ({
     activeIndex: '1',
     activeIndex2: '1',
-    todate: '',
+
     week: '',
     date: '',
     src: require('@/assets/logo.png'),
@@ -109,8 +86,6 @@ export default {
       this.date = dates;
       console.log(dates);
     },
-
-    handleSelect() {},
   },
 };
 </script>
@@ -120,115 +95,7 @@ export default {
   width: 1200px;
   margin: 0 auto;
 }
-.top {
-  height: 40px;
-  overflow: hidden;
-  background-color: rgba(11, 58, 125, 0.8);
-  color: #fff;
-  line-height: 40px;
-}
-
-.logo {
-  height: 200px;
-  overflow: hidden;
-}
-
-.logo .logotop {
-  padding: 75px 10px;
-  height: 210px;
-}
-
-.logo .logotitle {
-  color: #fff;
-  font-size: 40px;
-  margin: 0;
-}
-
-.logo .logoinfo {
-  font-size: 16px;
-  color: #fff;
-  font-family: 黑体;
-  text-transform: uppercase;
-  margin: 0;
-}
-.search {
-  height: 40px;
-  background: #2152994f;
-  border-radius: 25px;
-  color: #fff;
-  padding: 0 0 0 16px;
-}
-.search .searchtitle {
-  width: 240px;
-}
-/deep/.el-input__inner {
-  background: transparent;
-
-  border: none;
-  float: left;
-}
-
-/deep/.search .el-button--primary {
-  border: none;
-  background: none;
-  padding: 0;
-  margin: 10px 0 0 0;
-  font-size: 17px;
-}
-.menu {
-  height: 70px;
-  overflow: hidden;
-}
 
-/deep/.el-menu--horizontal > .el-menu-item {
-  float: left;
-  height: 60px;
-  line-height: 60px;
-  margin: 0;
-  color: #909399;
-  width: 240.5px;
-  text-align: center;
-  float: left;
-  width: 238px;
-  text-align: center;
-  border-right: 2px solid #76bdfe;
-  font-size: 22px;
-  color: #fff;
-}
-
-/deep/.el-menu--horizontal > .el-menu-item:nth-child(5) {
-  float: left;
-  height: 60px;
-  line-height: 60px;
-  margin: 0;
-  color: #fff;
-  width: 240px;
-  text-align: center;
-  float: left;
-  width: 238px;
-  text-align: center;
-  border: none;
-  font-size: 22px;
-}
-
-/deep/.el-menu-item:hover {
-  background: #2152994f !important;
-
-  color: #fff !important;
-  border: none;
-  font-size: 22px !important;
-}
-
-/deep/.el-menu--horizontal > .el-menu-item.is-active {
-  background: #215299;
-  border: none;
-  color: #fff;
-}
-
-/deep/.el-menu.el-menu--horizontal {
-  border-bottom: none;
-  background: #2152994f;
-}
 .main {
   height: 740px;
   overflow: hidden;