sfel联调

src/const/modules.js

@@ -4546,65 +4546,94 @@ export default {
       ]
     },
     {
-      type: 'columns',
+      type: 'form',
+      forms: [
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'input',
+          prop: 'subTitle',
+          label: '小标题'
+        }
+      ],
       form: {
-        columnName: '',
-        site: '',
-        column: '',
-        articleNum: '',
-        columnTitle: 1,
-        columnTitleCustom: ''
+        title: '新闻动态',
+        subTitle: 'NEWS CENTER'
+      }
     },
-      list: [
     {
-          columnName: 'General news',
+      type: 'column',
+      form: {
         site: '',
         column: '',
         articleNum: '',
         columnTitle: 1,
         columnTitleCustom: ''
+      }
     },
     {
-          columnName: 'Research news',
-          site: '',
-          column: '',
-          articleNum: '',
-          columnTitle: 1,
-          columnTitleCustom: ''
+      type: 'form',
+      forms: [
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
         },
         {
-          columnName: 'General news',
-          site: '',
-          column: '',
-          articleNum: '',
-          columnTitle: 1,
-          columnTitleCustom: ''
+          type: 'input',
+          prop: 'subTitle',
+          label: '小标题'
+        }
+      ],
+      form: {
+        title: '通知公告',
+        subTitle: ' ANNOUNCEMENTS'
+      }
     },
     {
-          columnName: 'General news',
+      type: 'column',
+      form: {
         site: '',
         column: '',
         articleNum: '',
         columnTitle: 1,
         columnTitleCustom: ''
+      }
     },
     {
-          columnName: 'Research news',
-          site: '',
-          column: '',
-          articleNum: '',
-          columnTitle: 1,
-          columnTitleCustom: ''
+      type: 'form',
+      forms: [
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
         },
         {
-          columnName: 'Journal covers',
+          type: 'input',
+          prop: 'subTitle',
+          label: '小标题'
+        }
+      ],
+      form: {
+        title: '学术活动',
+        subTitle: ' ACADEMIC ACTIVITIES'
+      }
+    },
+    {
+      type: 'column',
+      form: {
         site: '',
         column: '',
         articleNum: '',
         columnTitle: 1,
         columnTitleCustom: ''
-        },
-      ]
+      }
     },
     {
       type: 'form',
@@ -4616,14 +4645,14 @@ export default {
           required: true
         },
         {
-          type: 'textarea',
-          prop: 'des',
-          label: '概述'
+          type: 'input',
+          prop: 'subTitle',
+          label: '小标题'
         }
       ],
       form: {
-        title: 'Seminars & Workshops',
-        des: 'What makes a ligh chinese bay chaser'
+        title: '媒体采风',
+        subTitle: ' MEDIA COVERAGE'
       }
     },
     {
@@ -4645,15 +4674,134 @@ export default {
           label: '标题',
           required: true
         },
+        {
+          type: 'input',
+          prop: 'subTitle',
+          label: '小标题'
+        }
+      ],
+      form: {
+        title: '出版物',
+        subTitle: ' PUBLICATIONS'
+      }
+    },
+    {
+      type: 'forms',
+      forms: [
+        {
+          type: 'upload',
+          prop: 'pic',
+          label: '图片',
+          required: true
+        },
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'link',
+          prop: 'link',
+          label: '链接'
+        },
         {
           type: 'textarea',
           prop: 'des',
-          label: '概述'
+          label: '描述'
         }
       ],
       form: {
-        title: 'Conference',
-        des: 'What makes a ligh chinese bay chaser'
+        pic: '',
+        title: '',
+        link: {
+          linkName: '无',
+          connectionType: 1,
+          columnId: [],
+          articleId: '',
+          linkAddress	: '',
+          site: '',
+          otherColumnId: [],
+          otherArticleId: '',
+          isOpen: 1
+        },
+        des: ''
+      },
+      list: [
+        {
+          pic: 'http://10.10.11.7/images/research/12.png',
+          title: '这里是标题一句话标题',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+          des: 'Online single-shot characterization of ultrafast pulses from high-gain free-electron lasers, Li Zeng，Chao Feng，Duan Gu，Xiaofan Wang，Kaiqing Zhang，Bo Liu，Zhentang Zhao，Fundamental Research',
+        },
+        {
+          pic: 'http://10.10.11.7/images/research/13.png',
+          title: '这里是标题一句话标题',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+          des: `产生超快水窗波段X射线的ESASE方案模拟
+          涂凌君 ，冯超 ，王晓凡 ， 赵振堂 ，
+          强激光与粒子束, 
+          2022, 34(3):031019
+          `,
+        },
+        {
+          pic: 'http://10.10.11.7/images/research/14.png',
+          title: '这里是标题一句话标题',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+          des: `多层膜元件热应力分析方法、系统和终端设备，申请(专利)号：CN202111530134.0，
+          申请日：2021-12-14，申请公布号：CN114239355A，申请人：深圳综合粒子设施研究院，发明人：徐中民
+          `
+        },
+      ]
+    },
+    {
+      type: 'form',
+      forms: [
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'input',
+          prop: 'subTitle',
+          label: '小标题'
+        }
+      ],
+      form: {
+        title: '工程进展',
+        subTitle: 'PRROJECT PROGRESS'
       }
     },
     {
@@ -4662,7 +4810,6 @@ export default {
         site: '',
         column: '',
         articleNum: '',
-        articleNumOpt: 8,
         columnTitle: 1,
         columnTitleCustom: ''
       }

src/pages/column/page/sfel.vue

@@ -23,38 +23,52 @@
       </div>
 
       <div class="block banner-block">
-        <div class="inner" v-if="modules[1].list[curColumn].articles.length">
+        <div class="inner">
           <div class="title">
             <h5>
-              新闻动态
-              <span class="sub"> NEWS CENTER</span>
+              {{ modules[1].form.title }}
+              <span class="sub">{{ modules[1].form.subTitle }}</span>
             </h5>
             <span class="more">MORE</span>
+            <div class="cover" @click="toSet(1)">点击更换标题与小标题</div>
           </div>
-          <div class="banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[1].list[curColumn])">
-            <img width="50%" height="410" :src="curArticle.titleImg" alt="">
+          <div class="c-wrap">
+            <div class="banner">
+              <img width="100%" height="480" src="http://10.10.11.7/images/about/5.png" alt="">
               <div class="right">
-              <h6>{{ curArticle.title }}</h6>
-              <div class="des" v-html="curArticle.mainBody"></div>
-              <p class="meta">{{ curArticle.createTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p>
-              <ul class="inds">
-                <li v-for="i in 3" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
-              </ul>
+                <h6>IASF is driven to serve the Science and industry, and solve grand challenges through research and innovation. We are open and creative</h6>
+                <div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan. And the Guangdong-Hong Kong-Macao Greater Bay </div>
+                <p class="meta">2022-07-24 | Research</p>
               </div>
             </div>
-          
             <ul class="card">
-            <template v-for="(item, i) in modules[1].list[curColumn].articles">
-              <li v-if="i > 2" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
-                <img class="pic" :src="item.titleImg" alt="">
+              <li>
+                <img class="pic" src="http://10.10.11.7/images/about/9.png" alt="">
                 <div class="texts">
-                  <p class="meta">{{ item.createTime }} {{ item.author && ' | ' + item.author }}</p>
-                  <div class="des">{{ item.title }}</div>
-                  <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[1].list[curColumn])">
+                  <p class="meta">2022-09-09 | Research</p>
+                  <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
+                  <img class="arrow" src="@/assets/images/arrow.png" alt="">
+                </div>
+              </li>
+              <li>
+                <img class="pic" src="http://10.10.11.7/images/about/10.png" alt="">
+                <div class="texts">
+                  <p class="meta">2022-09-09 | Research</p>
+                  <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
+                  <img class="arrow" src="@/assets/images/arrow.png" alt="">
+                </div>
+              </li>
+              <li>
+                <img class="pic" src="http://10.10.11.7/images/about/11.png" alt="">
+                <div class="texts">
+                  <p class="meta">2022-09-09 | Research</p>
+                  <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
+                  <img class="arrow" src="@/assets/images/arrow.png" alt="">
                 </div>
               </li>
-            </template>
             </ul>
+            <div class="cover" @click="toSet(2)">关联栏目</div>
+          </div>
         </div>
       </div>
 
@@ -62,13 +76,14 @@
         <div class="inner lg">
           <div class="title">
             <h5>
-              通知公告
-              <span class="sub"> ANNOUNCEMENTS</span>
+              {{ modules[3].form.title }}
+              <span class="sub">{{ modules[3].form.subTitle }}</span>
             </h5>
             <span class="more">MORE</span>
+            <div class="cover" @click="toSet(3)">点击更换标题与小标题</div>
           </div>
-          <div class="shop-shows" v-if="articles.length">
-            <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles[0], modules[3].form)">
+          <div class="shop-shows c-wrap">
+            <div class="left wow fadeInLeft" data-wow-delay="0.5s">
               <el-carousel height="432px">
                 <el-carousel-item>
                   <div class="item">
@@ -107,21 +122,34 @@
             </div>
             <div class="right wow fadeInRight" data-wow-delay="0.5s">
               <ul class="card-list">
-                <template v-for="(item, i) in articles">
-                  <li v-if="i > 2" :key="i">
-                    <img class="pic" :src="item.titleImg" alt="">
+                <li>
+                  <img class="pic" src="http://10.10.11.7/images/about/9.png" alt="">
                   <div class="texts">
-                      <h6>{{ item.title }}</h6>
-                      <div class="des" v-html="item.mainBody"></div>
+                    <h6>喜讯！储存环三次谐波腔的带束实验验证及超导高频频腔</h6>
+                    <div class="des">1月20日上午，光明区总工会组织的“关爱职工·情暖光明”春节工会关爱活动走进深圳综合粒子设施研究院，为奋战在综合性…</div>
+                  </div>
+                </li>
+                <li>
+                  <img class="pic" src="http://10.10.11.7/images/about/9.png" alt="">
+                  <div class="texts">
+                    <h6>光明区总工会为一线科研人员送上新春祝福</h6>
+                    <div class="des">1月11日上午，深圳综合粒子设施研究院与深圳大学签署战略合作框架协议。深圳大学党委书记、校长李清泉深圳综合粒子设施研究院与深圳大学党委…</div>
+                  </div>
+                </li>
+                <li>
+                  <img class="pic" src="http://10.10.11.7/images/about/9.png" alt="">
+                  <div class="texts">
+                    <h6>深圳综合粒子设施研究院与中国科学院</h6>
+                    <div class="des">1月20日上午，光明区总工会组织的“关爱职工·情暖光明”春节工会关爱活动走进深圳综合粒子设施研究院，为奋战在综合性…</div>
                   </div>
                 </li>
-                </template>
               </ul>
               <div class="slide">
                 <img src="@/assets/images/survey3.png" alt="">
                 <p class="text">深圳综合粒子设施研究院与中国科学院</p>
               </div>
             </div>
+            <div class="cover" @click="toSet(4)">关联栏目</div>
           </div>
         </div>
       </div>
@@ -130,39 +158,77 @@
         <div class="inner lg">
           <div class="title">
             <h5>
-              学术活动
-              <span class="sub"> ACADEMIC ACTIVITIES</span>
+              {{ modules[5].form.title }}
+              <span class="sub">{{ modules[5].form.subTitle }}</span>
             </h5>
             <span class="more">MORE</span>
+            <div class="cover" @click="toSet(5)">点击更换标题与小标题</div>
           </div>
-          <div class="shows" v-if="articles1.length">
-            <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles1[0], modules[5].form)">
-              <img width="100%" height="100%" :src="articles1[0].titleImg" alt="">
+          <div class="shows c-wrap">
+            <div class="left">
+              <img width="100%" height="100%" src="http://10.10.11.7/images/about/9.png" alt="">
               <div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div>
             </div>
-            <ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
-              <template v-for="(item, i) in articles1">
-                <li v-if="i" :key="i" @click="toArtice(item, modules[5].form)">
-                  <img class="pic" :src="item.titleImg" alt="">
+            <ul class="card-list">
+              <li>
+                <img class="pic" src="http://10.10.11.7/images/about/10.png" alt="">
                 <div class="texts">
-                    <h6>{{ item.title }}</h6>
+                  <h6>专业技术培训 | 自由电子激光装置中的结构</h6>
                   <p class="sum">加速器总体-直线加速器总体-高重频电子枪组…</p>
-                    <p v-if="item.keynoteSpeaker" class="text">
+                  <p class="text">
                     <img class="icon" src="@/assets/images/mine.png" alt="">
-                      {{ item.keynoteSpeaker }}
+                    邵佳航
                   </p>
-                    <p v-if="item.activityStartTime" class="text">
+                  <p class="text">
                     <img class="icon" src="@/assets/images/time.png" alt="">
-                      Time: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
+                    会议时间: 2022年8月13日 14:30
                   </p>
-                    <p v-if="item.onlineLocation" class="text">
+                  <p class="text">
                     <img class="icon" src="@/assets/images/online.png" alt="">
-                      Address: {{ item.onlineLocation }}
+                    总部四楼大会议室
+                  </p>
+                </div>
+              </li>
+              <li>
+                <img class="pic" src="http://10.10.11.7/images/about/10.png" alt="">
+                <div class="texts">
+                  <h6>专业技术培训 | 自由电子激光装置中的结构</h6>
+                  <p class="sum">加速器总体-直线加速器总体-高重频电子枪组…</p>
+                  <p class="text">
+                    <img class="icon" src="@/assets/images/mine.png" alt="">
+                    邵佳航
+                  </p>
+                  <p class="text">
+                    <img class="icon" src="@/assets/images/time.png" alt="">
+                    会议时间: 2022年8月13日 14:30
+                  </p>
+                  <p class="text">
+                    <img class="icon" src="@/assets/images/online.png" alt="">
+                    总部四楼大会议室
+                  </p>
+                </div>
+              </li>
+              <li>
+                <img class="pic" src="http://10.10.11.7/images/about/10.png" alt="">
+                <div class="texts">
+                  <h6>专业技术培训 | 自由电子激光装置中的结构</h6>
+                  <p class="sum">加速器总体-直线加速器总体-高重频电子枪组…</p>
+                  <p class="text">
+                    <img class="icon" src="@/assets/images/mine.png" alt="">
+                    邵佳航
+                  </p>
+                  <p class="text">
+                    <img class="icon" src="@/assets/images/time.png" alt="">
+                    会议时间: 2022年8月13日 14:30
+                  </p>
+                  <p class="text">
+                    <img class="icon" src="@/assets/images/online.png" alt="">
+                    总部四楼大会议室
                   </p>
                 </div>
               </li>
-              </template>
             </ul>
+            <div class="cover" @click="toSet(6)">关联栏目</div>
           </div>
         </div>
       </div>
@@ -171,20 +237,21 @@
         <div class="inner">
           <div class="title">
             <h5>
-              媒体采风
-              <span class="sub"> MEDIA COVERAGE</span>
+              {{ modules[7].form.title }}
+              <span class="sub">{{ modules[7].form.subTitle }}</span>
             </h5>
             <span class="more">MORE</span>
+            <div class="cover" @click="toSet(7)">点击更换标题与小标题</div>
           </div>
-          <div class="media-wrap">
+          <div class="media-wrap c-wrap">
             <div class="left">
               <div class="slides">
                 <div class="item wow fadeInLeft" data-wow-delay="0.5s" style="margin-right: 20px">
-                  <img width="100%" height="100%" :src="articles1[0].titleImg" alt="">
+                  <img width="100%" height="100%" src="http://10.10.11.7/images/about/9.png" alt="">
                   <div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div>
                 </div>
                 <div class="item wow fadeInLeft" data-wow-delay="0.5s">
-                  <img width="100%" height="100%" :src="articles1[0].titleImg" alt="">
+                  <img width="100%" height="100%" src="http://10.10.11.7/images/about/9.png" alt="">
                   <div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div>
                 </div>
               </div>
@@ -210,6 +277,7 @@
                 <div class="des">把一个基因切成两段，分别翻译成两段蛋白片段，还会有原来的功能吗？实多数蛋白片段会…</div>
               </div>
             </div>
+            <div class="cover" @click="toSet(8)">关联栏目</div>
           </div>
         </div>
       </div>
@@ -218,32 +286,36 @@
         <div class="inner">
           <div class="title">
             <h5>
-              出版物
-              <span class="sub"> PUBLICATIONS</span>
+              {{ modules[9].form.title }}
+              <span class="sub">{{ modules[9].form.subTitle }}</span>
             </h5>
             <span class="more">MORE</span>
+            <div class="cover" @click="toSet(9)">点击更换标题与小标题</div>
           </div>
           <ul class="news">
-            <!-- <li v-for="(item, i) in modules[6].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
+            <li v-for="(item, i) in modules[10].list" :key="i">
               <img :src="item.pic" alt="">
               <div class="texts">
                 <h6>{{ item.title }}</h6>
                 <div class="des">{{ item.des }}</div>
               </div>
-            </li> -->
+              <div class="cover" @click="toSet(10, i)">点击更改图片、标题概述与链接</div>
+            </li>
           </ul>
         </div>
       </div>
       
       <div class="block program">
-        <div class="inner">
+        <div class="inner c-wrap">
           <div class="title">
             <h5>
-              工程进展
-              <span class="sub">PRROJECT PROGRESS</span>
+              {{ modules[11].form.title }}
+              <span class="sub">{{ modules[11].form.subTitle }}</span>
             </h5>
             <span class="more">MORE</span>
+            <div class="cover" @click="toSet(11)">点击更换标题与小标题</div>
           </div>
+          <div class="c-wrap">
             <div class="slide">
               <div class="texts">
                 <h6>超快自由电子激光脉冲特性诊断研究方面取得重要进展</h6>
@@ -266,18 +338,13 @@
                 <p class="date">2022.10.10</p>
               </li>
             </ul>
+            <div class="cover" @click="toSet(12)">关联栏目</div>
           </div>
         </div>
       </div>
-
-    <div class="tools">
-      <div class="logo">
-        <img src="@/assets/images/logo.png" alt="">
-      </div>
-      <ul class="nav">
-        <li v-for="(item, i) in columns" :key="i" class="column">{{ item.columnName }}</li>
-      </ul>
     </div>
+
+    <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
   </div>
 </template>
 
@@ -319,6 +386,7 @@ export default {
 <style lang="scss" scoped>
 @import "../../../styles/page/page.scss";
 .title {
+  position: relative;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
@@ -357,7 +425,7 @@ export default {
   }
 }
 .banner-block {
-  background: url(../../assets/images/sfel/2.png) 0 0/cover no-repeat;
+  background: url(../../../assets/images/sfel/2.png) 0 0/cover no-repeat;
 }
 .banner {
   display: flex;
@@ -456,7 +524,7 @@ export default {
 }
 
 .notice {
-  background: url(../../assets/images/sfel/3.png) 0 0/cover no-repeat;
+  background: url(../../../assets/images/sfel/3.png) 0 0/cover no-repeat;
 }
 .shop-shows {
   display: flex;
@@ -576,7 +644,7 @@ export default {
   }
 }
 .conference {
-  background: url(../../assets/images/sfel/4.png) 0 0/cover no-repeat;
+  background: url(../../../assets/images/sfel/4.png) 0 0/cover no-repeat;
   .shows {
     display: flex;
   }
@@ -727,8 +795,8 @@ export default {
   }
 }
 .news {
-  background: url(../../assets/images/sfel/5.png) (0 504px)/auto no-repeat,
-              url(../../assets/images/sfel/6.png) (bottom right)/auto no-repeat;
+  background: url(../../../assets/images/sfel/5.png) (0 504px)/auto no-repeat,
+              url(../../../assets/images/sfel/6.png) (bottom right)/auto no-repeat;
   .inner {
     width: 1400px;
   }
@@ -812,13 +880,13 @@ export default {
       width: calc((100% - 44px) / 3);
       padding: 36px 22px;
       margin-right: 14px;
-      background: url(../../assets/images/sfel/7.png) 0 0/cover no-repeat;
+      background: url(../../../assets/images/sfel/7.png) 0 0/cover no-repeat;
       &:nth-child(2) {
-        background-image: url(../../assets/images/sfel/8.png);
+        background-image: url(../../../assets/images/sfel/8.png);
       }
       &:nth-child(3) {
         margin-right: 0;
-        background-image: url(../../assets/images/sfel/9.png);
+        background-image: url(../../../assets/images/sfel/9.png);
       }
     }
     .des {

src/router/modules/column.js

@@ -108,6 +108,12 @@ export default {
       path: `survey`,
       component: () => import('@/pages/column/page/survey'),
       meta: { title: '概况' }
+    },
+    {
+      name: `${pre}sfel`,
+      path: `sfel`,
+      component: () => import('@/pages/column/page/sfel'),
+      meta: { title: 'SFEL' }
     }
   ]
 }