静态页的调整

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,14 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.postcssrc.js

@@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

README.md

@@ -0,0 +1,21 @@
+# electron-banpai
+
+> 幼儿园
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

build/build.js

@@ -0,0 +1,41 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

build/check-versions.js

@@ -0,0 +1,54 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}

build/utils.js

@@ -0,0 +1,101 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

build/vue-loader.conf.js

@@ -0,0 +1,22 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

build/webpack.base.conf.js

@@ -0,0 +1,82 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,95 @@
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const path = require('path')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      rewrites: [
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+      ],
+    },
+    hot: true,
+    contentBase: false, // since we use CopyWebpackPlugin.
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})

build/webpack.prod.conf.js

@@ -0,0 +1,145 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vendor modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

config/dev.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

config/index.js

@@ -0,0 +1,69 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

config/prod.env.js

@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

css/electron.css

@@ -1,130 +0,0 @@
-* {
-	padding: 0;
-	margin: 0;
-}
-body {
-	background-color: #9c7cfa;
-}
-div {
-	box-sizing: border-box;
-}
-img {
-	width: 100%;
-	vertical-align: bottom;
-}
-/* 头部导航 */
-.header-box {
-	position: sticky;
-	top: 0;
-	z-index: 10;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	background-color: #FFFFFF;
-	box-shadow: 0px 3px 2px #807ef3;
-	width: 100%;
-	height: 5rem;
-	padding: 0 80px;
-}
-.header-box .logo-box {
-	position: relative;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	margin-left: 10%;
-}
-.header-box .logo {
-	position: absolute;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-direction: column;
-}
-.logo div {
-	color: #b7cc56;
-	font-size: 0.75rem;
-}
-.header-box .title-box {
-	display: flex;
-	align-items: center;
-	color: #9c7cfa;
-	font-weight: bold;
-	font-size: 14px;
-}
-.title-item {
-	margin: 20px;
-}
-/* 天气 */
-.weather-box {
-	display: flex;
-	align-items: center;
-}
-.weather-three {
-	display: flex;
-	align-items: center;
-}
-
-/* 内容主体 start */
-.main {
-	margin: 45px 0;
-	padding: 0 40px;
-	display: flex;
-	justify-content: space-between;
-}
-.main-left {
-	display: flex;
-	flex-direction: column;
-	flex-shrink: 0;
-	width: 320px;
-}
-.left-one {
-	position: relative;
-	margin-bottom: 20px;
-	background: url(../img/home/框.png) no-repeat;
-	background-size: 100% 100%;
-}
-.left-content {
-	display: flex;
-	flex-direction: column;
-	padding: 0 20px;
-	color: #7557cc;
-}
-.left-title {
-	color: #ffe78f;
-	font-weight: bold;
-	text-align: center;
-	font-size: 35px;
-	line-height: 64px;
-	margin: 0 60px;
-}
-.left-last {
-	display: flex;
-	justify-content: space-around;
-}
-.left-last > div {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	margin: 10px 0;
-}
-.line {border-bottom: 2px dashed #9C7CFA;margin: 10px 0;}
-.main-center {
-	margin: 0 20px;
-	width: 60%;
-}
-.center-img-box {
-	background: url(../img/home/-s-班级动态.png) no-repeat;
-	background-size: 100% 100%;
-	padding: 40px 60px 150px 60px;
-}
-.main-right {
-	display: inline-block;
-	width: 320px;
-	flex-shrink: 0;
-	background: url(../img/home/班级运行情况底框.png) no-repeat;
-	background-size: 100% 100%;
-}
-/* 内容主体 end */
-.footer {
-	margin-top: -50px;
-}

index.html

@@ -1,230 +1,12 @@
 <!DOCTYPE html>
 <html>
   <head>
-		<meta charset="utf-8" />
+    <meta charset="utf-8">
-		<title></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-		<!-- <script src="https://unpkg.com/vue@next"></script> -->
+    <title>electron-banpai</title>
-		<link rel="stylesheet" type="text/css" href="css/electron.css"/>
-		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
-		<div id="app">
+    <div id="app"></div>
-			<div class="header-box">
+    <!-- built files will be auto injected -->
-				<div class="logo-box">
-					<img src="img/home/logo底.png" >
-					<div class="logo">
-						<img src="img/home/logo.png" >
-						<div>都江堰市机关幼儿园</div>
-					</div>
-				</div>
-				<div class="title-box">
-					<div class="title-item" v-for="(item,index) in titleArr" :key="index">{{item}}</div>
-				</div>
-				<div class="weather-box">
-					<img src="img/weather/1.png" >
-					<div>
-						<div>{{date}}</div>
-						<div class="weather-three">
-							<div>{{temperature}}</div>
-							<div>{{time}}</div>
-							<div>{{week}}</div>
-						</div>
-					</div>
-				</div>
-				<div><img src="img/home/icon-设置.png" ></div>
-			</div>
-			<div class="main">
-				<div class="main-left">
-					<div class="left-one">
-						<div class="left-content">
-							<div class="left-title">班级详情</div>
-							<div style="text-align: center;font-size: 16px;font-weight: bold;">中二班</div>
-							<div class="line"></div>
-							<div>
-								<div>老师：罗敏 宋春雪 王愉</div>
-								<div>班级人数：21</div>
-							</div>
-							<div class="line"></div>
-							<div class="left-last">
-								<div>
-									<div>0</div>
-									<div>实到</div>
-								</div>
-								<div>
-									<div>0</div>
-									<div>未到</div>
-								</div>
-								<div>
-									<div>0</div>
-									<div>请假</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="left-one">
-						<div class="left-content">
-							<div class="left-title">宝宝食谱</div>
-							<div style="display: flex;justify-content: space-around;">
-								<div>早餐</div>
-								<div>午餐</div>
-								<div>晚餐</div>
-							</div>
-							<div class="line"></div>
-							<div class="left-last">
-								<div>
-									<img src="" >
-								</div>
-								<div>白米饭、土豆粉蒸肉、肉末豆腐、农家菜汤</div>
-							</div>
-						</div>
-					</div>
-					<div class="left-one">
-						<div class="left-content">
-							<div class="left-title">通知公告</div>
-							<div style="text-align: center;font-size: 16px;font-weight: bold;">中二班</div>
-							<div class="line"></div>
-							<div>
-								<div>老师：罗敏 宋春雪 王愉</div>
-								<div>班级人数：21</div>
-							</div>
-							<div class="" style="display: flex;justify-content: space-between;margin: 10px 0;">
-								<div>2021-11-15</div>
-								<div>
-									<img src="" >15
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="main-center">
-					<div class="center-img-box">
-						<div style="color: #7253cb;font-size: 20px;text-align: center;">班级动态</div>
-						<div style="overflow: hidden;width: 100%;height: 490px;">
-							<img src="img/seconds/tu-01.png" style="margin-top: 58px;">
-						</div>
-					</div>
-					<div style="display: flex;justify-content: center;">
-						<div style="background-color: rgba(0,0,0,.3);color: #FFFFFF;border-radius: 50px;position: relative;width: 130px;height: 40px;display: flex;justify-content: center;align-items: center;">
-							<img src="img/home/icon-通知.png" style="width: 40px;height: 30px;" >
-							<div style="position: absolute;right: -2px;top: -5px;width: 20px;height: 20px;background-color: #ff9393;border-radius: 50%;text-align: center;line-height: 20px;">1</div>
-						</div>
-						<div style="background-color: rgba(0,0,0,.3);color: #FFFFFF;border-radius: 50px;position: relative;width: 130px;height: 40px;display: flex;justify-content: center;align-items: center;margin: 0 50px;">
-							<div style="font-weight: bold;">宝宝提醒</div>
-							<div style="position: absolute;right: -2px;top: -5px;width: 20px;height: 20px;background-color: #ff9393;border-radius: 50%;text-align: center;line-height: 20px;">1</div>
-						</div>
-						<div style="background-color: rgba(0,0,0,.3);color: #FFFFFF;border-radius: 50px;position: relative;width: 130px;height: 40px;display: flex;justify-content: center;align-items: center;">
-							<div style="font-weight: bold;">生日提醒</div>
-							<div style="position: absolute;right: -2px;top: -5px;width: 20px;height: 20px;background-color: #ff9393;border-radius: 50%;text-align: center;line-height: 20px;">1</div>
-						</div>
-					</div>
-				</div>
-				<div class="main-right">
-					<div>
-						<div>
-							<div class="left-title">今日活动</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="footer">
-				<img src="img/home/-s-首页底纹.png" style="width: 100%;" >
-			</div>
-			<!-- <div style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #FFFFFF;padding: 20px;border-radius: 10px;">
-				<div>
-					<div>班排设备ID：*******</div>
-					<div style="display: flex;align-items: center;">网络链接状态：网络监测（{{onLine?'已连接':'已断开'}}）<img v-if="onLine" src="img/home/icon-链接.png" style="width: 20px;" ></div>
-				</div>
-				<div style="display: flex;align-items: center;">
-					班牌显示模式：
-					<div style="display: flex;align-items: center;">
-						<div style="background-color: #dbdce3;width: 15px;height: 15px;border-radius: 100%;display: flex;justify-content: center;align-items: center;">
-							<span style="display: block;background-color: #000;width: 4px;height: 4px;border-radius: 100%;"></span>
-						</div>
-						欢迎模式
-					</div>
-					<div style="display: flex;align-items: center;">
-						<div style="background-color: #dbdce3;width: 15px;height: 15px;border-radius: 100%;display: flex;justify-content: center;align-items: center;">
-							<span style="display: block;background-color: #000;width: 4px;height: 4px;border-radius: 100%;"></span>
-						</div>
-						班牌模式
-					</div>
-					<div style="display: flex;align-items: center;">
-						<div style="background-color: #dbdce3;width: 15px;height: 15px;border-radius: 100%;display: flex;justify-content: center;align-items: center;">
-							<span style="display: block;background-color: #000;width: 4px;height: 4px;border-radius: 100%;"></span>
-						</div>
-						大数据模式
-					</div>
-				</div>
-				<div style="display: flex;align-items: center;">
-					控制操作：
-					<div>刷新</div>
-					<div>返回首页</div>
-				</div>
-			</div> -->
-		</div>
-		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js" type="text/javascript" charset="utf-8"></script>
-		<script>
-			const App = {
-				data() {
-					return {
-						titleArr:['首页','幼儿园介绍','宝宝活动','出勤详情','宝宝相册','疫情管理'],
-						onLine:navigator.onLine,
-						list:[],
-						city:'',
-						date:'',//2021-12-19
-						week:'',//星期几
-						temperature:'',//天气温度
-						time:'',//当前时间
-						timer:null
-					}
-				},
-				methods:{
-					// 网络状态
-					updateOnlineStatus(e) {
-						const {type} = e;
-						this.onLine = type === 'online';
-					},
-					// 天气近况
-					weatherEv(){
-						this.dateEv();
-						this.timer = setInterval(()=>{this.dateEv();},1000)
-						var that = this;
-						axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+'成都').then((res)=>{
-							let weatherList = res.data.data.forecast;
-							console.log(weatherList);
-							// 星期几
-							this.week = weatherList[0].date.slice(weatherList[0].date.indexOf('日')+1);
-							// 当天气温
-							this.temperature = `${weatherList[0].low.slice(2,-1)}-${weatherList[0].high.slice(2)}`
-						}).catch((err)=>{
-							console.log(err);
-						})
-					},
-					// 当前时间
-					dateEv(){
-						let date = new Date();
-						// 年
-						let year = date.getFullYear();
-						// 月
-						let month = date.getMonth() + 1;
-						// 日
-						let day = date.getDate();
-						this.date = `${year}-${month}-${day}`;
-						// 时
-						let hour = date.getHours();
-						// 分
-						let minute = date.getMinutes();
-						// 当前时间
-						this.time = `${hour < 10 ? '0'+hour : hour}:${minute < 10 ? '0'+minute : minute}`;
-					}
-				},
-				mounted(){
-					this.weatherEv();
-					window.addEventListener('online',this.updateOnlineStatus);//网络由异常到正常时触发
-					window.addEventListener('offline',this.updateOnlineStatus);//网络由正常到异常时触发
-				}
-			};
-			Vue.createApp(App).mount('#app');
-		</script>
   </body>
 </html>

package.json

@@ -0,0 +1,63 @@
+{
+  "name": "electron-banpai",
+  "version": "1.0.0",
+  "description": "幼儿园",
+  "author": "2659004835@qq.com",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "axios": "^0.24.0",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^2.0.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "node-notifier": "^5.1.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/App.vue

@@ -0,0 +1,15 @@
+<template>
+	<div id="app">
+		<router-view />
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'App'
+	}
+</script>
+
+<style>
+	@import url("assets/css/electron.css");
+</style>

src/assets/css/electron.css

@@ -0,0 +1,523 @@
+* {
+	padding: 0;
+	margin: 0;
+}
+body {
+	background-color: #9c7cfa;
+}
+div {
+	box-sizing: border-box;
+}
+img {
+	width: 100%;
+	vertical-align: bottom;
+}
+.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
+.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
+.clips3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
+/* 头部导航 */
+.header-box {
+	position: sticky;
+	top: 0;
+	z-index: 10;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: #FFFFFF;
+	box-shadow: 0px 3px 7px 0px rgba(134, 105, 220, 0.35);
+	width: 100%;
+	height: 98px;
+	padding: 0 60px;
+}
+.header-box .logo-box {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: url(../home/logo-bottom.png) no-repeat;
+	background-size: 100% 100%;
+	width: 177px;
+	height: 162px;
+	margin-left: 287px;
+	margin-top: 20px;
+}
+.header-box .logo {
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
+.logo img {
+	width: 76px;
+	height: 76px;
+}
+.logo div {
+	color: #b7cc56;
+	font-size: 12.5px;
+	margin-top: 6px;
+}
+.header-box .title-box {
+	display: flex;
+	align-items: center;
+	color: #9c7cfa;
+	font-weight: bold;
+	font-size: 20px;
+}
+.title-item {
+	padding: 30px 20px 12px 20px;
+	cursor: pointer;
+}
+.activeTitle {
+	color: #FFFFFF;
+	background: url(../home/title-bottom-01.png) no-repeat;
+	background-size: 100% 100%;
+}
+.activeTitle2 {
+	color: #FFFFFF;
+	background: url(../home/title-bottom-02.png) no-repeat;
+	background-size: 100% 100%;
+}
+/* 天气 */
+.weather-box {
+	display: flex;
+	align-items: center;
+	font-size: 16px;
+}
+.weather-box img {
+	width: 60px;
+	height: 51px;
+}
+.weather-three {
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	width: 234px;
+	height: 28px;
+	background-color: #FF9393;
+	border-radius: 10px;
+	color: #fff;
+	margin-top: 2px;
+}
+
+/* 内容主体 start */
+.main {
+	margin: 60px 0 90px 0;
+	padding: 0 60px;
+	display: flex;
+	justify-content: space-between;
+}
+.main-left {
+	display: flex;
+	flex-direction: column;
+	flex-shrink: 0;
+}
+.left-one {
+	position: relative;
+	margin-bottom: 20px;
+	background: url(../home/left-kuang.png) no-repeat;
+	background-size: 100% 100%;
+	width: 390px;
+	height: 296px;
+}
+.left-content {
+	display: flex;
+	flex-direction: column;
+	padding: 0 20px;
+	color: #7557cc;
+}
+.left-title {
+	color: #FFE68F;
+	font-weight: bold;
+	text-align: center;
+	font-size: 36px;
+	margin: 0;
+	position: relative;
+	height: 70px;
+	display: flex;
+	align-items: center;
+}
+.pultitle {
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+}
+.three-content {font-size: 18px;line-height: 30px;color: #7557CC;}
+.left-last {
+	display: flex;
+	justify-content: space-around;
+}
+.left-last > div {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.left-last > div div:nth-child(1) {
+	font-weight: bold;font-size: 30px;
+}
+.left-last > div div:nth-child(2) {
+	color: #9C7CFA;font-size: 18px;
+}
+.left-notice {font-size: 18px;line-height: 30px;height: 60px;}
+.notice-time {display: flex;justify-content: space-between;margin: 10px 0;font-size: 18px;color: #6E6E6E;margin-top: 30px;}
+.notice-time div:nth-child(2) {
+	display: flex;align-items: center;
+}
+.notice-time img {
+	width: 20px;height: 15px;margin-right: 2px;
+}
+.line {border-bottom: 2px dashed #9C7CFA;margin: 10px 0;}
+.eat-three {display: flex;justify-content: space-around;align-items: center; margin-top: 20px;font-size: 24px;}
+.threeMealActive{
+	font-size: 30px!important;font-weight: bold!important;
+}
+.meal-box {padding-top: 10px;display: flex;align-items: center;}
+.meal-box img {width: 130px;height: 106px;border-radius: 10px;object-fit: cover;margin-right: 34px;}
+.meal-box div {font-size: 18px;line-height: 30px;}
+.main-center {
+	margin: 0 20px;
+	width: 60%;
+}
+.center-title {color: #7557CC;font-size: 36px;text-align: center;line-height: 40px;padding-top: 40px;}
+.center-img-box {
+	background: url(../home/class-dongt.png) no-repeat;
+	background-size: 100% 100%;
+	width: 967px;
+	height: 900px;
+}
+.img-box {margin: 76px 83px 192px 74px;}
+.remind-box {display: flex;justify-content: center;margin-top: 10px;}
+.remind-box > div {background-color: rgba(0,0,0,.3);color: #FFFFFF;border-radius: 50px;position: relative;width: 174px;height: 64px;display: flex;justify-content: center;align-items: center;}
+.remind-box > div:nth-child(2) {margin: 0 88px;}
+.remind-box img {width: 47px;height: 41px;}
+.msg-box div:nth-child(1) {font-weight: bold;font-size: 30px;}
+.msg-box div:nth-child(2) {position: absolute;right: -5px;top: -6px;width:33px;height: 33px;background-color:#FF9393;border-radius: 50%;text-align: center;line-height: 33px;}
+.main-right {
+	position: relative;
+	display: inline-block;
+	width: 390px;
+	height: 900px;
+	flex-shrink: 0;
+	background: url(../home/right-back.png) no-repeat;
+	background-size: 100% 100%;
+}
+.right-content {color: #7557CC;text-align: center;height: 90%; overflow: hidden;overflow-y: scroll;margin-top: 10px;}
+.right-content::-webkit-scrollbar {
+  display: none;
+}
+.right-title {font-size: 30px;margin-bottom: 10px;margin-top: 10px;}
+.right-item-box {display: flex;align-items: center;justify-content: space-between; color: #9C7CFA;font-size: 18px;padding: 10px 20px;margin: 0 6px;}
+.right-item-box div:nth-child(1){
+	flex-shrink: 0;
+	margin-right: 50px;
+}
+.right-item-box div:nth-child(2){
+	text-align: left;
+}
+.oddActive {background-color: #F7F7F7;}
+
+.popu-box {position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #FFFFFF;padding: 0px 34px;border-radius: 10px;width: 620px;height: 370px;font-size: 20px;color: #3F3F3F;box-shadow: 0px 15px 29px 3px rgba(93, 79, 133, 0.35);border-radius: 10px;}
+.item-row {
+	display: flex;align-items: center;
+	padding: 33px 0 30px 0;
+	border-bottom: 1px solid #ACB0BE;
+}
+.item-row:last-child {
+	border-bottom: none;
+}
+.mode-box {display: flex;align-items: center;justify-content: space-between;width: 100%;}
+.mode-box >div {display: flex;align-items: center;justify-content: space-between;}
+.radio-box {background-color: #dbdce3;width: 18px;height: 18px;border-radius: 100%;display: flex;justify-content: center;align-items: center;margin-right: 12px;}
+.radio-box span {display: block;background-color: #000;width: 6.5px;height: 6.5px;border-radius: 100%;}
+.item-row .refresh-btn,.item-row .back-btn {width: 124px;height: 32px;line-height: 32px;font-size: 24px; background: #A68AFA;border-radius: 10px;color: #FFFFFF;text-align: center;margin-left: 20px;}
+.item-row .back-btn {margin-left: 60px;}
+/* 内容主体 end */
+.footer {
+	margin-top: 50px;
+	position: relative;
+}
+.footer img {
+	position: absolute;bottom: 0;left: 0;z-index: -1;
+}
+/* 宝宝活动页面 */
+.class-left-one {
+	position: relative;
+	margin-bottom: 20px;
+	background: url(../home/right-back.png) no-repeat;
+	background-size: 100% 100%;
+	width: 464px;
+	height: 826px;
+}
+.class-left-title {
+	color: #FFE68F;
+	font-weight: bold;
+	text-align: center;
+	font-size: 36px;
+	margin: 0;
+	height: 60px;
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	
+}
+.class-left-title img {
+	width: 20px;
+	height: 20px;
+	margin-left: 15px;
+}
+.class-left-title img:first-child {
+	margin-left: 70px;
+}
+.second-title {
+	text-align: center;font-size: 30px;font-weight: bold;margin-top: 10px;color: #7557CC;
+}
+.baby-left-content {
+	display: flex;
+	flex-direction: column;
+	padding: 0 4px;
+	color: #7557cc;
+}
+.baby-content-box {
+	height: 760px;
+	overflow: hidden;
+	overflow-y: scroll;
+	background-color: #f7f7f7;
+	border-radius: 0px 0px 15px 15px;
+	padding: 7px;
+}
+.baby-content-box::-webkit-scrollbar {
+  display: none;
+}
+.class-situation {
+	font-size: 30px;color: #9C7CFA;font-weight: bold;
+}
+.class-item-box {
+	background: #FFFFFF;border-radius: 5px;padding: 7.5px;margin-bottom: 7px;
+}
+.teather-title {
+	font-size: 24px;color: #3F3F3F;font-weight: bold;
+}
+.teather-box {
+	display: flex;
+	justify-content: space-around;
+	padding-bottom: 40px;
+}
+.teather-box div {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	font-size: 18px;
+	color: #666666;
+	margin-top: 30px;
+}
+.teather-box span {
+	margin-top: 10px;
+}
+.class-item-box img {
+	width: 90px;
+	height: 90px;
+	border-radius: 100%;
+	object-fit: cover;
+	border: 5px solid #F1ECFF;
+}
+.class-active {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-top: 50px;
+}
+.class-active label:nth-child(1){font-size: 18px;color: #666666;}
+.class-active label:nth-child(2){font-size: 24px; color: #9C7CFA;margin-top: 6px;}
+
+.class-main-right {
+	position: relative;
+	display: inline-block;
+	width: 100%;
+	background: url(../home/right-back.png) no-repeat;
+	background-size: 100% 100%;
+	margin-left: 30px;
+	height: 826px;
+}
+.time-title-box {background-color: #9C7CFA;font-size: 18px;font-weight: bold;color: #FFFFFF; height: 34px;border-radius: 10px;line-height: 34px;display: flex;justify-content: space-around;}
+.time-title-box div{width: 16%;text-align: center;}
+.tiam-data-box {display: flex;position: relative;align-items: center;margin-top: 10px;}
+.time-left {position: absolute;left: 0;top: 0;bottom: 0; width: 40px;background-color: #C3AEFF;padding: 10px 7px;font-size: 24px;color: #FFFFFF;line-height: 40px;border-radius: 10px;display: flex;justify-content: center;align-items: center;margin-right: 10px;}
+.time-right-box {display: flex;justify-content: space-around;text-align: center;height: 37px;background: #FFFFFF;border-radius: 10px;line-height: 37px;margin-bottom: 5px;}
+.time-right-box:last-child {margin-bottom: 0px;}
+.time-item {width: 16%;}
+.time-item div:nth-child(1){
+	background-color: #f7f7f7;height: 37px;width: 28%;flex-shrink: 0;
+}
+.time-item div:nth-child(2){
+	border-radius: 10px 0 0 10px;padding-left: 10px; background-color: #FFFFFF;height: 37px;margin-left: -10px;color: #9C7CFA;
+}
+
+/* 出勤详情 */
+.attendance-box,.babyalbum-box {
+	width: 1200px;
+	height: 818px;
+	background: #FFFFFF;
+	border: 3px solid #7557CC;
+	border-radius: 15px;
+	margin: 0 auto;
+	margin-top: 57px;
+	margin-bottom: 110px;
+	display: flex;
+}
+.attendance-left {
+	min-width: 230px;
+	background-color: #7557cc;
+	height: 812px;
+	margin-left: -5px;
+	border-radius: 15px 0 0 15px;
+	flex-shrink: 0;
+	padding-top: 95px;
+}
+.attendance-right {
+	width: 100%;
+	height: 812px;
+	padding: 48px 40px;
+	display: flex;
+	flex-wrap: wrap;
+}
+.attendance-left-item-box {display: flex;align-items: center;font-size: 24px;color: #FFE68F;width: 100%;height: 76px;padding: 0 10px;}
+.attendance-active {background-color: #6348b0;}
+.attendance-left-item-box img{width: 20px;height: 20px;margin-right: 10px;}
+.attendance-right .attendance-right-item-box {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	margin-bottom: 64px;
+	width: 14.2%;
+}
+.attendance-right-item-box img {
+	width: 90px;
+	height: 90px;
+	border-radius: 100%;
+	object-fit: cover;
+	border: 5px solid #F1ECFF;
+}
+.attendance-right span,.babyalbum-item-box span {
+	margin: 10px 0 15px 0;
+	font-size: 18px;
+	color: #3F3F3F;
+}
+.attendance-right-item-box div {width: 80px;height: 21px;line-height: 21px;border-radius: 10px;}
+
+.attendance-right-item-box div {
+	font-size: 16px;
+	color: #FFFFFF;
+}
+.nothing-box {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;box-sizing: border-box;}
+.nothing-box img {width: 116px;height: 195px;margin-right: 36px;}
+.nothing-box div {font-size: 24px;color: #3F3F3F;font-weight: bold;margin-top: 80px;}
+/* 宝宝相册 */
+.babyalbum-box {
+	padding: 35px 20px;
+	display: flex;
+	flex-wrap: wrap;
+}
+.babyalbum-item-box {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 16.6%;
+	height: 250px;
+}
+.babyalbum-item-box img {
+	width: 152px;
+	height: 152px;
+	border: 5px solid #F1ECFF;
+	object-fit: cover;
+	border-radius: 10px;
+}
+.babyalbum-item-box div {
+	width: 115px;
+	height: 21px;
+	line-height: 21px;
+	border-radius: 10px;
+	text-align: center;
+	color: #FFFFFF;
+}
+/* 疫情管理 */
+.yiqing-box {
+	width: 1200px;
+	height: 818px;
+	background: #FFFFFF;
+	border: 3px solid #7557CC;
+	border-radius: 15px;
+	margin: 0 auto;
+	margin-top: 57px;
+	margin-bottom: 110px;
+	padding: 47px 58px;
+}
+.yiqing-title {
+	font-size: 24px;
+	font-weight: bold;
+	color: #3F3F3F;
+	text-align: center;
+	border-bottom: 1px solid #D3D3D3;
+	padding-bottom: 15px;
+}
+.yiqing-content {
+	height: 680px;
+	overflow: hidden;
+	overflow-y: scroll;
+	font-size: 16px;
+	font-weight: 400;
+	color: #666666;
+	line-height: 30px;
+	margin-top: 18px;
+}
+.yiqing-content::-webkit-scrollbar {
+  display: none;
+}
+/* 幼儿园介绍 */
+.introduction-item {display: flex;align-items: center;justify-content: space-between; font-size: 24px;color: #FFE68F;width: 100%;height: 76px;padding: 0 10px;}
+.item-left img{width: 20px;height: 20px;margin-right: 10px;}
+.item-left {display: flex;align-items: center;}
+.introduction-item > img {width: 12px;height: 20px;margin-top: 4px;margin-right: 20px;}
+.introduction-right {
+	width: 100%;
+	height: 812px;
+	padding: 46px 50px;
+	position: relative;
+	overflow: hidden;
+	overflow-y: scroll;
+}
+.introduction-right::-webkit-scrollbar {
+	display: none;
+}
+.yiqing-content img {object-fit: cover;width: 357px;height: 220px;margin-right: 10px;}
+.teacherstyle-right {display: flex;flex-wrap: wrap;}
+.teacherstyle-item-box {
+	width: 20%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-bottom: 63px;
+}
+.teacherstyle-item-box img {
+	width: 133.5px;
+	height: 133.5px;
+	border-radius: 100%;
+	object-fit: cover;
+	border: 5px solid #F1ECFF;
+}
+.teacherstyle-item-box span {
+	color: #3F3F3F;
+	font-size: 18px;
+	margin-top: 16px;
+}
+.noticeInfo-item {
+	display: flex;align-items: center;justify-content: space-between;margin-bottom: 16px;border-bottom: 1px solid #D3D3D3;
+}
+.notice-title {display: flex;align-items: center;padding-bottom: 16px;}
+.notice-title img{width: 21px;height: 21px;margin-right: 12px;}
+.notice-title div{font-size: 18px;color: #3F3F3F;font-weight: bold;}
+.noticeInfo-time {font-size: 14px;color: #959595;}
+@media screen and (min-width:768px) and (max-width:1024px) {
+	.header-box {
+		background-color: #000000;
+	}
+}

src/components/attendanceDetail.vue

@@ -0,0 +1,60 @@
+<template>
+	<div>
+		<!-- 主体内容 -->
+		<div class="attendance-box">
+			<div class="attendance-left">
+				<div @click="chooseNavEv(index)" class="attendance-left-item-box" :class="navIndex==index?'attendance-active':''" v-for="(item,index) in navArr" :key="index">
+					<img src="">
+					<div>{{item.title}}（{{item.num}}）</div>
+				</div>
+			</div>
+			<div class="attendance-right">
+				<div v-if="!isNothing" class="attendance-right-item-box" v-for="(item,index) in teatherArr" :key="index">
+					<img src="" alt="">
+					<span>{{item.teatherName}}</span>
+					<div :style="{background:['#9C7CFA','#FF9393','#D3D3D3','#F4B52F'][item.status]}">{{['正常','未到校','离校','请假'][item.status]}}</div>
+				</div>
+				<div v-if="isNothing" class="nothing-box">
+					<img src="../assets/attendancedetail/-s-暂无.png">
+					<div>{{['没有出勤','暂无离校','暂无未到校','没有请假'][navIndex]}}的宝宝</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	export default {
+		name: 'babyActivity',
+		data() {
+			return {
+				navArr:[
+					{icon:'../assets/attendancedetail/icon-attendancedetail.png',title:'出勤详情',num:12},
+					{icon:'../assets/attendancedetail/icon-lixiao.png',title:'离校情况',num:0},
+					{icon:'../assets/attendancedetail/icon-qingj.png',title:'未到校宝宝',num:0},
+					{icon:'../assets/attendancedetail/icon-weidao.png',title:'请假宝宝',num:0},
+				],
+				navIndex:0,
+				teatherArr:[
+					{teatherImg:'',teatherName:'张跑跑',status:0},
+					{teatherImg:'',teatherName:'张跑跑',status:1},
+					{teatherImg:'',teatherName:'张跑跑',status:2},
+					{teatherImg:'',teatherName:'张跑跑',status:3},
+					{teatherImg:'',teatherName:'张跑跑',status:0},
+					{teatherImg:'',teatherName:'张跑跑',status:0},
+					{teatherImg:'',teatherName:'张跑跑',status:0},
+					{teatherImg:'',teatherName:'张跑跑',status:0},
+				],
+				isNothing:false
+			}
+		},
+		methods: {
+			chooseNavEv(e){
+				this.navIndex = e;
+				this.isNothing = true;
+			}
+		},
+		mounted() {
+			
+		}
+	}
+</script>

src/components/babyActivity.vue

@@ -0,0 +1,152 @@
+<template>
+	<div>
+		<!-- 主体内容 -->
+		<div class="main">
+			<!-- 左侧 -->
+			<div class="main-left">
+				<!-- 班级情况 -->
+				<div class="class-left-one">
+					<div class="baby-left-content">
+						<div class="class-left-title">
+							<img src="../assets/home/flower.png" >
+							<img src="../assets/home/flower.png" >
+							<div class="pultitle">班级情况</div>
+						</div>
+						<div class="baby-content-box">
+							<div class="class-situation class-item-box">中二班</div>
+							<!-- 班级老师 -->
+							<div class="class-item-box">
+								<div class="teather-title">班级老师</div>
+								<div class="teather-box">
+									<div v-for="(item,index) in teatherArr" :key="index">
+										<img :src="item.headImg" >
+										<span>{{item.name}}</span>
+									</div>
+								</div>
+							</div>
+							<!-- 当前活动 -->
+							<div class="class-item-box" style="height: 210px;">
+								<div class="teather-title">当前活动</div>
+								<div class="class-active">
+									<label>13:00-15:00</label>
+									<label>户外体育</label>
+								</div>
+							</div>
+							<!-- 当前活动 -->
+							<div class="class-item-box" style="height: 210px;">
+								<div class="teather-title">当前活动</div>
+								<div class="class-active">
+									<label>13:00-15:00</label>
+									<label>户外体育</label>
+								</div>
+							</div>
+							<!-- 当前活动 -->
+							<div class="class-item-box" style="height: 210px;">
+								<div class="teather-title">当前活动</div>
+								<div class="class-active">
+									<label>13:00-15:00</label>
+									<label>户外体育</label>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- 右侧 -->
+			<div class="class-main-right">
+				<div class="class-left-title">
+					<div class="pultitle">宝宝课表第15周（2021年12月08日）</div>
+				</div>
+				<div class="baby-content-box">
+					<div class="time-title-box">
+						<div v-for="(item,index) in kebiaoArr" :key="index">{{item}}</div>
+					</div>
+					<div class="tiam-data-box" v-for="(item,index) in dataArr" :key="index">
+						<div class="time-left" :style="{background:['#C3AEFF','#F1D470','#FF9393'][index]}">{{item.title}}</div>
+						<div style="width: 100%;">
+							<div class="time-right-box" v-for="(itemt,indext) in item.children" :key="indext">
+								<div class="time-item clips1" style="border-radius: 10px 0 0 10px;display: flex;">
+									<div></div>
+									<div>{{itemt.time}}</div>
+								</div>
+								<div class="clips1 time-item">{{itemt.dayOne}}</div>
+								<div class="clips1 time-item">{{itemt.dayTwo}}</div>
+								<div class="clips1 time-item">{{itemt.dayThree}}</div>
+								<div class="clips1 time-item">{{itemt.dayFour}}</div>
+								<div class="clips1 time-item">{{itemt.dayFive}}</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	export default {
+		name: 'babyActivity',
+		data() {
+			return {
+				teatherArr:[
+					{name:'张芳芳',headImg:'../assets/seconds/tu-01.png'},
+					{name:'张芳芳',headImg:'../assets/seconds/tu-01.png'},
+					{name:'张芳芳',headImg:'../assets/seconds/tu-01.png'},
+				],
+				kebiaoArr:['时间','星期一','星期二','星期三','星期四','星期五'],
+				dataArr:[
+					{
+						title:'上午',
+						children:[
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+						]
+					},
+					{
+						title:'中午',
+						children:[
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+						]
+					},{
+						title:'下午',
+						children:[
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+							{time:'08:00-08:30',dayOne:'养成教育及餐前准备',dayTwo:'养成教育及餐前准备',dayThree:'养成教育及餐前准备',dayFour:'养成教育及餐前准备',dayFive:'养成教育及餐前准备'},
+						]
+					}
+				]
+			}
+		},
+		methods: {
+			
+		},
+		mounted() {
+			
+		}
+	}
+</script>

src/components/babyAlbum.vue

@@ -0,0 +1,40 @@
+<template>
+	<!-- 主体内容 -->
+	<div class="babyalbum-box">
+		<div class="babyalbum-item-box" v-for="(item,index) in babyArr" :key="index">
+			<img src="" alt="">
+			<span>{{item.babyName}}的相册</span>
+			<div :style="{background:'#9C7CFA'}">{{item.albumNum}}张图</div>
+		</div>
+		<div v-if="isNothing" class="nothing-box">
+			<img src="../assets/attendancedetail/-s-暂无.png">
+			<div>暂无宝宝相册</div>
+		</div>
+	</div>
+</template>
+<script>
+	export default {
+		name: 'babyActivity',
+		data() {
+			return {
+				babyArr:[
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+				],
+				isNothing:false
+			}
+		},
+		methods: {
+			
+		},
+		mounted() {
+			
+		}
+	}
+</script>

src/components/header.vue

@@ -0,0 +1,200 @@
+<template>
+	<div>
+		<!-- 头部导航 start -->
+		<div class="header-box">
+			<!-- logo -->
+			<div class="logo-box">
+				<div class="logo">
+					<img src="../assets/home/logo.png">
+					<div>都江堰市机关幼儿园</div>
+				</div>
+			</div>
+			<!-- 文本导航 -->
+			<div class="title-box">
+				<div class="title-item" :class="activeIndex==index?activeTitle:''" v-for="(item,index) in titleArr"
+					:key="index" @click="chooseTitle(index)">{{item}}</div>
+			</div>
+			<!-- 天气 -->
+			<div class="weather-box">
+				<img src="../assets/weather/1.png" style="margin-right: 10px;">
+				<div>
+					<div style="color: #FF9393;">{{date}}</div>
+					<div class="weather-three">
+						<div>{{temperature}}</div>
+						<div>{{time}}</div>
+						<div>{{week}}</div>
+					</div>
+				</div>
+			</div>
+			<!-- 功能图标 -->
+			<div><img src="../assets/home/icon-set.png"></div>
+		</div>
+		<!-- 头部导航 end -->
+		
+		
+		
+		
+		<!-- 首页 -->
+		<homepage v-if="activeIndex==0"></homepage>
+		<!-- 幼儿园介绍 -->
+		<kindIntroduction v-if="activeIndex==1"></kindIntroduction>
+		<!-- 宝宝活动 -->
+		<babyActivity v-if="activeIndex==2"></babyActivity>
+		<!-- 出勤详情 -->
+		<attendanceDetail v-if="activeIndex==3"></attendanceDetail>
+		<!-- 宝宝相册 -->
+		<babyAlbum v-if="activeIndex==4"></babyAlbum>
+		<!-- 疫情管理 -->
+		<yiqingmanagement v-if="activeIndex==5"></yiqingmanagement>
+		
+		
+		<!-- 底部 -->
+		<div class="footer">
+			<img src="../assets/home/foot-icon.png">
+			<img v-if="activeIndex==1" src="../assets/kindergartenIntroduce/chahua-01.png" >
+			<img v-if="activeIndex==2" src="../assets/home/baby-foot.png">
+			<img v-if="activeIndex==3" src="../assets/attendancedetail/-s-插画.png">
+			<img v-if="activeIndex==4 || activeIndex==5" src="../assets/babyalbum/-s-插画.png">
+		</div>
+		<!-- 网络弹框 -->
+		<div v-if="isNetwork" class="popu-box">
+			<div class="item-row">班排设备ID：*******</div>
+			<div class="item-row">网络链接状态：网络监测（{{onLine?'已连接':'已断开'}}）<img v-if="onLine"
+					src="../assets/home/icon-link.png" style="width: 20px;"></div>
+			<div class="item-row">
+				<span style="flex-shrink: 0;">班牌显示模式：</span>
+				<div class="mode-box">
+					<div v-for="(item,index) in modeArr" :key="index" @click="chooseMode(index)">
+						<div class="radio-box">
+							<span v-if="item.isActive"></span>
+						</div>
+						{{item.title}}
+					</div>
+				</div>
+			</div>
+			<div class="item-row">
+				控制操作：
+				<div class="refresh-btn">刷新</div>
+				<div class="back-btn">返回首页</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	// 首页
+	import homepage from '@/components/homepage.vue';
+	// 幼儿园介绍
+	import kindIntroduction from '@/components/kindIntroduction.vue';
+	// 宝宝活动
+	import babyActivity from '@/components/babyActivity.vue';
+	// 出勤详情
+	import attendanceDetail from '@/components/attendanceDetail.vue';
+	// 宝宝相册
+	import babyAlbum from '@/components/babyAlbum.vue';
+	// 疫情管理
+	import yiqingmanagement from '@/components/yiqingmanagement.vue';
+	export default {
+		components:{
+			homepage,
+			kindIntroduction,
+			babyActivity,
+			attendanceDetail,
+			babyAlbum,
+			yiqingmanagement
+		},
+		name: 'header',
+		data() {
+			return {
+				titleArr: ['首页', '幼儿园介绍', '宝宝活动', '出勤详情', '宝宝相册', '疫情管理'],
+				activeIndex: 0,
+				modeArr: [{
+						isActive: true,
+						title: '欢迎模式'
+					},
+					{
+						isActive: false,
+						title: '班牌模式'
+					},
+					{
+						isActive: false,
+						title: '大数据模式'
+					},
+				],
+				onLine: navigator.onLine,
+				list: [],
+				city: '',
+				date: '', //2021-12-19
+				week: '', //星期几
+				temperature: '', //天气温度
+				time: '', //当前时间
+				timer: null,
+				activeTitle: 'activeTitle',
+				isNetwork:false
+			}
+		},
+		methods: {
+			// 选择班牌显示模式
+			chooseMode(e) {
+				this.modeArr.forEach(item => {
+					item.isActive = false
+				})
+				this.modeArr[e].isActive = true;
+			},
+			// 导航切换
+			chooseTitle(e) {
+				this.activeIndex = e;
+				e == 0 ? this.activeTitle = 'activeTitle' : this.activeTitle = 'activeTitle2';
+			},
+			// 网络状态
+			updateOnlineStatus(e) {
+				const {
+					type
+				} = e;
+				this.onLine = type === 'online';
+				if (this.onLine) {
+					this.weatherEv();
+				}
+			},
+			// 天气
+			weatherEv() {
+				// 获取时间
+				this.dateEv();
+				this.timer = setInterval(() => {
+					this.dateEv();
+				}, 1000)
+				var that = this;
+				this.$axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + '成都').then((res) => {
+					let weatherList = res.data.data.forecast;
+					// 星期几
+					this.week = weatherList[0].date.slice(weatherList[0].date.indexOf('日') + 1);
+					// 当天气温
+					this.temperature = `${weatherList[0].low.slice(2,-1)} -${weatherList[0].high.slice(2)}`
+				}).catch((err) => {
+					console.log(err);
+				})
+			},
+			// 当前时间
+			dateEv() {
+				let date = new Date();
+				// 年
+				let year = date.getFullYear();
+				// 月
+				let month = date.getMonth() + 1;
+				// 日
+				let day = date.getDate();
+				this.date = `${year}-${month}-${day}`;
+				// 时
+				let hour = date.getHours();
+				// 分
+				let minute = date.getMinutes();
+				// 当前时间
+				this.time = `${hour < 10 ? '0'+hour : hour}:${minute < 10 ? '0'+minute : minute}`;
+			},
+		},
+		mounted() {
+			this.weatherEv();
+			window.addEventListener('online', this.updateOnlineStatus); //网络由异常到正常时触发
+			window.addEventListener('offline', this.updateOnlineStatus); //网络由正常到异常时触发
+		}
+	}
+</script>

src/components/homepage.vue

@@ -0,0 +1,255 @@
+<template>
+	<div>
+		<!-- 主体内容 -->
+		<div class="main">
+			<!-- 左侧 -->
+			<div class="main-left">
+				<!-- 班级详情 -->
+				<div class="left-one">
+					<div class="left-content">
+						<div class="left-title">
+							<div class="pultitle">班级详情</div>
+						</div>
+						<div class="second-title">中二班</div>
+						<div class="line"></div>
+						<div class="three-content">
+							<div>老师：罗敏 宋春雪 王愉</div>
+							<div>班级人数：21</div>
+						</div>
+						<div class="line"></div>
+						<div class="left-last">
+							<div>
+								<div>0</div>
+								<div>实到</div>
+							</div>
+							<div>
+								<div>0</div>
+								<div>未到</div>
+							</div>
+							<div>
+								<div>0</div>
+								<div>请假</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!-- 宝宝食谱 -->
+				<div class="left-one">
+					<div class="left-content">
+						<div class="left-title">
+							<div class="pultitle">宝宝食谱</div>
+						</div>
+						<div class="eat-three">
+							<div :class="threeMealIndex==index?'threeMealActive':''" v-for="(item,index) in threeMeals"
+								:key="index" @click="chooseMeal(index)">{{item}}
+							</div>
+						</div>
+						<div class="line"></div>
+						<div class="left-last meal-box">
+							<img src="../assets/seconds/tu-01.png">
+							<div>白米饭、土豆粉蒸肉、肉末豆腐、农家菜汤</div>
+						</div>
+					</div>
+				</div>
+				<!-- 通知公告 -->
+				<div class="left-one">
+					<div class="left-content">
+						<div class="left-title">
+							<div class="pultitle">通知公告</div>
+						</div>
+						<div class="second-title">中二班</div>
+						<div class="line"></div>
+						<div class="three-content left-notice">
+							<div class="clips2">老师：罗敏 宋春</div>
+						</div>
+						<div class="notice-time">
+							<div>2021-11-15</div>
+							<div>
+								<img src="../assets/home/slices.png">15
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- 中部 -->
+			<div class="main-center">
+				<!-- 班级动态图文 -->
+				<div class="center-img-box">
+					<div class="center-title">班级动态</div>
+					<div class="img-box">
+						<img src="../assets/seconds/tu-01.png" style="object-fit: cover;">
+					</div>
+				</div>
+				<!-- 提醒 -->
+				<div class="remind-box">
+					<div class="msg-box">
+						<img src="../assets/home/icon-notice.png">
+						<div>1</div>
+					</div>
+					<div class="msg-box">
+						<div>宝宝提醒</div>
+						<div>1</div>
+					</div>
+					<div class="msg-box">
+						<div>生日提醒</div>
+						<div>1</div>
+					</div>
+				</div>
+			</div>
+			<!-- 右侧 -->
+			<div class="main-right">
+				<div class="left-title">
+					<div class="pultitle">今日活动</div>
+				</div>
+				<div class="right-content">
+					<div v-for="(item,index) in noonArr" :key="index">
+						<div class="right-title">{{item.title}}</div>
+						<div class="line" style="margin: 0 6px;"></div>
+						<div class="right-item-box" v-for="(itemc,indexc) in item.children"
+							:class="indexc%2!=0?'oddActive':''" :key="indexc">
+							<div>{{itemc.time}}</div>
+							<div class="clips3">{{itemc.content}}</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	export default {
+		name: 'homepage',
+		data() {
+			return {
+				threeMeals: ['早餐', '午餐', '晚餐'],
+				threeMealIndex: 0,
+				noonArr: [{
+						title: '上午',
+						children: [{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动晨间活动晨间活动晨间活动晨间活动晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+						]
+					},
+					{
+						title: '中午',
+						children: [{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+						]
+					},
+					{
+						title: '下午',
+						children: [{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+							{
+								time: '08：30 - 08：50',
+								content: '晨检，晨间活动'
+							},
+						]
+					}
+				],
+			}
+		},
+		methods: {
+			// 早中晚餐切换事件
+			chooseMeal(e) {
+				this.threeMealIndex = e;
+			},
+			// 班级详情
+			calssDetailEv(){
+				this.$axios({
+					// 调用 serviceAPI
+					url:this.$https.classDetail,
+					methods:'get',
+				}).then(res =>{
+					console.log(res.data);
+				}).catch(err => {
+					console.log(err);
+				})
+			}
+		},
+		mounted() {
+			
+		}
+	}
+</script>

src/components/kindIntroduction.vue

@@ -0,0 +1,65 @@
+<template>
+	<div>
+		<!-- 主体内容 -->
+		<div class="attendance-box">
+			<div class="attendance-left">
+				<div @click="chooseNavEv(index)" class="introduction-item" :class="navIndex==index?'attendance-active':''" v-for="(item,index) in navArr" :key="index">
+					<div class="item-left">
+						<img src="">
+						<div>{{item.title}}</div>
+					</div>
+					<img src="../assets/kindergartenIntroduce/icon-choose.png" >
+				</div>
+			</div>
+			<div class="introduction-right">
+				<!-- 园区介绍 -->
+				<parkIntroduce v-if="navIndex==0"></parkIntroduce>
+				<!-- 教师风采 -->
+				<teacherStyle v-if="navIndex==1"></teacherStyle>
+				<!-- 新闻动态 -->
+				<newsInformation v-if="navIndex==2"></newsInformation>
+				<!-- 公告信息 -->
+				<noticeInfo v-if="navIndex==3"></noticeInfo>
+			</div>
+		</div>
+		
+	</div>
+</template>
+<script>
+	// 园区介绍
+	import parkIntroduce from '@/components/parkIntroduce.vue';
+	// 教师风采
+	import teacherStyle from '@/components/teacherStyle.vue';
+	// 新闻动态
+	import newsInformation from '@/components/newsInformation.vue';
+	// 公告信息
+	import noticeInfo from '@/components/noticeInfo.vue';
+	export default {
+		components:{
+			parkIntroduce,
+			teacherStyle,
+			newsInformation,
+			noticeInfo
+		},
+		name: 'babyActivity',
+		data() {
+			return {
+				navArr:[
+					{icon:'../assets/attendancedetail/icon-attendancedetail.png',title:'园区介绍'},
+					{icon:'../assets/attendancedetail/icon-lixiao.png',title:'教师风采'},
+					{icon:'../assets/attendancedetail/icon-qingj.png',title:'新闻动态'},
+					{icon:'../assets/attendancedetail/icon-weidao.png',title:'公告信息'},
+				],
+				navIndex:0,
+			}
+		},
+		methods: {
+			chooseNavEv(e){
+				this.navIndex = e;
+			}
+		},
+		mounted() {
+			
+		}
+	}
+</script>

src/components/newsInformation.vue

@@ -0,0 +1,40 @@
+<template>
+	<div>
+		<div class="yiqing-title" style="text-align: left;">攀枝花市西区第一幼儿园分园招生公告</div>
+		<img src="../assets/kindergartenIntroduce/icon-back.png" style="width: 48px;height: 48px;position: absolute;top: 20px;right: 20px;" >
+		<div class="yiqing-content">
+			尊敬的各位家长：<br />
+			攀枝花市西区第一幼儿园分园系全日制公办幼儿园，由攀枝花市西区第一幼儿园统一管理。隶属攀枝花市西区教育体育局。
+			攀枝花市西区第一幼儿园分园座落于西区清香坪梨华路，紧邻市31中小。园舍建筑面积2000平方米，户外活动场地1600平方米，园内设有标准化活动室、寝室、开设大、中、小年龄段教学班7个。按照总体规划，将建成户外活动场地、大型玩具区、幼儿体能锻炼场地、体验园等生活体验区。<br />
+			一、指导思想<br />
+			依据西区学前教育招生工作相关规定，严格按照“相对就近，免试入园”及便民便利、公开透明的招生工作要求，强化责任意识和服务意识，充分利用现有资源，积极落实随迁子女的入园政策，尽力满足学区内广大群众的需求，努力做好2018年秋季学期西区第一幼儿园分园招生工作。<br />
+			二、招生原则<br />
+			(一)坚持公开、公正、公平的原则<br />
+			在西区第一幼儿园分园竣工且相关部门验收合格后，按区教育体育局统一规定时间和内容向社会公开招生信息和招生细则。<br />
+			（二）坚持满足3—6岁接受全日制学前教育为主的原则<br />
+			保证3—6岁幼儿接受学前教育，满足入园要求。
+			（三）按照相关要求设定班级数<br />
+			2018年秋季学期将面向西区招生；共开设7个班。
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'newsInformation',
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		},
+		mounted() {
+			
+		}
+	}
+</script>
+
+<style>
+</style>

src/components/noticeInfo.vue

@@ -0,0 +1,57 @@
+<template>
+	<div>
+		<div class="noticeInfo-item" v-for="(item,index) in dataArr" :key="index">
+			<div class="notice-title">
+				<img src="../assets/kindergartenIntroduce/icon-notice.png" alt="">
+				<div class="clips1">{{item.title}}</div>
+			</div>
+			<div class="noticeInfo-time">{{item.time}}</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'noticeInfo',
+		data() {
+			return {
+				dataArr:[
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+					{title:'攀枝花市西区第一幼儿园分园招生公告',time:'2021-9-15'},
+				]
+			}
+		},
+		methods: {
+			
+		},
+		mounted() {
+			
+		}
+	}
+</script>
+
+<style>
+</style>

src/components/parkIntroduce.vue

@@ -0,0 +1,18 @@
+<template>
+	<div>
+		<div class="yiqing-title" style="text-align: left;">琦琦幼儿园</div>
+		<div class="yiqing-content">
+			新建攀枝花市西区第一幼儿园位于西区徐家渡路45号,园舍占地总面积为4632.5平方米，总体规划大、中、小年龄教学班9个，每层设计三个班，提供315个学位。每班配备标准的活动室、寝室、教师办公室、盥洗室等功能室，活动室配备钢琴、一体机等多媒体教育教学设备设施，被授予“攀枝花市一级幼儿园”“攀枝花市示范幼儿园”“攀枝花市绿色幼儿园”“攀枝花市示范家长学校”“攀枝花市文明单位”“攀枝花市花园单位”“攀枝花市巾帼文明示范岗”“四川省巾帼文明岗”等荣誉称号。
+			<div style="margin-top: 26px;">
+				<img src="../assets/seconds/tu-01.png">
+				<img src="../assets/seconds/tu-01.png">
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/components/teacherStyle.vue

@@ -0,0 +1,43 @@
+<template>
+	<div>
+		<div class="teacherstyle-right">
+			<div v-if="!isNothing" class="teacherstyle-item-box" v-for="(item,index) in teatherArr" :key="index">
+				<img src="" alt="">
+				<span>{{item.teatherName}}</span>
+			</div>
+			<div v-if="isNothing" class="nothing-box">
+				<img src="../assets/attendancedetail/-s-暂无.png">
+				<div>{{['没有出勤','暂无离校','暂无未到校','没有请假'][navIndex]}}的宝宝</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'teacherStyle',
+		data() {
+			return {
+				teatherArr:[
+					{teatherImg:'',teatherName:'张跑跑',status:0},
+					{teatherImg:'',teatherName:'张跑跑',status:1},
+					{teatherImg:'',teatherName:'张跑跑',status:2},
+					{teatherImg:'',teatherName:'张跑跑',status:3},
+					{teatherImg:'',teatherName:'张跑跑',status:0},
+					{teatherImg:'',teatherName:'张跑跑',status:0},
+					{teatherImg:'',teatherName:'张跑跑',status:0},
+					{teatherImg:'',teatherName:'张跑跑',status:0},
+				],
+			}
+		},
+		methods: {
+			
+		},
+		mounted() {
+			
+		}
+	}
+</script>
+
+<style>
+</style>

src/components/yiqingmanagement.vue

@@ -0,0 +1,48 @@
+<template>
+	<!-- 主体内容 -->
+	<div class="yiqing-box">
+		<div class="yiqing-title">关于疫情管理办法</div>
+		<div class="yiqing-content">新建攀枝花市西区第一幼儿园位于西区徐家渡路45号,园舍占地总面积为4632.5平方米，总体规划大、中、小年龄教学班9个，每层设计三个班，提供315个学位。每班配备标准的活动室、寝室、教师办公室、盥洗室等功能室，活动室配备钢琴、一体机等多媒体教育教学设备设施，被授予“攀枝花市一级幼儿园”“攀枝花市示范幼儿园”“攀枝花市绿色幼儿园”“攀枝花市示范家长学校”“攀枝花市文明单位”“攀枝花市花园单位”“攀枝花市巾帼文明示范岗”“四川省巾帼文明岗”等荣誉称号。
+
+新建攀枝花市西区第一幼儿园位于西区徐家渡路45号,园舍占地总面积为4632.5平方米，总体规划大、中、小年龄教学班9个，每层设计三个班，提供315个学位。每班配备标准的活动室、寝室、教师办公室、盥洗室等功能室，活动室配备钢琴、一体机等多媒体教育教学设备设施，被授予“攀枝花市一级幼儿园”“攀枝花市示范幼儿园”“攀枝花市绿色幼儿园”“攀枝花市示范家长学校”“攀枝花市文明单位”“攀枝花市花园单位”“攀枝花市巾帼文明示范岗”“四川省巾帼文明岗”等荣誉称号。
+
+新建攀枝花市西区第一幼儿园位于西区徐家渡路45号,园舍占地总面积为4632.5平方米，总体规划大、中、小年龄教学班9个，每层设计三个班，提供315个学位。每班配备标准的活动室、寝室、教师办公室、盥洗室等功能室，活动室配备钢琴、一体机等多媒体教育教学设备设施，被授予“攀枝花市一级幼儿园”“攀枝花市示范幼儿园”“攀枝花市绿色幼儿园”“攀枝花市示范家长学校”“攀枝花市文明单位”“攀枝花市花园单位”“攀枝花市巾帼文明示范岗”“四川省巾帼文明岗”等荣誉称号。
+新建攀枝花市西区第一幼儿园位于西区徐家渡路45号,园舍占地总面积为4632.5平方米，总体规划大、中、小年龄教学班9个，每层设计三个班，提供315个学位。每班配备标准的活动室、寝室、教师办公室、盥洗室等功能室，活动室配备钢琴、一体机等多媒体教育教学设备设施，被授予“攀枝花市一级幼儿园”“攀枝花市示范幼儿园”“攀枝花市绿色幼儿园”“攀枝花市示范家长学校”“攀枝花市文明单位”“攀枝花市花园单位”“攀枝花市巾帼文明示范岗”“四川省巾帼文明岗”等荣誉称号。
+新建攀枝花市西区第一幼儿园位于西区徐家渡路45号,园舍占地总面积为4632.5平方米，总体规划大、中、小年龄教学班9个，每层设计三个班，提供315个学位。每班配备标准的活动室、寝室、教师办公室、盥洗室等功能室，活动室配备钢琴、一体机等多媒体教育教学设备设施，被授予“攀枝花市一级幼儿园”“攀枝花市示范幼儿园”“攀枝花市绿色幼儿园”“攀枝花市示范家长学校”“攀枝花市文明单位”“攀枝花市花园单位”“攀枝花市巾帼文明示范岗”“四川省巾帼文明岗”等荣誉称号。
+新建攀枝花市西区第一幼儿园位于西区徐家渡路45号,园舍占地总面积为4632.5平方米，总体规划大、中、小年龄教学班9个，每层设计三个班，提供315个学位。每班配备标准的活动室、寝室、教师办公室、盥洗室等功能室，活动室配备钢琴、一体机等多媒体教育教学设备设施，被授予“攀枝花市一级幼儿园”“攀枝花市示范幼儿园”“攀枝花市绿色幼儿园”“攀枝花市示范家长学校”“攀枝花市文明单位”“攀枝花市花园单位”“攀枝花市巾帼文明示范岗”“四川省巾帼文明岗”等荣誉称号。
+新建攀枝花市西区第一幼儿园位于西区徐家渡路45号,园舍占地总面积为4632.5平方米，总体规划大、中、小年龄教学班9个，每层设计三个班，提供315个学位。每班配备标准的活动室、寝室、教师办公室、盥洗室等功能室，活动室配备钢琴、一体机等多媒体教育教学设备设施，被授予“攀枝花市一级幼儿园”“攀枝花市示范幼儿园”“攀枝花市绿色幼儿园”“攀枝花市示范家长学校”“攀枝花市文明单位”“攀枝花市花园单位”“攀枝花市巾帼文明示范岗”“四川省巾帼文明岗”等荣誉称号。
+新建攀枝花市西区第一幼儿园位于西区徐家渡路45号,园舍占地总面积为4632.5平方米，总体规划大、中、小年龄教学班9个，每层设计三个班，提供315个学位。每班配备标准的活动室、寝室、教师办公室、盥洗室等功能室，活动室配备钢琴、一体机等多媒体教育教学设备设施，被授予“攀枝花市一级幼儿园”“攀枝花市示范幼儿园”“攀枝花市绿色幼儿园”“攀枝花市示范家长学校”“攀枝花市文明单位”“攀枝花市花园单位”“攀枝花市巾帼文明示范岗”“四川省巾帼文明岗”等荣誉称号。
+新建攀枝花市西区第一幼儿园位于西区徐家渡路45号,园舍占地总面积为4632.5平方米，总体规划大、中、小年龄教学班9个，每层设计三个班，提供315个学位。每班配备标准的活动室、寝室、教师办公室、盥洗室等功能室，活动室配备钢琴、一体机等多媒体教育教学设备设施，被授予“攀枝花市一级幼儿园”“攀枝花市示范幼儿园”“攀枝花市绿色幼儿园”“攀枝花市示范家长学校”“攀枝花市文明单位”“攀枝花市花园单位”“攀枝花市巾帼文明示范岗”“四川省巾帼文明岗”等荣誉称号。
+新建攀枝花市西区第一幼儿园位于西区徐家渡路45号,园舍占地总面积为4632.5平方米，总体规划大、中、小年龄教学班9个，每层设计三个班，提供315个学位。每班配备标准的活动室、寝室、教师办公室、盥洗室等功能室，活动室配备钢琴、一体机等多媒体教育教学设备设施，被授予“攀枝花市一级幼儿园”“攀枝花市示范幼儿园”“攀枝花市绿色幼儿园”“攀枝花市示范家长学校”“攀枝花市文明单位”“攀枝花市花园单位”“攀枝花市巾帼文明示范岗”“四川省巾帼文明岗”等荣誉称号。
+新建攀枝花市西区第一幼儿园位于西区徐家渡路45号,园舍占地总面积为4632.5平方米，总体规划大、中、小年龄教学班9个，每层设计三个班，提供315个学位。每班配备标准的活动室、寝室、教师办公室、盥洗室等功能室，活动室配备钢琴、一体机等多媒体教育教学设备设施，被授予“攀枝花市一级幼儿园”“攀枝花市示范幼儿园”“攀枝花市绿色幼儿园”“攀枝花市示范家长学校”“攀枝花市文明单位”“攀枝花市花园单位”“攀枝花市巾帼文明示范岗”“四川省巾帼文明岗”等荣誉称号。
+新建攀枝花市西区第一幼儿园位于西区徐家渡路45号,园舍占地总面积为4632.5平方米，总体规划大、中、小年龄教学班9个，每层设计三个班，提供315个学位。每班配备标准的活动室、寝室、教师办公室、盥洗室等功能室，活动室配备钢琴、一体机等多媒体教育教学设备设施，被授予“攀枝花市一级幼儿园”“攀枝花市示范幼儿园”“攀枝花市绿色幼儿园”“攀枝花市示范家长学校”“攀枝花市文明单位”“攀枝花市花园单位”“攀枝花市巾帼文明示范岗”“四川省巾帼文明岗”等荣誉称号。
+
+新建攀枝花市西区第一幼儿园位于西区徐家渡路45号,园舍占地总面积为4632.5平方米，总体规划大、中、小年龄教学班9个，每层设计三个班，提供315个学位。每班配备标准的活动室、寝室、教师办公室、盥洗室等功能室，活动室配备钢琴、一体机等多媒体教育教学设备设施，被授予“攀枝花市一级幼儿园”“攀枝花市示范幼儿园”“攀枝花市绿色幼儿园”“攀枝花市示范家长学校”“攀枝花市文明单位”“攀枝花市花园单位”“攀枝花市巾帼文明示范岗”“四川省巾帼文明岗”等荣誉称号。</div>
+	</div>
+</template>
+<script>
+	export default {
+		name: 'babyActivity',
+		data() {
+			return {
+				babyArr:[
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+					{babyImg:'',babyName:'张跑跑',albumNum:0},
+				],
+				isNothing:false
+			}
+		},
+		methods: {
+			
+		},
+		mounted() {
+			
+		}
+	}
+</script>

src/config.js

@@ -0,0 +1,6 @@
+const host = 'https://easy-mock.com/mock/5bcd8e154994296c2af093ea/SmileVue/'
+const url = {
+	classDetail: host + 'index',
+}
+
+module.exports = url

src/main.js

@@ -0,0 +1,19 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import axios from 'axios'
+Vue.prototype.$axios = axios
+import https from './config.js'
+Vue.prototype.$https = https;
+import router from './router'
+
+/* eslint-disable no-new */
+new Vue({
+	el: '#app',
+	router,
+	components: {
+		App
+	},
+	template: '<App/>'
+})

src/router/index.js

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import header from '@/components/header'
+import homepage from '@/components/homepage'
+
+Vue.use(Router)
+
+export default new Router({
+	routes: [{
+		path: '/',
+		name: 'header',
+		component: header
+	}]
+})

src/utils/request.js

@@ -0,0 +1,44 @@
+/**
+ * ajax请求配置
+ */
+import axios from 'axios'
+import { Message } from 'element-ui'
+
+// axios默认配置
+axios.defaults.timeout = 10000 // 超时时间
+// axios.defaults.baseURL 请求地址前缀
+// User地址
+// axios.defaults.baseURL = 'http://127.0.0.1:8001'
+// tools地址
+// axios.defaults.baseURL = 'http://127.0.0.1:8088'
+// 微服务地址
+axios.defaults.baseURL = 'http://myzuul.com:9527/xdx'
+
+// 整理数据
+axios.defaults.transformRequest = function(data) {
+    data = JSON.stringify(data)
+    return data
+}
+
+// 路由请求拦截
+axios.interceptors.request.use(
+    config => {
+        config.headers['Content-Type'] = 'application/json;charset=UTF-8'
+        return config
+    },
+    error => {
+        return Promise.reject(error.response)
+    })
+// 路由响应拦截
+axios.interceptors.response.use(
+    response => {
+        if (response.data.success === false) {
+            return Message.error(response.data.errDesc)
+        } else {
+            return response.data
+        }
+    },
+    error => {
+        return Promise.reject(error.response) // 返回接口返回的错误信息
+    })
+export default axios