feat:新增

common/request/apis/inventoryInquiry.js

@@ -0,0 +1,7 @@
+//商品存货查询
+export const inventoryInquiry = (
+  params,
+  config = { custom: { auth: true } }
+) => {
+  return uni.$u.http.get(`/pda/inventoryInquiry/1/2`, { params }, config);
+};

components/leo-tree/leo-tree.vue

@@ -0,0 +1,63 @@
+<template>
+  <view class="leo-tree">
+    <treeNode
+      v-for="item in data"
+      :item="item"
+      :key="item[defaultProps.id]"
+      :defaultProps="defaultProps"
+      :selectedNodeId="value"
+      @node-click="handleNodeClick"
+      @node-expand="handleNodeExpand"
+      @node-collapse="handleNodeCollapse"
+    ></treeNode>
+  </view>
+</template>
+<script>
+import treeNode from "./tree-node.vue";
+export default {
+  components: {
+    treeNode,
+  },
+  model: {
+    prop: "value",
+    event: "input",
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    value: {
+      type: [String, Number],
+      default: null,
+    },
+    defaultProps: {
+      type: Object,
+      default: () => {
+        return {
+          id: "id",
+          children: "children",
+          label: "label",
+        };
+      },
+    },
+  },
+  mounted() {},
+  methods: {
+    handleNodeClick(node) {
+      const nodeId = node[this.defaultProps.id];
+      this.$emit("input", nodeId);
+      this.$emit("node-click", node);
+    },
+    handleNodeExpand(node) {
+      this.$emit("node-expand", node);
+    },
+    handleNodeCollapse(node) {
+      this.$emit("node-collapse", node);
+    },
+  },
+};
+</script>
+<style scoped></style>

components/leo-tree/tree-node.vue

@@ -0,0 +1,278 @@
+<template>
+  <view class="tree-item">
+    <view
+      class="head"
+      @click.stop="changeShow"
+      style="padding-left: 10rpx"
+      :class="{ active: isItemActive(item) }"
+    >
+      <text class="txt">{{ item[defaultProps.label] }}</text>
+      <view
+        class="left-icon"
+        :class="show ? 'rt45' : ''"
+        v-if="hasChildren"
+      ></view>
+    </view>
+    <view class="content" v-if="shouldRecurse">
+      <view
+        v-for="(node, index) in nodes"
+        :key="node._uid"
+        class="tree-node-item"
+      >
+        <view
+          class="head"
+          @click.stop="toggleNode(index)"
+          :style="{ paddingLeft: (node._level + 1) * 10 + 10 + 'rpx' }"
+          :class="{ active: isItemActive(node) }"
+        >
+          <text class="txt">{{ node[defaultProps.label] }}</text>
+          <view
+            class="left-icon"
+            :class="node._isExpanded ? 'rt45' : ''"
+            v-if="getNodeChildren(node).length > 0"
+          ></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "TreeNode",
+  componentName: "TreeNode",
+  props: {
+    item: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+    defaultProps: {
+      type: Object,
+      default: function () {
+        return {
+          id: "id",
+          children: "children",
+          label: "label",
+        };
+      },
+    },
+    selectedNodeId: {
+      type: [String, Number],
+      default: null,
+    },
+  },
+  computed: {
+    hasChildren: function () {
+      return (
+        this.item[this.defaultProps.children] &&
+        this.item[this.defaultProps.children].length > 0
+      );
+    },
+    shouldRecurse: function () {
+      return this.hasChildren && this.show;
+    },
+  },
+  data: function () {
+    return {
+      show: false,
+      nodes: [], // 扁平化后的节点列表
+    };
+  },
+  methods: {
+    // 判断节点是否被选中
+    isItemActive: function (node) {
+      if (!this.selectedNodeId || !node) return false;
+      return node[this.defaultProps.id] === this.selectedNodeId;
+    },
+
+    // 获取节点的子节点
+    getNodeChildren: function (node) {
+      if (node && node[this.defaultProps.children]) {
+        return node[this.defaultProps.children];
+      }
+      return [];
+    },
+
+    // 切换节点展开/折叠状态
+    toggleNode: function (index) {
+      var node = this.nodes[index];
+      if (node) {
+        // 触发节点点击事件
+        this.$emit("node-click", node);
+
+        // 如果有子节点，切换展开状态
+        if (this.getNodeChildren(node).length > 0) {
+          // 更新节点状态
+          this.$set(node, "_isExpanded", !node._isExpanded);
+
+          // 触发展开/折叠事件
+          this.$emit(node._isExpanded ? "node-expand" : "node-collapse", node);
+
+          // 重新构建扁平节点
+          this.buildFlatNodes();
+        }
+      }
+    },
+
+    // 根节点的展开/折叠
+    changeShow: function () {
+      // 触发根节点点击事件
+      this.$emit("node-click", this.item);
+
+      if (this.hasChildren) {
+        this.show = !this.show;
+
+        // 触发展开/折叠事件
+        this.$emit(this.show ? "node-expand" : "node-collapse", this.item);
+
+        // 当展开时，构建扁平节点列表
+        if (this.show) {
+          this.buildFlatNodes();
+        } else {
+          this.nodes = [];
+        }
+      }
+    },
+
+    // 构建扁平的节点列表
+    buildFlatNodes: function () {
+      var result = [];
+      var children = this.item[this.defaultProps.children] || [];
+
+      // 添加第一层子节点
+      for (var i = 0; i < children.length; i++) {
+        var node = children[i];
+        if (!node._uid) {
+          this.$set(node, "_uid", this.generateUID());
+        }
+        if (typeof node._level === "undefined") {
+          this.$set(node, "_level", 0);
+        }
+        if (typeof node._isExpanded === "undefined") {
+          this.$set(node, "_isExpanded", false);
+        }
+
+        result.push(node);
+
+        // 如果节点已展开且有子节点，递归添加子节点
+        if (node._isExpanded) {
+          this.addChildrenToResult(node, result, 1);
+        }
+      }
+
+      this.nodes = result;
+    },
+
+    // 递归添加子节点到结果数组
+    addChildrenToResult: function (parentNode, result, level) {
+      var children = this.getNodeChildren(parentNode);
+
+      for (var i = 0; i < children.length; i++) {
+        var child = children[i];
+        if (!child._uid) {
+          this.$set(child, "_uid", this.generateUID());
+        }
+        this.$set(child, "_level", level);
+        if (typeof child._isExpanded === "undefined") {
+          this.$set(child, "_isExpanded", false);
+        }
+
+        result.push(child);
+
+        // 如果子节点已展开且有子节点，继续递归
+        if (child._isExpanded && this.getNodeChildren(child).length > 0) {
+          this.addChildrenToResult(child, result, level + 1);
+        }
+      }
+    },
+
+    // 生成唯一ID
+    generateUID: function () {
+      return (
+        Math.random().toString(36).substring(2, 15) +
+        Math.random().toString(36).substring(2, 15)
+      );
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@mixin animate2 {
+  -moz-transition: all 0.2s linear;
+  -webkit-transition: all 0.2s linear;
+  -o-transition: all 0.2s linear;
+  -ms-transition: all 0.2s linear;
+  transition: all 0.2s linear;
+}
+.tree-item {
+  .head {
+    display: flex;
+    align-items: center;
+    line-height: 60rpx;
+    min-height: 60rpx;
+    position: relative;
+    padding-right: 50rpx;
+    &.active {
+      background-color: #fff;
+    }
+    .txt {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+      height: 84rpx;
+      line-height: 84rpx;
+      color: #666;
+      font-family: "PingFang SC";
+      font-size: 28rpx;
+      font-weight: 400;
+    }
+  }
+  .left-icon {
+    width: 30rpx;
+    height: 30rpx;
+    flex-shrink: 0;
+    position: absolute;
+    right: 10rpx;
+    top: 50%;
+    transform: translateY(-50%) rotate(-90deg);
+    -ms-transform: translateY(-50%) rotate(-90deg);
+    -moz-transform: translateY(-50%) rotate(-90deg);
+    -webkit-transform: translateY(-50%) rotate(-90deg);
+    -o-transform: translateY(-50%) rotate(-90deg);
+    @include animate2;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -6rpx;
+      margin-left: -6rpx;
+      width: 0;
+      height: 0;
+      border-left: 6rpx solid transparent;
+      border-right: 6rpx solid transparent;
+      border-top: 12rpx solid #999;
+    }
+
+    &.rt45 {
+      transform: translateY(-50%) rotate(0deg);
+      -ms-transform: translateY(-50%) rotate(0deg);
+      -moz-transform: translateY(-50%) rotate(0deg);
+      -webkit-transform: translateY(-50%) rotate(0deg);
+      -o-transform: translateY(-50%) rotate(0deg);
+    }
+  }
+  .content {
+    width: 100%;
+  }
+  .tree-node-item {
+    width: 100%;
+  }
+}
+</style>

pages/inventory-inquiry/index.vue

@@ -1,251 +1,390 @@
 <template>
-	<view class="inventory-page">
-		<u-navbar height="40px" title="存货查询" bgColor="#fff" autoBack placeholder>
-		</u-navbar>
-		<view class="container_main">
-			<view class="head-box">
-				<view class="search-box">
-					<u-search placeholder="请输入单据编号" shape="square" v-model="searchKey" :showAction="false"></u-search>
-					<view class="scan-icon flex_box flex_row_center">
-						<image src="@/static/image/scan-icon-2.png" mode=""></image>
-					</view>
-				</view>
-				<view class="type-box">
-					<u-tabs 
-						:list="tabList" 
-						:inactiveStyle="{color:'#000',fontSize:'24rpx'}"
-						:activeStyle="{color:'#000',fontSize:'24rpx'}" 
-						lineColor="#0256FF" 
-						lineWidth="66rpx" 
-						:scrollable="false"
-						@click="tabClick"
-						>
-					</u-tabs>
-				</view>
-			</view>
-			<view class="goods-box">
-				<view class="goods-type" @click="typeClick">
-					<view class="goods-type-text">{{typeName}}</view>
-					<u-icon name="arrow-down-fill" color="#999999" size="10"></u-icon>
-				</view>
-				<view class="goods-cont">
-					<view class="goods-cont-left">
-						<scroll-view 
-						scroll-y
-						:style="{height:`calc(100vh - ${scrollH}px - 40px - 24rpx - 102rpx)`}"
-						>
-							<view 
-								class="type-item" 
-								:class="item.id == typeId ? 'active-item':''" 
-								v-for="(item,i) in typeList" 
-								:key="i"
-								@click="chooseType(item)"
-							>
-								{{item.name}}
-							</view>
-						</scroll-view>
-					</view>
-					<view class="goods-cont-right">
-						<scroll-view scroll-y :style="{height:`calc(100vh - ${scrollH}px - 40px - 24rpx - 102rpx)`}">
-							<block v-for="(item,i) in goodsList" :key="i">
-								<good-item :item="item"></good-item>
-							</block>
-						</scroll-view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<u-picker :show="typeShow" :defaultIndex="defaultIndex" :columns="columnsList" @confirm="pickerConfirm" @cancel="typeShow= false"></u-picker>
-	</view>
+  <view class="inventory-page">
+    <u-navbar
+      height="40px"
+      title="存货查询"
+      bgColor="#fff"
+      autoBack
+      placeholder
+    >
+    </u-navbar>
+    <view class="container_main">
+      <view class="head-box">
+        <view class="search-box">
+          <u-search
+            placeholder="请输入单据编号"
+            shape="square"
+            v-model="searchKey"
+            :showAction="false"
+          ></u-search>
+          <view class="scan-icon flex_box flex_row_center">
+            <image src="@/static/image/scan-icon-2.png" mode=""></image>
+          </view>
+        </view>
+        <view class="type-box">
+          <u-tabs
+            :list="tabList"
+            :inactiveStyle="{ color: '#000', fontSize: '24rpx' }"
+            :activeStyle="{ color: '#000', fontSize: '24rpx' }"
+            lineColor="#0256FF"
+            lineWidth="66rpx"
+            :scrollable="false"
+            @click="tabClick"
+          >
+          </u-tabs>
+        </view>
+      </view>
+      <view class="goods-box">
+        <view class="goods-type" @click="typeClick">
+          <view class="goods-type-text">{{ typeName }}</view>
+          <u-icon name="arrow-down-fill" color="#999999" size="10"></u-icon>
+        </view>
+        <view class="goods-cont">
+          <view class="goods-cont-left">
+            <scroll-view
+              scroll-y
+              :style="{
+                height: `calc(100vh - ${scrollH}px - 40px - 24rpx - 102rpx)`,
+              }"
+            >
+              <leo-tree
+                :data="treeData"
+                @node-click="nodeClick"
+                v-model="typeId"
+              ></leo-tree>
+              <!-- <view
+                class="type-item"
+                :class="item.id == typeId ? 'active-item' : ''"
+                v-for="(item, i) in typeList"
+                :key="i"
+                @click="chooseType(item)"
+              >
+                {{ item.name }}
+              </view> -->
+            </scroll-view>
+          </view>
+          <view class="goods-cont-right">
+            <scroll-view
+              scroll-y
+              :style="{
+                height: `calc(100vh - ${scrollH}px - 40px - 24rpx - 102rpx)`,
+              }"
+              @scrolltolower="onLoadMore"
+            >
+              <block v-for="(item, i) in goodsList" :key="i">
+                <good-item :item="item"></good-item>
+              </block>
+              <!-- 加载更多 -->
+              <u-loadmore :status="loadStatus" @loadmore="onLoadMore" />
+            </scroll-view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <u-picker
+      :show="typeShow"
+      :defaultIndex="defaultIndex"
+      :columns="columnsList"
+      @confirm="pickerConfirm"
+      @cancel="typeShow = false"
+    ></u-picker>
+  </view>
 </template>
 
 <script>
-	import goodItem from '@/components/good-item/good-item.vue'
-	export default {
-		components:{
-			goodItem
-		},
-		data() {
-			return {
-				offsetTop: 0,
-				searchKey: '',
-				current: 0,
-				typeShow:false,
-				defaultIndex:[],
-				typeName:'按分类展示',
-				scrollH:0,
-				columnsList:[
-					['按分类展示','按库位展示']
-				],
-				typeId:0,
-				typeList:[
-					{
-						name:'全部',
-						id:0
-					},
-					{
-						name:'饮料',
-						id:1
-					},
-					{
-						name:'食品',
-						id:2
-					}
-				],
-				tabList: [{
-						index: 0,
-						name: '有库存'
-					},
-					{
-						index: 1,
-						name: '无库存'
-					},
-					{
-						index: 2,
-						name: '全部'
-					}
-				],
-				goodsList:[
-					{
-						src:'',
-						name:'大童专用氨基酸洗发水',
-					},
-					{
-						src:'',
-						name:'大童专用氨基酸洗发水',
-					},
-					{
-						src:'',
-						name:'大童专用氨基酸洗发水',
-					},
-					{
-						src:'',
-						name:'大童专用氨基酸洗发水',
-					},
-					{
-						src:'',
-						name:'大童专用氨基酸洗发水',
-					}
-				]
-			}
-		},
-		mounted() {
-			let systemInfo = uni.getSystemInfoSync();
-			let statusBarHeight = systemInfo.statusBarHeight;
-			let headH = 0;
-			const query = uni.createSelectorQuery().in(this);
-			query.select('.head-box').boundingClientRect(rect => {
-					headH = rect.height
-					this.scrollH = statusBarHeight + headH
-			}).exec()
-		},
-		onLoad() {
-			// let systemInfo = uni.getSystemInfoSync();
-			// let statusBarHeight = systemInfo.statusBarHeight;
-			// this.offsetTop = statusBarHeight + 40
-			
-			
-		},
-		methods: {
-			tabClick() {
+import leoTree from "@/components/leo-tree/leo-tree.vue";
+import { inventoryInquiry } from "@/common/request/apis/inventoryInquiry";
+import goodItem from "@/components/good-item/good-item.vue";
+export default {
+  components: {
+    goodItem,
+    leoTree,
+  },
+  data() {
+    return {
+      offsetTop: 0,
+      searchKey: "",
+      current: 0,
+      typeShow: false,
+      defaultIndex: [],
+      typeName: "按分类展示",
+      scrollH: 0,
+      columnsList: [["按分类展示", "按库位展示"]],
+      typeId: "",
+      treeData: [
+        {
+          id: "1",
+          label: "1",
+          children: [
+            {
+              id: "1-1",
+              label: "1-1",
+              children: [
+                {
+                  id: "1-1-1",
+                  label: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈",
+                },
+                {
+                  id: "1-1-2",
+                  label: "1-1-2",
+                },
+                {
+                  id: "1-1-3",
+                  label: "1-1-3",
+                },
+                {
+                  id: "1-1-4",
+                  label: "1-1-4",
+                },
+              ],
+            },
+            {
+              id: "1-2",
+              label: "1-2",
+              children: [
+                {
+                  id: "1-2-1",
+                  label: "1-2-1",
+                },
+                {
+                  id: "1-2-2",
+                  label: "1-2-2",
+                },
+                {
+                  id: "1-2-3",
+                  label: "1-2-3",
+                },
+                {
+                  id: "1-2-4",
+                  label: "1-2-4",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: "2",
+          label: "2",
+          children: [
+            {
+              id: "2-1",
+              label: "2-1",
+              children: [
+                {
+                  id: "2-1-1",
+                  label: "2-1-1",
+                },
+                {
+                  id: "2-1-2",
+                  label: "2-1-2",
+                },
+                {
+                  id: "2-1-3",
+                  label: "2-1-3",
+                },
+                {
+                  id: "2-1-4",
+                  label: "2-1-4",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      tabList: [
+        {
+          index: 0,
+          name: "有库存",
+        },
+        {
+          index: 1,
+          name: "无库存",
+        },
+        {
+          index: 2,
+          name: "全部",
+        },
+      ],
 
-			},
-			typeClick() {
-				let index = this.columnsList[0].findIndex(item=>item == this.typeName)
-				this.defaultIndex = [index]
-				this.typeShow = true
-			},
-			pickerConfirm(val) {
-				this.typeName = val.value[0]
-				this.typeShow = false
-			},
-			chooseType(item) {
-				this.typeId = item.id
-			}
-		}
-	}
+      loadStatus: "loadmore", //加载前值为loadmore，加载中为loading，没有数据为nomore
+      goodsList: [],
+      pageSize: 10,
+      pageNum: 1,
+      query: {},
+    };
+  },
+  mounted() {
+    let systemInfo = uni.getSystemInfoSync();
+    let statusBarHeight = systemInfo.statusBarHeight;
+    let headH = 0;
+    const query = uni.createSelectorQuery().in(this);
+    query
+      .select(".head-box")
+      .boundingClientRect((rect) => {
+        headH = rect.height;
+        this.scrollH = statusBarHeight + headH;
+      })
+      .exec();
+  },
+  onLoad() {
+    // let systemInfo = uni.getSystemInfoSync();
+    // let statusBarHeight = systemInfo.statusBarHeight;
+    // this.offsetTop = statusBarHeight + 40
+    this.loadData();
+  },
+  methods: {
+    async onRefresh() {
+      try {
+        await this.loadData(true);
+      } finally {
+      }
+    },
+    async onLoadMore() {
+      if (this.loadStatus !== "loadmore") return;
+      this.loadStatus = "loading";
+      try {
+        await this.loadData();
+      } catch (e) {
+        this.loadStatus = "loadmore";
+      }
+    },
+    async loadData(isRefresh = false) {
+      if (isRefresh) {
+        this.pageNum = 1;
+        this.goodsList = [];
+      }
+
+      try {
+        this.loadStatus = "loading";
+        const pageNum = this.pageNum;
+        const pageSize = this.pageSize;
+        const params = {
+          pageNum,
+          pageSize,
+          ...this.query,
+        };
+        const res = await inventoryInquiry(params);
+        console.log("res====", res);
+        const { rows, total } = res.data;
+        const list = rows.map((item) => {
+          return {
+            ...item,
+            src: item.imgName,
+          };
+        });
+        this.goodsList = [...this.goodsList, ...list];
+        if (pageNum * pageSize < Number(total)) {
+          this.pageNum++;
+          this.loadStatus = "loadmore";
+        } else {
+          this.loadStatus = "nomore";
+        }
+      } catch (error) {}
+    },
+    nodeClick(e) {
+      console.log("nodeClick======", e);
+      console.log("this.typeId======", this.typeId);
+      // this.typeId = e.id;
+    },
+    tabClick() {},
+    typeClick() {
+      let index = this.columnsList[0].findIndex(
+        (item) => item == this.typeName
+      );
+      this.defaultIndex = [index];
+      this.typeShow = true;
+    },
+    pickerConfirm(val) {
+      this.typeName = val.value[0];
+      this.typeShow = false;
+    },
+    chooseType(item) {
+      this.typeId = item.id;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-	.inventory-page {
-		min-height: 100vh;
-		background: #F0F6FB;
+.inventory-page {
+  min-height: 100vh;
+  background: #f0f6fb;
+
+  .container_main {
+    .head-box {
+      background-color: #fff;
+    }
+    .search-box {
+      background-color: rgba(191, 200, 219, 0.2);
+      margin: 0 32rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-radius: 8rpx;
+
+      ::v-deep .u-search__content {
+        background-color: transparent !important;
 
-		.container_main {
-			.head-box {
-				background-color: #fff;
-			}
-			.search-box {
-				background-color: rgba(191, 200, 219, 0.2);
-				margin: 0 32rpx;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				border-radius: 8rpx;
+        .u-search__content__input {
+          background-color: transparent !important;
+        }
+      }
 
-				::v-deep .u-search__content {
-					background-color: transparent !important;
+      .scan-icon {
+        width: 100rpx;
+        height: 100%;
 
-					.u-search__content__input {
-						background-color: transparent !important;
-					}
-				}
+        image {
+          width: 40rpx;
+          height: 40rpx;
+        }
+      }
+    }
 
-				.scan-icon {
-					width: 100rpx;
-					height: 100%;
+    .goods-box {
+      margin-top: 24rpx;
+      .goods-type {
+        display: flex;
+        align-items: center;
+        padding-left: 24rpx;
+        height: 102rpx;
+        background-color: #fff;
+        &-text {
+          color: #0256ff;
+          font-size: 28rpx;
+          font-weight: bold;
+          margin-right: 10rpx;
+        }
+      }
 
-					image {
-						width: 40rpx;
-						height: 40rpx;
-					}
-				}
-			}
-		
-			.goods-box {
-				margin-top: 24rpx;
-				.goods-type {
-					display: flex;
-					align-items: center;
-					padding-left: 24rpx;
-					height: 102rpx;
-					background-color: #fff;
-					&-text {
-						color: #0256FF;
-						font-size: 28rpx;
-						font-weight: bold;
-						margin-right: 10rpx;
-					}
-				}
-			
-				.goods-cont {
-					display: flex;
-					.goods-cont-left {
-						width: 160rpx;
-						background-color: #F0F6FB;
-						.type-item {
-							width: 100%;
-							height: 84rpx;
-							display: flex;
-							align-items: center;
-							justify-content: center;
-							color: #666;
-							font-family: "PingFang SC";
-							font-size: 28rpx;
-							font-weight: 400;
-						}
-						.active-item {
-							background-color: #fff;
-							color: #333;
-							font-weight: bold;
-						}
-					}
-					.goods-cont-right {
-						flex: 1;
-						background-color: #fff;
-					}
-				}
-			}
-		}
-	}
-</style>
+      .goods-cont {
+        display: flex;
+        .goods-cont-left {
+          width: 160rpx;
+          background-color: #f0f6fb;
+          .type-item {
+            width: 100%;
+            height: 84rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #666;
+            font-family: "PingFang SC";
+            font-size: 28rpx;
+            font-weight: 400;
+          }
+          .active-item {
+            background-color: #fff;
+            color: #333;
+            font-weight: bold;
+          }
+        }
+        .goods-cont-right {
+          flex: 1;
+          background-color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>