修改了数智开发的pdf展示

src/views/Develop/Develop.vue

@@ -77,7 +77,7 @@
     <div class="dev-img-box d-flex flex-wrap" style="width: 68%; margin: 40px auto !important">
       <div
         :key="index"
-        @click="showProfile = true"
+        @click="showPDF(index)"
         class="d-flex pic-box"
         style="width: 22.5%; margin: 20px auto"
         v-for="(item, index) in lists"
@@ -87,28 +87,14 @@
           <h2 class="white--text">{{ item.title }}</h2>
           <div class="pt-2">{{ item.txt }}</div>
         </div>
+        <a-modal :footer="null" :visible="showProfile" @cancel="handleCancel" @ok="handleCancel" title="项目介绍" width="65%">
+          <iframe style="width:100%;height:650px" :src="lists[pdfIndex].pdfUrl" frameborder="0"></iframe>
+          <!-- <div>{{ lists[pdfIndex].pdfUrl}}</div> -->
+        </a-modal>
       </div>
     </div>
 
-    <a-modal :footer="null" :visible="showProfile" @cancel="handleCancel" @ok="handleCancel" title="XX项目介绍" width="50%">
+   
-      <p class="line-height-30">
-        公司采取理事会、经理层、事业部组织架构，公司理事会组成按理事会章程执行，经理层设总经理 1 名、副总经理 2-3 名，各事业部设部长 1
-        名、副部长 1 名。
-        公司以协同创新中心为引擎、以创业孵化平台为基石、以产业集聚发展为导向，基于创新链、孵化链和产业链进行整体布局，下设行政事业部、创新事业部、孵化事业部和产业事业部。
-        （一）行政事业部。统筹行政办公、人力资源、财务管理、公共关系和数字平台建设等工作；组织编制发展战略和 年度计划;组织开展绩效考评;
-        协同推进创新、孵化和产业事 业部联合协作及全链条一体化融通发展。
-        （二）创新事业部。负责功能食品与生物医药协同创新中心的建设和运营，集聚整合股东及外部优势创新资源，着力打造产学研用协同、多学科交叉融合、
-        覆盖全创新链的开放式协同创新平台，搭建专业化科技资源开放共享服务平台和技术转移转化平台，面向入孵企业及外部企业需求，组织开展技术研发、
-        技术转化、技术咨询、技术评估、技术培训、检验检测等一站式创新服务。
-        （三）孵化事业部。负责功能食品与生物医药专业化众创空间的建设和运营，构建众创空间一孵化器一加速器-产业园专业化创新创业孵化链，
-        打造以公共研发与检验检测平台为支撑、以创新创业增值服务为主导、以创新创业学院(大讲堂)为带动、以创新创业投融资为拓展，线上线下相结合、
-        实体虚拟相融合的全要素专业化开放式创新创业孵化平台，促进技术转移转化和科技型中小微企业集聚发展。
-        （四）产业事业部。负责产业发展、市场开发和产业技术创新战略联盟的建设与运营，基于协同创新中心和专业化众创空间，发挥股东场所、
-        技术、资本、市场、渠道和产业化优势，推动政产学研金介用合作，组织举办技术创新论坛，
-        构建专业化、集群化、园区化产业发展布局，培育发展衍生企业， 拓展发展领域和空间，打造产业园区和特色产业基地，
-        推动大中小企业融通、产业集群化园区化发展。
-      </p>
-    </a-modal>
   </div>
 </template>
 
@@ -120,26 +106,31 @@ export default {
   components: { AddModel },
   data() {
     return {
+      pdfIndex: 0,
       lists: [
         {
           url: 'https://www.sxwikionline.com/gateway/wiki/uploads/upload/20210317/c9b3ba008caf4ad7b8cbd7f5df639fa5.jpg',
           txt: '打造统筹管理事和时间的轻量级老板工具',
           title: 'PT pro老板工具',
+          pdfUrl: 'https://www.sxwikionline.com/gateway/wiki/uploads/pdf/pt.pdf',
         },
         {
           url: 'https://www.sxwikionline.com/gateway/wiki/uploads/upload/20210317/dd75f29ec2be42f1afd98a28bd413bf9.jpg',
           txt: '采集设备参数，配合智能匹配算法，动态调节设备配置，挖掘机器的最大潜能。',
           title: '智能选矿',
+          pdfUrl: 'https://www.sxwikionline.com/gateway/wiki/uploads/pdf/wis.pdf',
         },
         {
           url: 'https://www.sxwikionline.com/gateway/wiki/uploads/upload/20210317/d4c1e23596ee4dbab5bf267b9b801b1c.jpg',
           txt: '自动无干扰地记录急救流程各时间节点，最大限度降低记录工作对急救过程产生干扰和延误，达到实时监控抢救流程',
           title: '智慧胸痛卒中中心绿道管理平台',
+          pdfUrl: 'https://www.sxwikionline.com/gateway/wiki/uploads/pdf/ht.pdf',
         },
         {
           url: 'https://www.sxwikionline.com/gateway/wiki/uploads/upload/20210317/00084b3a1ebe495983a4ebc7602b456a.jpg',
           txt: '应用于数字医疗行业的测评平台，可满足各类线上、线下认知测评功能',
           title: '认知评测云平台HT pro',
+          pdfUrl: 'https://www.sxwikionline.com/gateway/wiki/uploads/pdf/be.pdf',
         },
       ],
       showProfile: false,
@@ -149,6 +140,10 @@ export default {
     handleCancel() {
       this.showProfile = false;
     },
+    showPDF(index){
+      this.showProfile = true
+      this.pdfIndex = index
+    }
   },
 };
 </script>