111

111

src/components/headerSection.vue

@@ -19,12 +19,10 @@
           <router-link :class="checkActive==3?'active':''"
                        @click.native="change(3)"
                        :to="{ path: '/consult' }">咨询</router-link>
+         
           <router-link :class="checkActive==4?'active':''"
                        @click.native="change(4)"
-                       :to="{ path: '/platform' }">指南</router-link>
-          <router-link :class="checkActive==5?'active':''"
-                       @click.native="change(5)"
-                       :to="{ path: '/suggest' }">关于我们</router-link>
+                       :to="{ path: '/aboutUs' }">关于我们</router-link>
           <div class="bandBtn">合作机构</div>
         </div>
       </div>

src/router/index.js

@@ -2,6 +2,12 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Index from '@/views/index'
 import consult from '@/views/consult'
+import detile1 from '@/views/consult/detile1.vue'
+import detile2 from '@/views/consult/detile2.vue'
+import detile3 from '@/views/consult/detile3.vue'
+import detile4 from '@/views/consult/detile4.vue'
+import aboutUs from '@/views/aboutUs'
+//detile1
 
 Vue.use(Router)
 
@@ -16,6 +22,32 @@ export default new Router({
       path: '/consult',
       name: 'consult',
       component: consult
-    }
+    },
+    // detile1
+    {
+      path: '/detile1',
+      name: 'detile1',
+      component: detile1
+    },
+    {
+      path: '/detile2',
+      name: 'detile2',
+      component: detile2
+    },
+    {
+      path: '/detile3',
+      name: 'detile3',
+      component: detile3
+    },
+    {
+      path: '/detile4',
+      name: 'detile4',
+      component: detile4
+    },
+    {
+      path: '/aboutUs',
+      name: 'aboutUs',
+      component: aboutUs
+    },
   ]
 })

src/views/aboutUs/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <div class="topBanner">
+      <h2 class="msg">关于我们</h2>
+    </div>
+    <div class="msgWrap">
+      <div class="msgInfo">
+        <h3>什么是酷乐秀</h3>
+        <p>酷乐秀是武汉市景明云乐科技有限公司研发的专为为全国音乐等级考试和音乐比赛提供线上服务，是全国首家拥有音乐类专业直播技术的服务平台。独有“音乐演奏模式”高保真还原乐器演奏的现场感及音色，为远程视频直播、录播考级提供技术支持，考生可通过酷乐秀实现考级完整生命周期。同步还原线下考级场景，为合作机构和考生提供公平公正，省时省力的考试体验。</p>
+        <p>酷乐秀提供全流程线上考级方案，考生可通过酷乐秀APP实现线上报名缴费，远程视频直播录播考试，查询考试结果流程。合作机构通过管理后台完成前期推广，线上考试，数据统计等，让合作机构轻松运营。 </p>
+        <p>景明云乐汇聚了在音乐在线教育，云计算，AI智能行业的顶尖人才 ，运用在音乐教育行业积累的十八年经验结合在语音视频领域多年研究，高度还原了乐器线上演奏场景，并已成功平稳运行二十多万课时。</p>
+        <img src='@/assets/images/aboutUs/about.png' width="100%" alt />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+<style lang="less" scoped>
+.topBanner {
+  background: url("../../assets/images/aboutUs/about-banner.png") center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+  height: 458px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .msg {
+    margin-top: 194px;
+    font-size: 50px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 70px;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.32);
+  }
+}
+.msgWrap {
+  margin-top: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 370px;
+  .msgInfo {
+    width: 950px;
+    h3 {
+      font-size: 36px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #000000;
+      line-height: 50px;
+      margin-bottom: 78px;
+    }
+    p{
+         font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #1a1a1a;
+      line-height: 36px;
+      margin-bottom: 30px;
+      text-indent: 32px;
+      text-align: left;
+    }
+  }
+}
+</style>

src/views/consult/detile1.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div class="msgWrap">
+      <h2>承办单位和定点机构有什么区别？</h2>
+      <p>“承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
+      <p>“定点机构”是指与文化和旅游部艺术发展中心考级中心在各地的艺术考级承办单位合作的艺术相关机构，悬挂牌匾由文化和旅游部艺术发展中心考级中心统一规制，各地承办单位按照统一的编号规则颁发。</p>
+      <p>目前，文化和旅游部艺术发展中心在各地的艺术考级相关机构悬挂牌匾只有“考级办公室或考级委员会”和“定点机构”两种规制。</p>
+            <p class="bottom">来源：文化和旅游部艺术发展中心考级中心</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+.container {
+  background: #f4f4f4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .msgWrap {
+    width: 1000px;
+    background-color: #fff;
+    min-height: 500px;
+    margin: 70px auto 244px;
+    padding: 66px 75px;
+    text-align: left;
+    h2 {
+      font-size: 34px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 48px;
+      margin-bottom: 90px;
+    }
+    p {
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #1a1a1a;
+      line-height: 36px;
+      margin-bottom: 30px;
+      text-indent: 32px;
+    }
+    .bottom {
+        text-align: right;
+    }
+  }
+}
+</style>

src/views/consult/detile2.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="container">
+    <div class="msgWrap">
+      <h2>乐器演奏不清晰不连贯的原因有哪些？</h2>
+      <p>
+        你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？
+        <br />答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。
+        <br />不管你学的是管乐、弦乐还是弹拨乐，演奏不清晰不流畅的根本原因都一样，主要有以下几个方面：
+        <br />
+      </p>
+      <h4>一、不善于慢练</h4>
+      <p>很多快速的跑动乐句没经过一音一句的慢练过程。这是造成旋律含混不清，导致音乐磕磕碰碰的重要原因。我们都知道慢工出细活，可编编有人性子急不愿意慢，把原本慢的曲子也弹得快，快的曲子则弹得更快，怎么会不出现问题？乐曲也好，练习曲也罢，首要任务是把每个音都交代清楚，如果中板速度奏不清楚，就要减速为慢板，慢板还弹不清就再减为甚慢板……总之不要怕慢，要敢于慢条斯理，不管它原始速度多少，不然弹得乱七八糟，弹得定型就难得改过来了。</p>
+      <h4>二、不注意指法</h4>
+      <p>甚至自己瞎编乱造。指法也是乐句连贯的保证，要穿指的时候你不穿，你去跳；该扩指的地方你不扩，也去跳，那不结巴才怪呢！你是初学者，没资格无能力编制个人指法，必须尊重科学，老老实实按曲谱标注指法演奏才是。</p>
+      <h4>三、不练练习曲</h4>
+      <p>或练习曲练得很少，致使手指独立性灵活性差。乐曲弹得顺，旋律拉得畅，显然和手指机能密切相关，而手指功能良好与否，有赖于基本功训练，大量练习曲的练习。许多乐器学习者，喜欢一味弹奏流行歌曲，不重视基本功，不重视手指机能，以致于老是给听众呈现混浊的曲调还蒙在鼓里。</p>
+      <p >虽然还有其他原因，如音位调性不熟悉，双手配合不协调，大脑反映较迟钝等等，但上述三条才是最主要最常见的原因。希望广大乐器自学者和初学者，对照以上条目，查找影响自己演奏清晰度、流畅性和连贯性的毛病与陋习，有针对性地进行整改，促使个人的技能训练尽可能正规，从而不断提高个人的演奏水平。</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+.container {
+  background: #f4f4f4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .msgWrap {
+    width: 1000px;
+    background-color: #fff;
+    min-height: 500px;
+    margin: 70px auto 244px;
+    padding: 66px 75px;
+    text-align: left;
+    h2 {
+      font-size: 34px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 48px;
+      margin-bottom: 90px;
+    }
+    h4 {
+        margin-bottom: 10px;
+    }
+    p {
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #1a1a1a;
+      line-height: 36px;
+      margin-bottom: 30px;
+      text-indent: 32px;
+    }
+  }
+}
+</style>

src/views/consult/detile3.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="container">
+    <div class="msgWrap">
+      <h2>十级琴霸的备考建议，考级琴童人手一份！</h2>
+      <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
+      <h5>正在备战考级的同学们注意啦！</h5>
+      <p>
+        >如果考级曲目中还有一首没练好，建议在未来的一个月中每天坚持3、4小时以上的练琴时间。
+        <br />如果有两首，那么请你沉迷于练琴，不可自拔
+        <br />曲子都已经练好了的同学，每天也需要两个小时的巩固练习
+      </p>
+      <img src="@/assets/images/consult/infoMsg.png" alt="" width="100%">
+      <p>如果考级前仅剩的一个多月的宝贵时间，最重要的是制定合理的练琴计划，规划好练琴时间和进度。我们先来做一个粗略的计算：<p>
+          <h5>考 1-3级的孩子把考级曲目加上基本练习从头到尾演奏一遍的时间大概在需要15分钟， 4-7级的孩子需要20-25分钟，8-10级则要30分钟。</h5>
+      <p>甚至自己瞎编乱造。指法也是乐句连贯的保证，要穿指的时候你不穿，你去跳；该扩指的地方你不扩，也去跳，那不结巴才怪呢！你是初学者，没资格无能力编制个人指法，必须尊重科学，老老实实按曲谱标注指法演奏才是。</p>
+      <p>在考级之前，提高练琴效率是关键，尤其每周回课后的总结十分必要。<span>课后先花20分钟的时间整理一下思路，才能达到事半功倍的效果！</span> 这二十分钟要做些什么？下面这张思维导图告诉你。</p>
+       <img src="@/assets/images/consult/infoImg.jpg" alt="" width="100%">
+       <p>除了提高练琴效率外，还要保证大量的练琴时间，并明确考级的要求，不能盲目练习。</p>
+      <h4>一、完整性</h4>
+      <p>完整性指的是考级的所有曲目都能从头到尾完整地演奏下来，几乎没有不连贯、忘谱的情况出现。 完整性是演奏音乐最基本的要求。
+演奏时出现中途间断、不连贯的情况有以下几个原因：第一是技术不过关，在演奏难点片段的时候习惯性中断；第二是背谱不熟练，在演奏中忘谱也是造成不连贯的因素之一；第三是因为紧张的情绪造成思维反应迟钝甚至混乱，从而影响到手指的运动。
+</p>
+<h4>二、准确性</h4>
+<p>准确性不仅仅指的是音高和节奏，它还包括速度、音乐风格、情感把握等方面的准确性。
+准确性首先要求在练习的过程中不能粗心大意，其次在老师的纠正和引导下做出正确的练习，最后在考试过程中牢记自己经常会出现的错误，尽量避免。
+</p>
+<h4>三、技巧性</h4>
+<p>每首考级作品都会有需要考察的技术难点， 技术难点是在考试中的一个重要评分项，也是钢琴技术水平的重要体现。
+在练习一首作品时，一定要明确作品的技术难点。 慢练，是解决技术难点最有效的方法， 在慢练的过程中要注意指法、手型、手指触键方式等的正确性，然后慢慢加速，最终克服技术难点。
+</p>
+<h4>四、音乐性</h4>
+<p>音乐性包括对乐句乐段的划分，强弱起伏以及风格的把握等方面。对于音乐性最好的训练方法就多听。孩子对音乐的理解层面还比较浅显，甚至只能做出最基本的强弱变化，多欣赏音乐家们的演奏可以提升他们对音乐的认知。但对于即将面临考级的孩子来说，就需要非常有针对性地多听考试曲目，结合老师上课所传授的内容，理解音乐中的情感。</p>
+ <img src="@/assets/images/consult/infoImg1.png" alt="" width="100%">
+      <p>但是，音乐性的表现是建立在一定的技术水平上的，没有好的技术，也无法表现出音乐。当考级进入冲刺阶段时，希望每个备考的孩子都能准备充分、从容应对！</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+.container {
+  background: #f4f4f4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  img {  margin-bottom: 30px;}
+  .msgWrap {
+    width: 1000px;
+    background-color: #fff;
+    min-height: 500px;
+    margin: 70px auto 244px;
+    padding: 66px 75px;
+    text-align: left;
+    h2 {
+      font-size: 34px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 48px;
+      margin-bottom: 90px;
+    }
+    h4,
+    h5 {
+      margin-bottom: 10px;
+      font-size: 16px;
+      line-height: 36px;
+    }
+    p {
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #1a1a1a;
+      line-height: 36px;
+      margin-bottom: 30px;
+      text-indent: 32px;
+      span {
+          font-weight: 600;
+      }
+    }
+  }
+}
+</style>

src/views/consult/detile4.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="container">
+    <div class="msgWrap">
+      <h2>武汉中考改革定了，音乐等艺术等科目纳入“新中考”</h2>
+      <p> <span>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</span> 2023年，形成基于初中学业水平考试成绩、学生综合素质评价结果的“新中考”招生录取模式、管理机制。</p>
+      <h3>学业水平考试有哪些科目</h3>
+      <p>
+        武汉市初中学业水平考试的科目为： <span> 语文、数学、外语、物理、化学、生物、道德与法治、历史、地理、体育与健康、音乐、美术、综合实践活动（信息技术教育）、生命安全教育、心理健康教育，共15科。</span>综合实践活动（研究性学习、社区服务与社会实践以及劳动与技术教育）的学习情况，统一记入学生综合素质评价的相关内容。
+      </p>
+        <img src="@/assets/images/consult/infoImg2.jpg" alt="" width="100%">
+      <p>含地理、生物、音乐、美术、综合实践活动（信息技术教育）、生命安全教育、心理健康教育等，<span>只进行学业水平考试，不纳入高中阶段学校招生录取计分，其结果以等级形式呈现，纳入学生综合素质评价内容，并作为初中学生毕业及普通高中招生录取的依据之一。</span> <p>
+
+          <h5>具体为：</h5>
+      <p>语文、数学、外语、物理和化学、道德与法治和历史，均以卷面原始分计入招生录取总分。理化生实验操作、体育与健康，以原始得分计入招生录取总分。 </p>
+      <p>生物和地理（合卷）、音乐、美术、生命安全教育和心理健康教育（合卷）、综合实践活动（信息技术教育）按80分及以上、79－70分、69－60分、59分以下为A、B、C、D四个等级呈现。以等级方式纳入高中阶段学校招生录取依据。</p>
+      <p>综合素质各维度评定为C等或以上、所有科目学业考试成绩合格的毕业年级学生，方可授予初中毕业证书。学业考试成绩不合格的学生，按科目种类申请参加由区教育局7月10日前组织的一次补考。</p>
+      <p>报考普通高中学校的学生，其以等级形式呈现的成绩中，最多只允许有一个最低等级（D等）成绩的科目。</p>
+      <p>可以看出，此次改革重点在思想品德、学业水平、身心健康、艺术素养和社会实践5个方面，设定评价内容和要求，反映学生的全面发展情况和个性特长，注重考查学生的日常行为规范养成和突出表现。
+近年来，国家政策的支持推动了艺术教育的蓬勃发展。自2013年以来，国家一直着力于对学生艺术素质提升的推动工作。
+</p>
+  <img src="@/assets/images/consult/infoImg4.png" alt="" width="100%">
+       <img src="@/assets/images/consult/infoImg3.png" alt="" width="100%">
+       <p>家长务必要重视孩子的音乐教育，学习乐器的孩子们也一定要抓住这个机会，巩固乐理知识不仅能辅助乐器的学习，还能成为高中招生录取的“垫脚石”。从小从早学好相关科目的基础知识，不管是对提高素质教育水平，还是对升学考试都有直接的帮助。</p>
+    
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+.container {
+  background: #f4f4f4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  img {  margin-bottom: 30px;}
+  .msgWrap {
+    width: 1000px;
+    background-color: #fff;
+    min-height: 500px;
+    margin: 70px auto 244px;
+    padding: 66px 75px;
+    text-align: left;
+    h2 {
+      font-size: 34px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 48px;
+      margin-bottom: 90px;
+    }
+    h3 { color: #1a1a1a; margin-bottom: 20px;}
+    h4,
+    h5 {
+         color: #1a1a1a;
+      margin-bottom: 10px;
+      font-size: 16px;
+      line-height: 36px;
+    }
+    p {
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #1a1a1a;
+      line-height: 36px;
+      margin-bottom: 30px;
+      text-indent: 32px;
+      span {
+          font-weight: 600;
+      }
+    }
+  }
+}
+</style>

src/views/consult/index.vue

@@ -1,21 +1,88 @@
 <template>
-    <div >
-        <div class="topBanner">
-            background: url("../../assets/images/topBanner.png") center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  position: relative;
-  height: 465px;
-        </div>
+  <div>
+    <div class="topBanner">
+      <h2 class="msg">资讯中心</h2>
     </div>
+    <div class="infoList width1200">
+      <div class="infoItem" @click="gotoDetail(1)">
+        <img src="@/assets/images/consult/infoMsg.png" width="100%" alt />
+        <!-- <p class="time"></p> -->
+        <h2>承办单位和定点机构有什么区别</h2>
+        <!-- <p class="info"></p> -->
+      </div>
+      <div class="infoItem" @click="gotoDetail(2)">
+        <img src="@/assets/images/consult/infoMsg.png" width="100%" alt />
+        <!-- <p class="time"></p> -->
+        <h2>乐器演奏不清晰不连贯的原因有哪些</h2>
+        <!-- <p class="info"></p> -->
+      </div>
+      <div class="infoItem" @click="gotoDetail(3)">
+        <img src="@/assets/images/consult/infoMsg.png" width="100%" alt />
+        <!-- <p class="time"></p> -->
+        <h2>十级琴霸的备考建议</h2>
+        <!-- <p class="info"></p> -->
+      </div>
+      <div class="infoItem" @click="gotoDetail(4)">
+        <img src="@/assets/images/consult/infoMsg.png" width="100%" alt />
+        <!-- <p class="time"></p> -->
+        <h2>音乐等艺术等科目纳入“新中考”</h2>
+        <!-- <p class="info"></p> -->
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 export default {
-    data(){
-        return{}
-    }
-}
+  data() {
+    return {};
+  },
+  methods: {
+    gotoDetail(num) {
+      let newpage = this.$router.resolve({
+        name: `detile${num}`,
+      });
+      window.open(newpage.href, '_blank');
+    },
+  },
+};
 </script>
 <style lang="less" scoped>
-    
+.topBanner {
+  background: url("../../assets/images/consult/consultBanner.png") center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+  height: 458px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .msg {
+    margin-top: 194px;
+    font-size: 50px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 70px;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.32);
+  }
+}
+.infoList {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin-top: 56px;
+  text-align: left;
+  .infoItem {
+    width: 250px;
+    margin-bottom: 56px;
+    cursor: pointer;
+    h2 {
+      font-size: 24px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #1a1a1a;
+      line-height: 33px;
+    }
+  }
+}
 </style>