gengxin

src/App.vue

@@ -1,7 +1,35 @@
 <template>
-  <div id="app">
+  <div id="app" :style="`background:url(${bg}) no-repeat fixed;background-size: 100% 100%;`">
     <router-view />
   </div>
 </template>
+<script>
+import _ from 'lodash';
+export default {
+  name: 'App',
+  props: {},
+  components: {},
+  data: () => ({
+    bg: require('@/assets/bg.jpg'),
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
 
-<style lang="less"></style>
+<style lang="less">
+html {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+body {
+  margin: 0;
+  overflow-x: hidden;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/views/index.vue

@@ -1,57 +1,94 @@
 <template>
   <div id="index">
-    <p class="title">{{ msg }}</p>
-    <p class="code">{{ code }}</p>
+    <el-row>
+      <el-col :span="24" class="top">
+        <div class="w_1200">
+          <span class="date">{{ date }}{{ day }}</span>
+        </div>
+      </el-col>
+      <el-col :span="24" class="logo">
+        <div class="w_1200"></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>
+    </el-row>
   </div>
 </template>
 
 <script>
-import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
   components: {},
-  data: function() {
-    return {
-      msg: 'FaceIFaceID 人脸核身服务',
-      code: '',
-    };
-  },
+  data: () => ({
+    todate: '',
+    day: '',
+    date: '',
+  }),
   created() {
-    this.createCode();
+    let today = this.getDay();
+    let todate = this.getDate();
+    this.day = today;
+    this.date = todate;
+    this.search();
   },
+  computed: {},
   methods: {
-    createCode() {
-      var code = '';
-      //设置长度，这里看需求，我这里设置了4
-      var codeLength = 4;
-
-      //设置随机字符
-      var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
-
-      //循环codeLength 我设置的4就是循环4次
-      for (var i = 0; i < codeLength; i++) {
-        //设置随机数范围,这设置为0 ~ 36
-        var index = Math.floor(Math.random() * 9);
-
-        //字符串拼接 将每次随机的字符 进行拼接
-        code += random[index];
-      }
+    search() {
+      console.log(this.day);
+    },
 
-      //将拼接好的字符串赋值给展示的code
-      this.code = code;
+    getDay(date = new Date()) {
+      var str = '星期' + '日一二三四五六'.charAt(new Date(date).getDay());
+      return str;
+      console.log(str);
     },
-  },
-  computed: {
-    ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
+    getDate(date = new Date()) {
+      console.log('s');
+      let res = new Date(date)
+        .toLocaleDateString()
+        .replace('/', '-')
+        .replace('/', '-');
+      let arr = res.split('-');
+      arr[1] = arr[1] * 1 >= 10 ? `${arr[1]}` : `0${arr[1]}`;
+      arr[2] = arr[2] * 1 >= 10 ? `${arr[2]}` : `0${arr[2]}`;
+      return `${arr[0]}-${arr[1]}-${arr[2]}`;
     },
   },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.w_1200 {
+  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;
+}
+.menu {
+  height: 70px;
+  overflow: hidden;
+}
+.main {
+  height: 740px;
+  overflow: hidden;
+  margin: 10px 0;
+}
+</style>