一定要給大家推薦這個項目,作者大大真的好慷慨,這是一個很有意思的項目,感謝作者大大開源他的項目。
先放下作者大大的github地址:
https://github.com/shaozhun/vue_company_web
接下來我們來看一下動圖
項目中作者大大很明確的標註了圖片的大小,真的很贊。
接下來我們一起看項目哇
作者大大使用了這個網站,來創建可以直接引用的圖片的大小:https://dummyimage.com/
在index.html中引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="description" content="官方網站">
<meta name="author" content="SHAOZHUN">
<title>公司名稱</title>
<link rel="dns-prefetch" href="http://dummyimage.com/">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
接下來看main.js
main.js中引用了一個輪播,以及reset.css,還有路由
//main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'css/reset.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.config.productionTip = false
Vue.use(VueAwesomeSwiper)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
//App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
接下來看的是router.js,也是很普通的哦
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import Contact from '@/pages/contact/Contact'
import About from '@/pages/about/About'
import Join from '@/pages/join/Join'
import Business from '@/pages/business/Business'
import NotFound from '@/pages/notfound/NotFound'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
}, {
path: '/contact',
name: 'Contact',
component: Contact
}, {
path: '/about',
name: 'About',
component: About
}, {
path: '/join',
name: 'Join',
component: Join
}, {
path: '/business',
name: 'Business',
component: Business
}, {
path: '*',
name: 'NotFound',
component: NotFound
}
],
scrollBehavior (to, from, savePosition) {
return { x: 0, y: 0 }
}
})
我本來以爲會有一些特殊的處理的,接下來我們看對應的頁面的組件
第一個是Home頁面
home頁面中引用了好幾個組件,裏面還有直接請求數據然後傳給子組件的
<template>
<div>
<Home-Nav :navindex="0"></Home-Nav>
<Home-Swiper></Home-Swiper>
<Home-Product :list="list1"></Home-Product>
<Home-Product :list="list2"></Home-Product>
<Home-Product :list="list3"></Home-Product>
<Home-Partner></Home-Partner>
<Home-Expert></Home-Expert>
<Home-Join></Home-Join>
<Home-Footer></Home-Footer>
</div>
</template>
<script>
import HomeNav from '../common/Nav'
import HomeSwiper from './components/Swiper'
import HomeProduct from '../common/Product'
import HomePartner from './components/Partner'
import HomeExpert from './components/Expert'
import HomeJoin from './components/Join'
import HomeFooter from '../common/Footer'
import axios from 'axios'
import url from '../../modules/api.js'
export default {
name: 'Home',
components: {
HomeNav, HomeSwiper, HomeProduct, HomePartner, HomeJoin, HomeFooter, HomeExpert
},
data () {
return {
list1: [],
list2: [],
list3: []
}
},
mounted () {
axios.get(url.productLists).then(res => {
this.list1 = res.data.list
})
axios.get(url.productLists).then(res => {
this.list2 = res.data.list
})
axios.get(url.productLists).then(res => {
this.list3 = res.data.list
})
}
}
</script>
<style scoped>
</style>
首先看一下Home-Nav組件
<template>
<div>
<header class="header clear">
<nav class="navbar" v-show="navshow">
<a class="navbar-brand">
<img height="32" src="../../assets/image/logo.png" />
<!-- <img height="32" src="../../assets/image/logo.png" /> -->
</a>
<ul class="menu clear">
<router-link tag="li" to="/" :class="{fff:navindex===0}">首頁</router-link>
<router-link tag="li" to="/business" :class="{fff:navindex===1}">業務&服務</router-link>
<router-link tag="li" to="/about" :class="{fff:navindex===2}">關於公司</router-link>
<router-link tag="li" to="/join" :class="{fff:navindex===3}">加入我們</router-link>
<router-link tag="li" to="/contact" :class="{fff:navindex===4}">聯繫我們</router-link>
</ul>
<span class="more" @click="downmenuClick()">
<div class="icon-twrap" p-id="599">
<svg
class="icon"
style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="601"
>
<path
d="M925 811H99.5c-12 0.7-23.5-5.3-29.7-15.7-6.2-10.3-6.2-23.3 0-33.6s17.7-16.4 29.7-15.7H925c12-0.7 23.5 5.3 29.7 15.7 6.2 10.3 6.2 23.3 0 33.6-6.3 10.4-17.7 16.4-29.7 15.7zM925 534.7H99.5c-12 0.7-23.5-5.3-29.7-15.7-6.2-10.3-6.2-23.3 0-33.6s17.7-16.4 29.7-15.7H925c12-0.7 23.5 5.3 29.7 15.7 6.2 10.3 6.2 23.3 0 33.6-6.3 10.3-17.7 16.4-29.7 15.7zM925 279.7H99.5c-12 0.7-23.5-5.3-29.7-15.7-6.2-10.3-6.2-23.3 0-33.6s17.7-16.4 29.7-15.7H925c12-0.7 23.5 5.3 29.7 15.7 6.2 10.3 6.2 23.3 0 33.6-6.3 10.3-17.7 16.4-29.7 15.7z"
p-id="602"
/>
</svg>
</div>
</span>
</nav>
</header>
<nav class="nav-down" v-show="downmenuShow">
<ul class="downmenu clear">
<router-link tag="li" to="/" :class="{fff:navindex===0}">首頁</router-link>
<router-link tag="li" to="/business" :class="{fff:navindex===1}">業務&服務</router-link>
<router-link tag="li" to="/about" :class="{fff:navindex===2}">關於公司</router-link>
<router-link tag="li" to="/join" :class="{fff:navindex===3}">加入我們</router-link>
<router-link tag="li" to="/contact" :class="{fff:navindex===4}">聯繫我們</router-link>
</ul>
</nav>
</div>
</template>
<script>
export default {
name: 'Nav',
data () {
return {
downmenuShow: false,
navshow: true,
height: 0,
timer: null
}
},
props: {
navindex: Number
},
mounted () {
},
// created () {
// window.addEventListener('scroll', this.handleScroll)
// },
// destroyed () {
// window.removeEventListener('scroll', this.handleScroll)
// },
methods: {
downmenuClick () {
this.downmenuShow = !this.downmenuShow
},
// handleScroll (e) {
// if (this.timer) {
// clearTimeout(this.timer)
// }
// this.timer = setTimeout(() => {
// const top = document.documentElement.scrollTop
// if (this.height < top) {
// this.navshow = false
// this.height = top
// } else {
// this.navshow = true
// this.height = top
// }
// }, 50)
// }
}
}
</script>
<style scoped>
.clear::after {
content: "";
display: block;
clear: both;
}
.fff {
color: #fff !important;
pointer-events: none;
}
header {
position: fixed;
background: #043985;
z-index: 99;
top: 0;
left: 0;
right: 0;
color: rgba(255, 255, 255, 0.5);
}
.navbar-brand {
display: inline-block;
padding: 16px 14px;
}
.header .navbar-brand {
float: left;
background-color: #fa541c;
}
.header .navbar-brand img {
height: 32px;
width: 152px;
vertical-align: middle;
border-style: none;
}
.menu {
float: right;
}
.menu li {
float: left;
padding: 24px 17px;
font-size: 15px;
cursor: pointer;
}
.nav-down ul li {
margin-left: 50%;
transform: translateX(-25%);
}
.more {
display: none;
float: right;
margin-right: 15px;
margin-top: 15px;
border: 1px solid #cccccc;
padding: 10px;
}
.nav-down {
z-index: 100;
position: fixed;
top: 64px;
left: 0;
right: 0;
background: #043985;
color: rgba(255, 255, 255, 0.5);
}
.downmenu li {
padding: 10px;
font-size: 16px;
cursor: pointer;
}
header li:hover,
.nav-down li:hover {
color: rgba(255, 255, 255, 0.75);
}
@media screen and (max-width: 767px) {
.menu,
.language {
display: none;
}
.more {
display: block;
}
}
@media screen and (min-width: 767px) {
.nav-down {
display: none;
}
}
@media screen and (max-width: 496px) {
.header .navbar-brand {
float: left;
background-color: #043985;
}
.downmenu {
border-top: 1px solid #fff;
height: 181px;
}
.nav-down {
overflow: hidden;
animation: mymove 0.5s;
}
@keyframes mymove {
from {
height: 0px;
}
to {
height: 181px;
}
}
}
</style>
輪播在Swiper.vue中
<template>
<div class="banner-wrap">
<div class="wrapper">
<swiper :options="swiperOptions" v-if="list.length">
<swiper-slide v-for="item in list" :key="item.id">
<div class="imgwrapepr">
<div class="banner-info">
<h1>{{item.h1}}</h1>
<!-- <p>{{$t('lang.slide1p')}}</p> -->
</div>
<img class="bannerimg" :src="item.url" />
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
</template>
<script>
// swiper options example:
import axios from 'axios'
import url from '../../../modules/api.js'
export default {
name: 'HomeSwiper',
data () {
return {
swiperOptions: {
loop: true,
pagination: '.swiper-pagination',
autoplay: 4000
},
list: []
}
},
mounted () {
axios.get(url.bannerLists).then(res => {
this.list = res.data.img
})
}
}
</script>
<style scoped>
.banner-wrap {
display: flex;
justify-content: center;
width: 100%;
height: 734px;
overflow: hidden;
position: relative;
}
.wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 0;
}
.imgwrapepr {
height: 884px;
width: 100%;
margin: 0 auto;
position: relative;
}
.bannerimg {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.banner-info {
position: absolute;
top: 300px;
left: 50%;
transform: translateX(-50%);
}
.banner-info h1 {
color: #fff;
font-size: 50px;
font-weight: 300;
line-height: 50px;
margin-bottom: 25px;
}
.banner-info p {
color: #fff;
font-size: 17px;
font-weight: 400;
}
.wrapper >>> .swiper-pagination {
position: absolute;
bottom: 180px;
}
@media screen and (max-width: 767px) {
.banner-info h1 {
width: 100%;
word-break: keep-all;
word-break: normal;
padding-right: 30px;
}
.banner-info {
width: 60%;
word-wrap: break-word;
word-break: normal;
text-align: center;
margin-left: 5%;
padding-right: 5%;
position: absolute;
top: 300px;
}
}
@media screen and (max-width: 496px) {
.banner-wrap {
height: 586px;
}
.banner-info {
top: 260px;
}
.swiper-pagination {
bottom: 340px !important;
}
.banner-info h1 {
font-size: 30px;
line-height: 38px;
word-break: keep-all;
}
}
</style>
接下來是Partner.vue組件
<template>
<div class="container">
<h2 class="text-center">合作伙伴</h2>
<p class="text-center">很榮幸,能與衆多行業優秀客戶共同成長</p>
<div class="row">
<div class="item" v-for="item in list" :key="item.id">
<img class="w-100" :src="item.url" />
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import url from '../../../modules/api.js'
export default {
name: 'Partner',
data () {
return {
list: []
}
},
mounted () {
axios.get(url.partnerList).then(res => {
this.list = res.data.list
})
}
}
</script>
<style scoped>
.container {
margin-top: 50px;
background: #ffffff;
}
.container h2 {
font-weight: 500;
font-size: 40px;
padding-top: 30px;
padding-bottom: 10px;
}
.text-center {
text-align: center;
}
.row {
width: 1175px;
padding-top: 10px;
margin: 0 auto;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-bottom: 40px;
}
img {
width: 170px;
height: 84.2px;
padding: 0 10px 0 0;
}
@media screen and (max-width: 1175px) {
.row {
max-width: 70%;
}
.item {
width: 16.66667%;
}
img {
width: 80px;
height: 47.36px;
}
}
@media screen and (max-width: 767px) {
.row {
max-width: 70%;
}
.item {
width: 33.33333%;
}
img {
width: 160px !important;
height: 84.2px !important;
}
}
@media screen and (max-width: 496px) {
.row {
max-width: 70%;
}
.item {
width: 33.33333%;
}
img {
width: 80px !important;
height: 47.36px !important;
}
}
</style>
Expert.vue同Partner.vue的類似,都是獲取數據再進行渲染
<template>
<div class="container">
<h2 class="text-center">專家智庫</h2>
<p class="text-center">很自豪,能爲各領域的發展提供滿意方案</p>
<div class="row">
<div class="item" v-for="item in list" :key="item.id">
<img class="w-100" :src="item.url" />
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import url from '../../../modules/api.js'
export default {
name: 'Partner',
data () {
return {
list: []
}
},
mounted () {
axios.get(url.expertList).then(res => {
this.list = res.data.list
})
}
}
</script>
<style scoped>
.container {
margin: 50px 0;
background: #ffffff;
}
.container h2 {
font-weight: 500;
font-size: 40px;
padding-top: 30px;
padding-bottom: 10px;
}
.text-center {
text-align: center;
}
.row {
width: 1175px;
margin: 0 auto;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-bottom: 40px;
}
img {
width: 240px;
height: 240px;
border-radius: 50%;
margin: 30px 30px 0 10px;
}
@media screen and (max-width: 1175px) {
.row {
max-width: 86%;
}
.item {
width: 25%;
}
img {
width: 150px !important;
height: 150px !important;
}
}
@media screen and (max-width: 767px) {
.row {
max-width: 86%;
}
.item {
width: 50%;
}
img {
width: 150px !important;
height: 150px !important;
}
}
/* @media screen and (max-width: 496px) {
.row {
max-width: 86%;
}
.item {
width: 50%;
}
img {
width: 200px !important;
height: 200px !important;
}
} */
</style>
我發現作者大大用的mock數據也挺有意思的,可以看一下api.js
let url = {
bannerLists: '/bannerimg',
productLists: '/productList',
partnerList: '/partnerList',
expertList: '/expertList',
contactList: '/contactList',
producDetailtList: '/producDetailtList'
}
// 開發環境和生產環境的切換
let host = 'http://rap2.taobao.org:38080/app/mock/247553'
for (let key in url) {
if (url.hasOwnProperty(key)) {
url[key] = host + url[key]
}
}
export default url
/* */
接下來是join.vue頁面
<template>
<div class="container">
<div class="inner">
<h2>
加入<strong>公司COMPANY<sup>®</sup></strong>
</h2>
<hr />
<p>互聯網已成爲這個時代的基礎設施,利用不斷演進的技術,讓我們一起構建更加光輝燦爛的未來.</p>
<p>
<a href="https://jobs.51job.com/" target="_blank" class="submit">投遞簡歷</a>
</p>
<p class="small">爲便於檢索,請按統一格式填寫郵件標題:職位-姓名,如:AAA-張三</p>
</div>
</div>
</template>
<script>
export default {
name: 'Join'
}
</script>
<style scoped>
.container {
background-image: url("http://dummyimage.com/1980x500/79aff2");
background-position: top center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
height: 500px;
position: relative;
display: flex;
justify-content: center;
}
.container .inner {
background: rgba(255, 255, 255, 0.9);
position: absolute;
top: 80px;
margin-bottom: 30px;
text-align: center;
width: 85%;
margin: 0 auto;
}
.container .inner h2 {
padding: 40px 10px;
font-size: 30px;
}
.container .inner h2 strong {
font-size: 30px;
font-weight: bold;
}
.container .inner p {
padding: 15px 10px;
font-size: 16px;
}
.submit {
font-size: 20px;
line-height: 30px;
text-align: center;
letter-spacing: normal;
color: #fff;
background: #007bff;
border-radius: 4.8px;
padding: 15px;
}
.small {
font-size: 14px !important;
color: #6c757d !important;
margin-bottom: 40px;
}
</style>
接下來看這個頁面
//Contact.vue
<template>
<div>
<Home-Nav :navindex="4"></Home-Nav>
<Home-Banner :list="list"></Home-Banner>
<Home-Product1></Home-Product1>
<Home-Footer></Home-Footer>
</div>
</template>
<script>
import HomeNav from '../common/Nav'
import HomeBanner from '../common/Banner'
import HomeProduct1 from './components/ContactItem'
import HomeFooter from '../common/Footer'
export default {
name: 'Home',
components: {
HomeNav, HomeFooter, HomeProduct1, HomeBanner
},
data () {
return {
list: [{
id: 4,
h2: '聯繫我們',
p: '我們珍惜您每一次的聯繫,冀望將來光輝的前景。'
}]
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Banner.vue
<template>
<div class="container" :style="styleObj">
<div class="inner">
<h2>{{list[0].h2}}</h2>
<div class="divider my-3"></div>
<p>{{list[0].p}}</p>
</div>
</div>
</template>
<script>
export default {
name: 'Banner',
props: {
list: Array
},
data () {
return {
styleObj: '',
styleObj1: { backgroundImage: 'url(http://dummyimage.com/1851x500/f2b479)' },
styleObj2: { backgroundImage: 'url(http://dummyimage.com/1851x500/9179f2)' },
styleObj3: { backgroundImage: 'url(http://dummyimage.com/1851x500/84f279)' },
styleObj4: { backgroundImage: 'url(http://dummyimage.com/1851x500/f279a7)' }
}
},
mounted () {
if (this.list[0].id === 1) {
this.styleObj = this.styleObj1
}
if (this.list[0].id === 2) {
this.styleObj = this.styleObj2
}
if (this.list[0].id === 3) {
this.styleObj = this.styleObj3
}
if (this.list[0].id === 4) {
this.styleObj = this.styleObj4
}
}
}
</script>
<style scoped>
.container {
background-position: top center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
height: 500px;
position: relative;
display: flex;
justify-content: center;
}
.container .inner {
position: absolute;
top: 80px;
margin-bottom: 30px;
text-align: center;
margin: 0 auto;
color: #fff;
padding: 0 30px;
}
.container .inner h2 {
margin-top: 120px;
padding-bottom: 20px;
font-size: 50px;
border-bottom: 2px solid white;
}
.container .inner p {
padding: 15px 10px;
font-size: 16px;
}
</style>
ContactItem.vue
<template>
<div class="container">
<div class="card-deck services">
<div class="card border-0 rounded-0" v-for="item in list" :key="item.id">
<img class="w-100" :src="item.url" />
<div class="card-body text-center py-5">
<h5 class="card-title font-weight-bold">{{item.h2}}</h5>
<p class="card-text">
{{item.number}}
<br />
{{item.add}}
</p>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import url from '../../../modules/api.js'
export default {
name: 'Product',
data () {
return {
list: []
}
},
mounted () {
axios.get(url.contactList).then(res => {
this.list = res.data.list
})
}
}
</script>
<style scoped>
.container {
max-width: 1150px;
margin: 0 auto;
margin-top: 50px;
}
@media screen and (min-width: 576px) {
.card-deck {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin-right: -15px;
margin-left: -15px;
}
.card-deck .card {
-ms-flex: 1 0 0%;
flex: 1 0 0%;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
}
/* @media screen and (max-width: 576px) {
} */
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 5px;
margin: 0 20px;
margin-bottom: 20px;
}
.w-100 {
width: 100% !important;
}
img {
vertical-align: middle;
border-style: none;
}
.text-center {
text-align: center !important;
}
.font-weight-bold {
font-weight: 700 !important;
}
.card-title {
font-size: 22px;
margin-top: 30px;
margin-bottom: 10px;
}
.card-text:last-child {
margin-bottom: 0;
}
.card-text {
line-height: 20px;
padding-bottom: 30px;
}
img {
height: 241.97px;
}
@media screen and (max-width: 767px) {
img {
height: 180.97px !important;
width: 100px !important;
}
}
@media screen and (max-width: 487px) {
img {
height: 241.97px !important;
}
}
</style>
//Footer.vue
<template>
<div class="container">
<p>
<small>
Copyright © 2013-2020 COMPANY<sup>®</sup>
All rights reserved.
<a href="http://www.beian.miit.gov.cn/" target="_blank">粵ICP備XXXXXXXX號-X</a>
</small>
</p>
</div>
</template>
<script>
export default {
name: 'Footer'
}
</script>
<style scoped>
.container {
max-width: 100%;
}
p {
padding: 50px;
text-align: center;
}
</style>
關於公司頁面和前面的應該是比較類似的
<template>
<div>
<Home-Nav :navindex="2"></Home-Nav>
<Home-Banner :list="list"></Home-Banner>
<Home-Main></Home-Main>
<Home-Footer></Home-Footer>
</div>
</template>
<script>
import HomeNav from '../common/Nav'
import HomeBanner from '../common/Banner'
import HomeMain from './components/Main'
import HomeFooter from '../common/Footer'
export default {
name: 'Home',
components: {
HomeNav, HomeFooter, HomeBanner, HomeMain
},
data () {
return {
list: [{
id: 2,
h2: '關於公司',
p: '我們着眼未來,相信前程似錦'
}]
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
//Main.vue
<template>
<div class="container">
<div class="main clear">
<div class="main-inner">
<h2>
<strong>公司COMPANY</strong>
</h2>
<p class="text-muted">成功源於共享,創新成就未來</p>
<hr />
<p>
<strong>公司COMPANY</strong>
於2099年13月成立,是一家公司COMPANY公司COMPANY公司COMPANY公司COMPANY公司COMPANY公司COMPANY公司COMPANY公司COMPANY公司COMPANY公司COMPANY公司COMPANY公司COMPANY公司COMPANY公司COMPANY公司COMPANY。
</p>
<p>以“構建戰略級科技創新服務生態系統”爲使命,公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹公司介紹</p>
</div>
<div class="box">
<img src="http://dummyimage.com/450x490/79aff2" />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Banner'
}
</script>
<style scoped>
.clear::after {
display: block;
clear: both;
content: "";
}
.container {
overflow: hidden;
}
.main {
margin-top: 80px;
position: relative;
margin-left: 30px;
}
.main-inner {
background: #fff;
padding: 0 40px;
float: left;
max-width: 50%;
position: absolute;
right: 690px;
}
@media screen and (max-width: 1360px) {
.main-inner {
right: 600px;
}
.box {
margin-right: 0 !important;
}
}
@media screen and (max-width: 1200px) {
.main-inner {
right: 20%;
}
.box {
opacity: 0;
}
}
@media screen and (max-width: 756px) {
.main {
height: 600px;
}
.main-inner {
max-width: 90% !important;
right: 5%;
}
.box {
display: none;
}
}
.main h2 {
font-size: 36px;
font-weight: bolder;
/* margin-block-start: 0.83em;
margin-block-end: 0.83em; */
margin-top: 0.83rem;
margin-bottom: 0.83rem;
}
.main p {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
margin-top: 0;
margin-bottom: 1rem;
}
.box {
width: 450px;
height: 490px;
float: right;
margin-right: 20%;
margin-top: -20px;
}
.box img {
width: 450px;
height: 490px;
}
@media screen and (max-width: 496px) {
.main {
margin-top: 30px;
padding: 10%;
height: 700px;
}
.main-inner {
max-width: 90% !important;
right: 10%;
}
}
</style>
//Join.vue
<template>
<div>
<Home-Nav :navindex="3"></Home-Nav>
<Home-Banner :list="list"></Home-Banner>
<Join-Item></Join-Item>
<Home-Join></Home-Join>
<Home-Footer></Home-Footer>
</div>
</template>
<script>
import HomeNav from '../common/Nav'
import HomeBanner from '../common/Banner'
import JoinItem from './components/JoinItem'
import HomeJoin from '../home/components/Join'
import HomeFooter from '../common/Footer'
export default {
name: 'Home',
components: {
HomeNav, HomeFooter, HomeBanner, JoinItem, HomeJoin
},
data () {
return {
list: [{
id: 3,
h2: '加入我們',
p: '互聯網已成爲這個時代的基礎設施,利用不斷演進的技術,讓我們一起構建光輝燦爛的未來。'
}]
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
//JoinItem.vue
<template>
<div class="container">
<div class="card-deck services">
<div class="card border-0 rounded-0" v-for="item in list" :key="item.id">
<img class="w-100" :src="item.url" />
<div class="card-body text-center py-5">
<h5 class="card-title font-weight-bold">{{item.p}}</h5>
<p class="card-text">{{item.p1}}</p>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import url from '../../../modules/api.js'
export default {
name: 'Product',
data () {
return {
list: []
}
},
mounted () {
axios.get(url.contactList).then(res => {
this.list = res.data.list
})
}
}
</script>
<style scoped>
.container {
max-width: 1150px;
margin: 0 auto;
padding: 50px 0;
}
p {
word-break: keep-all;
}
@media screen and (min-width: 576px) {
.card-deck {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin-right: -15px;
margin-left: -15px;
}
.card-deck .card {
-ms-flex: 1 0 0%;
flex: 1 0 0%;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
}
/* @media screen and (max-width: 576px) {
} */
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 5px;
margin: 0 20px;
margin-bottom: 20px;
}
.w-100 {
width: 100% !important;
}
img {
vertical-align: middle;
border-style: none;
}
.text-center {
text-align: center !important;
}
.font-weight-bold {
font-weight: 700 !important;
}
.card-title {
font-size: 22px;
margin-top: 30px;
margin-bottom: 10px;
}
.card-text:last-child {
margin-bottom: 0;
}
.card-text {
line-height: 20px;
padding-bottom: 30px;
}
img {
height: 241.97px;
}
@media screen and (max-width: 767px) {
img {
height: 180.97px !important;
width: 100px !important;
}
}
@media screen and (max-width: 487px) {
img {
height: 241.97px !important;
}
}
</style>
最後一個頁面也是結合之前的頁面進行組合的
<template>
<div>
<Home-Nav :navindex="1"></Home-Nav>
<Home-Banner :list="list"></Home-Banner>
<Business-Item :businessList="businessList"></Business-Item>
<Home-Footer></Home-Footer>
</div>
</template>
<script>
import HomeNav from '../common/Nav'
import HomeBanner from '../common/Banner'
import BusinessItem from '../common/BussinessItem'
import HomeFooter from '../common/Footer'
import axios from 'axios'
import url from '../../modules/api.js'
export default {
name: 'Bussiness',
components: {
HomeNav, HomeFooter, HomeBanner, BusinessItem
},
data () {
return {
list: [{
id: 1,
h2: '業務&服務',
p: '我們從企業業務實際出發,提出富有前瞻性的解決方案,並將策略和執行結合起來。'
}],
businessList: []
}
},
mounted () {
axios.get(url.producDetailtList).then(res => {
this.businessList = res.data.list
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
這個項目還是一個響應式的項目,用了媒體查詢適配了移動端
作者大大真的非常慷慨,這個項目簡直即拿即用,非常完美,感恩,讓我們看見完美的項目