first commit

历届学生/17届课程/团队练手私活项目/.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+
+/psd
+h5share_code/node_modules
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

历届学生/17届课程/团队练手私活项目/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

历届学生/17届课程/团队练手私活项目/h5share_code/.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

历届学生/17届课程/团队练手私活项目/h5share_code/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

历届学生/17届课程/团队练手私活项目/h5share_code/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "h5share_code",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "core-js": "^3.4.3",
+    "vant": "^2.2.16",
+    "video.js": "^7.6.6",
+    "videojs-contrib-hls": "^5.15.0",
+    "vue": "^2.6.10",
+    "vue-router": "^3.1.3"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.1.0",
+    "@vue/cli-plugin-router": "^4.1.0",
+    "@vue/cli-service": "^4.1.0",
+    "amfe-flexible": "^2.2.1",
+    "postcss-pxtorem": "^4.0.1",
+    "style-resources-loader": "^1.3.2",
+    "stylus": "^0.54.7",
+    "stylus-loader": "^3.0.2",
+    "vue-template-compiler": "^2.6.10"
+  }
+}

历届学生/17届课程/团队练手私活项目/h5share_code/postcss.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: {
+    'autoprefixer': {
+      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7', 'ie >= 8']
+    },
+    'postcss-pxtorem': {
+      rootValue: 37.5,
+      propList: ['*']
+    }
+  }
+}

历届学生/17届课程/团队练手私活项目/h5share_code/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>h5share_code</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but h5share_code doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

历届学生/17届课程/团队练手私活项目/h5share_code/src/App.vue

@@ -0,0 +1,27 @@
+<template>
+  <div id="app">
+    <router-view />
+
+    <div id="nav">
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+      }
+    },
+  }
+</script>
+
+<style lang="stylus">
+  .vjs-big-play-button
+    width: 60px !important;
+    height: 60px  !important;
+    border-radius: 100%  !important;
+    line-height: 60px  !important;
+    top 33% !important
+    left 40% !important
+</style>

历届学生/17届课程/团队练手私活项目/h5share_code/src/api/index.js

@@ -0,0 +1,93 @@
+import axios from 'axios'
+import utils from '../utils'
+import { Toast } from 'vant';
+
+class Axios {
+    constructor() {
+        axios.defaults.baseURL = utils.BaseApi()
+        this.RequestInterceptors()
+        this.ResponseInterceptors()
+    }
+
+    /**
+     * get接口的请求
+     * @param params
+     * {
+     *   url: '请求地址',
+     *   data: {
+     *     接口请求参数
+     *   }
+     * }
+     * @returns {Promise<*>}
+     */
+    async get(params = {}) {
+        return await axios.get(params.url, {
+            params: params.data
+        })
+    }
+
+    /**
+     * post 接口的请求
+     * @param params
+     * {
+     *   url: '请求地址',
+     *   data: {
+     *     接口请求参数
+     *   }
+     * }
+     * @param params
+     * @returns {Promise<*>}
+     */
+    async post(params = {}) {
+        return await axios.post(params.url, params.data)
+    }
+
+    /**
+     * 添加请求拦截器
+     * @constructor
+     */
+    RequestInterceptors() {
+        axios.interceptors.request.use(function(config) {
+            // ajax发送的时候显示加载进度
+            Toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            // 在发送请求之前做些什么
+            return config;
+        }, function(error) {
+            // 对请求错误做些什么
+            return Promise.reject(error);
+        });
+    }
+
+    /**
+     * 添加响应拦截器
+     * @constructor
+     */
+    ResponseInterceptors() {
+        axios.interceptors.response.use(function(response) {
+            console.log(response.data)
+            switch (response.data.resultCode) {
+                case '000':
+                    Toast.clear("给你");
+                    return response.data.data;
+                    break;
+                case '500':
+                    Toast.fail(response.data.message);
+                    break;
+                default:
+                    break;
+            }
+
+        }, function(error) {
+            // 对响应错误做点什么
+            Toast.fail('wwwww'); // 给用户看
+            // 日志记录 稍后写
+            return Promise.reject(error);
+        });
+    }
+
+}
+
+export default new Axios();

历届学生/17届课程/团队练手私活项目/h5share_code/src/assets/styl/imports.styl

@@ -0,0 +1,3 @@
+@import "tpl/color.styl"
+@import "tpl/mixins.styl"
+@import "tpl/clear.styl"

历届学生/17届课程/团队练手私活项目/h5share_code/src/assets/styl/page/post.styl

@@ -0,0 +1,71 @@
+.van-nav-bar
+  width: 100%;
+  position: fixed;
+  .van-nav-bar__left
+    margin-left: 1.013rem;
+  .van-nav-bar__right
+    margin-right: 1.013rem;
+.post_header
+  width: 100%;
+  height: 46px;
+.custom-indicator
+  width: 1.333rem;
+  height: 0.64rem;
+  line-height 0.64rem
+  opacity: 0.6
+  background-color: #000000;
+  text-align center
+  border-radius: 0.32rem;
+  position: absolute
+  bottom 5%
+  right 5%
+  color #fff
+  font-size: 0.373rem;
+
+
+.post_content
+  width 100%
+  .posting
+    margin-left 0.32rem
+    padding-bottom 0.587rem
+    .post_img
+      margin-bottom 0.2rem
+      margin-top 0.312rem
+      display flex
+      img
+        border-radius 0.5rem
+
+        width: 0.96rem
+        height: 0.96rem
+      .post_name
+        margin-left 0.213rem
+        h4
+          font-family: PingFangSC-Bold;
+          font-size: 0.373rem;
+          font-weight: normal;
+          font-stretch: normal;
+          line-height: 0.448rem;
+          letter-spacing: 0rem;
+          color: #333333;
+        p
+          font-family: PingFangSC-Medium;
+          font-size: 0.32rem;
+          font-weight: normal;
+          font-stretch: normal;
+          line-height: 0.747rem;
+          letter-spacing: 0rem;
+          color: #999999;
+
+
+    p
+      font-family: PingFangSC-Medium;
+      font-size: 0.427rem;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 0.667rem;
+      letter-spacing: 0rem;
+      color: #333333;
+  .interval
+    width 100%
+    height 0.231rem
+    background #f3f3f3

历届学生/17届课程/团队练手私活项目/h5share_code/src/assets/styl/page/radio.styl

@@ -0,0 +1,62 @@
+.header
+  p
+    font-family: PingFangSC-Bold;
+    font-size: 0.48rem;
+    font-weight: bold;
+    font-stretch: normal;
+    letter-spacing: 0rem;
+    color: #000000;
+    margin-top 1.347rem
+    text-align center
+  img
+    width: 7.467rem;
+    height: 7.467rem;
+    margin-left 1.267rem
+    margin-top 0.827rem
+.footer_top
+  img
+    width 7.467rem
+    margin-left 1.267rem
+    margin-top 0.667rem
+.footer_low
+  width: 7.467rem
+  margin-left 1.267rem
+  ul
+    display flex
+    align-items center
+    justify-content space-between
+    li
+      text-align center
+      .left
+        width: 0.52rem;
+        height: 0.52rem;
+      p
+        font-family: PingFang-SC-Medium;
+        font-size: 0.267rem;
+        font-weight: normal;
+        font-stretch: normal;
+        line-height: 0.56rem;
+        letter-spacing: 0rem;
+        color: #999999;
+      .content
+        width: 1.6rem;
+        height: 1.6rem;
+        margin-top 0.733rem
+      .right
+        width: 0.533rem;
+        height: 0.533rem;
+    .van-popup
+      ul
+        width 100%
+        flex-direction column
+        li
+          display flex
+          width 100%
+          height 50px
+          p
+            font-size: 0.48rem
+            font-weight: bold
+            color: #000000
+            text-align center
+            margin 0 auto
+

历届学生/17届课程/团队练手私活项目/h5share_code/src/assets/styl/page/read.styl

@@ -0,0 +1,106 @@
+.top-prove
+  padding 60px 10px
+  box-sizing border-box
+  height: 100px;
+  width: 100%;
+  font-family: PingFang-SC-Bold;
+  background: #fff;
+  h2
+    line-height: 0.72rem;
+    letter-spacing: 0.013rem;
+    font-size: 0.533rem;
+    color: #333333;
+  span
+    font-family: PingFang-SC-Medium;
+    font-size: 0.32rem;
+    font-weight: normal;
+    font-stretch: normal;
+    letter-spacing: 0rem;
+    color: #999999;
+
+.total-introduce
+  height: auto;
+  overflow: hidden;
+  font-size: 14px;
+  color: #434343;
+  margin:40px 10px;
+  .intro-content
+    .merchant-desc
+      line-height: 21px;
+  .unfold
+    display: block;
+    z-index: 11;
+    float: right;
+    .unfold_img
+      width 0px
+
+.detailed-introduce
+  font-size: 14px;
+  color: #434343;
+  position: relative;
+  overflow: hidden;
+  margin:40px 10px;
+  .intro-content
+    // 最大高度设为4倍的行间距
+    max-height: 84px;
+    line-height: 21px;
+    word-wrap: break-word;
+    /*强制打散字符*/
+    word-break: break-all;
+    background: #ffffff;
+    /*同背景色*/
+    color: #ffffff;
+    overflow: hidden;
+    .merchant-desc
+      width: 100%;
+      margin:40px 10px;
+      line-height: 21px;
+    &:after,
+      // 这是展开前实际显示的内容
+    &:before
+      content: attr(title);
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      color: #434343
+    // overflow: hidden;
+    // 把最后最后一行自身的上面三行遮住
+    &:before
+      display: block;
+      overflow: hidden;
+      z-index: 1;
+      max-height: 63px;
+      background: #ffffff;
+
+    &:after
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      height: 81px;
+      /*截取行数*/
+      -webkit-line-clamp: 4;
+      text-overflow: ellipsis;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      /*行首缩进字符数，值为[(截取行数-1)*尾部留空字符数]*/
+      text-indent: -12em;
+      /*尾部留空字符数*/
+      padding-right: 4em;
+
+    .unfold
+      z-index: 11;
+      width: 100%;
+      height: 40px;
+      background linear-gradient(rgba(0,0,0,0),#fff)
+      outline: 0;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+
+      .unfold_img
+        margin 18px 0px 0px 50%
+        width 30px
+        img
+          margin 0 auto
+

历届学生/17届课程/团队练手私活项目/h5share_code/src/assets/styl/page/video.styl

@@ -0,0 +1,58 @@
+  .content
+    margin 0 0.33rem 0 0.33rem
+    h2
+      font-family PingFangSC-Bold
+      font-size 0.48rem
+      font-weight normal
+      font-stretch normal
+      letter-spacing 0rem
+      font-weight bold
+      color #333333
+      padding 0.88rem 0.4rem 0 0.4rem
+    span
+      padding 0 0.4rem 0.36rem 0.4rem
+      padding-top 0.4rem
+      padding-bottom 0.413rem
+      font-family: PingFangSC-Medium;
+      font-size: 0.307rem;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 0.576rem;
+      letter-spacing: 0rem;
+      color: #999999;
+  .van-cell
+    position relative
+    background-color #fff
+    display flex
+    padding 0 !important
+    img
+      width 0.347rem
+      height 0.36rem
+      margin-right 5px
+  .jianjie
+    display -webkit-inline-box
+    padding-left 4.4rem
+  .introduction
+    display -webkit-inline-box
+  .like
+    display -webkit-inline-box
+    margin-left 17px
+    margin-right 194px
+  .van-cell
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    box-sizing: border-box;
+    width: 100%
+    padding: 0
+    overflow: hidden;
+    color: #323233;
+    font-size: 0.37333rem;
+    line-height: 0.64rem;
+    background-color: #fff;
+  .van-collapse-item__content
+    padding 12px 0 12px 0
+  .van-collapse-item
+    padding 0

历届学生/17届课程/团队练手私活项目/h5share_code/src/assets/styl/tpl/clear.styl

@@ -0,0 +1,23 @@
+html,body,#app
+  width 100%
+  height 95%
+
+h1,h2,h3,h4,h5,h6,p,ul,li
+  margin 0
+  padding 0
+  list-style none
+
+a
+  text-decoration none
+
+img
+  width: 100%;
+
+input
+  outline none
+
+.content
+  margin-bottom: 50px;
+
+.car .van-checkbox__icon
+  margin-left 10px

历届学生/17届课程/团队练手私活项目/h5share_code/src/assets/styl/tpl/color.styl

@@ -0,0 +1,307 @@
+//全局颜色配置
+$themeColor = red
+
+$red50= #ffebee;
+$red100= #ffcdd2;
+$red200= #ef9a9a;
+$red300= #e57373;
+$red400= #ef5350;
+$red500= #f44336;
+$red600= #e53935;
+$red700= #d32f2f;
+$red800= #c62828;
+$red900= #b71c1c;
+$redA100= #ff8a80;
+$redA200= #ff5252;
+$redA400= #ff1744;
+$redA700= #d50000;
+$red= $red500;
+
+$pink50= #fce4ec;
+$pink100= #f8bbd0;
+$pink200= #f48fb1;
+$pink300= #f06292;
+$pink400= #ec407a;
+$pink500= #e91e63;
+$pink600= #d81b60;
+$pink700= #c2185b;
+$pink800= #ad1457;
+$pink900= #880e4f;
+$pinkA100= #ff80ab;
+$pinkA200= #ff4081;
+$pinkA400= #f50057;
+$pinkA700= #c51162;
+$pink= $pink500;
+
+$purple50= #f3e5f5;
+$purple100= #e1bee7;
+$purple200= #ce93d8;
+$purple300= #ba68c8;
+$purple400= #ab47bc;
+$purple500= #9c27b0;
+$purple600= #8e24aa;
+$purple700= #7b1fa2;
+$purple800= #6a1b9a;
+$purple900= #4a148c;
+$purpleA100= #ea80fc;
+$purpleA200= #e040fb;
+$purpleA400= #d500f9;
+$purpleA700= #aa00ff;
+$purple= $purple500;
+
+$deepPurple50= #ede7f6;
+$deepPurple100= #d1c4e9;
+$deepPurple200= #b39ddb;
+$deepPurple300= #9575cd;
+$deepPurple400= #7e57c2;
+$deepPurple500= #673ab7;
+$deepPurple600= #5e35b1;
+$deepPurple700= #512da8;
+$deepPurple800= #4527a0;
+$deepPurple900= #311b92;
+$deepPurpleA100= #b388ff;
+$deepPurpleA200= #7c4dff;
+$deepPurpleA400= #651fff;
+$deepPurpleA700= #6200ea;
+$deepPurple= $deepPurple500;
+
+$indigo50= #e8eaf6;
+$indigo100= #c5cae9;
+$indigo200= #9fa8da;
+$indigo300= #7986cb;
+$indigo400= #5c6bc0;
+$indigo500= #3f51b5;
+$indigo600= #3949ab;
+$indigo700= #303f9f;
+$indigo800= #283593;
+$indigo900= #1a237e;
+$indigoA100= #8c9eff;
+$indigoA200= #536dfe;
+$indigoA400= #3d5afe;
+$indigoA700= #304ffe;
+$indigo= $indigo500;
+
+$blue50= #e3f2fd;
+$blue100= #bbdefb;
+$blue200= #90caf9;
+$blue300= #64b5f6;
+$blue400= #42a5f5;
+$blue500= #2196f3;
+$blue600= #1e88e5;
+$blue700= #1976d2;
+$blue800= #1565c0;
+$blue900= #0d47a1;
+$blueA100= #82b1ff;
+$blueA200= #448aff;
+$blueA400= #2979ff;
+$blueA700= #2962ff;
+$blue= $blue500;
+
+$lightBlue50= #e1f5fe;
+$lightBlue100= #b3e5fc;
+$lightBlue200= #81d4fa;
+$lightBlue300= #4fc3f7;
+$lightBlue400= #29b6f6;
+$lightBlue500= #03a9f4;
+$lightBlue600= #039be5;
+$lightBlue700= #0288d1;
+$lightBlue800= #0277bd;
+$lightBlue900= #01579b;
+$lightBlueA100= #80d8ff;
+$lightBlueA200= #40c4ff;
+$lightBlueA400= #00b0ff;
+$lightBlueA700= #0091ea;
+$lightBlue= $lightBlue500;
+
+$cyan50= #e0f7fa;
+$cyan100= #b2ebf2;
+$cyan200= #80deea;
+$cyan300= #4dd0e1;
+$cyan400= #26c6da;
+$cyan500= #00bcd4;
+$cyan600= #00acc1;
+$cyan700= #0097a7;
+$cyan800= #00838f;
+$cyan900= #006064;
+$cyanA100= #84ffff;
+$cyanA200= #18ffff;
+$cyanA400= #00e5ff;
+$cyanA700= #00b8d4;
+$cyan= $cyan500;
+
+$teal50= #e0f2f1;
+$teal100= #b2dfdb;
+$teal200= #80cbc4;
+$teal300= #4db6ac;
+$teal400= #26a69a;
+$teal500= #009688;
+$teal600= #00897b;
+$teal700= #00796b;
+$teal800= #00695c;
+$teal900= #004d40;
+$tealA100= #a7ffeb;
+$tealA200= #64ffda;
+$tealA400= #1de9b6;
+$tealA700= #00bfa5;
+$teal= $teal500;
+
+$green50= #e8f5e9;
+$green100= #c8e6c9;
+$green200= #a5d6a7;
+$green300= #81c784;
+$green400= #66bb6a;
+$green500= #4caf50;
+$green600= #43a047;
+$green700= #388e3c;
+$green800= #2e7d32;
+$green900= #1b5e20;
+$greenA100= #b9f6ca;
+$greenA200= #69f0ae;
+$greenA400= #00e676;
+$greenA700= #00c853;
+$green= $green500;
+
+$lightGreen50= #f1f8e9;
+$lightGreen100= #dcedc8;
+$lightGreen200= #c5e1a5;
+$lightGreen300= #aed581;
+$lightGreen400= #9ccc65;
+$lightGreen500= #8bc34a;
+$lightGreen600= #7cb342;
+$lightGreen700= #689f38;
+$lightGreen800= #558b2f;
+$lightGreen900= #33691e;
+$lightGreenA100= #ccff90;
+$lightGreenA200= #b2ff59;
+$lightGreenA400= #76ff03;
+$lightGreenA700= #64dd17;
+$lightGreen= $lightGreen500;
+
+$lime50= #f9fbe7;
+$lime100= #f0f4c3;
+$lime200= #e6ee9c;
+$lime300= #dce775;
+$lime400= #d4e157;
+$lime500= #cddc39;
+$lime600= #c0ca33;
+$lime700= #afb42b;
+$lime800= #9e9d24;
+$lime900= #827717;
+$limeA100= #f4ff81;
+$limeA200= #eeff41;
+$limeA400= #c6ff00;
+$limeA700= #aeea00;
+$lime= $lime500;
+
+$yellow50= #fffde7;
+$yellow100= #fff9c4;
+$yellow200= #fff59d;
+$yellow300= #fff176;
+$yellow400= #ffee58;
+$yellow500= #ffeb3b;
+$yellow600= #fdd835;
+$yellow700= #fbc02d;
+$yellow800= #f9a825;
+$yellow900= #f57f17;
+$yellowA100= #ffff8d;
+$yellowA200= #ffff00;
+$yellowA400= #ffea00;
+$yellowA700= #ffd600;
+$yellow= $yellow500;
+
+$amber50= #fff8e1;
+$amber100= #ffecb3;
+$amber200= #ffe082;
+$amber300= #ffd54f;
+$amber400= #ffca28;
+$amber500= #ffc107;
+$amber600= #ffb300;
+$amber700= #ffa000;
+$amber800= #ff8f00;
+$amber900= #ff6f00;
+$amberA100= #ffe57f;
+$amberA200= #ffd740;
+$amberA400= #ffc400;
+$amberA700= #ffab00;
+$amber= $amber500;
+
+$orange50= #fff3e0;
+$orange100= #ffe0b2;
+$orange200= #ffcc80;
+$orange300= #ffb74d;
+$orange400= #ffa726;
+$orange500= #ff9800;
+$orange600= #fb8c00;
+$orange700= #f57c00;
+$orange800= #ef6c00;
+$orange900= #e65100;
+$orangeA100= #ffd180;
+$orangeA200= #ffab40;
+$orangeA400= #ff9100;
+$orangeA700= #ff6d00;
+$orange= $orange500;
+
+$deepOrange50= #fbe9e7;
+$deepOrange100= #ffccbc;
+$deepOrange200= #ffab91;
+$deepOrange300= #ff8a65;
+$deepOrange400= #ff7043;
+$deepOrange500= #ff5722;
+$deepOrange600= #f4511e;
+$deepOrange700= #e64a19;
+$deepOrange800= #d84315;
+$deepOrange900= #bf360c;
+$deepOrangeA100= #ff9e80;
+$deepOrangeA200= #ff6e40;
+$deepOrangeA400= #ff3d00;
+$deepOrangeA700= #dd2c00;
+$deepOrange= $deepOrange500;
+
+$brown50= #efebe9;
+$brown100= #d7ccc8;
+$brown200= #bcaaa4;
+$brown300= #a1887f;
+$brown400= #8d6e63;
+$brown500= #795548;
+$brown600= #6d4c41;
+$brown700= #5d4037;
+$brown800= #4e342e;
+$brown900= #3e2723;
+$brown= $brown500;
+
+$blueGrey50= #eceff1;
+$blueGrey100= #cfd8dc;
+$blueGrey200= #b0bec5;
+$blueGrey300= #90a4ae;
+$blueGrey400= #78909c;
+$blueGrey500= #607d8b;
+$blueGrey600= #546e7a;
+$blueGrey700= #455a64;
+$blueGrey800= #37474f;
+$blueGrey900= #263238;
+$blueGrey= $blueGrey500;
+
+$grey50= #fafafa;
+$grey100= #f5f5f5;
+$grey200= #eeeeee;
+$grey300= #e0e0e0;
+$grey400= #bdbdbd;
+$grey500= #9e9e9e;
+$grey600= #757575;
+$grey700= #616161;
+$grey800= #424242;
+$grey900= #212121;
+$grey= $grey500;
+
+$black= #000000;
+$white= #ffffff;
+
+$transparent= rgba(0, 0, 0, 0);
+$fullBlack= rgba(0, 0, 0, 1);
+$darkBlack= rgba(0, 0, 0, 0.87);
+$lightBlack= rgba(0, 0, 0, 0.54);
+$minBlack= rgba(0, 0, 0, 0.26);
+$faintBlack= rgba(0, 0, 0, 0.12);
+$fullWhite= rgba(255, 255, 255, 1);
+$darkWhite= rgba(255, 255, 255, 0.87);
+$lightWhite= rgba(255, 255, 255, 0.54);

历届学生/17届课程/团队练手私活项目/h5share_code/src/assets/styl/tpl/mixins.styl

@@ -0,0 +1,25 @@
+hairline($color=#eeeeee)
+  &:before
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: auto;
+    right: auto;
+    height: 1px;
+    width: 100%;
+    background-color: $color;
+    display: block;
+    z-index: 15;
+    // .transform-origin(50% 0%);
+    html.pixel-ratio-2 &
+      transform(scaleY(0.5));
+
+    html.pixel-ratio-3 &
+      transform(scaleY(0.33));
+
+transform($t)
+  -webkit-transform: $t;
+  transform: $t;
+
+

历届学生/17届课程/团队练手私活项目/h5share_code/src/components/Allcomments.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="allcomments">
+    <div class="com_title">
+      <h2>全部评论</h2>
+    </div>
+    <div class="com_content" v-if="judgeCom">
+      <ul>
+        <li v-for="(va,ind) in commentsLists" :key="ind">
+          <div class="con_left">
+            <img :src="va.image" :alt="va.nick_name">
+          </div>
+          <div class="con_right">
+            <div class="user_name">
+              <div class="user_name_left">
+                <span>{{va.nick_name}}</span>
+                <span>{{va.create_time}}</span>
+              </div>
+              <div class="user_name_right">
+                <span>
+                  <img v-if="img" src="img/Fabulous2.png" alt="" @click="imgClicj" @load="countse(va.praise_count)">
+                  <img v-else src="img/Fabulous.png" alt="" @click="imgClicj">
+                </span>
+                <span v-if="judges">{{va.praise_count}}</span>
+                <span v-else>{{praise}}</span>
+              </div>
+            </div>
+            <div class="user_comm">
+              <p>{{va.content}}</p>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="com_content" v-else>
+      <div class="com_img2">
+        <img src="img/comment.png" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "allcomments",
+  data() {
+    return {
+      img:true,// 判断点赞图片
+      praise:0, // 默认点赞数
+      judges:true,
+      commentsLists: [],// 用于存储评论
+      judgeCom: true,// 用于 判断 显示 页面
+      // commentsString: ''
+    };
+  },
+  props: {
+    commentsList:Array // 用于接受 数据
+  },
+  methods: {
+    /**
+     *  imgClicj
+     *  用于 点赞数的统计 
+     *  第一次点击 为真 图片变红 再次点击 取消点赞
+     *  true 点赞+1
+     *  false 取消点赞 -1
+     */
+    imgClicj () {
+      if (this.img) {
+        this.img = false
+        this.praise += 1
+        this.judges = false
+      } else {
+        this.img = true
+        this.praise -= 1
+      }
+    },
+    /**
+     * judge
+     * 用于判断 传递过来数组是否有值
+     * true 将 commentsList 赋值给 commentsLists
+     * false 将 显示 评论为空 界面
+     */
+    judge () {
+      if (this.commentsList.length == 0 || this.commentsList == null) {
+        this.judgeCom =false
+      }else {
+        this.judgeCom =true
+        this.commentsLists = this.commentsList
+      }
+    },
+    countse (count) {
+      this.praise = count
+    }
+  },
+  created() {
+    this.judge ()
+  },
+};
+</script>
+
+<style scoped lang="stylus">
+.allcomments
+  .com_title
+    width 10rem
+    height 1.347rem
+    display flex
+    align-items: center
+    h2
+      font-family PingFangSC-Bold;
+      font-size 0.427rem
+      font-weight normal
+      font-stretch normal
+      letter-spacing 0rem
+      color #333333
+      margin-left 0.32rem
+  .com_content
+    width 10rem
+    .com_img2
+      height 8.52rem
+      width 100%
+      display flex
+      justify-content center
+      img
+        margin-top 0.6rem 
+        width: 5.56rem
+        height: 4.653rem
+    ul
+      width 100%
+      li
+        display flex
+        justify-content space-between
+        padding-bottom 0.533rem
+        .con_left
+          width 1.56rem
+          height 3.2rem
+          display flex
+          justify-content center
+          img
+            border-radius 50%
+            width: 0.933rem
+            height: 0.947rem
+            margin-top 0.4rem
+        .con_right
+          width 8.44rem
+          .user_name
+            display flex
+            justify-content space-between
+            align-items center
+            margin-top 0.4rem
+            padding-bottom 0.507rem
+            .user_name_left
+              span
+                display block
+                &:nth-child(1)
+                  font-family: PingFang-SC-Bold;
+                  font-size: 0.373rem;
+                  font-weight: normal;
+                  font-stretch: normal;
+                  letter-spacing: 0rem;
+                  color: #333333;
+                &:nth-child(2)
+                  font-family: PingFang-SC-Medium;
+                  font-size: 0.267rem;
+                  font-weight: normal;
+                  font-stretch: normal;
+                  letter-spacing: 0rem;
+                  color: #999999;
+                  margin-top 0.133rem
+            .user_name_right
+              display flex
+              margin-right 0.32rem
+              span
+                &:nth-child(1)
+                  margin-right 0.133rem
+                  img
+                    display block
+                    width 0.347rem
+                    height 0.36rem
+                &:nth-child(2)
+                  font-family PingFang-SC-Medium
+                  font-size 0.32rem
+                  font-weight normal
+                  font-stretch normal
+                  letter-spacing 0rem
+                  color #999999
+          .user_comm
+            p
+              font-family: PingFangSC-Medium;
+              font-size: 0.373rem;
+              font-weight: normal;
+              font-stretch: normal;
+              letter-spacing: 0.008rem;
+              color: #333333;
+              padding-right 0.52rem
+              box-sizing border-box
+
+</style>

历届学生/17届课程/团队练手私活项目/h5share_code/src/components/Header.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="header" :style="style">
+    <img src="img/logo.png" alt="打开包河">
+    <button class="open" @click="openApp">打开</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      style:{ // 存储 css 属性
+        top:'50px' //默认 top 值
+      }
+    }
+  },
+  name: 'Header',
+  props: {
+    pots:String // 接受css 属性
+  },
+  methods: {
+    /**
+     * 点击 打开app
+     */
+    openApp () {
+      console.log("打开按钮");
+    }
+  },
+  /**
+   * 组合 top 值
+  */
+  created () {
+    // 判断 是否有值 true 默认 false 传递值
+    this.style.top = this.pots == undefined ? this.style.top : this.pots + 'px'
+  }
+}
+</script>
+
+<style scoped lang="stylus">
+  .header
+    position fixed
+    left 0
+    top 0 !important
+    width: 10rem;
+    height: 1.333rem;
+    background-color: #4d4d4d;
+    display flex
+    justify-content space-between
+    align-items center
+    z-index 999
+    img
+      height: 0.867rem;
+      width 2.867rem
+      margin-left 0.32rem
+    .open
+      width: 1.92rem;
+      height: 0.693rem;
+      background-color: #d0302c;
+      border-radius: 0.107rem;
+      font-size 14px
+      color #fff
+      border 0
+      margin-right 0.547rem
+</style>

历届学生/17届课程/团队练手私活项目/h5share_code/src/components/HelloWorld.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="hello">
+    <h3>{{ msg }}</h3>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<style scoped lang="stylus">
+
+</style>

历届学生/17届课程/团队练手私活项目/h5share_code/src/components/OpenComments.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="comments" v-show="switchs" :style="comments">
+    <h2 @click="openComments">打开APP查看全部评论</h2>
+  </div>
+</template>
+
+<script>
+export default {
+	name: "Comments",
+	data() {
+		return {
+			switchs: true, // 控制 显示与否
+			comments: {
+				position: '' // 控制 定位 与否
+			}
+		}
+	},
+  props: {
+		switch:String, // 是否显示
+		position:String // 接受 css 
+	},
+  methods: {
+	  /**
+	   *  openComments
+	   *  用于打开app 查看评论
+	   */
+    openComments() {
+		console.log("打开按钮");
+		// this.switchs = false
+    }
+	},
+	created () {
+		// 接受值
+		this.switchs = this.switch
+		// 接受值 判断 
+		this.comments.position = this.position == "block" ? this. position : 'fixed'
+		// console.log(this.comments.position);
+	}
+};
+</script>
+
+<style scoped lang="stylus">
+.comments
+	width 10rem
+	height 1.693rem
+	display flex
+	justify-content center
+	bottom 0
+	left 0
+	h2
+		width: 9.36rem
+		height: 1.173rem
+		border-radius: 0.107rem
+		border: solid 0.027rem #d0302c
+		font-size: 0.373rem
+		display flex
+		justify-content center
+		align-items center
+		color: #d0302c
+		letter-spacing: 0rem
+		font-weight: normal
+		font-stretch: normal
+		font-family: PingFangSC-Medium
+		font-size: 0.373rem
+</style>

历届学生/17届课程/团队练手私活项目/h5share_code/src/components/Radio.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="Radio">
+         <div class="header">
+                <p>包河整</p>
+                <img src="img/wyz.jpg">
+            </div>
+         <div class="fonter">
+                    <div class="footer_top">
+                        <img src="img/td.png" alt="跳动" v-show="replace">
+                        <img src="img/td.gif" alt="跳动"  v-show="!replace">
+                    </div>
+                    <div class="footer_low">
+                        <ul>
+                            <li @click="change" >
+                                <img src="img/refresh.png" alt="" class="left" >
+                                    <p>
+                                        当前直播
+                                    </p>
+                            </li>
+                            <li  @click="play" >
+                                <img src="img/player.png" alt="" class="content" v-show="replace">
+                                <img src="img/suspend.png" alt="" class="content"  v-show="!replace">
+                            </li>
+                            <li @click="showPopup">
+                                <img src="img/list.png" alt="" class="right" >
+                                    <p>
+                                        节目列表
+                                    </p>
+                            </li>
+                            <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
+
+                                <ul>
+                                    <li> <p>节目单</p></li>
+                                    <li>
+                                        <div class="left">
+                                            <p>节目名称</p>
+                                            <span>主持人姓名</span>
+                                        </div>
+                                        <div class="right">
+
+                                        </div>
+                                    </li>
+                                </ul>
+
+
+                            </van-popup>
+                        </ul>
+                    </div>
+                  </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        created(){
+            this.startradio()
+        },
+        data() {
+            return {
+                datalist:[],
+                replace: true,//控制默认显示图片
+                activeName: 'a',//控制默认Tabs显示页面
+                show: false,//控制弹出层
+            }
+        },
+        methods: {
+            //点击刷新页面
+            change() {
+                console.log("当前页面刷新")
+                this.$forceUpdate()
+            },
+            //点击更换图片
+            play() {
+                this.replace = !this.replace
+            },
+            //点击弹出列表
+            showPopup() {
+                this.show = true;
+            },
+            async startradio() {
+                var radio = await this.$http.playRadio.startradio({
+                    id: this.id,
+                });
+                this.datalist = radio;
+                console.log(this.datalist);
+            }
+        }
+    }
+</script>
+
+<style scoped lang="stylus">
+    @import "~!/radio.styl"
+</style>

历届学生/17届课程/团队练手私活项目/h5share_code/src/components/Recommended.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="recommended">
+    <div class="rec_title">
+      <h2>相关推荐</h2>
+    </div>
+    <div class="rec_content" v-if="judge">
+			<ul>
+				<!-- v-for="(val,index) in recommendefList" :key="index" -->
+				<li v-for="(val,index) in recommendefList" :key="index">
+					<div class="rec_con_left">
+						<p>{{val.title}}</p>
+						<span class="time">{{val.create_time}}</span>
+					</div>
+					<div class="rec_con_right">
+						<img :src="val.icon" :alt="val.title">
+					</div>
+				</li>	
+			</ul>
+    </div>
+		<div class="rec_content2" v-else>
+			<ul>
+				<!-- v-for="(val,index) in recommendefList" :key="index" -->
+				<li v-for="(val,index) in recommendefList" :key="index">
+					<div class="rec_con_top">
+						<img :src="val.cover" :alt="val.title">
+						<span class="time2">{{val.size}}</span>
+					</div>
+					<div class="rec_con_bottom">
+						<p>{{val.title}}</p>
+					</div>
+				</li>
+			</ul>
+		</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "recommended",
+  data() {
+    return {
+			judge: true,// 判断 显示格式
+			recommendefList: [] // 存储数据
+    };
+  },
+  props: {
+		judges:String, // 接受判断
+		recommendefLists:Array // 接受数据
+  },
+  methods: {
+		/**
+		 * judgeShow
+		 * 判断 judge 的值
+		 * 接受数据
+		 */
+		judgeShow () {
+			this.judge = (this.judges == "false" ? false : true)
+			this.recommendefList = this.recommendefLists
+		}
+  },
+  created() {
+		this.judgeShow()
+  }
+};
+</script>
+
+<style scoped lang="stylus">
+.recommended
+  .rec_title
+    width 10rem
+    height 1.347rem
+    display flex
+    align-items: center
+    h2
+      font-family PingFangSC-Bold;
+      font-size 0.427rem
+      font-weight normal
+      font-stretch normal
+      letter-spacing 0rem
+      color #333333
+      margin-left 0.32rem
+	.rec_content
+		width 10rem
+		ul
+			display flex
+			flex-direction column
+			li
+				margin-left 0.307rem
+				width 9.693rem
+				height 3.44rem
+				border-bottom 0.005rem solid rgba(0,0,0,0.5)
+				display flex
+				justify-content space-between
+				position relative
+				.rec_con_left
+						font-family: PingFangSC-Medium;
+						font-size: 0.427rem;
+						font-weight: normal;
+						font-stretch: normal;
+						letter-spacing: 0rem;
+						color: #333333;
+						p
+							margin-top 0.387rem
+				.time
+					position absolute
+					bottom 0.627rem
+				.rec_con_right
+					img
+						width 3.013rem
+						height 2.267rem
+						border-radius 0.053rem
+						margin-top 0.2rem
+						margin-right 0.32rem
+	.rec_content2
+		width 10rem
+		ul
+			height 4.2rem
+			display flex
+			overflow-x: scroll;
+			border-bottom 0.005rem solid rgba(0,0,0,0.9)
+			li
+				width 3.5653rem
+				margin-top 0.333rem
+				margin-right 0.147rem
+				.rec_con_top
+					position relative
+					img
+						width 3.653rem
+						height 2.08rem
+						border-radius: 0.053rem
+					span
+						position absolute
+						bottom 0.173rem
+						right 0.187rem
+						font-family: PingFangSC-Medium;
+						font-size: 0.293rem;
+						font-weight: normal;
+						font-stretch: normal;
+						letter-spacing: 0rem;
+						color: #000;
+				.rec_con_bottom
+					p
+						font-family: PingFangSC-Medium;
+						font-size: 0.373rem;
+						font-weight: normal;
+						font-stretch: normal;
+						letter-spacing: 0rem;
+						color: #333333;
+				&:nth-child(1)
+					margin-left 0.32rem
+
+</style>

历届学生/17届课程/团队练手私活项目/h5share_code/src/components/VideoPlayback.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="videoplayback">
+    <video id="video" class="video-js vjs-default-skin" controls preload="auto">
+      <source
+        :src="videoUrls"
+        :type="sourceType"
+      />
+    </video>
+  </div>
+</template>
+
+<script>
+import videoes from 'video.js'
+import 'videojs-contrib-hls'
+export default {
+  name: "videoplayback",
+  data() {
+    return {
+			// 用于存储连接
+      videoUrls:'https://videos8.jsyunbf.com/20190717/s6DaVnKb/index.m3u8',
+      sourceType: '',
+      player:'',
+      videoType: {
+        ogg: "video/ogg",
+        mp4: "video/mp4",
+        webm: "video/webm",
+        m3u8: "application/x-mpegURL"
+      }
+		};
+  },
+  props: {
+		// 用于接受连接 
+		videoBFUrl:String
+	},
+  methods: {
+    videoPlay () {
+      this.player.play()
+    },
+    videoPause () {
+      // console.log(this.player);
+      this.player.pause()
+    }
+  },
+  created() {
+    // console.log(this.videoBFUrl);
+		// 判断 传过来的数据是否有值 有用传过来的数据 无 用默认连接
+    this.videoUrls = (this.videoBFUrl == undefined ? this.videoUrls : this.videoBFUrl)
+    // console.log(this.videoUrls);
+    if(this.videoUrls.indexOf(".mp4") !=-1){
+      this.sourceType = this.videoType.mp4
+      // console.log(this.videoType.mp4);
+    }
+    if(this.videoUrls.indexOf(".ogg") !=-1){
+      this.sourceType = this.videoType.ogg
+      // console.log(this.videoType.ogg);
+    }
+    if(this.videoUrls.indexOf(".webm") !=-1){
+      this.sourceType = this.videoType.webm
+      // console.log(this.videoType.webm);
+    }
+    if(this.videoUrls.indexOf(".m3u8") !=-1){
+      this.sourceType = this.videoType.m3u8
+      // console.log(this.videoType.m3u8);
+    }
+	},
+  mounted() {
+    this.player=videoes("video")
+    // videoPlay("video", function() {
+    //   this.play();
+    //   // this.pause() 暂停
+    //   // this.dispose() 销毁
+    // });
+  },
+  beforeDestroy () {
+    this.player.dispose()
+  }
+};
+</script>
+
+<style scoped lang="stylus">
+  .videoplayback
+    width 10rem
+    #video
+      width 100%
+      height 5.853rem
+  .video-js
+    .vjs-big-play-button
+      position: absolute !important
+      top: 2.0rem !important
+      left: 36% !important
+</style>

历届学生/17届课程/团队练手私活项目/h5share_code/src/config/index.js

@@ -0,0 +1,15 @@
+export default {
+    ajaxUrl: {
+        baseUrl: {
+            dev: 'http://115.159.153.142:9010/',
+            prod: 'http://115.159.153.142:9010/'
+        },
+        UrlList: {
+            interactDetail: '/h5/interactDetail',
+            ridio : '/h5/radio',
+            Video : '/h5/videoDetail',
+            newsDetail: '/h5/newsDetail'
+        }
+    }
+
+}

历届学生/17届课程/团队练手私活项目/h5share_code/src/main.js

@@ -0,0 +1,20 @@
+import 'amfe-flexible/index.js'
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+
+import Vant from 'vant'
+import 'vant/lib/index.css'
+import 'video.js/dist/video-js.css'
+import service from './service/imports'
+
+Vue.use(Vant);
+
+Vue.prototype.$http = new service()
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  render: h => h(App)
+}).$mount('#app')

历届学生/17届课程/团队练手私活项目/h5share_code/src/package-lock.json

@@ -0,0 +1,41 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      }
+    },
+    "debug": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "follow-redirects": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+      "requires": {
+        "debug": "=3.1.0"
+      }
+    },
+    "is-buffer": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+      "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    }
+  }
+}

历届学生/17届课程/团队练手私活项目/h5share_code/src/package.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "axios": "^0.19.0"
+  },
+  "devDependencies": {
+    "stylus": "^0.54.7",
+    "stylus-loader": "^3.0.2"
+  }
+}

历届学生/17届课程/团队练手私活项目/h5share_code/src/router/index.js

@@ -0,0 +1,53 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+
+/**
+ * 获取返回用户的名称
+ * @param {*array} name 用户名
+ */
+function getName(name) {
+
+}
+
+const router = new VueRouter({
+
+  routes:
+      [{
+      path: '/',
+      name: 'home',
+      component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    },
+    {
+      path: '/demo',
+      name: 'demo',
+      component: () => import(/* webpackChunkName: "demo" */ '../views/demo.vue')
+    },
+    {
+      path: '/post',
+      name: 'post',
+      component: () => import(/* webpackChunkName: "post" */ '../views/Post.vue')
+    },
+    {
+      path: '/Video',
+      name: 'Video',
+      component: () => import(/* webpackChunkName: "demo" */ '../views/Video.vue')
+    },
+    {
+      path: '/read',
+      name: 'read',
+      component: () => import(/* webpackChunkName: "demo" */ '../views/Read.vue')
+    }
+  ]
+})
+
+
+
+export default router

历届学生/17届课程/团队练手私活项目/h5share_code/src/service/BaseService.js

@@ -0,0 +1,9 @@
+import Axios from '../api'
+import conf from '../config'
+
+export default class BaseService {
+    constructor() {
+        this.api = Axios;
+        this.config = conf
+    }
+}

历届学生/17届课程/团队练手私活项目/h5share_code/src/service/HomeService.js

@@ -0,0 +1,12 @@
+import BaseService from './BaseService'
+
+export default class HomeService extends BaseService {
+
+    async getHomeData(data) {
+        return await this.api.get({
+            url: this.config.ajaxUrl.UrlList.ridio,
+            data: data
+        })
+    }
+
+}

历届学生/17届课程/团队练手私活项目/h5share_code/src/service/NewsService.js

@@ -0,0 +1,10 @@
+import BaseService from './BaseService'
+
+export default class PlayRadio extends BaseService{
+  async newsService(data) {
+    return await this.api.get({
+      url: this.config.ajaxUrl.UrlList.newsDetail,
+      data: data
+    })
+  }
+}

历届学生/17届课程/团队练手私活项目/h5share_code/src/service/PlayRadio.js

@@ -0,0 +1,12 @@
+import BaseService from './BaseService'
+
+export default class PlayRadio extends BaseService{
+    async startradio(data) {
+        return await this.api.get({
+            url: this.config.ajaxUrl.UrlList.startradio,
+            data: data
+        })
+    }
+
+
+}

历届学生/17届课程/团队练手私活项目/h5share_code/src/service/PostService.js

@@ -0,0 +1,12 @@
+import BaseService from './BaseService'
+
+export default class HomeService extends BaseService {
+
+    async getinteractDetail(data) {
+        return await this.api.get({
+            url: this.config.ajaxUrl.UrlList.interactDetail,
+            data: data
+        })
+    }
+
+}

历届学生/17届课程/团队练手私活项目/h5share_code/src/service/VideoService.js

@@ -0,0 +1,12 @@
+import BaseService from './BaseService'
+
+export default class VideoService extends BaseService{
+    async videoplay(data) {
+        return await this.api.get({
+            url: this.config.ajaxUrl.UrlList.Video,
+            data: data
+        })
+    }
+
+
+}

历届学生/17届课程/团队练手私活项目/h5share_code/src/service/imports.js

@@ -0,0 +1,13 @@
+import HomeService from './HomeService'
+import PostService from "./PostService"
+import PlayRadio from './PlayRadio'
+import VideoService from './VideoService'
+import NewsService from './NewsService'
+
+export default class Imports {
+    homeService = new HomeService()
+    postService = new PostService()
+    playRadio = new PlayRadio()
+    video = new VideoService()
+    newsService = new NewsService()
+}

历届学生/17届课程/团队练手私活项目/h5share_code/src/utils/index.js

@@ -0,0 +1,19 @@
+import config from "../config"
+
+export default class Utils {
+
+    /**
+     * 根据当前所处的开发环境，使用对应的ajax请求基地址
+     * @returns {string}
+     * @constructor
+     */
+    static BaseApi() {
+        if (process.env.NODE_ENV === "development") {
+            return '/api'
+            // return config.ajaxUrl.baseUrl.dev;
+        } else {
+            return config.ajaxUrl.baseUrl.prod;
+        }
+    }
+
+}

历届学生/17届课程/团队练手私活项目/h5share_code/src/views/About.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="about">
+    <h3>About.vue页面</h3>
+  </div>
+</template>
+
+<script>
+export default {
+  
+}
+</script>
+
+<style lang="stylus" scoped>
+
+</style>

历届学生/17届课程/团队练手私活项目/h5share_code/src/views/Home.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="home">
+    <van-tabs v-model="active" title-inactive-color="#999999" title-active-color="#000000" line-width="0.307rem">
+      <van-tab title="包河radio"></van-tab>
+      <van-tab title="包河TV"></van-tab>
+      <van-tab title="融媒直播"></van-tab>
+      <van-tab title="组件测试">
+        <!-- 不要的注释不要删
+              VideoPlayback 视频 组件
+                videoBFUrl:String url地址 不传 会有默认
+              Recommended 相关推荐 组件
+                judges 排列格式 true 竖排 false 横排
+                recommendefLists 格式为 Array
+              OpenComments 打开评论组件
+                switch:Boolean  true 显示 false 关闭
+                position:string 控制是否定位 block 不定位 fixed 定位到底部
+              Header 打卡app 组件
+                pots:string 控制 top 位置 传数数字
+              Allcomments 评论组件
+                commentsList:Array 数据
+            注：对于所有 Array 格式数据
+                要求为 数组包含对象格式 [{}]
+                无默认值
+        -->
+        <VideoPlayback :videoBFUrl="musicUrls" ref="child"></VideoPlayback>
+        <button @click="shutChild">暂停</button>
+        <button @click="showChild">打开</button>
+        <Recommended judges="true" :recommendefLists="recommendef"></Recommended>
+        <OpenComments switch="false" position="fixed"></OpenComments>
+        <Header pots="30"></Header>
+        <Allcomments :commentsList="allcommendef"></Allcomments>
+      </van-tab>
+    </van-tabs>
+    <router-view />
+  </div>
+</template>
+
+<script>
+  import VideoPlayback from "@/components/VideoPlayback.vue"
+  import Recommended from "@/components/Recommended.vue"
+  import OpenComments from "@/components/OpenComments.vue"
+  import Header from "@/components/Header.vue"
+  import Allcomments from "@/components/Allcomments.vue"
+
+export default {
+  methods: {
+    showChild () {
+      this.$refs.child.videoPlay()
+    },
+    shutChild () {
+      this.$refs.child.videoPause()
+    }
+  },
+  data() {
+    return {
+      active: 0,
+      videoUrls:"https://hmbhresources-1251971253.cos.ap-shanghai.myqcloud.com/image/201910/30/videonew/291.mp4",
+      musicUrls:'http://pili-live-hls.908broadcast.ahtv.cn/908broadcast/908.m3u8?sign=8d1b27d4b57ffcc817e91c9dbf9218a9&t=5df77fbd',
+      recommendef:[
+        {
+          title: "文章标题dsadasdsadsadasdas",
+          icon: "https://hmbhresources-1251971253.cos.ap-shanghai.myqcloud.com/image/201910/30/videonew/291.bmp",
+          create_time: "1970-01-01 08:00:00"
+        },
+        {
+          title: "文章标题dsadasdsadsadasdas",
+          icon: "https://hmbhresources-1251971253.cos.ap-shanghai.myqcloud.com/image/201910/30/videonew/291.bmp",
+          create_time: "1970-01-01 08:00:00"
+        },
+        {
+          title: "文章标题dsadasdsadsadasdas",
+          icon: "https://hmbhresources-1251971253.cos.ap-shanghai.myqcloud.com/image/201910/30/videonew/291.bmp",
+          create_time: "1970-01-01 08:00:00"
+        },
+        {
+          title: "文章标题dsadasdsadsadasdas",
+          icon: "https://hmbhresources-1251971253.cos.ap-shanghai.myqcloud.com/image/201910/30/videonew/291.bmp",
+          create_time: "1970-01-01 08:00:00"
+        },
+      ],
+      allcommendef: [
+        {
+          content: "这是内容这是内容",
+          create_time: "2017/7/17",
+          image: "http://hmbhresources-1251971253.cos.ap-shanghai.myqcloud.com/image/201911/13/1573613951969.jpg",
+          nick_name: "名称",
+          praise_count: 2
+        }
+      ]
+    }
+  },
+  components:{
+    VideoPlayback,
+    Recommended,
+    OpenComments,
+    Header,
+    Allcomments
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+</style>

历届学生/17届课程/团队练手私活项目/h5share_code/src/views/Post.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="post">
+        <div class="post_header">
+            <Header :pots="show"></Header>
+        </div>
+        <div class="post_banner">
+
+            <van-swipe :autoplay="3000" @change="onChange">
+                <van-swipe-item  v-for="(item,index) in postList.image" :key="index"> <img :src="item"/></van-swipe-item>
+
+                <div class="custom-indicator" slot="indicator">
+                    {{ current + 1 }}/6
+                </div>
+            </van-swipe>
+
+        </div>
+        <div class="post_content">
+            <div class="posting">
+                <div class="post_img">
+                    <img :src="postList.image_url" alt="">
+                    <div class="post_name">
+                        <h4>{{postList.nick_name}}</h4>
+                        <p>{{postList.create_time}}</p>
+                    </div>
+                </div>
+                <p>{{postList.content}}</p>
+            </div>
+            <div class="interval"></div>
+
+
+            <Allcomments :commentsList="IdData"></Allcomments>
+
+
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import Allcomments from "@/components/Allcomments.vue"
+    import Header from "@/components/Header.vue"
+    export default {
+        data() {
+            return {
+                show: 'shabi',
+                current: 0,
+                postList: [
+                    // {src: 'img/post1.png'},
+                    // {src: 'img/post1.png'},
+                    // {src: 'img/post1.png'},
+                    // {src: 'img/post1.png'},
+                    // {src: 'img/post1.png'},
+                    // {src: 'img/post1.png'}
+                ],
+                IdData:[]//向子组件发送id
+            }
+        },
+        created() {
+          this.Post()
+        },
+        methods: {
+            onChange(index) {
+                this.current = index;
+            },
+
+            /**
+             * 发送ajax请求
+             * */
+            async Post() {
+                // ajax封装基本案例
+                var data = await this.$http.postService.getinteractDetail({
+                  id: 123
+                });
+                this.postList = data.detail
+                this.IdData = data.comment
+                console.log(data.comment)
+
+            },
+
+        },
+        components: {
+            Header,
+            Allcomments
+        }
+    }
+</script>
+
+<style lang="stylus" scoped>
+
+@import "~!/post.styl";
+</style>

历届学生/17届课程/团队练手私活项目/h5share_code/src/views/Read.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="read">
+        <div v-if="newsData.detail != undefined">
+            <HeaderComponents></HeaderComponents>
+            <!--渲染标题-->
+                <div class="top-prove">
+                <h2>{{newsData.detail.title}}</h2>
+                <span>{{newsData.detail.publish_time}}  08:00  浏览量{{newsData.detail.viewer_count}}万</span>
+            </div>
+            <!--内容-->
+            <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'">
+                <div class="intro-content" :title="introduce" ref="desc">
+                      <span class="merchant-desc" v-if="introduce" v-html="newsData.detail.content">
+                       {{newsData.detail.content}}
+                      </span>
+                    <div class="unfold" @click="showTotalIntro" v-if="showExchangeButton">
+                        <img class="unfold_img" @click="none" src="img/open.png" alt="">
+                    </div>
+                </div>
+            </div>
+            <div class="comments" v-if="pd">
+                <h2>打开APP查看文章</h2>
+            </div>
+
+            <!--相关推荐-->
+            <RecommendedComponents judges="true" :recommendefLists="allrecommend"></RecommendedComponents>
+            <!--全部评论-->
+            <AllcommentsComponents :commentsList="allcommendef"></AllcommentsComponents>
+            <!--打开APP查看全部评论-->
+            <OpenCommentsComponents switch="true" position="block"></OpenCommentsComponents>
+        </div>
+    </div>
+</template>
+
+<script>
+  import HeaderComponents from "@/components/Header";
+  import OpenCommentsComponents from "@/components/OpenComments";
+  import AllcommentsComponents from "@/components/Allcomments";
+  import RecommendedComponents from "@/components/Recommended";
+  export default {
+    data () {
+      return {
+        id: this.$route.params.id,
+        pd: true,
+        introduce: '',
+        detail:{},
+        newsData:{},
+        //全部评论
+        allcommendef:[],
+        // 相关推荐
+        recommendef:[],
+
+        // 是否展示所有文本内容
+        showTotal: true,
+        // 显示展开还是收起
+        exchangeButton: true,
+        // 是否显示展开收起按钮
+        showExchangeButton: false,
+      };
+    },
+
+    mounted () {
+      this.init();
+    },
+    created(){
+      this.newsRead()
+    },
+    methods: {
+      //ajax
+      async newsRead(){
+        var data = await this.$http.newsService.newsService({
+          id:3
+        })
+        console.log(data)
+        this.newsData = data
+        this.allcommendef = data.comment
+        this.allrecommend= data.recommend
+      },
+
+
+      showTotalIntro () {
+        // console.log(this.showTotal);
+        this.showTotal = !this.showTotal;
+        this.exchangeButton = !this.exchangeButton;
+      },
+      getRem () {
+        // console.log('getRem');
+        const defaultRem = 16;
+        let winWidth = window.innerWidth;
+        // console.log('winWidth:' + winWidth);
+        let rem = winWidth / 375 * defaultRem;
+        return rem;
+      },
+      init () {
+        this.introduce = '“小说”一词最早出现于《庄子·外物》：「饰小说以干县令，其于大达亦远矣。」' +
+          '庄子所谓的「小说」，是指琐碎的言论，与小说观念相差甚远。直至东汉桓谭《新论》：「小说家合残丛小语，' +
+          '近取譬喻，以作短书，治身理家，有可观之辞。」班固《汉书．艺文志》将「小说家」列为十家之后，其下的定义为：' +
+          '「小说家者流，盖出于稗官，街谈巷语，道听途说[4]者之所造也。」才稍与小说的意义相近。而中国小说最大的特色，' +
+          '便自宋代开始具有文言小说与白话小说两种不同的小说系统。文言小说起源于先秦的街谈巷语，是一种小知小道的纪录。' +
+          '在历经魏晋南北朝及隋唐长期的发展，无论是题材或人物的描写，文言小说都有明显的进步，形成笔记与传奇两种小说类型。' +
+          '而白话小说则起源于唐宋时期说话人的话本，故事的取材来自民间，主要表现了百姓的生活及思想意识。' +
+          '但不管文言小说或白话小说都源远流长，呈现各自不同的艺术特色。';
+      },
+      none () {
+        this.pd= false
+      },
+      watch: {
+        'introduce': function () {
+          this.$nextTick(function () {
+            // console.log('nextTick');
+            // 判断介绍是否超过四行
+            let rem = parseFloat(this.getRem());
+            // console.log('watch 中的rem', rem);
+            if (!this.$refs.desc) {
+              // console.log('desc null');
+              return;
+            }
+            let descHeight = window.getComputedStyle(this.$refs.desc).height.replace('px', '');
+            // console.log('descHeight:' + descHeight);
+            // console.log('如果 descHeight 超过' + (5.25 * rem) + '就要显示展开按钮');
+            if (descHeight > 5.25 * rem) {
+              // console.log('超过了四行');
+              // 显示展开收起按钮
+              this.showExchangeButton = true;
+              this.exchangeButton = true;
+              // 不是显示所有
+              this.showTotal = false;
+            } else {
+              // 不显示展开收起按钮
+              this.showExchangeButton = false;
+              // 没有超过四行就显示所有
+              this.showTotal = true;
+              // console.log('showExchangeButton', this.showExchangeButton);
+              // console.log('showTotal', this.showTotal);
+            }
+          }.bind(this));
+        }
+      },
+    },
+
+    components: {
+      HeaderComponents,
+      OpenCommentsComponents,
+      AllcommentsComponents,
+      RecommendedComponents
+    },
+  };
+</script>
+
+<style lang="stylus" scoped>
+    .comments
+        width 10rem
+        height 1.693rem
+        display flex
+        justify-content center
+        bottom 0
+        left 0
+        h2
+            width: 9.36rem
+            height: 1.173rem
+            background red
+            border-radius: 0.107rem
+            border: solid 0.027rem #d0302c
+            font-size: 0.373rem
+            display flex
+            justify-content center
+            align-items center
+            color: #fff
+            letter-spacing: 0rem
+            font-weight: normal
+            font-stretch: normal
+            font-family: PingFangSC-Medium
+            font-size: 0.373rem
+    @import "~!/read.styl"
+</style>
+

历届学生/17届课程/团队练手私活项目/h5share_code/src/views/Video.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="Video_on_demandmo">
+        <Header pots="top:20px"></Header>
+        <div class="content" v-if="datalists.detail != undefined">
+            <div class="videoplay" style="margin-top: 20px">
+                <VideoPlayback :videoBFUrl="datalists.detail.play_url"></VideoPlayback>
+            </div>
+            <h2>
+<!--                香港24小时 | 8月25日发生了什么？暴力局面再次升级-->
+            {{datalists.detail.title}}
+            </h2>
+            <span>
+<!--                2019-04-30 10:45-->
+                {{items.publish_time}}
+            </span>
+            <van-collapse v-model="activeNames" class="introduction_like" accordion>
+                <van-collapse-item>
+                    <div slot="title" class="introduction" @click=""><img src="img/Star2.png" alt="">收藏</div>
+                    <div slot="title" class="like" v-if="img" @click="imgClicj"><img src="img/Fabulous2.png" alt="">{{datalists.detail.like_count}}</div>
+                    <div slot="title" class="like" v-else><img src="img/Fabulous.png" alt="">{{datalists.detail.like_count}}</div>
+                    <div slot="title" style="padding: 0" class="jianjie">简介 </div>
+                    <p>{{datalists.detail.des}}</p>
+                </van-collapse-item>
+            </van-collapse>
+            <div class="related">
+                <Recommended judges="false" :recommendefLists="datalists.recommend"></Recommended>
+            </div>
+            <div class="videocomment">
+                <OpenComments switch="false" position="fixed"></OpenComments>
+                <Allcomments :commentsList="listComment"></Allcomments>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    //导入包河头部组件
+    import Header from '@/components/Header.vue'
+    import Recommended from "@/components/Recommended.vue"
+    import VideoPlayback from "@/components/VideoPlayback.vue"
+    import Allcomments from "@/components/Allcomments.vue"
+    //导入包河的所有评论（无评论时）
+    import NavbarComponents from "@/components/Allcomments"
+    import OpenComments from "@/components/OpenComments"
+    export default {
+        data() {
+            return {
+                activeNames: ['1'],
+                datalists:[],
+                items:[],
+                listComment:[],
+                img:true
+            }
+        },
+        created(){
+            this.Video()
+            this.judge ()
+        },
+        methods: {
+            imgClicj () {
+                if (this.img) {
+                    this.img = false
+                    this.praise += 1
+                    this.judges = false
+                } else {
+                    this.img = true
+                    this.praise -= 1
+                }
+            },
+            async Video() {
+                var data = await this.$http.video.videoplay({
+                    id: 1
+                });
+                this.datalists = data
+                this.items = data.detail
+                this.listComment = data.comment
+                console.log(this.items)
+            },
+
+        },
+        components:{
+            Header,
+            NavbarComponents,
+            OpenComments,
+            Recommended,
+            VideoPlayback,
+            Allcomments
+        }
+    }
+</script>
+
+<style scoped lang="stylus">
+    @import "~!/video"
+    .van-cell
+        padding 0 !important
+    div
+        padding 0 !important
+    .content
+        padding 0
+        margin 0
+    [class*=van-hairline]::after
+        position absolute
+        box-sizing border-box
+        content ' '
+        pointer-events none
+        top -50%
+        right -50%
+        bottom -50%
+        left -50%
+        border 0 solid #ebedf000
+</style>

历届学生/17届课程/团队练手私活项目/h5share_code/src/views/demo.vue

@@ -0,0 +1,39 @@
+<template>
+<div class="demo">
+
+
+    <h2>我是测试界面，啊哈哈哈哈，我是合肥吴彦祖蜀山区分晏</h2>
+
+</div>
+</template>
+
+<script>
+    export default {
+        name: "demo",
+        data(){
+            return{
+                id:1,
+                datslist:[]
+            }
+        },
+        created(){
+            this.getHomeData()
+        },
+        methods:{
+            async getHomeData() {
+                /*
+                * 我是测试的接口，哈哈哈哈哈
+                * */
+                var data = await this.$http.homeService.getHomeData({
+                    id:this.id
+                })
+                this.datslist = data
+                console.log(this.datslist)
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

历届学生/17届课程/团队练手私活项目/h5share_code/vue.config.js

@@ -0,0 +1,62 @@
+const path = require('path')
+
+module.exports = {
+  publicPath: './',
+  lintOnSave: false,
+  productionSourceMap: false,
+  devServer: {
+    hot: true,
+    hotOnly: true,
+    host: '0.0.0.0',
+    port: 9090,
+    compress: true,
+    open: true,
+    openPage: '#/',
+    overlay: {
+      warnings: true,
+      errors: true,
+    },
+    proxy: {
+      '/api': {
+        target: 'http://115.159.153.142:9010/',
+        changeOrigin: true,
+        ws: true,
+        pathRewrite: {
+          '^/api': ''
+        }
+      }
+    }
+  },
+  chainWebpack: config => {
+
+    // 去除 preload 和 prefetch，减少页面请求次数
+    config.plugins.delete('preload')
+    config.plugins.delete('prefetch')
+
+    // 配置路径别名
+    config.resolve.alias
+      .set('@', resolve('src'))
+      .set('!', resolve('src/assets/styl/page'))
+
+    // 配置css的全局自动导入
+    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
+    types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
+  },
+
+};
+
+
+function addStyleResource (rule) {
+  rule.use('style-resource')
+    .loader('style-resources-loader')
+    .options({
+      patterns: [
+        path.resolve(__dirname, './src/assets/styl/imports.styl'),
+      ],
+    })
+}
+
+
+function resolve (dir) {
+  return path.join(__dirname, dir)
+}

历届学生/17届课程/团队练手私活项目/团队分工.txt

@@ -0,0 +1,62 @@
+页面：
+
+ 【吕亚康】1： 新闻页面
+    
+    1：文章内容短的时候
+    2：文章内容长的时候
+
+ 【李在明】2: 包河TV 
+    9: 列表页
+    10：详情页
+    11：评论 - 有数据的时候
+    12：评论 - 无数据的时候
+
+ 【袁澳】3：包河radio
+
+    8： radio首页  - 时间不要
+      -- 节目单
+
+ 【完成】【李金芳】4：帖子页面
+
+    7：帖子     
+
+ 【查吉平】5：融媒直播
+
+   13：播放列表页
+   5：未开始播放  不用做
+   6：开始直播  
+
+ 【完成】【朱祥龙】6：点播
+
+   3：简介未展开，有评论
+   4：简介展开，物品栏  
+
+ 【完成】【汪朱阳】7：公共组件的封装
+
+ 【完成】【朱朋朋】8：项目基本结构的搭建
+
+
+
+ 代码规范：
+
+  class:  user_name
+
+  组件：UserName.vue
+
+  代码缩进：2
+
+  变量名，方法名：UserName
+
+  图片一律放到：public/
+
+    引入方式：img/xxx.jpg
+
+  一律加注释
+
+    方法注释：
+        /**
+        * 获取返回用户的名称
+        * @param {*array} name 用户名
+        */  
+        
+    变量： //    

历届学生/17届课程/团队练手私活项目/账户记录.txt

@@ -0,0 +1,17 @@
+1：李跃文蓝湖账户密码
+
+蓝湖登录地址：https://lanhuapp.com/web/#/user/login
+用户名：1179374943@qq.com
+密码：lyw117937
+
+
+2：接口文档
+
+地址：http://115.159.153.142:89/web/#/42?page_id=1096
+密码：zbh2019
+
+
+
+3：项目仓库地址：
+
+Gitee地址:  https://gitee.com/bmycode/share_in_h5_of_baohe.git