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

邓洁: 修改页面细节

Browse Source
This commit is contained in:
邓洁
2023-11-04 00:32:49 +08:00
parent b5a66caa5c
commit e4119a7bcf
13 changed files with 271 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,127 +0,0 @@
<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>

93
pages/index/index.vue
View File

@@ -1,66 +1,54 @@
<template>
<view class="home-base-bg">
<view class="search_box">
<view class="search_box_border">
<!-- <u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
prefixIconStyle="font-size: 22px;color: #909399;margin-left:30rpx" readonly>
</u-input> -->
</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>
<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>
<u-notice-bar :text="newsTextLists" :bg-color="$uni-bg-color"></u-notice-bar>
</view>
<ShowShopListItem></ShowShopListItem>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
@@ -68,14 +56,15 @@
'寒雨连江夜入吴',
'平明送客楚山孤',
'洛阳亲友如相问',
'一片冰心在玉壶'],
'一片冰心在玉壶'
],
}
},
onLoad() {
},
methods: {
}
}
</script>
@@ -85,11 +74,12 @@
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;
@@ -97,5 +87,4 @@
font-size: 14px;
}
}
</style>

32
pages/publish/publish.vue
View File

@@ -1,32 +0,0 @@
<template>
<view>
<view class="test">
<button @click="slide()">test</button>
<publishSlide v-if="slideVisit" @quitSlide="quitSlide"></publishSlide>
</view>
<TabBar :current-page="2" />
</view>
</template>
<script>
export default {
data() {
return {
slideVisit : false
}
},
methods: {
slide(){
this.slideVisit = true
},
quitSlide(){
this.slideVisit = false
}
}
}
</script>
<style>
</style>