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