vue2-client 0.1.1 → 1.2.0

package/src/config/default/antd.config.js

@@ -0,0 +1,84 @@
+// antd 配置
+const ANTD = {
+  primary: {
+    color: '#1890ff',
+    warning: '#faad14',
+    success: '#52c41a',
+    error: '#f5222d',
+    light: {
+      menuColors: ['#000c17', '#001529', '#002140']
+    },
+    dark: {
+      menuColors: ['#000c17', '#001529', '#002140']
+    },
+    night: {
+      menuColors: ['#151515', '#1f1f1f', '#1e1e1e']
+    }
+  },
+  theme: {
+    dark: {
+      'layout-body-background': '#f0f2f5',
+      'body-background': '#fff',
+      'component-background': '#fff',
+      'heading-color': 'rgba(0, 0, 0, 0.85)',
+      'text-color': 'rgba(0, 0, 0, 0.65)',
+      'text-color-inverse': '#fff',
+      'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
+      'shadow-color': 'rgba(0, 0, 0, 0.15)',
+      'border-color-split': '#f0f0f0',
+      'background-color-light': '#fafafa',
+      'background-color-base': '#f5f5f5',
+      'table-selected-row-bg': '#fafafa',
+      'table-expanded-row-bg': '#fbfbfb',
+      'checkbox-check-color': '#fff',
+      'disabled-color': 'rgba(0, 0, 0, 0.25)',
+      'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
+      'menu-dark-highlight-color': '#fefefe',
+      'menu-dark-arrow-color': '#fefefe',
+      'btn-primary-color': '#fff'
+    },
+    light: {
+      'layout-body-background': '#f0f2f5',
+      'body-background': '#fff',
+      'component-background': '#fff',
+      'heading-color': 'rgba(0, 0, 0, 0.85)',
+      'text-color': 'rgba(0, 0, 0, 0.65)',
+      'text-color-inverse': '#fff',
+      'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
+      'shadow-color': 'rgba(0, 0, 0, 0.15)',
+      'border-color-split': '#f0f0f0',
+      'background-color-light': '#fafafa',
+      'background-color-base': '#f5f5f5',
+      'table-selected-row-bg': '#fafafa',
+      'table-expanded-row-bg': '#fbfbfb',
+      'checkbox-check-color': '#fff',
+      'disabled-color': 'rgba(0, 0, 0, 0.25)',
+      'menu-dark-color': 'rgba(1, 1, 1, 0.65)',
+      'menu-dark-highlight-color': '#fefefe',
+      'menu-dark-arrow-color': '#fefefe',
+      'btn-primary-color': '#fff'
+    },
+    night: {
+      'layout-body-background': '#000',
+      'body-background': '#141414',
+      'component-background': '#141414',
+      'heading-color': 'rgba(255, 255, 255, 0.85)',
+      'text-color': 'rgba(255, 255, 255, 0.85)',
+      'text-color-inverse': '#141414',
+      'text-color-secondary': 'rgba(255, 255, 255, 0.45)',
+      'shadow-color': 'rgba(255, 255, 255, 0.15)',
+      'border-color-split': '#303030',
+      'background-color-light': '#ffffff0a',
+      'background-color-base': '#2a2a2a',
+      'table-selected-row-bg': '#ffffff0a',
+      'table-expanded-row-bg': '#ffffff0b',
+      'checkbox-check-color': '#141414',
+      'disabled-color': 'rgba(255, 255, 255, 0.25)',
+      'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
+      'menu-dark-highlight-color': '#fefefe',
+      'menu-dark-arrow-color': '#fefefe',
+      'btn-primary-color': '#141414'
+    }
+  }
+}
+module.exports = ANTD

package/src/config/default/index.js

@@ -0,0 +1,6 @@
+const ANTD = require('./antd.config')
+const ADMIN = require('./admin.config')
+const ANIMATE = require('./animate.config')
+const setting = require('./setting.config')
+
+module.exports = { ANTD, ADMIN, ANIMATE, setting }

package/src/config/default/setting.config.js

@@ -0,0 +1,33 @@
+// 此配置为系统默认设置，需修改的设置项，在src/config/config.js中添加修改项即可。也可直接在此文件中修改。
+module.exports = {
+  lang: 'CN', // 语言，可选 CN(简体)、HK(繁体)、US(英语)，也可扩展其它语言
+  theme: { // 主题
+    color: '#1890ff', // 主题色
+    mode: 'dark', // 主题模式 可选 dark、 light 和 night
+    success: '#52c41a', // 成功色
+    warning: '#faad14', // 警告色
+    error: '#f5222f' // 错误色
+  },
+  layout: 'side', // 导航布局，可选 side 和 head，分别为侧边导航和顶部导航
+  fixedHeader: false, // 固定头部状态栏，true:固定，false:不固定
+  fixedSideBar: true, // 固定侧边栏，true:固定，false:不固定
+  fixedTabs: false, // 固定页签头，true:固定，false:不固定
+  pageWidth: 'fixed', // 内容区域宽度，fixed:固定宽度，fluid:流式宽度
+  weekMode: false, // 色弱模式，true:开启，false:不开启
+  multiPage: true, // 多页签模式，true:开启，false:不开启
+  cachePage: true, // 是否缓存页面数据，仅多页签模式下生效，true 缓存, false 不缓存
+  hideSetting: false, // 隐藏设置抽屉，true:隐藏，false:不隐藏
+  homePage: '/system/dictionaryManage', // 首页路由, 登陆后默认打开
+  systemName: '物联网监控平台', // 系统名称
+  copyright: '2021 Mr.Jiang', // copyright
+  asyncRoutes: true, // 异步加载路由，true:开启，false:不开启
+  showPageTitle: true, // 是否显示页面标题（PageLayout 布局中的页面标题），true:显示，false:不显示
+  filterMenu: true, // 根据权限过滤菜单，true:过滤，false:不过滤
+  animate: { // 动画设置
+    disabled: true, // 禁用动画，true:禁用，false:启用
+    name: 'lightSpeed', // 动画效果，支持的动画效果可参考 ./animate.config.js
+    direction: 'left' // 动画方向，切换页面时动画的方向，参考 ./animate.config.js
+  },
+  footerLinks: [ // 页面底部链接，{link: '链接地址', name: '名称/显示文字', icon: '图标，支持 ant design vue 图标库'}
+  ]
+}

package/src/config/index.js

@@ -0,0 +1,6 @@
+const deepMerge = require('deepmerge')
+const _config = require('./config')
+const { setting } = require('./default')
+const config = deepMerge(setting, _config)
+
+module.exports = config

package/src/config/replacer/index.js

@@ -0,0 +1,10 @@
+/**
+ * webpack-theme-color-replacer 配置
+ * webpack-theme-color-replacer 是一个高效的主题色替换插件，可以实现系统运行时动态切换主题功能。
+ * 但有些情景下，我们需要为 webpack-theme-color-replacer 配置一些规则，以达到我们的个性化需求的目的
+ *
+ * @cssResolve: css处理规则，在 webpack-theme-color-replacer 提取 需要替换主题色的 css 后，应用此规则。一般在
+ *              webpack-theme-color-replacer 默认规则无法达到我们的要求时使用。
+ */
+const cssResolve = require('./resolve.config')
+module.exports = { cssResolve }

package/src/config/replacer/resolve.config.js

@@ -0,0 +1,67 @@
+/**
+ * webpack-theme-color-replacer 插件的 resolve 配置
+ * 为特定的 css 选择器（selector）配置 resolve 规则。
+ *
+ * key 为 css selector 值或合法的正则表达式字符串
+ * 当 key 设置 css selector 值时，会匹配对应的 css
+ * 当 key 设置为正则表达式时，会匹配所有满足此正则表达式的的 css
+ *
+ * value 可以设置为 boolean 值 false 或 一个对象
+ * 当 value 为 false 时，则会忽略此 css，即此 css 不纳入 webpack-theme-color-replacer 管理
+ * 当 value 为 对象时，会调用该对象的 resolve 函数，并传入 cssText（原始的 css文本） 和 cssObj（css对象）参数; resolve函数应该返
+ * 回一个处理后的、合法的 css字符串（包含 selector）
+ * 注意: value 不能设置为 true
+ */
+const cssResolve = {
+  '.ant-checkbox-checked .ant-checkbox-inner::after': {
+    resolve (cssText, cssObj) {
+      cssObj.rules.push('border-top:0', 'border-left:0')
+      return cssObj.toText()
+    }
+  },
+  '.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after': {
+    resolve (cssText, cssObj) {
+      cssObj.rules.push('border-top:0', 'border-left:0')
+      return cssObj.toText()
+    }
+  },
+  '.ant-checkbox-checked .ant-checkbox-inner:after': {
+    resolve (cssText, cssObj) {
+      cssObj.rules.push('border-top:0', 'border-left:0')
+      return cssObj.toText()
+    }
+  },
+  '.ant-tree-checkbox-checked .ant-tree-checkbox-inner:after': {
+    resolve (cssText, cssObj) {
+      cssObj.rules.push('border-top:0', 'border-left:0')
+      return cssObj.toText()
+    }
+  },
+  '.ant-menu-dark .ant-menu-inline.ant-menu-sub': {
+    resolve (cssText, cssObj) {
+      cssObj.rules = cssObj.rules.filter(rule => rule.indexOf('box-shadow') == -1)
+      return cssObj.toText()
+    }
+  },
+  '.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu:hover,.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-submenu-selected': {
+    resolve (cssText, cssObj) {
+      cssObj.selector = cssObj.selector.replace(/.ant-menu-horizontal/g, '.ant-menu-horizontal:not(.ant-menu-dark)')
+      return cssObj.toText()
+    }
+  },
+  '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover': {
+    resolve (cssText, cssObj) {
+      cssObj.selector = cssObj.selector.replace(/.ant-menu-horizontal/g, '.ant-menu-horizontal:not(.ant-menu-dark)')
+      return cssObj.toText()
+    }
+  },
+  '.ant-layout-sider': {
+    resolve (cssText, cssObj) {
+      cssObj.selector = '.ant-layout-sider-dark'
+      return cssObj.toText()
+    }
+  },
+  '/keyframes/': false
+}
+
+module.exports = cssResolve

package/src/layouts/AdminLayout.vue

@@ -0,0 +1,174 @@
+<template>
+  <a-layout :class="['admin-layout', 'beauty-scroll']">
+    <drawer v-if="isMobile" v-model="drawerOpen">
+      <side-menu :theme="theme.mode" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
+    </drawer>
+    <side-menu
+      :class="[fixedSideBar ? 'fixed-side' : '']"
+      :theme="theme.mode"
+      v-else-if="layout === 'side' || layout === 'mix'"
+      :menuData="sideMenuData"
+      :collapsed="collapsed"
+      :collapsible="true" />
+    <div v-if="fixedSideBar && !isMobile" :style="`width: ${sideMenuWidth}; min-width: ${sideMenuWidth};max-width: ${sideMenuWidth};`" class="virtual-side"></div>
+    <drawer v-if="!hideSetting" v-model="showSetting" placement="right">
+      <div class="setting" slot="handler">
+        <a-icon :type="showSetting ? 'close' : 'setting'"/>
+      </div>
+      <setting />
+    </drawer>
+    <a-layout class="admin-layout-main beauty-scroll">
+      <admin-header :class="[{'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]" :style="headerStyle" :menuData="headMenuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
+      <a-layout-header :class="['virtual-header', {'fixed-tabs' : fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]" v-show="fixedHeader"></a-layout-header>
+      <a-layout-content class="admin-layout-content" :style="`min-height: ${minHeight}px;`">
+        <div style="position: relative">
+          <slot></slot>
+        </div>
+      </a-layout-content>
+      <a-layout-footer style="padding: 0px">
+        <page-footer :link-list="footerLinks" :copyright="copyright" />
+      </a-layout-footer>
+    </a-layout>
+  </a-layout>
+</template>
+
+<script>
+import AdminHeader from './header/AdminHeader'
+import PageFooter from './footer/PageFooter'
+import Drawer from '../components/tool/Drawer'
+import SideMenu from '../components/menu/SideMenu'
+import Setting from '../components/setting/Setting'
+import { mapState, mapMutations, mapGetters } from 'vuex'
+
+// const minHeight = window.innerHeight - 64 - 122
+
+export default {
+  name: 'AdminLayout',
+  components: { Setting, SideMenu, Drawer, PageFooter, AdminHeader },
+  data () {
+    return {
+      minHeight: window.innerHeight - 64 - 122,
+      collapsed: false,
+      showSetting: false,
+      drawerOpen: false
+    }
+  },
+  provide () {
+    return {
+      adminLayout: this
+    }
+  },
+  watch: {
+    $route (val) {
+      this.setActivated(val)
+    },
+    layout () {
+      this.setActivated(this.$route)
+    },
+    isMobile (val) {
+      if (!val) {
+        this.drawerOpen = false
+      }
+    }
+  },
+  computed: {
+    ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader', 'fixedSideBar',
+      'fixedTabs', 'hideSetting', 'multiPage']),
+    ...mapGetters('setting', ['firstMenu', 'subMenu', 'menuData']),
+    sideMenuWidth () {
+      return this.collapsed ? '80px' : '256px'
+    },
+    headerStyle () {
+      const width = (this.fixedHeader && this.layout !== 'head' && !this.isMobile) ? `calc(100% - ${this.sideMenuWidth})` : '100%'
+      const position = this.fixedHeader ? 'fixed' : 'static'
+      return `width: ${width}; position: ${position};`
+    },
+    headMenuData () {
+      const { layout, menuData, firstMenu } = this
+      return layout === 'mix' ? firstMenu : menuData
+    },
+    sideMenuData () {
+      const { layout, menuData, subMenu } = this
+      return layout === 'mix' ? subMenu : menuData
+    }
+  },
+  methods: {
+    ...mapMutations('setting', ['correctPageMinHeight', 'setActivatedFirst']),
+    toggleCollapse () {
+      this.collapsed = !this.collapsed
+    },
+    onMenuSelect () {
+      this.toggleCollapse()
+    },
+    setActivated (route) {
+      if (this.layout === 'mix') {
+        let matched = route.matched
+        matched = matched.slice(0, matched.length - 1)
+        const { firstMenu } = this
+        for (const menu of firstMenu) {
+          if (matched.findIndex(item => item.path === menu.fullPath) !== -1) {
+            this.setActivatedFirst(menu.fullPath)
+            break
+          }
+        }
+      }
+    }
+  },
+  created () {
+    this.correctPageMinHeight(this.minHeight - 24)
+    this.setActivated(this.$route)
+  },
+  beforeDestroy () {
+    this.correctPageMinHeight(-this.minHeight + 24)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .admin-layout{
+    .side-menu{
+      &.fixed-side{
+        position: fixed;
+        height: 100vh;
+        left: 0;
+        top: 0;
+      }
+    }
+    .virtual-side{
+      transition: all 0.2s;
+    }
+    .virtual-header{
+      transition: all 0.2s;
+      opacity: 0;
+      &.fixed-tabs.multi-page:not(.fixed-header){
+        height: 0;
+      }
+    }
+    .admin-layout-main{
+      .admin-header{
+        top: 0;
+        right: 0;
+        overflow: hidden;
+        transition: all 0.2s;
+        &.fixed-tabs.multi-page:not(.fixed-header){
+          height: 0;
+        }
+      }
+    }
+    .admin-layout-content{
+      padding: 24px 24px 0;
+      /*overflow-x: hidden;*/
+      /*min-height: calc(100vh - 64px - 122px);*/
+    }
+    .setting{
+      background-color: @primary-color;
+      color: @base-bg-color;
+      border-radius: 5px 0 0 5px;
+      line-height: 40px;
+      font-size: 22px;
+      width: 40px;
+      height: 40px;
+      box-shadow: -2px 0 8px @shadow-color;
+    }
+  }
+</style>

package/src/layouts/BlankView.vue

@@ -0,0 +1,22 @@
+<template>
+  <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
+    <router-view />
+  </page-toggle-transition>
+</template>
+
+<script>
+import PageToggleTransition from '../components/transition/PageToggleTransition'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'BlankView',
+  components: { PageToggleTransition },
+  computed: {
+    ...mapState('setting', ['multiPage', 'animate'])
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/layouts/CommonLayout.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="common-layout">
+    <div class="content"><slot></slot></div>
+    <page-footer :link-list="footerLinks" :copyright="copyright"></page-footer>
+  </div>
+</template>
+
+<script>
+import PageFooter from '@vue2-client/layouts/footer/PageFooter'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'CommonLayout',
+  components: { PageFooter },
+  computed: {
+    ...mapState('setting', ['footerLinks', 'copyright'])
+  }
+}
+</script>
+
+<style scoped lang="less">
+.common-layout{
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: auto;
+  background-color: @layout-body-background;
+  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: 110px;
+  background-size: 100%;
+  .content{
+    padding: 32px 0;
+    flex: 1;
+    @media (min-width: 768px){
+
+      padding: 112px 0 24px;
+    }
+  }
+}
+</style>

package/src/layouts/ComponentLayoutOne.vue

@@ -0,0 +1,47 @@
+<template>
+  <div id="ComponentLayoutOne">
+    <a-layout>
+      <a-layout-sider v-bind="siderProps">
+        <slot name="left"></slot>
+      </a-layout-sider>
+      <a-layout>
+        <slot></slot>
+      </a-layout>
+    </a-layout>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ComponentLayoutOne',
+    props: {
+      // Layout.Sider props对象
+      siderProps: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      }
+    },
+    data () {
+      return {}
+    },
+    created () {
+    },
+    mounted () {
+    },
+    methods: {}
+  }
+</script>
+
+<style lang="less">
+  @import '~ant-design-vue/../../src/theme/index';
+  #ComponentLayoutOne {
+    .ant-layout-sider {
+      .ant-layout-sider-zero-width-trigger {
+        top: 50%;
+        background-color: @shadow-color;
+      }
+    }
+  }
+</style>

package/src/layouts/PageLayout.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="page-layout">
+    <page-header
+      ref="pageHeader"
+      :style="`margin-top: ${multiPage ? 0 : -24}px`"
+      :breadcrumb="breadcrumb"
+      :title="pageTitle"
+      :logo="logo"
+      :avatar="avatar">
+      <slot name="action" slot="action"></slot>
+      <slot slot="content" name="headerContent"></slot>
+      <div slot="content" v-if="!this.$slots.headerContent && desc">
+        <p>{{ desc }}</p>
+        <div v-if="this.linkList" class="link">
+          <template v-for="(link, index) in linkList">
+            <a :key="index" :href="link.href"><a-icon :type="link.icon" />{{ link.title }}</a>
+          </template>
+        </div>
+      </div>
+      <slot v-if="this.$slots.extra" slot="extra" name="extra"></slot>
+    </page-header>
+    <div ref="page" :class="['page-content', layout, pageWidth]" >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import PageHeader from '@vue2-client/components/page/header/PageHeader'
+import { mapState, mapMutations } from 'vuex'
+import { getI18nKey } from '@vue2-client/utils/routerUtil'
+
+export default {
+  name: 'PageLayout',
+  components: { PageHeader },
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
+  data () {
+    return {
+      page: {},
+      pageHeaderHeight: 0
+    }
+  },
+  watch: {
+    $route () {
+      this.page = this.$route.meta.page
+    }
+  },
+  updated () {
+    if (!this._inactive) {
+      this.updatePageHeight()
+    }
+  },
+  activated () {
+    this.updatePageHeight()
+  },
+  deactivated () {
+    this.updatePageHeight(0)
+  },
+  mounted () {
+    this.updatePageHeight()
+  },
+  created () {
+    this.page = this.$route.meta.page
+  },
+  beforeDestroy () {
+    this.updatePageHeight(0)
+  },
+  computed: {
+    ...mapState('setting', ['layout', 'multiPage', 'pageMinHeight', 'pageWidth', 'customTitles']),
+    pageTitle () {
+      const pageTitle = this.page && this.page.title
+      return this.customTitle || (pageTitle && this.$t(pageTitle)) || this.title || this.routeName
+    },
+    routeName () {
+      const route = this.$route
+      return this.$t(getI18nKey(route.matched[route.matched.length - 1].path))
+    },
+    breadcrumb () {
+      const page = this.page
+      const breadcrumb = page && page.breadcrumb
+      if (breadcrumb) {
+        const i18nBreadcrumb = []
+        breadcrumb.forEach(item => {
+          i18nBreadcrumb.push(this.$t(item))
+        })
+        return i18nBreadcrumb
+      } else {
+        return this.getRouteBreadcrumb()
+      }
+    },
+    marginCorrect () {
+      return this.multiPage ? 24 : 0
+    }
+  },
+  methods: {
+    ...mapMutations('setting', ['correctPageMinHeight']),
+    getRouteBreadcrumb () {
+      const routes = this.$route.matched
+      const path = this.$route.path
+      const breadcrumb = []
+      routes.filter(item => path.includes(item.path))
+        .forEach(route => {
+        const path = route.path.length === 0 ? '/home' : route.path
+        breadcrumb.push(this.$t(getI18nKey(path)))
+      })
+      const pageTitle = this.page && this.page.title
+      if (this.customTitle || pageTitle) {
+        breadcrumb[breadcrumb.length - 1] = this.customTitle || pageTitle
+      }
+      return breadcrumb
+    },
+    /**
+     * 用于计算页面内容最小高度
+     * @param newHeight
+     */
+    updatePageHeight (newHeight = this.$refs.pageHeader.$el.offsetHeight + this.marginCorrect) {
+      this.correctPageMinHeight(this.pageHeaderHeight - newHeight)
+      this.pageHeaderHeight = newHeight
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .page-header{
+    margin: 0 -24px 0;
+  }
+  .link{
+    /*margin-top: 16px;*/
+    line-height: 24px;
+    a{
+      font-size: 14px;
+      margin-right: 32px;
+      i{
+        font-size: 22px;
+        margin-right: 8px;
+      }
+    }
+  }
+  .page-content{
+    position: relative;
+    padding: 24px 0 0;
+    &.side{
+    }
+    &.head.fixed{
+      margin: 0 auto;
+      max-width: 1400px;
+    }
+  }
+</style>