{"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\components\\mobileConfigRight\\c_button_style.vue?vue&type=style&index=0&id=4922cb72&scoped=true&lang=scss","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\components\\mobileConfigRight\\c_button_style.vue","mtime":1761185179987},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQo6OnYtZGVlcC5pdnUtbW9kYWwtYm9keSB7DQogIG1heC1oZWlnaHQ6IDYyM3B4Ow0KICBvdmVyZmxvdzogYXV0bzsNCn0NCi5saXN0IHsNCiAgcGFkZGluZy1sZWZ0OiA4cHg7DQogIG1heC1oZWlnaHQ6IDUwdmg7DQogIC5pdGVtIHsNCiAgICBtYXJnaW4tcmlnaHQ6IDExcHg7DQogICAgdGV4dC1hbGlnbjogY2VudGVyOw0KICAgIGN1cnNvcjogcG9pbnRlcjsNCg0KICAgICYub24gew0KICAgICAgLnBpY3RydWUgew0KICAgICAgICBib3JkZXItY29sb3I6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSk7DQogICAgICB9DQogICAgfQ0KDQogICAgLm5hbWUgew0KICAgICAgY29sb3I6ICMzZDNkM2Q7DQogICAgICBmb250LXNpemU6IDE0cHg7DQogICAgICBtYXJnaW46IDEycHggMDsNCiAgICB9DQoNCiAgICAmOm50aC1vZi10eXBlKDNuKSB7DQogICAgICBtYXJnaW4tcmlnaHQ6IDA7DQogICAgfQ0KICAgIC5waWN0cnVlIHsNCiAgICAgIHdpZHRoOiAyNzNweDsNCiAgICAgIGhlaWdodDogMjE4cHg7DQogICAgICBiYWNrZ3JvdW5kOiAjZjVmNWY1Ow0KICAgICAgYm9yZGVyLXJhZGl1czogNHB4Ow0KICAgICAgYm9yZGVyOiAxcHggc29saWQgI2RkZGRkZDsNCiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsNCg0KICAgICAgaW1nIHsNCiAgICAgICAgZGlzcGxheTogYmxvY2s7DQogICAgICB9DQoNCiAgICAgIC5pY29uZm9udCB7DQogICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgICAgICAgcmlnaHQ6IC0xcHg7DQogICAgICAgIGJvdHRvbTogLTRweDsNCiAgICAgICAgY29sb3I6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSk7DQogICAgICB9DQogICAgfQ0KICB9DQp9DQouYnV0dG9uLXN0eWxlIHsNCiAgcGFkZGluZzogMCAxNXB4Ow0KICBtYXJnaW4tYm90dG9tOiAyMHB4Ow0KDQogIC50aXRsZS10aXBzIHsNCiAgICBtYXJnaW4tcmlnaHQ6IDE0cHg7DQogICAgY29sb3I6ICM5OTk7DQogICAgZm9udC1zaXplOiAxMnB4Ow0KICAgIHdpZHRoOiA4MnB4Ow0KICB9DQoNCiAgLnN0eWxlLWJveCB7DQogICAgLmJudCB7DQogICAgICB3aWR0aDogOTRweDsNCiAgICAgIGhlaWdodDogMzJweDsNCiAgICAgIGJhY2tncm91bmQ6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSk7DQogICAgICBib3JkZXItcmFkaXVzOiA0cHg7DQogICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7DQogICAgICBsaW5lLWhlaWdodDogMzJweDsNCiAgICAgIGNvbG9yOiAjZmZmOw0KICAgICAgZm9udC1zaXplOiAxMnB4Ow0KICAgICAgY3Vyc29yOiBwb2ludGVyOw0KICAgIH0NCiAgICAubmFtZSB7DQogICAgICBjb2xvcjogIzk5OTk5OTsNCiAgICAgIGZvbnQtc2l6ZTogMTJweDsNCiAgICAgIG1hcmdpbi1sZWZ0OiAxMnB4Ow0KICAgIH0NCiAgfQ0KfQ0K"},{"version":3,"sources":["c_button_style.vue"],"names":[],"mappings":";AA0QA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"c_button_style.vue","sourceRoot":"src/components/mobileConfigRight","sourcesContent":["<template>\r\n  <div>\r\n    <div class=\"button-style acea-row row-middle\">\r\n      <div class=\"title-tips\" v-if=\"configData\">\r\n        <span>{{ configData.title }}</span>\r\n      </div>\r\n      <div class=\"style-box acea-row row-middle\">\r\n        <div class=\"bnt\" @click=\"styleTap\">修改风格</div>\r\n        <div class=\"name\">当前：样式{{ configData.tabVal + 1 }}</div>\r\n      </div>\r\n    </div>\r\n    <el-dialog\r\n      :visible.sync=\"modals\"\r\n      title=\"风格选择器\"\r\n      height=\"500\"\r\n      :width=\"configData.type == 'signIn' || configData.type == 'ranking' ? '630px' : '910px'\"\r\n    >\r\n      <div class=\"list acea-row row-middle\">\r\n        <div\r\n          class=\"item\"\r\n          :class=\"current == index ? 'on' : ''\"\r\n          v-for=\"(item, index) in list\"\r\n          :key=\"index\"\r\n          @click=\"tap(index)\"\r\n        >\r\n          <div class=\"pictrue acea-row row-center-wrapper\">\r\n            <img\r\n              :src=\"item.url\"\r\n              :style=\"{\r\n                width: item.width + 'px',\r\n                height: item.height + 'px',\r\n              }\"\r\n            />\r\n            <span class=\"iconfont icona-zu80222\" v-if=\"current == index\"></span>\r\n          </div>\r\n          <div class=\"name\">风格{{ index + 1 }}</div>\r\n        </div>\r\n      </div>\r\n      <span slot=\"footer\" class=\"dialog-footer\">\r\n        <el-button v-db-click @click=\"cancel\">取 消</el-button>\r\n        <el-button type=\"primary\" v-db-click @click=\"ok\">确 定</el-button>\r\n      </span>\r\n    </el-dialog>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: 'c_button_style',\r\n  props: {\r\n    configObj: {\r\n      type: Object,\r\n    },\r\n    configNme: {\r\n      type: String,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      defaults: {},\r\n      configData: {},\r\n      modals: false,\r\n      current: 0,\r\n      navBar: [\r\n        {\r\n          url: require('@/assets/images/tab02.png'),\r\n          width: 220,\r\n          height: 24,\r\n        },\r\n        {\r\n          url: require('@/assets/images/tab03.png'),\r\n          width: 220,\r\n          height: 24,\r\n        },\r\n        {\r\n          url: require('@/assets/images/tab01.png'),\r\n          width: 220,\r\n          height: 24,\r\n        },\r\n      ],\r\n      signIn: [\r\n        {\r\n          url: require('@/assets/images/signIn01.png'),\r\n          width: 220,\r\n          height: 64,\r\n        },\r\n        {\r\n          url: require('@/assets/images/signIn02.png'),\r\n          width: 220,\r\n          height: 59,\r\n        },\r\n      ],\r\n      ranking: [\r\n        {\r\n          url: require('@/assets/images/ranking01.png'),\r\n          width: 200,\r\n          height: 172,\r\n        },\r\n        {\r\n          url: require('@/assets/images/ranking02.png'),\r\n          width: 200,\r\n          height: 167,\r\n        },\r\n      ],\r\n      coupon: [\r\n        {\r\n          url: require('@/assets/images/coupon01.png'),\r\n          width: 220,\r\n          height: 69,\r\n        },\r\n        {\r\n          url: require('@/assets/images/coupon02.png'),\r\n          width: 220,\r\n          height: 87,\r\n        },\r\n        {\r\n          url: require('@/assets/images/coupon03.png'),\r\n          width: 220,\r\n          height: 62,\r\n        },\r\n        {\r\n          url: require('@/assets/images/coupon04.png'),\r\n          width: 220,\r\n          height: 69,\r\n        },\r\n        {\r\n          url: require('@/assets/images/coupon05.png'),\r\n          width: 220,\r\n          height: 49,\r\n        },\r\n      ],\r\n      pictureCube: [\r\n        {\r\n          url: require('@/assets/images/cube2.png'),\r\n          width: 130,\r\n          height: 129,\r\n          count: 2,\r\n        },\r\n        {\r\n          url: require('@/assets/images/cube3.png'),\r\n          width: 130,\r\n          height: 129,\r\n          count: 2,\r\n        },\r\n        {\r\n          url: require('@/assets/images/cube4.png'),\r\n          width: 130,\r\n          height: 129,\r\n          count: 3,\r\n        },\r\n        {\r\n          url: require('@/assets/images/cube5.png'),\r\n          width: 130,\r\n          height: 129,\r\n          count: 3,\r\n        },\r\n        {\r\n          url: require('@/assets/images/cube6.png'),\r\n          width: 130,\r\n          height: 129,\r\n          count: 3,\r\n        },\r\n        {\r\n          url: require('@/assets/images/cube7.png'),\r\n          width: 130,\r\n          height: 129,\r\n          count: 3,\r\n        },\r\n        {\r\n          url: require('@/assets/images/cube8.png'),\r\n          width: 130,\r\n          height: 129,\r\n          count: 3,\r\n        },\r\n        {\r\n          url: require('@/assets/images/cube9.png'),\r\n          width: 130,\r\n          height: 129,\r\n          count: 4,\r\n        },\r\n        {\r\n          url: require('@/assets/images/cube10.png'),\r\n          width: 130,\r\n          height: 129,\r\n          count: 5,\r\n        },\r\n        {\r\n          url: require('@/assets/images/cube11.png'),\r\n          width: 130,\r\n          height: 129,\r\n          count: 4,\r\n        },\r\n        {\r\n          url: require('@/assets/images/cube12.png'),\r\n          width: 130,\r\n          height: 129,\r\n          count: 1,\r\n        },\r\n        // {\r\n        //   url: require('@/assets/images/cube1.png'),\r\n        //   width: 130,\r\n        //   height: 130,\r\n        //   count: 16,\r\n        // },\r\n      ],\r\n      list: [],\r\n    };\r\n  },\r\n  watch: {\r\n    configObj: {\r\n      handler(nVal) {\r\n        this.defaults = nVal;\r\n        this.configData = nVal[this.configNme];\r\n      },\r\n      deep: true,\r\n    },\r\n  },\r\n  mounted() {\r\n    this.$nextTick(() => {\r\n      this.defaults = this.configObj;\r\n      this.configData = this.configObj[this.configNme];\r\n      this.$nextTick((e) => {\r\n        this.current = this.configData.tabVal;\r\n      });\r\n      switch (this.configData.type) {\r\n        case 'navBar':\r\n          this.list = this.navBar;\r\n          break;\r\n        case 'signIn':\r\n          this.list = this.signIn;\r\n          break;\r\n        case 'ranking':\r\n          this.list = this.ranking;\r\n          break;\r\n        case 'coupon':\r\n          this.list = this.coupon;\r\n          break;\r\n        case 'pictureCube':\r\n          this.list = this.pictureCube;\r\n          break;\r\n      }\r\n    });\r\n  },\r\n  methods: {\r\n    tap(index) {\r\n      this.current = index;\r\n    },\r\n    styleTap() {\r\n      this.modals = true;\r\n    },\r\n    cancel() {\r\n      this.modals = false;\r\n    },\r\n    ok() {\r\n      this.modals = false;\r\n      this.configData.tabVal = this.current;\r\n      this.configData.count = this.list[this.current].count;\r\n      if (this.defaults.picStyle) {\r\n        this.defaults.picStyle.tabVal = 0;\r\n      }\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n::v-deep.ivu-modal-body {\r\n  max-height: 623px;\r\n  overflow: auto;\r\n}\r\n.list {\r\n  padding-left: 8px;\r\n  max-height: 50vh;\r\n  .item {\r\n    margin-right: 11px;\r\n    text-align: center;\r\n    cursor: pointer;\r\n\r\n    &.on {\r\n      .pictrue {\r\n        border-color: var(--prev-color-primary);\r\n      }\r\n    }\r\n\r\n    .name {\r\n      color: #3d3d3d;\r\n      font-size: 14px;\r\n      margin: 12px 0;\r\n    }\r\n\r\n    &:nth-of-type(3n) {\r\n      margin-right: 0;\r\n    }\r\n    .pictrue {\r\n      width: 273px;\r\n      height: 218px;\r\n      background: #f5f5f5;\r\n      border-radius: 4px;\r\n      border: 1px solid #dddddd;\r\n      position: relative;\r\n\r\n      img {\r\n        display: block;\r\n      }\r\n\r\n      .iconfont {\r\n        position: absolute;\r\n        right: -1px;\r\n        bottom: -4px;\r\n        color: var(--prev-color-primary);\r\n      }\r\n    }\r\n  }\r\n}\r\n.button-style {\r\n  padding: 0 15px;\r\n  margin-bottom: 20px;\r\n\r\n  .title-tips {\r\n    margin-right: 14px;\r\n    color: #999;\r\n    font-size: 12px;\r\n    width: 82px;\r\n  }\r\n\r\n  .style-box {\r\n    .bnt {\r\n      width: 94px;\r\n      height: 32px;\r\n      background: var(--prev-color-primary);\r\n      border-radius: 4px;\r\n      text-align: center;\r\n      line-height: 32px;\r\n      color: #fff;\r\n      font-size: 12px;\r\n      cursor: pointer;\r\n    }\r\n    .name {\r\n      color: #999999;\r\n      font-size: 12px;\r\n      margin-left: 12px;\r\n    }\r\n  }\r\n}\r\n</style>\r\n"]}]}