{"version":3,"sources":["webpack:///./src/views/project/Civil.vue?b5de","webpack:///src/views/project/Civil.vue","webpack:///./src/views/project/Civil.vue?8870","webpack:///./src/views/project/Civil.vue","webpack:///./src/views/project/Civil.vue?423a"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_l","item","i","key","on","$event","lookDetail","directives","name","rawName","value","expression","attrs","_v","_s","title","total","currentPage","handelCurrentChange","goBack","detailData","imgUrl","describe","img1","names","img2","changeIndex","changeIndexBack","img3","img4","img5","staticRenderFns","data","datas","softwareDatas","softwareData","showTab","function","features","technicalParameters","exampleScenario","created","initData","methods","element","length","val","imgUrl1","imgUrl2","imgUrl3","imgUrl4","imgUrl5","name1","index","name2","name3","name4","name5","component"],"mappings":"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","file":"js/chunk-988d5062.64551c65.js","sourcesContent":["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',{directives:[{name:\"lazy\",rawName:\"v-lazy\",value:(item.imgUrl),expression:\"item.imgUrl\"}],attrs:{\"alt\":\"\"}})]),_c('p',[_vm._v(_vm._s(item.title))])])}),0),_c('el-pagination',{attrs:{\"background\":\"\",\"layout\":\"prev, pager, next\",\"page-size\":20,\"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:\"features\"},[_c('div',{staticClass:\"title\"},[_vm._v(\"工作内容\")]),_c('div',{staticClass:\"bottom\"},_vm._l((_vm.detailData.features),function(item,i){return _c('div',{key:i,staticClass:\"features-box\"},[_c('p',{staticClass:\"features-title\"},[_vm._v(_vm._s(item.title))]),_c('p',{staticClass:\"describe\"},[_vm._v(_vm._s(item.describe))])])}),0),_c('div',{staticClass:\"example-scenario\"},[_c('div',{staticClass:\"title\"},[_vm._v(\"场景实例\")]),_c('div',{staticClass:\"bottom\"},[_c('div',{staticClass:\"left\"},[_c('img',{attrs:{\"src\":_vm.img1,\"alt\":\"\"}}),_c('p',[_vm._v(_vm._s(_vm.names))])]),_c('div',{staticClass:\"right\"},[_c('img',{attrs:{\"src\":_vm.img2,\"alt\":\"\"},on:{\"mouseover\":function($event){return _vm.changeIndex(1)},\"mouseout\":function($event){return _vm.changeIndexBack(1)}}}),_c('img',{attrs:{\"src\":_vm.img3,\"alt\":\"\"},on:{\"mouseover\":function($event){return _vm.changeIndex(2)},\"mouseout\":function($event){return _vm.changeIndexBack(2)}}}),_c('img',{attrs:{\"src\":_vm.img4,\"alt\":\"\"},on:{\"mouseover\":function($event){return _vm.changeIndex(3)},\"mouseout\":function($event){return _vm.changeIndexBack(3)}}}),_c('img',{attrs:{\"src\":_vm.img5,\"alt\":\"\"},on:{\"mouseover\":function($event){return _vm.changeIndex(4)},\"mouseout\":function($event){return _vm.changeIndexBack(4)}}})])])])])],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 v-lazy=\"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=\"20\"\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=\"features\">\n        <div class=\"title\">工作内容</div>\n        <div class=\"bottom\">\n          <div class=\"features-box\"\n               v-for=\"(item,i) in detailData.features\"\n               :key=\"i\">\n            <p class=\"features-title\">{{item.title}}</p>\n            <p class=\"describe\">{{item.describe}}</p>\n          </div>\n        </div>\n        <!-- 场景实例 -->\n        <div class=\"example-scenario\">\n          <div class=\"title\">场景实例</div>\n          <div class=\"bottom\">\n            <div class=\"left\">\n              <!-- 实例图片 img1 -->\n              <img :src=\"img1\"\n                   alt=\"\">\n              <!-- 图片文字 -->\n              <p>{{names}}</p>\n            </div>\n            <div class=\"right\">\n              <img :src=\"img2\"\n                   alt=\"\" @mouseover=\"changeIndex(1)\"  @mouseout=\"changeIndexBack(1)\">\n              <img :src=\"img3\"\n                   alt=\"\" @mouseover=\"changeIndex(2)\"  @mouseout=\"changeIndexBack(2)\">\n              <img :src=\"img4\"\n                   alt=\"\" @mouseover=\"changeIndex(3)\"  @mouseout=\"changeIndexBack(3)\">\n              <img :src=\"img5\"\n                   alt=\"\" @mouseover=\"changeIndex(4)\"  @mouseout=\"changeIndexBack(4)\">\n            </div>\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      //  场景实例图片  5张\n      img1: '',\n      img2: '',\n      img3: '',\n      img4: '',\n      img5: '',\n      // 图片显示的文字\n      names: ''\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      this.img1 = this.detailData.exampleScenario.imgUrl1\n      this.img2 = this.detailData.exampleScenario.imgUrl2\n      this.img3 = this.detailData.exampleScenario.imgUrl3\n      this.img4 = this.detailData.exampleScenario.imgUrl4\n      this.img5 = this.detailData.exampleScenario.imgUrl5\n      this.names = this.detailData.names.name1\n    },\n    // 场景实例图片变化  鼠标移入\n    changeIndex (index) {\n      switch (index) {\n        case 1:\n          this.img1 = this.img2\n          this.names = this.detailData.names.name2\n          break\n        case 2:\n          this.img1 = this.img3\n          this.names = this.detailData.names.name3\n          break\n        case 3:\n          this.img1 = this.img4\n          this.names = this.detailData.names.name4\n          break\n        case 4:\n          this.img1 = this.img5\n          this.names = this.detailData.names.name5\n          break\n      }\n    },\n    // 场景实例图片变化  鼠标移出\n    changeIndexBack (index) {\n      switch (index) {\n        case 1:\n          this.img1 = this.detailData.exampleScenario.imgUrl1\n          this.names = this.detailData.names.name1\n          break\n        case 2:\n          this.img1 = this.detailData.exampleScenario.imgUrl1\n          this.names = this.detailData.names.name1\n          break\n        case 3:\n          this.img1 = this.detailData.exampleScenario.imgUrl1\n          this.names = this.detailData.names.name1\n          break\n        case 4:\n          this.img1 = this.detailData.exampleScenario.imgUrl1\n          this.names = this.detailData.names.name1\n          break\n      }\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      }\n      img {\n        // display: block;\n        // width: 100%;\n        // height: auto\n        display: inline-block;\n        height: 100%;\n        width: 100%;\n\n        // width: 150px;\n        // height: 200px;\n      }\n      p {\n        font-size: 14px;\n        margin: 5px 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: 400px;\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          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        }\n        .describe {\n          width: 240px;\n          margin: 0;\n          font-size: 14px;\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        position: relative;\n        text-align: center;\n        img {\n          width: 100%;\n          height: 100%;\n        }\n        p{\n          width: 100%;\n          height: 40px;\n          font-size: 14px;\n          color: #fff;\n          position: absolute;\n          background-color: #318bec;\n          line-height: 40px;\n          // display:inline-block;\n          bottom: 0;\n          margin: 0;\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!./Civil.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!./Civil.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Civil.vue?vue&type=template&id=02140d24&scoped=true&\"\nimport script from \"./Civil.vue?vue&type=script&lang=js&\"\nexport * from \"./Civil.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Civil.vue?vue&type=style&index=0&id=02140d24&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  \"02140d24\",\n  null\n  \n)\n\nexport default component.exports","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!./Civil.vue?vue&type=style&index=0&id=02140d24&lang=scss&scoped=true&\""],"sourceRoot":""}