网站开发工程师薪资活动软文模板

再在wallpaper新建一个目录components

在components下新建组件common-title

记得点击创建同名目录

在index加

<view class="select"><common-title></common-title></view>

图片换了下，原来的有点丑，图片可按自己喜欢在网上下载

加一个select

<view class="select"><common-title></common-title><view class="content"><scroll-view scroll-x><view class="box" v-for="item in 8"><image src="../../common/images/【哲风壁纸】插画艺术-美女.png" mode="aspectFill"></image></view></scroll-view></view></view>

效果如下：

调整一下：

.select{padding-top: 50rpx;.content{width: 720rpx;margin-left: 30rpx;scroll-view{white-space: nowrap;.box{width: 200rpx;height: 430rpx;display: inline-block;margin-right: 15rpx;image{width: 100%;height: 100%;border-radius: 10rpx;}}.box:last-child{margin-right: 30rpx;}}}}

效果如下：

想要好看点就下载多一点图片哈

<view class="select"><common-title></common-title><view class="content"><scroll-view scroll-x><view class="box"><image src="../../common/images/【哲风壁纸】插画艺术-美女.png" mode="aspectFill"></image></view><view class="box"><image src="../../common/images/【哲风壁纸】原画艺术-插画艺术.png"mode="aspectFill"></image></view><view class="box"><image src="../../common/images/【哲风壁纸】柯南-贝尔摩德.png"mode="aspectFill"></image></view><view class="box"><image src="../../common/images/【哲风壁纸】杀生丸-犬夜叉.png"mode="aspectFill"></image></view><view class="box"><image src="../../common/images/【哲风壁纸】IPhone-iPhone壁纸.png"mode="aspectFill"></image></view><view class="box"><image src="../../common/images/【哲风壁纸】Spider-Man-品红色.png"mode="aspectFill"></image></view></scroll-view></view></view>

效果如下：

接下来我们来弄一下公共标题

来到common-title.vue

<template><view class="common-title"><view class="name"><slot name="name"></slot></view><view class="custom"><slot name="custom"></slot></view></view>
</template><script setup></script><style lang="scss" scoped>
.common-title{display: flex;justify-content: space-between;align-items: center;padding: 0 30rpx;.name{font-size: 40rpx;}
}
</style>

再去uniapp官网

下载

按打开

下载好了，最好重启一下哈

拷贝

修改并加上日历图标：

<view class="select"><common-title><template #name>每日推荐</template><template #custom><view class="date"><uni-icons type="calendar" size="18" color="#28b389"></uni-icons><uni-dateformat :date="Date.now()" format="yyyy年MM"></uni-dateformat></view></template></common-title>

.select{padding-top: 50rpx;.date{color:#28b389;display: flex;align-items: center;.text{margin-left: 5rpx;}}

index.vue的完整代码：

<template><view class="homeLayout"><view class="banner"><swiper circular indicator-dots autoplay><swiper-item><image src="../../common/images/【哲风壁纸】动漫-少女插画.png"mode="aspectFill"></image></swiper-item><swiper-item><image src="../../common/images/【哲风壁纸】女孩-黑猫女孩.png"mode="aspectFill"></image></swiper-item></swiper></view><view class="notice"><view class="left"><uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons><text class="text">公告</text></view><view class="center"><swiper vertical autoplay interval="1500"  duration="300" circular><swiper-item v-for="item in 4">欢迎来到Kx......壁纸</swiper-item></swiper></view><view class="right"><uni-icons type="right" size="16" color="#333"></uni-icons></view></view><view class="select"><common-title><template #name>每日推荐</template><template #custom><view class="date"><uni-icons type="calendar" size="18" color="#28b389"></uni-icons><uni-dateformat :date="Date.now()" format="yyyy年MM"></uni-dateformat></view></template></common-title><view class="content"><scroll-view scroll-x><view class="box"><image src="../../common/images/【哲风壁纸】插画艺术-美女.png" mode="aspectFill"></image></view><view class="box"><image src="../../common/images/【哲风壁纸】原画艺术-插画艺术.png"mode="aspectFill"></image></view><view class="box"><image src="../../common/images/【哲风壁纸】柯南-贝尔摩德.png"mode="aspectFill"></image></view><view class="box"><image src="../../common/images/【哲风壁纸】杀生丸-犬夜叉.png"mode="aspectFill"></image></view><view class="box"><image src="../../common/images/【哲风壁纸】IPhone-iPhone壁纸.png"mode="aspectFill"></image></view><view class="box"><image src="../../common/images/【哲风壁纸】Spider-Man-品红色.png"mode="aspectFill"></image></view></scroll-view></view></view><view class="theme"><common-title><template #name>专题精选</template></common-title></view></view>
</template><script setup></script><style lang="scss" scoped>.homeLayout{.banner{width: 750rpx;padding: 30rpx 0;swiper{width: 750rpx;height: 340rpx;swiper-item{width: 100%;height: 100%;padding: 0 30rpx;image{width: 100%;height: 100%;border-radius: 10rpx;}}}}.notice{width: 690rpx;height: 80rpx;line-height: 80rpx;background: #f9f9f9;margin: 0 auto;border-radius: 80rpx;display: flex;.left{width: 140rpx;display: flex;align-items: center;justify-content: center;.text{color: #28b389;font-weight: 600;font-size: 28rpx;}}.center{flex: 1;swiper{height: 100%;swiper-item{height: 100%;font-size: 30rpx;color: #666;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}}.right{width: 70rpx;display: flex;align-items: center;justify-content: center;}}.select{padding-top: 50rpx;.date{color:#28b389;display: flex;align-items: center;.text{margin-left: 5rpx;}}.content{width: 720rpx;margin-left: 30rpx;scroll-view{white-space: nowrap;.box{width: 200rpx;height: 430rpx;display: inline-block;margin-right: 15rpx;image{width: 100%;height: 100%;border-radius: 10rpx;}}.box:last-child{margin-right: 30rpx;}}}}}
</style>