nk-shop2.0/pages/index/index.vue

<template>
  <view class="Circle_friends">
    <view class="circle_friends_wrapper">
      <view v-if="isFshow">
        <view class="site-box flex_a_c_j_sb" :style="{'opacity':backColor}">

          <view :class="['place_wrapper','flex_a_c',isFshow?'sitebox':'']" @click="changeMap">
            <view :class="['iconfont','icon-weizhi',isFshow?'sitebox':'']" style="margin-left: 20rpx;">
            </view>
            <view class="town_name">{{ street||'定位中' }}</view>
          </view>
          <navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
            <view :class="['iconfont','icon-xiaoxi',isFshow?'sitebox':'']" style="color:#fff;"></view>
          </navigator>
        </view>


      </view>

      <view class="" v-if="!isFshow">
        <view class="site-box1">
          <view class="box flex_a_c_j_sb">
            <view class="place_wrapper flex_a_c" @click="changeMap">
              <view class="iconfont icon-weizhi"></view>
              <view class="town_name">{{street||'定位中' }}</view>
            </view>
            <navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
              <view class="iconfont icon-xiaoxi" style="color:#fff;"> </view>
            </navigator>
          </view>
          <navigator url="/pages/columnGoods/goods_search/index" hover-class="none" class="search_content flex_a_c_j_sb home_search">
          	<view class="flex_a_c">
          		<view class="iconfont icon-sousuo" style="font-size: 39rpx;"></view>
          		<input type="text" v-model="keyword" placeholder="搜索产品或店铺" placeholder-style="font-size: 30rpx;"
          			disabled>
          	</view>
          	<button class="search_btn">搜索</button>
          </navigator>
        </view>
      </view>

      <view class="home_bg">
        <image class="image" mode="aspectFill" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/home_img/home_bg.webp"></image>
        <view class="card">
          <image class="title" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/home_img/home_title.webp"></image>
        </view>
      </view>
      <!-- <zbpSwiper :isSelectPlace="true" :town="street" :streetname="street" :location_Arr="locationArr"
        @change="dchange">
      </zbpSwiper> -->
      
      <view class="home_list">
        <image class="left" @click="go_shop" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/home_img/home_yuncang.webp"></image>
        <view class="right">
          <image class="top"  @click="navgo(`/pages/nongKe/supply_chain/supplierB?type_id=10,17&street_id=${street_id}&townName=${town}`)" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/home_img/home_shichang.webp"></image>
          <image class="bottom" @click="navgo('/pages/nongKe/specialty/index?type_code=PersonalStore&street_id='+street_id)" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/home_img/home_my.webp"></image>
        </view>
      </view>
      <view class="home_recommend">
        <image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/home_img/home_tuijian.webp"></image>
      </view>

      <!-- <view class="list">
        <navigator hover-class="none"
          :url="`/pages/nongKe/supply_chain/supplierB?type_id=10,17&street_id=${street_id}&townName=${town}`">
          <view class="list-m">
            <image src="@/static/images/f6.png" mode="aspectFit"></image>
            <view class="list-title">
              <view class="list-titlea">
                <image src="@/static/images/p9.png" mode="aspectFit"></image>
                <view class="titlea-con">
                  <view class="titlea">september</view>
                  <view class="titleb"> {{new Date().getMonth()+1}}月 </view>
                </view>
              </view>
              <view class="list-titleb">
                <view class="titlea">
                  {{ town }}
                </view>
                <view class="titleb"> 综合供销云市场 </view>
              </view>
            </view>
            <view class="list-title-info" style="color: #3a7331">
              <view class=""> 点击查看 </view>

              <view class="title-infoimg">
                <image src="@/static/images/pj.png" mode="aspectFit"></image>
              </view>
            </view>
          </view>
        </navigator>

        <view class="list-m" @click="go_shop">
          <image src="@/static/images/f1.png" mode="aspectFit"></image>
          <view class="list-title">
            <view class="list-titlea">
              <image src="@/static/images/p8.png" mode="aspectFit"></image>
            </view>
            <view class="list-titleb">
              <view class="titlea"> 里海云仓 </view>
              <view class="titleb"> 行业分类市场 </view>
            </view>
          </view>
          <view class="list-title-info" style="color: #ff6b00">
            <view class=""> 点击查看 </view>
            <view class="title-infoimg">
              <image src="@/static/images/pj1.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
      </view> -->

      <!-- <view class="list-con">
        <view class="list-con-center" @tap="navgo('/pages/nongKe/specialty/index?type_code=PersonalStore&street_id='+street_id)">
          <image src="@/static/images/f8.png" mode="widthFix"></image>
        </view>
      </view> -->
      <!-- <view class="list-bon" info="中秋团圆节">
        <image src="@/static/images/f4.png" mode="aspectFit"></image>
      </view> -->
      <view class="goodslist">
        <WaterfallsFlow v-if="productList.length>0" :wfList="productList" :type="1" />
        <block v-else>
          <!-- <view style="display: flex;flex-direction: column;align-items: center;">
            <image src='@/static/images/no_short.png' style="width: 500rpx; height: 180rpx;"></image>
            <text class="pictrue_tips">暂无商品，试试其他位置</text>
          </view> -->
         <!-- <view class="common-hd">
            <view class="title">为你推荐</view>
          </view> -->
          <WaterfallsFlow :wfList="productList2" :type="1" />
        </block>
      </view>
      <view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
        <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
      </view>
      <view class='loadingicon acea-row row-center-wrapper' v-if='productList2.length > 0||loading2'>
        <text class='loading iconfont icon-jiazai' :hidden='loading2==false'></text>{{loadTitle2}}
      </view>
      <view class="empty_wrapper" v-if="emptyShow">
        <u-empty :show="emptyShow" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
      </view>
    </view>

    <u-picker :defaultIndex="[0, 0]" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
      @cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>


    <view class="location" v-if="isshow">
      <view class="locationa"> 位置权限使用说明 </view>
      <view class="locationb"> 用于向你推荐最近门店 </view>
      <view class="locationx" @click.stop="isshow=false">x</view>
    </view>
    
    <uni-popup ref="activityPopup" :is-mask-click="false">
      <activityCard @close="closeActivityCard"></activityCard>
    </uni-popup>
    
    <activityHome :showClose="false" @click="navgo(`/pages/newActivity/towPrice/towPrice?street_id=${street_id}&townName=${street}`)"></activityHome>
    <!-- <m-tabbar native>
		      <template v-slot:tabbar_index_2>
		        <view class="custom_style">
		          <view class="custom_style_icon"></view>
		          <view class="custom_style-txt"  style="color: #282828;">
		              发布
		          </view> </view>
		      </template>
		    </m-tabbar> -->
  </view>
</template>

<script>
  import mTabbar from '@/components/m-tabbar/m-tabbar.vue'
  import { wgsToGcj } from "@/utils/wgs.js";
  import zbpSwiper from '@/components/zbpSwiper'
  import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
  import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlowo.vue'
  import Cache from '@/utils/cache';
  import {
    getSlideAPI
  } from '@/api/lihai.js'
  import {
    graphicLstApi,
    getTopicList,
    graphicStartApi
  } from '@/api/community.js'
  import {
    getIndexData,
    getDiy,
    spuRecommend
  } from '@/api/api.js'

  import {
    spuInfo
  } from '@/api/product.js';
  import {
    getGeocoder,
    merClassifly,
    getProductslist
  } from '@/api/store.js';
  import {
    getArea,
    getStreet
  } from '@/api/article.js';
  import {
    Toast
  } from '@/libs/uniApi'
import { data } from '../../uni_modules/uview-ui/libs/mixin/mixin';
import activityCard from "@/components/activityCard.vue"
  export default {
    components: {
      mTabbar,
      zbpSwiper,
      easyLoadimage,
      WaterfallsFlow,
      activityCard
    },
    data() {
      return {
        activeStyle: {
          color: '#333333',
          fontWeight: 'bold',
          transform: 'scale(1.04)'
        },
        isshow: false,
        locationArr: ({}),
        latitude: null,
        longitude: null,
        bgColor: '',
        showPicker: false,
        columnData: [],
        show: false,
        tabsData: {
          list: [],
          tabsActive: 0
        },
        tabsData1: {
          list: [],
          tabsActive: 0
        },
        where: {
          category_id: 0,
          page: 1,
          limit: 30
        },
        where2: {
          category_id: 0,
          page: 1,
          limit: 30
        },

        currentItemId: 69, // 默认获取 社区的数据 0 表示推荐 || 69 社区
        keyword: '',
        location: '',
        emptyShow: false,
        town: '',
        productList: [], // 当前区域列表
        productList2: [], // 当前推荐列表
        recoList: [],
        articleList: [],
        street_id: '',
        street: '',
        bgColor: '',
        isFshow: false,
        backColor: 0,
        loadend: false,
        loading: false,
        loadTitle: '加载更多',
        loadend2: false,
        loading2: false,
        loadTitle2: '加载更多',
        
      }
    },
    onPullDownRefresh() {
      this.loadend = false;
      this.loading = false;
      this.list(true, this.street_id);
      // this.Area()
      this.$u.sleep(1000).then(()=>{
        uni.stopPullDownRefresh()
      })
    },
    onShow() {
    },
    onLoad() {
      // this.Area()
      // this.selfLocation()
      // this.openTongZhi()
      uni.$on('connectstatusChange', (connectstatus) => {
        var connectstr = ''
        if (connectstatus == true) {
          connectstr = '已连接'
          this.getRegistrationID()
        } else {
          connectstr = '未连接'
        }
        this.connectstatus = connectStr
      })
      this.selfLocation();
      
      this.$nextTick(()=>{
        this.$refs.activityPopup.open();
      })

    },

    onReachBottom() {
      if (this.productList.length > 0) {
        setTimeout(() => {
          this.list(false, this.street_id);
          this.productList2 = [];
        }, 50)
      } else if (this.productList2.length > 0) {
        setTimeout(() => {
          this.list2(false, '');
        }, 50)
      }
    },
    beforeDestroy() {
      // 销毁监听事件
      this.$bus.$off('value-updated')
    },
    mounted() {

      // #ifdef  H5
      // 监听页面滚动事件
      window.addEventListener("scroll", this.scrolling);
      // #endif

      this.$bus.$on('value-updated', (newValue) => {
        // 更新父组件的值
        this.street = newValue.split(',')[0]
        this.town = newValue.split(',')[0]
        this.street_id = newValue.split(',')[1]

      });




    },
    // #ifdef APP-PLUS
    onPageScroll(e) {

      const scrollTop = e.scrollTop;
      if (scrollTop <= 20) {
        this.backColor = 0
        this.isFshow = false
      } else if (20 < scrollTop && scrollTop <= 100) {
        this.backColor = 0.5
        this.isFshow = true
      } else if (scrollTop > 100) {
        this.backColor = 1
        this.isFshow = true
      }
    },
    // #endif
    methods: {
      closeActivityCard(){
        this.$refs.activityPopup.close();
      },
      navaction(val) {
        uni.navigateTo({
          url: '/pages/nongKe/supply_chain/suppliers?id=' + val
        })

      },
      getPositionFn() {
        this.street = '定位中'
        this.$store.commit('setLocation', { lat: null, long: null })
        uni.removeStorageSync('RejectTarget')
        this.selfLocation()

      },
      shuffleArray(array) { // 洗牌算法
        for (let i = array.length - 1; i > 0; i--) {
          let j = Math.floor(Math.random() * (i + 1));
          let temp = array[i];
          array[i] = array[j];
          array[j] = temp;
        }
        return array;
      },
      
      //获取商品列表
      list(isPage=false, id) {
        // if(!id||this.loadend) return this.list2(true, ''); // 定位没有获取到时,直接推荐
        let that = this;
        if (that.loadend&&!isPage) return;
        if (that.loading&&!isPage) return;
        if (isPage===true){
          that.$set(that, 'where', {
            category_id: 0,
            page: 1,
            limit: 30
          })
        }
        that.loading = true;
        that.loadTitle = '';
        getProductslist({
          page: that.where.page,
          limit: that.where.limit,
          street_id: id,
          type_id: '17,10',
          location: `${this.latitude||''},${this.longitude||''}`
        }).then(async (res) => {
          if (isPage === true) {
            that.$set(that, 'productList', []);
          }
          that.$set(that, 'productList2', []);
          // await that.$nextTick();
          // console.log(222)
          let list = res.data.list;
          if(list.length>0) list = this.shuffleArray(list);
          if (res.data.count == 0 && isPage) {
            that.list2(true, '');
          }
          let productList = that.$util.SplitArray(list, that.productList);
          let loadend = list.length < that.where.limit;
          that.loadend = loadend;
          that.loading = false;
          that.loadTitle = loadend ? '已全部加载' : '加载更多';
          that.$set(that, 'productList', productList);
          // console.log(that.productList)
          that.$set(that.where, 'page', that.where.page + 1);
          if (that.where.page == 1 && res.data.list.length <= 0) that.emptyShow = true
        }).catch(err => {
          that.loading = false;
          that.loadTitle = '加载更多';
        });

      },
      list2(isPage=false, id) {
        let that = this;
        
        if (that.loadend2&&!isPage) return;
        if (that.loading2&&!isPage) return;

        if (isPage === true) {
          that.$set(that, 'productList2', []);
          that.$set(that, 'where2', {
            category_id: 0,
            page: 1,
            limit: 30
          })
        }
        that.$set(that, 'productList', []);

        that.loading2 = true;
        that.loadTitle2 = '';
        let query = {
          page: that.where2.page,
          limit: that.where2.limit,
        };
        if(this.latitude&&this.longitude) query.location = this.latitude + ',' + this.longitude
        spuRecommend(query).then(res => {
          let list = res.data.list;
          if(list.length>0) list = this.shuffleArray(list);
          let productList = that.$util.SplitArray(list, that.productList2);
          let loadend = list.length < that.where2.limit;
          that.loadend2 = loadend;
          that.loading2 = false;
          that.loadTitle2 = loadend ? '已全部加载' : '加载更多';
          that.$set(that, 'productList2', productList);
          // console.log(that.productList)
          that.$set(that.where2, 'page', that.where2.page + 1);
          if (that.where.page2 == 1 && res.data.list.length <= 0) that.emptyShow2 = true
        }).catch(err => {
          that.loading2 = false;
          that.loadTitle2 = '加载更多';
        });

      },
      scrolling() {
        // 滚动条距文档顶部的距离
        let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        // 滚动条滚动的距离
        let scrollStep = scrollTop - this.oldScrollTop;
        // console.log("header 滚动距离 ", scrollTop);
        // 更新——滚动前，滚动条距文档顶部的距离
        this.oldScrollTop = scrollTop;

        //变量windowHeight是可视区的高度
        let windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        let scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;

        //滚动条到底部的条件
        if (scrollTop + windowHeight == scrollHeight) {
          //你想做的事情
          // console.log("header  你已经到底部了");
        }


        if (scrollTop <= 20) {
          this.backColor = 0
          this.isFshow = false
        } else if (20 < scrollTop && scrollTop <= 100) {
          this.backColor = 0.5
          this.isFshow = true
        } else if (scrollTop > 100) {
          this.backColor = 1
          this.isFshow = true
        }

      },

      getCloudShopMerId(id) {
        get_cloud_shop(id).then(res => {
          res.data.length > 0 ? this.isYunCang = 1 : this.isYunCang = 0
        })
      },
      selectLocation() {
        this.showPicker = true
      },
      confirm(e) {

        this.street = e.value[1].name
        this.street_id = e.value[1].code
        this.town = e.value[1].name
        this.loadend = false;
        this.loadend2 = false;
        this.$set(this.where, 'page', 1)
        this.$set(this.where2, 'page', 1)
        this.$set(this, 'productList', []);
        this.$nextTick(() => {
          this.list(true, this.street_id)
          this.$bus.$emit('value-updated', e.value[1].name + ',' + e.value[1].code);

        })
        this.showPicker = false
      },
      changeHandler(e) {
        const {
          columnIndex,
          value,
          values,
          index,
          picker = this.$refs.uPicker
        } = e;
        if (columnIndex === 0) {
          getStreet({
            area_code: value[0]['code']
          }).then(res => {
            this.$refs.uPicker.setColumnValues(1, res.data);
          });
        }
      },
      Area() {
        getArea({
          city_code: 510500
        }).then(res => {
          this.$refs.uPicker.setColumnValues(0, res.data);
          this.Street(res.data[0]['code']);
        });
      },
      Street(code) {
        getStreet({
          area_code: code
        }).then(res => {
          this.$refs.uPicker.setColumnValues(1, res.data);
        });
      },
      gogogo(item) {
        if (item.video_link.length > 0) {

          uni.navigateTo({
            // #ifdef MP || H5
            url: `/pages/short_video/nvueSwiper/index?id=${item.community_id}`
            // #endif
            // #ifdef APP
            url: `/pages/short_video/appSwiper/index?id=${item.community_id}`
            // #endif
          })

        } else {
          uni.navigateTo({

            url: `/pages/plantGrass/plant_detail/index?id=${item.community_id}`
          })
        }
      },
      giveStart(item) {
        let status = item.relevance_id ? 0 : 1
        graphicStartApi(item.community_id, {
          status: status
        }).then(res => {
          if (item.relevance_id) {
            item.count_start--;
            item.count_start = item.count_start == 0 ? 0 : item.count_start
            item.relevance_id = false
          } else {
            item.count_start++;
            item.relevance_id = true
          }
        })
      },
      go_shop() {
        if (this.isYunCang == 0) {
          return Toast('当前区域没有云仓库')
        }
        // uni.navigateTo({
        // 	url: `/pages/nongKe/cloud_entrepot/index?street=${this.street_id}&town=${this.town}&source=103&location=${this.latitude},${this.longitude}`
        // })
        uni.navigateTo({
          url: `/pages/nongKe/cloud_entrepot/indexh?street_id=${this.street_id}&townName=${this.town}&source=103&location=${this.latitude},${this.longitude}`
        })

      },
      navgo(url) {
        uni.navigateTo({
          url
        })
      },
      dchange(e) {
        this.street = e.value[1].name
        this.street_id = e.value[1].code
        this.town = e.value[1].name
        this.loadend = false;
        this.$set(this.where, 'page', 1)
        this.list(true, this.street_id)
      },
      selfLocation() {
        if (uni.getStorageSync('RejectTarget')) return this.list(true, '');
        if (uni.getStorageSync('loction') == true) {
          this.isshow = false
          this.list(true, '')
        } else {
          this.isshow = true
          uni.setStorageSync('loction', true);
        }
        // console.log(this.$store.state.storage.location);
        if (this.$store?.state?.storage?.location?.lat) {
          this.isshow = false
          this.latitude = this.$store.state.storage.location.lat;
          this.longitude = this.$store.state.storage.location.long;
          getGeocoder({
            lat: this.latitude,
            long: this.longitude
          }).then(res => {
            this.isshow = false;
            this.town = res.data.address_reference.town.title;
            this.street_id = res.data.address_reference.town.id;
            this.street = res.data.address_reference.town.title;
            this.$store.commit('setAddress', {
              street_id: this.street_id,
              townName: this.town
            });
            this.list(true, this.street_id)
            this.$nextTick(() => {
              this.$bus.$emit('value-updated', this.street + ',' + this
                .street_id);
            })

          }).catch(err => {
            this.isshow = false
            this.list2(true, '')
            uni.showToast({
              title: err,
              icon: 'none'
            })
          })
        } else uni.getLocation({
          type: 'wgs84',
          success: (res) => {
            res = wgsToGcj(res);
            this.isshow = false
            let latitude, longitude;
            latitude = res.latitude.toString();
            longitude = res.longitude.toString();
            this.latitude = res.latitude.toFixed(6);
            this.longitude = res.longitude.toFixed(6);
            this.$store.commit('setLocation', {
              lat: res.latitude.toFixed(6),
              long: res.longitude.toFixed(6),
            });
            getGeocoder({
              lat: latitude,
              long: longitude
            }).then(res => {
              this.isshow = false
              this.town = res.data.address_reference.town.title
              this.street_id = res.data.address_reference.town.id
              this.street = res.data.address_reference.town.title;
              this.$store.commit('setAddress', {
                street_id: this.street_id,
                townName: this.town
              });
              this.list(true, this.street_id)
              this.$nextTick(() => {
                this.$bus.$emit('value-updated', this.street + ',' + this
                  .street_id);
              })

            }).catch(err => {
              this.isshow = false
              this.list2(true, '')
              uni.showToast({
                title: err,
                icon: 'none'
              })
              this.street = '定位失败'
            })
          },
          fail: (err) => {
            console.log('定位失败');
            this.isshow = false
            uni.setStorageSync("RejectTarget", true)
            Toast('定位失败,请检查定位权限是否开启')
            this.street = '定位失败'
            this.list2(true, '')

            // uni.showToast({
            // 	title: "获取定位超时",
            // 	icon: 'none',
            // 	duration: 2000
            // });
          }
        });
      },
      // 选择位置
      changeMap() {
        uni.navigateTo({
          url: `/pages/select_address/select_address_n`,
          success: () => {
            uni.$once('changeAddress', (e) => {
              this.street_id = e.street.code;
              this.street = e.street.name;
              this.town = e.street.name;
              this.$store.commit('setAddress', {
                street_id: this.street_id,
                townName: this.town
              });
              if (e.longitude) {
                this.longitude = e.longitude;
                this.latitude = e.latitude;
                this.$store.commit('setLocation', {
                  lat: e.latitude,
                  long: e.longitude,
                });
              }
              this.loadend = false;
              this.loadend2 = false;
              this.$set(this.where, 'page', 1)
              this.$set(this.where2, 'page', 1)
              this.$set(this, 'productList', []);
              uni.pageScrollTo({
                  scrollTop: 0, // 滚动到页面的目标位置（单位px）
                  duration: 200 // 滚动动画的时长，默认300ms，单位 ms
              });
              this.$nextTick(()=>{
                this.list(true, this.street_id);
              });
              this.$bus.$emit('value-updated', e.street.name + ',' + e.street.code);
            })
          }
        })
      }


    }
  }
</script>

<style lang="scss" scoped>
  /deep/.color-lump {
    display: none;
  }

  page {
    background: #fff7e6;
    // background: #f4f7fe;

    // background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
  }

  .site-box1 {
    width: 706rpx;
    /* #ifdef MP || APP-PLUS */
    height: 160rpx;
    /* #endif */
    /* #ifdef H5 */
    height: 120rpx;
    /* #endif */
    margin-bottom: 26.32rpx;
    position: absolute;
    top: 105rpx;
    left: 20rpx;

    z-index: 9999 !important;

    .box{
      // 位置
      .place_wrapper {
        color: #fff;
        margin-right: 0rpx;
      
        font-size: 30rpx;
      
        .town_name {
          margin-left: 21rpx;
        }
      }
      
      .iconfont {
        font-size: 35.09rpx;
      }
      
    }
    
    .search_content {
    	margin: 0 auto;
      margin-top: 25rpx;
    	width: 706rpx;
    	height: 64rpx;
    	padding: 2px 2px 2px 21.05rpx;
    	border-radius: 175rpx;
    	background: #fff;
    	margin-bottom: 21rpx;
    	position: relative;
    	box-sizing: border-box;
    
    	.icon-sousuo {
    		font-size: 26.32rpx;
    		font-weight: bold;
    		color: #c8c7c6;
    		margin-right: 17.54rpx;
    	}
    
    	.search_btn {
    		color: #fff;
    		width: 105.26rpx;
    		height: 56rpx;
    		line-height: 56rpx;
    		background: #f84221;
    		border-radius: 100px;
    		font-size: 28.07rpx;
    	}
    }
  }

  .location {
    background-color: #f6f6f6;
    width: 680rpx;
    height: 150rpx;
    position: absolute;
    top: 0;
    z-index: 9999;
    border-radius: 20rpx;
    left: 50%;
    margin-left: -340rpx;
    margin-top: 80rpx;
    padding-left: 20rpx;

    .locationa {
      font-size: 28rpx;
      color: #000;
      font-weight: 500;
      margin-top: 30rpx;
      margin-bottom: 15rpx;
    }

    .locationb {
      font-size: 20rpx;
      color: #5a5a5a;
    }

    .locationx {
      color: #000;
      position: absolute;
      top: 10rpx;
      right: 20rpx;
    }
  }

  .Circle_friends {
    position: relative;
    padding: 0 0 87.72rpx 0;
  }

  .sitebox {
    animation-name: fadeIn;
    animation-duration: 3s;
    animation-fill-mode: forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .site-box {
    width: 100%;
    /* #ifdef MP || APP-PLUS */
    height: 160rpx;
    /* #endif */
    /* #ifdef H5 */
    height: 120rpx;
    /* #endif */
    margin-bottom: 26.32rpx;
    position: absolute;
    top: 0rpx;
    position: fixed;
    z-index: 999;
    /* #ifdef MP || APP-PLUS */
    padding-top: 75rpx;
    /* #endif */
    /* #ifdef H5 */
    padding-top: 25rpx;
    /* #endif */
    background: url('@/static/images/bg2.png') no-repeat;
    background-size: 100% 100%;

    padding-right: 20rpx;

    // 位置
    .place_wrapper {
      color: #fff;
      margin-right: 24.56rpx;
      font-size: 30rpx;

      opacity: 0;

      .town_name {
        margin-left: 21rpx;
      }
    }

    .iconfont {
      opacity: 0;
      font-size: 30rpx;
      font-size: 35.09rpx;
    }
  }

  .circle_friends_wrapper {
    position: relative;

    z-index: 2;
  }

  /deep/.u-tabs__wrapper__nav__line {
    width: 46rpx;
  }

  /deep/.u-tabs__wrapper__nav__item {
    padding: 0 0px;
    padding-right: 10rpx;
  }

  .search_wrapper {
    width: 694.74rpx;
    margin: 0 auto;
  }

  .tabs_wrapper {
    width: 720rpx;
    margin: 0 auto;
    margin-bottom: 21.05rpx;
    // margin-left: -20rpx;
  }

  .empty_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .article_box {
    height: 100%;
    width: 694.74rpx;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 24.56rpx;
    box-sizing: border-box;

    .title-box {
      height: 87.72rpx;

      text {
        font-size: 28.07rpx;
      }
    }

    .article-item {
      display: flex;
      // height: 175.44rpx;
      justify-content: space-between;
      border-bottom: 1px solid #f0f0f0;
      padding: 21.05rpx 0;

      .text {
        flex: 1;
        height: 122.81rpx;
        margin-right: 17.54rpx;
        font-size: 24rpx;
        color: #999;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .name {
          font-size: 26.32rpx;
          color: #282828;
        }
      }

      .pictrue {
        width: 175.44rpx;
        height: 122.81rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 8px;
        }
      }
    }
  }

  .tabs_wrapper {
    width: 723rpx;
    margin: 0rpx auto;
    margin-bottom: 21.05rpx;

    .title {
      font-size: 31.58rpx;
      font-weight: bold;

      &::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 31.58rpx;
        background-color: #f84221;
        margin-right: 7.02rpx;
      }
    }
  }

  .list {
    display: flex;
    padding: 12rpx;
    justify-content: space-between;

    .list-m {
      width: 356rpx;
      height: 235rpx;
      position: relative;

      .list-title {
        display: flex;
        position: absolute;
        top: 20rpx;

        .list-titlea {
          margin-left: 14rpx;
          width: 96rpx;
          height: 117rpx;
          margin-right: 11rpx;
          position: relative;

          .titlea-con {
            width: 96rpx;
            height: 100rpx;

            color: #f4f7fe;

            .titlea {
              position: absolute;
              top: 32rpx;
              margin-left: 12rpx;
              font-size: 16rpx;
              font-family: PingFang SC-Semibold, PingFang SC;
            }

            .titleb {
              position: absolute;
              bottom: 8rpx;
              font-size: 37rpx;
              font-family: PingFang SC-Semibold, PingFang SC;
              font-weight: 600;
              color: #ffffff;
              width: 100%;
              text-align: center;
              // margin-left: 20rpx;
            }
          }

          image {
            width: 100%;
            height: 100%;
          }
        }

        .list-titleb {
          .titlea {
            font-size: 37rpx;
            font-family: PingFang SC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            margin-top: 10rpx;
          }

          .titleb {
            font-size: 33rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
          }
        }
      }

      .list-title-info {
        // width: 98rpx;
        height: 30rpx;
        line-height: 30rpx;
        background: #ffffff;
        padding: 2rpx 2rpx;
        display: flex;

        font-size: 18rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ff6b00;
        border-radius: 19rpx 19rpx 19rpx 19rpx;
        position: absolute;
        bottom: 14rpx;
        left: 50%;
        margin-left: -49rpx;
        padding-left: 15rpx;

        .title-infoimg {
          width: 18rpx;
          height: 18rpx;
          margin: auto 0;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .list-con {
    display: flex;
    justify-content: space-between;
    margin-top: -10rpx;
    padding: 12rpx;


    .list-con-left {
      width: 357rpx;
      height: 482rpx;
      position: relative;

      .list-con-title {
        position: absolute;
        top: 0;
        z-index: 10;
        padding-left: 14rpx;

        .con-titlea {
          font-size: 37rpx;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          margin-top: 10rpx;
        }

        .con-titleb {
          margin-top: 5rpx;
          font-size: 33rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
      }

      image {
        width: 100%;
        height: 100%;
      }
    }

    .list-con-right {
      width: 356rpx;
      height: 482rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .con-right {
        width: 356rpx;
        height: 235rpx;
        position: relative;

        .list-con-title {
          position: absolute;
          top: 0;
          z-index: 10;
          padding-left: 14rpx;

          .con-titlea {
            font-size: 37rpx;
            font-family: PingFang SC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            margin-top: 10rpx;
          }

          .con-titleb {
            margin-top: 5rpx;
            font-size: 33rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
          }
        }

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .list-con-center{
      width: 726rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .list-bon {
    width: 724rpx;
    height: 128rpx;
    margin: 0 auto;
    margin-bottom: 12rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .goodslist {
    margin: 0 auto;
    width: 725rpx;

    .no-more {
      text-align: center;
      padding-top: 18rpx;
    }

    .pictrue_tips {
      color: $uni-nothing-text;
    }

    .common-hd {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 118rpx;

      .title {
        padding: 0 80rpx;
        font-size: 34rpx;
        color: $theme-color;
        font-weight: bold;
        background-image: url("~@/static/images/index-title.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: left center;
      }
    }
  }

  .rotate-box {
    transform: rotate(0deg);
    transition: transform .5s ease-out;
  }

  .rotate-box:active {
    transform: rotate(360deg);
  }
  .home_bg{
    width: 750rpx;
    height: 900rpx;
    position: relative;
    .image{
      height: 100%;
      width: 100%;
    }
    .card{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100rpx;
      background-color: #fff7e6;
      border-radius: 60rpx 60rpx 0 0;
      .title{
        position: absolute;
        top: -50%;
        left: 50%;
        
        transform: translate(-50%);
        width: 642rpx;
        height: 139rpx;
      }
    }
  }
  .home_list{
    display: flex;
    justify-content: space-around;
    padding: 10rpx;
    padding-bottom: 20rpx;
    padding-top: 0;
    .left{
      height: 491rpx;
      width: 340rpx;
    }
    .right{
      display: flex;
      flex-direction: column;
      .top{
        width: 390rpx;
        height: 244rpx;
      }
      .bottom{
        width: 390rpx;
        height: 244rpx;
      }
    }
  }
  .home_recommend{
    display: flex;
    justify-content: center;
    image{
      width: 618rpx;
      height: 113rpx;
    }
  }
</style>