add

08335 / hivui-platform-template

hivui平台项目模板

Browse code add master
1 parent ee03c3a commit 9707c6324b5bcad8a8e5f40bbe7361b07e6409fc caibinghong authored on 20 Jan 2022

Showing 10 changed files

Ignore Space Show notes View build/bin/oper.sh
#!/bin/bash ## 权限问题，用 chmod u+x .sh ## eg: oper.sh # 用户名 # 项目名 # 操作（create , restart , start , kill , stop , del , build , sync） # 部署路径 (upload) # 同步内容（node_modules , build , cli ） ip=`ifconfig -a\|grep inet\|grep -v 127.0.0.1\|grep -v inet6\|awk '{print $2}'\|tr -d "addr:"` tagIp="192.168.4.193" if [[ $ip == $tagIp* ]]; then DEV_BASE_API='http://192.168.4.106:7777/' #传给配置 .env.development 的 VITE_APP_BASE_API 做后端请求数据 else DEV_BASE_API='http://e5.hieap.cn/' #传给配置 .env.development 的 VITE_APP_BASE_API 做后端请求数据 fi cmdDir=$( cd $(dirname "$0") pwd ) username=$1 #用户名 projectName=$2 #项目名 cmd=$3 #命令 #BASH_SOURCE[0]用户所在的目录到脚本的路径 ## 获取eap5.0 路径 # eap5Dir="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )" eap5Dir="${cmdDir%/hiruntime}" projectPath=${eap5Dir}/desktop/preview tmpPath=${eap5Dir}/hiruntime/project/desktop/project-template source[0]='\t<% if(htmlWebpackPlugin.vite){%>\n\t<!--预览时公共库-->' source[1]='\n\t<script src="\/'${projectName}'\/setting\/desktop\/development.js" type="text\/javascript"><\/script>' source[2]='\n\t<%}%>' source[3]='\n\t<% if(!htmlWebpackPlugin.vite){%>\n\t<!--发布时公共库-->' source[4]='\n\t<script src="\/${serverName}\/render\/'${username}'\/'${projectName}'\/setting\/desktop\/appsetting.js" type="text\/javascript"><\/script>' source[5]='\n\t<%}%>\n' viteStr[0]='let socketHost = `${__HMR_HOSTNAME__ \|\| location.hostname}:${__HMR_PORT__}`;' viteStr[1]='let socketHostSplit = socketHost.split(".");' viteStr[2]='if(isNaN(parseInt(socketHostSplit[0]))){socketHost = socketHost.substring(0,socketHost.indexOf(":"));}' viteNoReload='return;'; nrm del zhc nrm add zhc http://npm.hieap.cn/ nrm use zhc case $cmd in "create") #创建 #参数个数判断，至少4个 if [ $# -lt 4 ];then echo "创建项目命令参数不对：$" echo "创建项目命令正确参数：用户名项目名 create 桌面预览端口" exit 1 fi # source ${cmdDir}/var_env.sh # echo ${DEV_BASE_API} echo eap5Dir: ${eap5Dir} echo projectPath: ${projectPath} port=$4 #端口 if [ ! -d "${projectPath}/${username}" ];then mkdir "${projectPath}/${username}" #创用户工作空间 fi if [ -d "${projectPath}/${username}/${projectName}" ];then echo "项目名已经存在！" exit 1 fi echo "<1>git正在拉取web端项目基础文件" git clone http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template.git "${projectPath}/${username}/${projectName}/deploy" echo "<2>初始化node环境..." cp -rf ${tmpPath}/node_modules ${projectPath}/${username}/${projectName}/deploy/node_modules cd ${projectPath}/${username}/${projectName}/deploy/ rm -rf ./build/bin rm -rf ./build/doc.txt echo "<3>初始化相关配置..." ## 修改模板，重命项目名 mv project ${projectName} sed -i 's#\(VITE_APP_USERPATH \?= \?\).#\1'"/e5/render/${username}"'#g' .env.production sed -i 's#\(VITE_APP_PN \?= \?\).#\1'"${projectName}/${username}"'#g' ${projectPath}/${username}/${projectName}/deploy/.env.development sed -i 's#\(VITE_APP_BASE_API \?= \?\).#\1'"${DEV_BASE_API}"'#g' .env.development ## 替换 package.json 的 name 值 author值，打包时候输出静态地址是这个 sed -i 's#\("name": \?"\).#\1'"${projectName}"'",#g' package.json sed -i 's#\("author": \?"\).#\1'"${username}"'",#g' package.json ## 替换 processes.json 的 args 值 sed -i '4s#\("name": \?"\).#\1'"vite-${username}-${projectName}"'",#g' processes.json sed -i '7s#\("args": \?"\).#\1'"--host --port ${port}"'",#g' processes.json cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/hivuiLogin sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/hivuiMain sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/setting/desktop/appsetting/js/1.0.0 sed -i 's#\(projectName \?= \?\).#\1"'"${projectName}"'";#g' appsetting.js echo "<4>配置Nginx环境" echo "<5>正在启动服务..." cd ${projectPath}/${username}/${projectName}/deploy/ npm run pm2:start pm2 save exit 1 ;; "delete") #删除 #参数个数判断，至少3个 if [ $# -lt 3 ];then echo "删除项目命令参数不对：$" echo "删除项目命令正确参数：用户名项目名 delete" exit 1 fi if [ $username = "admin" -a $projectName = "systpl" ] ; then echo "系统模板，不可删除！" exit 1 fi curPid=`pm2 pid vite-${username}-${projectName}` if [ ! -z "$curPid" ];then echo "vite-${username}-${projectName} 正在关闭服务..." pm2 delete "vite-${username}-${projectName}" fi ### 删除用户项目 rm -rf ${projectPath}/${username}/${projectName} echo "用户：${username} 项目：${projectName} 删除成功！" pm2 save exit 1 ;; "restart") #重启 echo "》》》正在重启服务..." curPid=`pm2 pid vite-${username}-${projectName}` if [ ! -z "$curPid" ];then echo "vite-${username}-${projectName} 正在关闭服务..." pm2 delete "vite-${username}-${projectName}" fi cd ${projectPath}/${username}/${projectName}/deploy/ npm run rm:vite npm run pm2:start pm2 save echo "已经重启服务！！" exit 1 ;; "build") #编译 uploadPath=$4 modules=$5 #参数个数判断，至少3个 # if [ $# -lt 4 ];then # echo "编译项目命令参数不对：$" # echo "编译项目命令正确参数：用户名项目名 build 上传服务器路径 [指定编译模块]" # exit 1 # fi ### 用pm2管理，用pm2 重启指定的 cd "${projectPath}/${username}/${projectName}/deploy" npm run build $modules #yarn run pm2:stop vite-${username}-${projectName} cd "${projectPath}/${username}/${projectName}/deploy/" if [[ ! -d "${projectPath}/${username}/${projectName}/deploy/dist/yslz/funclib/desklib" ]]; then mkdir -p "${projectPath}/${username}/${projectName}/deploy/dist/yslz/funclib/desklib" fi cp -rf "${projectPath}/${username}/${projectName}/deploy/yslz/funclib/desklib" "${projectPath}/${username}/${projectName}/deploy/dist/yslz/funclib/" ## 删除之前打包文件 rm -rf "${username}_${projectName}_dist.zip" cd "${projectPath}/${username}/${projectName}/deploy/dist" mkdir -p "${projectPath}/${username}/${projectName}/deploy/dist/${username}/${projectName}" cp -rf "${projectPath}/${username}/${projectName}/deploy/dist/${projectName}" "${projectPath}/${username}/${projectName}/deploy/dist/${username}/" rm -rf "${projectPath}/${username}/${projectName}/deploy/dist/${projectName}" zip -q -r "${username}_${projectName}_dist.zip" ./* cp -rf "${projectPath}/${username}/${projectName}/deploy/dist/${username}_${projectName}_dist.zip" "${projectPath}/${username}/${projectName}/deploy/" cd ${projectPath}/${username}/${projectName}/deploy/ if [ -z "$uploadPath" ]; then echo '未传服务器路径，请自行拷贝！' exit 1; fi if [[ ! -d "$uploadPath" ]]; then echo "编译命令：上传文件夹不存在, 正在帮您创建目录..." mkdir -p "${uploadPath}" fi echo "正在拷到服务器目录：${uploadPath}" # cp -f "${username}_${projectName}_dist.zip" "${uploadPath}" cp -fv "${username}_${projectName}_dist.zip" "${uploadPath}" echo "(‐^▽^‐) 编译打包成功！" ;; "sync") #同步环境 #参数个数判断，至少4个 if [ $# -lt 4 ];then echo "同步项目命令参数不对：$" echo "同步项目命令正确参数：用户名项目名 sync 同步方式" exit 1 fi way=$4 if [ $way = 'sysfunc' ];then #同步系统功能 echo "》》》同步系统功能..." git clone http://192.168.4.105:8080/gitbucket/git/js-team2/zhc-birt-platf.git ${eap5Dir}/hiruntime/project/desktop/__zhc-birt-platf rm -rf ${eap5Dir}/hiruntime/project/desktop/zhc-birt-platf cp -rf ${eap5Dir}/hiruntime/project/desktop/__zhc-birt-platf/project/ ${eap5Dir}/hiruntime/workspace/${username}/${projectName}/ rm -rf ${eap5Dir}/hiruntime/project/desktop/__zhc-birt-platf echo "》》》系统功能已同步！" exit; fi git clone http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template.git ${eap5Dir}/hiruntime/project/desktop/__gittmp ## rsync ${eap5Dir}/hiruntime/project/desktop/__gittmp ${tmpPath} rm -rf ${eap5Dir}/hiruntime/project/desktop/project-template cp -rf ${eap5Dir}/hiruntime/project/desktop/__gittmp ${eap5Dir}/hiruntime/project/desktop/project-template rm -rf ${eap5Dir}/hiruntime/project/desktop/__gittmp case $way in "build") #同步打包环境 echo "》》》正在同步打包环境..." rsync -auz ${tmpPath}/build ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/babel.config.js ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/.postcssrc.js ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/.browserslistrc ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/vite-plugin ${projectPath}/${username}/${projectName}/deploy/ echo "》》》打包环境已同步！" exit 1 ;; "hiui") #同步hiui资源库 echo "》》》正在同步hi-ui库..." cd "${tmpPath}/" npm i hi-ui -S rm -rf ${projectPath}/${username}/${projectName}/deploy/node_modules/hi-ui rsync -auz ${tmpPath}/node_modules/hi-ui ${projectPath}/${username}/${projectName}/deploy/node_modules/ ## 取hi-ui版本并更新root package.json ## cd ${projectPath}/${username}/${projectName}/deploy/node_modules/hi-ui/ ## sed -i 's#\("name": \?"\).#\1'"${projectName}"'",#g' package.json echo "hiui已同步！" ;; "taskcenter") #同步环境 echo "》》》正在同步任务中心..." cd "${tmpPath}/" npm i hi-taskcenter -S rm -rf ${projectPath}/${username}/${projectName}/deploy/node_modules/hi-taskcenter rsync -auz ${tmpPath}/node_modules/hi-taskcenter ${projectPath}/${username}/${projectName}/deploy/node_modules/ ## 取hi-taskcenter版本并更新root package.json ## cd ${projectPath}/${username}/${projectName}/deploy/node_modules/hi-taskcenter/ ## sed -i 's#\("name": \?"\).#\1'"${projectName}"'",#g' package.json echo "任务中心已同步！" ;; "cli") #程序环境 rsync -auz ${tmpPath}/assets_platform ${projectPath}/${username}/${projectName}/deploy/ echo "》》》静态共用库已同步！" rsync -auz ${tmpPath}/project/hivuiLogin ${projectPath}/${username}/${projectName}/deploy/${projectName}/ cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/hivuiLogin sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html echo "》》》登录模板已同步！" rsync -auz ${tmpPath}/project/hivuiMain ${projectPath}/${username}/${projectName}/deploy/${projectName}/ cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/hivuiMain sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html echo "》》》主页模板已同步！" cd "${tmpPath}/" npm i rsync -auz ${tmpPath}/node_modules ${projectPath}/${username}/${projectName}/deploy/ echo "》》》node环境已同步！" cd "${tmpPath}/" npm i hi-ui -S rm -rf ${projectPath}/${username}/${projectName}/deploy/node_modules/hi-ui rsync -auz ${tmpPath}/node_modules/hi-ui ${projectPath}/${username}/${projectName}/deploy/node_modules/ echo "》》》hi-ui库已同步！" rsync -auz ${tmpPath}/build ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/babel.config.js ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/.postcssrc.js ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/.browserslistrc ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/vite-plugin ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/.env.development ${projectPath}/${username}/${projectName}/deploy/.env.development rsync -auz ${tmpPath}/.env.production ${projectPath}/${username}/${projectName}/deploy/.env.production rsync -auz ${tmpPath}/.env.staging ${projectPath}/${username}/${projectName}/deploy/.env.staging rsync -auz ${tmpPath}/vite.config.js ${projectPath}/${username}/${projectName}/deploy/vite.config.js echo "》》》已同步程序环境(build、babel.config.js、.postcssrc.js、.browserslistrc、vite-plugin、.env.development、.env.production、.env.staging、vite.config.js)..." # source ${cmdDir}/var_env.sh ### 设置环境变量 sed -i 's#\(VITE_APP_USERPATH \?= \?\).#\1'"/e5/render/${username}"'#g' .env.production sed -i 's#\(VITE_APP_BASE_API \?= \?\).#\1'"${DEV_BASE_API}"'#g' ${projectPath}/${username}/${projectName}/deploy/.env.development sed -i 's#\(VITE_APP_PN \?= \?\).#\1'"${projectName}/${username}"'#g' ${projectPath}/${username}/${projectName}/deploy/.env.development sed -i 's#\(VITE_APP_PN \?= \?\).#\1'"${projectName}/${username}"'#g' ${projectPath}/${username}/${projectName}/deploy/.env.staging ### node_modules/vite 环境 cd ${projectPath}/${username}/${projectName}/deploy/node_modules/vite/dist/client # sed 's/要替换的内容/新的内容/' # 将所有的数字替换成内容 # sed 's/[0-9]/好的/g' testFile2.txt #sed 's/case.?\'update\':/case update:return;/g' echo "》》》程序环境已同步！" ;; esac rsync -auz ${tmpPath}/package.json ${projectPath}/${username}/${projectName}/deploy/package.json cd ${projectPath}/${username}/${projectName}/deploy/ ## 替换 package.json 的 name 值 sed -i 's#\("name": \?"\).#\1'"${projectName}"'",#g' package.json sed -i 's#\("author": \?"\).#\1'"${username}"'",#g' package.json echo "》》》正在重启服务..." pm2 delete "vite-${username}-${projectName}" npm run rm:vite npm run pm2:start pm2 save echo "》》》已经重启服务！！" ;; esac #!/bin/bash ## 权限问题，用 chmod u+x .sh ## eg: oper.sh # 用户名 # 项目名 # 操作（create , restart , start , kill , stop , del , build , sync） # 部署路径 (upload) # 同步内容（node_modules , build , cli ） ip=`ifconfig -a\|grep inet\|grep -v 127.0.0.1\|grep -v inet6\|awk '{print $2}'\|tr -d "addr:"` tagIp="192.168.4.193" if [[ $ip == $tagIp* ]]; then DEV_BASE_API='http://192.168.4.106:7777/' #传给配置 .env.development 的 VITE_APP_BASE_API 做后端请求数据 else DEV_BASE_API='http://e5.hieap.cn/' #传给配置 .env.development 的 VITE_APP_BASE_API 做后端请求数据 fi cmdDir=$( cd $(dirname "$0") pwd ) username=$1 #用户名 projectName=$2 #项目名 cmd=$3 #命令 #BASH_SOURCE[0]用户所在的目录到脚本的路径 ## 获取eap5.0 路径 # eap5Dir="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )" eap5Dir="${cmdDir%/hiruntime}" projectPath=${eap5Dir}/desktop/preview tmpPath=${eap5Dir}/hiruntime/project/desktop/project-template source[0]='\t<% if(htmlWebpackPlugin.vite){%>\n\t<!--预览时公共库-->' source[1]='\n\t<script src="\/'${projectName}'\/setting\/desktop\/development.js" type="text\/javascript"><\/script>' source[2]='\n\t<%}%>' source[3]='\n\t<% if(!htmlWebpackPlugin.vite){%>\n\t<!--发布时公共库-->' source[4]='\n\t<script src="\/${serverName}\/render\/'${username}'\/'${projectName}'\/setting\/desktop\/appsetting.js" type="text\/javascript"><\/script>' source[5]='\n\t<%}%>\n' nrm del zhc nrm add zhc http://npm.hieap.cn/ nrm use zhc case $cmd in "create") #创建 #参数个数判断，至少4个 if [ $# -lt 4 ];then echo "创建项目命令参数不对：$" echo "创建项目命令正确参数：用户名项目名 create 桌面预览端口" exit 1 fi # source ${cmdDir}/var_env.sh # echo ${DEV_BASE_API} echo eap5Dir: ${eap5Dir} echo projectPath: ${projectPath} port=$4 #端口 if [ ! -d "${projectPath}/${username}" ];then mkdir "${projectPath}/${username}" #创用户工作空间 fi if [ -d "${projectPath}/${username}/${projectName}" ];then echo "项目名已经存在！" exit 1 fi echo "<1>git正在拉取web端项目基础文件" git clone http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template.git "${projectPath}/${username}/${projectName}/deploy" echo "<2>初始化node环境..." cp -rf ${tmpPath}/node_modules ${projectPath}/${username}/${projectName}/deploy/node_modules cd ${projectPath}/${username}/${projectName}/deploy/ rm -rf ./build/bin rm -rf ./build/doc.txt echo "<3>初始化相关配置..." ## 修改模板，重命项目名 mv project ${projectName} sed -i 's#\(VITE_APP_USERPATH \?= \?\).#\1'"/e5/render/${username}"'#g' .env.production sed -i 's#\(VITE_APP_PN \?= \?\).#\1'"${projectName}/${username}"'#g' ${projectPath}/${username}/${projectName}/deploy/.env.development sed -i 's#\(VITE_APP_BASE_API \?= \?\).#\1'"${DEV_BASE_API}"'#g' .env.development ## 替换 package.json 的 name 值 author值，打包时候输出静态地址是这个 sed -i 's#\("name": \?"\).#\1'"${projectName}"'",#g' package.json sed -i 's#\("author": \?"\).#\1'"${username}"'",#g' package.json ## 替换 processes.json 的 args 值 sed -i '4s#\("name": \?"\).#\1'"vite-${username}-${projectName}"'",#g' processes.json sed -i '7s#\("args": \?"\).#\1'"--host --port ${port}"'",#g' processes.json cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/hivuiLogin sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/hivuiMain sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/setting/desktop/appsetting/js/1.0.0 sed -i 's#\(projectName \?= \?\).#\1"'"${projectName}"'";#g' appsetting.js echo "<4>配置Nginx环境" echo "<5>正在启动服务..." cd ${projectPath}/${username}/${projectName}/deploy/ npm run pm2:start pm2 save exit 1 ;; "delete") #删除 #参数个数判断，至少3个 if [ $# -lt 3 ];then echo "删除项目命令参数不对：$" echo "删除项目命令正确参数：用户名项目名 delete" exit 1 fi if [ $username = "admin" -a $projectName = "systpl" ] ; then echo "系统模板，不可删除！" exit 1 fi curPid=`pm2 pid vite-${username}-${projectName}` if [ ! -z "$curPid" ];then echo "vite-${username}-${projectName} 正在关闭服务..." pm2 delete "vite-${username}-${projectName}" fi ### 删除用户项目 rm -rf ${projectPath}/${username}/${projectName} echo "用户：${username} 项目：${projectName} 删除成功！" pm2 save exit 1 ;; "restart") #重启 echo "》》》正在重启服务..." curPid=`pm2 pid vite-${username}-${projectName}` if [ ! -z "$curPid" ];then echo "vite-${username}-${projectName} 正在关闭服务..." pm2 delete "vite-${username}-${projectName}" fi cd ${projectPath}/${username}/${projectName}/deploy/ npm run rm:vite npm run pm2:start pm2 save echo "已经重启服务！！" exit 1 ;; "build") #编译 uploadPath=$4 modules=$5 #参数个数判断，至少3个 # if [ $# -lt 4 ];then # echo "编译项目命令参数不对：$" # echo "编译项目命令正确参数：用户名项目名 build 上传服务器路径 [指定编译模块]" # exit 1 # fi ### 用pm2管理，用pm2 重启指定的 cd "${projectPath}/${username}/${projectName}/deploy" npm run build $modules #yarn run pm2:stop vite-${username}-${projectName} cd "${projectPath}/${username}/${projectName}/deploy/" if [[ ! -d "${projectPath}/${username}/${projectName}/deploy/dist/yslz/funclib/desklib" ]]; then mkdir -p "${projectPath}/${username}/${projectName}/deploy/dist/yslz/funclib/desklib" fi cp -rf "${projectPath}/${username}/${projectName}/deploy/yslz/funclib/desklib" "${projectPath}/${username}/${projectName}/deploy/dist/yslz/funclib/" ## 删除之前打包文件 rm -rf "${username}_${projectName}_dist.zip" cd "${projectPath}/${username}/${projectName}/deploy/dist" mkdir -p "${projectPath}/${username}/${projectName}/deploy/dist/${username}/${projectName}" cp -rf "${projectPath}/${username}/${projectName}/deploy/dist/${projectName}" "${projectPath}/${username}/${projectName}/deploy/dist/${username}/" rm -rf "${projectPath}/${username}/${projectName}/deploy/dist/${projectName}" zip -q -r "${username}_${projectName}_dist.zip" ./* cp -rf "${projectPath}/${username}/${projectName}/deploy/dist/${username}_${projectName}_dist.zip" "${projectPath}/${username}/${projectName}/deploy/" cd ${projectPath}/${username}/${projectName}/deploy/ if [ -z "$uploadPath" ]; then echo '未传服务器路径，请自行拷贝！' exit 1; fi if [[ ! -d "$uploadPath" ]]; then echo "编译命令：上传文件夹不存在, 正在帮您创建目录..." mkdir -p "${uploadPath}" fi echo "正在拷到服务器目录：${uploadPath}" # cp -f "${username}_${projectName}_dist.zip" "${uploadPath}" cp -fv "${username}_${projectName}_dist.zip" "${uploadPath}" echo "(‐^▽^‐) 编译打包成功！" ;; "sync") #同步环境 #参数个数判断，至少4个 if [ $# -lt 4 ];then echo "同步项目命令参数不对：$" echo "同步项目命令正确参数：用户名项目名 sync 同步方式" exit 1 fi way=$4 if [ $way = 'sysfunc' ];then #同步系统功能 echo "》》》同步系统功能..." git clone http://192.168.4.105:8080/gitbucket/git/js-team2/zhc-birt-platf.git ${eap5Dir}/hiruntime/project/desktop/__zhc-birt-platf rm -rf ${eap5Dir}/hiruntime/project/desktop/zhc-birt-platf cp -rf ${eap5Dir}/hiruntime/project/desktop/__zhc-birt-platf/project/ ${eap5Dir}/hiruntime/workspace/${username}/${projectName}/ rm -rf ${eap5Dir}/hiruntime/project/desktop/__zhc-birt-platf echo "》》》系统功能已同步！" exit; fi git clone http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template.git ${eap5Dir}/hiruntime/project/desktop/__gittmp ## rsync ${eap5Dir}/hiruntime/project/desktop/__gittmp ${tmpPath} rm -rf ${eap5Dir}/hiruntime/project/desktop/project-template cp -rf ${eap5Dir}/hiruntime/project/desktop/__gittmp ${eap5Dir}/hiruntime/project/desktop/project-template rm -rf ${eap5Dir}/hiruntime/project/desktop/__gittmp case $way in "build") #同步打包环境 echo "》》》正在同步打包环境..." rsync -auz ${tmpPath}/build ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/babel.config.js ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/.postcssrc.js ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/.browserslistrc ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/vite-plugin ${projectPath}/${username}/${projectName}/deploy/ echo "》》》打包环境已同步！" exit 1 ;; "hiui") #同步hiui资源库 echo "》》》正在同步hi-ui库..." cd "${tmpPath}/" npm i hi-ui -S rm -rf ${projectPath}/${username}/${projectName}/deploy/node_modules/hi-ui rsync -auz ${tmpPath}/node_modules/hi-ui ${projectPath}/${username}/${projectName}/deploy/node_modules/ ## 取hi-ui版本并更新root package.json ## cd ${projectPath}/${username}/${projectName}/deploy/node_modules/hi-ui/ ## sed -i 's#\("name": \?"\).#\1'"${projectName}"'",#g' package.json echo "hiui已同步！" ;; "taskcenter") #同步环境 echo "》》》正在同步任务中心..." cd "${tmpPath}/" npm i hi-taskcenter -S rm -rf ${projectPath}/${username}/${projectName}/deploy/node_modules/hi-taskcenter rsync -auz ${tmpPath}/node_modules/hi-taskcenter ${projectPath}/${username}/${projectName}/deploy/node_modules/ ## 取hi-taskcenter版本并更新root package.json ## cd ${projectPath}/${username}/${projectName}/deploy/node_modules/hi-taskcenter/ ## sed -i 's#\("name": \?"\).#\1'"${projectName}"'",#g' package.json echo "任务中心已同步！" ;; "cli") #程序环境 rsync -auz ${tmpPath}/assets_platform ${projectPath}/${username}/${projectName}/deploy/ echo "》》》静态共用库已同步！" # rsync -auz ${tmpPath}/funclib ${projectPath}/${username}/${projectName}/deploy/ # echo "》》》项目funclib资源已同步！" rsync -auz ${tmpPath}/project/hivuiLogin ${projectPath}/${username}/${projectName}/deploy/${projectName}/ cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/hivuiLogin sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html echo "》》》登录模板已同步！" rsync -auz ${tmpPath}/project/hivuiMain ${projectPath}/${username}/${projectName}/deploy/${projectName}/ cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/hivuiMain sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html echo "》》》主页模板已同步！" cd "${tmpPath}/" npm i rsync -auz ${tmpPath}/node_modules ${projectPath}/${username}/${projectName}/deploy/ echo "》》》node环境已同步！" cd "${tmpPath}/" npm i hi-ui -S rm -rf ${projectPath}/${username}/${projectName}/deploy/node_modules/hi-ui rsync -auz ${tmpPath}/node_modules/hi-ui ${projectPath}/${username}/${projectName}/deploy/node_modules/ echo "》》》hi-ui库已同步！" rsync -auz ${tmpPath}/build ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/babel.config.js ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/.postcssrc.js ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/.browserslistrc ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/vite-plugin ${projectPath}/${username}/${projectName}/deploy/ rsync -auz ${tmpPath}/.env.development ${projectPath}/${username}/${projectName}/deploy/.env.development rsync -auz ${tmpPath}/.env.production ${projectPath}/${username}/${projectName}/deploy/.env.production rsync -auz ${tmpPath}/.env.staging ${projectPath}/${username}/${projectName}/deploy/.env.staging rsync -auz ${tmpPath}/vite.config.js ${projectPath}/${username}/${projectName}/deploy/vite.config.js echo "》》》已同步程序环境(build、babel.config.js、.postcssrc.js、.browserslistrc、vite-plugin、.env.development、.env.production、.env.staging、vite.config.js)..." # source ${cmdDir}/var_env.sh ### 设置环境变量 sed -i 's#\(VITE_APP_USERPATH \?= \?\).#\1'"/e5/render/${username}"'#g' .env.production sed -i 's#\(VITE_APP_BASE_API \?= \?\).#\1'"${DEV_BASE_API}"'#g' ${projectPath}/${username}/${projectName}/deploy/.env.development sed -i 's#\(VITE_APP_PN \?= \?\).#\1'"${projectName}/${username}"'#g' ${projectPath}/${username}/${projectName}/deploy/.env.development sed -i 's#\(VITE_APP_PN \?= \?\).#\1'"${projectName}/${username}"'#g' ${projectPath}/${username}/${projectName}/deploy/.env.staging echo "》》》程序环境已同步！" ;; esac rsync -auz ${tmpPath}/package.json ${projectPath}/${username}/${projectName}/deploy/package.json cd ${projectPath}/${username}/${projectName}/deploy/ ## 替换 package.json 的 name 值 sed -i 's#\("name": \?"\).#\1'"${projectName}"'",#g' package.json sed -i 's#\("author": \?"\).#\1'"${username}"'",#g' package.json echo "》》》正在重启服务..." pm2 delete "vite-${username}-${projectName}" npm run rm:vite npm run pm2:start pm2 save echo "》》》已经重启服务！！" ;; esac

Ignore Space Show notes View

build/bin/oper.sh

#!/bin/bash
## 权限问题，用  chmod u+x *.sh
## eg: oper.sh

# 用户名  
# 项目名 
# 操作 （create , restart , start , kill ,  stop , del , build , sync）
# 部署路径 (upload)
# 同步内容（node_modules , build , cli  ）

ip=`ifconfig -a|grep inet|grep -v 127.0.0.1|grep -v inet6|awk '{print $2}'|tr -d "addr:"`
tagIp="192.168.4.193"
if [[ $ip == *$tagIp* ]]; then
	DEV_BASE_API='http://192.168.4.106:7777/' #传给配置 .env.development 的 VITE_APP_BASE_API 做后端请求数据
else
	DEV_BASE_API='http://e5.hieap.cn/' #传给配置 .env.development 的 VITE_APP_BASE_API 做后端请求数据
fi

cmdDir=$(
  cd $(dirname "$0")
  pwd
)
username=$1     #用户名
projectName=$2  #项目名
cmd=$3          #命令

#BASH_SOURCE[0]用户所在的目录到脚本的路径
## 获取eap5.0 路径
# eap5Dir="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
eap5Dir="${cmdDir%/hiruntime*}"
projectPath=${eap5Dir}/desktop/preview
tmpPath=${eap5Dir}/hiruntime/project/desktop/project-template

source[0]='\t<% if(htmlWebpackPlugin.vite){%>\n\t'
source[1]='\n\t<script src="\/'${projectName}'\/setting\/desktop\/development.js" type="text\/javascript"><\/script>'
source[2]='\n\t<%}%>'
source[3]='\n\t<% if(!htmlWebpackPlugin.vite){%>\n\t'
source[4]='\n\t<script src="\/${serverName}\/render\/'${username}'\/'${projectName}'\/setting\/desktop\/appsetting.js" type="text\/javascript"><\/script>'
source[5]='\n\t<%}%>\n'

viteStr[0]='let socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`;'
viteStr[1]='let socketHostSplit = socketHost.split(".");'
viteStr[2]='if(isNaN(parseInt(socketHostSplit[0]))){socketHost = socketHost.substring(0,socketHost.indexOf(":"));}'
viteNoReload='return;';

nrm del zhc
nrm add zhc  http://npm.hieap.cn/
nrm use zhc

case $cmd in 
"create") #创建
    #参数个数判断，至少4个
    if [ $# -lt 4 ];then
        echo "创建项目命令参数不对：$*"
        echo "创建项目命令正确参数：用户名 项目名 create 桌面预览端口"
        exit 1
    fi
    # source ${cmdDir}/var_env.sh
    # echo ${DEV_BASE_API} 
    echo eap5Dir: ${eap5Dir}
    echo projectPath: ${projectPath}
    port=$4 #端口
    
    if [ ! -d "${projectPath}/${username}" ];then
        mkdir "${projectPath}/${username}" #创用户工作空间
    fi
    if [ -d "${projectPath}/${username}/${projectName}" ];then
        echo "项目名已经存在！"
        exit 1
    fi
    echo "<1>git正在拉取web端项目基础文件"
    git clone http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template.git "${projectPath}/${username}/${projectName}/deploy"

echo "<2>初始化node环境..."
    cp -rf ${tmpPath}/node_modules ${projectPath}/${username}/${projectName}/deploy/node_modules
    cd ${projectPath}/${username}/${projectName}/deploy/
    rm -rf ./build/bin
    rm -rf ./build/doc.txt

echo "<3>初始化相关配置..."
    ## 修改模板，重命项目名
    mv project ${projectName}
    sed -i 's#$VITE_APP_USERPATH \?= \?$.*#\1'"/e5/render/${username}"'#g' .env.production
    sed -i 's#$VITE_APP_PN \?= \?$.*#\1'"${projectName}/${username}"'#g' ${projectPath}/${username}/${projectName}/deploy/.env.development
    sed -i 's#$VITE_APP_BASE_API \?= \?$.*#\1'"${DEV_BASE_API}"'#g' .env.development

## 替换 package.json 的 name 值 author值 ，打包时候输出静态地址是这个
    sed -i 's#$"name": \?"$.*#\1'"${projectName}"'",#g' package.json
    sed -i 's#$"author": \?"$.*#\1'"${username}"'",#g' package.json
    ## 替换 processes.json 的 args 值
    sed -i '4s#$"name": \?"$.*#\1'"vite-${username}-${projectName}"'",#g' processes.json
    sed -i '7s#$"args": \?"$.*#\1'"--host --port ${port}"'",#g' processes.json

cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/hivuiLogin
    sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html

cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/hivuiMain
    sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html

cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/setting/desktop/appsetting/js/1.0.0
    sed -i 's#$projectName \?= \?$.*#\1"'"${projectName}"'";#g' appsetting.js

echo "<4>配置Nginx环境"

echo "<5>正在启动服务..."
    cd ${projectPath}/${username}/${projectName}/deploy/
    npm run pm2:start
    pm2 save
    exit 1
;;
"delete") #删除
    #参数个数判断，至少3个
    if [ $# -lt 3 ];then
        echo "删除项目命令参数不对：$*"
        echo "删除项目命令正确参数：用户名 项目名 delete"
        exit 1
    fi

if [ $username = "admin" -a $projectName = "systpl" ] ; then
        echo "系统模板，不可删除！"
        exit 1
    fi

curPid=`pm2 pid vite-${username}-${projectName}`
    if [ ! -z "$curPid" ];then
        echo "vite-${username}-${projectName} 正在关闭服务..."
        pm2 delete "vite-${username}-${projectName}" 
    fi

### 删除用户项目
    rm -rf ${projectPath}/${username}/${projectName}
    echo "用户：${username}  项目：${projectName}  删除成功！"
    pm2 save
    exit 1
;;
"restart") #重启
    echo "》》》正在重启服务..."
    curPid=`pm2 pid vite-${username}-${projectName}`
    if [ ! -z "$curPid" ];then
        echo "vite-${username}-${projectName} 正在关闭服务..."
        pm2 delete "vite-${username}-${projectName}" 
    fi
    cd ${projectPath}/${username}/${projectName}/deploy/
    npm run rm:vite
    npm run pm2:start
    pm2 save
    echo "已经重启服务！！"
    exit 1
;;
"build") #编译
    uploadPath=$4  
    modules=$5
    #参数个数判断，至少3个
    # if [ $# -lt 4 ];then
    #     echo "编译项目命令参数不对：$*"
    #     echo "编译项目命令正确参数：用户名 项目名 build 上传服务器路径 [指定编译模块]"
    #     exit 1
    # fi

### 用pm2管理，用pm2 重启指定的
    cd "${projectPath}/${username}/${projectName}/deploy"
    npm run build $modules
    #yarn run pm2:stop vite-${username}-${projectName}    
    cd "${projectPath}/${username}/${projectName}/deploy/"
    if [[ ! -d "${projectPath}/${username}/${projectName}/deploy/dist/yslz/funclib/desklib" ]]; then
        mkdir -p "${projectPath}/${username}/${projectName}/deploy/dist/yslz/funclib/desklib"
    fi
    cp -rf "${projectPath}/${username}/${projectName}/deploy/yslz/funclib/desklib" "${projectPath}/${username}/${projectName}/deploy/dist/yslz/funclib/"
  
    ## 删除之前打包文件 
    rm -rf "${username}_${projectName}_dist.zip"
    cd "${projectPath}/${username}/${projectName}/deploy/dist" 
    mkdir -p "${projectPath}/${username}/${projectName}/deploy/dist/${username}/${projectName}"
    cp -rf "${projectPath}/${username}/${projectName}/deploy/dist/${projectName}" "${projectPath}/${username}/${projectName}/deploy/dist/${username}/"
    rm -rf "${projectPath}/${username}/${projectName}/deploy/dist/${projectName}"
    zip -q -r "${username}_${projectName}_dist.zip"  ./*
    cp -rf "${projectPath}/${username}/${projectName}/deploy/dist/${username}_${projectName}_dist.zip" "${projectPath}/${username}/${projectName}/deploy/"
    cd ${projectPath}/${username}/${projectName}/deploy/

if [ -z "$uploadPath" ]; then
        echo '未传服务器路径，请自行拷贝！'
        exit 1;
    fi
    if [[ ! -d "$uploadPath" ]]; then
        echo "编译命令： 上传文件夹不存在, 正在帮您创建目录..."
        mkdir -p "${uploadPath}"
    fi
    echo "正在拷到服务器目录：${uploadPath}"
    # cp -f "${username}_${projectName}_dist.zip"  "${uploadPath}"
    cp -fv "${username}_${projectName}_dist.zip"  "${uploadPath}"

echo "(‐^▽^‐) 编译打包成功！"
;;
"sync") #同步环境
    #参数个数判断，至少4个
    if [ $# -lt 4 ];then
        echo "同步项目命令参数不对：$*"
        echo "同步项目命令正确参数：用户名 项目名 sync 同步方式"
        exit 1
    fi
    way=$4
    
    if [ $way = 'sysfunc' ];then  #同步系统功能      
        echo "》》》同步系统功能..."                                                   
        git clone http://192.168.4.105:8080/gitbucket/git/js-team2/zhc-birt-platf.git ${eap5Dir}/hiruntime/project/desktop/__zhc-birt-platf
        rm -rf ${eap5Dir}/hiruntime/project/desktop/zhc-birt-platf
        cp -rf ${eap5Dir}/hiruntime/project/desktop/__zhc-birt-platf/project/* ${eap5Dir}/hiruntime/workspace/${username}/${projectName}/
        rm -rf ${eap5Dir}/hiruntime/project/desktop/__zhc-birt-platf
        echo "》》》系统功能已同步！"   
        exit;
    fi

git clone http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template.git ${eap5Dir}/hiruntime/project/desktop/__gittmp
    ## rsync ${eap5Dir}/hiruntime/project/desktop/__gittmp ${tmpPath}
    rm -rf ${eap5Dir}/hiruntime/project/desktop/project-template
    cp -rf ${eap5Dir}/hiruntime/project/desktop/__gittmp ${eap5Dir}/hiruntime/project/desktop/project-template
    rm -rf ${eap5Dir}/hiruntime/project/desktop/__gittmp

case $way in 
    "build") #同步打包环境
        echo "》》》正在同步打包环境..."
        rsync -auz ${tmpPath}/build ${projectPath}/${username}/${projectName}/deploy/
        rsync -auz ${tmpPath}/babel.config.js ${projectPath}/${username}/${projectName}/deploy/
        rsync -auz ${tmpPath}/.postcssrc.js ${projectPath}/${username}/${projectName}/deploy/
        rsync -auz ${tmpPath}/.browserslistrc ${projectPath}/${username}/${projectName}/deploy/
        rsync -auz ${tmpPath}/vite-plugin ${projectPath}/${username}/${projectName}/deploy/
        echo "》》》打包环境已同步！"
        exit 1
    ;;
    "hiui") #同步hiui资源库
        echo "》》》正在同步hi-ui库..."
        cd "${tmpPath}/"
        npm i hi-ui -S
        rm -rf ${projectPath}/${username}/${projectName}/deploy/node_modules/hi-ui
        rsync -auz ${tmpPath}/node_modules/hi-ui ${projectPath}/${username}/${projectName}/deploy/node_modules/
        ## 取hi-ui版本 并更新root package.json
        ## cd ${projectPath}/${username}/${projectName}/deploy/node_modules/hi-ui/
        ## sed -i 's#$"name": \?"$.*#\1'"${projectName}"'",#g' package.json
        echo "hiui已同步！"
    ;;
    "taskcenter") #同步环境
        echo "》》》正在同步任务中心..."
        cd "${tmpPath}/"
        npm i hi-taskcenter -S
        rm -rf ${projectPath}/${username}/${projectName}/deploy/node_modules/hi-taskcenter
        rsync -auz ${tmpPath}/node_modules/hi-taskcenter ${projectPath}/${username}/${projectName}/deploy/node_modules/
        ## 取hi-taskcenter版本 并更新root package.json
        ## cd ${projectPath}/${username}/${projectName}/deploy/node_modules/hi-taskcenter/
        ## sed -i 's#$"name": \?"$.*#\1'"${projectName}"'",#g' package.json

echo "任务中心已同步！"
    ;;
    "cli") #程序环境
        rsync -auz ${tmpPath}/assets_platform ${projectPath}/${username}/${projectName}/deploy/
        echo "》》》静态共用库已同步！"

rsync -auz ${tmpPath}/project/hivuiLogin ${projectPath}/${username}/${projectName}/deploy/${projectName}/
        cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/hivuiLogin
        sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html
        echo "》》》登录模板已同步！"

rsync -auz ${tmpPath}/project/hivuiMain ${projectPath}/${username}/${projectName}/deploy/${projectName}/
        cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/hivuiMain
        sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html
        echo "》》》主页模板已同步！"

cd "${tmpPath}/"        
        npm i 
        rsync -auz ${tmpPath}/node_modules ${projectPath}/${username}/${projectName}/deploy/
        echo "》》》node环境已同步！"

cd "${tmpPath}/"
        npm i hi-ui -S
        rm -rf ${projectPath}/${username}/${projectName}/deploy/node_modules/hi-ui
        rsync -auz ${tmpPath}/node_modules/hi-ui ${projectPath}/${username}/${projectName}/deploy/node_modules/
        echo "》》》hi-ui库已同步！"

rsync -auz ${tmpPath}/build ${projectPath}/${username}/${projectName}/deploy/
        rsync -auz ${tmpPath}/babel.config.js ${projectPath}/${username}/${projectName}/deploy/
        rsync -auz ${tmpPath}/.postcssrc.js ${projectPath}/${username}/${projectName}/deploy/
        rsync -auz ${tmpPath}/.browserslistrc ${projectPath}/${username}/${projectName}/deploy/
        rsync -auz ${tmpPath}/vite-plugin ${projectPath}/${username}/${projectName}/deploy/

rsync -auz ${tmpPath}/.env.development ${projectPath}/${username}/${projectName}/deploy/.env.development
        rsync -auz ${tmpPath}/.env.production ${projectPath}/${username}/${projectName}/deploy/.env.production
        rsync -auz ${tmpPath}/.env.staging ${projectPath}/${username}/${projectName}/deploy/.env.staging

rsync -auz ${tmpPath}/vite.config.js ${projectPath}/${username}/${projectName}/deploy/vite.config.js
        echo "》》》已同步程序环境(build、babel.config.js、.postcssrc.js、.browserslistrc、vite-plugin、.env.development、.env.production、.env.staging、vite.config.js)..."

# source ${cmdDir}/var_env.sh
        ### 设置环境变量
        sed -i 's#$VITE_APP_USERPATH \?= \?$.*#\1'"/e5/render/${username}"'#g' .env.production    
        sed -i 's#$VITE_APP_BASE_API \?= \?$.*#\1'"${DEV_BASE_API}"'#g' ${projectPath}/${username}/${projectName}/deploy/.env.development
        sed -i 's#$VITE_APP_PN \?= \?$.*#\1'"${projectName}/${username}"'#g' ${projectPath}/${username}/${projectName}/deploy/.env.development
        sed -i 's#$VITE_APP_PN \?= \?$.*#\1'"${projectName}/${username}"'#g' ${projectPath}/${username}/${projectName}/deploy/.env.staging

### node_modules/vite 环境
        cd ${projectPath}/${username}/${projectName}/deploy/node_modules/vite/dist/client 
        # sed 's/要替换的内容/新的内容/'
        # 将所有的数字替换成内容
        # sed 's/[0-9]/好的/g' testFile2.txt  
        #sed 's/case.?\'update\':/case update:return;/g'

echo "》》》程序环境已同步！"
    ;;
    esac

rsync -auz ${tmpPath}/package.json ${projectPath}/${username}/${projectName}/deploy/package.json
    cd ${projectPath}/${username}/${projectName}/deploy/
    ## 替换 package.json 的 name 值
    sed -i 's#$"name": \?"$.*#\1'"${projectName}"'",#g' package.json
    sed -i 's#$"author": \?"$.*#\1'"${username}"'",#g' package.json
    echo "》》》正在重启服务..."
    pm2 delete "vite-${username}-${projectName}"
    npm run rm:vite
    npm run pm2:start
    pm2 save
    echo "》》》已经重启服务！！"
;;
esac

#!/bin/bash
## 权限问题，用  chmod u+x *.sh
## eg: oper.sh

# 用户名  
# 项目名 
# 操作 （create , restart , start , kill ,  stop , del , build , sync）
# 部署路径 (upload)
# 同步内容（node_modules , build , cli  ）

cmdDir=$(
  cd $(dirname "$0")
  pwd
)
username=$1     #用户名
projectName=$2  #项目名
cmd=$3          #命令

nrm del zhc
nrm add zhc  http://npm.hieap.cn/
nrm use zhc

cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/hivuiLogin
    sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html

cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/hivuiMain
    sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html

cd ${projectPath}/${username}/${projectName}/deploy/${projectName}/setting/desktop/appsetting/js/1.0.0
    sed -i 's#$projectName \?= \?$.*#\1"'"${projectName}"'";#g' appsetting.js

echo "<4>配置Nginx环境"

if [ $username = "admin" -a $projectName = "systpl" ] ; then
        echo "系统模板，不可删除！"
        exit 1
    fi

# rsync -auz ${tmpPath}/funclib ${projectPath}/${username}/${projectName}/deploy/
        # echo "》》》项目funclib资源已同步！"

cd "${tmpPath}/"        
        npm i 
        rsync -auz ${tmpPath}/node_modules ${projectPath}/${username}/${projectName}/deploy/
        echo "》》》node环境已同步！"

echo "》》》程序环境已同步！"
    ;;
    esac

Ignore Space Show notes View build/webpack.get-list.js
const path = require("path"); const fs = require("fs"); // const {Chalk} = require('chalk') const merge = require('webpack-merge'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const baseWebpackConfig = require('./webpack.base.conf'); const packageConfig = require('../package.json'); console.log('---------------------webpack.get-list.js------------', process.env.NODE_ENV) // 用来记录当前打包的模块路径列表，判断进程参数 let argvs = (process.argv[2] \|\| "").replace(/\s$/g, "") let moduleList = require('./webpack.get-module').moduleList \|\| []; if(argvs){ console.log('指定模块编译：') moduleList = argvs.split(',') } let evnConfig = require('./getEnvVar') let webpackList = []; //构建webpack 配置 for (let i = 0, l = moduleList.length; i < l; i++) { let MODULE = moduleList[i]; // console.log(i, MODULE); //添加每个模块的webpack 配置 let MODULE_NAME = MODULE.split('/').pop(); let entry = {}; let outputPath = path.resolve(__dirname, '../dist', MODULE) entry[MODULE_NAME] = ['babel-polyfill', `${MODULE}/index.js`]; let wpk = merge({ mode: 'production', // devtool: 'source-map', }, baseWebpackConfig, { entry: entry, output: { path: outputPath, filename: `static/js/[name].js`, // publicPath:'./' // publicPath: `/${evnConfig.VITE_APP_SERVER.replace(/"/gi,"")}/render/${packageConfig.author}/${MODULE.replace('./', '')}/` publicPath: `${evnConfig.VITE_APP_USERPATH.replace(/"/gi,"")}/${MODULE.replace('./', '')}/` } }); let htmlTemplate = `${MODULE}/index.html` var checkPath = fs.existsSync(htmlTemplate); //如果目录存在返回 true ，如果目录不存在返回false if (checkPath == false) { htmlTemplate = path.resolve(__dirname, './template.html') } wpk.plugins.push(new CleanWebpackPlugin([outputPath], { root: path.resolve(__dirname, '../'), //根目录 //其他配置按需求添加 })); wpk.plugins.push( new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash].css', chunkFilename: `static/css/[name].[contenthash].css` }) ); wpk.plugins.push( new HtmlWebpackPlugin({ filename: path.resolve(__dirname, '../dist', MODULE, 'index.html'), template: htmlTemplate,//如果html 不存在考虑用全局根目录下 inject: true, minify: { removeComments: true,//去除注释 collapseWhitespace: true,//是否去除空格 removeAttributeQuotes: true//去除空属性 }, compile: true })) webpackList.push(wpk); } module.exports = webpackList;// [webpackList[4]] ////[webpackList[3]];//27 const path = require("path"); const fs = require("fs"); // const {Chalk} = require('chalk') const merge = require('webpack-merge'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const baseWebpackConfig = require('./webpack.base.conf'); const packageConfig = require('../package.json'); console.log('---------------------webpack.get-list.js------------', process.env.NODE_ENV) // 用来记录当前打包的模块路径列表，判断进程参数 let argvs = (process.argv[2] \|\| "").replace(/\s$/g, "") let moduleList = require('./webpack.get-module').moduleList \|\| []; if(argvs){ console.log('指定模块编译：') moduleList = argvs.split(',') } let evnConfig = require('./getEnvVar') let webpackList = []; //构建webpack 配置 for (let i = 0, l = moduleList.length; i < l; i++) { let MODULE = moduleList[i]; // console.log(i, MODULE); //添加每个模块的webpack 配置 let MODULE_NAME = MODULE.split('/').pop(); let entry = {}; let outputPath = path.resolve(__dirname, '../dist', MODULE) entry[MODULE_NAME] = ['babel-polyfill', `${MODULE}/index.js`]; let wpk = merge({ mode: 'production', // devtool: 'source-map', }, baseWebpackConfig, { entry: entry, output: { path: outputPath, filename: `static/js/[name].js`, // publicPath:'./' // publicPath: `/${evnConfig.VITE_APP_SERVER.replace(/"/gi,"")}/render/${packageConfig.author}/${MODULE.replace('./', '')}/` publicPath: `${evnConfig.VITE_APP_USERPATH.replace(/"/gi,"")}/${MODULE.replace('./', '')}/` } }); let htmlTemplate = `${MODULE}/index.html` var checkPath = fs.existsSync(htmlTemplate); //如果目录存在返回 true ，如果目录不存在返回false if (checkPath == false) { htmlTemplate = path.resolve(__dirname, './index.html') } wpk.plugins.push(new CleanWebpackPlugin([outputPath], { root: path.resolve(__dirname, '../'), //根目录 //其他配置按需求添加 })); wpk.plugins.push( new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash].css', chunkFilename: `static/css/[name].[contenthash].css` }) ); wpk.plugins.push( new HtmlWebpackPlugin({ filename: path.resolve(__dirname, '../dist', MODULE, 'index.html'), template: htmlTemplate,//如果html 不存在考虑用全局根目录下 inject: true, minify: { removeComments: true,//去除注释 collapseWhitespace: true,//是否去除空格 removeAttributeQuotes: true//去除空属性 }, compile: true })) webpackList.push(wpk); } module.exports = webpackList;// [webpackList[4]] ////[webpackList[3]];//27

Ignore Space Show notes View

build/webpack.get-list.js

const path = require("path");
const fs = require("fs");
// const {Chalk} = require('chalk')
const merge = require('webpack-merge');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const baseWebpackConfig = require('./webpack.base.conf');

const packageConfig = require('../package.json');
console.log('---------------------webpack.get-list.js------------', process.env.NODE_ENV)

// 用来记录当前打包的模块路径列表，判断进程参数
let argvs = (process.argv[2] || "").replace(/\s*$/g, "")
let moduleList = require('./webpack.get-module').moduleList || [];
if(argvs){
  console.log('指定模块编译：')
  moduleList = argvs.split(',')
}

let evnConfig = require('./getEnvVar')

module.exports = webpackList;// [webpackList[4]] ////[webpackList[3]];//27

const packageConfig = require('../package.json');
console.log('---------------------webpack.get-list.js------------', process.env.NODE_ENV)

let evnConfig = require('./getEnvVar')

module.exports = webpackList;// [webpackList[4]] ////[webpackList[3]];//27

Ignore Space Show notes View index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>EAP5-Admin-Login</title> <% if(htmlWebpackPlugin.vite){%> <!--预览时公共库--> <link rel="stylesheet" href="/assets_platform/element-ui/index.css"> <script src="/assets_platform/vue/vue.min.js"></script> <script src="/assets_platform/vuex/vuex.min.js"></script> <script src="/assets_platform/vue-router/vue-router.min.js"></script> <script src="/assets_platform/element-ui/index.js"></script> <script src="/assets_platform/eap/eap.umd.min.js"></script> <%}%> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="/${serverName}/render/assets_platform/element-ui/index.css"> <script src="/${serverName}/render/assets_platform/vue/vue.min.js"></script> <script src="/${serverName}/render/assets_platform/vuex/vuex.min.js"></script> <script src="/${serverName}/render/assets_platform/vue-router/vue-router.min.js"></script> <script src="/${serverName}/render/assets_platform/element-ui/index.js"></script> <!--发布时公共库--> <script src="/${serverName}/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="/${serverName}/render/assets_platform/eap/eap.umd.min.js"></script> <%}%> </head> <body> <div id="app"></div> <% if(htmlWebpackPlugin.vite==true&&htmlWebpackPlugin.project=='hi-vui-template'){%> <script> window.location = '/project/hivuiLogin/index.html'; </script> <%}%> <!-- built files will be auto injected --> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>EAP5-Admin-Login</title> <% if(htmlWebpackPlugin.vite){%> <!--预览时公共库--> <link rel="stylesheet" href="/assets_platform/element-ui/index.css"> <script src="/assets_platform/vue/vue.min.js"></script> <script src="/assets_platform/vuex/vuex.min.js"></script> <script src="/assets_platform/vue-router/vue-router.min.js"></script> <script src="/assets_platform/element-ui/index.js"></script> <script src="/assets_platform/eap/eap.umd.min.js"></script> <%}%> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="/${serverName}/render/assets_platform/element-ui/index.css"> <script src="/${serverName}/render/assets_platform/vue/vue.min.js"></script> <script src="/${serverName}/render/assets_platform/vuex/vuex.min.js"></script> <script src="/${serverName}/render/assets_platform/vue-router/vue-router.min.js"></script> <script src="/${serverName}/render/assets_platform/element-ui/index.js"></script> <!--发布时公共库--> <script src="/${serverName}/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="/${serverName}/render/assets_platform/eap/eap.umd.min.js"></script> <%}%> </head> <body> <div id="app"></div> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="./index.js"></script> <%}%> <!-- built files will be auto injected --> </body> </html>

Ignore Space Show notes View

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>EAP5-Admin-Login</title>
    <% if(htmlWebpackPlugin.vite){%>
        
        <link rel="stylesheet" href="/assets_platform/element-ui/index.css">
        <script src="/assets_platform/vue/vue.min.js"></script>
        <script src="/assets_platform/vuex/vuex.min.js"></script>
        <script src="/assets_platform/vue-router/vue-router.min.js"></script>
        <script src="/assets_platform/element-ui/index.js"></script>
        <script src="/assets_platform/eap/eap.umd.min.js"></script>
    <%}%>
    <% if(!htmlWebpackPlugin.vite){%>
        <link rel="stylesheet" href="/${serverName}/render/assets_platform/element-ui/index.css">
        <script src="/${serverName}/render/assets_platform/vue/vue.min.js"></script>
        <script src="/${serverName}/render/assets_platform/vuex/vuex.min.js"></script>
        <script src="/${serverName}/render/assets_platform/vue-router/vue-router.min.js"></script>
        <script src="/${serverName}/render/assets_platform/element-ui/index.js"></script>
        
        <script src="/${serverName}/render/assets_platform/vendor_dll/vendor.dll.js"></script>
        <script src="/${serverName}/render/assets_platform/eap/eap.umd.min.js"></script>
    <%}%>

</head>

<body>
    <div id="app"></div>
    
    <% if(htmlWebpackPlugin.vite==true&&htmlWebpackPlugin.project=='hi-vui-template'){%>
        <script>
                window.location = '/project/hivuiLogin/index.html';  
        </script>        
    <%}%>
    
</body>

</html>

<!DOCTYPE html>
<html>

</head>

</html>

Ignore Space Show notes View package.json
{ "name": "hi-vui-template", "version": "1.1.5", "description": "A hi-vui-template project", "author": "zhcTeam", "scripts": { "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache", "pm2:start": "pm2 start processes.json", "dev": "vite --host", "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build:modules": "node build/webpack.prod.conf.js", "build1": "webpack --mode production --config build/webpack.prod.conf.js", "debug": "webpack --mode development --config build/webpack.dll.conf.js", "dll": "webpack --config build/webpack.dll.conf.js", "start": "webpack-dev-server --config build/webpack.dev.conf.js", "copyassets": "node build/copyBaseAssets.js" }, "devDependencies": { "@babel/core": "^7.1.2", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7", "@babel/plugin-proposal-optional-chaining": "^7.16.7", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/preset-env": "^7.1.0", "@vitejs/plugin-vue-jsx": "^1.3.3", "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "add-asset-html-webpack-plugin": "^3.2.0", "autoprefixer": "^9.1.5", "babel-loader": "^8.0.4", "babel-plugin-component": "^1.1.1", "babel-plugin-transform-vite-meta-env": "^1.0.3", "chalk": "^5.0.0", "clean-webpack-plugin": "^0.1.19", "copy-webpack-plugin": "^4.5.3", "cross-env": "^7.0.3", "css-loader": "^1.0.0", "dotenv": "^10.0.0", "file-loader": "^2.0.0", "happypack": "^5.0.1", "html-webpack-plugin": "^4.5.2", "less": "^4.1.2", "less-loader": "^5.0.0", "mini-css-extract-plugin": "^1.6.2", "node-sass": "^4.9.3", "optimize-css-assets-webpack-plugin": "^5.0.1", "parallel-webpack": "^2.6.0", "postcss-import": "^11.1.0", "postcss-loader": "^2.1.6", "postcss-url": "^7.3.2", "progress-bar-webpack-plugin": "^2.1.0", "sass": "^1.49.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", "uglifyjs-webpack-plugin": "^2.0.1", "url-loader": "^1.1.1", "vite": "2.3.7", "vite-plugin-html": "^2.1.1", "vite-plugin-imp": "^2.0.11", "vite-plugin-pagedata": "^1.0.4", "vite-plugin-vue2": "^1.9.0", "vue-loader": "^15.4.2", "vue-template-compiler": "^2.5.17", "webpack": "^4.20.2", "webpack-cli": "^3.1.1", "webpack-dev-server": "^3.1.9", "webpack-merge": "^4.1.4" }, "dependencies": { "axios": "^0.24.0", "babel-polyfill": "^6.26.0", "classnames": "^2.3.1", "deep-lu-trans": "^1.0.5", "element-ui": "^2.15.6", "enquire.js": "^2.1.6", "font-awesome": "^4.7.0", "hi-taskcenter": "^1.0.9", "hi-ui": "^1.1.922", "js-cookie": "^3.0.1", "js-pinyin": "^0.1.9", "lodash": "^4.17.11", "md5": "^2.3.0", "screenfull": "^6.0.0", "sortablejs": "^1.14.0", "vue": "^2.5.17", "vue-draggable-resizable": "^2.3.0", "vue-gemini-scrollbar": "^2.0.1", "vue-jstree": "^2.1.6", "vue-router": "^3.0.1", "vuex": "^3.6.2", "zhc-birt-cmps": "^2.3.13" } } { "name": "hi-vui-template", "version": "1.1.5", "description": "A hi-vui-template project", "author": "zhcTeam", "scripts": { "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache", "pm2:start": "pm2 start processes.json", "dev": "vite --host", "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build:modules": "node build/webpack.prod.conf.js", "build1": "webpack --mode production --config build/webpack.prod.conf.js", "debug": "webpack --mode development --config build/webpack.dll.conf.js", "dll": "webpack --config build/webpack.dll.conf.js", "start": "webpack-dev-server --config build/webpack.dev.conf.js", "copyassets": "node build/copyBaseAssets.js" }, "devDependencies": { "@babel/core": "^7.1.2", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7", "@babel/plugin-proposal-optional-chaining": "^7.16.7", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/preset-env": "^7.1.0", "@vitejs/plugin-vue-jsx": "^1.3.3", "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "add-asset-html-webpack-plugin": "^3.2.0", "autoprefixer": "^9.1.5", "babel-loader": "^8.0.4", "babel-plugin-component": "^1.1.1", "babel-plugin-transform-vite-meta-env": "^1.0.3", "chalk": "^5.0.0", "clean-webpack-plugin": "^0.1.19", "copy-webpack-plugin": "^4.5.3", "cross-env": "^7.0.3", "css-loader": "^1.0.0", "dotenv": "^10.0.0", "file-loader": "^2.0.0", "happypack": "^5.0.1", "html-webpack-plugin": "^4.5.2", "less": "^4.1.2", "less-loader": "^5.0.0", "mini-css-extract-plugin": "^1.6.2", "node-sass": "^4.9.3", "optimize-css-assets-webpack-plugin": "^5.0.1", "parallel-webpack": "^2.6.0", "postcss-import": "^11.1.0", "postcss-loader": "^2.1.6", "postcss-url": "^7.3.2", "progress-bar-webpack-plugin": "^2.1.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", "uglifyjs-webpack-plugin": "^2.0.1", "url-loader": "^1.1.1", "vite": "2.3.7", "vite-plugin-html": "^2.1.1", "vite-plugin-imp": "^2.0.11", "vite-plugin-pagedata": "^1.0.4", "vite-plugin-vue2": "^1.9.0", "vue-loader": "^15.4.2", "vue-template-compiler": "^2.5.17", "webpack": "^4.20.2", "webpack-cli": "^3.1.1", "webpack-dev-server": "^3.1.9", "webpack-merge": "^4.1.4" }, "dependencies": { "axios": "^0.24.0", "babel-polyfill": "^6.26.0", "classnames": "^2.3.1", "deep-lu-trans": "^1.0.5", "element-ui": "^2.15.6", "enquire.js": "^2.1.6", "font-awesome": "^4.7.0", "hi-taskcenter": "^1.0.9", "hi-ui": "^1.1.922", "js-cookie": "^3.0.1", "js-pinyin": "^0.1.9", "lodash": "^4.17.11", "md5": "^2.3.0", "screenfull": "^6.0.0", "sortablejs": "^1.14.0", "vue": "^2.5.17", "vue-draggable-resizable": "^2.3.0", "vue-gemini-scrollbar": "^2.0.1", "vue-jstree": "^2.1.6", "vue-router": "^3.0.1", "vuex": "^3.6.2", "zhc-birt-cmps": "^2.3.13" } }

Ignore Space Show notes View

package.json

{
  "name": "hi-vui-template",
  "version": "1.1.5",
  "description": "A hi-vui-template project",
  "author": "zhcTeam",
  "scripts": {
    "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache",
    "pm2:start": "pm2 start processes.json",
    "dev": "vite --host",
    "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build:modules": "node build/webpack.prod.conf.js",
    "build1": "webpack --mode production --config build/webpack.prod.conf.js",
    "debug": "webpack --mode development --config build/webpack.dll.conf.js",
    "dll": "webpack --config build/webpack.dll.conf.js",
    "start": "webpack-dev-server --config build/webpack.dev.conf.js",
    "copyassets": "node build/copyBaseAssets.js"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@vitejs/plugin-vue-jsx": "^1.3.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "add-asset-html-webpack-plugin": "^3.2.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.4",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-transform-vite-meta-env": "^1.0.3",
    "chalk": "^5.0.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.3",
    "cross-env": "^7.0.3",
    "css-loader": "^1.0.0",
    "dotenv": "^10.0.0",
    "file-loader": "^2.0.0",
    "happypack": "^5.0.1",
    "html-webpack-plugin": "^4.5.2",
    "less": "^4.1.2",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "node-sass": "^4.9.3",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "parallel-webpack": "^2.6.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.6",
    "postcss-url": "^7.3.2",
    "progress-bar-webpack-plugin": "^2.1.0",
    "sass": "^1.49.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.1",
    "vite": "2.3.7",
    "vite-plugin-html": "^2.1.1",
    "vite-plugin-imp": "^2.0.11",
    "vite-plugin-pagedata": "^1.0.4",
    "vite-plugin-vue2": "^1.9.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.9",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "babel-polyfill": "^6.26.0",
    "classnames": "^2.3.1",
    "deep-lu-trans": "^1.0.5",
    "element-ui": "^2.15.6",
    "enquire.js": "^2.1.6",
    "font-awesome": "^4.7.0",
    "hi-taskcenter": "^1.0.9",
    "hi-ui": "^1.1.922",
    "js-cookie": "^3.0.1",
    "js-pinyin": "^0.1.9",
    "lodash": "^4.17.11",
    "md5": "^2.3.0",
    "screenfull": "^6.0.0",
    "sortablejs": "^1.14.0",
    "vue": "^2.5.17",
    "vue-draggable-resizable": "^2.3.0",
    "vue-gemini-scrollbar": "^2.0.1",
    "vue-jstree": "^2.1.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.6.2",
    "zhc-birt-cmps": "^2.3.13"
  }
}

{
  "name": "hi-vui-template",
  "version": "1.1.5",
  "description": "A hi-vui-template project",
  "author": "zhcTeam",
  "scripts": {
    "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache",
    "pm2:start": "pm2 start processes.json",
    "dev": "vite --host",
    "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build:modules": "node build/webpack.prod.conf.js",
    "build1": "webpack --mode production --config build/webpack.prod.conf.js",
    "debug": "webpack --mode development --config build/webpack.dll.conf.js",
    "dll": "webpack --config build/webpack.dll.conf.js",
    "start": "webpack-dev-server --config build/webpack.dev.conf.js",
    "copyassets": "node build/copyBaseAssets.js"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@vitejs/plugin-vue-jsx": "^1.3.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "add-asset-html-webpack-plugin": "^3.2.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.4",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-transform-vite-meta-env": "^1.0.3",
    "chalk": "^5.0.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.3",
    "cross-env": "^7.0.3",
    "css-loader": "^1.0.0",
    "dotenv": "^10.0.0",
    "file-loader": "^2.0.0",
    "happypack": "^5.0.1",
    "html-webpack-plugin": "^4.5.2",
    "less": "^4.1.2",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "node-sass": "^4.9.3",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "parallel-webpack": "^2.6.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.6",
    "postcss-url": "^7.3.2",
    "progress-bar-webpack-plugin": "^2.1.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.1",
    "vite": "2.3.7",
    "vite-plugin-html": "^2.1.1",
    "vite-plugin-imp": "^2.0.11",
    "vite-plugin-pagedata": "^1.0.4",
    "vite-plugin-vue2": "^1.9.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.9",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "babel-polyfill": "^6.26.0",
    "classnames": "^2.3.1",
    "deep-lu-trans": "^1.0.5",
    "element-ui": "^2.15.6",
    "enquire.js": "^2.1.6",
    "font-awesome": "^4.7.0",
    "hi-taskcenter": "^1.0.9",
    "hi-ui": "^1.1.922",
    "js-cookie": "^3.0.1",
    "js-pinyin": "^0.1.9",
    "lodash": "^4.17.11",
    "md5": "^2.3.0",
    "screenfull": "^6.0.0",
    "sortablejs": "^1.14.0",
    "vue": "^2.5.17",
    "vue-draggable-resizable": "^2.3.0",
    "vue-gemini-scrollbar": "^2.0.1",
    "vue-jstree": "^2.1.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.6.2",
    "zhc-birt-cmps": "^2.3.13"
  }
}

Ignore Space Show notes View project/hivuiLogin/App.vue
<template> <div class="bg"> <div class="login_hd"> <div class="login_hd_logo" :style="logoStyle"> <!-- <div class="login_hd_logo_tip">登录</div>--> </div> </div> <div class="login_bd"> <div class="login_bd_bg" :style="bgStyle"></div> <div class="login_form"> <div id="showQr" class="loginMainBox" :hidden="currLoginType != 'com'"> <img @click="changeQr" class="icon-qrcode" :src="scanIcon" :hidden="!config.isScan" /> <div class="login-tip" :hidden="!config.isScan"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">扫码登录</div> </div> </div> <div class="login_form_bd"> <div class="error_tips"></div> <input type="hidden" name="directAction" value="" /> <input type="hidden" name="refererurl" value="" /> <div class="login_field"> <label>用户名/邮箱</label> <input class="login_field_text" v-model="username" type="text" id="txtUserName" name="userName" placeholder="用户名" autofocus required autocomplete="off" @keyup.enter="loginFunc" /> <i class="fa fa-user"></i> </div> <div class="login_field"> <label>登录密码</label> <input class="login_field_text" v-model="password" type="text" onfocus="this.type='password'" id="txtPassword" name="password" placeholder="请输入密码" required autocomplete="off" @keyup.enter="loginFunc" /> <i class="fa fa-unlock-alt"></i> </div> <div class="saveCheckbox_box"> <label for="saveCheckbox" ><i :class=" 'fa ' + (isCheckRu ? 'fa-check-square-o' : 'fa-square-o') " ></i >记住用户名</label > <input type="checkbox" id="saveCheckbox" style="display: none" v-model="isCheckRu" @change="rememberUserEvent" /> <span class="forgetPw" @click="resetPw" ><i class="fa fa-lock"></i ><span style="margin-left: 5px">忘记密码?</span></span > </div> <div class="login_form_btn"> <div class="login_btn_area"> <button :style="btnStyle" :class="'loginBtn' + (loginLoading ? ' disabled' : '')" @click="loginFunc" > 登  录<i :hidden="!loginLoading" class="el-icon-loading" ></i> </button> </div> </div> <div hidden class="login_form_foot"> <span class="login_form_app" ><i class="miniIcon" data-type="app"></i ><span style="margin-left: 5px">APP下载</span></span > </div> </div> </div> <div id="showCom" class="loginMainBox" :hidden="!(config.isScan && currLoginType == 'scan')" > <div class="login-title">扫码登录</div> <div class="login-tip"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">密码登录</div> </div> </div> <img @click="changeCom" class="icon-qrcode" :src="comIcon" alt="" /> <div style=" position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); " > <!-- <img id="qrImg" src="./assets/logo.png" width="115px" height="115px" alt > --> <div class="login-error" style="display: none">登录失败!</div> <div class="qrcode-img" style="display: none"> <canvas height="130" width="130" style="height: 130px; width: 130px" ></canvas> <div class="qrcode-error"> <p>二维码失效</p> <button type="button" class="refresh">刷新二维码</button> </div> </div> </div> <div class="login-content nc-outer-box" style="display: none"> <div class="qrcode-login"> <div class="qrcode-success"> <!-- <img src="" alt=""/> --> <p>扫描成功！</p> <h4>请在手机上根据提示确认登录</h4> </div> </div> </div> <div class="qrDesc"> <div> <!-- <img src="" alt="" /> --> </div> <div class="qrDesc_right"> <span> 打开<a style="color: blue">海创科技App</a><br /> 扫一扫登录</span > </div> </div> </div> <div id="qrcode"></div> </div> </div> <div class="login_ft"> <div class="login_ft_main" id="login_copyright"> {{ this.config.copyright }} </div> </div> </div> </template> <script> import { baseLogin } from "./api/login"; import md5 from "md5"; import { projectName } from "./config"; import "font-awesome/css/font-awesome.css"; import comIcon from "./assets/computer.png" import scanIcon from "./assets/qrcode_3.png" import _loginLogoImg from "./assets/Logo1.png" import _loginBgImg from "./assets/background.png" import { setToken, removeToken, getUserId, setUserId, removeUserId, } from "./utils/auth.js"; export default { components: {}, data() { return { comIcon: comIcon, scanIcon: scanIcon, username: "", password: "", config: { title: window.customSysCofig?.loginTitle\|\|"中海创科技", loginLogoImg: window.customSysCofig?.loginLogo\|\|_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h\|\|56, loginLogoImg_width: window.customSysCofig?.loginLogo_w\|\|206, loginBgImg: window.customSysCofig?.loginBgImg\|\|_loginBgImg, copyright: window.customSysCofig?.copyright\|\|"版权所有 © 2020-2025 中海创科技", isScan: window.customSysCofig?.isScan\|\|false, mainColor:window.customSysCofig?.mainColor\|\|"#06c", }, currLoginType: "com", rememberUserId: getUserId(), loginLoading: false, }; }, computed: { btnStyle(){ return { "background-color": this.config.mainColor, }; }, bgStyle() { return { "background-image": "url(" + this.config.loginBgImg + ")", }; }, logoStyle() { return { "background-image": "url(" + this.config.loginLogoImg + ")", height: this.config.loginLogoImg_height + "px", width: this.config.loginLogoImg_width + "px", }; }, isCheckRu() { return !!this.rememberUserId; }, }, mounted() { if (this.isCheckRu) { this.username = this.rememberUserId; } }, methods: { loginFunc() { this.defaultLogin(); }, defaultLogin() { /this.$refs.loginForm.validate(valid => { if (valid) {/ if(!this.username.trim()){ this.$message.error("请输入用户名！"); return; }else if(!this.password){ this.$message.error("请输入密码！"); return; } removeToken(); this.loginLoading = true; baseLogin({ username: this.username.trim(), password: md5(this.password), }) .then((response) => { const data = response; setToken(data.token); if (this.isCheckRu) { setUserId(this.username); } else { removeUserId(); } location = window.HIVUI_SETTING.mainPageUrl ? window.HIVUI_SETTING.mainPageUrl : "/" + projectName + "/hivuiMain/index.html#/"; }) .catch((error) => { this.loginLoading = false; }); /} else { console.log("error submit!!"); return false; } });/ }, changeQr() { this.currLoginType = "scan"; }, changeCom() { this.currLoginType = "com"; }, rememberUserEvent() { if (this.isCheckRu) { this.rememberUserId = ""; } else { this.rememberUserId = true; } }, resetPw() {}, }, }; </script> <style lang="scss"> * { margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; } ul, li { list-style: none; } button { outline: none; border: none; } html, body { height: 100%; width: 100%; background: #fff; } input, body, button { font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial, helvetica, clean, sans-serif; } body { font-size: 14px; color: #333; } .bg { height: 100%; width: 100%; position: relative; } .login_hd, .login_ft { height: 100px; width: 100%; position: fixed; z-index: 99; left: 0; } .login_hd_main, .login_ft_main { width: 1000px; height: 100%; margin: 0 auto; } .login_hd { top: 0; .login_hd_logo { height: 60px; width: 265px; position: absolute; top: 50px; left: 50px; background: no-repeat; img { height: 80px; width: 80px; margin-right: 90px; margin-top: 10px; float: right; } .login_hd_logo_tip { height: 32px; width: 84px; display: inline-block; padding: 0 20px; font-size: 22px; color: #fff; position: absolute; right: -104px; top: 0; bottom: 0; margin: auto; &:after { content: ""; height: 20px; width: 2px; position: absolute; top: 0; bottom: 0; left: 0px; background-color: #8691a8; margin: auto; } } } } .login_bd { overflow: hidden; min-width: 1210px; position: relative; height: 100%; background-color: #fff; .login_bd_bg { background: no-repeat center center; background-size: 100%; position: absolute; height: 100%; width: 100%; } .login_form { width: 370px; height: 360px; margin: auto; position: absolute; top: 0; left: 40%; right: 0; bottom: 0; background-color: #fff; padding: 1px; z-index: 100; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5); .login_form_hd { color: #333; font-weight: bold; padding: 0 18px; box-sizing: border-box; width: 100%; font-size: 16px; text-align: left; line-height: 44px; height: 44px; border-bottom: 1px solid #ccc; } .login_form_bd { min-height: 231px; height: 100%; position: relative; padding: 24px 40px 0; .login_form_foot { line-height: 40px; margin-top: 20px; &i { color: #0190d4; } .login_form_app, .login_download_app { color: #0190d4; float: right; cursor: pointer; &:hover { color: #0f406c; &i { color: #0f406c; } } } .miniIcon { display: inline-block; height: 16px; width: 16px; background-position: center center; background-size: 100%; margin-left: 20px; vertical-align: middle; &[data-type="app"] { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNGM0JDQ0E0OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNGM0JDQ0E1OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0YzQkNDQTI5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0YzQkNDQTM5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65Y/jqAAADAElEQVR42gzOTWgcVRwA8P/7mJmdjzfZ2W6TNM2u3ebSYBNqNSaKiqCgbYUWGi8ebBPwIIrtRewHSNSIoIIIFU2VHop4aMFlPYiVXlI0EinkoEnapKZ1szG7ze52srOzb97Ozjx7/N1+iIfy0jz8PB//EUSog3OE3Auhj/ibhrnLBQlxh3VERe3p5YcP6m+9EKPLN+OPv/d8YXf6IdoCW0T3mRCuipue2qPoYIVqPdC7UlEx20w//iwjd3umSrimqqzs+k4m5m7gqPr4S/T0IX12qeYG7CG9bSxwV0j45pZO0NgUYTqFkOi0UtVAaBfP4idsv1R0jz3Z63nBSlnk0mqrjSILE49i22y3Oa1WNCjSRB32s6DHb6/d/rcwz18+CGeOK9vFf5b+CywK0bbScTok9fT5lkIRh4ln0JvjcHQUpVEj//cjHNTCQmN0TM3p2mod1n2NMWRYHCvJhLcB+/rWzp6AcrG5VNrIDHiFn9Zn54o/FnYslCoTr+z44g07m2oEHkQ1E1ebkMQbky/uDX1477Otwl9ZgJ1fT2WU4X2vPw/PZfunL/isGX973DZKD+RO/2EN9JY4Ogalapjq2339Fxi6s54/ZVfedSpI/rCIZi6L3F59YjxgpnZHGGjknFzc5gdyna8mmY1hasZ3es2Th8Td1cgTRtKK27fw8FNQuLd8MT8oGMCBD3j/+yE5IYffWcnP35IyaEl59XcJ48vmiLj2Z7zZuv3lNZk4WTZOhY99GBDjyHRcb1hmYlUYhRv3gwobHdRMc312beDtyXBwWDn9Te3CnEDOri4VpIyQfUZK2bAV229CnITGUjRktq586ibTGQ4Ppmfold8YdIOju1To1NDQo5/LShV4wA2qEwZlt8pE2gpq5w6v3SiNXJ2Ldu+JE4iLyA4IIJDok1/FpbwM+jQvWtbqmW7L2gyhikBbBMhKzJBDQaFbvJVCnBw70iDXv/toBdOFOnTLRIYGtchM9IbpThkP2U5UHbBoK6aRYmYkfm0/nH+V/C/AALR/bXSBworaAAAAAElFTkSuQmCC"); } &[data-type="desk"] { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGRUFBRDNFOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGRUFBRDNGOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZFQUFEM0M5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZFQUFEM0Q5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7jOkn1AAABSElEQVR42mL8//8/AymApXzd08fvfv36+58Rh4o///7LCrLZqPCEmQgCuYwMaWeINPv/TGOQDUC8OEkx2kzoHw63MTMxrjv/Yf/Nz1AnATE/JzMjIwMIYwO7rn3iZGWcHCGL0PDt1z9czrj7+qf7xNtAxslKDTMFbiCDCY+jP/3469B7C8J27L318O0vfBpuvfwhUXLpyftfEC7QFQpVl888/AZyEjsLFtdffvodGJRff/07dvcLkCvGy6IrzXnkDpCddmbN2Xf/cYD9Nz+Bwj3tTNOWZxARkA0hM+8JcDH//osSrEBuiau4uSI3hOupww8NpTJ3iXuvf37//Y8J1V3AuNeQ4AA6DMjWk+E0keeCxR9ewJJxFuiei4+/wUVwhtKbL39su28yMTGsz1QG2oCUQnCAE/e+1G58+vrzbzRxRlKTN0CAAQB1Gu32zyWjpAAAAABJRU5ErkJggg=="); } } } .error_tips { position: absolute; line-height: 30px; font-size: 12px; color: #f60000; text-align: center; top: 0; left: 0; right: 0; width: 100%; margin: auto; } .login_field { position: relative; padding-bottom: 20px; label { line-height: 35px; display: block; height: 35px; font-size: 16px; } i { font-size: 20px; color: #aaa; width: 35px; text-align: center; line-height: 40px; height: 40px; position: absolute; top: 35px; left: 0; margin: auto; } .login_field_text { height: 40px; width: 100%; line-height: 40px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 16px; color: #000; padding-left: 35px; box-sizing: border-box; font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial, helvetica, clean, sans-serif; &::input-placeholder { color: #ccc; } } } .saveCheckbox_box { height: 35px; line-height: 35px; padding-left: 30px; position: relative; top: 0px; label { cursor: pointer; user-select: none; i { font-size: 24px; position: absolute; top: 0; left: 2px; bottom: 0; margin: auto; height: 25px; width: 25px; color: #888; cursor: pointer; text-align: center; } } .occasion { float: right; &:after { content: ""; background: no-repeat; width: 14px; height: 18px; position: absolute; top: 30%; pointer-events: none; right: 1px; } #selectStyle { border: none; outline: none; width: 62px; appearance: none; -webkit-appearance: none; -moz-appearance: none; } } } .forgetPw { float: right; color: #0190d4; cursor: pointer; margin-left: 5px; &:hover { color: #0f406c; i { color: #0f406c; } } } .login_form_btn { font-size: 13px; margin-top: 20px; .loginBtn { /* background-color: #135189; / width: 100%; height: 40px; border: none; border-radius: 5px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; i { margin-left: 5px; } &:hover { filter: brightness(0.8); } &.disabled { background-color: #ccc!important; &:hover { filter: brightness(1); } } } } /二维码/ .qrCodeImg { / position: absolute; / height: 139px; width: 139px; / left:40% !important; right:0 !important; bottom:12%; / margin-top: 10px; margin-left: 85px; z-index: 999; } } .login_form_google { width: 280px; position: absolute; top: 317px; left: 0; bottom: 0; color: #fff; line-height: 20px; text-align: center; font-weight: bold; font-size: 13px; cursor: pointer; user-select: none; & > a { color: #fff; } } .loginMainBox { .login-title { height: 18px; line-height: 18px; font-size: 16px; color: #889aa4; margin-top: 12px; margin-left: 12px; padding-bottom: 8px; font-weight: 700; } .login-tip { position: absolute; top: 10px; right: 68px; display: block; .poptip { background-color: #e6f9fc; line-height: 16px; position: relative; z-index: 9999; border: 1px solid #0073be; padding: 5px 10px; .poptip-arrow { position: absolute; z-index: 10; top: 8px; right: 0; span { position: absolute; width: 0; height: 0; border-color: hsla(0, 0%, 100%, 0); border-style: solid; overflow: hidden; top: 0; left: 0; border-width: 6px 0 6px 6px; border-left-color: #e6f4fc; } em { position: absolute; width: 0; height: 0; border-color: hsla(0, 0%, 100%, 0); border-style: solid; overflow: hidden; top: 0; left: 0; border-width: 6px 0 6px 6px; border-left-color: #0073be; border-right-color: #0073be; } } .poptip-content { font-size: 12px; font-weight: 400; color: #0073be; } } } .qrDesc { font-size: 12px; color: #666; width: 160px; margin: auto; overflow: hidden; line-height: 17px; margin-top: 230px; .qrDesc_right { position: relative; left: 50px; top: -35px; } } .scanMain { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); .qrcode-img { position: relative; margin: 20px auto; font-size: 14px; -webkit-box-shadow: 0 0 8px #ddd; box-shadow: 0 0 8px #ddd; opacity: 1; width: 140px; height: 140px; .qrcode-error { background: hsla(0, 0%, 100%, 0.95); position: absolute; left: 0; top: 0; z-index: 9999; width: 100%; height: 100%; p { font-weight: 700; color: #222; margin-top: 38px; margin-bottom: 8px; text-align: center; } .refresh { background: #f40; width: 110px; height: 34px; line-height: 34px; text-align: center; margin: 0 auto; background: #ff9000; border-color: #ff9000; display: block; color: #fff; border-radius: 3px; font-size: 14px; cursor: pointer; } } canvas { margin: 5px; } } .login-error { text-align: center; color: #222; font-weight: 700; } } /二维码切换登录/ .icon-qrcode { position: absolute; right: 5px; top: 5px; font-size: 52px; line-height: 52px; cursor: pointer; width: 56px; z-index: 999; } .login-content { width: 100%; margin: 0 auto; padding-top: 55px; .qrcode-success { text-align: center; margin-top: 20px; .iconfont { color: #c5c5c5; font-size: 36px; } h4, p { margin-top: 10px; font-size: 14px; } } } } } } .login_ft { bottom: 0; .login_ft_main { line-height: 60px; text-align: center; font-size: 14px; } } /登录对话框/ .loginDialog { height: 300px; width: 500px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 199; .loginDialog_hd { height: 35px; background-color: #0190d4; position: relative; h2 { height: 35px; line-height: 35px; font-size: 14px; color: #fff; padding: 0 20px; } .loginDialog_remove { position: absolute; top: 0; bottom: 0; right: 5px; height: 20px; width: 20px; background-color: #f30; cursor: pointer; margin: auto; text-align: center; &i { line-height: 20px; font-size: 18px; color: #fff; } &:hover { background-color: #f00; } } } .loginDialog_bd { width: 100%; height: 215px; background-color: #fff; } .loginDialog_ft { height: 50px; width: 100%; border-top: 1px solid #ccc; background-color: #f5f5f5; &:after { content: ""; display: block; clear: both; } button { display: block; padding: 0 12px; font-size: 14px; margin-top: 11px; height: 28px; line-height: 28px; text-align: center; cursor: pointer; color: #333333; background-color: #e9e9e9; float: right; margin-right: 10px; } .loginDialog_confirmBtn { background-color: #5cb85c; color: #fff; &:hover { background-color: #47a447; } } .loginDialog_cancelmBtn:hover { background-color: #ddd; } } } .loginMask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.5; z-index: 198; } #loginMsg { height: 170px; width: 400px; top: 10%; bottom: unset; z-index: 200; .loginDialog_bd { height: 85px; line-height: 85px; padding-left: 20px; font-size: 14px; } } .dropdown { border: 1px solid #bebebe; border-radius: 3px; width: 100px; position: absolute; right: 20px; top: 229px; background: #fff; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); z-index: 100; overflow: auto; cursor: default; li { margin: 5px; :hover { background: #0190d4; color: #fff; } &.sceneActive { background: #0190d4; color: #fff; } } } .hideIframe { display: none; } </style> <template> <div class="bg"> <div class="login_hd"> <div class="login_hd_logo" :style="logoStyle"> <!-- <div class="login_hd_logo_tip">登录</div>--> </div> </div> <div class="login_bd"> <div class="login_bd_bg" :style="bgStyle"></div> <div class="login_form"> <div id="showQr" class="loginMainBox" :hidden="currLoginType != 'com'"> <img @click="changeQr" class="icon-qrcode" :src="scanIcon" :hidden="!config.isScan" /> <div class="login-tip" :hidden="!config.isScan"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">扫码登录</div> </div> </div> <div class="login_form_bd"> <div class="error_tips"></div> <input type="hidden" name="directAction" value="" /> <input type="hidden" name="refererurl" value="" /> <div class="login_field"> <label>用户名/邮箱</label> <input class="login_field_text" v-model="username" type="text" id="txtUserName" name="userName" placeholder="用户名" autofocus required autocomplete="off" @keyup.enter="loginFunc" /> <i class="fa fa-user"></i> </div> <div class="login_field"> <label>登录密码</label> <input class="login_field_text" v-model="password" type="text" onfocus="this.type='password'" id="txtPassword" name="password" placeholder="请输入密码" required autocomplete="off" @keyup.enter="loginFunc" /> <i class="fa fa-unlock-alt"></i> </div> <div class="saveCheckbox_box"> <label for="saveCheckbox" ><i :class=" 'fa ' + (isCheckRu ? 'fa-check-square-o' : 'fa-square-o') " ></i >记住用户名</label > <input type="checkbox" id="saveCheckbox" style="display: none" v-model="isCheckRu" @change="rememberUserEvent" /> <span class="forgetPw" @click="resetPw" ><i class="fa fa-lock"></i ><span style="margin-left: 5px">忘记密码?</span></span > </div> <div class="login_form_btn"> <div class="login_btn_area"> <button :style="btnStyle" :class="'loginBtn' + (loginLoading ? ' disabled' : '')" @click="loginFunc" > 登  录<i :hidden="!loginLoading" class="el-icon-loading" ></i> </button> </div> </div> <div hidden class="login_form_foot"> <span class="login_form_app" ><i class="miniIcon" data-type="app"></i ><span style="margin-left: 5px">APP下载</span></span > </div> </div> </div> <div id="showCom" class="loginMainBox" :hidden="!(config.isScan && currLoginType == 'scan')" > <div class="login-title">扫码登录</div> <div class="login-tip"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">密码登录</div> </div> </div> <img @click="changeCom" class="icon-qrcode" :src="comIcon" alt="" /> <div style=" position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); " > <!-- <img id="qrImg" src="./assets/logo.png" width="115px" height="115px" alt > --> <div class="login-error" style="display: none">登录失败!</div> <div class="qrcode-img" style="display: none"> <canvas height="130" width="130" style="height: 130px; width: 130px" ></canvas> <div class="qrcode-error"> <p>二维码失效</p> <button type="button" class="refresh">刷新二维码</button> </div> </div> </div> <div class="login-content nc-outer-box" style="display: none"> <div class="qrcode-login"> <div class="qrcode-success"> <!-- <img src="" alt=""/> --> <p>扫描成功！</p> <h4>请在手机上根据提示确认登录</h4> </div> </div> </div> <div class="qrDesc"> <div> <!-- <img src="" alt="" /> --> </div> <div class="qrDesc_right"> <span> 打开<a style="color: blue">海创科技App</a><br /> 扫一扫登录</span > </div> </div> </div> <div id="qrcode"></div> </div> </div> <div class="login_ft"> <div class="login_ft_main" id="login_copyright"> {{ this.config.copyright }} </div> </div> </div> </template> <script> import { baseLogin } from "./api/login"; import md5 from "md5"; import { projectName } from "./config"; import "font-awesome/css/font-awesome.css"; import comIcon from "./assets/computer.png" import scanIcon from "./assets/qrcode_3.png" import _loginLogoImg from "./assets/Logo1.png" import _loginBgImg from "./assets/background.png" import { setToken, removeToken, getUserId, setUserId, removeUserId, } from "./utils/auth.js"; export default { components: {}, data() { return { comIcon: comIcon, scanIcon: scanIcon, username: "", password: "", config: { title: window.customSysCofig?.loginTitle\|\|"中海创科技", loginLogoImg: window.customSysCofig?.loginLogo\|\|_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h\|\|56, loginLogoImg_width: window.customSysCofig?.loginLogo_w\|\|206, loginBgImg: window.customSysCofig?.loginBgImg\|\|_loginBgImg, copyright: window.customSysCofig?.copyright\|\|"版权所有 © 2020-2025 中海创科技", isScan: window.customSysCofig?.isScan\|\|false, mainColor:window.customSysCofig?.mainColor\|\|"#06c", }, currLoginType: "com", rememberUserId: getUserId(), loginLoading: false, }; }, computed: { btnStyle(){ return { "background-color": this.config.mainColor, }; }, bgStyle() { return { "background-image": "url(" + this.config.loginBgImg + ")", }; }, logoStyle() { return { "background-image": "url(" + this.config.loginLogoImg + ")", height: this.config.loginLogoImg_height + "px", width: this.config.loginLogoImg_width + "px", }; }, isCheckRu() { return !!this.rememberUserId; }, }, mounted() { if (this.isCheckRu) { this.username = this.rememberUserId; } }, methods: { loginFunc() { this.defaultLogin(); }, defaultLogin() { /this.$refs.loginForm.validate(valid => { if (valid) {/ if(!this.username.trim()){ this.$message.error("请输入用户名！"); return; }else if(!this.password){ this.$message.error("请输入密码！"); return; } removeToken(); this.loginLoading = true; baseLogin({ username: this.username.trim(), password: md5(this.password), }) .then((response) => { const data = response; setToken(data.token); if (this.isCheckRu) { setUserId(this.username); } else { removeUserId(); } location = window.HIVUI_SETTING.mainPageUrl ? window.HIVUI_SETTING.mainPageUrl : "/" + projectName + "/hivuiMain/index.html#/"; }) .catch((error) => { this.loginLoading = false; }); /} else { console.log("error submit!!"); return false; } });/ }, changeQr() { this.currLoginType = "scan"; }, changeCom() { this.currLoginType = "com"; }, rememberUserEvent() { if (this.isCheckRu) { this.rememberUserId = ""; } else { this.rememberUserId = true; } }, resetPw() {}, }, }; </script> <style lang="less"> { margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; } ul, li { list-style: none; } button { outline: none; border: none; } html, body { height: 100%; width: 100%; background: #fff; } input, body, button { font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial, helvetica, clean, sans-serif; } body { font-size: 14px; color: #333; } .bg { height: 100%; width: 100%; position: relative; } .login_hd, .login_ft { height: 100px; width: 100%; position: fixed; z-index: 99; left: 0; } .login_hd_main, .login_ft_main { width: 1000px; height: 100%; margin: 0 auto; } .login_hd { top: 0; .login_hd_logo { height: 60px; width: 265px; position: absolute; top: 50px; left: 50px; background: no-repeat; img { height: 80px; width: 80px; margin-right: 90px; margin-top: 10px; float: right; } .login_hd_logo_tip { height: 32px; width: 84px; display: inline-block; padding: 0 20px; font-size: 22px; color: #fff; position: absolute; right: -104px; top: 0; bottom: 0; margin: auto; &:after { content: ""; height: 20px; width: 2px; position: absolute; top: 0; bottom: 0; left: 0px; background-color: #8691a8; margin: auto; } } } } .login_bd { overflow: hidden; min-width: 1210px; position: relative; height: 100%; background-color: #fff; .login_bd_bg { background: no-repeat center center; background-size: 100%; position: absolute; height: 100%; width: 100%; } .login_form { width: 370px; height: 360px; margin: auto; position: absolute; top: 0; left: 40%; right: 0; bottom: 0; background-color: #fff; padding: 1px; z-index: 100; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5); .login_form_hd { color: #333; font-weight: bold; padding: 0 18px; box-sizing: border-box; width: 100%; font-size: 16px; text-align: left; line-height: 44px; height: 44px; border-bottom: 1px solid #ccc; } .login_form_bd { min-height: 231px; height: 100%; position: relative; padding: 24px 40px 0; .login_form_foot { line-height: 40px; margin-top: 20px; &i { color: #0190d4; } .login_form_app, .login_download_app { color: #0190d4; float: right; cursor: pointer; &:hover { color: #0f406c; &i { color: #0f406c; } } } .miniIcon { display: inline-block; height: 16px; width: 16px; background-position: center center; background-size: 100%; margin-left: 20px; vertical-align: middle; &[data-type="app"] { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNGM0JDQ0E0OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNGM0JDQ0E1OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0YzQkNDQTI5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0YzQkNDQTM5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65Y/jqAAADAElEQVR42gzOTWgcVRwA8P/7mJmdjzfZ2W6TNM2u3ebSYBNqNSaKiqCgbYUWGi8ebBPwIIrtRewHSNSIoIIIFU2VHop4aMFlPYiVXlI0EinkoEnapKZ1szG7ze52srOzb97Ozjx7/N1+iIfy0jz8PB//EUSog3OE3Auhj/ibhrnLBQlxh3VERe3p5YcP6m+9EKPLN+OPv/d8YXf6IdoCW0T3mRCuipue2qPoYIVqPdC7UlEx20w//iwjd3umSrimqqzs+k4m5m7gqPr4S/T0IX12qeYG7CG9bSxwV0j45pZO0NgUYTqFkOi0UtVAaBfP4idsv1R0jz3Z63nBSlnk0mqrjSILE49i22y3Oa1WNCjSRB32s6DHb6/d/rcwz18+CGeOK9vFf5b+CywK0bbScTok9fT5lkIRh4ln0JvjcHQUpVEj//cjHNTCQmN0TM3p2mod1n2NMWRYHCvJhLcB+/rWzp6AcrG5VNrIDHiFn9Zn54o/FnYslCoTr+z44g07m2oEHkQ1E1ebkMQbky/uDX1477Otwl9ZgJ1fT2WU4X2vPw/PZfunL/isGX973DZKD+RO/2EN9JY4Ogalapjq2339Fxi6s54/ZVfedSpI/rCIZi6L3F59YjxgpnZHGGjknFzc5gdyna8mmY1hasZ3es2Th8Td1cgTRtKK27fw8FNQuLd8MT8oGMCBD3j/+yE5IYffWcnP35IyaEl59XcJ48vmiLj2Z7zZuv3lNZk4WTZOhY99GBDjyHRcb1hmYlUYhRv3gwobHdRMc312beDtyXBwWDn9Te3CnEDOri4VpIyQfUZK2bAV229CnITGUjRktq586ibTGQ4Ppmfold8YdIOju1To1NDQo5/LShV4wA2qEwZlt8pE2gpq5w6v3SiNXJ2Ldu+JE4iLyA4IIJDok1/FpbwM+jQvWtbqmW7L2gyhikBbBMhKzJBDQaFbvJVCnBw70iDXv/toBdOFOnTLRIYGtchM9IbpThkP2U5UHbBoK6aRYmYkfm0/nH+V/C/AALR/bXSBworaAAAAAElFTkSuQmCC"); } &[data-type="desk"] { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGRUFBRDNFOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGRUFBRDNGOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZFQUFEM0M5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZFQUFEM0Q5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7jOkn1AAABSElEQVR42mL8//8/AymApXzd08fvfv36+58Rh4o///7LCrLZqPCEmQgCuYwMaWeINPv/TGOQDUC8OEkx2kzoHw63MTMxrjv/Yf/Nz1AnATE/JzMjIwMIYwO7rn3iZGWcHCGL0PDt1z9czrj7+qf7xNtAxslKDTMFbiCDCY+jP/3469B7C8J27L318O0vfBpuvfwhUXLpyftfEC7QFQpVl888/AZyEjsLFtdffvodGJRff/07dvcLkCvGy6IrzXnkDpCddmbN2Xf/cYD9Nz+Bwj3tTNOWZxARkA0hM+8JcDH//osSrEBuiau4uSI3hOupww8NpTJ3iXuvf37//Y8J1V3AuNeQ4AA6DMjWk+E0keeCxR9ewJJxFuiei4+/wUVwhtKbL39su28yMTGsz1QG2oCUQnCAE/e+1G58+vrzbzRxRlKTN0CAAQB1Gu32zyWjpAAAAABJRU5ErkJggg=="); } } } .error_tips { position: absolute; line-height: 30px; font-size: 12px; color: #f60000; text-align: center; top: 0; left: 0; right: 0; width: 100%; margin: auto; } .login_field { position: relative; padding-bottom: 20px; label { line-height: 35px; display: block; height: 35px; font-size: 16px; } i { font-size: 20px; color: #aaa; width: 35px; text-align: center; line-height: 40px; height: 40px; position: absolute; top: 35px; left: 0; margin: auto; } .login_field_text { height: 40px; width: 100%; line-height: 40px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 16px; color: #000; padding-left: 35px; box-sizing: border-box; font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial, helvetica, clean, sans-serif; &::input-placeholder { color: #ccc; } } } .saveCheckbox_box { height: 35px; line-height: 35px; padding-left: 30px; position: relative; top: 0px; label { cursor: pointer; user-select: none; i { font-size: 24px; position: absolute; top: 0; left: 2px; bottom: 0; margin: auto; height: 25px; width: 25px; color: #888; cursor: pointer; text-align: center; } } .occasion { float: right; &:after { content: ""; background: no-repeat; width: 14px; height: 18px; position: absolute; top: 30%; pointer-events: none; right: 1px; } #selectStyle { border: none; outline: none; width: 62px; appearance: none; -webkit-appearance: none; -moz-appearance: none; } } } .forgetPw { float: right; color: #0190d4; cursor: pointer; margin-left: 5px; &:hover { color: #0f406c; i { color: #0f406c; } } } .login_form_btn { font-size: 13px; margin-top: 20px; .loginBtn { /* background-color: #135189; / width: 100%; height: 40px; border: none; border-radius: 5px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; i { margin-left: 5px; } &:hover { filter: brightness(0.8); } &.disabled { background-color: #ccc!important; &:hover { filter: brightness(1); } } } } /二维码/ .qrCodeImg { / position: absolute; / height: 139px; width: 139px; / left:40% !important; right:0 !important; bottom:12%; / margin-top: 10px; margin-left: 85px; z-index: 999; } } .login_form_google { width: 280px; position: absolute; top: 317px; left: 0; bottom: 0; color: #fff; line-height: 20px; text-align: center; font-weight: bold; font-size: 13px; cursor: pointer; user-select: none; & > a { color: #fff; } } .loginMainBox { .login-title { height: 18px; line-height: 18px; font-size: 16px; color: #889aa4; margin-top: 12px; margin-left: 12px; padding-bottom: 8px; font-weight: 700; } .login-tip { position: absolute; top: 10px; right: 68px; display: block; .poptip { background-color: #e6f9fc; line-height: 16px; position: relative; z-index: 9999; border: 1px solid #0073be; padding: 5px 10px; .poptip-arrow { position: absolute; z-index: 10; top: 8px; right: 0; span { position: absolute; width: 0; height: 0; border-color: hsla(0, 0%, 100%, 0); border-style: solid; overflow: hidden; top: 0; left: 0; border-width: 6px 0 6px 6px; border-left-color: #e6f4fc; } em { position: absolute; width: 0; height: 0; border-color: hsla(0, 0%, 100%, 0); border-style: solid; overflow: hidden; top: 0; left: 0; border-width: 6px 0 6px 6px; border-left-color: #0073be; border-right-color: #0073be; } } .poptip-content { font-size: 12px; font-weight: 400; color: #0073be; } } } .qrDesc { font-size: 12px; color: #666; width: 160px; margin: auto; overflow: hidden; line-height: 17px; margin-top: 230px; .qrDesc_right { position: relative; left: 50px; top: -35px; } } .scanMain { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); .qrcode-img { position: relative; margin: 20px auto; font-size: 14px; -webkit-box-shadow: 0 0 8px #ddd; box-shadow: 0 0 8px #ddd; opacity: 1; width: 140px; height: 140px; .qrcode-error { background: hsla(0, 0%, 100%, 0.95); position: absolute; left: 0; top: 0; z-index: 9999; width: 100%; height: 100%; p { font-weight: 700; color: #222; margin-top: 38px; margin-bottom: 8px; text-align: center; } .refresh { background: #f40; width: 110px; height: 34px; line-height: 34px; text-align: center; margin: 0 auto; background: #ff9000; border-color: #ff9000; display: block; color: #fff; border-radius: 3px; font-size: 14px; cursor: pointer; } } canvas { margin: 5px; } } .login-error { text-align: center; color: #222; font-weight: 700; } } /二维码切换登录/ .icon-qrcode { position: absolute; right: 5px; top: 5px; font-size: 52px; line-height: 52px; cursor: pointer; width: 56px; z-index: 999; } .login-content { width: 100%; margin: 0 auto; padding-top: 55px; .qrcode-success { text-align: center; margin-top: 20px; .iconfont { color: #c5c5c5; font-size: 36px; } h4, p { margin-top: 10px; font-size: 14px; } } } } } } .login_ft { bottom: 0; .login_ft_main { line-height: 60px; text-align: center; font-size: 14px; } } /登录对话框*/ .loginDialog { height: 300px; width: 500px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 199; .loginDialog_hd { height: 35px; background-color: #0190d4; position: relative; h2 { height: 35px; line-height: 35px; font-size: 14px; color: #fff; padding: 0 20px; } .loginDialog_remove { position: absolute; top: 0; bottom: 0; right: 5px; height: 20px; width: 20px; background-color: #f30; cursor: pointer; margin: auto; text-align: center; &i { line-height: 20px; font-size: 18px; color: #fff; } &:hover { background-color: #f00; } } } .loginDialog_bd { width: 100%; height: 215px; background-color: #fff; } .loginDialog_ft { height: 50px; width: 100%; border-top: 1px solid #ccc; background-color: #f5f5f5; &:after { content: ""; display: block; clear: both; } button { display: block; padding: 0 12px; font-size: 14px; margin-top: 11px; height: 28px; line-height: 28px; text-align: center; cursor: pointer; color: #333333; background-color: #e9e9e9; float: right; margin-right: 10px; } .loginDialog_confirmBtn { background-color: #5cb85c; color: #fff; &:hover { background-color: #47a447; } } .loginDialog_cancelmBtn:hover { background-color: #ddd; } } } .loginMask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.5; z-index: 198; } #loginMsg { height: 170px; width: 400px; top: 10%; bottom: unset; z-index: 200; .loginDialog_bd { height: 85px; line-height: 85px; padding-left: 20px; font-size: 14px; } } .dropdown { border: 1px solid #bebebe; border-radius: 3px; width: 100px; position: absolute; right: 20px; top: 229px; background: #fff; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); z-index: 100; overflow: auto; cursor: default; li { margin: 5px; :hover { background: #0190d4; color: #fff; } &.sceneActive { background: #0190d4; color: #fff; } } } .hideIframe { display: none; } </style>

Ignore Space Show notes View

project/hivuiLogin/App.vue

<template>
  <div class="bg">
    <div class="login_hd">
      <div class="login_hd_logo" :style="logoStyle">
        
      </div>
    </div>
    <div class="login_bd">
      <div class="login_bd_bg" :style="bgStyle"></div>
      <div class="login_form">
        <div id="showQr" class="loginMainBox" :hidden="currLoginType != 'com'">
          <img
            @click="changeQr"
            class="icon-qrcode"
            :src="scanIcon"
            :hidden="!config.isScan"
          />
          <div class="login-tip" :hidden="!config.isScan">
            <div class="poptip">
              <div class="poptip-arrow">
                <em></em>
                <span></span>
              </div>
              <div class="poptip-content">扫码登录</div>
            </div>
          </div>
          <div class="login_form_bd">
            <div class="error_tips"></div>
            <input type="hidden" name="directAction" value="" />
            <input type="hidden" name="refererurl" value="" />
            <div class="login_field">
              <label>用户名/邮箱</label>
              <input
                class="login_field_text"
                v-model="username"
                type="text"
                id="txtUserName"
                name="userName"
                placeholder="用户名"
                autofocus
                required
                autocomplete="off"
                @keyup.enter="loginFunc"
              />
              <i class="fa fa-user"></i>
            </div>
            <div class="login_field">
              <label>登录密码</label>
              <input
                class="login_field_text"
                v-model="password"
                type="text"
                onfocus="this.type='password'"
                id="txtPassword"
                name="password"
                placeholder="请输入密码"
                required
                autocomplete="off"
                @keyup.enter="loginFunc"
              />
              <i class="fa fa-unlock-alt"></i>
            </div>
            <div class="saveCheckbox_box">
              <label for="saveCheckbox"
                ><i
                  :class="
                    'fa ' + (isCheckRu ? 'fa-check-square-o' : 'fa-square-o')
                  "
                ></i
                >记住用户名</label
              >
              <input
                type="checkbox"
                id="saveCheckbox"
                style="display: none"
                v-model="isCheckRu"
                @change="rememberUserEvent"
              />
              <span class="forgetPw" @click="resetPw"
                ><i class="fa fa-lock"></i
                ><span style="margin-left: 5px">忘记密码?</span></span
              >
            </div>
            <div class="login_form_btn">
              <div class="login_btn_area">
                <button
                  :style="btnStyle"
                  :class="'loginBtn' + (loginLoading ? ' disabled' : '')"
                  @click="loginFunc"
                >
                  登&nbsp;&nbsp;录<i
                    :hidden="!loginLoading"
                    class="el-icon-loading"
                  ></i>
                </button>
              </div>
            </div>
            <div hidden class="login_form_foot">
              <span class="login_form_app"
                ><i class="miniIcon" data-type="app"></i
                ><span style="margin-left: 5px">APP下载</span></span
              >
            </div>
          </div>
        </div>
        <div
          id="showCom"
          class="loginMainBox"
          :hidden="!(config.isScan && currLoginType == 'scan')"
        >
          <div class="login-title">扫码登录</div>
          <div class="login-tip">
            <div class="poptip">
              <div class="poptip-arrow">
                <em></em>
                <span></span>
              </div>
              <div class="poptip-content">密码登录</div>
            </div>
          </div>
          <img @click="changeCom" class="icon-qrcode" :src="comIcon" alt="" />
          <div
            style="
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            "
          >
            
            <div class="login-error" style="display: none">登录失败!</div>
            <div class="qrcode-img" style="display: none">
              <canvas
                height="130"
                width="130"
                style="height: 130px; width: 130px"
              ></canvas>
              <div class="qrcode-error">
                <p>二维码失效</p>
                <button type="button" class="refresh">刷新二维码</button>
              </div>
            </div>
          </div>
          <div class="login-content nc-outer-box" style="display: none">
            <div class="qrcode-login">
              <div class="qrcode-success">
                
                <p>扫描成功！</p>
                <h4>请在手机上根据提示确认登录</h4>
              </div>
            </div>
          </div>
          <div class="qrDesc">
            <div>
              
            </div>
            <div class="qrDesc_right">
              <span>
                打开<a style="color: blue">海创科技App</a><br />
                扫一扫登录</span
              >
            </div>
          </div>
        </div>
        <div id="qrcode"></div>
      </div>
    </div>
    <div class="login_ft">
      <div class="login_ft_main" id="login_copyright">
        {{ this.config.copyright }}
      </div>
    </div>
  </div>
</template>
<script>
import { baseLogin } from "./api/login";
import md5 from "md5";
import { projectName } from "./config";
import "font-awesome/css/font-awesome.css";
import comIcon from "./assets/computer.png"
import scanIcon from "./assets/qrcode_3.png"
import _loginLogoImg from "./assets/Logo1.png"
import _loginBgImg from "./assets/background.png"
import {
  setToken,
  removeToken,
  getUserId,
  setUserId,
  removeUserId,
} from "./utils/auth.js";
export default {
  components: {},
  data() {
    return {
      comIcon: comIcon,
      scanIcon: scanIcon,
      username: "",
      password: "",
      config: {
        title: window.customSysCofig?.loginTitle||"中海创科技",
        loginLogoImg: window.customSysCofig?.loginLogo||_loginLogoImg,
        loginLogoImg_height: window.customSysCofig?.loginLogo_h||56,
        loginLogoImg_width: window.customSysCofig?.loginLogo_w||206,
        loginBgImg: window.customSysCofig?.loginBgImg||_loginBgImg,
        copyright: window.customSysCofig?.copyright||"版权所有 © 2020-2025 中海创科技",
        isScan: window.customSysCofig?.isScan||false,
        mainColor:window.customSysCofig?.mainColor||"#06c",
      },
      currLoginType: "com",
      rememberUserId: getUserId(),
      loginLoading: false,
    };
  },
  computed: {
    btnStyle(){
      return {
        "background-color": this.config.mainColor,
      };
    },
    bgStyle() {
      return {
        "background-image": "url(" + this.config.loginBgImg + ")",
      };
    },
    logoStyle() {
      return {
        "background-image": "url(" + this.config.loginLogoImg + ")",
        height: this.config.loginLogoImg_height + "px",
        width: this.config.loginLogoImg_width + "px",
      };
    },
    isCheckRu() {
      return !!this.rememberUserId;
    },
  },
  mounted() {
    if (this.isCheckRu) {
      this.username = this.rememberUserId;
    }
  },
  methods: {
    loginFunc() {
      this.defaultLogin();
    },
    defaultLogin() {
      /*this.$refs.loginForm.validate(valid => {
                if (valid) {*/
      if(!this.username.trim()){
        this.$message.error("请输入用户名！");
        return;
      }else if(!this.password){
        this.$message.error("请输入密码！");
        return;
      }
      removeToken();
      this.loginLoading = true;
      baseLogin({
        username: this.username.trim(),
        password: md5(this.password),
      })
        .then((response) => {
          const data = response;
          setToken(data.token);
          if (this.isCheckRu) {
            setUserId(this.username);
          } else {
            removeUserId();
          }
          location = window.HIVUI_SETTING.mainPageUrl
            ? window.HIVUI_SETTING.mainPageUrl
            : "/" + projectName + "/hivuiMain/index.html#/";
        })
        .catch((error) => {
          this.loginLoading = false;
        });
      /*} else {
                    console.log("error submit!!");
                    return false;
                }
            });*/
    },
    changeQr() {
      this.currLoginType = "scan";
    },
    changeCom() {
      this.currLoginType = "com";
    },
    rememberUserEvent() {
      if (this.isCheckRu) {
        this.rememberUserId = "";
      } else {
        this.rememberUserId = true;
      }
    },
    resetPw() {},
  },
};
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
button {
  outline: none;
  border: none;
}
html,
body {
  height: 100%;
  width: 100%;
  background: #fff;
}
input,
body,
button {
  font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,
    helvetica, clean, sans-serif;
}
body {
  font-size: 14px;
  color: #333;
}
.bg {
  height: 100%;
  width: 100%;
  position: relative;
}
.login_hd,
.login_ft {
  height: 100px;
  width: 100%;
  position: fixed;
  z-index: 99;
  left: 0;
}
.login_hd_main,
.login_ft_main {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
}
.login_hd {
  top: 0;
  .login_hd_logo {
    height: 60px;
    width: 265px;
    position: absolute;
    top: 50px;
    left: 50px;
    background: no-repeat;
    img {
      height: 80px;
      width: 80px;
      margin-right: 90px;
      margin-top: 10px;
      float: right;
    }
    .login_hd_logo_tip {
      height: 32px;
      width: 84px;
      display: inline-block;
      padding: 0 20px;
      font-size: 22px;
      color: #fff;
      position: absolute;
      right: -104px;
      top: 0;
      bottom: 0;
      margin: auto;
      &:after {
        content: "";
        height: 20px;
        width: 2px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0px;
        background-color: #8691a8;
        margin: auto;
      }
    }
  }
}
.login_bd {
  overflow: hidden;
  min-width: 1210px;
  position: relative;
  height: 100%;
  background-color: #fff;
  .login_bd_bg {
    background: no-repeat center center;
    background-size: 100%;
    position: absolute;
    height: 100%;
    width: 100%;
  }
  .login_form {
    width: 370px;
    height: 360px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 40%;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding: 1px;
    z-index: 100;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
    .login_form_hd {
      color: #333;
      font-weight: bold;
      padding: 0 18px;
      box-sizing: border-box;
      width: 100%;
      font-size: 16px;
      text-align: left;
      line-height: 44px;
      height: 44px;
      border-bottom: 1px solid #ccc;
    }
    .login_form_bd {
      min-height: 231px;
      height: 100%;
      position: relative;
      padding: 24px 40px 0;
      .login_form_foot {
        line-height: 40px;
        margin-top: 20px;
        &i {
          color: #0190d4;
        }
        .login_form_app,
        .login_download_app {
          color: #0190d4;
          float: right;
          cursor: pointer;
          &:hover {
            color: #0f406c;
            &i {
              color: #0f406c;
            }
          }
        }
        .miniIcon {
          display: inline-block;
          height: 16px;
          width: 16px;
          background-position: center center;
          background-size: 100%;
          margin-left: 20px;
          vertical-align: middle;
          &[data-type="app"] {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNGM0JDQ0E0OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNGM0JDQ0E1OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0YzQkNDQTI5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0YzQkNDQTM5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65Y/jqAAADAElEQVR42gzOTWgcVRwA8P/7mJmdjzfZ2W6TNM2u3ebSYBNqNSaKiqCgbYUWGi8ebBPwIIrtRewHSNSIoIIIFU2VHop4aMFlPYiVXlI0EinkoEnapKZ1szG7ze52srOzb97Ozjx7/N1+iIfy0jz8PB//EUSog3OE3Auhj/ibhrnLBQlxh3VERe3p5YcP6m+9EKPLN+OPv/d8YXf6IdoCW0T3mRCuipue2qPoYIVqPdC7UlEx20w//iwjd3umSrimqqzs+k4m5m7gqPr4S/T0IX12qeYG7CG9bSxwV0j45pZO0NgUYTqFkOi0UtVAaBfP4idsv1R0jz3Z63nBSlnk0mqrjSILE49i22y3Oa1WNCjSRB32s6DHb6/d/rcwz18+CGeOK9vFf5b+CywK0bbScTok9fT5lkIRh4ln0JvjcHQUpVEj//cjHNTCQmN0TM3p2mod1n2NMWRYHCvJhLcB+/rWzp6AcrG5VNrIDHiFn9Zn54o/FnYslCoTr+z44g07m2oEHkQ1E1ebkMQbky/uDX1477Otwl9ZgJ1fT2WU4X2vPw/PZfunL/isGX973DZKD+RO/2EN9JY4Ogalapjq2339Fxi6s54/ZVfedSpI/rCIZi6L3F59YjxgpnZHGGjknFzc5gdyna8mmY1hasZ3es2Th8Td1cgTRtKK27fw8FNQuLd8MT8oGMCBD3j/+yE5IYffWcnP35IyaEl59XcJ48vmiLj2Z7zZuv3lNZk4WTZOhY99GBDjyHRcb1hmYlUYhRv3gwobHdRMc312beDtyXBwWDn9Te3CnEDOri4VpIyQfUZK2bAV229CnITGUjRktq586ibTGQ4Ppmfold8YdIOju1To1NDQo5/LShV4wA2qEwZlt8pE2gpq5w6v3SiNXJ2Ldu+JE4iLyA4IIJDok1/FpbwM+jQvWtbqmW7L2gyhikBbBMhKzJBDQaFbvJVCnBw70iDXv/toBdOFOnTLRIYGtchM9IbpThkP2U5UHbBoK6aRYmYkfm0/nH+V/C/AALR/bXSBworaAAAAAElFTkSuQmCC");
          }
          &[data-type="desk"] {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGRUFBRDNFOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGRUFBRDNGOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZFQUFEM0M5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZFQUFEM0Q5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7jOkn1AAABSElEQVR42mL8//8/AymApXzd08fvfv36+58Rh4o///7LCrLZqPCEmQgCuYwMaWeINPv/TGOQDUC8OEkx2kzoHw63MTMxrjv/Yf/Nz1AnATE/JzMjIwMIYwO7rn3iZGWcHCGL0PDt1z9czrj7+qf7xNtAxslKDTMFbiCDCY+jP/3469B7C8J27L318O0vfBpuvfwhUXLpyftfEC7QFQpVl888/AZyEjsLFtdffvodGJRff/07dvcLkCvGy6IrzXnkDpCddmbN2Xf/cYD9Nz+Bwj3tTNOWZxARkA0hM+8JcDH//osSrEBuiau4uSI3hOupww8NpTJ3iXuvf37//Y8J1V3AuNeQ4AA6DMjWk+E0keeCxR9ewJJxFuiei4+/wUVwhtKbL39su28yMTGsz1QG2oCUQnCAE/e+1G58+vrzbzRxRlKTN0CAAQB1Gu32zyWjpAAAAABJRU5ErkJggg==");
          }
        }
      }
      .error_tips {
        position: absolute;
        line-height: 30px;
        font-size: 12px;
        color: #f60000;
        text-align: center;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: auto;
      }
      .login_field {
        position: relative;
        padding-bottom: 20px;
        label {
          line-height: 35px;
          display: block;
          height: 35px;
          font-size: 16px;
        }
        i {
          font-size: 20px;
          color: #aaa;
          width: 35px;
          text-align: center;
          line-height: 40px;
          height: 40px;
          position: absolute;
          top: 35px;
          left: 0;
          margin: auto;
        }
        .login_field_text {
          height: 40px;
          width: 100%;
          line-height: 40px;
          border: 1px solid #ccc;
          border-radius: 5px;
          background-color: #fff;
          font-size: 16px;
          color: #000;
          padding-left: 35px;
          box-sizing: border-box;
          font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,
            helvetica, clean, sans-serif;
          &::input-placeholder {
            color: #ccc;
          }
        }
      }
      .saveCheckbox_box {
        height: 35px;
        line-height: 35px;
        padding-left: 30px;
        position: relative;
        top: 0px;
        label {
          cursor: pointer;
          user-select: none;
          i {
            font-size: 24px;
            position: absolute;
            top: 0;
            left: 2px;
            bottom: 0;
            margin: auto;
            height: 25px;
            width: 25px;
            color: #888;
            cursor: pointer;
            text-align: center;
          }
        }
        .occasion {
          float: right;
          &:after {
            content: "";
            background: no-repeat;
            width: 14px;
            height: 18px;
            position: absolute;
            top: 30%;
            pointer-events: none;
            right: 1px;
          }
          #selectStyle {
            border: none;
            outline: none;
            width: 62px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
          }
        }
      }
      .forgetPw {
        float: right;
        color: #0190d4;
        cursor: pointer;
        margin-left: 5px;
        &:hover {
          color: #0f406c;
          i {
            color: #0f406c;
          }
        }
      }
      .login_form_btn {
        font-size: 13px;
        margin-top: 20px;
        .loginBtn {
          /* background-color: #135189; */
          width: 100%;
          height: 40px;
          border: none;
          border-radius: 5px;
          color: #fff;
          font-size: 16px;
          font-weight: bold;
          text-align: center;
          cursor: pointer;
          display: inline-block;
          i {
            margin-left: 5px;
          }
          &:hover {
            filter: brightness(0.8);
          }
          &.disabled {
            background-color: #ccc!important;
            &:hover {
              filter: brightness(1);
            }
          }
        }
      }
      /*二维码*/
      .qrCodeImg {
        /* position: absolute; */
        height: 139px;
        width: 139px;
        /* left:40% !important;
                right:0 !important;
                bottom:12%; */
        margin-top: 10px;
        margin-left: 85px;
        z-index: 999;
      }
    }
    .login_form_google {
      width: 280px;
      position: absolute;
      top: 317px;
      left: 0;
      bottom: 0;
      color: #fff;
      line-height: 20px;
      text-align: center;
      font-weight: bold;
      font-size: 13px;
      cursor: pointer;
      user-select: none;
      & > a {
        color: #fff;
      }
    }
    .loginMainBox {
      .login-title {
        height: 18px;
        line-height: 18px;
        font-size: 16px;
        color: #889aa4;
        margin-top: 12px;
        margin-left: 12px;
        padding-bottom: 8px;
        font-weight: 700;
      }
      .login-tip {
        position: absolute;
        top: 10px;
        right: 68px;
        display: block;
        .poptip {
          background-color: #e6f9fc;
          line-height: 16px;
          position: relative;
          z-index: 9999;
          border: 1px solid #0073be;
          padding: 5px 10px;
          .poptip-arrow {
            position: absolute;
            z-index: 10;
            top: 8px;
            right: 0;
            span {
              position: absolute;
              width: 0;
              height: 0;
              border-color: hsla(0, 0%, 100%, 0);
              border-style: solid;
              overflow: hidden;
              top: 0;
              left: 0;
              border-width: 6px 0 6px 6px;
              border-left-color: #e6f4fc;
            }
            em {
              position: absolute;
              width: 0;
              height: 0;
              border-color: hsla(0, 0%, 100%, 0);
              border-style: solid;
              overflow: hidden;
              top: 0;
              left: 0;
              border-width: 6px 0 6px 6px;
              border-left-color: #0073be;
              border-right-color: #0073be;
            }
          }
          .poptip-content {
            font-size: 12px;
            font-weight: 400;
            color: #0073be;
          }
        }
      }
      .qrDesc {
        font-size: 12px;
        color: #666;
        width: 160px;
        margin: auto;
        overflow: hidden;
        line-height: 17px;
        margin-top: 230px;
        .qrDesc_right {
          position: relative;
          left: 50px;
          top: -35px;
        }
      }
      .scanMain {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .qrcode-img {
          position: relative;
          margin: 20px auto;
          font-size: 14px;
          -webkit-box-shadow: 0 0 8px #ddd;
          box-shadow: 0 0 8px #ddd;
          opacity: 1;
          width: 140px;
          height: 140px;
          .qrcode-error {
            background: hsla(0, 0%, 100%, 0.95);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9999;
            width: 100%;
            height: 100%;
            p {
              font-weight: 700;
              color: #222;
              margin-top: 38px;
              margin-bottom: 8px;
              text-align: center;
            }
            .refresh {
              background: #f40;
              width: 110px;
              height: 34px;
              line-height: 34px;
              text-align: center;
              margin: 0 auto;
              background: #ff9000;
              border-color: #ff9000;
              display: block;
              color: #fff;
              border-radius: 3px;
              font-size: 14px;
              cursor: pointer;
            }
          }
          canvas {
            margin: 5px;
          }
        }
        .login-error {
          text-align: center;
          color: #222;
          font-weight: 700;
        }
      }
      /*二维码切换登录*/
      .icon-qrcode {
        position: absolute;
        right: 5px;
        top: 5px;
        font-size: 52px;
        line-height: 52px;
        cursor: pointer;
        width: 56px;
        z-index: 999;
      }

.login-content {
        width: 100%;
        margin: 0 auto;
        padding-top: 55px;
        .qrcode-success {
          text-align: center;
          margin-top: 20px;
          .iconfont {
            color: #c5c5c5;
            font-size: 36px;
          }
          h4,
          p {
            margin-top: 10px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
.login_ft {
  bottom: 0;
  .login_ft_main {
    line-height: 60px;
    text-align: center;
    font-size: 14px;
  }
}
/*登录对话框*/
.loginDialog {
  height: 300px;
  width: 500px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 199;
  .loginDialog_hd {
    height: 35px;
    background-color: #0190d4;
    position: relative;
    h2 {
      height: 35px;
      line-height: 35px;
      font-size: 14px;
      color: #fff;
      padding: 0 20px;
    }
    .loginDialog_remove {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 5px;
      height: 20px;
      width: 20px;
      background-color: #f30;
      cursor: pointer;
      margin: auto;
      text-align: center;
      &i {
        line-height: 20px;
        font-size: 18px;
        color: #fff;
      }
      &:hover {
        background-color: #f00;
      }
    }
  }
  .loginDialog_bd {
    width: 100%;
    height: 215px;
    background-color: #fff;
  }
  .loginDialog_ft {
    height: 50px;
    width: 100%;
    border-top: 1px solid #ccc;
    background-color: #f5f5f5;
    &:after {
      content: "";
      display: block;
      clear: both;
    }
    button {
      display: block;
      padding: 0 12px;
      font-size: 14px;
      margin-top: 11px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      cursor: pointer;
      color: #333333;
      background-color: #e9e9e9;
      float: right;
      margin-right: 10px;
    }
    .loginDialog_confirmBtn {
      background-color: #5cb85c;
      color: #fff;
      &:hover {
        background-color: #47a447;
      }
    }
    .loginDialog_cancelmBtn:hover {
      background-color: #ddd;
    }
  }
}
.loginMask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.5;
  z-index: 198;
}
#loginMsg {
  height: 170px;
  width: 400px;
  top: 10%;
  bottom: unset;
  z-index: 200;
  .loginDialog_bd {
    height: 85px;
    line-height: 85px;
    padding-left: 20px;
    font-size: 14px;
  }
}
.dropdown {
  border: 1px solid #bebebe;
  border-radius: 3px;
  width: 100px;
  position: absolute;
  right: 20px;
  top: 229px;
  background: #fff;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 100;
  overflow: auto;
  cursor: default;
  li {
    margin: 5px;
    :hover {
      background: #0190d4;
      color: #fff;
    }
    &.sceneActive {
      background: #0190d4;
      color: #fff;
    }
  }
}
.hideIframe {
  display: none;
}
</style>

<template>
  <div class="bg">
    <div class="login_hd">
      <div class="login_hd_logo" :style="logoStyle">
        
      </div>
    </div>
    <div class="login_bd">
      <div class="login_bd_bg" :style="bgStyle"></div>
      <div class="login_form">
        <div id="showQr" class="loginMainBox" :hidden="currLoginType != 'com'">
          <img
            @click="changeQr"
            class="icon-qrcode"
            :src="scanIcon"
            :hidden="!config.isScan"
          />
          <div class="login-tip" :hidden="!config.isScan">
            <div class="poptip">
              <div class="poptip-arrow">
                <em></em>
                <span></span>
              </div>
              <div class="poptip-content">扫码登录</div>
            </div>
          </div>
          <div class="login_form_bd">
            <div class="error_tips"></div>
            <input type="hidden" name="directAction" value="" />
            <input type="hidden" name="refererurl" value="" />
            <div class="login_field">
              <label>用户名/邮箱</label>
              <input
                class="login_field_text"
                v-model="username"
                type="text"
                id="txtUserName"
                name="userName"
                placeholder="用户名"
                autofocus
                required
                autocomplete="off"
                @keyup.enter="loginFunc"
              />
              <i class="fa fa-user"></i>
            </div>
            <div class="login_field">
              <label>登录密码</label>
              <input
                class="login_field_text"
                v-model="password"
                type="text"
                onfocus="this.type='password'"
                id="txtPassword"
                name="password"
                placeholder="请输入密码"
                required
                autocomplete="off"
                @keyup.enter="loginFunc"
              />
              <i class="fa fa-unlock-alt"></i>
            </div>
            <div class="saveCheckbox_box">
              <label for="saveCheckbox"
                ><i
                  :class="
                    'fa ' + (isCheckRu ? 'fa-check-square-o' : 'fa-square-o')
                  "
                ></i
                >记住用户名</label
              >
              <input
                type="checkbox"
                id="saveCheckbox"
                style="display: none"
                v-model="isCheckRu"
                @change="rememberUserEvent"
              />
              <span class="forgetPw" @click="resetPw"
                ><i class="fa fa-lock"></i
                ><span style="margin-left: 5px">忘记密码?</span></span
              >
            </div>
            <div class="login_form_btn">
              <div class="login_btn_area">
                <button
                  :style="btnStyle"
                  :class="'loginBtn' + (loginLoading ? ' disabled' : '')"
                  @click="loginFunc"
                >
                  登&nbsp;&nbsp;录<i
                    :hidden="!loginLoading"
                    class="el-icon-loading"
                  ></i>
                </button>
              </div>
            </div>
            <div hidden class="login_form_foot">
              <span class="login_form_app"
                ><i class="miniIcon" data-type="app"></i
                ><span style="margin-left: 5px">APP下载</span></span
              >
            </div>
          </div>
        </div>
        <div
          id="showCom"
          class="loginMainBox"
          :hidden="!(config.isScan && currLoginType == 'scan')"
        >
          <div class="login-title">扫码登录</div>
          <div class="login-tip">
            <div class="poptip">
              <div class="poptip-arrow">
                <em></em>
                <span></span>
              </div>
              <div class="poptip-content">密码登录</div>
            </div>
          </div>
          <img @click="changeCom" class="icon-qrcode" :src="comIcon" alt="" />
          <div
            style="
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            "
          >
            
            <div class="login-error" style="display: none">登录失败!</div>
            <div class="qrcode-img" style="display: none">
              <canvas
                height="130"
                width="130"
                style="height: 130px; width: 130px"
              ></canvas>
              <div class="qrcode-error">
                <p>二维码失效</p>
                <button type="button" class="refresh">刷新二维码</button>
              </div>
            </div>
          </div>
          <div class="login-content nc-outer-box" style="display: none">
            <div class="qrcode-login">
              <div class="qrcode-success">
                
                <p>扫描成功！</p>
                <h4>请在手机上根据提示确认登录</h4>
              </div>
            </div>
          </div>
          <div class="qrDesc">
            <div>
              
            </div>
            <div class="qrDesc_right">
              <span>
                打开<a style="color: blue">海创科技App</a><br />
                扫一扫登录</span
              >
            </div>
          </div>
        </div>
        <div id="qrcode"></div>
      </div>
    </div>
    <div class="login_ft">
      <div class="login_ft_main" id="login_copyright">
        {{ this.config.copyright }}
      </div>
    </div>
  </div>
</template>
<script>
import { baseLogin } from "./api/login";
import md5 from "md5";
import { projectName } from "./config";
import "font-awesome/css/font-awesome.css";
import comIcon from "./assets/computer.png"
import scanIcon from "./assets/qrcode_3.png"
import _loginLogoImg from "./assets/Logo1.png"
import _loginBgImg from "./assets/background.png"
import {
  setToken,
  removeToken,
  getUserId,
  setUserId,
  removeUserId,
} from "./utils/auth.js";
export default {
  components: {},
  data() {
    return {
      comIcon: comIcon,
      scanIcon: scanIcon,
      username: "",
      password: "",
      config: {
        title: window.customSysCofig?.loginTitle||"中海创科技",
        loginLogoImg: window.customSysCofig?.loginLogo||_loginLogoImg,
        loginLogoImg_height: window.customSysCofig?.loginLogo_h||56,
        loginLogoImg_width: window.customSysCofig?.loginLogo_w||206,
        loginBgImg: window.customSysCofig?.loginBgImg||_loginBgImg,
        copyright: window.customSysCofig?.copyright||"版权所有 © 2020-2025 中海创科技",
        isScan: window.customSysCofig?.isScan||false,
        mainColor:window.customSysCofig?.mainColor||"#06c",
      },
      currLoginType: "com",
      rememberUserId: getUserId(),
      loginLoading: false,
    };
  },
  computed: {
    btnStyle(){
      return {
        "background-color": this.config.mainColor,
      };
    },
    bgStyle() {
      return {
        "background-image": "url(" + this.config.loginBgImg + ")",
      };
    },
    logoStyle() {
      return {
        "background-image": "url(" + this.config.loginLogoImg + ")",
        height: this.config.loginLogoImg_height + "px",
        width: this.config.loginLogoImg_width + "px",
      };
    },
    isCheckRu() {
      return !!this.rememberUserId;
    },
  },
  mounted() {
    if (this.isCheckRu) {
      this.username = this.rememberUserId;
    }
  },
  methods: {
    loginFunc() {
      this.defaultLogin();
    },
    defaultLogin() {
      /*this.$refs.loginForm.validate(valid => {
                if (valid) {*/
      if(!this.username.trim()){
        this.$message.error("请输入用户名！");
        return;
      }else if(!this.password){
        this.$message.error("请输入密码！");
        return;
      }
      removeToken();
      this.loginLoading = true;
      baseLogin({
        username: this.username.trim(),
        password: md5(this.password),
      })
        .then((response) => {
          const data = response;
          setToken(data.token);
          if (this.isCheckRu) {
            setUserId(this.username);
          } else {
            removeUserId();
          }
          location = window.HIVUI_SETTING.mainPageUrl
            ? window.HIVUI_SETTING.mainPageUrl
            : "/" + projectName + "/hivuiMain/index.html#/";
        })
        .catch((error) => {
          this.loginLoading = false;
        });
      /*} else {
                    console.log("error submit!!");
                    return false;
                }
            });*/
    },
    changeQr() {
      this.currLoginType = "scan";
    },
    changeCom() {
      this.currLoginType = "com";
    },
    rememberUserEvent() {
      if (this.isCheckRu) {
        this.rememberUserId = "";
      } else {
        this.rememberUserId = true;
      }
    },
    resetPw() {},
  },
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
button {
  outline: none;
  border: none;
}
html,
body {
  height: 100%;
  width: 100%;
  background: #fff;
}
input,
body,
button {
  font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,
    helvetica, clean, sans-serif;
}
body {
  font-size: 14px;
  color: #333;
}
.bg {
  height: 100%;
  width: 100%;
  position: relative;
}
.login_hd,
.login_ft {
  height: 100px;
  width: 100%;
  position: fixed;
  z-index: 99;
  left: 0;
}
.login_hd_main,
.login_ft_main {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
}
.login_hd {
  top: 0;
  .login_hd_logo {
    height: 60px;
    width: 265px;
    position: absolute;
    top: 50px;
    left: 50px;
    background: no-repeat;
    img {
      height: 80px;
      width: 80px;
      margin-right: 90px;
      margin-top: 10px;
      float: right;
    }
    .login_hd_logo_tip {
      height: 32px;
      width: 84px;
      display: inline-block;
      padding: 0 20px;
      font-size: 22px;
      color: #fff;
      position: absolute;
      right: -104px;
      top: 0;
      bottom: 0;
      margin: auto;
      &:after {
        content: "";
        height: 20px;
        width: 2px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0px;
        background-color: #8691a8;
        margin: auto;
      }
    }
  }
}
.login_bd {
  overflow: hidden;
  min-width: 1210px;
  position: relative;
  height: 100%;
  background-color: #fff;
  .login_bd_bg {
    background: no-repeat center center;
    background-size: 100%;
    position: absolute;
    height: 100%;
    width: 100%;
  }
  .login_form {
    width: 370px;
    height: 360px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 40%;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding: 1px;
    z-index: 100;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
    .login_form_hd {
      color: #333;
      font-weight: bold;
      padding: 0 18px;
      box-sizing: border-box;
      width: 100%;
      font-size: 16px;
      text-align: left;
      line-height: 44px;
      height: 44px;
      border-bottom: 1px solid #ccc;
    }
    .login_form_bd {
      min-height: 231px;
      height: 100%;
      position: relative;
      padding: 24px 40px 0;
      .login_form_foot {
        line-height: 40px;
        margin-top: 20px;
        &i {
          color: #0190d4;
        }
        .login_form_app,
        .login_download_app {
          color: #0190d4;
          float: right;
          cursor: pointer;
          &:hover {
            color: #0f406c;
            &i {
              color: #0f406c;
            }
          }
        }
        .miniIcon {
          display: inline-block;
          height: 16px;
          width: 16px;
          background-position: center center;
          background-size: 100%;
          margin-left: 20px;
          vertical-align: middle;
          &[data-type="app"] {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNGM0JDQ0E0OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNGM0JDQ0E1OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0YzQkNDQTI5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0YzQkNDQTM5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65Y/jqAAADAElEQVR42gzOTWgcVRwA8P/7mJmdjzfZ2W6TNM2u3ebSYBNqNSaKiqCgbYUWGi8ebBPwIIrtRewHSNSIoIIIFU2VHop4aMFlPYiVXlI0EinkoEnapKZ1szG7ze52srOzb97Ozjx7/N1+iIfy0jz8PB//EUSog3OE3Auhj/ibhrnLBQlxh3VERe3p5YcP6m+9EKPLN+OPv/d8YXf6IdoCW0T3mRCuipue2qPoYIVqPdC7UlEx20w//iwjd3umSrimqqzs+k4m5m7gqPr4S/T0IX12qeYG7CG9bSxwV0j45pZO0NgUYTqFkOi0UtVAaBfP4idsv1R0jz3Z63nBSlnk0mqrjSILE49i22y3Oa1WNCjSRB32s6DHb6/d/rcwz18+CGeOK9vFf5b+CywK0bbScTok9fT5lkIRh4ln0JvjcHQUpVEj//cjHNTCQmN0TM3p2mod1n2NMWRYHCvJhLcB+/rWzp6AcrG5VNrIDHiFn9Zn54o/FnYslCoTr+z44g07m2oEHkQ1E1ebkMQbky/uDX1477Otwl9ZgJ1fT2WU4X2vPw/PZfunL/isGX973DZKD+RO/2EN9JY4Ogalapjq2339Fxi6s54/ZVfedSpI/rCIZi6L3F59YjxgpnZHGGjknFzc5gdyna8mmY1hasZ3es2Th8Td1cgTRtKK27fw8FNQuLd8MT8oGMCBD3j/+yE5IYffWcnP35IyaEl59XcJ48vmiLj2Z7zZuv3lNZk4WTZOhY99GBDjyHRcb1hmYlUYhRv3gwobHdRMc312beDtyXBwWDn9Te3CnEDOri4VpIyQfUZK2bAV229CnITGUjRktq586ibTGQ4Ppmfold8YdIOju1To1NDQo5/LShV4wA2qEwZlt8pE2gpq5w6v3SiNXJ2Ldu+JE4iLyA4IIJDok1/FpbwM+jQvWtbqmW7L2gyhikBbBMhKzJBDQaFbvJVCnBw70iDXv/toBdOFOnTLRIYGtchM9IbpThkP2U5UHbBoK6aRYmYkfm0/nH+V/C/AALR/bXSBworaAAAAAElFTkSuQmCC");
          }
          &[data-type="desk"] {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGRUFBRDNFOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGRUFBRDNGOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZFQUFEM0M5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZFQUFEM0Q5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7jOkn1AAABSElEQVR42mL8//8/AymApXzd08fvfv36+58Rh4o///7LCrLZqPCEmQgCuYwMaWeINPv/TGOQDUC8OEkx2kzoHw63MTMxrjv/Yf/Nz1AnATE/JzMjIwMIYwO7rn3iZGWcHCGL0PDt1z9czrj7+qf7xNtAxslKDTMFbiCDCY+jP/3469B7C8J27L318O0vfBpuvfwhUXLpyftfEC7QFQpVl888/AZyEjsLFtdffvodGJRff/07dvcLkCvGy6IrzXnkDpCddmbN2Xf/cYD9Nz+Bwj3tTNOWZxARkA0hM+8JcDH//osSrEBuiau4uSI3hOupww8NpTJ3iXuvf37//Y8J1V3AuNeQ4AA6DMjWk+E0keeCxR9ewJJxFuiei4+/wUVwhtKbL39su28yMTGsz1QG2oCUQnCAE/e+1G58+vrzbzRxRlKTN0CAAQB1Gu32zyWjpAAAAABJRU5ErkJggg==");
          }
        }
      }
      .error_tips {
        position: absolute;
        line-height: 30px;
        font-size: 12px;
        color: #f60000;
        text-align: center;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: auto;
      }
      .login_field {
        position: relative;
        padding-bottom: 20px;
        label {
          line-height: 35px;
          display: block;
          height: 35px;
          font-size: 16px;
        }
        i {
          font-size: 20px;
          color: #aaa;
          width: 35px;
          text-align: center;
          line-height: 40px;
          height: 40px;
          position: absolute;
          top: 35px;
          left: 0;
          margin: auto;
        }
        .login_field_text {
          height: 40px;
          width: 100%;
          line-height: 40px;
          border: 1px solid #ccc;
          border-radius: 5px;
          background-color: #fff;
          font-size: 16px;
          color: #000;
          padding-left: 35px;
          box-sizing: border-box;
          font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,
            helvetica, clean, sans-serif;
          &::input-placeholder {
            color: #ccc;
          }
        }
      }
      .saveCheckbox_box {
        height: 35px;
        line-height: 35px;
        padding-left: 30px;
        position: relative;
        top: 0px;
        label {
          cursor: pointer;
          user-select: none;
          i {
            font-size: 24px;
            position: absolute;
            top: 0;
            left: 2px;
            bottom: 0;
            margin: auto;
            height: 25px;
            width: 25px;
            color: #888;
            cursor: pointer;
            text-align: center;
          }
        }
        .occasion {
          float: right;
          &:after {
            content: "";
            background: no-repeat;
            width: 14px;
            height: 18px;
            position: absolute;
            top: 30%;
            pointer-events: none;
            right: 1px;
          }
          #selectStyle {
            border: none;
            outline: none;
            width: 62px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
          }
        }
      }
      .forgetPw {
        float: right;
        color: #0190d4;
        cursor: pointer;
        margin-left: 5px;
        &:hover {
          color: #0f406c;
          i {
            color: #0f406c;
          }
        }
      }
      .login_form_btn {
        font-size: 13px;
        margin-top: 20px;
        .loginBtn {
          /* background-color: #135189; */
          width: 100%;
          height: 40px;
          border: none;
          border-radius: 5px;
          color: #fff;
          font-size: 16px;
          font-weight: bold;
          text-align: center;
          cursor: pointer;
          display: inline-block;
          i {
            margin-left: 5px;
          }
          &:hover {
            filter: brightness(0.8);
          }
          &.disabled {
            background-color: #ccc!important;
            &:hover {
              filter: brightness(1);
            }
          }
        }
      }
      /*二维码*/
      .qrCodeImg {
        /* position: absolute; */
        height: 139px;
        width: 139px;
        /* left:40% !important;
                right:0 !important;
                bottom:12%; */
        margin-top: 10px;
        margin-left: 85px;
        z-index: 999;
      }
    }
    .login_form_google {
      width: 280px;
      position: absolute;
      top: 317px;
      left: 0;
      bottom: 0;
      color: #fff;
      line-height: 20px;
      text-align: center;
      font-weight: bold;
      font-size: 13px;
      cursor: pointer;
      user-select: none;
      & > a {
        color: #fff;
      }
    }
    .loginMainBox {
      .login-title {
        height: 18px;
        line-height: 18px;
        font-size: 16px;
        color: #889aa4;
        margin-top: 12px;
        margin-left: 12px;
        padding-bottom: 8px;
        font-weight: 700;
      }
      .login-tip {
        position: absolute;
        top: 10px;
        right: 68px;
        display: block;
        .poptip {
          background-color: #e6f9fc;
          line-height: 16px;
          position: relative;
          z-index: 9999;
          border: 1px solid #0073be;
          padding: 5px 10px;
          .poptip-arrow {
            position: absolute;
            z-index: 10;
            top: 8px;
            right: 0;
            span {
              position: absolute;
              width: 0;
              height: 0;
              border-color: hsla(0, 0%, 100%, 0);
              border-style: solid;
              overflow: hidden;
              top: 0;
              left: 0;
              border-width: 6px 0 6px 6px;
              border-left-color: #e6f4fc;
            }
            em {
              position: absolute;
              width: 0;
              height: 0;
              border-color: hsla(0, 0%, 100%, 0);
              border-style: solid;
              overflow: hidden;
              top: 0;
              left: 0;
              border-width: 6px 0 6px 6px;
              border-left-color: #0073be;
              border-right-color: #0073be;
            }
          }
          .poptip-content {
            font-size: 12px;
            font-weight: 400;
            color: #0073be;
          }
        }
      }
      .qrDesc {
        font-size: 12px;
        color: #666;
        width: 160px;
        margin: auto;
        overflow: hidden;
        line-height: 17px;
        margin-top: 230px;
        .qrDesc_right {
          position: relative;
          left: 50px;
          top: -35px;
        }
      }
      .scanMain {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .qrcode-img {
          position: relative;
          margin: 20px auto;
          font-size: 14px;
          -webkit-box-shadow: 0 0 8px #ddd;
          box-shadow: 0 0 8px #ddd;
          opacity: 1;
          width: 140px;
          height: 140px;
          .qrcode-error {
            background: hsla(0, 0%, 100%, 0.95);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9999;
            width: 100%;
            height: 100%;
            p {
              font-weight: 700;
              color: #222;
              margin-top: 38px;
              margin-bottom: 8px;
              text-align: center;
            }
            .refresh {
              background: #f40;
              width: 110px;
              height: 34px;
              line-height: 34px;
              text-align: center;
              margin: 0 auto;
              background: #ff9000;
              border-color: #ff9000;
              display: block;
              color: #fff;
              border-radius: 3px;
              font-size: 14px;
              cursor: pointer;
            }
          }
          canvas {
            margin: 5px;
          }
        }
        .login-error {
          text-align: center;
          color: #222;
          font-weight: 700;
        }
      }
      /*二维码切换登录*/
      .icon-qrcode {
        position: absolute;
        right: 5px;
        top: 5px;
        font-size: 52px;
        line-height: 52px;
        cursor: pointer;
        width: 56px;
        z-index: 999;
      }

Ignore Space Show notes View project/setting/desktop/sysAssets/login_bg/png/1.0.0/login_bg.png

Ignore Space Show notes View project/setting/desktop/sysAssets/login_logo/png/1.0.0/login_logo.png

Ignore Space Show notes View project/setting/desktop/sysAssets/sy_loading/png/1.0.0/sy_loading.png

Ignore Space Show notes View project/setting/desktop/sysAssets/sy_logo/png/1.0.0/sy_logo.png

Ignore Space Show notes View template.html 0 → 100644
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>EAP5-Admin-Login</title> <% if(htmlWebpackPlugin.vite){%> <!--预览时公共库--> <link rel="stylesheet" href="/assets_platform/element-ui/index.css"> <script src="/assets_platform/vue/vue.min.js"></script> <script src="/assets_platform/vuex/vuex.min.js"></script> <script src="/assets_platform/vue-router/vue-router.min.js"></script> <script src="/assets_platform/element-ui/index.js"></script> <script src="/assets_platform/eap/eap.umd.min.js"></script> <%}%> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="/${serverName}/render/assets_platform/element-ui/index.css"> <script src="/${serverName}/render/assets_platform/vue/vue.min.js"></script> <script src="/${serverName}/render/assets_platform/vuex/vuex.min.js"></script> <script src="/${serverName}/render/assets_platform/vue-router/vue-router.min.js"></script> <script src="/${serverName}/render/assets_platform/element-ui/index.js"></script> <!--发布时公共库--> <script src="/${serverName}/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="/${serverName}/render/assets_platform/eap/eap.umd.min.js"></script> <%}%> </head> <body> <div id="app"></div> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="./index.js"></script> <%}%> <!-- built files will be auto injected --> </body> </html>

Ignore Space Show notes View

template.html 0 → 100644

<!DOCTYPE html>
<html>

</head>

</html>

Show line notes below