fix

src/layouts/navbar/index.vue

@@ -1,84 +1,114 @@
 <template>
   <div>
-    <div v-show="!collapse" class="flex-1">
+    <div v-show="!collapse"
+         class="flex-1">
       <div class="logo">
-        <img src="@/assets/images/logo.png" alt="">
+        <img src="@/assets/images/logo.png"
+             alt="">
         <span>网站管理后台</span>
       </div>
-      <el-menu
+      <el-menu :default-active="active"
-        :default-active="active"
+               :default-openeds="['user']"
-        :default-openeds="['user']"
+               background-color="#001529"
-        background-color="#001529"
+               text-color="#fff"
-        text-color="#fff"
+               active-text-color="#fff"
-        active-text-color="#fff"
+               :collapse="collapse"
-        :collapse="collapse"
+               :collapse-transition="false"
-        :collapse-transition="false"
+               @select="menuSelect">
-        @select="menuSelect"
-      >
         <template v-for="item in menus">
           <template v-if="item.subs">
-            <el-submenu :index="item.index" :key="item.index">
+            <el-submenu :index="item.index"
-                <template slot="title">
+                        :key="item.index">
-                  <img class="icon" :src="require('@/assets/images/' + item.icon + '.png')" alt="">
+              <template slot="title">
-                  <span slot="title">{{ item.title }}</span>
+                <img class="icon"
-                </template>
+                     :src="require('@/assets/images/' + item.icon + '.png')"
-                <template v-for="subItem in item.subs">
+                     alt="">
-                  <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
+                <span slot="title">{{ item.title }}</span>
-                    <template slot="title">{{ subItem.title }}</template>
+              </template>
-                    <el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">{{ threeItem.title }}</el-menu-item>
+              <template v-for="subItem in item.subs">
-                  </el-submenu>
+                <el-submenu v-if="subItem.subs"
-                  <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
+                            :index="subItem.index"
-                </template>
+                            :key="subItem.index">
+                  <template slot="title">{{ subItem.title }}</template>
+                  <el-menu-item v-for="(threeItem,i) in subItem.subs"
+                                :key="i"
+                                :index="threeItem.index">{{ threeItem.title }}</el-menu-item>
+                </el-submenu>
+                <el-menu-item v-else
+                              :index="subItem.index"
+                              :key="subItem.index">{{ subItem.title }}</el-menu-item>
+              </template>
             </el-submenu>
           </template>
           <template v-else>
-            <el-menu-item :index="item.index" :key="item.index">
+            <el-menu-item :index="item.index"
-              <img class="icon" :src="require('@/assets/images/' + item.icon + '.png')" alt="">
+                          :key="item.index">
+              <img class="icon"
+                   :src="require('@/assets/images/' + item.icon + '.png')"
+                   alt="">
               <span slot="title">{{ item.title }}</span>
             </el-menu-item>
           </template>
         </template>
       </el-menu>
     </div>
-    <div v-show="collapse" class="light">
+    <div v-show="collapse"
+         class="light">
       <div class="col-wrap">
-        <img class="logo-icon" src="@/assets/images/logo.png" alt="">
+        <img class="logo-icon"
+             src="@/assets/images/logo.png"
+             alt="">
         <ul class="col-nav">
-          <li v-for="(item, i) in colNav" :key="i" @click="menuSelect(item.index)">
+          <li v-for="(item, i) in colNav"
-            <img width="16" :src="require('@/assets/images/' + item.icon + '.png')" alt="">
+              :key="i"
+              @click="menuSelect(item.index)">
+            <img width="16"
+                 :src="require('@/assets/images/' + item.icon + '.png')"
+                 alt="">
           </li>
         </ul>
       </div>
       <div class="col-menu">
         <div class="name">{{ site.siteName }}</div>
-        <el-menu
+        <el-menu v-if="colRefresh"
-          v-if="colRefresh"
+                 :default-active="siteActive"
-          :default-active="siteActive"
+                 background-color="#fff"
-          background-color="#fff"
+                 text-color="#333"
-          text-color="#333"
+                 active-text-color="#fff"
-          active-text-color="#fff"
+                 :collapse-transition="false"
-          :collapse-transition="false"
+                 router>
-          router
-        >
           <template v-for="item in sites">
             <template v-if="item.subs">
-              <el-submenu :index="item.index" :key="item.index">
+              <el-submenu :index="item.index"
-                  <template slot="title">
+                          :key="item.index">
-                    <img width="14" class="icon" :src="require('@/assets/images/' + item.icon + '.png')" alt="">
+                <template slot="title">
-                    <span slot="title">{{ item.title }}</span>
+                  <img width="14"
-                  </template>
+                       class="icon"
-                  <template v-for="subItem in item.subs">
+                       :src="require('@/assets/images/' + item.icon + '.png')"
-                    <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
+                       alt="">
-                      <template slot="title">{{ subItem.title }}</template>
+                  <span slot="title">{{ item.title }}</span>
-                      <el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">{{ threeItem.title }}</el-menu-item>
+                </template>
-                    </el-submenu>
+                <template v-for="subItem in item.subs">
-                    <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
+                  <el-submenu v-if="subItem.subs"
-                  </template>
+                              :index="subItem.index"
+                              :key="subItem.index">
+                    <template slot="title">{{ subItem.title }}</template>
+                    <el-menu-item v-for="(threeItem,i) in subItem.subs"
+                                  :key="i"
+                                  :index="threeItem.index">{{ threeItem.title }}</el-menu-item>
+                  </el-submenu>
+                  <el-menu-item v-else
+                                :index="subItem.index"
+                                :key="subItem.index">{{ subItem.title }}</el-menu-item>
+                </template>
               </el-submenu>
             </template>
             <template v-else>
-              <el-menu-item :index="item.index" :key="item.index">
+              <el-menu-item :index="item.index"
-                <img class="icon" :src="require('@/assets/images/' + item.icon + '.png')" alt="">
+                            :key="item.index">
+                <img class="icon"
+                     :src="require('@/assets/images/' + item.icon + '.png')"
+                     alt="">
                 <span slot="title">{{ item.title }}</span>
               </el-menu-item>
             </template>
@@ -93,228 +123,228 @@
 import { mapState, mapActions } from 'vuex'
 import Setting from '@/setting'
 export default {
-    data() {
+  data () {
-      return {
+    return {
-        site: this.$store.state.content.site,
+      site: this.$store.state.content.site,
-        collapse: false,
+      collapse: false,
-        active: this.$route.path,
+      active: this.$route.path,
-        siteActive: '/column',
+      siteActive: '/column',
-        menus: [],
+      menus: [],
-        defaultMenus: [
+      defaultMenus: [
-          {
+        {
-            icon: 'site',
+          icon: 'site',
-            index: '/site/list',
+          index: '/site/list',
-            title: '站点管理'
+          title: '站点管理'
-          },
+        },
-          {
+        {
-            icon: 'user',
+          icon: 'user',
-            index: 'user',
+          index: 'user',
-            title: '用户管理',
+          title: '用户管理',
-            subs: [
+          subs: [
-              {
+            {
-                index: '/user/list',
+              index: '/user/list',
-                title: '组织与账号管理'
+              title: '组织与账号管理'
-              },
+            },
-              {
+            {
-                index: '/role/list',
+              index: '/role/list',
-                title: '角色管理'
+              title: '角色管理'
-              },
+            },
-              {
+            {
-                index: '/userGroup/list',
+              index: '/userGroup/list',
-                title: '用户组管理'
+              title: '用户组管理'
-              }
+            }
-            ]
+          ]
-          },
+        },
-          {
+        {
-            icon: 'annex',
+          icon: 'annex',
-            index: '/annex/list',
+          index: '/annex/list',
-            title: '附件管理'
+          title: '附件管理'
-          }
-        ],
-        colNav: [
-          {
-            index: '/site/list',
-            icon: 'site-active'
-          },
-          {
-            index: 'user',
-            icon: 'user'
-          },
-          {
-            index: '/annex/list',
-            icon: 'annex'
-          }
-        ],
-        sites: [
-          {
-            icon: 'content',
-            index: 'content',
-            title: '内容管理',
-            subs: [
-              {
-                index: '/column',
-                title: '栏目管理'
-              },
-              {
-                index: '/article',
-                title: '文章管理'
-              }
-            ]
-          }
-        ],
-        colRefresh: true
-      };
-    },
-    computed: {
-      ...mapState('auth', [
-        'btns'
-      ])
-    },
-    watch: {
-      "$route"(to, from) {
-        this.active = `/${this.$route.path.split('/')[1]}/list`
-        const { path } = this.$route
-        const ori = this.collapse
-        this.collapse = !!this.sites[0].subs.find(e => path.includes(e.index))
-        // 刷新菜单
-        if ((!ori && this.sites[0].subs.find(e => from.path.includes(e.index))) || path === '/site/list') {
-          this.siteActive = '/column'
-          this.colRefresh = false
-          this.$nextTick(() => {
-            this.colRefresh = true
-          })
         }
-        this.site = this.$store.state.content.site
+      ],
-      }
+      colNav: [
-    },
+        {
-    created() {
+          index: '/site/list',
-      // 获取当前路由，如果是在站点导航里面的页面，则展开站点导航并选中该路径
+          icon: 'site-active'
+        },
+        {
+          index: 'user',
+          icon: 'user'
+        },
+        {
+          index: '/annex/list',
+          icon: 'annex'
+        }
+      ],
+      sites: [
+        {
+          icon: 'content',
+          index: 'content',
+          title: '内容管理',
+          subs: [
+            {
+              index: '/column',
+              title: '栏目管理'
+            },
+            {
+              index: '/article',
+              title: '文章管理'
+            }
+          ]
+        }
+      ],
+      colRefresh: true
+    };
+  },
+  computed: {
+    ...mapState('auth', [
+      'btns'
+    ])
+  },
+  watch: {
+    "$route" (to, from) {
+      this.active = `/${this.$route.path.split('/')[1]}/list`
       const { path } = this.$route
+      const ori = this.collapse
       this.collapse = !!this.sites[0].subs.find(e => path.includes(e.index))
-      if (this.collapse) this.siteActive = '/' + path.split('/')[1]
+      // 刷新菜单
-      this.initMenu()
+      if ((!ori && this.sites[0].subs.find(e => from.path.includes(e.index))) || path === '/site/list') {
+        this.siteActive = '/column'
+        this.colRefresh = false
+        this.$nextTick(() => {
+          this.colRefresh = true
+        })
+      }
+      this.site = this.$store.state.content.site
+    }
+  },
+  created () {
+    // 获取当前路由，如果是在站点导航里面的页面，则展开站点导航并选中该路径
+    const { path } = this.$route
+    this.collapse = !!this.sites[0].subs.find(e => path.includes(e.index))
+    if (this.collapse) this.siteActive = '/' + path.split('/')[1]
+    this.initMenu()
+  },
+  methods: {
+    ...mapActions('user', [
+      'logout'
+    ]),
+    // 菜单选择
+    menuSelect (index) {
+      this.collapse = false
+      // 用户管理只需展开导航，其他的则跳转
+      if (index.includes('/')) {
+        this.$router.push(index)
+      } else {
+        this.active = '/user/list'
+        this.$router.push('/user/list')
+      }
     },
-    methods: {
+    // 初始化菜单
-      ...mapActions('user', [
+    initMenu () {
-        'logout'
+      // 如果开启了动态路由，则取store里的路由匹配
-      ]),
+      if (Setting.dynamicRoute) {
-      // 菜单选择
+        const { btns } = this
-      menuSelect(index) {
+        const menus = []
-        this.collapse = false
+        this.defaultMenus.map(e => {
-        // 用户管理只需展开导航，其他的则跳转
+          if (btns.find(n => n.includes(e.index) || n === e.title)) {
-        if (index.includes('/')) {
+            // 匹配子菜单
-          this.$router.push(index)
+            if (e.subs && e.subs.length) {
-        } else {
+              const children = []
-          this.active = '/user/list'
+              e.subs.map((j, i) => {
-          this.$router.push('/user/list')
+                btns.find(n => n.includes(j.index)) && children.push(j)
-        }
+              })
-      },
+              e.subs = children
-      // 初始化菜单
-      initMenu() {
-        // 如果开启了动态路由，则取store里的路由匹配
-        if (Setting.dynamicRoute) {
-          const { btns } = this
-          const menus = []
-          this.defaultMenus.map(e => {
-            if (btns.find(n => n.includes(e.index) || n === e.title)) {
-              // 匹配子菜单
-              if (e.subs && e.subs.length) {
-                const children = []
-                e.subs.map((j, i) => {
-                  btns.find(n => n.includes(j.index)) && children.push(j)
-                })
-                e.subs = children
-              }
-              menus.push(e)
             }
-          })
+            menus.push(e)
-          this.menus = menus
+          }
-        } else {
+        })
-          this.menus = this.defaultMenus
+        this.menus = menus
-        }
+      } else {
+        this.menus = this.defaultMenus
       }
     }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-.nav{
+.nav {
-  height: 100%;
-  background-color: #001529;
-  box-shadow: 2px 0px 6px 0px rgba(92,111,130,0.3500);
-  overflow: auto;
-  .logo {
-    display: flex;
-    align-items: center;
-    padding-left: 28px;
-    margin: 15px 0 26px;
-    font-size: 16px;
-    color: #fff;
-    img {
-      margin-right: 8px;
-    }
-  }
-  /deep/.el-menu{
-    border-right: 0 !important;
-    .icon{
-      margin: 0 11px 0 5px;
-    }
-    .el-menu-item{
-      &.is-active{
-        background-color: #2962FF !important;
-      }
-    }
-    .el-menu .el-menu-item {
-      padding-left: 50px !important;
-    }
-  }
-  .light {
-    display: flex;
     height: 100%;
-    background-color: #fff;
+    background-color: #001529;
-    overflow: hidden;
+    box-shadow: 2px 0px 6px 0px rgba(92, 111, 130, 0.35);
-    .col-wrap {
+    overflow: auto;
-      width: 64px;
+    .logo {
-      background-color: #001529;
+        display: flex;
-    }
+        align-items: center;
-    .logo-icon {
+        padding-left: 28px;
-      width: 41px;
+        margin: 15px 0 26px;
-      margin: 16px 0 30px 7px;
+        font-size: 16px;
-    }
+        color: #fff;
-    .col-nav {
+        img {
-      text-align: center;
+            margin-right: 8px;
-      li {
+        }
-        padding: 25px 0;
-        cursor: pointer;
-      }
-    }
-    .name {
-      margin: 17px 0 27px 15px;
-      font-size: 15px;
-      font-weight: 600;
-      text-align: center;
-      color: #333;
-      line-height: 32px;
-    }
-    .col-menu {
-      width: 192px;
     }
-    /deep/.el-submenu__title {
+    /deep/.el-menu {
-      padding-left: 14px !important;
+        border-right: 0 !important;
+        .icon {
+            margin: 0 11px 0 5px;
+        }
+        .el-menu-item {
+            &.is-active {
+                background-color: #2962ff !important;
+            }
+        }
+        .el-menu .el-menu-item {
+            padding-left: 50px !important;
+        }
     }
-    .icon {
+    .light {
-      margin-left: 0;
+        display: flex;
+        height: 100%;
+        background-color: #fff;
+        overflow: hidden;
+        .col-wrap {
+            width: 64px;
+            background-color: #001529;
+        }
+        .logo-icon {
+            width: 41px;
+            margin: 16px 0 30px 7px;
+        }
+        .col-nav {
+            text-align: center;
+            li {
+                padding: 25px 0;
+                cursor: pointer;
+            }
+        }
+        .name {
+            margin: 17px 0 27px 15px;
+            font-size: 15px;
+            font-weight: 600;
+            text-align: center;
+            color: #333;
+            line-height: 32px;
+        }
+        .col-menu {
+            width: 192px;
+        }
+        /deep/.el-submenu__title {
+            padding-left: 14px !important;
+        }
+        .icon {
+            margin-left: 0;
+        }
     }
-  }
 }
 
 .sidebar::-webkit-scrollbar {
-  width: 0;
+    width: 0;
 }
 .sidebar-el-menu:not(.el-menu--collapse) {
-  width: 100%;
+    width: 100%;
 }
 .sidebar > ul {
-  height: 100%;
+    height: 100%;
 }
 </style>

src/pages/article/add/index.vue

@@ -231,6 +231,11 @@
         <el-form-item v-if="form.articleTemplate === 25"
                       prop="time"
                       label="起止时间">
+          <!-- <el-input placeholder="请输入起止时间"
+                    v-model.trim="form.source"
+                    clearable
+                    maxlength="50"
+                    class="inline-input"></el-input> -->
           <el-date-picker style="width: 300px"
                           v-model="form.time"
                           type="datetimerange"

src/pages/column/page/aboutNew.vue

@@ -0,0 +1,462 @@
+<template>
+  <div class="wrap">
+    <div class="actions">
+      <p class="page-name">页面设置/ABOUT</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">
+        <el-carousel height="480px"
+                     :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+          <template v-for="(item, i) in modules[0].list">
+            <el-carousel-item v-if="item.pic && item.isEnable"
+                              :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 history gray">
+        <div class="inner c-wrap">
+          <h2 style="margin-left: 57px">{{ modules[1].form.title }}</h2>
+          <div class="texts">
+            <div class="left">
+              <h2>{{ modules[1].form.subTitle }}</h2>
+              <div class="line"></div>
+              <div class="des">{{ modules[1].form.des }}</div>
+            </div>
+            <img class="bg"
+                 width="562"
+                 height="506"
+                 :src="modules[1].form.pic"
+                 alt="">
+          </div>
+          <div class="cover"
+               @click="toSet(1)">点击更改图片、标题概述与链接</div>
+        </div>
+      </div>
+
+      <div class="block gray">
+        <div class="inner">
+          <div class="c-wrap">
+            <h2 class="b-title">{{ modules[7].form.title }}</h2>
+            <p class="intro">{{ modules[7].form.des }}</p>
+            <div class="cover"
+                 @click="toSet(7)">点击更换标题与描述</div>
+          </div>
+          <ul class="stat">
+            <li>
+              <p class="num">{{ modules[8].form.title }}</p>
+              <p class="text">{{ modules[8].form.des }}</p>
+              <div class="cover"
+                   @click="toSet(8)">点击更换标题与描述</div>
+            </li>
+            <li>
+              <p class="num">{{ modules[9].form.title }}</p>
+              <p class="text">{{ modules[9].form.des }}</p>
+              <div class="cover"
+                   @click="toSet(9)">点击更换标题与描述</div>
+            </li>
+            <li>
+              <p class="num">{{ modules[10].form.title }}</p>
+              <p class="text">{{ modules[10].form.des }}</p>
+              <div class="cover"
+                   @click="toSet(10)">点击更换标题与描述</div>
+            </li>
+            <li>
+              <p class="num">{{ modules[11].form.title }}</p>
+              <p class="text">{{ modules[11].form.des }}</p>
+              <div class="cover"
+                   @click="toSet(11)">点击更换标题与描述</div>
+            </li>
+            <li>
+              <p class="num">{{ modules[12].form.title }}</p>
+              <p class="text">{{ modules[12].form.des }}</p>
+              <div class="cover"
+                   @click="toSet(12)">点击更换标题与描述</div>
+            </li>
+            <li>
+              <p class="num">{{ modules[13].form.title }}</p>
+              <p class="text">{{ modules[13].form.des }}</p>
+              <div class="cover"
+                   @click="toSet(13)">点击更换标题与描述</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="plan c-wrap">
+        <div class="inner">
+          <img class="pic"
+               :src="modules[14].form.pic"
+               alt="">
+          <div class="texts">
+            <h6>{{ modules[14].form.title }}</h6>
+            <div class="des">{{ modules[14].form.des }}</div>
+            <img src="@/assets/images/arrow-white.png"
+                 alt="">
+          </div>
+        </div>
+        <div class="cover"
+             style="height: calc(100% + 60px);"
+             @click="toSet(14)">点击更换标题、概述与跳转</div>
+      </div>
+
+      <div class="block">
+        <div class="inner">
+          <div class="c-wrap">
+            <h2 class="b-title">{{ modules[15].form.title }}</h2>
+            <p class="intro">{{ modules[15].form.des }}</p>
+            <div class="cover"
+                 @click="toSet(15)">点击更换标题与描述</div>
+          </div>
+          <ul class="people">
+            <template v-for="(item, i) in modules[16].list">
+              <li v-if="item.isEnable"
+                  :key="i">
+                <img class="pic"
+                     :src="item.pic"
+                     alt="">
+                <div class="texts">
+                  <p class="sub">{{ item.subTitle }}</p>
+                  <h6>{{ item.title }}</h6>
+                  <p class="des">{{ item.des }}</p>
+                  <img class="arrow"
+                       src="@/assets/images/arrow.png"
+                       alt="">
+                </div>
+              </li>
+            </template>
+            <div class="cover"
+                 @click="toSet(16)">点击更改图片、标题概述与链接</div>
+          </ul>
+        </div>
+      </div>
+
+      <div class="block list-block gray">
+        <div class="inner">
+          <div class="c-wrap">
+            <h2 class="b-title">{{ modules[17].form.title }}</h2>
+            <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 }}</h6>
+              <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 }}</h6>
+              <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 }}</h6>
+              <p class="des">{{ modules[20].form.des }}</p>
+              <div class="cover"
+                   @click="toSet(20)">点击更改图片、标题概述与链接</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="block">
+        <div class="inner">
+          <div class="c-wrap">
+            <h2 class="b-title">{{ modules[21].form.title }}</h2>
+            <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 }}</h6>
+              <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>
+          </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.about
+    }
+  },
+  mounted () {
+    this.$store.commit('user/setCrumbs', [
+      {
+        name: '站点管理',
+        route: '/site'
+      },
+      {
+        name: '内容管理',
+        route: '/column'
+      },
+      {
+        name: '栏目管理',
+        route: '/column'
+      },
+      {
+        name: 'ABOUT'
+      }
+    ])
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/page/page.scss';
+.history {
+    h2 {
+        font-size: 30px;
+        color: #333;
+    }
+    .texts {
+        display: flex;
+        justify-content: space-between;
+        padding: 82px 57px 30px;
+        margin-top: 20px;
+        background-color: #fff;
+        border-radius: 100px 0px 0px 0px;
+    }
+    .left {
+        width: 695px;
+    }
+    .line {
+        width: 136px;
+        height: 2px;
+        margin: 20px 0;
+        background: #d7d7d7;
+    }
+    .des {
+        font-size: 22px;
+        color: #181818;
+        line-height: 31px;
+    }
+    .bg {
+        margin: -122px 0 0 0;
+        border-top-right-radius: 40px;
+    }
+}
+.card {
+    display: flex;
+    flex-wrap: wrap;
+    li {
+        position: relative;
+        width: 686px;
+        height: 277px;
+        padding: 70px 67px 20px;
+        margin-bottom: 28px;
+        color: #fff;
+        &:nth-child(odd) {
+            margin-right: 28px;
+        }
+    }
+    .item1 {
+        background: url(../../../assets/images/about/3.png) 0 0/100% 100% no-repeat;
+    }
+    .item2 {
+        background-color: #4984b6;
+    }
+    .item3 {
+        background-color: #567180;
+    }
+    .item4 {
+        background: url(../../../assets/images/about/4.png) 0 0/100% 100% no-repeat;
+    }
+    h6 {
+        margin-bottom: 10px;
+        font-size: 40px;
+        font-family: toppan;
+    }
+    .des {
+        font-size: 18px;
+    }
+}
+.plan {
+    padding: 73px 0;
+    background: #072947;
+    .inner {
+        display: flex;
+        justify-content: space-between;
+        width: 1575px;
+    }
+    .pic {
+        width: 664px;
+        height: 488px;
+        margin-bottom: -120px;
+    }
+    .texts {
+        width: 802px;
+        margin-top: 36px;
+        color: #fff;
+    }
+    h6 {
+        font-size: 36px;
+    }
+    .des {
+        margin: 20px 0;
+        font-size: 20px;
+    }
+}
+.people {
+    position: relative;
+    li {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 126px;
+        &:nth-child(even) {
+            flex-direction: row-reverse;
+        }
+    }
+    .pic {
+        width: 660px;
+        height: 465px;
+    }
+    .texts {
+        width: 680px;
+        padding-top: 90px;
+    }
+    h6 {
+        margin: 20px 0;
+        font-size: 40px;
+    }
+    .sub {
+        font-size: 20px;
+        color: #020202;
+    }
+    .des {
+        font-size: 18px;
+        color: #020202;
+        line-height: 30px;
+    }
+}
+.list-block {
+    .inner {
+        width: 80%;
+        padding: 90px 0;
+        background-color: #fff;
+    }
+}
+.list {
+    display: flex;
+    justify-content: center;
+    li {
+        position: relative;
+        width: calc((100% - 100px) / 3);
+        padding-bottom: 30px;
+        margin-right: 28px;
+        text-align: center;
+        background-color: #f5f5f5;
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+    .pic {
+        width: 100%;
+        height: 353px;
+    }
+    h6 {
+        margin: 35px 0 5px;
+        font-size: 24px;
+        color: #272727;
+    }
+    .des {
+        font-size: 16px;
+        color: #757575;
+    }
+}
+.staff {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    background: #f8f8f8;
+    .left {
+        width: 658px;
+        margin: 50px 0 0 46px;
+    }
+    h6 {
+        margin-bottom: 30px;
+        font-size: 30px;
+        color: #333;
+    }
+    .des {
+        font-size: 20px;
+        color: #333;
+        line-height: 34px;
+    }
+    .pic {
+        width: 650px;
+    }
+}
+.stat {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin-top: 60px;
+    li {
+        position: relative;
+        width: 30%;
+        margin-bottom: 50px;
+    }
+    .num {
+        margin-bottom: 10px;
+        font-size: 60px;
+        font-weight: 800;
+        font-family: toppan;
+        color: #035ce1;
+        line-height: 49px;
+    }
+    .text {
+        font-size: 24px;
+    }
+}
+</style>

src/pages/column/page/sfelNew.vue

@@ -0,0 +1,876 @@
+<template>
+  <div class="wrap">
+    <div class="actions">
+      <p class="page-name">页面设置/SFEL</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">
+        <el-carousel height="480px"
+                     :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+          <template v-for="(item, i) in modules[0].list">
+            <el-carousel-item v-if="item.pic && item.isEnable"
+                              :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 banner-block">
+        <div class="inner">
+          <div class="title">
+            <h5>
+              {{ modules[1].form.title }}
+              <span class="sub">{{ modules[1].form.subTitle }}</span>
+            </h5>
+            <span class="more">MORE</span>
+            <div class="cover"
+                 @click="toSet(1)">点击更换标题与小标题</div>
+          </div>
+          <div class="c-wrap">
+            <div class="sfel-banner">
+              <img width="100%"
+                   height="480"
+                   src="http://10.10.11.7/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="http://10.10.11.7/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="http://10.10.11.7/images/about/10.png"
+                     alt="">
+                <div class="texts">
+                  <p class="meta">2022-09-09 | Research</p>
+                  <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
+                  <img class="arrow"
+                       src="@/assets/images/arrow.png"
+                       alt="">
+                </div>
+              </li>
+              <li>
+                <img class="pic"
+                     src="http://10.10.11.7/images/about/11.png"
+                     alt="">
+                <div class="texts">
+                  <p class="meta">2022-09-09 | Research</p>
+                  <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
+                  <img class="arrow"
+                       src="@/assets/images/arrow.png"
+                       alt="">
+                </div>
+              </li>
+            </ul>
+            <div class="cover"
+                 @click="toSet(2)">关联栏目</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="block notice">
+        <div class="inner lg">
+          <div class="title">
+            <h5>
+              {{ modules[3].form.title }}
+              <span class="sub">{{ modules[3].form.subTitle }}</span>
+            </h5>
+            <span class="more">MORE</span>
+            <div class="cover"
+                 @click="toSet(3)">点击更换标题与小标题</div>
+          </div>
+          <div class="shop-shows c-wrap">
+            <div class="left wow fadeInLeft"
+                 data-wow-delay="0.5s">
+              <el-carousel height="432px">
+                <el-carousel-item>
+                  <div class="item">
+                    <img src="@/assets/images/survey3.png"
+                         alt="">
+                    <p class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</p>
+                  </div>
+                </el-carousel-item>
+                <el-carousel-item>
+                  <div class="item">
+                    <img src="@/assets/images/survey3.png"
+                         alt="">
+                    <p class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</p>
+                  </div>
+                </el-carousel-item>
+                <el-carousel-item>
+                  <div class="item">
+                    <img src="@/assets/images/survey3.png"
+                         alt="">
+                    <p class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</p>
+                  </div>
+                </el-carousel-item>
+              </el-carousel>
+            </div>
+            <div class="right wow fadeInRight"
+                 data-wow-delay="0.5s">
+              <ul class="card-list">
+                <li>
+                  <img class="pic"
+                       src="http://10.10.11.7/images/about/9.png"
+                       alt="">
+                  <div class="texts">
+                    <h6>喜讯！储存环三次谐波腔的带束实验验证及超导高频频腔</h6>
+                    <div class="des">1月20日上午，光明区总工会组织的“关爱职工·情暖光明”春节工会关爱活动走进深圳综合粒子设施研究院，为奋战在综合性…</div>
+                  </div>
+                </li>
+                <li>
+                  <img class="pic"
+                       src="http://10.10.11.7/images/about/9.png"
+                       alt="">
+                  <div class="texts">
+                    <h6>光明区总工会为一线科研人员送上新春祝福</h6>
+                    <div class="des">1月11日上午，深圳综合粒子设施研究院与深圳大学签署战略合作框架协议。深圳大学党委书记、校长李清泉深圳综合粒子设施研究院与深圳大学党委…</div>
+                  </div>
+                </li>
+                <li>
+                  <img class="pic"
+                       src="http://10.10.11.7/images/about/9.png"
+                       alt="">
+                  <div class="texts">
+                    <h6>深圳综合粒子设施研究院与中国科学院</h6>
+                    <div class="des">1月20日上午，光明区总工会组织的“关爱职工·情暖光明”春节工会关爱活动走进深圳综合粒子设施研究院，为奋战在综合性…</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <div class="cover"
+                 @click="toSet(4)">关联栏目</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="block media">
+        <div class="inner">
+          <div class="title">
+            <h5>
+              {{ modules[7].form.title }}
+              <span class="sub">{{ modules[7].form.subTitle }}</span>
+            </h5>
+            <span class="more">MORE</span>
+            <div class="cover"
+                 @click="toSet(7)">点击更换标题与小标题</div>
+          </div>
+          <div class="media-wrap c-wrap">
+            <div class="left">
+              <div class="slides">
+                <div class="item wow fadeInLeft"
+                     data-wow-delay="0.5s"
+                     style="margin-right: 20px">
+                  <img width="100%"
+                       height="100%"
+                       src="http://10.10.11.7/images/about/9.png"
+                       alt="">
+                  <div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div>
+                </div>
+                <div class="item wow fadeInLeft"
+                     data-wow-delay="0.5s">
+                  <img width="100%"
+                       height="100%"
+                       src="http://10.10.11.7/images/about/9.png"
+                       alt="">
+                  <div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div>
+                </div>
+              </div>
+              <ul class="list">
+                <li>
+                  <h6>对话未来科学奖得主杨学明：真正自立自强要靠在实验科学先进仪器</h6>
+                  <div class="des">6月12日上午，深圳综合粒子设施研究院与深圳大学签署战略合作框架协议。深圳大学党委书记、校长李清泉深大学签署圳大学党委…</div>
+                </li>
+                <li>
+                  <h6>对话未来科学奖得主杨学明：真正自立自强要靠在实验科学先进仪器</h6>
+                  <div class="des">6月12日上午，深圳综合粒子设施研究院与深圳大学签署战略合作框架协议。深圳大学党委书记、校长李清泉深大学签署圳大学党委…</div>
+                </li>
+                <li>
+                  <h6>对话未来科学奖得主杨学明：真正自立自强要靠在实验科学先进仪器</h6>
+                  <div class="des">6月12日上午，深圳综合粒子设施研究院与深圳大学签署战略合作框架协议。深圳大学党委书记、校长李清泉深大学签署圳大学党委…</div>
+                </li>
+              </ul>
+            </div>
+            <div class="right">
+              <img src="@/assets/images/survey3.png"
+                   alt="">
+              <div class="texts">
+                <h6>关于2021年度深圳综合粒子设施研究院采购公开表</h6>
+                <div class="des">把一个基因切成两段，分别翻译成两段蛋白片段，还会有原来的功能吗？实多数蛋白片段会…</div>
+              </div>
+            </div>
+            <div class="cover"
+                 @click="toSet(8)">关联栏目</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="block program">
+        <div class="inner c-wrap">
+          <div class="title">
+            <h5>
+              {{ modules[11].form.title }}
+              <span class="sub">{{ modules[11].form.subTitle }}</span>
+            </h5>
+            <span class="more">MORE</span>
+            <div class="cover"
+                 @click="toSet(11)">点击更换标题与小标题</div>
+          </div>
+          <div class="c-wrap">
+            <div class="slide">
+              <div class="texts">
+                <h6>超快自由电子激光脉冲特性诊断研究方面取得重要进展</h6>
+                <div class="des">X射线自由电子激光已经成为了化学、生物、物理等领域不可或缺的研究手段。对于绝大多数自由电子激研究院紧密围绕高水平建设综合性国家科学中心战略目标，面向国民经济主战场和世界科技前沿…</div>
+                <div class="meta">发表日期：2022.01.10 &emsp;浏览量：备份</div>
+              </div>
+              <img class="pic"
+                   src="@/assets/images/survey3.png"
+                   alt="">
+            </div>
+            <ul class="list">
+              <li>
+                <div class="des">X射线自由电子激光是基于国际最先进的超导加速器技术研发的装置，对于未来产业发展和基础科学应用有重要作用</div>
+                <p class="date">2022.10.10</p>
+              </li>
+              <li>
+                <div class="des">X射线自由电子激光是基于国际最先进的超导加速器技术研发的装置，对于未来产业发展和基础科学应用有重要作用</div>
+                <p class="date">2022.10.10</p>
+              </li>
+              <li>
+                <div class="des">X射线自由电子激光是基于国际最先进的超导加速器技术研发的装置，对于未来产业发展和基础科学应用有重要作用</div>
+                <p class="date">2022.10.10</p>
+              </li>
+            </ul>
+            <div class="cover"
+                 @click="toSet(12)">关联栏目</div>
+          </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.sfel
+    }
+  },
+  mounted () {
+    this.$store.commit('user/setCrumbs', [
+      {
+        name: '站点管理',
+        route: '/site'
+      },
+      {
+        name: '内容管理',
+        route: '/column'
+      },
+      {
+        name: '栏目管理',
+        route: '/column'
+      },
+      {
+        name: 'SFEL'
+      }
+    ])
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/page/page.scss';
+.title {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-bottom: 25px;
+    margin-bottom: 30px;
+    border-bottom: 1px solid #ddd;
+    h5 {
+        padding-left: 16px;
+        font-size: 36px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 1;
+        border-left: 6px solid #2b96ef;
+    }
+    .sub {
+        font-size: 22px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #afb7bf;
+    }
+    .more {
+        font-size: 14px;
+        color: #666;
+        cursor: pointer;
+    }
+}
+.lg {
+    width: 1505px;
+}
+/deep/.articles {
+    width: 50%;
+    .el-carousel__indicators--horizontal {
+        bottom: 20px;
+        left: 804px;
+    }
+}
+.banner-block {
+    background: url(../../../assets/images/sfel/2.png) 0 0 / cover no-repeat;
+}
+.sfel-banner {
+    display: flex;
+    cursor: pointer;
+    .pic {
+        width: 700px;
+        height: 380px;
+    }
+    .right {
+        position: relative;
+        width: 50%;
+        padding: 50px 50px 30px;
+        background: #1583ff;
+        color: #fff;
+        &:hover {
+            background: #465f85;
+            h6,
+            .des,
+            .meta {
+                color: #fff;
+                transform: translateY(15px);
+            }
+        }
+    }
+    .inds {
+        position: absolute;
+        bottom: 40px;
+        left: 60px;
+        display: flex;
+        li {
+            width: 10px;
+            height: 10px;
+            margin-right: 12px;
+            background: #ffffff;
+            border-radius: 50%;
+            transition: 0.2s;
+            &.active {
+                width: 30px;
+                background: rgba(255, 255, 255, 0.3);
+                border-radius: 5px;
+            }
+        }
+    }
+    h6 {
+        font-size: 24px;
+        transition: 0.3s;
+    }
+    .des {
+        margin: 30px 0;
+        font-size: 16px;
+        line-height: 24px;
+        transition: 0.3s;
+    }
+    .meta {
+        font-size: 16px;
+        transition: 0.3s;
+    }
+}
+.card {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 40px;
+    li {
+        width: calc((100% - 56px) / 3);
+        margin-right: 28px;
+        box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
+        border-radius: 6px;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+        }
+        &: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;
+        font-family: SFProDisplay;
+        font-weight: 500;
+        color: #333;
+        line-height: 28px;
+    }
+    .arrow {
+        width: 36px;
+    }
+}
+
+.notice {
+    background: url(../../../assets/images/sfel/3.png) 0 0 / cover no-repeat;
+}
+.shop-shows {
+    display: flex;
+    .left {
+        width: 660px;
+        margin-right: 20px;
+        .item {
+            position: relative;
+            height: 100%;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+            .text {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                padding: 0 20px;
+                font-size: 18px;
+                color: #fff;
+                line-height: 59px;
+                background-color: rgba(0, 0, 0, 0.57);
+            }
+        }
+        .card-wrap {
+            display: flex;
+            margin-top: 18px;
+        }
+        .cards {
+            padding: 20px;
+            background-color: #fff;
+            h6 {
+                margin-bottom: 10px;
+                font-size: 18px;
+                color: #48525e;
+            }
+            .sum {
+                font-size: 14px;
+                color: #6d7c8e;
+            }
+            .date {
+                margin-top: 24px;
+                font-size: 14px;
+                color: #c4ccd7;
+            }
+        }
+        h6 {
+            font-size: 24px;
+            color: #272727;
+        }
+        .des {
+            margin-top: 10px;
+            font-size: 16px;
+            color: #666;
+            line-height: 30px;
+        }
+    }
+    .right {
+        width: 824px;
+    }
+    .card-list {
+        li {
+            display: flex;
+            align-items: center;
+            padding: 24px;
+            margin-bottom: 18px;
+            background-color: #fff;
+            transition: 0.3s;
+            &:hover {
+                transform: scale(1.05);
+            }
+        }
+        .pic {
+            width: 116px;
+            height: 85px;
+            margin-right: 28px;
+        }
+        .texts {
+            width: 504px;
+            margin-right: 60px;
+        }
+        h6 {
+            margin-bottom: 10px;
+            font-size: 18px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #1583ff;
+        }
+        .des {
+            font-size: 16px;
+            color: #666;
+            line-height: 26px;
+            -webkit-line-clamp: 2;
+        }
+    }
+    .slide {
+        position: relative;
+        height: 284px;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+        .text {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            padding: 0 12px;
+            line-height: 59px;
+            font-size: 18px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+            background-color: rgba(0, 0, 0, 0.57);
+        }
+    }
+}
+.conference {
+    background: url(../../../assets/images/sfel/4.png) 0 0 / cover no-repeat;
+    .shows {
+        display: flex;
+    }
+    .left {
+        position: relative;
+        width: 688px;
+        height: 688px;
+        margin-right: 20px;
+        cursor: pointer;
+        .text {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            padding: 0 12px;
+            line-height: 59px;
+            font-size: 18px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+            background-color: rgba(0, 0, 0, 0.57);
+        }
+    }
+    .card-list {
+        width: 784px;
+        li {
+            display: flex;
+            align-items: center;
+            padding: 14px;
+            margin-bottom: 21px;
+            background-color: #fff;
+            cursor: pointer;
+            transition: 0.3s;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            &:hover {
+                transform: translateX(20px);
+            }
+        }
+        .pic {
+            width: 188px;
+            height: 188px;
+            margin-right: 36px;
+        }
+        h6 {
+            margin-bottom: 10px;
+            font-size: 20px;
+            color: #333;
+        }
+        .sum {
+            font-size: 16px;
+            color: #666;
+        }
+        .text {
+            display: flex;
+            align-items: center;
+            margin: 10px 0;
+        }
+        .icon {
+            margin-right: 5px;
+        }
+    }
+}
+
+.media {
+    background: #fff;
+    .media-wrap {
+        display: flex;
+    }
+    .left {
+        width: 55%;
+        margin-right: 1%;
+        .slides {
+            display: flex;
+            margin-bottom: 20px;
+        }
+        .item {
+            position: relative;
+            width: 366px;
+            height: 197px;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+            .text {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                padding: 0 27px;
+                line-height: 48px;
+                font-size: 16px;
+                color: #ffffff;
+                @include ellipsis;
+                background-color: rgba(0, 0, 0, 0.49);
+            }
+        }
+        .list {
+            padding: 34px 36px;
+            background: #fff;
+            box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
+            li {
+                margin-bottom: 41px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+            h6 {
+                margin-bottom: 17px;
+                font-size: 20px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #272727;
+                line-height: 20px;
+                text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
+            }
+            .des {
+                font-size: 14px;
+                color: #666;
+            }
+        }
+    }
+    .right {
+        width: 44%;
+        box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
+        img {
+            width: 100%;
+            height: 422px;
+        }
+        .texts {
+            padding: 40px 28px;
+            background: #fff;
+        }
+        h6 {
+            font-size: 24px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #272727;
+            line-height: 39px;
+            text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
+        }
+        .des {
+            margin-top: 16px;
+            font-size: 16px;
+            color: #666;
+        }
+    }
+}
+.news {
+    background: url(../../../assets/images/sfel/5.png) (0 504px) / auto no-repeat,
+        url(../../../assets/images/sfel/6.png) (bottom right) / auto no-repeat;
+    .inner {
+        width: 1400px;
+    }
+}
+.news {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    li {
+        position: relative;
+        width: calc((100% - 56px) / 3);
+        padding: 11px;
+        margin-right: 28px;
+        color: #333;
+        background-color: #fff;
+        box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
+        border-radius: 10px;
+        transition: 0.3s;
+        &:hover {
+            transform: translateY(20px);
+        }
+        &:nth-child(3n) {
+            margin-right: 0;
+        }
+        &:hover {
+            color: #fff;
+            background-color: #0252d9;
+        }
+    }
+    img {
+        width: 100%;
+        height: 481px;
+    }
+    .texts {
+        padding: 0 18px 50px;
+    }
+    h6 {
+        margin: 35px 0 12px;
+        font-size: 24px;
+        line-height: 33px;
+    }
+    .des {
+        font-size: 18px;
+        line-height: 26px;
+    }
+}
+.program {
+    background: #fff;
+    .slide {
+        display: flex;
+        margin-bottom: 14px;
+    }
+    .texts {
+        width: 51%;
+        padding: 56px;
+        background: #fbfbfb;
+        h6 {
+            font-size: 24px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+        }
+        .des {
+            margin: 35px 0 25px;
+            font-size: 16px;
+            color: #666;
+            line-height: 32px;
+        }
+        .meta {
+            font-size: 14px;
+            color: #666;
+        }
+    }
+    .pic {
+        width: 49%;
+        height: 430px;
+    }
+    .list {
+        display: flex;
+        li {
+            width: calc((100% - 44px) / 3);
+            padding: 36px 22px;
+            margin-right: 14px;
+            background: url(../../../assets/images/sfel/7.png) 0 0 / cover no-repeat;
+            &:nth-child(2) {
+                background-image: url(../../../assets/images/sfel/8.png);
+            }
+            &:nth-child(3) {
+                margin-right: 0;
+                background-image: url(../../../assets/images/sfel/9.png);
+            }
+        }
+        .des {
+            margin-bottom: 30px;
+            font-size: 18px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+            line-height: 30px;
+        }
+        .date {
+            font-size: 16px;
+            font-family: LaoSangamMN;
+            color: #ffffff;
+        }
+    }
+}
+.tools {
+    position: absolute;
+    top: 600px;
+    left: 0;
+    width: 226px;
+    text-align: center;
+    .logo {
+        padding: 44px 0;
+        background: #0c60be;
+        box-shadow: 0px 0px 20px 0px rgba(184, 191, 200, 0.3);
+    }
+    .nav {
+        li {
+            padding: 0 10px;
+            font-size: 24px;
+            line-height: 83px;
+            color: #fff;
+            background-color: #1d1d1d;
+            cursor: pointer;
+            @include ellipsis;
+            &.active {
+                background-color: #1583ff;
+            }
+        }
+    }
+}
+@media (max-width: 1520px) {
+    .lg {
+        width: 98%;
+    }
+}
+</style>

src/router/modules/column.js

@@ -251,5 +251,15 @@ export default {
       component: () => import('@/pages/column/page/iasf'),
       meta: { title: 'IASF中文首页' }
     },
+    {
+      path: `aboutNew`,
+      component: () => import('@/pages/column/page/aboutNew'),
+      meta: { title: '关于我们' }
+    },
+    {
+      path: `sfelNew`,
+      component: () => import('@/pages/column/page/sfelNew'),
+      meta: { title: 'SFEL(1)' }
+    },
   ]
 }