new
This commit is contained in:
username
parent
7178deb761
commit
b012a2b893
3
.browserslistrc
Normal file
3
.browserslistrc
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
|
not dead
|
||||||
5
.editorconfig
Normal file
5
.editorconfig
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
[*.{js,jsx,ts,tsx,vue}]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
17
.eslintrc.js
Normal file
17
.eslintrc.js
Normal file
@ -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'
|
||||||
|
}
|
||||||
|
}
|
||||||
15
babel.config.js
Normal file
15
babel.config.js
Normal file
@ -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'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
19
jsconfig.json
Normal file
19
jsconfig.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
9819
package-lock.json
generated
Normal file
9819
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
36
package.json
Normal file
36
package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
public/index.html
Normal file
17
public/index.html
Normal file
@ -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>
|
||||||
9
src/App.vue
Normal file
9
src/App.vue
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
BIN
src/assets/11.jpg
Normal file
BIN
src/assets/11.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
BIN
src/assets/images/1.jpg
Normal file
BIN
src/assets/images/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/2.jpg
Normal file
BIN
src/assets/images/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/images/3.jpg
Normal file
BIN
src/assets/images/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/images/4.jpg
Normal file
BIN
src/assets/images/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/images/guye.webp
Normal file
BIN
src/assets/images/guye.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
src/assets/images/heliu.jpg
Normal file
BIN
src/assets/images/heliu.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
src/assets/images/shebei.webp
Normal file
BIN
src/assets/images/shebei.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
src/assets/images/shizheng.jpg
Normal file
BIN
src/assets/images/shizheng.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
src/assets/images/xunhuan.jpg
Normal file
BIN
src/assets/images/xunhuan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/login.jpg
Normal file
BIN
src/assets/login.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
src/assets/login3.jpg
Normal file
BIN
src/assets/login3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
12
src/assets/styles/index.css
Normal file
12
src/assets/styles/index.css
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item{
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
150
src/assets/styles/login.css
Normal file
150
src/assets/styles/login.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
39
src/assets/styles/register.css
Normal file
39
src/assets/styles/register.css
Normal file
@ -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%);
|
||||||
|
}
|
||||||
60
src/components/HelloWorld.vue
Normal file
60
src/components/HelloWorld.vue
Normal file
@ -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>
|
||||||
44
src/main.js
Normal file
44
src/main.js
Normal file
@ -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')
|
||||||
60
src/router/index.js
Normal file
60
src/router/index.js
Normal file
@ -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
|
||||||
17
src/store/index.js
Normal file
17
src/store/index.js
Normal file
@ -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: {
|
||||||
|
}
|
||||||
|
})
|
||||||
13
src/views/cleanEnergy/index.vue
Normal file
13
src/views/cleanEnergy/index.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>清洁能源</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'cleanEnergy'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
340
src/views/environment/journalism/index.vue
Normal file
340
src/views/environment/journalism/index.vue
Normal file
@ -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 }} | <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 }} | <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 }} | <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>
|
||||||
41
src/views/environment/projectCase/index.vue
Normal file
41
src/views/environment/projectCase/index.vue
Normal file
@ -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>
|
||||||
152
src/views/environment/scheme/details.vue
Normal file
152
src/views/environment/scheme/details.vue
Normal file
@ -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>
|
||||||
203
src/views/environment/scheme/index.vue
Normal file
203
src/views/environment/scheme/index.vue
Normal file
@ -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>
|
||||||
13
src/views/environmental/index.vue
Normal file
13
src/views/environmental/index.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>生态环保</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'environMental'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
187
src/views/index.vue
Normal file
187
src/views/index.vue
Normal file
@ -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>
|
||||||
165
src/views/login.vue
Normal file
165
src/views/login.vue
Normal file
@ -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>
|
||||||
13
src/views/resource/index.vue
Normal file
13
src/views/resource/index.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>资源开发</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'resouRce'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
4
vue.config.js
Normal file
4
vue.config.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
|
module.exports = defineConfig({
|
||||||
|
transpileDependencies: true
|
||||||
|
})
|
||||||
Loading…
x
Reference in New Issue
Block a user