9.1.2 公司简介
公司简介区块最终效果如图9-3,公司简介由区块标题和区块内容组成。
布局分析:公司简介、最新产品、最新案例、最新资讯都会用到“区块标题”,只是每个区块不同,然后标题文字不同,所以我们要单独为该区块写独立的代码和样式,以便于我们公用样式。
布局代码如下:
<!--公司简介-区块标题-->
<view class='qukuai'>
<view class='qukuai-shuxian'></view><!--区块标题-左侧竖线-->
<text class='qukuai-biaoti'>公司简介</text><!--区块标题-中间文字-->
<navigator class='qukuai-gengduo' url=''>更多></navigator><!--区块标题-右侧文字-->
</view>
<!--公司简介-内容区块-->
<view class="jianjie">
公司简介信息,杭州摇亿网络科技是黄菊华老师2018年成立,致力于IT计算机入门教育的的一家公司......
</view>
样式代码如下:
<style>
/*区块标题,整体样式*/
.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;/*字体阴影*/
}
/*公司简介-样式*/
.jianjie{
padding: 10px; /*内边距*/
text-indent: 2em;/*文字段落缩进2个字号大小*/
}
</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/