{"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\components\\mobilePage\\home_menu.vue?vue&type=style&index=0&id=5ac953de&scoped=true&lang=scss","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\components\\mobilePage\\home_menu.vue","mtime":1761614938971},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoubGlzdF9tZW51IHsNCiAgcGFkZGluZzogMCAxMnB4IDEycHg7DQogIGRpc3BsYXk6IGZsZXg7DQogIGZsZXgtd3JhcDogd3JhcDsNCg0KICAuaXRlbSB7DQogICAgbWFyZ2luLXRvcDogMTJweDsNCiAgICBmb250LXNpemU6IDEycHg7DQogICAgY29sb3I6ICMzMzM7DQogICAgdGV4dC1hbGlnbjogY2VudGVyOw0KICAgIHdpZHRoOiAzMy4zMzMzJTsNCg0KICAgICYuZm91ciB7DQogICAgICB3aWR0aDogMjUlOw0KICAgIH0NCg0KICAgICYuZml2ZSB7DQogICAgICB3aWR0aDogMjAlOw0KICAgIH0NCg0KICAgIC5pbWctYm94IHsNCiAgICAgIHdpZHRoOiA0NXB4Ow0KICAgICAgaGVpZ2h0OiA0NXB4Ow0KICAgICAgbWFyZ2luOiAwIGF1dG8gOHB4IGF1dG87DQoNCiAgICAgICYub24gew0KICAgICAgICBtYXJnaW4tYm90dG9tOiAwOw0KICAgICAgfQ0KDQogICAgICBpbWcgew0KICAgICAgICB3aWR0aDogMTAwJTsNCiAgICAgICAgaGVpZ2h0OiAxMDAlOw0KICAgICAgfQ0KICAgIH0NCiAgfQ0KDQogIC5pY29udHVwaWFuIHsNCiAgICBmb250LXNpemU6IDE2cHg7DQogIH0NCn0NCg0KLmhvbWVfbWVudSB7DQogIHBhZGRpbmc6IDAgMTJweCAxMnB4Ow0KICBkaXNwbGF5OiBmbGV4Ow0KICBvdmVyZmxvdzogaGlkZGVuOw0KDQogIC5tZW51LWl0ZW0gew0KICAgIG1hcmdpbi10b3A6IDEycHg7DQogICAgZm9udC1zaXplOiAxMXB4Ow0KICAgIGNvbG9yOiAjMjgyODI4Ow0KICAgIHRleHQtYWxpZ246IGNlbnRlcjsNCiAgICBtYXJnaW4tcmlnaHQ6IDI3cHg7DQoNCiAgICAuaW1nLWJveCB7DQogICAgICB3aWR0aDogNTBweDsNCiAgICAgIGhlaWdodDogNTBweDsNCg0KICAgICAgJi5vbiB7DQogICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTsNCg0KICAgICAgICBpbWcsDQogICAgICAgIC5lbXB0eS1ib3ggew0KICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTsNCiAgICAgICAgfQ0KICAgICAgfQ0KICAgIH0NCg0KICAgIC5ib3gsDQogICAgaW1nIHsNCiAgICAgIHdpZHRoOiAxMDAlOw0KICAgICAgaGVpZ2h0OiAxMDAlOw0KICAgIH0NCg0KICAgIC5ib3ggew0KICAgICAgYmFja2dyb3VuZDogI2Q4ZDhkODsNCiAgICB9DQoNCiAgICBwIHsNCiAgICAgIG1hcmdpbi10b3A6IDVweDsNCiAgICB9DQogIH0NCg0KICAmLm9uIHsNCiAgICAubWVudS1pdGVtIHsNCiAgICAgIG1hcmdpbi1yaWdodDogNTFweDsNCg0KICAgICAgJjpudGgtY2hpbGQoNW4pIHsNCiAgICAgICAgbWFyZ2luLXJpZ2h0OiA1MXB4Ow0KICAgICAgfQ0KDQogICAgICAmOm50aC1jaGlsZCg0bikgew0KICAgICAgICBtYXJnaW4tcmlnaHQ6IDA7DQogICAgICB9DQogICAgfQ0KICB9DQoNCiAgLmljb250dXBpYW4gew0KICAgIGZvbnQtc2l6ZTogMTZweDsNCiAgfQ0KfQ0KDQouZG90IHsNCiAgZGlzcGxheTogZmxleDsNCiAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQogIHBhZGRpbmctYm90dG9tOiAxMHB4Ow0KDQogICYubnVtYmVyIHsNCiAgICBib3R0b206IDE1cHg7DQogIH0NCg0KICAubnVtIHsNCiAgICB3aWR0aDogMjVweDsNCiAgICBoZWlnaHQ6IDE4cHg7DQogICAgbGluZS1oZWlnaHQ6IDE4cHg7DQogICAgYmFja2dyb3VuZC1jb2xvcjogIzAwMDsNCiAgICBjb2xvcjogI2ZmZjsNCiAgICBvcGFjaXR5OiAwLjM7DQogICAgYm9yZGVyLXJhZGl1czogOHB4Ow0KICAgIGZvbnQtc2l6ZTogMTJweDsNCiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7DQogIH0NCg0KICAuZG90LWl0ZW0gew0KICAgIHdpZHRoOiAxMHB4Ow0KICAgIGhlaWdodDogM3B4Ow0KICAgIGJhY2tncm91bmQ6ICNkZGRkZGQ7DQogICAgYm9yZGVyLXJhZGl1czogNTAlOw0KICAgIG1hcmdpbjogMCAzcHg7DQogIH0NCn0NCg0KLmVtcHR5LWJveCB7DQogIGJhY2tncm91bmQ6ICNmM2Y5ZmY7DQoNCiAgaW1nIHsNCiAgICB3aWR0aDogMjZweCAhaW1wb3J0YW50Ow0KICAgIGhlaWdodDogMjBweCAhaW1wb3J0YW50Ow0KICB9DQp9DQo="},{"version":3,"sources":["home_menu.vue"],"names":[],"mappings":";AAqgBA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA","file":"home_menu.vue","sourceRoot":"src/components/mobilePage","sourcesContent":["<template>\r\n  <div\r\n    :style=\"{\r\n      background: bottomBgColor,\r\n      marginTop: slider + 'px',\r\n      paddingTop: topConfig + 'px',\r\n      paddingBottom: bottomConfig + 'px',\r\n      paddingLeft: prConfig + 'px',\r\n      paddingRight: prConfig + 'px',\r\n    }\"\r\n  >\r\n    <div\r\n      :style=\"{\r\n        background: `linear-gradient(90deg,${bgColorLeft} 0%,${bgColorRight} 100%)`,\r\n        borderRadius: fillet\r\n          ? valList[0].val + 'px ' + valList[1].val + 'px ' + valList[3].val + 'px ' + valList[2].val + 'px'\r\n          : filletVal + 'px',\r\n      }\"\r\n    >\r\n      <div class=\"mobile-page\">\r\n        <div class=\"list_menu\">\r\n          <div\r\n            class=\"item\"\r\n            :class=\"number === 1 ? 'four' : number === 2 ? 'five' : ''\"\r\n            v-for=\"(item, index) in vuexMenu\"\r\n            :key=\"index\"\r\n            v-if=\"item.show\"\r\n          >\r\n            <div class=\"img-box\" :class=\"menuStyleConfig == 1 ? 'on' : ''\" v-if=\"menuStyleConfig != 2\">\r\n              <img\r\n                :src=\"item.img\"\r\n                alt=\"\"\r\n                v-if=\"item.img\"\r\n                :style=\"{\r\n                  borderRadius: filletImg\r\n                    ? valListImg[0].val +\r\n                      'px ' +\r\n                      valListImg[1].val +\r\n                      'px ' +\r\n                      valListImg[3].val +\r\n                      'px ' +\r\n                      valListImg[2].val +\r\n                      'px'\r\n                    : filletValImg + 'px',\r\n                }\"\r\n              />\r\n              <div\r\n                class=\"empty-box on\"\r\n                :style=\"{\r\n                  borderRadius: filletImg\r\n                    ? valListImg[0].val +\r\n                      'px ' +\r\n                      valListImg[1].val +\r\n                      'px ' +\r\n                      valListImg[3].val +\r\n                      'px ' +\r\n                      valListImg[2].val +\r\n                      'px'\r\n                    : filletValImg + 'px',\r\n                }\"\r\n                v-else\r\n              >\r\n                <img src=\"../../assets/images/shan.png\" />\r\n              </div>\r\n            </div>\r\n            <p v-if=\"menuStyleConfig != 1\" :style=\"'color:' + textColor\">{{ item.info[0].value }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!--单行展示-->\r\n      <!-- <div class=\"mobile-page\" v-else>\r\n\t\t        <div class=\"home_menu\">\r\n\t\t            <div class=\"menu-item\" v-for=\"(item,index) in vuexMenu\" :key=\"index\">\r\n\t\t                <div class=\"img-box\" :class=\"menuStyle?'on':''\">\r\n\t\t                    <img :src=\"item.img\" alt=\"\" v-if=\"item.img\">\r\n\t\t                    <div class=\"empty-box on\" v-else> <span class=\"iconfont-diy icontupian\"></span> </div>\r\n\t\t                </div>\r\n\t\t                <p :style=\"{color:txtColor}\">{{item.info[0].value}}</p>\r\n\t\t            </div>\r\n\t\t        </div>\r\n\t\t    </div> -->\r\n      <div class=\"dot\" v-if=\"showConfig\">\r\n        <div class=\"dot-item\" :style=\"{ background: toneConfig ? `${pointerColor}` : `${colorStyle.theme}` }\"></div>\r\n        <div class=\"dot-item\" :style=\"{ background: toneConfig ? `${pointerBgColor}` : '' }\" v-for=\"item in 2\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapState } from 'vuex';\r\n// import theme from \"@/mixins/theme\";\r\nexport default {\r\n  name: 'home_menu',\r\n  cname: '导航组',\r\n  icon: '#iconzujian-daohangzu',\r\n  configName: 'c_home_menu',\r\n  type: 0, // 0 基础组件 1 营销组件 2工具组件\r\n  defaultName: 'menus', // 外面匹配名称\r\n  props: {\r\n    index: {\r\n      type: null,\r\n    },\r\n    num: {\r\n      type: null,\r\n    },\r\n    colorStyle: {\r\n      type: null,\r\n    },\r\n  },\r\n  computed: {\r\n    ...mapState('mobildConfig', ['defaultArray']),\r\n  },\r\n  watch: {\r\n    pageData: {\r\n      handler(nVal, oVal) {\r\n        this.setConfig(nVal);\r\n      },\r\n      deep: true,\r\n    },\r\n    num: {\r\n      handler(nVal, oVal) {\r\n        let data = this.$store.state.mobildConfig.defaultArray[nVal];\r\n        this.setConfig(data);\r\n      },\r\n      deep: true,\r\n    },\r\n    defaultArray: {\r\n      handler(nVal, oVal) {\r\n        let data = this.$store.state.mobildConfig.defaultArray[this.num];\r\n        this.setConfig(data);\r\n      },\r\n      deep: true,\r\n    },\r\n  },\r\n  // mixins: [theme],\r\n  data() {\r\n    return {\r\n      // 默认初始化数据禁止修改\r\n      defaultConfig: {\r\n        cname: '导航组',\r\n        name: 'menus',\r\n        timestamp: this.num,\r\n        isHide: false,\r\n        setUp: {\r\n          tabVal: 0,\r\n        },\r\n        titleLeft: '展示设置',\r\n        titleContent: '内容设置',\r\n        titleRight: '图片样式',\r\n        titlePointer: '指示器设置',\r\n        titleCurrency: '通用样式',\r\n        menuStyleConfig: {\r\n          title: '导航样式',\r\n          tabVal: 0,\r\n          tabList: [\r\n            {\r\n              name: '图片加文字',\r\n            },\r\n            {\r\n              name: '图片',\r\n            },\r\n            {\r\n              name: '文字',\r\n            },\r\n          ],\r\n        },\r\n        number: {\r\n          title: '单行显示',\r\n          tabVal: 1,\r\n          tabList: [\r\n            {\r\n              name: '3个',\r\n            },\r\n            {\r\n              name: '4个',\r\n            },\r\n            {\r\n              name: '5个',\r\n            },\r\n          ],\r\n        },\r\n        showConfig: {\r\n          title: '展示样式',\r\n          tabVal: 0,\r\n          tabList: [\r\n            {\r\n              name: '固定显示',\r\n            },\r\n            {\r\n              name: '分页滑动',\r\n            },\r\n          ],\r\n        },\r\n        rowsNum: {\r\n          title: '显示行数',\r\n          tabVal: 0,\r\n          tabList: [\r\n            {\r\n              name: '1行',\r\n            },\r\n            {\r\n              name: '2行',\r\n            },\r\n            {\r\n              name: '3行',\r\n            },\r\n            {\r\n              name: '4行',\r\n            },\r\n          ],\r\n        },\r\n        filletImg: {\r\n          title: '背景圆角',\r\n          type: 0,\r\n          list: [\r\n            {\r\n              val: '全部',\r\n              icon: 'iconcaozuo-zhengti',\r\n            },\r\n            {\r\n              val: '单个',\r\n              icon: 'iconcaozuo-bianjiao',\r\n            },\r\n          ],\r\n          valName: '圆角值',\r\n          val: 0,\r\n          min: 0,\r\n          valList: [{ val: 0 }, { val: 0 }, { val: 0 }, { val: 0 }],\r\n        },\r\n        toneConfig: {\r\n          title: '色调',\r\n          tabVal: 0,\r\n          tabList: [\r\n            {\r\n              name: '跟随主题风格',\r\n            },\r\n            {\r\n              name: '自定义',\r\n            },\r\n          ],\r\n        },\r\n        pointerBgColor: {\r\n          title: '常规样式',\r\n          default: [\r\n            {\r\n              item: '#DDDDDD',\r\n            },\r\n          ],\r\n          color: [\r\n            {\r\n              item: '#DDDDDD',\r\n            },\r\n          ],\r\n        },\r\n        pointerColor: {\r\n          title: '选中样式',\r\n          default: [\r\n            {\r\n              item: '#E93323',\r\n            },\r\n          ],\r\n          color: [\r\n            {\r\n              item: '#E93323',\r\n            },\r\n          ],\r\n        },\r\n        bgColor: {\r\n          title: '组件背景',\r\n          default: [\r\n            {\r\n              item: '#fff',\r\n            },\r\n            {\r\n              item: '#fff',\r\n            },\r\n          ],\r\n          color: [\r\n            {\r\n              item: '#fff',\r\n            },\r\n            {\r\n              item: '#fff',\r\n            },\r\n          ],\r\n        },\r\n        textColor: {\r\n          title: '文字颜色',\r\n          default: [\r\n            {\r\n              item: '#333',\r\n            },\r\n          ],\r\n          color: [\r\n            {\r\n              item: '#333',\r\n            },\r\n          ],\r\n        },\r\n        bottomBgColor: {\r\n          title: '底部背景',\r\n          default: [\r\n            {\r\n              item: '#fff',\r\n            },\r\n          ],\r\n          color: [\r\n            {\r\n              item: '#fff',\r\n            },\r\n          ],\r\n        },\r\n        topConfig: {\r\n          title: '上边距',\r\n          val: 0,\r\n          min: 0,\r\n        },\r\n        bottomConfig: {\r\n          title: '下边距',\r\n          val: 0,\r\n          min: 0,\r\n        },\r\n        prConfig: {\r\n          title: '左右边距',\r\n          val: 0,\r\n          min: 0,\r\n        },\r\n        // 页面间距\r\n        mbConfig: {\r\n          title: '页面上间距',\r\n          val: 0,\r\n          min: 0,\r\n        },\r\n        menuConfig: {\r\n          title: '最多可添加1张图片，建议宽度90 * 90px',\r\n          bnt: '添加',\r\n          type: 1,\r\n          maxList: 100,\r\n          list: [\r\n            {\r\n              img: '',\r\n              show: true,\r\n              info: [\r\n                {\r\n                  title: '标题',\r\n                  value: '标题',\r\n                  tips: '选填，不超过4个字',\r\n                  max: 4,\r\n                },\r\n                {\r\n                  title: '链接',\r\n                  value: '',\r\n                  tips: '请输入链接',\r\n                  max: 100,\r\n                },\r\n              ],\r\n            },\r\n            {\r\n              img: '',\r\n              show: true,\r\n              info: [\r\n                {\r\n                  title: '标题',\r\n                  value: '标题',\r\n                  tips: '选填，不超过4个字',\r\n                  max: 4,\r\n                },\r\n                {\r\n                  title: '链接',\r\n                  value: '',\r\n                  tips: '请输入链接',\r\n                  max: 100,\r\n                },\r\n              ],\r\n            },\r\n            {\r\n              img: '',\r\n              show: true,\r\n              info: [\r\n                {\r\n                  title: '标题',\r\n                  value: '标题',\r\n                  tips: '选填，不超过4个字',\r\n                  max: 4,\r\n                },\r\n                {\r\n                  title: '链接',\r\n                  value: '',\r\n                  tips: '请输入链接',\r\n                  max: 100,\r\n                },\r\n              ],\r\n            },\r\n            {\r\n              img: '',\r\n              show: true,\r\n              info: [\r\n                {\r\n                  title: '标题',\r\n                  value: '标题',\r\n                  tips: '选填，不超过4个字',\r\n                  max: 4,\r\n                },\r\n                {\r\n                  title: '链接',\r\n                  value: '',\r\n                  tips: '请输入链接',\r\n                  max: 100,\r\n                },\r\n              ],\r\n            },\r\n          ],\r\n        },\r\n        fillet: {\r\n          title: '背景圆角',\r\n          type: 0,\r\n          list: [\r\n            {\r\n              val: '全部',\r\n              icon: 'iconcaozuo-zhengti',\r\n            },\r\n            {\r\n              val: '单个',\r\n              icon: 'iconcaozuo-bianjiao',\r\n            },\r\n          ],\r\n          valName: '圆角值',\r\n          val: 0,\r\n          min: 0,\r\n          valList: [{ val: 0 }, { val: 0 }, { val: 0 }, { val: 0 }],\r\n        },\r\n      },\r\n      vuexMenu: [],\r\n      boxStyle: '',\r\n      slider: '',\r\n      bgColorLeft: '',\r\n      bgColorRight: '',\r\n      bottomBgColor: '',\r\n      number: 0,\r\n      rowsNum: 0,\r\n      textColor: '',\r\n      pointerColor: '',\r\n      pointerBgColor: '',\r\n      pageData: {},\r\n      prConfig: 0,\r\n      menuStyleConfig: 0,\r\n      showConfig: 0,\r\n      filletImg: 0,\r\n      filletValImg: 0,\r\n      valListImg: [],\r\n      fillet: 0,\r\n      filletVal: 0,\r\n      valList: [],\r\n      toneConfig: 0,\r\n      topConfig: 0,\r\n      bottomConfig: 0,\r\n    };\r\n  },\r\n  mounted() {\r\n    this.$nextTick(() => {\r\n      this.pageData = this.$store.state.mobildConfig.defaultArray[this.num];\r\n      this.setConfig(this.pageData);\r\n    });\r\n  },\r\n  methods: {\r\n    // 对象转数组\r\n    objToArr(data) {\r\n      let obj = Object.keys(data);\r\n      let m = obj.map((key) => data[key]);\r\n      return m;\r\n    },\r\n    setConfig(data) {\r\n      if (!data) return;\r\n      if (data.mbConfig) {\r\n        this.menuStyleConfig = data.menuStyleConfig.tabVal;\r\n        this.showConfig = data.showConfig.tabVal;\r\n        this.filletImg = data.filletImg.type;\r\n        this.filletValImg = data.filletImg.val;\r\n        this.valListImg = data.filletImg.valList;\r\n        this.fillet = data.fillet.type;\r\n        this.filletVal = data.fillet.val;\r\n        this.valList = data.fillet.valList;\r\n        this.toneConfig = data.toneConfig.tabVal;\r\n        this.pointerColor = data.pointerColor.color[0].item;\r\n        this.pointerBgColor = data.pointerBgColor.color[0].item;\r\n        this.bottomBgColor = data.bottomBgColor.color[0].item;\r\n        this.textColor = data.textColor.color[0].item;\r\n        this.slider = data.mbConfig.val;\r\n        this.prConfig = data.prConfig.val;\r\n        this.topConfig = data.topConfig.val;\r\n        this.bottomConfig = data.bottomConfig.val;\r\n        this.bgColorLeft = data.bgColor.color[0].item;\r\n        this.bgColorRight = data.bgColor.color[1].item;\r\n        let rowsNum = data.rowsNum.tabVal;\r\n        let number = data.number.tabVal;\r\n        let lists = this.objToArr(data.menuConfig.list);\r\n        let list = [];\r\n        lists.forEach((item) => {\r\n          if (item.show) {\r\n            list.push(item);\r\n          }\r\n        });\r\n        this.number = number;\r\n        this.rowsNum = rowsNum;\r\n        if (this.showConfig) {\r\n          this.vuexMenu = list.splice(0, (rowsNum + 1) * (number + 3));\r\n        } else {\r\n          this.vuexMenu = lists;\r\n        }\r\n      }\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.list_menu {\r\n  padding: 0 12px 12px;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n\r\n  .item {\r\n    margin-top: 12px;\r\n    font-size: 12px;\r\n    color: #333;\r\n    text-align: center;\r\n    width: 33.3333%;\r\n\r\n    &.four {\r\n      width: 25%;\r\n    }\r\n\r\n    &.five {\r\n      width: 20%;\r\n    }\r\n\r\n    .img-box {\r\n      width: 45px;\r\n      height: 45px;\r\n      margin: 0 auto 8px auto;\r\n\r\n      &.on {\r\n        margin-bottom: 0;\r\n      }\r\n\r\n      img {\r\n        width: 100%;\r\n        height: 100%;\r\n      }\r\n    }\r\n  }\r\n\r\n  .icontupian {\r\n    font-size: 16px;\r\n  }\r\n}\r\n\r\n.home_menu {\r\n  padding: 0 12px 12px;\r\n  display: flex;\r\n  overflow: hidden;\r\n\r\n  .menu-item {\r\n    margin-top: 12px;\r\n    font-size: 11px;\r\n    color: #282828;\r\n    text-align: center;\r\n    margin-right: 27px;\r\n\r\n    .img-box {\r\n      width: 50px;\r\n      height: 50px;\r\n\r\n      &.on {\r\n        border-radius: 50%;\r\n\r\n        img,\r\n        .empty-box {\r\n          border-radius: 50%;\r\n        }\r\n      }\r\n    }\r\n\r\n    .box,\r\n    img {\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n\r\n    .box {\r\n      background: #d8d8d8;\r\n    }\r\n\r\n    p {\r\n      margin-top: 5px;\r\n    }\r\n  }\r\n\r\n  &.on {\r\n    .menu-item {\r\n      margin-right: 51px;\r\n\r\n      &:nth-child(5n) {\r\n        margin-right: 51px;\r\n      }\r\n\r\n      &:nth-child(4n) {\r\n        margin-right: 0;\r\n      }\r\n    }\r\n  }\r\n\r\n  .icontupian {\r\n    font-size: 16px;\r\n  }\r\n}\r\n\r\n.dot {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-bottom: 10px;\r\n\r\n  &.number {\r\n    bottom: 15px;\r\n  }\r\n\r\n  .num {\r\n    width: 25px;\r\n    height: 18px;\r\n    line-height: 18px;\r\n    background-color: #000;\r\n    color: #fff;\r\n    opacity: 0.3;\r\n    border-radius: 8px;\r\n    font-size: 12px;\r\n    text-align: center;\r\n  }\r\n\r\n  .dot-item {\r\n    width: 10px;\r\n    height: 3px;\r\n    background: #dddddd;\r\n    border-radius: 50%;\r\n    margin: 0 3px;\r\n  }\r\n}\r\n\r\n.empty-box {\r\n  background: #f3f9ff;\r\n\r\n  img {\r\n    width: 26px !important;\r\n    height: 20px !important;\r\n  }\r\n}\r\n</style>\r\n"]}]}