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

Merge pull request '罗世杰：首页PR' (#11) from lj into master

Browse Source 
Reviewed-on: http://git.feashow.cn/odjbin/city-store-transfer/pulls/11
This commit is contained in:
luojie
2023-11-01 15:05:44 +00:00
parent c30a25d632 3e81148948
commit da8a0a5de9
5 changed files with 278 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
App.vue
View File

@@ -15,6 +15,8 @@
}
</script>
<style>
<style lang="scss">
/*每个页面公共css */
</style>
@import 'uview-ui/index.scss';
</style>

20
components/ShowShopList/ShowShopList.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<view>
</view>
</template>
<script>
export default {
name:"ShowShopList",
data() {
return {
};
}
}
</script>
<style lang="scss">
</style>

51
components/ShowShopListItem/ShowShopListItem.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<view class="list-border">
<view class="list-container">
<view class="shop-list-img">
<u-image width="80px" height="80px" :src="imageUrl" border-radius='6px'></u-image>
</view>
</view>
<view class="list-ads">
</view>
</view>
</template>
<script>
export default {
props: {
imageUrl: {
type: String,
default(){
return 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg'
}
}
},
data() {
return {
}
},
computed: {
}
}
</script>
<style lang="scss" scoped>
.list-border {
padding: 10px;
}
.list-container {
height: 80px;
background-color: #fff;
background-color: #000;
margin: 10px;
.shop-list-img {
border-radius: $uni-border-radius-lg;
}
}
</style>

127
pages/index/childComps/HomeHeader.vue Normal file
View File

@@ -0,0 +1,127 @@
<template>
<view class="header-area">
<view class="search-box u-flex u-flex-nowarp u-row-between">
<view class="search-box-input" >
<u-input
:placeholder="hotSearchWord"
prefixIcon="search"
prefixIconStyle="font-size: 14px;color: #909399;margin-left:30rpx"
/>
</view>
<view class="search-box-location">
<view><u-icon name="map" color="#909399" size="15"></u-icon></view>
<view class="localtion-text"><text>{{position}}</text></view>
</view>
</view>
<view class="swiper">
<u-swiper :list="headerBgList"/>
<!-- <u-image :src=headerBgURL
class="header-bgimg" width="100vw" height="25vh"/> -->
</view>
</view>
</template>
<script>
export default{
name: "HomeHeader",
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() {
return {
// hotSearchWord:'',
// headerBgList:[]
}
},
options: {
styleIsolation: 'shared' // 解除样式隔离
},
computed:{
}
}
</script>
<style lang="scss">
// 搜索区域样式
.header-area {
position: relative;
.search-box {
// background: #000;
position: absolute;
z-index: 1;
left: 50%;
width: 84.6%;
transform: translateX(-50%);
.search-box-input {
border-radius: 10px;
padding-top: 3px !important;
margin-top: 8px;
background-color: #fff;
.u-border{
border: none;
}
// 组件内部样式修改
.u-input__content {
background-color: #fff;
border-radius: 1;
height: 10px;
.u-input__content__field-wrapper__field {
// height: 10px !important;
font-size: 10px !important;
}
}
}
.search-box-location{
position: absolute;
z-index: 1;
height: 25px;
// width: 15vw;
top: 15px;
right: 10%;
// transform: translate(-100%);
display: flex;
.localtion-text{
padding-left: 8px;
font-size: 10px;
}
}
.header-bgimg {
width: 100vw;
z-index: 0;
}
}
// 轮播图样式
.swiper {
.u-swiper {
border-radius:0 !important;
}
.u-swiper__wrapper__item__wrapper__image{
border-radius:0 !important;
}
}
}
</style>

84
pages/index/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view>
<view class="home-base-bg">
<view class="search_box">
<view class="search_box_border">
<!-- <u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
@@ -8,26 +8,94 @@
</view>
<InputAndSwiper></InputAndSwiper>
<TabBar :current-page="0"></TabBar>
<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>
<ShowShopListItem></ShowShopListItem>
</view>
<h1>测试</h1>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {}
return {
newsTextLists: [
'寒雨连江夜入吴',
'平明送客楚山孤',
'洛阳亲友如相问',
'一片冰心在玉壶'],
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
page {
background-color: #F8F8F8;
<style lang="scss" scoped>
.home-base-bg {
background-color: $uni-bg-color-grey;
width: 100%;
}
.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;
.grid-text {
font-size: 14px;
}
}
</style>