更新

src/layout/common/dates.vue

@@ -0,0 +1,38 @@
+<template>
+  <div id="dates">
+    <span class="date"
+      >{{ date }}星期{{
+        week == 1 ? '一' : week == 2 ? '二' : week == 3 ? '三' : week == 4 ? '四' : week == 5 ? '五' : week == 6 ? '六' : week == 7 ? '日' : ''
+      }}</span
+    >
+  </div>
+</template>
+
+<script>
+import moment from 'moment';
+export default {
+  name: 'dates',
+  props: {},
+  components: {},
+  data: () => ({
+    data: '',
+    week: '',
+  }),
+  created() {
+    this.searchdate();
+  },
+  computed: {},
+  methods: {
+    searchdate() {
+      let dates = moment().format('YYYY-MM-DD ');
+      let week = moment().format('d');
+      console.log(week);
+      this.week = week;
+      this.date = dates;
+      console.log(dates);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/layout/common/logo.vue

@@ -0,0 +1,19 @@
+<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/views/index.vue

@@ -1,29 +1,73 @@
 <template>
   <div id="index">
     <el-row>
-      <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-image :src="src"></el-image>
-        </div>
-      </el-col>
-      <el-col :span="24" class="menu">
-        <div class="w_1200"></div>
-      </el-col>
-      <el-col :span="24" class="main">
-        <div class="w_1200"></div>
-      </el-col>
-      <el-col :span="24" class="foot">
-        <div class="w_1200"></div>
-      </el-col>
+      <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 v-model="name" 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>
+        <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>
+          </div>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-col :span="24">
+            <el-col :span="12" class="maintopleft"
+              ><el-col :span="24" class="maintoplefttitle">
+                <div style="padding:10px 0 0 0;border-bottom: 1px dashed #ccc;">
+                  <span>|</span><span>运行动态</span><span><i class="el-icon-more-outline"></i></span>
+                </div>
+              </el-col>
+              <el-col :span="24">
+                <el-col :span="12" class="leftcontext">
+                  统计图
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="12" class="maintopright">
+              <el-col :span="24" class="maintoplefttitle">
+                <div style="padding:10px 0 0 0;border-bottom: 1px dashed #ccc;">
+                  <span>|</span><span>运行动态</span><span><i class="el-icon-more-outline"></i></span>
+                </div>
+              </el-col>
+              <el-col :span="24">
+                <el-col :span="12" class="leftcontext">
+                  统计图
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="foot"> </el-col>
+      </div>
     </el-row>
   </div>
 </template>
@@ -35,10 +79,13 @@ export default {
   props: {},
   components: {},
   data: () => ({
+    activeIndex: '1',
+    activeIndex2: '1',
     todate: '',
     week: '',
     date: '',
     src: require('@/assets/logo.png'),
+    newsrc: require('@/assets/123.jpg'),
   }),
   created() {
     this.searchdate();
@@ -53,6 +100,8 @@ export default {
       this.date = dates;
       console.log(dates);
     },
+
+    handleSelect() {},
   },
 };
 </script>
@@ -74,13 +123,163 @@ export default {
   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;
   margin: 10px 0;
 }
+
+.maintopleft {
+  height: 300px;
+  background-color: #fff;
+  margin: 0 10px 0 0;
+  width: 595px;
+}
+
+.main .maintopleft .maintoplefttitle {
+  padding: 20px;
+  // border-bottom: 1px dashed #ccc;
+}
+.main .maintopleft .maintoplefttitle span:first-child {
+  font-weight: 1000;
+  padding: 10px 5px 0 0px;
+}
+
+.main .maintopleft .maintoplefttitle span:nth-child(2) {
+  padding: 0 10px 0 0;
+}
+.main .maintopleft .maintoplefttitle span:nth-child(3) {
+  float: right;
+}
+
+.maintopleft .leftcontext {
+  padding: 0 20px 0 20px;
+}
+
+.maintopright {
+  height: 300px;
+  background-color: #fff;
+  width: 595px;
+}
+
+.maintopright .leftcontext {
+  padding: 0 20px 0 20px;
+}
+
+.main .maintopright .maintoplefttitle {
+  padding: 20px;
+  // border-bottom: 1px dashed #ccc;
+}
+.main .maintopright .maintoplefttitle span:first-child {
+  font-weight: 1000;
+  padding: 10px 5px 0 0px;
+}
+
+.main .maintopright .maintoplefttitle span:nth-child(2) {
+  padding: 0 10px 0 0;
+}
+.main .maintopright .maintoplefttitle span:nth-child(3) {
+  float: right;
+}
+
+.maintopright .leftcontext {
+  padding: 0 20px 0 20px;
+}
 </style>