3、滚动显示
![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/fe2a4021eb8441cca95137d2c3132d59.png?x-oss-process=image/resize,w_1400/format,webp)
3.1、布局 html
<scroll-view class="major" scroll-x>
<navigator class="box" url="">
<image class="pic" src="/images/kecheng1.png"></image>
<view class="txt">平面设计</view>
</navigator>
<navigator class="box" url="">
<image class="pic" src="/images/kecheng2.png"></image>
<view class="txt">室内设计</view>
</navigator>
<navigator class="box" url="">
<image class="pic" src="../../images/kecheng3.png"></image>
<view class="txt">UI设计</view>
</navigator>
<navigator class="box" url="">
<image class="pic" src="/images/kecheng4.png"></image>
<view class="txt">影视后期</view>
</navigator>
<navigator class="box" url="">
<image class="pic" src="/images/kecheng5.png"></image>
<view class="txt">web前端</view>
</navigator>
</scroll-view>
3.2、布局样式 css
.major{
white-space: nowrap;
padding:30rpx 0;
}
.major .box{
text-align: center;
width: 165rpx;
display:inline-block
}
.major .pic{
width: 100rpx;
height: 100rpx;
}
.major .txt{
font-size: 26rpx;
margin-top: 8rpx;
}
4、作品展示
4.1、布局 html
![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/02d4d916941a4860a4302c9cd933b782.png?x-oss-process=image/resize,w_1400/format,webp)
<view class="works">
<view class="container">
<view class="pubTitle">
<view class="txt">学员作品</view>
<navigator class="more">更多 ></navigator>
</view>
<view class="wxMain">
<navigator class="box" wx:for="{
{worksList}}" wx:key="index">
<image class="pic" src="{
{item.src}}"></image>
<view class="ceng">
<view class="tit">{
{item.title}}</view>
<view class="line"></view>
<view class="des">{
{item.desc}}</view>
</view>
</navigator>
</view>
</view>
</view>
4.2、布局样式 css
.pubTitle{
display: flex;
justify-content: space-between;
height: 60rpx;
align-items: center;
margin-bottom: 40rpx;
}
.pubTitle .txt{
font-size: 40rpx;
height: 100%;
position: relative;
padding-left: 20rpx;
}
.pubTitle .txt::before{
display: block;
width: 8rpx;
height: 34rpx;
background: #c8020b;
content:'';
position: absolute;
left: 0;
top: 20%;
}
.pubTitle .more{
font-size: 34rpx;
color:#666;
}
.works{
background-color: #f0f3f8;
padding: 90rpx 0 70rpx;
}
.wxMain{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.wxMain .box{
width: 344rpx;
height: 214rpx;
margin-bottom: 10rpx;
position: relative;
}
.wxMain .pic{
width: 100%;
height: 100%;
}
.wxMain .ceng{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
position: absolute;
top:0;
left: 0;
color:#fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 20rpx;
box-sizing: border-box;
}
.wxMain .ceng .tit{
font-size: 34rpx;
}
.wxMain .ceng .line{
width: 50rpx;
}
.wxMain .ceng .des{
font-size: 24rpx;
opacity: 0.6;
text-transform: uppercase;
letter-spacing: 5rpx;
}
5、行业动态
5.1、布局 html
<!-- 行业动态 -->
<view class="dynamic">
<view class="container">
<view class="pubTitle">
<view class="txt">行业动态</view>
<navigator class="more">更多 ></navigator>
</view>
<view class="dyMain">
<navigator class="dyItem" wx:for="{
{5}}" wx:key="index">
<view class="pic">
<image src="/images/xszp1.jpg"></image>
</view>
<view class="txt">
<view class="title">这里是标题部分</view>
<view class="info">作者:王静<text space="ensp"> - </text>时间:2022-05-01</view>
</view>
</navigator>
</view>
</view>
</view>
5.2、布局样式 css
/* 行业动态 */
.dynamic{
padding:90rpx 0 70rpx;
}
.dyItem{
display: flex;
padding:15rpx 0;
border: 1rpx dashed
justify-content: space-between;
}
.dyItem .pic{
width: 230rpx;
height: 150rpx;
}
.dyItem .pic image{
width: 100%;
height: 100%;
}
.dyItem .txt{
width: 440rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dyItem .title{
font-size: 34rpx;
}
.dyItem .info{
font-size: 26rpx;
color:
}
.dyItem .info text{
font-size: 22rpx;
}
6、底部logo
6.1、布局 html
<!-- 底部logo -->
<view class="footer">
<image src="/images/logo.png" mode="widthFix" class="pic"></image>
<view class="text">- 高端实训平台 -</view>
</view>
6.2、布局样式 css
.footer{
padding: 30rpx;
background:#f2f2f2;
text-align: center;
}
.footer .pic{
width: 180rpx;
}
.footer .text{
font-size: 25rpx;
color: #666;
}