|
|
@@ -1,370 +1,371 @@
|
|
|
<template>
|
|
|
- <view class="home">
|
|
|
- <view>
|
|
|
- <!-- 顶部导航 -->
|
|
|
- <view class="nav-bar">
|
|
|
- <u-navbar :bgColor="'#ffffff'" :placeholder="true">
|
|
|
- <view slot="left" @click.stop="manualGetLocation">
|
|
|
- <view class="address-text">{{ nowAddress }}</view>
|
|
|
- <text class="iconfont icon-chevron-down" />
|
|
|
- </view>
|
|
|
- <view slot="center" style="width: 350rpx">
|
|
|
- <u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword"
|
|
|
- @click="$Router.push('/pagesHome/homeSearch')" :disabled="true" />
|
|
|
- </view>
|
|
|
- </u-navbar>
|
|
|
- </view>
|
|
|
- <!-- 轮播图 -->
|
|
|
- <view class="home-swiper">
|
|
|
- <u-swiper :list="swiperUrlList" @click="handlerSwiperSkip" indicator imgMode='aspectFit' />
|
|
|
- </view>
|
|
|
+ <view class="container">
|
|
|
+ <view class="container-top-box">
|
|
|
+ <view class='top-title'>
|
|
|
+ <view class='address' @click.stop="manualGetLocation">
|
|
|
+ <span>{{ nowAddress }}</span>
|
|
|
+ <u-icon name="arrow-down-fill" color="#333333" size="16"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class='title'>车旅程</view>
|
|
|
+ <view></view>
|
|
|
+ </view>
|
|
|
+ <view class='top-search'>
|
|
|
+ <u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword"
|
|
|
+ @click="$Router.push('/pagesHome/homeSearch')" bgColor='#fff' :disabled="true" />
|
|
|
+ </view>
|
|
|
|
|
|
- <!-- 商品分类 -->
|
|
|
- <view class="home-list">
|
|
|
- <u-grid :border="false" col="5">
|
|
|
- <u-grid-item v-for="item in categories" :key="item.id" @tap="handleMenuClick(item)">
|
|
|
- <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="item.icon" :size="25"></u-icon>
|
|
|
- <text class="grid-text">{{ item.name }}</text>
|
|
|
- </u-grid-item>
|
|
|
- </u-grid>
|
|
|
- <u-toast ref="uToast" />
|
|
|
- </view>
|
|
|
+ <view class="top-swiper-box">
|
|
|
+ <u-swiper :list="swiperUrlList" @click="handlerSwiperSkip" indicator />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
- <!-- 热门推荐 -->
|
|
|
- <view class="hot">
|
|
|
- <u-cell :border="false" value="查看更多" isLink @click="$Router.push('/pagesHome/home/popularRecommend')">
|
|
|
- <view slot="title" class="hot-title"> 热门推荐 </view>
|
|
|
- </u-cell>
|
|
|
- <block v-if="homeData.recommends && homeData.recommends.length > 0">
|
|
|
- <view>
|
|
|
- <u-grid :border="false" col="2">
|
|
|
- <u-grid-item @click="$Router.push(`/pagesHome/marketer/index?id=${item.id}`)"
|
|
|
- v-for="(item,index) in homeData.recommends" :key="item.id">
|
|
|
- <recommend-item v-if="index < 4" :item="item"></recommend-item>
|
|
|
- </u-grid-item>
|
|
|
- </u-grid>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
- <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
|
|
|
- </u-empty>
|
|
|
- </block>
|
|
|
- </view>
|
|
|
+ <view class="container-tabbar-box">
|
|
|
+ <view class='tabar-box'>
|
|
|
+ <view class='tabbar-item' v-for='(item,index) of categories' :key='index' @tap="handleMenuClick(item)">
|
|
|
+ <view class='item-img'>
|
|
|
+ <image class='img' :src='item.icon'></image>
|
|
|
+ </view>
|
|
|
+ <view class='item-name'>{{ item.name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
- <!-- 附近商家 -->
|
|
|
- <view class="near">
|
|
|
- <u-cell :border="false" value="查看更多" isLink @click="$Router.push('/pagesHome/home/nearbyBusiness')">
|
|
|
- <view slot="title" class="near-title"> 附近商家 </view>
|
|
|
- </u-cell>
|
|
|
- <block v-if="homeData.nears && homeData.nears.length > 0">
|
|
|
- <view>
|
|
|
- <u-grid :border="false" col="2">
|
|
|
- <u-grid-item @click="$Router.push(`/pagesHome/marketer/index?id=${item.id}`)"
|
|
|
- v-for="(item,index) in homeData.nears" :key="item.id">
|
|
|
- <hot-item v-if="index < 4" :item="item"></hot-item>
|
|
|
- </u-grid-item>
|
|
|
- </u-grid>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
- <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
|
|
|
- </u-empty>
|
|
|
- </block>
|
|
|
- </view>
|
|
|
+ <view class="container-list-box">
|
|
|
+ <view class='item-box'>
|
|
|
+ <view class='item-top'>
|
|
|
+ <view class='top-title'>热门推荐</view>
|
|
|
+ <view class='top-more' @click="$Router.push('/pagesHome/home/popularRecommend')">
|
|
|
+ <span>查看更多</span>
|
|
|
+ <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class='item-list'>
|
|
|
+ <view class='item' v-for="(item,index) in homeData.recommends" :key="item.id" @click="$Router.push(`/pagesHome/marketer/index?id=${item.id}`)">
|
|
|
+ <hot-item v-if="index < 4" :item="item"></hot-item>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-empty v-if='!homeData.recommends' mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" > </u-empty>
|
|
|
+ </view>
|
|
|
|
|
|
- <!-- 询价 -->
|
|
|
- <!-- <drag-button :isDock="true" :existTabBar="true" @btnClick="btnClick" /> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class='item-box'>
|
|
|
+ <view class='item-top'>
|
|
|
+ <view class='top-title'>附近商家</view>
|
|
|
+ <view class='top-more' @click="$Router.push('/pagesHome/home/nearbyBusiness')">
|
|
|
+ <span>查看更多</span>
|
|
|
+ <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class='item-list'>
|
|
|
+ <view class='item' v-for="(item,index) in homeData.nears" :key="item.id" @click="$Router.push(`/pagesHome/marketer/index?id=${item.id}`)">
|
|
|
+ <recommend-item v-if="index < 4" :item="item"></recommend-item>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-empty v-if='!homeData.nears' mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" > </u-empty>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
- import {
|
|
|
- getCurrentLocation,
|
|
|
- getHomePageApi,
|
|
|
- getSwiperListApi
|
|
|
- } from '@/api/client/home';
|
|
|
- import RecommendItem from './components/RecommendItem.vue';
|
|
|
- import HotItem from './components/HotItem.vue';
|
|
|
- import {
|
|
|
- getMapLocation
|
|
|
- } from "@/utils/mapUtil.js"
|
|
|
- import {
|
|
|
- mapGetters
|
|
|
- } from 'vuex';
|
|
|
- import {
|
|
|
- inviteBind
|
|
|
- } from "@/api/client/mine.js"
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- RecommendItem,
|
|
|
- HotItem,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- list: [],
|
|
|
- keyword: '',
|
|
|
- swiperUrlList: [], // 轮播图url列表
|
|
|
- swiperList: [],
|
|
|
- homeData: {
|
|
|
- categories: [],
|
|
|
- nears: [],
|
|
|
- recommends: [],
|
|
|
- },
|
|
|
- queryParams: {
|
|
|
- longitude: '',
|
|
|
- latitude: '',
|
|
|
- region: ''
|
|
|
- },
|
|
|
- nowAddress: '', //当前地址
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- computed: {
|
|
|
- ...mapGetters(['location', 'userId', 'invitationCode']),
|
|
|
- categories() {
|
|
|
- let initData = this.homeData.categories.map(item => {
|
|
|
- if (!item.icon) {
|
|
|
- item.icon = 'level';
|
|
|
- }
|
|
|
- return item;
|
|
|
- });
|
|
|
- let result =
|
|
|
- initData.length > 14 ?
|
|
|
- initData.splice(0, 14).concat([{
|
|
|
- id: 'all',
|
|
|
- icon: 'grid-fill',
|
|
|
- name: '全部',
|
|
|
- type: {
|
|
|
- code: 'ALL',
|
|
|
- description: '全部',
|
|
|
- },
|
|
|
- }, ]) :
|
|
|
- initData.push({
|
|
|
- id: 'all',
|
|
|
- icon: 'grid-fill',
|
|
|
- name: '全部',
|
|
|
- });
|
|
|
- return result;
|
|
|
- },
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- console.log("首页执行了没有", this.invitationCode)
|
|
|
- // 如果 invitationCode 存在且不等于特殊值时执行代码
|
|
|
- if (this.invitationCode) {
|
|
|
- console.log("存在邀请码")
|
|
|
- let params = {
|
|
|
- userId: this.userId,
|
|
|
- targetId: this.invitationCode,
|
|
|
- type: 1
|
|
|
- };
|
|
|
- inviteBind(params).then(res => {
|
|
|
- if(res&& res.code ==200){
|
|
|
- uni.showToast({
|
|
|
- title:'您已成功加入团队',
|
|
|
- icon:'success',
|
|
|
- dration:2000
|
|
|
- })
|
|
|
- }
|
|
|
- // console.log("绑定邀请码结果：", res);
|
|
|
- });
|
|
|
- this.$store.commit('SET_INVITATIONCODE', '')
|
|
|
-
|
|
|
- }else{
|
|
|
- console.log("执行了一次")
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getSwiperList();
|
|
|
- // 页面显示时 获取当前零维度
|
|
|
- uni.getLocation({
|
|
|
- type: 'gcj02',
|
|
|
- success: res => {
|
|
|
- let {
|
|
|
- longitude,
|
|
|
- latitude
|
|
|
- } = res
|
|
|
- this.queryParams.longitude = longitude;
|
|
|
- this.queryParams.latitude = latitude;
|
|
|
- // getCurrentLocation 获取当前编码region
|
|
|
- this.handlerGetRegion(longitude, latitude)
|
|
|
- },
|
|
|
- fail: () => {
|
|
|
- this.manualGetLocation();
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 获取当前编码region
|
|
|
- handlerGetRegion(longitude, latitude) {
|
|
|
- let point = `${latitude},${longitude}`
|
|
|
- getCurrentLocation({
|
|
|
- point
|
|
|
- }).then(res => {
|
|
|
- let {
|
|
|
- city,
|
|
|
- district,
|
|
|
- id
|
|
|
- } = res.data
|
|
|
- this.queryParams.region = res.data.id;
|
|
|
- if (district) {
|
|
|
- this.nowAddress = district.name
|
|
|
- } else if (city) {
|
|
|
- this.nowAddress = city.name
|
|
|
- } else {
|
|
|
- this.nowAddress = '地图'
|
|
|
- }
|
|
|
- this.getHomeData(this.queryParams)
|
|
|
- this.$store.commit('SET_LOCATION', {
|
|
|
- longitude: longitude,
|
|
|
- latitude: latitude,
|
|
|
- region: res.data.id,
|
|
|
- address: res.data.name
|
|
|
- });
|
|
|
- })
|
|
|
- },
|
|
|
- /* 轮播图 */
|
|
|
- getSwiperList() {
|
|
|
- getSwiperListApi().then(res => {
|
|
|
- this.swiperList = res.data
|
|
|
- res.data.map(rs => {
|
|
|
- this.swiperUrlList.push(rs.viewUrl)
|
|
|
- })
|
|
|
- });
|
|
|
- },
|
|
|
- // 获取首页数据
|
|
|
- getHomeData(location) {
|
|
|
- getHomePageApi(location)
|
|
|
- .then(res => {
|
|
|
- this.homeData = res.data;
|
|
|
- // 将分类数据做缓存处理
|
|
|
- this.$store.commit('SET_CATEGORIES', this.homeData.categories);
|
|
|
- })
|
|
|
- },
|
|
|
- // 手动选择城市
|
|
|
- manualGetLocation() {
|
|
|
- uni.chooseLocation({
|
|
|
- success: res => {
|
|
|
- let {
|
|
|
- longitude,
|
|
|
- latitude
|
|
|
- } = res
|
|
|
- this.queryParams.longitude = longitude.toFixed(5);
|
|
|
- this.queryParams.latitude = latitude.toFixed(5);
|
|
|
- this.handlerGetRegion(longitude.toFixed(5), latitude.toFixed(5))
|
|
|
- },
|
|
|
- fail: err => {}
|
|
|
- });
|
|
|
- },
|
|
|
- // 点击swiper跳转
|
|
|
- handlerSwiperSkip(e) {
|
|
|
- console.log("@@@swiperList", this.swiperList[e])
|
|
|
- },
|
|
|
- // 点击菜单
|
|
|
- handleMenuClick(item) {
|
|
|
- if (item.id === 'all') {
|
|
|
- this.$Router.push('/pagesHome/category/categoryStoreList');
|
|
|
- } else {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pagesHome/category/index?id=${item.id}`,
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /* 询价 */
|
|
|
- btnClick() {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/client/clientUser/inquiry`,
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- };
|
|
|
+<script>
|
|
|
+ import { getCurrentLocation, getHomePageApi, getSwiperListApi } from '@/api/client/home';
|
|
|
+ import { getMapLocation } from "@/utils/mapUtil.js"
|
|
|
+ import { inviteBind } from "@/api/client/mine.js"
|
|
|
+ import RecommendItem from './components/RecommendItem.vue';
|
|
|
+ import HotItem from './components/HotItem.vue';
|
|
|
+ import { mapGetters } from 'vuex';
|
|
|
+ export default {
|
|
|
+ components: { RecommendItem, HotItem, },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ keyword: '',
|
|
|
+ swiperUrlList: [], // 轮播图url列表
|
|
|
+ swiperList: [],
|
|
|
+ homeData: {
|
|
|
+ categories: [],
|
|
|
+ nears: [],
|
|
|
+ recommends: [],
|
|
|
+ },
|
|
|
+ queryParams: {
|
|
|
+ longitude: '',
|
|
|
+ latitude: '',
|
|
|
+ region: ''
|
|
|
+ },
|
|
|
+ nowAddress: '', //当前地址
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['location', 'userId', 'invitationCode']),
|
|
|
+ categories() {
|
|
|
+ let initData = this.homeData.categories.map(item => {
|
|
|
+ if (!item.icon) {
|
|
|
+ item.icon = 'level';
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ let result =
|
|
|
+ initData.length > 14 ?
|
|
|
+ initData.splice(0, 14).concat([{
|
|
|
+ id: 'all',
|
|
|
+ icon: 'grid-fill',
|
|
|
+ name: '全部',
|
|
|
+ type: {
|
|
|
+ code: 'ALL',
|
|
|
+ description: '全部',
|
|
|
+ },
|
|
|
+ }, ]) :
|
|
|
+ initData.push({
|
|
|
+ id: 'all',
|
|
|
+ icon: 'grid-fill',
|
|
|
+ name: '全部',
|
|
|
+ });
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ console.log("首页执行了没有", this.invitationCode)
|
|
|
+ // 如果 invitationCode 存在且不等于特殊值时执行代码
|
|
|
+ if (this.invitationCode) {
|
|
|
+ console.log("存在邀请码")
|
|
|
+ let params = {
|
|
|
+ userId: this.userId,
|
|
|
+ targetId: this.invitationCode,
|
|
|
+ type: 1
|
|
|
+ };
|
|
|
+ inviteBind(params).then(res => {
|
|
|
+ if(res&& res.code ==200){
|
|
|
+ uni.showToast({
|
|
|
+ title:'您已成功加入团队',
|
|
|
+ icon:'success',
|
|
|
+ dration:2000
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // console.log("绑定邀请码结果：", res);
|
|
|
+ });
|
|
|
+ this.$store.commit('SET_INVITATIONCODE', '')
|
|
|
+
|
|
|
+ }else{
|
|
|
+ console.log("执行了一次")
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getSwiperList();
|
|
|
+ // 页面显示时 获取当前零维度
|
|
|
+ uni.getLocation({
|
|
|
+ type: 'gcj02',
|
|
|
+ success: res => {
|
|
|
+ let {
|
|
|
+ longitude,
|
|
|
+ latitude
|
|
|
+ } = res
|
|
|
+ this.queryParams.longitude = longitude;
|
|
|
+ this.queryParams.latitude = latitude;
|
|
|
+ // getCurrentLocation 获取当前编码region
|
|
|
+ this.handlerGetRegion(longitude, latitude)
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ this.manualGetLocation();
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取当前编码region
|
|
|
+ handlerGetRegion(longitude, latitude) {
|
|
|
+ let point = `${latitude},${longitude}`
|
|
|
+ getCurrentLocation({
|
|
|
+ point
|
|
|
+ }).then(res => {
|
|
|
+ let {
|
|
|
+ city,
|
|
|
+ district,
|
|
|
+ id
|
|
|
+ } = res.data
|
|
|
+ this.queryParams.region = res.data.id;
|
|
|
+ if (district) {
|
|
|
+ this.nowAddress = district.name
|
|
|
+ } else if (city) {
|
|
|
+ this.nowAddress = city.name
|
|
|
+ } else {
|
|
|
+ this.nowAddress = '地图'
|
|
|
+ }
|
|
|
+ this.getHomeData(this.queryParams)
|
|
|
+ this.$store.commit('SET_LOCATION', {
|
|
|
+ longitude: longitude,
|
|
|
+ latitude: latitude,
|
|
|
+ region: res.data.id,
|
|
|
+ address: res.data.name
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /* 轮播图 */
|
|
|
+ getSwiperList() {
|
|
|
+ getSwiperListApi().then(res => {
|
|
|
+ this.swiperList = res.data
|
|
|
+ res.data.map(rs => {
|
|
|
+ this.swiperUrlList.push(rs.viewUrl)
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取首页数据
|
|
|
+ getHomeData(location) {
|
|
|
+ getHomePageApi(location)
|
|
|
+ .then(res => {
|
|
|
+ this.homeData = res.data;
|
|
|
+ // 将分类数据做缓存处理
|
|
|
+ this.$store.commit('SET_CATEGORIES', this.homeData.categories);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 手动选择城市
|
|
|
+ manualGetLocation() {
|
|
|
+ uni.chooseLocation({
|
|
|
+ success: res => {
|
|
|
+ let {
|
|
|
+ longitude,
|
|
|
+ latitude
|
|
|
+ } = res
|
|
|
+ this.queryParams.longitude = longitude.toFixed(5);
|
|
|
+ this.queryParams.latitude = latitude.toFixed(5);
|
|
|
+ this.handlerGetRegion(longitude.toFixed(5), latitude.toFixed(5))
|
|
|
+ },
|
|
|
+ fail: err => {}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 点击swiper跳转
|
|
|
+ handlerSwiperSkip(e) {
|
|
|
+ console.log("@@@swiperList", this.swiperList[e])
|
|
|
+ },
|
|
|
+ // 点击菜单
|
|
|
+ handleMenuClick(item) {
|
|
|
+ if (item.id === 'all') {
|
|
|
+ this.$Router.push('/pagesHome/category/categoryStoreList');
|
|
|
+ } else {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pagesHome/category/index?id=${item.id}`,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 询价 */
|
|
|
+ btnClick() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/client/clientUser/inquiry`,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .home {
|
|
|
- background-color: #f0efef;
|
|
|
+ .container {
|
|
|
+ font-size: 28rpx;
|
|
|
+ min-height: calc(100vh - 30rpx);
|
|
|
+ background-color: #F9F9F9;
|
|
|
+ padding-bottom:30rpx;
|
|
|
+ .container-top-box {
|
|
|
+ padding: 108rpx 32rpx 34rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: linear-gradient(180deg, #D4E3FF 0%, #F0F1F9 53%, #F9F9F9);
|
|
|
+
|
|
|
+ .top-title {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 33% 33% 33%;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 34rpx;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .nav-bar {
|
|
|
- ::v-deep .u-navbar__content {
|
|
|
- background-color: #ffffff;
|
|
|
- }
|
|
|
+ .address {
|
|
|
+ display: flex;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
|
|
|
- .address-text {
|
|
|
- min-width: 120rpx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .title {
|
|
|
+ color: #0C1223;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 34rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- /* 头部搜索栏 */
|
|
|
- .home-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 90rpx;
|
|
|
- line-height: 90rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- background-color: #ffffff;
|
|
|
+ .top-search {
|
|
|
+ margin-bottom: 34rpx;
|
|
|
+ }
|
|
|
|
|
|
- .goto-address {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .top-swiper-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 256rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .icon-sanjiaoxing1 {
|
|
|
- font-size: 24rpx;
|
|
|
- margin: 17rpx 10rpx 0 6rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ .container-tabbar-box {
|
|
|
+ padding: 0 32rpx 0;
|
|
|
|
|
|
- .search-item {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- }
|
|
|
+ .tabar-box {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 12rpx 34rpx 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #fff;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(5, 18%);
|
|
|
+ justify-content: space-between;
|
|
|
+ grid-gap: 24rpx 0;
|
|
|
|
|
|
- /* 轮播图 */
|
|
|
- .home-swiper {
|
|
|
- padding: 20rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
+ .tabbar-item {
|
|
|
+ text-align: center;
|
|
|
|
|
|
- /* 商品分类 */
|
|
|
- .home-list {
|
|
|
- background-color: #ffffff;
|
|
|
- height: 360rpx;
|
|
|
- margin: 0 20rpx 20rpx 20rpx;
|
|
|
- padding: 20rpx 0 50rpx 0;
|
|
|
- border-radius: 10rpx;
|
|
|
+ .item-img {
|
|
|
+ .img {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .grid-text {
|
|
|
- font-size: 12px;
|
|
|
- color: #909399;
|
|
|
- padding: 10rpx 0 20rpx 0rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- }
|
|
|
+ .item-name {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- /* 热门推荐 */
|
|
|
- .hot {
|
|
|
- ::v-deep .u-cell__body {
|
|
|
- padding: 10rpx 20rpx;
|
|
|
+ .container-list-box {
|
|
|
+ padding: 0 32rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .item-box {
|
|
|
+ margin-top: 32rpx;
|
|
|
|
|
|
- .hot-title {
|
|
|
- border-left: 4px solid $uni-color-primary;
|
|
|
- padding-left: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .item-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom:32rpx;
|
|
|
+ .top-title {
|
|
|
+ color: #0C1223;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
|
|
|
- .near {
|
|
|
- ::v-deep .u-cell__body {
|
|
|
- padding: 10rpx 20rpx;
|
|
|
+ .top-more {
|
|
|
+ display: flex;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-list{
|
|
|
+ display:grid;
|
|
|
+ grid-template-columns: repeat(2, 47.81%);
|
|
|
+ justify-content: space-between;
|
|
|
+ .item{
|
|
|
+ border-radius:16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .near-title {
|
|
|
- border-left: 4px solid $uni-color-primary;
|
|
|
- padding-left: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
