白板直播前端项目搭建和排版

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }]
+  ]
+}

.gitignore

@@ -0,0 +1,17 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/test/unit/coverage/
+/test/e2e/reports/
+selenium-debug.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

build/webpack.base.conf.js

@@ -0,0 +1,68 @@
+var path = require('path');
+var htmlWebpackPlugin = require('html-webpack-plugin');
+var webpack = require('webpack');
+var AutodllWebpackpackPlugin = require('autodll-webpack-plugin');
+var config = {
+  entry: {
+    index: path.resolve(__dirname, '../src/js/main.js'),
+    login: path.resolve(__dirname, '../src/js/login.js')
+  },
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: '[name].[hash].js'
+  },
+  module:{
+    rules: [
+      {
+        test: /\.js$/,
+        include: path.resolve(__dirname + '/src'),
+        use: [
+          'babel-loader'
+        ],  
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(png|svg|jpg|gif)$/,
+        use: [
+          {
+            loader: "file-loader",
+            options: {
+              name: "[name].[ext]",
+              publicPath: "./static/",
+              outputPath: "static/"
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new htmlWebpackPlugin({
+      filename: "login.html",
+      title: "login",
+      template: path.resolve(__dirname, '../src/login.html'),
+      chunks: ['login']
+    }),
+    new htmlWebpackPlugin({
+      filename: "index.html",
+      title: "index",
+      template: path.resolve(__dirname, '../src/index.html'),
+      chunks: ['index']
+    }),
+    new AutodllWebpackpackPlugin({
+      inject: true,
+      debugger: true,
+      filename: '[name].js',
+      path: './dll',
+      entry: {
+        vendor: ['jquery']
+      }
+    }), // 单独打包第三方库
+    new webpack.optimize.SplitChunksPlugin() //提取公共代码
+  ],
+  resolve: {
+    extensions: ['.js', '.css', '.less']// 省去后缀
+  }
+}
+
+module.exports = config;

build/webpack.dev.conf.js

@@ -0,0 +1,31 @@
+var path = require('path');
+var merge = require('webpack-merge');
+var baseConfig = require('./webpack.base.conf');
+var webpack = require('webpack');
+module.exports = merge(baseConfig, {
+  mode: 'development',
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    open: true,
+    compress: true,
+    port: 9000
+  },
+  module:{
+    rules: [
+      {
+        test: /\.(c|le)ss$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'less-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(), // 开启热更新
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }), // 配置请求地址
+  ]
+})

build/webpack.prod.conf.js

@@ -0,0 +1,37 @@
+var path = require('path');
+var merge = require('webpack-merge');
+var baseConfig = require('./webpack.base.conf');
+var webpack = require('webpack');
+// 清除打包多余文件
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+// 分离css,打包到单独文件
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+// 压缩css
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+
+module.exports = merge(baseConfig, {
+  mode: 'production',
+  module:{
+    rules: [
+      {
+        test: /\.(c|le)ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'less-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [    
+    new CleanWebpackPlugin(),
+    new OptimizeCSSAssetsPlugin(),
+    new MiniCssExtractPlugin({
+      filename: "css/[name].css",
+      chunkFilename: "css/[id].css"
+    }),
+    new webpack.DefinePlugin({
+      'process.env': require('../config/prod.env')
+    }), // 配置请求地址
+  ]
+})

config/dev.env.js

@@ -0,0 +1,5 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"development"',
+  BASE_API: '"http://manage.ai160.com/"',
+}

config/prod.env.js

@@ -0,0 +1,5 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"',
+  BASE_API: '"http://manage.ai160.com/"',
+}

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "live_broadcast",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "build": "webpack --config build/webpack.prod.conf.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "autodll-webpack-plugin": "^0.4.2",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-preset-env": "^1.7.0",
+    "clean-webpack-plugin": "^2.0.2",
+    "css-loader": "^2.1.1",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "jquery": "^3.4.1",
+    "less": "^3.9.0",
+    "less-loader": "^5.0.0",
+    "mini-css-extract-plugin": "^0.6.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.31.0",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.3.1",
+    "webpack-merge": "^4.2.1"
+  }
+}

src/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>首页</title>
+  <script src="http://lib.baomitu.com/chimee-player/1.1.9/chimee-player.browser.js"></script>
+</head>
+<body>
+  <div class="container">
+    <div class="header">智能共享白板</div>
+    <div class="video">
+      <p class="title">
+        字节跳动-抖音-二季度KPI考核会议
+      </p>
+      <div class="big-video" id="bigVideo">
+      </div>
+      <div class="small-video" id="smallVideo">
+      </div>
+    </div>
+    <div class="footer">COPYRIGHT (©) 2018 智能共享白板. 京ICP备12019481号-5</div>
+  </div>
+</body>
+</html>

src/js/login.js

@@ -0,0 +1,3 @@
+import '../style/style';
+import '../style/login';
+console.log(2222)

src/js/main.js

@@ -0,0 +1,33 @@
+import '../style/style';
+import '../style/index';
+import $ from 'jquery';
+
+let bigVideo = new ChimeePlayer({
+  wrapper: '#bigVideo',  // video dom容器
+  src: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8',
+  box: 'hls',
+  isLive: true,
+  autoplay: true,
+  muted: false
+});
+let smallVideo = new ChimeePlayer({
+  wrapper: '#smallVideo',  // video dom容器
+  src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
+  box: 'hls',
+  isLive: true,
+  autoplay: true,
+  muted: true
+});
+
+$('#smallVideo').click(function () {
+  $('#bigVideo').removeClass('big-video').addClass('small-video');
+  $('#smallVideo').removeClass('small-video').addClass('big-video');
+  smallVideo.muted = false;
+  bigVideo.muted = true;
+})
+$('#bigVideo').click(function () {
+  $('#bigVideo').removeClass('small-video').addClass('big-video');
+  $('#smallVideo').removeClass('big-video').addClass('small-video');
+  smallVideo.muted = true;
+  bigVideo.muted = false;
+})

src/login.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>登录</title>
+</head>
+<body>
+  <div class="container">
+    <img class="bg" src="${require('./static/bg.jpg')}" alt="">
+    <div class="login">
+      <h3>手机号码登录</h3>
+      <p>手机号码登录，未注册将自动创建智能白板账号</p>
+      <div class="phone">
+        <input type="text">
+      </div>
+      <div class="code">
+        <input type="text">
+        <button>发送验证码</button>
+      </div>
+      <div class="ok">
+        登录
+      </div>
+    </div>
+    <div class="jurisdiction">
+      <h3>请输入会议授权码</h3>
+      <p>授权码是由会议发起人发送给你的</p>
+      <div class="phone">
+        <input type="text" placeholder="请输入分会场名称">
+      </div>
+      <div class="code">
+        <input type="text" class="auth-code">
+        <span>授权码不正确，请检查或者</span>
+      </div>
+      <div class="ok">
+        确认
+      </div>
+    </div>
+  </div>
+</body>
+</html>

src/style/index.less

@@ -0,0 +1,47 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .header {
+    width: 100%;
+    height: 108px;
+    background: #fff;
+    line-height: 108px;
+    padding-left: 251px;
+    font-size: 30px;
+  }
+  .video {
+    flex: 1;
+    width: 100%;
+    background: #000;
+    padding: 10px 325px;
+    .title {
+      width: 100%;
+      font-size: 24px;
+      color: #fff;
+      margin-left: 50px;
+    }
+    .big-video {
+      width: 100%;
+      height: 714px;
+    }
+    .small-video {
+      position: fixed;
+      top: 170px;
+      right: 341px;
+      width: 218px;
+      height: 122px;
+      z-index: 2;
+    }
+  }
+  .footer {
+    width: 100%;
+    height: 73px;
+    background: #fff;
+    line-height: 73px;
+    padding-left: 184px;
+    font-size: 12px;
+  }
+}

src/style/login.less

@@ -0,0 +1,89 @@
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .bg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  .login,
+  .jurisdiction {
+    position: absolute;
+    right: 255px;
+    top: 50%;
+    width: 484px;
+    height: 400px;
+    background: #fff;
+    border-radius: 5px;
+    padding: 40px 36px;
+    transform: translateY(-50%);
+    z-index: 2;
+    h3 {
+      font-size: 24px;
+    }
+    p {
+      color: #767676;
+      font-size: 16px;
+      margin-top: 16px;
+    }
+    .phone {
+      width: 100%;
+      height: 56px;
+      margin-top: 26px;
+      input {
+        width: 100%;
+        height: 100%;
+        font-size: 16px;
+        outline: none;
+        border: none;
+        border: 1px #D4D4D4 solid;
+        border-radius:5px;
+        padding-left: 18px;
+      }
+    }
+    .code {
+      width: 100%;
+      height: 56px;
+      margin-top: 12px;
+      input {
+        width: 70%;
+        height: 100%;
+        font-size: 16px;
+        outline: none;
+        border: 1px #D4D4D4 solid;
+        border-radius:5px;
+        padding-left: 18px;
+      }
+      .auth-code {
+        width: 100%;
+      }
+      span {
+        color: red;
+        font-size: 16px;
+      }
+      button {
+        width: 28%;
+        height: 100%;
+        background: #fff;
+        border: 1px #D4D4D4 solid;
+        border-radius:5px;
+        color: #6375FF;
+        font-size: 14px;
+        float: right;
+        outline: none;
+      }
+    }
+    .ok {
+      width: 100%;
+      height: 56px;
+      background: #45ABFE;
+      border-radius: 5px;
+      color: #fff;
+      text-align: center;
+      font-size: 24px;
+      margin-top: 30px;
+      line-height: 56px;
+    }
+  }
+}

src/style/style.css

@@ -0,0 +1,10 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+}