新增长页模板

src/const/modules.js

@@ -4308,16 +4308,15 @@ export default {
       }
     },
   ],
-  survey: [
+  overviewTrailer: [
     {
-      type: 'introduce',
+      type: 'form',
       forms: [
         {
           type: 'upload',
           prop: 'pic',
           label: '图片',
-          required: true,
+          required: true
-          crop: false
         },
         {
           type: 'input',
@@ -4329,26 +4328,14 @@ export default {
           type: 'link',
           prop: 'link',
           label: '链接'
+        },
+        {
+          type: 'textarea',
+          prop: 'des',
+          label: '描述'
         }
       ],
       form: {
-        pic: '',
-        title: '',
-        link: {
-          linkName: '无',
-          connectionType: 1,
-          columnId: [],
-          articleId: '',
-          linkAddress	: '',
-          site: '',
-          otherColumnId: [],
-          otherArticleId: '',
-          isOpen: 1
-        },
-        isEnable: 1
-      },
-      list: [
-        {
         pic: 'http://10.10.11.7/images/survey/1.png',
         title: 'S³FEL概况',
         link: {
@@ -4361,18 +4348,16 @@ export default {
           otherColumnId: [],
           otherArticleId: '',
           isOpen: 1
-          },
-          isEnable: 1
         }
-      ]
+      }
     },
     {
       type: 'form',
       forms: [
         {
-          type: 'upload',
+          type: 'video',
-          prop: 'pic',
+          prop: 'video',
-          label: '图片',
+          label: '视频',
           required: true
         },
         {
@@ -4382,12 +4367,14 @@ export default {
         }
       ],
       form: {
-        pic: 'http://10.10.11.7/images/exp/1.png',
+        video: '',
-        des: `       科学实验站是S³FEL面向国家重大需求、聚焦科学前沿和引领地区产业发展的关键，旨在重点探究量子材料、能源催化、生物医药、大气与星际科学、原子分子科学等领域的关键技术和科学难题。S³FEL的供光具有超高时间分辨（40飞秒）、超高重复频率（最高百万赫兹）和超高亮度（电子束能量达2.5 Gev）的特点。
+        des: `<p style="line-height: 32px;"><span style="font-family: Microsoft Yahei;"><span style="font-size: 19px;">&nbsp; &nbsp; &nbsp; 2006年，世界上第一台软X射线自由电子激光（简称FLASH）诞生于德国汉堡同步加速器实验室。 FLASH首次发出波长短至13.5 纳米、每秒150次脉冲、脉冲激光能量高达170 微焦的激光，并首次得到了非晶样品的高分辨率衍射图像。2009年，世界第一台硬X 射线自由电子线性相干光源 (简称LCLS)成功出光。 LCLS可提供更高亮度和更好横向相干性的XFEL脉冲，且脉冲亮度高达13.6 GeV。</span></span></p>
 
-        S³FEL可在原子尺度上研究复杂生物分子和材料的结构及组成，进而绘制病毒或细胞的原子量级三维精细结构，有助于科学家更深入地了解生物分子的结构和功能，为新药研发提供依据。在能源催化领域，S³FEL可研究飞秒内的化学变化，如化学键的形成和断裂、反应体系中电荷和能量的转移、反应过程中催化剂表面结构的动态演变等， 有助于科学家更好地研究复杂催化过程的反应机理和动力学过程，进而提高传统能源的利用效率，加快新能源开发。S³FEL还可用于探索极端电场或磁场强度下的物质变化，如研究星云和恒星的演变，探索生命的起源等。`
+        <p style="line-height: 32px;"><span style="font-family: Microsoft Yahei;"><span style="font-size: 19px;">&nbsp; &nbsp; &nbsp; 我国在自由电子激光领域建成和在建的装置共有四台，分别是由中国科学院大连化学物理研究所牵头建设的大连相干光源出光，低重复频率，主要工作在极紫外波段）、由中国科学院上海应用物理研究所牵头建设的软X射线自由电子激光装置（ 2021年建成出光，低重复频率，主要工作在软X射线波段）、由上海科技大学牵头建设的硬X射线自由电子激光装置（建设中，高重复频率，主要工作在硬X射线波段）、由深圳综合粒子设施研究院牵头建设的深圳中能高重复频率X射线自由电子激光。</span></span></p>`
       }
     },
+  ],
+  overviewLocation: [
     {
       type: 'form',
       forms: [
@@ -4398,26 +4385,15 @@ export default {
           required: true
         },
         {
-          type: 'textarea',
+          type: 'input',
-          prop: 'des',
+          prop: 'title',
-          label: '描述'
+          label: '标题',
-        }
+          required: true
-      ],
-      form: {
-        pic: 'http://10.10.11.7/images/exp/1.png',
-        des: `       科学实验站是S³FEL面向国家重大需求、聚焦科学前沿和引领地区产业发展的关键，旨在重点探究量子材料、能源催化、生物医药、大气与星际科学、原子分子科学等领域的关键技术和科学难题。S³FEL的供光具有超高时间分辨（40飞秒）、超高重复频率（最高百万赫兹）和超高亮度（电子束能量达2.5 Gev）的特点。
-
-        S³FEL可在原子尺度上研究复杂生物分子和材料的结构及组成，进而绘制病毒或细胞的原子量级三维精细结构，有助于科学家更深入地了解生物分子的结构和功能，为新药研发提供依据。在能源催化领域，S³FEL可研究飞秒内的化学变化，如化学键的形成和断裂、反应体系中电荷和能量的转移、反应过程中催化剂表面结构的动态演变等， 有助于科学家更好地研究复杂催化过程的反应机理和动力学过程，进而提高传统能源的利用效率，加快新能源开发。S³FEL还可用于探索极端电场或磁场强度下的物质变化，如研究星云和恒星的演变，探索生命的起源等。`
-      }
         },
         {
-      type: 'form',
+          type: 'link',
-      forms: [
+          prop: 'link',
-        {
+          label: '链接'
-          type: 'video',
-          prop: 'video',
-          label: '视频',
-          required: true
         },
         {
           type: 'textarea',
@@ -4426,9 +4402,19 @@ export default {
         }
       ],
       form: {
-        video: '',
+        pic: 'http://10.10.11.7/images/survey/1.png',
-        des: `      2006年，世界上第一台软X射线自由电子激光（简称FLASH）诞生于德国汉堡同步加速器实验室。 FLASH首次发出波长短至13.5 纳米、每秒150次脉冲、脉冲激光能量高达170 微焦的激光，并首次得到了非晶样品的高分辨率衍射图像。2009年，世界第一台硬X 射线自由电子线性相干光源 (简称LCLS)成功出光。 LCLS可提供更高亮度和更好横向相干性的XFEL脉冲，且脉冲亮度高达13.6 GeV。
+        title: 'S³FEL概况',
-        我国在自由电子激光领域建成和在建的装置共有四台，分别是由中国科学院大连化学物理研究所牵头建设的大连相干光源出光，低重复频率，主要工作在极紫外波段）、由中国科学院上海应用物理研究所牵头建设的软X射线自由电子激光装置（ 2021年建成出光，低重复频率，主要工作在软X射线波段）、由上海科技大学牵头建设的硬X射线自由电子激光装置（建设中，高重复频率，主要工作在硬X射线波段）、由深圳综合粒子设施研究院牵头建设的深圳中能高重复频率X射线自由电子激光。`
+        link: {
+          linkName: '无',
+          connectionType: 1,
+          columnId: [],
+          articleId: '',
+          linkAddress	: '',
+          site: '',
+          otherColumnId: [],
+          otherArticleId: '',
+          isOpen: 1
+        }
       }
     },
     {
@@ -4441,7 +4427,9 @@ export default {
         }
       ],
       form: {
-        des: `      S³FEL是光明科学城大科学装置集群的重要成员，建设地点位于深圳市光明区北片区，毗邻莲塘水库，占地面积约40万平方米，其中S³FEL装置的主体建筑总长约1800米。`
+        des: `<p style="margin-bottom: 20px;line-height: 1.5;"><span style="font-family: 'Microsoft Yahei'; font-size: 19px;">&nbsp; &nbsp; &nbsp; S&sup3;FEL是光明科学城大科学装置集群的重要成员，建设地点位于深圳市光明区北片区，毗邻莲塘水库，占地面积约40万平方米，其中S&sup3;FEL装置的主体建筑总长约1800米。</span></p>
+        
+        <img src="http://10.10.11.7/images/survey/2.png" alt="" >`
       }
     },
   ],

src/libs/util.js

@@ -20,6 +20,28 @@ const util = {
       })
       return result
     },
+    //返回格式化时间，传参例如："yyyy-MM-dd hh:mm:ss"
+    formatDate(fmt, date) {
+        var date = date ? date : new Date();
+        var o = {
+            "M+": date.getMonth() + 1,                 //月份
+            "d+": date.getDate(),                    //日
+            "h+": date.getHours(),                   //小时
+            "m+": date.getMinutes(),                 //分
+            "s+": date.getSeconds(),                 //秒
+            "q+": Math.floor((date.getMonth() + 3) / 3), //季度
+            "S": date.getMilliseconds()             //毫秒
+        };
+        if (/(y+)/.test(fmt)) {
+            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+        }
+        for (var k in o) {
+            if (new RegExp("(" + k + ")").test(fmt)) {
+                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+            }
+        }
+        return fmt;
+    },
     // 传入文件后缀判断是否是视频
     isVideo(ext) {
         if (exts.video.includes(ext)) return true;

src/mixins/page/index.js

@@ -9,7 +9,8 @@ export default {
       site: this.$store.state.content.site,
       columnId: +this.$route.query.id,
       id: '',
-      originModules: [],
+      modules: [],
+      originModules: '[]',
       diaVisible: false,
       curModule: 0,
       curListIndex: 0,

src/pages/article/add/index.vue

@@ -1231,7 +1231,7 @@ export default {
             if (!form.titleImg ) return Util.errorMsg('请上传封面')
           }
           if (tId === 25) {
-            if (!form.time.length && isRelease) return Util.errorMsg('请选择起止时间')
+            if ((!form.time || !form.time.length) && isRelease) return Util.errorMsg('请选择起止时间')
             form.activityStartTime = form.time[0]
             form.activityEndTime = form.time[1]
           }
@@ -1264,6 +1264,8 @@ export default {
         })
         form.lableId = form.lableId.join(',')
 
+        form.releaseTime = Util.formatDate('yyyy-MM-dd', new Date(form.releaseTime)) // 发布日期转化为年月日格式
+
         form.isRelease = isRelease
         this.submiting = true
         if (form.id) {

src/pages/article/list/index.vue

@@ -230,6 +230,9 @@ export default {
         if (this.modifiedTimeSort !== '') data.modifiedTimeSort = this.modifiedTimeSort
         if (this.publicationTimeSort !== '') data.publicationTimeSort = this.publicationTimeSort
         this.$post(this.api.queryArticle, data).then(({ data }) => {
+          data.records.map(e => {
+            e.releaseTime = e.releaseTime.split(' ')[0]
+          })
           this.list = data.records
           this.total = +data.total
         }).catch(err => {})

src/pages/column/add/index.vue

@@ -690,17 +690,20 @@ export default {
       // 保存长页模板
       savePage(columnId) {
         const { listStyleId } = this.form
+        const module = Modules[this.pageStyle.find(e => e.id === listStyleId)] // 获取module.js里存的初始长页数据
+        if (module) {
           this.$post(this.api[this.id ? 'updatePage' : 'savePage'], {
             columnId,
             state: 1,
             sort: 1,
             founderId: this.userId,
             editorId: this.userId,
-          jsonBeforeEditing: Modules[this.pageStyle.find(e => e.id === listStyleId).path],
+            jsonBeforeEditing: module.path,
-          theEditedJson: Modules[this.pageStyle.find(e => e.id === listStyleId).path],
+            theEditedJson: module.path,
           }).then(res => {}).catch(err => {})
         }
       }
+    }
 };
 </script>
 

src/pages/column/list/index.vue

@@ -207,7 +207,7 @@ export default {
           ],
           sortVisible: false,
           sortColumns: [],
-          sortLevel: 1
+          sortLevel: 1,
         };
     },
     watch: {

src/pages/column/page/deviceIntroBeam.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="wrap">
+    <div class="banner">装置介绍</div>
+
+    <div class="block share">
+      <div class="inner">
+        <h6>光束线</h6>
+        <p class="en">The beam line</p>
+        <div class="sum">S³FEL光束线覆盖的波段范围为1~30 nm，包含前端区、光学传输系统和诊断系统，是连接自由电子激光光源和后端科学实验站的桥梁。</div>
+        <div class="flex">
+          <div class="left">
+            <div class="des">光束线的作用是将光源发出的超快、全相干、高亮度的激光高效地传输到实验站样品处，并在传输过程中对FEL脉冲进行频谱诊断、脉冲能量诊断、光斑位置诊断、光斑横向分布诊断、脉冲到达时间诊断、波前诊断、偏振诊断等。同时根据后端实验站的不同科学需求，可进一步对FEL脉冲进行单色化、脉冲能量衰减、横向光斑微聚焦等。</div>
+          </div>
+          <img class="pic" src="@/assets/images/device/1.png" alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="intro">
+      <img class="pic" src="@/assets/images/device/2.png" alt="">
+      <div class="des">波荡器是S³FEL光束线的关键部件，由一系列N极和S极交替排列的磁铁阵列构成，是一种能够产生空间周期性分布磁场的电磁装置。被超导直线加速器加速的高能电子束经过波荡器时，将扭摆状波荡前行。通过合理选择电子束和波荡器的参数，可使电子束在每个波动周期内与波荡器发出的同步辐射相互干涉，以获得超高亮度、强相干、高重频的X射线自由电子激光。</div>
+    </div>
+
+    <div class="unit">
+      <h6>波荡器性能指标</h6>
+      <img class="pic" src="@/assets/images/device/3.png" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../styles/page/page.scss";
+.wrap {
+  background: url(../../../assets/images/device/4.png) (100% 1363px)/auto no-repeat;
+}
+.banner {
+  background: url(../../../assets/images/device/13.png) 0 0/100% 100% no-repeat;
+}
+.share {
+  position: relative;
+  .inner {
+    width: 1323px;
+  }
+  .left {
+    width: 547px;
+    margin-right: 66px;
+  }
+  h6 {
+    position: relative;
+    font-size: 48px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+  }
+  .en {
+    margin-top: -35px;
+    font-size: 48px;
+    font-family: PingFangSC-Light, PingFang SC;
+    font-weight: 300;
+    color: #E3E3E3;
+  }
+  .sum {
+    margin-top: 60px;
+    font-size: 28px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    line-height: 44px;
+  }
+  .des {
+    margin-top: 25px;
+    font-size: 18px;
+    color: #333;
+    line-height: 37px;
+    overflow: visible;
+  }
+  .pic {
+    width: 710px;
+    height: 509px;
+    margin-top: -30px;
+    border-top-left-radius: 20px;
+  }
+}
+.intro {
+  display: flex;
+  align-items: center;
+  max-width: 1490px;
+  width: 90%;
+  height: 393px;
+  margin-bottom: 67px;
+  .pic {
+    width: 60%;
+    height: 100%;
+  }
+  .des {
+    height: 100%;
+    padding: 57px 60px 20px 60px;
+    font-size: 22px;
+    color: #fff;
+    line-height: 40px;
+    background: #2E4984;
+  }
+}
+.unit {
+  width: 986px;
+  padding-bottom: 60px;
+  margin: 0 auto;
+  h6 {
+    padding-left: 15px;
+    margin-bottom: 15px;
+    font-size: 20px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #2A2A2A;
+    border-left: 4px solid #1583FF;
+  }
+}
+</style>

src/pages/column/page/deviceIntroLayout.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="wrap">
+    <div class="banner">装置介绍</div>
+
+    <div class="block share">
+      <div class="inner">
+        <h6>整体布局</h6>
+        <p class="en">The overall layout</p>
+        <div class="card">S³FEL装置主要包括一台超导直线加速器（电子束能量为2.5 GeV、重复频率为1 MHz）、4条波荡器线及首批14个实验线站。根据具体的功能可以分为注入器、主加速器、自由电子激光放大器（波荡器线）、光束线和实验站，还有包括束流诊断、控制、激光、同步、数据采集与处理等在内的公共子系统，以及低温、公用设施等配套系统和设施。</div>
+        <div class="flex" style="margin-top: 290px">
+          <div class="left">
+            <div class="des">    S³FEL首批拟建设4条波荡器线，分别是2条外种子（EEHG）线和2条自放大自发辐射（SASE）线，以同时满足首批实验站的不同研究需求。按照能区划分，FEL-1、FEL-2工作在自放大自发辐射模式（SASE），并且为将来升级为self-seeding模式预留空间。FEL-1出光波段为1-3 nm（调整电子束能量时可覆盖1-6 nm），FEL-2输出光波长为2.3-15 nm，作为光刻研究专用光束线。FEL-3和4基于回声型谐波产生原理（EEHG），FEL-3输出波长为2.3-15 nm，涵盖水窗波段，FEL-4输出波长为5-30 nm的极紫外FEL脉冲。通过快速束流分配技术，波荡器束线可同时工作。各条波荡器线产生的FEL光，通过光束线系统实现FEL光学参数的实时诊断，包括光强、光谱、光斑位置，光斑尺寸以及相干性等，并通过传输与聚焦系统传输至后端的实验站，以满足各个实验站对光源的不同需求。首批建设实验站共涉及6个前沿科技领域，分别为极紫外光刻、量子材料、能源催化、生物医药、大气与星际科学以及原子分子科学。</div>
+          </div>
+          <img class="pic" src="@/assets/images/device/6.png" alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="intro">
+      <img class="bg" src="@/assets/images/device/7.png" alt="">
+      <img class="pic" src="@/assets/images/device/8.png" alt="">
+    </div>
+
+    <div class="unit">
+      <h6>S³FEL性能指标</h6>
+      <img class="pic" src="@/assets/images/device/9.png" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Breadcrumb from '@/components/breadcrumb'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      routes: []
+    }
+  },
+  components: {
+    Breadcrumb
+  },
+  mounted() {
+    
+  },
+  methods: {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../styles/page/page.scss";
+.wrap {
+  background: url(../../../assets/images/device/4.png) bottom right/auto no-repeat;
+}
+.banner {
+  background: url(../../../assets/images/device/14.png) 0 0/100% 100% no-repeat;
+}
+.share {
+  position: relative;
+  .inner {
+    width: 90%;
+    max-width: 1323px;
+  }
+  .left {
+    width: 547px;
+    margin-right: 66px;
+  }
+  h6 {
+    position: relative;
+    font-size: 48px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+  }
+  .en {
+    margin: -35px 0 40px;
+    font-size: 48px;
+    font-family: PingFangSC-Light, PingFang SC;
+    font-weight: 300;
+    color: #E3E3E3;
+  }
+  .card {
+    position: absolute;
+    left: 0;
+    max-width: 1671px;
+    width: 90%;
+    padding: 32px 52px 25px 16%;
+    font-size: 24px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 38px;
+    background: url(../../../assets/images/device/5.png) 0 0/cover no-repeat;
+  }
+  .des {
+    margin-top: 25px;
+    font-size: 18px;
+    color: #333;
+    line-height: 37px;
+    overflow: visible;
+  }
+  .pic {
+    width: 710px;
+    height: 509px;
+    border-top-left-radius: 20px;
+  }
+}
+.intro {
+  position: relative;
+  height: 794px;
+  margin-bottom: 37px;
+  .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .pic {
+    position: absolute;
+    top: 67px;
+    left: 15%;
+    width: 74%;
+  }
+}
+.unit {
+  width: 986px;
+  padding-bottom: 60px;
+  margin: 0 auto;
+  h6 {
+    padding-left: 15px;
+    margin-bottom: 15px;
+    font-size: 20px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #2A2A2A;
+    border-left: 4px solid #1583FF;
+  }
+}
+</style>

src/pages/column/page/deviceIntroLinear.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="wrap">
+    <div class="banner">装置介绍</div>
+
+    <div class="block history gray">
+      <div class="inner">
+        <h2 class="wow fadeInLeft">超导直线加速器-1</h2>
+        <p class="en">Superconducting linac -1</p>
+        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
+          <div class="left">
+            <h6>S³FEL的光阴极注入器/电子枪利用光电效应产生高亮度电子束团，并将其加速到90 MeV。</h6>
+            <div class="line"></div>
+            <div class="des">主加速器基于超导连续波工作模式，采用三级加速、两级压缩的结构，将电子束团能量提高到2.5 GeV；同时在保持横向发射度不变的情况下，将电子束长度从几皮秒压缩到几十飞秒，峰值流强提升到800 A以上。相比基于常温加速技术的高增益FEL，超导直线加速器技术可以有效提高电子束流的重复频率，实现最高每秒106脉冲输出（常温加速技术为~102脉冲/秒），进而大幅度提高FEL激光的平均功率。</div>
+          </div>
+          <img class="bg" src="@/assets/images/device/10.png" alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="block intro">
+      <div class="inner">
+        <div class="left">
+          <h5>S³FEL超导直线加速器示意图</h5>
+          <img src="@/assets/images/device/11.png" alt="">
+        </div>
+        <div class="right">
+          <h6>S³FEL超导直线加速器性能指标</h6>
+          <img src="@/assets/images/device/12.png" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../styles/page/page.scss";
+.banner {
+  background: url(../../../assets/images/device/15.png) 0 0/100% 100% no-repeat;
+}
+.history {
+  .inner {
+    width: 90%;
+    max-width: 1504px;
+  }
+  h2 {
+    position: relative;
+    font-size: 48px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #1C1C1C;
+  }
+  .en {
+    margin: -35px 0 40px;
+    font-size: 48px;
+    font-family: PingFangSC-Light, PingFang SC;
+    font-weight: 300;
+    color: #E3E3E3;
+  }
+  .texts {
+    display: flex;
+    justify-content: space-between;
+    padding: 82px 0 30px 38px;
+    margin-top: 20px;
+    background: #1583FF;
+    border-radius: 65px 100px 0px 0px;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+  .left {
+    width: 50%;
+  }
+  h6 {
+    font-size: 28px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+  }
+  .line {
+    width: 214px;
+    height: 5px;
+    margin: 54px 0 44px;
+    background: #FFFFFF;
+    opacity: 0.52;
+  }
+  .des {
+    font-size: 22px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 44px;
+    overflow: visible;
+  }
+  .bg {
+    width: 50%;
+    margin: -142px -50px 0 0;
+    border-top-left-radius: 30px;
+  }
+}
+.intro {
+  .inner {
+    display: flex;
+    width: 90%;
+    max-width: 1504px;
+  }
+  .left {
+    width: 30%;
+  }
+  .right {
+    width: 68%;
+    margin-left: 2%;
+  }
+  h5 {
+    margin-bottom: 15px;
+    font-size: 20px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #2A2A2A;
+  }
+  h6 {
+    padding-left: 15px;
+    margin-bottom: 15px;
+    font-size: 20px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #2A2A2A;
+    border-left: 4px solid #1583FF;
+  }
+  img {
+    width: 100%;
+    height: 85%;
+  }
+}
+</style>

src/pages/column/page/overviewLocation.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="wrap">
+    <div class="actions">
+      <p class="page-name">页面设置/概况</p>
+      <div>
+        <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="back">放弃编辑</el-button> 
+      </div>
+    </div>
+
+    <div class="modules">
+      <div class="relative">
+        <div class="single-banner single-banner-overview">
+          <img class="banner-img" :src="modules[0].form.pic" alt="">
+          <div class="texts">
+            <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+          </div>
+        </div>
+        <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
+      </div>
+
+      <ul class="tabs wow fadeInLeft">
+        <template v-for="(item, i) in tabs">
+          <li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li>
+        </template>
+      </ul>
+
+      <div class="tab-content">
+        <div class="c-wrap">
+          <div v-html="modules[1].form.des"></div>
+          <div class="cover" style="min-height: 300px;" @click="toSet(1)">点击更换描述</div>
+        </div>
+      </div>
+    </div>
+
+    <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Modules from '@/const/modules'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      modules: Modules.overviewLocation,
+      active: 2,
+      tabs: ['S³FEL介绍', '发展历程', 'S³FEL宣传片', '地理位置', '机构设置']
+    }
+  },
+  mounted() {
+    this.$store.commit('user/setCrumbs', [
+      {
+        name: '站点管理',
+        route: '/site'
+      },
+      {
+        name: '内容管理',
+        route: '/column'
+      },
+      {
+        name: '栏目管理',
+        route: '/column'
+      },
+      {
+        name: '概况-地理位置'
+      }
+    ])
+  },
+  methods: {
+    // tab回调
+    tabChange(i) {
+      this.active = i
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../styles/page/page.scss";
+.wrap {
+  background: url(../../../assets/images/survey1.png) (0 559px)/auto no-repeat,
+              url(../../../assets/images/survey2.png) (bottom right)/auto no-repeat;
+}
+.tabs {
+  display: flex;
+  justify-content: center;
+  box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
+  li {
+    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;
+    }
+  }
+}
+.tab-content {
+  width: 1000px;
+  padding: 77px 0;
+  margin: 0 auto;
+}
+.video {
+  width: 100%;
+  margin-bottom: 55px;
+}
+.text {
+  font-size: 18px;
+  color: #020202;
+  line-height: 32px;
+}
+</style>

src/pages/column/page/overviewTrailer.vue

@@ -12,13 +12,12 @@
 
     <div class="modules">
       <div class="relative">
-        <el-carousel height="480px" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+        <div class="single-banner single-banner-overview">
-          <template v-for="(item, i) in modules[0].list">
+          <img class="banner-img" :src="modules[0].form.pic" alt="">
-            <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div class="texts">
-              <img width="100%" height="100%" :src="item.pic" alt="">
+            <h6 class="banner-title">{{ modules[0].form.title }}</h6>
-            </el-carousel-item>
+          </div>
-          </template>
+        </div>
-        </el-carousel>
         <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
       </div>
 
@@ -29,17 +28,13 @@
       </ul>
 
       <div class="tab-content">
-        <div v-if="active === 2" class="c-wrap">
+        <div class="c-wrap">
-          <video v-if="modules[3].form.video" class="video" ref="video" autoplay controls loop>
+          <video v-if="modules[1].form.video" class="video" ref="video" autoplay controls loop>
-            <source :src="modules[3].form.video" type="video/mp4">
+            <source :src="modules[1].form.video" type="video/mp4">
             您的浏览器不支持 video 标签。
           </video>
-          <div class="text">{{ modules[3].form.des }}</div>
+          <div class="text" v-html="modules[1].form.des"></div>
-          <div class="cover" @click="toSet(3)">点击更换视频与描述</div>
+          <div class="cover" @click="toSet(1)">点击更换视频与描述</div>
-        </div>
-        <div v-if="active === 3" class="c-wrap">
-          <div v-html="modules[4].form.des"></div>
-          <div class="cover" style="min-height: 300px;" @click="toSet(4)">点击更换描述</div>
         </div>
       </div>
     </div>
@@ -55,7 +50,7 @@ export default {
   mixins: [mixins],
   data() {
     return {
-      modules: Modules.survey,
+      modules: Modules.overviewTrailer,
       active: 2,
       tabs: ['S³FEL介绍', '发展历程', 'S³FEL宣传片', '地理位置', '机构设置']
     }
@@ -75,7 +70,7 @@ export default {
         route: '/column'
       },
       {
-        name: '概况'
+        name: '概况-宣传片'
       }
     ])
   },

src/router/modules/column.js

@@ -104,10 +104,34 @@ export default {
       meta: { title: '装置介绍-实验站' }
     },
     {
-      name: `${pre}survey`,
+      name: `${pre}deviceIntroBeam`,
-      path: `survey`,
+      path: `deviceIntroBeam`,
-      component: () => import('@/pages/column/page/survey'),
+      component: () => import('@/pages/column/page/deviceIntroBeam'),
-      meta: { title: '概况' }
+      meta: { title: '装置介绍-光束线' }
+    },
+    {
+      name: `${pre}deviceIntroLayout`,
+      path: `deviceIntroLayout`,
+      component: () => import('@/pages/column/page/deviceIntroLayout'),
+      meta: { title: '装置介绍-整体布局' }
+    },
+    {
+      name: `${pre}deviceIntroLinear`,
+      path: `deviceIntroLinear`,
+      component: () => import('@/pages/column/page/deviceIntroLinear'),
+      meta: { title: '装置介绍-超导直线加速器' }
+    },
+    {
+      name: `${pre}overviewTrailer`,
+      path: `overviewTrailer`,
+      component: () => import('@/pages/column/page/overviewTrailer'),
+      meta: { title: '概况-宣传片' }
+    },
+    {
+      name: `${pre}overviewLocation`,
+      path: `overviewLocation`,
+      component: () => import('@/pages/column/page/overviewLocation'),
+      meta: { title: '概况-地理位置' }
     },
     {
       name: `${pre}sfel`,

src/styles/page/page.scss

@@ -36,6 +36,12 @@
     width: 1505px;
   }
 }
+.banner {
+  height: 280px;
+  padding: 123px 0 0 243px;
+  font-size: 48px;
+  color: #fff;
+}
 .single-banner {
   position: relative;
   color: #fff;
@@ -48,6 +54,10 @@
     top: 160px;
     left: 267px;
   }
+  &.single-banner-overview .texts {
+    top: 332px;
+    left: 278px;
+  }
   .banner-title {
     margin-bottom: 19px;
     font-size: 48px;