会员认证页面

src/layouts/header/index.vue

@@ -1,17 +1,9 @@
 <template>
-  <div :class="['header', { channel: isHome, estate: isEstate, iasf: isIasf }]">
+  <div class="header">
     <a class="logo"
        @click="toIndex">
-      <template v-if="!$store.getters.getModelType">
-        <img :src="require('@/assets/images/logo2.png')"
-             alt="">
-      </template>
-      <template v-else>
-
-        <img :src="require('@/assets/images/' + (isSfel ? 'logo2' : isHome ? 'logo' : 'logo2') + '.png')"
-             alt="">
-      </template>
-
+      <img src="@/assets/images/logo.png"
+           alt="">
     </a>
     <!-- pc端 -->
     <template v-if="$store.getters.getModelType">

src/pages/home/index.vue

@@ -434,7 +434,6 @@ export default {
 }
 .about {
     padding: 3.848rem 0 9.9rem;
-    background: url(../../assets/images/about-bg.png) no-repeat center center;
     background-size: 100% 100%;
     .line {
         display: flex;

src/pages/member/index.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="wrap">
+    <div class="reg">
+      <div class="equity-wrap">
+        <img class="logo"
+             src="@/assets/images/logo1.png"
+             alt="">
+        <div class="equity">
+          <h6>
+            会员<em>专享权益</em>
+          </h6>
+          <ul class="step">
+            <li>找实训产品难？</li>
+            <li>专业咨询、写方案难？</li>
+            <li>产品与方案匹配难？</li>
+            <li>项目垫资难？</li>
+          </ul>
+          <p class="member-des">职站商城聚合新商科实训产品，高品质低价格，让你一站式采购无忧</p>
+          <ul class="param">
+            <li v-for="(item, i) in params"
+                :key="i">
+              <img :src="require('@/assets/images/member/icon' + (i + 1) + '.png')"
+                   alt="">
+              <p class="name">{{ item.name }}</p>
+              <p class="des">{{ item.des }}</p>
+            </li>
+          </ul>
+          <div class="btn">立即注册 | 0元成会员</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      params: [
+        {
+          name: '一站式采购',
+          des: '优选高品质低价格产品'
+        },
+        {
+          name: '精准产品匹配',
+          des: '体系化产品方案匹配满足不同学科需求'
+        },
+        {
+          name: '本地化售前顾问',
+          des: '提供项目全流程售前售后支持服务'
+        },
+        {
+          name: '移动办公',
+          des: '查看产品、参数，下单，方案生成，手机上即可完成'
+        },
+        {
+          name: '免息账期',
+          des: '先发货后付款，支持背靠背支付'
+        },
+        {
+          name: '智能方案生成',
+          des: '内置有实验室配置方案模板只需3分钟即可生成方案'
+        },
+      ]
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      // this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+      //   if (data.length) {
+      //     // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+      //     const json = JSON.parse(this.preview ?
+      //       data :
+      //       data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+      //     this.modules = json
+      //     console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+      //   }
+      // }).catch(err => {})
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.reg {
+    padding-bottom: 50px;
+    background: url(../../assets/images/member/1.jpg) 0 0/100% 605px no-repeat;
+    .equity-wrap {
+        width: 1190px;
+        padding-top: 20px;
+        margin: 0 auto;
+    }
+    .logo {
+        width: 150px;
+    }
+    .equity {
+        min-height: 614px;
+        margin-top: 20px;
+        background: url(../../assets/images/member/2.jpg) 0 0/100% 100% no-repeat;
+        background-color: #111d42;
+        border-radius: 24px 18px 18px 18px;
+        box-shadow: 0 0 20px 4px rgba(0, 16, 42, 0.3);
+        overflow: hidden;
+    }
+    h6 {
+        position: relative;
+        margin: 60px 0 39px;
+        font-size: 2rem;
+        font-weight: 600;
+        text-align: center;
+        color: #fff;
+        em {
+            font-style: normal;
+            color: #e3b871;
+        }
+        &:after {
+            content: 'VIP';
+            position: absolute;
+            top: -37px;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            font-size: 6rem;
+            font-weight: 700;
+            color: hsla(0, 0%, 100%, 0.05);
+        }
+    }
+    .step {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 60px 0 100px;
+        li {
+            position: relative;
+            font-size: 1.4rem;
+            color: #fff;
+            &:before {
+                content: '';
+                position: absolute;
+                top: 5px;
+                left: -34px;
+                width: 24px;
+                height: 24px;
+                background: url(../../assets/images/member/3.png) 0 0/100% 100% no-repeat;
+            }
+        }
+    }
+    .member-des {
+        margin-top: 25px;
+        font-size: 1rem;
+        text-align: center;
+        color: #fff;
+    }
+    .param {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        padding: 0 120px;
+        li {
+            width: 33.33%;
+            padding: 20px 30px;
+            // margin-bottom: 20px;
+            text-align: center;
+            .name {
+                margin: 10px 0 10px;
+                font-size: 1.1rem;
+                color: #fff;
+            }
+            .des {
+                font-size: 0.9rem;
+                line-height: 1.6;
+                color: hsla(0, 0%, 100%, 0.7);
+            }
+        }
+    }
+    .btn {
+        width: 400px;
+        height: 72px;
+        margin: 30px auto;
+        font-size: 24px;
+        color: #13192e;
+        font-weight: 600;
+        line-height: 72px;
+        text-align: center;
+        background-color: #e3b871;
+        background-image: linear-gradient(233.36deg, #e8ce8c, #f3c169);
+        border-radius: 38px;
+    }
+}
+</style>

src/router/modules/member.js

@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'member'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    },
+  ]
+};