体验中心页面开发

pages/tiyanCenter/index.vue

@@ -1,6 +1,38 @@
 <template>
-  <div >
-      体验中心
+  <div class="client-platform-page tiyan-center-page">
+    <!-- 体验中心 banner栏 --><!--style="url('/static/images/client/exam/exam-banner-background.png')" -->
+    <div class="client-platform-banner">
+      <div :style="{backgroundImage: `url(${tiyanCenterImg})`}"></div>
+    </div>
+    <!--  麦塔在线考试系统体验版 -->
+    <div class="platform-products-experience client-container">
+      <h4 class="client-title">麦塔在线考试系统体验版</h4>
+      <p>简单好用的SaaS考试系统</p>
+      <ul class="experience-ul-box">
+        <li><div><i></i><h5>手机学员端</h5><p>用手机扫描二维码</p><p>考生30秒体验答卷</p><a @mouseenter="enterCodeKs" @mouseleave="leaveCodeKs" style="cursor: default">扫码体验</a><span ref="codeBtnKs"><em></em></span></div></li>
+        <li><div><i></i><h5>电脑学员端</h5><p>支持市面各种主流浏览器</p><p>支持十万量级的考试并发</p><a href="https://youkeksc.mtavip.com/c/youke" target="_blank">立即体验</a></div></li>
+        <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a href="https://youkeksa.mtavip.com/a/youke" target="_blank">后台体验</a></div></li>
+      </ul>
+    </div>
+    <!--  麦塔在线培训系统 -->
+    <div class="platform-products-experience client-container">
+      <h4 class="client-title">麦塔在线培训系统体验版</h4>
+      <p>学练考评一站式培训平台</p>
+      <ul class="experience-ul-box">
+        <li><div><i></i><h5>手机学员端</h5><p>用手机扫描二维码</p><p>随时随地想学就学</p><a @mouseenter="enterCodePx" @mouseleave="leaveCodePx" style="cursor: default">扫码体验</a><span ref="codeBtnPx"><em></em></span></div></li>
+        <li><div><i></i><h5>电脑学员端</h5><p>学练考评一站式培训平台</p><p>支持市面各种主流浏览器</p><a href="https://youkepxc.mtavip.com/c/youke" target="_blank">立即体验</a></div></li>
+        <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a href="https://youkepxa.mtavip.com/a/youke" target="_blank">后台体验</a></div></li>
+      </ul>
+    </div>
+
+    <!-- 企业考培立即注册-->
+    <div class="tiyan-center-register">
+      <div class="client-container">
+        <h5>企业考培,就用麦塔</h5>
+        <p>现在注册立享<span>30人</span>纯免费版本<span>3年</span>使用权限</p>
+        <a>立即注册</a>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,45 +43,37 @@
     async asyncData({ $axios,store }) {
       // 设置选中菜单
       store.commit('setActiveNav', '/tiyanCenter');
-
-/*
-      let [res1, res2] = await Promise.all([
-                                             await $axios.$post(`/home/banner/list`, { 'code': 3 }).then(res => {
-                                               return res;
-                                             }),
-                                             await $axios.$post(`/home/news/carousel`, { 'newsClassifyId': 0,'keyword':'培训' }).then(res => {
-                                               return res;
-                                             })
-                                           ]);
-      return {
-        bannerList: res1.data.data||[],
-        topCarousels: res2.data.data||[],
-
-      };*/
     },
     data() {
       return {
-
+        // 发展现状img
+        tiyanCenterImg: require(`~/static/images/client/tiyanCenter/tiyanCenterImg.png`),
       };
     },
     head(){
       return {
-   /*     title: '课程资源_学习平台_精品课程资源开发建设_学习平台开发建设',
-        meta: [
-          {
-            name: 'keywords',
-            content: '学习平台开发,学习平台建设'
-          },
-          {
-            name:'description',
-            content:'大连栋科软件工程有限公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、知识化、智能化学习管理模式，让学习变得更轻松。“共同成长、相伴一生”是栋科软件始终不渝的核心价值观。'
-          }
-        ],*/
       }
     },
     computed: {},
     methods:  {
+      // 考试鼠标移入
+      enterCodeKs(){
+        this.$refs.codeBtnKs.style.bottom ='90px';
+      },
+
+      // 考试鼠标移出
+      leaveCodeKs(){
+        this.$refs.codeBtnKs.style.bottom ='305px';
+      },
+      // 培训鼠标移入
+      enterCodePx(){
+        this.$refs.codeBtnPx.style.bottom ='90px';
+      },
 
+      // 培训鼠标移出
+      leaveCodePx(){
+        this.$refs.codeBtnPx.style.bottom ='305px';
+      },
     },
     created() {
 
@@ -60,6 +84,3 @@
     },
   };
 </script>
-<style>
-
-</style>