news

src/components/modules/module.vue

@@ -85,7 +85,7 @@
           <Editor v-if="item.type === 'editor'" api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="data.form[item.prop]" :init="editorConfig" />
         </el-form-item>
       </el-form>
-      <el-form v-else-if="data.type === 'column'" ref="form" :model="data.form" :rules="columnRules" label-width="100px">
+      <el-form v-else-if="data.type === 'column' || data.type === 'columns'" ref="form" :model="data.form" :rules="columnRules" label-width="100px">
         <el-form-item prop="site" label="站点选择">
           <el-select v-model="data.form.site" @change="siteChange">
             <el-option
@@ -204,8 +204,8 @@ export default {
   methods: {
     // 处理form表单参数
     handleForm() {
-      if (this.data.type === 'form') {
+      const { type, forms } = this.data
-        const { forms } = this.data
+      if (type === 'form') {
         forms.map(e => {
           if (e.required) {
             this.rules[e.prop] = [

src/mixins/page/index.js

@@ -12,6 +12,7 @@ export default {
       id: '',
       diaVisible: false,
       curModule: 0,
+      curListIndex: 0,
       curData: {},
     }
   },
@@ -25,7 +26,7 @@ export default {
     // 获取详情
     getInfo() {
       this.modules.map(e => {
-        const { type } = e
+        const { type, list } = e
         // 克隆一个原始row，方便添加
         if (type === 'banner' || type === 'introduce') {
           const data = JSON.parse(JSON.stringify(e.form || e.list[0]))
@@ -33,8 +34,14 @@ export default {
             if (typeof data[i] === 'string') data[i] = ''
           }
           e.originForm = data
+        } else if (type === 'columns') {
+          if (!list.length) {
+            // 克隆6个栏目
+            for (let i = 0; i < 6; i++) {
+              e.list.push(JSON.parse(JSON.stringify(e.form)))
+            }
+          }
         }
-
         // 克隆一个空值的form
         // if (e.form) {
         //   const form = JSON.parse(JSON.stringify(e.form))
@@ -44,8 +51,6 @@ export default {
         //   e.originForm = form
         // }
       })
-      console.log("🚀 ~ file: index.js ~ line 36 ~ getInfo ~ originForm", this.modules)
-
       // 查询页面详情
       this.$post(`${this.api.findPage}?columnId=${this.columnId}`).then(({ data }) => {
         if (data.length) {
@@ -56,15 +61,23 @@ export default {
       }).catch(err => {})
     },
     // 展开模块设置
-    toSet(i) {
+    toSet(i, listIndex) {
       this.curModule = i
       this.curData = JSON.parse(JSON.stringify(this.modules[i]))
+      if (this.curData.type === 'columns') {
+        this.curListIndex = listIndex
+        this.curData.form = JSON.parse(JSON.stringify(this.curData.list[listIndex]))
+      }
       this.diaVisible = true
     },
     // 模块设置提交
     moduleSubmit() {
       this.diaVisible = false
-      this.modules[this.curModule] = this.curData
+      if (this.curData.type === 'columns') {
+        this.modules[this.curModule].list[this.curListIndex] = JSON.parse(JSON.stringify(this.curData.form))
+      } else {
+        this.modules[this.curModule] = this.curData
+      }
     },
     // 处理预览和保存的json
     handleJson() {

src/pages/column/list/index.vue

@@ -53,13 +53,13 @@
         </template>
       </el-table-column>
       <el-table-column v-if="settings[6].show" prop="id" label="ID" min-width="80"></el-table-column>
-      <el-table-column v-if="settings[7].show" label="操作" width="240">
+      <el-table-column v-if="settings[7].show" label="操作" width="270">
         <template slot-scope="scope">
           <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:新增'" type="text" @click="edit(scope.row, 'add')">新增下级</el-button>
           <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:编辑'" type="text" @click="edit(scope.row, 'edit')">编辑</el-button>
           <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'" type="text" @click="del(scope.row)">删除</el-button>
           <el-button type="text" @click="preview(scope.row)">预览</el-button>
-          <el-button v-if="scope.row.typeId == 3" type="text" @click="page(scope.row)">页面设置</el-button>
+          <el-button v-if="scope.row.typeId == 3" class="page-set" type="primary" size="mini" @click="page(scope.row)">页面设置</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -276,7 +276,7 @@ export default {
       // 预览
       preview(row) {
         const item = ColumnConst.pageStyle.find(e => e.id == row.listStyleId)
-        window.open(`http://192.168.31.${Setting.isDev ? 126 : 136}:8095/#/${item ? item.path : 'home'}?id=${row.id}`)
+        window.open((Setting.isDev ? `http://${location.hostname}:8095` : 'http://192.168.31.136') + `/#/${item ? item.path : 'home'}?id=${row.id}`)
       },
       // 页面管理
       page(row) {
@@ -446,4 +446,7 @@ export default {
     border-radius: 2px;
   }
 }
+.page-set {
+  padding: 6px;
+}
 </style>

src/pages/column/page/edu.vue

@@ -0,0 +1,296 @@
+<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 gray">
+      <div class="inner c-wrap">
+        <h2 class="b-title">{{ modules[1].form.title }}</h2>
+        <p class="intro">{{ modules[1].form.des }}</p>
+        <img width="100%" height="536" :src="modules[1].form.pic" alt="">
+        <div class="cover" @click="toSet(1)">点击更改图片、标题概述与链接</div>
+      </div>
+    </div>
+    
+    <div class="block">
+      <div class="inner c-wrap">
+        <h2 class="b-title">{{ modules[2].form.title }}</h2>
+        <p class="intro">{{ modules[2].form.des }}</p>
+        <img width="100%" height="536" :src="modules[1].form.pic" alt="">
+        <div class="cover" @click="toSet(2)">点击更改图片、标题概述与链接</div>
+      </div>
+    </div>
+    
+    <div class="block gray">
+      <div class="inner c-wrap">
+        <h2 class="b-title">Engagement</h2>
+        <p class="intro">Serving Community</p>
+        <ul class="list">
+          <li v-for="(item, i) in modules[3].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>
+            </div>
+          </li>
+        </ul>
+        <div class="cover" @click="toSet(3)">点击更改图片、标题概述与链接</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/edu/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/edu/2.png'),
+            title: 'Partnership',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: `Together, Stronger`
+          }
+        },
+        {
+          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/edu/2.png'),
+            title: 'Programs',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              columnId: [],
+              articleId: '',
+              linkAddress	: '',
+              siteSelection: '',
+              otherColumnId: [],
+              otherArticleId: '',
+              isOpen: 1
+            },
+            des: `Our campus is Shenzhen and Beyound`
+          }
+        },
+        {
+          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/edu/3.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;
+      }
+    }
+  }
+  .pic {
+    width: 650px;
+    height: 730px;
+  }
+  .texts {
+    position: absolute;
+    top: 120px;
+    left: 610px;
+    width: 850px;
+    height: 440px;
+    padding: 60px 30px 30px 100px;
+    background-color: #fff;
+  }
+  h6 {
+    font-size: 40px;
+    color: #3C3C3C;
+  }
+  .sub {
+    margin: 20px 0;
+    font-size: 24px;
+    color: #1C1C1C;
+    line-height: 33px;
+  }
+  .des {
+    font-size: 20px;
+    color: #3C3C3C;
+    line-height: 32px;
+  }
+}
+</style>

src/pages/column/page/news.vue

@@ -0,0 +1,556 @@
+<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>
+
+    <ul class="tabs">
+      <li :class="{active: item.id == active}" v-for="(item, i) in tabs" :key="i">
+        {{ item.name }}
+        <div class="cover" @click="toSet(1, i)">关联栏目</div>
+      </li>
+    </ul>
+
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title">Seminars & Workshops</h2>
+        <p class="intro">What makes a ligh chinese bay chaser</p>
+        <div class="banner">
+          <img width="100%" height="480" src="@/assets/images/about/5.png" alt="">
+          <div class="right">
+            <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">
+          <li>
+            <img class="pic" src="@/assets/images/about/9.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="@/assets/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="@/assets/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>
+        </ul>
+        <div class="more">More news ></div>
+      </div>
+    </div>
+
+    <div class="block gray">
+      <div class="inner lg">
+        <div class="c-wrap">
+          <h2 class="b-title">{{ modules[2].form.title }}</h2>
+          <p class="intro">{{ modules[2].form.des }}</p>
+          <div class="cover" @click="toSet(2)">点击更换标题与描述</div>
+        </div>
+        <div class="shop-shows">
+          <div class="left">
+            <img width="100%" height="400" src="@/assets/images/about/5.png" alt="">
+            <div class="texts">
+              <h6>2022 New Year Messag President Sun Dongbai….</h6>
+              <div class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</div>
+            </div>
+          </div>
+          <div class="right">
+            <ul class="show-card">
+              <li>
+                <img class="pic" src="@/assets/images/about/9.png" alt="">
+                <div class="des">Comprises the installation and nanostructuri</div>
+              </li>
+              <li>
+                <img class="pic" src="@/assets/images/about/10.png" alt="">
+                <div class="des">Prof. Stephan V. Roth's research</div>
+              </li>
+            </ul>
+            <ul class="card-list">
+              <li>
+                <img class="pic" src="@/assets/images/about/9.png" alt="">
+                <div class="texts">
+                  <h6>Hold doctorates or the highest degree in their field</h6>
+                  <div class="des">Characterization in Fibre and Polymer Technology, KTH Royal Institute of Technology.Characteriza Royal Institute of technology.…</div>
+                </div>
+              </li>
+              <li>
+                <img class="pic" src="@/assets/images/about/10.png" alt="">
+                <div class="texts">
+                  <h6>This 2019 image depicted a Centers for Disease</h6>
+                  <div class="des">laboratory technician, dressed in personal protective equipment (PPE), in thelaboratory technician, dressed in personal in the…</div>
+                </div>
+              </li>
+              <li>
+                <img class="pic" src="@/assets/images/about/11.png" alt="">
+                <div class="texts">
+                  <h6>Browse premium related images on iStock</h6>
+                  <div class="des">which would undergo analysis, here, in this laboratory environment.which would undergo analysis, here, in this laboratory environment.…</div>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <div class="cover" @click="toSet(3)">关联栏目</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="block conference">
+      <div class="inner lg">
+        <div class="c-wrap">
+          <h2 class="b-title">{{ modules[4].form.title }}</h2>
+          <p class="intro">{{ modules[4].form.des }}</p>
+          <div class="cover" @click="toSet(4)">点击更换标题与描述</div>
+        </div>
+        <div class="shows">
+          <div class="left">
+            <img width="100%" height="558" src="@/assets/images/about/5.png" alt="">
+            <div class="texts">
+              <div class="meta">
+                <p class="date">09</p>
+                <p class="year">2022-03</p>
+              </div>
+              <div>
+                <h6>Browse premium related images on iStock</h6>
+                <div class="des">which would undergo analysis, here, in this laboratory environment.which would undergo analysis, here, in this laboratory environment.…</div>
+              </div>
+            </div>
+          </div>
+          <ul class="card-list">
+            <li>
+              <img class="pic" src="@/assets/images/about/9.png" alt="">
+              <div class="texts">
+                <h6>Professional technical Free electron laser device</h6>
+                <p class="text">
+                  <img class="icon" src="@/assets/images/address.png" alt="">
+                  Jiahang Shao
+                </p>
+                <p class="text">
+                  <img class="icon" src="@/assets/images/address.png" alt="">
+                  Time: 2022.8.13  14:30
+                </p>
+                <p class="text">
+                  <img class="icon" src="@/assets/images/address.png" alt="">
+                  Address: Big conference room on the fourth floor of headquarters
+                </p>
+              </div>
+            </li>
+          </ul>
+          <div class="cover" @click="toSet(5)">关联栏目</div>
+        </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: 'columns',
+          form: {
+            columnName: '',
+            site: '',
+            column: '',
+            articleNum: '',
+            columnTitle: 1,
+            columnTitleCustom: ''
+          },
+          list: []
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: 'Seminars & Workshops',
+            des: 'What makes a ligh chinese bay chaser'
+          }
+        },
+        {
+          type: 'column',
+          form: {
+            site: '',
+            column: '',
+            articleNum: '',
+            columnTitle: 1,
+            columnTitleCustom: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: 'Conference',
+            des: 'What makes a ligh chinese bay chaser'
+          }
+        },
+        {
+          type: 'column',
+          form: {
+            site: '',
+            column: '',
+            articleNum: '',
+            columnTitle: 1,
+            columnTitleCustom: ''
+          }
+        },
+      ],
+      tabs: [
+        {
+          id: 1,
+          name: 'General news'
+        },
+        {
+          id: 2,
+          name: 'Research news'
+        },
+        {
+          id: 3,
+          name: 'Journal covers'
+        },
+        {
+          id: 1,
+          name: 'General news'
+        },
+        {
+          id: 2,
+          name: 'Research news'
+        },
+        {
+          id: 3,
+          name: 'Journal covers'
+        }
+      ],
+      active: ''
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../styles/page/page.scss";
+.tabs {
+  display: flex;
+  justify-content: center;
+  box-shadow: 0px 2px 14px 0px rgba(167,167,167,0.26);
+  li {
+    position: relative;
+    padding: 25px 19px;
+    margin: 0 10px;
+    font-size: 22px;
+    color: #333;
+    border-bottom: 4px solid transparent;
+    text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
+    cursor: pointer;
+    &.active {
+      color: #1583FF;
+      border-bottom-color: #1583FF;
+    }
+  }
+}
+.banner {
+  display: flex;
+  .pic {
+    width: 700px;
+    height: 380px;
+  }
+  .right {
+    padding: 50px 50px 30px;
+    background: #1583FF;
+    color: #fff;
+  }
+  h6 {
+    font-size: 24px;
+  }
+  .des {
+    margin: 30px 0;
+    font-size: 16px;
+    line-height: 24px;
+  }
+  .meta {
+    font-size: 16px;
+  }
+}
+.card {
+  display: flex;
+  margin-top: 40px;
+  li {
+    width: 448px;
+    margin-right: 28px;
+    box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21);
+    border-radius: 6px;
+    cursor: pointer;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .pic {
+    width: 100%;
+    height: 240px;
+  }
+  .texts {
+    padding: 40px 30px;
+  }
+  .meta {
+    font-size: 16px;
+    color: #666;
+  }
+  .des {
+    margin: 10px 0;
+    font-size: 20px;
+    color: #333;
+    line-height: 28px;
+  }
+  .arrow {
+    width: 36px;
+  }
+}
+.more {
+  width: 374px;
+  margin: 58px auto 0;
+  line-height: 64px;
+  font-size: 30px;
+  text-align: center;
+  color: #1583FF;
+  border-radius: 35px;
+  border: 2px solid #2B6CEF;
+  cursor: pointer;
+}
+.shop-shows {
+  position: relative;
+  display: flex;
+  .left {
+    width: 660px;
+    margin-right: 20px;
+    background-color: #fff;
+    .texts {
+      padding: 40px 30px;
+    }
+    h6 {
+      font-size: 24px;
+      color: #272727;
+    }
+    .des {
+      margin-top: 10px;
+      font-size: 16px;
+      color: #666;
+      line-height: 30px;
+    }
+  }
+  .right {
+    width: 824px;
+  }
+  .show-card {
+    display: flex;
+    margin-bottom: 20px;
+    li {
+      position: relative;
+      &:first-child {
+        margin-right: 22px;
+      }
+    }
+    .pic {
+      width: 401px;
+      height: 197px;
+    }
+    .des {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      font-size: 16px;
+      color: #fff;
+      line-height: 48px;
+      text-align: center;
+      background: rgba(0,0,0,0.49);
+      box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08);
+    }
+  }
+  .card-list {
+    padding: 34px 26px;
+    background-color: #fff;
+    li {
+      display: inline-flex;
+      padding-right: 124px;
+      margin-bottom: 38px;
+      background: url(../../../assets/images/arrow.png) (right 20px)/(23px 23px) no-repeat;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    .pic {
+      width: 116px;
+      height: 85px;
+      margin-right: 28px;
+    }
+    h6 {
+      font-size: 20px;
+      color: #272727;
+    }
+    .des {
+      margin-top: 15px;
+      font-size: 14px;
+      color: #666;
+      line-height: 24px;
+    }
+  }
+}
+.conference {
+  background: #072947;
+  .b-title, .intro {
+    color: #fff;
+  }
+  .shows {
+    position: relative;
+    display: flex;
+  }
+  .left {
+    width: 688px;
+    margin-right: 20px;
+    background-color: #fff;
+    .texts {
+      display: flex;
+      padding: 40px 30px;
+    }
+    .meta {
+      padding: 10px 23px 10px 0;
+      margin-right: 32px;
+      text-align: center;
+      border-right: 1px solid #ddd;
+    }
+    .date {
+      font-size: 45px;
+      font-family: DINAlternate-Bold, DINAlternate;
+      font-weight: bold;
+      color: #1F1F1F;
+      line-height: 52px;
+    }
+    .year {
+      font-size: 16px;
+      white-space: nowrap;
+      color: #666;
+    }
+    h6 {
+      font-size: 20px;
+      color: #272727;
+    }
+    .des {
+      margin-top: 10px;
+      font-size: 14px;
+      color: #666;
+      line-height: 24px;
+    }
+  }
+  .card-list {
+    width: 784px;
+    li {
+      display: flex;
+      padding: 24px;
+      margin-bottom: 13px;
+      background-color: #fff;
+    }
+    .pic {
+      width: 188px;
+      height: 130px;
+      margin-right: 28px;
+    }
+    h6 {
+      margin-bottom: 10px;
+      font-size: 20px;
+      color: #333;
+    }
+    .text {
+      display: flex;
+      align-items: center;
+      margin: 10px 0;
+    }
+    .icon {
+      width: 15px;
+      margin-right: 12px;
+    }
+  }
+}
+</style>

src/router/modules/column.js

@@ -42,12 +42,24 @@ export default {
       path: `careers`,
       component: () => import('@/pages/column/page/careers'),
       meta: { title: 'CAREERS' }
+    },,
+    {
+      name: `${pre}edu`,
+      path: `edu`,
+      component: () => import('@/pages/column/page/edu'),
+      meta: { title: 'EDUCATION & COLLABORATION' }
+    },
+    {
+      name: `${pre}news`,
+      path: `news`,
+      component: () => import('@/pages/column/page/news'),
+      meta: { title: 'NEWS&Events' }
     },
     {
       name: `${pre}newsPress`,
       path: `newsPress`,
       component: () => import('@/pages/column/page/newsPress'),
-      meta: { title: 'NEWS' }
+      meta: { title: 'NEWS&Events-press room' }
     }
   ]
 }