new

2024-04-07 14:59:47 +08:00 · 2024-04-07 14:59:47 +08:00 · b012a2b893
commit b012a2b893
parent 7178deb761
40 changed files with 11453 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  parserOptions: {
+    parser: '@babel/eslint-parser'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,15 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+    ['@babel/preset-env', { modules: false }]
+  ],
+  plugins: [
+    [
+      'component',
+      {
+        libraryName: 'element-ui',
+        styleLibraryName: 'theme-chalk'
+      }
+    ]
+  ]
+}
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,36 @@
+{
+  "name": "challenge",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "element-ui": "^2.15.14",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-standard": "^6.1.0",
+    "babel-plugin-component": "^1.1.1",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "less": "^4.0.0",
+    "less-loader": "^8.0.0",
+    "vue-template-compiler": "^2.6.14"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
+<!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>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,9 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style lang="less">
+
+</style>
--- a/src/assets/11.jpg
+++ b/src/assets/11.jpg
--- a/src/assets/images/1.jpg
+++ b/src/assets/images/1.jpg
--- a/src/assets/images/2.jpg
+++ b/src/assets/images/2.jpg
--- a/src/assets/images/3.jpg
+++ b/src/assets/images/3.jpg
--- a/src/assets/images/4.jpg
+++ b/src/assets/images/4.jpg
--- a/src/assets/images/guye.webp
+++ b/src/assets/images/guye.webp
--- a/src/assets/images/heliu.jpg
+++ b/src/assets/images/heliu.jpg
--- a/src/assets/images/shebei.webp
+++ b/src/assets/images/shebei.webp
--- a/src/assets/images/shizheng.jpg
+++ b/src/assets/images/shizheng.jpg
--- a/src/assets/images/xunhuan.jpg
+++ b/src/assets/images/xunhuan.jpg
--- a/src/assets/login.jpg
+++ b/src/assets/login.jpg
--- a/src/assets/login3.jpg
+++ b/src/assets/login3.jpg
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@ -0,0 +1,12 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+
+a {
+    text-decoration: none;
+}
+
+.el-menu-item{
+    font-size: 18px;
+}
--- a/src/assets/styles/login.css
+++ b/src/assets/styles/login.css
@ -0,0 +1,150 @@
+.login {
+    width: 358px;
+    height: 588px;
+    border-radius: 15px;
+    padding: 0 50px;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(87, 87, 87, 0.5);
+  }
+
+  .header {
+    font-size: 38px;
+    font-weight: bold;
+    text-align: center;
+    line-height: 100px;
+    color: #61dafb;
+  }
+  .container {
+    height: 30px;
+    width: 250px;
+    position: absolute;
+    left: 50%;
+    top: 20%;
+    transform: translate(-50%, -50%);
+  }
+
+  .p{
+      color: red;
+      margin:3px 0 0 -20px;
+      display: inline-block;
+      background-color: transparent;
+    }
+  .container1 {
+    height: 30px;
+    width: 250px;
+    position: absolute;
+    left: 50%;
+    top: 30%;
+    transform: translate(-50%, -50%);
+  }
+
+  .loginBtn,
+  .registerBtn {
+    transform: translate(-50%, -50%);
+    text-align: center;
+    padding: 5px;
+    width: 22%;
+    margin-top: 40px;
+    background-color: #61dafb;
+    color: #fff;
+    cursor: pointer;
+  }
+
+  .loginBtn {
+    position: absolute;
+    left: 35%;
+    top: 64%;
+  }
+
+  .registerBtn {
+    position: absolute;
+    top: 64%;
+    right: 11%;
+  }
+  
+  input {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    outline: none;
+    border: none;
+    box-sizing: border-box;
+    padding-left: 5px;
+    background-color: #282c34;
+    color: #61dafb;
+    caret-color: #61dafb;
+  }
+  
+  input::placeholder {
+    color: #61dafb;
+  }
+  
+  span {
+    position: absolute;
+    content: "";
+    display: block;
+    background-color: #61dafb;
+    transition: transform 0.1s ease-in-out;
+  }
+  
+  .hint {
+    font-size: 12px;
+    padding-left: 5px;
+    color: #ff1c1c;
+  }
+  
+  .top,
+  .bottom {
+    left: 0px;
+    right: 0px;
+    height: 2px;
+  }
+  
+  .left,
+  .right {
+    top: 0px;
+    bottom: 0px;
+    width: 2px;
+    transform: scaleY(0);
+  }
+  
+  .top {
+    top: 0px;
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition-delay: 0.2s;
+  }
+  
+  .left {
+    left: 0px;
+    transform-origin: bottom center;
+    transition-delay: 0.3s;
+  }
+  
+  .bottom {
+    bottom: 0px;
+  }
+  
+  .right {
+    right: 0px;
+    transform-origin: top center;
+    transition-delay: 0.1s;
+  }
+  
+  input:focus ~ .right {
+    transform: scaleY(1);
+    transform-origin: bottom center;
+  }
+  
+  input:focus ~ .left {
+    transform: scaleY(1);
+    transform-origin: top center;
+  }
+  
+  input:focus ~ .top {
+    transform: scaleY(1);
+    transform-origin: right center;
+  }
--- a/src/assets/styles/register.css
+++ b/src/assets/styles/register.css
@ -0,0 +1,39 @@
+
+.register{
+    width: 358px;
+    height: 588px;
+    border-radius: 15px;
+    padding: 0 50px;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(87, 87, 87, 0.5);
+}
+
+.container2 {
+    height: 30px;
+    width: 250px;
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    transform: translate(-50%, -50%);
+  }
+
+  .container3 {
+    height: 30px;
+    width: 250px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .container4 {
+    height: 30px;
+    width: 250px;
+    position: absolute;
+    left: 50%;
+    top: 60%;
+    transform: translate(-50%, -50%);
+  }
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,60 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,44 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+
+import '@/assets/styles/index.css'
+
+import {
+  Button,
+  Input,
+  Form,
+  FormItem,
+  Checkbox,
+  Carousel,
+  CarouselItem,
+  Tabs,
+  TabPane,
+  Menu,
+  MenuItem,
+  Breadcrumb,
+  BreadcrumbItem
+} from 'element-ui'
+
+Vue.use(Button)
+Vue.use(Form)
+Vue.use(Input)
+Vue.use(FormItem)
+Vue.use(Checkbox)
+Vue.use(Carousel)
+Vue.use(CarouselItem)
+Vue.use(Tabs)
+Vue.use(TabPane)
+Vue.use(Menu)
+Vue.use(MenuItem)
+Vue.use(Breadcrumb)
+Vue.use(BreadcrumbItem)
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,60 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import login from '../views/login.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'login',
+    component: login
+  },
+  {
+    path: '/index',
+    name: 'index',
+    component: () => import('../views/index.vue')
+  },
+  {
+    path: '/resource',
+    name: 'resource',
+    component: () => import('../views/resource')
+  },
+  {
+    path: '/environmental',
+    name: 'environmental',
+    component: () => import('../views/environmental')
+  },
+  {
+    path: '/cleanEnergy',
+    name: 'cleanEnergy',
+    component: () => import('../views/cleanEnergy')
+  },
+  {
+    path: '/journalism',
+    name: 'environmentJournalism',
+    component: () => import('@/views/environment/journalism/index')
+  },
+  {
+    path: '/projectCase',
+    name: 'environmentProjectase',
+    component: () => import('@/views/environment/projectCase/index')
+  },
+  {
+    path: '/scheme',
+    name: 'environmentScheme',
+    component: () => import('@/views/environment/scheme/index')
+  },
+  {
+    path: '/details',
+    name: 'environmentDetails',
+    component: () => import('@/views/environment/scheme/details')
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history', // 去掉url中的#
+  routes
+})
+
+export default router
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  getters: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
--- a/src/views/cleanEnergy/index.vue
+++ b/src/views/cleanEnergy/index.vue
@ -0,0 +1,13 @@
+<template>
+  <div>清洁能源</div>
+</template>
+
+<script>
+export default {
+  name: 'cleanEnergy'
+}
+</script>
+
+<style>
+
+</style>
--- a/src/views/environment/journalism/index.vue
+++ b/src/views/environment/journalism/index.vue
@ -0,0 +1,340 @@
+<template>
+  <div class="journalism">
+    <div class="nav">
+        <el-menu
+      :default-active="activeIndex"
+      class="el-menu-demo"
+      mode="horizontal"
+      background-color="#545c64"
+      text-color="#fff"
+      active-text-color="#ffd04b"
+    >
+      <el-menu-item index="1">
+        <router-link to="/index">首页</router-link>
+      </el-menu-item>
+      <el-menu-item index="2">
+        <router-link to="/scheme">解决方案</router-link>
+      </el-menu-item>
+      <el-menu-item index="3">
+        <router-link to="/projectCase">工程案例</router-link>
+      </el-menu-item>
+      <el-menu-item index="4">
+        <router-link to="journalism">新闻资讯</router-link>
+      </el-menu-item>
+    </el-menu>
+    </div>
+    <!-- 轮播图 -->
+    <div class="slideshow">
+      <el-carousel :interval="3000" arrow="always" type="card">
+        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
+          <img
+            :src="item.image"
+            :alt="item.description"
+            style="width: 100%; height: auto"
+          />
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+
+    <!-- 新闻 -->
+    <div class="message">
+      <div class="message-left">
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="大气" name="first">
+            <div
+              class="news-item"
+              v-for="(item, index) in messageItem"
+              :key="index"
+            >
+              <img :src="item.imgs" alt="" />
+              <h3>{{ item.title }}</h3>
+              <p>
+                {{ item.content }}
+              </p>
+              <p class="issue">
+                {{ item.department }}&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{
+                  item.date
+                }}</span>
+              </p>
+            </div>
+          </el-tab-pane>
+
+          <el-tab-pane label="节能" name="second">
+            <div
+              class="energy-item"
+              v-for="(item, index) in energyItem"
+              :key="index"
+            >
+              <img :src="item.imgs" alt="" />
+              <h3>{{ item.title }}</h3>
+              <p>
+                {{ item.content }}
+              </p>
+              <p class="issue">
+                {{ item.department }}&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{
+                  item.date
+                }}</span>
+              </p>
+            </div>
+          </el-tab-pane>
+
+          <el-tab-pane label="修复" name="third">
+            <div
+              class="repair-item"
+              v-for="(item, index) in repairItem"
+              :key="index"
+            >
+              <img :src="item.imgs" alt="" />
+              <h3>{{ item.title }}</h3>
+              <p>
+                {{ item.content }}
+              </p>
+              <p class="issue">
+                {{ item.department }}&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{
+                  item.date
+                }}</span>
+              </p>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+
+      <div class="message-right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'journaLism',
+  data () {
+    return {
+      activeIndex: '4',
+      carouselItems: [
+        {
+          image: require('@/assets/images/1.jpg')
+        },
+        {
+          image: require('@/assets/images/2.jpg')
+        },
+        {
+          image: require('@/assets/images/3.jpg')
+        },
+        {
+          image: require('@/assets/images/4.jpg')
+        }
+      ],
+      activeName: 'first',
+      messageItem: [
+        {
+          imgs: require('@/assets/images/1.jpg'),
+          title: '生态环境部发布4月上半月全国空气质量预报会商结果',
+          content:
+            '2024年3月31日，中国环境监测总站联合中央气象台、国家大气污染防治攻关联合中心、东北、华南、西南、西北、长三角区域空气质量预测预报中心和北京市生态环境监测中心，开展2024年4月上半月（4月1日—4月15日）全国空气质量预报会商。',
+          department: '生态环境部',
+          date: '2024-4-5'
+        },
+        {
+          imgs: require('@/assets/images/1.jpg'),
+          title: '生态环境部发布4月上半月全国空气质量预报会商结果',
+          content:
+            '2024年3月31日，中国环境监测总站联合中央气象台、国家大气污染防治攻关联合中心、东北、华南、西南、西北、长三角区域空气质量预测预报中心和北京市生态环境监测中心，开展2024年4月上半月（4月1日—4月15日）全国空气质量预报会商。',
+          department: '生态环境部',
+          date: '2024-4-5'
+        },
+        {
+          imgs: require('@/assets/images/1.jpg'),
+          title: '生态环境部发布4月上半月全国空气质量预报会商结果',
+          content:
+            '2024年3月31日，中国环境监测总站联合中央气象台、国家大气污染防治攻关联合中心、东北、华南、西南、西北、长三角区域空气质量预测预报中心和北京市生态环境监测中心，开展2024年4月上半月（4月1日—4月15日）全国空气质量预报会商。',
+          department: '生态环境部',
+          date: '2024-4-5'
+        },
+        {
+          imgs: require('@/assets/images/1.jpg'),
+          title: '生态环境部发布4月上半月全国空气质量预报会商结果',
+          content:
+            '2024年3月31日，中国环境监测总站联合中央气象台、国家大气污染防治攻关联合中心、东北、华南、西南、西北、长三角区域空气质量预测预报中心和北京市生态环境监测中心，开展2024年4月上半月（4月1日—4月15日）全国空气质量预报会商。',
+          department: '生态环境部',
+          date: '2024-4-5'
+        },
+        {
+          imgs: require('@/assets/images/1.jpg'),
+          title: '生态环境部发布4月上半月全国空气质量预报会商结果',
+          content:
+            '2024年3月31日，中国环境监测总站联合中央气象台、国家大气污染防治攻关联合中心、东北、华南、西南、西北、长三角区域空气质量预测预报中心和北京市生态环境监测中心，开展2024年4月上半月（4月1日—4月15日）全国空气质量预报会商。',
+          department: '生态环境部',
+          date: '2024-4-5'
+        },
+        {
+          imgs: require('@/assets/images/1.jpg'),
+          title: '生态环境部发布4月上半月全国空气质量预报会商结果',
+          content:
+            '2024年3月31日，中国环境监测总站联合中央气象台、国家大气污染防治攻关联合中心、东北、华南、西南、西北、长三角区域空气质量预测预报中心和北京市生态环境监测中心，开展2024年4月上半月（4月1日—4月15日）全国空气质量预报会商。',
+          department: '生态环境部',
+          date: '2024-4-5'
+        }
+      ],
+      energyItem: [
+        {
+          imgs: require('@/assets/images/2.jpg'),
+          title: '“节能服务进企业”助力钢铁行业绿色发展',
+          content:
+            '为全面推动钢铁行业极致能效工程，挖掘行业节能降碳潜力，“节能服务进企业”暨2024钢铁行业能效提升研讨会近日在江苏省江阴市举行。参会代表围绕钢铁行业大规模设备更新、节能降碳等政策，绿色微电网建设及极致能效标杆创建实践，全流程先进节能减排、建筑光伏一体化、高效压缩空气能源供应系统等技术开展交流分享；与会钢铁企业、节能服务公司介绍了铁前节能、钢轧节能等节能技术和装备的应用实践及前景等。。',
+          department: '科技日报',
+          date: '2024-4-5'
+        },
+        {
+          imgs: require('@/assets/images/2.jpg'),
+          title: '“节能服务进企业”助力钢铁行业绿色发展',
+          content:
+            '为全面推动钢铁行业极致能效工程，挖掘行业节能降碳潜力，“节能服务进企业”暨2024钢铁行业能效提升研讨会近日在江苏省江阴市举行。参会代表围绕钢铁行业大规模设备更新、节能降碳等政策，绿色微电网建设及极致能效标杆创建实践，全流程先进节能减排、建筑光伏一体化、高效压缩空气能源供应系统等技术开展交流分享；与会钢铁企业、节能服务公司介绍了铁前节能、钢轧节能等节能技术和装备的应用实践及前景等。。',
+          department: '科技日报',
+          date: '2024-4-5'
+        },
+        {
+          imgs: require('@/assets/images/2.jpg'),
+          title: '“节能服务进企业”助力钢铁行业绿色发展',
+          content:
+            '为全面推动钢铁行业极致能效工程，挖掘行业节能降碳潜力，“节能服务进企业”暨2024钢铁行业能效提升研讨会近日在江苏省江阴市举行。参会代表围绕钢铁行业大规模设备更新、节能降碳等政策，绿色微电网建设及极致能效标杆创建实践，全流程先进节能减排、建筑光伏一体化、高效压缩空气能源供应系统等技术开展交流分享；与会钢铁企业、节能服务公司介绍了铁前节能、钢轧节能等节能技术和装备的应用实践及前景等。。',
+          department: '科技日报',
+          date: '2024-4-5'
+        },
+        {
+          imgs: require('@/assets/images/2.jpg'),
+          title: '“节能服务进企业”助力钢铁行业绿色发展',
+          content:
+            '为全面推动钢铁行业极致能效工程，挖掘行业节能降碳潜力，“节能服务进企业”暨2024钢铁行业能效提升研讨会近日在江苏省江阴市举行。参会代表围绕钢铁行业大规模设备更新、节能降碳等政策，绿色微电网建设及极致能效标杆创建实践，全流程先进节能减排、建筑光伏一体化、高效压缩空气能源供应系统等技术开展交流分享；与会钢铁企业、节能服务公司介绍了铁前节能、钢轧节能等节能技术和装备的应用实践及前景等。。',
+          department: '科技日报',
+          date: '2024-4-5'
+        },
+        {
+          imgs: require('@/assets/images/2.jpg'),
+          title: '“节能服务进企业”助力钢铁行业绿色发展',
+          content:
+            '为全面推动钢铁行业极致能效工程，挖掘行业节能降碳潜力，“节能服务进企业”暨2024钢铁行业能效提升研讨会近日在江苏省江阴市举行。参会代表围绕钢铁行业大规模设备更新、节能降碳等政策，绿色微电网建设及极致能效标杆创建实践，全流程先进节能减排、建筑光伏一体化、高效压缩空气能源供应系统等技术开展交流分享；与会钢铁企业、节能服务公司介绍了铁前节能、钢轧节能等节能技术和装备的应用实践及前景等。。',
+          department: '科技日报',
+          date: '2024-4-5'
+        },
+        {
+          imgs: require('@/assets/images/2.jpg'),
+          title: '“节能服务进企业”助力钢铁行业绿色发展',
+          content:
+            '为全面推动钢铁行业极致能效工程，挖掘行业节能降碳潜力，“节能服务进企业”暨2024钢铁行业能效提升研讨会近日在江苏省江阴市举行。参会代表围绕钢铁行业大规模设备更新、节能降碳等政策，绿色微电网建设及极致能效标杆创建实践，全流程先进节能减排、建筑光伏一体化、高效压缩空气能源供应系统等技术开展交流分享；与会钢铁企业、节能服务公司介绍了铁前节能、钢轧节能等节能技术和装备的应用实践及前景等。。',
+          department: '科技日报',
+          date: '2024-4-5'
+        }
+      ],
+      repairItem: [
+        {
+          imgs: require('@/assets/images/3.jpg'),
+          title: '矿山如何生态修复？山东这样做',
+          content:
+            '“三北”地区是我国重要的生态安全屏障，约占国土面积的1/3，草原固碳增汇潜力巨大。同时，“三北”地区也因丰富的矿产资源承载着不少露天矿山开发活动，主要集中在草原区、荒漠区和丘陵区等地区，导致原本就脆弱的草原生态环境进一步恶化。因此，深入推进“三北”地区矿山生态修复，恢复和强化矿山生态系统的碳汇功能，成为“三北”地区需要解决的问题。',
+          department: '中国环境',
+          date: '2024-4-5'
+        },
+        {
+          imgs: require('@/assets/images/3.jpg'),
+          title: '矿山如何生态修复？山东这样做',
+          content:
+            '“三北”地区是我国重要的生态安全屏障，约占国土面积的1/3，草原固碳增汇潜力巨大。同时，“三北”地区也因丰富的矿产资源承载着不少露天矿山开发活动，主要集中在草原区、荒漠区和丘陵区等地区，导致原本就脆弱的草原生态环境进一步恶化。因此，深入推进“三北”地区矿山生态修复，恢复和强化矿山生态系统的碳汇功能，成为“三北”地区需要解决的问题。',
+          department: '中国环境',
+          date: '2024-4-5'
+        },
+        {
+          imgs: require('@/assets/images/3.jpg'),
+          title: '矿山如何生态修复？山东这样做',
+          content:
+            '“三北”地区是我国重要的生态安全屏障，约占国土面积的1/3，草原固碳增汇潜力巨大。同时，“三北”地区也因丰富的矿产资源承载着不少露天矿山开发活动，主要集中在草原区、荒漠区和丘陵区等地区，导致原本就脆弱的草原生态环境进一步恶化。因此，深入推进“三北”地区矿山生态修复，恢复和强化矿山生态系统的碳汇功能，成为“三北”地区需要解决的问题。',
+          department: '中国环境',
+          date: '2024-4-5'
+        },
+        {
+          imgs: require('@/assets/images/3.jpg'),
+          title: '矿山如何生态修复？山东这样做',
+          content:
+            '“三北”地区是我国重要的生态安全屏障，约占国土面积的1/3，草原固碳增汇潜力巨大。同时，“三北”地区也因丰富的矿产资源承载着不少露天矿山开发活动，主要集中在草原区、荒漠区和丘陵区等地区，导致原本就脆弱的草原生态环境进一步恶化。因此，深入推进“三北”地区矿山生态修复，恢复和强化矿山生态系统的碳汇功能，成为“三北”地区需要解决的问题。',
+          department: '中国环境',
+          date: '2024-4-5'
+        },
+        {
+          imgs: require('@/assets/images/3.jpg'),
+          title: '矿山如何生态修复？山东这样做',
+          content:
+            '“三北”地区是我国重要的生态安全屏障，约占国土面积的1/3，草原固碳增汇潜力巨大。同时，“三北”地区也因丰富的矿产资源承载着不少露天矿山开发活动，主要集中在草原区、荒漠区和丘陵区等地区，导致原本就脆弱的草原生态环境进一步恶化。因此，深入推进“三北”地区矿山生态修复，恢复和强化矿山生态系统的碳汇功能，成为“三北”地区需要解决的问题。',
+          department: '中国环境',
+          date: '2024-4-5'
+        },
+        {
+          imgs: require('@/assets/images/3.jpg'),
+          title: '矿山如何生态修复？山东这样做',
+          content:
+            '“三北”地区是我国重要的生态安全屏障，约占国土面积的1/3，草原固碳增汇潜力巨大。同时，“三北”地区也因丰富的矿产资源承载着不少露天矿山开发活动，主要集中在草原区、荒漠区和丘陵区等地区，导致原本就脆弱的草原生态环境进一步恶化。因此，深入推进“三北”地区矿山生态修复，恢复和强化矿山生态系统的碳汇功能，成为“三北”地区需要解决的问题。',
+          department: '中国环境',
+          date: '2024-4-5'
+        }
+      ]
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less" scoped>
+.message {
+  width: 1300px;
+  height: 800px;
+  margin: 10px auto;
+
+  .message-left {
+    width: 900px;
+    height: 800px;
+    float: left;
+
+    .news-item,
+    .energy-item,
+    .repair-item {
+      width: 880px;
+      height: 180px;
+      padding: 5px 0 20px 0;
+      margin-bottom: 15px;
+      border-bottom: 2px solid #ccc;
+
+      img {
+        float: left;
+        margin-right: 10px;
+      }
+
+      p {
+        font-size: 14px;
+        color: gray;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: normal;
+        margin-top: 10px;
+      }
+
+      .issue {
+        margin-top: 80px;
+      }
+    }
+  }
+
+  .message-right {
+    width: 400px;
+    height: 800px;
+    float: left;
+    background-color: palevioletred;
+    margin-top: 38px;
+  }
+}
+
+.news-item:hover h3 {
+  transition: all 0.5s ease;
+  color: #28905a;
+}
+</style>
--- a/src/views/environment/projectCase/index.vue
+++ b/src/views/environment/projectCase/index.vue
@ -0,0 +1,41 @@
+<template>
+  <div>
+    <el-menu
+      :default-active="activeIndex"
+      class="el-menu-demo"
+      mode="horizontal"
+      background-color="#545c64"
+      text-color="#fff"
+      active-text-color="#ffd04b"
+    >
+      <el-menu-item index="1">
+        <router-link to="/index">首页</router-link>
+      </el-menu-item>
+      <el-menu-item index="2">
+        <router-link to="/scheme">解决方案</router-link>
+      </el-menu-item>
+      <el-menu-item index="3">
+        <router-link to="/projectCase">工程案例</router-link>
+      </el-menu-item>
+      <el-menu-item index="4">
+        <router-link to="journalism">新闻资讯</router-link>
+      </el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'projectCase',
+  data () {
+    return {
+      activeIndex: '3'
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/environment/scheme/details.vue
+++ b/src/views/environment/scheme/details.vue
@ -0,0 +1,152 @@
+<template>
+  <div class="details">
+    <div class="nav">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/scheme' }"
+          >环境治理</el-breadcrumb-item
+        >
+        <el-breadcrumb-item>治理详情</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="home-details">
+      <el-carousel :interval="3000" arrow="always" type="card">
+        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
+          <img
+            :src="item.image"
+            :alt="item.description"
+            style="width: 100%; height: auto"
+          />
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <div class="lift">
+
+    </div>
+    <div class="content">
+      <div class="sludge" v-for="(item, index) in sludgeItem" :key="index">
+        <p class="title">{{ item.title }}</p>
+        <div class="sludge-content">
+            <img :src="item.imgs">
+            <div class="left-con">
+                <h3>简介</h3>
+                <hr>
+                <p>{{ item.content }}</p>
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'detaiLs',
+  data () {
+    return {
+      carouselItems: [
+        {
+          image: require('@/assets/images/1.jpg')
+        },
+        {
+          image: require('@/assets/images/2.jpg')
+        },
+        {
+          image: require('@/assets/images/3.jpg')
+        },
+        {
+          image: require('@/assets/images/4.jpg')
+        }
+      ],
+      sludgeItem: [
+        {
+          title: '市政污泥全流程处理方案',
+          content: 'jkdlbguilersgurseghusrbiuabguiarbgslriagbusbgurislgbaulgbuawgbw',
+          imgs: require('@/assets/images/1.jpg')
+        },
+        {
+          title: '市政污泥全流程处理方案',
+          content: 'jkdlbguilersgurseghusrbiuabguiarbgslriagbusbgurislgbaulgbuawgbw',
+          imgs: require('@/assets/images/2.jpg')
+        },
+        {
+          title: '市政污泥全流程处理方案',
+          content: 'jkdlbguilersgurseghusrbiuabguiarbgslriagbusbgurislgbaulgbuawgbw',
+          imgs: require('@/assets/images/3.jpg')
+        },
+        {
+          title: '市政污泥全流程处理方案',
+          content: 'jkdlbguilersgurseghusrbiuabguiarbgslriagbusbgurislgbaulgbuawgbw',
+          imgs: require('@/assets/images/4.jpg')
+        },
+        {
+          title: '市政污泥全流程处理方案',
+          content: 'jkdlbguilersgurseghusrbiuabguiarbgslriagbusbgurislgbaulgbuawgbw',
+          imgs: require('@/assets/images/heliu.jpg')
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.nav {
+  width: 100%;
+  height: 50px;
+
+  .el-breadcrumb {
+    line-height: 50px;
+    margin-left: 10px;
+  }
+}
+
+.lift{
+    width: 200px;
+    height: 600px;
+    border: 1px solid black;
+    position: absolute;
+    top: 50%;
+    right: 0;
+}
+
+.content {
+  width: 1500px;
+  height: 800px;
+  margin: auto;
+  position: relative;
+
+  .sludge{
+    width: 1200px;
+    height: 300px;
+    margin: 30px auto;
+
+    .title{
+        text-align: center;
+        font-weight: bold;
+        font-size: 18px;
+    }
+
+    img{
+        width: 300px;
+        height: 250px;
+        float: left;
+    }
+
+    .left-con{
+        float: left;
+        width: 800px;
+        height: 150px;
+        margin: 50px 0 0 10px;
+    }
+    h3{
+        color: palegreen;
+    }
+    hr{
+        width: 150px;
+        margin: 10px 0 10px 0;
+    }
+  }
+}
+
+</style>
--- a/src/views/environment/scheme/index.vue
+++ b/src/views/environment/scheme/index.vue
@ -0,0 +1,203 @@
+<template>
+  <div class="environment">
+    <div class="nav">
+      <el-menu
+        :default-active="activeIndex"
+        class="el-menu-demo"
+        mode="horizontal"
+        background-color="#545c64"
+        text-color="#fff"
+        active-text-color="#ffd04b"
+      >
+        <el-menu-item index="1">
+          <router-link to="/index">首页</router-link>
+        </el-menu-item>
+
+        <el-menu-item index="2">
+          <router-link to="/scheme">解决方案</router-link>
+        </el-menu-item>
+        <el-menu-item index="3">
+          <router-link to="/projectCase">工程案例</router-link>
+        </el-menu-item>
+        <el-menu-item index="4">
+          <router-link to="journalism">新闻资讯</router-link>
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <div class="home-scheme">
+      <el-carousel :interval="3000" arrow="always" type="card">
+        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
+          <img
+            :src="item.image"
+            :alt="item.description"
+            style="width: 100%; height: auto"
+          />
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <div class="scheme">
+      <div class="details" v-for="(item, index) in schemeItem" :key="index">
+        <h3>
+          {{ item.title }}<br />
+          {{ item.title2 }}<br />
+          {{ item.title3 }}
+        </h3>
+        <router-link to="/details">
+          <button>详情></button>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HoMe',
+  data () {
+    return {
+      activeIndex: '2',
+      carouselItems: [
+        {
+          image: require('@/assets/images/1.jpg')
+        },
+        {
+          image: require('@/assets/images/2.jpg')
+        },
+        {
+          image: require('@/assets/images/3.jpg')
+        },
+        {
+          image: require('@/assets/images/4.jpg')
+        }
+      ],
+      schemeItem: [
+        {
+          title: '市政污泥',
+          title2: '全流程处理方案',
+          title3: 'MUNICIPAL SLUDGE'
+        },
+        {
+          title: '河流湖泊',
+          title2: '黑臭水治理方案',
+          title3: 'RIVERS AND LAKES'
+        },
+        {
+          title: '垃圾渗滤液',
+          title2: '治理方案',
+          title3: 'LANDFILL LEACHATE'
+        },
+        {
+          title: '设备研发',
+          title2: '集成服务',
+          title3: 'EQUIPMENT R & D'
+        },
+        {
+          title: '移动式固液',
+          title2: '分离处理方案',
+          title3: 'SOLID LIQUOR SEPARATION'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+  <style lang="less">
+.home-scheme {
+  width: 1800px;
+  margin: auto;
+  margin-top: 10px;
+}
+
+.scheme {
+  width: 1200px;
+  height: 700px;
+  margin: auto;
+
+  .details {
+    width: 300px;
+    height: 350px;
+    background: linear-gradient(to bottom right, red, yellow);
+    float: left;
+    position: relative;
+    z-index: 1;
+  }
+
+  .details::before {
+    background-image: url(../../../assets/images/shizheng.jpg);
+  }
+
+  .details::before,
+  .details:nth-child(2)::before,
+  .details:nth-child(3)::before,
+  .details:nth-child(4)::before,
+  .details:nth-child(5)::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-size: cover;
+    opacity: 0.5;
+    z-index: -1;
+  }
+
+  .details:nth-child(2) {
+    width: 600px;
+    background: linear-gradient(
+      to bottom right,
+      rgba(13, 223, 238, 0.87),
+      rgb(32, 230, 137)
+    );
+  }
+
+  .details:nth-child(2)::before {
+    background-image: url(../../../assets/images/heliu.jpg);
+  }
+
+  .details:nth-child(3) {
+    float: right;
+    margin-top: 150px;
+    background-color: rgb(0, 255, 0);
+  }
+
+  .details:nth-child(3)::before {
+    background-image: url(../../../assets/images/xunhuan.jpg);
+  }
+
+  .details:nth-child(4) {
+    margin-left: 300px;
+    background-color: palegreen;
+  }
+
+  .details:nth-child(4)::before {
+    background-image: url(../../../assets/images/shebei.webp);
+  }
+
+  .details:nth-child(5) {
+    background-color: palevioletred;
+  }
+
+  .details:nth-child(5)::before {
+    background-image: url(../../../assets/images/guye.webp);
+  }
+
+  h3 {
+    color: white;
+
+    padding: 30px;
+  }
+
+  button {
+    width: 100px;
+    height: 30px;
+    border: white;
+    color: aliceblue;
+    border-radius: 50px;
+    background-color: rgba(255, 255, 255, 0.5);
+    margin-left: 30px;
+    cursor: pointer;
+  }
+}
+</style>
--- a/src/views/environmental/index.vue
+++ b/src/views/environmental/index.vue
@ -0,0 +1,13 @@
+<template>
+  <div>生态环保</div>
+</template>
+
+<script>
+export default {
+  name: 'environMental'
+}
+</script>
+
+<style>
+
+</style>
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -0,0 +1,187 @@
+<template>
+  <div class="home">
+    <div class="navigationBar">
+      <div class="navTitle">
+        <router-link to="/">
+          <img src="../assets/logo.png" alt="" />
+        </router-link>
+      </div>
+      <div class="navUser">用户</div>
+    </div>
+    <div class="content">
+      <img src="../assets/11.jpg" alt="" />
+    </div>
+    <div class="particulars">
+      <div class="accordion">
+        <ul>
+          <li v-for="(item, index) in parItem" :key="index">
+            <div class="title">
+              <router-link :to="item.url">
+                {{ item.title }}<br />{{ item.title2 }}<br>
+                <button>查看详情</button>
+              </router-link>
+            </div>
+            <router-link :to="item.url">
+              <img :src="item.imgs" />
+            </router-link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HomeView',
+  data () {
+    return {
+      parItem: [
+        {
+          title: '环境治理',
+          title2: '保护和改善环境质量',
+          imgs: require('@/assets/images/1.jpg'),
+          url: '/scheme'
+        },
+        {
+          title: '可持续资源开发',
+          title2: '环境和社会的可持续性',
+          imgs: require('@/assets/images/2.jpg'),
+          url: '/resource'
+        },
+        {
+          title: '生态环保',
+          title2: '维护生态平衡',
+          imgs: require('@/assets/images/3.jpg'),
+          url: '/environmental'
+        },
+        {
+          title: '清洁能源应用',
+          title2: '减少环境污染',
+          imgs: require('@/assets/images/4.jpg'),
+          url: '/cleanEnergy'
+        },
+        {
+          title: '清洁能源应用',
+          title2: '减少环境污染',
+          imgs: require('@/assets/images/1.jpg'),
+          url: '/cleanEnergy'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.navigationBar {
+  width: 100%;
+  height: 100px;
+  border: 1px solid black;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+
+  img {
+    width: 600px;
+    height: 100px;
+    float: left;
+  }
+
+  .navUser {
+    float: right;
+    margin-right: 100px;
+  }
+}
+
+.content {
+  img {
+    width: 100%;
+  }
+}
+
+.particulars {
+  width: 100%;
+  height: 320px;
+  background-color: rgba(231, 226, 226, 0.5);
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.accordion {
+  width: 905px;
+  height: 320px;
+  overflow: hidden;
+  margin: 10px auto;
+  position: relative;
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.4);
+
+  ul {
+    width: 3000px;
+  }
+
+  li {
+    display: block;
+    width: 180px;
+    height: 320px;
+    overflow: hidden;
+    position: relative;
+ float: left;
+    border-left: 1px solid #aaa;
+    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.4);
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    -ms-transition: all 0.5s;
+    -o-transition: all 0.5s;
+    transition: all 0.5s;
+  }
+
+  li:nth-child(5){
+    position: absolute;
+    right: 0;
+  }
+
+  li img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  ul:hover li {
+    width: 40px;
+  }
+
+  ul li:hover {
+    width: 740px;
+  }
+
+  .title {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 740px;
+    height: 100px;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+
+  .title a {
+    display: block;
+    color: #fff;
+    font-size: 16px;
+    padding: 20px;
+  }
+
+  button{
+    width: 100px;
+    height: 30px;
+    background-color: rgba(255, 255, 255, 0.4);
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    margin-top: 5px;
+    border-radius: 30px;
+  }
+}
+</style>
--- a/src/views/login.vue
+++ b/src/views/login.vue
@ -0,0 +1,165 @@
+<template>
+  <div class="loginbody">
+    <div class="logindata">
+      <div class="logintext">
+        <h2>Welcome</h2>
+      </div>
+      <div class="formdata">
+        <el-form ref="form" :model="form" :rules="rules">
+          <el-form-item prop="username">
+            <el-input
+              v-model="form.username"
+              clearable
+              placeholder="请输入账号"
+            ></el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              v-model="form.password"
+              clearable
+              placeholder="请输入密码"
+              show-password
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="tool">
+        <div>
+          <el-checkbox v-model="checked" @change="remenber"
+            >记住密码</el-checkbox
+          >
+        </div>
+        <div>
+          <span class="shou" @click="forgetpas">忘记密码？</span>
+        </div>
+      </div>
+      <div class="butt">
+        <el-button type="primary" @click.native.prevent="login"
+          >登录</el-button
+        >
+        <el-button class="shou" @click="register">注册</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'loGin',
+  data () {
+    return {
+      form: {
+        password: '',
+        username: ''
+      },
+      checked: false,
+      rules: {
+        username: [
+          { required: true, message: '请输入用户名', trigger: 'blur' },
+          { max: 10, message: '不能大于10个字符', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { max: 10, message: '不能大于10个字符', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  mounted () {
+    if (localStorage.getItem('news')) {
+      this.form = JSON.parse(localStorage.getItem('news'))
+      this.checked = true
+    }
+  },
+  methods: {
+    login () {
+      if (this.form.username === '' && this.form.password === '') {
+        alert('账号或密码不能为空')
+      } else {
+        this.$router.push('/index')
+      }
+    },
+    remenber (data) {
+      this.checked = data
+      if (this.checked) {
+        localStorage.setItem('news', JSON.stringify(this.form))
+      } else {
+        localStorage.removeItem('news')
+      }
+    },
+    forgetpas () {
+      alert('请联系管理员')
+    },
+    register () {
+      alert('请联系管理员')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.loginbody {
+  width: 100%;
+  height: 100%;
+  min-width: 1000px;
+  background-image: url("../assets/login.jpg");
+  background-size: 100% 100%;
+  background-position: center center;
+  overflow: auto;
+  background-repeat: no-repeat;
+  position: fixed;
+  line-height: 100%;
+  padding-top: 150px;
+}
+
+.logintext {
+  margin-bottom: 20px;
+  line-height: 50px;
+  text-align: center;
+  font-size: 30px;
+  font-weight: bolder;
+  color: white;
+  text-shadow: 2px 2px 4px #000000;
+}
+
+.logindata {
+  background-color: rgba(0, 0, 0, 0.5);
+  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.3);
+  width: 400px;
+  height: 300px;
+  padding: 30px;
+  border-radius: 10px;
+  transform: translate(-50%);
+  margin-left: 70%;
+}
+
+.tool {
+  display: flex;
+  justify-content: space-between;
+  color: #606266;
+}
+
+.butt {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.shou {
+  cursor: pointer;
+  color: #606266;
+}
+
+/*ui*/
+/* /deep/ .el-form-item__label {
+  font-weight: bolder;
+  font-size: 15px;
+  text-align: left;
+}
+
+/deep/ .el-button {
+  width: 100%;
+  margin-bottom: 10px;
+
+} */
+</style>
--- a/src/views/resource/index.vue
+++ b/src/views/resource/index.vue
@ -0,0 +1,13 @@
+<template>
+  <div>资源开发</div>
+</template>
+
+<script>
+export default {
+  name: 'resouRce'
+}
+</script>
+
+<style>
+
+</style>
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,4 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true
+})