按以下要求完成一个简易移动端页面的布局
按以下要求完成一个简易移动端页面的布局
要求：
6）使用HTML5的语义化标签
7）使用弹性盒子完成布局
8）要求适配所有移动端设备
9）精品推荐只显示4条数据即可
10）顶部的搜索框不随着滚动条的滚动而滚动
11）最终效果与效果图一致
12）代码书写规范
实现的效果如下：
结构都有了,自己稍微改一下就能用了.
<template>
<view class="page-bg">
<view class="main-container">
<!--首页顶部和logo-->
<navBar class="home-top">
<!--搜索框-->
<!--<view class="search-box" :style="{height: topMenuHeight+'px'}" >-->
<view class="search-box" style="height: 72rpx">
<view>
<image src="../../static/home/dw.png" mode="aspectFit" class="tl-img-32"></image>
</view>
<view class="tl-font-36-2b">
四川成都
</view>
<view>
<image src="../../static/home/right.png" mode="aspectFit" class="tl-img-24"></image>
</view>
<view class="search-input" @tap="goToSearch">
<image src="../../static/search_icon.png" mode="aspectFit" class="search-icon"></image>
</view>
</view>
</navBar>
<!--首页轮播图-->
<template class="banner-box" v-if="bannerList.length>0">
<bannerBox :banners="bannerList"></bannerBox>
</template>
<!-- 家电清洗 -->
<view class="tl-title">家电清洗</view>
<view class="tl-card-row-0">
<view v-for="(item,index) in cleanArr" :key="index" class="tl-card-25-2" @tap="goWaterfall">
<view>
<image class="tl-img-52" :src="item.icon"/>
</view>
<view class="tl-font-24-56">{{item.title}}清洗</view>
</view>
</view>
<!-- 家庭保洁 -->
<view class="tl-title">家庭保洁</view>
<view class="tl-card-row-2">
<view v-for="(item,index) in cleanList" :key="index" @tap="goWaterfall">
<view>
<image class="tl-img-52" :src="item.icon"/>
</view>
<view class="tl-font-24-56">{{item.title}}</view>
</view>
</view>
<!-- 便民服务 -->
<view class="tl-title">便民服务</view>
<view class="m-top-30">
<view class="tl-card-row" @tap="goWaterfall">
<view class="tl-card-50">
搬家拉货
</view>
<view class="tl-card-25">管道疏通</view>
<view class="tl-card-25">家电维修</view>
</view>
<view class="tl-card-row" @tap="goWaterfall">
<view class="tl-card-30">上门开锁</view>
<view class="tl-card-30">电脑维修</view>
<view class="tl-card-30">便民电话</view>
</view>
</view>
<view class="tl-mf-120"></view>
</view>
</view>
</template>
<script>
import navBar from "../../components/common/nav-bar.vue";
import bannerBox from "../../components/home/banner-box.vue";
//ae9a5086b2d72dd99f55aff7a741b658
import amap from '../../common/amap-wx.js';
var amapPluginInstance = new amap.AMapWX({
key: '21da628911274cbd1f47bf1eaa4f7ebb' //该key 是在高德中申请的微信小程序key
});
const app = getApp();
export default {
components: {
navBar,
bannerBox,
},
data() {
return {
// banner列表
bannerList: [
{'img_url': 'https://file.snailpet.cn/ce/9e/ce9ec669e744397123bbcf05824efb12.jpg'},
{'img_url': 'https://union-wifi.oss-cn-shanghai.aliyuncs.com/wxminioprogram/JinNang/test-poster.png'},
{'img_url': 'https://file.snailpet.cn/ce/9e/ce9ec669e744397123bbcf05824efb12.jpg'},
],
testImg: 'https://goin.obs.cn-north-4.myhuaweicloud.com/wechat/icon/wallet.png',
cleanArr: [
{
icon: 'https://apppic.mymlsoft.com/m_static/device/kitchenventilator.png',
title: '油烟机'
},
{
icon: 'https://apppic.mymlsoft.com/m_static/device/fridge.png',
title: '冰箱'
},
{
icon: 'https://apppic.mymlsoft.com/m_static/device/washer.png',
title: '洗衣机'
},
{
icon: 'https://apppic.mymlsoft.com/m_static/device/aircondition.png',
title: '空调'
},
{
icon: 'https://apppic.mymlsoft.com/m_static/device/watercleaner.png',
title: '饮水机'
},
{
icon: 'https://apppic.mymlsoft.com/m_static/device/kitchenventilator.png',
title: '热水器'
},
{
icon: 'https://apppic.mymlsoft.com/m_static/device/default_device.png',
title: '厨房'
},
{
icon: 'https://apppic.mymlsoft.com/m_static/device/default_device.png',
title: '其他'
},
],
cleanList: [
{
icon: 'https://goin.obs.cn-north-4.myhuaweicloud.com/wechat/icon/wallet.png',
title: '日常保洁'
},
{
icon: 'https://goin.obs.cn-north-4.myhuaweicloud.com/wechat/icon/wallet.png',
title: '深度保洁'
},
{
icon: 'https://goin.obs.cn-north-4.myhuaweicloud.com/wechat/icon/wallet.png',
title: '新居保洁'
}
],
}
},
onLoad(){
let self = this;
/*self.getSetting();//是否已授权
self.getMyLocation();
self.getBannerList();
self.getClassifyIndex();*/
},
methods: {
/* 是否授权，没有授权则授权*/
getSetting() {
return new Promise((resolve, reject) => {
uni.getSetting({
success: (res) => {
if (res.authSetting['scope.userLocation'] === undefined) {
resolve(0);
return;
}
if (res.authSetting['scope.userLocation']) {
resolve(1);
} else {
resolve(2);
}
}
});
});
},
//高德地图
getMyLocation(){
//amapPluginInstance
let _self = this;
amapPluginInstance.getRegeo({
success: async (res) => {
_self.latitude = res[0].latitude; //纬度
_self.longitude = res[0].longitude; //经度
// 拿到省市区中文转成系统的对应id
const addressComponent = res[0].regeocodeData.addressComponent;
//let [provinceId, cityId, regId] = await _self.formAdress(addressComponent);
let cityName = /.*市$/.test(addressComponent.city) ? addressComponent.city.substr(0, addressComponent.city.length - 1) : addressComponent.city
let addrInfo = {
/*provinceId,
cityId,
regId,*/
lat: this.latitude,
lng: this.longitude,
positionCityName: cityName,
selectCityName: app.globalData.selectCityName || cityName,
//selectCityId: app.globalData.selectCityId || cityId
};
app.globalData = Object.assign(app.globalData, addrInfo);
this.positionCity = getApp().globalData.selectCityName;
_self.getActivityList(); //活动列表
},
fail:(data)=>{
console.log(data)
}
})
},
async getBannerList() {
// 获取banner列表
this.$http.post('getBanner', {}).then(([error, res]) => {
if(res.data.code == 200) {
let data = res.data
this.bannerList = data.data;
console.log('获取banner列表', res)
//this.cateLists = this.formCate(data.cate)
} else {
this.$common.toast(res.data.msg)
}
})
},
// 获取分类列表
getClassifyIndex() {
this.$http.post('getClassifyIndex', {}).then(([error, res]) => {
if(res.data.code == 200) {
let data = res.data.data;
let tempList = this.formCate(data);
this.menuList[0].detailList = tempList;
console.log('获取分类列表', tempList)
} else {
this.$common.toast(res.data.msg)
}
})
},
// 格式化金刚区数据
formCate(data) {
let arr = []
data.map((item, key) => {
let obj = {
title: item.name,
value: item.id,
};
arr.push(obj)
})
return arr;
},
// 多级下拉组件
/*classify_id: '', // 分类
start_time: '', // 开始时间
apply_price: '', // 价格
distance: '', //距离*/
result(val) {
//console.log('filter_result:' + JSON.stringify(val));
this.filterResult = JSON.stringify(val, null, 2)
//let tempObj = JSON.stringify(val, null, 2);
let tempObj = val;
// 前端处理把参数获取出来传到接口需要的字段里面
if(tempObj.hasOwnProperty('classify')){
this.classify_id = tempObj.classify;
}else if(tempObj.hasOwnProperty('apply_price')){
this.apply_price = tempObj.apply_price
}else if(tempObj.hasOwnProperty('distance')){
this.distance = tempObj.distance
}else {
this.start_time = tempObj.start_time
}
this.getActivityList(); // 刷新一次数据请求
},
// 活动列表
async getActivityList() {
let _this = this;
if (_this.noMoreData) return false
let pageSize = 10;
let page = _this.page;
let tmepPoint = uni.getStorageSync('userLocation');
let pointArr = tmepPoint.split(',');
let point = pointArr[1] + ' ' + pointArr[0];
let params = {
page: page,
point: point, // 经纬度
start_day_of_week: _this.start_day_of_week, // 活动开始时间星期几
classify_id: _this.classify_id, // 分类
start_time: _this.start_time, // 开始时间
apply_price: _this.apply_price, // 价格
distance: _this.distance, //距离
}
//let formData = JSON.stringify(params)
this.$http.post('getActivityList', params).then(([error, res]) => {
if(res.data.code == 200) {
let list = res.data.data;
// 处理格式化数据
let tempArr = [];
if(list && list.length > 0){
for(let item of list){
let obj = {
id: item.id,
name: item.name,
address: item.address,
thumb: item.thumb,
start_time: _this.timeStamp(item.start_time),
start_day_of_week: item.start_day_of_week,
}
tempArr.push(obj)
}
_this.activityLists.push(...tempArr)
//更新各参数
_this.noMoreData = list.length < pageSize; // true 说明没有更多数据了
_this.page = list.length == pageSize ? ++page : page;
}else {
//_this.activityLists.push(...tempArr)
_this.activityLists = []
}
} else {
this.$common.toast(res.data.msg)
}
})
},
// 转时间格式
timeStamp(value) {
let date = new Date(value*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
let year = date.getFullYear();
let month = ("0" + (date.getMonth() + 1)).slice(-2);
let sdate = ("0" + date.getDate()).slice(-2);
let hour = ("0" + date.getHours()).slice(-2);
let minute = ("0" + date.getMinutes()).slice(-2);
let second = ("0" + date.getSeconds()).slice(-2);
// 拼接
//let result = year + "." + month + "." + sdate + " " + hour + ":" + minute //+ ":" + second;
let result = month + "." + sdate //+ ":" + second;
// 返回
return result;
},
// 跳转到搜索页
goToPage(num) {
if(num == 1){
uni.navigateTo({
url: '../nearby/nearby'
})
}else if(num == 2){
uni.navigateTo({
url: '../motion/motion'
})
}else {
uni.navigateTo({
url: '../hot/hot'
})
}
},
goWaterfall(){
uni.navigateTo({
url: '/pages/waterfall/waterfall'
})
},
// 跳转到搜索页
goToPublish() {
uni.navigateTo({
url: '/pages/publish/publish'
})
},
// 跳转到搜索页
goToSearch() {
uni.navigateTo({
url: '../search/search'
})
},
// 跳转到日程界面
goToSchedule() {
uni.navigateTo({
url: '../schedule/schedule'
})
},
// 星期几的单选操作
itemChoice(e) {
let index = e.currentTarget.dataset.index;
console.log('您选择了index', index)
this.start_day_of_week = index + 1; //选择周几
this.page = 1;
this.noMoreData = false;
this.isChoice = index
this.getActivityList();
},
goList(){
uni.navigateTo({
url:'/pagesHome/list/list'
})
},
scroll: function(e) {
console.log(e)
//this.old.scrollTop = e.detail.scrollTop
},
goLogin(){
uni.navigateTo({
url:'/pagesView/login/login'
})
},
}
}
</script>
<style scoped lang="scss">
.page-bg {
width: 100vw;
height: auto;
overflow: hidden;
/*background: url(https://wkresource.oss-cn-hangzhou.aliyuncs.com/wkfiles/wxapp/shopmall/home_bg1.png) top center no-repeat;*/
/*background: url('https://wkresource.oss-cn-hangzhou.aliyuncs.com/wkfiles/wxapp/shopmall/home_head.png') top center no-repeat;*/
background-size: 750rpx auto;
background-color: #fefefe;
}
.main-container {
width: 710rpx;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.home-top {
width: 710rpx;
margin: 0 auto;
padding-bottom: 20rpx;
.search-box {
width: 100%;
opacity: 1;
border-radius: 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20rpx;
box-sizing: border-box;
.search-input {
width: 450rpx;
height: 100%;
background: #F7F7F7;
opacity: 1;
border-radius: 8rpx;
padding: 0 20rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.search-icon {
width: 32rpx;
height: 32rpx;
}
}
}
.tl-card-row-0{
width: 686rpx;
height: 410rpx;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
margin-top: 8rpx;
flex-wrap: wrap;
}
.tl-card-25-2{
width: 25%;
margin-bottom: 30rpx;
border-radius: 8rpx;
}
.tl-card-row-2{
width: 686rpx;
height: 200rpx;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
margin-top: 8rpx;
flex-wrap: wrap;
.view{
width: 25%;
margin-bottom: 30rpx;
}
}
.tl-card-row{
width: 686rpx;
height: 200rpx;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
margin-bottom: 30rpx;
}
.tl-card-50{
width: 49%;
height: 200rpx;
line-height: 200rpx;
margin-bottom: 30rpx;
background: #2AD19B;
color: #FFFFFF;
border-radius: 8rpx;
}
.tl-card-25{
width: 23%;
height: 200rpx;
line-height: 200rpx;
margin-bottom: 30rpx;
background: #2AD19B;
color: #FFFFFF;
border-radius: 8rpx;
}
.tl-card-30{
width: 32%;
height: 200rpx;
line-height: 200rpx;
margin-bottom: 30rpx;
background: #2AD19B;
color: #FFFFFF;
border-radius: 8rpx;
}
.m-top-30{
margin-top: 30rpx;
}
.tl-section1{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30rpx;
}
.tl-left{
width: 358rpx;
height: 170rpx;
background: url("../../static/home/home_1.png") no-repeat;
background-size: 100% 100%;
box-shadow: 0 0 16rpx 4rpx rgba(243,243,243,1);
}
.tl-img-358{
width: 358rpx;
height: 170rpx;
}
.tl-right{
width: 308rpx;
height: 170rpx;
background: #ffffff;
box-shadow: 0 0 16rpx 4rpx rgba(243,243,243,1);
border-radius: 8rpx;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20rpx;
}
.tl-font-30{
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #292929;
margin: 16rpx 0 0 16rpx;
}
.tl-font-22-9b{
font-size: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #9B9B9B;
}
.tl-img-52{
width: 102rpx;
height: 102rpx;
vertical-align: middle;
}
.tl-img-48{
width: 52rpx;
height: 48rpx;
vertical-align: middle;
}
.ml-26{
margin-left: 26rpx;
}
.tl-card-1{
width: 170rpx;
height: 170rpx;
background: url("../../static/home/home_2.png") no-repeat;
background-size: 100% 100%;
box-shadow: 0 0 16rpx 4rpx rgba(243,243,243,1);
}
.tl-card-2{
width: 170rpx;
height: 170rpx;
background: url("../../static/home/home_3.png") no-repeat;
background-size: 100% 100%;
margin-left: 20rpx;
box-shadow: 0 0 16rpx 4rpx rgba(243,243,243,1);
}
.tl-card-3{
width: 308rpx;
height: 170rpx;
background: #FFFFFF;
box-shadow: 0 0 16rpx 4rpx rgba(243,243,243,1);
border-radius: 8rpx;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20rpx;
}
.tl-img-32{
width: 32rpx;
height: 32rpx;
}
.tl-img-24{
width: 24rpx;
height: 24rpx;
}
.tl-font-36-2b{
font-size: 36rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #2B2B2B;
}
/*section2*/
.tl-section2{
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 30rpx;
height: 88rpx;
}
.scroll-view_H {
white-space: nowrap;
width: 610rpx;
}
.scroll-view-item_H {
display: inline-block;
width: 100%;
height: auto;
text-align: center;
font-size: 36rpx;
}
.tl-img-134{
width: 134rpx;
height: 46rpx;
vertical-align: middle;
}
.tl-tag-80 {
width: 80rpx;
height: 50rpx;
padding: 8rpx 16rpx;
background: #F6F6F6;
border-radius: 8rpx;
display: inline-block;
margin-left: 20rpx;
text-align: center;
}
.tl-section3{
width: 100%;
}
.tl-section4{
width: 100%;
display: flex;
/*flex-direction: column;*/
justify-content: space-between;
flex-wrap: wrap;
margin-top: 32rpx;
}
.tl-img-334{
width: 334rpx;
height: 192rpx;
}
.tl-font-32-29{
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #292929;
}
.tl-font-24-b5{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #B5B5B5;
}
.mg-18{
margin-right: 18rpx;
margin-bottom: 24rpx;
}
.tl-card-footer{
display: flex;
justify-content: space-between;
margin-top: 22rpx;
}
.tl-mf-120{
margin-bottom: 120rpx;
}
._on {
color: #5900CC;
background: #FFFDD9;
border-radius: 4px;
}
.tl-text{
width: 320rpx;
display: -webkit-box; /*弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*排列方式*/
-webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
overflow: hidden; /*溢出隐藏*/
}
.tl-text2{
width: 160rpx;
display: -webkit-box; /*弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*排列方式*/
-webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
overflow: hidden; /*溢出隐藏*/
}
.tl-title{
width: 100%;
font-size: 28rpx;
color: #333333;
font-weight: bold;
display: flex;
justify-content: flex-start;
margin-top: 30rpx;
}
.tl-font-24-56{
font-size: 24rpx;
color: #565656;
margin-top: 20rpx;
}
</style>
有图片那些么
自己在这里面挑选一个接近你的，然后把图片素材换过来就好
参考我的这篇博文，跨平台兼容
https://blog.csdn.net/weixin_43151418/article/details/124684028
css 弹性lflex布局，html上下结构划分好，轮播的话 swiper