newsPress、careers

src/components/modules/module.vue

@@ -262,6 +262,7 @@ export default {
     },
     // 编辑内容
     editIntro(row, i = 0) {
+      this.data.form = JSON.parse(JSON.stringify(row))
       this.curModule = i
       this.contentVisible = true
     },

src/const/column.js

@@ -79,6 +79,21 @@ export default {
       id: 3,
       path: 'careers',
       name: 'CAREERS'
+    },
+    {
+      id: 4,
+      path: 'edu',
+      name: 'EDUCATION & COLLABORATION'
+    },
+    {
+      id: 5,
+      path: 'news',
+      name: 'NEWS&Events'
+    },
+    {
+      id: 6,
+      path: 'newsPress',
+      name: 'NEWS&Events-press room'
     }
   ],
 }

src/mixins/page/index.js

@@ -1,13 +1,15 @@
 import Module from '@/components/modules/module'
 import Setting from '@/setting'
 import Util from '@/libs/util'
+import ColumnConst from '@/const/column'
 export default {
   data() {
     return {
       userId: +this.$store.state.user.userId,
       site: this.$store.state.content.site,
-      id: '',
       columnId: +this.$route.query.id,
+      listStyleId: +this.$route.query.listStyleId,
+      id: '',
       diaVisible: false,
       curModule: 0,
       curData: {},
@@ -26,11 +28,23 @@ export default {
         const { type } = e
         // 克隆一个原始row，方便添加
         if (type === 'banner' || type === 'introduce') {
-          const data = JSON.parse(JSON.stringify(e.list[0]))
+          const data = JSON.parse(JSON.stringify(e.form || e.list[0]))
-          data.pic = ''
+          for (const i in data) {
+            if (typeof data[i] === 'string') data[i] = ''
+          }
           e.originForm = data
         }
+
+        // 克隆一个空值的form
+        // if (e.form) {
+        //   const form = JSON.parse(JSON.stringify(e.form))
+        //   for (const i in form) {
+        //     if (typeof e.form[i] !== 'object') form[i] = ''
+        //   }
+        //   e.originForm = form
+        // }
       })
+      console.log("🚀 ~ file: index.js ~ line 36 ~ getInfo ~ originForm", this.modules)
 
       // 查询页面详情
       this.$post(`${this.api.findPage}?columnId=${this.columnId}`).then(({ data }) => {
@@ -51,14 +65,9 @@ export default {
     moduleSubmit() {
       this.diaVisible = false
       this.modules[this.curModule] = this.curData
-      console.log("🚀 ~ file: index.vue ~ line 520 ~ moduleSubmit ~ this.modules[this.curModule]", this.modules[this.curModule])
     },
     // 处理预览和保存的json
     handleJson() {
-      // const list = JSON.parse(JSON.stringify(this.modules))
-      // list.map(e => {
-      //   if (e.type === 'form') delete e.forms
-      // })
       return JSON.stringify(this.modules)
     },
     // 预览
@@ -66,8 +75,9 @@ export default {
       this.$post(this.api.saveRedisPage, {
         columnId: this.columnId,
         json: this.handleJson()
-      }).then(({ data }) => {
+      }).then(res => {
-        
+        const item = ColumnConst.pageStyle.find(e => e.id == this.listStyleId)
+        window.open((Setting.isDev ? `http://${location.hostname}:8095` : 'http://192.168.31.136') + `/#/${item ? item.path : 'home'}?id=${this.columnId}&preview=1`)
       }).catch(err => {})
     },
     // 保存

src/pages/column/add/index.vue

@@ -664,6 +664,7 @@ $upload-lg-height: 102px;
 .styles {
   display: inline-flex;
   li {
+    width: 170px;
     margin-right: 20px;
     text-align: center;
     cursor: pointer;
@@ -684,6 +685,9 @@ $upload-lg-height: 102px;
       width: 50px;
     }
   }
+    .el-radio {
+      white-space: normal;
+    }
 }
 /deep/.input-form .auto .el-input {
   width: 119px;

src/pages/column/list/index.vue

@@ -281,7 +281,7 @@ export default {
       // 页面管理
       page(row) {
         const item = ColumnConst.pageStyle.find(e => e.id == row.listStyleId)
-        this.$router.push(`${item ? item.path : 'home'}?id=${row.id}`)
+        this.$router.push(`${item ? item.path : 'home'}?id=${row.id}&listStyleId=${row.listStyleId}`)
       },
       // 批量删除
       batchDel() {

src/pages/column/page/about.vue

@@ -20,14 +20,12 @@
     
     <div class="block history gray">
       <div class="inner c-wrap">
-        <h2 style="margin-left: 57px">{{ modules[1].form.title || 'Our History' }}</h2>
+        <h2 style="margin-left: 57px">{{ modules[1].form.title }}</h2>
         <div class="texts">
           <div class="left">
-            <h2>{{ modules[1].form.subTitle || 'Throughout the world, most of the top science and technology innovation centers are distributed' }}</h2>
+            <h2>{{ modules[1].form.subTitle }}</h2>
             <div class="line"></div>
-            <div class="des">{{ modules[1].form.des || `Greater Bay area is the most economically developed China. Therefore, in 2019, the Chinese central government proposed to build this region an international science ion cente.
+            <div class="des">{{ modules[1].form.des }}</div>
-
-              As one of the core cities in the bay area, with the convenient transportation infrastructure.` }}</div>
           </div>
           <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
         </div>
@@ -38,28 +36,28 @@
     <div class="block">
       <div class="inner">
         <div class="c-wrap">
-          <h2 class="b-title">{{ modules[2].form.title || 'Our Values' }}</h2>
+          <h2 class="b-title">{{ modules[2].form.title }}</h2>
-          <p class="intro">{{ modules[2].form.des || 'What makes a light chaser' }}</p>
+          <p class="intro">{{ modules[2].form.des }}</p>
           <div class="cover" @click="toSet(2)">点击更换标题与描述</div>
         </div>
         <ul class="card">
           <li class="item1">
-            <h6>{{ modules[3].form.title || 'Integrity' }}</h6>
+            <h6>{{ modules[3].form.title }}</h6>
             <div class="des" v-html="modules[3].form.des"></div>
             <div class="cover" @click="toSet(3)">点击更换标题、概述与跳转</div>
           </li>
           <li class="item2">
-            <h6>{{ modules[4].form.title || 'Adventure ' }}</h6>
+            <h6>{{ modules[4].form.title }}</h6>
             <div class="des" v-html="modules[4].form.des"></div>
             <div class="cover" @click="toSet(4)">点击更换标题、概述与跳转</div>
           </li>
           <li class="item3">
-            <h6>{{ modules[5].form.title || 'Serve ' }}</h6>
+            <h6>{{ modules[5].form.title }}</h6>
             <div class="des" v-html="modules[5].form.des"></div>
             <div class="cover" @click="toSet(5)">点击更换标题、概述与跳转</div>
           </li>
           <li class="item4">
-            <h6>{{ modules[6].form.title || 'Focus on Future ' }}</h6>
+            <h6>{{ modules[6].form.title }}</h6>
             <div class="des" v-html="modules[6].form.des"></div>
             <div class="cover" @click="toSet(6)">点击更换标题、概述与跳转</div>
           </li>
@@ -70,8 +68,8 @@
     <div class="block gray">
       <div class="inner">
         <div class="c-wrap">
-          <h2 class="b-title">{{ modules[7].form.title || 'Facts' }}</h2>
+          <h2 class="b-title">{{ modules[7].form.title }}</h2>
-          <p class="intro">{{ modules[7].form.des || 'Strength in numbers' }}</p>
+          <p class="intro">{{ modules[7].form.des }}</p>
           <div class="cover" @click="toSet(7)">点击更换标题与描述</div>
         </div>
         <ul class="stat">
@@ -113,8 +111,8 @@
       <div class="inner c-wrap">
         <img class="pic" :src="modules[14].form.pic" alt="">
         <div class="texts">
-          <h6>{{ modules[14].form.title || 'Strategic Plan' }}</h6>
+          <h6>{{ modules[14].form.title }}</h6>
-          <div class="des">{{ modules[14].form.des || 'IASF is driven to serve the Science and industry, and solve grand challenges through research and innovation. We are open and creative, pursuing scientific management and decision-making.' }}</div>
+          <div class="des">{{ modules[14].form.des }}</div>
           <img src="@/assets/images/arrow-white.png" alt="">
         </div>
         <div class="cover" @click="toSet(14)">点击更换标题、概述与跳转</div>
@@ -124,17 +122,17 @@
     <div class="block">
       <div class="inner">
         <div class="c-wrap">
-          <h2 class="b-title">{{ modules[15].form.title || 'Govening Board & Leadership' }}</h2>
+          <h2 class="b-title">{{ modules[15].form.title }}</h2>
-          <p class="intro">{{ modules[15].form.des || 'What makes a ligh chinese bay chaser' }}</p>
+          <p class="intro">{{ modules[15].form.des }}</p>
           <div class="cover" @click="toSet(15)">点击更换标题与描述</div>
         </div>
         <ul class="people">
           <li v-for="(item, i) in modules[16].list" :key="i">
             <img class="pic" :src="item.pic" alt="">
             <div class="texts">
-              <p class="sub">{{ item.title || 'Founder and 1st PRESIDENT OF THE INSTITUTE OF ADVANCED SCIENCE FACILITIES, SHENZHEN' }}</p>
+              <p class="sub">{{ item.title }}</p>
-              <h6>{{ item.subTitle || 'Sun Dongbai' }}</h6>
+              <h6>{{ item.subTitle }}</h6>
-              <p class="des">{{ item.des || 'Dr. Sun was the executive vice president of Sun Yat- and vice president of the University of Science and Technology Beijing (2008-2017). One of the most widely well-known material scientists aation' }}</p>
+              <p class="des">{{ item.des }}</p>
               <img class="arrow" src="@/assets/images/arrow.png" alt="">
             </div>
           </li>
@@ -146,27 +144,27 @@
     <div class="block list-block gray">
       <div class="inner">
         <div class="c-wrap">
-          <h2 class="b-title">{{ modules[17].form.title || 'Committees' }}</h2>
+          <h2 class="b-title">{{ modules[17].form.title }}</h2>
-          <p class="intro">{{ modules[17].form.des || 'What makes a ligh chinese bay chaser' }}</p>
+          <p class="intro">{{ modules[17].form.des }}</p>
           <div class="cover" @click="toSet(17)">点击更换标题与描述</div>
         </div>
         <ul class="list">
           <li>
             <img class="pic" :src="modules[18].form.pic" alt="">
-            <h6>{{ modules[18].form.title || 'Science and Technology' }}</h6>
+            <h6>{{ modules[18].form.title }}</h6>
-            <p class="des">{{ modules[18].form.des || 'installation and nanostructuring' }}</p>
+            <p class="des">{{ modules[18].form.des }}</p>
             <div class="cover" @click="toSet(18)">点击更改图片、标题概述与链接</div>
           </li>
           <li>
             <img class="pic" :src="modules[19].form.pic" alt="">
-            <h6>{{ modules[19].form.title || 'User Committee' }}</h6>
+            <h6>{{ modules[19].form.title }}</h6>
-            <p class="des">{{ modules[19].form.des || 'installation and nanostructuring' }}</p>
+            <p class="des">{{ modules[19].form.des }}</p>
             <div class="cover" @click="toSet(19)">点击更改图片、标题概述与链接</div>
           </li>
           <li>
             <img class="pic" :src="modules[20].form.pic" alt="">
-            <h6>{{ modules[20].form.title || 'Industry Advancement Committee' }}</h6>
+            <h6>{{ modules[20].form.title }}</h6>
-            <p class="des">{{ modules[20].form.des || 'installation and nanostructuring' }}</p>
+            <p class="des">{{ modules[20].form.des }}</p>
             <div class="cover" @click="toSet(20)">点击更改图片、标题概述与链接</div>
           </li>
         </ul>
@@ -176,14 +174,14 @@
     <div class="block">
       <div class="inner">
         <div class="c-wrap">
-          <h2 class="b-title">{{ modules[21].form.title || 'Staff & Organization Chart' }}</h2>
+          <h2 class="b-title">{{ modules[21].form.title }}</h2>
-          <p class="intro">{{ modules[21].form.des || 'Meet the light chaser' }}</p>
+          <p class="intro">{{ modules[21].form.des }}</p>
           <div class="cover" @click="toSet(21)">点击更换标题与描述</div>
         </div>
         <div class="staff">
           <div class="left">
-            <h6>{{ modules[22].form.title || 'Throughout the world, most of the top science and technology innovation centers are distributed' }}</h6>
+            <h6>{{ modules[22].form.title }}</h6>
-            <div class="des">{{ modules[22].form.des || 'The IASF has over 300 employees, of which 50% hold a Ph.D. degree, and more than 25% of core positions had abroad research and management experience.' }}</div>
+            <div class="des">{{ modules[22].form.des }}</div>
           </div>
           <img class="pic" :src="modules[22].form.pic" alt="">
           <div class="cover" @click="toSet(22)">点击更改图片、标题概述与链接</div>
@@ -255,8 +253,8 @@ export default {
           ],
           form: {
             pic: require('@/assets/images/about/2.png'),
-            title: '',
+            title: 'Our History',
-            subTitle: '',
+            subTitle: 'Throughout the world, most of the top science and technology innovation centers are distributed',
             link: {
               linkName: '无',
               connectionType: 1,
@@ -268,7 +266,9 @@ export default {
               otherArticleId: '',
               isOpen: 1
             },
-            des: ''
+            des: `Greater Bay area is the most economically developed China. Therefore, in 2019, the Chinese central government proposed to build this region an international science ion cente.
+
+              As one of the core cities in the bay area, with the convenient transportation infrastructure.`
           }
         },
         {
@@ -287,8 +287,8 @@ export default {
             }
           ],
           form: {
-            title: '',
+            title: 'Our Values',
-            des: ''
+            des: 'What makes a light chaser'
           }
         },
         {
@@ -313,7 +313,7 @@ export default {
             }
           ],
           form: {
-            title: '',
+            title: 'Integrity',
             link: {
               linkName: '无',
               connectionType: 1,
@@ -350,7 +350,7 @@ export default {
             }
           ],
           form: {
-            title: '',
+            title: 'Adventure',
             link: {
               linkName: '无',
               connectionType: 1,
@@ -387,7 +387,7 @@ export default {
             }
           ],
           form: {
-            title: '',
+            title: 'Serve',
             link: {
               linkName: '无',
               connectionType: 1,
@@ -424,7 +424,7 @@ export default {
             }
           ],
           form: {
-            title: '',
+            title: 'Focus on Future',
             link: {
               linkName: '无',
               connectionType: 1,
@@ -455,8 +455,8 @@ export default {
             }
           ],
           form: {
-            title: '',
+            title: 'Facts',
-            des: ''
+            des: 'Strength in numbers'
           }
         },
         {
@@ -607,7 +607,7 @@ export default {
           ],
           form: {
             pic: require('@/assets/images/about/5.png'),
-            title: '',
+            title: 'Strategic Plan',
             link: {
               linkName: '无',
               connectionType: 1,
@@ -619,7 +619,7 @@ export default {
               otherArticleId: '',
               isOpen: 1
             },
-            des: ''
+            des: 'IASF is driven to serve the Science and industry, and solve grand challenges through research and innovation. We are open and creative, pursuing scientific management and decision-making.'
           }
         },
         {
@@ -638,8 +638,8 @@ export default {
             }
           ],
           form: {
-            title: '',
+            title: 'Govening Board & Leadership',
-            des: ''
+            des: 'What makes a ligh chinese bay chaser'
           }
         },
         {
@@ -693,8 +693,8 @@ export default {
           list: [
             {
               pic: require('@/assets/images/channel/channel1.png'),
-              title: '',
+              title: 'Founder and 1st PRESIDENT OF THE INSTITUTE OF ADVANCED SCIENCE FACILITIES, SHENZHEN',
-              subTitle: '',
+              subTitle: 'Sun Dongbai',
               link: {
                 linkName: '无',
                 connectionType: 1,
@@ -706,6 +706,7 @@ export default {
                 otherArticleId: '',
                 isOpen: 1
               },
+              des: 'Dr. Sun was the executive vice president of Sun Yat- and vice president of the University of Science and Technology Beijing (2008-2017). One of the most widely well-known material scientists aation',
               isEnable: 1
             }
           ]
@@ -726,8 +727,8 @@ export default {
             }
           ],
           form: {
-            title: '',
+            title: 'Committees',
-            des: ''
+            des: 'What makes a ligh chinese bay chaser'
           }
         },
         {
@@ -758,7 +759,7 @@ export default {
           ],
           form: {
             pic: require('@/assets/images/about/9.png'),
-            title: '',
+            title: 'Science and Technology',
             subTitle: '',
             link: {
               linkName: '无',
@@ -771,7 +772,7 @@ export default {
               otherArticleId: '',
               isOpen: 1
             },
-            des: ''
+            des: 'installation and nanostructuring'
           }
         },
         {
@@ -802,7 +803,7 @@ export default {
           ],
           form: {
             pic: require('@/assets/images/about/10.png'),
-            title: '',
+            title: 'User Committee',
             subTitle: '',
             link: {
               linkName: '无',
@@ -815,7 +816,7 @@ export default {
               otherArticleId: '',
               isOpen: 1
             },
-            des: ''
+            des: 'installation and nanostructuring'
           }
         },
         {
@@ -846,7 +847,7 @@ export default {
           ],
           form: {
             pic: require('@/assets/images/about/11.png'),
-            title: '',
+            title: 'Industry Advancement Committee',
             subTitle: '',
             link: {
               linkName: '无',
@@ -859,7 +860,7 @@ export default {
               otherArticleId: '',
               isOpen: 1
             },
-            des: ''
+            des: 'installation and nanostructuring'
           }
         },
         {
@@ -878,8 +879,8 @@ export default {
             }
           ],
           form: {
-            title: '',
+            title: 'Staff & Organization Chart',
-            des: ''
+            des: 'Meet the light chaser'
           }
         },
         {
@@ -910,7 +911,7 @@ export default {
           ],
           form: {
             pic: require('@/assets/images/about/12.png'),
-            title: '',
+            title: 'Throughout the world, most of the top science and technology innovation centers are distributed',
             subTitle: '',
             link: {
               linkName: '无',
@@ -923,7 +924,7 @@ export default {
               otherArticleId: '',
               isOpen: 1
             },
-            des: ''
+            des: 'The IASF has over 300 employees, of which 50% hold a Ph.D. degree, and more than 25% of core positions had abroad research and management experience.'
           }
         },
       ],
@@ -1037,6 +1038,9 @@ export default {
     display: flex;
     justify-content: space-between;
     margin-bottom: 126px;
+    &:nth-child(even) {
+      flex-direction: row-reverse;
+    }
   }
   .pic {
     width: 660px;

src/pages/column/page/careers.vue

@@ -0,0 +1,614 @@
+<template>
+  <div class="wrap">
+    <div class="actions">
+      <el-button type="primary" @click="preview">预览</el-button>
+      <el-button @click="save(0)">保存为草稿</el-button>
+      <el-button type="primary" @click="save(1)">发布</el-button>
+      <el-button @click="$router.back()">放弃编辑</el-button>
+    </div>
+
+    <div class="relative">
+      <el-carousel height="480px">
+        <template v-for="(item, i) in modules[0].list">
+          <el-carousel-item v-if="item.pic" :key="i">
+            <img width="100%" height="100%" :src="item.pic" alt="">
+          </el-carousel-item>
+        </template>
+      </el-carousel>
+      <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <ul class="card">
+          <li>
+            <img class="pic" :src="modules[1].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[1].form.title }}</h6>
+              <p class="text">{{ modules[1].form.des }}</p>
+            </div>
+            <div class="arrow">
+              <img src="@/assets/images/arrow-white.png" alt="">
+            </div>
+            <div class="cover" @click="toSet(1)">点击更换标题与描述</div>
+          </li>
+          <li>
+            <img class="pic" :src="modules[2].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[2].form.title }}</h6>
+              <p class="text">{{ modules[2].form.des }}</p>
+            </div>
+            <div class="arrow">
+              <img src="@/assets/images/arrow-white.png" alt="">
+            </div>
+            <div class="cover" @click="toSet(2)">点击更换标题与描述</div>
+          </li>
+          <li>
+            <img class="pic" :src="modules[3].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[3].form.title }}</h6>
+              <p class="text">{{ modules[3].form.des }}</p>
+            </div>
+            <div class="arrow">
+              <img src="@/assets/images/arrow-white.png" alt="">
+            </div>
+            <div class="cover" @click="toSet(3)">点击更换标题与描述</div>
+          </li>
+          <li>
+            <img class="pic" :src="modules[4].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[4].form.title }}</h6>
+              <p class="text">{{ modules[4].form.des }}</p>
+            </div>
+            <div class="arrow">
+              <img src="@/assets/images/arrow-white.png" alt="">
+            </div>
+            <div class="cover" @click="toSet(4)">点击更换标题与描述</div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block gray">
+      <div class="inner">
+        <div class="c-wrap">
+          <h2 class="b-title">{{ modules[5].form.title }}</h2>
+          <p class="intro">{{ modules[5].form.des }}</p>
+          <div class="cover" @click="toSet(5)">点击更换标题与描述</div>
+        </div>
+        <ul class="people">
+          <li v-for="(item, i) in modules[6].list" :key="i">
+            <img class="comma" src="@/assets/images/comma.png" alt="">
+            <div class="left">
+              <h6>{{ item.title }}</h6>
+              <div class="des">{{ item.des }}</div>
+            </div>
+            <img class="pic" :src="item.pic" alt="">
+          </li>
+          <div class="cover" @click="toSet(6)">点击更换标题与描述</div>
+        </ul>
+      </div>
+    </div>
+
+    <ul class="shows">
+      <li v-for="(item, i) in modules[7].list" :key="i">
+        <img class="pic" :src="item.pic" alt="">
+        <div class="left">
+          <h6>{{ item.title }}</h6>
+          <div class="sub">{{ item.subTitle }}</div>
+          <div class="des">{{ item.des }}</div>
+          <img class="arrow" src="@/assets/images/arrow-white.png" alt="">
+        </div>
+      </li>
+      <div class="cover" @click="toSet(7)">点击更换标题与描述</div>
+    </ul>
+    
+    <Module :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      modules: [
+        {
+          type: 'banner',
+          list: [
+            {
+              pic: require('@/assets/images/careers/1.png'),
+              link: {
+                linkName: '无',
+                connectionType: 1,
+                columnId: [],
+                articleId: '',
+                linkAddress	: '',
+                siteSelection: '',
+                otherColumnId: [],
+                otherArticleId: '',
+                isOpen: 1
+              },
+              isEnable: 1
+            }
+          ]
+        },
+        {
+          type: 'form',
+          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: '描述'
+            }
+          ],
+          form: {
+            pic: require('@/assets/images/careers/2.png'),
+            title: 'Research',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: 'Positions'
+          }
+        },
+        {
+          type: 'form',
+          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: '描述'
+            }
+          ],
+          form: {
+            pic: require('@/assets/images/careers/3.png'),
+            title: 'Engineering',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: 'Positions'
+          }
+        },
+        {
+          type: 'form',
+          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: '描述'
+            }
+          ],
+          form: {
+            pic: require('@/assets/images/careers/4.png'),
+            title: 'Management Staff',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: 'Positions'
+          }
+        },
+        {
+          type: 'form',
+          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: '描述'
+            }
+          ],
+          form: {
+            pic: require('@/assets/images/careers/5.png'),
+            title: 'Post-doc Programs',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: 'Positions'
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: 'Profiles',
+            des: 'What makes a light chaser'
+          }
+        },
+        {
+          type: 'introduce',
+          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: '描述'
+            }
+          ],
+          form: {
+            pic: '',
+            title: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: ''
+          },
+          list: [
+            {
+              pic: require('@/assets/images/careers/6.png'),
+              title: 'IASF started its journey to chase light, push the boundaries forward, and discover the unknown.',
+              link: {
+                linkName: '无',
+                connectionType: 1,
+                columnId: [],
+                articleId: '',
+                linkAddress	: '',
+                siteSelection: '',
+                otherColumnId: [],
+                otherArticleId: '',
+                isOpen: 1
+              },
+              des: 'Throughout the world, most of the top science and technology 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.',
+              isEnable: 1
+            }
+          ]
+        },{
+          type: 'introduce',
+          forms: [
+            {
+              type: 'upload',
+              prop: 'pic',
+              label: '图片',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'subTitle',
+              label: '小标题'
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '描述'
+            }
+          ],
+          form: {
+            pic: '',
+            title: '',
+            subTitle: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: ''
+          },
+          list: [
+            {
+              pic: require('@/assets/images/careers/9.png'),
+              title: 'Benefits',
+              subTitle: 'YOU ARE IN GOOD HANDS',
+              link: {
+                linkName: '无',
+                connectionType: 1,
+                columnId: [],
+                articleId: '',
+                linkAddress	: '',
+                siteSelection: '',
+                otherColumnId: [],
+                otherArticleId: '',
+                isOpen: 1
+              },
+              des: 'We offer the most competitive package to assure the welfare of our people at IAST.',
+              isEnable: 1
+            }
+          ]
+        },
+      ],
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../styles/page/page.scss";
+.card {
+  display: flex;
+  justify-content: center;
+  li {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 368px;
+    height: 526px;
+    margin-right: 14px;
+    color: #fff;
+    cursor: pointer;
+    &:hover {
+      .arrow {
+        opacity: 1;
+      }
+    }
+    .pic {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .texts {
+      position: relative;
+    }
+    h6 {
+      margin-bottom: 10px;
+      font-size: 35px;
+    }
+    .text {
+      font-size: 24px;
+    }
+    .arrow {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 177px;
+      padding-top: 62px;
+      text-align: center;
+      background: #36404A;
+      opacity: 0;
+      transition: .3s;
+    }
+  }
+}
+.people {
+  position: relative;
+  li {
+    position: relative;
+    min-height: 450px;
+    padding: 100px 70px 30px 57px;
+    margin-bottom: 100px;
+    background-color: #fff;
+    &:nth-child(even) {
+      display: flex;
+      justify-content: flex-end;
+      .comma {
+        left: 660px;
+      }
+      .pic {
+        left: 0;
+        right: auto;
+      }
+    }
+  }
+  .comma {
+    position: absolute;
+    top: -22px;
+    left: 57px;
+  }
+  .left {
+    width: 670px;
+  }
+  h6 {
+    font-size: 24px;
+    color: #333;
+  }
+  .des {
+    margin-top: 20px;
+    font-size: 20px;
+    color: #666;
+    line-height: 32px;
+  }
+  .pic {
+    position: absolute;
+    top: -60px;
+    right: 43px;
+    width: 600px;
+    height: 450px;
+  }
+}
+.shows {
+  position: relative;
+  li {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 654px;
+    margin-bottom: 40px;
+    color: #fff;
+    &:nth-child(even) {
+      flex-direction: row-reverse;
+    }
+    &:nth-child(2) {
+      .left {
+        background-color: rgba(47, 79, 23, .65);
+      }
+    }
+    &:nth-child(3) {
+      .left {
+        background-color: rgba(91, 58, 35, .65);
+      }
+    }
+  }
+  .left {
+    width: 43.3%;
+    height: 100%;
+    padding: 138px 30px 30px 103px;
+    background-color: rgba(54, 54, 54, .65);
+  }
+  .pic {
+    width: 56.9%;
+    height: 100%;
+  }
+  h6 {
+    font-size: 46px;
+  }
+  .sub {
+    margin: 20px;
+    font-size: 36px;
+  }
+  .des {
+    margin-bottom: 40px;
+    font-size: 24px;
+  }
+}
+</style>

src/pages/column/page/home.vue

@@ -21,16 +21,16 @@
     <div class="block">
       <div class="inner">
         <div class="c-wrap">
-          <h2 class="b-title">{{ modules[1].form.title || 'OUR FACILITIES' }}</h2>
+          <h2 class="b-title">{{ modules[1].form.title }}</h2>
-          <p class="intro">{{ modules[1].form.des || 'IASF will carry a world-class light source research park by operating a synchrotron radiation facility and a soft X-ray Superconducting free-electron laser facility.' }}</p>
+          <p class="intro">{{ modules[1].form.des }}</p>
           <div class="cover" @click="toSet(1)">点击更换标题与描述</div>
         </div>
         <ul class="card">
           <li>
             <img width="100%" :src="modules[2].form.pic" alt="">
             <div class="texts">
-              <h6>{{ modules[2].form.title || 'Shenzhen Innovation Lightsource Facility ' }}</h6>
+              <h6>{{ modules[2].form.title }}</h6>
-              <p class="des">{{ modules[2].form.des || 'The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.' }}</p>
+              <p class="des">{{ modules[2].form.des }}</p>
               <img class="arrow" src="@/assets/images/arrow.png" alt="">
             </div>
             <div class="cover" @click="toSet(2)">点击更改图片、标题概述与链接</div>
@@ -38,8 +38,8 @@
           <li>
             <img width="100%" :src="modules[3].form.pic" alt="">
             <div class="texts">
-              <h6>{{ modules[3].form.title || 'Shenzhen Innovation Lightsource Facility ' }}</h6>
+              <h6>{{ modules[3].form.title }}</h6>
-              <p class="des">{{ modules[3].form.des || 'The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.' }}</p>
+              <p class="des">{{ modules[3].form.des }}</p>
               <img class="arrow" src="@/assets/images/arrow.png" alt="">
             </div>
             <div class="cover" @click="toSet(3)">点击更改图片、标题概述与链接</div>
@@ -51,8 +51,8 @@
     <div class="block news-block">
       <div class="inner">
         <div class="c-wrap">
-          <h2 class="b-title">{{ modules[4].form.title || 'Latest information' }}</h2>
+          <h2 class="b-title">{{ modules[4].form.title }}</h2>
-          <p class="intro">{{ modules[4].form.des || 'Keep up with what happen with IASF' }}</p>
+          <p class="intro">{{ modules[4].form.des }}</p>
           <div class="cover" @click="toSet(4)">点击更换标题与描述</div>
         </div>
         <ul class="news">
@@ -112,16 +112,16 @@
     <div class="block">
       <div class="inner">
         <div class="c-wrap">
-          <h2 class="b-title">{{ modules[6].form.title || "Light Chasers' Home at IASF" }}</h2>
+          <h2 class="b-title">{{ modules[6].form.title }}</h2>
-          <p class="intro">{{ modules[6].form.des || 'Keep up with what happen with IASF' }}</p>
+          <p class="intro">{{ modules[6].form.des }}</p>
           <div class="cover" @click="toSet(6)">点击更换标题与描述</div>
         </div>
         <ul class="people">
           <li v-for="(item, i) in modules[7].list" :key="i">
             <img class="pic" :src="item.pic" alt="">
             <div class="texts">
-              <h6>{{ item.title || 'Shenzhen Innovation Lightsource Facility ' }}</h6>
+              <h6>{{ item.title }}</h6>
-              <p class="des">{{ item.des || 'The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.' }}</p>
+              <p class="des">{{ item.des }}</p>
               <img class="arrow" src="@/assets/images/arrow.png" alt="">
             </div>
           </li>
@@ -134,8 +134,8 @@
       <div class="inner">
         <img src="@/assets/images/channel/about.png" alt="">
         <div class="line"></div>
-        <div class="text">{{ modules[8].form.title || 'ABOUT' }}</div>
+        <div class="text">{{ modules[8].form.title }}</div>
-        <div class="des">{{ modules[8].form.des || 'The Institute of Advanced Science Facilities in Shenzhen, China is home to world-class science, world-class facilities, and world-class people. Located 25 miles east of Shenzhen city center, on a 1.2 acre campus, IASF has over three hundred researchers and support staff.…' }}</div>
+        <div class="des" v-html="modules[8].form.des"></div>
       </div>
       <div class="cover" @click="toSet(8)">点击更换标题与描述</div>
     </div>
@@ -143,7 +143,7 @@
     <div class="block" style="padding-bottom: 0">
       <div class="inner">
         <div class="c-wrap">
-          <h2 class="glance">{{ modules[9].form.title || 'IASF at a glance' }}</h2>
+          <h2 class="glance">{{ modules[9].form.title }}</h2>
           <div class="cover" @click="toSet(9)">点击更换标题与描述</div>
         </div>
         <ul class="stat">
@@ -228,8 +228,8 @@ export default {
             }
           ],
           form: {
-            title: '',
+            title: 'OUR FACILITIES',
-            des: ''
+            des: 'IASF will carry a world-class light source research park by operating a synchrotron radiation facility and a soft X-ray Superconducting free-electron laser facility.'
           }
         },
         {
@@ -260,7 +260,7 @@ export default {
           ],
           form: {
             pic: require('@/assets/images/channel/channel1.png'),
-            title: '',
+            title: 'Shenzhen Innovation Lightsource Facility',
             link: {
               linkName: '无',
               connectionType: 1,
@@ -272,7 +272,7 @@ export default {
               otherArticleId: '',
               isOpen: 1
             },
-            des: ''
+            des: 'The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.'
           }
         },
         {
@@ -303,7 +303,7 @@ export default {
           ],
           form: {
             pic: require('@/assets/images/channel/channel1.png'),
-            title: '',
+            title: 'Shenzhen Innovation Lightsource Facility',
             link: {
               linkName: '无',
               connectionType: 1,
@@ -315,7 +315,7 @@ export default {
               otherArticleId: '',
               isOpen: 1
             },
-            des: ''
+            des: 'The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.'
           }
         },
         {
@@ -334,8 +334,8 @@ export default {
             }
           ],
           form: {
-            title: '',
+            title: 'Latest information',
-            des: ''
+            des: 'Keep up with what happen with IASF'
           }
         },
         {
@@ -364,8 +364,8 @@ export default {
             }
           ],
           form: {
-            title: '',
+            title: "Light Chasers' Home at IASF",
-            des: ''
+            des: 'Keep up with what happen with IASF'
           }
         },
         {
@@ -419,7 +419,7 @@ export default {
           list: [
             {
               pic: require('@/assets/images/channel/channel1.png'),
-              title: '',
+              title: 'Shenzhen Innovation Lightsource Facility',
               subTitle: '',
               link: {
                 linkName: '无',
@@ -432,7 +432,8 @@ export default {
                 otherArticleId: '',
                 isOpen: 1
               },
-              isEnable: 1
+              isEnable: 1,
+              des: 'The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.'
             }
           ]
         },
@@ -458,7 +459,7 @@ export default {
             }
           ],
           form: {
-            title: '',
+            title: 'ABOUT',
             link: {
               linkName: '无',
               connectionType: 1,
@@ -489,7 +490,7 @@ export default {
             }
           ],
           form: {
-            title: '',
+            title: 'IASF at a glance',
             des: ''
           }
         },

src/pages/column/page/newsPress.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="wrap">
+    <div class="actions">
+      <el-button type="primary" @click="preview">预览</el-button>
+      <el-button @click="save(0)">保存为草稿</el-button>
+      <el-button type="primary" @click="save(1)">发布</el-button>
+      <el-button @click="$router.back()">放弃编辑</el-button>
+    </div>
+
+    <div class="relative">
+      <el-carousel height="480px">
+        <template v-for="(item, i) in modules[0].list">
+          <el-carousel-item v-if="item.pic" :key="i">
+            <img width="100%" height="100%" :src="item.pic" alt="">
+          </el-carousel-item>
+        </template>
+      </el-carousel>
+      <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
+    </div>
+
+    <div class="block">
+      <div class="inner c-wrap">
+        <ul class="list">
+          <li v-for="(item, i) in modules[1].list" :key="i">
+            <img class="pic" :src="item.pic" alt="">
+            <div class="texts">
+              <h6>{{ item.title }}</h6>
+              <p class="sub">{{ item.subTitle }}</p>
+              <div class="des">{{ item.des }}</div>
+              <img src="@/assets/images/arrow.png" alt="">
+            </div>
+          </li>
+        </ul>
+        <div class="cover" @click="toSet(1)">点击更改图片、标题概述与链接</div>
+      </div>
+    </div>
+
+    <Module :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      modules: [
+        {
+          type: 'banner',
+          list: [
+            {
+              pic: require('@/assets/images/news/1.png'),
+              link: {
+                linkName: '无',
+                connectionType: 1,
+                columnId: [],
+                articleId: '',
+                linkAddress	: '',
+                siteSelection: '',
+                otherColumnId: [],
+                otherArticleId: '',
+                isOpen: 1
+              },
+              isEnable: 1
+            }
+          ]
+        },
+        {
+          type: 'introduce',
+          forms: [
+            {
+              type: 'upload',
+              prop: 'pic',
+              label: '图片',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'subTitle',
+              label: '小标题'
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '描述'
+            }
+          ],
+          form: {
+            pic: '',
+            title: '',
+            subTitle: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: ''
+          },
+          list: [
+            {
+              pic: require('@/assets/images/newsPress/1.png'),
+              title: 'community service',
+              subTitle: 'IASF is driven to serve the Science and industry, and solve grand challenges.',
+              link: {
+                linkName: '无',
+                connectionType: 1,
+                columnId: [],
+                articleId: '',
+                linkAddress	: '',
+                siteSelection: '',
+                otherColumnId: [],
+                otherArticleId: '',
+                isOpen: 1
+              },
+              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 …',
+              isEnable: 1
+            }
+          ]
+        },
+      ],
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../styles/page/page.scss";
+.list {
+  li {
+    position: relative;
+    &:nth-child(even) {
+      text-align: right;
+      .texts {
+        left: 0;
+        text-align: left;
+      }
+    }
+  }
+  .pic {
+    width: 650px;
+    height: 730px;
+  }
+  .texts {
+    position: absolute;
+    top: 120px;
+    left: 610px;
+    width: 850px;
+    height: 440px;
+    padding: 60px 30px 30px 100px;
+    background: rgba(247, 247, 247, .72);
+  }
+  h6 {
+    font-size: 40px;
+    color: #3C3C3C;
+  }
+  .sub {
+    margin: 20px 0;
+    font-size: 24px;
+    color: #1C1C1C;
+    line-height: 33px;
+  }
+  .des {
+    margin-bottom: 20px;
+    font-size: 20px;
+    color: #3C3C3C;
+    line-height: 32px;
+  }
+}
+</style>

src/router/modules/column.js

@@ -36,6 +36,18 @@ export default {
       path: `about`,
       component: () => import('@/pages/column/page/about'),
       meta: { title: 'ABOUT' }
+    },
+    {
+      name: `${pre}careers`,
+      path: `careers`,
+      component: () => import('@/pages/column/page/careers'),
+      meta: { title: 'CAREERS' }
+    },
+    {
+      name: `${pre}newsPress`,
+      path: `newsPress`,
+      component: () => import('@/pages/column/page/newsPress'),
+      meta: { title: 'NEWS' }
     }
   ]
 }