0
点赞
收藏
分享

微信扫一扫

vue实战入门基础篇九：从零开始仿门户网站实例-移动端界面适配

老王420 2022-03-13 阅读 97
vue.js前端javascript

上一篇：

vue实战入门基础篇八：从零开始仿门户网站实例-全局检索实现https://blog.csdn.net/m0_37631110/article/details/123045374一、目录

第一篇：前期准备工作

第二篇：开发框架搭建

第三篇：公共组件实现

第四篇：网站首页实现

第五篇：关于我们实现

第六篇：新闻资讯实现

第七篇：业务介绍及加入我们实现

第八篇：全局检索实现

第九篇：移动端界面适配

第十篇：代码重构并发布项目

二、适配方式

移动端适配方式总结：

  1. 尺寸尽量写成百分比自适应的方式。
  2. 通过js代码判断浏览器类型是否是移动端的。
  3. 可以根据js代码引入不同的css样式定义文件，实现界面的适配。
  4. 可以使用vue的css动态设定来实现样式的适配，具体如下：

2.1演示视频

vue实战入门基础篇九：移动端界面适配

2.2效果预览

2.3适配引入：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="applicable-device" content="mobile">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">

2.4判断浏览器是否是移动端

_isMobile() { //判断是否是移动端
	let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
	return flag;
}

2.5首页移动端适配代码

首页代码：

<script>
	import Swiper from 'swiper';
	import 'swiper/dist/css/swiper.min.css';


	export default {
		data() {
			return {
				left: 0,
				banerHeight: '573px',
				news_tab: 1,
				ismobel: navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				),
				news: [{
					id: 1,
					title: '外媒：乌总统公布最新伤亡数字',
					date: '02-02',
					img: './src/assets/img001.png',
					content: '【俄乌开战第二日最新局势图】财联社2月25日电，俄罗斯与乌克兰武装冲突昨日正式开始后，开战已超24小时。'
				}, {
					id: 2,
					title: '外媒：乌总统公布最新伤亡数字',
					date: '02-03',
					img: './src/assets/img002.png',
					content: '【俄乌开战第二日最新局势图】财联社2月25日电，俄罗斯与乌克兰武装冲突昨日正式开始后，开战已超24小时。'
				}, {
					id: 3,
					title: '外媒：乌总统公布最新伤亡数字',
					date: '02-04',
					img: './src/assets/img003.png',
					content: '【俄乌开战第二日最新局势图】财联社2月25日电，俄罗斯与乌克兰武装冲突昨日正式开始后，开战已超24小时。'
				}],
				inner_width: 1024,
				cases: [
					[{
						id: 1,
						name: '百度一下',
						logo: './src/assets/img009.png'
					}, {
						id: 2,
						name: '百度一下',
						logo: './src/assets/img010.png'
					}, {
						id: 3,
						name: '百度一下',
						logo: './src/assets/img011.png'
					}, {
						id: 4,
						name: '百度一下',
						logo: './src/assets/img012.png'
					}],
					[{
						id: 5,
						name: '百度一下',
						logo: './src/assets/img013.png'
					}, {
						id: 6,
						name: '百度一下',
						logo: './src/assets/img014.png'
					}, {
						id: 7,
						name: '百度一下',
						logo: './src/assets/img015.png'
					}, {
						id: 8,
						name: '百度一下',
						logo: './src/assets/img016.png'
					}]
				],
				tabitemsPaddingTop: '30px',
				tabitemsPaddingBottom: '30px',
				aboutPanelPaddingTop: '50px',
				aboutPanelPaddingBottom: '50px',
				directionPanelPaddingTop: '100px',
				directionPanelPaddingTop: '100px',
			}
		},
		computed: {

		},
		mounted() {
			this.inner_width = document.querySelector(".inner").offsetWidth;

			if (this.ismobel) {
				this.tabitemsPaddingTop = '10px';
				this.tabitemsPaddingBottom = '10px';
				this.aboutPanelPaddingTop = '10px';
				this.aboutPanelPaddingBottom = '10px';
				this.directionPanelPaddingTop = '10px';
				this.directionPanelPaddingTop = '10px';
				this.banerHeight = "400px";
				this.left = -((1340 - this.inner_width) / 2);
			}

			var mySwiper = new Swiper('.swiper-container', {
				autoplay: 3000, //可选选项，自动滑动
				pagination: '.swiper-pagination',
				height: this.banerHeight, //你的slide高度
				lazyLoading: true,
				lazyLoadingInPrevNext: true,
				// loop : true,
				effect: 'fade',
				fade: {
					crossFade: false,
				}
			})
		},
		methods: {
			newstab: function(index) { //点击后打开新闻详情页并传递id
				this.news_tab = index;
				this.news = [{
					id: 1,
					title: 'XXX项目已近发布' + new Date().getTime(),
					date: '02-02',
					img: './src/assets/img001.png',
					content: '【俄乌开战第二日最新局势图】财联社2月25日电，俄罗斯与乌克兰武装冲突昨日正式开始后，开战已超24小时。'
				}, {
					id: 2,
					title: '外媒：乌总统公布最新伤亡数字',
					date: '02-03',
					img: './src/assets/img002.png',
					content: '【俄乌开战第二日最新局势图】财联社2月25日电，俄罗斯与乌克兰武装冲突昨日正式开始后，开战已超24小时。'
				}, {
					id: 3,
					title: '外媒：乌总统公布最新伤亡数字',
					date: '02-04',
					img: './src/assets/img003.png',
					content: '【俄乌开战第二日最新局势图】财联社2月25日电，俄罗斯与乌克兰武装冲突昨日正式开始后，开战已超24小时。'
				}];
				this.$forceUpdate();
			},
			opennews: (app, id) => { //点击后打开新闻详情页并传递id
				app.$router.push("Detail?id=" + id)
			},
			openPage: (app, page) => {
				app.$router.push(page)
			}
		}
	}
</script>

<template>
	<div>
		<div>
			<div class="banner">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="banner_item">
								<img src="../assets/banner1.png" style="height: 100%;position: relative;"
									:style="{left:left+'px'}" />
							</div>
						</div>
						<div class="swiper-slide">
							<div class="banner_item">
								<img src="../assets/banner2.png" style="height: 100%;position: relative;"
									:style="{left:left+'px'}" />
							</div>
						</div>
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div class="news">
				<div class="inner">
					<div class="title">
						<span class="line"></span>
						<span>新闻资讯</span>
						<span class="sub_title">/NEWS</span>
					</div>
					<div class="pannel">
						<div class="tabs flex">
							<div class="flex-item">
								<div class="tab_item " @click="newstab(1)" :class="{tab_item_active:news_tab==1}">
									<div>公司新闻</div>
								</div>
								<div class="tab_item" @click="newstab(2)" :class="{tab_item_active:news_tab==2}">
									<div>项目动态</div>
								</div>
							</div>
							<div class="more_btn_pannel" v-if="!ismobel">
								<span class="more_btn" @click="openPage(this,'News')">MORE</span>
							</div>
						</div>
						<div class="tabitems " :class="{flex:!ismobel}">
							<div class="  flex" v-if="!ismobel" v-for="(item, index) in news"
								:style="{ width: ((inner_width)/3) + 'px' }" :key="item.id">
								<div v-if="index!=0" class="news_item_split"></div>
								<div class="item "
									:style="{ width: (((inner_width)/3)-((index==0||index==(news.length-1))?15:30)-60) + 'px' }"
									@click="opennews(this,item.id)">
									<div class="item_panel">
										<div class="new_title">{{item.title}}</div>
										<div class="">
											<img :src="item.img" />
										</div>
										<div class="date">
											{{item.date}}
										</div>
										<div class="desc">
											{{item.content}}
										</div>
									</div>
								</div>
								<div v-if="index!=news.length-1" class="news_item_split"></div>
							</div>
							<div class="  " v-if="ismobel" v-for="(item, index) in news" :key="item.id">
								<div class="item mobelitem " @click="opennews(this,item.id)">
									<div class="item_panel flex">
										<div style="width:100px;">
											<img :src="item.img" />
										</div>
										<div class="flex-item" style="padding-left:10px">
											<div class="new_title">{{item.title}}</div>
											<div class="desc">
												{{item.content}}
											</div>
											<div class="date">
												{{item.date}}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="about">
				<div class="inner">
					<div class="title flex">
						<div class="flex-item">
							<span class="line"></span>
							<span>关于我们</span>
							<span class="sub_title">/ABOUT US</span>
						</div>
						<div class="more_btn_pannel" v-if="!ismobel">
							<span class="more_btn" @click="openPage(this,'About')">MORE</span>
						</div>
					</div>
					<div class="flex about_panel" v-if="!ismobel">
						<div class="flex-item img">
							<img src="../assets/img004.png">
						</div>
						<div class="flex-item about_desc">
							<div class="about_title">贝贝网络科技有限公司（简称：贝贝网络）</div>
							<div class="about_line flex">
								<div class="about_filed">
									创 始 人：
								</div>
								<div class="flex-item about_filed_value">军军君</div>
							</div>
							<div class="about_line flex">
								<div class="about_filed">
									公司理念：
								</div>
								<div class="flex-item about_filed_value">公司专注于互联网IT开发，坚持科技创新，开拓市场，做一个有温度的科技公司</div>
							</div>
							<div class="about_line flex">
								<div class="about_filed">
									公司简介：
								</div>
								<div class="flex-item about_filed_value">
									贝贝网络科技有限公司成立于19xx年，是一家专注于xx产品和...产品研究、开发、生产及销售的高科技企业，总部及研发基地设立于……
								</div>
							</div>
						</div>
					</div>
					<div class=" about_panel" v-if="ismobel">
						<div class=" img" style="margin-top: 10px;">
							<img src="../assets/img004.png" style="width: 100%;">
						</div>
						<div class="about_desc" style="padding-left: 0px;">
							<div class="about_title">贝贝网络科技有限公司（简称：贝贝网络）</div>
							<div class="about_line flex">
								<div class="about_filed">
									创 始 人：
								</div>
								<div class="flex-item about_filed_value">军军君</div>
							</div>
							<div class="about_line flex">
								<div class="about_filed">
									公司理念：
								</div>
								<div class="flex-item about_filed_value">公司专注于互联网IT开发，坚持科技创新，开拓市场，做一个有温度的科技公司</div>
							</div>
							<div class="about_line flex">
								<div class="about_filed">
									公司简介：
								</div>
								<div class="flex-item about_filed_value">
									贝贝网络科技有限公司成立于19xx年，是一家专注于xx产品和...产品研究、开发、生产及销售的高科技企业，总部及研发基地设立于……
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="direction">
				<div class="inner">
					<div class="title">
						<span class="line"></span>
						<span>业务方向</span>
						<span class="sub_title">/DIRECTION</span>
					</div>
					<div class="pannel">
						<div class="flex" v-if="!ismobel">
							<div class="flex-item direction_item">
								<div class="icon">
									<img src="../assets/img005.png">
								</div>
								<div>
									<div class="direction_title">互联网领域</div>
									<div class="direction_esc">贝贝网络会利于互联网领域的创新开发，科技创新，共同升级提高</div>
								</div>
							</div>
							<div class="direction-item-split"></div>
							<div class="flex-item direction_item">
								<div class="icon">
									<img src="../assets/img006.png">
								</div>
								<div>
									<div class="direction_title">智慧物联网领域</div>
									<div class="direction_esc">贝贝网络会利于互联网领域的创新开发，科技创新，共同升级提高</div>
								</div>
							</div>
							<div class="direction-item-split"></div>
							<div class="flex-item direction_item">
								<div class="icon">
									<img src="../assets/img007.png">
								</div>
								<div>
									<div class="direction_title">元宇宙领域</div>
									<div class="direction_esc">贝贝网络会利于互联网领域的创新开发，科技创新，共同升级提高</div>
								</div>
							</div>
							<div class="direction-item-split"></div>
							<div class="flex-item direction_item">
								<div class="icon">
									<img src="../assets/img008.png">
								</div>
								<div>
									<div class="direction_title">智能农业领域</div>
									<div class="direction_esc">贝贝网络会利于互联网领域的创新开发，科技创新，共同升级提高</div>
								</div>
							</div>
						</div>
						<div v-if="ismobel">
							<div class="flex">
								<div class="flex-item direction_item">
									<div class="icon">
										<img src="../assets/img005.png">
									</div>
									<div>
										<div class="direction_title">互联网领域</div>
										<div class="direction_esc">贝贝网络会利于互联网领域的创新开发，科技创新，共同升级提高</div>
									</div>
								</div>
								<div class="flex-item direction_item">
									<div class="icon">
										<img src="../assets/img006.png">
									</div>
									<div>
										<div class="direction_title">智慧物联网领域</div>
										<div class="direction_esc">贝贝网络会利于互联网领域的创新开发，科技创新，共同升级提高</div>
									</div>
								</div>
							</div>
							<div class="flex" style="margin-top: 20px;">
								<div class="flex-item direction_item">
									<div class="icon">
										<img src="../assets/img007.png">
									</div>
									<div>
										<div class="direction_title">元宇宙领域</div>
										<div class="direction_esc">贝贝网络会利于互联网领域的创新开发，科技创新，共同升级提高</div>
									</div>
								</div>
								<div class="flex-item direction_item">
									<div class="icon">
										<img src="../assets/img008.png">
									</div>
									<div>
										<div class="direction_title">智能农业领域</div>
										<div class="direction_esc">贝贝网络会利于互联网领域的创新开发，科技创新，共同升级提高</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="case">
				<div class="inner">

					<div class="flex title">
						<div class="flex-item">
							<span class="line"></span>
							<span>成功案例</span>
							<span class="sub_title">/CASE</span>
						</div>
						<div class="more_btn_pannel" v-if="!ismobel">
							<span class="more_btn" @click="openPage(this,'Case')">MORE</span>
						</div>
					</div>
					<div class="pannel">
						<div v-if="!ismobel" class="line  flex" v-for="(item, index) in cases" :key="item.id">
							<div class=" flex" v-for="(subitem, subindex) in item"
								:style="{ width: ((inner_width)/4) + 'px' }" :key="subitem.id">
								<div v-if="subindex!=0" class="case_item_split"></div>
								<div class="case_item"
									:style="{width: (((inner_width)/4)-((subindex==0||subindex==(item.length-1))?15:30)-10) + 'px',height: (inner_width-30*3)/4+'px'}">
									<div class="case_item_inner">
										<div class="case_item_logo"
											:style="{height: ((inner_width-30*3)/4 - 80)+'px',lineHeight: ((inner_width-30*3)/4 - 60)+'px'}">
											<img :src="subitem.logo">
										</div>
										<div class="desc">{{subitem.name}}</div>
									</div>
								</div>
								<div v-if="index!=item.length-1" class="case_item_split"></div>
							</div>
						</div>
						<div v-if="ismobel" class="line" v-for="(item, index) in cases" :key="item.id">
							<div class=" " v-for="(subitem, subindex) in item" :key="subitem.id">
								<div class="case_item" style="" :style="{height: (inner_width-30*3)/2+'px'}">
									<div class="case_item_inner">
										<div class="case_item_logo"
											:style="{height: ((inner_width-30*3)/2 - 80)+'px',lineHeight: ((inner_width-30*3)/2 - 60)+'px'}">
											<img :src="subitem.logo" style="width: 20%;margin-top: 20px;">
										</div>
										<div class="desc">{{subitem.name}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="team">
				<div class="inner">
					<div class="title">
						<span class="line"></span>
						<span>团队介绍</span>
						<span class="sub_title">/TEAM</span>
					</div>
					<div class="pannel">
						<div class="desc" v-if="!ismobel">
							贝贝网络科技有限公司成立于19xx年，是一家专注于xx产品和...产品研究、开发、生产及销售的高科技企业，总部及研发基地设立于风景秀丽的广州软件园，并在全国各地设有分支机构。公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业。公司自成立以来，始终坚持以人才为本、诚信立业的经营原则，荟萃业界精英，将国外先进的信息技术、管理方法及企业经验与国内企业的具体实际相结合，为企业供给全方位的解决方案…
						</div>
						<div class="flex line" v-if="!ismobel">
							<div class="flex-item team_item">
								<div class="header">
									<img src="../assets/img016.png" />
								</div>
								<div class="team_item_title">军军君</div>
								<div class="team_item_desc">
									<span>创始人</span>
									<span>董事长</span>
								</div>
							</div>
							<div class="team_item_split"></div>
							<div class="flex-item team_item">
								<div class="header">
									<img src="../assets/img016.png" />
								</div>
								<div class="team_item_title">军军君</div>
								<div class="team_item_desc">
									<span>创始人</span>
									<span>董事长</span>
								</div>
							</div>
							<div class="team_item_split"></div>
							<div class="flex-item team_item">
								<div class="header">
									<img src="../assets/img016.png" />
								</div>
								<div class="team_item_title">军军君</div>
								<div class="team_item_desc">
									<span>创始人</span>
									<span>董事长</span>
								</div>
							</div>
						</div>
						<div class="desc" v-if="ismobel"
							style="line-height: 25px;height: 75px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">
							贝贝网络科技有限公司成立于19xx年，是一家专注于xx产品和...产品研究、开发、生产及销售的高科技企业，总部及研发基地设立于风景秀丽的广州软件园，并在全国各地设有分支机构。公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业。公司自成立以来，始终坚持以人才为本、诚信立业的经营原则，荟萃业界精英，将国外先进的信息技术、管理方法及企业经验与国内企业的具体实际相结合，为企业供给全方位的解决方案…
						</div>
						<div class=" line" v-if="ismobel" style="padding-top:10px">
							<div class=" team_item" style="padding-top: 10px;padding-bottom: 10px;">
								<div class="header">
									<img src="../assets/img016.png" />
								</div>
								<div class="team_item_title">军军君</div>
								<div class="team_item_desc">
									<span>创始人</span>
									<span>董事长</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style>
	.banner {
		height: v-bind(banerHeight);
		overflow: hidden;
		/* 后续此处的高度可以根据图片的大小进行换算 */
	}

	.swiper-container {
		width: 100%;
		height: v-bind(banerHeight);
	}

	.swiper-container .banner_item {
		height: v-bind(banerHeight);
		position: relative;
	}

	.title {
		height: 60px;
		line-height: 60px;
		border-bottom: 1px solid #b5b5b5;
	}

	.title .line {
		display: inline-block;
		width: 2px;
		height: 30px;
		margin-right: 15px;
		background: #f85c29;
		vertical-align: middle;
	}

	.title span {
		font-size: 22px;
	}

	.title sub_title {
		font-size: 16px;
		color: #999999
	}

	.news {
		background: #fff;
		padding-bottom: v-bind(tabitemsPaddingTop);
	}

	.tabs {
		height: 60px;
		line-height: 60px;
	}

	.tabs .tab_item {
		height: 100%;
		width: 100px;
		text-align: center;
		font-size: 18px;
		display: inline-block;
		cursor: pointer;
	}

	.tabs .tab_item:hover {
		color: #f85c29;
	}

	.tabs .tab_item_active {
		color: #f85c29;
		border-bottom: 2px solid #f85c29;
	}

	.more_btn_pannel {
		width: 80px;
	}

	.more_btn_pannel .more_btn {
		display: inline-block;
		border: 1px solid #f85c29;
		text-align: center;
		height: 30px;
		line-height: 30px;
		font-size: 16px;
		cursor: pointer;
		width: 80px;
		color: #f85c29;
		border-radius: 30px;
	}

	.more_btn_pannel .more_btn:hover {
		color: #fff;
		background: #f85c29;
	}

	.news .tabitems {
		padding-top: v-bind(tabitemsPaddingTop);
		padding-bottom: v-bind(tabitemsPaddingBottom);
	}

	.news .news_item_split {
		width: 15px;
		height: 100px;
	}

	.news .item {
		background: #f8f8f8;
		border-radius: 3px;
		border: 2px solid #efefef;
		padding: 30px;
		cursor: pointer;
		box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
	}

	.news .mobelitem {
		background: #f8f8f8;
		border-radius: 0px;
		border: none;
		border-botom: 1px solid #efefef;
		cursor: pointer;
		box-shadow: none;
		padding: 5px 10px;
	}

	.news .item:hover {
		border: 2px solid #f85c29;
	}

	.news .mobelitem:hover {
		border: none;
		border-botom: 1px solid #efefef;
	}

	.news .item .new_title {
		height: 30px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 30px;
		font-size: 16px;
		font-weight: bold;
	}

	.news .mobelitem .new_title {}

	.news .item .img_panel {
		height: 243px;
	}

	.news .mobelitem .img_panel {
		height: 150px;
	}

	.news .item img {
		width: 100%;
	}

	.news .mobelitem img {
		width: 100%;
		height: 80%;
		margin-top: 10%;
	}

	.news .item .date {
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		color: #999
	}

	.news .item .desc {
		line-height: 25px;
		font-size: 14px;
		color: #999
	}

	.news .mobelitem .desc {
		line-height: 20px;
		max-height: 40px;
		display: -webkit-box;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.news .mobelitem .img_panel {
		height: 150px;
	}

	.about {
		padding-top: v-bind(tabitemsPaddingTop);
		background: #f8f8f8;
	}

	.about .about_panel {
		padding-top: v-bind(aboutPanelPaddingTop);
		padding-bottom: v-bind(aboutPanelPaddingBottom);
	}

	.about .about_panel .img {
		vertical-align: middle;
	}

	.about .about_panel .img img {
		vertical-align: middle;
		width: 100%;
	}

	.about .about_panel .about_desc {
		padding-left: 30px;
	}

	.about .about_panel .about_desc .about_title {
		line-height: 45px;
		height: 45px;
		font-size: 22px;
		color: #000
	}

	.about .about_panel .about_desc .about_line {
		line-height: 45px;
		vertical-align: middle;
	}

	.about .about_panel .about_desc .about_filed {
		color: #999
	}

	.about .about_panel .about_desc .about_filed_value {
		color: #000;
	}

	.direction {
		padding-top: 25px;
	}

	.direction .pannel {
		padding-top: v-bind(directionPanelPaddingTop);
		padding-bottom: v-bind(directionPanelPaddingBottom);
	}

	.direction .pannel .icon {
		text-align: center;
	}

	.direction .pannel .icon img {
		width: 50%;
	}

	.direction .pannel .direction_title {
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		height: 45px;
		line-height: 45px;
	}

	.direction .pannel .direction_desc {
		font-size: 16px;
		height: 35px;
		line-height: 35px;
		color: #999;
	}

	.direction .pannel .direction-item-split {
		width: 1px;
		background: #B5B5B5;
	}

	.direction .pannel .direction_item {
		padding: 25px;
	}

	.case {
		padding-top: 25px;
		background: #f5f5f5;
	}

	.case .pannel {
		padding-top: v-bind(aboutPanelPaddingTop);
		padding-bottom: v-bind(aboutPanelPaddingBottom);
	}

	.case .line {
		margin-bottom: 20px;
	}

	.case .line .case_item_split {
		width: 15px;
		height: 10px;
	}

	.case .line .case_item {}

	.case .line .case_item .case_item_inner {
		background: #fff;
		cursor: pointer;
		border: 1px solid #f8f8f8;
		box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
		border-radius: 3px;
	}

	.case .line .case_item .case_item_inner:hover {
		box-shadow: 0 0 10px 5px rgba(248, 92, 41, 0.3);
	}

	.case .line .case_item .case_item_inner .case_item_logo {
		text-align: center;
		vertical-align: middle;
		align-items: center
	}

	.case .line .case_item .case_item_inner .case_item_logo img {
		max-width: 100%;
		align-items: center
	}

	.case .line .case_item .case_item_inner .desc {
		text-align: center;
		height: 60px;
		line-height: 60px;
		color: #999;
	}

	.team {
		padding-top: 25px;
	}

	.team .pannel {
		padding-bottom: 50px;
	}

	.team .pannel .desc {
		line-height: 35px;
		font-size: 16px;
		text-indent: 2em
	}

	.team .pannel .line {
		padding-top: 50px;
	}

	.team .pannel .line .team_item_split {
		width: 50px;
		height: 100px;
	}

	.team .pannel .line .team_item {
		background: #f8f8f8;
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.team .pannel .line .team_item .header {
		text-align: center;
		vertical-align: middle;
	}

	.team .pannel .line .team_item .header img {
		text-align: center;
	}

	.team .pannel .line .team_item .team_item_title {
		text-align: center;
		height: 45px;
		line-height: 45px;
		font-size: 20px;
	}

	.team .pannel .line .team_item .team_item_desc {
		text-align: center;
		height: 35px;
		line-height: 35px;
		font-size: 18px;
		color: #816b53;
	}
</style>

顶部导航栏代码：

<script setup>
	import Menu from "./Menu.vue"
	import Search from "./Search.vue"

	var menu_bar_width = "600px";
	var search_bar_width = "300px";
	let flag = navigator.userAgent.match(
		/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
	);
	if (flag) {
		menu_bar_width = '40px';
		search_bar_width = "0";
	}
</script>

<template>
	<div class="top_bar">
		<div class="inner">
			<div class="flex">
				<div class="logo">
					<img src="../assets/logo.png" />
				</div>
				<div class="flex-item flex">
					<div class="flex-item"></div>
					<div class="menu_bar">
						<Menu></Menu>
					</div>
				</div>
				<div class="search_bar" v-if="!flag">
					<Search></Search>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
	.top_bar {
		height: 60px;
		line-height: 60px;
		border-bottom: 1px solid #eeefff;
	}

	.top_bar .inner {}

	.top_bar .inner .logo {
		height: 60px;
	}

	.top_bar .inner .logo img {
		height: 40px;
		vertical-align: middle;
	}

	.top_bar .inner .menu_bar {
		width: v-bind(menu_bar_width);
	}

	.top_bar .inner .search_bar {
		width: v-bind(search_bar_width);
	}
</style>

菜单代码：

<template>
	<ul class="items" v-if="!_isMobile()">
		<li class="menu_item">
			<router-link class="menu_item" active-class="menu_item_active" to="/Index">首页</router-link>
		</li>
		<li class="menu_item">
			<router-link class="menu_item" active-class="menu_item_active" to="/News">新闻资讯</router-link>
		</li>
		<li class="menu_item about_menu" @mouseover="menuImgChagne('about','1')" @mouseout="menuImgChagne('about','2')">
			<div class="flex" :class="{menu_item_active:isabout}">
				<div class="flex-item">关于我们</div>
				<img :src="aboutMenuIconSrc">
			</div>
			<div class="menu_subpanel" style="">
				<div class="menu_sub_item">
					<router-link class="menu_item" active-class="menu_item_active" to="/About">
						公司介绍
					</router-link>
				</div>
				<div class="menu_sub_item">
					<router-link class="menu_item" active-class="menu_item_active" to="/Corporate">
						企业文化
					</router-link>
				</div>
				<div class="menu_sub_item">
					<router-link class="menu_item" active-class="menu_item_active" to="/Team">
						团队介绍
					</router-link>
				</div>
			</div>
		</li>
		<li class="menu_item case_menu" @mouseover="menuImgChagne('case','1')" @mouseout="menuImgChagne('case','2')">
			<div class="flex" :class="{menu_item_active:iscase}">
				<div class="flex-item">业务介绍</div>
				<img :src="caseMenuIconSrc">
			</div>
			<div class="menu_subpanel" style="">
				<div class="menu_sub_item">
					<router-link class="menu_item" active-class="menu_item_active" to="/Service">
						业务介绍
					</router-link>
				</div>
				<div class="menu_sub_item">
					<router-link class="menu_item" active-class="menu_item_active" to="/Case">
						成功案例
					</router-link>
				</div>
			</div>
		</li>
		<li class="menu_item">
			<router-link class="menu_item" active-class="menu_item_active" to="Job">加入我们</router-link>
		</li>
	</ul>

	<div v-if="_isMobile()">
		<img src="../assets/icon-92.png" style="width: 40px;margin-top: 10px;" />
	</div>
</template>

<script>
	export default {
		data() {
			return {
				subIconSrc: '/src/assets/sub.png',
				subIconHiberSrc: '/src/assets/sub_hover.png',
				aboutMenuIconSrc: '/src/assets/sub.png',
				isabout: this.$route.name == 'About',
				caseMenuIconSrc: '/src/assets/sub.png',
				iscase: this.$route.name == 'Service'
			}
		},
		watch: {
			$route(to, from) {
				if (to.name == 'About' || to.name == 'Corporate' || to.name == 'Team') {
					this.aboutMenuIconSrc = this.subIconHiberSrc;
					this.isabout = true;
				} else {
					this.aboutMenuIconSrc = this.subIconSrc;
					this.isabout = false;
				}
				if (to.name == 'Service' || to.name == 'Case') {
					this.caseMenuIconSrc = this.subIconHiberSrc;
					this.iscase = true;
				} else {
					this.caseMenuIconSrc = this.subIconSrc;
					this.iscase = false;
				}
				if (to.name == 'Detail') {

				}
			}
		},
		mounted: () => {

		},
		methods: {
			_isMobile() { //判断是否是移动端
				let flag = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				)
				return flag;
			},
			menuImgChagne: function(menu, status) {
				if (menu == 'about') {
					if (status == "2") {
						this.aboutMenuIconSrc = this.subIconSrc;
					} else {
						this.aboutMenuIconSrc = this.subIconHiberSrc;
					}

					if (this.$route.name == 'About' || to.name == 'Corporate' || to.name == 'Team') {
						this.aboutMenuIconSrc = this.subIconHiberSrc;
					}
				}
				if (menu == 'case') {
					if (status == "2") {
						this.iscase = this.subIconSrc;
					} else {
						this.caseMenuIconSrc = this.subIconHiberSrc;
					}

					if (this.$route.name == 'Service' || to.name == 'Case') {
						this.caseMenuIconSrc = this.subIconHiberSrc;
					}
				}
			}
		}
	}
</script>

<style>
	.items {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.items .menu_item {
		display: inline-block;
		width: 120px;
		height: 60px;
		font-size: 16px;
		text-align: center;
		color: #222;
		cursor: pointer;
		text-decoration: none;
		position: relative;
	}

	.items .menu_item img {
		height: 8px;
		margin-top: 26px;
	}

	.menu_subpanel {
		position: absolute;
		background: #fff;
		width: 100%;
		height: 90px;
		left: 0px;
		z-index: 100;
		display: none;
	}

	.menu_subpanel .menu_sub_item {
		background: #fff;
		width: 100%;
		height: 30px;
		line-height: 30px;
	}

	.about_menu:hover {}

	.about_menu:hover .menu_subpanel {
		display: block;
	}

	.case_menu .menu_subpanel {
		height: 60px;
	}

	.case_menu:hover {}

	.case_menu:hover .menu_subpanel {
		display: block;
	}

	.items .menu_item:hover {
		color: #f8b053
	}

	.items .menu_item:active {
		color: #f8b053
	}

	.items .menu_item_active {
		color: #f8b053
	}
</style>

底部导航栏代码：

<template>
	<div class="footer_bar" :style="{height:(!ismobel?'250px':'330px')}">
		<div class="inner">
			<div>
				<div class="line_title">友情链接</div>
				<div class="links">
					<div class="link_item"><a href="https://www.beidu.com" target="_blank">百度</a></div>
					<div class="link_item"><a href="https://www.beidu.com" target="_blank">阿里云</a></div>
					<div class="link_item"><a href="https://www.beidu.com" target="_blank">华为云</a></div>
					<div class="link_item"><a href="https://www.beidu.com" target="_blank">腾讯云</a></div>
					<div class="link_item"><a href="https://www.beidu.com" target="_blank">开源中国</a></div>
				</div>
			</div>
			<div class="flex">
				<div class="flex-item desc">
					<div class="name">贝贝网络科技有限公司</div>
					<div class="address">公司总部：陕西省西安市高新区99999号</div>
					<div class="desc_items" v-if="!ismobel">
						<div class="flex">
							<div class="flex-item">总部电话：029-15451313</div>
							<div class="flex-item">咨询微信：748151561</div>
						</div>
						<div class="flex">
							<div class="flex-item">联系邮箱：beibei@163.com</div>
							<div class="flex-item">简历投递：beibeihr@163.com</div>
						</div>
					</div>
					<div class="desc_items" v-if="ismobel">
						<div class="flex-item">总部电话：029-15451313</div>
						<div class="flex-item">咨询微信：748151561</div>
						<div class="flex-item">联系邮箱：beibei@163.com</div>
						<div class="flex-item">简历投递：beibeihr@163.com</div>
					</div>
				</div>
				<div class="split_line"></div>
				<div class="qrcode" :style="{paddingTop:(!ismobel?'0px':'30px')}">
					<img src="../assets/qrcode.png" />
					<div>关注我们</div>
				</div>
			</div>
			<div class="beian" :style="{lineHeight:(!ismobel?'40px':'30px')}">
				贝贝网络科技有限公司版权所有 2022-2030 陕ICP备案121214545号-1
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				ismobel: navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				)
			}
		}
	}
</script>

<style>
	.footer_bar {
		height: 250px;
		background: #2C3E50;
		color: #fff;
	}

	.line_title {
		height: 40px;
		line-height: 40px;
		font-size: 18px;
		color: #b3c7dc;
	}

	.link_item {
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		color: #b3c7dc;
		display: inline-block;
		width: 60px;
	}

	.link_item a {
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		color: #b3c7dc;
		display: inline-block;
		width: 80px;
		text-decoration: none;
	}

	.link_item a:hover {
		color: #F8B053;
	}

	.beian {
		font-size: 14px;
		text-align: center;
		height: 40px;
		line-height: 40px;
	}

	.name {
		height: 45px;
		line-height: 45px;
		font-size: 20px;
	}

	.address {
		height: 30px;
		line-height: 30px;
		color: #f8b053;
	}

	.desc_items {
		line-height: 30px;
		font-size: 14px;
	}

	.split_line {
		width: 1px;
		background: #EFEFEF;
	}

	.qrcode {
		width: 150px;
		text-align: center;
		padding-top: 10px;
	}

	.qrcode img {
		width: 100px;
	}

	.qrcode div {
		height: 30px;
		line-height: 30px;
	}
</style>

三、总结

实际开发中移动端界面需要单独出对应的设计稿，适配的时候根据设计稿进行实现，移动端和电脑端的页面布局等是不一致的，电脑端界面展示的一些布局在移动端无法展示，所以移动端的界面适配工作量还是挺大的。

下一篇：代码重构及项目发布。

举报

相关推荐

vue实战入门基础篇十：从零开始仿门户网站实例-代码重构并发布项目

vue.js前端javascript

从零开始学ASP.NET（基础篇）

asp.net数据库sql serversqlserverstring云平台云计算

webpack 从零开始配置 Vue 开发环境（基础）

前端Vue

从零开始的 Hexo 生活（一）入门安装篇

node.jsnpm

从零开始仿写一个抖音App——音视频开篇，移动安全入门

架构移动开发android

手写移动端导航栏（仿京东）实例【VUE3】

导航栏当前页AppVue.js前端开发私藏项目实操分享

AIGC基础入门：从零开始理解AI生成内容

深度学习参考资料自动生成AI作画AIGC

Perl基础入门指南：从零开始掌握Perl编程

flink

【零基础入门VUE】VueJS - 实例

vue.js前端javascript

小白必备的Less基础入门指南，教你从零开始！

LessCSSbundle开发程序员软件研发
0 条评论