静态页的调整

master
chen 2021-12-23 10:00:27 +08:00
parent f5646b8a31
commit e38043999c
86 changed files with 28104 additions and 12308 deletions

12
.babelrc Normal file
View File

@ -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"]
}

9
.editorconfig Normal file
View File

@ -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

14
.gitignore vendored Normal file
View File

@ -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

10
.postcssrc.js Normal file
View File

@ -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": {}
}
}

21
README.md Normal file
View File

@ -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).

41
build/build.js Normal file
View File

@ -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'
))
})
})

54
build/check-versions.js Normal file
View File

@ -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)
}
}

BIN
build/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

101
build/utils.js Normal file
View File

@ -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')
})
}
}

22
build/vue-loader.conf.js Normal file
View File

@ -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'
}
}

View File

@ -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'
}
}

95
build/webpack.dev.conf.js Normal file
View File

@ -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)
}
})
})

145
build/webpack.prod.conf.js Normal file
View File

@ -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

7
config/dev.env.js Normal file
View File

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

69
config/index.js Normal file
View File

@ -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
}
}

4
config/prod.env.js Normal file
View File

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

View File

@ -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;
}

View File

@ -1,230 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>electron-banpai</title>
</head>
<body>
<div id="app">
<div class="header-box">
<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>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

25747
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

63
package.json Normal file
View File

@ -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"
]
}

15
src/App.vue Normal file
View File

@ -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>

View File

Before

Width:  |  Height:  |  Size: 488 KiB

After

Width:  |  Height:  |  Size: 488 KiB

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

Before

Width:  |  Height:  |  Size: 380 B

After

Width:  |  Height:  |  Size: 380 B

View File

Before

Width:  |  Height:  |  Size: 459 B

After

Width:  |  Height:  |  Size: 459 B

View File

Before

Width:  |  Height:  |  Size: 531 B

After

Width:  |  Height:  |  Size: 531 B

View File

Before

Width:  |  Height:  |  Size: 465 B

After

Width:  |  Height:  |  Size: 465 B

View File

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

Before

Width:  |  Height:  |  Size: 684 KiB

After

Width:  |  Height:  |  Size: 684 KiB

View File

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

523
src/assets/css/electron.css Normal file
View File

@ -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;
}
}

View File

Before

Width:  |  Height:  |  Size: 83 KiB

After

Width:  |  Height:  |  Size: 83 KiB

View File

Before

Width:  |  Height:  |  Size: 473 KiB

After

Width:  |  Height:  |  Size: 473 KiB

View File

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 74 KiB

View File

Before

Width:  |  Height:  |  Size: 530 B

After

Width:  |  Height:  |  Size: 530 B

View File

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

View File

Before

Width:  |  Height:  |  Size: 661 B

After

Width:  |  Height:  |  Size: 661 B

View File

Before

Width:  |  Height:  |  Size: 851 B

After

Width:  |  Height:  |  Size: 851 B

View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

View File

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
src/assets/home/slices.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 732 B

View File

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Before

Width:  |  Height:  |  Size: 471 KiB

After

Width:  |  Height:  |  Size: 471 KiB

View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

Before

Width:  |  Height:  |  Size: 454 B

After

Width:  |  Height:  |  Size: 454 B

View File

Before

Width:  |  Height:  |  Size: 328 B

After

Width:  |  Height:  |  Size: 328 B

View File

Before

Width:  |  Height:  |  Size: 439 B

After

Width:  |  Height:  |  Size: 439 B

View File

Before

Width:  |  Height:  |  Size: 495 B

After

Width:  |  Height:  |  Size: 495 B

View File

Before

Width:  |  Height:  |  Size: 518 B

After

Width:  |  Height:  |  Size: 518 B

View File

Before

Width:  |  Height:  |  Size: 512 B

After

Width:  |  Height:  |  Size: 512 B

View File

Before

Width:  |  Height:  |  Size: 496 B

After

Width:  |  Height:  |  Size: 496 B

BIN
src/assets/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

Before

Width:  |  Height:  |  Size: 413 KiB

After

Width:  |  Height:  |  Size: 413 KiB

View File

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -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>

View File

@ -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>

View File

@ -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>

200
src/components/header.vue Normal file
View File

@ -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>

255
src/components/homepage.vue Normal file
View File

@ -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: '0830 - 0850',
content: '晨检,晨间活动晨间活动晨间活动晨间活动晨间活动晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
]
},
{
title: '中午',
children: [{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
]
},
{
title: '下午',
children: [{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
content: '晨检,晨间活动'
},
{
time: '0830 - 0850',
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>

View File

@ -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>

View File

@ -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 />
坚持满足36岁接受全日制学前教育为主的原则<br />
保证36岁幼儿接受学前教育满足入园要求
按照相关要求设定班级数<br />
2018年秋季学期将面向西区招生共开设7个班
</div>
</div>
</template>
<script>
export default {
name: 'newsInformation',
data() {
return {
}
},
methods: {
},
mounted() {
}
}
</script>
<style>
</style>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

6
src/config.js Normal file
View File

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

19
src/main.js Normal file
View File

@ -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/>'
})

14
src/router/index.js Normal file
View File

@ -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
}]
})

44
src/utils/request.js Normal file
View File

@ -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

0
static/.gitkeep Normal file
View File