瀏覽代碼

课程开发平台运营页面开发

tanxue 2 年之前
父節點
當前提交
f328112f9e

+ 4 - 2
assets/scss/cus-client/cus-client-common.scss

@@ -851,15 +851,17 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
     span.client-default-Btn{background: #fff;color: #3e7ce7;margin-right: 0;}
   }
   @media (max-width: 768px){
+    display: block;
     // 头部图片
     img{width: 100%;height: auto;float: none;}
     // 内容区域
     .course-services-content{
       width: 100%;float: none;padding: 0 10px;margin: 0;
       @include setFontStyle(-6);
-      h5{@include setFontStyle(-6);font-weight: 700;color: rgba(0, 0, 0, 1);}
+      h4{@include setFontStyle(4);display: inline-block;margin-bottom: 16px;}
+      h5{@include setFontStyle(-5);font-weight: 700;color: rgba(0, 0, 0, 1);display: inline-block;margin-bottom: 16px;}
       i{width:34px;height:3px;margin: 10px 0;}
-      p{margin-bottom: 30px;color: rgba(85, 85, 85, 1);}
+      p{margin-bottom: 30px;color: rgba(85, 85, 85, 1);line-height: 24px;font-size: 14px;}
       .p-before-circle:before{width: 16px;height: 16px;margin-right: 6px;}
       .client-btn-box{text-align: center;margin:40px 0;}
       .client-default-Btn,.client-default-white-Btn{width: 120px;height: 35px;line-height: 35px;}

+ 13 - 1
assets/scss/cus-client/cus-client-page.scss

@@ -572,7 +572,6 @@
     }
   }
   .client-new-platform-page{
-    .products-new-contrary-box{flex-direction: row-reverse;}
     .platform-products-services li:not(:last-child) {border: 0;}
     .products-services-box{
       width: 100%;
@@ -2210,5 +2209,18 @@
       }
     }
   }
+
+  /****************  describe:课程开发平台运营  author: TX  date:2022-12-28 ****************/
+  .client-course-platform-page{
+    // 产品功能
+    .course-product-function{
+      background: #f3f8fe;
+    .course-product-box{
+      li{width: 50%;display: inline-block;}
+      h5{font-size: 24px;color: #fff;}
+      p{font-size: 16px;color: #fff;}
+    }
+    }
+  }
 }
 

+ 84 - 1
pages/courseware/platform.vue

@@ -1,12 +1,95 @@
 <!-- 课程开发平台运营页面-->
 <template>
-    <div>平台运营</div>
+    <div class="client-course-platform-page">
+      <!-- 课程开发平台运营 banner栏 -->
+      <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${platformBannerImg})`}" class="client-course-banner"></div>
+      <!-- 运营方案 -->
+      <div class="website-course-services">
+        <h4 class="client-title">运营方案</h4>
+        <ul>
+          <li>
+            <div class="client-container">
+              <div class="course-services-box website-row-reverse">
+                <img :src="platformImg1" alt="学习项目运营-完善的课程培训体系" />
+                <div class="course-services-content">
+                  <h4>01</h4>
+                  <h5>学习项目运营-完善的课程培训体系</h5>
+                  <p>定制学习方案,课件资源管理,课程规划,互动社区,学习积分课程进度查看,地图闯关,结业证书,分享资源,一体化线上学习方案协助您完成全流程的课程培训体系。</p>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="client-container">
+              <div class="course-services-box">
+                <img :src="platformImg2" alt="测评系统-满足人才管理计划" />
+                <div class="course-services-content">
+                  <h4>02</h4>
+                  <h5>测评系统-满足人才管理计划</h5>
+                  <p>职位评价管理用数据量化+多维度测评,PC端与移动端无缝连接;支持安卓、lOS等操作系统;加速人才培养为公司提供随时随地的个性化的、开放式测评服务。</p>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="client-container">
+              <div class="course-services-box website-row-reverse">
+                <img :src="platformImg3" alt="培训管理系统-线上线下全方位融合" />
+                <div class="course-services-content">
+                  <h4>03</h4>
+                  <h5>培训管理系统-线上线下全方位融合</h5>
+                  <p>建立培训计划实现项目管理,随时随地查看培训项目的参训状态,获取最精准的参训人员名单、多维度呈现培训数据报告,员工能力考核,实现匹配公司职位发展模型。</p>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="client-container">
+              <div class="course-services-box">
+                <img :src="platformImg4" alt="培训数据看板-灵活、智慧、全面" />
+                <div class="course-services-content">
+                  <h4>04</h4>
+                  <h5>培训数据看板-灵活、智慧、全面</h5>
+                  <p>数据信息一目了然,支持自定义多维度分析,360项目全貌视图数据展示,方便企业快速决策。</p>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+
+      </div>
+
+      <!-- 产品功能 -->
+      <div class="course-product-function">
+        <div class="client-container">
+          <h4 class="client-title">产品功能</h4>
+          <ul class="course-product-box">
+            <li><div><h5>多层级权限管理</h5><p>满足多层级架构管理体系,根据企业复杂的组织架构控制用户功能权限、数据访问权限、资源访问权限。支持按用户、用户组、角色设置权限。</p></div></li>
+            <li><div><h5>模块化学习应用</h5><p>图文、视频、直播、考试、学分、积分,运用多红学习模块达成的关键成功要素</p></div></li>
+            <li><div><h5>游戏化学习方式</h5><p>游戏化学习对战模式,多种答题模式;随机组卷满足各类题目需求。</p></div></li>
+            <li><div><h5>定制化培训</h5><p>定制化培训为企业瞄准特定的业务问题,并在目标问题上进行有效解决,参训人员能够更好地聚焦培训内容,实现高效学习。</p></div></li>
+            <li><div><h5>数据获取与监管</h5><p>可视化数据实现可追踪、可衡量、可管理,数据质量,帮助建立健全完善的考核制度。</p></div></li>
+            <li><div><h5>随时随地学习</h5><p>适配PC、手机、平板全面打通,学员可利用碎片化时间学习。</p></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
 </template>
 
 <script>
     export default {
         name: 'platform',
         layout:'templateB',
+      data() {
+        return {
+          // 发展现状img
+          platformBannerImg: require(`~/static/images/client/course/course-platform-banner-background.png`),
+          platformImg1:  require(`~/static/images/client/course/course-platform-img1.png`),
+          platformImg2:  require(`~/static/images/client/course/course-platform-img2.png`),
+          platformImg3:  require(`~/static/images/client/course/course-platform-img3.png`),
+          platformImg4:  require(`~/static/images/client/course/course-platform-img4.png`),
+        }
+        }
     };
 </script>
 

二進制
static/images/client/course/course-platform-banner-background.png


二進制
static/images/client/course/course-platform-img1.png


二進制
static/images/client/course/course-platform-img2.png


二進制
static/images/client/course/course-platform-img3.png


二進制
static/images/client/course/course-platform-img4.png