| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\components\\mobilePage\\home_hot.vue?vue&type=style&index=0&id=17d3e78b&scoped=true&lang=scss","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\components\\mobilePage\\home_hot.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:DQoucGFkZGluZ0JveCB7DQogIHBhZGRpbmc6IDAgMTBweCAhaW1wb3J0YW50Ow0KfQ0KDQouaG9tZS1ob3Qgew0KICBwYWRkaW5nOiAxNXB4IDEwcHg7DQogIGJhY2tncm91bmQ6ICNmZmU1ZTM7DQogIGJvcmRlci1yYWRpdXM6IDEycHg7DQoNCiAgLmhkIHsNCiAgICBkaXNwbGF5OiBmbGV4Ow0KICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQoNCiAgICAudHh0IHsNCiAgICAgIG1hcmdpbi1yaWdodDogMTBweDsNCiAgICAgIGNvbG9yOiAjZmMzYzNlOw0KICAgICAgZm9udC1zaXplOiAxNnB4Ow0KICAgICAgZm9udC13ZWlnaHQ6IGJvbGQ7DQogICAgfQ0KDQogICAgLmNvbG9yLXR4dCB7DQogICAgICB3aWR0aDogMTEwcHg7DQogICAgICBoZWlnaHQ6IDE4cHg7DQogICAgICBib3JkZXItcmFkaXVzOiAxM3B4IDAgMTNweCAwOw0KICAgICAgY29sb3I6ICNmZmY7DQogICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7DQogICAgICBmb250LXNpemU6IDExcHg7DQogICAgICBib3gtc2hhZG93OiAzcHggMXB4IDFweCAxcHggcmdiYSgyNTUsIDIwMywgMTk5LCAwLjgpOw0KICAgIH0NCiAgfQ0KDQogIC5iZCB7DQogICAgZGlzcGxheTogZmxleDsNCiAgICBmbGV4LXdyYXA6IHdyYXA7DQoNCiAgICAuaXRlbSB7DQogICAgICBkaXNwbGF5OiBmbGV4Ow0KICAgICAgd2lkdGg6IDE1OHB4Ow0KICAgICAgbWFyZ2luLXRvcDogMTBweDsNCiAgICAgIG1hcmdpbi1yaWdodDogMTNweDsNCiAgICAgIHBhZGRpbmc6IDEwcHg7DQogICAgICBiYWNrZ3JvdW5kOiAjZmZmOw0KICAgICAgYm9yZGVyLXJhZGl1czogOHB4Ow0KDQogICAgICAmOm50aC1jaGlsZCgybikgew0KICAgICAgICBtYXJnaW4tcmlnaHQ6IDA7DQogICAgICB9DQoNCiAgICAgIC5sZWZ0IHsNCiAgICAgICAgd2lkdGg6IDY5cHg7DQoNCiAgICAgICAgLnRpdGxlIHsNCiAgICAgICAgICBmb250LXNpemU6IDE0cHg7DQogICAgICAgIH0NCg0KICAgICAgICAuZGVzIHsNCiAgICAgICAgICBmb250LXNpemU6IDEycHg7DQogICAgICAgICAgY29sb3I6ICM5OTk5OTk7DQogICAgICAgIH0NCg0KICAgICAgICAubGluayB7DQogICAgICAgICAgd2lkdGg6IDU2cHg7DQogICAgICAgICAgaGVpZ2h0OiAxOHB4Ow0KICAgICAgICAgIHBhZGRpbmc6IDAgMTBweDsNCiAgICAgICAgICBtYXJnaW4tdG9wOiAzcHg7DQogICAgICAgICAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KDkwZGVnLCAjNGJjNGZmLCAjMjA3ZWZmIDEwMCUpOw0KICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDlweDsNCiAgICAgICAgICBjb2xvcjogI2ZmZjsNCiAgICAgICAgICBmb250LXNpemU6IDEzcHg7DQogICAgICAgIH0NCiAgICAgIH0NCg0KICAgICAgLmltZy1ib3ggew0KICAgICAgICBmbGV4OiAxOw0KDQogICAgICAgIGltZyB7DQogICAgICAgICAgd2lkdGg6IDEwMCU7DQogICAgICAgICAgaGVpZ2h0OiAxMDAlOw0KICAgICAgICB9DQoNCiAgICAgICAgLmJveCB7DQogICAgICAgICAgd2lkdGg6IDEwMCU7DQogICAgICAgICAgaGVpZ2h0OiAxMDAlOw0KICAgICAgICAgIGJhY2tncm91bmQ6ICNkOGQ4ZDg7DQogICAgICAgIH0NCiAgICAgIH0NCg0KICAgICAgJjpudGgtY2hpbGQoMikgLmxlZnQgLmxpbmsgew0KICAgICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoOTBkZWcsICNmZjkwNDMsICNmZjUzMWQgMTAwJSk7DQogICAgICB9DQoNCiAgICAgICY6bnRoLWNoaWxkKDMpIC5sZWZ0IC5saW5rIHsNCiAgICAgICAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KDkwZGVnLCAjOTZlMTg3LCAjNDhjZTJjIDEwMCUpOw0KICAgICAgfQ0KDQogICAgICAmOm50aC1jaGlsZCg0KSAubGVmdCAubGluayB7DQogICAgICAgIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCg5MGRlZywgI2ZmYzU2MCwgI2ZmOWMwMCAxMDAlKTsNCiAgICAgIH0NCiAgICB9DQogIH0NCn0NCg=="},{"version":3,"sources":["home_hot.vue"],"names":[],"mappings":";AA4RA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;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;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA","file":"home_hot.vue","sourceRoot":"src/components/mobilePage","sourcesContent":["<template>\r\n <div class=\"mobile-page paddingBox\" v-if=\"bgColor.length > 0\">\r\n <div class=\"home-hot\" :style=\"{ marginTop: slider + 'px', background: boxColor }\">\r\n <div class=\"hd\">\r\n <p class=\"txt\" :style=\"{ color: txtColor }\">{{ titleTxt }}</p>\r\n <p class=\"color-txt\" :style=\"`background: linear-gradient(90deg,${bgColor[0].item},${bgColor[1].item});`\">\r\n {{ msgTxt }}\r\n </p>\r\n </div>\r\n <div class=\"bd\">\r\n <div class=\"item\" v-for=\"(item, index) in hotList\" :key=\"index\">\r\n <div class=\"left\">\r\n <div class=\"title\">{{ item.info[0].value }}</div>\r\n <div class=\"des\">{{ item.info[1].value }}</div>\r\n <div class=\"link\">GO！</div>\r\n </div>\r\n <div class=\"img-box\">\r\n <img :src=\"item.img\" alt=\"\" v-if=\"item.img\" />\r\n <div class=\"empty-box on\" v-else><span class=\"iconfont-diy icontupian\"></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapState } from 'vuex';\r\nexport default {\r\n name: 'home_hot',\r\n cname: '活动魔方',\r\n icon: 'iconhuodongmofang1',\r\n configName: 'c_home_hot',\r\n type: 3, // 0 基础组件 1 营销组件 2工具组件\r\n defaultName: 'activeParty', // 外面匹配名称\r\n props: {\r\n index: {\r\n type: null,\r\n },\r\n num: {\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 data() {\r\n return {\r\n // 默认初始化数据禁止修改\r\n defaultConfig: {\r\n name: 'activeParty',\r\n timestamp: this.num,\r\n setUp: {\r\n tabVal: 0,\r\n },\r\n titleConfig: {\r\n title: '促销标题',\r\n value: '超值爆款',\r\n place: '请输入标题',\r\n max: 10,\r\n },\r\n desConfig: {\r\n title: '促销简介',\r\n value: '美好生活由此开始',\r\n place: '请输入简介',\r\n max: 8,\r\n },\r\n menuConfig: {\r\n title: '最多可添加4个版块，图片建议尺寸140 * 140px；鼠标拖拽左侧圆点可 调整版块顺序',\r\n maxList: 4,\r\n list: [\r\n {\r\n img: '',\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: '选填，不超过20个字',\r\n max: 20,\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 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: '选填，不超过20个字',\r\n max: 20,\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 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: '选填，不超过20个字',\r\n max: 20,\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 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: '选填，不超过20个字',\r\n max: 20,\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 themeColor: {\r\n title: '主题颜色',\r\n name: 'themeColor',\r\n default: [\r\n {\r\n item: '#fc3c3e',\r\n },\r\n ],\r\n color: [\r\n {\r\n item: '#fc3c3e',\r\n },\r\n ],\r\n },\r\n bgColor: {\r\n title: '标签背景颜色',\r\n name: 'bgColor',\r\n default: [\r\n {\r\n item: '#F62C2C',\r\n },\r\n {\r\n item: '#F96E29',\r\n },\r\n ],\r\n color: [\r\n {\r\n item: '#F62C2C',\r\n },\r\n {\r\n item: '#F96E29',\r\n },\r\n ],\r\n },\r\n boxColor: {\r\n title: '背景颜色',\r\n name: 'boxColor',\r\n default: [\r\n {\r\n item: '#ffe5e3',\r\n },\r\n ],\r\n color: [\r\n {\r\n item: '#ffe5e3',\r\n },\r\n ],\r\n },\r\n // 页面间距\r\n mbConfig: {\r\n title: '页面间距',\r\n val: 0,\r\n min: 0,\r\n },\r\n },\r\n titleTxt: '',\r\n msgTxt: '',\r\n slider: '',\r\n hotList: [],\r\n txtColor: '',\r\n bgColor: [],\r\n pageData: {},\r\n boxColor: '',\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 setConfig(data) {\r\n if (!data) return;\r\n if (data.mbConfig) {\r\n this.titleTxt = data.titleConfig.value;\r\n this.msgTxt = data.desConfig.value;\r\n this.slider = data.mbConfig.val;\r\n this.hotList = data.menuConfig.list;\r\n this.txtColor = data.themeColor.color[0].item;\r\n this.bgColor = data.bgColor.color;\r\n this.boxColor = data.boxColor.color[0].item;\r\n }\r\n // if (Object.keys(data).length > 0) {\r\n // this.titleTxt = data.inputList[0].value;\r\n // this.msgTxt = data.inputList[1].value;\r\n // this.slider = data.sliderList[0].val;\r\n // this.hotList = data.menu;\r\n // this.txtColor = data.colorList[0].color[0].item;\r\n // this.bgColor = data.colorList[1].color;\r\n // }\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.paddingBox {\r\n padding: 0 10px !important;\r\n}\r\n\r\n.home-hot {\r\n padding: 15px 10px;\r\n background: #ffe5e3;\r\n border-radius: 12px;\r\n\r\n .hd {\r\n display: flex;\r\n align-items: center;\r\n\r\n .txt {\r\n margin-right: 10px;\r\n color: #fc3c3e;\r\n font-size: 16px;\r\n font-weight: bold;\r\n }\r\n\r\n .color-txt {\r\n width: 110px;\r\n height: 18px;\r\n border-radius: 13px 0 13px 0;\r\n color: #fff;\r\n text-align: center;\r\n font-size: 11px;\r\n box-shadow: 3px 1px 1px 1px rgba(255, 203, 199, 0.8);\r\n }\r\n }\r\n\r\n .bd {\r\n display: flex;\r\n flex-wrap: wrap;\r\n\r\n .item {\r\n display: flex;\r\n width: 158px;\r\n margin-top: 10px;\r\n margin-right: 13px;\r\n padding: 10px;\r\n background: #fff;\r\n border-radius: 8px;\r\n\r\n &:nth-child(2n) {\r\n margin-right: 0;\r\n }\r\n\r\n .left {\r\n width: 69px;\r\n\r\n .title {\r\n font-size: 14px;\r\n }\r\n\r\n .des {\r\n font-size: 12px;\r\n color: #999999;\r\n }\r\n\r\n .link {\r\n width: 56px;\r\n height: 18px;\r\n padding: 0 10px;\r\n margin-top: 3px;\r\n background: linear-gradient(90deg, #4bc4ff, #207eff 100%);\r\n border-radius: 9px;\r\n color: #fff;\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n .img-box {\r\n flex: 1;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .box {\r\n width: 100%;\r\n height: 100%;\r\n background: #d8d8d8;\r\n }\r\n }\r\n\r\n &:nth-child(2) .left .link {\r\n background: linear-gradient(90deg, #ff9043, #ff531d 100%);\r\n }\r\n\r\n &:nth-child(3) .left .link {\r\n background: linear-gradient(90deg, #96e187, #48ce2c 100%);\r\n }\r\n\r\n &:nth-child(4) .left .link {\r\n background: linear-gradient(90deg, #ffc560, #ff9c00 100%);\r\n }\r\n }\r\n }\r\n}\r\n</style>\r\n"]}]}
|
