罗世杰:首页合并,移除搜索框,App引入了uview.scss
# Conflicts: # App.vue # pages/index/index.vue # pages/my/my.vue
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -21,3 +21,4 @@ selenium-debug.log
|
|||||||
|
|
||||||
package-lock.json
|
package-lock.json
|
||||||
yarn.lock
|
yarn.lock
|
||||||
|
/manifest.json
|
||||||
|
|||||||
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>
|
||||||
|
|||||||
@@ -50,7 +50,7 @@
|
|||||||
"quickapp" : {},
|
"quickapp" : {},
|
||||||
/* 小程序特有相关 */
|
/* 小程序特有相关 */
|
||||||
"mp-weixin" : {
|
"mp-weixin" : {
|
||||||
"appid" : "",
|
"appid" : "wx78efc832a9373884",
|
||||||
"setting" : {
|
"setting" : {
|
||||||
"urlCheck" : false
|
"urlCheck" : false
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"scss": "^0.2.4",
|
||||||
"uview-ui": "^2.0.36"
|
"uview-ui": "^2.0.36"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
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,25 +1,102 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="base-bg-color">
|
||||||
<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>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {
|
||||||
|
newsTextLists: [
|
||||||
|
'寒雨连江夜入吴',
|
||||||
|
'平明送客楚山孤',
|
||||||
|
'洛阳亲友如相问',
|
||||||
|
'一片冰心在玉壶'],
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 头部区域
|
||||||
|
//获取热点搜索词、背景URL
|
||||||
|
getHeaderAreaURL() {
|
||||||
|
this.headerBgList = [];
|
||||||
|
this.hotSearchWord = ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
newsText() {
|
||||||
|
// return "寒雨连江夜入吴 平明送客楚山孤 洛阳亲友如相问 一片冰心在玉壶"
|
||||||
|
return this.newsTextLists.join('')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
|
||||||
page {
|
<style lang="scss">
|
||||||
background-color: #F8F8F8;
|
.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>
|
||||||
@@ -28,4 +28,4 @@
|
|||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user