Merge branch 'master' of https://git.ddmt.top/6666/123
This commit is contained in:
commit
ccfd0a375c
16
src/App.vue
16
src/App.vue
@ -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>
|
||||
|
||||
@ -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
15
src/components/resourceHome/homeIndex.vue
Normal 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
106
src/components/slideshow/SeamlessCarousel.vue
Normal 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
44
src/components/slideshow/environmentCarousel.vue
Normal 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>
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -1,40 +1,30 @@
|
||||
<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">
|
||||
<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,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;
|
||||
|
||||
@ -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-name: slidein;
|
||||
animation-delay: 0.5s;
|
||||
animation-delay: .5s;
|
||||
// animation: slidein 0.5s reverse;
|
||||
}
|
||||
|
||||
@keyframes slidein {
|
||||
from {
|
||||
width: 740px;
|
||||
}
|
||||
0% {
|
||||
width: 740px;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 180px;
|
||||
100% {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li img {
|
||||
object-fit: cover;
|
||||
|
||||
@ -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
225
src/views/resource/home/index.vue
Normal 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>
|
||||
@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<div>资源开发</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'resouRce'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user