guhongwei 2 yıl önce
ebeveyn
işleme
967aea8850

+ 44 - 14
public/index.html

@@ -1,17 +1,47 @@
 <!DOCTYPE html>
 <html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=0.1">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>加载中......</title>
+  <style>
+    /*修改滚动条样式*/
+    div::-webkit-scrollbar {
+      width: 5px;
+      height: 10px;
+    }
+
+    div::-webkit-scrollbar-track {
+      background: rgb(239, 239, 239);
+      border-radius: 2px;
+    }
+
+    div::-webkit-scrollbar-thumb {
+      background: #bfbfbf;
+      border-radius: 10px;
+    }
+
+    div::-webkit-scrollbar-thumb:hover {
+      background: #333;
+    }
+
+    div::-webkit-scrollbar-corner {
+      background: #179a16;
+    }
+
+  </style>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
 </html>

+ 61 - 0
src/components/web-frame/home.vue

@@ -0,0 +1,61 @@
+<template>
+  <div id="home">
+    <el-container>
+      <el-header>
+        <header-1></header-1>
+      </el-header>
+      <el-main>
+        <div class="w_1200">
+          <router-view></router-view>
+        </div>
+      </el-main>
+      <el-footer>
+        <footer-1></footer-1>
+      </el-footer>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'home',
+  props: {},
+  components: {
+    header1: () => import('./web-parts-one/header-1.vue'),
+    footer1: () => import('./web-parts-one/footer-1.vue'),
+  },
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.el-header {
+  height: 150px !important;
+  padding: 0;
+  border-bottom: 1px solid #ff0000;
+}
+.el-main {
+  padding: 0.5vw 0;
+}
+.el-footer {
+  padding: 0;
+}
+</style>

+ 130 - 0
src/components/web-frame/web-parts-one/footer-1.vue

@@ -0,0 +1,130 @@
+<template>
+  <div id="footer-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="24" class="one">
+            <el-col :span="3" class="list" v-for="(item, index) in menus" :key="index" @click.native="toHome(item)">
+              <span>{{ item.name }}</span>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="two">
+            <el-col :span="8" class="two_1">
+              <el-col :span="24" class="two_1_1">联系我们:</el-col>
+              <el-col :span="24" class="two_1_2">{{ contactInfo.mobile }}</el-col>
+            </el-col>
+            <el-col :span="8" class="two_2">
+              <el-col :span="24" class="two_2_1">
+                <span>联系QQ:</span>
+                <span>{{ contactInfo.qq }}</span>
+              </el-col>
+              <el-col :span="24" class="two_2_1">
+                <span>手机号码:</span>
+                <span>{{ contactInfo.phone }}</span>
+              </el-col>
+              <el-col :span="24" class="two_2_1">
+                <span>联系邮箱:</span>
+                <span>{{ contactInfo.email }}</span>
+              </el-col>
+            </el-col>
+            <el-col :span="8" class="two_3"></el-col>
+          </el-col>
+          <el-col :span="24" class="thr">
+            {{ contactInfo.bq }}
+          </el-col>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { siteInfo, contactInfo, webmenus } from '../../../layout/site';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'footer-1',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      menus: webmenus,
+      contactInfo: contactInfo,
+    };
+  },
+  created() {},
+  methods: {
+    toHome(e) {
+      this.$router.push({ path: e.path });
+      window.scrollTo(0, 1);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  background-color: #222222;
+  padding: 0.5vw 0;
+  .one {
+    padding: 1.5vw 0;
+    border-bottom: 1px solid #353535;
+    .list {
+      span {
+        color: #747474;
+        font-size: 14px;
+      }
+      span:hover {
+        cursor: pointer;
+        color: #ffc001;
+      }
+    }
+  }
+  .two {
+    padding: 2vw 0 1vw 0;
+    .two_1 {
+      border-right: 1px solid #353535;
+      padding: 1vw 0;
+      .two_1_1 {
+        margin: 0 0 0.5vw 0;
+        color: #747474;
+      }
+      .two_1_2 {
+        font-size: 35px;
+        color: #ffc001;
+        font-style: oblique;
+        font-weight: bold;
+      }
+    }
+    .two_2 {
+      border-right: 1px solid #353535;
+      padding: 1vw 3vw;
+      .two_2_1 {
+        padding: 0 0 0.2vw 0;
+        span {
+          color: #747474;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+  .thr {
+    padding: 0 0 0.5vw 0;
+    text-align: center;
+    color: #747474;
+    font-size: 12px;
+  }
+}
+</style>

+ 126 - 0
src/components/web-frame/web-parts-one/header-1.vue

@@ -0,0 +1,126 @@
+<template>
+  <div id="header-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <div class="w_1200">
+            <el-col :span="12" class="one_1">
+              <span @click="toHome()">{{ siteInfo.zhTitle }}</span>
+            </el-col>
+            <el-col :span="12" class="one_2">
+              <el-button type="danger" size="small" plain>管理登录</el-button>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24" class="two">
+          <div class="w_1200">
+            <el-col :span="18" class="two_1">
+              <el-menu :default-active="onRoutes" router mode="horizontal" background-color="#222222" text-color="#ffffff" active-text-color="#ffffff">
+                <template v-for="item in items">
+                  <template>
+                    <el-menu-item :index="item.path" :key="item.path">
+                      <span slot="title">{{ item.name }}</span>
+                    </el-menu-item>
+                  </template>
+                </template>
+              </el-menu>
+            </el-col>
+            <el-col :span="6" class="two_2">
+              <el-input v-model="input" size="small" placeholder="请输入查询内容" suffix-icon="el-icon-search"> </el-input>
+            </el-col>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { siteInfo, webmenus } from '../../../layout/site';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'header-1',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      siteInfo: siteInfo,
+      input: '',
+      items: webmenus,
+    };
+  },
+  created() {},
+  methods: {
+    toHome() {
+      this.$router.push({ path: '/' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    onRoutes() {
+      return this.$route.path;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    height: 100px;
+    line-height: 100px;
+    overflow: hidden;
+    .one_1 {
+      span {
+        font-size: 40px;
+        font-family: cursive;
+        font-weight: bold;
+        color: #ffc001;
+        font-style: italic;
+        font-weight: bold;
+      }
+      span:hover {
+        cursor: pointer;
+      }
+    }
+    .one_2 {
+      text-align: right;
+    }
+  }
+  .two {
+    height: 50px;
+    background-color: #222222;
+    .two_1 {
+      .el-menu--horizontal > .el-menu-item {
+        height: 50px;
+        line-height: 50px;
+        border-bottom: none;
+        margin: 0 10px 0 0;
+      }
+      /deep/.el-menu--horizontal > .el-menu-item.is-active {
+        background-color: #ffc001 !important;
+      }
+      /deep/.el-menu-item:focus,
+      .el-menu-item:hover {
+        background-color: #ffc001 !important;
+      }
+    }
+    .two_2 {
+      padding: 0.4vw 0;
+      /deep/.el-input__inner {
+        border-radius: 30px;
+      }
+    }
+  }
+}
+</style>

+ 34 - 4
src/layout/site.js

@@ -1,9 +1,17 @@
 // 网站基本设置
 export const siteInfo = {
   display: true,
-  zhTitle: '长春市福瑞科技有限公司',
-  enTitle: 'Changchun Furui Technology Co., Ltd',
-  smallTtitle: '福瑞科技',
+  zhTitle: '自由天空',
+  enTitle: 'Free Sky',
+  smallTtitle: '自由天空',
+};
+// 联系方式
+export const contactInfo = {
+  mobile: '0431-12345678',
+  qq: '123456789',
+  phone: '12345678901',
+  email: '123456@163.com',
+  bq: 'Copyright 2022-2023 ghw All Rights Reserved',
 };
 
 export const admin_style_one = {
@@ -38,7 +46,29 @@ export const admin_style_two = {
   // 内容显示部分
   routerview_bg_color: '#ffffff',
 };
-
+// 网站菜单
+export const webmenus = [
+  {
+    name: '系统首页',
+    path: '/home',
+  },
+  {
+    name: '解决方案',
+    path: '/solve',
+  },
+  {
+    name: '品牌理念',
+    path: '/brand',
+  },
+  {
+    name: '新闻资讯',
+    path: '/news',
+  },
+  {
+    name: '联系我们',
+    path: '/contact',
+  },
+];
 // 菜单
 export const menus = [
   {