本章节主要讲解企业站项目界面的制作,主要包括以下页面:首页、产品列表和产品详情、案例列表和案例详情、资讯列表和咨询详情、关于我们、留言反馈页面。
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/