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:
luojie
2023-10-28 16:30:52 +08:00
parent f9266cdd8f
commit 23b65d18f2
2 changed files with 54 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -1,5 +1,6 @@
{ {
"dependencies": { "dependencies": {
"scss": "^0.2.4",
"uview-ui": "^2.0.36" "uview-ui": "^2.0.36"
} }
} }

93
pages/index/index.vue
View File

@@ -1,65 +1,78 @@
<template> <template>
<view class="search_box"> <home-header></home-header>
<view class="search_box_border">
<u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
prefixIconStyle="font-size: 22px;color: #909399;margin-left:30rpx" >
</u-input>
</view>
<h2>上传测试222</h2>
<view class="u-border-bottom ">
夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外
</view>
<view class="u-line-1">
是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也
</view>
</view>
</template> </template>
<script> <script>
import HomeHeader from './childComps/HomeHeader.vue'
export default { export default {
components:{
HomeHeader,
},
data() { data() {
return { return {
hotSearchWord:'热门关键词',
headerBgList:["https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"]
} }
}, },
onLoad() { onLoad() {
}, },
methods: { methods: {
// 头部区域
//获取热点搜索词、背景URL
getHeaderAreaURL() {
}
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
// @import url(); // 搜索区域样式
// 搜索框样式
.search_box { .search_box {
background: linear-gradient(135deg, #12CA64 0%, #1ACA67 100%); background: #000;
position: relative;
.search_box_border { .search_box_border {
width: 94.6%; width: 84.6%;
height: 124rpx; height: 25px;
background: linear-gradient(320deg, #36E182 0%, #26DD76 100%, #26DD76 100%); z-index: 1;
margin: 0 auto;
box-shadow: 0 -1px 3px 0 #31B96D; position: absolute;
border-radius: 38rpx 38rpx 0 0; left: 50%;
transform: translate(-50%, 0%);
.u-border {
border-radius: 10px;
padding-top: 3px !important;
margin-top: 8px;
background-color: #fff;
.u-border{
border: none; border: none;
padding-top: 16px !important; }
// .u
.u-input__content { .u-input__content {
height: 64rpx; background-color: #fff;
border-radius: 32rpx; border-radius: 1;
background-color: #fff; height: 10px;
.u-input__content__field-wrapper__field {
.u-input__content__field-wrapper__field { height: 10px !important;
font-size: 26rpx !important; font-size: 10px !important;
}
} }
} }
} }
.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> </style>