6666/123
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

4.8 20:41

Browse Source
This commit is contained in:
username 2024-04-08 20:41:04 +08:00
parent 0f1b4a52b6
commit f5705c8235
7 changed files with 294 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.vue
View File

@ -1,9 +1,23 @@
<template>
<div id="app">
<router-view />
<div class="copyright">
<div class="aa">
<span>
广西壮族自治区南宁市武鸣区宝源路29号广西制造工程职业技术学院<br>
邮编：530100<br>
联系电话：10086
</span>
</div>
</div>
</div>
</template>
<style lang="less">
.copyright{
width: 100%;
height: 150px;
margin-top: 30px;
background-color: palegreen;
}
</style>

4
src/main.js
View File

@ -19,7 +19,8 @@ import {
MenuItem,
Breadcrumb,
BreadcrumbItem,
Avatar
Avatar,
Pagination
} from 'element-ui'
Vue.use(Avatar)
@ -36,6 +37,7 @@ Vue.use(Menu)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Pagination)
Vue.config.productionTip = false

6
src/router/index.js
View File

@ -16,9 +16,9 @@ const routes = [
component: () => import('../views/index.vue')
},
{
path: '/resource',
name: 'resource',
component: () => import('../views/resource')
path: '/resourceHome',
name: 'resourceHome',
component: () => import('../views/resource/home/index')
},
{
path: '/environmental',

51
src/views/environment/journalism/index.vue
View File

@ -1,27 +1,27 @@
<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>
<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">
@ -97,6 +97,9 @@
</div>
</el-tab-pane>
</el-tabs>
<el-pagination :hide-on-single-page="true" background layout="prev, pager, next" :total="30">
</el-pagination>
</div>
<div class="message-right"></div>
@ -284,7 +287,7 @@ export default {
<style lang="less" scoped>
.message {
width: 1300px;
height: 800px;
height: 1430px;
margin: 10px auto;
.message-left {
@ -322,6 +325,10 @@ export default {
margin-top: 80px;
}
}
.el-pagination{
text-align: center;
}
}
.message-right {

10
src/views/index.vue
View File

@ -63,7 +63,7 @@ export default {
title: '可持续资源开发',
title2: '环境和社会的可持续性',
imgs: require('@/assets/images/2.jpg'),
url: '/resource'
url: '/resourceHome'
},
{
title: '生态环保',
@ -112,6 +112,7 @@ export default {
.el-button {
display: inline-block;
margin-top: 15px;
cursor: pointer;
}
span {
@ -168,14 +169,17 @@ export default {
transition: all 0.5s;
animation-duration: 3s;
animation-name: slidein;
animation-delay: 0.5s;
animation-delay: .5s;
// animation: slidein 0.5s reverse;
}
@keyframes slidein {
from {
0% {
width: 740px;
}
to {
100% {
width: 180px;
}
}

237
src/views/resource/home/index.vue Normal file
View File

@ -0,0 +1,237 @@
<template>
<div class="cleanEnergy-home">
<div class="nav">
<div class="nav-left">
<h2>可持续资源开发</h2>
</div>
<div class="nav-right">
<ul>
<li>首页</li>
<li>关于</li>
<li>服务</li>
<li>项目</li>
</ul>
</div>
</div>
<div class="slideshow">
</div>
<div class="row">
<div class="row-item" v-for="(item, index) in rowItem" :key="index">
{{ item.title }}
</div>
</div>
<div class="row2">
<div class="row2-img">
<img src="../../../assets/images/2.jpg" alt="">
</div>
<div class="row2-content">
basbs
</div>
</div>
<div class="title">
<h1>世界可再生能源的先驱</h1>
</div>
<div class="row3">
<div class="row3-item" v-for="(item, index) in rowItem3" :key="index">
{{ item.title }}
</div>
</div>
<div class="row4">
<div class="row4-img">
<img src="../../../assets/images/2.jpg" alt="">
</div>
<div class="row4-content">
basbs
</div>
</div>
<div class="title">
<h1>最新的太阳能电池板可再生能源项目</h1>
</div>
<div class="row3">
<div class="row3-item" v-for="(item, index) in rowItem3" :key="index">
{{ item.title }}
</div>
</div>
</div>
</template>
<script>
export default {
name: 'cleanEnergyHome',
data () {
return {
rowItem: [
{
title: 1
},
{
title: 2
},
{
title: 3
},
{
title: 4
}
],
rowItem3: [
{
title: 1
},
{
title: 2
},
{
title: 3
},
{
title: 4
},
{
title: 3
},
{
title: 4
}
]
}
}
}
</script>
<style lang="less" scoped>
.cleanEnergy-home {
.nav {
width: 100%;
height: 75px;
background-color: #ffffff;
.nav-left{
width: 220px;
height: 75px;
border-right: 1px solid #b4b4b4;
float: left;
line-height: 75px;
margin-left: 20px;
h2{
color: #32c36c;
cursor: pointer;
}
}
.nav-right{
float: right;
margin-right: 300px;
ul{
list-style: none;
li{
float: left;
line-height: 75px;
margin-left: 35px;
cursor: pointer;
}
}
}
}
.slideshow{
width: 100%;
height: 825px;
background-color: paleturquoise;
}
.row{
width: 1320px;
height: 210px;
border: 1px solid black;
margin: 50px auto;
.row-item{
width: 330px;
height: 210px;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
float: left;
}
}
.row2{
width: 100%;
height: 620px;
background-color: palegoldenrod;
.row2-img{
width: 50%;
height: 620px;
float: left;
img{
width: 100%;
height: 100%;
}
}
.row2-content{
float: left;
}
}
.title{
width: 100%;
height: 200px;
h1{
line-height: 200px;
text-align: center;
}
}
.row3{
width: 1350px;
height: 1055px;
margin: auto;
.row3-item{
width: 435px;
height: 504px;
background-color: cadetblue;
display: inline-block;
margin:15px 0 0 15px ;
}
}
.row4{
width: 100%;
height: 620px;
margin-top: 50px;
background-color: palegoldenrod;
.row4-img{
width: 50%;
height: 620px;
float: right;
img{
width: 100%;
height: 100%;
}
}
.row4-content{
float: left;
}
}
}
</style>

13
src/views/resource/index.vue
View File

@ -1,13 +0,0 @@
<template>
<div>资源开发</div>
</template>
<script>
export default {
name: 'resouRce'
}
</script>
<style>
</style>