{"version":3,"sources":["webpack:///./src/views/product/Network.vue?d833","webpack:///./src/views/product/Network.vue?1017","webpack:///src/views/product/Network.vue","webpack:///./src/views/product/Network.vue?f194","webpack:///./src/views/product/Network.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_l","item","i","key","on","$event","lookDetail","attrs","imgUrl","_v","_s","title","total","currentPage","handelCurrentChange","goBack","detailData","describe","staticRenderFns","data","datas","softwareDatas","softwareData","showTab","function","features","technicalParameters","exampleScenario","created","initData","methods","element","length","val","component"],"mappings":"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","file":"js/chunk-1ef90e21.a3ed14a6.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Network.vue?vue&type=style&index=0&id=443c1d13&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"qualification\"},[(_vm.showTab)?_c('div',{staticClass:\"tab-box\"},[_c('div',{staticClass:\"int-box\"},_vm._l((_vm.softwareData),function(item,i){return _c('div',{key:i,staticClass:\"img-and-title\",on:{\"click\":function($event){return _vm.lookDetail(item)}}},[_c('div',{staticClass:\"img-box\"},[_c('img',{attrs:{\"src\":item.imgUrl,\"alt\":\"\"}})]),_c('p',[_vm._v(_vm._s(item.title))])])}),0),_c('el-pagination',{attrs:{\"background\":\"\",\"layout\":\"prev, pager, next\",\"page-size\":8,\"total\":_vm.total,\"current-page\":_vm.currentPage},on:{\"current-change\":_vm.handelCurrentChange}})],1):_c('div',{staticClass:\"content-box\"},[_c('el-page-header',{on:{\"back\":_vm.goBack}}),_c('div',{staticClass:\"img-and-describe\"},[_c('div',{staticClass:\"left\"},[_c('img',{attrs:{\"src\":_vm.detailData.imgUrl,\"alt\":\"\"}})]),_c('div',{staticClass:\"right\"},[_c('p',{staticClass:\"title\"},[_vm._v(_vm._s(_vm.detailData.title))]),_c('p',{staticClass:\"describe\"},[_vm._v(_vm._s(_vm.detailData.describe))])])]),_c('div',{staticClass:\"function\"},[_c('div',{staticClass:\"title\"},[_vm._v(\"产品功能\")]),_c('div',{staticClass:\"bottom\"},_vm._l((_vm.detailData.function),function(item,i){return _c('div',{key:i,staticClass:\"function-box\"},[_c('div',{staticClass:\"left\"},[_c('img',{attrs:{\"src\":item.imgUrl,\"alt\":\"\"}}),_c('p',[_vm._v(\"0\"+_vm._s(i+1))])]),_c('p',{staticClass:\"describe\"},[_vm._v(_vm._s(item.describe))])])}),0)])],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n<!-- 网络 -->\n  <div class=\"qualification\">\n    <!-- tab页 -->\n    <div class=\"tab-box\"\n         v-if=\"showTab\">\n      <div class=\"int-box\">\n        <div class=\"img-and-title\"\n             v-for=\"(item, i) in softwareData\"\n             :key=\"i\"\n             @click=\"lookDetail(item)\">\n          <div class=\"img-box\">\n            <img :src=\"item.imgUrl\"\n                 alt=\"\" />\n          </div>\n          <p>{{ item.title }}</p>\n        </div>\n      </div>\n      <el-pagination background=\"\"\n                     layout=\"prev, pager, next\"\n                     :page-size=\"8\"\n                     :total=\"total\"\n                     :current-page=\"currentPage\"\n                     @current-change='handelCurrentChange'></el-pagination>\n    </div>\n    <!-- 详情页 -->\n    <div class=\"content-box\"\n         v-else>\n      <!-- 返回 -->\n      <el-page-header @back=\"goBack\">\n      </el-page-header>\n      <!-- 介绍 -->\n      <div class=\"img-and-describe\">\n        <div class=\"left\">\n          <img :src=\"detailData.imgUrl\"\n             alt=\"\">\n        </div>\n        <div class=\"right\">\n          <p class=\"title\">{{detailData.title}}</p>\n          <p class=\"describe\">{{detailData.describe}}</p>\n        </div>\n      </div>\n      <!-- 功能 -->\n      <div class=\"function\">\n        <div class=\"title\">产品功能</div>\n        <div class=\"bottom\">\n          <div class=\"function-box\"\n               v-for=\"(item,i) in detailData.function\"\n               :key=\"i\">\n            <div class=\"left\">\n              <img :src=\"item.imgUrl\"\n                   alt=\"\">\n              <!-- <div style=\"font-size:12px\" class=\"img-title\">{{item.imgTitle}}</div> -->\n              <p>0{{i+1}}</p>\n            </div>\n            <p class=\"describe\">{{item.describe}}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data () {\n    return {\n      // 引入数据\n      datas: require('../../assets/json/data'),\n      // 软件项目案例数据\n      softwareDatas: [],\n      // 当前要显示的数据\n      softwareData: [\n      ],\n      //   当前页码\n      currentPage: 1,\n      //   数据总数\n      total: 0,\n      //   是否显示tab页\n      showTab: true,\n      //   详情页面的数据\n      detailData: {\n        imgUrl: '',\n        title: '',\n        function: [\n          { imgUrl: '', imgTitle: '', describe: '' }],\n        features: [\n          { title: '', describe: '' }],\n        technicalParameters: [\n          { title: '', describe: '' }],\n        exampleScenario: { imgUrl1: '', imgUrl2: '', imgUrl3: '', imgUrl4: '', imgUrl5: '' }\n      }\n    }\n  },\n  created () {\n    this.initData()\n  },\n  methods: {\n    //   初始化数据\n    initData () {\n      this.softwareDatas = this.datas['产品中心']['网络']['项目案例数据']\n      for (let index = 0; index < this.softwareDatas.length; index++) {\n        const element = this.softwareDatas[index]\n        this.total = this.total + element.length\n      }\n      this.softwareData = this.softwareDatas[0]\n    },\n    //   当前页码改变时\n    handelCurrentChange (val) {\n      this.softwareData = this.softwareDatas[val - 1]\n    },\n    // 显示详情页\n    lookDetail (data) {\n      this.detailData = data\n      this.showTab = false\n    },\n    // 返回tab页\n    goBack () { this.showTab = true }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$blue: #308bec;\n.qualification {\n  width: 1200px;\n  background-color: #fff;\n  padding: 40px 0;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  .tab-box {\n    width: 100%;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n  .int-box {\n    width: 100%;\n    display: flex;\n    flex-wrap: wrap;\n    .img-and-title {\n      width: 280px;\n      height: 220px;\n      margin-right: 20px;\n      margin-top: 20px;\n      .img-box {\n        width: 280px;\n        height: 200px;\n        border: 1px solid #eee;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        overflow: hidden;\n      }\n      img {\n        // display: block;\n        // width: 100%;\n        // height: auto\n        display: inline-block;\n        height: auto;\n        max-width: 100%;\n\n        // width: 150px;\n        // height: 200px;\n      }\n      img:hover{\n        transform: scale(1.1);\n      }\n      p {\n        font-size: 14px;\n        margin: 10px 0;\n        text-align: center;\n      }\n    }\n  }\n  .el-pagination {\n    width: fit-content;\n    margin-top: 40px;\n  }\n  .el-page-header {\n    font-size: 20px;\n    margin-bottom: 100px;\n  }\n}\n.content-box {\n  width: 100%;\n  .img-and-describe {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    .left{\n       width: 570px;\n      height: 400px;\n      img {\n       display: inline-block;\n        height: auto;\n        max-width: 100%;\n      }\n    }\n    .right {\n      width: 600px;\n      .title {\n        font-size: 24px;\n        margin: 0;\n        margin-bottom: 20px;\n      }\n      .describe {\n        font-size: 14px;\n        line-height: 30px;\n      }\n    }\n  }\n  .function {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    margin-top: 100px;\n    .title {\n      width: fit-content;\n      padding: 0 10px;\n      text-align: center;\n      font-size: 24px;\n      border-left: 4px solid #f5a339;\n      margin-bottom: 60px;\n    }\n    .bottom {\n      width: 100%;\n      display: flex;\n      flex-wrap: wrap;\n      .function-box {\n        width: 300px;\n        // height: 80px;\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        justify-content: space-between;\n        margin: 0 48px 30px;\n        .left {\n          width: 48px;\n          height: 100%;\n          position: relative;\n          img {\n            width: 48px;\n            height: 48px;\n          }\n          .img-title {\n            width: 100%;\n            text-align: center;\n            color: $blue;\n            font-size: 16px;\n          }\n           p{\n            font-size: 18px;\n            color: #fff;\n            position: absolute;\n            top: -6px;\n            left: 30%;\n          }\n        }\n        .describe {\n          width: 240px;\n          margin: 0 auto;\n          font-size: 14px;\n          padding-left: 12px;\n        }\n      }\n    }\n  }\n  .features {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    margin-top: 100px;\n    .title {\n      width: fit-content;\n      padding: 0 10px;\n      text-align: center;\n      font-size: 24px;\n      border-left: 4px solid #f5a339;\n      margin-bottom: 60px;\n    }\n    .bottom {\n      width: 100%;\n      display: flex;\n      flex-wrap: wrap;\n      .features-box {\n        width: 550px;\n        height: auto;\n        padding: 0 20px;\n        background-color: #e6e6e6;\n        margin: 5px;\n        .features-title {\n          color: $blue;\n          font-size: 16px;\n        }\n        .describe {\n          font-size: 14px;\n          margin: 10px 0;\n        }\n      }\n    }\n  }\n  .technical-parameters {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    margin-top: 100px;\n    .title {\n      width: fit-content;\n      padding: 0 10px;\n      text-align: center;\n      font-size: 24px;\n      border-left: 4px solid #f5a339;\n      margin-bottom: 60px;\n    }\n    .bottom {\n      width: 100%;\n      display: flex;\n      flex-wrap: wrap;\n      .technical-box {\n        width: 100%;\n        display: flex;\n        flex-wrap: wrap;\n        p {\n          font-size: 14px;\n          margin: 0;\n        }\n        .features-title {\n          width: 480px;\n          border: 1px solid #eee;\n          padding: 10px;\n          // justify-content: center;\n          text-align: center;\n          color: $blue;\n        }\n        .describe {\n          width: 670px;\n          border: 1px solid #eee;\n          padding: 10px;\n          text-align: center;\n          color: #666;\n        }\n      }\n    }\n  }\n  .example-scenario {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    margin-top: 100px;\n    .title {\n      width: fit-content;\n      padding: 0 10px;\n      text-align: center;\n      font-size: 24px;\n      border-left: 4px solid #f5a339;\n      margin-bottom: 60px;\n    }\n    .bottom {\n      width: 100%;\n      display: flex;\n      flex-wrap: wrap;\n      img {\n        box-sizing: border-box;\n        &:hover {\n          border: 1px solid $blue;\n        }\n      }\n      .left {\n        width: 600px;\n        height: 400px;\n        img {\n          width: 100%;\n          height: 100%;\n        }\n      }\n      .right {\n        width: 600px;\n        height: 400px;\n        display: flex;\n        flex-wrap: wrap;\n        img {\n          width: 50%;\n          height: 50%;\n        }\n      }\n    }\n  }\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Network.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Network.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Network.vue?vue&type=template&id=443c1d13&scoped=true&\"\nimport script from \"./Network.vue?vue&type=script&lang=js&\"\nexport * from \"./Network.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Network.vue?vue&type=style&index=0&id=443c1d13&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"443c1d13\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}