<template>
  <view class="page">
    <status-bar backgroundColor="#ffffff"></status-bar>

    <search-box @click="onSearch"></search-box>
    <view
      class="categroy-list"
      style="position: absolute; margin-top: 90rpx"
      v-if="!langStandard"
    >
      <view>
        <navigator
          hover-class="none"
          url="/activity/fightgroup/activi?cname=GR0UP PURCHASE"
          v-if="false"
        >
          <image
            lazy-load
            mode="scaleToFill"
            style="width: 100%; height: 188rpx"
            src="../../static/images/diben/purchas.png"
          />
        </navigator>
        <uni-collapse
          ref="add"
          class="warp"
          @change="change(aid)"
          v-for="(val, aid) in categorySecondTree"
          :key="aid"
        >
          <uni-collapse-item :title="val.category_name" open="true">
            <template v-if="categorySecondTree.length > 0">
              <uni-list>
                <view v-for="(cate, pi) in val.children" :key="pi">
                  <uni-list-item
                    v-if="cate.category_is_enable == 1"
                    :key="pi"
                    :title="cate.category_name"
                    thumb=""
                    @click="
                      goto(cate.category_id, val.category_id, val.category_name)
                    "
                  />
                </view>
              </uni-list>
            </template>
          </uni-collapse-item>
        </uni-collapse>
      </view>
      <view style="width: 100%; height: 100rpx"></view>
    </view>

    <view class="main" style="z-index: 100px" v-else>
      <view class="page-body">
        <scroll-view class="categroy-left" scroll-y>
          <!-- <view
            data-id="brand"
            data-index="-2"
            @click="switchTab"
            :class="{ 'cate-list uni-ellipsis': 1, on: curIndex === -2 }"
            >{{ __("品牌推荐") }}
          </view> -->
          <view
            v-for="(item, category_index) in categoryFirst"
            :key="category_index"
            :data-id="item.category_id"
            :data-index="category_index"
            @click="switchTab"
            :class="{
              'cate-list uni-ellipsis': 1,
              on: curIndex === category_index,
            }"
            >{{ item.category_name }}
          </view>
        </scroll-view>

        <view class="categroy-right">
          <view
            :class="
              curIndex == 0
                ? 'categroy-right-box categroy-right-box-first'
                : 'categroy-right-box'
            "
            :style="
              curIndex == -2 ? 'border-radius:0;' : 'border-radius:20rpx;'
            "
          >
            <block v-if="category_deep == 2">
              <view
                style="white-space: nowrap; overflow-y: auto"
                class="right-cate-list"
              >
                <label
                  :class="[
                    'm-category-list',
                    currentCid == categoryId ? 'active' : '',
                  ]"
                  :data-id="categoryId"
                  @click="listProduct"
                  >{{ __("全部") }}</label
                >
                <label
                  :class="[
                    'm-category-list',
                    currentCid == item.category_id ? 'active' : '',
                  ]"
                  :data-id="item.category_id"
                  @click="listProduct"
                  v-for="(item, index) in categorySecondTree"
                  :key="index"
                  >{{ item.category_name }}</label
                >
              </view>
            </block>
            <scroll-view
              :class="[
                'categroy-right-scroll',
                category_deep == 2 ? 'categroy-right-scroll-deep2' : '',
              ]"
              scroll-y
              @scrolltolower="scrollbottom"
              :scroll-top="scrollTop"
              @scroll="scroll"
              scroll-with-animation="true"
            >
              <block v-if="category_deep == 2">
                <!--301模板-->
                <product-list
                  ref="productList"
                  :uniId="ptConfig.uniId"
                  :isFilterFixed="ptConfig.isFilterFixed"
                  :isShowFilter="ptConfig.isShowFilter"
                  :isShowLoading="ptConfig.isShowLoading"
                  :options="ptConfig.options"
                  :viewtype="ptConfig.viewtype"
                  :titleText="ptConfig.titleText"
                  :titleColor="ptConfig.titleColor"
                  :bgColor="ptConfig.bgColor"
                  :paddingLeft="ptConfig.paddingLeft"
                  :paddingRight="ptConfig.paddingRight"
                  :css="ptConfig.css"
                ></product-list>
                <!--301模板-->

                <div style="height: 1px"></div>
              </block>
              <block v-if="category_deep == 1">
                <!--301模板-->
                <product-list
                  v-if="category_deep == 1"
                  ref="productList"
                  :uniId="ptConfig.uniId"
                  :isFilterFixed="ptConfig.isFilterFixed"
                  :isShowFilter="ptConfig.isShowFilter"
                  :isShowLoading="ptConfig.isShowLoading"
                  :options="ptConfig.options"
                  :viewtype="ptConfig.viewtype"
                  :titleText="ptConfig.titleText"
                  :titleColor="ptConfig.titleColor"
                  :bgColor="ptConfig.bgColor"
                  :paddingLeft="ptConfig.paddingLeft"
                  :paddingRight="ptConfig.paddingRight"
                  :css="{ paddingTop: '20rpx' }"
                ></product-list>
                <!--301模板-->
              </block>
              <block
                v-else-if="category_deep == 3 && categorySecondTree.length > 0"
              >
                <!--上级分类 全部-->
                <div
                  v-if="
                    false && curIndex !== -2 && categorySecondTree.length > 0
                  "
                  style="margin: 10px"
                >
                  <navigator
                    :url="
                      '/pages/product/list?category_id=' +
                      categoryFirst[curIndex].category_id +
                      '&cname=' +
                      categoryFirst[curIndex].category_name +
                      '&page_id=' +
                      categoryFirst[curIndex].page_id
                    "
                    class="m-cell m-cell-access"
                    style="padding: 30rpx 44rpx 10rpx"
                    hover-class="none"
                  >
                    <view class="m-cell-bd m-cell-primary">
                      <p>{{ __("全部分类") }}</p>
                    </view>
                    <text class="m-cell-ft"></text>
                  </navigator>
                </div>

                <block v-if="curIndex !== -2">
                  <block
                    v-for="(item, category_order) in categorySecondTree"
                    :key="category_order"
                  >
                    <div v-if="curIndex !== -2" class="category-box">
                      <navigator
                        :url="
                          '/pages/product/list?category_id=' +
                          item.category_id +
                          '&cname=' +
                          item.category_name +
                          '&page_id=' +
                          item.page_id
                        "
                        class="m-cell m-cell-access"
                        style="margin-top: 0rpx"
                        hover-class="none"
                      >
                        <view class="m-cell-bd m-cell-primary">
                          <p>{{ item.category_name }}</p>
                        </view>
                        <text class="m-cell-ft"></text>
                      </navigator>

                      <view
                        class="category3-list"
                        v-for="(val, pi) in item.children"
                        :key="val.category_id"
                      >
                        <navigator
                          :url="
                            '/pages/product/list?category_id=' +
                            val.category_id +
                            '&cname=' +
                            val.category_name +
                            '&page_id=' +
                            val.page_id
                          "
                          hover-class="none"
                        >
                          <image lazy-load :src="val.category_image"></image>
                          <view
                            class="classname uni-ellipsis"
                            style="
                              height: 40rpx;
                              display: inherit;
                              white-space: inherit;
                              word-break: break-all;
                              line-height: 1.5;
                            "
                          >
                            <text>{{ val.category_name }}</text>
                          </view>
                        </navigator>
                      </view>
                      <br />
                    </div>
                    <block v-else>
                      <view class="brand-box">
                        <view
                          class="brand-list"
                          v-for="(brand, inx) in item.items"
                          v-bind:key="brand.id"
                        >
                          <navigator
                            :url="
                              '/pages/product/list?brand_id=' +
                              brand.brand_id +
                              '&cname=' +
                              brand.brand_name +
                              '&page_id=' +
                              (brand.page_id || 0)
                            "
                            hover-class="none"
                          >
                            <image
                              lazy-load
                              :src="brand.brand_image"
                              style="width: 140rpx; height: 140rpx"
                            ></image>
                            <view class="classname text-overflow uni-ellipsis">
                              <text>{{ brand.brand_name }}</text>
                            </view>
                          </navigator>
                        </view>
                      </view>
                    </block>
                  </block>
                </block>
                <block v-if="curIndex == -2">
                  <view class="brand-box">
                    <block
                      v-for="(item, category_order) in categorySecondTree"
                      :key="category_order"
                    >
                      <view
                        class="brand-list"
                        v-for="(brand, inx) in item.items"
                        v-bind:key="brand.id"
                      >
                        <navigator
                          :url="
                            '/pages/product/list?brand_id=' +
                            brand.brand_id +
                            '&cname=' +
                            brand.brand_name +
                            '&page_id=' +
                            (brand.page_id || 0)
                          "
                          hover-class="none"
                        >
                          <image
                            lazy-load
                            :src="brand.brand_image"
                            style="width: 140rpx; height: 140rpx"
                          ></image>
                          <view class="classname text-overflow uni-ellipsis">
                            <text>{{ brand.brand_name }}</text>
                          </view>
                        </navigator>
                      </view>
                    </block>
                  </view>
                </block>
                <div style="height: 1px"></div>
              </block>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>

    <view class="u-top">
      <movable-area class="movableArea">
        <movable-view
          class="movableView"
          @touchmove.stop.prevent="doNothing"
          direction="all"
          :x="initX"
          :y="initY"
        >
          <image
            src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/nav/black/nav_gotop.png"
            :class="isQuickNav ? 'quicknav' : 'hide'"
            @tap="returnTop"
          ></image>
        </movable-view>
      </movable-area>
    </view>
  </view>
</template>


<script>
import statusBar from "../../components/status-bar.vue";
import uniCollapse from "@/components/uni-collapse/uni-collapse.vue";
import uniCollapseItem from "@/components/uni-collapse-item/uni-collapse-item.vue";
import uniList from "@/components/uni-list/uni-list.vue";
import uniListItem from "@/components/uni-list-item/uni-list-item.vue";

import { mapMutations, mapState } from "vuex";
import ProductList from "../../components/product-list";
import SearchBox from "../../uni_modules/search-box/components/search-box/search-box";

let scrollTimeout = null;

export default {
  data: function () {
    return {
      height: 0,
      categoryActive: 0,
      scrollTop: 0,
      categoryFirst: [], //默认一级分类
      categorySecondTree: [],
      curIndex: 0, // 一级分类Index
      categoryId: 0, // 一级分类编号
      category_deep: false, // false| 1| 2| 3，当前一级分类这个分支是几级分类，false为不确定
      currentCid: -1, //当前选中分类
      langStandard: true,

      initX: "690",
      initY: "1336",

      w: 0,
      screenHeight: 0,
      oldscposition: 0,
      isQuickNav: false,

      opacity: 1,
      background: "f1f1f1",
      toView: 0,

      ptConfig: {
        uniId: "category",
        isFilterFixed: false,
        isShowFilter: false,
        isShowLoading: true,
        options: {},
        viewtype: 0,
        titleText: "",
        titleColor: "",
        bgColor: "",
        paddingLeft: 0,
        paddingRight: 0,
        css: { paddingTop: "0rpx" },
      },
    };
  },
  computed: mapState([
    "Config",
    "StateCode",
    "notice",
    "plantformInfo",
    "shopInfo",
    "userInfo",
    "hasLogin",
  ]),
  components: {
    SearchBox,
    ProductList,
    statusBar,
    uniCollapse,
    uniCollapseItem,
    uniList,
    uniListItem,
  },
  mounted() {
    let view = uni.createSelectorQuery().in(this).select(".movableArea");
    let that = this;

    view
      .fields(
        {
          size: true,
          scrollOffset: true,
        },
        (data) => {
          if (data) {
            that.setData({
              initX: data.width,
              initY: data.height - 100,
            });
          }
        }
      )
      .exec();
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;

    uni.setNavigationBarTitle({
      title: this.__("分类"),
    });

    var w = that.$.getSystemInfoSync().windowWidth;
    //that.langStandard = that.Lang.standard;
    that.categoryId = options.category_id;
    that.w = w;

    that.$.getSystemInfo({
      success: function (t) {
        that.setData({ screenHeight: t.screenHeight });
      },
    });
  },

  onReady() {
    var that = this;

    this.height = uni.getSystemInfoSync().windowHeight;

    //初始化，默认读取一级分类
    if (that.langStandard) {
      const params = { size: 500 , store_id:"0"};
      that.$.request({
        url: that.Config.URL.product.listCategory,
        loading: false,
        data: params,
        ajaxCache: {
          timeout: that.Config.CACHE_EXPIRE,
        },
        success(data) {
          
          that.setData({
            categoryFirst: data.items,
          });

          that.setData({
            categoryId: that.categoryFirst[that.curIndex].category_id,
          });

          if (that.langStandard) {
            that.loadCategoryTree(that.categoryId);
          }
        },
      });
    } else {
      that.loadCategoryTree(that.categoryId);
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.showCartNum();
  },

  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
      "showCartNum",
    ]),

    switchTab(e) {
      this.setData({
        toView: e.target.dataset.id,
        curIndex: parseInt(e.target.dataset.index),
        // categorySecondTree: [],
        currentCid: e.target.dataset.id, //e.target.dataset.id,
        //category_deep: false,
      });

      if (this.curIndex == -2) {
        this.loadBrand(e.target.dataset.id);
      } else {
        this.categoryId = e.target.dataset.id;
        this.loadCategoryTree(this.categoryId);
      }
    },
    listProduct(e) {
      let that = this;
      let categoryId = e.target.dataset.id;

      if (categoryId == 0) {
        categoryId = that.categoryId;
      }

      that.setData({
        currentCid: categoryId,
      });

      //设置商品请求数据
      that.ptConfig.options = {
        category_id: categoryId,
      };
    },
    doNothing() {},

    loadCategoryTree(category_id) {
      var that = this;

      that.$.request({
        url: that.Config.URL.product.treeCategory,
        data: {
          category_parent_id: category_id,
          store_id:"0"
        },
        ajaxCache: {
          timeout: that.Config.CACHE_EXPIRE,
        },
        success(data) {
          //data 即为 tree
          if (data.length == 0) {
            //去读取商品接口 一级分类
            let e = { target: { dataset: { id: category_id } } };
            that.listProduct(e);
            that.category_deep = 1;
          } else {
            //计算category_deep
            let category_deep = that.getCategoryLevel(data);

            that.setData({
              categorySecondTree: data,
              category_deep: category_deep,
            });

            if (that.category_deep == 2) {
              //去读取商品接口
              let e = { target: { dataset: { id: category_id } } };
              that.listProduct(e);
            }
          }

          that.returnTop();
        },
      });
    },

    scroll: function (t) {
      let that = this;

      that.setData({ oldscposition: t.detail.scrollTop });

      if (100 < t.detail.scrollTop) {
        that.setData({ opacity: 1, background: "f8f8f8" });
      } else {
        that.setData({
          opacity: 0,
          background: "fff",
        });
      }
      if (t.detail.scrollTop >= this.screenHeight) {
        this.setData({ isQuickNav: true });
      } else {
        this.setData({ isQuickNav: false });
      }
    },

    scrollbottom: function (e) {
      var that = this;
      uni.$emit("diy-scrollbottom", { uniId: that.ptConfig.uniId });
    },

    returnTop: function () {
      let that = this;
      //视图会发生重新渲染
      that.scrollTop = that.oldscposition;
      //当视图渲染结束 重新设置为0
      that.$nextTick(() => {
        that.scrollTop = 0;
      });
      this.setData({ isQuickNav: false });
    },

    loadBrand(category_id) {
      //return

      var that = this;
      that.$.request({
        url: that.Config.URL.product.brand,
        data: {},
        ajaxCache: {
          timeout: that.Config.CACHE_EXPIRE,
        },
        success(data) {
          that.setData({
            categorySecondTree: data.items,
          });
        },
      });
    },

    goto: function (e, r, t) {
      uni.navigateTo({
        url:
          "/pages/product/list?category_id=" +
          e +
          "&parent_id=" +
          r +
          "&cname=" +
          t,
      });
    },
    change(e) {
      if (!this.categorySecondTree[e].children.length) {
        uni.navigateTo({
          url:
            "/pages/product/list?category_id=" +
            this.categorySecondTree[e].category_id +
            "&cname=" +
            this.categorySecondTree[e].category_name,
        });
      }
    },
    onSearch(e) {
      let that = this;
      that.$.gopage("/pagesub/search/search");
    },
    getCategoryLevel(tree) {
      //从第二级读取的， 只判断第二级是否有子级别
      let lv = 2;

      for (let i = 0; i < tree.length; i++) {
        if (tree[i].children.length > 0) {
          lv = lv + 1;

          return lv;
        }
      }

      return lv;
    },
  },
};
</script>

<style lang="scss">
@import "../../styles/_variables.scss";

page {
  background-color: #fff !important;
}

.page {
  background-color: #fff !important;
}

uni-page-body {
  background-color: #fff !important;
  min-height: 100% !important;
  height: 100% !important;
}

.page-body {
  display: flex;
}

.top {
  width: 100%;
  height: 82rpx;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
  position: fixed;
  z-index: 99;
  line-height: 82rpx;
}

.top-left {
  margin-top: 16rpx;
  float: left;
}

.top-left img {
  width: 40rpx;
  height: 52rpx;
}

.b-left {
  float: left;
  margin-top: -4rpx;
}

.b-left image {
  width: 40rpx;
  height: 40rpx;
  margin-top: 14rpx;
  margin-left: 20rpx;
}

.top-right {
  width: 50rpx;
  height: 52rpx;
  margin-right: 24rpx;
  margin-top: 14rpx;
  float: right;
}

.top-right image {
  width: 50rpx;
  height: 52rpx;
}

.top-right view {
  width: 50rpx;
  height: 30rpx;
  font-size: 24rpx;
  position: absolute;
  margin-top: -62rpx;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 30rpx;
  text-align: center;
}

.categroy-list {
  position: relative;
  width: 100%;
  height: 100%;
}

.uni-collapse:before {
  height: 0;
}

.input-view {
  display: flex;
  background-color: #ffffff;
  height: 88rpx;
  //padding: 14rpx 4%;
  flex-wrap: nowrap;
  line-height: 60rpx;
}

.input-view .uni-icon {
  line-height: 60rpx !important;
}

.input-view .input {
  height: 60rpx;
  line-height: 60rpx;
  width: 94%;
  padding: 0 3%;
}

//for ZH

/* .main{
  margin-bottom:var(--window-bottom)
} */

.categroy-left {
  position: absolute;
  // #ifndef APP || MP
  top: calc(60rpx + 14rpx + 14rpx + 50rpx);
  // #endif
  // #ifdef APP || MP
  top: calc(60rpx + 14rpx + 14rpx + 50rpx + var(--status-bar-height) - 6rpx);
  // #endif
  bottom: 0;
  z-index: 1;
  width: 20%;
  box-sizing: border-box;

  background-color: #fff;
}

.categroy-left .cate-list {
  text-align: center;
  /*border-left: 3px solid #eee;*/
  border-right: 0px solid #fff;
  /*background-color: #eee;*/

  white-space: normal;
  height: 100rpx;
  line-height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.categroy-left .cate-list.on {
  color: $default-skin-bg-active;
  border-color: $default-skin-bg-active;
  border-top: 0px solid #fff;
  border-bottom: 0px solid #fff;
  border-right: 0px solid #fff;
  background-color: #f5f5f5;

  font-weight: bold;
  font-size: 14px;
}

.categroy-right {
  z-index: 1;
  width: 100%;
  left: 20%;
  height: auto;
  overflow: hidden;
  position: absolute;
  // #ifndef APP || MP
  top: calc(60rpx + 14rpx + 14rpx + 50rpx);
  // #endif
  // #ifdef APP || MP
  top: calc(60rpx + 14rpx + 14rpx + 50rpx + var(--status-bar-height) - 6rpx);
  // #endif
  bottom: 0;

  .categroy-right-box {
    width: 80%;
    height: auto;
    overflow: hidden;
    position: absolute;
    background-color: #f5f5f5;
    border-radius: 10px;
    top: 0;
    bottom: 0;
  }

  .categroy-right-box-first {
    border-radius: 0px;
  }

  .right-cate-list {
    margin-left: 20rpx;
    margin-right: 20rpx;
    margin-top: 20rpx;
    background-color: #fff;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;

    padding: 10rpx;
  }
}

.categroy-right-scroll {
  z-index: 1;
  width: calc(100% - 20rpx);
  height: calc(100% - 0rpx);
  overflow: hidden;
  background-color: #f5f5f5;
  position: relative;

  border-radius: 10px;

  padding-left: 10rpx;
  padding-right: 10rpx;
}

.categroy-right-scroll-deep2 {
  height: calc(100% - 60rpx);
}

.cate-box {
  /*height: 100%;*/
  /*padding:40rpx;*/
  box-sizing: border-box;
}

.cate-box .cate-banner image {
  display: block;
  width: 100%;
  height: 190rpx;
}

.cate-title {
  position: relative;
  height: 50rpx;
  line-height: 50rpx;
  padding: 30rpx 0 30rpx;
  text-align: center;
  color: $default-skin-bg-active;
  font-size: 28rpx;
}

.cate-title::before {
  position: absolute;
  left: 100rpx;
  top: 43rpx;
  content: "";
  width: 70rpx;
  height: 4rpx;
  background: $default-skin-bg-active;
}

.cate-title::after {
  position: absolute;
  right: 100rpx;
  top: 43rpx;
  content: "";
  width: 70rpx;
  height: 4rpx;
  background: $default-skin-bg-active;
}

.category-level-2 {
  color: lighten($default-skin-bg-active, 13.5%);
}

.category3-list {
  display: inline-block;
  width: 176rpx;
  /*height: 160rpx;*/
  text-align: center;
  margin: 0 0rpx 0rpx 0;
  padding: 10rpx 2rpx 10rpx 8rpx;

  font-size: 24rpx;
  vertical-align: top;
}

.category3-list image {
  width: 108rpx;
  height: 108rpx;
  margin-bottom: 10rpx;
}

.category3-list:nth-child(3n) {
  margin-right: 0;
}

/*
.product-list {
  display: inline-block;
  width: 160rpx;

  text-align: center;
  margin: 0 0rpx 0rpx 0;
  padding: 10rpx;

  font-size: 24rpx;
  vertical-align: top;
}

.product-list image {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 10rpx;
}

.product-list:nth-child(3n) {
  margin-right: 0;
}
*/

.uni-ellipsis {
  font-size: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: pre-wrap;
}

/* 分类子级内容 */
.categroy-parent {
  background-color: transparent;
  margin-top: 14px;
  margin-bottom: 14px;
}

.categroy-parent navigator {
  position: relative;
  display: block;
  font-size: 0.545rem;
  line-height: 1.6rem;
  height: 1.6rem;
  color: #6d6d6d;
  text-align: center;
}

.categroy-parent navigator:after {
  content: "";
  border-bottom: 1px solid #ddd;
  position: absolute;
  left: 15%;
  right: 15%;
  top: 45%;
}

.categroy-parent navigator label {
  display: inline-block;
  position: relative;
  z-index: 2;
  padding: 0 10rpx;
  background: #f2f2f2;
  font-size: 26rpx;
}

/*
.categroy-right .categroy-parent:nth-child(1) navigator label {
  background-color: #f30213;
  color:#fff;
}

.categroy-right .categroy-parent:nth-child(2) navigator label {
  background-color: #AC92ED;
  color:#fff;
}

.categroy-right .categroy-parent:nth-child(3) navigator label {
  background-color: #4FC0E8;
  color:#fff;
}

.categroy-right .categroy-parent:nth-child(4) navigator label {
  background-color: #A0D468;
  color:#fff;
}

.categroy-right .categroy-parent:nth-child(5) navigator label {
  background-color: #48CFAE;
  color:#fff;
}

.categroy-right .categroy-parent:nth-child(6) navigator label {
  background-color: #EC87BF;
  color:#fff;
}

.categroy-right .categroy-parent:nth-child(7) navigator label {
  background-color: #FFCE55;
  color:#fff;
}

.categroy-right .categroy-parent:nth-child(8) navigator label {
  background-color: #5D9CEC;
  color:#fff;
}

.categroy-right .categroy-parent:nth-child(9) navigator label {
  background-color: #FB6E52;
  color:#fff;
}

.categroy-right .categroy-parent:nth-child(10) navigator label {
  background-color: #AAB2BD;
  color:#fff;
}
*/

/*全部商品 start*/
.m-navbar-item {
  padding: 20rpx 0;
  font-size: 24rpx;

  i {
    font-size: 0rpx;
    line-height: 0;
    vertical-align: middle;
    display: inline-block;
    width: 0rpx;
    height: 0rpx;
    margin-left: 9.375rpx;
    border-width: 9.375rpx;
    border-color: #aaa transparent transparent transparent;
    border-style: solid dashed dashed dashed;
  }
}

.m-navbar-item:after {
  border: none;
}

.m-navbar-item.m-navbar-item-on {
  background-color: #fff;
  color: $default-skin-bg;

  i {
    border-color: $default-skin-bg transparent transparent;
  }
}

.m-navbar-item.m-navbar-item-on::before {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 6rpx;
  border-bottom: 6rpx solid $default-skin-bg;
  color: #cccccc;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  z-index: 3;
}

.m-sort {
  position: relative;
}

.m-sort image {
  width: 24rpx;
  height: 24rpx;
  position: absolute;
  /*top: 50%;*/
  margin-top: 10rpx;
  margin-left: 2rpx;
}

/*全部商品 end*/
.m-product-price1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.num {
  font-size: 24rpx;
  color: #717171;
  padding-right: 20rpx;
  /*margin-left:260rpx; */
}

.u-pa .m-tab {
  top: var(--window-top);
}

.filter-box {
  top: var(--window-top);
}

.tag-view {
  margin: 10rpx 20rpx;
  display: inline-block;
}

.uni-numbox-value {
  border: 2rpx solid #cccccc;
  background-color: #ffffff;
  width: 150rpx;
  height: 48rpx;
  text-align: center;
  display: inline-block;
}

.uni-dot {
  width: 30rpx;
  height: 100%;
  text-align: center;
  display: inline-block;
  line-height: 44rpx;
  height: 44rpx;
}

.uni-padding-wrap {
  overflow: hidden;
  max-width: 400rpx;
}

/*
.product-list {
  position: relative;
  z-index: 1;

  &:hover {
    z-index: 2;
  }

  .flag {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    width: 64px;
    height: 20px;
    margin-left: -32px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: #fff;
  }

  .flag-reduction {
    background-color: #e50dbb;
    z-index: 8;
  }

  .flag-saleoff {
    background-color: #e53935;
    z-index: 7;
  }

  .flag-postfree {
    background-color: #ffac13;
    z-index: 6;
  }

  .flag-bargain {
    background-color: #ffac13;
    z-index: 4;
  }

  .flag-gift {
    background-color: #2196f3;
    z-index: 3;
  }

  .flag-new {
    background-color: #83c44e;
    z-index: 5;
  }

  .flag-selfsupport {
    background-color: #f44336;
    z-index: 10;

    position: absolute;

    top: 1px;
    right: 5px;
    left: auto;
    width: 40px;
  }
}
*/
.placeholder-class {
  font-size: 25rpx;
}

.button {
  line-height: 2;
  font-size: 34rpx;
}

.uni-common-mt {
  margin-top: 20rpx;
}

.city {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-left: 6rpx;
  white-space: nowrap;
}

.m-cell {
  padding: 32rpx 44rpx;

  p {
    height: 34rpx;
    font-size: 24rpx;
    font-weight: bold;
    line-height: 34rpx;
    color: #282f40;
  }
}

.m-category-list {
  display: inline-block;
  font-size: 24rpx;
  padding: 6rpx 15rpx;
  border-radius: 8rpx;
  margin: 10rpx;
  color: #888;
  border: 1rpx solid #d5d5d5;
}

.m-category-list.active {
  color: $default-skin-bg !important;
  border: 1rpx solid $default-skin-bg !important;
}

.m-cell-access .m-cell-ft:after {
  /*border-color: #c3c3c3;*/
  margin-top: -12rpx;

  //display: none;
}

.category-box {
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  margin: 20rpx;
  border-radius: 20rpx;

  background-color: #fff;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.uni-scroll-view-content {
  .category-box:last-child {
  }
}

.brand-box {
  margin: 20rpx 10rpx;
  background: #fff;
  border-radius: 20rpx;
}

.brand-list {
  display: inline-block;
  width: 160rpx;
  text-align: center;
  margin: 0 0px 0px 0;
  padding: 10rpx;
  font-size: 12px;
  vertical-align: top;
}
</style>
