22.39
This commit is contained in:
username
parent
e2f57c98eb
commit
fe227d03c2
201
package-lock.json
generated
201
package-lock.json
generated
@ -16,6 +16,7 @@
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.12.7",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"less": "^4.2.0",
|
||||
"unplugin-auto-import": "^0.17.5",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vite": "^5.2.0"
|
||||
@ -1076,6 +1077,18 @@
|
||||
"integrity": "sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/copy-anything": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
|
||||
"integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-what": "^3.14.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/mesqueeb"
|
||||
}
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
|
||||
@ -1144,6 +1157,19 @@
|
||||
"node": ">=0.12"
|
||||
}
|
||||
},
|
||||
"node_modules/errno": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
|
||||
"integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"prr": "~1.0.1"
|
||||
},
|
||||
"bin": {
|
||||
"errno": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.20.2",
|
||||
"resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.20.2.tgz",
|
||||
@ -1308,6 +1334,13 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/graceful-fs": {
|
||||
"version": "4.2.11",
|
||||
"resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
|
||||
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/hasown": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
|
||||
@ -1320,6 +1353,32 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/iconv-lite": {
|
||||
"version": "0.6.3",
|
||||
"resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
|
||||
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"safer-buffer": ">= 2.1.2 < 3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/image-size": {
|
||||
"version": "0.5.5",
|
||||
"resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
|
||||
"integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"bin": {
|
||||
"image-size": "bin/image-size.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-binary-path": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
||||
@ -1374,6 +1433,38 @@
|
||||
"node": ">=0.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-what": {
|
||||
"version": "3.14.1",
|
||||
"resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
|
||||
"integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/less": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/less/-/less-4.2.0.tgz",
|
||||
"integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"copy-anything": "^2.0.1",
|
||||
"parse-node-version": "^1.0.1",
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"bin": {
|
||||
"lessc": "bin/lessc"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"errno": "^0.1.1",
|
||||
"graceful-fs": "^4.1.2",
|
||||
"image-size": "~0.5.0",
|
||||
"make-dir": "^2.1.0",
|
||||
"mime": "^1.4.1",
|
||||
"needle": "^3.1.0",
|
||||
"source-map": "~0.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/local-pkg": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.5.0.tgz",
|
||||
@ -1418,6 +1509,20 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.15"
|
||||
}
|
||||
},
|
||||
"node_modules/make-dir": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
|
||||
"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"pify": "^4.0.1",
|
||||
"semver": "^5.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/memoize-one": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
|
||||
@ -1445,6 +1550,19 @@
|
||||
"node": ">=8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz",
|
||||
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"bin": {
|
||||
"mime": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
|
||||
@ -1508,6 +1626,23 @@
|
||||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/needle": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/needle/-/needle-3.3.1.tgz",
|
||||
"integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"iconv-lite": "^0.6.3",
|
||||
"sax": "^1.2.4"
|
||||
},
|
||||
"bin": {
|
||||
"needle": "bin/needle"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.4.x"
|
||||
}
|
||||
},
|
||||
"node_modules/normalize-path": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||
@ -1522,6 +1657,15 @@
|
||||
"resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
|
||||
"integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
|
||||
},
|
||||
"node_modules/parse-node-version": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
|
||||
"integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/path-parse": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz",
|
||||
@ -1551,6 +1695,16 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/pify": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
|
||||
"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/pkg-types": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.1.0.tgz",
|
||||
@ -1580,6 +1734,13 @@
|
||||
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/prr": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
|
||||
"integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/queue-microtask": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
||||
@ -1697,12 +1858,46 @@
|
||||
"queue-microtask": "^1.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/sax": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/sax/-/sax-1.3.0.tgz",
|
||||
"integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/scule": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
|
||||
"integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "5.7.2",
|
||||
"resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
|
||||
"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"bin": {
|
||||
"semver": "bin/semver"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz",
|
||||
@ -1747,6 +1942,12 @@
|
||||
"node": ">=8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/ufo": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.5.3.tgz",
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.12.7",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"less": "^4.2.0",
|
||||
"unplugin-auto-import": "^0.17.5",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vite": "^5.2.0"
|
||||
|
||||
19
src/App.vue
19
src/App.vue
@ -1,11 +1,26 @@
|
||||
<script setup>
|
||||
|
||||
import { ref, onMounted } from 'vue';
|
||||
const showFooter = ref(true);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-view />
|
||||
<div class="copyright" v-if="$route.name !== 'login'">
|
||||
<div>
|
||||
<span>
|
||||
广西壮族自治区南宁市武鸣区宝源路29号广西制造工程职业技术学院<br />
|
||||
邮编：530100<br />
|
||||
联系电话：10086
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.copyright {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin-top: 30px;
|
||||
background-color: palegreen;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/images/logo.png
Normal file
BIN
src/assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
230
src/index.vue
230
src/index.vue
@ -1,230 +0,0 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="navigationBar">
|
||||
<div class="navTitle">
|
||||
<router-link to="/">
|
||||
<img class="img-logo" src="../assets/logo.png" alt="" />
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="navUser">
|
||||
<div v-if="login" class="block">
|
||||
<el-avatar
|
||||
shape="square"
|
||||
:size="50"
|
||||
fit="cover"
|
||||
:src="squareUrl"
|
||||
></el-avatar>
|
||||
</div>
|
||||
<span v-if="login">{{ userName }}</span>
|
||||
<el-button v-else type="primary" icon="el-icon-user-solid"
|
||||
>登陆</el-button
|
||||
>
|
||||
</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 {
|
||||
data () {
|
||||
return {
|
||||
login: true,
|
||||
userName: 'ddmt',
|
||||
squareUrl: require('@/assets/images/1.jpg'),
|
||||
parItem: [
|
||||
{
|
||||
title: '环境治理',
|
||||
title2: '保护和改善环境质量',
|
||||
imgs: require('@/assets/images/1.jpg'),
|
||||
url: '/scheme'
|
||||
},
|
||||
{
|
||||
title: '可持续资源开发',
|
||||
title2: '环境和社会的可持续性',
|
||||
imgs: require('@/assets/images/2.jpg'),
|
||||
url: '/resourceHome'
|
||||
},
|
||||
{
|
||||
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" scoped>
|
||||
.navigationBar {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
border: 1px solid black;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
|
||||
.img-logo {
|
||||
margin-left: 5px;
|
||||
width: auto;
|
||||
height: 80px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navUser {
|
||||
float: right;
|
||||
margin-right: 100px;
|
||||
|
||||
.block,
|
||||
.el-button {
|
||||
display: inline-block;
|
||||
margin-top: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
float: right;
|
||||
line-height: 80px;
|
||||
margin-left: 10px;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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.8s;
|
||||
-moz-transition: all 0.8s;
|
||||
-ms-transition: all 0.8s;
|
||||
-o-transition: all 0.8s;
|
||||
transition: all 0.8s;
|
||||
animation-duration: 3s;
|
||||
animation-name: slidein;
|
||||
animation-delay: 0.5s;
|
||||
animation-delay: 0.5s;
|
||||
// animation: slidein 0.5s reverse;
|
||||
}
|
||||
|
||||
@keyframes slidein {
|
||||
0% {
|
||||
width: 740px;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
li img {
|
||||
object-fit: cover;
|
||||
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: 10px;
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
@ -1,19 +1,20 @@
|
||||
import {createRouter,createWebHistory} from 'vue-router';
|
||||
|
||||
import Login from '../views/Login.vue';
|
||||
import Home from '../views/Home.vue';
|
||||
import index from '../views/index.vue';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path:'/',
|
||||
name:'login',
|
||||
component:Login
|
||||
name:'index',
|
||||
component:index
|
||||
},
|
||||
{
|
||||
path:'/home',
|
||||
name:'Home',
|
||||
component:Home
|
||||
path:'/login',
|
||||
name:'login',
|
||||
component:Login
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
@ -13,14 +13,7 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
@ -81,4 +74,13 @@ button:focus-visible {
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
@ -1,197 +1,218 @@
|
||||
<template>
|
||||
<div class="loginbody">
|
||||
<div class="logindata">
|
||||
<div class="logintext">
|
||||
<h2>{{ create ? '注册' : '登陆' }}</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-item prop="repassword" v-if="create">
|
||||
<el-input
|
||||
v-model="form.repassword"
|
||||
clearable
|
||||
placeholder="请重复密码"
|
||||
show-password
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tool">
|
||||
<div>
|
||||
<el-checkbox v-model="checked" @change="remenber" v-if="!create"
|
||||
>记住密码</el-checkbox
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<span class="shou" @click="forgetpas" v-if="!create">忘记密码？</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="butt">
|
||||
<el-button type="primary" @click="login"
|
||||
>{{ create ? '注册' : '登陆' }}</el-button
|
||||
<div class="loginbody">
|
||||
<div class="logindata">
|
||||
<div class="logintext">
|
||||
<h2>{{ create ? "注册" : "登陆" }}</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-item prop="repassword" v-if="create">
|
||||
<el-input
|
||||
v-model="form.repassword"
|
||||
clearable
|
||||
placeholder="请重复密码"
|
||||
show-password
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tool">
|
||||
<div>
|
||||
<el-checkbox v-model="checked" @change="remenber" v-if="!create"
|
||||
>记住密码</el-checkbox
|
||||
>
|
||||
<el-button class="shou" @click="register">{{ create ? '返回' : '注册' }}</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<span class="shou" @click="forgetpas" v-if="!create">忘记密码？</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="butt">
|
||||
<el-button type="primary" @click="login">{{
|
||||
create ? "注册" : "登陆"
|
||||
}}</el-button>
|
||||
<el-button class="shou" @click="register">{{
|
||||
create ? "返回" : "注册"
|
||||
}}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { userLogin } from '../api/login'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
create: false,
|
||||
form: {
|
||||
password: '',
|
||||
username: '',
|
||||
repassword: ''
|
||||
},
|
||||
query: {
|
||||
code: '',
|
||||
account: 'ddmt',
|
||||
password: '000000',
|
||||
scene: '1',
|
||||
terminal: '4'
|
||||
},
|
||||
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' }
|
||||
],
|
||||
repassword: [
|
||||
{ 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 === '') {
|
||||
ElMessage.error('账号或密码不能为空')
|
||||
} else {
|
||||
// this.$router.push('/index')
|
||||
this.query.account = this.form.username
|
||||
this.query.password = this.form.password
|
||||
userLogin(this.query).then(response => {
|
||||
console.log(response)
|
||||
ElMessage({
|
||||
message: response.msg,
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
}
|
||||
import { userLogin } from "../api/login";
|
||||
import { ElMessage } from "element-plus";
|
||||
import router from '../router'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
create: false,
|
||||
form: {
|
||||
password: "",
|
||||
username: "",
|
||||
repassword: "",
|
||||
},
|
||||
remenber (data) {
|
||||
this.checked = data
|
||||
if (this.checked) {
|
||||
localStorage.setItem('news', JSON.stringify(this.form))
|
||||
} else {
|
||||
localStorage.removeItem('news')
|
||||
}
|
||||
query: {
|
||||
code: "",
|
||||
account: "ddmt",
|
||||
password: "000000",
|
||||
scene: "1",
|
||||
terminal: "4",
|
||||
},
|
||||
forgetpas () {
|
||||
ElMessage({
|
||||
message: '请联系管理员更改密码',
|
||||
type: 'warning'
|
||||
})
|
||||
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" },
|
||||
],
|
||||
repassword: [
|
||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||
{ max: 10, message: "不能大于10个字符", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
register () {
|
||||
this.create = !this.create
|
||||
this.$refs.form.clearValidate('username')
|
||||
this.$refs.form.clearValidate('password')
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (localStorage.getItem("news")) {
|
||||
this.form = JSON.parse(localStorage.getItem("news"));
|
||||
this.checked = true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
if (this.form.username === "" || this.form.password === "") {
|
||||
ElMessage.error("账号或密码不能为空");
|
||||
} else {
|
||||
// this.$router.push('/index')
|
||||
this.query.account = this.form.username;
|
||||
this.query.password = this.form.password;
|
||||
userLogin(this.query).then((response) => {
|
||||
console.log(response);
|
||||
ElMessage({
|
||||
message: response.msg,
|
||||
type: "success",
|
||||
});
|
||||
// 登录成功后重定向到主页
|
||||
router.push('/index');
|
||||
});
|
||||
}
|
||||
},
|
||||
remenber(data) {
|
||||
this.checked = data;
|
||||
if (this.checked) {
|
||||
localStorage.setItem("news", JSON.stringify(this.form));
|
||||
} else {
|
||||
localStorage.removeItem("news");
|
||||
}
|
||||
},
|
||||
forgetpas() {
|
||||
ElMessage({
|
||||
message: "请联系管理员更改密码",
|
||||
type: "warning",
|
||||
});
|
||||
},
|
||||
register() {
|
||||
if (this.create) {
|
||||
// 从注册切换到登录清空表单内容
|
||||
this.form.username = "";
|
||||
this.form.password = "";
|
||||
this.form.repassword = "";
|
||||
} else if (
|
||||
this.form.username ||
|
||||
this.form.password ||
|
||||
this.form.repassword
|
||||
) {
|
||||
// 从登录切换到注册清空表单内容
|
||||
this.form.username = "";
|
||||
this.form.password = "";
|
||||
this.form.repassword = "";
|
||||
}
|
||||
this.create = !this.create;
|
||||
// 清除字段的验证错误
|
||||
this.$refs.form.clearValidate("username");
|
||||
this.$refs.form.clearValidate("password");
|
||||
this.$refs.form.clearValidate("repassword");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.loginbody {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 1000px;
|
||||
background-image: url("../assets/login2.jpg");
|
||||
background-size:cover;
|
||||
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(214, 214, 214, 0.1);
|
||||
box-shadow:
|
||||
5px 5px 10px rgba(0, 0, 0, 0.1), /* 右侧阴影 */
|
||||
-5px 5px 10px rgba(0, 0, 0, 0.1), /* 左侧阴影 */
|
||||
5px -5px 10px rgba(0, 0, 0, 0.1), /* 下部阴影 */
|
||||
-5px -5px 10px rgba(0, 0, 0, 0.1); /* 上部阴影 */
|
||||
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 {
|
||||
.loginbody {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 1000px;
|
||||
background-image: url("../assets/images/login2.jpg");
|
||||
background-size: cover;
|
||||
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(214, 214, 214, 0.1);
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1),
|
||||
/* 右侧阴影 */ -5px 5px 10px rgba(0, 0, 0, 0.1),
|
||||
/* 左侧阴影 */ 5px -5px 10px rgba(0, 0, 0, 0.1),
|
||||
/* 下部阴影 */ -5px -5px 10px rgba(0, 0, 0, 0.1); /* 上部阴影 */
|
||||
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;
|
||||
@ -202,5 +223,5 @@
|
||||
margin-bottom: 10px;
|
||||
|
||||
} */
|
||||
</style>
|
||||
</style>
|
||||
|
||||
206
src/views/index.vue
Normal file
206
src/views/index.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="navigationBar">
|
||||
<div class="navTitle">
|
||||
<router-link to="/">
|
||||
<img class="img-logo" src="../assets/images/logo.png" alt="" />
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="navUser">
|
||||
<div v-if="login" class="block">
|
||||
<el-avatar
|
||||
shape="square"
|
||||
:size="50"
|
||||
fit="cover"
|
||||
:src="squareUrl"
|
||||
></el-avatar>
|
||||
</div>
|
||||
<span v-if="login">{{ userName }}</span>
|
||||
<el-button v-else type="primary" icon="el-icon-user-solid"
|
||||
>登陆</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<img src="../assets/images/login2.jpg" alt="" />
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
login: true,
|
||||
userName: "ddmt",
|
||||
squareUrl: "src/assets/images/login.jpg",
|
||||
parItem: [
|
||||
{
|
||||
title: "环境治理",
|
||||
title2: "保护和改善环境质量",
|
||||
imgs: "src/assets/images/login.jpg",
|
||||
url: "/login",
|
||||
},
|
||||
{
|
||||
title: "可持续资源开发",
|
||||
title2: "环境和社会的可持续性",
|
||||
imgs: "src/assets/images/login.jpg",
|
||||
url: "/login",
|
||||
},
|
||||
{
|
||||
title: "生态环保",
|
||||
title2: "维护生态平衡",
|
||||
imgs: "src/assets/images/login.jpg",
|
||||
url: "/login",
|
||||
},
|
||||
{
|
||||
title: "清洁能源应用",
|
||||
title2: "减少环境污染",
|
||||
imgs: "src/assets/images/login.jpg",
|
||||
url: "/login",
|
||||
},
|
||||
{
|
||||
title: "清洁能源应用",
|
||||
title2: "减少环境污染",
|
||||
imgs: "src/assets/images/login.jpg",
|
||||
url: "/login",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.navigationBar {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
border: 1px solid black;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
|
||||
.img-logo {
|
||||
margin-left: 5px;
|
||||
width: auto;
|
||||
height: 80px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navUser {
|
||||
float: right;
|
||||
margin-right: 100px;
|
||||
|
||||
.block,
|
||||
.el-button {
|
||||
display: inline-block;
|
||||
margin-top: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
float: right;
|
||||
line-height: 80px;
|
||||
margin-left: 10px;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.particulars {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
background-color: rgba(231, 226, 226, 0.5);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
width: 1000px;
|
||||
height: 320px;
|
||||
margin: 0 auto;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 200px;
|
||||
transition: all .8s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
li:hover {
|
||||
width: 700px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 1000px;
|
||||
height: 100px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
|
||||
.title a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
@ -14,5 +14,18 @@ export default defineConfig({
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
],
|
||||
],
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
less: {
|
||||
// Less 配置项
|
||||
modifyVars: {
|
||||
'primary-color': '#1DA57A',
|
||||
'link-color': '#1DA57A',
|
||||
'border-radius-base': '2px',
|
||||
},
|
||||
javascriptEnabled: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user