9.1.1 广告图 界面开发 企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】

本章节主要讲解企业站项目界面的制作，主要包括以下页面：首页、产品列表和产品详情、案例列表和案例详情、资讯列表和咨询详情、关于我们、留言反馈页面。

9.1 企业站首页

企业站项目首页主要包括下面几个模块：广告图、公司简介、最新产品、最新案例、最新资讯。首页效果如图9-1。

9.1.1 广告图

首页广告图的最终效果如图9-2.

布局代码如下：

<!--首页-广告图--> 
<view class='ad01'>
  <image src='/static/tupian/01.jpg' class='ad01-img'></image>
<!--image是图片组件，src属性表示图片的地址，/表示根目录-->
</view>  

样式代码如下：

<style>
/*广告图*/ 
.ad01 {
  margin: 4px;  /*定义外边距*/
  box-shadow: 0px 2px 2px gainsboro;   /*定义图片的阴影*/
}
.ad01-img {
  width: 100%;    /*定义图片的宽度：百分比*/
  height: 125px;  /*定义图片的高度：绝对值*/
}
</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/