odjbin/city-store-transfer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

罗世杰：feat：通知条初始化、导航卡片完成

Browse Source
This commit is contained in:
luojie
2023-10-30 20:06:48 +08:00
parent 50a12d9ccb
commit 312666c186
2 changed files with 95 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
pages/index/childComps/HomeHeader.vue
View File

@@ -27,21 +27,36 @@
export default{ export default{
name: "HomeHeader", name: "HomeHeader",
props: { props: {
hotSearchWord:{
type: String,
default() {
return '热门关键词'
}
},
headerBgList:{
type: Array,
default() {
return ["https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg","https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"]
}
},
position:{
type: String,
default() {
return '定位中'
}
}
}, },
data() { data() {
return { return {
hotSearchWord:'热门关键词', // hotSearchWord:'',
headerBgList:["https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"] // headerBgList:[]
} }
}, },
options: { options: {
styleIsolation: 'shared' // 解除样式隔离 styleIsolation: 'shared' // 解除样式隔离
}, },
computed:{ computed:{
position(){
return '定位中...'
}
} }
} }
</script> </script>

80
pages/index/index.vue
View File

@@ -1,18 +1,65 @@
<template> <template>
<home-header></home-header> <view class="base-bg-color">
<home-header></home-header>
<view class="nav-card">
<u-grid :col="4">
<u-grid-item>
<u-icon name="photo" :size="30"></u-icon>
<view class="grid-text">图片</view>
</u-grid-item>
<u-grid-item>
<u-icon name="lock" :size="30"></u-icon>
<view class="grid-text">锁头</view>
</u-grid-item>
<u-grid-item>
<u-icon name="hourglass" :size="30"></u-icon>
<view class="grid-text">沙漏</view>
</u-grid-item>
<u-grid-item>
<u-icon name="hourglass" :size="30"></u-icon>
<view class="grid-text">沙漏</view>
</u-grid-item>
<u-grid-item>
<u-icon name="photo" :size="30"></u-icon>
<view class="grid-text">图片</view>
</u-grid-item>
<u-grid-item>
<u-icon name="lock" :size="30"></u-icon>
<view class="grid-text">锁头</view>
</u-grid-item>
<u-grid-item>
<u-icon name="hourglass" :size="30"></u-icon>
<view class="grid-text">沙漏</view>
</u-grid-item>
<u-grid-item>
<u-icon name="hourglass" :size="30"></u-icon>
<view class="grid-text">沙漏</view>
</u-grid-item>
</u-grid>
</view>
<view class="news-box">
<u-notice-bar
:text="newsTextLists"
:bg-color="$uni-bg-color"
></u-notice-bar>
</view>
</view>
</template> </template>
<script> <script>
import HomeHeader from './childComps/HomeHeader.vue' import HomeHeader from './childComps/HomeHeader.vue'
export default { export default {
components:{ components: {
HomeHeader, HomeHeader,
}, },
data() { data() {
return { return {
hotSearchWord:'热门关键词', newsTextLists: [
headerBgList:["https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"] '寒雨连江夜入吴',
'平明送客楚山孤',
'洛阳亲友如相问',
'一片冰心在玉壶'],
} }
}, },
onLoad() { onLoad() {
@@ -22,13 +69,34 @@
// 头部区域 // 头部区域
//获取热点搜索词、背景URL //获取热点搜索词、背景URL
getHeaderAreaURL() { getHeaderAreaURL() {
this.headerBgList = [];
this.hotSearchWord = ''
}
},
computed:{
newsText() {
// return "寒雨连江夜入吴 平明送客楚山孤 洛阳亲友如相问 一片冰心在玉壶"
return this.newsTextLists.join('')
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.base-bg-color {
background-color: $u-bg-color;
}
.nav-card {
margin: 15px 7px;
padding: 10px 0;
background-color: $uni-bg-color;
border-radius: $uni-border-radius-lg;
box-shadow: 0 3px 3px 0 $u-border-color;
// border: solid 2px black;
.grid-text {
font-size: 14px;
}
}
</style> </style>