9.5.1 关于我们 界面开发 企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】

9.5.1 关于我们

关于我们页面效果如图9-13。

布局代码如下：

<template>
<view>
	<!--关于我们-广告图-企业理念--> 
	<view class='ad01'>
	  <image src='/static/tupian/qyln.jpg' mode='widthFix' class='ad01-img'></image>
	</view> 
	
	<!--关于我们-区块标题-->
	<view class='qukuai'>
	  <view class='qukuai-shuxian'></view>
	  <text class='qukuai-biaoti'>关于我们</text>
	</view>
	
	<!--关于我们-公司介绍-->
	<navigator class='zixun'>
	  <image src="/static/tupian/02.png" class='zixun_tupian'></image>
	  <text class='zixun_biaoti'>公司介绍</text>
	  <image src='/static/tupian/right.png' class='zixun_tubiao'></image>
	</navigator>
	<!--关于我们-公司优势-->
	<navigator class='zixun'>
	  <image src="/static/tupian/03.png" class='zixun_tupian'></image>
	  <text class='zixun_biaoti'>公司优势</text>
	  <image src='/static/tupian/right.png' class='zixun_tubiao'></image>
	</navigator>
	<!--关于我们-企业资质-->
	<navigator class='zixun'>
	  <image src="/static/tupian/04.png" class='zixun_tupian'></image>
	  <text class='zixun_biaoti'>企业资质</text>
	  <image src='/static/tupian/right.png' class='zixun_tubiao'></image>
	</navigator>
	<!--关于我们-联系我们-->
	<navigator class='zixun'>
	  <image src="/static/tupian/01.png" class='zixun_tupian'></image>
	  <text class='zixun_biaoti'>联系我们</text>
	  <image src='/static/tupian/right.png' class='zixun_tubiao'></image>
	</navigator>
	<!--关于我们-留言反馈-->
	<navigator class='zixun' url="/pages/e/liuyan/liuyan">
	  <image src="/static/tupian/05.png" class='zixun_tupian'></image>
	  <text class='zixun_biaoti'>留言反馈</text>
	  <image src='/static/tupian/right.png' class='zixun_tubiao'></image>
	</navigator>
	<!--关于我们-客服热线-->		
	<button type='default' class='dianhua'>点击拨打客服热线</button>
</view>
</template>

样式代码如下：

<style>
/*关于我们-广告图-企业理念*/ 
.ad01 {
  margin: 4px;  /*外边距*/ 
  box-shadow: 0px 2px 2px gainsboro; /*阴影*/ 
}
.ad01-img {
  width: 100%;/*宽度*/
}

/*区块标题，整体样式*/
.qukuai {
  display: flex;   /*Flex布局*/
  margin: 2px;     /*外边距*/
  background-color: aliceblue; /*背景颜色*/
  align-items: center; /*垂直居中*/
}
/*区块标题 左侧竖线样式*/
.qukuai-shuxian {
  width: 3px;   /*宽度*/
  height: 15px; /*高度*/
  background-color: green; /*背景颜色*/
  margin: 5px; /*外边距*/
  box-shadow: 2px 2px 2px gainsboro; /*阴影*/
}
/*区块标题 中间文字样式*/
.qukuai-biaoti {
  color: gray;/*字体颜色*/
  text-shadow: 2px 2px 2px gainsboro;/*字体阴影*/
  flex: 1;           /*占据所有剩余空间*/
  margin-left: 1px;  /*左侧外边距*/
  align-self: center;/*垂直居中*/
}
/*区块标题 右侧文字样式*/
.qukuai-gengduo {
  color: gray; /*字体颜色*/
  text-shadow: 2px 2px 2px gainsboro;/*字体阴影*/
}

/*关于我们*/
.zixun {
  display: flex; /*Flex布局*/
  border-bottom: 1px solid gainsboro;/*下划线*/
  align-items: center;/*垂直居中*/
  padding: 10px;/*内边距*/
}
.zixun_tupian{ 
  width: 25px; /*宽度*/
  height: 25px;/*高度*/ 
  padding: 3px;/*内边距*/
}
.zixun_biaoti {
  flex-grow: 1;/*占据剩余空间*/
  padding: 5px;/*内边距*/
}
.zixun_tubiao {
  width: 16px; /*宽度*/
  height: 16px;/*高度*/
  align-self: center;/*居中*/
}

/*关于我们-客服热线*/
.dianhua{
  width: 80%; /*宽度*/
  margin-top: 25px;/*顶部外边距*/
}
</style>

【uniapp参考资料】

（1）uni-app跨平台开发 入门到实战
https://ke.qq.com/course/package/26512

（2）uni-app 完整商城界面设计实战
https://ke.qq.com/course/2381059

（3）基于vue的uniapp商城完整项目源代码
https://ke.qq.com/course/3064977

（4）小白教程资料 http://www.2d5.net

（5）毕业设计网http://www.pc-365.net
（6）小程序编程网www.4317.org

（7）计算机编程网http://www.05423.com/