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

Merge branch 'master' of https://git.ddmt.top/6666/123

Browse Source
This commit is contained in:
ddmt 2024-04-09 20:58:58 +08:00
commit ccfd0a375c
13 changed files with 489 additions and 150 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>

60
src/components/HelloWorld.vue
View File

@ -1,60 +0,0 @@
<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>

15
src/components/resourceHome/homeIndex.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div class="title">
</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.title{
width: 100%;
height: 200px;
}
</style>

106
src/components/slideshow/SeamlessCarousel.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<div
class="carousel"
@mousedown="startDrag"
@mousemove="drag"
@mouseup="endDrag"
@mouseleave="endDrag"
>
<div
class="carousel-item"
v-for="(image, index) in images"
:key="index"
:class="{ active: currentIndex === index }"
>
<img :src="image.imgs" :alt="image.description" @mousedown.prevent />
</div>
</div>
</template>
<script>
export default {
data () {
return {
images: [
{
imgs: require('@/assets/images/1.jpg')
},
{
imgs: require('@/assets/images/2.jpg')
},
{
imgs: require('@/assets/images/3.jpg')
}
],
currentIndex: 0,
dragging: false,
startX: 0,
currentX: 0
}
},
methods: {
nextImage () {
if (this.dragging) {
this.currentIndex = (this.currentIndex + 1) % this.images.length
}
},
prevImage () {
if (this.dragging) {
this.currentIndex =
(this.currentIndex - 1 + this.images.length) % this.images.length
}
},
startDrag (event) {
event.preventDefault() // 阻止默认拖拽行为
this.dragging = true
this.startX = event.clientX
this.currentX = event.clientX
},
drag (event) {
if (this.dragging) {
event.preventDefault() // 阻止默认拖拽行为
const deltaX = event.clientX - this.currentX
this.currentX = event.clientX
if (Math.abs(deltaX) > 10) {
// 假设移动超过10px时切换图片
if (deltaX > 0) {
this.nextImage()
} else {
this.prevImage()
}
}
}
},
endDrag () {
this.dragging = false
}
}
}
</script>
<style lang="less" scoped>
.carousel {
position: relative;
width: 100%;
height: 800px;
overflow: hidden;
cursor: pointer;
.carousel-item {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease;
img {
width: 100%;
height: 100%;
}
}
}
.carousel-item.active {
opacity: 1;
}
</style>

44
src/components/slideshow/environmentCarousel.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<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>
</template>
<script>
export default {
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')
}
]
}
}
}
</script>
<style>
.slideshow {
width: 1800px;
margin: auto;
margin-top: 10px;
}
</style>

4
src/main.js
View File

@ -20,10 +20,9 @@ import {
Breadcrumb,
BreadcrumbItem,
Avatar,
Message
Pagination
} from 'element-ui'
Vue.use(Message)
Vue.use(Avatar)
Vue.use(Button)
Vue.use(Form)
@ -38,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',

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

@ -24,17 +24,7 @@
</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>
<environmentCarousel/>
<!-- 新闻 -->
<div class="message">
@ -97,6 +87,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>
@ -105,8 +98,12 @@
</template>
<script>
import environmentCarousel from '@/components/slideshow/environmentCarousel.vue'
export default {
name: 'journaLism',
components: {
environmentCarousel
},
data () {
return {
activeIndex: '4',
@ -284,7 +281,7 @@ export default {
<style lang="less" scoped>
.message {
width: 1300px;
height: 800px;
height: 1430px;
margin: 10px auto;
.message-left {
@ -322,6 +319,10 @@ export default {
margin-top: 80px;
}
}
.el-pagination{
text-align: center;
}
}
.message-right {

24
src/views/environment/scheme/index.vue
View File

@ -24,17 +24,9 @@
</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>
<environmentCarousel/>
<div class="scheme">
<div class="details" v-for="(item, index) in schemeItem" :key="index">
<h3>
@ -51,8 +43,12 @@
</template>
<script>
import environmentCarousel from '@/components/slideshow/environmentCarousel.vue'
export default {
name: 'HoMe',
components: {
environmentCarousel
},
data () {
return {
activeIndex: '2',
@ -103,12 +99,6 @@ export default {
</script>
<style lang="less">
.home-scheme {
width: 1800px;
margin: auto;
margin-top: 10px;
}
.scheme {
width: 1200px;
height: 700px;

44
src/views/index.vue
View File

@ -7,9 +7,18 @@
</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>
<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>
<el-button v-else type="primary" icon="el-icon-user-solid"
>登陆</el-button
>
</div>
</div>
<div class="content">
@ -21,12 +30,12 @@
<li v-for="(item, index) in parItem" :key="index">
<div class="title">
<router-link :to="item.url">
{{ item.title }}<br />{{ item.title2 }}<br>
{{ item.title }}<br />{{ item.title2 }}<br />
<button>查看详情</button>
</router-link>
</div>
<router-link :to="item.url">
<img :src="item.imgs"/>
<img :src="item.imgs" />
</router-link>
</li>
</ul>
@ -54,7 +63,7 @@ export default {
title: '可持续资源开发',
title2: '环境和社会的可持续性',
imgs: require('@/assets/images/2.jpg'),
url: '/resource'
url: '/resourceHome'
},
{
title: '生态环保',
@ -99,12 +108,14 @@ export default {
float: right;
margin-right: 100px;
.block, .el-button {
.block,
.el-button {
display: inline-block;
margin-top: 15px;
cursor: pointer;
}
span{
span {
float: right;
line-height: 80px;
margin-left: 10px;
@ -151,24 +162,27 @@ export default {
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;
-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: .5s;
// animation: slidein 0.5s reverse;
}
@keyframes slidein {
from {
0% {
width: 740px;
}
to {
100% {
width: 180px;
}
}
}
li img {
object-fit: cover;

7
src/views/login.vue
View File

@ -89,7 +89,7 @@ export default {
},
methods: {
login () {
if (this.form.username === '' && this.form.password === '') {
if (this.form.username === '' || this.form.password === '') {
Message.error('账号或密码不能为空')
} else {
this.$router.push('/index')
@ -104,7 +104,10 @@ export default {
}
},
forgetpas () {
Message.error('请联系管理员')
Message({
message: '请联系管理员更改密码',
type: 'warning'
})
},
register () {
this.create = !this.create

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

@ -0,0 +1,225 @@
<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>
<seamless-carousel />
<div class="row">
<div class="row-item" v-for="(item, index) in rowItem" :key="index">
{{ item.title }}
</div>
</div>
<homeIndex/>
<div class="row2">
<div class="row2-img">
<img src="../../../assets/images/2.jpg" alt="">
</div>
<div class="row2-content">
basbs
</div>
</div>
<homeIndex/>
<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>
<homeIndex/>
<div class="row3">
<div class="row3-item" v-for="(item, index) in rowItem3" :key="index">
{{ item.title }}
</div>
</div>
</div>
</template>
<script>
import SeamlessCarousel from '@/components/slideshow/SeamlessCarousel.vue'
import homeIndex from '@/components/resourceHome/homeIndex.vue'
export default {
name: 'cleanEnergyHome',
components: {
SeamlessCarousel,
homeIndex
},
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;
}
}
}
}
.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;
}
}
.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>