Merge pull request '罗世杰：首页PR' (#11) from lj into master
Reviewed-on: http://git.feashow.cn/odjbin/city-store-transfer/pulls/11
This commit is contained in:
luojie
6
App.vue
6
App.vue
@@ -15,6 +15,8 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
|
<style lang="scss">
|
||||||
/*每个页面公共css */
|
/*每个页面公共css */
|
||||||
</style>
|
@import 'uview-ui/index.scss';
|
||||||
|
</style>
|
||||||
|
|||||||
20
components/ShowShopList/ShowShopList.vue
Normal file
20
components/ShowShopList/ShowShopList.vue
Normal 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
51
components/ShowShopListItem/ShowShopListItem.vue
Normal 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
127
pages/index/childComps/HomeHeader.vue
Normal 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>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="home-base-bg">
|
||||||
<view class="search_box">
|
<view class="search_box">
|
||||||
<view class="search_box_border">
|
<view class="search_box_border">
|
||||||
<!-- <u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
|
<!-- <u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
|
||||||
@@ -8,26 +8,94 @@
|
|||||||
</view>
|
</view>
|
||||||
<InputAndSwiper></InputAndSwiper>
|
<InputAndSwiper></InputAndSwiper>
|
||||||
<TabBar :current-page="0"></TabBar>
|
<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>
|
</view>
|
||||||
<h1>测试</h1>
|
|
||||||
</view>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {
|
||||||
|
newsTextLists: [
|
||||||
|
'寒雨连江夜入吴',
|
||||||
|
'平明送客楚山孤',
|
||||||
|
'洛阳亲友如相问',
|
||||||
|
'一片冰心在玉壶'],
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
|
||||||
page {
|
<style lang="scss" scoped>
|
||||||
background-color: #F8F8F8;
|
.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>
|
</style>
|
||||||
Reference in New Issue
Block a user