首頁 探索 說明
登入
project
/
common
4
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

网站

guhongwei 2 年之前
父節點
d63ce60922
當前提交
967aea8850
共有 5 個文件被更改，包括 395 次插入 和 18 次删除
統一視圖 顯示文件統計
  1. 44 14
      public/index.html
  2. 61 0
      src/components/web-frame/home.vue
  3. 130 0
      src/components/web-frame/web-parts-one/footer-1.vue
  4. 126 0
      src/components/web-frame/web-parts-one/header-1.vue
  5. 34 4
      src/layout/site.js

+ 44 - 14
public/index.html
查看文件 

@@ -1,17 +1,47 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="">
 
 <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>
 
 </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 = {
 
 export const siteInfo = {
 
   display: true,
 
   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 = {
 
 export const admin_style_one = {
 
@@ -38,7 +46,29 @@ export const admin_style_two = {
 
   // 内容显示部分
 
   // 内容显示部分
 
   routerview_bg_color: '#ffffff',
 
   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 = [
 
 export const menus = [
 
   {
 
   {