qj-happy-common-zhongjian 1.0.27

package/src/views/pc/default/LayoutCard.vue

@@ -0,0 +1,405 @@
+<template>
+  <!-- 卡片模式 -->
+  <div>
+    <!--top-->
+    <components :is="top">
+      <Internationalization @handleCommand="handleCommand"></Internationalization>
+    </components>
+    <!-- header -->
+    <components :is="header"></components>
+
+    <div class="app-wrapper clearfix" ref="appWrapper">
+      <!-- 左侧菜单 -->
+      <components :is="leftMenu" :leftMenuList="leftMenuList" :height="leftHeight"></components>
+      <!-- 右侧内容 -->
+      <div class="main-container">
+        <router-view style="width: 100%"></router-view>
+      </div>
+    </div>
+    <components :is="footer"></components>
+  </div>
+</template>
+
+<script>
+import Internationalization from '#/views/pc/Internationalization';
+//top
+import VTopDefault from './top-modules/topDefault'; // 标准产品top
+import VTopDefaultNew from './top-modules/topDefaultNew'; // 标准产品top 无注册
+import VTop from './top-modules/topBar';
+import VTopSimple from './top-modules/topSimple';
+import VTopSimpleHy from './top-modules/topSimpleHy'; //皇爷VTopSimpleHy
+import VTopUcc from './top-modules/topUcc'; //ucc的头部
+import VTopAns from './top-modules/topAns'; // 鞍钢top
+import topKyw from './top-modules/topKYW'; // 矿盈网
+import zgltop from './top-modules/zgltop'; // 鞍钢top
+import Toplg from './top-modules/Toplg'; // 大唐
+import ymTop from './top-modules/ymTop'; // 云模top
+import topDefaultDM from './top-modules/topDefaultDM'; // 东盟top
+import topSDX from './top-modules/topSDX'; // 蜀大侠top
+import topHDB from './top-modules/topHDB'; // 海德堡top
+import DgTop from './top-modules/DgTopShortcut/index'; // 南网电工top
+import topA from './top-modules/topA'; // 有色
+import topNew from './top-modules/topNew'; // 皇家
+import topAYD from './top-modules/topayd'; // 爱婴岛的top
+import topFLPT from './top-modules/topFLPT'; // 福利平台的top
+
+//header
+import VHeader from './header-modules/header';
+import VIndex from './header-modules/index';
+import zgl from './header-modules/zgl'; //  标准产品头部
+import VHeaderStyle2 from './header-modules/headerStyle2';
+import VHeaderStyle3 from './header-modules/headerStyle3'; //  单独给北新用的
+import VHeaderStyle4 from './header-modules/headerStyle4'; //  BBC
+import VHeaderStyleDefalut from './header-modules/headerStyleDefalut'; //  标准产品头部
+import VHeaderStyleAns from './header-modules/headerStyleAns'; //  鞍钢头部
+import VHeaderStyleKyw from './header-modules/headerStyleKYW'; //  鞍钢头部
+import ymHeader from './header-modules/ymHeader'; //  云模头部
+import headerSDX from './header-modules/headerSDX'; //  蜀大侠头部
+
+import DgHeader from './header-modules/DgHeader/index'; //  南网电工头部
+import ysHeader from './header-modules/ysHeader'; //宇视头部
+import headerA from './header-modules/headerA'; //宇视头部
+import headerNew from './header-modules/headerNew'; // 皇家马氏
+import headerAYD from './header-modules/headerayd'; //  爱婴岛头部
+import headerFLPT from './header-modules/headerFLPT'; //  福利平台header
+
+//leftMenu
+import LeftMenu from './leftMenu-modules/leftMenu';
+import LeftMenuStyle2 from './leftMenu-modules/leftMenu-style2';
+import LeftMenuLogo from './leftMenu-modules/leftMenu-logo';
+import LeftMenuDefault from './leftMenu-modules/leftMenuDefault';
+import LeftMenuDefaultFLPT from './leftMenu-modules/leftMenuDefaultFLPT';
+import LeftMenuDefaultayd from './leftMenu-modules/leftMenuDefaultayd';
+import LeftMenuDefaultEn from './leftMenu-modules/leftMenuDefaultEn';
+
+import LeftNews from './leftMenu-modules/leftMenu-style4';
+//footer
+import VFooter from './footer-modules/footer';
+import VFooterAns from './footer-modules/footerAns';
+import VFooterKyw from './footer-modules/footerKYW';
+import zglfoot from './footer-modules/zgl';
+import footerNew from './footer-modules/footerNew';
+import footerHDB from './footer-modules/footerHDB';
+import VFooterDefault from './footer-modules/footerDefault';
+import VFooterDefaultNew from './footer-modules/footerDefaultNew';
+import VFooterDefaultA from './footer-modules/footerDefaultA';
+import ymFooter from './footer-modules/ymFooter'; //云模底部
+import footerDM from './footer-modules/footerDM'; //东盟底部
+import footerSDX from './footer-modules/DgFooter/indexSDX'; //蜀大侠底部
+import footerHy from './footer-modules/footerHy'; //皇爷底部
+import footerAYD from './footer-modules/footerayd'; //爱婴岛底部
+//nav
+import VNav from './nav-modules/nav';
+//theme
+import ThemePicker from '#/components/ThemePicker';
+import { mapGetters } from 'vuex';
+
+export default {
+  components: {
+   //福利平台
+   topFLPT,
+   headerFLPT,
+	//爱婴岛
+	topAYD,
+	headerAYD,
+	footerAYD,
+    // 蜀大侠注册
+    headerSDX,
+    topSDX,
+    topHDB,
+    footerSDX,
+    VHeader,
+    VFooter,
+    VTop,
+    VTopSimple,
+    VTopSimpleHy,
+    VTopDefault,
+    VTopDefaultNew,
+    VTopUcc,
+    VTopAns,
+	topKyw,
+    LeftMenu,
+    LeftMenuStyle2,
+    LeftMenuDefault,
+    LeftMenuDefaultFLPT,
+	LeftMenuDefaultayd,
+    LeftMenuDefaultEn,
+    LeftMenuLogo,
+    LeftNews,
+    VHeaderStyle3,
+    VHeaderStyleDefalut,
+    VHeaderStyle4,
+    VHeaderStyleAns,
+	VHeaderStyleKyw,
+    headerNew,
+    zgl,
+    VNav,
+    ThemePicker,
+    VFooterAns,
+	VFooterKyw,
+    zglfoot,
+    footerNew,
+    footerHDB,
+    VFooterDefault,
+    VFooterDefaultNew,
+    VFooterDefaultA,
+    Internationalization,
+    Toplg,
+    zgltop,
+    ymTop,
+    topDefaultDM,
+    DgTop,
+    ymHeader,
+    DgHeader,
+    ysHeader,
+    ymFooter,
+    footerDM,
+    footerHy,
+    zgltop,
+    topNew,
+    topA,
+    headerA,
+  },
+  data() {
+    return {
+      isIndex: false,
+      isCollapse: false,
+      appList: window.sessionStorage.getItem('menuList') && JSON.parse(window.sessionStorage.getItem('menuList')).menuList ? JSON.parse(window.sessionStorage.getItem('menuList')).menuList : [],
+      navChildren: null,
+      customColor: 'custom-409EFF',
+      theme: '#409EFF', //默认主题色,
+      top: null, //顶部组件 默认为VTop
+      topObject: {
+        // 顶部组件对象
+        vTop: VTop,
+        zgltop: zgltop,
+        Toplg: Toplg,
+        topNew: topNew,
+        topA: topA,
+        vTopDefault: VTopDefault,
+        vTopDefaultNew: VTopDefaultNew,
+        vTopAns: VTopAns,
+		topKyw:topKyw,
+        vTopUcc: VTopUcc,
+        vTopSimple: VTopSimple,
+        VTopSimpleHy: VTopSimpleHy,
+        ymTop: ymTop,
+        topDefaultDM: topDefaultDM,
+        DgTop: DgTop,
+        topSDX: topSDX,
+        topHDB: topHDB,
+		topAYD: topAYD,
+      topFLPT:topFLPT,        //福利平台top
+      },
+      header: null, //头部组件 默认为VHeader
+      headerObject: {
+        //头部组件对象
+        vHeader: VHeader,
+        vHeaderStyleDefalut: VHeaderStyleDefalut,
+        vHeaderStyle2: VHeaderStyle2,
+        vHeaderStyle3: VHeaderStyle3,
+        vHeaderStyle4: VHeaderStyle4,
+        vHeaderStyleAns: VHeaderStyleAns,
+		VHeaderStyleKyw:VHeaderStyleKyw,
+        headerA: headerA,
+        zgl: zgl,
+        ymHeader: ymHeader,
+        DgHeader: DgHeader,
+        headerSDX: headerSDX,
+		headerAYD: headerAYD,
+        ysHeader: ysHeader,
+        VIndex: VIndex,
+        zgl: zgl,
+        headerNew: headerNew,
+        headerFLPT:headerFLPT,      //福利平台header
+      },
+      leftMenu: LeftMenu, // 左侧菜单 默认为LeftMenu
+      leftMenuObject: {
+        // 左侧菜单所有对象
+        leftMenu: LeftMenu,
+        leftMenuStyle2: LeftMenuStyle2,
+        leftMenuDefault: LeftMenuDefault,
+        LeftMenuDefaultFLPT: LeftMenuDefaultFLPT,
+		LeftMenuDefaultayd:LeftMenuDefaultayd,
+        leftMenuDefaultEn: LeftMenuDefaultEn,
+        LeftNews: LeftNews,
+        LeftMenuLogo: LeftMenuLogo,
+      }, //left对象
+      footer: VFooter, //底部组件，默认为VFooter
+      footerObject: {
+        //底部组件对象
+        vFooter: VFooter,
+        vFooterAns: VFooterAns,
+		VFooterKyw:VFooterKyw,
+        zglfoot: zglfoot,
+        vFooterDefault: VFooterDefault,
+        vFooterDefaultNew: VFooterDefaultNew,
+        vFooterDefaultA: VFooterDefaultA,
+        ymFooter: ymFooter,
+        footerDM: footerDM,
+        footerHy: footerHy,
+        footerNew: footerNew,
+        footerHDB: footerHDB,
+        footerSDX: footerSDX,
+		footerAYD: footerAYD,
+      },
+      leftMenuList: [],
+      leftHeight: null,
+    };
+  },
+  computed: {
+    ...mapGetters(['sidebar']),
+  },
+  mounted() {
+    console.log('card');
+
+    // components 处理
+    this.appList.forEach((el) => {
+      if (el.menuDefaultClass === 'user') {
+        el.children &&
+          el.children.forEach((item) => {
+            if (item.menuDefaultClass === 'userLeftRouter') {
+              // left菜单部分
+              this.leftMenu = item.menuAction ? this.leftMenuObject[item.menuAction] : this.leftMenuObject['leftMenu'];
+              this.leftMenuList = item.children;
+            }
+            if (item.menuDefaultClass === 'userTop') {
+              // 顶部部分
+              this.top = item.menuAction ? this.topObject[item.menuAction] : this.topObject['vTop'];
+            }
+            if (item.menuDefaultClass === 'userHeader') {
+              // 头部部分
+              this.header = item.menuAction ? this.headerObject[item.menuAction] : this.headerObject['vHeader'];
+              //this.header=this.headerObject["headerNew"]
+            }
+            if (item.menuDefaultClass === 'userFooter') {
+              // 头部部分
+              this.footer = item.menuAction ? this.footerObject[item.menuAction] : this.footerObject['vFooter'];
+              //              this.footer=this.footerObject["footerNew"];
+            }
+          });
+      }
+    });
+    //对主题色进行配置
+    let proappEnvLayout = JSON.parse(sessionStorage.getItem('proappEnvLayout'));
+
+    this.theme = proappEnvLayout.proappEnvTheme && proappEnvLayout.proappEnvTheme != '' ? `#${proappEnvLayout.proappEnvTheme}` : '#2c4158';
+    this.customColor = proappEnvLayout.proappEnvTheme && proappEnvLayout.proappEnvTheme != '' ? `custom-${proappEnvLayout.proappEnvTheme}` : 'custom-2c4158';
+    // console.log(this.theme, "this.theme");
+    if (process.env.APP_PATH === 'index') {
+      if (!this.sidebar.opened) {
+        this.$store.dispatch('ToggleSideBar');
+      }
+      this.isIndex = true;
+    }
+    if (!sessionStorage.getItem('personalInfo')) {
+      this.$store.dispatch('GetInfo');
+    }
+    this.$nextTick(() => {
+      this.leftHeight = this.$refs.appWrapper.offsetHeight - 60;
+    });
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar');
+    },
+    heightChange(val) {
+      this.height = document.documentElement.clientHeight - 64 - 60;
+    },
+    toggleCollapse(val) {
+      this.isCollapse = val;
+    },
+    handleCommand(item) {
+      this.$i18n.locale = item.id;
+    },
+  },
+};
+</script>
+<style rel="stylesheet/scss" lang="scss">
+// @import "~#/styles/index.scss";
+//盒模型
+html,
+body,
+#app {
+  height: 100%;
+  overflow: auto;
+  background: #fafafa;
+}
+body {
+  font-family: MicrosoftYaHei;
+}
+.t-box {
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: flex;
+}
+.t-box-flex1 {
+  -moz-box-flex: 1;
+  -webkit-box-flex: 1;
+  box-flex: 1;
+  width: auto;
+}
+.t-box-flex2 {
+  -moz-box-flex: 2;
+  -webkit-box-flex: 2;
+  box-flex: 2;
+  width: auto;
+}
+.t-box-flex3 {
+  -moz-box-flex: 3;
+  -webkit-box-flex: 3;
+  box-flex: 3;
+  width: auto;
+}
+.t-box-center {
+  -moz-box-align: center;
+  -webkit-box-align: center;
+  box-align: center;
+}
+.t-center {
+  text-align: center;
+}
+.t-right {
+  text-align: right;
+}
+.vertical-horizontal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.vertical {
+  display: flex;
+  align-items: center;
+}
+.w1200 {
+  width: 1200px;
+}
+.m0a {
+  margin: 0 auto;
+}
+.app-wrapper {
+  padding-bottom: 30px;
+  position: relative;
+  height: 100%;
+  width: 1200px;
+  overflow: hidden;
+  margin: 0 auto;
+  clear: both;
+  .menu-header {
+    line-height: 65px;
+    font-size: 14px;
+    width: 100%;
+  }
+
+  .main-container {
+    // float: left;
+    margin-top: 20px;
+    margin-left: 230px !important;
+    display: flex;
+    .app-container {
+      width: 100%;
+      padding: 0;
+    }
+  }
+}
+</style>

package/src/views/pc/default/assets/flex.scss

@@ -0,0 +1,100 @@
+// flex
+.flex {
+    display: flex;
+    display: -webkit-flex;
+
+    //flex-direction
+    &-direction {
+        &--row {
+            flex-direction: row;
+        }
+
+        &--row-reverse {
+            flex-direction: row-reverse;
+        }
+
+        &--column {
+            flex-direction: column;
+        }
+
+        &--column-reverse {
+            flex-direction: column-reverse;
+        }
+    }
+
+    //flex-warp
+    &-wrap {
+        &--nowrap {
+            flex-wrap: nowrap;
+        }
+
+        &--wrap {
+            flex-wrap: wrap;
+        }
+
+        &--wrap-reverse {
+            flex-wrap: wrap-reverse;
+        }
+    }
+}
+
+// justify-content
+$justify-content--array: flex-start,
+flex-end,
+center,
+space-between,
+space-around;
+
+//justify-content
+.justify-content {
+    @for $i from 1 through length($justify-content--array) {
+        $item: nth($justify-content--array, $i);
+
+        &--#{$item} {
+            justify-content: $item;
+        }
+    }
+}
+
+// align-items
+$align-items--array: flex-start,
+flex-end,
+center,
+baseline,
+stretch;
+
+.align-items {
+    @for $i from 1 through length($align-items--array) {
+        $item: nth($align-items--array, $i);
+
+        &--#{$item} {
+            align-items: $item;
+        }
+    }
+}
+
+// align-content
+$align-content--array: flex-start,
+flex-end,
+center,
+space-between,
+space-around,
+stretch;
+
+.align-content {
+    @for $i from 1 through length($align-content--array) {
+        $item: nth($align-content--array, $i);
+
+        &--#{$item} {
+            align-content: $item;
+        }
+    }
+}
+
+//flex
+
+@for $var from 1 to 5 {
+    .flex-item#{$var} {
+        flex: $var;
+    }
+}