{"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\components\\mobilePage\\home_userInfor.vue?vue&type=style&index=0&id=c5d83592&scoped=true&lang=scss","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\components\\mobilePage\\home_userInfor.vue","mtime":1761614938974},{"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:DQoudXNlckluZm9yIHsNCiAgcGFkZGluZzogMTRweCAxMHB4Ow0KICAubGlzdCB7DQogICAgbWFyZ2luLXRvcDogMTZweDsNCiAgICBwYWRkaW5nLXRvcDogMTZweDsNCiAgICBib3JkZXItdG9wOiAxcHggc29saWQgI2VlZTsNCiAgICAuaXRlbSB7DQogICAgICBmb250LXNpemU6IDEzcHg7DQogICAgICBjb2xvcjogIzk5OTsNCiAgICAgIC5udW0gew0KICAgICAgICBmb250LXNpemU6IDE0cHg7DQogICAgICAgIGZvbnQtd2VpZ2h0OiA2MDA7DQogICAgICAgIGNvbG9yOiAjMzMzMzMzOw0KICAgICAgICBtYXJnaW4tbGVmdDogNHB4Ow0KICAgICAgfQ0KICAgIH0NCiAgfQ0KICAucmlnaHQgew0KICAgICYub24gew0KICAgICAgLml0ZW0gew0KICAgICAgICBjb2xvcjogIzY2NjY2NjsNCiAgICAgIH0NCiAgICB9DQogICAgLml0ZW0gew0KICAgICAgdGV4dC1hbGlnbjogY2VudGVyOw0KICAgICAgZm9udC13ZWlnaHQ6IDQwMDsNCiAgICAgIGNvbG9yOiAjOTk5Ow0KICAgICAgZm9udC1zaXplOiAxMXB4Ow0KICAgICAgbWFyZ2luLWxlZnQ6IDE2cHg7DQogICAgICAubnVtIHsNCiAgICAgICAgZm9udC1zaXplOiAxNnB4Ow0KICAgICAgICBtYXJnaW4tYm90dG9tOiAycHg7DQogICAgICAgIGZvbnQtd2VpZ2h0OiA2MDA7DQogICAgICAgIGNvbG9yOiAjMzMzMzMzOw0KICAgICAgfQ0KICAgIH0NCiAgICAuaWNvbmZvbnQgew0KICAgICAgZm9udC13ZWlnaHQ6IDQwMDsNCiAgICAgIC8vY29sb3I6ICMzMzMzMzM7DQogICAgICBmb250LXNpemU6IDE1cHg7DQogICAgICBtYXJnaW4tYm90dG9tOiAycHg7DQogICAgfQ0KICB9DQogIC5sZWZ0IHsNCiAgICAucGljdHJ1ZSB7DQogICAgICB3aWR0aDogNDVweDsNCiAgICAgIGhlaWdodDogNDVweDsNCiAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTsNCiAgICAgIG1hcmdpbi1yaWdodDogMTBweDsNCiAgICAgIGltZyB7DQogICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTsNCiAgICAgICAgd2lkdGg6IDEwMCU7DQogICAgICAgIGhlaWdodDogMTAwJTsNCiAgICAgICAgb2JqZWN0LWZpdDogY292ZXI7DQogICAgICB9DQogICAgICAuZW1wdHktYm94IHsNCiAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlOw0KICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjNmOWZmOw0KICAgICAgICBib3JkZXI6IDFweCBzb2xpZCAjZWVlZWVlOw0KICAgICAgICAuaWNvbmZvbnQtZGl5IHsNCiAgICAgICAgICBmb250LXNpemU6IDIwcHg7DQogICAgICAgIH0NCiAgICAgICAgaW1nIHsNCiAgICAgICAgICB3aWR0aDogMjZweDsNCiAgICAgICAgICBoZWlnaHQ6IDIwcHg7DQogICAgICAgIH0NCiAgICAgIH0NCiAgICB9DQogICAgLnRleHQgew0KICAgICAgZm9udC13ZWlnaHQ6IDQwMDsNCiAgICAgIGNvbG9yOiAjMzMzMzMzOw0KICAgICAgZm9udC1zaXplOiAxNnB4Ow0KICAgICAgLm5hbWUgew0KICAgICAgICBpbWcgew0KICAgICAgICAgIHdpZHRoOiAzOHB4Ow0KICAgICAgICAgIGhlaWdodDogMTZweDsNCiAgICAgICAgICBtYXJnaW4tbGVmdDogNXB4Ow0KICAgICAgICB9DQogICAgICB9DQogICAgICAucHJvZ3Jlc3Mgew0KICAgICAgICBvdmVyZmxvdzogaGlkZGVuOw0KICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWVlZWVlOw0KICAgICAgICB3aWR0aDogNjBweDsNCiAgICAgICAgaGVpZ2h0OiA3cHg7DQogICAgICAgIGJvcmRlci1yYWRpdXM6IDNweDsNCiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlOw0KICAgICAgICAuYmdSZWRzIHsNCiAgICAgICAgICB3aWR0aDogODAlOw0KICAgICAgICAgIGhlaWdodDogMTAwJTsNCiAgICAgICAgICB0cmFuc2l0aW9uOiB3aWR0aCAwLjZzIGVhc2U7DQogICAgICAgICAgYm9yZGVyLXJhZGl1czogM3B4Ow0KICAgICAgICB9DQogICAgICB9DQogICAgICAucGVyY2VudCB7DQogICAgICAgIGZvbnQtc2l6ZTogMTBweDsNCiAgICAgICAgbWFyZ2luLWxlZnQ6IDRweDsNCiAgICAgIH0NCiAgICAgIC5waG9uZSB7DQogICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7DQogICAgICAgIC8vY29sb3I6ICMzMzM7DQogICAgICAgIGZvbnQtc2l6ZTogMTBweDsNCiAgICAgICAgbWFyZ2luLXRvcDogM3B4Ow0KICAgICAgICAuaWNvbnNob3VqaSB7DQogICAgICAgICAgbWFyZ2luLXJpZ2h0OiAycHg7DQogICAgICAgICAgZm9udC1zaXplOiAxMnB4Ow0KICAgICAgICB9DQogICAgICB9DQogICAgfQ0KICB9DQp9DQo="},{"version":3,"sources":["home_userInfor.vue"],"names":[],"mappings":";AA+ZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"home_userInfor.vue","sourceRoot":"src/components/mobilePage","sourcesContent":["<template>\r\n  <div\r\n    :style=\"{\r\n      background: bottomBgColor,\r\n      marginTop: mTop + '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      v-if=\"styleConfig\"\r\n      class=\"userInfor acea-row row-between-wrapper\"\r\n      :style=\"{\r\n        background: `linear-gradient(90deg,${bgColorLeft} 0%,${bgColorRight} 100%)`,\r\n        borderRadius: bgRadius,\r\n      }\"\r\n    >\r\n      <div class=\"left acea-row row-middle\">\r\n        <div class=\"pictrue acea-row row-center-wrapper\">\r\n          <img :src=\"logoConfig\" v-if=\"logoConfig\" />\r\n          <div class=\"empty-box\" v-else>\r\n            <img src=\"../../assets/images/shan.png\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"text\">\r\n          <div class=\"name acea-row row-middle\">用户名称<img src=\"../../assets/images/vip-diy.png\" /></div>\r\n          <div class=\"acea-row row-middle\">\r\n            <div\r\n              class=\"progress\"\r\n              :style=\"{\r\n                background: toneConfig ? progressBgColor : '#eee',\r\n              }\"\r\n            >\r\n              <div\r\n                class=\"bgReds\"\r\n                :style=\"{\r\n                  background: toneConfig\r\n                    ? `linear-gradient(90deg,${progressLeft} 0%,${progressRight} 100%)`\r\n                    : themeColor,\r\n                }\"\r\n              ></div>\r\n            </div>\r\n            <div class=\"percent\">3000/1000000</div>\r\n          </div>\r\n          <!--<div class=\"phone\"><span class=\"iconfont iconshouji\"></span>13000000000</div>-->\r\n        </div>\r\n      </div>\r\n      <div class=\"right acea-row row-bottom\">\r\n        <div class=\"item\" v-if=\"checkType.slice(0, 3).indexOf(1) != -1\">\r\n          <div class=\"num\">20</div>\r\n          <div>积分</div>\r\n        </div>\r\n        <div class=\"item\" v-if=\"checkType.slice(0, 3).indexOf(2) != -1\">\r\n          <div class=\"num\">200</div>\r\n          <div>余额</div>\r\n        </div>\r\n        <div class=\"item\" v-if=\"checkType.slice(0, 3).indexOf(0) != -1\">\r\n          <div class=\"num\">2</div>\r\n          <div>优惠券</div>\r\n        </div>\r\n        <div class=\"item\" v-if=\"checkType.slice(0, 3).indexOf(4) != -1\">\r\n          <div class=\"num\">80</div>\r\n          <div>收藏</div>\r\n        </div>\r\n        <div class=\"item\" v-if=\"checkType.slice(0, 3).indexOf(5) != -1\">\r\n          <div class=\"num\">80</div>\r\n          <div>浏览</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      v-else\r\n      class=\"userInfor\"\r\n      :style=\"{\r\n        background: `linear-gradient(90deg,${bgColorLeft} 0%,${bgColorRight} 100%)`,\r\n        borderRadius: bgRadius,\r\n      }\"\r\n    >\r\n      <div class=\"acea-row row-between-wrapper\">\r\n        <div class=\"left acea-row row-middle\">\r\n          <div class=\"pictrue acea-row row-center-wrapper\">\r\n            <img :src=\"logoConfig\" v-if=\"logoConfig\" />\r\n            <div class=\"empty-box\" v-else>\r\n              <img src=\"../../assets/images/shan.png\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"text\">\r\n            <div class=\"name acea-row row-middle\">用户名称<img src=\"../../assets/images/vip-diy.png\" /></div>\r\n            <div class=\"acea-row row-middle\">\r\n              <div\r\n                class=\"progress\"\r\n                :style=\"{\r\n                  background: toneConfig ? progressBgColor : '#eee',\r\n                }\"\r\n              >\r\n                <div\r\n                  class=\"bgReds\"\r\n                  :style=\"{\r\n                    background: toneConfig\r\n                      ? `linear-gradient(90deg,${progressLeft} 0%,${progressRight} 100%)`\r\n                      : themeColor,\r\n                  }\"\r\n                ></div>\r\n              </div>\r\n              <div class=\"percent\">3000/1000000</div>\r\n            </div>\r\n            <!--<div class=\"phone\"><span class=\"iconfont iconshouji\"></span>13000000000</div>-->\r\n          </div>\r\n        </div>\r\n        \r\n      </div>\r\n      <div class=\"list acea-row row-around\">\r\n        <div class=\"item\" v-if=\"checkType.indexOf(1) != -1\">\r\n          <div>积分<span class=\"num\">20000</span></div>\r\n        </div>\r\n        <div class=\"item\" v-if=\"checkType.indexOf(2) != -1\">\r\n          <div>余额<span class=\"num\">200</span></div>\r\n        </div>\r\n        <div class=\"item\" v-if=\"checkType.indexOf(0) != -1\">\r\n          <div>优惠券<span class=\"num\">2</span></div>\r\n        </div>\r\n        <div class=\"item\" v-if=\"checkType.indexOf(4) != -1\">\r\n          <div>收藏<span class=\"num\">80</span></div>\r\n        </div>\r\n        <div class=\"item\" v-if=\"checkType.indexOf(5) != -1\">\r\n          <div>浏览<span class=\"num\">80</span></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapState, mapMutations } from 'vuex';\r\n// import theme from \"@/mixins/theme\";\r\nexport default {\r\n  name: 'home_userInfor',\r\n  cname: '用户信息',\r\n  configName: 'c_userInfor',\r\n  icon: '#iconzujian-yonghuxinxi',\r\n  type: 0, // 0 基础组件 1 营销组件 2工具组件\r\n  defaultName: 'userInfor', // 外面匹配名称\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: 'userInfor',\r\n        timestamp: this.num,\r\n        isHide: false,\r\n        setUp: {\r\n          tabVal: 0,\r\n        },\r\n        titleLeft: '展示设置',\r\n        titleImg: '默认头像',\r\n        titleRight: '进度条',\r\n        titleCurrency: '通用样式',\r\n        styleConfig: {\r\n          title: '选择风格',\r\n          tabVal: 1,\r\n          tabList: [\r\n            {\r\n              name: '样式一',\r\n            },\r\n            {\r\n              name: '样式二',\r\n            },\r\n          ],\r\n        },\r\n        checkboxInfo: {\r\n          title: '是否展示',\r\n          name: 'checkboxInfo',\r\n          userType: 1,\r\n          type: [1, 2],\r\n          list: [\r\n            {\r\n              id: 1,\r\n              name: '积分',\r\n            },\r\n            {\r\n              id: 2,\r\n              name: '余额',\r\n            },\r\n            {\r\n              id: 4,\r\n              name: '收藏',\r\n            },\r\n            {\r\n              id: 0,\r\n              name: '优惠券',\r\n            },\r\n            {\r\n              id: 5,\r\n              name: '浏览',\r\n            },\r\n          ],\r\n        },\r\n        logoConfig: {\r\n          info: '建议：图片尺寸90px * 90px',\r\n          url: '',\r\n          type: 'code',\r\n          delType: 1,\r\n          name: '上传图片',\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        progressColor: {\r\n          title: '进度条',\r\n          default: [\r\n            {\r\n              item: '#e93323',\r\n            },\r\n            {\r\n              item: '#ff8933',\r\n            },\r\n          ],\r\n          color: [\r\n            {\r\n              item: '#e93323',\r\n            },\r\n            {\r\n              item: '#ff8933',\r\n            },\r\n          ],\r\n        },\r\n        progressBgColor: {\r\n          title: '进度条背景',\r\n          default: [\r\n            {\r\n              item: '#EEEEEE',\r\n            },\r\n          ],\r\n          color: [\r\n            {\r\n              item: '#EEEEEE',\r\n            },\r\n          ],\r\n        },\r\n        moduleColor: {\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        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        mbConfig: {\r\n          title: '页面间距',\r\n          val: 0,\r\n          min: 0,\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      pageData: {},\r\n      styleConfig: 0,\r\n      checkType: [],\r\n      logoConfig: '',\r\n      progressLeft: '',\r\n      progressRight: '',\r\n      progressBgColor: '',\r\n      bgColorLeft: '',\r\n      bgColorRight: '',\r\n      bottomBgColor: '',\r\n      topConfig: 0,\r\n      bottomConfig: 0,\r\n      prConfig: 0,\r\n      mTop: '',\r\n      bgRadius: 0,\r\n      toneConfig: 0,\r\n      themeColor: '',\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.styleConfig = data.styleConfig.tabVal;\r\n        this.checkType = data.checkboxInfo.type;\r\n        this.logoConfig = data.logoConfig.url;\r\n        this.toneConfig = data.toneConfig.tabVal;\r\n        this.progressLeft = data.progressColor.color[0].item;\r\n        this.progressRight = data.progressColor.color[1].item;\r\n        this.progressBgColor = data.progressBgColor.color[0].item;\r\n        this.bgColorLeft = data.moduleColor.color[0].item;\r\n        this.bgColorRight = data.moduleColor.color[1].item;\r\n        this.themeColor = `linear-gradient(90deg,${this.colorStyle.theme} 0%,${this.colorStyle.gradient} 100%)`;\r\n        this.bottomBgColor = data.bottomBgColor.color[0].item;\r\n        this.topConfig = data.topConfig.val;\r\n        this.bottomConfig = data.bottomConfig.val;\r\n        this.prConfig = data.prConfig.val;\r\n        this.mTop = data.mbConfig.val;\r\n        let fillet = data.fillet.type;\r\n        let filletVal = data.fillet.val;\r\n        let valList = data.fillet.valList;\r\n        this.bgRadius = 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  },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.userInfor {\r\n  padding: 14px 10px;\r\n  .list {\r\n    margin-top: 16px;\r\n    padding-top: 16px;\r\n    border-top: 1px solid #eee;\r\n    .item {\r\n      font-size: 13px;\r\n      color: #999;\r\n      .num {\r\n        font-size: 14px;\r\n        font-weight: 600;\r\n        color: #333333;\r\n        margin-left: 4px;\r\n      }\r\n    }\r\n  }\r\n  .right {\r\n    &.on {\r\n      .item {\r\n        color: #666666;\r\n      }\r\n    }\r\n    .item {\r\n      text-align: center;\r\n      font-weight: 400;\r\n      color: #999;\r\n      font-size: 11px;\r\n      margin-left: 16px;\r\n      .num {\r\n        font-size: 16px;\r\n        margin-bottom: 2px;\r\n        font-weight: 600;\r\n        color: #333333;\r\n      }\r\n    }\r\n    .iconfont {\r\n      font-weight: 400;\r\n      //color: #333333;\r\n      font-size: 15px;\r\n      margin-bottom: 2px;\r\n    }\r\n  }\r\n  .left {\r\n    .pictrue {\r\n      width: 45px;\r\n      height: 45px;\r\n      border-radius: 50%;\r\n      margin-right: 10px;\r\n      img {\r\n        border-radius: 50%;\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n      }\r\n      .empty-box {\r\n        border-radius: 50%;\r\n        background-color: #f3f9ff;\r\n        border: 1px solid #eeeeee;\r\n        .iconfont-diy {\r\n          font-size: 20px;\r\n        }\r\n        img {\r\n          width: 26px;\r\n          height: 20px;\r\n        }\r\n      }\r\n    }\r\n    .text {\r\n      font-weight: 400;\r\n      color: #333333;\r\n      font-size: 16px;\r\n      .name {\r\n        img {\r\n          width: 38px;\r\n          height: 16px;\r\n          margin-left: 5px;\r\n        }\r\n      }\r\n      .progress {\r\n        overflow: hidden;\r\n        background-color: #eeeeee;\r\n        width: 60px;\r\n        height: 7px;\r\n        border-radius: 3px;\r\n        position: relative;\r\n        .bgReds {\r\n          width: 80%;\r\n          height: 100%;\r\n          transition: width 0.6s ease;\r\n          border-radius: 3px;\r\n        }\r\n      }\r\n      .percent {\r\n        font-size: 10px;\r\n        margin-left: 4px;\r\n      }\r\n      .phone {\r\n        font-weight: 400;\r\n        //color: #333;\r\n        font-size: 10px;\r\n        margin-top: 3px;\r\n        .iconshouji {\r\n          margin-right: 2px;\r\n          font-size: 12px;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n"]}]}